/* ============================================================
   Tracker Exam Gen — NEET booklet generator
   Clean, white, functional UI. The booklet pages themselves are
   fixed A4 sheets with their own print typography.
   ============================================================ */

:root{
  --paper:#ffffff;
  --paper-deep:#f4f4f4;
  --surface:#ffffff;
  --surface-2:#fafafa;
  --ink:#111111;
  --ink-soft:#555555;
  --ink-faint:#8a8a8a;
  --line:#e7e7e7;
  --line-strong:#d6d6d6;
  --accent:#111111;
  --accent-deep:#000000;
  --accent-soft:#f2f2f2;
  --blue:#1d4ed8;
  --ok:#15803d;
  --danger:#b91c1c;
  --shadow-sm:0 1px 2px rgba(0,0,0,.04);
  --shadow:0 12px 32px -18px rgba(0,0,0,.25);
  --r-lg:12px;
  --r-md:9px;
  --r-sm:7px;
  --font-display:"Karla", "Avenir Next", "Helvetica Neue", sans-serif;
  --font-body:"Karla", "Avenir Next", "Helvetica Neue", sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-paper:"Source Serif 4", "Iowan Old Style", Georgia, serif;
}

*,*::before,*::after{box-sizing:border-box}

[hidden]{display:none !important}

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  min-height:100vh;
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17.5px;
  line-height:1.5;
  background:var(--paper);
}

button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--blue)}
code{font-family:var(--font-mono); font-size:.86em; background:#f4f4f4; padding:.08em .35em; border-radius:4px}
::selection{background:#111; color:#fff}

:focus-visible{outline:2px solid #111; outline-offset:2px; border-radius:6px}

/* ── Top bar ────────────────────────────────────────────── */
.topbar{
  position:sticky; top:0; z-index:40;
  height:60px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:0 clamp(16px,4vw,40px);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:10px; min-width:0}
.brand-mark{
  width:30px; height:30px; flex:none;
  background:var(--ink); color:#fff;
  display:grid; place-items:center;
  border-radius:7px;
  font-family:var(--font-mono); font-size:12.5px; font-weight:700; letter-spacing:.02em;
}
.brand-text{display:flex; flex-direction:column; line-height:1.15; min-width:0}
.brand-text strong{font-size:17.5px; font-weight:700; letter-spacing:-.01em}
.brand-tag{
  font-size:12.5px; letter-spacing:.06em;
  color:var(--ink-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.topbar-actions{display:flex; align-items:center; gap:8px; flex:none}

.status-pill{
  display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--line-strong); background:var(--surface);
  padding:5px 11px; border-radius:999px;
  font-size:14px; color:var(--ink-soft); transition:border-color .16s, color .16s;
}
.status-pill:hover{border-color:var(--ink); color:var(--ink)}
.status-pill .dot{width:6px; height:6px; border-radius:50%; background:var(--ink-faint)}
.status-pill.is-ok .dot{background:var(--ok)}
.status-pill.is-ok{border-color:#c6e3cf; color:var(--ok)}
.status-pill.is-bad .dot{background:var(--danger)}
.status-pill.is-bad{border-color:#f0c9c5; color:var(--danger)}

.icon-btn{
  width:32px; height:32px; display:grid; place-items:center;
  border:1px solid var(--line-strong); border-radius:7px; background:var(--surface);
  color:var(--ink-soft); transition:.16s;
}
.icon-btn:hover{background:var(--surface-2); border-color:var(--ink-soft); color:var(--ink)}

/* ── Shared shell ───────────────────────────────────────── */
.builder{
  max-width:1180px; margin:0 auto;
  padding:28px clamp(16px,4vw,40px) 64px;
}

.view-title{
  margin:0 0 20px;
  font-size:26px; font-weight:700; letter-spacing:-.015em; line-height:1.2;
}

/* ── Buttons ────────────────────────────────────────────── */
.ghost-btn{
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-soft);
  padding:7px 12px; border-radius:7px; font-size:14.5px; font-weight:600;
  transition:.15s;
}
.ghost-btn:hover{background:var(--surface-2); border-color:var(--ink-soft); color:var(--ink)}
.ghost-btn.tiny{padding:5px 9px; font-size:13.5px}
.ghost-btn.is-saved{background:#166534; border-color:#166534; color:#fff}

.solid-btn{
  border:1px solid var(--ink); background:var(--ink); color:#fff;
  padding:8px 15px; border-radius:7px; font-size:15px; font-weight:600;
  transition:.15s;
}
.solid-btn:hover{background:#2b2b2b; border-color:#2b2b2b}
.solid-btn.small{padding:7px 13px; font-size:14.5px}
.solid-btn:disabled{opacity:.5; cursor:not-allowed}

.press-btn{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  border:1px solid var(--ink); background:var(--ink); color:#fff;
  padding:10px 14px; border-radius:8px;
  font-size:15.5px; font-weight:600;
  transition:background .15s, border-color .15s, opacity .15s;
}
.press-btn:hover{background:#2b2b2b; border-color:#2b2b2b}
.press-btn:disabled{opacity:.5; cursor:progress}
.press-arrow{font-size:17.5px; line-height:1; opacity:.85}
.press-btn.compact{width:auto; padding:8px 13px; font-size:15px}

.link-btn{
  background:none; border:0; padding:0; color:var(--ink);
  font:inherit; font-weight:600; text-decoration:underline; text-underline-offset:2px;
}
.link-btn:hover{color:#000}

/* ── Exam picker ────────────────────────────────────────── */
.exam-view{
  max-width:1180px; margin:0 auto;
  padding:34px clamp(16px,4vw,40px) 64px;
}
.exam-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px;
  align-items:stretch;
}
.exam-card{
  display:flex; flex-direction:column; gap:12px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:20px 20px 18px;
  transition:border-color .16s, box-shadow .16s;
}
.exam-card.is-live:hover{border-color:var(--line-strong); box-shadow:var(--shadow-sm)}
.exam-card.is-soon{background:var(--surface-2)}
.exam-card h2{
  margin:0; font-size:24px; font-weight:700; line-height:1.2; letter-spacing:-.01em;
}
.exam-desc{margin:0; font-size:15px; line-height:1.45; color:var(--ink-soft)}
.exam-meta{margin:0; font-size:14.5px; line-height:1.45; color:var(--ink-faint); flex:1}
.exam-sub{display:grid; gap:0; border-top:1px solid var(--line); padding-top:6px; flex:1}
.exam-sub div{display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:6px 0; border-bottom:1px solid var(--line)}
.exam-sub div:last-child{border-bottom:0}
.exam-sub span{font-size:15px; font-weight:600; color:var(--ink-soft)}
.exam-sub em{font-size:13.5px; font-style:normal; letter-spacing:.04em; color:var(--ink-faint)}
.exam-card .press-btn{width:100%; margin-top:auto}
.exam-card.is-soon .press-btn{background:#ededed; border-color:#ededed; color:#9a9a9a; cursor:not-allowed}
.exam-card.is-soon .press-btn:hover{background:#ededed; border-color:#ededed}

/* ── Builder bar ────────────────────────────────────────── */
.builder-bar{
  display:flex; align-items:center; gap:16px;
  padding-bottom:18px; margin-bottom:20px;
  border-bottom:1px solid var(--line);
}
.crumb{
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-soft);
  padding:6px 11px; border-radius:7px; font-size:14.5px; font-weight:600;
  white-space:nowrap; transition:.15s;
}
.crumb:hover{background:var(--surface-2); border-color:var(--ink-soft); color:var(--ink)}
.builder-title{min-width:0; flex:1}
.builder-title h1{margin:0; font-size:22px; font-weight:700; line-height:1.2; letter-spacing:-.01em}
.builder-title p{
  margin:2px 0 0; font-size:14px; color:var(--ink-faint);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.builder-stats{display:flex; align-items:center; gap:18px; flex:none}
.builder-stats span{font-size:14.5px; color:var(--ink-faint); white-space:nowrap}
.builder-stats b{color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums; margin-right:2px}

.grid{
  display:grid; grid-template-columns:320px minmax(0,1fr);
  gap:22px; align-items:start;
}

/* ── Cards ──────────────────────────────────────────────── */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.card-head{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 18px;
  border-bottom:1px solid var(--line);
}
.card-head.tight{padding-bottom:12px}
.card-head h2{margin:0; font-size:16.5px; font-weight:700; letter-spacing:-.005em}
.card-tools{display:flex; align-items:center; gap:10px; flex:none}
.mini-status{
  font-size:13.5px; color:var(--ink-faint); white-space:nowrap;
}
.mini-status.is-ok{color:var(--ok)}
.mini-status.is-bad{color:var(--danger)}

/* ── Empty state ────────────────────────────────────────── */
.tree-empty{
  margin:14px 18px;
  padding:18px;
  border:1px dashed var(--line-strong); border-radius:9px;
  background:var(--surface-2);
}
.empty-title{margin:0 0 4px; font-size:16px; font-weight:700}
.empty-body{margin:0; font-size:14.5px; color:var(--ink-soft); line-height:1.55; max-width:56ch}

/* ── Fields ─────────────────────────────────────────────── */
.field{display:flex; flex-direction:column; gap:5px; min-width:0}
.field > span{
  font-size:13.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-faint); display:flex; gap:6px; align-items:flex-end; flex-wrap:wrap;
  min-height:40px;
}
.field > span i{font-style:normal; text-transform:none; letter-spacing:0; font-size:13.5px; color:#b0b0b0; font-weight:400}
.field input, .field select{
  width:100%; min-width:0;
  border:1px solid var(--line-strong); background:#fff; border-radius:7px;
  padding:8px 10px; font-size:15.5px;
  transition:border-color .15s, box-shadow .15s;
}
.field input:hover, .field select:hover{border-color:#bdbdbd}
.field input:focus, .field select:focus{
  outline:none; border-color:var(--ink); box-shadow:0 0 0 3px rgba(0,0,0,.06);
}
.field input::placeholder{color:#b5b5b5}
.field.wide{grid-column:1 / -1}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:10px}
input[type="date"]{width:auto; min-width:0; max-width:100%}

/* ── Left rail ──────────────────────────────────────────── */
.rail{
  position:sticky; top:78px; display:flex; flex-direction:column; gap:14px;
  /* The details card itself scrolls; the rail must not become a second
     scroll container or wheel events get trapped between the two. */
  max-height:none; overflow:visible;
}
.details-card{
  display:flex; flex-direction:column;
  max-height:calc(100vh - 94px);
}
.details-card > .card-head{flex:0 0 auto;}
.details-form{
  display:grid; gap:11px; padding:14px 16px 16px;
  flex:1 1 auto; min-height:0;
  overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:thin;
}

.toggles{display:flex; flex-wrap:wrap; justify-content:flex-start; gap:12px 14px; padding-top:2px}

/* Collapsed extras keep the form to the essentials. */
.adv{border-top:1px solid var(--line); padding-top:10px; margin-top:1px}
.adv summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:7px;
  font-size:13px; font-weight:600; color:var(--ink-soft);
}
.adv summary::-webkit-details-marker{display:none}
.adv summary::before{content:"+"; font-size:15px; line-height:1; color:var(--ink-faint); width:12px}
.adv[open] summary::before{content:"–"}
.adv summary:hover{color:var(--ink)}
.adv-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; padding-top:11px}
.switch{display:flex; align-items:center; gap:7px; cursor:pointer; font-size:14px; color:var(--ink-soft)}
.switch input{position:absolute; opacity:0; width:1px; height:1px}
.switch .track{
  width:28px; height:16px; border-radius:999px; background:#dcdcdc; position:relative; flex:none;
  transition:background .16s;
}
.switch .track::after{
  content:""; position:absolute; top:2px; left:2px; width:12px; height:12px; border-radius:50%;
  background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:transform .16s;
}
.switch input:checked + .track{background:var(--ink)}
.switch input:checked + .track::after{transform:translateX(12px)}
.switch input:focus-visible + .track{outline:2px solid #111; outline-offset:2px}
.switch-label{font-size:14px}

/* ── Generate panel ─────────────────────────────────────── */
.panel-actions{
  border-top:1px solid var(--line); margin-top:2px; padding-top:13px;
  display:grid; gap:0;
}
.ticket-meta{
  margin:0 0 10px; font-size:13.5px; line-height:1.5; color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}

/* ── Subject section cards ──────────────────────────────── */
.subject-cards{display:grid; gap:0; padding:0}
.subject-card{
  display:grid; gap:11px; padding:15px 18px 16px; background:var(--surface);
  border-bottom:1px solid var(--line);
  transition:background .15s;
}
.subject-card:last-child{border-bottom:0}
.subject-card:hover{background:#fcfcfc}
.subject-card.is-empty{opacity:.6}
.subject-head{display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:10px; align-items:center}
.subject-letter{
  display:grid; place-items:center; width:28px; height:28px; flex:none;
  background:var(--ink); color:#fff; border-radius:6px;
  font-size:14.5px; font-weight:700; line-height:1;
}
.subject-id{min-width:0}
.subject-id h3{margin:0; font-size:17.5px; font-weight:700; line-height:1.2}
.subject-id span{
  display:block; margin-top:1px;
  font-size:14.5px; line-height:1.35; letter-spacing:.01em;
  color:#6f6f6f; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.subject-range{
  font-size:13px; font-weight:600; letter-spacing:.02em;
  color:var(--ink); background:var(--surface-2); border:1px solid var(--line);
  border-radius:999px; padding:3px 9px; white-space:nowrap;
}
.subject-card.is-empty .subject-range{color:var(--ink-faint)}
.subject-controls{display:grid; grid-template-columns:86px minmax(0,1fr); gap:10px; align-items:start}
.subject-controls .field > span{font-size:12.5px; letter-spacing:.04em}
.subject-controls .field input, .subject-controls .field select{padding:7px 9px; font-size:15px}
.subject-controls .field.compact.grow{min-width:0}

/* Chapter / topic picker */
.focus-btn{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  border:1px solid var(--line-strong); background:#fff; border-radius:7px;
  padding:7px 9px; font-size:15px; color:var(--ink-soft); text-align:left;
  transition:border-color .15s, box-shadow .15s;
}
.focus-btn:hover{border-color:#bdbdbd}
.focus-btn:focus-visible{outline:none; border-color:var(--ink); box-shadow:0 0 0 3px rgba(0,0,0,.06)}
.focus-btn span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.focus-btn b{font-size:12.5px; color:var(--ink-faint)}
.focus-panel{
  margin-top:2px; border:1px solid var(--line); border-radius:9px;
  background:var(--surface-2); overflow:hidden;
}
.focus-tools{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:7px 10px; border-bottom:1px solid var(--line); background:#fff;
}
.focus-tools span{font-size:13.5px; color:var(--ink-faint); line-height:1.4}
.focus-clear{
  border:1px solid var(--line-strong); background:#fff; color:var(--ink-soft);
  border-radius:6px; padding:4px 9px; font-size:12px; font-weight:600;
  letter-spacing:.03em;
}
.focus-clear:hover{background:var(--ink); border-color:var(--ink); color:#fff}
.focus-clear:disabled{opacity:.4; cursor:default}
.focus-clear:disabled:hover{background:#fff; border-color:var(--line-strong); color:var(--ink-soft)}
.focus-chapters{max-height:250px; overflow:auto; padding:4px 6px 6px}
.focus-chapter{border-radius:6px}
.focus-chapter + .focus-chapter{border-top:1px solid var(--line)}
.focus-row{display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:8px; padding:3px 4px}
.focus-chapter-label{display:flex; align-items:center; gap:8px; min-width:0; cursor:pointer; padding:3px 0}
.focus-chapter-label input{accent-color:#111; width:14px; height:14px; flex:none; margin:0}
.focus-cname{font-size:14.5px; line-height:1.35; color:var(--ink-soft); overflow-wrap:break-word}
.focus-chapter.is-picked .focus-cname{color:var(--ink); font-weight:700}
.focus-count{font-size:12.5px; color:var(--ink-faint); white-space:nowrap}
.focus-expand{
  border:0; background:none; padding:2px 4px;
  font-size:12.5px; font-weight:600; letter-spacing:.02em; color:var(--ink-faint);
  white-space:nowrap;
}
.focus-expand:hover{color:var(--ink)}
.focus-expand b{display:inline-block; transition:transform .15s; font-size:13.5px; margin-left:2px}
.focus-expand.is-open b{transform:rotate(90deg)}
.focus-expand.is-flat{opacity:.6; cursor:default}
.focus-topics{
  display:grid; grid-template-columns:1fr 1fr; gap:1px 12px;
  margin:0 4px 6px 26px; padding:5px 0 6px 8px;
  border-left:1px solid var(--line-strong);
}
.focus-topic{display:flex; align-items:baseline; gap:6px; padding:3px 4px; border-radius:5px; cursor:pointer; min-width:0}
.focus-topic:hover{background:#fff}
.focus-topic input{accent-color:#111; width:12px; height:12px; flex:none; margin:0; position:relative; top:1px}
.focus-topic span{flex:1 1 auto; min-width:0; font-size:14.5px; line-height:1.4; color:var(--ink-soft); overflow-wrap:break-word}
.focus-topic em{font-size:12.5px; font-style:normal; color:var(--ink-faint); margin-left:auto}
.focus-topic.is-on span{color:var(--ink); font-weight:600}
.focus-empty{margin:0; padding:10px; font-size:13.5px; color:var(--ink-faint)}

.coverage-note{
  margin:0; padding:11px 18px;
  border-top:1px solid var(--line);
  font-size:14px; line-height:1.5; color:var(--ink-faint);
}

/* ── Preview ────────────────────────────────────────────── */
.preview{min-height:100vh; padding-bottom:60px}
.preview-toolbar{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:14px;
  padding:10px clamp(16px,3vw,32px);
  background:rgba(255,255,255,.94); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.preview-title{display:flex; flex-direction:column; line-height:1.3; min-width:0; flex:1}
.preview-title strong{font-size:16.5px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.preview-title span{font-size:14px; color:var(--ink-faint)}
.preview-actions{display:flex; gap:8px; flex:none}
.series-switch{
  display:flex; align-items:center; gap:3px; padding:3px;
  border:1px solid var(--line); border-radius:9px; background:var(--surface-2); flex:none;
}
.series-switch[hidden]{display:none}
.series-btn{
  width:32px; height:30px; border:0; border-radius:6px; background:transparent;
  font:inherit; font-size:13.5px; font-weight:700; color:var(--ink-soft); cursor:pointer;
}
.series-btn:hover{background:#e9e9e9}
.series-btn.is-active{background:var(--ink); color:#fff}

.preview-stage{padding:26px 16px; overflow-x:auto; background:#f6f6f6}
#paperMount{width:794px; margin:0 auto}
.preview-stage::-webkit-scrollbar{height:10px}
.preview-stage::-webkit-scrollbar-thumb{background:#d0d0d0; border-radius:999px}

/* ── Fixed A4 pages ─────────────────────────────────────── */
.page{
  position:relative;
  width:794px; height:1123px; flex:none;
  box-sizing:border-box;
  display:flex; flex-direction:column; overflow:hidden;
  margin:0 auto 26px;
  padding:34px 52px 20px;
  background:#fff; color:#111;
  font-family:var(--font-paper);
  font-size:15px; line-height:1.45;
  box-shadow:0 1px 2px rgba(0,0,0,.06), 0 14px 34px -22px rgba(0,0,0,.35);
}
.page:last-child{margin-bottom:0}

/* Page header */
.pg-head{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex:none; padding-bottom:6px; margin-bottom:12px;
  border-bottom:1.4px solid #111;
  font-family:var(--font-mono); font-size:9.6px; letter-spacing:.12em; text-transform:uppercase;
  color:#222;
}
.pg-inst{
  font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  max-width:62%;
}
.pg-code{white-space:nowrap; color:#555}

/* Page body */
.pg-body{flex:1 1 auto; min-height:0; overflow:hidden; display:block}
.pg-foot{
  flex:none; display:flex; align-items:center; gap:12px;
  padding-top:6px; margin-top:10px;
  border-top:.8px solid #b9b9b9;
  font-family:var(--font-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:#666;
}
.pg-foot .pf-left{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pg-foot .pf-right{flex:1; min-width:0; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* Diamond page number */
.page-no{
  display:inline-grid; place-items:center; flex:none;
  width:28px; height:28px; transform:rotate(45deg);
  border:1.2px solid #111; background:#fff;
}
.page-no i{transform:rotate(-45deg); font-style:normal; font-family:var(--font-mono); font-size:11px; font-weight:700; line-height:1}

/* Section heading */
.sec-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  margin:0 0 14px; padding-bottom:5px;
  border-bottom:1.6px solid #111;
  break-after:avoid; page-break-after:avoid;
}
.sec-head h2{
  margin:0; font-family:var(--font-paper); font-size:17px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
}
.sec-head span{
  font-family:var(--font-mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:#555;
  white-space:nowrap;
}

/* Rough work band */
.rough-box{
  flex:none; height:148px; margin-top:12px;
  border:1px solid #bdbdbd; border-radius:2px;
  background:
    repeating-linear-gradient(180deg, transparent 0 23px, rgba(0,0,0,.055) 23px 24px);
  display:grid; place-items:center;
  position:relative;
}
.rough-box span{
  font-family:var(--font-mono); font-size:9px; letter-spacing:.22em; text-transform:uppercase;
  color:#999; background:#fff; padding:0 10px;
}

/* Questions */
.q{margin:0 0 12px; break-inside:avoid; page-break-inside:avoid}
.q:last-child{margin-bottom:0}
/* Two-column NEET layout */
.page.cols-2{font-size:12.6px; line-height:1.36}
.page.cols-2 .pg-body.cols-2{display:flex; flex-direction:column; min-height:0}
.q-cols{display:flex; flex:1 1 auto; min-height:0; width:100%}
.q-col{flex:1 1 0; min-width:0; overflow:hidden}
.q-col:first-child{padding-right:12px; border-right:.8px solid #e5c6d3}
.q-col:last-child{padding-left:12px}
.page.cols-2 .sec-head{margin-bottom:10px}
.page.cols-2 .q{margin-bottom:9px}
.page.cols-2 .q-head{grid-template-columns:auto minmax(0,1fr); gap:4px}
.page.cols-2 .q-no{font-size:11.5px}
.page.cols-2 .q-stem img{max-height:38mm; margin:4px 0}
.page.cols-2 .opts{margin:4px 0 0 27px; gap:1px 9px}
.page.cols-2 .opts li{grid-template-columns:17px minmax(0,1fr); gap:1px 4px}
.page.cols-2 .opts .ol{font-size:10.5px}
.page.cols-2 .opts .ot img{max-height:24mm; margin:2px 0}
.ch-head{
  margin:1px 0 6px; padding:2.5px 8px; border-left:3px solid #c2185b;
  background:#fce8ef; color:#a80048; font-weight:700; font-size:12px;
}
.tp-head{
  margin:6px 0 4px; padding-bottom:2px; border-bottom:.6px solid #e7b9ca;
  color:#b0004f; font-weight:700; font-size:11px;
}
.q-col .ch-head:first-child{margin-top:0}

.q.q-compact .q-stem img{max-height:40mm}
.q.q-compact .opts .ot img{max-height:24mm}
.q.q-tight .q-stem img{max-height:30mm}
.q.q-tight .opts .ot img{max-height:18mm}
.q.q-mini .q-stem img{max-height:22mm}
.q.q-mini .opts .ot img{max-height:14mm}
.q.q-mini .opts{gap:1px}
.q-head{display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px; align-items:start}
.q-no{
  font-family:var(--font-mono); font-size:13.5px; font-weight:700; line-height:1.5;
  text-align:right; padding-right:3px; color:#111; white-space:nowrap;
}
.q-stem{min-width:0}
.q-stem p{margin:0 0 4px}
.q-stem p:last-child{margin-bottom:0}
.q-stem img{width:auto !important; height:auto !important; max-width:100%; max-height:56mm; display:block; margin:6px 0; object-fit:contain}
.q-stem .katex{font-size:1.02em}
.q-stem .katex-display{margin:.3em 0}
.q-stem table{border-collapse:collapse; font-size:12.5px; width:100%; max-width:100%; margin:4px 0 2px}
.q-stem td,.q-stem th{border:1px solid #bbb; padding:3px 6px}

.opts{
  list-style:none; margin:5px 0 0 31px; padding:0;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:2px 22px;
}
.opts.single{grid-template-columns:1fr}
.opts li{display:grid; grid-template-columns:24px minmax(0,1fr); gap:2px 5px; align-items:start; min-width:0}
.opts .ol{font-family:var(--font-mono); font-size:12px; color:#444; line-height:1.5; text-transform:uppercase}
.opts .ot{min-width:0}
.opts .ot p{margin:0 0 1px}
.opts .ot p:last-child{margin-bottom:0}
.opts .ot img{width:auto !important; height:auto !important; max-width:100%; max-height:34mm; display:block; margin:3px 0; object-fit:contain}
.opts .katex{font-size:1em}

/* ── Cover ──────────────────────────────────────────────── */
.cover{padding:30px 48px 20px; font-size:13px}
.cover-top{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex:none}
.booklet-badge{display:flex; align-items:stretch; gap:10px}
.vert{
  writing-mode:vertical-rl; transform:rotate(180deg);
  border:1px solid #111; padding:9px 4px;
  font-family:var(--font-paper); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
  display:flex; align-items:center; justify-content:center;
}
.code-block{display:flex; flex-direction:column; gap:4px; align-items:center; justify-content:center}
.code-label{
  font-family:var(--font-paper); font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:#333;
}
.code-box{
  width:58px; height:52px; display:grid; place-items:center;
  border:1.6px solid #111; font-family:var(--font-paper); font-size:27px; font-weight:700; line-height:1;
}
.cover-serial{
  font-family:var(--font-paper); font-size:14px; letter-spacing:.02em; padding-top:4px;
}
.cover-institute{
  flex:none; margin:10px 0 0; text-align:center;
  font-family:var(--font-paper); font-size:14px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.cover-notice{flex:none; margin:12px 0 0; text-align:center}
.cover-notice p{margin:0; font-size:11.5px; line-height:1.5; font-weight:600; color:#222}
.cover-exam{
  flex:none; margin:10px 0 12px; text-align:center;
  font-family:var(--font-body); font-size:47px; font-weight:800; letter-spacing:.2em; line-height:1;
  text-indent:.2em;
}
.instruction-box{
  flex:1 1 auto; min-height:0; overflow:hidden;
  border:1.8px solid #111; padding:10px 16px 8px;
}
.instruction-box h2{
  margin:0 0 6px; text-align:center;
  font-family:var(--font-paper); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}
.cover-inst{
  margin:0; padding-left:17px;
  font-size:9.9px; line-height:1.34; color:#1a1a1a;
}
.cover-inst li{margin:0 0 3.5px; padding-left:2px}
.cover-inst li:last-child{margin-bottom:0}
.cover-test-name{
  flex:none; margin:14px 0 8px; text-align:center;
  font-size:14px; font-weight:700;
}
.cover-test-name span{border-bottom:1.5px solid #111; padding:0 4px 2px}
.cover-cut{flex:none; border-top:1.4px dashed #444; margin:12px 0 10px}
.cover-fields{flex:none}
.cover-fields p{
  display:flex; align-items:baseline; gap:6px; margin:8px 0;
  font-size:11.5px; color:#111;
}
.cover-fields p.indent{padding-left:88px}
.cover-fields i{flex:1 1 auto; border-bottom:1px dotted #555; height:13px; min-width:40px}
.cover-fields i.short{flex:0 1 150px}
.cover-foot{flex:none; display:flex; justify-content:center; padding-top:12px; margin-top:auto}

/* ── Answer key ─────────────────────────────────────────── */
.key-grid{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0 18px; padding-top:2px}
.key-table{width:100%; border-collapse:collapse; font-family:var(--font-mono); font-size:10.5px}
.key-table td{padding:4px 5px; border-bottom:.5px solid #dcdcdc}
.key-table td.k-q{text-align:right; color:#333; width:46%}
.key-table td.k-a{font-weight:700; text-align:center}
.key-page .sec-head{margin-bottom:16px}

/* ── OMR answer sheet ─────────────────────────────────── */
.omr-page{
  padding:26px 34px 20px; color:#8c1247;
  font-family:var(--font-mono); font-size:10.5px;
  display:flex; flex-direction:column;
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
}
.omr-head{display:flex; align-items:center; justify-content:space-between; gap:14px; border-bottom:2px solid #c2185b; padding-bottom:9px}
.omr-inst{font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; max-width:28%; color:#333}
.omr-head h2{margin:0; font-family:var(--font-paper); font-size:23px; letter-spacing:.08em; text-transform:uppercase; color:#b0004f}
.omr-tag{font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#333}
.omr-rule{height:3px; border-top:1px solid #c2185b; border-bottom:1px solid #c2185b; margin:4px 0 11px}
.omr-body{flex:1 1 auto; min-height:0; display:flex; gap:14px}
.omr-side{width:172px; flex:none; display:flex; flex-direction:column; gap:10px; border-right:1px solid #e7b9ca; padding-right:11px}
.omr-block{border:1.2px solid #c2185b; padding:5px 6px; border-radius:2px}
.omr-label{display:block; font-size:9.5px; font-weight:700; letter-spacing:.08em; color:#b0004f; margin-bottom:4px}
.omr-digits{display:flex; gap:2px; justify-content:center}
.omr-digit{display:flex; flex-direction:column; gap:1px}
.omr-mini{
  width:12px; height:10px; border:.8px solid #d98aa8; border-radius:50%;
  display:grid; place-items:center; font-size:6.6px; font-style:normal; color:#a80048;
}
.omr-digits.tight .omr-mini{width:14px; height:11px}
.omr-codes{display:flex; gap:3px; justify-content:center; padding:2px 0}
.omr-code{
  width:23px; height:23px; border:1.1px solid #c2185b; border-radius:50%;
  display:grid; place-items:center; font-style:normal; font-size:11.5px; font-weight:700; color:#b0004f;
}
.omr-code.is-on{background:#c2185b; color:#fff}
.omr-note{font-size:8.5px; line-height:1.45; color:#8c1247; margin:3px 0 0}
.omr-vertical{
  margin:auto 0 0; writing-mode:vertical-rl; transform:rotate(180deg);
  align-self:flex-start; font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; color:#c2185b;
}
.omr-main{flex:1 1 auto; min-width:0; display:flex; flex-direction:column}
.omr-main-head{display:flex; justify-content:space-between; gap:10px; border-bottom:1px solid #e7b9ca; padding-bottom:4px; margin-bottom:5px; font-size:9px; letter-spacing:.04em; text-transform:uppercase; color:#8c1247}
.omr-cols{flex:1 1 auto; display:flex; gap:8px; min-height:0}
.omr-col{flex:1 1 0; min-width:0}
.omr-col-head{display:flex; justify-content:space-between; gap:2px; font-size:8px; font-weight:700; text-transform:uppercase; color:#b0004f; border-bottom:1px solid #e7b9ca; padding-bottom:2px; margin-bottom:3px}
.omr-row{display:flex; align-items:center; gap:2px; height:20px; border-bottom:.5px solid #f0d3df}
.omr-q{width:27px; text-align:right; font-size:9.5px; color:#8c1247; font-variant-numeric:tabular-nums}
.omr-bub{
  width:14.5px; height:14.5px; border:.8px solid #cf6f92; border-radius:50%;
  display:inline-grid; place-items:center; font-size:8.5px; font-style:normal; color:#a80048; margin-left:1px;
}
.omr-foot{flex:none; display:flex; gap:16px; align-items:flex-end; border-top:1.2px solid #c2185b; padding-top:9px; margin-top:9px}
.omr-decl{flex:1 1 auto; font-size:8px; line-height:1.45; color:#8c1247}
.omr-decl b{display:block; font-size:9px; letter-spacing:.06em; margin-bottom:2px}
.omr-decl p{margin:0}
.omr-signs{width:300px; display:flex; gap:12px; flex:none}
.omr-signs span{flex:1; border-top:1px solid #b0004f; padding-top:3px; font-size:7.5px; text-align:center; color:#8c1247}

/* ── Syllabus (page 2) ──────────────────────────────────── */
.syllabus-page .pg-body.syllabus-body{display:flex; flex-direction:column; min-height:0}
.syllabus-title{
  flex:none; text-align:center; margin:0 0 12px; padding-bottom:8px;
  border-bottom:1.6px solid #111;
}
.syllabus-title h2{
  margin:0; font-family:var(--font-paper); font-size:22px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; line-height:1.15;
}
.syllabus-title span{
  display:block; margin-top:4px;
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:#555;
}
.syllabus-frame{
  flex:1 1 auto; min-height:0;
  border:2.4px solid #111; padding:6px;
}
.syllabus-grid{
  height:100%; display:flex; flex-direction:column; gap:12px;
}
.syllabus-subject{
  flex:1 1 0; min-height:0; min-width:0;
  border:1.8px solid #111;
  display:flex; flex-direction:column; overflow:hidden;
  background:#fff;
}
.syllabus-subject:has(> .syllabus-full){flex:0 0 auto}
.syllabus-subject-head{
  flex:none; display:flex; align-items:center; gap:9px;
  background:#111; color:#fff; padding:7px 10px;
}
.syllabus-letter{
  flex:none; display:grid; place-items:center;
  width:24px; height:24px; border:1.4px solid #fff;
  font-family:var(--font-mono); font-size:13px; font-weight:700; line-height:1;
}
.syllabus-subject-head h3{
  flex:1 1 auto; min-width:0; margin:0;
  font-family:var(--font-paper); font-size:16px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.syllabus-range{
  flex:none; font-family:var(--font-mono); font-size:9px; letter-spacing:.05em; color:#ddd;
  white-space:nowrap;
}
.syllabus-chapters{
  flex:1 1 auto; min-height:0; overflow:hidden;
  list-style:none; margin:0; padding:10px 14px;
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:4px 18px;
  font-family:var(--font-paper); font-size:12.5px; line-height:1.38; color:#111;
}
.syllabus-chapters li{
  display:flex; gap:8px; align-items:flex-start;
  margin:0; min-width:0;
}
.syllabus-no{
  flex:none; display:grid; place-items:center;
  width:18px; height:18px; margin-top:1px;
  border:1.1px solid #111;
  font-family:var(--font-mono); font-size:9.5px; font-weight:700; line-height:1;
}
.syllabus-name{flex:1 1 auto; min-width:0; overflow-wrap:break-word}
.syllabus-topics{
  display:block; margin-top:1px;
  font-size:10.5px; line-height:1.3; color:#555; font-style:italic;
  overflow-wrap:break-word;
}
.syllabus-grid.dense .syllabus-chapters{
  font-size:11px; line-height:1.3;
  grid-template-columns:repeat(4, minmax(0,1fr)); gap:3px 14px;
}
.syllabus-grid.dense .syllabus-no{width:16px; height:16px; font-size:8.5px}
.syllabus-grid.very-dense .syllabus-chapters{
  font-size:9.5px; line-height:1.25;
  grid-template-columns:repeat(5, minmax(0,1fr)); gap:2px 12px;
}
.syllabus-grid.very-dense .syllabus-no{width:15px; height:15px; font-size:8px}
.syllabus-full{
  flex:none;
  display:flex; flex-direction:row; align-items:center; justify-content:center; gap:22px;
  padding:12px 18px; text-align:left;
}
.syllabus-stamp{
  border:2.2px solid #111; outline:1px solid #111; outline-offset:4px;
  padding:14px 26px 12px;
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
.syllabus-stamp span{
  font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.5em; text-indent:.5em;
}
.syllabus-stamp strong{
  font-family:var(--font-paper); font-size:22px; font-weight:700; letter-spacing:.12em; line-height:1.05;
}
.syllabus-full p{margin:0; max-width:38ch; font-size:12.5px; line-height:1.45; color:#333}

/* measurement helper */
.measure{visibility:hidden; pointer-events:none}

/* export state */
.is-exporting .page{box-shadow:none !important; margin:0 !important}
.paper-empty{
  width:794px; margin:0 auto; padding:60px 30px; text-align:center;
  background:#fff; border:1px dashed var(--line-strong);
  font-family:var(--font-body); color:var(--ink-faint);
}

/* ── Dialog ─────────────────────────────────────────────── */
.dialog-backdrop{
  position:fixed; inset:0; z-index:100;
  display:grid; place-items:center;
  padding:20px;
  background:rgba(0,0,0,.3);
  animation:fade .16s ease-out;
}
.dialog{
  width:min(500px,100%);
  max-height:calc(100vh - 40px);
  display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line);
  border-radius:12px; box-shadow:0 30px 70px -30px rgba(0,0,0,.4);
  animation:rise .18s cubic-bezier(.2,.8,.2,1);
  overflow:hidden;
}
.dialog-head{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:15px 18px; border-bottom:1px solid var(--line);
}
.dialog-head h2{margin:0; font-size:17px; font-weight:700}
.dialog-body{
  flex:1 1 auto; min-height:0;
  padding:16px 18px; display:grid; gap:14px;
  overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:thin;
}
.dialog-foot{
  flex:0 0 auto;
  display:flex; align-items:center; gap:10px;
  padding:12px 18px; border-top:1px solid var(--line); background:var(--surface-2);
}

/* ── Manual picker ──────────────────────────────────────── */
.manual-dialog{width:min(820px,100%)}
.manual-toolbar{display:grid; gap:10px; align-items:end; grid-template-columns:1fr}
.manual-toolbar .field.compact{min-width:0}
.manual-counts{display:flex; gap:12px; align-items:center; justify-content:flex-end; flex-wrap:wrap}
@media (min-width:640px){
  .manual-toolbar{grid-template-columns:minmax(150px,1fr) minmax(150px,1fr) auto auto}
}
.manual-count{margin-left:auto; font-size:13.5px; font-weight:600; color:var(--ink-soft); align-self:center}
.manual-list{display:grid; gap:10px; max-height:52vh; overflow-y:auto; overscroll-behavior:contain; padding-right:4px}
.manual-item{border:1px solid var(--line); border-radius:8px; padding:10px 12px; background:#fff; display:grid; gap:6px}
.manual-item.is-selected{border-color:var(--ink); background:#f7f7f7}
.manual-item-head{display:flex; gap:8px; align-items:flex-start}
.manual-item-head input{margin-top:3px; flex:none}
.manual-item-meta{font-size:11.5px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.06em}
.manual-item-stem{font-size:15px; line-height:1.45}
.manual-item-stem img{max-width:100%; max-height:180px; height:auto; width:auto; object-fit:contain; margin:4px auto; display:block}
.manual-item-opts img{max-width:100%; max-height:120px; height:auto; width:auto; object-fit:contain; margin:2px 0; display:inline-block; vertical-align:middle}
.manual-item-stem table{width:100%; border-collapse:collapse; margin:6px 0; font-size:14px}
.manual-item-stem th,.manual-item-stem td{border:1px solid var(--line-strong); padding:4px 6px; vertical-align:top}
.manual-item-stem th{background:var(--surface-2); font-weight:600}
.manual-item-opts{display:grid; gap:2px 12px; font-size:14px; color:var(--ink-soft); grid-template-columns:repeat(auto-fit, minmax(260px, 1fr))}
.manual-item-opts li{list-style:none; display:flex; gap:4px; align-items:baseline; flex-wrap:wrap}
.manual-item-opts li b{flex:0 0 auto}
.manual-more{text-align:center; padding:6px 0}
.manual-group{font-size:12px; font-weight:700; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.06em; margin:4px 0 2px; padding-bottom:2px; border-bottom:1px solid var(--line)}
.dialog-foot .spacer{flex:1}
.key-row{display:flex; gap:8px}
.key-row input{flex:1}
.help{font-size:13px; color:var(--ink-faint); line-height:1.5}
.seg{display:flex; border:1px solid var(--line-strong); border-radius:9px; overflow:hidden}
.seg label{flex:1; position:relative; cursor:pointer; min-width:0}
.seg input{position:absolute; opacity:0; pointer-events:none}
.seg span{
  display:block; text-align:center; padding:8px 8px;
  font-size:13px; color:var(--ink-soft); border-left:1px solid var(--line); white-space:nowrap;
}
.seg label:first-child span{border-left:0}
.seg input:checked + span{background:var(--ink); color:#fff; font-weight:600}
.seg input:focus-visible + span{outline:2px solid var(--ink); outline-offset:-2px}
.series-picks{display:flex; gap:6px; flex-wrap:wrap}
.series-pick{position:relative; cursor:pointer}
.series-pick input{position:absolute; opacity:0; pointer-events:none}
.series-pick span{
  display:inline-grid; place-items:center; width:34px; height:34px; border-radius:8px;
  border:1px solid var(--line-strong); background:#fff; color:var(--ink-soft);
  font-size:14px; font-weight:600;
}
.series-pick input:checked + span{background:var(--ink); border-color:var(--ink); color:#fff}
.series-pick input:focus-visible + span{outline:2px solid var(--ink); outline-offset:2px}
.conn-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.conn-result{font-size:13px; color:var(--ink-faint)}
.conn-result.ok{color:var(--ok)}
.conn-result.bad{color:var(--danger)}
.quota{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:9px; overflow:hidden;
}
@media (min-width:480px){
  .quota{grid-template-columns:repeat(4,1fr)}
}
.quota div{background:var(--surface-2); padding:9px 11px; min-height:52px; display:flex; flex-direction:column; justify-content:center}
.quota span{display:block; font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint)}
.quota b{font-size:14.5px; font-variant-numeric:tabular-nums}
.cache-box{
  border-top:1px solid var(--line); padding-top:13px;
  display:grid; gap:9px; justify-items:start;
}
.cache-head{
  width:100%; display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  font-size:13.5px; color:var(--ink-soft);
  cursor:pointer; list-style:none;
}
.cache-head::-webkit-details-marker{display:none}
.cache-head::marker{content:''}
.cache-head b{font-size:13.5px; color:var(--ink); font-variant-numeric:tabular-nums}
.cache-box .help{margin:0}

/* ── Support text ───────────────────────────────────────── */
.support-text{
  font-size:13.5px; font-weight:500; color:var(--ink-soft);
  text-decoration:none; white-space:nowrap; padding:0 4px;
}
.support-text:hover{color:var(--ink); text-decoration:underline}

/* ── Toast ──────────────────────────────────────────────── */
.toast{
  position:fixed; left:50%; bottom:24px; z-index:120;
  transform:translate(-50%,16px);
  max-width:min(520px,calc(100vw - 32px));
  background:var(--ink); color:#fff;
  padding:10px 15px; border-radius:8px;
  font-size:14.5px; line-height:1.45;
  box-shadow:0 16px 32px -18px rgba(0,0,0,.5);
  opacity:0; pointer-events:none;
  transition:opacity .18s, transform .18s;
}
.toast.show{opacity:1; transform:translate(-50%,0)}
.toast.bad{background:var(--danger)}
.toast.good{background:#166534}

/* ── Motion ─────────────────────────────────────────────── */
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-delay:0s !important; transition-duration:.001ms !important}
}

/* db status acts as a shortcut to settings */
#dbStatus{cursor:pointer}
#dbStatus:hover{text-decoration:underline}

/* ── History ────────────────────────────────────────────── */
.history-list{display:grid; gap:8px}
.history-item{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:#fff}
.history-meta{display:grid; gap:2px; min-width:0}
.history-meta b{font-size:14.5px}
.history-meta span{font-size:12.5px; color:var(--ink-faint)}
.history-actions{display:flex; gap:6px; flex:none}
.history-dialog{width:min(640px,100%)}
.history-head-tools{display:flex; gap:8px; align-items:center; flex:1; justify-content:flex-end}
.history-head-tools input{min-width:140px; padding:6px 10px; font-size:14px; border:1px solid var(--line-strong); border-radius:7px}
.history-group{display:grid; gap:6px}
.history-group-title{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); padding:4px 0}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width:1080px){
  .grid{grid-template-columns:1fr}
  .rail{position:static; order:-1; max-height:none; overflow:visible}
  .details-card{max-height:none}
  .details-form{grid-template-columns:1fr 1fr; overflow:visible; max-height:none; flex:none}
  .details-form .field.wide{grid-column:1 / -1}
  .details-form > .field-row,
  .details-form > .toggles,
  .details-form > .adv{grid-column:1 / -1}
  .exam-grid{grid-template-columns:1fr 1fr}
  .exam-card[data-exam="Theory"]{grid-column:1 / -1}
}

@media (max-width:720px){
  .brand-tag{display:none}
  .builder-stats{gap:12px}
  .builder-stats span{font-size:11.5px}
  .details-form{grid-template-columns:1fr}
  .details-form .field-row{grid-template-columns:1fr 1fr}
  .exam-grid{grid-template-columns:1fr}
  .exam-card[data-exam="Theory"]{grid-column:auto}
  .subject-controls{grid-template-columns:76px minmax(0,1fr)}
  .preview-title{display:none}
  .preview-stage{padding:14px 0}
  #paperMount{margin:0}
}

/* ── Print ──────────────────────────────────────────────── */
@media print{
  @page{size:A4; margin:0}
  html,body{background:#fff !important}
  .topbar,.builder,.preview-toolbar,.toast,.dialog-backdrop{display:none !important}
  .exam-view{display:none !important}
  .preview{display:block !important; padding:0 !important}
  .preview-stage{padding:0 !important; overflow:visible !important; background:#fff !important}
  #paperMount{width:auto !important; margin:0 !important}
  .page{
    width:210mm; height:297mm; margin:0 !important; padding:9mm 13.5mm 5mm;
    box-shadow:none !important; overflow:hidden;
    break-after:page; page-break-after:always;
  }
  .page:last-child{break-after:auto; page-break-after:auto}
  .omr-page{padding:26px 34px 20px}
  .syllabus-subject-head,.syllabus-letter{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  .q,.sec-head,.opts li,.key-table tr{break-inside:avoid; page-break-inside:avoid}
}