:root {
  /* Color palette */
  --primary: #2563eb;
  --accent: #a21caf;
  --background: #f8fafc;
  --surface: #fff;
  --text: #1e293b;
  --success: #10b981;
  --error: #ef4444;
  --border: #e5e7eb;
  --shadow: 0 2px 8px rgba(30,41,59,0.06);
  --hover-bg: rgba(37, 99, 235, 0.1);
}

/* Dark Mode Variables */
[data-theme="dark"] {
  --primary: #60a5fa;
  --accent: #c084fc;
  --background: #181a20;
  --surface: #23262f;
  --text: #f3f4f6;
  --success: #34d399;
  --error: #f87171;
  --border: #2d2f36;
  --shadow: 0 2px 8px rgba(0,0,0,0.25);
  --hover-bg: rgba(255, 255, 255, 0.1);
}

/* Typography */
body {
  font-family: 'Inter', 'Poppins', 'Roboto', Arial, sans-serif;
  background: var(--background);
  color: var(--text);
  margin: 0;
  line-height: 1.6;
  font-size: 1rem;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  margin: 0 0 0.5em 0;
  color: var(--text);
}
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }

/* Removed Gradient text styling for dashboard welcome message, now handled by JavaScript */

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Navigation Bar */
.navbar {
  background: var(--surface);
  box-shadow: var(--shadow);
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Staggered animation for navbar elements */
.navbar .logo,
.navbar .nav-links,
.navbar .auth-buttons,
.navbar .nav-toggle,
.navbar .theme-toggle {
  opacity: 0;
  animation: fadeInUp 0.6s ease-out forwards;
}

.navbar .logo {
  animation-delay: 0.1s;
}

.navbar .nav-links {
  animation-delay: 0.2s;
}

.navbar .auth-buttons {
  animation-delay: 0.3s;
}

.navbar .nav-toggle {
  animation-delay: 0.4s;
}

.navbar .theme-toggle {
  animation-delay: 0.5s;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.nav-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.logo {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
  letter-spacing: 1px;
  background-image: linear-gradient(90deg, var(--primary), var(--accent));
  background-size: 400% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  transition: background-position 0.3s ease-out;
}
.nav-links {
  display: flex;
  gap: 2rem;
}
.nav-links a {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}
.nav-links a:hover {
  color: var(--primary);
}

.nav-links a.dashboard-link {
  display: none;
}

.nav-links a.dashboard-link.authenticated {
  display: inline-block;
}

.mobile-menu a.dashboard-link {
  display: none;
}

.mobile-menu a.dashboard-link.authenticated {
  display: block;
}

.nav-links a.dashboard-link.authenticated {
  display: inline-block;
}
.auth-buttons {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.btn {
  font-family: inherit;
  font-size: 1rem;
  padding: 0.5em 1.5em;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  outline: none;
}
.btn-primary {
  background: linear-gradient(90deg, var(--primary), var(--accent));
  color: #fff;
  box-shadow: 0 2px 8px rgba(37,99,235,0.08);
}
.btn-primary:hover, .btn-primary:focus {
  background: linear-gradient(90deg, var(--accent), var(--primary));
}
.btn-outline {
  background: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
}
.btn-outline:hover, .btn-outline:focus {
  background: var(--primary);
  color: #fff;
}

/* Hamburger menu for mobile */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  margin-left: 1rem;
}
.hamburger {
  width: 24px;
  height: 2px;
  background: var(--primary);
  display: block;
  position: relative;
}
.hamburger::before, .hamburger::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 2px;
  background: var(--primary);
  transition: 0.2s;
}
.hamburger::before {
  top: -8px;
}
.hamburger::after {
  top: 8px;
}

/* Mobile menu */
.mobile-menu {
  display: none;
  flex-direction: column;
  background: var(--surface);
  box-shadow: var(--shadow);
  position: absolute;
  top: 64px;
  left: 0;
  width: 100%;
  padding: 1.5rem 0;
  z-index: 99;
}
.mobile-menu a {
  padding: 1rem 2rem;
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
}
.auth-buttons-mobile {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem 2rem 0 2rem;
}

/* Hero Section */
.hero {
  background: linear-gradient(-45deg, var(--primary), var(--accent), #8b5cf6, #06b6d4, var(--primary));
  background-size: 400% 400%;
  color: #fff;
  padding: 5rem 0 6rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  animation: gradientShift 15s ease infinite;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 80%, rgba(255,255,255,0.1) 0%, transparent 50%),
              radial-gradient(circle at 80% 20%, rgba(255,255,255,0.1) 0%, transparent 50%),
              radial-gradient(circle at 40% 40%, rgba(255,255,255,0.05) 0%, transparent 50%);
  animation: shimmer 8s ease-in-out infinite alternate;
  pointer-events: none;
}

/* Floating geometric shapes */
.hero .floating-shape {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(1px);
  animation: float 6s ease-in-out infinite;
  z-index: 1;
}

.hero .floating-shape:nth-child(1) {
  width: 80px;
  height: 80px;
  top: 20%;
  left: 10%;
  animation-delay: 0s;
  animation-duration: 8s;
}

.hero .floating-shape:nth-child(2) {
  width: 120px;
  height: 120px;
  top: 60%;
  right: 15%;
  animation-delay: 2s;
  animation-duration: 10s;
  border-radius: 20%;
}

.hero .floating-shape:nth-child(3) {
  width: 60px;
  height: 60px;
  top: 80%;
  left: 20%;
  animation-delay: 4s;
  animation-duration: 7s;
  border-radius: 0;
  background: rgba(255,255,255,0.08);
}

.hero .floating-shape:nth-child(4) {
  width: 100px;
  height: 100px;
  top: 30%;
  right: 30%;
  animation-delay: 1s;
  animation-duration: 9s;
  background: rgba(255,255,255,0.06);
}

.hero .floating-shape:nth-child(5) {
  width: 140px;
  height: 140px;
  top: 70%;
  left: 50%;
  animation-delay: 3s;
  animation-duration: 11s;
  border-radius: 30%;
}

/* Additional floating elements with different shapes */
.hero .floating-element {
  position: absolute;
  background: rgba(255,255,255,0.08);
  animation: floatRotate 12s linear infinite;
  z-index: 1;
}

.hero .floating-element:nth-child(6) {
  width: 40px;
  height: 40px;
  top: 15%;
  left: 70%;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  animation-delay: 0.5s;
  animation-duration: 14s;
}

.hero .floating-element:nth-child(7) {
  width: 30px;
  height: 30px;
  top: 85%;
  right: 60%;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  animation-delay: 2.5s;
  animation-duration: 13s;
}

.hero .floating-element:nth-child(8) {
  width: 50px;
  height: 50px;
  top: 45%;
  left: 85%;
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  animation-delay: 5s;
  animation-duration: 15s;
}

/* Particles that follow mouse movement */
.hero .particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(255,255,255,0.6);
  border-radius: 50%;
  pointer-events: none;
  animation: particleFloat 8s ease-in-out infinite;
  z-index: 1;
}

.hero .particle:nth-child(9) { top: 25%; left: 15%; animation-delay: 0s; }
.hero .particle:nth-child(10) { top: 35%; left: 25%; animation-delay: 1s; }
.hero .particle:nth-child(11) { top: 45%; left: 35%; animation-delay: 2s; }
.hero .particle:nth-child(12) { top: 55%; left: 45%; animation-delay: 3s; }
.hero .particle:nth-child(13) { top: 65%; left: 55%; animation-delay: 4s; }
.hero .particle:nth-child(14) { top: 75%; left: 65%; animation-delay: 5s; }
.hero .particle:nth-child(15) { top: 85%; left: 75%; animation-delay: 6s; }
.hero .particle:nth-child(16) { top: 30%; right: 20%; animation-delay: 0.5s; }
.hero .particle:nth-child(17) { top: 50%; right: 30%; animation-delay: 1.5s; }
.hero .particle:nth-child(18) { top: 70%; right: 40%; animation-delay: 2.5s; }

.hero-content {
  max-width: 700px;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}

.hero h1 {
  font-size: 2.75rem;
  margin-bottom: 1rem;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.hero p {
  font-size: 1.25rem;
  margin-bottom: 2rem;
  color: #f3f4f6;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.hero-cta {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.hero-cta .btn-outline {
  background: var(--surface);
  color: var(--primary);
  border: 2px solid var(--primary);
  box-shadow: 0 2px 8px rgba(37,99,235,0.04);
  position: relative;
  overflow: hidden;
}

.hero-cta .btn-outline::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s;
}

.hero-cta .btn-outline:hover::before {
  left: 100%;
}

.hero-cta .btn-outline:hover, .hero-cta .btn-outline:focus {
  background: var(--primary);
  color: #fff;
}

/* Keyframe animations */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes shimmer {
  0% {
    opacity: 0.5;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(1.1);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  33% {
    transform: translateY(-20px) rotate(1deg);
  }
  66% {
    transform: translateY(10px) rotate(-1deg);
  }
}

@keyframes floatRotate {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  25% {
    transform: translateY(-15px) rotate(90deg);
  }
  50% {
    transform: translateY(-5px) rotate(180deg);
  }
  75% {
    transform: translateY(-25px) rotate(270deg);
  }
  100% {
    transform: translateY(0px) rotate(360deg);
  }
}

@keyframes particleFloat {
  0% {
    transform: translateY(0) translateX(0) scale(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
    transform: translateY(-10px) translateX(5px) scale(1);
  }
  50% {
    opacity: 0.8;
    transform: translateY(-50px) translateX(15px) scale(1);
  }
  90% {
    opacity: 0;
    transform: translateY(-100px) translateX(25px) scale(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-120px) translateX(30px) scale(0);
  }
}

/* Smooth bottom transition to blend with next section */
.hero::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(to bottom, 
    rgba(255,255,255,0) 0%, 
    rgba(255,255,255,0.05) 50%, 
    var(--surface) 100%);
  pointer-events: none;
  z-index: 2;
}

[data-theme="dark"] .hero::after {
  background: linear-gradient(to bottom, 
    rgba(24,26,32,0) 0%, 
    rgba(24,26,32,0.05) 50%, 
    #23262f 100%);
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  .hero {
    animation: none;
    background: linear-gradient(120deg, var(--primary) 0%, var(--accent) 100%);
  }
  
  .hero::before,
  .hero::after,
  .hero .floating-shape,
  .hero .floating-element,
  .hero .particle {
    animation: none;
  }
}

/* Footer */
.footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 2rem 0 1rem 0;
  color: var(--text);
  font-size: 0.95rem;
}
.footer-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.footer-links {
  display: flex;
  gap: 1.5rem;
}
.footer-links a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}
.footer-links a:hover {
  text-decoration: underline;
}

/* Responsive Styles */
@media (max-width: 900px) {
  .nav-links {
    display: none;
  }
  .nav-toggle {
    display: block;
  }
  .mobile-menu[hidden] {
    display: none;
  }
  .mobile-menu {
    display: flex;
  }
}
@media (max-width: 600px) {
  .container {
    padding: 0 0.75rem;
  }
  .hero {
    padding: 3rem 0 2rem 0;
  }
  .hero h1 {
    font-size: 2rem;
  }
  .footer-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

/* Accessibility: Focus Styles */
:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Smooth theme transition */
body, .navbar, .footer, .hero, .container, .card, .btn, .mobile-menu {
  transition: background 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
}

/* Theme Toggle Button */
.theme-toggle {
  background: transparent;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  border-radius: 0.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  width: 40px;
  height: 40px;
}

[data-theme="light"] .theme-toggle {
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow);
}

[data-theme="dark"] .theme-toggle {
  color: #fff;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.theme-toggle:hover {
  background: var(--hover-bg);
  transform: scale(1.05);
}

.theme-toggle:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.theme-toggle svg {
  width: 24px;
  height: 24px;
  stroke-width: 2;
  transition: transform 0.2s ease;
}

.theme-toggle:hover svg {
  transform: rotate(15deg);
}

/* Dark mode adjustments */
[data-theme="dark"] .theme-toggle {
  background: var(--surface);
  color: #fff;
}

[data-theme="dark"] .theme-toggle:hover {
  background: var(--hover-bg);
}

[data-theme="dark"] .theme-toggle:focus {
  outline-color: var(--accent);
}

/* Features Section */
.features {
  background: var(--surface);
  padding: 4rem 0 3rem 0;
}
.features h2 {
  text-align: center;
  margin-bottom: 2.5rem;
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
}
.feature-card {
  background: var(--background);
  border-radius: 1.25rem;
  box-shadow: var(--shadow);
  padding: 2rem 1.5rem;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
  border: 1px solid var(--border);
}
.feature-card:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 6px 24px rgba(37,99,235,0.10);
}
.feature-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  display: block;
}

/* How It Works Section */
.how-it-works {
  background: var(--background);
  padding: 4rem 0 3rem 0;
}
.how-it-works h2 {
  text-align: center;
  margin-bottom: 2.5rem;
}
.steps {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}
.steps li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  max-width: 320px;
  background: var(--surface);
  border-radius: 1rem;
  box-shadow: var(--shadow);
  padding: 1.5rem 1rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--border);
}
.step-icon {
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  border-radius: 50%;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

/* Pricing Preview Section */
.pricing-preview {
  background: var(--surface);
  padding: 4rem 0 3rem 0;
}
.pricing-preview h2 {
  text-align: center;
  margin-bottom: 2.5rem;
}
.pricing-cards {
  display: flex;
  gap: 2rem;
  justify-content: center;
  flex-wrap: wrap;
}
.pricing-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.pricing-card.popular {
  border: 2px solid var(--primary);
  box-shadow: 0 8px 32px rgba(37,99,235,0.12);
}
.pricing-card h3 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}
.price {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 1rem;
}
.pricing-card ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0 1.5rem 0;
  color: var(--text);
}
.pricing-card ul li {
  margin-bottom: 0.5rem;
}
.pricing-note {
  text-align: center;
  margin-top: 2rem;
  color: var(--text);
}
.pricing-note a {
  color: var(--primary);
  text-decoration: underline;
}

/* Trust/CTA Section */
.trust-cta {
  background: linear-gradient(120deg, var(--primary) 0%, var(--accent) 100%);
  color: #fff;
  padding: 3.5rem 0 3rem 0;
  text-align: center;
}
.trust-cta-content h2 {
  color: #fff;
  margin-bottom: 1rem;
}
.trust-cta-content p {
  color: #e0e7ef;
  margin-bottom: 2rem;
  font-size: 1.15rem;
}
.trust-cta .btn-primary {
  background: #fff;
  color: var(--primary);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(255,255,255,0.10);
}
.trust-cta .btn-primary:hover {
  background: var(--surface);
  color: var(--accent);
}

/* Responsive adjustments for new sections */
@media (max-width: 900px) {
  .features-grid, .pricing-cards {
    grid-template-columns: 1fr;
    flex-direction: column;
    gap: 1.5rem;
  }
  .steps {
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
  }
}
@media (max-width: 600px) {
  .features, .how-it-works, .pricing-preview, .trust-cta {
    padding: 2.5rem 0 1.5rem 0;
  }
  .feature-card, .pricing-card, .steps li {
    padding: 1.25rem 0.75rem;
  }
}

/* Dark mode tweaks for new sections */
[data-theme="dark"] .feature-card,
[data-theme="dark"] .pricing-card,
[data-theme="dark"] .steps li {
  background: #23262f;
  border-color: #2d2f36;
}
[data-theme="dark"] .trust-cta {
  background: linear-gradient(120deg, #23262f 0%, #181a20 100%);
  color: #f3f4f6;
}
[data-theme="dark"] .trust-cta-content h2 {
  color: #f3f4f6;
}
[data-theme="dark"] .trust-cta-content p {
  color: #cbd5e1;
}
[data-theme="dark"] .trust-cta .btn-primary {
  background: var(--primary);
  color: #fff;
}
[data-theme="dark"] .trust-cta .btn-primary:hover {
  background: var(--accent);
  color: #fff;
}

/* Pricing Carousel */
.pricing-carousel-container {
  position: relative;
  overflow: hidden; /* Changed from hidden to visible to prevent clipping */
  border-radius: 1.25rem;
  box-shadow: var(--shadow);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 1rem; /* Added padding to prevent content from touching edges */
}

.pricing-carousel {
  display: flex;
  transition: transform 0.6s ease;
  will-change: transform;
  padding: 0.5rem 5%;        /* ← ADD THIS */
  box-sizing: border-box;    /* ← ADD THIS */
}

.pricing-card {
  flex: 0 0 90%;             /* ← was 100% */
  min-width: 90%;            /* ← was 100% */
  transition: transform 0.3s ease, opacity 0.3s ease;
  position: relative;
  box-sizing: border-box;    /* ← ADD THIS */
}

.pricing-card.active {
  transform: scale(1.05);
  z-index: 10;
  box-shadow: 0 8px 32px rgba(37,99,235,0.15);
}

.pricing-card:not(.active) {
  opacity: 0.8;
  transform: scale(0.95);
}

/* Added specific styling for Enterprise card to prevent overflow */
.pricing-card.enterprise {
  padding: 2rem 1.5rem; /* Adjusted padding for Enterprise card */
}

/* Fix for hover zoom effect causing overflow */
.pricing-card:hover {
  transform: scale(1.08);
  transition: transform 0.3s ease;
}

.pricing-card:hover:not(.active) {
  transform: scale(1.08);
}

.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
  padding: 1rem;
}

.carousel-nav {
  background: var(--surface);
  border: 2px solid var(--border);
  color: var(--primary);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 1.2rem;
  font-weight: bold;
}

.carousel-nav:hover {
  background: var(--primary);
  color: #fff;
  transform: scale(1.05);
}

.carousel-dots {
  display: flex;
  gap: 0.5rem;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--border);
  cursor: pointer;
  transition: all 0.2s ease;
}

.dot.active {
  background: var(--primary);
  transform: scale(1.2);
}

.dot:hover {
  background: var(--primary);
  transform: scale(1.1);
}

/* Responsive adjustments for carousel */
@media (max-width: 768px) {
  .pricing-card.active {
    transform: scale(1.02);
  }

  .pricing-card:not(.active) {
    transform: scale(0.98);
  }
}

/* Dark mode adjustments for carousel */
[data-theme="dark"] .pricing-carousel-container {
  background: #23262f;
  border-color: #2d2f36;
}

[data-theme="dark"] .carousel-nav {
  background: #23262f;
  border-color: #2d2f36;
  color: var(--accent);
}

[data-theme="dark"] .carousel-nav:hover {
  background: var(--accent);
  color: #fff;
}

[data-theme="dark"] .dot {
  background: #2d2f36;
}

[data-theme="dark"] .dot.active {
  background: var(--accent);
}

[data-theme="dark"] .dot:hover {
  background: var(--accent);
}

/* Ensure carousel doesn't interfere with existing pricing styles */
.pricing-cards-4 {
  display: none;
}

/* Add carousel JavaScript */
[data-theme="dark"] .plan-card.static {
  background: linear-gradient(160deg, #23262f, #181a20);
}
[data-theme="dark"] .plan-card.static.free {
  background: linear-gradient(160deg, #2a2d35, #1f2229);
}
[data-theme="dark"] .plan-card.static.enterprise {
  background: linear-gradient(160deg, #1e3a8a, #151e3d);
}
[data-theme="dark"] .plan-card.audio.back {
  background: linear-gradient(160deg, #1e1b4b, #1e2952);
}
[data-theme="dark"] .plan-card ul li {
  color: #cbd5e1;
}
[data-theme="dark"] .plan-card h3 {
  color: #f3f4f6;
}
[data-theme="dark"] .plan-card .price {
  color: var(--accent);
}

/* Annual total message styling */
.price .annual-total {
  display: none;
  font-size: 0.85rem;
  color: var(--text-secondary, #64748b);
  margin-left: 0.5rem;
  font-weight: 400;
  white-space: nowrap;
}

/* Dark mode support for annual total */
[data-theme="dark"] .price .annual-total {
  color: var(--text-secondary-dark, #94a3b8);
}

/* Button styling for plan cards */
.plan-card .btn {
  margin-top: auto;
  font-size: 0.9rem;
  padding: 0.6rem 1rem;
}

/* About Page */
.about-section {
  background: var(--surface);
  padding: 4rem 0 3rem 0;
}
.about-section h1 {
  text-align: center;
  margin-bottom: 1.5rem;
}
.about-mission {
  text-align: center;
  font-size: 1.2rem;
  color: var(--text);
  margin-bottom: 2.5rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.about-highlights {
  display: flex;
  gap: 2rem;
  justify-content: center;
  flex-wrap: wrap;
}
.about-highlight {
  background: var(--background);
  border-radius: 1.25rem;
  box-shadow: var(--shadow);
  padding: 2rem 1.5rem;
  flex: 1 1 260px;
  min-width: 240px;
  max-width: 340px;
  border: 1px solid var(--border);
  margin-bottom: 1.5rem;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}
.about-highlight h2 {
  color: var(--primary);
  font-size: 1.2rem;
  margin-bottom: 0.75rem;
}
.about-highlight p {
  color: var(--text);
  font-size: 1rem;
}
.about-highlight:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 6px 24px rgba(37,99,235,0.10);
}

@media (max-width: 900px) {
  .about-highlights {
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
  }
}
@media (max-width: 600px) {
  .about-section {
    padding: 2.5rem 0 1.5rem 0;
  }
  .about-highlight {
    padding: 1.25rem 0.75rem;
  }
}
[data-theme="dark"] .about-section {
  background: #23262f;
}
[data-theme="dark"] .about-highlight {
  background: #181a20;
  border-color: #2d2f36;
}
[data-theme="dark"] .about-highlight h2 {
  color: var(--accent);
}
[data-theme="dark"] .about-highlight p {
  color: #cbd5e1;
}

/* Pricing Page */
.pricing-section {
  background: var(--surface);
  padding: 4rem 0 3rem 0;
}
.pricing-section h1 {
  text-align: center;
  margin-bottom: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  position: relative;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  /* Ensure text is visible with proper fallback */
  color: var(--text);
}

.pricing-section h1.animated {
  opacity: 1;
}

.pricing-section h1 .letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  white-space: pre; /* Preserve spaces between characters */
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Gradient text effect for premium look - with proper fallback handling */
.pricing-section h1.gradient-text {
  background: linear-gradient(120deg, var(--primary) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--text); /* Fallback for browsers that don't support background-clip: text */
}

/* Ensure proper contrast in both themes */
[data-theme="light"] .pricing-section h1.gradient-text {
  background: linear-gradient(120deg, var(--primary) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--text);
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

[data-theme="dark"] .pricing-section h1.gradient-text {
  background: linear-gradient(120deg, var(--accent) 0%, var(--primary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--text);
  text-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

/* Fallback for browsers that don't support background-clip: text */
@supports not (-webkit-background-clip: text) {
  .pricing-section h1.gradient-text {
    background: none;
    -webkit-text-fill-color: initial;
    color: var(--text);
  }
  
  [data-theme="light"] .pricing-section h1.gradient-text {
    color: var(--primary);
  }
  
  [data-theme="dark"] .pricing-section h1.gradient-text {
    color: var(--accent);
  }
}

/* New Pricing Toggle */
.pricing-toggle {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2.5rem;
}
.pricing-toggle button {
  border: none;
  padding: 0.7rem 1.4rem;
  margin: 0 0.5rem;
  border-radius: 6px;
  background: var(--border);
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s;
  font-family: inherit;
  font-size: 1rem;
}
.pricing-toggle button.active {
  background: linear-gradient(90deg, var(--primary), var(--accent));
  color: #fff;
  box-shadow: 0 2px 8px rgba(37,99,235,0.08);
}

/* New Card-based Pricing Layout */
.pricing-cards {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}

.plan-card,
.plan-card-pair {
  position: relative;
  width: 200px;
  min-height: 450px;
  background: var(--background);
  border-radius: 1rem;
  box-shadow: var(--shadow);
  transition: all 0.6s cubic-bezier(.4,0,.2,1);
  padding: 1.2rem;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}

/* Static cards */
.plan-card.static {
  background: linear-gradient(160deg, #ececec, #fff);
  z-index: 10;
  position: relative;
}

.plan-card.static.free {
  background: linear-gradient(160deg, #f0f0f0, #fafafa);
}

.plan-card.static.enterprise {
  background: linear-gradient(160deg, #e8f4ff, #f0f8ff);
}

/* Pair containers for solo/pro groups */
.plan-card-pair {
  perspective: 800px;
  min-width: 200px;
  width: 200px;
}

.plan-card-pair.pair-left {
  margin-left: 0;
  padding-left: 0;
}

.plan-card-pair.pair-right {
  margin-right: 0;
  padding-right: 0;
}

/* The two layers within each pair */
.plan-card-pair .plan-card {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  backface-visibility: hidden;
}

/* Video (front) cards */
.plan-card.video.front {
  z-index: 2;
  transform: translateY(0) rotateX(0);
}

/* Audio (back) cards peek slightly */
.plan-card.audio.back {
  z-index: 1;
  transform: translate(-20px, -30px) scale(0.9);
  opacity: 0.8;
  background: linear-gradient(160deg, #f0f8ff, #e6f3ff);
  min-height: 450px;
}

/* When audio mode active */
.audio-mode .plan-card.video.front {
  transform: translate(-20px, -30px) scale(0.9);
  opacity: 0.7;
  z-index: 1;
}

.audio-mode .plan-card.audio.back {
  transform: translateY(0) rotateX(0);
  opacity: 1;
  z-index: 2;
  min-height: 450px;
}

/* Card styling */
.plan-card h3 {
  margin: 0.5rem 0;
  font-size: 1.2rem;
  color: var(--text);
}
.plan-card .price {
  margin: 1rem 0;
  font-size: 1.4rem;
  font-weight: bold;
  color: var(--primary);
}
.plan-card ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
  color: var(--text);
  flex-grow: 1;
}
.plan-card ul li {
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  text-align: left;
}
.plan-card button, .plan-card .btn {
  width: 100%;
  margin-top: auto;
}

/* Fix button width and center alignment for free and enterprise cards */
.plan-card.static.free .btn,
.plan-card.static.enterprise .btn {
  width: auto;
  min-width: 120px;
  padding: 0.6rem 1.2rem;
  margin: auto auto 0 auto;
  text-align: center;
  display: block;
}

/* Card-specific colors */
.plan-card.audio {
  border-left: 4px solid #a21caf;
}
.plan-card.video {
  border-left: 4px solid #2563eb;
}

/* Billing toggle within cards */
.billing-toggle-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.5rem 0;
  font-size: 0.8rem;
}
.billing-label {
  color: var(--text);
  font-weight: 500;
}
.billing-label.active {
  color: var(--primary);
  font-weight: 700;
}
.billing-label.annual.active {
  color: var(--success);
}
.switch-card {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 18px;
}
.switch-card input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider-card {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--border);
  border-radius: 34px;
  transition: background 0.2s;
}
.slider-card:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 2px;
  bottom: 2px;
  background: var(--primary);
  border-radius: 50%;
  transition: transform 0.2s, background 0.2s;
}
input:checked + .slider-card {
  background: var(--primary);
}
input:checked + .slider-card:before {
  transform: translateX(14px);
  background: var(--accent);
}
.save-card {
  color: var(--success);
  font-size: 0.7rem;
  font-weight: 600;
}

.pricing-cards-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  margin-bottom: 2.5rem;
}
.pricing-card {
  background: var(--background);
  border-radius: 1.25rem;
  box-shadow: var(--shadow);
  padding: 2.5rem 2rem 2rem 2rem;
  min-width: 200px;
  max-width: 320px;
  text-align: center;
  border: 1px solid var(--border);
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s;
}
.pricing-card.popular {
  border: 2px solid var(--primary);
  box-shadow: 0 8px 32px rgba(37,99,235,0.12);
}
.pricing-card.free {
  opacity: 0.85;
}
.pricing-card h2 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}
.pricing-card .price {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 1rem;
}
.pricing-card ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0 1.5rem 0;
  color: var(--text);
}
.pricing-card ul li {
  margin-bottom: 0.5rem;
}
.pricing-card button {
  width: 100%;
}

.comparison-table-wrapper {
  overflow-x: auto;
  margin-top: 2.5rem;
}
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--background);
  border-radius: 1rem;
  box-shadow: var(--shadow);
  min-width: 600px;
}
.comparison-table th, .comparison-table td {
  padding: 1rem 0.75rem;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.comparison-table th {
  background: var(--surface);
  color: var(--primary);
  font-size: 1.05rem;
  font-weight: 700;
}
.comparison-table tr:last-child td {
  border-bottom: none;
}
.comparison-table td {
  font-size: 1rem;
}

@media (max-width: 900px) {
  .pricing-cards-4 {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}
@media (max-width: 600px) {
  .pricing-section {
    padding: 2.5rem 0 1.5rem 0;
  }
  .pricing-card {
    padding: 1.25rem 0.75rem;
  }
  .comparison-table th, .comparison-table td {
    padding: 0.75rem 0.5rem;
    font-size: 0.95rem;
  }
}
[data-theme="dark"] .pricing-section {
  background: #23262f;
}
[data-theme="dark"] .pricing-card {
  background: #181a20;
  border-color: #2d2f36;
}
[data-theme="dark"] .pricing-card .price {
  color: var(--accent);
}
[data-theme="dark"] .comparison-table {
  background: #181a20;
}
[data-theme="dark"] .comparison-table th {
  background: #23262f;
  color: var(--accent);
}
[data-theme="dark"] .comparison-table td {
  color: #cbd5e1;
}

/* Contact Page */
.contact-section {
  background: var(--surface);
  padding: 4rem 0 3rem 0;
}
.contact-section h1 {
  text-align: center;
  margin-bottom: 1.5rem;
}
.contact-intro {
  text-align: center;
  font-size: 1.1rem;
  color: var(--text);
  margin-bottom: 2.5rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.contact-form {
  max-width: 480px;
  margin: 0 auto;
  background: var(--background);
  border-radius: 1.25rem;
  box-shadow: var(--shadow);
  padding: 2.5rem 2rem 2rem 2rem;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.contact-form label {
  font-weight: 600;
  color: var(--primary);
}
.contact-form input,
.contact-form textarea {
  font-family: inherit;
  font-size: 1rem;
  padding: 0.75em 1em;
  border-radius: 0.75rem;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.2s, box-shadow 0.2s;
  resize: vertical;
}
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary)22;
  outline: none;
}
.contact-form button {
  margin-top: 0.5rem;
}

@media (max-width: 600px) {
  .contact-section {
    padding: 2.5rem 0 1.5rem 0;
  }
  .contact-form {
    padding: 1.25rem 0.75rem;
  }
}
[data-theme="dark"] .contact-section {
  background: #23262f;
}
[data-theme="dark"] .contact-form {
  background: #181a20;
  border-color: #2d2f36;
}
[data-theme="dark"] .contact-form label {
  color: var(--accent);
}
[data-theme="dark"] .contact-form input,
[data-theme="dark"] .contact-form textarea {
  background: #23262f;
  color: #f3f4f6;
  border-color: #2d2f36;
}

/* Enhanced Auth Modal Overlay */
.auth-modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(30,41,59,0.55);
  backdrop-filter: blur(4px) saturate(1.2);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.auth-modal {
  background: linear-gradient(135deg, var(--surface) 80%, var(--primary) 120%);
  border-radius: 1.5rem;
  box-shadow: 0 12px 48px rgba(30,41,59,0.18);
  padding: 2.5rem 2rem 2rem 2rem;
  min-width: 320px;
  max-width: 95vw;
  width: 100%;
  max-width: 400px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  animation: modalIn 0.25s cubic-bezier(.4,1.4,.6,1) both;
  border: 1.5px solid var(--border);
}
.auth-modal-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  background: none;
  border: none;
  font-size: 2rem;
  color: var(--text);
  cursor: pointer;
  transition: color 0.2s;
  z-index: 2;
}
.auth-modal-close:hover, .auth-modal-close:focus {
  color: var(--primary);
}
.auth-modal-tabs {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 1.5rem;
  background: var(--background);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(30,41,59,0.06);
  padding: 0.25rem;
}
.auth-tab {
  background: none;
  border: none;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  padding: 0.5em 1.5em;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  position: relative;
  z-index: 1;
}
.auth-tab[aria-selected="true"] {
  background: linear-gradient(90deg, var(--primary), var(--accent));
  color: #fff;
  box-shadow: 0 2px 8px rgba(37,99,235,0.10);
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.auth-form label {
  font-weight: 600;
  color: var(--primary);
}
.auth-form input {
  font-family: inherit;
  font-size: 1rem;
  padding: 0.75em 1em;
  border-radius: 0.75rem;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.auth-form input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary)22;
  outline: none;
}
.auth-form button[type="submit"] {
  margin-top: 0.5rem;
}
.auth-switch-text {
  text-align: center;
  font-size: 0.98rem;
  color: var(--text);
  margin-top: 0.5rem;
}
.auth-switch {
  background: none;
  border: none;
  color: var(--primary);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  font-size: 1em;
  padding: 0;
}
.auth-switch:hover, .auth-switch:focus {
  color: var(--accent);
}

@media (max-width: 600px) {
  .auth-modal {
    padding: 1.25rem 0.5rem;
    min-width: 0;
    width: 98vw;
  }
}
[data-theme="dark"] .auth-modal {
  background: linear-gradient(135deg, #181a20 80%, var(--accent) 120%);
  border-color: #2d2f36;
}
[data-theme="dark"] .auth-modal-close {
  color: #f3f4f6;
}
[data-theme="dark"] .auth-modal-close:hover, [data-theme="dark"] .auth-modal-close:focus {
  color: var(--accent);
}
[data-theme="dark"] .auth-modal-tabs {
  background: #23262f;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}
[data-theme="dark"] .auth-tab {
  color: #f3f4f6;
}
[data-theme="dark"] .auth-tab[aria-selected="true"] {
  background: linear-gradient(90deg, var(--accent), var(--primary));
  color: #fff;
}
[data-theme="dark"] .auth-form label {
  color: var(--accent);
}
[data-theme="dark"] .auth-form input {
  background: #23262f;
  color: #f3f4f6;
  border-color: #2d2f36;
}
[data-theme="dark"] .auth-switch-text {
  color: #cbd5e1;
}
[data-theme="dark"] .auth-switch {
  color: var(--accent);
}

/* Auth Page (Sign In / Sign Up) */
.auth-page-section {
  background: var(--surface);
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 0 3rem 0;
}
.auth-page-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.auth-card {
  background: linear-gradient(135deg, var(--surface) 80%, var(--primary) 120%);
  border-radius: 1.5rem;
  box-shadow: 0 12px 48px rgba(30,41,59,0.18);
  padding: 2.5rem 2rem 2rem 2rem;
  min-width: 320px;
  max-width: 95vw;
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  border: 1.5px solid var(--border);
}
.auth-tabs {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 1.5rem;
  background: var(--background);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(30,41,59,0.06);
  padding: 0.25rem;
}
.auth-tab {
  background: none;
  border: none;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  padding: 0.5em 1.5em;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  position: relative;
  z-index: 1;
}
.auth-tab[aria-selected="true"] {
  background: linear-gradient(90deg, var(--primary), var(--accent));
  color: #fff;
  box-shadow: 0 2px 8px rgba(37,99,235,0.10);
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.auth-form label {
  font-weight: 600;
  color: var(--primary);
}
.auth-form input {
  font-family: inherit;
  font-size: 1rem;
  padding: 0.75em 1em;
  border-radius: 0.75rem;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.auth-form input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary)22;
  outline: none;
}
.auth-form button[type="submit"] {
  margin-top: 0.5rem;
}
@media (max-width: 600px) {
  .auth-card {
    padding: 1.25rem 0.5rem;
    min-width: 0;
    width: 98vw;
  }
}
[data-theme="dark"] .auth-page-section {
  background: #23262f;
}
[data-theme="dark"] .auth-card {
  background: linear-gradient(135deg, #181a20 80%, var(--accent) 120%);
  border-color: #2d2f36;
}
[data-theme="dark"] .auth-tabs {
  background: #23262f;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}
[data-theme="dark"] .auth-tab {
  color: #f3f4f6;
}
[data-theme="dark"] .auth-tab[aria-selected="true"] {
  background: linear-gradient(90deg, var(--accent), var(--primary));
  color: #fff;
}
[data-theme="dark"] .auth-form label {
  color: var(--accent);
}
[data-theme="dark"] .auth-form input {
  background: #23262f;
  color: #f3f4f6;
  border-color: #2d2f36;
}

/* Dashboard Page */
.dashboard-section {
  padding: 2rem 0;
  min-height: calc(100vh - 200px);
}

.dashboard-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.dashboard-header {
  margin-bottom: 2rem;
  text-align: center;
}

.dashboard-header h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: var(--text-primary);
}

.dashboard-plan {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1.5rem;
}

.plan-label {
  color: var(--text-secondary);
}

.plan-name {
  font-weight: 600;
  color: var(--text-primary);
}

.dashboard-upgrade {
  margin-left: 1rem;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.dashboard-card {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: var(--card-shadow);
  transition: transform 0.2s ease;
}

.dashboard-card:hover {
  transform: translateY(-2px);
}

.dashboard-card h2 {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  color: var(--text-primary);
}

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

.info-group label {
  display: block;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.info-group span {
  color: var(--text-primary);
  font-weight: 500;
}

.usage-bar-container {
  margin: 1rem 0;
  background: var(--bg-secondary);
  border-radius: 8px;
  height: 8px;
  overflow: hidden;
}

.usage-bar {
  height: 100%;
  background: var(--primary);
  transition: width 0.3s ease;
}

.usage-info {
  color: var(--text-secondary);
  font-size: 0.9rem;
  text-align: center;
}

.dashboard-generator {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: var(--card-shadow);
}

.dashboard-generator h2 {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  color: var(--text-primary);
}

.generator-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label {
  color: var(--text-primary);
  font-weight: 500;
}

.form-group input[type="file"],
.form-group select,
.form-group input[type="color"],
.form-group input[type="number"] {
  padding: 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-primary);
  color: var(--text-primary);
  transition: border-color 0.2s ease;
}

.form-group input[type="file"]:hover,
.form-group select:hover,
.form-group input[type="color"]:hover,
.form-group input[type="number"]:hover {
  border-color: var(--primary);
}

.help-text {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-top: 0.25rem;
}

.ass-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  padding: 1.5rem;
  background: var(--bg-secondary);
  border-radius: 0.75rem;
  border: 1px solid var(--border);
}

.ass-option-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.ass-option-row:last-child {
  margin-bottom: 0;
}

.ass-option-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  color: var(--text);
}

.ass-option-content {
  display: none;
  margin-top: 0.75rem;
  padding: 1rem;
  background: var(--surface);
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.ass-option-content.active {
  display: block;
}

/* Specific override for Text Color's ass-option-content to align left */
.ass-option-toggle:has(#custom-text-color-checkbox) .ass-option-content {
    width: fit-content; /* Adjust to fit content */
    justify-content: flex-start; /* Align content to the left within its new width */
}

/* Color Picker Styling */
.color-picker-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
}

.color-preview {
  width: 32px;
  height: 32px;
  border-radius: 0.375rem;
  border: 2px solid var(--border);
  transition: transform 0.2s ease, border-color 0.2s ease;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.color-preview:hover {
  transform: scale(1.05);
  border-color: var(--primary);
}

input[type="color"] {
  -webkit-appearance: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  background: transparent;
}

input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

input[type="color"]::-webkit-color-swatch {
  border: 2px solid var(--border);
  border-radius: 0.375rem;
  box-shadow: var(--shadow);
}

input[type="color"]:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Font Selection Styling */
.font-select-container {
  position: relative;
  margin-top: 0.5rem;
}

.font-select-container select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid var(--border);
  border-radius: 0.5rem;
  background: var(--surface);
  color: var(--text);
  font-size: 1rem;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-shadow: var(--shadow);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.font-select-container select:hover {
  border-color: var(--primary);
}

.font-select-container select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent)22;
}

.font-select-container::after {
  content: '';
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--text);
  pointer-events: none;
}

/* Dark mode adjustments */
[data-theme="dark"] .ass-options {
  background: var(--bg-secondary);
  border-color: var(--border);
}

[data-theme="dark"] .ass-option-content {
  background: var(--surface);
  border-color: var(--border);
}

[data-theme="dark"] input[type="color"]::-webkit-color-swatch {
  border-color: var(--border);
}

[data-theme="dark"] .font-select-container select {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

[data-theme="dark"] .font-select-container select:hover {
  border-color: var(--primary);
}

[data-theme="dark"] .font-select-container::after {
  border-top-color: var(--text);
}

/* Responsive Adjustments - FINAL ATTEMPT (refined for new HTML structure) */
@media (max-width: 768px) {
  .ass-custom-row {
    flex-direction: column; /* General rule for other ass-custom-row elements */
    align-items: flex-start;
    gap: 0.5rem;
  }

  .ass-custom-row input[type="number"],
  .ass-custom-row select {
    width: 100%;
    max-width: none;
  }

  /* Re-apply specific flex-direction and flex-basis rules for boolean options group within responsive view */
  .boolean-options-group .ass-custom-row:has(select#alignment) {
    flex-direction: column; /* Force internal content to stack vertically */
    flex-basis: 100%; /* Take full width on small screens */
    width: auto; /* Allow auto width based on flex-basis */
    min-width: 0; /* Allow to shrink completely if needed */
    max-width: none; /* Remove max-width constraint */
  }

  .boolean-options-group .toggle-switch-container {
    flex-direction: row; /* Force toggle and label to be horizontal */
    flex-basis: calc(50% - 15px); /* Roughly half width for two columns on small screens, accounting for gap */
    width: auto; /* Allow auto width based on flex-basis */
    min-width: 0; /* Allow to shrink completely if needed */
    max-width: none; /* Remove max-width constraint */
  }

  .auth-buttons {
    gap: 0.5rem;
  }

  .auth-buttons .btn {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
  }
}

/* Subtitle Preview Block */
.subtitle-preview {
  grid-column: 1 / -1;
  margin-top: 2rem;
  padding: 1.5rem;
  background: var(--surface);
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.subtitle-preview h3 {
  margin-bottom: 1rem;
  color: var(--text);
  font-size: 1.1rem;
}

.preview-container {
  background: #000;
  padding: 2rem;
  border-radius: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100px;
}

.preview-text {
  font-family: inherit;
  color: #fff;
  text-align: center;
  padding: 0.5rem 1rem;
  transition: all 0.2s ease;
}

/* Enhanced Dropdown Styling */
.font-select-container,
select {
  position: relative;
  width: 100%;
}

select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid var(--border);
  border-radius: 0.5rem;
  background: var(--surface);
  color: var(--text);
  font-size: 1rem;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-shadow: var(--shadow);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

select:hover {
  border-color: var(--primary);
}

select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent)22;
}

.font-select-container::after {
  content: '';
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--text);
  pointer-events: none;
  transition: border-top-color 0.2s ease;
}

.font-select-container:hover::after {
  border-top-color: var(--primary);
}

/* Dark mode adjustments */
[data-theme="dark"] .subtitle-preview {
  background: var(--surface);
  border-color: var(--border);
}

[data-theme="dark"] .preview-container {
  background: #000;
}

[data-theme="dark"] select {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

[data-theme="dark"] select:hover {
  border-color: var(--primary);
}

[data-theme="dark"] .font-select-container::after {
  border-top-color: var(--text);
}

[data-theme="dark"] .font-select-container:hover::after {
  border-top-color: var(--primary);
}

/* Color Picker Container */
.color-picker-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: var(--surface);
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.color-picker-container input[type="color"] {
  -webkit-appearance: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  background: transparent;
}

.color-picker-container input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.color-picker-container input[type="color"]::-webkit-color-swatch {
  border: 2px solid var(--border);
  border-radius: 0.375rem;
  box-shadow: var(--shadow);
}

.color-picker-container input[type="color"]:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.color-preview {
  width: 32px;
  height: 32px;
  border-radius: 0.375rem;
  border: 2px solid var(--border);
  transition: transform 0.2s ease, border-color 0.2s ease;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.color-preview:hover {
  transform: scale(1.05);
  border-color: var(--primary);
}

/* Dark mode color picker adjustments */
[data-theme="dark"] .color-picker-container {
  background: var(--surface);
  border-color: var(--border);
}

[data-theme="dark"] .color-picker-container input[type="color"]::-webkit-color-swatch {
  border-color: var(--border);
}

[data-theme="dark"] .color-preview {
  background: var(--surface);
  border-color: var(--border);
}

/* Generator Controls */
.generator-controls {
  display: none;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  position: relative;
  z-index: 10;
  width: 100%;
}

/* Progress Loader */
.progress-loader {
  width: 24px;
  height: 24px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.progress-loader svg {
  width: 100%;
  height: 100%;
  color: var(--primary);
}

.progress-loader svg.animate-spin {
  animation: spin 1s linear infinite;
}

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

/* Stop Button */
.stop-button {
  padding: 0.5rem 1rem;
  background: #ef4444;
  color: white;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.stop-button:hover {
  background: #dc2626;
  transform: translateY(-1px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.stop-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Dark mode adjustments */
[data-theme="dark"] .progress-loader svg {
  color: var(--accent);
}

[data-theme="dark"] .stop-button {
  background: #dc2626;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .stop-button:hover {
  background: #b91c1c;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

/* Auth Container */
.auth-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-left: auto;
}

.auth-buttons {
  display: flex;
  gap: 0.5rem;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--text);
}

.user-email {
  font-weight: 500;
}

.user-tier {
  font-size: 0.875rem;
  padding: 0.25rem 0.5rem;
  background: var(--accent);
  color: white;
  border-radius: 0.25rem;
}

/* Usage Container */
.usage-container {
  background: var(--card-bg);
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow);
}

.usage-bar-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.usage-bar {
  height: 0.5rem;
  background: var(--border);
  border-radius: 0.25rem;
  overflow: hidden;
}

.usage-progress {
  height: 100%;
  background: var(--primary);
  border-radius: 0.25rem;
  transition: width 0.3s ease;
}

.usage-progress.warning {
  background: #ef4444;
  animation: pulse 2s infinite;
}

.usage-text {
  font-size: 0.875rem;
  color: var(--text-secondary);
  text-align: right;
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}

/* Dark mode adjustments */
[data-theme="dark"] .user-tier {
  background: var(--primary);
}

[data-theme="dark"] .usage-container {
  background: var(--card-bg-dark);
}

[data-theme="dark"] .usage-bar {
  background: var(--border-dark);
}

/* Styles for the sign out button */
.btn-signout {
  background: linear-gradient(135deg, #ff4444, #cc0000);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.btn-signout:hover {
  background: linear-gradient(135deg, #ff6666, #ff0000);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
} 

/* Styles for the container of alignment, bold, italic, underline, strikeout */
.boolean-options-group {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap to the next line if space is limited */
    gap: 15px; /* Spacing between the cards */
    align-items: flex-start; /* Align items to the start of the cross axis (top) */
    justify-content: flex-start; /* Align items to the start of the main axis (left) */
    padding: 10px 0; /* Padding around the entire group */
    grid-column: 1 / -1; /* Make it span all available grid columns of its parent .ass-options */
}

/* Styling for the Alignment card */
.boolean-options-group .ass-custom-row:has(select#alignment) {
    display: flex; /* Make this card a flex container */
    flex-direction: row; /* Stacks label and select horizontally within this card */
    flex-grow: 0;
    flex-shrink: 1; /* Allow to shrink */
    flex-basis: 223px; /* Ideal width to match Background card */
    width: 223px; /* Explicit width */
    gap: 10px; /* Space between label and select */
    align-items: center; /* Align internal content to center vertically */
    /* Card-like styling */
    padding: 15px 15px; /* Adjust padding for consistent height */
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow);
    margin-bottom: 0; /* Remove default bottom margin */
}

/* Styling for the toggle-based option cards (Bold, Italic, Underline, Strikeout) */
.boolean-options-group .toggle-switch-container {
    display: flex; /* Make each toggle container a flex container */
    flex-direction: row; /* Ensures toggle and label are horizontal within this card */
    flex-grow: 0;
    flex-shrink: 1; /* Allow to shrink */
    flex-basis: 130px; /* Ideal width */
    justify-content: center; /* Centers the content (toggle and label) horizontally within the card */
    align-items: center; /* Centers content vertically */
    gap: 8px; /* Space between toggle and label */
    /* Card-like styling */
    padding: 15px 30px; /* Increased padding */
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow);
    margin-bottom: 0; /* Remove default bottom margin */
} 

/* Style for font preview options */
.font-preview {
  font-family: inherit;
}

.font-preview.times-new-roman {
  font-family: "Times New Roman", Times, serif;
}

.font-preview.arial {
  font-family: Arial, sans-serif;
}

.font-preview.helvetica {
  font-family: Helvetica, Arial, sans-serif;
}

.font-preview.verdana {
  font-family: Verdana, sans-serif;
}

.font-preview.courier {
  font-family: "Courier New", Courier, monospace;
}

.font-preview.georgia {
  font-family: Georgia, serif;
}

.font-preview.tahoma {
  font-family: Tahoma, sans-serif;
}

.font-preview.trebuchet {
  font-family: "Trebuchet MS", sans-serif;
}

.font-preview.palatino {
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}

.font-preview.garamond {
  font-family: Garamond, serif;
}

.font-preview.segoe-ui {
  font-family: "Segoe UI", sans-serif;
}

.font-preview.calibri {
  font-family: Calibri, sans-serif;
}

.font-preview.candara {
  font-family: Candara, sans-serif;
}

.font-preview.corbel {
  font-family: Corbel, sans-serif;
}

.font-preview.consolas {
  font-family: Consolas, monospace;
}

.font-preview.constantia {
  font-family: Constantia, serif;
}

.font-preview.cambria {
  font-family: Cambria, serif;
}

.font-preview.comic-sans-ms {
  font-family: "Comic Sans MS", cursive;
}

.font-preview.sitka {
  font-family: Sitka, serif;
}

.font-preview.leelawadee-ui {
  font-family: "Leelawadee UI", sans-serif;
}
.font-preview.simsun-extg {
  font-family: "Simsun ExtG", sans-serif;
}
.font-preview.simsun {
  font-family: Simsun, sans-serif;
}
.font-preview.modern {
  font-family: Modern, monospace;
}
.font-preview.script {
  font-family: Script, cursive;
}
.font-preview.yu-gothic-light {
  font-family: "Yu Gothic Light", sans-serif;
}
.font-preview.framd {
  font-family: Framd, sans-serif;
}
.font-preview.segoe-script {
  font-family: "Segoe Script", cursive;
}
/* Further Additional System/User-Provided Fonts (Batch 1 CSS) */
.font-preview.rog-fonts {
  font-family: "ROG Fonts", sans-serif;
}
.font-preview.sabertooth {
  font-family: Sabertooth, sans-serif;
}
.font-preview.univox {
  font-family: Univox, sans-serif;
}
.font-preview.antihero {
  font-family: Antihero, sans-serif;
}
.font-preview.euphorigenic {
  font-family: Euphorigenic, cursive;
}
.font-preview.world-of-water {
  font-family: "World of Water", cursive;
}
.font-preview.xirod {
  font-family: Xirod, sans-serif;
}
.font-preview.agency-fb {
  font-family: "Agency FB", sans-serif;
}
.font-preview.algerian {
  font-family: Algerian, sans-serif;
}
.font-preview.book-antiqua {
  font-family: "Book Antiqua", serif;
}
.font-preview.bahnschrift {
  font-family: Bahnschrift, sans-serif;
}
.font-preview.baskerville-old-face {
  font-family: "Baskerville Old Face", serif;
}
.font-preview.bauhaus-93 {
  font-family: "Bauhaus 93", sans-serif;
}
.font-preview.bell-mt {
  font-family: "Bell MT", serif;
}
.font-preview.bernhard-fashion {
  font-family: "Bernhard Fashion", serif;
}
.font-preview.bodoni-mt {
  font-family: "Bodoni MT", serif;
}
.font-preview.berlin-sans-fb {
  font-family: "Berlin Sans FB", sans-serif;
}
.font-preview.broadway {
  font-family: Broadway, cursive;
}
.font-preview.brush-script-mt {
  font-family: "Brush Script MT", cursive;
}
.font-preview.caladea {
  font-family: Caladea, serif;
}
.font-preview.carlito {
  font-family: Carlito, sans-serif;
}
.font-preview.cascadia-code {
  font-family: "Cascadia Code", monospace;
}
.font-preview.cascadia-mono {
  font-family: "Cascadia Mono", monospace;
}
.font-preview.castellar {
  font-family: Castellar, serif;
}
.font-preview.century-schoolbook {
  font-family: "Century Schoolbook", serif;
}
.font-preview.centaur {
  font-family: Centaur, serif;
}
.font-preview.century-gothic {
  font-family: "Century Gothic", sans-serif;
}
.font-preview.cgf-locust-resistance {
  font-family: "CGF Locust Resistance", sans-serif;
}
.font-preview.chiller {
  font-family: Chiller, cursive;
}
.font-preview.colonna-mt {
  font-family: "Colonna MT", serif;
}
.font-preview.cooper-black {
  font-family: "Cooper Black", sans-serif;
}
.font-preview.copperplate-gothic {
  font-family: "Copperplate Gothic", sans-serif;
}
.font-preview.curlz-mt {
  font-family: "Curlz MT", cursive;
}
.font-preview.dejavu-sans {
  font-family: "DejaVu Sans", sans-serif;
}
.font-preview.dejavu-sans-condensed {
  font-family: "DejaVu Sans Condensed", sans-serif;
}
.font-preview.dejavu-sans-mono {
  font-family: "DejaVu Sans Mono", monospace;
}
.font-preview.dejavu-serif {
  font-family: "DejaVu Serif", serif;
}
.font-preview.ebrima {
  font-family: Ebrima, sans-serif;
}
.font-preview.elephant {
  font-family: Elephant, serif;
}
.font-preview.engravers-mt {
  font-family: "Engravers MT", serif;
}
.font-preview.eras-itc {
  font-family: "Eras ITC", sans-serif;
}
.font-preview.felix-titling {
  font-family: "Felix Titling", serif;
}
.font-preview.fira-mono {
  font-family: "Fira Mono", monospace;
}
.font-preview.forte {
  font-family: Forte, cursive;
}
.font-preview.franklin-gothic {
  font-family: "Franklin Gothic", sans-serif;
}
.font-preview.freestyle-script {
  font-family: "Freestyle Script", cursive;
}
.font-preview.french-script-mt {
  font-family: "French Script MT", cursive;
}
.font-preview.lucida-fax {
  font-family: "Lucida Fax", serif;
}
.font-preview.lucida-handwriting {
  font-family: "Lucida Handwriting", cursive;
}
.font-preview.lucida-sans {
  font-family: "Lucida Sans", sans-serif;
}
.font-preview.lucida-bright {
  font-family: "Lucida Bright", serif;
}
.font-preview.lucida-calligraphy {
  font-family: "Lucida Calligraphy", cursive;
}
.font-preview.lucida-console {
  font-family: "Lucida Console", monospace;
}
.font-preview.lucida-sans-typewriter {
  font-family: "Lucida Sans Typewriter", monospace;
}
.font-preview.gabriola {
  font-family: Gabriola, cursive;
}
.font-preview.gadugi {
  font-family: Gadugi, sans-serif;
}
.font-preview.genera-basic {
  font-family: "Genera Basic", sans-serif;
}
.font-preview.genera-book-basic {
  font-family: "Genera Book Basic", serif;
}
.font-preview.gigi {
  font-family: Gigi, cursive;
}
.font-preview.gill-sans-mt {
  font-family: "Gill Sans MT", sans-serif;
}
.font-preview.goudy-old-style {
  font-family: "Goudy Old Style", serif;
}
.font-preview.goudy-stout {
  font-family: "Goudy Stout", sans-serif;
}
.font-preview.harlow-solid-italic {
  font-family: "Harlow Solid Italic", cursive;
}
.font-preview.harrington {
  font-family: Harrington, cursive;
}
.font-preview.hattenschweiler {
  font-family: Hattenschweiler, sans-serif;
}
.font-preview.himalaya {
  font-family: Himalaya, sans-serif;
}
.font-preview.impact {
  font-family: Impact, sans-serif;
}
.font-preview.imprint-mt-shadow {
  font-family: "Imprint MT Shadow", serif;
}
.font-preview.indie-flower {
  font-family: "Indie Flower", cursive;
}
.font-preview.informal-roman {
  font-family: "Informal Roman", cursive;
}
.font-preview.ink-free {
  font-family: "Ink Free", cursive;
}
.font-preview.itc-avant-garde-gothic {
  font-family: "ITC Avant Garde Gothic", sans-serif;
}
.font-preview.itc-edwardian-script {
  font-family: "ITC Edwardian Script", cursive;
}
.font-preview.itc-kristen {
  font-family: "ITC Kristen", cursive;
}
.font-preview.jokerman {
  font-family: Jokerman, cursive;
}
.font-preview.juice-itc {
  font-family: "Juice ITC", cursive;
}
.font-preview.kunstler-script {
  font-family: "Kunstler Script", cursive;
}
.font-preview.latin-modern-math {
  font-family: "Latin Modern Math", serif;
}
.font-preview.magneto {
  font-family: Magneto, sans-serif;
}
.font-preview.maiandra-gd {
  font-family: "Maiandra GD", sans-serif;
}
.font-preview.malgun-gothic {
  font-family: "Malgun Gothic", sans-serif;
}
.font-preview.matura-mt-script-capitals {
  font-family: "Matura MT Script Capitals", cursive;
}
.font-preview.microsoft-jhenghei {
  font-family: "Microsoft JhengHei", sans-serif;
}
.font-preview.mingliu {
  font-family: MingLiU, sans-serif;
}
.font-preview.mistral {
  font-family: Mistral, cursive;
}
.font-preview.myanmar-text {
  font-family: "Myanmar Text", sans-serif;
}
.font-preview.niagara-engraved {
  font-family: "Niagara Engraved", sans-serif;
}
.font-preview.niagara-solid {
  font-family: "Niagara Solid", sans-serif;
}
.font-preview.nirmala-ui {
  font-family: "Nirmala UI", sans-serif;
}
.font-preview.ntailu {
  font-family: Ntailu, sans-serif;
}
.font-preview.ocr-a-extended {
  font-family: "OCR A Extended", monospace;
}
.font-preview.old-english-text-mt {
  font-family: "Old English Text MT", serif;
}
.font-preview.onyx {
  font-family: Onyx, serif;
}
.font-preview.palatino-script {
  font-family: "Palatino Script", cursive;
}
.font-preview.papyrus {
  font-family: Papyrus, cursive;
}
.font-preview.parchment {
  font-family: Parchment, cursive;
}
.font-preview.perpetua {
  font-family: Perpetua, serif;
}
.font-preview.phagspa {
  font-family: Phagspa, sans-serif;
}
.font-preview.playbill {
  font-family: Playbill, sans-serif;
}
.font-preview.poor-richard {
  font-family: "Poor Richard", serif;
}
.font-preview.pristina {
  font-family: Pristina, cursive;
}
.font-preview.rage-italic {
  font-family: "Rage Italic", cursive;
}
.font-preview.rockwell {
  font-family: Rockwell, serif;
}
.font-preview.sans-serif-collection {
  font-family: "Sans Serif Collection", sans-serif;
}
.font-preview.script-mt-bold {
  font-family: "Script MT Bold", cursive;
}
.font-preview.sector {
  font-family: Sector, sans-serif;
}
.font-preview.showcard-gothic {
  font-family: "Showcard Gothic", cursive;
}
.font-preview.snap-itc {
  font-family: "Snap ITC", sans-serif;
}
.font-preview.sylfaen {
  font-family: Sylfaen, serif;
}
.font-preview.viner-hand-itc {
  font-family: "Viner Hand ITC", cursive;
}
.font-preview.vivaldi {
  font-family: Vivaldi, cursive;
}
.font-preview.vladimir-script {
  font-family: "Vladimir Script", cursive;
}
.font-preview.yu-gothic {
  font-family: "Yu Gothic", sans-serif;
} 

/* Styles for font options in the dropdown */
.font-option {
  font-size: 0.9em; /* Slightly smaller for dropdown */
  padding: 4px 8px; /* Some padding for better appearance */
  color: var(--text); /* Ensure text color matches theme */
}

/* Dark mode specific style for font options */
[data-theme="dark"] .font-option {
  color: #000000; /* Force black text in dark mode dropdown for visibility */
}

.font-preview.agency-fb, .font-option.agency-fb {
  font-family: "Agency FB", sans-serif;
}
.font-preview.algerian, .font-option.algerian {
  font-family: Algerian, sans-serif;
}
.font-preview.antihero, .font-option.antihero {
  font-family: Antihero, sans-serif;
}
.font-preview.arial, .font-option.arial {
  font-family: Arial, sans-serif;
}
.font-preview.arial-black, .font-option.arial-black {
  font-family: "Arial Black", sans-serif;
}
.font-preview.arial-narrow, .font-option.arial-narrow {
  font-family: "Arial Narrow", sans-serif;
}
.font-preview.arial-rounded-mt-bold, .font-option.arial-rounded-mt-bold {
  font-family: "Arial Rounded MT Bold", sans-serif;
}
.font-preview.bahnschrift, .font-option.bahnschrift {
  font-family: Bahnschrift, sans-serif;
}
.font-preview.baskerville-old-face, .font-option.baskerville-old-face {
  font-family: "Baskerville Old Face", serif;
}
.font-preview.bauhaus-93, .font-option.bauhaus-93 {
  font-family: "Bauhaus 93", sans-serif;
}
.font-preview.bell-mt, .font-option.bell-mt {
  font-family: "Bell MT", serif;
}
.font-preview.berlin-sans-fb, .font-option.berlin-sans-fb {
  font-family: "Berlin Sans FB", sans-serif;
}
.font-preview.bernhard-fashion, .font-option.bernhard-fashion {
  font-family: "BernhardFashion", cursive;
}
.font-preview.bodoni-mt, .font-option.bodoni-mt {
  font-family: "Bodoni MT", serif;
}
.font-preview.bodoni-mt-poster-compressed, .font-option.bodoni-mt-poster-compressed {
  font-family: "Bodoni MT Poster Compressed", serif;
}
.font-preview.book-antiqua, .font-option.book-antiqua {
  font-family: "Book Antiqua", serif;
}
.font-preview.bookman-old-style, .font-option.bookman-old-style {
  font-family: "Bookman Old Style", serif;
}
.font-preview.broadway, .font-option.broadway {
  font-family: Broadway, cursive;
}
.font-preview.brush-script-mt, .font-option.brush-script-mt {
  font-family: "Brush Script MT", cursive;
}
.font-preview.cabin, .font-option.cabin {
  font-family: Cabin, sans-serif;
}
.font-preview.caladea, .font-option.caladea {
  font-family: Caladea, sans-serif;
}
.font-preview.calibri, .font-option.calibri {
  font-family: Calibri, sans-serif;
}
.font-preview.california-fb, .font-option.california-fb {
  font-family: "California FB", sans-serif;
}
.font-preview.calisto-mt, .font-option.calisto-mt {
  font-family: "Calisto MT", serif;
}
.font-preview.cambria, .font-option.cambria {
  font-family: Cambria, serif;
}
.font-preview.candara, .font-option.candara {
  font-family: Candara, sans-serif;
}
.font-preview.carlito, .font-option.carlito {
  font-family: Carlito, sans-serif;
}
.font-preview.cascadia-code, .font-option.cascadia-code {
  font-family: "Cascadia Code", monospace;
}
.font-preview.cascadia-mono, .font-option.cascadia-mono {
  font-family: "Cascadia Mono", monospace;
}
.font-preview.castellar, .font-option.castellar {
  font-family: Castellar, serif;
}
.font-preview.centaur, .font-option.centaur {
  font-family: Centaur, serif;
}
.font-preview.century, .font-option.century {
  font-family: Century, serif;
}
.font-preview.century-gothic, .font-option.century-gothic {
  font-family: "Century Gothic", sans-serif;
}
.font-preview.century-schoolbook, .font-option.century-schoolbook {
  font-family: "Century Schoolbook", serif;
}
.font-preview.cgf-locust-resistance, .font-option.cgf-locust-resistance {
  font-family: "CGF Locust Resistance", sans-serif;
}
.font-preview.chiller, .font-option.chiller {
  font-family: Chiller, cursive;
}
.font-preview.colonna-mt, .font-option.colonna-mt {
  font-family: "Colonna MT", serif;
}
.font-preview.comic-sans-ms, .font-option.comic-sans-ms {
  font-family: "Comic Sans MS", cursive;
}
.font-preview.consolas, .font-option.consolas {
  font-family: Consolas, monospace;
}
.font-preview.constantia, .font-option.constantia {
  font-family: Constantia, serif;
}
.font-preview.cooper-black, .font-option.cooper-black {
  font-family: "Cooper Black", sans-serif;
}
.font-preview.copperplate-gothic, .font-option.copperplate-gothic {
  font-family: "Copperplate Gothic", sans-serif;
}
.font-preview.corbel, .font-option.corbel {
  font-family: Corbel, sans-serif;
}
.font-preview.courier, .font-option.courier {
  font-family: Courier, monospace;
}
.font-preview.courier-new, .font-option.courier-new {
  font-family: "Courier New", monospace;
}
.font-preview.curlz-mt, .font-option.curlz-mt {
  font-family: "Curlz MT", cursive;
}
.font-preview.dejavu-sans, .font-option.dejavu-sans {
  font-family: "DejaVu Sans", sans-serif;
}
.font-preview.dejavu-sans-condensed, .font-option.dejavu-sans-condensed {
  font-family: "DejaVu Sans Condensed", sans-serif;
}
.font-preview.dejavu-sans-mono, .font-option.dejavu-sans-mono {
  font-family: "DejaVu Sans Mono", monospace;
}
.font-preview.dejavu-serif, .font-option.dejavu-serif {
  font-family: "DejaVu Serif", serif;
}
.font-preview.dejavu-serif-condensed, .font-option.dejavu-serif-condensed {
  font-family: "DejaVu Serif Condensed", serif;
}
.font-preview.dosis, .font-option.dosis {
  font-family: Dosis, sans-serif;
}
.font-preview.dubai, .font-option.dubai {
  font-family: Dubai, sans-serif;
}
.font-preview.ebrima, .font-option.ebrima {
  font-family: Ebrima, sans-serif;
}
.font-preview.elephant, .font-option.elephant {
  font-family: Elephant, serif;
}
.font-preview.engravers-mt, .font-option.engravers-mt {
  font-family: "Engravers MT", serif;
}
.font-preview.eras-itc, .font-option.eras-itc {
  font-family: "Eras ITC", sans-serif;
}
.font-preview.euphorigenic, .font-option.euphorigenic {
  font-family: Euphorigenic, cursive;
}
.font-preview.felix-titling, .font-option.felix-titling {
  font-family: "Felix Titling", serif;
}
.font-preview.fira-mono, .font-option.fira-mono {
  font-family: "Fira Mono", monospace;
}
.font-preview.fira-sans, .font-option.fira-sans {
  font-family: "Fira Sans", sans-serif;
}
.font-preview.footlight-mt-light, .font-option.footlight-mt-light {
  font-family: "Footlight MT Light", sans-serif;
}
.font-preview.forte, .font-option.forte {
  font-family: Forte, cursive;
}
.font-preview.framd, .font-option.framd {
  font-family: Framd, sans-serif;
}
.font-preview.franklin-gothic, .font-option.franklin-gothic {
  font-family: "Franklin Gothic", sans-serif;
}
.font-preview.franklin-gothic-book, .font-option.franklin-gothic-book {
  font-family: "Franklin Gothic Book", sans-serif;
}
.font-preview.freestyle-script, .font-option.freestyle-script {
  font-family: "Freestyle Script", cursive;
}
.font-preview.french-script-mt, .font-option.french-script-mt {
  font-family: "French Script MT", cursive;
}
.font-preview.gabriola, .font-option.gabriola {
  font-family: Gabriola, cursive;
}
.font-preview.gadugi, .font-option.gadugi {
  font-family: Gadugi, sans-serif;
}
.font-preview.garamond, .font-option.garamond {
  font-family: Garamond, serif;
}
.font-preview.genera-basic, .font-option.genera-basic {
  font-family: "Genera Basic", sans-serif;
}
.font-preview.genera-book-basic, .font-option.genera-book-basic {
  font-family: "Genera Book Basic", sans-serif;
}
.font-preview.georgia, .font-option.georgia {
  font-family: Georgia, serif;
}
.font-preview.gigi, .font-option.gigi {
  font-family: Gigi, cursive;
}
.font-preview.gill-sans-mt, .font-option.gill-sans-mt {
  font-family: "Gill Sans MT", sans-serif;
}
.font-preview.gill-sans-ultra-bold, .font-option.gill-sans-ultra-bold {
  font-family: "Gill Sans Ultra Bold", sans-serif;
}
.font-preview.goudy-old-style, .font-option.goudy-old-style {
  font-family: "Goudy Old Style", serif;
}
.font-preview.goudy-stout, .font-option.goudy-stout {
  font-family: "Goudy Stout", sans-serif;
}
.font-preview.harlow-solid-italic, .font-option.harlow-solid-italic {
  font-family: "Harlow Solid Italic", cursive;
}
.font-preview.harrington, .font-option.harrington {
  font-family: Harrington, cursive;
}
.font-preview.hattenschweiler, .font-option.hattenschweiler {
  font-family: Hattenschweiler, sans-serif;
}
.font-preview.helvetica, .font-option.helvetica {
  font-family: Helvetica, sans-serif;
}
.font-preview.himalaya, .font-option.himalaya {
  font-family: Himalaya, sans-serif;
}
.font-preview.impact, .font-option.impact {
  font-family: Impact, sans-serif;
}
.font-preview.imprint-mt-shadow, .font-option.imprint-mt-shadow {
  font-family: "Imprint MT Shadow", serif;
}
.font-preview.indie-flower, .font-option.indie-flower {
  font-family: "Indie Flower", cursive;
}
.font-preview.informal-roman, .font-option.informal-roman {
  font-family: "Informal Roman", cursive;
}
.font-preview.ink-free, .font-option.ink-free {
  font-family: "Ink Free", cursive;
}
.font-preview.itc-avant-garde-gothic, .font-option.itc-avant-garde-gothic {
  font-family: "ITC Avant Garde Gothic", sans-serif;
}
.font-preview.itc-edwardian-script, .font-option.itc-edwardian-script {
  font-family: "ITC Edwardian Script", cursive;
}
.font-preview.itc-kristen, .font-option.itc-kristen {
  font-family: "ITC Kristen", cursive;
}
.font-preview.jokerman, .font-option.jokerman {
  font-family: Jokerman, cursive;
}
.font-preview.juice-itc, .font-option.juice-itc {
  font-family: "Juice ITC", cursive;
}
.font-preview.kunstler-script, .font-option.kunstler-script {
  font-family: "Kunstler Script", cursive;
}
.font-preview.lato, .font-option.lato {
  font-family: Lato, sans-serif;
}
.font-preview.latin-modern-math, .font-option.latin-modern-math {
  font-family: "Latin Modern Math", serif;
}
.font-preview.leelawadee-ui, .font-option.leelawadee-ui {
  font-family: "Leelawadee UI", sans-serif;
}
.font-preview.lora, .font-option.lora {
  font-family: Lora, serif;
}
.font-preview.lucida-bright, .font-option.lucida-bright {
  font-family: "Lucida Bright", serif;
}
.font-preview.lucida-calligraphy, .font-option.lucida-calligraphy {
  font-family: "Lucida Calligraphy", cursive;
}
.font-preview.lucida-console, .font-option.lucida-console {
  font-family: "Lucida Console", monospace;
}
.font-preview.lucida-fax, .font-option.lucida-fax {
  font-family: "Lucida Fax", serif;
}
.font-preview.lucida-handwriting, .font-option.lucida-handwriting {
  font-family: "Lucida Handwriting", cursive;
}
.font-preview.lucida-sans, .font-option.lucida-sans {
  font-family: "Lucida Sans", sans-serif;
}
.font-preview.lucida-sans-typewriter, .font-option.lucida-sans-typewriter {
  font-family: "Lucida Sans Typewriter", monospace;
}
.font-preview.magneto, .font-option.magneto {
  font-family: Magneto, sans-serif;
}
.font-preview.maiandra-gd, .font-option.maiandra-gd {
  font-family: "Maiandra GD", sans-serif;
}
.font-preview.malgun-gothic, .font-option.malgun-gothic {
  font-family: "Malgun Gothic", sans-serif;
}
.font-preview.matura-mt-script-capitals, .font-option.matura-mt-script-capitals {
  font-family: "Matura MT Script Capitals", cursive;
}
.font-preview.merriweather, .font-option.merriweather {
  font-family: Merriweather, serif;
}
.font-preview.microsoft-jhenghei, .font-option.microsoft-jhenghei {
  font-family: "Microsoft JhengHei", sans-serif;
}
.font-preview.mingliu, .font-option.mingliu {
  font-family: MingLiU, sans-serif;
}
.font-preview.mistral, .font-option.mistral {
  font-family: Mistral, cursive;
}
.font-preview.modern, .font-option.modern {
  font-family: Modern, sans-serif;
}
.font-preview.montserrat, .font-option.montserrat {
  font-family: Montserrat, sans-serif;
}
.font-preview.myanmar-text, .font-option.myanmar-text {
  font-family: "Myanmar Text", sans-serif;
}
.font-preview.niagara-engraved, .font-option.niagara-engraved {
  font-family: "Niagara Engraved", cursive;
}
.font-preview.niagara-solid, .font-option.niagara-solid {
  font-family: "Niagara Solid", cursive;
}
.font-preview.nirmala-ui, .font-option.nirmala-ui {
  font-family: "Nirmala UI", sans-serif;
}
.font-preview.noto-sans, .font-option.noto-sans {
  font-family: "Noto Sans", sans-serif;
}
.font-preview.ntailu, .font-option.ntailu {
  font-family: Ntailu, sans-serif;
}
.font-preview.nunito, .font-option.nunito {
  font-family: Nunito, sans-serif;
}
.font-preview.ocr-a-extended, .font-option.ocr-a-extended {
  font-family: "OCR A Extended", monospace;
}
.font-preview.old-english-text-mt, .font-option.old-english-text-mt {
  font-family: "Old English Text MT", serif;
}
.font-preview.onyx, .font-option.onyx {
  font-family: Onyx, cursive;
}
.font-preview.open-sans, .font-option.open-sans {
  font-family: "Open Sans", sans-serif;
}
.font-preview.oswald, .font-option.oswald {
  font-family: Oswald, sans-serif;
}
.font-preview.outline, .font-option.outline {
  font-family: Outline, sans-serif;
}
.font-preview.oxygen, .font-option.oxygen {
  font-family: Oxygen, sans-serif;
}
.font-preview.palatino-linotype, .font-option.palatino-linotype {
  font-family: "Palatino Linotype", serif;
}
.font-preview.palatino-script, .font-option.palatino-script {
  font-family: "Palatino Script", cursive;
}
.font-preview.papyrus, .font-option.papyrus {
  font-family: Papyrus, cursive;
}
.font-preview.parchment, .font-option.parchment {
  font-family: Parchment, cursive;
}
.font-preview.perpetua, .font-option.perpetua {
  font-family: Perpetua, serif;
}
.font-preview.phagspa, .font-option.phagspa {
  font-family: Phagspa, sans-serif;
}
.font-preview.playbill, .font-option.playbill {
  font-family: Playbill, sans-serif;
}
.font-preview.playfair-display, .font-option.playfair-display {
  font-family: "Playfair Display", serif;
}
.font-preview.poppins, .font-option.poppins {
  font-family: Poppins, sans-serif;
}
.font-preview.poor-richard, .font-option.poor-richard {
  font-family: "Poor Richard", cursive;
}
.font-preview.pristina, .font-option.pristina {
  font-family: Pristina, cursive;
}
.font-preview.pt-sans, .font-option.pt-sans {
  font-family: "PT Sans", sans-serif;
}
.font-preview.quicksand, .font-option.quicksand {
  font-family: Quicksand, sans-serif;
}
.font-preview.rage-italic, .font-option.rage-italic {
  font-family: "Rage Italic", cursive;
}
.font-preview.raleway, .font-option.raleway {
  font-family: Raleway, sans-serif;
}
.font-preview.ravie, .font-option.ravie {
  font-family: Ravie, cursive;
}
.font-preview.roboto, .font-option.roboto {
  font-family: Roboto, sans-serif;
}
.font-preview.rockwell, .font-option.rockwell {
  font-family: Rockwell, serif;
}
.font-preview.rog-fonts, .font-option.rog-fonts {
  font-family: "ROG Fonts", sans-serif;
}
.font-preview.sabertooth, .font-option.sabertooth {
  font-family: Sabertooth, sans-serif;
}
.font-preview.sans-serif-collection, .font-option.sans-serif-collection {
  font-family: "Sans Serif Collection", sans-serif;
}
.font-preview.script, .font-option.script {
  font-family: Script, cursive;
}
.font-preview.script-mt-bold, .font-option.script-mt-bold {
  font-family: "Script MT Bold", cursive;
}
.font-preview.sector, .font-option.sector {
  font-family: Sector, sans-serif;
}
.font-preview.segoe-icons, .font-option.segoe-icons {
  font-family: "Segoe Icons", sans-serif;
}
.font-preview.segoe-print, .font-option.segoe-print {
  font-family: "Segoe Print", cursive;
}
.font-preview.segoe-script, .font-option.segoe-script {
  font-family: "Segoe Script", cursive;
}
.font-preview.segoe-ui, .font-option.segoe-ui {
  font-family: "Segoe UI", sans-serif;
}
.font-preview.segoe-ui-emoji, .font-option.segoe-ui-emoji {
  font-family: "Segoe UI Emoji", sans-serif;
}
.font-preview.segoe-ui-symbol, .font-option.segoe-ui-symbol {
  font-family: "Segoe UI Symbol", sans-serif;
}
.font-preview.segoe-ui-variable, .font-option.segoe-ui-variable {
  font-family: "Segoe UI Variable", sans-serif;
}
.font-preview.showcard-gothic, .font-option.showcard-gothic {
  font-family: "Showcard Gothic", cursive;
}
.font-preview.simsun, .font-option.simsun {
  font-family: Simsun, sans-serif;
}
.font-preview.simsun-extg, .font-option.simsun-extg {
  font-family: "Simsun ExtG", sans-serif;
}
.font-preview.sitka, .font-option.sitka {
  font-family: Sitka, sans-serif;
}
.font-preview.snap-itc, .font-option.snap-itc {
  font-family: "Snap ITC", cursive;
}
.font-preview.source-sans-pro, .font-option.source-sans-pro {
  font-family: "Source Sans Pro", sans-serif;
}
.font-preview.stencil, .font-option.stencil {
  font-family: Stencil, sans-serif;
}
.font-preview.strikeout, .font-option.strikeout {
  font-family: Strikeout, sans-serif;
}
.font-preview.sylfaen, .font-option.sylfaen {
  font-family: Sylfaen, serif;
}
.font-preview.tahoma, .font-option.tahoma {
  font-family: Tahoma, sans-serif;
}
.font-preview.tempus-sans-itc, .font-option.tempus-sans-itc {
  font-family: "Tempus Sans ITC", cursive;
}
.font-preview.times-new-roman, .font-option.times-new-roman {
  font-family: "Times New Roman", serif;
}
.font-preview.trebuchet-ms, .font-option.trebuchet-ms {
  font-family: "Trebuchet MS", sans-serif;
}
.font-preview.ubuntu, .font-option.ubuntu {
  font-family: Ubuntu, sans-serif;
}
.font-preview.underline, .font-option.underline {
  font-family: Underline, sans-serif;
}
.font-preview.univox, .font-option.univox {
  font-family: Univox, sans-serif;
}
.font-preview.verdana, .font-option.verdana {
  font-family: Verdana, sans-serif;
}
.font-preview.viner-hand-itc, .font-option.viner-hand-itc {
  font-family: "Viner Hand ITC", cursive;
}
.font-preview.vivaldi, .font-option.vivaldi {
  font-family: Vivaldi, cursive;
}
.font-preview.vladimir-script, .font-option.vladimir-script {
  font-family: "Vladimir Script", cursive;
}
.font-preview.world-of-water, .font-option.world-of-water {
  font-family: "World of Water", sans-serif;
}
.font-preview.xirod, .font-option.xirod {
  font-family: Xirod, sans-serif;
}
.font-preview.yu-gothic, .font-option.yu-gothic {
  font-family: "Yu Gothic", sans-serif;
}
.font-preview.yu-gothic-light, .font-option.yu-gothic-light {
  font-family: "Yu Gothic Light", sans-serif;
}

/* Download Progress Styles */
.download-progress {
  width: 100%;
  margin: 1rem 0;
  padding: 1rem;
  background: var(--surface);
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.download-progress .progress-container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.download-progress .progress-bar {
  width: 100%;
  height: 0.5rem;
  background: var(--border);
  border-radius: 0.25rem;
  overflow: hidden;
}

.download-progress .progress-bar-inner {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: 0.25rem;
  transition: width 0.3s ease;
}

.download-progress .progress-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  text-align: center;
  margin: 0;
}

.download-progress .file-size-info {
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-align: center;
  margin: 0;
}

/* Dark mode adjustments */
[data-theme="dark"] .download-progress {
  background: var(--surface-dark);
  border-color: var(--border-dark);
}

[data-theme="dark"] .download-progress .progress-bar {
  background: var(--border-dark);
}

[data-theme="dark"] .download-progress .progress-label {
  color: var(--text-dark);
}

[data-theme="dark"] .download-progress .file-size-info {
  color: var(--text-secondary-dark);
}

/* Tooltip Styles */
.tooltip {
  position: relative;
  display: inline-block;
  cursor: help;
}

.tooltip .tooltip-text {
  visibility: hidden;
  width: 200px;
  background: var(--surface);
  color: var(--text);
  text-align: center;
  border-radius: 6px;
  padding: 12px;
  position: absolute;
  z-index: 1000;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  font-size: 0.9rem;
  line-height: 1.4;
}

.tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.tooltip .tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: var(--surface) transparent transparent transparent;
}

/* Dark mode tooltip adjustments */
[data-theme="dark"] .tooltip .tooltip-text {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

[data-theme="dark"] .tooltip .tooltip-text::after {
  border-color: var(--surface) transparent transparent transparent;
}

/* Timeout Popup Styles */
.timeout-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: fadeIn 0.3s ease;
}

.timeout-content {
  background: var(--surface);
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  text-align: center;
  max-width: 400px;
  width: 90%;
  border: 1px solid var(--border);
}

.timeout-content h3 {
  color: var(--text);
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

.timeout-content p {
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
}

#timeout-countdown {
  color: var(--error);
  font-weight: bold;
  font-size: 1.2rem;
}

.timeout-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.timeout-buttons .btn {
  min-width: 120px;
}

/* Animation for popup */
@keyframes fadeIn {
  from {
    opacity: 0;
    backdrop-filter: blur(0px);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(4px);
  }
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .timeout-content {
    padding: 1.5rem;
  }
  
  .timeout-buttons {
    flex-direction: column;
  }
  
  .timeout-buttons .btn {
    width: 100%;
  }
}

/* Dark mode adjustments */
[data-theme="dark"] .timeout-content {
  background: var(--surface-dark);
  border-color: var(--border-dark);
}

[data-theme="dark"] .timeout-content h3 {
  color: var(--text-dark);
}

[data-theme="dark"] .timeout-content p {
  color: var(--text-secondary-dark);
}

/* Password Requirements Styling */
.password-requirements {
  margin-top: 0.25rem;
  margin-bottom: 1rem;
}

.password-requirements small {
  color: var(--text-secondary);
  font-size: 0.85rem;
  line-height: 1.4;
  display: block;
}

[data-theme="dark"] .password-requirements small {
  color: var(--text-secondary-dark);
}