/* ==========================================================
   EXTRA TOOLS - Shared Form Styling
   Matches Bindi Design System
   ========================================================== */

/* Page Header */
.tool-page-header {
  margin-bottom: 32px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted-foreground);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 16px;
  transition: color var(--transition-fast);
}

.back-link:hover {
  color: var(--accent);
}

.tool-page-header h1 {
  font-size: 28px;
  font-weight: 700;
  color: var(--foreground);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.tool-page-header h1 i {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--tool-accent, #F59E0B) 0%, var(--tool-accent-dark, #D97706) 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
}

/* New illustrated icon style */
.tool-page-header h1 .tool-header-icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.tool-page-header p {
  color: var(--muted-foreground);
  font-size: 15px;
  max-width: 650px;
  line-height: 1.6;
}

/* Form Card Container */
.tool-form-card {
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 24px;
}

/* Form Groups */
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 8px;
}

/* Text Inputs, Selects, Textareas */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="number"],
.form-group input[type="url"],
.form-group textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
  background: var(--background);
  color: var(--foreground);
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-xs);
}

/* Modern Select Dropdown Styling */
.form-group select {
  width: 100%;
  padding: 12px 40px 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
  font-weight: 500;
  background: var(--background);
  color: var(--foreground);
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}

.form-group select:hover {
  border-color: var(--tool-accent, var(--accent));
  background-color: var(--muted);
}

.form-group select:focus {
  outline: none;
  border-color: var(--tool-accent, var(--accent));
  box-shadow: 0 0 0 3px rgba(var(--tool-accent-rgb, 245, 158, 11), 0.15), var(--shadow-xs);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23F59E0B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

.form-group input:hover,
.form-group textarea:hover {
  border-color: var(--border-hover, #CBD5E1);
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-lighter), var(--shadow-xs);
}

.form-group textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}

/* Placeholder styling */
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--muted-foreground);
  opacity: 0.7;
}

/* Form Rows (Grid Layouts) */
.form-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.form-row-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (max-width: 768px) {
  .form-row,
  .form-row-2 {
    grid-template-columns: 1fr;
  }
}

/* Range Slider */
.slider-group {
  margin-bottom: 20px;
}

.slider-group label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 10px;
}

.slider-value {
  background: var(--accent-lighter);
  color: var(--accent);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 700;
}

.slider-container {
  position: relative;
  padding: 8px 0;
}

input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--progress, 50%), var(--muted) var(--progress, 50%), var(--muted) 100%);
  outline: none;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: white;
  border: 3px solid var(--accent);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: transform 0.15s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: white;
  border: 3px solid var(--accent);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Checkbox Styling */
.checkbox-group {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.checkbox-group input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
}

.checkbox-group label {
  margin: 0;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
}

/* Radio Button Cards */
.radio-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.radio-card {
  padding: 14px 12px;
  background: var(--background);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: center;
}

.radio-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.radio-card.selected {
  border-color: var(--accent);
  background: var(--accent-lighter);
}

.radio-card input {
  display: none;
}

.radio-card i {
  font-size: 28px;
  color: var(--accent);
  display: block;
  margin-bottom: 8px;
}

.radio-card span {
  font-size: 13px;
  font-weight: 600;
  color: var(--foreground);
}

/* Primary Button (Generate) */
.btn-generate {
  width: 100%;
  padding: 14px 20px;
  background: linear-gradient(135deg, var(--tool-accent, #F59E0B) 0%, var(--tool-accent-dark, #D97706) 100%);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-generate:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
}

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

.btn-generate:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-generate .spinner {
  display: none;
}

.btn-generate.loading .spinner {
  display: inline-block;
  animation: sparkle-spin 0.8s ease-in-out infinite;
}

.btn-generate.loading .btn-text {
  display: none;
}

/* ========================================
   FUN LOADING ANIMATIONS
   ======================================== */

/* Sparkle spin - the magic is happening! */
@keyframes sparkle-spin {
  0% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(90deg) scale(1.2); }
  50% { transform: rotate(180deg) scale(1); }
  75% { transform: rotate(270deg) scale(1.2); }
  100% { transform: rotate(360deg) scale(1); }
}

/* Simple spin fallback */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Loading overlay for generation */
.loading-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
}

.loading-overlay.visible {
  display: flex;
}

/* Themed Background Layer */
.loading-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  transition: background 0.5s ease;
}

/* Default themed background */
.loading-bg.theme-default {
  background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
}

/* Quiz - Brainy purple with floating question marks */
.loading-bg.theme-quiz {
  background: linear-gradient(135deg, #581C87 0%, #3B0764 100%);
}

/* Email - Professional blue gradient */
.loading-bg.theme-email {
  background: linear-gradient(135deg, #1E40AF 0%, #1E3A8A 100%);
}

/* Activity - Playful rainbow gradient */
.loading-bg.theme-activity {
  background: linear-gradient(135deg, #EA580C 0%, #C2410C 100%);
}

/* Assessment - Focused teal */
.loading-bg.theme-assessment {
  background: linear-gradient(135deg, #0D9488 0%, #0F766E 100%);
}

/* Planning - Strategic indigo */
.loading-bg.theme-planning {
  background: linear-gradient(135deg, #4F46E5 0%, #4338CA 100%);
}

/* Wellbeing - Calming blue-green */
.loading-bg.theme-wellbeing {
  background: linear-gradient(135deg, #0891B2 0%, #0E7490 100%);
}

/* PE - Energetic green */
.loading-bg.theme-pe {
  background: linear-gradient(135deg, #16A34A 0%, #15803D 100%);
}

/* IEP - Supportive warm purple */
.loading-bg.theme-iep {
  background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%);
}

/* Reading - Cozy amber */
.loading-bg.theme-reading {
  background: linear-gradient(135deg, #D97706 0%, #B45309 100%);
}

/* Relief - Helpful coral */
.loading-bg.theme-relief {
  background: linear-gradient(135deg, #E11D48 0%, #BE123C 100%);
}

/* Video - Cinematic dark blue */
.loading-bg.theme-video {
  background: linear-gradient(135deg, #312E81 0%, #1E1B4B 100%);
}

/* Project - Rocket launch gradient */
.loading-bg.theme-project {
  background: linear-gradient(135deg, #0369A1 0%, #0C4A6E 100%);
}

/* NAPLAN - Official looking blue */
.loading-bg.theme-naplan {
  background: linear-gradient(135deg, #1D4ED8 0%, #1E3A8A 100%);
}

/* Integrity - Thoughtful slate */
.loading-bg.theme-integrity {
  background: linear-gradient(135deg, #475569 0%, #334155 100%);
}

/* Floating particles background */
.loading-particles {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  pointer-events: none;
}

.floating-emoji {
  position: absolute;
  font-size: 32px;
  opacity: 0.3;
  animation: float-around 8s ease-in-out infinite;
}

.floating-emoji:nth-child(1) { top: 10%; left: 15%; animation-delay: 0s; }
.floating-emoji:nth-child(2) { top: 20%; left: 80%; animation-delay: 1s; }
.floating-emoji:nth-child(3) { top: 50%; left: 10%; animation-delay: 2s; }
.floating-emoji:nth-child(4) { top: 70%; left: 75%; animation-delay: 3s; }
.floating-emoji:nth-child(5) { top: 85%; left: 30%; animation-delay: 4s; }
.floating-emoji:nth-child(6) { top: 30%; left: 60%; animation-delay: 5s; }

@keyframes float-around {
  0%, 100% {
    transform: translateY(0) translateX(0) rotate(0deg) scale(1);
    opacity: 0.2;
  }
  25% {
    transform: translateY(-20px) translateX(10px) rotate(5deg) scale(1.1);
    opacity: 0.4;
  }
  50% {
    transform: translateY(-10px) translateX(-10px) rotate(-5deg) scale(1);
    opacity: 0.3;
  }
  75% {
    transform: translateY(-25px) translateX(5px) rotate(3deg) scale(1.15);
    opacity: 0.35;
  }
}

/* Star field for video/space themes */
.star-field {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(2px 2px at 20px 30px, white, transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 90px 40px, white, transparent),
    radial-gradient(2px 2px at 160px 80px, rgba(255,255,255,0.9), transparent),
    radial-gradient(1px 1px at 200px 20px, white, transparent),
    radial-gradient(2px 2px at 260px 60px, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 300px 90px, white, transparent),
    radial-gradient(2px 2px at 350px 30px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 400px 70px, white, transparent),
    radial-gradient(2px 2px at 450px 50px, rgba(255,255,255,0.6), transparent);
  background-size: 500px 120px;
  animation: twinkle-stars 3s ease-in-out infinite;
}

@keyframes twinkle-stars {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.loading-modal {
  background: white;
  border-radius: 24px;
  padding: 48px 64px;
  text-align: center;
  animation: pop-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-width: 420px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  position: relative;
  z-index: 10;
}

@keyframes pop-in {
  0% { transform: scale(0.5) translateY(20px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* The big animated emoji */
.loading-emoji {
  font-size: 72px;
  display: block;
  margin-bottom: 20px;
  animation: bounce-wiggle 1.5s ease-in-out infinite;
}

@keyframes bounce-wiggle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-12px) rotate(-5deg); }
  50% { transform: translateY(0) rotate(0deg); }
  75% { transform: translateY(-12px) rotate(5deg); }
}

/* For the thinking brain */
.loading-emoji.thinking {
  animation: think-pulse 2s ease-in-out infinite;
}

@keyframes think-pulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.15); filter: brightness(1.1) drop-shadow(0 0 20px rgba(139, 92, 246, 0.5)); }
}

/* For the working bee */
.loading-emoji.busy-bee {
  animation: bee-fly 1.2s ease-in-out infinite;
}

@keyframes bee-fly {
  0%, 100% { transform: translateY(0) translateX(0) rotate(-5deg); }
  25% { transform: translateY(-15px) translateX(10px) rotate(5deg); }
  50% { transform: translateY(-5px) translateX(0) rotate(-5deg); }
  75% { transform: translateY(-15px) translateX(-10px) rotate(5deg); }
}

/* For the magic wand */
.loading-emoji.magic {
  animation: magic-wave 1s ease-in-out infinite;
}

@keyframes magic-wave {
  0%, 100% { transform: rotate(-10deg) scale(1); }
  50% { transform: rotate(10deg) scale(1.1); }
}

/* For the rocket */
.loading-emoji.rocket {
  animation: rocket-shake 0.5s ease-in-out infinite;
}

@keyframes rocket-shake {
  0%, 100% { transform: translateX(0) rotate(-45deg); }
  25% { transform: translateX(-3px) rotate(-47deg); }
  75% { transform: translateX(3px) rotate(-43deg); }
}

/* For the chef */
.loading-emoji.cooking {
  animation: cooking-stir 1s ease-in-out infinite;
}

@keyframes cooking-stir {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-15deg); }
  75% { transform: rotate(15deg); }
}

/* Loading text */
.loading-text {
  font-size: 22px;
  font-weight: 700;
  color: var(--foreground);
  margin-bottom: 8px;
}

.loading-subtext {
  font-size: 15px;
  color: var(--muted-foreground);
  margin-bottom: 24px;
  min-height: 22px;
}

/* Bouncing dots */
.loading-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.loading-dots span {
  width: 12px;
  height: 12px;
  background: var(--tool-accent, #F59E0B);
  border-radius: 50%;
  animation: dot-bounce 1.4s ease-in-out infinite;
}

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

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

@keyframes dot-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
  40% { transform: scale(1); opacity: 1; }
}

/* Progress bar (optional) */
.loading-progress {
  width: 100%;
  height: 6px;
  background: var(--muted);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 20px;
}

.loading-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--tool-accent, #F59E0B), var(--tool-accent-dark, #D97706));
  border-radius: 3px;
  animation: progress-indeterminate 1.5s ease-in-out infinite;
  width: 40%;
}

@keyframes progress-indeterminate {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

/* Fun fact tips during loading */
.loading-tip {
  margin-top: 20px;
  padding: 12px 16px;
  background: var(--muted);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--muted-foreground);
  display: flex;
  align-items: center;
  gap: 8px;
}

.loading-tip i {
  color: var(--tool-accent, #F59E0B);
}

/* Sparkle particles around emoji */
.sparkle-container {
  position: relative;
  display: inline-block;
}

.sparkle {
  position: absolute;
  font-size: 16px;
  animation: sparkle-float 1.5s ease-out infinite;
  pointer-events: none;
}

.sparkle:nth-child(1) { top: -10px; left: -10px; animation-delay: 0s; }
.sparkle:nth-child(2) { top: -10px; right: -10px; animation-delay: 0.3s; }
.sparkle:nth-child(3) { bottom: -10px; left: -10px; animation-delay: 0.6s; }
.sparkle:nth-child(4) { bottom: -10px; right: -10px; animation-delay: 0.9s; }

@keyframes sparkle-float {
  0%, 100% { opacity: 0; transform: scale(0.5) translateY(0); }
  50% { opacity: 1; transform: scale(1) translateY(-10px); }
}

/* Success animation */
.success-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.success-overlay.visible {
  display: flex;
}

.success-overlay .loading-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

.success-modal {
  background: white;
  border-radius: 24px;
  padding: 48px 64px;
  text-align: center;
  animation: success-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  z-index: 10;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

@keyframes success-pop {
  0% { transform: scale(0); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.success-emoji {
  font-size: 80px;
  display: block;
  margin-bottom: 16px;
  animation: success-bounce 0.6s ease-out;
}

@keyframes success-bounce {
  0% { transform: scale(0) rotate(-180deg); }
  60% { transform: scale(1.2) rotate(10deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.success-text {
  font-size: 24px;
  font-weight: 700;
  color: var(--foreground);
  margin-bottom: 8px;
}

.success-subtext {
  font-size: 15px;
  color: var(--muted-foreground);
}

/* Confetti burst on success */
.confetti {
  position: fixed;
  width: 10px;
  height: 10px;
  pointer-events: none;
  z-index: 10000;
  animation: confetti-fall 3s ease-out forwards;
}

@keyframes confetti-fall {
  0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* Secondary Button */
.btn-secondary {
  padding: 10px 16px;
  background: var(--background);
  color: var(--foreground);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-secondary:hover {
  border-color: var(--accent);
  background: var(--accent-lighter);
  color: var(--accent);
}

/* Copy Button */
.copy-btn {
  padding: 10px 16px;
  background: var(--muted);
  color: var(--foreground);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.copy-btn:hover {
  background: var(--accent-lighter);
  border-color: var(--accent);
  color: var(--accent);
}

.copy-btn.copied {
  background: var(--success-light, #D1FAE5);
  border-color: var(--success, #10B981);
  color: #059669;
}

/* Error Message */
.error-message {
  background: var(--destructive-light, #FEE2E2);
  color: var(--destructive, #DC2626);
  padding: 14px 16px;
  border-radius: var(--radius);
  margin-top: 16px;
  display: none;
  font-size: 14px;
  font-weight: 500;
}

.error-message.visible {
  display: flex;
  align-items: center;
  gap: 8px;
}

.error-message i {
  font-size: 18px;
}

/* Results Container */
.results-container {
  display: none;
  margin-top: 24px;
}

.results-container.visible {
  display: block;
}

.result-section {
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 20px;
}

.result-section h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--foreground);
}

.result-section h3 i {
  color: var(--accent);
}

/* Result Header with Actions */
.result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}

.result-header h3 {
  margin: 0;
}

.result-actions {
  display: flex;
  gap: 8px;
}

/* Info/Tip Box */
.info-box {
  background: var(--muted);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 13px;
  color: var(--muted-foreground);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
}

.info-box i {
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 1px;
  font-size: 16px;
}

.info-box.warning {
  background: rgba(245, 158, 11, 0.1);
  border-left: 3px solid #F59E0B;
  border-radius: 0 var(--radius) var(--radius) 0;
}

.info-box.warning i {
  color: #F59E0B;
}

/* Tags */
.tag {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tag.primary {
  background: var(--accent-lighter);
  color: var(--accent);
}

.tag.success {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}

.tag.warning {
  background: rgba(245, 158, 11, 0.1);
  color: #D97706;
}

.tag.info {
  background: rgba(59, 130, 246, 0.1);
  color: #2563EB;
}

.tag.purple {
  background: rgba(139, 92, 246, 0.1);
  color: #7C3AED;
}

/* Card Grid */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

/* Email Preview */
.email-preview {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.email-subject {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.email-body {
  line-height: 1.7;
}

.email-body p {
  margin-bottom: 14px;
}

/* Content Card (for generated items) */
.content-card {
  background: var(--muted);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}

.content-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.content-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--foreground);
  display: flex;
  align-items: center;
  gap: 8px;
}

.content-card-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--foreground);
}

/* Quiz Question Styling */
.quiz-question {
  background: var(--muted);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}

.quiz-question .question-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.quiz-question .question-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--accent);
  color: white;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
}

.quiz-question .question-text {
  font-weight: 600;
  margin-bottom: 12px;
  font-size: 15px;
}

.quiz-option {
  padding: 10px 12px;
  margin: 4px 0;
  background: var(--background);
  border-radius: 6px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid transparent;
}

.quiz-option .option-letter {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
  flex-shrink: 0;
}

/* Tooltip-style meta tags */
.meta-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.meta-tag {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.meta-tag.time {
  background: rgba(59, 130, 246, 0.1);
  color: #3B82F6;
}

.meta-tag.difficulty {
  background: rgba(16, 185, 129, 0.1);
  color: #10B981;
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--muted-foreground);
}

.empty-state i {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-state p {
  font-size: 15px;
}