/* ==========================================================
   PHP-SecureCode Academy — hand-written CSS, no framework
   Design tokens match the original spec: white canvas, slate
   borders/text, electric blue (#2563eb) accents.
   ========================================================== */

:root {
  --blue-50: #eff6ff; --blue-100: #dbeafe; --blue-400: #60a5fa;
  --blue-600: #2563eb; --blue-700: #1d4ed8;
  --slate-50: #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0;
  --slate-300: #cbd5e1; --slate-400: #94a3b8; --slate-500: #64748b;
  --slate-600: #475569; --slate-700: #334155; --slate-900: #0f172a;
  --emerald-500: #10b981; --emerald-600: #059669;
  --amber-400: #fbbf24; --amber-500: #f59e0b; --amber-600: #d97706; --amber-900: #78350f;
  --rose-500: #f43f5e; --rose-600: #e11d48;
  --orange-50: #fff7ed; --orange-600: #ea580c;
  --radius: 12px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--slate-900);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.font-serif { font-family: Georgia, "Times New Roman", serif; }
a { color: inherit; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }

/* Layout */
.app { min-height: 100vh; background: #fff; }
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--slate-100); padding: 10px 24px;
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 13px; letter-spacing: -0.01em; }
.brand-icon {
  width: 28px; height: 28px; border-radius: 6px; background: var(--blue-600);
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px;
}

.role-switcher { display: flex; gap: 4px; border: 1px solid var(--slate-200); background: var(--slate-50); border-radius: 999px; padding: 4px; }
.role-btn {
  display: flex; align-items: center; gap: 6px; border: none; background: transparent;
  padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--slate-500);
}
.role-btn.active { background: #fff; color: var(--blue-600); box-shadow: 0 1px 2px rgba(0,0,0,0.06); border: 1px solid var(--slate-200); }

.layout { display: flex; }
.sidebar { width: 224px; flex-shrink: 0; border-right: 1px solid var(--slate-100); padding: 20px 12px; display: flex; flex-direction: column; gap: 4px; }
.main { flex: 1; padding: 20px 24px; min-width: 0; }

.nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  border: none; background: transparent; border-radius: 8px; padding: 10px 12px;
  font-size: 13px; font-weight: 600; color: var(--slate-500);
}
.nav-item.active { background: var(--blue-50); color: var(--blue-600); }
.nav-item:hover:not(.active) { background: var(--slate-50); color: var(--slate-900); }
.nav-divider { margin-top: 16px; border-top: 1px solid var(--slate-100); padding-top: 16px; }

/* Pills */
.pill-row { display: flex; align-items: center; gap: 8px; overflow-x: auto; padding-bottom: 4px; flex-wrap: wrap; }
.pill {
  flex-shrink: 0; white-space: nowrap; border-radius: 999px; border: 1px solid var(--slate-200);
  background: #fff; color: var(--slate-600); padding: 6px 14px; font-size: 13px; font-weight: 500;
}
.pill.active { background: var(--blue-600); color: #fff; border-color: var(--blue-600); }
.pill.active.black { background: var(--slate-900); border-color: var(--slate-900); }
.pill-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--slate-400); margin-right: 4px; }
.pill-sep { width: 1px; height: 16px; background: var(--slate-200); margin: 0 4px; }

/* Cards */
.card { border: 1px solid var(--slate-200); border-radius: var(--radius); }
.card-pad { padding: 16px; }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: 4px; border-radius: 6px; padding: 2px 8px; font-size: 10px; font-weight: 700; letter-spacing: 0.02em; }
.badge-pro { background: var(--slate-900); color: #fff; }
.badge-free { background: var(--slate-100); color: var(--slate-500); }
.diff-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--slate-500); }
.diff-dot .dot { width: 6px; height: 6px; border-radius: 50%; }
.diff-easy .dot { background: var(--emerald-500); }
.diff-medium .dot { background: var(--amber-500); }
.diff-hard .dot { background: var(--rose-500); }
.diff-expert .dot { background: #7c3aed; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: none; border-radius: 8px; font-weight: 600; padding: 10px 16px; font-size: 13px; }
.btn-blue { background: var(--blue-600); color: #fff; }
.btn-blue:hover { background: var(--blue-700); }
.btn-dark { background: var(--slate-900); color: #fff; }
.btn-dark:hover { background: #1e293b; }
.btn-sm { padding: 6px 10px; font-size: 11px; border-radius: 6px; }

/* Profile HUD */
.hud { display: flex; align-items: center; gap: 16px; border: 1px solid var(--slate-200); border-radius: 16px; padding: 10px 16px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.04); width: fit-content; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--blue-600); color: #fff; display: flex; align-items: center; justify-content: center; }
.hud-name { font-size: 13px; font-weight: 600; }
.hud-rank { font-size: 11px; color: var(--slate-500); }
.xp-track { width: 144px; }
.xp-bar-bg { height: 6px; border-radius: 999px; background: var(--slate-100); overflow: hidden; margin-top: 4px; }
.xp-bar-fill { height: 100%; background: var(--blue-600); border-radius: 999px; transition: width .5s; }
.streak-chip { display: flex; align-items: center; gap: 4px; background: var(--orange-50); color: var(--orange-600); border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 700; }

/* Curriculum / accordion */
.track-row { border: 1px solid var(--slate-200); border-radius: 12px; overflow: hidden; margin-bottom: 8px; }
.track-header { display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left; border: none; background: #fff; padding: 12px 16px; }
.track-header:hover { background: var(--slate-50); }
.track-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--blue-50); color: var(--blue-600); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.track-title { font-size: 14px; font-weight: 600; color: var(--slate-800, #1e293b); }
.track-meta { font-size: 11px; color: var(--slate-400); }
.track-lessons { border-top: 1px solid var(--slate-100); display: none; }
.track-row.open .track-lessons { display: block; }
.track-row.open .chevron { transform: rotate(180deg); }
.chevron { transition: transform .15s; color: var(--slate-400); }
.chevron.open-rotate { transform: rotate(180deg); }
.lesson-row { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--slate-100); }
.lesson-row:first-child { border-top: none; }
.lesson-check { flex-shrink: 0; margin-top: 2px; border: none; background: transparent; padding: 0; }
.lesson-type { display: inline-flex; align-items: center; gap: 4px; border-radius: 6px; padding: 1px 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.type-lesson { background: var(--slate-100); color: var(--slate-500); }
.type-lab { background: var(--blue-50); color: var(--blue-700); }
.type-project { background: #fffbeb; color: var(--amber-600); }
.lesson-title { font-size: 13px; font-weight: 500; margin: 0 0 4px; }
.lesson-title.done { color: var(--slate-400); text-decoration: line-through; }
.lesson-blurb { font-size: 12px; color: var(--slate-500); line-height: 1.5; margin: 0 0 6px; }
.lesson-open { flex-shrink: 0; }

/* Sandbox */
.sandbox-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 992px) { .sandbox-grid { grid-template-columns: 1fr 1fr; } }
.tab-row { display: flex; border-bottom: 1px solid var(--slate-100); background: var(--slate-50); }
.tab-btn { flex: 1; border: none; background: transparent; padding: 10px 12px; font-size: 12px; font-weight: 600; color: var(--slate-500); border-bottom: 2px solid transparent; }
.tab-btn.active { background: #fff; color: var(--blue-600); border-bottom-color: var(--blue-600); }
.tab-btn.tab-locked { color: var(--slate-400); }
.tab-btn.tab-locked .icon { width: 0.75em; height: 0.75em; margin-right: 2px; }
.tab-panel { display: none; padding: 16px; font-size: 13px; line-height: 1.6; color: var(--slate-700); }
.tab-panel.active { display: block; }
.code-block { background: var(--slate-900); color: #fda4af; font-size: 12px; padding: 12px; white-space: pre-wrap; overflow: auto; max-height: 160px; margin: 0; }
.terminal { background: #000; color: #34d399; font-size: 11.5px; padding: 12px; font-family: ui-monospace, monospace; max-height: 96px; overflow: auto; }
.terminal p { margin: 0 0 2px; }
.test-row { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--slate-100); background: var(--slate-50); border-radius: 8px; padding: 8px 12px; margin-bottom: 6px; font-size: 12.5px; }
.test-status { font-size: 11px; font-weight: 700; }
.status-pending { color: var(--slate-300); }
.status-running { color: var(--amber-500); }
.status-passed { color: var(--emerald-500); }
.status-failed { color: var(--rose-500); }

.fix-editor {
  width: 100%; min-height: 160px; background: var(--slate-900); color: #a7f3d0;
  font-family: ui-monospace, monospace; font-size: 12.5px; border: none; padding: 12px;
  resize: vertical; line-height: 1.5;
}
.req-list { display: flex; flex-direction: column; gap: 4px; }
.req-row { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 0; }
.req-row.req-required { color: var(--slate-600); }
.req-row.req-prohibited { color: var(--slate-600); }
.req-row.req-pass { color: var(--emerald-600); }
.req-row.req-fail { color: var(--rose-600); }
.lesson-steps { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.7; color: var(--slate-700); }
.lesson-steps li { margin-bottom: 8px; }

/* Milestone tracker (PHP Basics lab/mcq/fill-blank flow) */
.milestone-tracker { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.milestone-chip { display: flex; align-items: center; gap: 6px; border-radius: 999px; padding: 5px 12px; font-size: 11.5px; font-weight: 600; background: var(--slate-100); color: var(--slate-500); }
.milestone-chip.done { background: #dcfce7; color: var(--emerald-600); }
.mcq-option { display: block; width: 100%; text-align: left; border: 1px solid var(--slate-200); border-radius: 8px; padding: 10px 14px; font-size: 13px; background: #fff; margin-bottom: 8px; }
.mcq-option.selected { border-color: var(--blue-600); background: var(--blue-50); }
.mcq-option.correct { border-color: var(--emerald-500); background: #f0fdf4; }
.mcq-option.incorrect { border-color: var(--rose-500); background: #fef2f2; }
.mcq-feedback { font-size: 12.5px; font-weight: 600; margin-top: 4px; }
.mcq-feedback.mcq-correct { color: var(--emerald-600); }
.mcq-feedback.mcq-wrong { color: var(--rose-600); }
.blank-input { width: 90px; border: 1px solid var(--slate-300); border-radius: 4px; padding: 2px 6px; font-family: ui-monospace, monospace; font-size: 12.5px; background: #fff; color: var(--slate-900); }
.blank-input.blank-correct { border-color: var(--emerald-500); background: #f0fdf4; color: var(--emerald-700); }
.blank-input.blank-wrong { border-color: var(--rose-500); background: #fef2f2; }
.lab-challenge-output.output-pass { color: var(--emerald-600); font-weight: 600; }
.lab-challenge-output.output-fail { color: var(--rose-500); }

/* Secure Coding test-case flow */
.testcase-card { border: 1px solid var(--slate-200); border-radius: 10px; padding: 14px; margin-bottom: 10px; }
.testcase-scenario { font-size: 12.5px; font-weight: 600; color: var(--slate-700); margin: 0 0 10px; }
.testcase-reveal-row { display: flex; gap: 8px; flex-wrap: wrap; }
.testcase-result { border-radius: 8px; padding: 8px 12px; font-size: 12px; line-height: 1.5; margin-top: 8px; display: none; }
.testcase-result.shown { display: block; }
.testcase-result.vulnerable { background: #fef2f2; color: var(--rose-600); border: 1px solid #fecaca; }
.testcase-result.patched { background: #f0fdf4; color: var(--emerald-700); border: 1px solid #bbf7d0; }

/* Modals */
.modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,0.5); display: none; align-items: center; justify-content: center; padding: 16px; z-index: 60; }
.modal-overlay.open { display: flex; }
.modal { background: #fff; border-radius: 16px; border: 1px solid var(--slate-200); box-shadow: 0 20px 40px rgba(0,0,0,0.2); width: 100%; max-width: 420px; overflow: hidden; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; background: var(--slate-900); color: #fff; }
.modal-body { padding: 24px; }
.spinner { width: 32px; height: 32px; border: 2px solid var(--slate-200); border-top-color: var(--blue-600); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Certificate */
.cert-swatch-row { display: flex; align-items: center; gap: 8px; overflow-x: auto; padding: 10px 20px; border-bottom: 1px solid var(--slate-100); }
.cert-swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--slate-300); flex-shrink: 0; }
.cert-swatch.selected { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--blue-600); }
.cert-box { border: 2px solid var(--slate-900); border-radius: 12px; padding: 32px; text-align: center; margin: 20px; }
.cert-field { width: 100%; background: transparent; text-align: center; border: 1px dashed transparent; border-radius: 4px; padding: 2px 6px; font: inherit; color: inherit; }
.cert-field:hover, .cert-field:focus { border-color: currentColor; outline: none; }

/* Editor deck */
.form-field label { display: block; font-size: 11px; font-weight: 600; color: var(--slate-500); margin-bottom: 4px; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; border: 1px solid var(--slate-200); border-radius: 8px; padding: 8px 12px; font-size: 13px;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--blue-600); outline: none; }

/* Admin */
.metric-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 992px) { .metric-grid { grid-template-columns: repeat(4, 1fr); } }
.metric-card { border: 1px solid var(--slate-200); border-radius: 12px; padding: 16px; }
.metric-label { display: flex; align-items: center; gap: 8px; color: var(--slate-400); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.metric-value { font-size: 24px; font-weight: 800; margin: 8px 0 2px; }
.metric-sub { font-size: 11px; color: var(--slate-400); }
.webhook-row { display: flex; align-items: center; justify-content: space-between; background: var(--slate-50); border-radius: 8px; padding: 6px 12px; margin-bottom: 6px; font-family: ui-monospace, monospace; font-size: 11.5px; }
.webhook-good { color: var(--emerald-600); }
.webhook-bad { color: var(--rose-600); }

/* Utility */
.hidden { display: none !important; }
.progress-bar-bg { height: 6px; border-radius: 999px; background: var(--slate-100); overflow: hidden; }
.progress-bar-fill { height: 100%; background: var(--blue-600); border-radius: 999px; transition: width .5s; }
.toast-stack { position: fixed; bottom: 16px; right: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 70; }
.toast { display: flex; align-items: center; gap: 8px; border-radius: 8px; padding: 10px 14px; font-size: 12.5px; font-weight: 600; color: #fff; box-shadow: 0 10px 20px rgba(0,0,0,0.15); }
.toast-xp { background: var(--blue-600); }
.toast-good { background: var(--emerald-600); }
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.challenge-card { position: relative; text-align: left; border: 1px solid var(--slate-200); border-radius: 12px; padding: 14px; background: #fff; }
.challenge-card.active { border-color: var(--blue-600); background: #eff6ff80; }
.challenge-card .solved-badge { position: absolute; top: -8px; right: -8px; width: 20px; height: 20px; border-radius: 50%; background: var(--emerald-500); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; }

.wiki-link { display: inline-flex; align-items: center; gap: 3px; color: var(--blue-600); font-weight: 500; text-decoration: none; }
.wiki-link:hover { text-decoration: underline; }
.wiki-link .icon { width: 0.75em; height: 0.75em; }

/* Certificate template themes — swatches + the cert box itself */
.cert-classic { background: #fff; border: 2px solid var(--slate-900); }
.cert-modern { background: var(--blue-600); border: 2px solid var(--blue-600); }
.cert-mono { background: var(--slate-100); border: 2px solid var(--slate-900); }
.cert-gold { background: var(--amber-400); border: 2px solid var(--amber-500); }
.cert-cyber { background: var(--slate-900); border: 2px solid var(--blue-400); }

#cert-box.theme-classic { background: #fff; border-color: var(--slate-900); color: var(--slate-900); font-family: Georgia, serif; }
#cert-box.theme-modern { background: #fff; border-color: var(--blue-600); color: var(--slate-900); font-family: inherit; }
#cert-box.theme-mono { background: #fff; border-color: var(--slate-900); color: var(--slate-900); font-family: ui-monospace, monospace; }
#cert-box.theme-gold { background: #fffbeb; border-color: var(--amber-500); color: var(--amber-900); font-family: Georgia, serif; }
#cert-box.theme-cyber { background: var(--slate-900); border-color: var(--blue-400); color: #fff; font-family: ui-monospace, monospace; }
#cert-box.theme-cyber .cert-field::placeholder { color: rgba(255,255,255,0.5); }