/* ========================================
   MODIH MAIL — Dreamy Nature-Inspired Styles
   ======================================== */

:root {
  --bg-dark: #0a0a0f;
  --glass-bg: rgba(30, 25, 20, 0.65);
  --glass-bg-hover: rgba(45, 38, 30, 0.75);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-border-hover: rgba(212, 167, 106, 0.3);
  --text-primary: #fff;
  --text-secondary: rgba(255, 255, 255, 0.82);
  --text-muted: rgba(255, 255, 255, 0.55);
  --accent: #d4a76a;
  --accent-glow: rgba(212, 167, 106, 0.35);
  --accent-secondary: #e8cfa0;
  --accent-warm: #c8956a;
  --danger: #f87171;
  --success: #34d399;
  --warning: #fbbf24;
  --radius: 16px;
  --radius-sm: 10px;
  --radius-xs: 6px;
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  --bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg-dark);
  color: var(--text-primary);
  overflow-x: hidden;
  line-height: 1.6;
}

/* ========== BACKGROUND MEDIA ========== */
.bg-media {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* Use dvh (dynamic viewport height) to stay locked even when iOS toolbar appears/disappears */
  height: 100%;
  height: 100dvh;
  z-index: 0;
  overflow: hidden;
  /* Force GPU compositing layer — prevents iOS Safari repaint/jump on scroll */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  /* Keep video on its own GPU layer */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
  display: block;
}

.bg-desktop {
  display: block;
}

.bg-mobile {
  display: none;
}

.bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.25),
    rgba(0,0,0,0.05),
    rgba(0,0,0,0.3)
  );
}

.mail-overlay {
  background: linear-gradient(
    180deg,
    rgba(10, 10, 15, 0.7) 0%,
    rgba(10, 10, 15, 0.5) 50%,
    rgba(10, 10, 15, 0.7) 100%
  );
}

.mail-bg {
  z-index: 99;
}

@media (max-width: 768px) {
  /* On mobile we deliberately DO NOT play the video. iOS Safari has known
     issues with playing autoplay videos inside a position:fixed container
     above the page — they jank when the address bar collapses, leaving
     black bars at the bottom of the viewport and causing the whole page
     to "step" when scrolling. We use the poster image as a CSS background
     instead, which is rock-solid across browsers and never repaints. */
  .bg-desktop { display: none; }
  .bg-mobile { display: none; }

  .bg-media {
    /* Use the largest possible viewport unit (svh/lvh fall back to dvh
       on older Safari). 100lvh ensures the background extends behind the
       iOS toolbar so there's no black bar at the bottom when it collapses. */
    height: 100vh;
    height: 100svh;
    height: 100lvh;
    background-image: url('/phone-mail-bg.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    /* Remove GPU compositing hints — they don't help here and can cause
       scroll lag on lower-end Android devices. */
    will-change: auto;
    -webkit-transform: none;
    transform: none;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
  }
  .mail-bg {
    background-image: url('/phone-mail-bg.png');
  }
}

/* ========== GLASS UTILITIES (only for cards/buttons) ========== */
.glass-subtle {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
}

.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  transition: var(--transition);
}

.glass-card:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(212, 167, 106, 0.15);
}

.glass-card-large {
  background: rgba(30, 30, 40, 0.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  padding: 2rem;
}

.glass-card-mini {
  background: rgba(20, 20, 30, 0.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-sm);
  padding: 1rem 1.5rem;
}

.glass-pill {
  display: inline-block;
  background: rgba(212, 167, 106, 0.18);
  border: 1px solid rgba(212, 167, 106, 0.4);
  border-radius: 100px;
  padding: 0.4rem 1.2rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #ffe6b0;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

/* ========== NAVIGATION (Single Glass Pill Style) ========== */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 1.5rem 0;
  transition: var(--transition);
  background: transparent;
  pointer-events: none; /* Let clicks pass through the transparent part */
}

/* Translucent backdrop when scrolled */
.nav.scrolled {
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: auto;
  pointer-events: auto;
}

/* Push auth pill to the far right of its cell */
#nav-auth-area {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* Logo */
.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: transform 0.3s ease;
}

.nav-brand:hover {
  transform: scale(1.05);
}

.nav-brand:hover .brand-icon {
  animation: brandBounce 0.5s ease;
}

@keyframes brandBounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-4px) rotate(-8deg); }
  50% { transform: translateY(0) rotate(8deg); }
  75% { transform: translateY(-2px) rotate(-4deg); }
}

.brand-icon {
  font-size: 1.6rem;
  display: inline-block;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
  transition: transform 0.4s ease;
  position: relative;
  top: 3px;
}

.brand-icon::after {
  content: attr(data-closed);
}

.nav-brand:hover .brand-icon {
  animation: envelopeOpen 0.5s ease forwards;
}

.nav-brand:hover .brand-icon::after {
  content: attr(data-open);
}

@keyframes envelopeOpen {
  0% { transform: scale(1) rotateY(0deg); }
  40% { transform: scale(1.2) rotateY(90deg); }
  60% { transform: scale(1.2) rotateY(90deg); }
  100% { transform: scale(1.15) rotateY(0deg); }
}
.brand-logo {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}
.brand-text {
  font-family: 'Playfair Display', 'Cormorant Garamond', serif;
  font-size: 1.8rem;
  font-weight: 700;
  font-style: italic;
  background: linear-gradient(90deg, #FFD700, #F59E0B);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.15); /* Lightened shadow for readability */
}

/* Single Pill Container for Links */
.nav-links {
  display: flex;
  gap: 2rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 0.6rem 2rem;
  border-radius: 100px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.nav-link {
  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: var(--transition);
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #FFD700, #F59E0B);
  border-radius: 2px;
  transition: width 0.3s ease, left 0.3s ease;
}

.nav-link:hover::after, .nav-link.active::after {
  width: 100%;
  left: 0;
}

.nav-link:hover, .nav-link.active {
  color: rgba(255, 255, 255, 0.9);
}

/* Nav CTA — Solid White Button */
.nav-cta {
  background: #ffffff;
  color: #111111;
  padding: 0.7rem 1.4rem;
  border-radius: 100px;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: none;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.nav-cta:hover {
  background: rgba(255, 255, 255, 0.85);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.nav-cta:active {
  transform: translateY(0) scale(0.95);
}

@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-cta { display: none; }
  /* Hide desktop auth pill, show hamburger instead */
  .nav-auth-desktop { display: none !important; }
  .nav-hamburger { display: flex !important; }
}

/* ========== MOBILE HAMBURGER + DROPDOWN ========== */
.nav-hamburger {
  display: none;
  align-items: center;
  gap: 0.45rem;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 100px;
  padding: 0.4rem 0.8rem 0.4rem 0.65rem;
  cursor: pointer;
  color: var(--text-primary);
  transition: var(--transition);
  pointer-events: auto;
}
.nav-hamburger:hover { background: rgba(255, 255, 255, 0.14); }

.nav-mobile-menu {
  display: none;
  position: fixed;
  top: 4.25rem;
  right: 1rem;
  background: rgba(12, 10, 9, 0.96);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 0.75rem;
  min-width: 220px;
  z-index: 1001;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
  flex-direction: column;
  gap: 0.3rem;
  animation: dropdownIn 0.2s var(--bounce) both;
}
.nav-mobile-menu.open { display: flex; }

@keyframes dropdownIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

.nav-mobile-menu-user {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  margin-bottom: 0.25rem;
  font-size: 0.82rem;
  color: var(--text-secondary);
  overflow: hidden;
}
.nav-mobile-menu-user span:nth-child(2) {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-mobile-plan-badge {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border-radius: 100px;
  background: rgba(52, 211, 153, 0.12);
  color: var(--success);
  border: 1px solid rgba(52, 211, 153, 0.25);
  flex-shrink: 0;
}
.nav-mobile-plan-badge.pro { background: rgba(251,191,36,0.12); color: var(--warning); border-color: rgba(251,191,36,0.25); }
.nav-mobile-plan-badge.developer { background: rgba(167,139,250,0.12); color: #a78bfa; border-color: rgba(167,139,250,0.25); }

.nav-mobile-menu-link {
  display: block;
  padding: 0.6rem 0.75rem;
  font-size: 0.88rem;
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: 10px;
  transition: var(--transition);
}
.nav-mobile-menu-link:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); }

.nav-mobile-signout {
  padding: 0.6rem 0.75rem;
  font-size: 0.88rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: rgba(248, 113, 113, 0.06);
  color: var(--danger);
  border-radius: 10px;
  text-align: left;
  transition: var(--transition);
  width: 100%;
}
.nav-mobile-signout:hover { background: rgba(248,113,113,0.14); }

/* Desktop pill class (renamed from nav-auth-pill for clarity) */
.nav-auth-desktop {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 100px;
  padding: 0.35rem 0.35rem 0.35rem 0.9rem;
  transition: var(--transition);
}

/* ========== NAV AUTH ELEMENTS ========== */

.nav-user-email {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-secondary);
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-plan-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 6px rgba(52,211,153,0.6);
  flex-shrink: 0;
}

.nav-plan-dot.pro { background: var(--warning); box-shadow: 0 0 6px rgba(251,191,36,0.6); }
.nav-plan-dot.developer { background: #a78bfa; box-shadow: 0 0 6px rgba(167,139,250,0.6); }

.nav-sign-out-btn {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 100px;
  padding: 0.3rem 0.8rem;
  cursor: pointer;
  font-family: inherit;
  transition: var(--transition);
  white-space: nowrap;
}

.nav-sign-out-btn:hover {
  color: var(--text-primary);
  border-color: rgba(255,255,255,0.3);
}

.nav-sign-in-btn {
  background: rgba(255, 255, 255, 0.9);
  color: #111;
  padding: 0.6rem 1.2rem;
  border-radius: 100px;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: none;
  transition: var(--transition);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.nav-sign-in-btn:hover {
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}

/* ========== SECTIONS ========== */
.section {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 6rem 2rem;
}

.section-inner {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}

.section-tag {
  margin-bottom: 1.5rem;
}

.section-title {
  font-family: 'Cormorant Garamond', 'Playfair Display', serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}

.section-desc {
  color: var(--text-secondary);
  font-size: 1.1rem;
  max-width: 500px;
  margin-bottom: 2.5rem;
  line-height: 1.7;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}

/* ========== HERO ========== */
.hero-section {
  text-align: center;
  padding-top: 8rem;
  padding-bottom: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
}

.hero-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 850px;
  margin: 0 auto;
}

/* "New" pill badge */
.new-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 100px;
  padding: 0.45rem 1.3rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: #fff;
  letter-spacing: 0.03em;
  margin-bottom: 2rem;
}

.hero-tag-pill-container {
  width: 100%;
}

.hero-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 100px;
  padding: 0.3rem 1.2rem 0.3rem 0.3rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: var(--transition);
}

.hero-tag-pill.small-pill {
  padding: 0.2rem 0.8rem 0.2rem 0.2rem;
  margin-bottom: 1.5rem;
}

.hero-tag-pill:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}

.new-badge-inner {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: #ffffff;
  padding: 0.25rem 0.75rem;
  border-radius: 100px;
}

.new-text {
  color: #111111;
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: capitalize;
}

.status-dot {
  width: 8px;
  height: 8px;
  background-color: #34d399; /* Green dot */
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(52, 211, 153, 0.6);
  animation: pulse-dot 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

@keyframes pulse-dot {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.tag-text {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.02em;
}

.hero-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 2rem;
}

.hero-line-1 {
  font-family: 'Cormorant Garamond', 'Playfair Display', serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(3rem, 6vw, 5rem);
  color: #C8E6FF;
  text-shadow: 0 4px 20px rgba(100, 180, 255, 0.35), 0 2px 8px rgba(0,0,0,0.4);
  line-height: 1.15;
  letter-spacing: 0.02em;
  animation: heroLineIn 0.8s ease both;
  animation-delay: 0.2s;
}

.hero-line-2 {
  font-family: 'Cormorant Garamond', 'Playfair Display', serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(4rem, 10vw, 7.5rem);
  color: #A8F0C6;
  text-shadow: 0 4px 20px rgba(100, 220, 160, 0.4), 0 2px 8px rgba(0,0,0,0.4);
  line-height: 1.1;
  padding: 0.1em 0;
  letter-spacing: -0.01em;
  animation: heroLineIn 0.8s ease both;
  animation-delay: 0.5s;
}

.hero-line-3 {
  font-family: 'Cormorant Garamond', 'Playfair Display', serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(3.5rem, 8vw, 6rem);
  color: #B8C8FF;
  text-shadow: 0 4px 20px rgba(130, 150, 255, 0.35), 0 2px 8px rgba(0,0,0,0.4);
  line-height: 1;
  letter-spacing: 0.01em;
  animation: heroLineIn 0.8s ease both;
  animation-delay: 0.8s;
}

@keyframes heroLineIn {
  from {
    opacity: 0;
    transform: translateY(25px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* Typewriter elements hidden initially */
.typewriter {
  visibility: hidden;
}

.hero-subtitle {
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  font-weight: 400;
  line-height: 1.8;
  margin-bottom: 2.5rem;
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
  text-shadow: 0 3px 15px rgba(0,0,0,0.7), 0 1px 3px rgba(0,0,0,0.5);
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 1rem 1.5rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.subtitle-word {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 600;
  color: #ffe6b0;
  font-size: 1.15em;
  text-shadow: 0 2px 15px rgba(212, 167, 106, 0.4);
}

.hero-actions {
  display: flex;
  gap: 1rem;
  margin-bottom: 3rem;
  justify-content: center;
  flex-wrap: wrap;
}



/* ========== HERO STAT BOXES (translucent glass) ========== */
/* ========== HERO STATS BUBBLE (Expanding Hover Style) ========== */
.stats-bubble-wrapper {
  position: relative;
  display: inline-flex;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: rgba(40, 45, 60, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 100px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  width: 160px; /* Initial collapsed width */
  cursor: default;
}

.stats-bubble-wrapper:hover {
  width: 520px; /* Expanded width */
  background: rgba(50, 55, 75, 0.85);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.stats-bubble-trigger {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.stats-bubble-wrapper:hover .stats-bubble-trigger {
  opacity: 0;
  visibility: hidden;
}

.stats-bubble-content {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 520px;
  height: 100%;
  padding: 0 2rem;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.95);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0s;
}

.stats-bubble-wrapper:hover .stats-bubble-content {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition-delay: 0.1s;
}

.bubble-stat {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bubble-line {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
}

.bubble-stat .stat-number {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.6rem;
  font-weight: 500;
  color: #d4a76a; /* Gold accent */
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  line-height: 1;
}

.bubble-stat .stat-label {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* ========== HERO BOTTOM BAR ========== */
.hero-bottom-bar {
  width: 100%;
  text-align: center;
  z-index: 2;
  margin-top: 4rem;
}

.collaborating-text {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0rem;
  background: rgba(40, 45, 60, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: inline-block;
  padding: 0.4rem 1.5rem;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Scroll indicator */

/* Mobile overrides for Stats Bubble */
@media (max-width: 768px) {
  .stats-bubble-wrapper:hover {
    width: 200px;
    height: 320px;
    border-radius: 20px;
  }
  
  .stats-bubble-content {
    flex-direction: column;
    justify-content: center;
    width: 200px;
    height: 320px;
    padding: 2rem 0;
    gap: 1.5rem;
  }

  .bubble-stat {
    flex-direction: column;
    gap: 0.2rem;
  }

  .bubble-line {
    width: 40px;
    height: 1px;
  }
}

.scroll-indicator {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  opacity: 0.5;
  transition: var(--transition);
  animation: scrollBounce 2s ease-in-out infinite;
  z-index: 3;
}

.scroll-indicator:hover { opacity: 1; }

.scroll-indicator span {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--text-muted);
}

.scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(180deg, var(--accent), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; height: 30px; }
  50% { opacity: 1; height: 40px; }
}

/* ========== BUTTONS ========== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 2rem;
  border-radius: 100px;
  font-size: 0.95rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  border: none;
  transition: all 0.3s var(--bounce);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
}

.btn:active {
  transform: scale(0.95) !important;
  transition-duration: 0.1s;
}

.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at center, rgba(255,255,255,0.15) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.btn:hover::after {
  opacity: 1;
}

.btn-primary {
  background: rgba(20, 20, 30, 0.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.btn-primary:hover {
  background: rgba(20, 20, 30, 0.65);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.3);
}

.btn-primary:active {
  transform: translateY(0);
}

/* Clear CTA button — dark glass */
.btn-warm {
  background: rgba(8, 8, 10, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

.btn-warm:hover {
  background: rgba(5, 5, 8, 0.92);
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-2px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 4px 15px rgba(0, 0, 0, 0.6);
}

.btn-warm:active {
  transform: translateY(0);
}

.btn-ghost-warm {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.8rem;
  border-radius: 100px;
  font-size: 0.95rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
  background: rgba(8, 8, 10, 0.65);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.btn-ghost-warm:hover {
  color: #fff;
  background: rgba(10, 10, 15, 0.8);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 4px 15px rgba(0, 0, 0, 0.6);
}

.glow-btn {
  position: relative;
  overflow: hidden;
}

.glow-btn::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 60%);
  opacity: 0;
  transition: var(--transition);
}

.glow-btn:hover::before {
  opacity: 1;
}

.btn-secondary {
  background: rgba(20, 20, 30, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--text-primary);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.btn-secondary:hover {
  background: rgba(20, 20, 30, 0.55);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid transparent;
  padding: 0.85rem 1.5rem;
}

.btn-ghost:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.05);
}

.btn-ghost.danger {
  color: var(--danger);
}

.btn-ghost.danger:hover {
  background: rgba(248,113,113,0.1);
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: rgba(20, 20, 30, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
}

.icon-btn:hover {
  background: rgba(20, 20, 30, 0.6);
  color: var(--text-primary);
  border-color: var(--glass-border-hover);
  transform: scale(1.1);
}

.icon-btn.danger:hover {
  background: rgba(248,113,113,0.15);
  border-color: rgba(248,113,113,0.3);
  color: var(--danger);
}

.icon-btn.small {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}

.glass-btn {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ========== FEATURES GRID ========== */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 2.5rem;
}

.feature-card {
  padding: 2rem;
  text-align: left;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  will-change: transform;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  border-color: rgba(212, 167, 106, 0.3);
}

.feature-card:hover .feature-icon {
  border-color: rgba(212, 167, 106, 0.5);
  background: rgba(212, 167, 106, 0.18);
  transform: scale(1.08);
}

.feature-card:hover h3 {
  transform: translateX(4px);
  color: #ffe6b0;
}

@keyframes iconPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.feature-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(212, 167, 106, 0.1);
  border: 1px solid rgba(212, 167, 106, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  color: var(--accent);
  transition: all 0.3s ease;
}

.feature-card h3 {
  font-family: 'Cormorant Garamond', 'Playfair Display', serif;
  font-size: 1.25rem;
  font-weight: 600;
  font-style: italic;
  margin-bottom: 0.6rem;
  text-shadow: 0 1px 6px rgba(0,0,0,0.3);
  transition: transform 0.3s ease, color 0.3s ease;
}

.feature-card p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

@media (max-width: 900px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .features-grid { grid-template-columns: 1fr; }
}

/* ========== GENERATE SECTION ========== */
.generate-section .section-inner {
  text-align: center;
}

.generate-section .section-desc {
  margin-left: auto;
  margin-right: auto;
}

.generate-box {
  max-width: 560px;
  margin: 0 auto 2rem;
  background: linear-gradient(135deg, rgba(22, 24, 31, 0.78), rgba(23, 20, 25, 0.72));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: paint;
}

.input-group {
  margin-bottom: 1.25rem;
}

.email-input-wrap {
  display: flex;
  align-items: center;
  background: rgba(13, 17, 25, 0.72);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  overflow: hidden;
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: paint;
  transition: border-color 0.16s ease;
}

.email-input-wrap:focus-within {
  border-color: rgba(212, 167, 106, 0.52);
}

.email-input-wrap:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

.email-input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 1rem 1.25rem;
  font-size: 1.1rem;
  font-family: 'Inter', sans-serif;
  color: var(--text-primary);
  caret-color: var(--accent-secondary);
  outline: none;
  min-width: 0;
  transform: translateZ(0);
}

.email-input::placeholder {
  color: var(--text-muted);
  font-style: italic;
}

.email-input:disabled {
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 0.6;
}

/* PRO badge inside the input — compact dot-pill style */
.pro-input-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 100px;
  padding: 0.15rem 0.45rem;
  margin-right: 0.5rem;
  flex-shrink: 0;
}

.pro-input-badge::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
}

/* PRO badge inside the button */
.pro-btn-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 100px;
  padding: 0.15rem 0.45rem;
  margin-left: 0.35rem;
}

.pro-btn-badge::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 4px rgba(255,255,255,0.6);
  flex-shrink: 0;
}

/* Muted / disabled look for the custom button */
.btn-pro-lock {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.email-domain {
  padding: 1rem 1.25rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--accent);
  background: rgba(212, 167, 106, 0.08);
  border-left: 1px solid var(--glass-border);
  white-space: nowrap;
}

.generate-actions {
  display: flex;
  gap: 0.75rem;
}

.generate-actions .btn {
  border-radius: 999px;
  min-height: 54px;
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: paint;
  transition: background-color 0.16s ease, border-color 0.16s ease;
}

.generate-actions .btn::before,
.generate-actions .btn::after {
  display: none;
}

.generate-actions .btn-primary {
  flex: 1;
  justify-content: center;
  padding: 1rem;
  background: rgba(19, 24, 34, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.generate-actions .btn-primary:hover {
  background: rgba(27, 33, 44, 0.95);
  border-color: rgba(212, 167, 106, 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transform: translateZ(0);
}

.generate-actions .btn-secondary {
  flex: 0.58;
  justify-content: center;
  padding: 1rem;
  background: rgba(18, 22, 31, 0.88);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: rgba(255, 255, 255, 0.12);
}

.generate-actions .btn-secondary:not(:disabled):hover {
  background: rgba(25, 30, 40, 0.92);
  border-color: rgba(212, 167, 106, 0.24);
  box-shadow: none;
  transform: translateZ(0);
}

.error-msg {
  margin-top: 1rem;
  color: var(--danger);
  font-size: 0.9rem;
  padding: 0.75rem 1rem;
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.2);
  border-radius: var(--radius-sm);
}

/* ========== EMAIL RESULT ========== */
.email-result {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  animation: slideUp 0.5s ease;
  position: relative;
}

/* Loading skeleton — applied to .email-result while the API call is in
   flight so users see immediate visual feedback instead of a multi-second
   silent hang. Removed in showEmailResult() once the real address arrives. */
.email-result.is-generating .result-email {
  background: linear-gradient(
    90deg,
    rgba(212, 167, 106, 0.45) 0%,
    rgba(245, 230, 200, 0.85) 50%,
    rgba(212, 167, 106, 0.45) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 1.4s linear infinite;
  font-size: clamp(1.05rem, 3vw, 1.35rem);
  font-style: normal;
  letter-spacing: 0.04em;
}

.email-result.is-generating .result-actions,
.email-result.is-generating .result-hint,
.email-result.is-generating #creation-counter {
  opacity: 0.35;
  pointer-events: none;
  filter: blur(0.4px);
}

.email-result.is-generating .countdown { visibility: hidden; }

.email-result.is-generating::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 1rem;
  width: 28px;
  height: 28px;
  margin-left: -14px;
  border: 2px solid rgba(212, 167, 106, 0.25);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  pointer-events: none;
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.result-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.countdown {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.result-email-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.result-email {
  font-family: 'Cormorant Garamond', 'Playfair Display', serif;
  font-size: clamp(1.3rem, 4vw, 1.8rem);
  font-weight: 700;
  font-style: italic;
  color: var(--accent); /* fallback so it's never black */
  background: linear-gradient(135deg, var(--accent), #f5e6c8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  word-break: break-all;
}

.result-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.result-hint {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ========== MAIL WINDOW ========== */
.mail-window {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.mail-window.active {
  opacity: 1;
  transform: scale(1);
}

.mail-container {
  position: relative;
  z-index: 101;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.mail-header {
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  background: rgba(10, 10, 15, 0.7);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.mail-header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.mail-header-info {
  display: flex;
  flex-direction: column;
}

.mail-header-email {
  font-weight: 600;
  font-size: 0.95rem;
}

.mail-header-timer {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.mail-header-actions {
  display: flex;
  gap: 0.5rem;
}

.mail-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
}

/* ========== MAIL LIST ========== */
.mail-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.mail-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem;
  background: rgba(20, 20, 30, 0.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animate ONLY freshly-inserted items (added by buildMailItemNode). The
 * previous version animated every node on every render — combined with
 * the 5s autoreload that wholesale-replaced innerHTML, the entire list
 * flashed and reshuffled on each poll ("the website is having shocks"). */
.mail-item-new {
  animation: mailItemIn 0.55s cubic-bezier(0.4, 0, 0.2, 1) both;
  animation-delay: var(--mail-item-delay, 0s);
}

@keyframes mailItemIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mail-item:hover {
  background: rgba(30, 30, 45, 0.7);
  border-color: rgba(212, 167, 106, 0.25);
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.mail-item-avatar {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent-warm));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  flex-shrink: 0;
}

.mail-item-content {
  flex: 1;
  min-width: 0;
}

.mail-item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.3rem;
}

.mail-item-from {
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mail-item-time {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 0.5rem;
}

.mail-item-subject {
  font-size: 0.9rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mail-item-otp {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.5rem;
  padding: 0.25rem 0.65rem;
  background: rgba(212, 167, 106, 0.12);
  border: 1px solid rgba(212, 167, 106, 0.25);
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
}

/* ========== MAIL EMPTY STATE ========== */
.mail-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 2rem;
  color: var(--text-secondary);
}

.mail-empty-icon {
  margin-bottom: 1.5rem;
  color: var(--text-muted);
  opacity: 0.5;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.mail-empty h3 {
  font-family: 'Cormorant Garamond', 'Playfair Display', serif;
  font-size: 1.5rem;
  font-style: italic;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}

.mail-empty p {
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}

.mail-empty-hint {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.loading-dots {
  display: flex;
  gap: 6px;
  margin-top: 1.5rem;
}

.loading-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: dotPulse 1.4s infinite ease-in-out;
}

.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dotPulse {
  0%, 80%, 100% { transform: scale(0.4); opacity: 0.3; }
  40% { transform: scale(1); opacity: 1; }
}

/* ========== MESSAGE DETAIL ========== */
.mail-detail {
  animation: slideUp 0.3s ease;
}

/* Toolbar row sits at the top of the detail view so Back and Delete are
   both reachable without scrolling to the bottom of long emails. */
.mail-detail-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.mail-back-btn {
  padding: 0.6rem 1rem;
}

.mail-delete-btn {
  padding: 0.6rem 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: rgba(248, 113, 113, 0.92);
  border-color: rgba(248, 113, 113, 0.35);
  background: rgba(248, 113, 113, 0.08);
  transition: var(--transition);
}
.mail-delete-btn:hover {
  background: rgba(248, 113, 113, 0.18);
  border-color: rgba(248, 113, 113, 0.55);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(248, 113, 113, 0.22);
}
.mail-delete-btn:active { transform: translateY(0); }

.detail-header {
  padding: 1.5rem;
  margin-bottom: 1rem;
}

.detail-subject {
  font-family: 'Cormorant Garamond', 'Playfair Display', serif;
  font-size: 1.5rem;
  font-weight: 700;
  font-style: italic;
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.detail-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.detail-from {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.detail-time {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.detail-otp {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1rem;
  padding: 0.9rem 1.15rem;
  background:
    radial-gradient(circle at 0% 0%, rgba(232, 207, 160, 0.25), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(212, 167, 106, 0.22), transparent 60%),
    rgba(212, 167, 106, 0.08);
  border: 1px solid rgba(212, 167, 106, 0.35);
  border-radius: var(--radius);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.25),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  position: relative;
  overflow: hidden;
}

/* Subtle shimmer on hover to draw the eye to the copy CTA */
.detail-otp::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 30%,
    rgba(255, 255, 255, 0.08) 50%,
    transparent 70%
  );
  transform: translateX(-100%);
  transition: transform 1.1s ease;
  pointer-events: none;
}
.detail-otp:hover::before { transform: translateX(100%); }

.otp-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  white-space: nowrap;
}

.otp-code {
  flex: 1;
  font-size: 1.45rem;
  font-weight: 700;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text-primary);
  letter-spacing: 0.22em;
  text-shadow: 0 0 24px rgba(212, 167, 106, 0.35);
  user-select: all;
}

/* Make the OTP card "click-anywhere-to-copy". The button is visually
   secondary now; the entire row acts as the affordance. */
.detail-otp { cursor: pointer; transition: transform var(--transition), border-color var(--transition); }
.detail-otp:hover { transform: translateY(-1px); border-color: rgba(212, 167, 106, 0.55); }

/* Detail body: a clean white "paper" surface for the email iframe. The
   iframe brings its own padding and typography so the wrapper just needs
   to be a neutral framed canvas instead of the dark glass card we use
   elsewhere. Falls back gracefully when no iframe has been mounted yet
   (e.g. while the message is still loading). */
.detail-body {
  padding: 0;
  min-height: 200px;
  overflow: hidden;
  background: #ffffff;
  color: #1f2937;
  border-radius: var(--radius);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.detail-body-frame {
  display: block;
  width: 100%;
  border: 0;
  background: #ffffff;
  border-radius: var(--radius);
}

.detail-body .plain-text-body,
.detail-body pre {
  white-space: pre-wrap;
  font-family: inherit;
  margin: 0;
  padding: 1.25rem 1.4rem;
  color: #1f2937;
}

.detail-actions {
  margin-top: 1rem;
  display: flex;
  gap: 0.75rem;
}

/* ========== PRICING SECTION ========== */
.pricing-section .section-inner {
  text-align: center;
}

.pricing-section .section-tag {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}

.pricing-section .section-title,
.pricing-section .section-desc {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Billing Toggle */
.billing-toggle-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 3rem;
}

.billing-toggle {
  position: relative;
  display: inline-flex;
  background: rgba(20, 20, 30, 0.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 100px;
  padding: 4px;
  gap: 2px;
}

.billing-option {
  position: relative;
  z-index: 2;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  padding: 0.6rem 1.5rem;
  border-radius: 100px;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}

.billing-option.active {
  color: #fff;
}

.billing-option:hover:not(.active) {
  color: var(--text-primary);
}

.billing-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.15rem 0.45rem;
  border-radius: 100px;
  background: rgba(212, 167, 106, 0.2);
  color: var(--accent);
  border: 1px solid rgba(212, 167, 106, 0.3);
}

.billing-badge.best-badge {
  background: rgba(52, 211, 153, 0.15);
  color: var(--success);
  border-color: rgba(52, 211, 153, 0.3);
}

.billing-slider {
  position: absolute;
  top: 4px;
  left: 4px;
  height: calc(100% - 8px);
  background: rgba(255, 255, 255, 0.12);
  border-radius: 100px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Pricing Grid */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 1rem;
  align-items: start;
}

.pricing-card {
  position: relative;
  padding: 2rem;
  text-align: left;
  transition: transform 0.4s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.4s ease, border-color 0.4s ease;
  will-change: transform;
  overflow: hidden;
  border-radius: var(--radius-lg, 16px);
  background: linear-gradient(165deg, rgba(30, 28, 24, 0.95) 0%, rgba(18, 16, 14, 0.98) 100%);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Shimmer highlight at top of each card */
.pricing-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* Noise texture overlay */
.pricing-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="n"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23n)"/%3E%3C/svg%3E');
  opacity: 0.08;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
}

.pricing-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4), 0 0 1px rgba(255, 255, 255, 0.15) inset;
  border-color: rgba(255, 255, 255, 0.12);
}

/* Featured Card (Pro) — elevated with gold accent */
.pricing-card-featured {
  border-color: rgba(212, 167, 106, 0.15);
  box-shadow: 0 8px 32px rgba(212, 167, 106, 0.06);
}

/* Gold gradient line at top */
.pricing-card-featured::before {
  height: 2px;
  background: linear-gradient(90deg, transparent 5%, var(--accent) 30%, var(--accent-secondary) 70%, transparent 95%);
  opacity: 1;
}

.pricing-card-featured:hover {
  transform: translateY(-8px);
  box-shadow: 0 32px 64px rgba(212, 167, 106, 0.12), 0 0 1px rgba(212, 167, 106, 0.3) inset;
  border-color: rgba(212, 167, 106, 0.3);
}

/* Static top glow bar */
.pricing-card-featured .pricing-recommended-badge {
  z-index: 2;
}
.pricing-card-header, .pricing-price-wrapper, .pricing-features, .pricing-cta, .pricing-savings {
  position: relative;
  z-index: 2;
}

.pricing-recommended-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: linear-gradient(135deg, rgba(212, 167, 106, 0.15), rgba(212, 167, 106, 0.08));
  border: 1px solid rgba(212, 167, 106, 0.25);
  border-radius: 100px;
  padding: 0.25rem 0.75rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.05em;
  animation: badgePulse 3s ease-in-out infinite;
}

@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 167, 106, 0.2); }
  50% { box-shadow: 0 0 0 5px rgba(212, 167, 106, 0); }
}

/* Card Header */
.pricing-card-header {
  margin-bottom: 1.5rem;
}

.pricing-plan-name {
  font-family: 'Cormorant Garamond', 'Playfair Display', serif;
  font-size: 2.2rem;
  font-weight: 700;
  font-style: italic;
  color: #fff;
  margin-bottom: 0.25rem;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.pricing-plan-tagline {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Price Display */
.pricing-price-wrapper {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.pricing-price {
  display: inline-flex;
  align-items: flex-start;
}

.pricing-currency {
  font-family: 'Inter', sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-right: 2px;
  margin-top: 0.4rem;
}

.pricing-amount {
  font-family: 'Cormorant Garamond', serif;
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
  transition: color 0.5s ease, text-shadow 0.5s ease;
}

.pricing-amount-wrapper {
  position: relative;
  display: inline-block;
}

/* Price Trend Arrow Indicators */
.price-trend-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  margin-left: 0.5rem;
  vertical-align: middle;
  opacity: 0;
  transform: translateY(10px) scale(0.5);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: absolute;
  top: 50%;
  right: -2rem;
  margin-top: -0.9rem;
}

.price-trend-arrow.trending-down {
  color: #f87171;
  opacity: 1;
  transform: translateY(0) scale(1);
  text-shadow: 0 0 12px rgba(248, 113, 113, 0.4);
}

.price-trend-arrow.trending-up {
  color: #34d399;
  opacity: 1;
  transform: translateY(0) scale(1);
  text-shadow: 0 0 12px rgba(52, 211, 153, 0.4);
}

/* Color states for price animation */
.pricing-amount.price-increasing {
  color: #34d399;
  text-shadow: 0 0 20px rgba(52, 211, 153, 0.3);
}

.pricing-amount.price-dropping {
  color: #f87171;
  text-shadow: 0 0 20px rgba(248, 113, 113, 0.3);
}

.pricing-period {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.35rem;
}

/* Savings Badge */
.pricing-savings {
  margin-top: -1rem;
  margin-bottom: 1.5rem;
}

.savings-text {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--success);
  background: rgba(52, 211, 153, 0.1);
  border: 1px solid rgba(52, 211, 153, 0.25);
  border-radius: 100px;
  padding: 0.2rem 0.7rem;
}

@keyframes savingsPop {
  0% { opacity: 0; transform: scale(0.8) translateY(-4px); }
  60% { transform: scale(1.05) translateY(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Feature List */
.pricing-features {
  list-style: none;
  margin-bottom: 2rem;
}

.pricing-features li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.pricing-features li:last-child {
  border-bottom: none;
}

.feature-check {
  color: var(--success);
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
  width: 18px;
  text-align: center;
}

.feature-x {
  color: rgba(255, 255, 255, 0.25);
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
  width: 18px;
  text-align: center;
}

.feature-excluded {
  color: var(--text-muted);
}

/* CTA Buttons */
.pricing-cta {
  width: 100%;
  justify-content: center;
  padding: 0.9rem;
}

.pricing-cta-featured {
  background: rgba(212, 167, 106, 0.15);
  border-color: rgba(212, 167, 106, 0.35);
  color: var(--accent-secondary);
}

.pricing-cta-featured:hover {
  background: rgba(212, 167, 106, 0.25);
  border-color: rgba(212, 167, 106, 0.5);
  box-shadow: 0 8px 30px rgba(212, 167, 106, 0.15);
}

/* ========== UPGRADE PROMPT ========== */
.upgrade-prompt {
  margin-top: 1rem;
  animation: slideUp 0.4s ease;
}

.upgrade-prompt-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
}

.upgrade-icon {
  font-size: 1.5rem;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.upgrade-prompt-inner p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.upgrade-btn {
  padding: 0.7rem 1.5rem;
  font-size: 0.85rem;
}

/* ========== CREATION COUNTER ========== */
.creation-counter {
  margin-bottom: 1rem;
  text-align: center;
}

.creation-counter span {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 100px;
  padding: 0.25rem 0.8rem;
}

/* ========== TURNSTILE CONTAINER ========== */
#turnstile-container {
  display: none;
  justify-content: center;
  margin-top: 1rem;
}

/* ========== PRICING RESPONSIVE ========== */
@media (max-width: 900px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }

  .pricing-card-featured {
    order: -1;
  }
}

@media (max-width: 600px) {
  /* Pricing toggle — stack vertically on mobile so nothing wraps */
  .billing-toggle-wrapper {
    padding: 0 1rem;
  }
  .billing-toggle {
    width: 100%;
    flex-direction: column;
    border-radius: 16px;
    gap: 0;
  }
  .billing-option {
    width: 100%;
    justify-content: space-between;
    padding: 0.65rem 1.1rem;
    font-size: 0.82rem;
    border-radius: 12px;
    gap: 0.5rem;
  }
  .billing-badge {
    font-size: 0.62rem;
    padding: 0.12rem 0.4rem;
  }
  /* Slider not needed in column layout */
  .billing-slider {
    display: none;
  }
  /* Active state highlight instead */
  .billing-option.active {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
  }

  .pricing-amount {
    font-size: 2.8rem;
  }
}

/* ========== TOAST ========== */
.toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20000;
  padding: 0.85rem 1.5rem;
  background: rgba(10, 10, 15, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: 100px;
  font-size: 0.9rem;
  color: var(--text-primary);
  animation: toastIn 0.3s ease;
  white-space: nowrap;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ========== FOOTER ========== */
.footer {
  text-align: center;
  padding: 2.5rem 1rem;
  margin-top: 4rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  border-top: 1px solid rgba(255,255,255,0.05);
}

.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  max-width: 800px;
  margin: 0 auto;
}

.footer-brand p {
  margin-bottom: 0.25rem;
  color: #fff;
}

.footer-author {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.1rem;
  color: var(--accent);
  margin-left: 0.2rem;
}

.footer-subtext {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
}

.footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.footer-link {
  color: #fff;
  text-decoration: none;
  font-size: 0.85rem;
  transition: var(--transition);
  display: flex;
  align-items: center;
}

.footer-link:hover {
  color: #FFD700;
  transform: translateY(-1px);
  text-shadow: 0 0 10px rgba(255,215,0,0.3);
}

/* ========== ANIMATIONS ========== */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  will-change: opacity, transform;
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ========== SCROLLBAR ========== */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.25);
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
  .section {
    padding: 5rem 1.25rem;
  }

  .hero-section {
    padding-top: 6rem;
  }

  .hero-line-1 {
    font-size: clamp(2rem, 8vw, 3rem);
  }

  .hero-line-2 {
    font-size: clamp(2.8rem, 12vw, 4.5rem);
  }

  .hero-line-3 {
    font-size: clamp(2.4rem, 10vw, 3.5rem);
  }

  .hero-subtitle {
    font-size: 0.9rem;
    padding: 0 0.5rem;
    line-height: 1.7;
  }

  .hero-tag-pill.small-pill {
    padding: 0.15rem 0.6rem 0.15rem 0.15rem;
  }

  .tag-text {
    font-size: 0.7rem;
  }

  .brand-icon {
    font-size: 1.3rem;
  }

  .brand-text {
    font-size: 1.4rem;
  }

  .nav-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  #nav-auth-area {
    margin-left: auto;
  }

  .nav-links {
    display: none; /* Hide center links on mobile for now since they break layout */
    padding: 0.4rem 1rem;
    gap: 1rem;
  }

  .nav-link {
    font-size: 0.8rem;
  }

  .nav-cta {
    font-size: 0.75rem;
    padding: 0.5rem 1rem;
  }

  .hero-actions {
    flex-direction: column;
    align-items: center;
  }

  .btn-warm, .btn-ghost-warm {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }

  .hero-stats {
    gap: 0.75rem;
  }

  .stat-item {
    min-width: 90px;
    padding: 0.75rem 1rem;
  }

  .stat-number {
    font-size: 1.4rem;
  }

  .glass-card-large {
    padding: 1.5rem;
  }

  .generate-actions {
    flex-direction: column;
  }

  .email-domain {
    font-size: 0.95rem;
    padding: 0.85rem 0.75rem;
  }

  .email-input {
    font-size: 1rem;
    padding: 0.85rem;
  }

  .mail-header {
    padding: 0.75rem 1rem;
  }

  .mail-body {
    padding: 1rem;
  }

  .mail-header-actions {
    gap: 0.35rem;
  }

  .result-email {
    font-size: 1.2rem;
  }

  .scroll-indicator {
    display: none;
  }

  .hero-bottom-bar {
    bottom: 2rem;
  }

  .footer-content {
    padding: 0 1rem;
  }

  .footer-links {
    gap: 1rem;
  }

  .partner-logos {
    gap: 1.5rem;
  }

  .partner-name {
    font-size: 1.1rem;
  }
}

@media (max-width: 480px) {
  .mail-item {
    padding: 1rem;
    gap: 0.75rem;
  }

  .mail-item-avatar {
    width: 36px;
    height: 36px;
    font-size: 0.85rem;
  }

  .detail-subject {
    font-size: 1.2rem;
  }

  .nav-inner {
    padding: 0 1rem;
  }

  .partner-logos {
    gap: 1rem;
  }

  .partner-name {
    font-size: 0.95rem;
  }
}

/* ========== BUTTON LOADING STATE ========== */
.btn.loading {
  pointer-events: none;
  opacity: 0.7;
}

.btn.loading span {
  opacity: 0;
}

.btn.loading::after {
  display: block;
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Refresh spin animation */
.spinning svg {
  animation: spin 0.8s linear infinite;
}

/* ========== CONTACT MODAL ========== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  background: rgba(10, 10, 15, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
  display: flex;
}

.modal-container {
  position: relative;
  width: 100%;
  max-width: 500px;
  transform: translateY(20px) scale(0.95);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.1);
  padding: 2.5rem;
  background: rgba(20, 18, 14, 0.9);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
}

.modal-overlay.active .modal-container {
  transform: translateY(0) scale(1);
}

.close-modal-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.close-modal-btn:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.08);
  transform: rotate(90deg);
}

.modal-header {
  text-align: left;
  margin-bottom: 1.5rem;
}

/* Contact form inputs — styled to match the site */
#contact-name,
#contact-email,
#contact-message {
  display: block;
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 0.9rem 1.2rem;
  font-size: 0.95rem;
  font-family: 'Inter', sans-serif;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#contact-name:focus,
#contact-email:focus,
#contact-message:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* ========== PRICING MOBILE ORDER FIX ========== */
@media (max-width: 900px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Force correct order: Free, Pro, Developer */
  .pricing-card:nth-child(1) { order: 1; } /* Free */
  .pricing-card:nth-child(2) { order: 2; } /* Pro */
  .pricing-card:nth-child(3) { order: 3; } /* Developer */
}

/* ========== COMPREHENSIVE MOBILE POLISH ========== */
@media (max-width: 768px) {
  /* Prevent any horizontal overflow */
  body { overflow-x: hidden; }

  /* Generate box — fix email input row cramping */
  .email-input-wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .email-input {
    border-radius: var(--radius) var(--radius) 0 0 !important;
    border-bottom: none !important;
  }
  .email-domain {
    border-radius: 0 0 var(--radius) var(--radius);
    border-top: 1px solid rgba(255,255,255,0.1);
    text-align: center;
    padding: 0.55rem 1rem;
    font-size: 0.88rem;
    background: rgba(255,255,255,0.04);
  }
  .pro-input-badge {
    top: 0.75rem;
    right: 0.75rem;
  }
  .generate-actions {
    flex-direction: column;
    gap: 0.6rem;
  }
  .generate-actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* Features grid — 1 column */
  .features-grid {
    grid-template-columns: 1fr;
  }

  /* Section inner max-width on mobile */
  .section-inner { padding: 0 0.25rem; }
  .section-title { font-size: clamp(1.8rem, 7vw, 2.8rem); }

  /* Mail window — full screen friendly */
  .mail-window { border-radius: 0; }
  .mail-sidebar { width: 100% !important; border-right: none; }

  /* Result email — prevent overflow */
  .result-email {
    font-size: 1rem;
    word-break: break-all;
    white-space: normal;
    line-height: 1.4;
  }
  .result-email-row { flex-wrap: wrap; gap: 0.5rem; }

  /* Inbox tabs — full width */
  #inbox-tabs { margin-left: 0; }

  /* Stats bubble — compact */
  .stats-bubble-content {
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Billing toggle — no wrap, handled at 600px */

  /* Contact modal full-width on mobile */
  .modal-container {
    padding: 1.75rem 1.25rem;
    border-radius: 16px;
    max-height: 90dvh;
    overflow-y: auto;
  }

  /* Hero section tighter */
  .hero-section { padding-top: 5rem; padding-bottom: 1rem; }
  .hero-content { padding: 0 0.25rem; }
}

@media (max-width: 480px) {
  /* Nav — very small screens */
  .nav-inner { padding: 0 0.85rem; }
  .nav-user-email { max-width: 70px; }
  /* auth pill borderless on tiny screens */
  .nav-auth-pill { gap: 0.3rem; padding: 0.25rem 0.3rem 0.25rem 0.5rem; }

  /* Generate box tighter */
  .glass-card-large { padding: 1.25rem; }
  .generate-actions .btn { padding: 0.8rem 1rem; font-size: 0.9rem; }

  /* Section spacing */
  .section { padding: 4rem 1rem; }
  .section-desc { font-size: 0.9rem; }
  .section-title { font-size: clamp(1.6rem, 8vw, 2.4rem); }

  /* Pricing cards */
  .pricing-card { padding: 1.5rem; }
  .pricing-price .pricing-currency { font-size: 1.2rem; }
  .pricing-amount { font-size: 2.8rem; }

  /* Features */
  .feature-card { padding: 1.25rem; }
  .feature-icon { width: 48px; height: 48px; }

  /* Footer */
  .footer { padding: 2rem 1rem; }
  .footer-links { gap: 0.75rem; flex-direction: column; align-items: center; }
}

/* ============================================================
   NAV AUTH SKELETON
   Shown inside #nav-auth-area until renderNavAuth() replaces
   the innerHTML. Prevents the 1–2s blank flash that happens
   while the Firebase SDK loads, the auth listener fires, and
   /api/auth/me round-trips. Sized roughly between the "Sign Up"
   button and the logged-in pill — so swap-in shifts the layout
   minimally either way.
   ============================================================ */
.nav-auth-skeleton {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.nav-auth-skeleton-pill {
  display: inline-block;
  width: 110px;
  height: 32px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.10) 50%,
    rgba(255, 255, 255, 0.04) 100%
  );
  background-size: 200% 100%;
  animation: navAuthShimmer 1.6s ease-in-out infinite;
  /* Match the desktop pill backdrop so the swap is seamless. */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

@keyframes navAuthShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-auth-skeleton-pill { animation: none; }
}

@media (max-width: 768px) {
  /* Mobile shows a hamburger pill (~52px) — shrink the skeleton
     so we don't briefly take more space than the final element. */
  .nav-auth-skeleton-pill { width: 56px; }
}


/* ============================================================
   DEVELOPER API DASHBOARD CTA
   Sits below #email-result for developer-plan users. The card
   uses the same warm dark-glass language as .glass-card and
   borrows the italic gold-gradient serif of .result-email so
   the title reads as a sibling of the inbox address rather
   than a foreign banner. Hover lifts the card, slides a warm
   sheen across, and pulls the chevron right — no rainbow rim,
   no spinning gradients.
   ============================================================ */
#dev-api-callout {
  width: 100%;
  margin: 1.5rem auto 0;
  display: flex;
  justify-content: center;
}

.dev-api-cta {
  --dev-api-warm: rgba(212, 167, 106, 0.32);
  --dev-api-warm-soft: rgba(212, 167, 106, 0.14);
  --dev-api-plan: rgba(167, 139, 250, 0.55);
  --dev-api-plan-soft: rgba(167, 139, 250, 0.14);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 0.95rem;
  width: 100%;
  max-width: 520px;
  padding: 0.95rem 1.25rem 0.95rem 0.95rem;
  border-radius: 18px;
  text-decoration: none;
  color: var(--text-primary);

  background:
    radial-gradient(120% 140% at 0% 0%, rgba(212, 167, 106, 0.10), transparent 55%),
    radial-gradient(120% 140% at 100% 100%, rgba(167, 139, 250, 0.10), transparent 55%),
    linear-gradient(135deg, rgba(28, 22, 14, 0.78), rgba(18, 14, 22, 0.82));
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);

  transition:
    transform 360ms cubic-bezier(0.2, 0.7, 0.2, 1),
    border-color 360ms ease,
    box-shadow 360ms ease;
}

/* Slow ambient sheen — sweeps once every 6s to gently catch the
   eye without animating constantly in the user's peripheral. */
.dev-api-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    115deg,
    transparent 38%,
    rgba(245, 230, 200, 0.10) 50%,
    transparent 62%
  );
  transform: translateX(-110%);
  animation: devApiAmbientSheen 6s cubic-bezier(0.4, 0, 0.2, 1) 1.5s infinite;
}

/* Hover/focus sheen sweep is faster and more visible. */
.dev-api-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(245, 230, 200, 0.18) 50%,
    transparent 65%
  );
  transform: translateX(-110%);
  transition: transform 720ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

@keyframes devApiAmbientSheen {
  0%   { transform: translateX(-110%); }
  60%  { transform: translateX(110%); }
  100% { transform: translateX(110%); }
}

.dev-api-cta-icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  color: #d6c6ff;
  background:
    radial-gradient(circle at 30% 30%, rgba(167, 139, 250, 0.22), transparent 65%),
    rgba(167, 139, 250, 0.06);
  border: 1px solid var(--dev-api-plan);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 0 14px var(--dev-api-plan-soft);
  transition:
    transform 360ms cubic-bezier(0.2, 0.7, 0.2, 1),
    border-color 360ms ease,
    color 360ms ease,
    box-shadow 360ms ease;
}

.dev-api-cta-text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  text-align: left;
  flex: 1;
  min-width: 0;
}

.dev-api-cta-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(212, 167, 106, 0.85);
  line-height: 1;
  margin-bottom: 0.4rem;
}

.dev-api-cta-title {
  font-family: 'Cormorant Garamond', 'Playfair Display', serif;
  font-size: 1.4rem;
  font-style: italic;
  font-weight: 600;
  line-height: 1.1;
  background: linear-gradient(135deg, var(--accent) 0%, #f5e6c8 65%, #ffffff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: var(--accent); /* fallback */
}

.dev-api-cta-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 0.3rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dev-api-cta-chevron {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  color: var(--accent);
  opacity: 0.85;
  transition:
    transform 360ms cubic-bezier(0.2, 0.7, 0.2, 1),
    color 280ms ease,
    opacity 280ms ease;
}

.dev-api-cta:hover,
.dev-api-cta:focus-visible {
  transform: translateY(-2px);
  border-color: var(--dev-api-warm);
  box-shadow:
    0 18px 44px -18px rgba(212, 167, 106, 0.38),
    0 6px 18px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  outline: none;
}

.dev-api-cta:hover::after,
.dev-api-cta:focus-visible::after {
  transform: translateX(110%);
}

.dev-api-cta:hover .dev-api-cta-icon,
.dev-api-cta:focus-visible .dev-api-cta-icon {
  color: #ffffff;
  border-color: rgba(167, 139, 250, 0.85);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 22px rgba(167, 139, 250, 0.45);
}

.dev-api-cta:hover .dev-api-cta-chevron,
.dev-api-cta:focus-visible .dev-api-cta-chevron {
  transform: translateX(4px);
  opacity: 1;
  color: #ffe5b8;
}

.dev-api-cta:active {
  transform: translateY(0);
  transition-duration: 120ms;
}

@media (prefers-reduced-motion: reduce) {
  .dev-api-cta,
  .dev-api-cta::before,
  .dev-api-cta::after,
  .dev-api-cta-icon,
  .dev-api-cta-chevron { animation: none; transition: none; }
}

@media (max-width: 480px) {
  .dev-api-cta {
    gap: 0.75rem;
    padding: 0.85rem 1rem 0.85rem 0.85rem;
    border-radius: 16px;
  }
  .dev-api-cta-icon { width: 40px; height: 40px; }
  .dev-api-cta-title { font-size: 1.2rem; }
  .dev-api-cta-eyebrow { font-size: 0.58rem; letter-spacing: 0.14em; }
  .dev-api-cta-subtitle { font-size: 0.66rem; }
}

/* =========================================================================
   INBOX SWITCHER — compact glass list with inactive history tucked away.
   ========================================================================= */
.inbox-tabs-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  width: min(100%, 920px);
  margin: 0 auto 1rem;
  padding: 0.9rem;
  text-align: left;
  background: linear-gradient(135deg, rgba(7, 10, 16, 0.86), rgba(13, 12, 18, 0.8));
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  box-shadow: 0 20px 58px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.inbox-tabs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0 0.15rem 0.1rem;
}

.inbox-tabs-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.inbox-tabs-label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(212, 167, 106, 0.55);
}

.inbox-tabs-subtitle {
  margin-top: 0.1rem;
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.74);
}

.inbox-tabs-active-list,
.inbox-history-menu {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.inbox-tab {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.9rem;
  min-height: 70px;
  padding: 0.78rem 0.95rem;
  background: rgba(6, 9, 15, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  position: relative;
  overflow: hidden;
}

.inbox-tab::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: rgba(255, 255, 255, 0.14);
  transition: background 0.18s ease;
}

.inbox-tab:hover {
  background: rgba(10, 14, 22, 0.9);
  border-color: rgba(212, 167, 106, 0.28);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
}

.inbox-tab:focus {
  outline: none;
}

.inbox-tab:focus-visible {
  outline: 2px solid rgba(212, 167, 106, 0.65);
  outline-offset: 2px;
}

.inbox-tab.active {
  background: linear-gradient(135deg, rgba(32, 27, 22, 0.92), rgba(8, 11, 18, 0.9));
  border-color: rgba(212, 167, 106, 0.48);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.inbox-tab.active::before {
  background: var(--accent);
}

.inbox-tab.is-inactive {
  cursor: default;
  opacity: 0.78;
  background: rgba(6, 8, 13, 0.66);
}

.inbox-tab.is-inactive:hover {
  border-color: rgba(255, 255, 255, 0.11);
  box-shadow: none;
}

.inbox-tab-content {
  display: flex;
  flex-direction: column;
  gap: 0.16rem;
  min-width: 0;
  flex: 1;
}

.inbox-tab-email {
  font-family: 'Cormorant Garamond', 'Playfair Display', serif;
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.96);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inbox-tab.active .inbox-tab-email {
  color: var(--accent-secondary);
}

.inbox-tab-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.74);
  flex-wrap: wrap;
}

.inbox-tab-meta .reserved-flag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 1px 7px;
  border-radius: 100px;
  background: rgba(212, 167, 106, 0.18);
  border: 1px solid rgba(212, 167, 106, 0.4);
  color: var(--accent);
  font-weight: 600;
}

.inbox-tab-pill {
  flex-shrink: 0;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background: rgba(212, 167, 106, 0.9);
  color: #19130c;
  padding: 3px 9px;
  border-radius: 6px;
  font-weight: 700;
}

.inbox-tab-pill.is-muted {
  background: rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.inbox-tab-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
}

.inbox-tab-mini-action {
  min-height: 26px;
  padding: 0 0.7rem;
  border: 1px solid rgba(212, 167, 106, 0.24);
  border-radius: 999px;
  background: rgba(212, 167, 106, 0.08);
  color: var(--accent-secondary);
  font: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.inbox-tab-mini-action:hover {
  background: rgba(212, 167, 106, 0.16);
  border-color: rgba(212, 167, 106, 0.45);
  color: #fff2d1;
}

.inbox-tab-mini-action.is-reserved {
  background: rgba(212, 167, 106, 0.92);
  border-color: transparent;
  color: #19130c;
}

.inbox-history-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  width: 100%;
  min-height: 42px;
  padding: 0.62rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(255, 255, 255, 0.78);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.inbox-history-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(212, 167, 106, 0.2);
}

.inbox-history-count {
  margin-left: auto;
  min-width: 1.6rem;
  height: 1.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(212, 167, 106, 0.14);
  color: var(--accent-secondary);
  font-size: 0.7rem;
  font-weight: 700;
}

.inbox-history-chevron {
  width: 1rem;
  color: var(--accent);
  font-weight: 700;
  text-align: center;
}

.inbox-history-menu {
  display: none;
}

.inbox-history-menu.open {
  display: flex;
}

.inbox-tabs-empty {
  padding: 0.8rem 0.95rem;
  border: 1px dashed rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.88rem;
}

/* =========================================================================
   CUSTOM CONFIRM MODAL — replaces the native confirm() dialog
   ========================================================================= */
.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 10500;
  background: radial-gradient(ellipse at top, rgba(20, 14, 8, 0.72), rgba(0, 0, 0, 0.85));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.confirm-overlay.active {
  display: flex;
  opacity: 1;
  visibility: visible;
}

.confirm-card {
  width: 100%;
  max-width: 440px;
  padding: 1.75rem;
  text-align: center;
  background: linear-gradient(155deg, rgba(28, 22, 14, 0.96) 0%, rgba(18, 14, 22, 0.96) 100%);
  border: 1px solid rgba(212, 167, 106, 0.32);
  border-radius: 20px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04), 0 0 60px rgba(212, 167, 106, 0.08);
  transform: translateY(20px) scale(0.92);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

.confirm-overlay.active .confirm-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.confirm-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(248, 113, 113, 0.22), rgba(248, 113, 113, 0.04));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: rgba(248, 113, 113, 0.92);
  border: 1px solid rgba(248, 113, 113, 0.35);
  animation: confirmIconIn 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both 0.05s;
  box-shadow: 0 0 30px rgba(248, 113, 113, 0.18);
}

@keyframes confirmIconIn {
  from { transform: scale(0.4) rotate(-12deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg); opacity: 1; }
}

.confirm-title {
  font-family: 'Cormorant Garamond', 'Playfair Display', serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
}

.confirm-message {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0 0 1.5rem;
}

.confirm-actions {
  display: flex;
  gap: 0.65rem;
  justify-content: center;
  flex-wrap: wrap;
}

.confirm-actions .btn {
  min-width: 120px;
  justify-content: center;
}

.confirm-actions .btn-ghost {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-primary);
}

.confirm-actions .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
}

.confirm-actions .confirm-danger {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #fff;
  border: none;
  box-shadow: 0 8px 22px rgba(239, 68, 68, 0.35);
  position: relative;
  overflow: hidden;
}

.confirm-actions .confirm-danger::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.confirm-actions .confirm-danger:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(239, 68, 68, 0.55);
}

.confirm-actions .confirm-danger:hover::before {
  transform: translateX(100%);
}

.confirm-actions .confirm-danger.is-busy {
  pointer-events: none;
  opacity: 0.7;
}

/* When the confirm uses a non-destructive (info) icon */
.confirm-icon.info {
  color: var(--accent);
  border-color: rgba(212, 167, 106, 0.4);
  background: radial-gradient(circle at center, rgba(212, 167, 106, 0.22), rgba(212, 167, 106, 0.04));
  box-shadow: 0 0 30px rgba(212, 167, 106, 0.18);
}

.confirm-actions .confirm-primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-warm, #c08947) 100%);
  color: #1c130a;
  border: none;
  box-shadow: 0 8px 22px rgba(212, 167, 106, 0.35);
  font-weight: 700;
}
.confirm-actions .confirm-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(212, 167, 106, 0.55);
}

/* =========================================================================
   BLOCK LIST MODAL ITEMS
   ========================================================================= */
#blocklist-input {
  display: block;
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
  color: var(--text-primary);
  outline: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
#blocklist-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.blocklist-items {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 280px;
  overflow-y: auto;
}

.blocklist-items li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.85rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.85rem;
  color: var(--text-primary);
  animation: blocklistItemIn 0.3s ease both;
}

@keyframes blocklistItemIn {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

.blocklist-items li button {
  background: transparent;
  border: 1px solid rgba(248, 113, 113, 0.35);
  color: rgba(248, 113, 113, 0.92);
  border-radius: 8px;
  padding: 0.25rem 0.6rem;
  cursor: pointer;
  font-size: 0.78rem;
  transition: all 0.15s ease;
}

.blocklist-items li button:hover {
  background: rgba(248, 113, 113, 0.15);
  border-color: rgba(248, 113, 113, 0.6);
  color: #fff;
  transform: translateY(-1px);
}

.blocklist-empty {
  margin: 1.25rem 0 0;
  padding: 1rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.88rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 12px;
}

/* =========================================================================
   EXPORT BUTTONS in message detail toolbar
   ========================================================================= */
.mail-export-group {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
}

.mail-export-btn {
  padding: 0.55rem 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: var(--text-secondary);
  transition: all 0.18s ease;
  cursor: pointer;
}
.mail-export-btn:hover {
  background: rgba(212, 167, 106, 0.1);
  border-color: rgba(212, 167, 106, 0.45);
  color: var(--accent);
  transform: translateY(-1px);
}

.mail-export-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
}
.mail-export-btn:disabled:hover {
  transform: none;
}

.mail-export-btn .pro-lock {
  font-size: 0.7rem;
}

/* =========================================================================
   RESERVE / BLOCKLIST ICON STATES
   ========================================================================= */
.icon-btn.is-active-state {
  background: rgba(212, 167, 106, 0.16);
  color: var(--accent);
  border-color: rgba(212, 167, 106, 0.5);
  box-shadow: 0 0 12px rgba(212, 167, 106, 0.25);
}

#btn-reserve.is-active-state svg polygon {
  fill: currentColor;
}

/* =========================================================================
   UNIVERSAL BUTTON PRESS / GLOW / RIPPLE ANIMATIONS
   Subtle "press" + glow on all .btn-primary clicks; injected here so we
   don't have to wire individual button handlers for every callsite.
   ========================================================================= */
.btn-primary,
.glow-btn {
  position: relative;
  overflow: hidden;
}

.btn-primary::after,
.glow-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%),
                              rgba(255, 255, 255, 0.45) 0%,
                              transparent 60%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.btn-primary.is-rippling::after,
.glow-btn.is-rippling::after {
  animation: btnRipple 0.6s ease-out;
}

@keyframes btnRipple {
  from { opacity: 0.8; transform: scale(0.4); }
  to   { opacity: 0;   transform: scale(2); }
}

.btn-primary:not(:disabled):active,
.glow-btn:not(:disabled):active {
  transform: scale(0.97);
  transition-duration: 80ms;
}

/* The generate card sits over a moving video. Keep its controls on stable
   paint layers so hover/focus does not flash translucent overlays. */
.generate-box .btn,
.generate-box .btn:hover,
.generate-box .btn:active,
.generate-box .glow-btn:not(:disabled):active {
  transform: translateZ(0) !important;
}

.generate-box .btn::before,
.generate-box .btn::after,
.generate-box .glow-btn::before,
.generate-box .glow-btn::after,
.generate-box .btn-primary::after {
  content: none !important;
  display: none !important;
  animation: none !important;
  transition: none !important;
}

.generate-box .btn-primary,
.generate-box .btn-secondary {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  will-change: auto;
}

/* Universal "shimmer" overlay used by createInbox/upgrade/sendMessage when
   they're in flight. Add the class .is-loading-shimmer to any element. */
.is-loading-shimmer {
  position: relative;
  overflow: hidden;
}
.is-loading-shimmer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.22) 50%, transparent 100%);
  animation: globalShimmer 1.2s linear infinite;
  pointer-events: none;
}
@keyframes globalShimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

/* Success-state for any button that wants to "morph" into a green check */
.btn-success-state {
  background: linear-gradient(135deg, #34d399 0%, #10b981 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 8px 22px rgba(52, 211, 153, 0.45) !important;
}

@keyframes successCheckPop {
  from { transform: scale(0.4) rotate(-20deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* Reduced motion: drop heavy animations */
@media (prefers-reduced-motion: reduce) {
  .confirm-card,
  .confirm-icon,
  .inbox-tab,
  .btn-primary::after,
  .glow-btn::after,
  .is-loading-shimmer::before {
    animation: none !important;
    transition: opacity 0.2s ease !important;
  }
}

/* Mobile: confirm modal sizing */
@media (max-width: 480px) {
  .confirm-card {
    padding: 1.4rem 1.15rem;
    border-radius: 18px;
  }
  .confirm-title { font-size: 1.45rem; }
  .confirm-actions .btn { width: 100%; }

  .inbox-tab { padding: 0.7rem 0.9rem; }
  .inbox-tab-email { font-size: 1.05rem; }
}