/* ============================================================
   Worksheet Generator — modern, cool, crisp.
   Neutral canvas · near-black slate structure · indigo accent.
   Plus Jakarta Sans + JetBrains Mono.
   ============================================================ */
:root {
  --bg:        #f6f7f9;      /* cool neutral canvas */
  --surface:   #ffffff;
  --surface-2: #fbfcfd;
  --ink:       #14161c;      /* near-black slate — structure */
  --ink-2:     #262b36;
  --muted:     #667085;      /* cool grey text */
  --line:      #e7e9ee;      /* borders */
  --line-2:    #eef0f3;
  --field:     #d4d8df;      /* input borders */
  --accent:    #4f46e5;      /* indigo — primary + active */
  --accent-dk: #4338ca;
  --accent-soft:#eef0fe;
  --violet:    #7c3aed;      /* paid-AI */
  --violet-dk: #6d28d9;
  --success:   #059669;      /* selected / save */
  --success-dk:#047857;
  --success-soft:#e7f6ef;
  --danger:    #dc2626;
  --warn:      #b45309;
  --shadow:    0 1px 2px rgba(16,24,40,.04), 0 6px 18px rgba(16,24,40,.06);
  --shadow-md: 0 4px 12px rgba(16,24,40,.08), 0 12px 32px rgba(16,24,40,.08);
  --shadow-lg: 0 24px 60px rgba(12,17,29,.28);
  --r:  10px;
  --r-lg: 14px;
  --sans: "Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  letter-spacing: -.006em;
}
h2, h3, h4 { font-family: var(--sans); letter-spacing: -.02em; }
button, input, textarea { font-family: inherit; }

/* ---------- App bar + stepper ---------- */
#appbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--ink); color: #fff;
  padding: 0 22px; height: 60px;
  position: sticky; top: 0; z-index: 20;
  box-shadow: 0 1px 0 rgba(255,255,255,.05);
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 16px; letter-spacing: -.02em; white-space: nowrap;
}
.brandmark { display: inline-flex; color: #fff; }
.brandmark svg { width: 24px; height: 24px; display: block; }

.steps { display: flex; align-items: center; gap: 2px; flex: 1; justify-content: center; }
.steps .step {
  position: relative; font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,.5);
  padding: 8px 14px; border-radius: 8px; white-space: nowrap;
  transition: color .16s ease, background .16s ease;
}
.steps .step.active { color: #fff; font-weight: 600; }
.steps .step.active::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px;
  height: 2px; background: var(--accent); border-radius: 2px;
}

.userbox { display: flex; align-items: center; gap: 8px; font-size: 13px; white-space: nowrap; }
.userbox #whoami { font-weight: 600; opacity: .92; }

/* ---------- Panels ---------- */
.panel { max-width: 1180px; margin: 28px auto; padding: 0 20px; }
.panel:not([hidden]) { animation: rise .3s cubic-bezier(.2,.7,.3,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--sans); font-size: 13.5px; font-weight: 500;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--field); border-radius: 9px;
  padding: 8px 14px; cursor: pointer;
  transition: background .14s ease, border-color .14s ease, box-shadow .14s ease, transform .04s ease;
}
.btn:hover { background: var(--surface-2); border-color: #c2c8d1; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; box-shadow: 0 1px 2px rgba(79,70,229,.28); }
.btn.primary:hover { background: var(--accent-dk); border-color: var(--accent-dk); }
.btn.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn.save { background: var(--success); border-color: var(--success); color: #fff; font-weight: 600; box-shadow: 0 1px 2px rgba(5,150,105,.28); }
.btn.save:hover { background: var(--success-dk); border-color: var(--success-dk); }
.btn.save:disabled { opacity: .55; cursor: default; }
.btn.ghost { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: #fff; }
.btn.ghost:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); }

/* ---------- Upload ---------- */
.upload-box {
  background: var(--surface);
  border: 1.5px dashed #cdd2db; border-radius: var(--r-lg);
  padding: 68px 24px; text-align: center; box-shadow: var(--shadow);
  transition: border-color .18s ease, background .18s ease;
}
.upload-box.drag { border-color: var(--accent); background: var(--accent-soft); }
.upload-icon { line-height: 0; margin-bottom: 8px; }
.upload-icon svg { width: 62px; height: 62px; }
.upload-box h2 { font-size: 23px; margin: 10px 0 6px; font-weight: 700; }
.upload-box p { color: var(--muted); margin: 0 0 22px; font-size: 14px; }
.status { margin-top: 14px; color: var(--muted); font-size: 14px; }
.status.error { color: var(--danger); font-weight: 500; }

/* ---------- Toolbar ---------- */
.toolbar {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 11px 14px; margin-bottom: 12px; box-shadow: var(--shadow);
}
.toolbar .left, .toolbar .right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.toolbar input[type=text] {
  padding: 8px 12px; border: 1px solid var(--field); border-radius: 9px;
  font-size: 13.5px; width: 240px; background: var(--surface); color: var(--ink);
}
.toolbar input[type=text]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pagenav { font-family: var(--mono); font-size: 12.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; padding: 0 4px; }
.pagenav #pageJump {
  width: 46px; text-align: center; padding: 5px 4px; border: 1px solid var(--field);
  border-radius: 7px; font-family: var(--mono); font-size: 12.5px; color: var(--ink); background: var(--surface);
}
.pagenav #pageJump:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.hint { font-size: 13px; color: var(--muted); margin: 2px 2px 10px; }

/* ---------- Page canvas ---------- */
#canvasWrap {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  overflow: auto; max-height: 72vh; text-align: center; box-shadow: var(--shadow); padding: 8px;
}
#pageCanvas { cursor: pointer; max-width: 100%; border-radius: 6px; }
#pageCanvas.cropmode { cursor: crosshair; }

/* ---------- Selection chips ---------- */
.chipbar { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  background: var(--success-soft); border: 1px solid #bfe3cf; color: var(--success-dk);
  border-radius: 20px; padding: 4px 11px;
}
.chip:first-child { background: var(--success); border-color: var(--success); color: #fff; }

/* ---------- Review cards ---------- */
#extractStatus { font-size: 13.5px; color: var(--muted); }
.qcard {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  margin-bottom: 16px; padding: 18px; box-shadow: var(--shadow);
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.qcard.err { border-color: #f0c2bd; background: #fef6f5; }
.qcard h4 {
  margin: 0 0 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 11.5px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em;
}
.qcard .src img { max-width: 100%; border: 1px solid var(--line); border-radius: 10px; }
.qcard h4 input.qn {
  width: 60px; padding: 5px 8px; border: 1px solid var(--field); border-radius: 8px;
  font-family: var(--mono); font-weight: 600; color: var(--ink);
}
.qcard textarea {
  width: 100%; min-height: 94px; font-family: var(--mono); font-size: 12.5px;
  border: 1px solid var(--field); border-radius: 10px; padding: 11px; resize: vertical;
  color: var(--ink); line-height: 1.6; background: var(--surface-2);
}
.qcard textarea:focus, .qcard input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: #fff; }
.qcard .optrow { display: flex; gap: 8px; margin-top: 7px; align-items: center; }
.qcard .optrow b { font-family: var(--mono); color: var(--muted); font-size: 12px; min-width: 22px; }
.qcard .optrow input {
  flex: 1; padding: 7px 10px; border: 1px solid var(--field); border-radius: 8px;
  font-family: var(--mono); font-size: 12.5px; color: var(--ink);
}
.qcard .preview {
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 10px; padding: 13px 15px; margin-top: 12px;
  background: var(--surface-2); font-size: 15px;
}
.qcard .anskey { margin-top: 12px; font-size: 13px; color: var(--muted); }
.qcard .anskey input { width: 94px; padding: 6px 10px; border: 1px solid var(--field); border-radius: 8px; margin-left: 4px; }
.qcard .diagram-thumb { max-height: 120px; border: 1px solid var(--line); border-radius: 10px; margin-top: 6px; }
.qcard .rmbtn { margin-left: auto; color: var(--danger); background: none; border: none; cursor: pointer; font-size: 12.5px; font-weight: 500; }
.qcard .rmbtn:hover { text-decoration: underline; }
.qcard .useimg { display: block; margin-top: 12px; font-size: 13px; color: var(--muted); }
.qcard span[style*="b9770e"], .qcard span[style*="b07a12"] { color: var(--warn) !important; }

/* diagram crop tools */
.qcard .imgwrap { position: relative; display: inline-block; line-height: 0; }
.qcard .srcimg { max-width: 100%; cursor: zoom-in; border: 1px solid var(--line); border-radius: 10px; }
.qcard .cropoverlay { position: absolute; top: 0; left: 0; cursor: crosshair; }
.qcard .diagtools { margin-top: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qcard .cropdiag { background: var(--surface); border: 1px solid #d6d4f2; color: var(--violet); font-weight: 600; padding: 6px 12px; }
.qcard .cropdiag:hover { background: #f5f3fe; }
.qcard .crophint { font-size: 12px; color: var(--muted); }
.qcard .diagwrap { margin-top: 8px; }
.qcard .diagwrap small { color: var(--muted); }

/* paid AI row */
.qcard .paidrow { margin-top: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-top: 14px; border-top: 1px solid var(--line-2); }
.qcard .redoai { background: var(--violet); border-color: var(--violet); color: #fff; font-weight: 600; padding: 6px 13px; box-shadow: 0 1px 2px rgba(124,58,237,.28); }
.qcard .redoai:hover { background: var(--violet-dk); border-color: var(--violet-dk); }
.qcard .redoai:disabled { opacity: .55; cursor: default; }
.qcard .paidhint { font-size: 12px; color: var(--muted); }
.qcard .paidbadge { font-family: var(--mono); font-size: 12px; color: var(--success-dk); font-weight: 600; }

/* ---------- Worksheet meta form ---------- */
.meta-form { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px; box-shadow: var(--shadow); }
.meta-form .row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 15px; align-items: center; }
.meta-form label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.meta-form label input[type=text], .meta-form label input:not([type]) {
  padding: 9px 12px; border: 1px solid var(--field); border-radius: 9px; font-size: 14px; width: 340px; max-width: 100%; color: var(--ink);
}
.meta-form input[type=number] { width: 84px; padding: 9px; border: 1px solid var(--field); border-radius: 9px; color: var(--ink); }
.meta-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.save-status { font-size: 13px; color: var(--muted); }
.save-status.ok { color: var(--success-dk); font-weight: 600; }
.save-status.err { color: var(--danger); }

/* ---------- Loading ---------- */
#loadingOverlay { position: fixed; inset: 0; background: rgba(246,247,249,.9); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 100; }
.spinner { width: 42px; height: 42px; border: 3.5px solid #e2e5ec; border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; margin-bottom: 14px; }
@keyframes spin { to { transform: rotate(360deg); } }
#loadingMsg { font-size: 15px; color: var(--ink); font-weight: 600; }

/* ---------- Printable worksheet (classic serif for the printout) ---------- */
/* KaTeX_Main IS Computer Modern — the font real NEET/JEE papers are typeset
   in (they're made with LaTeX). Using it for prose too makes the sheet look
   like a genuine exam paper, and prose + math share one face. */
#printArea { background: #fff; max-width: 860px; margin: 26px auto; padding: 38px 40px; box-shadow: var(--shadow-md); border-radius: 12px; font-family: "KaTeX_Main", "Times New Roman", Georgia, serif; color: #000; font-size: 11.8pt; line-height: 1.48; }
.ws-header { text-align: center; border-bottom: 2.5px solid #000; padding-bottom: 11px; margin-bottom: 6px; }
.ws-header .inst { font-family: var(--sans); font-size: 21px; font-weight: 800; letter-spacing: -.01em; text-transform: uppercase; }
.ws-header .title { font-size: 16px; font-weight: 700; margin-top: 5px; }
.ws-header .sub { font-size: 13px; margin-top: 3px; color: #333; }
.ws-info { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 18px; font-family: var(--sans); font-size: 11px; border-bottom: 1px solid #000; padding: 7px 2px 8px; margin-bottom: 18px; font-weight: 600; color: #333; }
.ws-body.twocol { column-count: 2; column-gap: 30px; column-rule: 1px solid #ccc; }
/* Each question: hanging indent so wrapped lines and math align under the
   text, never under the number — the clean look of a printed exam paper. */
.ws-q { break-inside: avoid; page-break-inside: avoid; margin: 0 0 18px; padding-left: 26px; text-align: justify; -webkit-hyphens: auto; hyphens: auto; }
.ws-q .qh { display: block; }
.ws-q .qh .num { float: left; margin-left: -26px; width: 24px; font-weight: 700; }
.ws-q .qt { display: inline; }
.ws-q img.qdiag { max-width: 78%; display: block; margin: 9px auto 4px; }
.ws-q img.qimg { max-width: 100%; display: block; margin-top: 3px; }
/* Keep inline math on the text baseline; trim KaTeX's default display margins
   so equations sit tight, not floating in whitespace. */
.ws-q .katex, .qcard .preview .katex { font-size: 1em; }  /* same face as prose now */
/* Display math sits on its own line; if a reaction/expression is still wider
   than the column, let it scroll on screen instead of spilling into the next
   column, and shrink it a touch so it prints inside the margin. */
.ws-q .katex-display, .qcard .preview .katex-display { text-align: left; margin: 6px 0; max-width: 100%; overflow-x: auto; overflow-y: hidden; }
.ws-q .katex-display > .katex, .qcard .preview .katex-display > .katex { text-align: left; }
.ws-body.twocol .katex-display { font-size: .95em; }
/* Never let an inline formula punch through the column rule. */
.ws-q .qt .katex { max-width: 100%; }
.ws-q { overflow-wrap: break-word; word-break: break-word; }
/* Answer options: auto-fit 2-up when short, 1 column when long — matches how
   MCQ papers set their choices. */
.ws-opts { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 6px 22px; }
.ws-opts li { margin: 0; break-inside: avoid; text-align: left; }
/* option labels are regular weight on real papers — only the Q number is bold */
.ws-opts li .olabel { font-weight: 400; margin-right: 8px; }
/* If an option still carries display math, keep the equation on the same
   line as its (1)/(2) label instead of dropping it below. */
.ws-opts li .katex-display { display: inline-block; vertical-align: middle; margin: 2px 0; max-width: 100%; }
/* Answer line under image-based questions */
.ws-q .ans-line { display: block; margin-top: 7px; font-weight: 600; }
/* "from image: N" hint next to the worksheet-position number in review */
.printedno { color: var(--muted); font-size: 11px; font-weight: 500; margin-left: 6px; }
/* Match-the-column tables + statement lists (converted from LaTeX). */
.ws-table { border-collapse: collapse; margin: 8px 0 4px; width: 100%; font-size: .97em; }
.ws-table th, .ws-table td { border: 1px solid #999; padding: 4px 9px; text-align: left; vertical-align: top; }
.ws-table th { background: #f2f2f2; font-weight: 700; }
.ws-list { margin: 6px 0 4px; padding-left: 22px; }
.ws-list li { margin: 3px 0; text-align: left; }
.ws-solutions { margin-top: 26px; border-top: 2px solid #000; padding-top: 13px; page-break-before: always; }
.ws-solutions h3 { text-align: center; margin: 0 0 12px; text-transform: uppercase; letter-spacing: 1px; font-family: var(--sans); font-weight: 700; }
.ans-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px 14px; font-size: 13.5px; }
.ans-grid .a { border: 1px solid #bbb; border-radius: 5px; padding: 5px 9px; text-align: center; }
.ws-footer { margin-top: 22px; text-align: center; font-family: var(--sans); font-size: 11px; color: #666; border-top: 1px solid #ccc; padding-top: 7px; }

/* ---------- Subject / LaTeX profile picker (upload screen) ---------- */
.subject-picker { max-width: 560px; margin: 18px auto 0; text-align: left; }
.subject-picker label { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.subject-picker select { width: 100%; padding: 11px 13px; border: 1px solid var(--field); border-radius: 10px; font-size: 14.5px; font-family: var(--sans); color: var(--ink); background: var(--surface); cursor: pointer; }
.subject-picker select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.subject-note { font-size: 12.5px; line-height: 1.5; color: var(--muted); margin: 9px 2px 0; min-height: 18px; }
.subject-note.warn { color: var(--warn); }

/* ---------- Login gate ---------- */
.login-screen {
  position: fixed; inset: 0; z-index: 150;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background:
    radial-gradient(900px 460px at 82% -8%, rgba(79,70,229,.28), transparent 62%),
    radial-gradient(720px 420px at 8% 108%, rgba(124,58,237,.20), transparent 60%),
    linear-gradient(165deg, #171a24 0%, #14161c 60%, #101218 100%);
}
.login-card {
  position: relative;
  background: var(--surface); border-radius: 16px; padding: 38px 34px; width: 372px; max-width: 100%;
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: 13px;
  animation: rise .4s cubic-bezier(.2,.7,.3,1) both;
}
.login-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 20px; color: var(--ink); letter-spacing: -.02em; }
.login-brand .brandmark { color: var(--ink); }
.login-brand .brandmark svg { width: 26px; height: 26px; }
.login-sub { font-size: 13.5px; color: var(--muted); margin: -2px 0 8px; }
.login-card label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.login-card input { padding: 11px 13px; border: 1px solid var(--field); border-radius: 10px; font-size: 15px; color: var(--ink); }
.login-card input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.login-card .btn.primary { margin-top: 8px; padding: 12px; font-size: 15px; border-radius: 10px; }
.login-error { color: var(--danger); font-size: 13px; min-height: 16px; font-weight: 500; }

/* ---------- History modal ---------- */
.modal { position: fixed; inset: 0; background: rgba(16,20,32,.6); display: flex; align-items: center; justify-content: center; z-index: 160; padding: 24px; }
.modal-card { background: var(--surface); border-radius: var(--r-lg); width: 660px; max-width: 100%; max-height: 82vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow-lg); animation: rise .28s cubic-bezier(.2,.7,.3,1) both; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 17px 20px; border-bottom: 1px solid var(--line); }
.modal-head h3 { margin: 0; font-size: 16px; font-weight: 700; }
.modal-head .btn.ghost { background: var(--surface); border-color: var(--field); color: var(--muted); }
.modal-head .btn.ghost:hover { background: var(--surface-2); }
.history-list { overflow: auto; padding: 6px 0; }
.hist-row { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--line-2); }
.hist-row:last-child { border-bottom: 0; }
.hist-main { flex: 1; }
.hist-main b { font-weight: 600; }
.hist-tag { font-family: var(--mono); background: var(--accent-soft); border-radius: 6px; padding: 2px 8px; font-size: 11px; color: var(--accent-dk); margin-left: 8px; }
.hist-meta { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 4px; }
.hist-nopdf { font-size: 12px; color: #a7adb9; }
.hist-empty { padding: 34px; text-align: center; color: var(--muted); }
.hist-empty.err { color: var(--danger); }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; background: rgba(12,16,26,.86); display: flex; align-items: center; justify-content: center; z-index: 200; cursor: zoom-out; padding: 24px; }
.lightbox img { max-width: 96%; max-height: 92%; background: #fff; border-radius: 10px; box-shadow: var(--shadow-lg); }
.lightbox .lbclose { position: fixed; top: 18px; right: 22px; color: #fff; font-size: 14px; font-weight: 600; }

/* ---------- Quality floor ---------- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 720px) {
  #appbar { height: auto; flex-wrap: wrap; padding: 10px 16px; gap: 10px; }
  .steps { order: 3; width: 100%; justify-content: flex-start; overflow-x: auto; }
  .qcard { grid-template-columns: 1fr; }
  .meta-form label input[type=text], .meta-form label input:not([type]) { width: 100%; }
  #printArea { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

@media print {
  .no-print { display: none !important; }
  body { background: #fff; }
  #printArea { box-shadow: none; margin: 0; max-width: none; padding: 0; border-radius: 0; }
  @page { margin: 11mm 9mm; }
}

/* ---------- Filing scope (upload screen) ---------- */
.scope-row { display: flex; gap: 10px; flex-wrap: wrap; }
.scope-row select {
  flex: 1 1 150px; min-width: 140px; padding: 9px 11px;
  border: 1px solid var(--field); border-radius: 8px;
  background: var(--surface); font: inherit; font-size: 13.5px; color: var(--ink);
}
.scope-row select:focus-visible { border-color: var(--accent); }

/* ---------- Review: tagging a question ---------- */
.tagrow {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end;
  padding: 11px 12px; margin-bottom: 10px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px;
}
.tagrow > label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
/* Grid items default to min-width:auto, so a long unbroken line of LaTeX in
   the preview stretches this column past the card and scrolls the whole page.
   Letting it shrink below its content width is what keeps the card intact. */
.qcard .edit { min-width: 0; }
.qcard .edit textarea, .qcard .edit .preview { max-width: 100%; }
.qcard .edit .preview { overflow-x: auto; }

.tagrow > label:nth-child(-n+2) { flex: 1 1 170px; min-width: 140px; max-width: 340px; }
/* The answer buttons are the smallest control and the one that must never be
   pushed off-screen — pin them to the end and stop them shrinking. */
.tagrow > label:last-child { flex: 0 0 auto; margin-left: auto; }
.tagrow select {
  padding: 7px 9px; border: 1px solid var(--field); border-radius: 7px;
  background: var(--surface); font: inherit; font-size: 13px;
  text-transform: none; letter-spacing: 0; color: var(--ink);
}
.ansopts { display: flex; gap: 5px; }
.ansbtn {
  width: 34px; height: 32px; border: 1px solid var(--field); border-radius: 7px;
  background: var(--surface); font: inherit; font-size: 13px; font-weight: 600;
  color: var(--muted); cursor: pointer; transition: .12s;
}
.ansbtn:hover { border-color: var(--accent); color: var(--accent); }
.ansbtn.on {
  background: var(--accent); border-color: var(--accent); color: #fff;
}

/* An untagged card is the thing standing between the user and the next step,
   so it gets a visible edge rather than only a counter in the toolbar. */
.qcard.needs-tag { border-color: #f0c98a; box-shadow: inset 3px 0 0 var(--warn); }

/* ---------- Duplicate warning ---------- */
.dupwarn:empty { display: none; }
.dupwarn {
  padding: 9px 11px; margin-bottom: 10px; border-radius: 8px;
  font-size: 12.5px; line-height: 1.5;
}
.dupwarn.warn { background: #fdf6e7; border: 1px solid #f0c98a; color: var(--warn); }
.dupwarn.kept { background: var(--success-soft); border: 1px solid #bfe3cf; color: var(--success-dk); }
.linkbtn {
  background: none; border: 0; padding: 0; margin-left: 9px;
  font: inherit; font-size: 12.5px; font-weight: 600;
  color: inherit; text-decoration: underline; cursor: pointer;
}
.linkbtn:hover { opacity: .75; }

/* ---------- Gate status ---------- */
.gate-status { font-size: 12.5px; font-weight: 500; margin-right: 10px; }
.gate-status.warn { color: var(--warn); }
.gate-status.ok { color: var(--success-dk); }
#toWorksheet:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Step 1: worksheet details ---------- */
.wsform { max-width: 860px; margin: 0 auto; background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px; padding: 26px 28px;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(20,22,28,.05)); }
.wsform-head h2 { font-size: 20px; margin: 0 0 4px; }
.wsform-head p { color: var(--muted); font-size: 13.5px; margin: 0 0 20px; }
.wsform-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 16px; }
.wsform-grid label { display: flex; flex-direction: column; gap: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); }
.wsform-grid label.full { grid-column: 1 / -1; }
.wsform-grid input, .wsform-grid select {
  padding: 9px 11px; border: 1px solid var(--field); border-radius: 8px;
  background: var(--surface); font: inherit; font-size: 13.5px;
  color: var(--ink); text-transform: none; letter-spacing: 0; }
.wsform-grid .hint { font-size: 11px; font-weight: 400; text-transform: none;
  letter-spacing: 0; color: var(--faint); }
.wsform-actions { display: flex; align-items: center; justify-content: flex-end;
  gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-2); }
@media (max-width: 780px) { .wsform-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Step 2: capture area + page rail ---------- */
/* The rail is a fixed column so the page itself gets the rest of the width;
   min-width:0 keeps the canvas column from being pushed wide by the image. */
#captureArea { display: flex; gap: 14px; align-items: flex-start; }
#captureArea #canvasWrap { flex: 1 1 auto; min-width: 0; }
#pageRail {
  flex: 0 0 172px; max-height: calc(100vh - 150px); overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px; padding: 10px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px;
  position: sticky; top: 74px;
}
/* flex-shrink defaults to 1, so a long document squeezed every thumbnail down
   to a sliver of itself instead of scrolling. They must keep their natural
   height and let the rail scroll. */
.rail-page { flex: 0 0 auto; position: relative; display: block; width: 100%;
  padding: 0; border: 2px solid transparent; border-radius: 7px;
  background: var(--surface); cursor: pointer; overflow: hidden; line-height: 0;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .10); }
.rail-page img { width: 100%; height: auto; display: block; }
.rail-page:hover { border-color: var(--field); }
.rail-page.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.rail-n { position: absolute; left: 5px; bottom: 5px; min-width: 20px;
  padding: 1px 6px; border-radius: 20px; background: rgba(20,22,28,.78);
  color: #fff; font-size: 10.5px; font-weight: 600; line-height: 1.7;
  text-align: center; }
#pageCanvas { cursor: crosshair; }
/* The rail is the point of this screen, so it only collapses on genuinely
   narrow windows — it narrows first, and is hidden only below phone width. */
/* Below about 130px a page thumbnail stops being legible at all, so that is
   the floor — narrow further and it is better to drop the rail entirely. */
@media (max-width: 1100px) { #pageRail { flex-basis: 140px; } }
@media (max-width: 720px) { #pageRail { display: none; } }

/* ---------- Answer type switch (JEE written answers) ---------- */
.tagrow > label.anslabel { flex: 0 0 auto; margin-left: auto;
  flex-direction: row; align-items: center; gap: 8px; }
.anstype { display: inline-flex; border: 1px solid var(--field);
  border-radius: 7px; overflow: hidden; }
.anstype button { padding: 6px 9px; border: 0; background: var(--surface);
  font: inherit; font-size: 11px; font-weight: 600; color: var(--muted);
  cursor: pointer; }
.anstype button + button { border-left: 1px solid var(--field); }
.anstype button.on { background: var(--accent); color: #fff; }
.anstext { width: 120px; padding: 7px 9px; border: 1px solid var(--field);
  border-radius: 7px; font: inherit; font-size: 13px; text-transform: none;
  letter-spacing: 0; color: var(--ink); }