/* Zettai Certify Enterprise Light Theme */

:root {
  --brand-primary: #0d9488;
  --brand-secondary: #0f766e;
}

body {
  background-color: #f8fafc; /* Slate-50 */
  color: #0f172a; /* Slate-900 */
}

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

/* Clean Surface Cards & Glass Panels */
.glass-panel {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.04);
}

.glass-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.03);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.glass-card:hover {
  border-color: #0d9488;
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(13, 148, 136, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
}

/* Certificate Preview Canvas */
.certificate-preview-box {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
  border: 4px solid #0f766e;
  position: relative;
}

/* Radio Card Checked States for Quiz */
.quiz-option-card {
  cursor: pointer;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  transition: all 0.15s ease-in-out;
}
.quiz-option-card:hover {
  border-color: #0d9488;
  background-color: #f0fdfa;
}
.quiz-option-card.selected {
  border-color: #0d9488;
  background-color: #f0fdfa;
  box-shadow: 0 0 0 2px #0d9488;
}

/* Interactive Video / Lecture Studio Container */
.video-stage-container {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #ffffff;
  border-radius: 1rem;
  overflow: hidden;
  position: relative;
  box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.15);
}

/* Badge Glows */
.glow-teal {
  box-shadow: 0 0 15px rgba(20, 184, 166, 0.25);
}
.glow-amber {
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.25);
}
.glow-rose {
  box-shadow: 0 0 15px rgba(244, 63, 94, 0.25);
}

/* Scanner Laser Animation */
@keyframes laserSweep {
  0% { top: 5%; opacity: 0.8; }
  50% { top: 90%; opacity: 1; }
  100% { top: 5%; opacity: 0.8; }
}
.scanner-laser {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #10b981, transparent);
  box-shadow: 0 0 8px #10b981, 0 0 16px #10b981;
  animation: laserSweep 2.2s ease-in-out infinite;
}