frontend.css

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --zap-dark: #0f0f1a;
  --zap-darker: #080810;
  --zap-card: #1a1a2e;
  --zap-purple: #2d1b4e;
  --zap-border: #2a2a4a;
  --zap-border-t: #3a3a5a;
  --zap-light: #f0f0f5;
  --zap-muted: #8888a0;
  --zap-yellow: #ffd700;
  --zap-orange: #ff9500;
  --zap-red: #ff4757;
  --zap-green: #2ed573;
  --zap-blue: #3742fa;
}

@layer base {
  html { @apply scroll-smooth; }
  body { @apply bg-zap-dark text-zap-light font-inter antialiased; }
  * { @apply border-zap-border; }
  input, textarea, select { @apply bg-zap-bg border-zap-border-t text-zap-light placeholder-zap-muted focus:ring-2 focus:ring-zap-yellow/50 focus:border-zap-yellow transition-all; }
  button:disabled { @apply opacity-50 cursor-not-allowed; }
}

@layer components {
  .page { @apply transition-opacity duration-200; }
  .view { @apply animate-fade-in; }
  .hidden { display: none !important; }
  
  .btn { @apply px-4 py-2.5 rounded-xl font-medium font-inter transition-all duration-150 ease-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-zap-dark disabled:opacity-50 disabled:cursor-not-allowed; }
  .btn-primary { @apply bg-zap-yellow text-zap-dark hover:bg-yellow-300 focus:ring-zap-yellow shadow-lg shadow-zap-yellow/20; }
  .btn-secondary { @apply bg-zap-purple text-zap-light hover:bg-purple-900/50 focus:ring-zap-purple border border-zap-border; }
  .btn-outline { @apply bg-transparent border border-zap-border-t hover:bg-zap-border focus:ring-zap-border; }
  .btn-ghost { @apply bg-transparent hover:bg-zap-border focus:ring-zap-border text-zap-muted hover:text-zap-light; }
  .btn-lg { @apply px-6 py-3 text-lg; }
  .btn-sm { @apply px-3 py-1.5 text-sm; }
  .btn-icon { @apply p-2; }

  .input-group { @apply flex flex-col gap-1.5; }
  .input-label { @apply text-sm font-medium text-zap-muted; }
  .input-field { @apply w-full px-4 py-3 rounded-xl border bg-zap-darker; }
  
  .badge { @apply px-3 py-1 rounded-full text-xs font-medium; }
  .badge-primary { @apply bg-zap-yellow/20 text-zap-yellow; }
  .badge-secondary { @apply bg-zap-purple/50 text-zap-light; }
  .badge-success { @apply bg-zap-green/20 text-zap-green; }
  .badge-danger { @apply bg-zap-red/20 text-zap-red; }

  .toggle { @apply w-5 h-5 rounded border-zap-border-t bg-zap-darker focus:ring-zap-yellow appearance-none cursor-pointer checked:bg-zap-yellow checked:border-zap-yellow; }
  
  .card { @apply bg-zap-card rounded-2xl border border-zap-border p-6 shadow-xl; }
  .card-hover { @apply transition-all duration-200 hover:border-zap-yellow/50 hover:shadow-zap-yellow/10 hover:-translate-y-1; }

  /* Animations */
  @keyframes fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
  .animate-fade-in { animation: fade-in 0.3s ease-out forwards; }
  @keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.4); } 50% { box-shadow: 0 0 20px 5px rgba(255, 215, 0, 0.2); } }
  .animate-pulse-glow { animation: pulse-glow 2s infinite; }
  
  /* Question Types Colors */
  .q-type-quiz { --q-color: #3742fa; --q-bg: rgba(55, 66, 250, 0.1); }
  .q-type-true_false { --q-color: #2ed573; --q-bg: rgba(46, 213, 115, 0.1); }
  .q-type-type_answer { --q-color: #ffa502; --q-bg: rgba(255, 165, 2, 0.1); }
  .q-type-puzzle { --q-color: #e056fd; --q-bg: rgba(224, 86, 253, 0.1); }
  .q-type-slider { --q-color: #ff4757; --q-bg: rgba(255, 71, 87, 0.1); }

  /* Answer Buttons */
  .answer-btn { @apply w-full p-4 rounded-xl border-2 border-zap-border-t bg-zap-card text-left text-lg font-medium transition-all duration-150 flex items-center gap-3; }
  .answer-btn:hover { @apply border-zap-yellow/50 bg-zap-yellow/5; }
  .answer-btn.selected { @apply border-zap-yellow bg-zap-yellow/10; }
  .answer-btn.correct { @apply border-zap-green bg-zap-green/10; }
  .answer-btn.incorrect { @apply border-zap-red bg-zap-red/10; }
  
  /* Scrollbar */
  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { background: var(--zap-darker); }
  ::-webkit-scrollbar-thumb { background: var(--zap-border); border-radius: 3px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--zap-yellow); }

  /* Toast */
  .toast { @apply bg-zap-card border border-zap-border rounded-xl p-4 shadow-2xl flex items-center gap-3 min-w-[280px] max-w-md animate-slide-in; }
  @keyframes slide-in { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } }
  .toast-success { @apply border-l-4 border-zap-green; }
  .toast-error { @apply border-l-4 border-zap-red; }
  .toast-info { @apply border-l-4 border-zap-blue; }
}