:root {
  --bg: #faf1e4;
  --panel: #fffbf4;
  --panel-alt: #f7ead9;
  --border: #e7d5b8;
  --text: #4a3324;
  --text-muted: #8c7455;
  --accent: #b5592f;
  --accent-hover: #984a26;
  --accent-soft: #f3ddc4;
  --accent-current: #b5592f;
  --answered: #7c9a5c;
  --unanswered: #d9c7a8;
  --wrong: #b8452f;
  --wrong-soft: #f6ddd2;
  --correct: #6b8f4e;
  --correct-soft: #e6efd9;
  --gold: #c08a1f;
  --gold-soft: #f6e7bd;
  --radius: 12px;
  --shadow: 0 3px 12px rgba(90, 62, 30, 0.08);
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Figtree", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

input[type="radio"],
input[type="checkbox"] {
  accent-color: var(--accent);
  width: 18px;
  height: 18px;
  cursor: pointer;
  transition: transform 0.1s ease;
}

input[type="radio"]:hover,
input[type="checkbox"]:hover {
  transform: scale(1.1);
}

input[type="text"],
input[type="number"],
input[type="search"],
input[type="email"],
textarea {
  font-family: var(--font-body);
  font-size: 0.92rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--panel-alt);
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

header.top-bar {
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 1px 6px rgba(90, 62, 30, 0.05);
}

header.top-bar h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  margin: 0;
  color: var(--text);
}

header.top-bar h1::before {
  content: "🥐";
  margin-right: 8px;
}

header.top-bar h1 .tagline {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.timer {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent-hover);
}

.auth-status {
  display: flex;
  align-items: center;
  gap: 10px;
}

.top-bar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.auth-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.auth-name {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.timer.low-time {
  background: var(--wrong-soft);
  color: var(--wrong);
}

main.container {
  max-width: 1000px;
  margin: 24px auto;
  padding: 0 16px;
}

/* Home page — grid of test cards (layout inspired by Study4's "Thư viện đề thi") */
.test-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}

.test-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow);
}

.test-card h2 {
  font-family: var(--font-display);
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.35;
}

.test-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.88rem;
}

.test-card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 0.83rem;
  color: var(--text-muted);
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag-pill {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent-hover);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
}

/* Đề đã có giải thích đáp án (câu hỏi đã được "giải") — màu khác để nổi bật, phân biệt với đề
   chưa có (chỉ hiện #TOEIC/#FullTest như bình thường). */
.tag-pill-solved {
  background: var(--correct-soft);
  color: var(--correct);
}

.test-card .btn-primary {
  margin-top: auto;
  align-self: flex-start;
}

/* .btn-primary/.btn-secondary được dùng trên cả <button> lẫn <a> (link điều hướng trông giống
   nút bấm) — gộp chung selector để cả 2 loại thẻ đều nhận đủ padding/bo góc/transition, tránh
   lệch giao diện giữa "nút thật" và "link giả nút". */
button,
.btn-primary,
.btn-secondary {
  cursor: pointer;
  border: none;
  border-radius: var(--radius);
  padding: 10px 18px;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: var(--font-body);
  display: inline-block;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease, opacity 0.15s ease;
}

button:active,
.btn-primary:active,
.btn-secondary:active {
  transform: translateY(1px);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 8px rgba(181, 89, 47, 0.25);
}

.btn-primary:hover {
  background: var(--accent-hover);
  box-shadow: 0 4px 12px rgba(181, 89, 47, 0.32);
}

.btn-primary:active {
  box-shadow: 0 1px 4px rgba(181, 89, 47, 0.22);
}

.btn-secondary {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
}

.btn-secondary:hover {
  background: var(--panel-alt);
  border-color: var(--accent-soft);
}

.btn-secondary:active {
  background: var(--accent-soft);
}

.mode-selector {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mode-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.mode-option:hover {
  background: var(--panel-alt);
}

.history-section {
  margin-top: 32px;
}

.history-section h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--text);
  margin-bottom: 10px;
}

table.history-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

table.history-table th, table.history-table td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}

table.history-table th {
  background: var(--panel-alt);
  font-family: var(--font-display);
  font-weight: 600;
}

table.history-table tr:last-child td { border-bottom: none; }

.history-row-actions {
  display: flex;
  gap: 8px;
  white-space: nowrap;
}

.history-row-actions button {
  padding: 6px 12px;
  font-size: 0.82rem;
}

.empty-state {
  color: var(--text-muted);
  font-size: 0.9rem;
  padding: 12px 0;
}

/* Trạng thái "đang tải" cho các khu vực chờ fetch bất đồng bộ (danh sách đề, lịch sử, bảng xếp
   hạng, flashcard...) — trước đây các khu vực này để trống hoàn toàn trong lúc chờ dữ liệu, dễ
   trông như bị lỗi/thiếu nội dung, nhất là trên mạng chậm. Xem js/loading.js. */
.loading-state {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: 0.9rem;
  padding: 12px 0;
}

.spinner {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.phase-gate {
  max-width: 560px;
  margin: 60px auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px 32px;
  text-align: center;
  box-shadow: var(--shadow);
}

.phase-gate h2 {
  font-family: var(--font-display);
  font-weight: 600;
  margin-top: 0;
  font-size: 1.4rem;
}

.phase-gate p {
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 24px;
}

.timer.phase-label {
  font-size: 1rem;
}

/* Test-taking page */
.test-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 20px;
  align-items: start;
}

.sidebar {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  position: sticky;
  top: 78px;
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: var(--shadow);
}

.sidebar .part-label {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  margin: 10px 0 6px;
}

/* Ngưỡng tối thiểu 32px trước đây chỉ vừa đủ 5 cột khi sidebar KHÔNG cần thanh cuộn dọc — ngay khi
   đề có đủ câu để .sidebar phải cuộn (overflow-y: auto chiếm ~17px), bề rộng còn lại không đủ cho
   5 cột nữa nên auto-fill chỉ xếp được 4 cột, để lại khoảng trống rõ rệt bên phải trước thanh cuộn.
   Hạ ngưỡng xuống 28px để 5 cột luôn vừa dù có thanh cuộn hay không — nhất quán giữa các chế độ
   luyện tập (Full Test/Part riêng) thay vì lúc 5 lúc 4 cột tuỳ số câu. */
.qnav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(28px, 1fr));
  gap: 6px;
}

.qnav-btn {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 6px;
  background: var(--unanswered);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.12s ease, transform 0.1s ease, box-shadow 0.12s ease;
}

.qnav-btn:hover:not(.locked):not(.current) { transform: scale(1.1); box-shadow: 0 2px 6px rgba(90, 62, 30, 0.2); }
.qnav-btn.answered { background: var(--answered); }
.qnav-btn.current { background: var(--accent-current); box-shadow: 0 0 0 2px var(--accent-soft); }
.qnav-btn.correct { background: var(--correct); }
.qnav-btn.locked { cursor: not-allowed; opacity: 0.6; }
.qnav-btn.locked:not(.current):not(.answered) { background: var(--panel-alt); color: var(--text-muted); }
.qnav-btn.wrong { background: var(--wrong); }

.content-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  min-height: 300px;
  box-shadow: var(--shadow);
}


/* Ảnh Part 1 không đồng nhất kích thước gốc giữa các đề (Collection 1 dùng ảnh 700x700/700x466,
   các đề còn lại đều 1024x1024 vuông) — chỉ giới hạn max-width như trước khiến ảnh tỉ lệ khác
   hiển thị THẤP hơn hẳn (vd 700x466 chỉ cao ~306px trong khung 460px, trong khi ảnh vuông cao đủ
   460px), tạo cảm giác lộn xộn khi chuyển qua lại giữa các câu. Ép khung vuông cố định + object-fit:
   contain (không cắt ảnh — Part 1 TOEIC cần thấy trọn vẹn nội dung ảnh để chọn đáp án đúng) để mọi
   ảnh Part 1, bất kể tỉ lệ gốc, đều chiếm đúng 1 khung kích thước như nhau. */
.part1-photo {
  display: block;
  width: min(460px, 100%);
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--panel-alt);
  margin: 0 auto 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.doc-card {
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 22px;
  box-shadow: 0 2px 6px rgba(90, 62, 30, 0.08);
}

.doc-card:last-child { margin-bottom: 0; }

/* Bảng header kiểu To:/From:/Date:/Subject: — giống khung email ETS thật */
.doc-header-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 14px;
  font-size: 0.9rem;
}

.doc-header-table tr {
  border: 1px solid var(--border);
}

.doc-header-table th, .doc-header-table td {
  border: 1px solid var(--border);
  padding: 6px 10px;
  text-align: left;
  font-weight: 400;
}

.doc-header-table th {
  background: var(--panel-alt);
  font-weight: 700;
  width: 90px;
  white-space: nowrap;
}

.doc-body {
  white-space: pre-wrap;
  font-size: 0.92rem;
  line-height: 1.65;
}

.doc-headline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  margin-bottom: 10px;
}

/* Danh sách đánh số kiểu báo cáo/đề xuất (1. 2. 3. ...) */
.doc-numbered-list {
  font-size: 0.92rem;
}

.doc-numbered-item {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  line-height: 1.55;
}

.doc-numbered-index {
  font-weight: 700;
  color: var(--accent);
  flex-shrink: 0;
}

/* Bảng Item / Cost kiểu hóa đơn, biên nhận */
.doc-item-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  margin-top: 4px;
}

.doc-item-table td {
  padding: 6px 4px;
  border-bottom: 1px solid var(--border);
}

.doc-item-cost {
  text-align: right;
  white-space: nowrap;
}

.doc-item-total td {
  font-weight: 700;
  border-top: 2px solid var(--text);
  border-bottom: none;
}

/* Khung lịch trình có viền trang trí kiểu poster sự kiện */
.doc-card-decorative {
  border: 3px double var(--accent-soft);
  background: var(--panel-alt);
}

.doc-schedule-day {
  font-family: var(--font-display);
  font-weight: 600;
  text-decoration: underline;
  margin-top: 12px;
  margin-bottom: 4px;
}

.doc-schedule-day:first-child {
  margin-top: 0;
}

.doc-schedule-item {
  padding-left: 16px;
  font-size: 0.92rem;
  margin-bottom: 3px;
}

.doc-schedule-note {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 10px;
  font-style: italic;
}

.doc-list {
  font-size: 0.92rem;
}

.doc-list-row {
  padding: 5px 0;
  border-bottom: 1px dashed var(--border);
}

.doc-list-row:last-child {
  border-bottom: none;
}

.image-desc-box {
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 18px;
  white-space: pre-wrap;
  font-size: 0.92rem;
  font-style: italic;
  color: var(--text-muted);
}

/* Trình duyệt không cho tuỳ biến control bên trong <audio> qua CSS chuẩn (chỉ Chrome/Edge có
   pseudo-element ::-webkit-media-controls-* không chính thức) — nên chỉ bọc audio trong 1 khung
   nền/viền/bo góc theo theme bakery, để ít nhất phần "khung" không bị lạc tông với phần còn lại
   của trang, thay vì để thanh điều khiển xám mặc định nổi trần trụi trên nền kem. */
audio {
  display: block;
  width: 100%;
  max-width: 460px;
  margin: 0 auto 18px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 10px;
}

.question-block {
  margin-bottom: 26px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.question-block:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.question-prompt {
  font-weight: 600;
  margin-bottom: 10px;
}

.option-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.option-row:hover { background: var(--panel-alt); }

.option-row input { cursor: pointer; accent-color: var(--accent); }

.option-row.correct { background: var(--correct-soft); }
.option-row.incorrect { background: var(--wrong-soft); }

.nav-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.submit-bar {
  margin-top: 20px;
  text-align: right;
}

/* Review page */
.score-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.score-tile {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
  box-shadow: var(--shadow);
}

.score-tile .big-number {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--accent);
}

.score-tile .label {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.score-tile-highlight {
  border-color: var(--gold);
  border-width: 2px;
  background: var(--gold-soft);
}

.score-tile-highlight .big-number { color: var(--gold); }

.skill-group {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}

.skill-group-header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.skill-group-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
}

.skill-group-raw {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.skill-group-scaled {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gold);
}

.skill-group-scaled small {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
}

.skill-group-parts {
  margin-bottom: 0;
}

.score-tile-sub {
  padding: 10px;
}

.score-tile-sub .big-number {
  font-size: 1.3rem;
}

.review-item {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 10px;
}

.review-item .tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  margin-right: 8px;
}

.tag.correct { background: var(--correct-soft); color: var(--correct); }
.tag.wrong { background: var(--wrong-soft); color: var(--wrong); }
.tag.skipped { background: var(--panel-alt); color: var(--text-muted); }

.dictation-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 18px;
  box-shadow: var(--shadow);
}

.dictation-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.dictation-part-label {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text);
}

.dictation-question-ids {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.dictation-audio {
  width: 100%;
  margin-bottom: 12px;
}

.dictation-textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.95rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  resize: vertical;
  color: var(--text);
  background: var(--panel-alt);
}

.dictation-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.dictation-result {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}

.dictation-score {
  font-weight: 700;
  margin-bottom: 10px;
}

.dictation-diff-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 10px;
  margin-bottom: 4px;
}

.dictation-diff-line {
  line-height: 1.7;
}

.diff-wrong {
  background: var(--wrong-soft);
  color: var(--wrong);
  border-radius: 4px;
  padding: 0 3px;
  text-decoration: line-through;
}

.diff-missing {
  background: var(--gold-soft);
  color: var(--gold);
  border-radius: 4px;
  padding: 0 3px;
  font-weight: 600;
}

.dictation-next {
  display: block;
  margin: 0 auto 24px;
}

.dictation-mode-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  font-size: 0.9rem;
}

.dictation-mode-bar select {
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 6px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
}

.dictation-passage {
  line-height: 2.1;
  font-size: 0.98rem;
}

.dictation-blank {
  display: inline-block;
  white-space: nowrap;
}

.dictation-blank-input {
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 2px 6px;
  border: none;
  border-bottom: 2px solid var(--accent);
  border-radius: 2px;
  background: var(--accent-soft);
  color: var(--text);
  text-align: center;
}

.dictation-blank-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.dictation-blank-input.correct {
  border-bottom-color: var(--correct);
  background: var(--correct-soft);
  color: var(--correct);
}

.dictation-blank-input.incorrect {
  border-bottom-color: var(--wrong);
  background: var(--wrong-soft);
  color: var(--wrong);
  text-decoration: line-through;
}

.dictation-blank-answer {
  font-size: 0.82rem;
  color: var(--wrong);
  font-weight: 600;
}

/* Bakery-themed dialog (thay window.alert()/confirm()) — xem js/dialog.js */
.bakery-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(74, 51, 36, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.bakery-dialog-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.bakery-dialog {
  background: var(--panel);
  border: 3px double var(--accent-soft);
  border-radius: var(--radius);
  box-shadow: 0 16px 44px rgba(74, 51, 36, 0.28);
  padding: 30px 28px 24px;
  max-width: 380px;
  width: 100%;
  text-align: center;
  transform: translateY(10px) scale(0.97);
  transition: transform 0.15s ease;
}

.bakery-dialog-overlay.open .bakery-dialog {
  transform: translateY(0) scale(1);
}

.bakery-dialog-icon {
  font-size: 2.1rem;
  margin-bottom: 12px;
}

.bakery-dialog-message {
  font-family: var(--font-body);
  color: var(--text);
  font-size: 0.98rem;
  line-height: 1.55;
  margin: 0 0 24px;
  white-space: pre-line;
}

.bakery-dialog-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.bakery-dialog-actions button {
  min-width: 96px;
}

/* ===== Flashcards ===== */
.fc-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}

.fc-tab-btn {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  padding: 10px 16px;
  font-weight: 600;
  color: var(--text-muted);
}

.fc-tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.fc-create-card {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  min-height: 130px;
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  width: 100%;
}

.fc-create-card:hover {
  background: var(--panel-alt);
}

.fc-list-owner {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.fc-card-actions-row {
  display: flex;
  gap: 8px;
  margin-top: auto;
}

.fc-card-actions-row button,
.fc-card-actions-row a {
  flex: 1;
  text-align: center;
  text-decoration: none;
  font-size: 0.85rem;
  padding: 8px 10px;
  white-space: nowrap;
}

/* List detail page: browse/manage cards */
.fc-card-row {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 12px;
}

.fc-card-row-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.fc-card-term {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
}

.fc-card-pos {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.fc-card-actions {
  display: flex;
  gap: 6px;
}

.fc-card-actions button {
  font-size: 0.78rem;
  padding: 4px 10px;
}

.fc-card-definition {
  margin-top: 8px;
  font-weight: 600;
}

.fc-card-example {
  margin-top: 4px;
  color: var(--text-muted);
  font-style: italic;
  font-size: 0.9rem;
}

.fc-form {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fc-form input[type="text"],
.fc-form input[type="search"],
.fc-form textarea {
  font-family: var(--font-body);
  font-size: 0.92rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--panel-alt);
  color: var(--text);
  width: 100%;
}

.fc-form input[type="checkbox"] {
  flex: none;
}

.fc-form label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  display: block;
  margin-bottom: 4px;
}

.fc-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.fc-form-actions {
  display: flex;
  gap: 8px;
}

label.fc-checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--text);
}

/* Review/practice mode: flip card */
.flashcard-progress-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--panel-alt);
  overflow: hidden;
  margin-bottom: 20px;
}

.flashcard-progress-fill {
  height: 100%;
  background: var(--accent);
  transition: width 0.2s ease;
}

.flashcard-flip {
  position: relative;
  cursor: pointer;
  margin-bottom: 20px;
}

.flashcard-face {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 40px 24px;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  position: relative;
}

.flashcard-term {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 600;
}

.flashcard-pos-phonetic {
  color: var(--text-muted);
  font-size: 0.95rem;
}

.flashcard-definition {
  font-size: 1.15rem;
  font-weight: 600;
}

.flashcard-example {
  color: var(--text-muted);
  font-style: italic;
  max-width: 440px;
}

.flashcard-hint {
  position: absolute;
  bottom: 10px;
  right: 16px;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.flashcard-status-badge {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--accent-soft);
  color: var(--accent-hover);
}

.flashcard-rating-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.flashcard-rating-btn {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 8px;
  text-align: center;
  font-weight: 600;
  font-size: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

.flashcard-rating-btn .emoji {
  font-size: 1.4rem;
}

.flashcard-rating-btn.easy:hover {
  background: var(--correct-soft);
  color: var(--correct);
}

.flashcard-rating-btn.medium:hover {
  background: var(--gold-soft);
  color: var(--gold);
}

.flashcard-rating-btn.hard:hover {
  background: var(--wrong-soft);
  color: var(--wrong);
}

.flashcard-rating-btn.known:hover {
  background: var(--panel-alt);
}

@media (max-width: 720px) {
  .test-layout { grid-template-columns: 1fr; }
  .sidebar {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
}

/* Màn hình điện thoại (~640px trở xuống): header.top-bar dùng chung mọi trang là 1 flex-row
   "justify-content: space-between" giữa <h1> và cụm nút bên phải (.top-bar-right, hoặc 1
   button/div đơn lẻ) — trên màn hẹp, tiêu đề dài vỡ thành nhiều dòng và cụm nút bị ép sát, có
   trường hợp tràn hẳn ra ngoài màn hình (vd nút "Back to Home" ở test-detail.html bị cắt chữ).
   Xếp header thành cột dọc, để cụm nút tự xuống dòng full-width thay vì bị ép chung 1 hàng với
   tiêu đề. Bảng (lịch sử, bảng trong bài đọc Part 6/7) cũng không có wrapper cuộn ngang — cho
   phép cuộn ngang ngay trên chính bảng thay vì tràn ra ngoài layout trang. */
@media (max-width: 640px) {
  header.top-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .top-bar-right {
    flex-wrap: wrap;
    width: 100%;
  }

  table.history-table,
  .doc-header-table,
  .doc-item-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .flashcard-rating-row {
    grid-template-columns: repeat(2, 1fr);
  }
}