:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --text: #1c2330;
  --muted: #5b6577;
  --border: #d5dae3;
  --accent: #1f5fbf;
  --accent-text: #ffffff;
  --ok: #17693a;
  --warn: #8a5200;
  --error: #b3261e;
  --changed: #fff6d6;
  --changed-border: #d9a400;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14171c;
    --surface: #1d2129;
    --text: #e8ebf0;
    --muted: #a3acbb;
    --border: #363d4a;
    --accent: #7fb0ff;
    --accent-text: #0b1526;
    --ok: #7bd69b;
    --warn: #f0b861;
    --error: #ff8a80;
    --changed: #3a3216;
    --changed-border: #b38a00;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; } /* rules below that set display must not un-hide things */
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 "Segoe UI", system-ui, sans-serif;
}
/* One column: the header holds the actions, a slim strip holds the messages, the exam gets the rest.
   The exam area scrolls on its own, so the page itself never needs scrolling on a wide screen. */
html, body { height: 100%; }
body { display: flex; flex-direction: column; }
/* Three parts: the name on the left, the tabs in the middle of the screen, the actions on the right. */
header {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px 16px;
  padding: 6px 20px; border-bottom: 1px solid var(--border);
}
header > * { min-width: 0; }
/* The site menu: a strip above the header with the name and the pages (the exam tool, the family timetable). */
.site-nav {
  display: flex; align-items: stretch; gap: 0 20px;
  padding: 0 20px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.site-nav h1 { margin: 0 8px 0 0; align-self: center; font-size: 1.15rem; }
.site-nav a {
  display: flex; align-items: center; min-height: 40px; padding: 0 2px;
  border-bottom: 2px solid transparent; color: var(--muted); text-decoration: none;
  font-size: 0.92rem; font-weight: 600; white-space: nowrap;
}
.site-nav a:hover { color: var(--text); }
.site-nav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }
main {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; gap: 6px;
  padding: 6px 20px 10px;
}
/* The notices share one line; lists and details take a line of their own only when they have content. */
#notices { flex: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 18px; font-size: 0.9rem; min-height: 0; }
#notices:empty, #notices .status:empty, #notices ul:empty { display: none; }
#notices .status { display: none; }  /* these messages show as toasts instead */
#notices details, #notices ul, #notices h3 { flex-basis: 100%; }
#notices details { margin: 0 0 4px; }
#notices ul { margin: 2px 0 4px; padding-left: 20px; }
#notices h3 { margin: 4px 0 2px; font-size: 0.92rem; }
#workspace {
  flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
}
#welcome { flex: 1; min-height: 0; overflow: auto; padding: 16px 20px; }
#welcome-hint { margin: 48px auto; text-align: center; }
/* Đề của tôi: the start screen's list of saved exams (my-exams.js). */
#mine { max-width: 1000px; margin: 0 auto; }
.mine-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.mine-head h2 { margin: 0; font-size: 1.15rem; }
#mine-back { margin-left: auto; align-self: center; }
#mine-status:empty { display: none; }
#mine-list { list-style: none; margin: 10px 0 0; padding: 0; }
.mine-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 16px; align-items: center;
  margin-bottom: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
}
.mine-item.open { border-color: var(--accent); }
.mine-words { display: flex; flex-direction: column; min-width: 0; }
.mine-words strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mine-figures { display: flex; flex-wrap: wrap; gap: 6px; }
.mine-figures img { width: 64px; height: 64px; object-fit: contain; background: #fff; border: 1px solid var(--border); border-radius: 4px; }
.mine-actions { display: flex; gap: 8px; }
.mine-open { padding: 4px 12px; border-radius: 999px; font-size: 0.85rem; white-space: nowrap; }
.save-status { font-size: 0.8rem; color: var(--muted); white-space: nowrap; }
.save-status.ok { color: var(--ok); }
.save-status.error { color: var(--error); font-weight: 600; }
#exam-remove { font-size: 0.85rem; }
@media (max-width: 700px) { .mine-item { grid-template-columns: minmax(0, 1fr); } #welcome { padding: 10px 8px; } }
/* The tabs sit in the middle and read like headings; the open one carries an accent line. */
/* The tabs: one rounded group in the header, so they read as "where am I" rather than as buttons. */
#tabs { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); }
#tabs[hidden] { display: none; }
#tabs button {
  border: 0; border-radius: 999px;
  background: none; color: var(--muted); padding: 7px 16px; white-space: nowrap;
  font-size: 0.88rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
#tabs button:hover { color: var(--text); background: var(--bg); }
#tabs button[aria-selected="true"] { background: var(--accent); color: var(--accent-text); }

/* A short notice in the corner after a download. */
#feedback-open {
  position: fixed; right: 20px; bottom: 20px; z-index: 40;
  border-radius: 999px; padding: 10px 18px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
#feedback-open[hidden] { display: none; }
input[type="text"] {
  display: block; width: 100%; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font: inherit;
}
#toast {
  position: fixed; right: 20px; bottom: 72px; z-index: 50;
  padding: 10px 16px; border-radius: 8px; background: var(--text); color: var(--bg);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); transition: opacity 0.3s;
}
#toast[hidden] { display: none; }
#toast.warn { background: var(--warn); color: #fff; }
#toast.error { background: var(--error); color: #fff; }
#toast.ok { background: var(--ok); color: #fff; }
/* position: relative keeps KaTeX's absolutely placed parts inside the scrolling panel. */
.panel { flex: 1; min-height: 0; overflow: auto; padding: 8px 12px; display: flex; flex-direction: column; position: relative; }
.panel[hidden] { display: none; }
#change-count { margin: 0 0 4px; }
/* The exam tab: the original on the left, the new exam on the right, each scrolling on its own. */
#panel-exam { overflow: hidden; }
#exam-panes { flex: 1; min-height: 0; display: flex; gap: 12px; }
.exam-pane { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.exam-pane .exam-preview { flex: 1; min-height: 0; overflow: auto; position: relative; max-width: none; padding-right: 4px; }
@media (max-width: 1100px) { #exam-panes { flex-direction: column; } #panel-exam { overflow: auto; } .exam-pane .exam-preview { overflow: visible; } }
#panel-pictures > .row { margin-top: 0; justify-content: space-between; }
#panel-pictures .status { margin: 0; }
@media (max-width: 860px) {
  html, body { height: auto; }
  #workspace { min-height: 80vh; }
}
label, .label { display: block; font-weight: 600; margin: 8px 0 4px; }
label.inline { display: inline; margin: 0; }
select {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
input[type="url"], input[type="password"] {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}
input[type="url"]:focus-visible, input[type="password"]:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
select:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
select:disabled { opacity: 0.6; }
textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 Consolas, "Cascadia Mono", monospace;
  resize: vertical;
}
button, .file-picker span {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
button:hover, .file-picker span:hover { border-color: var(--accent); }
button.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-weight: 600; }
button:disabled { opacity: 0.6; cursor: progress; }
button:focus-visible, textarea:focus-visible, .file-picker input:focus-visible + span {
  outline: 3px solid var(--accent); outline-offset: 2px;
}
.file-picker { display: inline-block; margin: 0; font-weight: 400; }
.file-picker input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0; }
.row.end { justify-content: flex-end; }
.hint { color: var(--muted); font-size: 0.9rem; }
.status { margin: 8px 0 0; color: var(--muted); }
.status.ok { color: var(--ok); }
.status.warn { color: var(--warn); }
.status.error { color: var(--error); font-weight: 600; }
details { margin-top: 8px; }
summary { cursor: pointer; color: var(--accent); }

#edited { flex: 1; min-height: 240px; resize: none; }
.exam-preview { font: 17px/1.7 "Times New Roman", serif; max-width: 900px; }
.block { margin: 0 0 6px; padding: 2px 8px; border-left: 3px solid transparent; white-space: pre-wrap; }
.block.changed { background: var(--changed); border-left-color: var(--changed-border); }
.block.unknown { color: var(--error); }
#preview .block { cursor: text; }
#preview .block:hover { border-left-color: var(--accent); }
.block.editing { padding: 0; background: none; }
.line-editor {
  display: block; width: 100%; margin: 0; padding: 4px 8px; box-sizing: border-box;
  font: inherit; line-height: 1.5; border: 1px solid var(--accent); border-radius: 4px;
  background: var(--bg); color: var(--text); resize: vertical;
}
.formula {
  padding: 0 2px; border: 1px solid transparent; border-radius: 4px;
  background: none; color: inherit; font: inherit; vertical-align: middle;
}
.formula:hover { border-color: var(--accent); }
.formula.bad { color: var(--error); border-color: var(--error); font: 13px Consolas, monospace; }
.placeholder {
  padding: 0 6px; border-radius: 4px; border: 1px dashed var(--border);
  color: var(--muted); font: 13px "Segoe UI", sans-serif;
}
#warnings { margin: 8px 0 0; padding-left: 20px; color: var(--warn); }
/* The print tab: the original on the left, the new exam on the right, each scrolling on its own. */
#print-panes { flex: 1; min-height: 0; display: flex; gap: 12px; }
.print-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.print-source-tabs { display: flex; gap: 6px; margin: 0 0 6px; min-height: 26px; }
.print-source-tabs button { padding: 4px 10px; border-radius: 999px; font-size: 0.85rem; }
.print-source-tabs button[aria-selected="true"] {
  color: var(--accent-text); background: var(--accent); border-color: var(--accent); font-weight: 700;
}
.print-source-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.print-source-panel[hidden] { display: none; }
/* The two column headings, Đề gốc and Đề mới, must be seen at a glance. */
.pane-head { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; min-height: 26px; }
.pane-head .hint { font-size: 0.82rem; }
.exam-pane h3, .print-pane h3 {
  margin: 0; flex: none;
  font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--accent-text); background: var(--accent);
  padding: 3px 10px; border-radius: 4px;
}
/* Which of the generated exams is shown. */
#exam-picker { margin: 0; padding: 8px 8px 0; gap: 6px; }
#exam-picker .label { margin: 0; font-weight: 600; }
#exam-picker button { padding: 4px 12px; border-radius: 999px; }
#exam-picker button[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-weight: 600; }
#exam-count { width: 5em; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font: inherit; }
#print-pdf, #print-original, #print-parsed { flex: 1; width: 100%; min-height: 300px; border: 1px solid var(--border); border-radius: 6px; background: #fff; }
@media (max-width: 1100px) { #print-panes { flex-direction: column; } }
#word-frame { flex: 1; width: 100%; min-height: 480px; border: 1px solid var(--border); border-radius: 6px; background: #fff; }
#panel-word > .row { margin-top: 0; justify-content: space-between; }
#panel-word .status { margin: 0; }
#panel-print .hint { margin: 0; }
.picture-card { border-bottom: 1px solid var(--border); padding: 0 0 12px; margin-bottom: 12px; }
.picture-card h3 { margin-top: 0; }
.picture-frame { position: relative; display: inline-block; max-width: 100%; background: #fff; line-height: 0; }
.picture-frame img { max-width: 100%; max-height: 60vh; height: auto; display: block; }
.picture-overlay { position: absolute; inset: 0; cursor: crosshair; touch-action: none; }
.picture-box { position: absolute; outline: 2px solid #d9480f; pointer-events: none; }
.picture-box.drawing { outline-style: dashed; background: rgba(217, 72, 15, 0.12); }
.picture-edit { margin: 6px 0; }
.picture-text {
  width: 9em; margin-left: 6px; padding: 6px 8px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--text); font: inherit;
}
.picture-text:focus-visible, input[type="checkbox"]:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* A figure the server drew (figure-view.js); white like the page it will be printed on, also in dark mode. */
.figure-box { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 8px; text-align: center; }
.figure-box svg { max-width: 100%; height: auto; touch-action: none; }
.figure-box .handle { fill: rgba(31, 95, 191, 0.12); stroke: #1f5fbf; stroke-width: 1.5; cursor: grab; }
.figure-box .handle:active { cursor: grabbing; }
/* The Hình tab's new figures (figure-panel.js): the problem on the left, its drawing on the right. */
#figures { border-bottom: 1px solid var(--border); margin-bottom: 8px; }
#figures > h3 { margin: 4px 0; font-size: 1rem; }
#figures > .hint { margin: 0 0 8px; }
.figure-card {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 20px; align-items: start;
  padding: 10px 0 14px; border-top: 1px solid var(--border);
}
.figure-card h3 { margin: 0 0 4px; font-size: 0.95rem; }
.figure-problem { max-height: 13em; overflow: auto; font: 16px/1.6 "Times New Roman", serif; }
.figure-problem .block { margin: 0; padding: 0; }
.figure-card .row { margin: 8px 0; }
.figure-card .status { margin: 4px 0; }
.figure-card ul { margin: 4px 0; padding-left: 20px; font-size: 0.9rem; }
.figure-issues li { color: var(--error); }
.figure-warnings li { color: var(--warn); }
.figure-dsl textarea { min-height: 10em; font-size: 0.85rem; line-height: 1.45; }
.figure-side .hint { margin: 4px 0 0; }
.figure-replace { font-weight: 400; }
@media (max-width: 900px) { .figure-card { grid-template-columns: 1fr; } }
/* In the new exam: a new figure at about its printed size (7 cm), and the offer to draw one. */
.block.new-figure { text-align: center; white-space: normal; }
.new-figure svg { display: block; width: 270px; max-width: 100%; height: auto; margin: 0 auto; border: 1px solid var(--border); }
.new-figure .link { font: 0.85rem "Segoe UI", sans-serif; }
.figure-offer { margin: -4px 0 8px; padding: 0 8px; font: 0.85rem "Segoe UI", sans-serif; }
.placeholder.dropped { text-decoration: line-through; color: var(--error); border-color: var(--error); }
#kept-list { margin: 4px 0 0; padding-left: 20px; max-height: 160px; overflow: auto; font-size: 0.85rem; }
#warnings, #pictures { font-size: 0.9rem; }
button.link { padding: 0 4px; border: 0; background: none; color: var(--accent); text-decoration: underline; }
#pictures { margin: 4px 0 0; padding-left: 20px; }
#pictures li { margin-bottom: 4px; }

/* The status page and the links that look like buttons. */
.button-link {
  display: inline-block; padding: 8px 16px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text); text-decoration: none;
}
.button-link:hover { border-color: var(--accent); }
header .row { margin: 0; }
main.status-page { display: block; overflow: auto; max-width: 900px; }
main.status-page .step {
  margin-bottom: 16px; padding: 12px 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
}
main.status-page .step h2 { margin: 0 0 8px; font-size: 1rem; }
.meters { display: grid; gap: 12px; }
.meter-head { display: flex; justify-content: space-between; gap: 12px; font-size: 0.95rem; }
.meter-bar { height: 10px; border-radius: 5px; background: var(--border); overflow: hidden; margin-top: 4px; }
.meter-fill { height: 100%; background: var(--accent); transition: width 0.4s; }
.meter.high .meter-fill { background: var(--error); }
.status-page table { width: 100%; border-collapse: collapse; }
.status-page th, .status-page td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); font-size: 0.95rem; }
.status-page th { color: var(--muted); font-weight: 600; }
.ok-text { color: var(--ok); }
#admin-nav button[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
main.admin { max-width: 1200px; }
.admin h4 { margin: 12px 0 4px; font-size: 0.95rem; }
.ai-text { white-space: pre-wrap; font: 12px/1.4 Consolas, monospace; max-height: 300px; overflow: auto; background: var(--bg); padding: 8px; border-radius: 6px; }
.warn-text { color: var(--warn); font-weight: 600; }

dialog {
  width: min(720px, 94vw);
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  padding: 20px;
}
dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
#busy-dialog { width: min(520px, 92vw); text-align: center; }
#busy-dialog p { margin: 0 0 14px; }
#busy-log { list-style: none; margin: 0 0 14px; padding: 0; text-align: left; font-size: 0.92em; max-height: 40vh; overflow-y: auto; }
#busy-log li { padding: 2px 0; color: var(--muted); }
#busy-log li.now { color: inherit; font-weight: 600; }
#busy-log li .when { display: inline-block; min-width: 3.6em; margin-right: 8px; color: var(--muted); font-variant-numeric: tabular-nums; }
.spinner {
  width: 32px; height: 32px; margin: 0 auto; border-radius: 50%;
  border: 4px solid var(--border); border-top-color: var(--accent);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

/* Desktop never shows the phone-only controls. */
.pane-toggle, .print-open { display: none; }
dialog h3 { margin: 0 0 12px; }
.exam-modes { border: 1px solid var(--line, #ccc); border-radius: 8px; padding: 4px 12px 12px; margin: 12px 0 0; }
.exam-modes legend { padding: 0 4px; font-weight: 600; }
.exam-modes .ready-option { margin-top: 8px; }
.figure-box img, .new-figure img { max-width: 100%; height: auto; display: block; }
.new-figure img { max-width: 280px; margin: 0 auto; }
/* a new figure floats at the right of the words that follow, as the document places it */
#preview .new-figure { float: right; clear: right; width: 44%; margin: 0 0 8px 12px; }
#preview::after { content: ""; display: block; clear: both; }
/* the button offered over a selected passage of the new exam */
#draw-selection { position: absolute; z-index: 30; font-size: 0.9rem; padding: 6px 12px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }
.ready-option { display: flex; align-items: flex-start; gap: 9px; margin-top: 12px; }
.ready-option input { margin-top: 5px; }
.ready-option span { display: flex; flex-direction: column; }
.ready-option small { color: var(--muted); font-weight: 400; }
math-field {
  display: block; width: 100%;
  font-size: 1.5rem; padding: 8px;
  border: 1px solid var(--border); border-radius: 6px;
}

header h1 { margin: 0; font-size: 1.15rem; }  /* the admin pages; the main page's name sits in .site-nav */
header p { margin: 0; color: var(--muted); font-size: 0.85rem; }
header .row { margin: 0; }
/* One row that never wraps: the file name is cut short with an ellipsis instead (the full name is in its tooltip). */
/* The actions sit apart from the tabs: a gap and a rule, then ordinary buttons. */
#actions { justify-content: flex-end; flex-wrap: nowrap; margin-left: 28px; padding-left: 20px; border-left: 2px solid var(--border); }
#actions .file-picker { min-width: 0; flex: 0 1 auto; }
#actions .file-picker span { display: block; min-width: 70px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#actions button { white-space: nowrap; }
#tabs { justify-self: center; }
#tabs[hidden] { display: none; }
/* The chosen file shows beside the name, as context rather than as a button. */
header .brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.file-chip {
  display: inline-block; max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 4px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border);
  color: var(--muted); font-size: 0.85rem;
}
.file-chip[hidden] { display: none; }
.divider { width: 1px; height: 24px; background: var(--border); }

/* Narrower windows: everything stays on the one row, only smaller. Below 1150px the actions keep
   their full width, the tabs take what is left (scrolling sideways if they must) and are no longer centred.
   These come last so they win over the rules above. */
@media (max-width: 1150px) {
  header { grid-template-columns: auto minmax(0, 1fr) max-content; }
  #tabs { justify-self: stretch; overflow-x: auto; scrollbar-width: none; }
}
@media (max-width: 1300px) {
  #tabs button { padding: 6px 12px; font-size: 0.8rem; letter-spacing: 0.02em; }
  #actions { margin-left: 18px; padding-left: 14px; }
  #actions button, #actions .file-picker span { padding: 6px 10px; font-size: 0.9rem; }
  .file-chip { max-width: 180px; }
}
@media (max-width: 1000px) {
  header h1, .site-nav h1 { font-size: 1rem; }
  .file-chip { max-width: 110px; }
  #tabs button { padding: 6px 9px; font-size: 0.72rem; letter-spacing: 0; }
  #actions { margin-left: 10px; padding-left: 10px; }
  #actions { gap: 6px; }
  #actions button { padding: 6px 8px; font-size: 0.82rem; }
}

/* ---- phones ------------------------------------------------------------------
   The header becomes rows, the tabs scroll sideways, the original exam folds under its heading,
   prints open in a new tab (phones do not draw a PDF inside the page), controls get finger-sized. */
@media (max-width: 700px) {
  html, body { height: auto; }
  header {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 10px;
    padding: 8px 12px;
  }
  .site-nav { gap: 0 16px; padding: 0 12px; }
  header h1, .site-nav h1 { font-size: 1.05rem; }
  .site-nav a { min-height: 44px; }
  header .brand { flex: 1 1 100%; justify-content: space-between; }
  .file-chip { max-width: 60vw; }
  #tabs { flex: 1 1 100%; justify-self: stretch; overflow-x: auto; scrollbar-width: none; justify-content: flex-start; }
  #tabs::-webkit-scrollbar { display: none; }
  #tabs button { padding: 9px 12px; font-size: 0.8rem; letter-spacing: 0.02em; }
  #actions { flex: 1 1 100%; margin: 0; padding: 0; border-left: 0; justify-content: space-between; gap: 6px; }
  #actions .divider { display: none; }
  #actions button, #actions .file-picker span { padding: 9px 10px; font-size: 0.85rem; flex: 1 1 auto; text-align: center; }
  #actions .file-picker { flex: 1 1 auto; }
  #actions .file-picker span { max-width: none; min-width: 0; flex: 0 0 auto; }  /* keeps its full label */
  main { padding: 6px 8px 10px; }
  #workspace { min-height: 70vh; }
  .panel { padding: 8px; }
  #exam-picker { padding: 6px 8px 0; }
  /* the original exam: heading with a Hiện/Ẩn button, body folded by default */
  .exam-pane.original .pane-toggle { display: inline-block; margin-left: auto; padding: 4px 12px; font-size: 0.85rem; }
  .exam-pane.original.collapsed .exam-preview { display: none; }
  .exam-preview { font-size: 16px; line-height: 1.6; }
  .block { padding: 4px 6px; }
  /* prints: a link instead of the viewer */
  #print-pdf, #print-original, #print-parsed { display: none; }
  .print-open { display: inline-block; align-self: flex-start; }
  .print-pane { flex: none; }
  /* dialogs and corner widgets */
  dialog { width: 96vw; padding: 14px; }
  math-field { font-size: 1.25rem; }
  #toast { left: 12px; right: 12px; bottom: 76px; }
  #feedback-open { right: 12px; bottom: 16px; }
  .picture-frame img { max-height: 50vh; }
  #edited { min-height: 50vh; }
  button, .file-picker span, .button-link { min-height: 40px; }
}
/* Đề nhanh (de-nhanh.html): on the left making an exam and the exams made, on the right the exam chosen with its
   PDF filling the height and the box to ask for a change under it. Each column scrolls on its own; on a phone they
   stack and the page scrolls. */
.direct-layout {
  flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  gap: 14px; padding: 12px 16px;
}
.direct-side { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding-right: 2px; }
.direct-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px 14px; }
.direct-card h2 { margin: 0 0 6px; font-size: 1.1rem; }
.direct-card .hint { margin: 0 0 8px; }
.direct-chosen { margin: 6px 0 0; overflow-wrap: anywhere; }
.direct-card .exam-modes { margin-top: 10px; }
.direct-label { display: block; margin: 12px 0 4px; font-weight: 600; }
.direct-textarea {
  width: 100%; font: inherit; padding: 8px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--text); resize: vertical;
}
.direct-textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.direct-start-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.direct-count { display: flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
.direct-count select { font: inherit; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); }
.direct-start { flex: 1; }
.direct-jobs { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.direct-job { border-left: 3px solid var(--accent); padding: 2px 0 2px 10px; }
.direct-job.failed { border-left-color: var(--error); }
.direct-job .status { margin: 0; }
.direct-log { list-style: none; margin: 8px 0 0; padding: 0; font-size: 0.9em; max-height: 30vh; overflow-y: auto; }
.direct-log li { padding: 2px 0; color: var(--muted); }
.direct-log li.now { color: inherit; font-weight: 600; }
.direct-log li .when { display: inline-block; min-width: 3.6em; margin-right: 8px; color: var(--muted); font-variant-numeric: tabular-nums; }
.direct-results { list-style: none; margin: 0; padding: 0; }
.direct-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left;
  margin: 0 0 6px; padding: 8px 10px; border-radius: 6px; background: var(--bg);
}
.direct-item[aria-current="true"] { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.direct-item-name { font-weight: 600; overflow-wrap: anywhere; }
.direct-item-meta { color: var(--muted); font-size: 0.85rem; }
.direct-keep { margin: 8px 0 0 !important; }
.direct-detail {
  min-height: 0; display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px;
}
.direct-none { margin: auto; max-width: 420px; text-align: center; color: var(--muted); }
.direct-current { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.direct-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.direct-head-title { flex: 1 1 220px; min-width: 0; }
.direct-head-title h2 { margin: 0; font-size: 1.1rem; overflow-wrap: anywhere; }
.direct-list-item { display: flex; align-items: stretch; gap: 4px; margin: 0 0 6px; }
.direct-list-item .direct-item { flex: 1; min-width: 0; margin: 0; }
.direct-item-rename { align-self: flex-start; padding: 4px 8px; font-size: 0.8rem; white-space: nowrap; }
.direct-rename-form { flex: 1; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 6px; border: 1px solid var(--accent); border-radius: 6px; background: var(--bg); }
.direct-rename-form input { flex: 1 1 160px; min-width: 0; font: inherit; font-weight: 600; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); }
.direct-rename-form .status { flex-basis: 100%; margin: 2px 0 0; }
.direct-versions { display: flex; flex-wrap: wrap; gap: 6px; }
.direct-version-chip { padding: 5px 12px; border-radius: 999px; }
.direct-version-chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-weight: 600; }
.direct-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.direct-version-request {
  margin: 0; padding: 8px 12px; border-left: 4px solid var(--accent); border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--text); overflow-wrap: anywhere;
}
.direct-version-request strong { color: var(--accent); }
.direct-version-info { margin: 0; }
.direct-more-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding-top: 8px; border-top: 1px solid var(--border); }
.direct-more { white-space: nowrap; font-weight: 600; }
.direct-make-count { margin: 4px 0 0; }
.direct-current > .status { margin: 0; }
.direct-note pre { white-space: pre-wrap; font: inherit; font-size: 0.9rem; color: var(--muted); margin: 6px 0 0; max-height: 25vh; overflow-y: auto; }
.direct-pdf { flex: 1; min-height: 320px; width: 100%; border: 1px solid var(--border); border-radius: 6px; background: #fff; }
.direct-viewer { flex: 1; min-height: 0; display: flex; align-items: stretch; }
.direct-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.direct-pane-version { flex: 1; }
.direct-pane-original { flex: 0 0 50%; }
.direct-pane-label { margin: 0 0 4px; font-size: 0.85rem; font-weight: 600; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.direct-divider { flex: 0 0 12px; margin: 0 2px; cursor: col-resize; border-radius: 6px; touch-action: none;
  background: linear-gradient(var(--border), var(--border)) center / 2px 48px no-repeat; }
.direct-divider:hover, .direct-divider:focus-visible, .direct-viewer.dragging .direct-divider { background-color: var(--surface); background-image: linear-gradient(var(--accent), var(--accent)); outline: none; }
.direct-viewer.dragging iframe { pointer-events: none; }  /* the frames would take the drag from the divider */
.direct-viewer.dragging { cursor: col-resize; user-select: none; }
.direct-no-pdf { margin: 0; }
.direct-revise { border-top: 1px solid var(--border); padding-top: 4px; }
.direct-revise .direct-label { margin-top: 6px; }
.direct-revise-row { display: flex; gap: 8px; align-items: stretch; }
.direct-revise-row .direct-textarea { flex: 1; }
.direct-revise-after { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.direct-revise-after .status { margin: 4px 0 0; }
.direct-images { flex: 1; min-height: 0; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; padding: 6px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.direct-images img { max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: 6px; background: #fff; }
.direct-dialog { width: min(520px, 92vw); }
.direct-dialog h3 { margin: 0 0 8px; font-size: 1.05rem; }
.direct-dialog .direct-log { max-height: 40vh; }
/* one line per exam, as a small table: Đề k | its kind | the user's words for it; the column names once above */
.direct-make-dialog { width: min(900px, 96vw); }
.direct-make-exams { display: flex; flex-direction: column; max-height: 70vh; overflow-y: auto; margin: 8px 0 12px; }
.direct-make-head, .direct-make-exam { display: grid; grid-template-columns: 56px minmax(200px, 260px) minmax(0, 1fr); gap: 10px; align-items: start; }
.direct-make-head { padding: 0 0 6px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 0.9rem; }
.direct-make-exam { padding: 10px 0; border-bottom: 1px solid var(--border); }
.direct-make-exam > strong { padding-top: 7px; }
.direct-make-exam select { width: 100%; font: inherit; padding: 7px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); }
.direct-make-exam .hint { margin: 4px 0 0; font-size: 0.82rem; }
@media (max-width: 700px) {
  .direct-make-head { display: none; }
  .direct-make-exam { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}
.direct-version-chip.source { border-style: dashed; }
@media (max-width: 900px) {
  body.direct-page { display: block; height: auto; min-height: 100%; }
  .direct-layout { display: flex; flex-direction: column; padding: 10px 16px 24px; }
  .direct-side { overflow: visible; }
  .direct-detail { min-height: 0; }
  .direct-pdf, .direct-divider { display: none; }  /* phones cannot show a PDF inside the page: "Tải PDF" opens it */
  .direct-viewer { flex-direction: column; gap: 8px; }
  .direct-pane-original { flex: none !important; }
  .direct-revise-row { flex-direction: column; }
}