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

:root {
  --bg-main: #060b13;
  --card-bg: #0d1522;
  --card-border: #1a2638;
  --accent-blue: #2563eb;
  --accent-cyan: #06b6d4;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background-color: var(--bg-main);
  color: #f1f5f9;
  -webkit-font-smoothing: antialiased;
}

code, kbd, pre, .font-mono {
  font-family: 'JetBrains+Mono', monospace;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #060b13;
}
::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #334155;
}

/* CertLabs Cards & Panels */
.cert-card {
  background-color: #0b1320;
  border: 1px solid #162235;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.cert-card:hover {
  background-color: #0f1a2c;
  border-color: #2563eb;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 0 15px -3px rgba(37, 99, 235, 0.2);
}

.level-badge-advanced {
  color: #fb923c;
}
.level-badge-intermediate {
  color: #fbbf24;
}
.level-badge-expert {
  color: #f87171;
}
.level-badge-fundamentals {
  color: #4ade80;
}
.level-badge-beginner {
  color: #38bdf8;
}

/* Level Gradient Text */
.level-gradient-intermediate {
  background: linear-gradient(135deg, #a855f7, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.level-gradient-expert {
  background: linear-gradient(135deg, #ef4444, #f97316);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.level-gradient-advanced {
  background: linear-gradient(135deg, #f59e0b, #eab308);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.level-gradient-fundamentals {
  background: linear-gradient(135deg, #10b981, #06b6d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Modal animations */
@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.modal-animate {
  animation: modalFadeIn 0.2s ease-out forwards;
}

/* Strike-through for Pearson VUE mode */
.option-struck {
  text-decoration: line-through;
  opacity: 0.45;
}