/* Engine CSS - Lesson Engine UI Stylesheet */

:root {
  /* Primary Colors */
  --engine-primary: #0d7377;
  --engine-secondary: #14a3a8;
  --engine-accent: #17c3c8;

  /* Background & Card */
  --engine-bg: #f5f7fa;
  --engine-card: #ffffff;

  /* Text Colors */
  --engine-text: #1a1a1a;
  --engine-text-light: #5a6474;
  --engine-text-muted: #8895a7;

  /* Borders */
  --engine-border: #e1e5eb;

  /* Status Colors */
  --engine-success: #16a34a;
  --engine-success-light: #dcfce7;
  --engine-success-dark: #166534;
  --engine-error: #dc2626;
  --engine-error-light: #fee2e2;
  --engine-error-dark: #991b1b;
  --engine-warning: #ca8a04;
  --engine-warning-light: #fef3c7;
  --engine-warning-dark: #78350f;

  /* Font Stack */
  --engine-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* No global reset — scoped to engine elements only */

/* ============================================
   TOPBAR
   ============================================ */

.engine-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 48px;
  background-color: var(--engine-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.engine-topbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.engine-back-btn {
  background: none;
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.engine-back-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.engine-course-title {
  font-size: 16px;
  font-weight: 500;
  color: white;
}

.engine-topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.engine-user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.engine-user-info-name {
  color: white;
  font-weight: 500;
}

.engine-user-info-role {
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
}

.engine-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: white;
  font-size: 12px;
}

/* ============================================
   SIDEBAR
   ============================================ */

.engine-sidebar {
  position: fixed;
  left: 0;
  top: 48px;
  width: 270px;
  height: calc(100vh - 48px);
  background-color: var(--engine-card);
  border-right: 1px solid var(--engine-border);
  overflow-y: auto;
  z-index: 90;
  padding: 24px 0;
}

.engine-nav-section {
  padding: 0;
  margin-bottom: 4px;
}

.engine-nav-section-title {
  padding: 8px 24px 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--engine-text-muted);
  letter-spacing: 0.5px;
}

.engine-nav-item {
  padding: 8px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--engine-text-light);
  text-decoration: none;
  font-size: 13px;
  transition: all 0.15s;
  cursor: pointer;
  border: none;
  border-left: 3px solid transparent;
  background: none;
  width: 100%;
  text-align: left;
  font-family: var(--engine-font);
}

.engine-nav-item:hover:not(.engine-nav-item--disabled) {
  background-color: var(--engine-bg);
}

.engine-nav-item--active {
  background-color: rgba(13, 115, 119, 0.08);
  border-left-color: var(--engine-primary);
  color: var(--engine-primary);
  font-weight: 500;
}

.engine-nav-item--disabled {
  color: var(--engine-text-muted);
  cursor: not-allowed;
  opacity: 0.6;
}

.engine-nav-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.engine-nav-badge {
  margin-left: auto;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.engine-nav-badge--done {
  background-color: var(--engine-success-light);
  color: var(--engine-success-dark);
}

.engine-nav-badge--score {
  background-color: rgba(13, 115, 119, 0.1);
  color: var(--engine-primary);
}

.engine-nav-badge--locked {
  background-color: #f0f0f0;
  color: var(--engine-text-muted);
}

.engine-nav-label {
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.engine-nav-divider {
  height: 1px;
  background-color: var(--engine-border);
  margin: 8px 0;
}

/* ============================================
   MAIN CONTENT
   ============================================ */

.engine-main {
  margin-left: 270px;
  margin-top: 48px;
  padding: 40px 24px;
  max-width: 1200px;
  margin-right: auto;
}

/* Keep prose paragraphs at a comfortable reading width even though the
   container is wide enough for 10-column schedules to fit. Tables,
   callouts, and metric cards still span the full card width. */
.engine-content-card > p,
.engine-content-card > h2,
.engine-content-card > h3,
.engine-content-card > ul,
.engine-content-card > ol {
  max-width: 820px;
}

/* ============================================
   DASHBOARD
   ============================================ */

.engine-dashboard-title {
  font-size: 28px;
  font-weight: 600;
  color: var(--engine-text);
  margin-bottom: 8px;
}

.engine-dashboard-desc {
  font-size: 14px;
  color: var(--engine-text-light);
  margin-bottom: 32px;
}

.engine-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.engine-stat-card {
  background-color: var(--engine-card);
  border: 1px solid var(--engine-border);
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.2s;
}

.engine-stat-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: var(--engine-secondary);
}

.engine-stat-label {
  font-size: 13px;
  color: var(--engine-text-light);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.engine-stat-value {
  font-size: 32px;
  font-weight: 600;
  color: var(--engine-primary);
}

/* ============================================
   CONTENT CARDS
   ============================================ */

.engine-content-card {
  background-color: var(--engine-card);
  border: 1px solid var(--engine-border);
  border-radius: 8px;
  padding: 32px 36px;
  margin-bottom: 24px;
  transition: all 0.2s;
}

.engine-content-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.engine-content-card-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--engine-text);
  margin-bottom: 12px;
}

.engine-content-card-desc {
  font-size: 14px;
  color: var(--engine-text-light);
  margin-bottom: 16px;
  line-height: 1.6;
}

/* ============================================
   LESSON CONTENT TYPOGRAPHY
   ============================================ */

.engine-content-card h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--engine-text);
  margin-bottom: 20px;
  line-height: 1.3;
}

.engine-content-card h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--engine-primary);
  margin-top: 28px;
  margin-bottom: 12px;
  line-height: 1.4;
}

.engine-content-card p {
  font-size: 14px;
  color: var(--engine-text);
  line-height: 1.75;
  margin-bottom: 14px;
}

.engine-content-card ul {
  padding-left: 24px;
  margin-bottom: 16px;
}

.engine-content-card ul li {
  font-size: 14px;
  color: var(--engine-text);
  line-height: 1.75;
  margin-bottom: 6px;
}

/* ============================================
   ALERT BOXES
   ============================================ */

.engine-tip-box {
  background-color: #f0fdfa;
  border: 1px solid #99f6e4;
  border-radius: 8px;
  padding: 16px 20px;
  margin: 18px 0;
}

.engine-tip-box-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--engine-primary);
  margin-bottom: 4px;
}

.engine-tip-box-text {
  font-size: 13px;
  color: var(--engine-text);
  line-height: 1.6;
}

.engine-warning-box {
  background-color: var(--engine-warning-light);
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 16px 20px;
  margin: 18px 0;
}

.engine-warning-box-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--engine-warning-dark);
  margin-bottom: 4px;
}

.engine-warning-box-text {
  font-size: 13px;
  color: var(--engine-warning-dark);
  line-height: 1.5;
}

/* ============================================
   METRICS
   ============================================ */

.engine-metric-card {
  background-color: var(--engine-bg);
  border-left: 3px solid var(--engine-primary);
  border-radius: 0 8px 8px 0;
  padding: 16px 20px;
  margin: 18px 0;
}

.engine-metric-label {
  font-size: 12px;
  color: var(--engine-text-light);
  font-weight: 500;
  margin-bottom: 4px;
}

.engine-metric-value {
  font-size: 20px;
  font-weight: 600;
  color: var(--engine-text);
}

/* ============================================
   TABLES
   ============================================ */

.engine-content-table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0;
}

.engine-content-table thead {
  background-color: var(--engine-bg);
  border-bottom: 2px solid var(--engine-border);
}

.engine-content-table th {
  padding: 12px 16px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--engine-text-muted);
  letter-spacing: 0.5px;
}

.engine-content-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--engine-border);
  font-size: 13px;
  color: var(--engine-text);
}

.engine-content-table tbody tr:hover {
  background-color: var(--engine-bg);
}

/* ============================================
   LESSON NAVIGATION
   ============================================ */

.engine-lesson-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 28px;
  border-top: 1px solid var(--engine-border);
  padding-top: 20px;
}

.engine-progress-text {
  font-size: 12px;
  color: var(--engine-text-muted);
  white-space: nowrap;
}

/* ============================================
   BUTTONS
   ============================================ */

.engine-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--engine-font);
  text-decoration: none;
}

.engine-btn--primary {
  background-color: var(--engine-primary);
  color: white;
}

.engine-btn--primary:hover {
  background-color: var(--engine-secondary);
  box-shadow: 0 4px 12px rgba(13, 115, 119, 0.2);
}

.engine-btn--primary:active {
  transform: scale(0.98);
}

.engine-btn--primary:disabled {
  background-color: var(--engine-text-muted);
  cursor: not-allowed;
  opacity: 0.6;
}

.engine-btn--ghost {
  background-color: transparent;
  color: var(--engine-text-light);
  border: 1px solid var(--engine-border);
}

.engine-btn--ghost:hover {
  background-color: var(--engine-bg);
  border-color: var(--engine-text-light);
}

.engine-btn--ghost:active {
  transform: scale(0.98);
}

.engine-btn--small {
  padding: 8px 16px;
  font-size: 12px;
}

/* Content-table wrapper: horizontal scroll + compact styling for wide lesson tables */
.engine-ctable-wrap {
  overflow-x: auto;
  margin: 16px 0;
  border: 1px solid var(--engine-border);
  border-radius: 6px;
}
.engine-content-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 12px;
  margin: 0;
}
.engine-content-table th,
.engine-content-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--engine-border);
  vertical-align: middle;
  white-space: nowrap;
}
.engine-content-table th {
  background: var(--engine-bg);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--engine-text-light);
}
.engine-content-table tr:last-child td { border-bottom: none; }
.engine-ctable-cell--num,
.engine-ctable-cell--date {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.engine-ctable-cell--empty { color: var(--engine-text-muted); text-align: center; }

/* Lesson navigation: buttons use short step-N labels (full title in title attr) */
.engine-lesson-nav button[data-navigate] {
  white-space: nowrap;
  flex-shrink: 0;
}

/* SOI Drill styles */
.engine-soi-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--engine-border);
  border-radius: 6px;
}
.engine-soi-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.engine-soi-table th,
.engine-soi-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--engine-border);
  vertical-align: middle;
}
.engine-soi-table th {
  background: var(--engine-bg);
  font-weight: 600;
  font-size: 12px;
  color: var(--engine-text-light);
}
.engine-soi-table tr:last-child td {
  border-bottom: none;
}
.engine-soi-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.engine-soi-small {
  font-size: 12px;
  color: var(--engine-text-light);
}
.engine-soi-readonly {
  padding: 6px 8px;
  background: var(--engine-bg);
  border-radius: 4px;
  font-size: 12px;
  color: var(--engine-text-light);
  white-space: nowrap;
}
.engine-soi-input {
  width: 100%;
  min-width: 90px;
  padding: 6px 8px;
  border: 1px solid var(--engine-border);
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
}
.engine-soi-input:focus {
  outline: none;
  border-color: var(--engine-primary);
  box-shadow: 0 0 0 2px rgba(13, 115, 119, 0.15);
}
.engine-soi-input--correct {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgb(34, 197, 94);
  color: rgb(22, 101, 52);
}
.engine-soi-input--wrong {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgb(239, 68, 68);
  color: rgb(127, 29, 29);
}
.engine-soi-input-table td {
  padding: 6px;
}
.engine-soi-hint {
  margin-top: 12px;
  padding: 12px 16px;
  background: rgba(245, 158, 11, 0.08);
  border-left: 3px solid rgb(245, 158, 11);
  border-radius: 4px;
  font-size: 13px;
}
.engine-soi-difficulty {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.engine-soi-difficulty--simple   { background: #dcfce7; color: #14532d; }
.engine-soi-difficulty--moderate { background: #fef3c7; color: #78350f; }
.engine-soi-difficulty--complex  { background: #fee2e2; color: #7f1d1d; }

.engine-quiz-question--unanswered {
  border-left: 3px solid #f59e0b;
  padding-left: 12px;
  margin-left: -15px;
}

.engine-quiz-question--flash {
  animation: engine-quiz-flash 1.6s ease-out;
  border-radius: 8px;
}

@keyframes engine-quiz-flash {
  0%   { background-color: rgba(245, 158, 11, 0.25); box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.25); }
  100% { background-color: transparent; box-shadow: 0 0 0 0 transparent; }
}

.engine-btn--full {
  width: 100%;
}

/* ============================================
   QUIZ
   ============================================ */

.engine-quiz-question {
  background-color: var(--engine-card);
  border: 1px solid var(--engine-border);
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 24px;
}

.engine-quiz-question-number {
  font-size: 12px;
  font-weight: 600;
  color: var(--engine-text-light);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.engine-quiz-question-text {
  font-size: 16px;
  font-weight: 500;
  color: var(--engine-text);
  margin-bottom: 16px;
  line-height: 1.6;
}

.engine-quiz-choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.engine-quiz-choice {
  padding: 14px 16px;
  border: 2px solid var(--engine-border);
  border-radius: 6px;
  background-color: white;
  cursor: pointer;
  font-size: 14px;
  color: var(--engine-text);
  transition: all 0.2s;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  width: 100%;
  font-family: var(--engine-font);
  line-height: 1.5;
}

.engine-quiz-choice:hover {
  border-color: var(--engine-secondary);
  background-color: var(--engine-bg);
}

.engine-quiz-choice-radio {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border: 2px solid var(--engine-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
  margin-top: 1px;
}

.engine-quiz-choice--selected {
  border-color: var(--engine-primary);
  background-color: rgba(13, 115, 119, 0.05);
}

.engine-quiz-choice--selected .engine-quiz-choice-radio {
  background-color: var(--engine-primary);
  border-color: var(--engine-primary);
}

.engine-quiz-choice--selected .engine-quiz-choice-radio::after {
  content: '✓';
  color: white;
  font-size: 12px;
  font-weight: bold;
}

.engine-quiz-choice--correct {
  border-color: var(--engine-success);
  background-color: var(--engine-success-light);
  color: var(--engine-success-dark);
}

.engine-quiz-choice--correct .engine-quiz-choice-radio {
  background-color: var(--engine-success);
  border-color: var(--engine-success);
}

.engine-quiz-choice--correct .engine-quiz-choice-radio::after {
  content: '✓';
  color: white;
  font-size: 12px;
  font-weight: bold;
}

.engine-quiz-choice--wrong {
  border-color: var(--engine-error);
  background-color: var(--engine-error-light);
  color: var(--engine-error-dark);
}

.engine-quiz-choice--wrong .engine-quiz-choice-radio {
  background-color: var(--engine-error);
  border-color: var(--engine-error);
}

.engine-quiz-choice--wrong .engine-quiz-choice-radio::after {
  content: '✗';
  color: white;
  font-size: 12px;
  font-weight: bold;
}

/* True/False Quiz */

.engine-quiz-tf {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}

.engine-quiz-tf-btn {
  padding: 16px;
  border: 2px solid var(--engine-border);
  border-radius: 6px;
  background-color: white;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--engine-text);
  transition: all 0.2s;
}

.engine-quiz-tf-btn:hover {
  border-color: var(--engine-secondary);
  background-color: var(--engine-bg);
}

.engine-quiz-tf-btn--selected {
  border-color: var(--engine-primary);
  background-color: rgba(13, 115, 119, 0.05);
  color: var(--engine-primary);
}

.engine-quiz-tf-btn--correct {
  border-color: var(--engine-success);
  background-color: var(--engine-success-light);
  color: var(--engine-success-dark);
}

.engine-quiz-tf-btn--wrong {
  border-color: var(--engine-error);
  background-color: var(--engine-error-light);
  color: var(--engine-error-dark);
}

/* Quiz Results */

.engine-quiz-results {
  background-color: var(--engine-card);
  border: 1px solid var(--engine-border);
  border-radius: 8px;
  padding: 32px;
  text-align: center;
  margin-bottom: 24px;
}

.engine-quiz-results-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--engine-text);
  margin-bottom: 8px;
}

.engine-quiz-results-subtitle {
  font-size: 14px;
  color: var(--engine-text-light);
  margin-bottom: 24px;
}

.engine-quiz-score {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 24px;
  display: inline-block;
  padding: 24px 48px;
  background-color: var(--engine-bg);
  border-radius: 8px;
}

.engine-quiz-score--pass {
  color: var(--engine-success);
}

.engine-quiz-score--fail {
  color: var(--engine-error);
}

.engine-quiz-feedback {
  margin-top: 24px;
  padding: 16px;
  background-color: var(--engine-bg);
  border-radius: 6px;
  font-size: 14px;
  color: var(--engine-text-light);
  line-height: 1.6;
}

/* ============================================
   REPORTS
   ============================================ */

.engine-report-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
}

.engine-report-table thead {
  background-color: var(--engine-bg);
  border-bottom: 2px solid var(--engine-border);
}

.engine-report-table th {
  padding: 12px 16px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--engine-text-muted);
  letter-spacing: 0.5px;
}

.engine-report-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--engine-border);
  font-size: 13px;
  color: var(--engine-text);
}

.engine-report-table tbody tr:hover {
  background-color: var(--engine-bg);
}

.engine-report-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
}

.engine-report-badge--pass {
  background-color: var(--engine-success-light);
  color: var(--engine-success-dark);
}

.engine-report-badge--fail {
  background-color: var(--engine-error-light);
  color: var(--engine-error-dark);
}

.engine-report-badge--pending {
  background-color: #f0f0f0;
  color: var(--engine-text-muted);
}

/* ============================================
   MOBILE HEADER
   ============================================ */

.engine-mobile-header {
  display: none;
}

.engine-hamburger {
  background: none;
  border: none;
  color: var(--engine-primary);
  font-size: 24px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 6px;
  transition: background-color 0.2s;
}

.engine-hamburger:hover {
  background-color: var(--engine-bg);
}

/* ============================================
   RESPONSIVE - MOBILE (768px)
   ============================================ */

@media (max-width: 768px) {
  .engine-mobile-header {
    display: flex;
    align-items: center;
    position: fixed;
    top: 48px;
    left: 0;
    right: 0;
    height: 44px;
    background-color: var(--engine-card);
    border-bottom: 1px solid var(--engine-border);
    padding: 0 12px;
    z-index: 85;
  }

  .engine-main {
    margin-top: 92px;
  }

  .engine-sidebar {
    top: 92px;
    height: calc(100vh - 92px);
  }

  .engine-topbar {
    padding: 0 16px;
  }

  .engine-topbar-left {
    gap: 12px;
  }

  .engine-course-title {
    font-size: 14px;
  }

  .engine-sidebar {
    position: fixed;
    left: 0;
    top: 48px;
    width: 270px;
    height: calc(100vh - 48px);
    background-color: var(--engine-card);
    border-right: 1px solid var(--engine-border);
    overflow-y: auto;
    z-index: 80;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }

  .engine-sidebar.engine-sidebar--open {
    transform: translateX(0);
  }

  .engine-main {
    margin-left: 0;
    margin-top: 48px;
    padding: 24px 16px;
  }

  .engine-dashboard-title {
    font-size: 24px;
  }

  .engine-stats-row {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 24px;
  }

  .engine-quiz-tf {
    grid-template-columns: 1fr;
  }

  .engine-btn {
    padding: 10px 20px;
    font-size: 13px;
  }

  .engine-content-card {
    padding: 20px;
  }

  .engine-quiz-question {
    padding: 16px;
  }
}

@media (max-width: 480px) {
  .engine-topbar {
    padding: 0 12px;
  }

  .engine-topbar-right {
    gap: 8px;
  }

  .engine-user-info {
    font-size: 12px;
  }

  .engine-avatar {
    width: 28px;
    height: 28px;
    font-size: 11px;
  }

  .engine-course-title {
    display: none;
  }

  .engine-main {
    padding: 16px 12px;
  }

  .engine-dashboard-title {
    font-size: 20px;
  }

  .engine-content-card {
    padding: 12px;
    margin-bottom: 16px;
  }

  .engine-content-card-title {
    font-size: 16px;
  }

  .engine-quiz-question {
    padding: 12px;
  }

  .engine-btn {
    padding: 10px 16px;
    font-size: 12px;
  }
}

/* KPI table context for inline-check questions */
.engine-kpi-table-wrap {
  margin: 12px 0 16px;
  border: 1px solid var(--engine-border, #e5e7eb);
  border-radius: 6px;
  overflow: hidden;
}
.engine-kpi-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.engine-kpi-table td {
  padding: 6px 12px;
  border-bottom: 1px solid var(--engine-border, #e5e7eb);
}
.engine-kpi-table tr:last-child td { border-bottom: none; }
.engine-kpi-row-amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.engine-kpi-row--highlight td {
  background: #fff7ed;
}
.engine-kpi-row-note {
  color: var(--engine-text-light, #6b7280);
  font-size: 12px;
  font-style: italic;
}
.engine-quiz-question-heading {
  font-weight: 600;
  margin: 4px 0 8px;
  color: var(--engine-text, #111827);
}

/* Numeric input for KPI drill questions */
.engine-quiz-numeric {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.engine-quiz-num-unit {
  font-weight: 600;
  color: var(--engine-text-light, #6b7280);
  font-size: 16px;
}
.engine-quiz-num-input {
  padding: 10px 12px;
  border: 1.5px solid var(--engine-border, #d1d5db);
  border-radius: 6px;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  width: 220px;
}
.engine-quiz-num-input:focus {
  outline: none;
  border-color: var(--engine-primary, #0d9488);
}
.engine-quiz-num-input--correct {
  border-color: #059669;
  background: #ecfdf5;
}
.engine-quiz-num-input--wrong {
  border-color: #dc2626;
  background: #fef2f2;
}
.engine-quiz-num-reveal {
  color: #dc2626;
  font-size: 13px;
  margin-top: 4px;
  font-weight: 500;
}