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

:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: 'Outfit', var(--font-sans);
  --font-mono: 'Fira Code', monospace;
  
  --primary-50: #f5f3ff;
  --primary-100: #ede9fe;
  --primary-500: #8b5cf6;
  --primary-600: #7c3aed;
  --primary-700: #6d28d9;

  --accent-blue: #2563eb;
  --accent-cyan: #06b6d4;
  --accent-emerald: #10b981;
  --accent-amber: #f59e0b;
  --accent-rose: #f43f5e;
}

body {
  font-family: var(--font-sans);
  background-color: #f8fafc;
  color: #1e293b;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .font-display {
  font-family: var(--font-display);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Glassmorphic Navbar */
.glass-header {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

/* Modern Card Glow */
.card-premium {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05), 0 2px 6px -1px rgba(15, 23, 42, 0.03);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.card-premium:hover {
  box-shadow: 0 10px 30px -4px rgba(15, 23, 42, 0.08), 0 4px 10px -2px rgba(15, 23, 42, 0.04);
}

/* Option Cards */
.option-item {
  border: 1.5px solid #e2e8f0;
  background-color: #ffffff;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}
.option-item:hover {
  border-color: #c4b5fd;
  background-color: #fdfcff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.08);
}
.option-item.selected {
  border-color: #7c3aed;
  background-color: #faf5ff;
}
.option-item.correct {
  border-color: #10b981 !important;
  background-color: #ecfdf5 !important;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25) !important;
}
.option-item.wrong {
  border-color: #f43f5e !important;
  background-color: #fff1f2 !important;
  box-shadow: 0 0 0 2px rgba(244, 63, 94, 0.25) !important;
}

/* Option Letter Badges */
.option-badge {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  background-color: #f1f5f9;
  color: #475569;
  transition: all 0.2s ease;
}
.option-item:hover .option-badge {
  background-color: #ede9fe;
  color: #7c3aed;
}
.option-item.selected .option-badge {
  background-color: #7c3aed;
  color: #ffffff;
}
.option-item.correct .option-badge {
  background-color: #10b981;
  color: #ffffff;
}
.option-item.wrong .option-badge {
  background-color: #f43f5e;
  color: #ffffff;
}

/* Shimmer Loading Animation */
@keyframes shimmerPulse {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.shimmer-text {
  background: linear-gradient(90deg, #f3e8ff 0%, #ede9fe 50%, #f3e8ff 100%);
  background-size: 200% 100%;
  animation: shimmerPulse 1.8s infinite;
  border-radius: 6px;
}

/* Shaking animation on wrong answer */
@keyframes shakeX {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}
.animate-shake {
  animation: shakeX 0.4s ease-in-out;
}

/* Dropdown styling */
.custom-select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1em;
}

/* Modal transition */
.modal-backdrop {
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
}

/* Header button safeguards to prevent vertical text squishing */
.glass-header button,
.glass-header .lang-tab,
.glass-header a {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.glass-header select {
  text-overflow: ellipsis;
  white-space: nowrap;
}