/* Trang chi tiết lớp: nhấn mạnh thao tác hiện có và trạng thái dữ liệu thật. */
.class-workflow-view .container { max-width: 1100px; }
.class-workflow-view .row-between { align-items: flex-start; }
.class-workflow-view #classDetailTitle { margin: 0; line-height: 1.2; overflow-wrap: anywhere; }
.class-workflow-view .dashboard-actions { justify-content: flex-end; }
.class-workflow-view #newAssignmentBtn { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.class-workflow-intro { padding: 18px 20px; margin: 4px 0 22px; border: 1px solid var(--card-border); border-radius: 16px; background: var(--card); }
.class-workflow-eyebrow { margin: 0 0 6px; color: var(--accent-strong); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.class-workflow-description { margin: 0 0 14px; color: var(--muted); font-size: 14px; }
.class-workflow-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.class-workflow-stats span { display: inline-flex; align-items: center; min-height: 34px; padding: 5px 12px; border-radius: 999px; background: var(--accent-weak); color: var(--accent-strong); font-size: 13px; font-weight: 700; }
.class-workflow-view .tabs { margin-bottom: 20px; }
.class-workflow-view .tab-item { min-height: 44px; }
.class-workflow-view .quiz-card { align-items: flex-start; }
.class-workflow-view .quiz-card-icon { display: grid; place-items: center; min-width: 42px; min-height: 42px; border-radius: 12px; background: var(--accent-weak); }
.class-workflow-view .quiz-card-body { padding-top: 3px; }
.class-workflow-view .quiz-card-meta { line-height: 1.5; overflow-wrap: anywhere; }
.class-workflow-view .quiz-card-actions { align-self: center; }
.class-workflow-status { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-height: 70px; padding: 16px 20px; margin-bottom: 14px; border: 1px solid var(--card-border); border-radius: 12px; background: var(--card); color: var(--muted); }
.class-workflow-status.hidden { display: none; }
.class-workflow-view .empty-state { border: 1px dashed var(--card-border); border-radius: 16px; background: var(--card); }
@media (max-width: 700px) {
  .class-workflow-view .row-between { flex-direction: column; align-items: stretch; }
  .class-workflow-view .dashboard-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; }
  .class-workflow-view .dashboard-actions .btn { width: 100%; white-space: normal; }
  .class-workflow-view #newAssignmentBtn { grid-column: 1 / -1; grid-row: 1; }
  .class-workflow-view .quiz-card-actions { width: 100%; justify-content: flex-end; }
  .class-workflow-view .quiz-card-actions .card-action-first { margin-right: auto; }
  .class-workflow-intro { padding: 16px; }
}
@media (max-width: 390px) {
  .class-workflow-view .dashboard-actions { grid-template-columns: 1fr; }
  .class-workflow-view #newAssignmentBtn { grid-column: 1; }
}

/* ---- B1 Hồ sơ lớp (host/views/class-profile.js) ---- */
.class-profile { display: flex; flex-direction: column; gap: 18px; }
.class-profile-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.class-profile-title { margin: 0 0 4px; font-size: 18px; }
.class-profile-meta { margin: 0; color: var(--muted); font-size: 13px; }
.class-profile-status { min-height: 18px; margin: -8px 0 0; color: var(--accent-strong); font-size: 13px; }
.class-profile-status:empty { display: none; }
.class-profile-section { padding: 16px 18px; border: 1px solid var(--card-border); border-radius: 14px; background: var(--card); }
.class-profile-section h4 { margin: 0 0 10px; font-size: 15px; }
.class-profile-groups { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.class-profile-group { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px; background: #fff7ed; border: 1px solid #fed7aa; }
.class-profile-group-main { flex: 1 1 260px; min-width: 0; }
.class-profile-group-title { margin: 0 0 4px; font-weight: 700; overflow-wrap: anywhere; }
.class-profile-group-meta { margin: 0 0 6px; color: var(--muted); font-size: 13px; }
.class-profile-group-names { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.class-profile-chip { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--accent-weak); color: var(--accent-strong); font-size: 12px; }
.class-profile-kind { display: inline-block; margin-right: 4px; padding: 1px 6px; border-radius: 6px; background: var(--accent-weak); color: var(--accent-strong); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.class-profile-flag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: #fee2e2; color: #991b1b; font-size: 11px; font-weight: 700; }
.class-profile-legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; font-size: 12px; }
.class-profile-legend .class-profile-seg { padding: 2px 8px; border-radius: 6px; }
.class-profile-table-wrap { overflow-x: auto; }
.class-profile-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.class-profile-table th, .class-profile-table td { padding: 8px 10px; border-bottom: 1px solid var(--card-border); text-align: left; vertical-align: middle; }
.class-profile-table th[scope="row"] { font-weight: 500; overflow-wrap: anywhere; }
.class-profile-table .num { text-align: right; white-space: nowrap; }
.class-profile-table tr.is-kind-strand th[scope="row"] { font-weight: 700; }
.class-profile-table tr.is-kind-topic th[scope="row"] { padding-left: 22px; }
.class-profile-table tr.is-kind-skill th[scope="row"], .class-profile-table tr.is-kind-problem_type th[scope="row"] { padding-left: 34px; }
.class-profile-table tr.is-review { background: #fff7ed; }
.class-profile-dist { display: flex; min-width: 140px; height: 20px; border-radius: 6px; overflow: hidden; background: #f3f4f6; }
.class-profile-seg { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; font-size: 11px; font-weight: 700; color: #111827; }
.class-profile-seg.is-green { background: #86efac; }
.class-profile-seg.is-yellow { background: #fde68a; }
.class-profile-seg.is-red { background: #fca5a5; }
.class-profile-seg.is-insufficient { background: #e5e7eb; color: #4b5563; }
.class-profile-level { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.class-profile-level.is-green { background: #dcfce7; color: #166534; }
.class-profile-level.is-yellow { background: #fef3c7; color: #92400e; }
.class-profile-level.is-red { background: #fee2e2; color: #991b1b; }
.class-profile-level.is-insufficient { background: #f3f4f6; color: #4b5563; }
.class-profile-unclassified { margin: 0; font-size: 13px; }
.class-profile-students { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.class-profile-student-btn { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--card-border); border-radius: 10px; background: #fff; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.class-profile-student-btn:hover, .class-profile-student-btn:focus-visible { border-color: var(--accent); outline: none; }
.class-profile-student.is-open .class-profile-student-btn { border-color: var(--accent); background: var(--accent-weak); }
.class-profile-student-name { font-weight: 700; }
.class-profile-student-meta { color: var(--muted); font-size: 13px; }
.class-profile-student-panel { margin-top: 12px; padding: 14px 16px; border: 1px solid var(--accent); border-radius: 12px; background: #fff; }
.class-profile-student-panel.hidden { display: none; }
.class-profile-student-title { margin: 0 0 6px; font-size: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.class-profile-wrong { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.class-profile-wrong-time { color: var(--muted); font-size: 12px; }
.class-profile-wrong-text { display: block; }
.class-profile-wrong-nodes { display: inline-flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.class-profile-error { color: var(--danger); }
@media (max-width: 640px) {
  .class-profile-section { padding: 12px; }
  .class-profile-group { padding: 10px; }
  .class-profile-assign { width: 100%; }
  .class-profile-table { font-size: 13px; }
  .class-profile-table th, .class-profile-table td { padding: 6px 6px; }
}
/* Hộp thoại "Giao bài tập mới": nhóm Chế độ (2 thẻ radio) / Hạn chót / Tuỳ chọn / Giao cho. */
.modal-box.modal-assign { max-width: 600px; }
.assign-form { display: flex; flex-direction: column; gap: 12px; }
.assign-form .field { margin-bottom: 0; }
.assign-group { margin: 0; padding: 8px 12px 12px; border: 1px solid var(--card-border); border-radius: 10px; min-width: 0; }
.assign-group > legend { padding: 0 6px; font-size: 13px; font-weight: 700; color: var(--muted); }
.assign-mode-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.assign-mode-card { display: flex; gap: 10px; align-items: flex-start; padding: 12px; min-height: 64px; border: 1.5px solid var(--card-border); border-radius: 10px; background: var(--bg); cursor: pointer; }
.assign-mode-card input { margin: 3px 0 0; width: 18px; height: 18px; flex: none; }
.assign-mode-card strong { display: block; font-size: 15px; }
.assign-mode-card small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.35; color: var(--muted); }
.assign-mode-card:has(input:checked) { border-color: var(--accent); background: var(--accent-weak); box-shadow: 0 0 0 1px var(--accent); }
.assign-mode-card:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.assign-check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; cursor: pointer; }
.assign-check input { width: 20px; height: 20px; flex: none; margin: 0; }
.assign-release { margin: -4px 0 0; }
.assign-release .hint { display: block; margin: 0 0 0 30px; }
.guide-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.guide-actions .btn { min-height: 44px; }
@media (max-width: 560px) {
  .assign-mode-cards { grid-template-columns: 1fr; }
}
.assign-form .field .hint { display: block; }

/* YC-20: thẻ bài tập — "Xem báo cáo" nổi bật, hành động phụ gom trong menu "···" */
.class-workflow-view .assignment-card-actions { flex-wrap: nowrap; align-items: center; gap: 8px; }
.class-workflow-view .assignment-card-actions .assignment-report-btn { min-height: 40px; padding: 8px 18px; font-weight: 700; white-space: nowrap; }
.class-workflow-view .assignment-more-trigger { min-width: 40px; min-height: 40px; font-size: 18px; line-height: 1; }
.class-workflow-view .assignment-more-panel { min-width: 230px; }
.class-workflow-view .assignment-more-panel .menu-item { min-height: 42px; white-space: nowrap; }
.class-workflow-view .assignment-more-panel .menu-item:focus-visible { outline: 3px solid #2f5fe0; outline-offset: -3px; background: #eef4ff; }
.class-workflow-view .assignment-more-panel .menu-item-danger { color: #b42318; }
.class-workflow-view .assignment-more-panel .menu-divider { height: 1px; margin: 6px 4px; background: var(--card-border, #e5e7eb); }
@media (max-width: 700px) {
  .class-workflow-view .assignment-card-actions .assignment-report-btn { flex: 1 1 auto; min-height: 44px; }
  .class-workflow-view .assignment-more-trigger { min-width: 44px; min-height: 44px; }
  .class-workflow-view .assignment-more-panel { min-width: min(260px, calc(100vw - 48px)); }
}

/* YC-34 — Modal "Báo cáo" bài tập (host/views/classes.js > showAssignmentReport,
   host/views/assignment-report-table.js). Trước đây CSS ar-* nằm trong <style> chèn lúc chạy. */
.modal-box.modal-report { position: relative; }
.modal-box.modal-report #modalTitle { margin-bottom: 10px; padding-right: 104px; font-size: 18px; overflow-wrap: anywhere; }
.modal-report .ar-refresh-top { position: absolute; top: 18px; right: 22px; z-index: 2; min-height: 34px; }
.modal-report .assignment-report-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 6px; }
.modal-report .assignment-report-metrics article { padding: 8px 10px; border-radius: 10px; min-width: 0; }
.modal-report .assignment-report-metrics small { font-size: 12px; line-height: 1.3; }
.modal-report .assignment-report-metrics strong { margin: 1px 0; font-size: 20px; line-height: 1.2; }
.modal-report .assignment-report-metrics span { font-size: 11px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-note { margin: 0 0 6px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.ar-h { margin: 8px 0 4px; font-size: 16px; }
.ar-section { margin-top: 14px; }
.ar-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 8px; }
.ar-toolbar .ar-spacer { flex: 1; }
.ar-toolbar .assignment-report-roster-tabs { margin: 0; gap: 6px; }
.ar-toolbar .assignment-report-roster-tabs button { min-height: 34px; padding: 4px 12px; font-size: 13px; }
.ar-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--card-border); border-radius: 10px; -webkit-overflow-scrolling: touch; }
.ar-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ar-table th, .ar-table td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--card-border); white-space: nowrap; }
.ar-table th { background: var(--bg); font-weight: 600; }
.ar-table th button { all: unset; cursor: pointer; font-weight: 600; }
.ar-table th button:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.ar-table td.ar-num, .ar-table th.ar-num { text-align: right; }
.ar-table .ar-caption { text-align: left; padding: 5px 10px; font-size: 12px; }
.ar-status-pending { color: #81550d; }
/* PB-I62: bài nộp trễ chờ giáo viên quyết định — ba nút trong ô thao tác, hộp xem bài + nhật ký + quyết định. */
.ar-late-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; white-space: normal; }
.late-status--pending { padding: 8px 12px; border-radius: 10px; background: #fff4e0; color: #81550d; font-weight: 600; }
.late-preview { font-weight: 600; }
.late-log { margin: 0 0 12px; padding-left: 18px; font-size: 13px; }
.late-decision { display: grid; gap: 8px; margin-top: 12px; padding: 12px; border: 1px solid var(--card-border); border-radius: 12px; }
.late-answer { margin: 4px 0 10px; }
.late-solutions-warn { padding: 8px 12px; border-radius: 10px; background: #fdecea; color: #8a1c13; }
.late-solutions-warn p { margin: 0 0 6px; }
.ar-status-done { color: #1a7f37; }
/* Thống kê theo câu: accordion (details/summary). */
.ar-q { margin: 6px 0; border: 1px solid var(--card-border); border-radius: 10px; }
.ar-q > summary { list-style: none; }
.ar-q > summary::-webkit-details-marker { display: none; }
.ar-q-head { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; cursor: pointer; border-radius: 10px; }
.ar-q-head::before { content: "▸"; flex: none; color: var(--muted); transition: transform .15s; }
.ar-q[open] > .ar-q-head::before { transform: rotate(90deg); }
.ar-q-head:hover { background: var(--bg); }
.ar-q-head:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: -2px; }
.ar-q-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-q-type { flex: none; color: var(--muted); font-size: 12px; }
.ar-q-rate { flex: none; min-width: 44px; text-align: right; font-weight: 700; color: #1a7f37; }
.ar-q-rate.is-low { color: #b42318; }
.ar-q > :not(summary) { margin-left: 12px; margin-right: 12px; }
.ar-q > :last-child { margin-bottom: 10px; }
.ar-q-bar { height: 8px; border-radius: 4px; background: var(--bg); margin-top: 2px; margin-bottom: 6px; overflow: hidden; }
.ar-q-bar > div { height: 100%; background: var(--accent-strong); }
.ar-q-choices { margin-top: 6px; margin-bottom: 0; padding-left: 18px; }
.ar-q-choices li.is-correct { font-weight: 600; color: #1a7f37; }
.ar-q-wrong { margin-top: 6px; margin-bottom: 0; color: #b42318; font-size: 13px; }

@media (max-width: 640px) {
  .modal-report .assignment-report-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modal-report .assignment-report-metrics span { white-space: normal; }
  .modal-box.modal-report #modalTitle { padding-right: 96px; font-size: 16px; }
  .modal-report .ar-refresh-top { top: 14px; right: 16px; min-height: 44px; }
  .ar-q-type { display: none; }
  .ar-toolbar .ar-spacer { display: none; }
  .ar-toolbar .btn { min-height: 44px; }
  .ar-toolbar .assignment-report-roster-tabs button { min-height: 44px; }
}

/* YC-44 — hộp thoại "Đã tạo lớp" */
.class-created-box #modalCancelBtn{display:none}
.class-created{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.class-created__code{font-size:clamp(34px,9vw,52px);font-weight:800;letter-spacing:.14em;color:#1d3a8a;background:#eef3ff;border:2px solid #c7d6fb;border-radius:14px;padding:8px 22px;font-variant-numeric:tabular-nums;user-select:all}
.class-created__qr{display:flex;justify-content:center;padding:8px;background:#fff;border:1px solid #e2e8f0;border-radius:12px}
.class-created__url{word-break:break-all;margin:0}
.class-created__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;width:100%;margin-top:6px}
.class-created__actions .btn{min-height:44px}
@media (max-width:480px){.class-created__actions .btn{flex:1 1 100%}}

/* Hộp chọn chính sách Gia sư AI của lớp (host/views/classes.js > editAiPolicy, GS13) */
.ai-policy-options { display: grid; gap: 8px; margin: 12px 0; }
.ai-policy-option { display: block; padding: 10px 12px; border: 1px solid var(--border, #d9dee7); border-radius: 10px; cursor: pointer; }
.ai-policy-option:has(input:checked) { border-color: var(--accent, #2563eb); background: var(--accent-soft, #eef4ff); }

/* Kết nối chéo X2: hộp "Kết quả của <em>" từ dòng học sinh. */
.student-result-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 2px; }
.student-result-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--card-border); }
.student-result-title { flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere; }
.student-result-status { white-space: nowrap; }
.student-result-low { color: var(--danger, #b91c1c); font-weight: 600; }
.student-result-status.error-text { white-space: normal; }

/* Kết nối chéo X2: "Làm tiếp" dưới tổng quan báo cáo bài giao. */
.ar-followup { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 4px; }
.ar-followup-label { margin-right: 2px; }
.ar-followup-status { flex-basis: 100%; }
.ar-followup-status:empty { display: none; }
.ar-copy-fallback { flex-basis: 100%; width: 100%; font: inherit; }

/* Sổ điểm của lớp (host/views/class-gradebook.js, PB-J04). Bảng cuộn ngang trong khung riêng, trang không tràn ở 360px. */
.class-workflow-view .tabs { flex-wrap: wrap; }
@media (max-width: 480px) { .class-workflow-view .tab-item { padding: 10px 8px; font-size: 13px; } }
.gb { min-width: 0; max-width: 100%; }
.gb-toolbar { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.gb-intro { margin: 0; color: var(--muted); font-size: 13px; flex: 1 1 260px; min-width: 0; }
.gb-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gb-sort { display: flex; gap: 6px; align-items: center; font-size: 13px; }
.gb-panel { border: 1px solid var(--card-border); border-radius: 12px; background: var(--card); padding: 14px 16px; margin-bottom: 12px; max-width: 100%; box-sizing: border-box; }
.gb-panel-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.gb-panel-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.gb-soft { color: var(--muted); }
.gb-warn { color: var(--danger); }
.gb-col-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gb-col-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(90px, 160px) auto; gap: 6px 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--card-border); }
.gb-col-check { display: flex; gap: 8px; align-items: flex-start; min-width: 0; }
.gb-col-check span { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.gb-col-check small { color: var(--muted); font-size: 12px; }
.gb-label-input { margin: 0; min-width: 0; width: 100%; box-sizing: border-box; }
.gb-move { display: flex; gap: 4px; }
.gb-move .btn { min-width: 36px; }
@media (max-width: 560px) { .gb-col-item { grid-template-columns: minmax(0, 1fr) auto; } .gb-label-input { grid-column: 1 / -1; grid-row: 2; } }
.gb-avg-toggle { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; font-size: 13px; }
.gb-save, .gb-export-msg { margin: 8px 0 0; font-size: 13px; min-height: 1em; }
.gb-export-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 12px; }
.gb-export-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; min-width: 0; }
.gb-export-grid .modal-input { margin: 0; width: 100%; box-sizing: border-box; }
.gb-status { margin: 0 0 8px; color: var(--muted); font-size: 13px; }
.gb-scroll { max-width: 100%; overflow-x: auto; border: 1px solid var(--card-border); border-radius: 10px; -webkit-overflow-scrolling: touch; }
.gb-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gb-table { border-collapse: collapse; font-size: 14px; min-width: 100%; }
.gb-table th, .gb-table td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--card-border); white-space: nowrap; vertical-align: top; }
.gb-table thead th { background: var(--bg); font-weight: 600; }
.gb-table tbody th { font-weight: 500; }
.gb-table .gb-num { text-align: right; }
.gb-table .gb-stt { width: 1%; color: var(--muted); }
.gb-table .gb-name { position: sticky; left: 0; background: var(--card, #fff); z-index: 1; }
.gb-table thead .gb-name { background: var(--bg); }
.gb-col-label { display: block; }
.gb-col-title { display: block; font-weight: 400; font-size: 12px; color: var(--muted); max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.gb-col-state { display: flex; gap: 4px; align-items: center; justify-content: flex-end; font-weight: 400; font-size: 12px; color: var(--muted); white-space: normal; max-width: 180px; }
.gb-retry { margin-top: 4px; }
.gb-table td.gb-soft { font-size: 12px; }
.gb-avg { border-left: 2px solid var(--card-border); }
.gb-notes { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.gb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gb-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--card-border); border-top-color: var(--accent); animation: gb-spin .8s linear infinite; vertical-align: middle; }
@keyframes gb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gb-dot { animation: none; } }

/* PB-K01: cột điểm bài trên giấy — ngăn nhập điểm tay trong Sổ điểm (host/views/paper-score-entry.js). */
.gb-paper-scroll { max-width: 100%; overflow-x: auto; border: 1px solid var(--card-border); border-radius: 10px; margin-top: 8px; }
.gb-paper-grid { width: 100%; }
.gb-paper-grid .gb-paper-name { font-weight: 500; white-space: normal; overflow-wrap: anywhere; }
.gb-paper-cell { white-space: normal; }
.gb-paper-grid td, .gb-paper-grid th { padding: 4px 10px; vertical-align: middle; }
.gb-paper-input { width: 6.5em; margin: 0; padding: 4px 8px; min-height: 0; height: 34px; text-align: right; box-sizing: border-box; }
.gb-input-bad, .gb-paper-meta [aria-invalid="true"] { border-color: var(--danger) !important; outline-color: var(--danger); }
.gb-paper-err { display: block; font-size: 12px; white-space: normal; }
.gb-paper-err:empty { display: none; }
.gb-paper-progress, .gb-paper-paste, .gb-paper-save { margin: 8px 0 0; font-size: 13px; }
.gb-paper-paste:empty { display: none; }
.gb-paper-confirm { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--danger); border-radius: 10px; }
.gb-paper-confirm p { margin: 0; }
.gb-paper-status { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 8px; font-size: 13px; }
.gb-table .gb-paper-edit { margin-top: 4px; }

/* PB-E05: mở ?class= của lớp không có trong tài khoản — chỉ còn tiêu đề + câu báo + "Về Lớp học"; ẩn tab, danh sách, nút thao tác. */
#classDetailView.class-missing .row-between > :not(h2),
#classDetailView.class-missing main > :not(.breadcrumb):not(.row-between):not(.class-workflow-intro) { display: none !important; }
#classDetailView.class-missing .class-workflow-stats { display: none !important; }

/* PB-F09 — mã lớp trên khung "Không gian lớp học" (host/views/class-code-share.js). */
.class-code-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--card-border); }
.class-code-bar.hidden { display: none; }
.class-code-bar__label { color: var(--muted); font-size: 13px; font-weight: 700; }
.class-code-bar__value { font-size: 24px; font-weight: 800; letter-spacing: .12em; color: var(--accent-strong); font-variant-numeric: tabular-nums; user-select: all; }
.class-code-bar .btn { min-height: 40px; }
.class-code-bar__hint { flex-basis: 100%; font-size: 13px; }
.class-code-bar__hint:empty { display: none; }
/* "Chiếu lên lớp": phủ cả màn hình, chữ và QR đủ lớn để đọc từ cuối lớp. */
.class-projector { position: fixed; inset: 0; z-index: 10000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2vh; padding: 24px 16px; background: #fff; color: #0f172a; text-align: center; overflow: auto; }
.class-projector__close { position: absolute; top: 16px; right: 16px; min-height: 44px; }
.class-projector__class { margin: 0; font-size: clamp(22px, 4vw, 44px); font-weight: 800; }
.class-projector__lead { margin: 0; max-width: 60ch; font-size: clamp(16px, 2.2vw, 26px); color: #334155; overflow-wrap: anywhere; }
.class-projector__code { font-size: clamp(56px, 16vw, 180px); line-height: 1; font-weight: 800; letter-spacing: .14em; color: #1d3a8a; font-variant-numeric: tabular-nums; }
.class-projector__qr { display: flex; justify-content: center; padding: 12px; background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; }
.class-projector__qr.is-error { max-width: 40ch; color: #b42318; font-size: 16px; }
/* PB-F10 — hộp tạo lớp: Khối / Năm học cạnh nhau, "Khác nhau thế nào?" mở bảng so sánh. */
.class-new-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
@media (max-width: 420px) { .class-new-row { grid-template-columns: 1fr; } }
.login-mode-help { margin: -4px 0 10px; font-size: 14px; }
.login-mode-help summary { cursor: pointer; color: var(--accent-strong); font-weight: 600; min-height: 32px; display: list-item; }
.login-mode-help ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 6px; color: var(--text); line-height: 1.45; }