/* =========================================================
   OPC Luyện Thi Vật Lí - PrepScholar Adaptive UI Stylesheet
   Theo phong cách thiết kế PrepScholar: Tinh tế, rõ ràng,
   phản xạ cao, màu sắc chuẩn xác theo trạng thái năng lực.
   ========================================================= */

.ps-wrapper {
  margin-top: 24px;
}

/* Header & Student Profile Bar */
.ps-profile-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-bottom: 20px;
}
.ps-student-picker {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ps-avatar-badge {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 20%, var(--surface-2));
  color: var(--accent-strong);
  font-weight: 700;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.ps-student-meta h4 {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--ink);
}
.ps-student-meta p {
  margin: 2px 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}
.ps-student-select {
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  font: 0.85rem "Be Vietnam Pro", sans-serif;
  font-weight: 600;
  cursor: pointer;
}
.ps-student-select:focus {
  outline: 2px solid var(--accent);
}

/* Metric Cards Grid */
.ps-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}
@media (max-width: 900px) {
  .ps-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 500px) {
  .ps-metrics-grid {
    grid-template-columns: 1fr;
  }
}
.ps-metric-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
  position: relative;
  overflow: hidden;
}
.ps-metric-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--line);
}
.ps-metric-card.accent::before { background: var(--accent); }
.ps-metric-card.good::before { background: var(--good); }
.ps-metric-card.warning::before { background: var(--warning); }
.ps-metric-card.critical::before { background: var(--critical); }

.ps-metric-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 700;
}
.ps-metric-val {
  font-family: "IBM Plex Mono", monospace;
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--ink);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.ps-metric-sub {
  font-size: 0.75rem;
  color: var(--ink-2);
  margin-top: 4px;
}

/* Tab Switcher — SỬA 28/9/2026: đổi từ 1 hàng cuộn ngang (overflow-x:auto,
   white-space:nowrap) sang dạng "viên thuốc" (pill) tự xuống dòng khi hết
   chỗ (flex-wrap). Thầy phản ánh thanh tab cũ dài, học sinh khó thấy hết —
   đúng vậy: kiểu cuộn ngang cũ KHÔNG có gợi ý còn tab bị trôi ra ngoài (vd
   "Đề được giao"/"Thi thử & Chẩn đoán" mất hút bên phải), học sinh phải tự
   đoán để vuốt tìm. Nay mọi tab luôn hiện đủ trên màn hình, không cần vuốt.
   Tên vài tab cũng được rút gọn (bỏ phần tiếng Anh trong ngoặc, chuyển vào
   title/tooltip) để mỗi "viên" gọn hơn, đỡ chiếm chỗ. */
.ps-nav-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.ps-tab-btn {
  background: var(--surface-2);
  border: 1px solid var(--line);
  padding: 9px 16px;
  font: 0.85rem "Be Vietnam Pro", sans-serif;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: all 140ms ease;
  position: relative;
}
.ps-tab-btn:hover {
  color: var(--ink);
  border-color: var(--accent);
}
.ps-tab-btn.active {
  color: var(--accent-ink);
  font-weight: 700;
  background: var(--accent);
  border-color: var(--accent);
}
.ps-tab-badge {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
}
.ps-tab-btn.active .ps-tab-badge {
  background: color-mix(in srgb, var(--accent-ink) 20%, transparent);
  color: var(--accent-ink);
}
/* Màn hẹp (điện thoại đứng): thu nhỏ thêm chữ/khoảng đệm để nhiều tab vẫn
   vừa mỗi hàng trước khi phải xuống dòng, đỡ tốn chiều cao màn hình. */
@media (max-width: 560px) {
  .ps-tab-btn {
    padding: 7px 12px;
    font-size: 0.78rem;
    gap: 6px;
  }
}

/* Topic Drill Cards */
.ps-topic-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 14px;
}
@media (max-width: 768px) {
  .ps-topic-grid {
    grid-template-columns: 1fr;
  }
}
.ps-topic-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 140ms ease, border-color 140ms ease;
}
.ps-topic-card:hover {
  border-color: var(--ink-2);
  transform: translateY(-2px);
}
.ps-topic-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.ps-topic-title {
  font-family: "Literata", serif;
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--ink);
}
.ps-topic-status-badge {
  font-family: "Be Vietnam Pro", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.ps-topic-status-badge.critical {
  background: color-mix(in srgb, var(--critical) 15%, transparent);
  color: var(--critical);
}
.ps-topic-status-badge.warning {
  background: color-mix(in srgb, var(--warning) 15%, transparent);
  color: var(--warning);
}
.ps-topic-status-badge.good {
  background: color-mix(in srgb, var(--good) 15%, transparent);
  color: var(--good);
}

.ps-meter-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-2);
  margin: 14px 0 8px;
  overflow: hidden;
}
.ps-meter-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 300ms ease;
}
.ps-meter-fill.critical { background: var(--critical); }
.ps-meter-fill.warning { background: var(--warning); }
.ps-meter-fill.good { background: var(--good); }

.ps-topic-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

/* Bản đồ kiến thức mức nano (mô hình Squirrel AI) */
.ps-nano-weak-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.ps-nano-weak-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 12px;
}
.ps-nano-weak-name { flex: 1; font-size: 0.85rem; color: var(--ink); min-width: 0; }
.ps-nano-weak-sub { font-size: 0.72rem; color: var(--muted); margin-top: 1px; }
.ps-nano-weak-pct {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 2px 9px;
  border-radius: 999px;
  flex: none;
}
.ps-nano-weak-pct.critical { background: color-mix(in srgb, var(--critical) 15%, transparent); color: var(--critical); }
.ps-nano-weak-pct.warning { background: color-mix(in srgb, var(--warning) 15%, transparent); color: var(--warning); }
.ps-nano-weak-pct.good { background: color-mix(in srgb, var(--good) 15%, transparent); color: var(--good); }

.ps-nano-map { display: flex; flex-direction: column; gap: 18px; margin-top: 18px; }
.ps-nano-topic {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
}
.ps-nano-topic-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Literata", serif;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}
.ps-nano-topic-mastery { font-family: "IBM Plex Mono", monospace; font-size: 0.8rem; color: var(--muted); font-weight: 700; }
.ps-nano-bai-grid { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.ps-nano-bai { }
.ps-nano-bai-name { font-size: 0.8rem; color: var(--ink-2); font-weight: 600; margin-bottom: 6px; }
.ps-nano-tile-row { display: flex; gap: 6px; flex-wrap: wrap; }
.ps-nano-tile {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  cursor: default;
  position: relative;
}
.ps-nano-tile.crit { background: color-mix(in srgb, var(--critical) 55%, transparent); border: 1px solid var(--critical); }
.ps-nano-tile.warn { background: color-mix(in srgb, var(--warning) 45%, transparent); border: 1px solid var(--warning); }
.ps-nano-tile.good { background: color-mix(in srgb, var(--good) 40%, transparent); border: 1px solid var(--good); }
/* Tag chưa từng kiểm tra — không còn số minh hoạ, chỉ tô xám trung tính
   để phân biệt rõ với đỏ/vàng/xanh (đã có số liệu thật). */
.ps-nano-tile.untested { background: var(--surface-2); border: 1px dashed var(--line); }
@media (max-width: 480px) {
  .ps-nano-tile { width: 26px; height: 26px; }
}
.ps-drill-btn {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ===== Thẻ Cấp độ/XP + Radar năng lực 5 chiều (Trang chủ) ===== */
.ps-hero-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}
@media (max-width: 700px) {
  .ps-hero-grid { grid-template-columns: 1fr; }
}
.ps-hero-forecast { justify-content: center; }

.ps-level-card {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--surface)), var(--surface));
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ps-level-top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ps-level-badge {
  flex-shrink: 0;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 700;
  font-size: 0.9rem;
  color: #fff;
  background: var(--accent-strong);
  border-radius: 999px;
  padding: 8px 14px;
}
.ps-level-titles { min-width: 0; }
.ps-level-title {
  font-family: "Literata", serif;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--ink);
}
.ps-level-xp-text {
  font-size: 0.76rem;
  color: var(--muted);
  font-family: "IBM Plex Mono", monospace;
  margin-top: 2px;
}
.ps-level-xp-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}
.ps-level-xp-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--accent-strong);
  transition: width 0.3s ease;
}
.ps-level-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--ink-2);
}
.ps-level-log-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent-strong);
  font-weight: 600;
  font-size: 0.78rem;
  cursor: pointer;
}
.ps-level-log-link:hover { text-decoration: underline; }

.ps-radar-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px 20px;
  margin-bottom: 18px;
}
.ps-radar-card-head { margin-bottom: 6px; }
.ps-radar-wrap { padding-top: 4px; }
.ps-radar-legend {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--ink-2);
}
.ps-radar-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.ps-radar-legend-item.muted { color: var(--muted); font-style: italic; }
.ps-radar-swatch {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}
.ps-radar-swatch.dashed {
  background: none;
  border: 2px dashed var(--muted);
  width: 8px;
  height: 8px;
}
.ps-radar-empty-note {
  text-align: center;
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 10px;
  font-style: italic;
}

/* Thanh "Thoát" mỏng thay cho Hồ sơ+Chỉ số+Điều hướng khi đang khoá trong
   quy trình Vá lỗi (Learning & Remediation Flow) — xem renderRemediationStep
   và lockedMode trong prepscholar-ui.js. */
.ps-lock-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 20px;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border: 1px solid var(--accent-strong, var(--line));
  border-radius: 12px;
  font-size: 0.86rem;
  font-weight: 600;
}

/* Màn hình bước 1 (Video) / bước 2 (Concept Card) của quy trình Vá lỗi */
.ps-remediation-screen {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 26px;
  max-width: 640px;
  margin: 0 auto;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}
.ps-remediation-step-badge {
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--accent-strong);
  background: color-mix(in srgb, var(--accent) 20%, var(--surface-2));
  padding: 4px 10px;
  border-radius: 999px;
}
.ps-remediation-card-block {
  font-size: 0.92rem;
  line-height: 1.7;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 10px;
}

/* Active Exam Taking Room */
.ps-exam-screen {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}
.ps-exam-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
}
.ps-exam-title-group h3 {
  font-family: "Literata", serif;
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0;
  color: var(--ink);
}
.ps-exam-title-group p {
  margin: 2px 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}
.ps-exam-timer {
  font-family: "IBM Plex Mono", monospace;
  font-size: 1.1rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 8px;
}
.ps-exam-timer.urgent {
  background: color-mix(in srgb, var(--critical) 12%, transparent);
  color: var(--critical);
  border-color: var(--critical);
  animation: pulse 1s infinite;
}

/* Question Navigator Grid */
.ps-q-nav-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
  padding: 12px;
  background: var(--surface-2);
  border-radius: 10px;
}
.ps-q-nav-btn {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 120ms ease;
}
.ps-q-nav-btn:hover {
  border-color: var(--ink-2);
}
.ps-q-nav-btn.answered {
  background: color-mix(in srgb, var(--good) 15%, var(--surface));
  border-color: var(--good);
  color: var(--good);
}
.ps-q-nav-btn.flagged::after {
  content: "🚩";
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: 0.65rem;
}
.ps-q-nav-btn.current {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  font-weight: 700;
  border-color: var(--accent);
}

/* Question Body */
.ps-question-box {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}
.ps-q-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}
.ps-q-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ps-q-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 5px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-2);
}
.ps-q-badge.level-m1 { color: #0369a1; border-color: #0369a1; }
.ps-q-badge.level-m2 { color: #15803d; border-color: #15803d; }
.ps-q-badge.level-m3 { color: #b45309; border-color: #b45309; }
.ps-q-badge.level-m4 { color: #b91c1c; border-color: #b91c1c; }

.ps-q-stem {
  font-size: 0.96rem;
  line-height: 1.65;
  color: var(--ink);
  margin-bottom: 18px;
}

/* Part I: Choice Rows */
.ps-choice-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ps-choice-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition: all 120ms ease;
}
.ps-choice-item:hover {
  border-color: var(--ink-2);
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
}
.ps-choice-item.selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  font-weight: 600;
}
.ps-choice-key {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  font-family: "IBM Plex Mono", monospace;
  font-weight: 700;
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.ps-choice-item.selected .ps-choice-key {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Phản hồi tức thì trong Luyện tập thích ứng (CAT-lite): tô màu đáp án
   đúng/sai ngay sau khi bấm "Kiểm tra đáp án" — không có ở các chế độ
   khác (Drill/Thi thử/Kiểm tra đầu vào chỉ tô màu sau khi nộp cả bài). */
.ps-choice-item.correct-answer {
  border-color: var(--good);
  background: color-mix(in srgb, var(--good) 14%, var(--surface));
  font-weight: 600;
}
.ps-choice-item.correct-answer .ps-choice-key {
  background: var(--good);
  color: #fff;
  border-color: var(--good);
}
.ps-choice-item.wrong-answer {
  border-color: var(--critical);
  background: color-mix(in srgb, var(--critical) 12%, var(--surface));
}
.ps-choice-item.wrong-answer .ps-choice-key {
  background: var(--critical);
  color: #fff;
  border-color: var(--critical);
}

/* Part II: Statements Table */
.ps-stmt-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.ps-stmt-row {
  border-bottom: 1px solid var(--line);
}
.ps-stmt-row:last-child {
  border-bottom: none;
}
.ps-stmt-text {
  padding: 12px 16px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink);
}
.ps-stmt-key {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 700;
  margin-right: 8px;
  color: var(--accent-strong);
}
.ps-stmt-actions {
  padding: 12px 16px;
  text-align: right;
  white-space: nowrap;
  width: 160px;
}
.ps-stmt-toggle {
  display: inline-flex;
  gap: 6px;
}
.ps-stmt-btn {
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  cursor: pointer;
  font-family: "Be Vietnam Pro", sans-serif;
  transition: all 120ms ease;
}
.ps-stmt-btn:hover {
  color: var(--ink);
}
.ps-stmt-btn.active-true {
  background: color-mix(in srgb, var(--good) 18%, transparent);
  color: var(--good);
  border-color: var(--good);
}
.ps-stmt-btn.active-false {
  background: color-mix(in srgb, var(--critical) 18%, transparent);
  color: var(--critical);
  border-color: var(--critical);
}

/* Bảng số liệu LaTeX (\begin{tabular}...\end{tabular}) trong đề bài/lời giải
   — THÊM 27/9/2026: trước đây bảng loại này chỉ hiện chữ thô nối bằng "&",
   không có khung/viền gì (xem tokenizeLatexRuns trong prepscholar-ui.js). */
.ps-latex-table {
  border-collapse: collapse;
  margin: 4px 0;
  font-size: 0.88rem;
}
.ps-latex-table td {
  border: 1px solid var(--line);
  padding: 6px 12px;
  text-align: center;
  color: var(--ink);
}
.ps-latex-table tr:first-child td {
  font-weight: 700;
  background: var(--surface-2);
}

/* Part III: Short Answer */
.ps-short-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px;
}
.ps-short-input-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}
.ps-short-input {
  max-width: 220px;
  width: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  font-family: "IBM Plex Mono", monospace;
  font-size: 1.1rem;
  font-weight: 700;
}
.ps-short-input:focus {
  outline: 2px solid var(--accent);
}
.ps-short-unit {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 600;
  color: var(--muted);
  font-size: 0.95rem;
}

/* Exam Controls Bottom Bar */
.ps-exam-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

/* Result / Graded Screen */
.ps-result-banner {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px;
  text-align: center;
  margin-bottom: 22px;
}
.ps-result-score-val {
  font-family: "IBM Plex Mono", monospace;
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--accent-strong);
  line-height: 1;
  margin-bottom: 8px;
}
.ps-result-sub {
  font-size: 0.9rem;
  color: var(--ink-2);
}
.ps-impact-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: color-mix(in srgb, var(--good) 15%, transparent);
  color: var(--good);
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
  margin-top: 12px;
}

/* Solution Box */
.ps-solution-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 16px;
}
.ps-solution-card.wrong {
  border-left: 4px solid var(--critical);
}
.ps-solution-card.correct {
  border-left: 4px solid var(--good);
}
.ps-solution-body {
  margin-top: 12px;
  padding: 14px;
  background: var(--surface-2);
  border-radius: 8px;
  font-size: 0.88rem;
  line-height: 1.65;
}
.ps-trap-tip {
  margin-top: 10px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--warning) 12%, transparent);
  border-left: 3px solid var(--warning);
  border-radius: 4px;
  font-size: 0.82rem;
  color: var(--ink);
  line-height: 1.5;
}

/* OPC Learning AI — gia sư ảo cá nhân hoá: nút hỏi + khung hội thoại trong
   Sổ tay câu sai (xem askAiTutor trong prepscholar-ui.js, gọi api/ai-tutor.js).
   Thiết kế dạng "mascot + bong bóng chat" gọn nhẹ, lấy cảm hứng từ các nền
   tảng gia sư AI thích ứng (kiểu Squirrel AI). */
.ps-ai-tutor-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding: 7px 18px 7px 7px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--surface)), var(--surface));
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.ps-ai-tutor-trigger:hover:not(:disabled) {
  border-color: var(--accent-strong);
  box-shadow: 0 3px 12px color-mix(in srgb, var(--accent) 28%, transparent);
  transform: translateY(-1px);
}
.ps-ai-tutor-trigger:disabled {
  cursor: default;
  opacity: 0.9;
}
.ps-ai-tutor-trigger-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 40%, transparent);
}
.ps-ai-tutor-trigger.loading .ps-ai-tutor-trigger-avatar {
  animation: ps-ai-pulse 1.1s ease-in-out infinite;
}
.ps-ai-tutor-trigger-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.3;
}
.ps-ai-tutor-trigger-text b {
  font-size: 0.85rem;
  color: var(--ink);
  font-weight: 700;
}
.ps-ai-tutor-trigger-sub {
  font-size: 0.72rem;
  color: var(--muted);
}

.ps-ai-tutor-card {
  margin-top: 12px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 1px 4px color-mix(in srgb, #000 6%, transparent);
}
.ps-ai-tutor-card.typing {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface-2));
  border-color: color-mix(in srgb, var(--accent) 24%, var(--line));
}
.ps-ai-tutor-card.error {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: color-mix(in srgb, var(--critical) 8%, var(--surface-2));
  border-color: color-mix(in srgb, var(--critical) 30%, var(--line));
  color: var(--critical);
  font-size: 0.85rem;
}
.ps-ai-tutor-card-icon {
  flex-shrink: 0;
}
.ps-ai-tutor-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.ps-ai-tutor-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 40%, transparent);
}
.ps-ai-tutor-avatar.sm {
  width: 26px;
  height: 26px;
  font-size: 0.9rem;
}
.ps-ai-tutor-name {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ink);
}
.ps-ai-tutor-tag {
  font-size: 0.72rem;
  color: var(--muted);
}
.ps-ai-tutor-text {
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--ink);
  white-space: pre-wrap;
  margin: 0;
}
.ps-ai-tutor-disclaimer {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  font-size: 0.72rem;
  color: var(--muted);
  font-style: italic;
}
.ps-ai-tutor-typing-text {
  font-size: 0.82rem;
  color: var(--ink-2);
  font-style: italic;
}
.ps-ai-tutor-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ps-ai-tutor-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-strong);
  animation: ps-ai-bounce 1s infinite ease-in-out;
}
.ps-ai-tutor-dots span:nth-child(2) { animation-delay: 0.15s; }
.ps-ai-tutor-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes ps-ai-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
  40% { transform: translateY(-4px); opacity: 1; }
}
@keyframes ps-ai-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* OPC Learning AI — thẻ "Gợi ý hôm nay" ở Trang chủ (xem askAiSuggest
   trong prepscholar-ui.js, gọi api/ai-suggest.js). Dùng chung avatar/khung
   chat-bubble với Gia sư AI trong Sổ tay câu sai để đồng bộ thương hiệu. */
.ps-ai-suggest-card {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, var(--surface)), var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 18px;
}
.ps-ai-suggest-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.ps-ai-suggest-refresh {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  background: var(--surface);
  color: var(--accent-strong);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ps-ai-suggest-refresh:hover:not(:disabled) {
  border-color: var(--accent-strong);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 22%, transparent);
}
.ps-ai-suggest-refresh:disabled {
  cursor: default;
  opacity: 0.75;
}

/* Dòng ghi chú nhỏ trong màn làm bài Luyện tập thích ứng, báo khi AI đã
   xong việc sắp xếp lại thứ tự ưu tiên Tag (xem fetchAiAdaptivePriority
   trong prepscholar-ui.js, gọi api/ai-adaptive-priority.js). */
.ps-ai-adaptive-note {
  margin: 4px 0 0;
  font-size: 0.78rem;
  color: var(--accent-strong);
  font-style: italic;
}

/* Banner cảnh báo / thông tin — dùng cho màn đăng nhập & trạng thái ngân
   hàng đề thật trong PrepScholarApp (đồng bộ style với admin.html). */
.banner{ display:flex; align-items:flex-start; gap:10px; padding:13px 16px; border-radius:12px; font-size:0.85rem; line-height:1.55; }
.banner.warn{ background: color-mix(in srgb, var(--warning) 12%, var(--surface)); border:1px solid color-mix(in srgb, var(--warning) 35%, var(--line)); color: var(--ink); }
.banner.info{ background: var(--surface-2); border:1px solid var(--line); color: var(--ink-2); }
.banner b{ color: var(--ink); }
.ps-login-card{ max-width: 420px; margin: 40px auto; }

/* ============= Đề được giao — làm nổi bật + trạng thái hoàn thành =============
   THÊM 24/9/2026: (1) badge trên tab "Đề được giao" nhấp nháy nhẹ khi còn đề
   chưa làm, (2) banner nhắc trên Trang chủ, (3) pill trạng thái Đã hoàn
   thành/Chưa làm trên từng thẻ đề — xem prepscholar-ui.js (pendingAssignedCount). */
.ps-tab-badge.pending-pulse {
  background: color-mix(in srgb, var(--critical) 16%, transparent);
  color: var(--critical);
  font-weight: 700;
  animation: ps-tab-pulse 1.8s ease-in-out infinite;
}
@keyframes ps-tab-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--critical) 45%, transparent); }
  50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--critical) 0%, transparent); }
}

.ps-assigned-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  margin-bottom: 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--surface)), var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  cursor: pointer;
  transition: box-shadow .15s ease, transform .1s ease;
}
.ps-assigned-banner:hover {
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 20%, transparent);
  transform: translateY(-1px);
}
.ps-assigned-banner-icon {
  font-size: 1.7rem;
  flex-shrink: 0;
}
.ps-assigned-banner-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ps-assigned-banner-text b {
  font-size: 0.92rem;
  color: var(--ink);
}
.ps-assigned-banner-text span {
  font-size: 0.8rem;
  color: var(--accent-strong);
  font-weight: 600;
}

.ps-assigned-card.pending {
  border-left: 4px solid var(--warning);
}
.ps-assigned-card.done {
  border-left: 4px solid var(--good);
}
.ps-assigned-status {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.ps-assigned-status.done {
  background: color-mix(in srgb, var(--good) 14%, transparent);
  color: var(--good);
}
.ps-assigned-status.pending {
  background: color-mix(in srgb, var(--warning) 16%, transparent);
  color: var(--warning);
}