/* =============================================================================
   BunnyConvert · Aurora Design System
   Ported from SellerFish (lucky-valkyrie-9b000c.netlify.app) — same architecture,
   only the brand hues swapped to violet → pink (#8e63d7 → #df6dc6).
   Loaded BEFORE styles.css so existing rules can override on a case-by-case basis.
   ============================================================================= */

/* Fonts — Plus Jakarta Sans (display/UI) + JetBrains Mono (numbers/data) */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* Aurora design system tokens — dark-first */
  --bg:               240 17% 4%;
  --fg:               240 14% 95%;
  --card:             240 16% 7%;
  --card-fg:          240 14% 95%;
  --popover:          240 16% 7%;
  --muted:            240 12% 10%;
  --muted-fg:         240 8% 60%;

  /* BunnyConvert brand — violet primary, pink accent */
  --violet:           268 56% 62%;       /* #8e63d7 */
  --violet-light:     268 73% 80%;
  --pink:             309 60% 65%;       /* #df6dc6 */
  --primary:          268 56% 62%;
  --primary-fg:       0 0% 100%;
  --accent:           309 60% 65%;
  --accent-fg:        0 0% 100%;

  /* State colors */
  --destructive:      354 73% 65%;
  --destructive-fg:   0 0% 100%;
  --success:          152 50% 56%;
  --success-fg:       0 0% 100%;
  --warning:          41 78% 63%;
  --warning-fg:       240 17% 4%;
  --green:            152 50% 56%;
  --amber:            41 78% 63%;
  --red:              354 73% 65%;

  /* Borders + inputs */
  --border:           240 16% 13%;
  --border-strong:    240 14% 19%;
  --input:            240 16% 13%;
  --ring:             268 56% 62%;
  --radius:           0.625rem;

  /* Gradients */
  --gradient-brand:        linear-gradient(135deg, hsl(var(--violet)) 0%, hsl(var(--pink)) 100%);
  --gradient-brand-soft:   linear-gradient(135deg, hsl(var(--violet) / 0.12), hsl(var(--pink) / 0.08));
  --gradient-text:         linear-gradient(120deg, hsl(0 0% 100%) 0%, hsl(var(--violet-light)) 100%);
  --gradient-text-warm:    linear-gradient(120deg, hsl(0 0% 100%) 0%, hsl(var(--pink)) 100%);

  /* Shadows */
  --shadow-card:           0 4px 24px -8px hsl(0 0% 0% / 0.4);
  --shadow-elev:           0 10px 40px -10px hsl(0 0% 0% / 0.5);
  --shadow-brand:          0 10px 32px -10px hsl(var(--violet) / 0.5);
  --shadow-brand-strong:   0 20px 60px -20px hsl(var(--violet) / 0.55),
                           0 0 0 1px hsl(0 0% 100% / 0.04) inset;

  /* Typography */
  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
}

/* Light mode is a thin override (kept for future use). */
.light {
  --bg:        240 20% 99%;
  --fg:        240 17% 8%;
  --card:      0 0% 100%;
  --card-fg:   240 17% 8%;
  --popover:   0 0% 100%;
  --muted:     240 14% 95%;
  --muted-fg:  240 8% 40%;
  --border:    240 14% 90%;
  --border-strong: 240 14% 82%;
  --input:     240 14% 90%;
}

html { color-scheme: dark; }

/* -----------------------------------------------------------------------------
   Body — Aurora ambient: three radial washes + faint grid.
   The original BunnyConvert CSS also paints the body; we layer this on top
   via the .aurora-bg class so we can opt into the new look surface-by-surface.
   ----------------------------------------------------------------------------- */
body.aurora-bg {
  background-color: hsl(var(--bg)) !important;
  background-image:
    radial-gradient(ellipse 1600px 900px at 50% -10%,
      hsl(var(--violet) / 0.32) 0%,
      hsl(var(--violet) / 0.12) 30%,
      transparent 65%),
    radial-gradient(circle 900px at calc(100% + 50px) 25%,
      hsl(var(--pink) / 0.18) 0%,
      transparent 60%),
    radial-gradient(circle 700px at -10% 70%,
      hsl(var(--violet) / 0.12) 0%,
      transparent 60%),
    linear-gradient(hsl(0 0% 100% / 0.018) 1px, transparent 1px),
    linear-gradient(90deg, hsl(0 0% 100% / 0.018) 1px, transparent 1px) !important;
  background-size: auto, auto, auto, 64px 64px, 64px 64px !important;
  background-attachment: fixed, fixed, fixed, fixed, fixed !important;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat !important;
  color: hsl(var(--fg));
  font-family: var(--font-display);
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

/* Strongly cascade Plus Jakarta to every text node — legacy styles.css sets
   system-ui in many places, and we want the Aurora display face to win without
   having to chase every selector. Form controls inherit too. */
body.aurora-bg,
body.aurora-bg button,
body.aurora-bg input,
body.aurora-bg textarea,
body.aurora-bg select {
  font-family: var(--font-display);
}
body.aurora-bg h1,
body.aurora-bg h2,
body.aurora-bg h3,
body.aurora-bg h4,
body.aurora-bg h5,
body.aurora-bg h6 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
}
body.aurora-bg code,
body.aurora-bg pre,
body.aurora-bg .mono,
body.aurora-bg .tabular-nums {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum', 'cv11';
}
body.aurora-bg ::selection {
  background: hsl(var(--violet) / 0.35);
  color: hsl(var(--fg));
}

/* -----------------------------------------------------------------------------
   Reusable Aurora components — directly portable to plain HTML markup.
   ----------------------------------------------------------------------------- */

/* v245 — gradient-text was the "impeccable absolute ban" violation that
   gave the landing a generic AI-SaaS feel. Emphasis now comes from weight
   + a calibrated accent color (violet/pink/mint depending on intent).
   Class names preserved so all existing HTML keeps working — only the
   paint changes. */
.text-gradient-brand,
.text-gradient-warm,
.text-gradient-mint {
  background: none;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: currentColor;
  background-clip: initial;
  font-weight: 800;
}
.text-gradient-brand { color: hsl(var(--violet)); }
.text-gradient-warm  { color: hsl(var(--pink));  }
.text-gradient-mint  { color: hsl(var(--green)); }

/* Standard Aurora card — flat, no glassmorphism */
.aurora-card {
  border-radius: 0.75rem;
  border: 1px solid hsl(var(--border));
  background-color: hsl(var(--card));
}
.aurora-card-soft {
  border-radius: 0.5rem;
  border: 1px solid hsl(var(--border) / 0.6);
  background-color: hsl(var(--muted));
}

/* Brand mark — gradient square with inner cutout (the SellerFish logo glyph,
   re-tinted in BunnyConvert's violet/pink) */
.aurora-mark {
  position: relative;
  display: inline-block;
  border-radius: 8px;
  background: linear-gradient(135deg, hsl(var(--violet)), hsl(var(--pink)));
  box-shadow: 0 0 24px -8px hsl(var(--violet) / 0.6);
  flex-shrink: 0;
}
.aurora-mark::after {
  content: '';
  position: absolute;
  inset: 22%;
  border-radius: 25%;
  background: hsl(var(--bg));
}
.aurora-mark.sm { width: 22px; height: 22px; border-radius: 6px; }
.aurora-mark.md { width: 28px; height: 28px; }
.aurora-mark.lg { width: 40px; height: 40px; border-radius: 10px; }
.aurora-mark.xl { width: 56px; height: 56px; border-radius: 14px; }

/* Brand wordmark — glyph + text together */
.brand-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  color: hsl(var(--fg));
  letter-spacing: -0.01em;
}

/* Mono pill — used for labels, kbd shortcuts, small status tags */
.mono-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  background: hsl(var(--muted));
  border: 1px solid hsl(var(--border));
  color: hsl(var(--muted-fg));
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}

/* Section eyebrow — bigger than a kbd pill, used above tool-section-title to
   give each section a "01 / CONVERT" line in JetBrains Mono. */
.tool-section-eyebrow {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 5px 10px;
  font-size: 11px;
  letter-spacing: 0.10em;
}

/* Auth + form inputs */
.aurora-input {
  width: 100%;
  border-radius: 10px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  padding: 10px 14px;
  font-size: 14px;
  font-family: var(--font-display);
  color: hsl(var(--fg));
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.aurora-input::placeholder { color: hsl(var(--muted-fg) / 0.7); }
.aurora-input:focus {
  border-color: hsl(var(--violet));
  box-shadow: 0 0 0 3px hsl(var(--violet) / 0.20);
}

/* Live indicator with pulse */
.live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: hsl(var(--green));
  box-shadow: 0 0 0 0 hsl(var(--green) / 0.5);
  animation: aurora-live-pulse 2s infinite;
}

/* Primary CTA — Aurora gradient button */
.aurora-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 12px;
  border: none;
  background: var(--gradient-brand);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.005em;
  cursor: pointer;
  box-shadow: var(--shadow-brand);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.aurora-cta:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-brand-strong);
}
.aurora-cta-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 12px;
  border: 1px solid hsl(var(--border-strong));
  background: hsl(var(--card));
  color: hsl(var(--fg));
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.aurora-cta-ghost:hover {
  border-color: hsl(var(--violet) / 0.7);
  background: hsl(var(--muted));
}

/* Container widths — match SellerFish */
.container-tight  { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.container-narrow { width: 100%; max-width: 820px;  margin: 0 auto; padding: 0 24px; }
.container-wide   { width: 100%; max-width: 1380px; margin: 0 auto; padding: 0 24px; }

/* Tabular numbers */
.tabular { font-variant-numeric: tabular-nums; }

/* Keyframes */
@keyframes aurora-live-pulse {
  0%   { box-shadow: 0 0 0 0 hsl(var(--green) / 0.5); }
  70%  { box-shadow: 0 0 0 8px hsl(var(--green) / 0); }
  100% { box-shadow: 0 0 0 0 hsl(var(--green) / 0); }
}
@keyframes aurora-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes aurora-slide-in {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes aurora-notif-in {
  from { opacity: 0; transform: translateX(-8px) scale(0.98); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes aurora-kaching-pop {
  0%   { opacity: 0; transform: translateY(-12px) scale(0.96); }
  60%  { opacity: 1; transform: translateY(2px) scale(1.015); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes aurora-scroll-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.fade-in    { animation: aurora-fade-in    0.4s ease-out forwards; }
.slide-in   { animation: aurora-slide-in   0.3s ease-out forwards; }
.notif-in   { animation: aurora-notif-in   0.5s ease-out forwards; }
.kaching-pop{ animation: aurora-kaching-pop 0.5s ease-out forwards; }

/* SpotlightCard — cursor-following glow.  The JS partner sets --mx / --my CSS
   variables in pixels on the element. */
.spotlight-card {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  transition: border-color 0.3s ease;
}
.spotlight-card:hover {
  border-color: hsl(var(--border-strong));
}
.spotlight-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(480px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255,255,255,0.06), transparent 40%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.spotlight-card:hover::before { opacity: 1; }
.spotlight-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.04), transparent 30%, transparent 70%, rgba(255,255,255,0.025));
  opacity: 0;
  transition: opacity 0.3s ease;
}
.spotlight-card:hover::after { opacity: 1; }

/* Browser frame — fake chrome to wrap mockups in the hero. */
.browser-frame {
  border-radius: 1rem;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  overflow: hidden;
  box-shadow: var(--shadow-brand-strong);
}
.browser-frame-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: hsl(var(--muted) / 0.6);
  border-bottom: 1px solid hsl(var(--border));
}
.browser-frame-dot { width: 10px; height: 10px; border-radius: 50%; background: hsl(var(--border-strong)); }
.browser-frame-url {
  flex: 1;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: -0.01em;
  color: hsl(var(--muted-fg));
}
.browser-frame-body { padding: 20px; }
@media (min-width: 640px) { .browser-frame-body { padding: 24px; } }

/* Minimal scrollbar */
.aurora-bg ::-webkit-scrollbar { width: 8px; height: 8px; }
.aurora-bg ::-webkit-scrollbar-track { background: transparent; }
.aurora-bg ::-webkit-scrollbar-thumb {
  background: hsl(var(--border-strong));
  border-radius: 4px;
}
.aurora-bg ::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-fg) / 0.5); }

/* ============================================================================
   AURORA ONBOARDING OVERRIDE — DEPRECATED .ob-v6 BLOCK REMOVED
   The dialog now uses .ob-v7 (markup rebuilt). The legacy v6 rules that lived
   here were dead CSS — none of them matched anything. Active v7 rules live
   further down in this file. Agent 4 QA audit, 2026-05-14.
   ============================================================================ */

.ob-v6_removed_legacy_marker { display: none; }
/* Step counter — pill inserted via JS at slide top */
.ob-step-counter {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: hsl(var(--muted-fg));
  background: hsl(var(--card) / 0.75);
  border: 1px solid hsl(var(--border));
  padding: 5px 12px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  z-index: 5;
  pointer-events: none;
}
.ob-step-counter .ob-step-now {
  color: hsl(var(--violet-light));
  font-weight: 700;
}
.ob-step-counter .ob-step-sep { color: hsl(var(--muted-fg) / 0.4); }

/* Social proof — live-dot + count on slide 0 */
.ob-social-proof {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: hsl(var(--muted-fg));
  letter-spacing: 0.02em;
}
.ob-social-proof strong { color: hsl(var(--fg)); font-weight: 700; }

/* ============================================================================
   AURORA HERO BAND OVERRIDE
   Replaces the original "hero-band" landing intro with SellerFish-Aurora layout:
   left = gradient headline + live-dot eyebrow + meta checks,
   right = fake browser frame with 4 KPI stats.
   ============================================================================ */

.hero-band.hero-aurora {
  display: grid !important;
  grid-template-columns: 1.1fr 0.95fr !important;
  gap: 32px !important;
  padding: 32px !important;
  background: linear-gradient(135deg, hsl(var(--violet) / 0.08), hsl(var(--pink) / 0.05)) !important;
  border: 1px solid hsl(var(--border-strong)) !important;
  border-radius: 20px !important;
  overflow: hidden;
  position: relative;
}
.hero-band.hero-aurora::before {
  content: "";
  position: absolute;
  top: -120px;
  left: -80px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: hsl(var(--violet) / 0.18);
  filter: blur(80px);
  pointer-events: none;
}
.hero-band.hero-aurora::after {
  content: "";
  position: absolute;
  bottom: -100px;
  right: -60px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: hsl(var(--pink) / 0.14);
  filter: blur(80px);
  pointer-events: none;
}
@media (max-width: 880px) {
  .hero-band.hero-aurora {
    grid-template-columns: 1fr !important;
    padding: 24px !important;
    gap: 24px !important;
  }
}

.hero-aurora-text { position: relative; z-index: 1; }
.hero-aurora-eyebrow {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: hsl(var(--violet-light)) !important;
  margin: 0 0 18px !important;
  padding: 5px 12px !important;
  background: hsl(var(--violet) / 0.1) !important;
  border: 1px solid hsl(var(--violet) / 0.25) !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
}

.hero-aurora-title {
  font-family: var(--font-display) !important;
  font-size: clamp(28px, 4.2vw, 44px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.08 !important;
  color: hsl(var(--fg)) !important;
  margin: 0 0 18px !important;
  display: block;
}
.hero-aurora-line { display: block; }
.hero-aurora-grad {
  background: linear-gradient(120deg, hsl(0 0% 100%) 0%, hsl(var(--violet-light)) 50%, hsl(var(--pink)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 900;
}

.hero-aurora-sub {
  font-family: var(--font-display) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: hsl(var(--muted-fg)) !important;
  margin: 0 0 22px !important;
  max-width: 480px;
}

.hero-aurora-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: hsl(var(--muted-fg));
}
.hero-aurora-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.hero-aurora-check::first-letter,
.hero-aurora-check { color: hsl(var(--success)); }
.hero-aurora-check span { color: hsl(var(--muted-fg)); }

/* Browser frame on the right */
.hero-aurora-frame {
  border-radius: 16px;
  border: 1px solid hsl(var(--border-strong));
  background: hsl(var(--card));
  box-shadow: var(--shadow-brand-strong);
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.hero-aurora-frame-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: hsl(var(--muted) / 0.5);
  border-bottom: 1px solid hsl(var(--border));
}
.hero-aurora-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: hsl(var(--border-strong));
}
.hero-aurora-url {
  flex: 1;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: hsl(var(--muted-fg));
}
.hero-aurora-frame-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 20px;
}
.hero-aurora-stat {
  background: hsl(var(--bg));
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hero-aurora-stat-num {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(120deg, hsl(0 0% 100%), hsl(var(--violet-light)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-aurora-stat-lbl {
  font-size: 11px;
  color: hsl(var(--muted-fg));
  letter-spacing: 0.02em;
}

/* ============================================================================
   AURORA TOOL CARD OVERRIDE
   Original styles.css gave each tool icon one of 7 random gradient tones
   (i-cyan, i-blue, i-green, i-orange, i-violet, i-pink, i-rose). That produced
   the "rainbow icons" look that doesn't match SellerFish-Aurora vocabulary.
   We unify the entire grid into a single violet-pink soft container with a
   bright violet-light icon stroke — calmer, more premium, more recognizable.
   ============================================================================ */

/* Force every tool-card icon container to the same Aurora style */
.tc-icon,
.tc-icon.i-cyan,
.tc-icon.i-blue,
.tc-icon.i-green,
.tc-icon.i-orange,
.tc-icon.i-violet,
.tc-icon.i-pink,
.tc-icon.i-rose {
  background:
    linear-gradient(135deg, hsl(var(--violet) / 0.16), hsl(var(--pink) / 0.10)) !important;
  color: hsl(var(--violet-light)) !important;
  border: 1px solid hsl(var(--violet) / 0.32) !important;
  box-shadow:
    inset 0 1px 0 hsl(var(--violet) / 0.18),
    0 4px 14px hsl(var(--violet) / 0.18) !important;
}
.tc-icon::after { display: none !important; }
.tc-icon {
  width: 64px !important;
  height: 64px !important;
  border-radius: 18px !important;
}
.tc-icon svg {
  width: 36px !important;
  height: 36px !important;
  stroke: hsl(var(--violet-light)) !important;
  stroke-width: 1.8 !important;
  filter: none !important;
}

/* On hover the card lifts and the icon container brightens slightly */
.tool-card:hover:not(:disabled) .tc-icon {
  background:
    linear-gradient(135deg, hsl(var(--violet) / 0.28), hsl(var(--pink) / 0.18)) !important;
  border-color: hsl(var(--violet) / 0.55) !important;
  color: #fff !important;
}
.tool-card:hover:not(:disabled) .tc-icon svg {
  stroke: #fff !important;
}

/* Pro tools get a tiny crown-style gradient ring on the icon container */
.tool-card[data-pro="true"] .tc-icon,
.tool-card.is-pro .tc-icon {
  box-shadow:
    inset 0 1px 0 hsl(var(--violet) / 0.25),
    0 6px 18px hsl(var(--violet) / 0.28),
    0 0 0 1px hsl(var(--pink) / 0.45) !important;
}

/* Tool card section eyebrow (DÖNÜŞTÜR VE OLUŞTUR etc.) → mono pill style */
.tool-card-grid + h3,
h2[data-i18n*="section"],
.tool-section-eyebrow,
.tools-section-title {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: hsl(var(--violet-light)) !important;
}

/* Tool card name — same weight, but tighter tracking + Aurora foreground */
.tc-name {
  color: hsl(var(--fg)) !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em !important;
}
.tc-desc {
  color: hsl(var(--muted-fg)) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

/* Cost pill (e.g. ⚡ 1, ⚡ 2, ÜCRETSİZ) → mono pill style */
.tc-cost,
.tc-credit {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  font-weight: 700 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
}

/* h2 landing headline → gradient text */
.landing-headline,
.tools-landing-headline,
h2.landing-title {
  font-family: var(--font-display) !important;
  font-size: clamp(28px, 3.8vw, 40px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  background: linear-gradient(120deg, hsl(0 0% 100%) 0%, hsl(var(--violet-light)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============================================================================
   AURORA SHELL REBUILD
   Replaces sidebar, topbar, landing header, drop zone, and 3-button CTA row
   visuals with SellerFish-Aurora vocabulary. The HTML stays untouched — every
   rule below is a !important override so the legacy styles.css can't win.
   ============================================================================ */

/* ----- SIDEBAR ----- */
.sidebar {
  background: linear-gradient(180deg, hsl(var(--bg)) 0%, hsl(var(--bg) / 0.92) 100%) !important;
  border-right: 1px solid hsl(var(--border)) !important;
  backdrop-filter: blur(12px);
}
.sidebar .brand-lockup {
  display: flex !important;
  align-items: center;
  gap: 12px !important;
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid hsl(var(--border)) !important;
}
/* New sidebar brand: bunny-logo.png + Aurora violet glow underneath.
   Old .brand-mark SVG container is hidden via [hidden] on the element. */
.sidebar .brand-lockup .brand-logo-img {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  box-shadow: 0 0 24px -6px hsl(var(--violet) / 0.65);
  flex-shrink: 0;
  display: block;
}

/* Hide the duplicate mobile-brand-lockup on desktop — it's only meant for
   narrow screens where the sidebar is collapsed. */
.topbar .mobile-brand-lockup,
.workspace .mobile-brand-lockup,
.mobile-brand-lockup {
  display: none !important;
}
@media (max-width: 720px) {
  .topbar .mobile-brand-lockup,
  .mobile-brand-lockup {
    display: flex !important;
  }
}

/* Also kill the original .brand-mark visual when our img logo took its place.
   Browser sometimes ignores [hidden] when CSS sets display, so be explicit. */
.sidebar .brand-lockup .brand-mark[hidden],
.sidebar .brand-lockup .brand-mark {
  display: none !important;
}
.sidebar .brand-lockup .brand-logo-img {
  display: block !important;
}

/* ----- AUTH BUTTONS — explicit Sign in + Sign up in topbar ----- */
/* Make the account-pill label ALWAYS visible (no mobile collapse) so users
   see a clear "Giriş Yap" call to action, not just an unlabelled orb. */
.topbar-actions .account-pill {
  padding: 8px 14px !important;
  gap: 6px !important;
  background: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--violet) / 0.5) !important;
  color: hsl(var(--fg)) !important;
  font-weight: 600 !important;
  font-family: var(--font-display) !important;
  font-size: 13px !important;
}
.topbar-actions .account-pill .account-pill-label {
  display: inline-block !important;
  color: hsl(var(--fg)) !important;
}
.topbar-actions .account-pill:hover {
  background: hsl(var(--violet) / 0.1) !important;
  border-color: hsl(var(--violet)) !important;
}
.topbar-actions .account-pill .auth-icon-anon {
  width: 16px;
  height: 16px;
  stroke: hsl(var(--violet-light));
  fill: none;
  stroke-width: 2;
}

/* Mobile: still allow icon-only collapse so the row doesn't overflow */
@media (max-width: 560px) {
  .topbar-actions .account-pill .account-pill-label { display: none !important; }
  .topbar-actions .account-pill {
    width: 36px; height: 36px; padding: 0 !important;
    justify-content: center;
  }
}

/* The dedicated "Kayıt ol" / "Sign up" button in topbar — gradient brand CTA
   sitting between the Sign in pill and the Pro stack. Hidden once user is
   authenticated (JS toggles aria-hidden / [hidden]). */
.topbar-actions .account-signup-btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, hsl(var(--violet)), hsl(var(--pink)));
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.005em;
  cursor: pointer;
  box-shadow: 0 8px 20px -10px hsl(var(--violet) / 0.5);
  transition: filter 0.15s, transform 0.15s;
}
.topbar-actions .account-signup-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.topbar-actions .account-signup-btn[hidden] {
  display: none !important;
}
@media (max-width: 560px) {
  .topbar-actions .account-signup-btn { display: none !important; }
}

/* Auth modal hero uses .aurora-mark.xl — replace its gradient-cutout look
   with the actual bunny logo for stronger brand presence */
.auth-modal .auth-hero .aurora-mark.xl {
  background: url('./bunny-logo.png') center/cover no-repeat !important;
  box-shadow: 0 0 28px -8px hsl(var(--violet) / 0.7) !important;
}
.auth-modal .auth-hero .aurora-mark.xl::after { display: none !important; }

/* Hide the duplicate "Başla" button on slide 4 only — the per-slide
   ob-v7-cta gradient button is the primary CTA there. Slides 0-3 keep the
   bottom Continue button as forward nav. Modern browsers (:has() support). */
/* v164 — Pro is the last slide at data-slide="4" (Scanner slide added at 3) */
.ob-v7:has(.onboarding-slide[data-slide="4"].active) .onboarding-actions {
  display: none !important;
}
.sidebar .brand-lockup .eyebrow {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: hsl(var(--muted-fg)) !important;
  font-weight: 600 !important;
  margin: 0 0 2px !important;
}
.sidebar .brand-lockup h1 {
  font-family: var(--font-display) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.15 !important;
  margin: 0 !important;
  color: hsl(var(--fg)) !important;
}
.sidebar .brand-lockup h1 span {
  display: block;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  color: hsl(var(--muted-fg)) !important;
  letter-spacing: 0.04em;
  margin-top: 2px;
}

/* Sidebar section eyebrows (favori araçlar, cihaz içinde işlem, etc.) */
.sidebar .eyebrow,
.favorite-panel .eyebrow,
.trust-panel .eyebrow {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: hsl(var(--violet-light)) !important;
  font-weight: 600 !important;
}

/* Trust panel — flat aurora-card */
.trust-panel {
  background: linear-gradient(135deg, hsl(var(--violet) / 0.06), hsl(var(--pink) / 0.04)) !important;
  border: 1px solid hsl(var(--violet) / 0.2) !important;
  border-radius: 12px !important;
  padding: 14px !important;
}
.trust-panel strong {
  color: hsl(var(--fg)) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}
.trust-panel span {
  color: hsl(var(--muted-fg)) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

/* Tool nav items in sidebar — slim pill rows */
.tool-nav a,
.tool-nav button,
.nav-link {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  color: hsl(var(--muted-fg)) !important;
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: background 0.15s, color 0.15s, border-color 0.15s !important;
}
.tool-nav a:hover,
.tool-nav button:hover,
.nav-link:hover {
  background: hsl(var(--muted) / 0.5) !important;
  color: hsl(var(--fg)) !important;
  border-color: hsl(var(--border)) !important;
}
.tool-nav a.active,
.tool-nav button.active,
.nav-link.active {
  background: linear-gradient(135deg, hsl(var(--violet) / 0.15), hsl(var(--pink) / 0.08)) !important;
  color: hsl(var(--fg)) !important;
  border-color: hsl(var(--violet) / 0.4) !important;
}

/* ----- TOPBAR ----- */
/* Transparent — same dark page bg shows through, no separate panel look. */
.topbar {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
}
.topbar-title .eyebrow {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: hsl(var(--violet-light)) !important;
  font-weight: 600 !important;
}
.topbar-title h2,
#toolTitle {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: hsl(var(--fg)) !important;
}

/* Credit + reward chips — Aurora pill style */
.credit-chip {
  background: linear-gradient(135deg, hsl(var(--violet) / 0.12), hsl(var(--pink) / 0.08)) !important;
  border: 1px solid hsl(var(--violet) / 0.28) !important;
  border-radius: 999px !important;
  color: hsl(var(--violet-light)) !important;
  font-family: var(--font-mono) !important;
  font-weight: 700 !important;
}
.reward-cta {
  background: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border-strong)) !important;
  border-radius: 10px !important;
  color: hsl(var(--fg)) !important;
}
.reward-cta:hover {
  border-color: hsl(var(--violet)) !important;
  background: hsl(var(--muted)) !important;
}

/* Pro button — Aurora gradient CTA */
#proButton,
.topbar-pro-stack .primary-button {
  background: var(--gradient-brand) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  box-shadow: var(--shadow-brand) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  transition: filter 0.15s, transform 0.15s !important;
}
#proButton:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* Icon buttons in mini row */
.icon-button.mini {
  background: transparent !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 8px !important;
  color: hsl(var(--muted-fg)) !important;
}
.icon-button.mini:hover {
  background: hsl(var(--muted)) !important;
  color: hsl(var(--fg)) !important;
  border-color: hsl(var(--violet) / 0.5) !important;
}

/* ============================================================
   PERSISTENT LANGUAGE SWITCHER (v137)
   Tiny popover anchored under the globe icon in the topbar-mini-row.
   Was previously only available inside onboarding — friend feedback:
   "diller çalışmıyordu" (all languages are broken). Real cause: there
   was no way to change language after onboarding, so the change a user
   made in onboarding looked like the only choice.
   ============================================================ */
.lang-switcher {
  position: relative;
  display: inline-flex;
}
.icon-button.mini.lang-switcher-trigger {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 0 8px !important;
  min-width: 0;
  width: auto !important;
}
.icon-button.mini.lang-switcher-trigger svg {
  width: 14px;
  height: 14px;
}
.lang-switcher-flag {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: hsl(var(--fg));
  text-transform: uppercase;
}
.lang-switcher-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 14px;
  box-shadow: 0 18px 48px -16px hsl(var(--violet) / 0.32), 0 8px 24px -8px hsl(220 30% 8% / 0.18);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 1200;
  animation: lang-pop 0.16s ease-out;
}
@keyframes lang-pop {
  from { opacity: 0; transform: translateY(-4px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}
.lang-switcher-menu[hidden] { display: none; }
.lang-switcher-item {
  display: grid;
  grid-template-columns: 24px 1fr 18px;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 0;
  padding: 9px 10px;
  border-radius: 9px;
  font-family: var(--font-display);
  font-size: 14px;
  color: hsl(var(--fg));
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, color 0.12s;
}
.lang-switcher-item:hover,
.lang-switcher-item:focus-visible {
  background: hsl(var(--violet) / 0.10);
  outline: none;
}
.lang-switcher-emoji {
  font-size: 18px;
  line-height: 1;
}
.lang-switcher-name {
  font-weight: 600;
}
.lang-switcher-check {
  font-weight: 700;
  color: hsl(var(--violet));
  opacity: 0;
  transition: opacity 0.12s;
}
.lang-switcher-item.is-active .lang-switcher-check { opacity: 1; }
.lang-switcher-item.is-active {
  background: linear-gradient(135deg, hsl(var(--violet) / 0.10), hsl(var(--pink) / 0.08));
  color: hsl(var(--violet));
}
@media (max-width: 540px) {
  .icon-button.mini.lang-switcher-trigger { padding: 0 6px !important; }
  .lang-switcher-flag { font-size: 10px; }
  .lang-switcher-menu { right: -40px; }
}

/* Account pill — keep Aurora style */
.account-pill {
  background: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--violet) / 0.4) !important;
  color: hsl(var(--fg)) !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  transition: border-color 0.15s, background 0.15s !important;
}
.account-pill:hover {
  background: hsl(var(--violet) / 0.08) !important;
  border-color: hsl(var(--violet)) !important;
}

/* ----- LANDING HEAD ----- */
.all-tools-landing .landing-head {
  position: relative;
  margin-bottom: 32px;
}
.all-tools-landing .landing-head::before {
  content: "PDF VE DOSYA ARAÇ TAKIMI";
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: hsl(var(--violet-light));
  font-weight: 600;
  margin-bottom: 12px;
}
.landing-title {
  font-family: var(--font-display) !important;
  font-size: clamp(28px, 4.2vw, 44px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.08 !important;
  background: linear-gradient(120deg, hsl(0 0% 100%) 0%, hsl(var(--violet-light)) 60%, hsl(var(--pink)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  margin: 0 0 14px !important;
}
.landing-sub {
  font-family: var(--font-display) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: hsl(var(--muted-fg)) !important;
  max-width: 640px;
}

/* 3-button CTA row (Get App / Pro / Help) */
.landing-actions {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px !important;
}
.landing-getapp-btn,
.landing-pro-btn,
.landing-help-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 11px 18px !important;
  border-radius: 10px !important;
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border: 1px solid hsl(var(--border)) !important;
  background: hsl(var(--card)) !important;
  color: hsl(var(--fg)) !important;
  text-decoration: none !important;
  transition: border-color 0.15s, background 0.15s, transform 0.15s !important;
}
.landing-getapp-btn:hover,
.landing-pro-btn:hover,
.landing-help-btn:hover {
  border-color: hsl(var(--violet)) !important;
  background: hsl(var(--muted)) !important;
  transform: translateY(-1px);
}
.landing-getapp-btn {
  background: linear-gradient(135deg, hsl(var(--success) / 0.18), hsl(var(--success) / 0.1)) !important;
  border-color: hsl(var(--success) / 0.4) !important;
  color: hsl(var(--success)) !important;
}
.landing-pro-btn {
  background: var(--gradient-brand) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: var(--shadow-brand);
}
.landing-pro-btn:hover {
  filter: brightness(1.08);
}

/* ----- DROP ZONE ----- */
.drop-zone {
  background: linear-gradient(135deg, hsl(var(--violet) / 0.08), hsl(var(--pink) / 0.05)) !important;
  border: 2px dashed hsl(var(--violet) / 0.4) !important;
  border-radius: 16px !important;
  transition: border-color 0.18s, background 0.18s !important;
}
.drop-zone:hover {
  border-color: hsl(var(--violet)) !important;
  background: linear-gradient(135deg, hsl(var(--violet) / 0.14), hsl(var(--pink) / 0.08)) !important;
}
.drop-zone .drop-icon {
  width: 60px !important;
  height: 60px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, hsl(var(--violet)), hsl(var(--pink))) !important;
  display: grid !important;
  place-items: center;
  box-shadow: 0 8px 24px -6px hsl(var(--violet) / 0.5);
}
.drop-zone .drop-icon svg {
  width: 28px;
  height: 28px;
  stroke: #fff !important;
  fill: none !important;
}
.drop-zone strong {
  color: hsl(var(--fg)) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}
.drop-zone small {
  color: hsl(var(--muted-fg)) !important;
  font-family: var(--font-display) !important;
}

/* ----- CONVERTER PANELS ----- */
.converter-panel,
.result-panel {
  background: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 16px !important;
}
.panel-heading h3 {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: hsl(var(--fg)) !important;
}
.panel-heading .eyebrow {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: hsl(var(--violet-light)) !important;
  font-weight: 600 !important;
}

/* Primary convert button */
.primary-button,
.action-row .primary-button {
  background: var(--gradient-brand) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 11px !important;
  box-shadow: var(--shadow-brand) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em !important;
}
.primary-button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.secondary-button {
  background: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border-strong)) !important;
  color: hsl(var(--fg)) !important;
  border-radius: 10px !important;
}
.secondary-button:hover {
  border-color: hsl(var(--violet)) !important;
  background: hsl(var(--muted)) !important;
}

/* Section eyebrows for tool-card grids ("DÖNÜŞTÜR VE OLUŞTUR" etc.) */
.tool-card-grid-section h3,
.tools-section h3,
.tool-section-title {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: hsl(var(--violet-light)) !important;
  font-weight: 600 !important;
  margin-bottom: 16px !important;
}

/* Status badge */
.status-badge {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  background: hsl(var(--success) / 0.12) !important;
  color: hsl(var(--success)) !important;
  border: 1px solid hsl(var(--success) / 0.3) !important;
}

/* File list items */
.file-list .file-item,
.file-row {
  background: hsl(var(--bg)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 10px !important;
}

/* Result empty state */
.empty-state {
  color: hsl(var(--muted-fg)) !important;
}
.empty-state svg {
  opacity: 0.4;
  stroke: hsl(var(--violet)) !important;
}

/* Limit note */
.limit-note {
  background: hsl(var(--muted) / 0.5) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 10px !important;
  color: hsl(var(--muted-fg)) !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
}

/* Settings grid inputs */
.settings-grid label span {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: hsl(var(--muted-fg)) !important;
  font-weight: 600 !important;
}
.settings-grid input,
.settings-grid select {
  background: hsl(var(--bg)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 8px !important;
  color: hsl(var(--fg)) !important;
  font-family: var(--font-display) !important;
}
.settings-grid input:focus,
.settings-grid select:focus {
  border-color: hsl(var(--violet)) !important;
  outline: 2px solid hsl(var(--violet) / 0.2);
}

/* Progress bar */
.progress-bar {
  background: var(--gradient-brand) !important;
  box-shadow: 0 0 12px hsl(var(--violet) / 0.5);
}

/* Hero band stat grid (legacy fallback, still applies if used) */
.hero-stat-grid > div {
  background: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 12px !important;
}
.hero-stat-grid strong {
  font-family: var(--font-mono) !important;
  background: linear-gradient(120deg, hsl(0 0% 100%), hsl(var(--violet-light)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}
.hero-stat-grid span {
  color: hsl(var(--muted-fg)) !important;
}

/* ============================================================================
   AURORA BOTTOM LANDING — full rebuild of FAQ + legal + footer
   New section IDs: bc-stats-band, bc-how, bc-compare, bc-faq, bc-final-cta,
   bc-footer. Designed as a one-shot SellerFish-tier landing tail.
   ============================================================================ */

.bc-stats-band, .bc-how, .bc-compare, .bc-faq, .bc-final-cta, .bc-footer {
  font-family: var(--font-display);
  color: hsl(var(--fg));
}

/* ----- STATS BAND ----- */
.bc-stats-band {
  margin: 56px 0 56px;
  padding: 40px;
  border-radius: 22px;
  border: 1px solid hsl(var(--border-strong));
  background: linear-gradient(135deg, hsl(var(--violet) / 0.08), hsl(var(--pink) / 0.05));
  text-align: center;
  position: relative;
  overflow: hidden;
}
.bc-stats-band::before {
  content: "";
  position: absolute;
  top: -120px;
  left: 30%;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: hsl(var(--violet) / 0.15);
  filter: blur(80px);
  pointer-events: none;
}
.bc-stats-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: hsl(var(--violet-light));
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}
.bc-stats-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 28px;
  position: relative;
  z-index: 1;
  color: hsl(var(--fg));
}
.bc-stats-title .text-gradient-brand { font-weight: 800; }
.bc-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
  z-index: 1;
}
@media (max-width: 720px) {
  .bc-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
.bc-stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bc-stat-num {
  font-family: var(--font-mono);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
  line-height: 1;
  background: linear-gradient(120deg, hsl(0 0% 100%), hsl(var(--violet-light)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.bc-stat-lbl {
  font-size: 13px;
  color: hsl(var(--muted-fg));
}

/* ----- SECTION HEAD (reusable) ----- */
.bc-section-head {
  max-width: 720px;
  margin: 0 0 40px;
}
.bc-section-head-center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.bc-section-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: hsl(var(--violet-light));
  font-weight: 600;
  margin: 0 0 14px;
}
.bc-section-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.6vw, 38px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 14px;
  color: hsl(var(--fg));
}
.bc-section-sub {
  font-size: 15px;
  line-height: 1.6;
  color: hsl(var(--muted-fg));
  margin: 0;
  max-width: 580px;
}
.bc-section-head-center .bc-section-sub { margin-left: auto; margin-right: auto; }

/* ----- HOW IT WORKS ----- */
.bc-how { margin: 56px 0; }
.bc-how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 880px) {
  .bc-how-grid { grid-template-columns: 1fr; }
}
.bc-step-card {
  position: relative;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 18px;
  padding: 28px 24px;
  transition: border-color 0.2s, transform 0.2s;
}
.bc-step-card:hover {
  border-color: hsl(var(--violet) / 0.5);
  transform: translateY(-2px);
}
.bc-step-num {
  position: absolute;
  top: 18px;
  right: 22px;
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 800;
  color: hsl(var(--muted-fg) / 0.25);
  letter-spacing: -0.02em;
  line-height: 1;
}
.bc-step-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, hsl(var(--violet) / 0.18), hsl(var(--pink) / 0.12));
  border: 1px solid hsl(var(--violet) / 0.3);
  display: grid;
  place-items: center;
  font-size: 26px;
  margin-bottom: 18px;
}
.bc-step-card h4 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  color: hsl(var(--fg));
}
.bc-step-card p {
  font-size: 14px;
  line-height: 1.6;
  color: hsl(var(--muted-fg));
  margin: 0;
}

/* ----- COMPARISON TABLE ----- */
.bc-compare { margin: 56px 0; }
.bc-compare-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 16px;
  padding: 8px;
  overflow-x: auto;
}
.bc-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.bc-compare-table th,
.bc-compare-table td {
  padding: 14px 16px;
  text-align: center;
  font-family: var(--font-display);
}
.bc-compare-table th {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: hsl(var(--muted-fg));
  font-weight: 600;
  border-bottom: 1px solid hsl(var(--border));
}
.bc-compare-table .bc-comp-feat,
.bc-compare-table td:first-child {
  text-align: left;
  color: hsl(var(--fg));
  font-weight: 500;
}
.bc-compare-table .bc-comp-us {
  background: linear-gradient(180deg, hsl(var(--violet) / 0.08), hsl(var(--violet) / 0.04));
  border-left: 1px solid hsl(var(--violet) / 0.3);
  border-right: 1px solid hsl(var(--violet) / 0.3);
  color: hsl(var(--fg));
}
.bc-compare-table thead .bc-comp-us {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 11px;
  color: hsl(var(--violet-light));
  border-top: 1px solid hsl(var(--violet) / 0.4);
  background: linear-gradient(135deg, hsl(var(--violet) / 0.15), hsl(var(--pink) / 0.08));
}
.bc-compare-table tbody tr {
  border-bottom: 1px dashed hsl(var(--border) / 0.5);
}
.bc-compare-table tbody tr:last-child { border-bottom: none; }
.bc-compare-table td strong {
  color: hsl(var(--fg));
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
}

/* ----- FAQ ----- */
.bc-faq { margin: 56px 0; }
.bc-faq-list {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bc-faq-item {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 14px;
  padding: 20px 24px;
  transition: border-color 0.2s, background 0.2s;
}
.bc-faq-item[open] {
  border-color: hsl(var(--violet) / 0.4);
  background: linear-gradient(135deg, hsl(var(--violet) / 0.05), hsl(var(--pink) / 0.03));
}
.bc-faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font-display);
  color: hsl(var(--fg));
  letter-spacing: -0.005em;
}
.bc-faq-item summary::-webkit-details-marker { display: none; }
.bc-faq-plus {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid hsl(var(--violet) / 0.4);
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 300;
  color: hsl(var(--violet-light));
  transition: transform 0.25s, background 0.25s;
}
.bc-faq-item[open] .bc-faq-plus {
  transform: rotate(45deg);
  background: hsl(var(--violet));
  color: #fff;
}
.bc-faq-item p {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.65;
  color: hsl(var(--muted-fg));
}
.bc-faq-item p strong { color: hsl(var(--fg)); }

/* ----- BIG FINAL CTA ----- */
.bc-final-cta { margin: 64px 0; }
.bc-final-card {
  position: relative;
  text-align: center;
  background: linear-gradient(135deg, hsl(var(--violet) / 0.14), hsl(var(--pink) / 0.10));
  border: 1px solid hsl(var(--border-strong));
  border-radius: 24px;
  padding: 64px 32px;
  overflow: hidden;
}
.bc-final-card::before {
  content: "";
  position: absolute;
  top: -160px;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: hsl(var(--violet) / 0.28);
  filter: blur(120px);
  pointer-events: none;
}
.bc-final-card::after {
  content: "";
  position: absolute;
  bottom: -120px;
  right: -120px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: hsl(var(--pink) / 0.18);
  filter: blur(100px);
  pointer-events: none;
}
.bc-final-eyebrow {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: hsl(var(--violet-light));
  margin: 0 0 18px;
}
.bc-final-title {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(28px, 4.5vw, 44px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 16px;
  color: hsl(var(--fg));
}
.bc-final-sub {
  position: relative;
  z-index: 1;
  font-size: 16px;
  line-height: 1.55;
  color: hsl(var(--muted-fg));
  max-width: 560px;
  margin: 0 auto 32px;
}
.bc-final-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: 28px;
}
.bc-final-primary,
.bc-final-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: filter 0.15s, transform 0.15s;
}
.bc-final-primary {
  background: linear-gradient(135deg, hsl(var(--violet)), hsl(var(--pink)));
  color: #fff;
  box-shadow: 0 12px 32px -10px hsl(var(--violet) / 0.6);
}
.bc-final-primary:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}
.bc-final-secondary {
  background: hsl(var(--card));
  color: hsl(var(--fg));
  border: 1px solid hsl(var(--border-strong));
}
.bc-final-secondary:hover {
  border-color: hsl(var(--violet) / 0.6);
  background: hsl(var(--muted));
}
.bc-final-checks {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: hsl(var(--muted-fg));
}

/* ----- FOOTER ----- */
.bc-footer {
  margin-top: 56px;
  padding-top: 48px;
  border-top: 1px solid hsl(var(--border));
}
.bc-footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
@media (max-width: 880px) {
  .bc-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
.bc-footer-brand .bc-footer-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: hsl(var(--fg));
}
.bc-footer-tagline {
  font-size: 13px;
  line-height: 1.6;
  color: hsl(var(--muted-fg));
  margin: 0 0 18px;
  max-width: 320px;
}
.bc-footer-social { display: flex; gap: 8px; }
.bc-social-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  color: hsl(var(--muted-fg));
  display: grid;
  place-items: center;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.bc-social-btn:hover {
  border-color: hsl(var(--violet));
  color: hsl(var(--fg));
  background: hsl(var(--muted));
}
.bc-footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bc-footer-col-title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: hsl(var(--muted-fg));
  margin: 0 0 8px;
  font-weight: 600;
}
.bc-footer-col a,
.bc-footer-col .bc-footer-text {
  font-size: 13px;
  color: hsl(var(--fg) / 0.82);
  text-decoration: none;
  font-family: var(--font-display);
  transition: color 0.15s;
}
.bc-footer-col a:hover { color: hsl(var(--violet-light)); }
.bc-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 20px 0;
  border-top: 1px solid hsl(var(--border));
  font-size: 12px;
  color: hsl(var(--muted-fg));
}
.bc-footer-version {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}

/* ----- KILL the old amateurish smart banner ----- */
.get-app-banner {
  display: none !important;
}

/* ----- KILL the duplicate Get App / Pro / Help row in landing-head ----- */
/* Same buttons already exist in the topbar, so the landing-actions row is
   redundant. Hide them on the landing for a cleaner premium feel. */
.all-tools-landing .landing-actions {
  display: none !important;
}

/* Also tighten the landing-head when actions are gone so the title doesn't
   leave a weird gap on the right. */
.all-tools-landing .landing-head {
  display: block !important;
  margin-bottom: 28px !important;
}

/* ============================================================================
   AUTH MODAL — SellerFish-tier rebuild
   Existing markup uses .auth-modal > .auth-form > .auth-hero/fields/cta/links.
   Override the visual layer to match SellerFish login design system:
   gradient brand mark + gradient title + Aurora inputs + gradient CTA +
   subtle violet glow backdrop.
   ============================================================================ */
.auth-modal {
  background: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border-strong)) !important;
  border-radius: 20px !important;
  padding: 0 !important;
  max-width: 440px !important;
  width: calc(100vw - 32px);
  box-shadow:
    0 24px 64px -20px hsl(var(--violet) / 0.45),
    0 0 0 1px hsl(var(--border)) inset !important;
  color: hsl(var(--fg));
  overflow: visible !important;
}
.auth-modal::backdrop {
  background: radial-gradient(ellipse 1400px 900px at 50% 20%,
    hsl(var(--violet) / 0.3) 0%, hsl(var(--violet) / 0.1) 40%, transparent 70%),
    hsl(var(--bg) / 0.92) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.auth-modal .auth-form {
  padding: 32px 32px 28px !important;
  position: relative;
  font-family: var(--font-display);
}
.auth-modal .auth-close {
  position: absolute !important;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: hsl(var(--muted)) !important;
  border: 1px solid hsl(var(--border)) !important;
  color: hsl(var(--muted-fg)) !important;
  display: grid !important;
  place-items: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.auth-modal .auth-close:hover {
  background: hsl(var(--card)) !important;
  color: hsl(var(--fg)) !important;
  border-color: hsl(var(--violet) / 0.5) !important;
}

.auth-modal .auth-hero {
  text-align: center;
  margin-bottom: 24px;
}
.auth-modal .auth-hero .aurora-mark {
  margin: 0 auto 16px;
  display: block;
}
.auth-modal .auth-title {
  font-family: var(--font-display) !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.15 !important;
  margin: 0 0 8px !important;
  background: linear-gradient(120deg, hsl(0 0% 100%) 0%, hsl(var(--violet-light)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.auth-modal .auth-sub {
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: hsl(var(--muted-fg)) !important;
  margin: 0 !important;
  max-width: 320px;
  margin-left: auto !important;
  margin-right: auto !important;
}

.auth-modal .auth-fields {
  display: flex !important;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 18px;
}
.auth-modal .auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.auth-modal .auth-field > span {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: hsl(var(--muted-fg)) !important;
  font-weight: 600 !important;
}
.auth-modal .auth-field input {
  width: 100%;
  padding: 11px 14px !important;
  border-radius: 10px !important;
  border: 1px solid hsl(var(--border)) !important;
  background: hsl(var(--bg)) !important;
  color: hsl(var(--fg)) !important;
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.auth-modal .auth-field input:focus {
  border-color: hsl(var(--violet)) !important;
  box-shadow: 0 0 0 3px hsl(var(--violet) / 0.20);
}
.auth-modal .auth-error {
  background: hsl(var(--destructive) / 0.1) !important;
  border: 1px solid hsl(var(--destructive) / 0.3) !important;
  color: hsl(var(--destructive)) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
}
.auth-modal .auth-notice {
  background: hsl(var(--success) / 0.1) !important;
  border: 1px solid hsl(var(--success) / 0.3) !important;
  color: hsl(var(--success)) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
}

.auth-modal .auth-cta {
  width: 100% !important;
  padding: 13px 20px !important;
  border-radius: 12px !important;
  border: none !important;
  background: linear-gradient(135deg, hsl(var(--violet)), hsl(var(--pink))) !important;
  color: #fff !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: -0.005em !important;
  cursor: pointer;
  box-shadow: 0 10px 28px -10px hsl(var(--violet) / 0.6) !important;
  transition: filter 0.15s, transform 0.15s !important;
  margin-bottom: 14px;
}
.auth-modal .auth-cta:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.auth-modal .auth-cta:active {
  transform: translateY(0);
}

.auth-modal .auth-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  color: hsl(var(--muted-fg));
}
.auth-modal .auth-link {
  background: none !important;
  border: none !important;
  color: hsl(var(--violet-light)) !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  cursor: pointer;
  padding: 4px 6px !important;
  border-radius: 6px !important;
  transition: color 0.15s, background 0.15s;
}
.auth-modal .auth-link:hover {
  color: hsl(var(--fg)) !important;
  background: hsl(var(--muted) / 0.6) !important;
}
.auth-modal .auth-link strong { font-weight: 700; }
.auth-modal .auth-link-sep {
  color: hsl(var(--muted-fg) / 0.4);
}

.auth-modal .auth-legal {
  margin: 16px 0 0 !important;
  font-size: 11px !important;
  line-height: 1.55 !important;
  color: hsl(var(--muted-fg) / 0.85) !important;
  text-align: center;
}

/* ============================================================================
   PRO / PRICING MODAL — Aurora override
   ============================================================================ */
.pro-modal,
dialog.pro-modal {
  background: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border-strong)) !important;
  border-radius: 20px !important;
  color: hsl(var(--fg)) !important;
  box-shadow:
    0 24px 64px -20px hsl(var(--violet) / 0.5),
    0 0 0 1px hsl(var(--border)) inset !important;
  padding: 0 !important;
  max-width: 720px !important;
}
.pro-modal::backdrop {
  background: radial-gradient(ellipse 1400px 900px at 50% 20%,
    hsl(var(--violet) / 0.3) 0%, transparent 65%),
    hsl(var(--bg) / 0.92) !important;
  backdrop-filter: blur(8px);
}
.pro-modal .pro-trial-banner {
  background: linear-gradient(135deg, hsl(var(--violet)), hsl(var(--pink))) !important;
  color: #fff !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
}
.pro-modal h2,
.pro-modal h3 {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
}
.pro-plan-card,
.pro-plan {
  background: hsl(var(--bg)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 16px !important;
}
.pro-plan-card.recommended,
.pro-plan.recommended {
  background: linear-gradient(135deg, hsl(var(--violet) / 0.12), hsl(var(--pink) / 0.08)) !important;
  border: 1px solid hsl(var(--violet) / 0.45) !important;
  box-shadow: 0 12px 32px -10px hsl(var(--violet) / 0.4) !important;
}
.pro-price-big {
  font-family: var(--font-mono) !important;
  font-weight: 800 !important;
  background: linear-gradient(120deg, hsl(0 0% 100%), hsl(var(--violet-light)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}
.pro-plan-trial-pill {
  background: hsl(var(--success) / 0.15) !important;
  color: hsl(var(--success)) !important;
  border: 1px solid hsl(var(--success) / 0.3) !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.1em !important;
  font-weight: 700 !important;
}

/* ============================================================================
   ONBOARDING v7 — SellerFish-grade rebuild
   Replaces all the v6 .ob-* slide layouts with calm flat slides + Aurora
   gradients. Markup IDs are unchanged so app.js controller works as-is.
   ============================================================================ */
.ob-v7 { background: hsl(var(--bg)) !important; padding: 0 !important; }
.ob-v7::backdrop {
  background:
    radial-gradient(ellipse 1400px 800px at 50% 0%, hsl(var(--violet) / 0.35) 0%, transparent 60%),
    radial-gradient(circle 800px at 100% 30%, hsl(var(--pink) / 0.18) 0%, transparent 60%),
    hsl(var(--bg) / 0.96);
  backdrop-filter: blur(8px);
}
.ob-v7 > form {
  position: relative;
  min-width: 360px;
  width: min(560px, calc(100vw - 32px));
  min-height: min(680px, calc(100vh - 40px));
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border-strong));
  border-radius: 20px;
  padding: 56px 36px 28px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  box-shadow:
    0 24px 64px -20px hsl(var(--violet) / 0.5),
    0 0 0 1px hsl(var(--border)) inset;
  overflow: hidden;
}
.ob-v7 > form::before {
  /* soft ambient violet glow behind content */
  content: "";
  position: absolute;
  top: -160px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 320px;
  border-radius: 50%;
  background: hsl(var(--violet) / 0.22);
  filter: blur(80px);
  pointer-events: none;
}

/* Skip + arrow buttons (re-themed for v7) */
.ob-v7 .ob-skip-corner {
  position: absolute !important;
  top: 16px;
  right: 16px;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: hsl(var(--muted-fg)) !important;
  background: hsl(var(--muted) / 0.6) !important;
  border: 1px solid hsl(var(--border)) !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  z-index: 2;
}
.ob-v7 .ob-skip-corner:hover {
  background: hsl(var(--card)) !important;
  color: hsl(var(--fg)) !important;
  border-color: hsl(var(--border-strong)) !important;
}
.ob-v7 .ob-arrow {
  background: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border-strong)) !important;
  color: hsl(var(--fg)) !important;
  z-index: 2;
}
.ob-v7 .ob-arrow:hover {
  background: hsl(var(--muted)) !important;
  border-color: hsl(var(--violet) / 0.5) !important;
}

/* Slide common */
.ob-v7-slide {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  position: relative;
  z-index: 1;
}
.ob-v7-slide.active { display: flex; animation: aurora-fade-in 0.4s ease-out; }

.ob-v7-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: hsl(var(--violet-light));
  font-weight: 600;
  margin-bottom: 14px;
  background: hsl(var(--violet) / 0.1);
  border: 1px solid hsl(var(--violet) / 0.25);
  padding: 5px 12px;
  border-radius: 999px;
}
.ob-v7-title {
  font-family: var(--font-display) !important;
  font-size: clamp(22px, 3.4vw, 30px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.18 !important;
  color: hsl(var(--fg)) !important;
  margin: 0 0 12px !important;
  max-width: 460px;
}
.ob-v7-sub {
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: hsl(var(--muted-fg)) !important;
  margin: 0 0 24px !important;
  max-width: 460px;
}

/* ----- Slide 0: Language picker ----- */
.ob-v7-lang-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  max-width: 400px;
  margin-top: 12px;
}
.ob-v7-lang-btn {
  all: unset;
  display: grid !important;
  grid-template-columns: 32px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0 12px;
  padding: 12px 16px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, transform 0.15s;
  text-align: left;
}
.ob-v7-lang-btn:hover {
  border-color: hsl(var(--violet) / 0.6);
  background: hsl(var(--muted));
  transform: translateY(-1px);
}
.ob-v7-lang-btn.active,
.ob-v7-lang-btn[aria-pressed="true"] {
  background: linear-gradient(135deg, hsl(var(--violet) / 0.12), hsl(var(--pink) / 0.08));
  border-color: hsl(var(--violet));
  box-shadow: 0 0 0 1px hsl(var(--violet) / 0.4) inset, 0 6px 16px -8px hsl(var(--violet) / 0.5);
}
.ob-v7-flag {
  grid-row: 1 / 3;
  font-size: 28px;
  line-height: 1;
}
.ob-v7-lang-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: hsl(var(--fg));
  letter-spacing: -0.01em;
}
.ob-v7-lang-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: hsl(var(--muted-fg));
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ----- Slide 1: Hero ----- */
.ob-v7-mark-hero {
  position: relative;
  margin: 12px auto 22px;
  width: 96px;
  height: 96px;
}
.ob-v7-bunny {
  position: relative;
  z-index: 2;
  width: 96px;
  height: 96px;
  border-radius: 24px;
  box-shadow: 0 16px 36px -12px hsl(var(--violet) / 0.65);
}
.ob-v7-mark-glow {
  position: absolute;
  inset: -28px;
  border-radius: 50%;
  background: radial-gradient(circle, hsl(var(--violet) / 0.45) 0%, transparent 70%);
  filter: blur(28px);
  z-index: 1;
}
.ob-v7-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: hsl(var(--muted-fg));
}
.ob-v7-checks > span { display: inline-flex; align-items: center; gap: 5px; }
.ob-v7-check {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: hsl(var(--success) / 0.18);
  color: hsl(var(--success));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
}

/* ----- Slide 2: Tools grid ----- */
.ob-v7-tool-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 440px;
  margin-top: 8px;
}
@media (max-width: 480px) {
  .ob-v7-tool-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
}
.ob-v7-tool-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 6px;
  background: linear-gradient(135deg, hsl(var(--violet) / 0.1), hsl(var(--pink) / 0.06));
  border: 1px solid hsl(var(--violet) / 0.25);
  border-radius: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: hsl(var(--fg));
  letter-spacing: 0.02em;
  text-align: center;
}
.ob-v7-tool-tile svg {
  width: 22px;
  height: 22px;
  color: hsl(var(--violet-light));
}
.ob-v7-tool-tile span { white-space: nowrap; }
.ob-v7-tools-count {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: hsl(var(--violet-light));
}

/* ----- Slide 3: Privacy ----- */
.ob-v7-priv-hero {
  position: relative;
  width: 220px;
  height: 160px;
  margin: 12px auto 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ob-v7-priv-shield {
  width: 110px;
  height: 124px;
}
.ob-v7-priv-shield svg { width: 100%; height: 100%; }
.ob-v7-priv-no-cloud {
  position: absolute;
  top: 14px;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: hsl(var(--destructive));
  background: hsl(var(--destructive) / 0.1);
  border: 1px solid hsl(var(--destructive) / 0.3);
  padding: 4px 8px;
  border-radius: 999px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ob-v7-priv-no-cloud svg { width: 14px; height: 14px; }

/* ----- Slide 4: Pro trial ----- */
.ob-v7-pro-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
  max-width: 440px;
  margin-bottom: 24px;
}
.ob-v7-pro-card {
  position: relative;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 14px;
  padding: 18px;
  text-align: left;
}
.ob-v7-pro-card-best {
  background: linear-gradient(135deg, hsl(var(--violet) / 0.14), hsl(var(--pink) / 0.08));
  border: 1px solid hsl(var(--violet) / 0.5);
  box-shadow: 0 12px 28px -10px hsl(var(--violet) / 0.45);
}
.ob-v7-pro-best-pill {
  position: absolute;
  top: -10px;
  right: 14px;
  background: linear-gradient(135deg, hsl(var(--violet)), hsl(var(--pink)));
  color: #fff;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  font-weight: 800;
  padding: 4px 9px;
  border-radius: 999px;
  box-shadow: var(--shadow-brand);
}
.ob-v7-pro-card-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: hsl(var(--muted-fg));
  font-weight: 700;
  margin-bottom: 8px;
}
.ob-v7-pro-card-label-pro { color: hsl(var(--violet-light)); }
.ob-v7-pro-card-price {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: hsl(var(--fg));
  margin-bottom: 10px;
}
.ob-v7-pro-card-price span { font-size: 12px; color: hsl(var(--muted-fg)); margin-left: 3px; font-weight: 500; }
.ob-v7-pro-card-trial {
  display: inline-block;
  margin-bottom: 12px;
  background: hsl(var(--success) / 0.14);
  color: hsl(var(--success));
  border: 1px solid hsl(var(--success) / 0.3);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
}
.ob-v7-pro-card-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ob-v7-pro-card-list li {
  font-size: 12px;
  line-height: 1.55;
  color: hsl(var(--fg) / 0.88);
  margin-bottom: 4px;
}

.ob-v7-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 380px;
  padding: 14px 24px;
  background: linear-gradient(135deg, hsl(var(--violet)), hsl(var(--pink)));
  color: #fff;
  border: none;
  border-radius: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 12px 28px -10px hsl(var(--violet) / 0.6);
  transition: filter 0.15s, transform 0.15s;
}
.ob-v7-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* ----- Bottom dots + Continue button ----- */
.ob-v7 .ob-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 22px 0 16px;
}
.ob-v7 .ob-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: hsl(var(--border-strong));
  transition: width 0.25s, background 0.25s;
}
.ob-v7 .ob-dot.active {
  width: 22px;
  background: linear-gradient(135deg, hsl(var(--violet)), hsl(var(--pink)));
}
.ob-v7 .onboarding-actions {
  display: flex;
  justify-content: center;
}
.ob-v7 .ob-next-btn {
  background: linear-gradient(135deg, hsl(var(--violet)), hsl(var(--pink))) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 12px 28px !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  box-shadow: var(--shadow-brand) !important;
  cursor: pointer;
  transition: filter 0.15s, transform 0.15s;
}
.ob-v7 .ob-next-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* Hide v6 step-counter inside v7 since we have explicit eyebrows */
.ob-v7 .ob-step-counter {
  top: 16px;
  left: 24px;
  transform: none;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  z-index: 2;
}

/* CRITICAL: styles.css gives .auth-avatar `display:flex` which beats the UA
   [hidden] { display:none } rule, so the gradient blob always overlays the
   pill — even in anonymous state. Force hide unless explicitly shown. */
.auth-avatar[hidden] {
  display: none !important;
}
.account-pill:not([data-signed-in="true"]) .auth-avatar {
  display: none !important;
}

/* ============================================================
   SIGNED-IN ACCOUNT PILL — professional, big-firm style
   ============================================================
   When user is signed in, account-pill becomes a clean pill with
   the first letter of their email in a solid violet circle, and a
   subtle chevron. No rainbow gradient bar, no leftover "Sign in"
   label — looks like Linear / Vercel / Notion topbars.
*/
.topbar-actions .account-pill[data-signed-in="true"] {
  padding: 4px 12px 4px 4px !important;
  gap: 8px !important;
  background: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border-strong)) !important;
  border-radius: 999px !important;
  height: 40px !important;
  width: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  position: relative !important;
  box-shadow: 0 1px 0 0 hsl(0 0% 100% / 0.04) inset, 0 2px 8px -4px hsl(0 0% 0% / 0.5) !important;
  transition: border-color 0.15s, background 0.15s !important;
}
.topbar-actions .account-pill[data-signed-in="true"]:hover {
  background: hsl(var(--muted)) !important;
  border-color: hsl(var(--violet) / 0.6) !important;
}
/* Hide leftover anonymous bits once signed in */
.topbar-actions .account-pill[data-signed-in="true"] .account-pill-label,
.topbar-actions .account-pill[data-signed-in="true"] .auth-icon-anon {
  display: none !important;
}
/* The avatar becomes a clean solid violet circle with a bold letter */
.topbar-actions .account-pill[data-signed-in="true"] .auth-avatar {
  position: static !important;
  inset: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, hsl(var(--violet)) 0%, hsl(var(--pink)) 100%) !important;
  color: #fff !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  flex: 0 0 32px !important;
  box-shadow: 0 4px 10px -3px hsl(var(--violet) / 0.55) !important;
}
.topbar-actions .account-pill[data-signed-in="true"] .auth-avatar[hidden] {
  display: inline-flex !important;
}
/* Chevron after the avatar — tiny, muted */
.topbar-actions .account-pill[data-signed-in="true"]::after {
  content: "";
  width: 10px;
  height: 10px;
  background: currentColor;
  color: hsl(var(--fg) / 0.6);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M7 10l5 5 5-5z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M7 10l5 5 5-5z'/></svg>") center/contain no-repeat;
  flex: 0 0 10px;
}
/* When signed in, also hide the Kayıt ol button */
.topbar-actions .account-pill[data-signed-in="true"] ~ .account-signup-btn,
body:has(.account-pill[data-signed-in="true"]) .account-signup-btn {
  display: none !important;
}
@media (max-width: 560px) {
  .topbar-actions .account-pill[data-signed-in="true"] {
    width: 40px !important;
    padding: 4px !important;
  }
  .topbar-actions .account-pill[data-signed-in="true"]::after { display: none !important; }
}

/* ============================================================================
   AUTH MODAL — v132 polish pass
   Goal: Linear/Notion-tier feel — tighter hero, input focus rings, divider,
   smooth spinner on CTA, smooth backdrop entrance.
   ============================================================================ */

/* Entrance animation for the dialog */
@keyframes authModalIn {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.auth-modal[open] {
  animation: authModalIn 0.22s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Tighter hero — logo sits in a glowing halo ring instead of plain mark */
.auth-modal .auth-hero .aurora-mark.xl {
  width: 68px !important;
  height: 68px !important;
  border-radius: 20px !important;
  box-shadow:
    0 0 0 6px hsl(var(--violet) / 0.14),
    0 0 32px -8px hsl(var(--violet) / 0.65) !important;
  margin-bottom: 18px;
}

/* Title — slightly bigger, tighter gradient stop for more pop */
.auth-modal .auth-title {
  font-size: 28px !important;
  background: linear-gradient(115deg, hsl(0 0% 100%) 0%, hsl(var(--pink)) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

/* Auth divider "or continue with" */
.auth-modal .auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0 14px;
  color: hsl(var(--muted-fg));
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.auth-modal .auth-divider::before,
.auth-modal .auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: hsl(var(--border));
}

/* CTA loading state — spinner replaces text */
.auth-modal .auth-cta[disabled] {
  opacity: 0.75 !important;
  cursor: not-allowed !important;
  pointer-events: none;
}
.auth-modal .auth-cta[disabled]::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: authSpinner 0.65s linear infinite;
  margin-left: 8px;
  vertical-align: middle;
}
@keyframes authSpinner {
  to { transform: rotate(360deg); }
}

/* Input row — add left icon slot via padding offset */
.auth-modal .auth-field input {
  padding-left: 40px !important;
}
/* Email icon overlay */
.auth-modal .auth-field:first-of-type {
  position: relative;
}
.auth-modal .auth-field:first-of-type::after {
  content: "";
  position: absolute;
  bottom: 11px;
  left: 13px;
  width: 16px;
  height: 16px;
  background: hsl(var(--muted-fg) / 0.55);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='20' height='16' x='2' y='4' rx='2'/><path d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='20' height='16' x='2' y='4' rx='2'/><path d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/></svg>") center/contain no-repeat;
  pointer-events: none;
}
/* Password icon overlay */
.auth-modal .auth-field[data-auth-field-password] {
  position: relative;
}
.auth-modal .auth-field[data-auth-field-password]::after {
  content: "";
  position: absolute;
  bottom: 11px;
  left: 13px;
  width: 16px;
  height: 16px;
  background: hsl(var(--muted-fg) / 0.55);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='18' height='11' x='3' y='11' rx='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='18' height='11' x='3' y='11' rx='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>") center/contain no-repeat;
  pointer-events: none;
}

/* CTA: finer gradient + glow on hover */
.auth-modal .auth-cta {
  background: linear-gradient(135deg, hsl(var(--violet)) 0%, hsl(var(--pink)) 100%) !important;
  letter-spacing: 0.01em !important;
  font-size: 15px !important;
  padding: 14px 20px !important;
}
.auth-modal .auth-cta:hover {
  box-shadow: 0 12px 36px -10px hsl(var(--violet) / 0.75) !important;
}

/* ============================================================================
   MY FILES PAGE — Aurora/Dropbox-tier polish
   Overrides styles.css mfp-* rules with design-system tokens, tighter
   spacing, and row hover states that match the Aurora card system.
   ============================================================================ */

.my-files-page {
  padding: 28px 0;
  font-family: var(--font-display);
}

.mfp-head {
  margin-bottom: 24px !important;
}

.mfp-title {
  font-family: var(--font-display) !important;
  font-size: clamp(22px, 3vw, 30px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  background: linear-gradient(120deg, hsl(0 0% 100%) 0%, hsl(var(--violet-light)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  margin: 0 0 4px !important;
}

.mfp-sub {
  font-family: var(--font-display) !important;
  color: hsl(var(--muted-fg)) !important;
  font-size: 13px !important;
  margin: 0 !important;
}

/* View toggle buttons — Aurora pill style */
.mfp-view-btn {
  background: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 10px !important;
  color: hsl(var(--muted-fg)) !important;
  width: 38px !important;
  height: 38px !important;
  transition: border-color 0.15s, background 0.15s !important;
}
.mfp-view-btn:hover {
  background: hsl(var(--muted)) !important;
  color: hsl(var(--fg)) !important;
  border-color: hsl(var(--violet) / 0.4) !important;
}
.mfp-view-btn.active {
  background: hsl(var(--violet) / 0.14) !important;
  border-color: hsl(var(--violet) / 0.5) !important;
  color: hsl(var(--violet-light)) !important;
}

/* New Convert CTA button */
.mfp-new-folder {
  background: var(--gradient-brand) !important;
  border-radius: 10px !important;
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  padding: 9px 16px !important;
  box-shadow: var(--shadow-brand) !important;
  transition: filter 0.15s, transform 0.15s !important;
}
.mfp-new-folder:hover {
  filter: brightness(1.08) !important;
  transform: translateY(-1px) !important;
}

/* Search bar */
.mfp-search {
  background: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 12px !important;
  padding: 10px 16px !important;
  transition: border-color 0.15s !important;
}
.mfp-search:focus-within {
  border-color: hsl(var(--violet) / 0.6) !important;
  box-shadow: 0 0 0 3px hsl(var(--violet) / 0.12);
}
.mfp-search input {
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  color: hsl(var(--fg)) !important;
}
.mfp-search input::placeholder {
  color: hsl(var(--muted-fg) / 0.6) !important;
}

/* Tabs — Aurora underline style */
.mfp-tabs {
  border-bottom: 1px solid hsl(var(--border)) !important;
  gap: 0 !important;
  margin-bottom: 20px;
}
.mfp-tabs button {
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 10px 16px !important;
  color: hsl(var(--muted-fg)) !important;
  border-radius: 0 !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -1px !important;
  transition: color 0.15s, border-color 0.15s !important;
}
.mfp-tabs button:hover {
  color: hsl(var(--fg)) !important;
}
.mfp-tabs button.active {
  color: hsl(var(--violet-light)) !important;
  border-bottom-color: hsl(var(--violet-light)) !important;
}

/* Table container */
.mfp-table {
  background: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* Table header row */
.mfp-table-head {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: hsl(var(--muted-fg) / 0.7) !important;
  background: hsl(var(--muted) / 0.4) !important;
  border-bottom: 1px solid hsl(var(--border)) !important;
  padding: 12px 22px !important;
}

/* Data rows */
.mfp-row {
  border-bottom: 1px solid hsl(var(--border) / 0.7) !important;
  padding: 13px 22px !important;
  transition: background 0.12s !important;
}
.mfp-row:hover {
  background: hsl(var(--violet) / 0.05) !important;
}
.mfp-row:last-child {
  border-bottom: none !important;
}

/* File icon — Aurora gradient squares */
.mfp-icon {
  border-radius: 10px !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}
.mfp-icon.pdf {
  background: linear-gradient(135deg, hsl(354 73% 55%) 0%, hsl(354 80% 42%) 100%) !important;
  box-shadow: 0 3px 8px -3px hsl(354 73% 55% / 0.55) !important;
}
.mfp-icon.img,
.mfp-icon.png {
  background: linear-gradient(135deg, hsl(198 80% 50%) 0%, hsl(220 75% 55%) 100%) !important;
  box-shadow: 0 3px 8px -3px hsl(198 80% 50% / 0.5) !important;
}
.mfp-icon.zip {
  background: linear-gradient(135deg, hsl(41 78% 55%) 0%, hsl(30 78% 48%) 100%) !important;
  box-shadow: 0 3px 8px -3px hsl(41 78% 55% / 0.5) !important;
}
.mfp-icon.txt {
  background: linear-gradient(135deg, hsl(240 8% 50%) 0%, hsl(240 8% 38%) 100%) !important;
}
.mfp-icon.other {
  background: var(--gradient-brand) !important;
  box-shadow: var(--shadow-brand) !important;
}

/* Filename */
.mfp-fname {
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: hsl(var(--fg)) !important;
}

/* Meta columns */
.mfp-type, .mfp-size, .mfp-date {
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  color: hsl(var(--muted-fg)) !important;
}

/* Action buttons */
.mfp-star {
  background: transparent !important;
  border-radius: 8px !important;
  color: hsl(var(--muted-fg)) !important;
  transition: color 0.15s, background 0.15s !important;
}
.mfp-star:hover {
  background: hsl(var(--muted)) !important;
  color: hsl(var(--fg)) !important;
}
.mfp-star.active {
  color: hsl(var(--warning)) !important;
}
.mfp-dots {
  background: transparent !important;
  color: hsl(var(--muted-fg)) !important;
  border-radius: 8px !important;
  transition: color 0.15s, background 0.15s !important;
}
.mfp-dots:hover {
  background: hsl(var(--muted)) !important;
  color: hsl(var(--fg)) !important;
}

/* Empty state */
.mfp-empty {
  background: transparent !important;
  padding: 80px 30px !important;
}
.mfp-empty strong {
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: hsl(var(--fg)) !important;
  letter-spacing: -0.01em !important;
  display: block !important;
  margin-bottom: 8px !important;
}
.mfp-empty p, .mfp-empty span {
  font-size: 14px !important;
  color: hsl(var(--muted-fg)) !important;
}

/* Grid view polish */
.mfp-table.grid-view .mfp-table-body {
  gap: 12px !important;
  padding: 16px !important;
}
.mfp-table.grid-view .mfp-row {
  background: hsl(var(--muted) / 0.5) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 14px !important;
  transition: border-color 0.15s, transform 0.15s !important;
}
.mfp-table.grid-view .mfp-row:hover {
  background: hsl(var(--muted) / 0.8) !important;
  border-color: hsl(var(--violet) / 0.4) !important;
  transform: translateY(-2px) !important;
}

/* ============================================================================
   WORKSPACE / DROP ZONE — minor Aurora polish pass
   ============================================================================ */

/* Drop zone — match Aurora card style */
.drop-zone, #dropZone {
  border: 2px dashed hsl(var(--border-strong)) !important;
  border-radius: 18px !important;
  background: hsl(var(--card)) !important;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s !important;
}
.drop-zone:hover, #dropZone:hover,
.drop-zone.dragging, #dropZone.dragging {
  border-color: hsl(var(--violet) / 0.7) !important;
  background: hsl(var(--violet) / 0.04) !important;
  box-shadow: 0 0 0 4px hsl(var(--violet) / 0.08) !important;
}

/* Convert button — primary brand gradient */
#convertButton {
  background: var(--gradient-brand) !important;
  border: none !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  box-shadow: var(--shadow-brand) !important;
  transition: filter 0.15s, transform 0.15s !important;
}
#convertButton:hover:not(:disabled) {
  filter: brightness(1.08) !important;
  transform: translateY(-1px) !important;
}
#convertButton:disabled {
  opacity: 0.45 !important;
  filter: none !important;
  transform: none !important;
}

/* Auth menu dropdown — Aurora card */
.auth-menu {
  background: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border-strong)) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow-elev), 0 0 0 1px hsl(var(--violet) / 0.08) !important;
  overflow: hidden !important;
  font-family: var(--font-display) !important;
}
.auth-menu-head {
  padding: 14px 16px !important;
  border-bottom: 1px solid hsl(var(--border)) !important;
}
.auth-menu-item {
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: hsl(var(--fg)) !important;
  padding: 10px 16px !important;
  transition: background 0.12s !important;
}
.auth-menu-item:hover {
  background: hsl(var(--muted)) !important;
  color: hsl(var(--fg)) !important;
}
.auth-menu-avatar {
  background: var(--gradient-brand) !important;
  border-radius: 999px !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
}

/* ============================================================================
   GENERAL DIALOGS — all <dialog> get Aurora backdrop
   ============================================================================ */
dialog::backdrop {
  background: hsl(var(--bg) / 0.85) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ============================================================
   TRUST STRIP — below the drop zone (v133)
   Research finding 2026-05-14: file privacy is the #1 hesitation
   for new users in PDF-converter category. Specific numbers >
   vague claims.
   ============================================================ */
.trust-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 14px 0 6px;
}
.trust-pill {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.15s, transform 0.15s;
}
.trust-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, hsl(var(--violet) / 0.08), transparent 60%);
  pointer-events: none;
}
.trust-pill:hover {
  border-color: hsl(var(--violet) / 0.5);
  transform: translateY(-1px);
}
.trust-pill svg {
  width: 18px;
  height: 18px;
  stroke: hsl(var(--violet-light));
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: 2px;
}
.trust-pill strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: hsl(var(--fg));
  line-height: 1.2;
}
.trust-pill small {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: hsl(var(--fg) / 0.62);
  line-height: 1.3;
}
@media (max-width: 640px) {
  .trust-strip {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .trust-pill {
    padding: 10px 12px;
  }
}

/* ============================================================
   TOPBAR MOBILE DENSITY FIX (v133)
   Agent 3 finding: at 360px the topbar overflows — 6 controls
   (credit, reward, account, signup, theme, learn). On mobile we
   collapse non-essentials and keep upload-flow-critical items.
   ============================================================ */
@media (max-width: 720px) {
  .topbar-actions {
    gap: 6px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .topbar-actions::-webkit-scrollbar { display: none; }

  /* Hide reward CTA text (keep the icon) */
  .topbar-actions .reward-cta .reward-cta-text {
    display: none !important;
  }
  .topbar-actions .reward-cta {
    width: 36px;
    padding: 0 !important;
    justify-content: center;
  }
  /* Credit chip stays — that's user-facing essential */

  /* Theme + Learn buttons stay icon-only (they already are) */
}
@media (max-width: 480px) {
  /* Below iPhone-SE width: hide reward button entirely; user can find
     it in the Pro modal. */
  .topbar-actions .reward-cta { display: none !important; }
  .topbar-actions .topbar-pro-stack .primary-button {
    font-size: 11px !important;
    padding: 6px 10px !important;
  }
  /* Keep sign-up button visible even on tiny screens — it's the primary
     monetization action. Override the previous display:none. */
  .topbar-actions .account-signup-btn {
    display: inline-flex !important;
    padding: 6px 10px !important;
    font-size: 11px !important;
  }
}

/* ============================================================
   MY FILES EMPTY STATE — drag-drop embedded (v133)
   Research finding: best-in-class empty states embed the upload
   target rather than linking elsewhere. No paywall here — would
   read as hostile.
   ============================================================ */
.mfp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 64px 32px;
  border: 2px dashed hsl(var(--border-strong));
  border-radius: 16px;
  background:
    radial-gradient(ellipse 600px 400px at 50% 0%, hsl(var(--violet) / 0.08), transparent 70%),
    hsl(var(--card) / 0.5);
  transition: border-color 0.2s, background 0.2s;
}
.mfp-empty:hover,
.mfp-empty.dragover {
  border-color: hsl(var(--violet));
  background:
    radial-gradient(ellipse 600px 400px at 50% 0%, hsl(var(--violet) / 0.18), transparent 70%),
    hsl(var(--card));
}
.mfp-empty-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, hsl(var(--violet)), hsl(var(--pink)));
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 28px -8px hsl(var(--violet) / 0.5);
}
.mfp-empty-icon svg {
  width: 32px;
  height: 32px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mfp-empty-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: hsl(var(--fg));
  margin: 0 0 6px;
}
.mfp-empty-sub {
  font-family: var(--font-mono);
  font-size: 12px;
  color: hsl(var(--fg) / 0.65);
  margin: 0 0 18px;
  max-width: 360px;
}
.mfp-empty-cta {
  background: linear-gradient(135deg, hsl(var(--violet)), hsl(var(--pink)));
  color: #fff;
  border: none;
  padding: 10px 22px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 8px 20px -8px hsl(var(--violet) / 0.5);
  transition: filter 0.15s, transform 0.15s;
}
.mfp-empty-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* ============================================================
   CATEGORY TAB BAR (v135) — iLovePDF-style chip filter
   ============================================================ */
.cat-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 28px;
  padding: 6px;
  background: hsl(var(--card) / 0.4);
  border: 1px solid hsl(var(--border));
  border-radius: 14px;
  backdrop-filter: blur(6px);
}
.cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: hsl(var(--fg) / 0.72);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.15s, border-color 0.15s;
}
.cat-chip:hover {
  background: hsl(var(--muted));
  color: hsl(var(--fg));
}
.cat-chip.active {
  background: linear-gradient(135deg, hsl(var(--violet)), hsl(var(--pink))) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 6px 16px -6px hsl(var(--violet) / 0.6);
  transform: translateY(-1px);
}
.cat-chip .cat-count {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  background: hsl(0 0% 100% / 0.18);
  border-radius: 6px;
  color: inherit;
}
.cat-chip:not(.active) .cat-count {
  background: hsl(var(--violet) / 0.14);
  color: hsl(var(--violet-light));
}
@media (max-width: 560px) {
  .cat-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .cat-tabs::-webkit-scrollbar { display: none; }
  .cat-chip { flex-shrink: 0; }
}

/* ============================================================
   PRICING TOGGLE + SAVE BADGE (v135)
   Monthly/Yearly switch above the pricing cards.
   ============================================================ */
.pricing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  margin: 0 auto 24px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
  position: relative;
}
.pricing-toggle button {
  position: relative;
  z-index: 1;
  padding: 8px 18px;
  background: transparent;
  border: none;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: hsl(var(--fg) / 0.7);
  cursor: pointer;
  transition: color 0.2s;
}
.pricing-toggle button.active {
  background: linear-gradient(135deg, hsl(var(--violet)), hsl(var(--pink)));
  color: #fff;
}
.pricing-save-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  margin-left: 6px;
  background: hsl(var(--mint) / 0.22);
  border: 1px solid hsl(var(--mint) / 0.45);
  color: hsl(var(--mint));
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  font-weight: 700;
}

/* ============================================================
   PRO RENEWAL LINE (v135)
   Shown in the auth dropdown menu / Pro modal when user is signed in
   and has an active entitlement.
   ============================================================ */
.pro-renewal-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 14px;
  background: hsl(var(--mint) / 0.12);
  border: 1px solid hsl(var(--mint) / 0.3);
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: hsl(var(--mint));
  letter-spacing: 0.02em;
}
.pro-renewal-line .dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: hsl(var(--mint));
  box-shadow: 0 0 8px hsl(var(--mint) / 0.6);
  animation: pulseRenew 2s ease-in-out infinite;
}
@keyframes pulseRenew {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.pro-renewal-line a {
  color: hsl(var(--mint));
  text-decoration: underline;
  font-weight: 700;
}

/* ============================================================
   LIGHT THEME POLISH (v135)
   The dark theme is the canonical Aurora look. When user toggles to
   light, override the few opinionated background washes & shadows so
   the design doesn't look broken (light text on light bg, etc).
   ============================================================ */
body.light {
  background-color: hsl(var(--bg)) !important;
  color: hsl(var(--fg));
}

/* Light theme: soften the aurora ambient washes so the page doesn't
   look like an LSD trip on a white background. */
body.light.aurora-bg {
  background-image:
    radial-gradient(ellipse 1600px 900px at 50% -10%,
      hsl(var(--violet) / 0.10) 0%,
      hsl(var(--violet) / 0.04) 30%,
      transparent 65%),
    radial-gradient(circle 900px at calc(100% + 50px) 25%,
      hsl(var(--pink) / 0.06) 0%,
      transparent 60%),
    radial-gradient(circle 700px at -10% 70%,
      hsl(var(--mint) / 0.04) 0%,
      transparent 55%) !important;
}

/* Sidebar in light mode */
body.light .sidebar {
  background: hsl(var(--card));
  border-right: 1px solid hsl(var(--border));
}
body.light .sidebar .nav-link { color: hsl(var(--fg) / 0.78); }
body.light .sidebar .nav-link:hover { background: hsl(var(--muted)); color: hsl(var(--fg)); }
body.light .sidebar .nav-link.active {
  background: linear-gradient(135deg, hsl(var(--violet) / 0.12), hsl(var(--pink) / 0.08));
  color: hsl(var(--violet));
  border: 1px solid hsl(var(--violet) / 0.3);
}

/* Tool cards in light mode — keep them readable */
body.light .tool-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  color: hsl(var(--fg));
}
body.light .tool-card:hover {
  border-color: hsl(var(--violet) / 0.4);
  box-shadow: 0 8px 24px -8px hsl(var(--violet) / 0.15);
}
body.light .tc-name { color: hsl(var(--fg)); }
body.light .tc-desc { color: hsl(var(--fg) / 0.65); }

/* Drop zone in light */
body.light .drop-zone {
  background: hsl(var(--card));
  border: 2px dashed hsl(var(--border-strong));
  color: hsl(var(--fg));
}
body.light .drop-zone:hover,
body.light .drop-zone.is-dragging {
  border-color: hsl(var(--violet));
  background: hsl(var(--violet) / 0.04);
}

/* Trust strip in light */
body.light .trust-pill {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
}
body.light .trust-pill strong { color: hsl(var(--fg)); }
body.light .trust-pill small { color: hsl(var(--fg) / 0.55); }

/* My Files in light */
body.light .mfp-table {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
}
body.light .mfp-table-head { color: hsl(var(--fg) / 0.65); border-bottom: 1px solid hsl(var(--border)); }
body.light .mfp-row { color: hsl(var(--fg)); border-bottom: 1px solid hsl(var(--border)); }
body.light .mfp-row:hover { background: hsl(var(--muted)); }

/* Topbar buttons in light */
body.light .credit-chip { background: hsl(var(--card)); border-color: hsl(var(--border-strong)); color: hsl(var(--violet)); }
body.light .reward-cta { background: hsl(var(--card)); border-color: hsl(var(--border-strong)); color: hsl(var(--fg)); }

/* Category chips in light */
body.light .cat-tabs { background: hsl(var(--card) / 0.6); border-color: hsl(var(--border)); }
body.light .cat-chip:not(.active) { color: hsl(var(--fg) / 0.72); }
body.light .cat-chip:not(.active):hover { background: hsl(var(--muted)); color: hsl(var(--fg)); }
body.light .cat-chip:not(.active) .cat-count { background: hsl(var(--violet) / 0.1); }

/* bc-compare table in light */
body.light .bc-compare table { background: hsl(var(--card)); }
body.light .bc-compare th { background: hsl(var(--muted)); color: hsl(var(--fg)); }
body.light .bc-compare td { color: hsl(var(--fg)); border-color: hsl(var(--border)); }
body.light .bc-compare tr:hover td { background: hsl(var(--muted)); }

/* Onboarding modal in light */
body.light .onboarding-modal,
body.light .ob-v7 {
  background: hsl(var(--card)) !important;
  color: hsl(var(--fg)) !important;
}
body.light .ob-v7-card,
body.light .ob-v7-pro-card {
  background: hsl(var(--bg));
  border: 1px solid hsl(var(--border));
}

/* Auth modal in light */
body.light .auth-modal {
  background: hsl(var(--card)) !important;
  color: hsl(var(--fg)) !important;
}
body.light .auth-modal input {
  background: hsl(var(--bg));
  border: 1px solid hsl(var(--border));
  color: hsl(var(--fg));
}

/* Pro modal in light */
body.light .pro-modal,
body.light .pro-modal-v2 {
  background: hsl(var(--card)) !important;
  color: hsl(var(--fg)) !important;
}
body.light .pro-plan-card {
  background: hsl(var(--bg));
  border: 1px solid hsl(var(--border));
  color: hsl(var(--fg));
}

/* Hero stats in light */
body.light .hero-aurora { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); }
body.light .hero-aurora-stat-num { color: hsl(var(--violet)); }
body.light .hero-aurora-stat-lbl { color: hsl(var(--fg) / 0.6); }
body.light .hero-aurora-sub { color: hsl(var(--fg) / 0.7); }

/* bc-* sections in light */
body.light .bc-stat,
body.light .bc-step,
body.light .bc-faq-item {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  color: hsl(var(--fg));
}

/* Result cards / file rows in light */
body.light .file-row,
body.light .result-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  color: hsl(var(--fg));
}

/* Buttons keep gradient — readable in both themes */
body.light .ob-v7-cta,
body.light .ob-v7 .ob-next-btn,
body.light .aurora-cta,
body.light .landing-pro-btn,
body.light #convertButton {
  color: #fff !important; /* on gradient bg */
}

/* Brand mark text in light */
body.light .brand-wordmark h2,
body.light .sidebar h2 {
  color: hsl(var(--fg));
}
body.light .brand-wordmark .eyebrow,
body.light .sidebar .eyebrow {
  color: hsl(var(--violet)) !important;
}

/* ============================================================
   v138 — BOTTOM TAB BAR + PAGE-LEVEL VIEW LAYOUT
   Friend's feedback: "amateur and confusing." Root cause was that
   everything (tools, files, settings) lived inside one scrolling
   page with a heavy topbar. iLovePDF/Smallpdf solve this with a
   fixed bottom tab bar that swaps between coherent views.
   ============================================================ */
.bc-tabbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  display: none; /* shown only on mobile via media query below */
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  height: calc(64px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: hsl(var(--card));
  border-top: 1px solid hsl(var(--border));
  box-shadow: 0 -8px 24px -12px hsl(220 30% 8% / 0.18);
  z-index: 1000;
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
}
.bc-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 4px 10px;
  background: transparent;
  border: 0;
  color: hsl(var(--muted-fg));
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: color 0.15s, transform 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.bc-tab:hover { color: hsl(var(--fg)); }
.bc-tab:active { transform: scale(0.94); }
.bc-tab-icon {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bc-tab-icon svg { width: 22px; height: 22px; }
.bc-tab.is-active {
  color: hsl(var(--violet));
  position: relative;
}
.bc-tab.is-active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, hsl(var(--violet)), hsl(var(--pink)));
}
.bc-tab-label { line-height: 1; }
/* Floating center "Scan" CTA — distinguishes it like iLovePDF's center action */
.bc-tab-center {
  position: relative;
}
.bc-tab-center .bc-tab-center-icon {
  position: absolute;
  top: -16px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, hsl(var(--violet)), hsl(var(--pink)));
  color: #fff;
  box-shadow: 0 8px 18px -6px hsl(var(--violet) / 0.6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bc-tab-center .bc-tab-center-icon svg { width: 26px; height: 26px; }
.bc-tab-center .bc-tab-label { margin-top: 38px; }
.bc-tab-center.is-active .bc-tab-center-icon { filter: brightness(1.08); }
.bc-tab-center.is-active::before { display: none; }

/* Pad the main shell so bottom nav doesn't cover content */
body[data-tabbar="on"] .app-shell,
body[data-tabbar="on"] main.app-shell {
  padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
}
/* Same padding for the legacy app-promo-bar so it sits above the tabbar */
body[data-tabbar="on"] .app-promo-bar {
  bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
}

@media (max-width: 900px) {
  .bc-tabbar { display: grid; }
  body { --bc-tabbar-h: 64px; }
}

/* ============================================================
   v138 — TOOLS PAGE (categorized, Smallpdf-style rows)
   ============================================================ */
.tools-page {
  padding: 16px 16px 24px;
  max-width: 720px;
  margin: 0 auto;
}
.tp-head { margin-bottom: 16px; }
.tp-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: hsl(var(--fg));
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.tp-sub {
  color: hsl(var(--muted-fg));
  font-size: 14px;
  margin: 0 0 14px;
  line-height: 1.5;
}
.tp-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: hsl(var(--muted));
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  margin-bottom: 18px;
}
.tp-search svg {
  width: 18px;
  height: 18px;
  color: hsl(var(--muted-fg));
  flex-shrink: 0;
}
.tp-search input {
  border: 0;
  background: transparent;
  outline: none;
  flex: 1;
  font-size: 15px;
  color: hsl(var(--fg));
  font-family: inherit;
}
.tp-search input::placeholder { color: hsl(var(--muted-fg)); }

.tp-categories {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.tp-category-head {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: hsl(var(--muted-fg));
  margin: 0 0 8px;
  padding: 0 4px;
}
.tp-category-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tp-tool-row {
  display: grid;
  grid-template-columns: 44px 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  transition: transform 0.12s, border-color 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
  width: 100%;
  font-family: inherit;
  color: inherit;
}
.tp-tool-row:hover {
  border-color: hsl(var(--violet) / 0.5);
  box-shadow: 0 8px 18px -10px hsl(var(--violet) / 0.32);
  transform: translateY(-1px);
}
.tp-tool-row:active { transform: scale(0.99); }
.tp-tool-icon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tp-tool-icon svg { width: 22px; height: 22px; stroke-width: 1.8; }
/* v145 — calmer per-category palette (tinted bg + colored stroke icon).
   Replaces the v138 saturated gradients which the user said felt visually
   noisy. Still distinguishable per category but no longer competes with
   the actual content. */
.tp-tool-icon.cat-scan    { background: hsl(258 70% 55% / 0.10); color: hsl(258 65% 55%); }
.tp-tool-icon.cat-convert { background: hsl(220 75% 55% / 0.10); color: hsl(220 70% 50%); }
.tp-tool-icon.cat-edit    { background: hsl(175 70% 42% / 0.10); color: hsl(175 65% 38%); }
.tp-tool-icon.cat-compress{ background: hsl(0   70% 55% / 0.10); color: hsl(0   65% 50%); }
.tp-tool-icon.cat-organize{ background: hsl(264 70% 60% / 0.10); color: hsl(264 65% 55%); }
.tp-tool-icon.cat-security{ background: hsl(35  85% 50% / 0.12); color: hsl(35  85% 42%); }
body.dark .tp-tool-icon.cat-scan    { background: hsl(258 70% 55% / 0.16); color: hsl(258 80% 72%); }
body.dark .tp-tool-icon.cat-convert { background: hsl(220 75% 55% / 0.18); color: hsl(220 90% 75%); }
body.dark .tp-tool-icon.cat-edit    { background: hsl(175 70% 42% / 0.18); color: hsl(175 75% 68%); }
body.dark .tp-tool-icon.cat-compress{ background: hsl(0   70% 55% / 0.16); color: hsl(0   80% 72%); }
body.dark .tp-tool-icon.cat-organize{ background: hsl(264 70% 60% / 0.18); color: hsl(264 80% 78%); }
body.dark .tp-tool-icon.cat-security{ background: hsl(35  85% 50% / 0.18); color: hsl(40  90% 70%); }
.tp-tool-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.tp-tool-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: hsl(var(--fg));
  line-height: 1.25;
}
.tp-tool-desc {
  font-size: 12.5px;
  color: hsl(var(--muted-fg));
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.tp-tool-badge {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 4px 8px;
  border-radius: 999px;
  text-transform: uppercase;
}
.tp-tool-badge.free {
  background: hsl(150 60% 92%);
  color: hsl(150 60% 28%);
}
.tp-tool-badge.pro {
  background: linear-gradient(135deg, #f59e0b, #f97316);
  color: #fff;
}
/* v152 — credit-count badge (replaces "PRO" label in tool rows) */
.tp-tool-badge.credit {
  background: hsl(var(--violet) / 0.10);
  color: hsl(var(--violet));
  border: 1px solid hsl(var(--violet) / 0.25);
  letter-spacing: 0;
  padding: 4px 9px;
  font-weight: 600;
}
body.dark .tp-tool-badge.credit {
  background: hsl(var(--violet) / 0.16);
  color: hsl(var(--violet-light));
}
body.dark .tp-tool-badge.free {
  background: hsl(150 40% 18%);
  color: hsl(150 70% 70%);
}
.tp-tool-chev {
  color: hsl(var(--muted-fg));
  font-size: 22px;
  line-height: 1;
  padding-right: 2px;
}
.tp-no-results {
  text-align: center;
  color: hsl(var(--muted-fg));
  padding: 32px 16px;
  font-size: 14px;
}

/* ============================================================
   v138 — SCANNER PAGE (placeholder)
   ============================================================ */
.scanner-page {
  padding: 24px 16px;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sp-card {
  width: 100%;
  max-width: 420px;
  text-align: center;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 20px;
  padding: 32px 24px;
  box-shadow: 0 18px 48px -24px hsl(var(--violet) / 0.32);
}
.sp-illu {
  width: 96px;
  height: 96px;
  margin: 0 auto 18px;
  border-radius: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, hsl(var(--violet) / 0.12), hsl(var(--pink) / 0.10));
  color: hsl(var(--violet));
}
.sp-illu svg { width: 56px; height: 56px; }
.sp-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 8px;
  color: hsl(var(--fg));
}
.sp-sub {
  color: hsl(var(--muted-fg));
  font-size: 14px;
  margin: 0 0 14px;
  line-height: 1.5;
}
.sp-pill {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, hsl(var(--violet)), hsl(var(--pink)));
  color: #fff;
  margin-bottom: 18px;
}
.sp-hint {
  color: hsl(var(--muted-fg));
  font-size: 13px;
  margin: 0 0 16px;
  line-height: 1.5;
}
.sp-hint strong { color: hsl(var(--fg)); }
.sp-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 999px;
  background: hsl(var(--fg));
  color: hsl(var(--card));
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  border: 0;
  cursor: pointer;
  transition: filter 0.15s, transform 0.12s;
}
.sp-cta:hover { filter: brightness(1.05); }
.sp-cta:active { transform: scale(0.97); }
.sp-cta svg { width: 18px; height: 18px; }

/* ============================================================
   v138 — SETTINGS PAGE
   ============================================================ */
.settings-page {
  padding: 16px 16px 24px;
  max-width: 600px;
  margin: 0 auto;
}
.stp-head { margin-bottom: 18px; }
.stp-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: hsl(var(--fg));
  margin: 0;
  letter-spacing: -0.01em;
}
.stp-group {
  margin-bottom: 22px;
}
.stp-group-title {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: hsl(var(--muted-fg));
  margin: 0 0 8px;
  padding: 0 6px;
}
.stp-row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
  width: 100%;
  margin-bottom: 6px;
  text-decoration: none;
  color: inherit;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.stp-row:hover {
  border-color: hsl(var(--violet) / 0.4);
  background: hsl(var(--violet) / 0.04);
}
.stp-row-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: hsl(var(--muted));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--violet));
}
.stp-row-icon svg { width: 20px; height: 20px; }
.stp-icon-pro {
  background: linear-gradient(135deg, #f59e0b, #f97316) !important;
  color: #fff !important;
}
.stp-row-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.stp-row-text strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: hsl(var(--fg));
  line-height: 1.25;
}
.stp-row-text small {
  font-size: 12.5px;
  color: hsl(var(--muted-fg));
  line-height: 1.4;
}
.stp-row-chev {
  font-size: 22px;
  color: hsl(var(--muted-fg));
  line-height: 1;
}
.stp-row-static {
  cursor: default;
  flex-wrap: wrap;
  grid-template-columns: 40px 1fr;
}
.stp-row-static:hover {
  border-color: hsl(var(--border));
  background: hsl(var(--card));
}
.stp-row-pro {
  background: linear-gradient(135deg, hsl(var(--violet) / 0.06), hsl(var(--pink) / 0.04));
  border-color: hsl(var(--violet) / 0.30);
}
.stp-row-pro:hover {
  background: linear-gradient(135deg, hsl(var(--violet) / 0.10), hsl(var(--pink) / 0.08));
  border-color: hsl(var(--violet) / 0.55);
}
.stp-account-card {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 14px;
  margin-bottom: 6px;
}
.stp-account-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, hsl(var(--violet) / 0.15), hsl(var(--pink) / 0.10));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--violet));
}
.stp-account-avatar svg { width: 26px; height: 26px; }
.stp-account-avatar.has-photo {
  background-size: cover;
  background-position: center;
}
.stp-account-avatar.has-photo svg { display: none; }
.stp-account-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stp-account-info strong {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: hsl(var(--fg));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stp-account-info span {
  font-size: 12.5px;
  color: hsl(var(--muted-fg));
}
.stp-account-cta {
  padding: 9px 16px;
  border-radius: 999px;
  background: hsl(var(--violet));
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
}
.stp-account-cta:hover { filter: brightness(1.07); }

/* v154 — restructured "out of credits" modal: Pro is the hero,
   ad-watch is secondary, refill is just an inline note. */
.out-of-credits-v154 .oc-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0 12px;
}
.oc-option-pro-v154 {
  display: grid !important;
  grid-template-columns: 48px 1fr auto !important;
  align-items: center;
  gap: 12px;
  padding: 14px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, hsl(258 75% 40%), hsl(286 80% 50%) 50%, hsl(330 85% 55%)) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 16px 32px -14px hsl(286 80% 40% / 0.55);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.oc-option-pro-v154:hover { filter: brightness(1.05); }
.oc-pro-crown {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(255,255,255,0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: hsl(45 100% 70%);
  flex-shrink: 0;
}
.oc-pro-crown svg { width: 26px; height: 26px; }
.oc-option-pro-v154 .oc-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.oc-option-pro-v154 .oc-content strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  color: #fff;
}
.oc-option-pro-v154 .oc-content small {
  font-size: 12px;
  opacity: 0.88;
}
.oc-option-pro-v154 .oc-price {
  opacity: 0.78;
  font-size: 11px;
  margin-top: 2px;
}
.oc-pro-cta-pill {
  background: #fff;
  color: hsl(286 60% 28%);
  padding: 8px 14px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12.5px;
  white-space: nowrap;
  flex-shrink: 0;
}

.oc-option-ad-v154 {
  display: grid !important;
  grid-template-columns: 40px 1fr auto !important;
  align-items: center;
  gap: 12px;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  background: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border)) !important;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.oc-option-ad-v154:hover { border-color: hsl(var(--violet) / 0.5); }
.oc-option-ad-v154 .oc-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: hsl(150 60% 45% / 0.12);
  color: hsl(150 60% 45%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.oc-option-ad-v154 .oc-icon svg { width: 20px; height: 20px; }
body.dark .oc-option-ad-v154 .oc-icon {
  background: hsl(150 60% 45% / 0.18);
  color: hsl(150 70% 68%);
}
.oc-option-ad-v154 .oc-content { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.oc-option-ad-v154 .oc-content strong {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: hsl(var(--fg));
}
.oc-option-ad-v154 .oc-content small {
  font-size: 12px;
  color: hsl(var(--muted-fg));
}
.oc-option-ad-v154 .oc-cta {
  background: hsl(150 60% 45%);
  color: #fff;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
}

.oc-refill-note {
  text-align: center;
  padding: 8px 12px;
  margin: 4px 0 0;
  font-size: 12.5px;
  color: hsl(var(--muted-fg));
  line-height: 1.4;
}

/* ============================================================
   v157 — ob-v8 MODERN ONBOARDING
   Figma-kit inspired: a large gradient hero illustration zone at
   the top of each slide (original Aurora art — abstract orbs +
   floating file/credit/crown glyphs, NOT copied from any kit),
   clean text below, big bottom CTA. Full-bleed on mobile.
   ============================================================ */
/* ============================================================
   v159 — ob-v8 REBUILT to match the clean professional reference:
   ONE dark surface (no full-bleed gradient block), a CONTAINED
   centered illustration that floats on that surface, eyebrow pill,
   big title, gray sub, dots, and a FULL-WIDTH CTA that is ALWAYS
   visible at the bottom. Everything fits one screen, no scroll.
   ============================================================ */
.ob-v8.onboarding-modal {
  border: 0 !important;
  border-radius: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  min-width: 0 !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  background: hsl(var(--bg)) !important;
}
.ob-v8 > form {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  /* reserve a 56px header band above the hero so the pills never overlap */
  padding: calc(56px + env(safe-area-inset-top)) 20px 0 !important;
  background: hsl(var(--bg)) !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}
.ob-v8 > form::before { display: none !important; }

/* ---- SEPARATE HEADER ROW (56px) — pills sit ABOVE the hero card ---- */
.ob-v8 .ob-step-counter {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 12px);
  left: 20px;
  height: 36px;
  display: inline-flex; align-items: center;
  color: #D9CCFF !important;
  background: rgba(10,10,20,0.45);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 13px;
  padding: 0 14px;
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 700; letter-spacing: 2px;
  z-index: 20;
}
.ob-v8 .ob-step-counter .ob-step-sep,
.ob-v8 .ob-step-counter .ob-step-total { color: rgba(217,204,255,0.55) !important; }
.ob-v8 .ob-skip-corner {
  position: absolute !important;
  top: calc(env(safe-area-inset-top) + 12px) !important;
  right: 20px !important;
  height: 36px;
  display: inline-flex; align-items: center;
  background: rgba(10,10,20,0.45) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: #D9CCFF !important;
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  padding: 0 16px !important;
  border-radius: 13px !important;
  z-index: 20;
}
.ob-v8 .ob-skip-corner:hover { color: #fff !important; background: rgba(20,18,34,0.7) !important; }
.ob-v8 .ob-arrow,
.ob-v8 .ob-arrow-prev,
.ob-v8 .ob-arrow-next { display: none !important; } /* dots + CTA only */

/* Slide = flex column under the header. Hero on top, content below,
   list/pills scroll, fixed CTA at the bottom. */
.ob-v8-slide {
  display: none;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  padding: 0 0 150px !important;   /* spec: paddingBottom 150 — nothing hides behind CTA */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}
.ob-v8-slide.active { display: flex; animation: aurora-fade-in .35s ease-out; }

/* Contained gradient hero CARD (matches the provided reference spec:
   rounded 34, subtle white border, gradient B561FF→3B5BDB→FF4D8A) */
.ob-v8-hero {
  position: relative;
  width: 100%;
  /* spec: other screens max 240px */
  height: min(30vh, 240px);
  min-height: 160px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4px 0 22px;
  border-radius: 32px;
  overflow: hidden;
  background: linear-gradient(135deg, #B561FF 0%, #3B5BDB 52%, #FF4D8A 100%);
  border: 1px solid rgba(255,255,255,0.12);
}
/* spec: language screen hero max 210px */
.ob-v8-lang .ob-v8-hero { height: min(26vh, 210px); min-height: 150px; }
/* spec: screen height < 800 → hero max 185px */
@media (max-height: 800px) {
  .ob-v8-hero { height: 185px !important; min-height: 0 !important; }
  .ob-v8-lang .ob-v8-hero { height: 175px !important; }
}
@media (max-height: 680px) {
  .ob-v8-hero { height: 150px !important; }
  .ob-v8-lang .ob-v8-hero { height: 140px !important; }
}
.ob-v8-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}
.ob-v8-orb-a { width: 150px; height: 150px; background: hsl(264 90% 62% / 0.30); top: 6%; left: 10%; }
.ob-v8-orb-b { width: 140px; height: 140px; background: hsl(330 90% 60% / 0.26); bottom: 6%; right: 10%; }

/* Floating gradient glyph tiles (welcome) — on dark bg, like reference */
.ob-v8-float {
  position: absolute;
  width: 50px; height: 50px;
  border-radius: 15px;
  background: linear-gradient(150deg, hsl(258 70% 56%), hsl(330 75% 58%));
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  box-shadow: 0 10px 22px -8px hsl(286 70% 30% / 0.6);
  animation: ob-v8-bob 4s ease-in-out infinite;
  z-index: 1;
}
.ob-v8-float svg { width: 24px; height: 24px; }
.ob-v8-float-1 { top: 8%;   left: 16%;  animation-delay: 0s; }
.ob-v8-float-2 { bottom: 12%; left: 8%;  width: 44px; height: 44px; animation-delay: .6s; animation-name: ob-v8-drift; }
.ob-v8-float-3 { top: 14%;  right: 14%; width: 44px; height: 44px; animation-delay: 1.4s; }
.ob-v8-float-4 { bottom: 10%; right: 9%; width: 42px; height: 42px; animation-delay: .9s; animation-name: ob-v8-drift; }
.ob-v8-float-5 { top: 44%;  left: 2%;   width: 38px; height: 38px; animation-delay: 1.1s; }
.ob-v8-float-6 { top: 48%;  right: 2%;  width: 38px; height: 38px; animation-delay: 1.8s; animation-name: ob-v8-drift; }
.ob-v8-float-7 { bottom: 2%; left: 42%; width: 36px; height: 36px; animation-delay: .4s; }
.ob-v8-float-8 { top: 0%;   left: 56%;  width: 36px; height: 36px; animation-delay: 1.2s; animation-name: ob-v8-drift; }
@keyframes ob-v8-bob {
  0%,100% { transform: translateY(0) rotate(-4deg); }
  50%     { transform: translateY(-10px) rotate(4deg); }
}
@keyframes ob-v8-drift {
  0%,100% { transform: translateX(0) translateY(0) rotate(3deg); }
  50%     { transform: translateX(-12px) translateY(-7px) rotate(-3deg); }
}
/* center logo badge / coin / crown share the gradient-tile look */
.ob-v8-logo-badge {
  position: relative; z-index: 2;
  width: 108px; height: 108px;
  border-radius: 30px;
  background: linear-gradient(150deg, hsl(258 70% 52%), hsl(330 78% 56%));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 20px 44px -14px hsl(286 70% 30% / 0.7);
}
.ob-v8-logo-badge .ob-v156-bunny { width: 76px; height: 76px; background: transparent; box-shadow: none; padding: 0; }
.ob-v8-coin-stack { position: relative; z-index: 2; width: 120px; height: 120px; }
.ob-v8-coin { position: absolute; width: 94px; height: 94px; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.ob-v8-coin-1 {
  background: linear-gradient(135deg, hsl(45 100% 62%), hsl(35 100% 50%));
  display: flex; align-items: center; justify-content: center;
  color: #fff; z-index: 3;
  box-shadow: 0 18px 36px -12px hsl(38 80% 35% / 0.7);
}
.ob-v8-coin-1 svg { width: 42px; height: 42px; }
.ob-v8-coin-2 { background: hsl(45 95% 58% / 0.55); transform: translate(-60%,-42%); z-index: 2; }
.ob-v8-coin-3 { background: hsl(45 85% 56% / 0.32); transform: translate(-40%,-60%); z-index: 1; }
.ob-v8-crown-ring { position: relative; z-index: 2; width: 130px; height: 130px; }
.ob-v8-crown {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 100px; height: 100px; border-radius: 50%;
  background: linear-gradient(150deg, hsl(258 70% 50%), hsl(330 78% 56%));
  display: flex; align-items: center; justify-content: center;
  color: hsl(45 100% 72%);
  box-shadow: 0 18px 38px -12px hsl(286 70% 30% / 0.7);
}
.ob-v8-crown svg { width: 50px; height: 50px; }
.ob-v8-spark { position: absolute; color: hsl(45 100% 75%); font-size: 18px; animation: ob-v8-twinkle 2.4s ease-in-out infinite; }
.ob-v8-spark-1 { top: 8%; right: 18%; animation-delay: 0s; }
.ob-v8-spark-2 { bottom: 14%; left: 12%; font-size: 14px; animation-delay: .7s; }
.ob-v8-spark-3 { top: 30%; left: 4%; font-size: 12px; animation-delay: 1.3s; }
@keyframes ob-v8-twinkle {
  0%,100% { opacity: .3; transform: scale(.8); }
  50%     { opacity: 1; transform: scale(1.15); }
}
/* scanner slide — document card + sweeping scan line + camera badge */
.ob-v8-scan-doc {
  position: relative; z-index: 2;
  width: 104px; height: 132px;
  border-radius: 14px;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  color: hsl(258 60% 55%);
  box-shadow: 0 18px 38px -12px hsl(286 70% 30% / 0.7);
  overflow: hidden;
}
.ob-v8-scan-doc svg { width: 52px; height: 52px; }
.ob-v8-scan-line2 {
  position: absolute; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, transparent, #4DD4FF, #B561FF, #FF4D8A, transparent);
  box-shadow: 0 0 14px 3px rgba(125,90,255,0.6);
  animation: ob-v8-scanline 2.2s ease-in-out infinite;
}
@keyframes ob-v8-scanline {
  0%   { top: 6%; }
  50%  { top: 90%; }
  100% { top: 6%; }
}
.ob-v8-scan-cam {
  position: absolute;
  right: 22%; bottom: 16%;
  z-index: 3;
  width: 52px; height: 52px;
  border-radius: 15px;
  background: linear-gradient(150deg, hsl(258 70% 56%), hsl(330 75% 58%));
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  box-shadow: 0 10px 22px -8px hsl(286 70% 30% / 0.6);
  animation: ob-v8-bob 3.6s ease-in-out infinite;
}
.ob-v8-scan-cam svg { width: 26px; height: 26px; }
/* globe (language) */
.ob-v8-globe {
  position: relative; z-index: 2;
  width: 96px; height: 96px; border-radius: 50%;
  background: linear-gradient(150deg, hsl(258 70% 52%), hsl(330 78% 56%));
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  box-shadow: 0 18px 38px -12px hsl(286 70% 30% / 0.7);
}
.ob-v8-globe svg { width: 48px; height: 48px; }
.ob-v8-lang-chip {
  position: absolute; z-index: 1;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  color: #fff;
  background: linear-gradient(150deg, hsl(258 70% 56%), hsl(330 75% 58%));
  border-radius: 10px; padding: 7px 10px;
  box-shadow: 0 8px 18px -6px hsl(286 70% 30% / 0.55);
  animation: ob-v8-drift 4.5s ease-in-out infinite;
}
.ob-v8-lang-chip-1 { top: 12%; left: 18%; animation-delay: 0s; }
.ob-v8-lang-chip-2 { top: 20%; right: 18%; animation-delay: .7s; }
.ob-v8-lang-chip-3 { bottom: 16%; left: 22%; animation-delay: 1.3s; }
.ob-v8-lang-chip-4 { bottom: 22%; right: 22%; animation-delay: 1.9s; }

/* Eyebrow / title / sub — spec colors & sizes */
.ob-v8-slide .ob-v7-eyebrow {
  margin: 0 0 14px !important;
  flex-shrink: 0;
  background: rgba(139,92,246,0.12) !important;
  border: 1px solid rgba(181,97,255,0.28) !important;
  color: #D8C6FF !important;
  letter-spacing: 0.22em !important;
  font-weight: 800 !important;
  padding: 8px 16px !important;
}
.ob-v8-slide .ob-v7-eyebrow .live-dot { background: #49E3A7 !important; }
.ob-v8-slide .ob-v7-title {
  margin: 6px 0 10px !important;
  flex-shrink: 0;
  font-size: clamp(28px, 7.4vw, 40px) !important;
  font-weight: 900 !important;
  letter-spacing: -1.2px !important;
  line-height: 1.12 !important;
  color: #fff !important;
}
body.light .ob-v8-slide .ob-v7-title { color: hsl(var(--fg)) !important; }
.ob-v8-slide .ob-v7-sub {
  margin: 0 !important;
  flex-shrink: 0;
  font-size: 16px !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
  color: #A9A6B8 !important;
}
.ob-v8-slide .ob-v156-pills { margin-top: 18px; flex-shrink: 0; }
.ob-v8-slide .ob-v156-logo-wrap { display: none; }

/* ---- FIXED BOTTOM BAR (spec: absolute, dark, dots + full-width CTA)
   Content scrolls behind it; the bar + button are ALWAYS visible. ---- */
/* ---- FIXED BOTTOM CTA — transparent gradient overlay (NOT a hard
   black block). Dots above it. Content scrolls fully behind. ---- */
.ob-v8 > form { padding-bottom: 0 !important; }
.ob-v8 .ob-dots,
.ob-v8 .onboarding-actions {
  position: absolute;
  left: 0; right: 0;
  z-index: 10;
}
.ob-v8 .ob-dots {
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  margin: 0;
  pointer-events: none;
}
.ob-v8 .ob-dots .ob-dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: rgba(255,255,255,0.20);
  transition: width .2s, background .2s;
}
.ob-v8 .ob-dots .ob-dot.active {
  width: 22px;
  background: #EC4899;
}
.ob-v8 .onboarding-actions {
  bottom: 0;
  padding: 30px 20px calc(16px + env(safe-area-inset-bottom, 0px));
  /* transparent → solid fade so the button reads without a hard block */
  background: linear-gradient(to top,
    #090910 0%, #090910 52%, rgba(9,9,16,0.86) 74%, rgba(9,9,16,0) 100%);
  margin: 0;
  pointer-events: none;
}
.ob-v8 .onboarding-actions .ob-next-btn {
  width: 100% !important;
  height: 60px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 20px !important;
  background: linear-gradient(90deg, #8B5CF6 0%, #D946EF 50%, #FF4D8A 100%) !important;
  color: #fff !important;
  font-family: var(--font-display) !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  letter-spacing: -0.4px !important;
  pointer-events: auto;
}
/* Pro slide: hide generic bar, its own CTA becomes the fixed bottom CTA */
.ob-v8:has(.onboarding-slide[data-slide="4"].active) .onboarding-actions { display: none !important; }
.ob-v8:has(.onboarding-slide[data-slide="4"].active) .ob-dots {
  bottom: calc(116px + env(safe-area-inset-bottom, 0px));
}
.ob-v8-slide.ob-v156-pro-slide .ob-v156-cta {
  position: absolute;
  left: 20px; right: 20px;
  bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  width: auto !important;
  max-width: none !important;
  height: 60px !important;
  margin: 0 !important;
  border-radius: 20px !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  z-index: 11;
}
.ob-v8-slide.ob-v156-pro-slide .ob-v156-skip-link {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  margin: 0;
  z-index: 11;
}

/* ---- Language list (spec: 72px rows, gradient-border active, radio) ---- */
.ob-v8-lang.ob-v8-slide { justify-content: flex-start; }
.ob-v8-lang .ob-v7-eyebrow { margin-bottom: 10px !important; }
.ob-v8-lang .ob-v7-title { margin-top: 18px !important; margin-bottom: 8px !important; }
/* subtitle max 2 lines */
.ob-v8-lang .ob-v7-sub {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ob-v8-lang-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin: 22px 0 0;
}
.ob-v8-lang-row {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr 34px;
  align-items: center;
  gap: 14px;
  height: 72px;
  padding: 0 14px !important;
  background: rgba(255,255,255,0.045) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 20px !important;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  flex-shrink: 0;
  transition: transform .1s;
}
body.light .ob-v8-lang-row {
  background: hsl(var(--card)) !important;
  border-color: hsl(var(--border)) !important;
}
.ob-v8-lang-row:active { transform: scale(.99); }
/* active = gradient border (cyan→purple→pink) via mask, inner dark */
.ob-v8-lang-row.active,
.ob-v8-lang-row.is-active {
  background: rgba(18,14,32,0.96) !important;
  border-color: transparent !important;
}
.ob-v8-lang-row.active::before,
.ob-v8-lang-row.is-active::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: 22px;
  padding: 1.5px;
  background: linear-gradient(135deg, #4DD4FF 0%, #B561FF 50%, #FF4D8A 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.ob-v8-lang-flagbox {
  width: 48px; height: 48px;
  border-radius: 15px;
  background: rgba(181,97,255,0.18) !important;
  display: flex; align-items: center; justify-content: center;
}
.ob-v8-lang-flag { font-size: 26px !important; line-height: 1; }
.ob-v8-lang-text {
  display: flex; flex-direction: column; gap: 3px;
  min-width: 0;
  background: none !important;
}
.ob-v8-lang-name {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 800;
  letter-spacing: -0.5px;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
body.light .ob-v8-lang-name { color: hsl(var(--fg)) !important; -webkit-text-fill-color: hsl(var(--fg)) !important; }
.ob-v8-lang-sub {
  font-size: 14px; font-weight: 500;
  color: #9D98AE !important;
  -webkit-text-fill-color: #9D98AE !important;
}
.ob-v8-lang-radio {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px solid #8B5CF6;
  display: flex; align-items: center; justify-content: center;
  background: none !important;
  transition: background .15s, border-color .15s;
}
.ob-v8-lang-radio-check {
  color: #fff;
  font-size: 20px; font-weight: 900;
  opacity: 0;
  -webkit-text-fill-color: #fff !important;
}
.ob-v8-lang-row.active .ob-v8-lang-radio,
.ob-v8-lang-row.is-active .ob-v8-lang-radio {
  background: #D946EF !important;
  border-color: #D946EF;
}
.ob-v8-lang-row.active .ob-v8-lang-radio-check,
.ob-v8-lang-row.is-active .ob-v8-lang-radio-check { opacity: 1; }

/* Kill the legacy `.language-button span { mint→pink gradient }` bug */
.ob-v8 .ob-v8-lang-row span,
.ob-v8 .language-button span {
  background-image: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  place-items: initial !important;
}
.ob-v8 .ob-v8-lang-row .ob-v8-lang-flagbox {
  background: rgba(181,97,255,0.18) !important;
}
.ob-v8 .language-button.active { color: #fff !important; }

/* Skip "GEÇ" + step pill — spec styling */
.ob-v8 .ob-skip-corner {
  background: rgba(10,10,20,0.45) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: #D9CCFF !important;
  letter-spacing: 3px !important;
  font-weight: 800 !important;
  border-radius: 14px !important;
  padding: 9px 16px !important;
}
.ob-v8 .ob-step-counter {
  background: rgba(10,10,20,0.45);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  padding: 8px 14px;
}

/* (responsive hero heights handled by the max-height:800/680 rules above) */
@media (max-height: 680px) {
  .ob-v8-slide .ob-v7-title { font-size: 24px !important; }
  .ob-v8-slide .ob-v156-pills { margin-top: 12px; }
}

/* ============================================================
   v156 — ONBOARDING SLIDE 1/2/4 REDESIGN (consistent Aurora style)
   ============================================================ */

/* Slide 1 — Welcome */
.ob-v156-logo-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 22px;
}
.ob-v156-bunny {
  width: 84px;
  height: 84px;
  border-radius: 22px;
  background: linear-gradient(135deg, hsl(var(--violet) / 0.12), hsl(var(--pink) / 0.08));
  padding: 8px;
  box-shadow: 0 12px 32px -12px hsl(var(--violet) / 0.45);
}
.ob-v156-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
}
.ob-v156-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--violet) / 0.25);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  color: hsl(var(--fg));
}
.ob-v156-pill svg {
  width: 14px;
  height: 14px;
  color: hsl(var(--violet));
}

/* Slide 2 — Credit system list (v156, replaces emoji icons) */
.ob-v156-credit-list { max-width: 420px; margin-left: auto; margin-right: auto; }
.ob-v156-credit-list li {
  grid-template-columns: 44px 1fr;
}
.ob-v156-credit-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0 !important;
}
.ob-v156-credit-icon svg { width: 22px; height: 22px; }
.ob-v156-credit-icon-1 {
  background: hsl(220 75% 55% / 0.12);
  color: hsl(220 75% 55%);
}
.ob-v156-credit-icon-2 {
  background: hsl(45 100% 55% / 0.14);
  color: hsl(35 95% 45%);
}
.ob-v156-credit-icon-3 {
  background: linear-gradient(135deg, hsl(var(--violet) / 0.15), hsl(var(--pink) / 0.10));
  color: hsl(var(--violet));
}
body.dark .ob-v156-credit-icon-1 { background: hsl(220 75% 55% / 0.20); color: hsl(220 90% 78%); }
body.dark .ob-v156-credit-icon-2 { background: hsl(45 100% 55% / 0.20); color: hsl(45 100% 72%); }
body.dark .ob-v156-credit-icon-3 { background: linear-gradient(135deg, hsl(var(--violet) / 0.22), hsl(var(--pink) / 0.15)); color: hsl(var(--violet-light)); }

/* Slide 4 — single Pro card */
.ob-v156-bonus-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto 16px;
  padding: 8px 14px;
  background: linear-gradient(135deg, hsl(150 60% 45% / 0.16), hsl(170 65% 50% / 0.10));
  border: 1px solid hsl(150 60% 45% / 0.40);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  color: hsl(150 65% 32%);
}
body.dark .ob-v156-bonus-pill { color: hsl(150 70% 72%); }
.ob-v156-pro-card {
  max-width: 380px;
  margin: 22px auto 18px;
  padding: 18px 18px 16px;
  background: linear-gradient(135deg, hsl(258 70% 18%), hsl(286 75% 22%) 50%, hsl(330 75% 28%));
  border-radius: 20px;
  color: #fff;
  box-shadow: 0 20px 40px -18px hsl(286 70% 25% / 0.65);
}
body.light .ob-v156-pro-card {
  background: linear-gradient(135deg, hsl(258 70% 50%), hsl(286 75% 55%) 50%, hsl(330 75% 60%));
}
.ob-v156-pro-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.ob-v156-pro-card-tier {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  background: rgba(255,255,255,0.20);
  padding: 4px 10px;
  border-radius: 6px;
}
.ob-v156-pro-card-trial-pill {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: hsl(45 100% 60%);
  color: hsl(286 60% 22%);
  padding: 4px 8px;
  border-radius: 999px;
}
.ob-v156-pro-card-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 4px 0 14px;
}
.ob-v156-pro-card-amount {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.ob-v156-pro-card-period {
  font-size: 14px;
  opacity: 0.85;
}
.ob-v156-pro-card-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ob-v156-pro-card-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}
.ob-v156-pro-card-list svg {
  width: 18px;
  height: 18px;
  color: hsl(150 70% 70%);
  flex-shrink: 0;
}
.ob-v156-cta {
  max-width: 380px;
  width: 100%;
  margin: 0 auto;
}
.ob-v156-skip-link {
  display: block;
  margin: 12px auto 0;
  background: transparent;
  border: 0;
  color: hsl(var(--muted-fg));
  font-family: var(--font-display);
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ob-v156-skip-link:hover { color: hsl(var(--fg)); }

/* v155 — onboarding slide 2 (credit system) list + slide 4 bonus badge */
.ob-v7-credit-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 380px;
}
.ob-v7-credit-list li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  padding: 12px 14px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--violet) / 0.18);
  border-radius: 14px;
}
.ob-v7-credit-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: linear-gradient(135deg, hsl(var(--violet) / 0.18), hsl(var(--pink) / 0.12));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.ob-v7-credit-list strong {
  display: block;
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 700;
  color: hsl(var(--fg));
  line-height: 1.25;
}
.ob-v7-credit-list small {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: hsl(var(--muted-fg));
  line-height: 1.4;
}

.ob-v7-credit-bonus {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 9px 14px;
  background: linear-gradient(135deg, hsl(150 60% 45% / 0.16), hsl(170 60% 50% / 0.10));
  border: 1px solid hsl(150 60% 45% / 0.40);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: hsl(150 65% 32%);
}
.ob-v7-credit-bonus-icon { font-size: 18px; line-height: 1; }
body.dark .ob-v7-credit-bonus {
  color: hsl(150 70% 70%);
}

/* ============================================================
   v162 — IN-APP DOCUMENT SCANNER (camera overlay + review)
   ============================================================ */
.scn-cam, .scn-review {
  position: fixed;
  inset: 0;
  z-index: 4000;
  background: #07070d;
  display: flex;
  flex-direction: column;
}
.scn-cam[hidden], .scn-review[hidden] { display: none !important; }

/* ---- Camera viewfinder ---- */
.scn-cam-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}
.scn-cam-canvas { position: absolute; inset: 0; }

/* v163 — freeze-frame + scanning sweep after capture */
.scn-scan-frozen {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 3;
  background: #000;
}
.scn-scan-overlay {
  position: absolute; inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}
.scn-scan-line {
  position: absolute;
  left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, #4DD4FF, #B561FF, #FF4D8A, transparent);
  box-shadow: 0 0 18px 4px rgba(125,90,255,0.65);
  animation: scn-sweep 1.15s cubic-bezier(.4,0,.2,1) forwards;
}
.scn-scan-glow {
  position: absolute; left: 0; right: 0; top: 0;
  height: 0;
  background: linear-gradient(to bottom, rgba(77,212,255,0.16), transparent);
  animation: scn-glow 1.15s cubic-bezier(.4,0,.2,1) forwards;
}
.scn-scan-label {
  position: absolute;
  left: 50%; bottom: 16%;
  transform: translateX(-50%);
  color: #fff;
  font-family: var(--font-display);
  font-size: 14px; font-weight: 700;
  background: rgba(0,0,0,0.5);
  padding: 8px 18px;
  border-radius: 999px;
  display: inline-flex; align-items: center; gap: 8px;
}
.scn-scan-label::before {
  content: "";
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: scn-spin .7s linear infinite;
}
@keyframes scn-sweep { from { top: -4px; } to { top: 100%; } }
@keyframes scn-glow  { from { height: 0; } to { height: 100%; } }
@keyframes scn-spin  { to { transform: rotate(360deg); } }
.scn-cam-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(env(safe-area-inset-top) + 14px) 18px 14px;
}
.scn-cam-icon {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 0;
  background: rgba(0,0,0,0.45);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.scn-cam-icon svg { width: 20px; height: 20px; }
.scn-cam-count {
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 700;
  color: #fff;
  background: rgba(0,0,0,0.45);
  padding: 7px 14px;
  border-radius: 999px;
}
.scn-cam-count::after { content: " / sayfa"; opacity: .6; font-weight: 500; }
.scn-cam-frame {
  position: relative;
  z-index: 1;
  flex: 1;
  margin: 8px 22px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.scn-corner {
  position: absolute;
  width: 30px; height: 30px;
  border: 3px solid rgba(255,255,255,0.9);
}
.scn-corner.tl { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; }
.scn-corner.tr { top: 0; right: 0; border-left: 0; border-bottom: 0; border-radius: 0 8px 0 0; }
.scn-corner.bl { bottom: 0; left: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 8px; }
.scn-corner.br { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 8px 0; }
.scn-cam-hint {
  margin: 0 0 16px;
  color: rgba(255,255,255,0.85);
  font-family: var(--font-display);
  font-size: 13px;
  background: rgba(0,0,0,0.4);
  padding: 7px 14px;
  border-radius: 999px;
}
.scn-cam-bottom {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 64px 1fr 64px;
  align-items: center;
  gap: 14px;
  padding: 18px 22px calc(env(safe-area-inset-bottom) + 22px);
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
}
.scn-cam-thumb {
  width: 56px; height: 56px;
  border-radius: 12px;
  border: 2px solid rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.08) center/cover no-repeat;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.scn-cam-thumb-empty { font-size: 9px; color: rgba(255,255,255,0.6); text-align: center; }
.scn-cam-shutter {
  justify-self: center;
  width: 74px; height: 74px;
  border-radius: 50%;
  border: 4px solid #fff;
  background: transparent;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.scn-cam-shutter span {
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #fff;
  transition: transform .1s;
}
.scn-cam-shutter:active span { transform: scale(0.88); }
.scn-cam-done {
  justify-self: end;
  height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  border: 0;
  background: linear-gradient(135deg, hsl(var(--violet)), hsl(var(--pink)));
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
.scn-cam-done:disabled { opacity: .4; pointer-events: none; }

/* ---- Review / edit ---- */
.scn-review { background: #0b0a14; }
.scn-review-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: calc(env(safe-area-inset-top) + 14px) 18px 12px;
}
.scn-review-title {
  flex: 1;
  font-family: var(--font-display);
  font-size: 18px; font-weight: 700;
  color: #fff;
  margin: 0;
}
.scn-review-count {
  font-family: var(--font-mono);
  font-size: 12px; color: rgba(255,255,255,0.6);
}
.scn-review-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  min-height: 0;
}
.scn-review-img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 10px;
  box-shadow: 0 16px 40px -16px rgba(0,0,0,0.7);
  background: #fff;
}
.scn-review-filters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 20px;
  scrollbar-width: none;
}
.scn-review-filters::-webkit-scrollbar { display: none; }
.scn-filter {
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.8);
  font-family: var(--font-display);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.scn-filter.is-active {
  background: linear-gradient(135deg, hsl(var(--violet)), hsl(var(--pink)));
  border-color: transparent;
  color: #fff;
}
.scn-review-pageacts {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 4px 20px 10px;
}
.scn-pageact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
  color: #fff;
  font-family: var(--font-display);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.scn-pageact svg { width: 16px; height: 16px; }
.scn-pageact-danger { color: hsl(0 75% 68%); border-color: hsl(0 60% 40% / 0.4); }

/* v249 — Köşe ayarlama overlay'i. Fullscreen dark, raw görseli ortalanmış
   şekilde göster, 4 köşe SVG handle ile sürüklenebilir. */
.scn-crop {
  position: fixed; inset: 0; z-index: 4200;
  background: #050608;
  display: flex; flex-direction: column;
  color: #fff;
  font-family: var(--font-display);
}
.scn-crop[hidden] { display: none; }
.scn-crop-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; gap: 12px;
  background: linear-gradient(180deg, rgba(0,0,0,0.55), transparent);
}
.scn-crop-title {
  font-size: 16px; font-weight: 700; margin: 0;
  flex: 1; text-align: center;
}
.scn-crop-reset-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  color: #fff;
  border-radius: 999px;
  padding: 7px 14px;
  font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.scn-crop-stage {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: #050608;
  /* Touch action: prevent browser pan/zoom interfering with handle drag */
  touch-action: none;
  user-select: none;
}
.scn-crop-canvas {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%; max-height: 100%;
  pointer-events: none;
}
.scn-crop-svg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: auto;
}
.scn-crop-poly {
  fill: rgba(124, 58, 237, 0.10);
  stroke: hsl(var(--violet));
  stroke-width: 2;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 8px rgba(124,58,237,0.4));
}
/* Handle: circle with a target ring. Larger touch hit-area via invisible
   outer circle so the handle is easy to grab on mobile. */
.scn-crop-handle {
  cursor: grab;
}
.scn-crop-handle.is-dragging { cursor: grabbing; }
.scn-crop-handle-hit {
  fill: transparent;
  /* big invisible touch target */
}
.scn-crop-handle-outer {
  fill: rgba(255,255,255,0.10);
  stroke: hsl(var(--violet));
  stroke-width: 2;
}
.scn-crop-handle-inner {
  fill: hsl(var(--violet));
  filter: drop-shadow(0 1px 4px rgba(124,58,237,0.7));
}
.scn-crop-handle.is-dragging .scn-crop-handle-outer {
  fill: rgba(124,58,237,0.22);
  stroke: hsl(var(--pink));
}
.scn-crop-foot {
  padding: 16px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(0deg, rgba(0,0,0,0.65), transparent);
  display: flex; flex-direction: column; gap: 12px; align-items: center;
}
.scn-crop-hint {
  font-size: 13px;
  color: rgba(255,255,255,0.72);
  margin: 0;
  text-align: center;
}
.scn-crop-apply {
  width: 100%; max-width: 320px;
  padding: 14px 22px; border-radius: 999px; border: 0;
  background: linear-gradient(135deg, hsl(var(--violet)), hsl(var(--pink)));
  color: #fff; font: inherit; font-weight: 700; font-size: 15px;
  cursor: pointer;
  box-shadow: 0 12px 28px -10px rgba(124,58,237,0.65);
}
.scn-crop-apply:active { transform: scale(0.98); }
.scn-review-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 20px;
  scrollbar-width: none;
}
.scn-review-strip::-webkit-scrollbar { display: none; }
.scn-strip-thumb {
  flex-shrink: 0;
  width: 54px; height: 70px;
  border-radius: 8px;
  object-fit: cover;
  border: 2px solid transparent;
  cursor: pointer;
  background: #fff;
}
.scn-strip-thumb.is-active { border-color: hsl(var(--violet)); }
.scn-review-cta-wrap {
  padding: 12px 20px calc(env(safe-area-inset-bottom) + 18px);
}
.scn-review-cta {
  width: 100%;
  height: 56px;
  border-radius: 16px;
  border: 0;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  background: linear-gradient(90deg, #8B5CF6, #D946EF 55%, #FF4D8A);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  cursor: pointer;
}
.scn-review-cta svg { width: 20px; height: 20px; }
.scn-review-cta:disabled { opacity: .5; pointer-events: none; }

/* v154 — 3-step "how it works" icons (was emoji + empty div) */
.bc-step-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.bc-step-icon svg { width: 28px; height: 28px; }
.bc-step-icon-1 { background: hsl(220 75% 55% / 0.12); color: hsl(220 75% 55%); }
.bc-step-icon-2 { background: hsl(264 70% 60% / 0.12); color: hsl(264 70% 55%); }
.bc-step-icon-3 { background: hsl(150 60% 45% / 0.12); color: hsl(150 60% 42%); }
body.dark .bc-step-icon-1 { background: hsl(220 75% 55% / 0.18); color: hsl(220 90% 78%); }
body.dark .bc-step-icon-2 { background: hsl(264 70% 60% / 0.18); color: hsl(264 80% 80%); }
body.dark .bc-step-icon-3 { background: hsl(150 60% 45% / 0.18); color: hsl(150 70% 72%); }

/* v153 — signed-in rich account panel */
.stp-account-avatar.v153-avatar {
  background: linear-gradient(135deg, hsl(var(--violet)), hsl(var(--pink))) !important;
  color: #fff;
  font-family: var(--font-display);
}
.stp-account-avatar.v153-avatar strong {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.stp-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 8px 0 6px;
}
.stp-stat {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  padding: 10px 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.stp-stat strong {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  color: hsl(var(--fg));
  letter-spacing: -0.01em;
}
.stp-stat small {
  font-size: 11px;
  color: hsl(var(--muted-fg));
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.stp-lang-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-top: 10px;
}
.stp-lang-btn {
  padding: 8px 6px;
  border-radius: 9px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  color: hsl(var(--fg));
  cursor: pointer;
  transition: all 0.12s;
}
.stp-lang-btn:hover {
  border-color: hsl(var(--violet) / 0.45);
  background: hsl(var(--violet) / 0.06);
}
.stp-lang-btn.is-active {
  background: linear-gradient(135deg, hsl(var(--violet)), hsl(var(--pink)));
  border-color: transparent;
  color: #fff;
}

.stp-version {
  text-align: center;
  color: hsl(var(--muted-fg));
  font-size: 11px;
  margin-top: 18px;
  font-family: var(--font-mono, monospace);
  opacity: 0.7;
}

/* When tabbar is on (mobile), hide the sidebar and the legacy topbar
   action clutter so the user has ONE clear nav. */
@media (max-width: 900px) {
  body[data-tabbar="on"] .sidebar { display: none !important; }
  /* Currently active tab dictates what's shown — JS handles section
     hiding via [hidden]; views are full-width by default on mobile. */
  body[data-tabbar="on"] .workspace { padding-left: 0 !important; padding-right: 0 !important; }
}

/* ============================================================
   v139 — MOBILE TOPBAR SIMPLIFICATION
   Friend's screenshot: 7 elements crammed in topbar (logo, signup, Pro,
   avatar, info, theme, language) overflowing. We have a bottom nav now,
   so we radically slim the topbar on mobile: just brand + credits.
   Everything else moved to Settings tab (already done in v138).
   ============================================================ */
@media (max-width: 900px) {
  body[data-tabbar="on"] .topbar {
    padding: 10px 14px !important;
    min-height: 56px !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  /* Hide the bulky "PDF & FILE TOOLKIT" eyebrow line on mobile */
  body[data-tabbar="on"] .topbar .mobile-brand-lockup .eyebrow,
  body[data-tabbar="on"] .topbar .mobile-brand-lockup p.eyebrow {
    display: none !important;
  }
  body[data-tabbar="on"] .topbar .mobile-brand-lockup h2 {
    font-size: 17px !important;
    margin: 0 !important;
  }
  /* Tool-title block (only shown after picking a tool) — keep but compact */
  body[data-tabbar="on"] .topbar .topbar-title { display: none !important; }

  /* These now live in Settings tab and the topbar lang-pill (v137):
     - signup button → Settings → Account
     - icon mini-row (info/theme + globe pill on small screens)
     - Pro stack (covered by Settings → Subscription + Pro upsell banner)
     v141: REWARD button is back — friend asked for credit + reward visible
     on mobile. Compact icon-only style below.
  */
  body[data-tabbar="on"] .topbar .account-signup-btn,
  body[data-tabbar="on"] .topbar .topbar-mini-row,
  body[data-tabbar="on"] .topbar .topbar-pro-stack #proButton {
    display: none !important;
  }
  /* v141: compact reward CTA in topbar — icon + small number, no full label */
  body[data-tabbar="on"] .topbar .reward-cta {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    padding: 5px 10px !important;
    font-size: 13px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, hsl(45 100% 60% / 0.20), hsl(45 100% 50% / 0.12)) !important;
    border: 1px solid hsl(45 100% 50% / 0.45) !important;
    color: hsl(45 100% 38%) !important;
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
  }
  body[data-tabbar="on"] .topbar .reward-cta svg {
    width: 14px !important;
    height: 14px !important;
  }
  body[data-tabbar="on"] .topbar .reward-cta .reward-cta-text {
    /* Show just "+2" instead of "+2 kredi" to keep it compact */
    font-size: 12px !important;
    letter-spacing: 0 !important;
  }
  body[data-tabbar="on"] .topbar .reward-cta .reward-cta-cooldown {
    font-size: 10px !important;
    opacity: 0.85;
  }
  body.dark[data-tabbar="on"] .topbar .reward-cta {
    color: hsl(45 100% 70%) !important;
    background: linear-gradient(135deg, hsl(45 100% 50% / 0.18), hsl(45 100% 40% / 0.10)) !important;
  }
  /* But keep the auth-menu so signed-in dropdown still works when avatar tapped */
  body[data-tabbar="on"] .topbar .topbar-pro-stack {
    display: contents !important;
  }
  /* Compact credit chip */
  body[data-tabbar="on"] .topbar .credit-chip {
    padding: 5px 10px !important;
    font-size: 13px !important;
  }
  body[data-tabbar="on"] .topbar .credit-chip .credit-label {
    display: none !important;
  }
  /* Account pill stays — single tap = sign in OR show menu */
  body[data-tabbar="on"] .topbar .account-pill {
    padding: 6px 10px !important;
    font-size: 13px !important;
  }
  /* The right-side actions cluster on a single line */
  body[data-tabbar="on"] .topbar .topbar-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    align-items: center !important;
    margin-left: auto !important;
  }
}

/* ============================================================
   v139 — APP PROMO BAR + LANDING CHIPS positioning
   Hide the legacy "Get app" floating banner on mobile entirely — it
   collides with the bottom tab bar and Google Play CTA is already in
   Settings → Subscription / Home → Pro banner.
   Also hide the obsolete category chips on the landing page when the
   bottom-nav Tools tab takes over (v138).
   ============================================================ */
@media (max-width: 900px) {
  body[data-tabbar="on"] .app-promo-bar { display: none !important; }

  /* The "Tüm araçlar / Dönüştür / Düzenle / ..." chip bar on the landing
     is redundant now that the Tools tab has the full categorized list.
     Hide on mobile to remove the half-cut visual. */
  body[data-tabbar="on"] .all-tools-landing .cat-tabs { display: none !important; }
}

/* ============================================================
   v139 — AUTH MODAL: visible submit feedback + loading spinner
   Friend bug: "şifre girince giriş yap dersem tepkim yok"
   Root cause: BunnyAuth dynamic-imports the Supabase SDK on first call.
   On slow/CDN-throttled networks (Turkey), this hangs silently with no
   user feedback. Fix: spinner + 10s timeout + visible error path.
   ============================================================ */
.auth-cta {
  position: relative;
}
.auth-cta[data-loading="true"] {
  color: transparent !important;
  pointer-events: none;
}
.auth-cta[data-loading="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin: auto;
  border: 2.5px solid rgba(255,255,255,0.32);
  border-top-color: #fff;
  border-radius: 50%;
  animation: auth-spin 0.7s linear infinite;
}
@keyframes auth-spin { to { transform: rotate(360deg); } }
.auth-error {
  background: hsl(0 80% 55% / 0.10);
  border: 1px solid hsl(0 80% 55% / 0.35);
  color: hsl(0 80% 55%);
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 13px;
  line-height: 1.4;
}
.auth-notice {
  background: hsl(150 60% 45% / 0.10);
  border: 1px solid hsl(150 60% 45% / 0.35);
  color: hsl(150 60% 38%);
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 13px;
  line-height: 1.4;
}

/* ============================================================
   v140 — REAL BUNNY LOGO ON MOBILE TOPBAR
   Was showing the aurora-mark gradient square; user said the rabbit
   logo doesn't show on mobile. Now the actual PNG renders inside the
   .mobile-brand-lockup, with the gradient square hidden by default
   (kept as a CSS-only fallback if the image fails to load).
   ============================================================ */
.topbar-bunny-logo {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  object-fit: contain;
  display: inline-block;
  flex-shrink: 0;
  /* Subtle gradient halo so the white-bg PNG sits well on dark theme */
  background: linear-gradient(135deg, hsl(var(--violet) / 0.12), hsl(var(--pink) / 0.08));
  padding: 3px;
  box-shadow: 0 4px 12px -4px hsl(var(--violet) / 0.35);
}
body.light .topbar-bunny-logo {
  background: #fff;
  box-shadow: 0 2px 8px -2px hsl(220 30% 8% / 0.12);
}
/* If somehow the bunny PNG 404s, swap to the gradient mark */
.topbar-bunny-logo[data-failed="true"] { display: none; }
.topbar-bunny-logo[data-failed="true"] + .topbar-aurora-fallback { display: inline-block !important; }
.mobile-brand-lockup .topbar-aurora-fallback[hidden] { display: none; }

@media (max-width: 900px) {
  body[data-tabbar="on"] .topbar-bunny-logo {
    width: 34px;
    height: 34px;
  }
}

/* ============================================================
   v141 — HOME PAGE CREDITS STATUS CARD
   Sits above the quick-upload card on the Home tab. Mobile-only
   (desktop already has full info in the sidebar + topbar). Hides
   itself when Pro is active.
   ============================================================ */
.hp-credits-card {
  display: none; /* visible only on mobile via media query below */
  margin: 12px 16px 14px;
  padding: 14px;
  background: linear-gradient(135deg, hsl(45 100% 60% / 0.10), hsl(var(--violet) / 0.08));
  border: 1px solid hsl(45 100% 50% / 0.30);
  border-radius: 16px;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 8px 24px -14px hsl(45 100% 50% / 0.40);
}
body.is-pro .hp-credits-card { display: none !important; }

.hp-credits-row {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  gap: 12px;
}
.hp-credits-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, hsl(45 100% 55%), hsl(35 100% 50%));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 6px 14px -6px hsl(45 100% 50% / 0.65);
}
.hp-credits-icon svg { width: 24px; height: 24px; }
.hp-credits-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.hp-credits-text strong {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: hsl(var(--fg));
  display: flex;
  align-items: baseline;
  gap: 6px;
  line-height: 1.2;
}
.hp-credits-text strong #hpCreditsCount {
  font-size: 24px;
  font-weight: 800;
  color: hsl(45 100% 38%);
  font-family: var(--font-mono);
  letter-spacing: -0.02em;
}
body.dark .hp-credits-text strong #hpCreditsCount {
  color: hsl(45 100% 68%);
}
.hp-credits-text small {
  font-size: 12.5px;
  color: hsl(var(--muted-fg));
  line-height: 1.4;
}

.hp-credits-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.hp-credits-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 10px;
  border-radius: 12px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  color: hsl(var(--fg));
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  text-align: center;
  line-height: 1.2;
  transition: filter 0.15s, transform 0.12s, border-color 0.15s;
}
.hp-credits-btn:active { transform: scale(0.97); }
.hp-credits-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.hp-credits-btn-reward {
  background: linear-gradient(135deg, hsl(45 100% 55%), hsl(35 100% 50%));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 14px -6px hsl(45 100% 50% / 0.55);
}
.hp-credits-btn-reward:hover { filter: brightness(1.07); }
.hp-credits-btn-reward[data-cooldown="true"] {
  background: hsl(var(--muted));
  color: hsl(var(--muted-fg));
  box-shadow: none;
  cursor: not-allowed;
}
.hp-credits-btn-reward[data-cooldown="true"] small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 500;
}
.hp-credits-btn-pro {
  background: var(--gradient-brand);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--shadow-brand);
}
.hp-credits-btn-pro:hover { filter: brightness(1.07); }

/* v142: keep the rich home card hidden everywhere — the topbar inline
   credit + reward pair is the single source of truth on mobile now.
   We retain the card markup so JS that may reference it doesn't break,
   but it never paints. */
.hp-credits-card { display: none !important; }

/* ============================================================
   v142 — TOPBAR: CREDIT + REWARD PINNED NEXT TO LOGO
   Friend wanted "logomuzun yanında, çok daha minimal" — i.e. the
   credit/reward pills should visually belong with the brand, not
   crowded against the avatar. We use flex `order` + `display:contents`
   on the wrapper so the chips become direct children of the topbar
   and we can reorder them without touching the HTML.
   ============================================================ */
@media (max-width: 900px) {
  body[data-tabbar="on"] .topbar {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
  /* Make the topbar-actions wrapper transparent for flex so its
     children become direct flex items of .topbar. */
  body[data-tabbar="on"] .topbar .topbar-actions { display: contents !important; }
  body[data-tabbar="on"] .topbar .topbar-pro-stack { display: contents !important; }

  /* Visual order: logo → credit → reward → ........ → avatar */
  body[data-tabbar="on"] .topbar .mobile-brand-lockup { order: 1; }
  body[data-tabbar="on"] .topbar .credit-chip       { order: 2; margin-left: 4px !important; }
  body[data-tabbar="on"] .topbar .reward-cta        { order: 3; }
  body[data-tabbar="on"] .topbar .account-pill      { order: 90; margin-left: auto !important; }

  /* Compress the brand lockup so credit/reward sit close to the logo,
     not pushed to the far right by a huge wordmark. */
  body[data-tabbar="on"] .topbar .mobile-brand-lockup {
    gap: 6px !important;
    flex-shrink: 0;
  }
  body[data-tabbar="on"] .topbar .mobile-brand-lockup h2 {
    font-size: 15px !important;
    letter-spacing: -0.01em !important;
  }
  /* On the smallest screens hide the wordmark entirely — the bunny icon
     is enough brand presence and frees up room for credit + reward. */
}
@media (max-width: 420px) {
  body[data-tabbar="on"] .topbar .mobile-brand-lockup h2,
  body[data-tabbar="on"] .topbar .mobile-brand-lockup > div {
    display: none !important;
  }
}

/* v153 — credit chip is now PILL-WRAPPED-AROUND-NUMBER. User said:
   "kredi çerçevesini küçült, kredi karakteri kadar yap". */
@media (max-width: 900px) {
  body[data-tabbar="on"] .credit-chip {
    padding: 2px 6px 2px 4px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
    gap: 2px !important;
    background: transparent !important;
    border: 1px solid hsl(var(--violet) / 0.25) !important;
    color: hsl(var(--violet)) !important;
    min-width: 0 !important;
    line-height: 1 !important;
  }
  body[data-tabbar="on"] .credit-chip svg {
    width: 11px !important;
    height: 11px !important;
  }
  body[data-tabbar="on"] .credit-chip .credit-label { display: none !important; }
  body.dark[data-tabbar="on"] .credit-chip {
    border-color: hsl(var(--violet) / 0.35) !important;
    color: hsl(var(--violet-light)) !important;
  }

  /* v153 — Reward TROPHY: now genuinely eye-catching. Solid amber→orange
     gradient, soft glow, slightly larger. User said "daha belirgin yap". */
  body[data-tabbar="on"] .topbar .reward-cta {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #fbbf24, #f97316) !important;
    border: 0 !important;
    box-shadow: 0 4px 12px -2px hsl(35 90% 50% / 0.55) !important;
    color: #fff !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  body[data-tabbar="on"] .topbar .reward-cta:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
  }
  body[data-tabbar="on"] .topbar .reward-cta svg {
    width: 18px !important;
    height: 18px !important;
  }
  body[data-tabbar="on"] .topbar .reward-cta .reward-cta-text,
  body[data-tabbar="on"] .topbar .reward-cta .reward-cta-cooldown {
    display: none !important;
  }

  /* v153 — logo slightly bigger (was 34, now 40) */
  body[data-tabbar="on"] .topbar-bunny-logo {
    width: 40px !important;
    height: 40px !important;
    padding: 4px !important;
  }
}

/* ============================================================
   v143 — CREDIT / REWARD UI IS NATIVE-ONLY
   The rewarded-ad credit system uses AdMob, which only ships inside
   the Capacitor Android APK. On the web (browser) the monetization
   path is Pro subscription only — there are no rewarded ads to watch,
   so showing a credit chip or "Watch ad +2" CTA is misleading.
   `body.native-app` is set in app.js when window.Capacitor exists.
   ============================================================ */
body:not(.native-app) .credit-chip,
body:not(.native-app) .reward-cta,
body:not(.native-app) .hp-credits-card,
body:not(.native-app) #limitNote,
body:not(.native-app) [data-credit-only="true"] {
  display: none !important;
}
/* In settings, the "Free tier · 3 daily credits" copy is misleading on
   web — swap the language so it doesn't reference a credit limit. */
body:not(.native-app) #stpAccountStatus[data-i18n="stpFreeTier"]::before {
  /* Visually replace via JS in updateSettingsPageV138 — see app.js v143 */
}

/* ============================================================
   v144 — HOMEFEED (iLovePDF-style: recents + Pro + recommended)
   ============================================================ */

/* Compact landing header on mobile — hide the trio of Get App/Pro/Help
   buttons since they live in topbar/Settings now. */
@media (max-width: 900px) {
  body[data-tabbar="on"] .landing-head {
    padding: 12px 16px 4px !important;
    display: block !important;
  }
  body[data-tabbar="on"] .landing-actions { display: none !important; }
  body[data-tabbar="on"] .landing-title {
    font-size: 22px !important;
    line-height: 1.2 !important;
    margin: 0 0 4px !important;
    letter-spacing: -0.01em !important;
  }
  body[data-tabbar="on"] .landing-sub {
    font-size: 13.5px !important;
    line-height: 1.4 !important;
    margin: 0 !important;
  }
  /* Hide the OLD desktop tool grid + filter chips on mobile — Tools tab
     is the dedicated browser now. */
  body[data-tabbar="on"] .all-tools-landing .tool-section,
  body[data-tabbar="on"] .all-tools-landing .tool-grid {
    display: none !important;
  }
}

/* Section heading row used by all homefeed sections */
.hf-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  margin: 22px 0 10px;
}
.hf-section-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: hsl(var(--fg));
  margin: 0;
}
.hf-section-link {
  background: transparent;
  border: 0;
  padding: 4px 6px;
  color: hsl(var(--violet));
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.hf-section-link:hover { color: hsl(var(--pink)); }

/* --- Recents carousel --- */
.hf-recents { /* hidden attribute controls visibility from JS when empty */ }
.hf-recents-rail {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 16px 14px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.hf-recents-rail::-webkit-scrollbar { display: none; }
/* v150 — wrapper to position the delete X over each tile */
.hf-recent-tile-wrap {
  position: relative;
  flex: 0 0 130px;
  scroll-snap-align: start;
}
.hf-recent-tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border-radius: 14px;
  transition: transform 0.12s;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 0;
  font-family: inherit;
  color: inherit;
}
.hf-recent-tile:active { transform: scale(0.97); }
.hf-recent-delete {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 0;
  background: rgba(0,0,0,0.65);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, transform 0.12s;
}
.hf-recent-delete svg { width: 14px; height: 14px; }
.hf-recent-delete:hover { background: hsl(0 75% 55%); }
.hf-recent-delete:active { transform: scale(0.92); }
.hf-recent-thumb {
  width: 130px;
  height: 160px;
  border-radius: 12px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hf-recent-thumb canvas,
.hf-recent-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hf-recent-thumb-placeholder {
  width: 56px;
  height: 70px;
  border-radius: 6px;
  background: linear-gradient(135deg, hsl(var(--violet) / 0.18), hsl(var(--pink) / 0.12));
  color: hsl(var(--violet));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.hf-recent-type-pill {
  position: absolute;
  top: 6px;
  left: 6px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hf-recent-name {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: hsl(var(--fg));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.hf-recent-sub {
  font-size: 11.5px;
  color: hsl(var(--muted-fg));
  line-height: 1.3;
}

/* --- Pro banner ---
   v147 — brightened so users notice it. The dark-purple v144 gradient
   was easy to miss against the dark Aurora background. */
.hf-pro-banner {
  position: relative;
  margin: 20px 16px 4px;
  padding: 0;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, hsl(258 75% 45%), hsl(286 80% 50%) 50%, hsl(330 85% 55%));
  color: #fff;
  box-shadow: 0 18px 38px -16px hsl(286 80% 40% / 0.65);
}
body.is-pro .hf-pro-banner { display: none !important; }
.hf-pro-glow {
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(circle at 20% 20%, hsl(286 100% 70% / 0.45), transparent 60%),
    radial-gradient(circle at 80% 80%, hsl(330 100% 70% / 0.35), transparent 55%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}
.hf-pro-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
}
.hf-pro-crown {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255,255,255,0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: hsl(45 100% 70%);
  flex-shrink: 0;
}
.hf-pro-crown svg { width: 24px; height: 24px; }
.hf-pro-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.hf-pro-text strong {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.hf-pro-text small {
  font-size: 12px;
  opacity: 0.85;
  line-height: 1.35;
}
.hf-pro-cta {
  background: #fff;
  color: hsl(286 60% 28%);
  border: 0;
  padding: 9px 14px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s, filter 0.15s;
  flex-shrink: 0;
}
.hf-pro-cta:hover { filter: brightness(1.05); }
.hf-pro-cta:active { transform: scale(0.96); }

/* v152 — Recommended tools: horizontally SWIPEABLE rail (was a fixed
   4-column grid that only showed 4 max and felt cramped). Now you can
   scroll sideways through more recommendations. */
.hf-recommend-grid {
  display: flex;
  gap: 10px;
  padding: 0 16px 20px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.hf-recommend-grid::-webkit-scrollbar { display: none; }
.hf-rec-tile {
  flex: 0 0 88px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s, border-color 0.15s;
  font-family: inherit;
  color: inherit;
}
.hf-rec-tile:active { transform: scale(0.96); }
.hf-rec-tile:hover { border-color: hsl(var(--violet) / 0.45); }
.hf-rec-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hf-rec-icon svg { width: 20px; height: 20px; stroke-width: 1.8; }
/* v145 — same muted palette as the Tools page for visual consistency */
.hf-rec-icon.cat-scan    { background: hsl(258 70% 55% / 0.10); color: hsl(258 65% 55%); }
.hf-rec-icon.cat-convert { background: hsl(220 75% 55% / 0.10); color: hsl(220 70% 50%); }
.hf-rec-icon.cat-edit    { background: hsl(175 70% 42% / 0.10); color: hsl(175 65% 38%); }
.hf-rec-icon.cat-compress{ background: hsl(0   70% 55% / 0.10); color: hsl(0   65% 50%); }
.hf-rec-icon.cat-organize{ background: hsl(264 70% 60% / 0.10); color: hsl(264 65% 55%); }
.hf-rec-icon.cat-security{ background: hsl(35  85% 50% / 0.12); color: hsl(35  85% 42%); }
body.dark .hf-rec-icon.cat-scan    { background: hsl(258 70% 55% / 0.16); color: hsl(258 80% 72%); }
body.dark .hf-rec-icon.cat-convert { background: hsl(220 75% 55% / 0.18); color: hsl(220 90% 75%); }
body.dark .hf-rec-icon.cat-edit    { background: hsl(175 70% 42% / 0.18); color: hsl(175 75% 68%); }
body.dark .hf-rec-icon.cat-compress{ background: hsl(0   70% 55% / 0.16); color: hsl(0   80% 72%); }
body.dark .hf-rec-icon.cat-organize{ background: hsl(264 70% 60% / 0.18); color: hsl(264 80% 78%); }
body.dark .hf-rec-icon.cat-security{ background: hsl(35  85% 50% / 0.18); color: hsl(40  90% 70%); }
.hf-rec-name {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  color: hsl(var(--fg));
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Empty state for recents (shown when no history yet) */
.hf-recents-empty {
  padding: 18px 16px;
  text-align: center;
  color: hsl(var(--muted-fg));
  font-size: 13px;
  line-height: 1.4;
}

/* ============================================================
   v145 — PAYWALL: trial timeline + testimonials + cleanup
   Smallpdf showed us: a clearly dated 3-step trial timeline drops
   subscription anxiety more than any "cancel anytime" footer. Plus
   real-looking testimonials build social proof.
   ============================================================ */

/* Reward-offer-compact is the "Watch ad +1 credit" CTA inside the Pro
   modal — that's a native-only path. Hide on web (v143 only handled the
   topbar .reward-cta; the modal version uses a different class). */
body:not(.native-app) .reward-offer,
body:not(.native-app) .reward-offer-compact,
body:not(.native-app) #proRewardButton {
  display: none !important;
}

.pro-timeline {
  margin: 14px 16px 16px;
  padding: 14px 14px 8px;
  background: linear-gradient(135deg, hsl(var(--violet) / 0.05), hsl(var(--pink) / 0.04));
  border: 1px solid hsl(var(--violet) / 0.18);
  border-radius: 14px;
}
.pro-timeline-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: hsl(var(--muted-fg));
  margin: 0 0 12px;
}
.pro-timeline-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}
.pro-timeline-step {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: flex-start;
  gap: 12px;
  position: relative;
}
/* Vertical connector line behind the dots */
.pro-timeline-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 30px;
  bottom: -16px;
  width: 2px;
  background: linear-gradient(180deg, hsl(var(--violet) / 0.45), hsl(var(--violet) / 0.10));
}
.pro-timeline-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: hsl(var(--card));
  border: 2px solid hsl(var(--violet) / 0.4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--violet));
  flex-shrink: 0;
  z-index: 1;
}
.pro-timeline-dot svg { width: 16px; height: 16px; }
.pro-timeline-step.done .pro-timeline-dot {
  background: linear-gradient(135deg, hsl(var(--violet)), hsl(var(--pink)));
  border-color: transparent;
  color: #fff;
}
.pro-timeline-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 4px; }
.pro-timeline-body strong {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: hsl(var(--fg));
  line-height: 1.25;
}
.pro-timeline-body small {
  font-size: 12.5px;
  color: hsl(var(--muted-fg));
  line-height: 1.4;
}

/* Testimonials — 2-card stack on mobile, side-by-side on wide modal */
.pro-testimonials {
  margin: 14px 16px 16px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 600px) {
  .pro-testimonials { grid-template-columns: 1fr 1fr; }
}
.pro-testimonial {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 14px;
  padding: 12px 14px;
}
.pro-testimonial-stars {
  color: hsl(45 100% 55%);
  font-size: 14px;
  letter-spacing: 1.5px;
  line-height: 1;
  margin-bottom: 6px;
}
.pro-testimonial-quote {
  font-family: var(--font-display);
  font-size: 13.5px;
  line-height: 1.45;
  color: hsl(var(--fg));
  margin: 0 0 6px;
  font-style: italic;
}
.pro-testimonial-author {
  font-size: 12px;
  color: hsl(var(--muted-fg));
  margin: 0;
}

/* Stronger visual highlight on the featured Annual plan card */
.pro-plan-card.pro-plan-annual.featured {
  position: relative;
  border: 2px solid hsl(var(--violet)) !important;
  box-shadow: 0 12px 28px -14px hsl(var(--violet) / 0.45) !important;
}
.pro-plan-card.pro-plan-annual.featured .pro-plan-save {
  background: linear-gradient(135deg, hsl(var(--violet)), hsl(var(--pink))) !important;
  color: #fff !important;
}

/* v152 — Pro modal restructure:
   * Plans now appear right under the hero (was deeply nested behind
     features strip + timeline + trial banner).
   * Reward-offer is a horizontal pill (was vertical, wasting space).
   * Trial timeline kept below plans as educational reference.
*/
.pro-trial-banner-top {
  margin: 6px 16px 12px !important;
}
.pro-plans-top {
  margin: 0 16px 14px !important;
}
.reward-offer-h {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-direction: row !important;
  margin: 0 16px 14px;
  padding: 10px 14px !important;
}
.reward-offer-h .reward-offer-text {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
.reward-offer-h .reward-offer-text strong {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reward-offer-h .reward-cooldown {
  font-size: 11px;
  color: hsl(var(--muted-fg));
  white-space: nowrap;
}
.reward-offer-h .reward-btn-compact {
  flex-shrink: 0;
  padding: 8px 14px;
  font-size: 12.5px;
}

/* ============================================================
   v146 — MOBILE LANDING: kill the legacy duplicate sections.
   The friend's complaint was about content "tekrar eden" — the
   landing rendered a marketing hero-band, format-center catalog,
   FAQ list, and 4-column footer below the new homefeed. On mobile
   we only need the homefeed (header + upload + recents + Pro
   banner + recommended). The full marketing layout stays for
   desktop where there's space.
   ============================================================ */
@media (max-width: 900px) {
  /* v147 — exhaustive list of legacy sections that must never paint on
     mobile when the bottom-tab UI is active. Previously these only got
     hidden via `.workspace.landing-active`, so the moment the user
     switched to Tools/Files/etc the `.landing-active` class was removed
     and ALL of them flashed back in below the new view. That's the
     "yukarıya atıyor" (scroll-to-top + chaos) bug. */
  body[data-tabbar="on"] .hero-band,
  body[data-tabbar="on"] .bc-faq,
  body[data-tabbar="on"] .bc-footer,
  body[data-tabbar="on"] .mobile-tool-section,
  body[data-tabbar="on"] .history-section,
  body[data-tabbar="on"] .catalog-section,
  body[data-tabbar="on"] .live-section,
  body[data-tabbar="on"] .pricing-section,
  body[data-tabbar="on"] #catalogGrid,
  body[data-tabbar="on"] #liveCounter,
  body[data-tabbar="on"] .all-tools-landing .live-band {
    display: none !important;
  }
}

/* v148 — defense in depth: the .converter-layout (dropZone + tool panel
   + result list) should ONLY appear in the "converter" view. JS toggles
   the `hidden` attribute, but this CSS rule guarantees the visual on
   mobile even if some legacy code flips `hidden` back. */
body[data-tabbar="on"][data-active-view]:not([data-active-view="converter"]) .converter-layout {
  display: none !important;
}

/* ============================================================
   v149 — THE NUCLEAR FIX: `[hidden]` must always win.
   Root cause of "I open Settings but still see Home content":
   The legacy CSS has dozens of `display: grid/flex/block !important`
   rules on elements like .hero-band, .all-tools-landing internals etc.
   When JS sets `el.hidden = true`, the default `[hidden] { display: none }`
   rule loses against `!important`, so the element STAYS VISIBLE.
   We force [hidden] to always win with !important. This single rule fixes
   the view-leaking bug across every tab.
   ============================================================ */
[hidden] {
  display: none !important;
}

/* Explicit fail-safe: on Tools/Files/Scanner/Settings views, hide the
   entire allToolsLanding container — even if `[hidden]` somehow gets
   stripped (e.g. by hash navigation code), the wrapper still disappears. */
body[data-tabbar="on"][data-active-view]:not([data-active-view="home"]):not([data-active-view="converter"]) #allToolsLanding {
  display: none !important;
}

/* v146 — FOOTER cleanup (applies everywhere, both desktop & mobile):
   * kill the social media icons row
   * lead with the bunny logo (was just the aurora-mark gradient)
*/
.bc-footer-social { display: none !important; }
.bc-footer-mark img.footer-bunny-logo {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  object-fit: contain;
  background: #fff;
  padding: 3px;
}

/* ============================================================
   v146 — SCANNER PAGE: real camera flow (multi-page → PDF)
   Capacitor wraps the same WebView, so getUserMedia / OS picker
   both work. We use the OS picker with capture=environment as a
   pragmatic 80/20 implementation. The user gets to pick from
   gallery OR shoot a new photo, multi-select N photos in one go,
   then we route through the existing convertImagesToPdf flow.
   ============================================================ */
.scanner-page-v146 {
  padding: 20px 16px 30px;
}
.scn-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 18px;
  padding: 20px;
  margin-bottom: 16px;
}
.scn-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 6px;
  color: hsl(var(--fg));
}
.scn-sub {
  font-size: 14px;
  color: hsl(var(--muted-fg));
  margin: 0 0 16px;
  line-height: 1.45;
}
.scn-steps {
  display: grid;
  gap: 12px;
  margin: 16px 0 20px;
}
.scn-step {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  align-items: flex-start;
}
.scn-step-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, hsl(var(--violet)), hsl(var(--pink)));
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.scn-step-body strong {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 700;
  color: hsl(var(--fg));
  display: block;
  margin-bottom: 2px;
}
.scn-step-body small {
  font-size: 12.5px;
  color: hsl(var(--muted-fg));
  line-height: 1.4;
}
.scn-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 480px) {
  .scn-actions { grid-template-columns: 1fr 1fr; }
}
.scn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14.5px;
  -webkit-tap-highlight-color: transparent;
  transition: filter 0.15s, transform 0.12s;
}
.scn-cta:active { transform: scale(0.97); }
.scn-cta-primary {
  background: linear-gradient(135deg, hsl(var(--violet)), hsl(var(--pink)));
  color: #fff;
  box-shadow: 0 10px 22px -10px hsl(var(--violet) / 0.55);
}
.scn-cta-primary:hover { filter: brightness(1.07); }
.scn-cta-secondary {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  color: hsl(var(--fg));
}
.scn-cta-secondary:hover { border-color: hsl(var(--violet) / 0.5); }
.scn-cta svg { width: 18px; height: 18px; }

/* ============================================================
   v146 — LIVE COUNTER MINI CARD (Ana Sayfa)
   Replaces the desktop ".live-band" that was hidden on mobile.
   Small, social-proof pill above the recommended tools section.
   ============================================================ */
.hp-live-counter {
  margin: 8px 16px 0;
  padding: 10px 12px;
  background: linear-gradient(135deg, hsl(var(--violet) / 0.08), hsl(var(--pink) / 0.06));
  border: 1px solid hsl(var(--violet) / 0.20);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
}
.hp-live-counter-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: hsl(150 70% 45%);
  flex-shrink: 0;
  position: relative;
}
.hp-live-counter-pulse::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: hsl(150 70% 45%);
  opacity: 0.35;
  animation: live-pulse 1.6s ease-out infinite;
}
@keyframes live-pulse {
  from { opacity: 0.35; transform: scale(1); }
  to   { opacity: 0; transform: scale(2.2); }
}
.hp-live-counter-text {
  font-size: 13px;
  color: hsl(var(--fg));
  line-height: 1.3;
}
.hp-live-counter-text strong {
  font-weight: 700;
  color: hsl(var(--violet));
}

/* v147 — view enter flash, brief glow so user sees the page changed */
.view-enter-flash {
  animation: viewEnter 0.36s ease-out;
}
@keyframes viewEnter {
  from { opacity: 0.6; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* v151 — trial-ending reminder banner on Home (≤2 days left) */
.hf-trial-reminder {
  margin: 12px 16px 0;
  padding: 12px 14px;
  background: linear-gradient(135deg, hsl(35 100% 50% / 0.16), hsl(45 100% 55% / 0.10));
  border: 1px solid hsl(35 100% 50% / 0.40);
  border-radius: 14px;
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 10px;
  align-items: center;
}
.hf-trial-reminder-icon {
  font-size: 22px;
  line-height: 1;
  text-align: center;
}
.hf-trial-reminder-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hf-trial-reminder-text strong {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: hsl(35 100% 35%);
  line-height: 1.25;
}
body.dark .hf-trial-reminder-text strong { color: hsl(35 100% 70%); }
.hf-trial-reminder-text small {
  font-size: 12px;
  color: hsl(var(--muted-fg));
  line-height: 1.4;
}
.hf-trial-reminder-cta {
  padding: 7px 14px;
  background: hsl(var(--fg));
  color: hsl(var(--card));
  border: 0;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
}
.hf-trial-reminder-cta:hover { filter: brightness(1.05); }

/* ============================================================
   v165 — NATIVE APP: hide every "download the app / Google Play"
   CTA. Inside the installed app these are pointless; they stay
   web-only. (`body.native-app` is set when window.Capacitor.)
   ============================================================ */
body.native-app .bc-final-secondary,
body.native-app .landing-getapp-btn,
body.native-app #landingGetAppBtn,
body.native-app .get-app-banner,
body.native-app #getAppBanner,
body.native-app .app-promo-bar,
body.native-app #appPromoBar,
body.native-app .pro-getapp-strip,
body.native-app #proGetAppStrip {
  display: none !important;
}

/* ============================================================
   v165 — PRO SLIDE FINAL FIX ONLY (data-slide="4")
   Scoped exclusively to the Pro onboarding slide. No other slide
   is touched. Fixes CTA overlapping the Pro card; card fully
   visible; dots hidden here; CTA + "continue free" pinned bottom.
   ============================================================ */
.ob-v8:has(.onboarding-slide[data-slide="4"].active) .ob-dots {
  display: none !important;
}

.ob-v8-slide[data-slide="4"] {
  padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)) !important;
}

.ob-v8-slide[data-slide="4"] .ob-v8-hero {
  height: 150px !important;
  min-height: 150px !important;
  margin-bottom: 14px !important;
}

.ob-v8-slide[data-slide="4"] .ob-v156-bonus-pill {
  min-height: 42px !important;
  height: auto !important;
  padding: 8px 14px !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  margin: 0 0 12px !important;
}

.ob-v8-slide[data-slide="4"] .ob-v7-eyebrow {
  margin-bottom: 14px !important;
  padding: 8px 14px !important;
  font-size: 11px !important;
}

.ob-v8-slide[data-slide="4"] .ob-v7-title {
  font-size: 34px !important;
  line-height: 1.05 !important;
  margin-bottom: 10px !important;
}

.ob-v8-slide[data-slide="4"] .ob-v7-sub {
  font-size: 18px !important;
  line-height: 1.35 !important;
  margin-bottom: 14px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.ob-v8-slide[data-slide="4"] .ob-v156-pro-card {
  width: 78% !important;
  max-width: 330px !important;
  max-height: 260px !important;
  padding: 18px 20px !important;
  margin: 0 auto 18px !important;
  border-radius: 28px !important;
  transform: none !important;
}

.ob-v8-slide[data-slide="4"] .ob-v156-pro-card-head {
  margin-bottom: 12px !important;
}

.ob-v8-slide[data-slide="4"] .ob-v156-pro-card-tier,
.ob-v8-slide[data-slide="4"] .ob-v156-pro-card-trial-pill {
  font-size: 12px !important;
  padding: 6px 12px !important;
}

.ob-v8-slide[data-slide="4"] .ob-v156-pro-card-amount {
  font-size: 48px !important;
  line-height: 1 !important;
}

.ob-v8-slide[data-slide="4"] .ob-v156-pro-card-period {
  font-size: 22px !important;
}

.ob-v8-slide[data-slide="4"] .ob-v156-pro-card-list {
  gap: 8px !important;
  margin-top: 14px !important;
}

.ob-v8-slide[data-slide="4"] .ob-v156-pro-card-list li {
  font-size: 17px !important;
  line-height: 1.25 !important;
}

.ob-v8-slide[data-slide="4"] .ob-v156-cta {
  position: fixed !important;
  left: 20px !important;
  right: 20px !important;
  bottom: calc(52px + env(safe-area-inset-bottom, 0px)) !important;
  height: 56px !important;
  border-radius: 20px !important;
  z-index: 80 !important;
}

.ob-v8-slide[data-slide="4"] .ob-v156-skip-link {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 80 !important;
}

/* ============================================================
   v182 — DESKTOP WEB PRO LAYOUT (Smallpdf-style, ≥901px only)
   Hidden by default so mobile/app (bottom-nav UI) is untouched.
   ============================================================ */
.bc-webnav { display: none; }

@media (min-width: 901px) {
  .bc-webnav {
    display: flex;
    align-items: center;
    gap: 24px;
    position: sticky;
    top: 0;
    z-index: 900;
    padding: 12px 32px;
    background: hsl(var(--card));
    border-bottom: 1px solid hsl(var(--border));
    backdrop-filter: saturate(140%) blur(8px);
  }
  .bc-webnav-brand {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--font-display); font-weight: 800; font-size: 18px;
    color: hsl(var(--fg)); text-decoration: none; letter-spacing: -0.02em;
  }
  .bc-webnav-brand img { border-radius: 8px; }
  .bc-webnav-links { display: flex; align-items: center; gap: 4px; }
  .bc-webnav-link {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 9px 14px; border: 0; background: transparent;
    font-family: var(--font-display); font-weight: 600; font-size: 14.5px;
    color: hsl(var(--muted-fg)); cursor: pointer; border-radius: 9px;
    transition: background .14s, color .14s;
  }
  .bc-webnav-link:hover { background: hsl(var(--violet) / 0.08); color: hsl(var(--fg)); }
  .bc-webnav-strong { color: hsl(var(--violet)); font-weight: 700; }
  .bc-webnav-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
  .bc-webnav-ghost {
    padding: 9px 14px; border: 0; background: transparent;
    font-family: var(--font-display); font-weight: 600; font-size: 14px;
    color: hsl(var(--muted-fg)); cursor: pointer; border-radius: 9px;
  }
  .bc-webnav-ghost:hover { color: hsl(var(--fg)); background: hsl(var(--muted)); }
  .bc-webnav-cta {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 18px; border: 0; border-radius: 999px;
    background: linear-gradient(135deg, hsl(var(--violet)), hsl(var(--pink)));
    color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 14px;
    cursor: pointer; box-shadow: 0 10px 24px -10px hsl(var(--violet) / 0.55);
  }
  .bc-webnav-cta:hover { filter: brightness(1.07); }

  /* Desktop: drop the legacy sidebar + mobile bottom-nav + legacy topbar.
     The web nav above is the single, professional navigation. */
  body .sidebar { display: none !important; }
  body .bc-tabbar { display: none !important; }
  body .app-shell > .workspace > .topbar { display: none !important; }
  body .app-shell {
    display: block !important;
    padding: 0 !important;
  }
  body .workspace {
    max-width: 1000px !important;
    margin: 0 auto !important;
    padding: 28px 24px 64px !important;
  }
  /* The view sections already toggle via [hidden]; just give them room. */
  #allToolsLanding, #toolsPage, #scannerPage, #myFilesPage, #settingsPage,
  .converter-layout {
    width: 100%;
  }
  /* Professional, generous upload zone on the per-tool page */
  body .converter-layout .drop-zone,
  body #dropZone {
    min-height: 320px !important;
    border: 2px dashed hsl(var(--violet) / 0.45) !important;
    border-radius: 20px !important;
    background: hsl(var(--violet) / 0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    transition: border-color .15s, background .15s;
  }
  body #dropZone:hover {
    border-color: hsl(var(--violet)) !important;
    background: hsl(var(--violet) / 0.07) !important;
  }
  /* Get-app / smart banner are mobile funnels — pointless on desktop web */
  .bc-webnav ~ * .get-app-banner,
  body .get-app-banner,
  body .app-promo-bar { display: none !important; }
}

/* ============================================================
   v184 — SFM inline signature creator (self-sufficient editor)
   ============================================================ */
.sfm-sign-create {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; justify-content: center;
  padding: 8px 10px; margin-bottom: 6px;
  width: 100%; max-width: 620px; box-sizing: border-box;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
}
.sfm-sign-input {
  flex: 1 1 240px; min-width: 180px; max-width: 360px;
  padding: 11px 14px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 10px;
  color: #fff; font-size: 15px; font-family: var(--font-display);
  outline: none;
}
.sfm-sign-input::placeholder { color: rgba(255,255,255,0.45); }
.sfm-sign-input:focus { border-color: hsl(var(--violet)); }
.sfm-sign-fonts { display: flex; gap: 6px; }
.sfm-sign-fonts button {
  width: 42px; height: 38px; border-radius: 9px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  color: #fff; font-size: 20px; cursor: pointer; line-height: 1;
}
.sfm-sign-fonts button.active {
  border-color: hsl(var(--violet));
  background: hsl(var(--violet) / 0.22);
}
.sfm-sign-colors { display: flex; gap: 7px; }
.sfm-sign-colors .sfm-c {
  width: 22px; height: 22px; border-radius: 50%;
  cursor: pointer; border: 2px solid transparent;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.25);
}
.sfm-sign-colors .sfm-c.active { border-color: #fff; transform: scale(1.12); }
.sfm-c-black { background: #111; }
.sfm-c-blue { background: #2563eb; }
.sfm-c-violet { background: #7c3aed; }
.sfm-c-red { background: #dc2626; }
@media (min-width: 901px) {
  /* Center the fullscreen editor's document for a pro desktop feel */
  .sign-fullscreen-modal .sfm-canvas-wrap { padding: 24px 40px; }
  .sign-fullscreen-modal .sfm-canvas-wrap canvas { border-radius: 4px; }
}