/* ═══════════════════════════════════════════════════════════
   APC ACADEMY — TEST ENGINE STYLES
   ═══════════════════════════════════════════════════════════ */

/* ── Start Screen ─────────────────────────────────────────── */
.apc-start-screen {
  display: flex; align-items: center; justify-content: center;
  min-height: 70vh; padding: 24px; background: var(--apc-bg, #f0f4ff);
}
.apc-start-card {
  background: #fff; border-radius: 20px; padding: 40px 44px;
  max-width: 560px; width: 100%; text-align: center;
  box-shadow: 0 10px 40px rgba(67,97,238,.14);
}
.apc-start-logo    { font-size: 52px; margin-bottom: 8px; }
.apc-start-card h2 { margin: 0 0 10px; font-size: 22px; color: #1e293b; }
.apc-start-meta    { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 16px 0; }
.apc-start-meta-item {
  background: #eff3ff; color: #4361ee; padding: 7px 14px;
  border-radius: 20px; font-size: 13px; font-weight: 600;
}
.apc-start-instructions {
  background: #f8fafc; border-radius: 12px; padding: 16px 20px;
  text-align: left; margin: 20px 0; font-size: 13.5px; color: #475569;
}
.apc-start-instructions h4 { margin: 0 0 10px; font-size: 14px; color: #1e293b; }
.apc-start-instructions ul  { margin: 0; padding-left: 20px; }
.apc-start-instructions li  { margin-bottom: 5px; }

/* ── Test Engine ──────────────────────────────────────────── */
.apc-test-engine {
  display: flex; flex-direction: column; min-height: 100vh;
  background: #f0f4ff; font-family: 'Segoe UI', system-ui, sans-serif;
}

/* ── Header ───────────────────────────────────────────────── */
.apc-te-header {
  background: linear-gradient(135deg, #4361ee, #7c3aed);
  color: #fff; padding: 14px 24px;
  display: flex; align-items: center; gap: 16px;
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 2px 10px rgba(67,97,238,.3);
}
.apc-te-logo    { font-size: 16px; font-weight: 700; white-space: nowrap; }
.apc-te-title   { flex: 1; font-size: 15px; font-weight: 600; text-align: center; }
.apc-te-timer   {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.18); border-radius: 30px;
  padding: 7px 16px; font-size: 18px; font-weight: 800;
  white-space: nowrap;
}
.apc-timer-icon { font-size: 18px; }
.apc-te-timer.warning  { background: rgba(245,158,11,.3); animation: pulse .8s infinite; }
.apc-te-timer.critical { background: rgba(239,68,68,.4);  animation: pulse .4s infinite; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.7; } }

/* ── Body ─────────────────────────────────────────────────── */
.apc-te-body { display: flex; flex: 1; gap: 0; overflow: hidden; }

/* ── Left Panel ───────────────────────────────────────────── */
.apc-te-left {
  width: 220px; flex-shrink: 0; background: #fff;
  border-right: 1px solid #e2e8f0; padding: 16px; overflow-y: auto;
}
.apc-te-nav-header { font-size: 12px; font-weight: 700; color: #64748b; margin-bottom: 10px; }
.apc-te-nav-legend { display: flex; flex-direction: column; gap: 3px; font-size: 11px; margin-top: 4px; }
.apc-te-nav-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-bottom: 16px; }
.apc-qn {
  width: 32px; height: 32px; border-radius: 7px; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  border: 2px solid #e2e8f0; background: #f8fafc; color: #475569; transition: all .15s;
}
.apc-qn:hover    { border-color: #4361ee; background: #eff3ff; }
.apc-qn-current  { border-color: #4361ee; background: #4361ee; color: #fff; }
.apc-qn-answered { border-color: #22c55e; background: #dcfce7; color: #166534; }
.apc-qn-marked   { border-color: #f59e0b; background: #fef9c3; color: #854d0e; }
.apc-qn-unanswered{ border-color: #e2e8f0; }

.apc-te-progress { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #64748b; }
.apc-te-progress-bar  { flex: 1; height: 6px; background: #e2e8f0; border-radius: 10px; overflow: hidden; }
.apc-te-progress-fill { height: 100%; background: #22c55e; border-radius: 10px; transition: width .4s; }

/* ── Right Panel ──────────────────────────────────────────── */
.apc-te-right { flex: 1; display: flex; flex-direction: column; overflow-y: auto; }
.apc-te-question-area { flex: 1; padding: 28px 32px; }
.apc-te-q-number { font-size: 13px; font-weight: 700; color: #4361ee; margin-bottom: 14px; }
.apc-te-q-text   { font-size: 17px; font-weight: 600; color: #1e293b; line-height: 1.6; margin-bottom: 24px; }
.apc-te-options  { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.apc-te-option {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border: 2px solid #e2e8f0; border-radius: 12px; cursor: pointer;
  background: #fff; transition: all .15s; font-size: 15px; color: #1e293b;
}
.apc-te-option:hover { border-color: #4361ee; background: #eff3ff; }
.apc-te-option.selected { border-color: #4361ee; background: #eff3ff; }
.apc-opt-circle {
  width: 30px; height: 30px; border-radius: 50%; border: 2px solid #cbd5e1;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; flex-shrink: 0; color: #475569;
}
.apc-te-option.selected .apc-opt-circle { border-color: #4361ee; background: #4361ee; color: #fff; }
.apc-opt-text { flex: 1; line-height: 1.4; }

.apc-te-q-actions {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-top: 16px; border-top: 1px solid #e2e8f0;
}
.apc-te-q-nav   { display: flex; gap: 10px; margin-left: auto; }

/* ── Submit Bar ───────────────────────────────────────────── */
.apc-te-submit-bar {
  padding: 16px 32px; background: #fff; border-top: 1px solid #e2e8f0;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.apc-te-summary { display: flex; gap: 16px; font-size: 13px; flex-wrap: wrap; }
.apc-te-summary-item { display: flex; align-items: center; gap: 6px; color: #475569; }

/* ── Modal ────────────────────────────────────────────────── */
.apc-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  z-index: 9999; display: flex; align-items: center; justify-content: center;
}
.apc-modal { background: #fff; border-radius: 16px; padding: 28px; max-width: 480px; width: 90%; }
.apc-modal-header { font-size: 18px; font-weight: 700; color: #1e293b; margin-bottom: 14px; }
.apc-modal-body   { font-size: 14px; color: #475569; margin-bottom: 20px; }
.apc-modal-summary{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.apc-modal-stat   { background: #f8fafc; border-radius: 9px; padding: 12px; text-align: center; }
.apc-modal-stat-val  { font-size: 20px; font-weight: 800; color: #1e293b; }
.apc-modal-stat-label{ font-size: 11px; color: #64748b; margin-top: 2px; }
.apc-modal-footer { display: flex; gap: 10px; justify-content: flex-end; }

/* ── Buttons inside test engine ───────────────────────────── */
.apc-btn { display:inline-flex;align-items:center;gap:7px;padding:10px 20px;border-radius:9px;border:none;cursor:pointer;font-size:14px;font-weight:600;text-decoration:none;transition:all .2s;line-height:1; }
.apc-btn-primary   { background:#4361ee;color:#fff; }
.apc-btn-primary:hover { background:#3451d1;color:#fff; }
.apc-btn-secondary { background:#e2e8f0;color:#1e293b; }
.apc-btn-secondary:hover { background:#cbd5e1; }
.apc-btn-outline   { background:transparent;border:2px solid #e2e8f0;color:#1e293b; }
.apc-btn-outline:hover { border-color:#4361ee;color:#4361ee; }
.apc-btn-success   { background:#22c55e;color:#fff; }
.apc-btn-success:hover { background:#16a34a; }
.apc-btn-lg        { padding:14px 30px;font-size:16px; }
.apc-btn-sm        { padding:6px 12px;font-size:13px;border-radius:7px; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .apc-te-body    { flex-direction: column; }
  .apc-te-left    { width: 100%; border-right: none; border-bottom: 1px solid #e2e8f0; }
  .apc-te-nav-grid{ grid-template-columns: repeat(8, 1fr); }
  .apc-te-question-area { padding: 18px; }
  .apc-te-submit-bar    { flex-direction: column; align-items: stretch; }
  .apc-te-header  { flex-wrap: wrap; }
}