/* ==========================================================
   Online Exam Paper Maker — prototype styles
   Colours are strictly white / black with neutral greys.
   Change fonts in ONE place: the variables below.
   ========================================================== */
:root {
  --color-background: #FFFFFF;
  --color-text: var(--ink)000;
  --color-border: #E5E5E5;
  --color-border-strong: #CFCFCF;
  --color-muted: #666666;
  --color-soft: #F7F7F7;
  --surface: #FFFFFF;
  --ink: #000000;            /* primary buttons, strong borders, focus */
  --ink-contrast: #FFFFFF;   /* text on --ink */
  --ink-hover: #222222;
  --preview-bg: #EDEDED;     /* grey desk behind the white paper */
  --auth-bg1: #F2F2F2; --auth-bg2: #F4F4F4; --auth-bg3: #FAFAFA;
  --side-1: #F7F7F7; --side-2: #EDEDED;
  --logo-filter: none;
  color-scheme: light;
  --font-english: Arial, Helvetica, sans-serif;     /* TEMPORARY – replace with final English font */
  --font-urdu: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Noto Naskh Arabic", "Segoe UI", Tahoma, serif; /* TEMPORARY – replace with final Urdu font */
  --radius: 10px;
  --radius-sm: 6px;
  --sidebar-w: 248px;
  --topbar-h: 64px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--color-background); color: var(--color-text); font-family: var(--font-english); font-size: 15px; line-height: 1.5; }
[hidden] { display: none !important; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- Buttons & forms ---------- */
.btn { display: inline-flex; align-items: center; gap: 6px; justify-content: center; padding: 8px 14px; border: 1px solid var(--ink); background: var(--surface); color: var(--color-text); border-radius: var(--radius-sm); cursor: pointer; font-weight: 600; font-size: 14px; text-decoration: none; }
.btn:hover { background: var(--color-soft); }
.btn.primary { background: var(--ink); color: var(--ink-contrast); }
.btn.primary:hover { background: var(--ink-hover); }
.btn.small { padding: 5px 10px; font-size: 13px; }
.btn.ghost { border-color: var(--color-border-strong); }
.btn.danger { border-color: var(--color-text); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.icon-btn { border: 1px solid var(--color-border); background: var(--surface); border-radius: var(--radius-sm); width: 30px; height: 30px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
.icon-btn:hover { background: var(--color-soft); border-color: var(--color-text); }
.icon-btn:disabled { opacity: .3; cursor: not-allowed; }

.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.field > label, .lbl { font-size: 13px; font-weight: 600; }
.field input, .field select, .field textarea, .inp { width: 100%; padding: 8px 10px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--surface); }
.field textarea, textarea.inp { resize: vertical; min-height: 60px; }
.field .hint { font-size: 12px; color: var(--color-muted); }
.field .err { font-size: 12px; font-weight: 600; }
.input-row { display: flex; gap: 8px; }
.input-row > * { flex: 1; }
.check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.muted { color: var(--color-muted); }

/* ---------- Auth (split card: brand panel + Log In / Create Account tabs) ---------- */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px 16px;
  background: radial-gradient(1200px 600px at 10% 0%, var(--auth-bg1), transparent 60%), radial-gradient(900px 600px at 100% 100%, var(--auth-bg2), transparent 60%), var(--auth-bg3); }
.auth-card { width: 100%; max-width: 1150px; display: grid; grid-template-columns: 1fr 1fr; background: var(--surface); border-radius: 24px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04); border: 1px solid var(--color-border); }
.auth-side { background: linear-gradient(160deg, var(--side-1), var(--side-2)); padding: 48px 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border-right: 1px solid var(--color-border); }
.auth-brand { flex-direction: column; gap: 10px; font-size: 26px; margin-bottom: 18px; letter-spacing: -.3px; }
.auth-brand .brand-mark { width: 64px; height: 64px; font-size: 32px; border-radius: 16px; }
.auth-brand small { display: block; font-size: 11px; letter-spacing: 3px; font-weight: 700; color: var(--color-muted); margin-top: 2px; }
.auth-side h1 { font-family: Georgia, "Times New Roman", serif; font-size: 34px; margin-bottom: 10px; }
.auth-side .sub { color: var(--color-muted); max-width: 380px; margin: 0 0 18px; font-size: 16px; }
.auth-art { width: 200px; height: auto; }
.auth-main { padding: 48px 38px; display: flex; flex-direction: column; justify-content: center; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; }
.auth-tabs button { padding: 12px; border-radius: 999px; border: 1px solid var(--color-border-strong); background: var(--surface); font-weight: 700; font-size: 16px; cursor: pointer; }
.auth-tabs button:hover { border-color: var(--color-text); }
.auth-tabs button.on { background: var(--ink); color: var(--ink-contrast); border-color: var(--color-text); }
.auth-main .field > label { font-size: 15px; }
.auth-main .field input { padding: 13px 16px; border-radius: 10px; font-size: 16px; }
.auth-main .field { margin-bottom: 18px; }
.label-hint { font-weight: 400; font-size: 13px; color: var(--color-muted); }
.remember { font-size: 15px; margin: 0 0 18px; }
.remember input { width: 18px; height: 18px; accent-color: var(--color-text); }
.auth-submit { width: 100%; padding: 14px; font-size: 16px; border-radius: 10px; }
.auth-note { margin: -4px 0 18px; font-size: 14px; }
.auth-main .auth-switch .link-btn { text-decoration: none; font-size: 15px; }
.auth-main .auth-switch .link-btn:hover { text-decoration: underline; }
.form-error.ok { font-weight: 500; border-style: dashed; }
@media (max-width: 860px) {
  .auth-card { grid-template-columns: 1fr; max-width: 520px; }
  .auth-side { padding: 28px 24px 20px; border-right: 0; border-bottom: 1px solid var(--color-border); }
  .auth-side h1 { font-size: 26px; }
  .auth-art { display: none; }
  .auth-main { padding: 26px 22px 30px; }
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; margin-bottom: 20px; }
.brand-mark { width: 34px; height: 34px; background: var(--ink); color: var(--ink-contrast); border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; }
.pw-row { position: relative; }
.pw-row input { padding-right: 64px; }
.pw-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: none; cursor: pointer; font-size: 12px; font-weight: 700; padding: 6px; }
.form-error { border: 1px solid var(--ink); padding: 8px 10px; border-radius: var(--radius-sm); margin-bottom: 12px; font-size: 13px; font-weight: 600; }
.demo-box { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--color-border); font-size: 13px; }
.demo-box .row { display: flex; gap: 8px; margin: 8px 0; }
.demo-box .row .btn { flex: 1; }
.auth-switch { margin-top: 16px; font-size: 14px; text-align: center; }
.link-btn { background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; font-weight: 700; }

/* ---------- App shell ---------- */
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }
.sidebar { border-right: 1px solid var(--color-border); padding: 20px 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--surface); z-index: 30; }
.sidebar .brand { padding: 0 8px; }
.nav { list-style: none; margin: 0; padding: 0; }
.nav li { margin-bottom: 2px; }
.nav button { width: 100%; text-align: left; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid transparent; background: none; border-radius: var(--radius-sm); cursor: pointer; font-size: 14px; font-weight: 500; }
.nav button:hover { background: var(--color-soft); }
.nav button.active { border-color: var(--color-text); font-weight: 700; }
.nav .sep { height: 1px; background: var(--color-border); margin: 10px 0; }
.nav .ico { width: 20px; text-align: center; }
.main { min-width: 0; }
.topbar { height: var(--topbar-h); display: flex; align-items: center; justify-content: space-between; padding: 0 28px; border-bottom: 1px solid var(--color-border); position: sticky; top: 0; background: var(--surface); z-index: 20; }
.topbar h1 { font-size: 20px; }
.topbar .right { display: flex; align-items: center; gap: 12px; position: relative; }
.menu-toggle { display: none; }
.avatar { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--ink); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.profile-btn { display: flex; align-items: center; gap: 8px; border: 0; background: none; cursor: pointer; font-weight: 600; }
.dropdown { position: absolute; top: 44px; right: 0; background: var(--surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius); min-width: 220px; box-shadow: 0 4px 14px rgba(0,0,0,.08); padding: 6px; z-index: 50; }
.dropdown button, .dropdown .item { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; background: none; cursor: pointer; border-radius: 4px; font-size: 14px; }
.dropdown button:hover { background: var(--color-soft); }
.dropdown .note { padding: 8px 10px; font-size: 13px; border-bottom: 1px solid var(--color-border); margin-bottom: 4px; }
.badge-dot { position: absolute; top: -2px; right: -2px; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); }
.content { padding: 28px; max-width: 1280px; }
.scrim { display: none; }

/* ---------- Dashboard ---------- */
.welcome { border: 1px solid var(--color-border); border-radius: 14px; padding: 24px 28px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.welcome h2 { font-size: 24px; margin-bottom: 4px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }
.stat { border: 1px solid var(--color-border); border-radius: var(--radius); padding: 18px; text-align: center; }
.stat .n { font-size: 30px; font-weight: 800; }
.stat .l { color: var(--color-muted); font-size: 13px; }
.panel { border: 1px solid var(--color-border); border-radius: 14px; padding: 20px 24px; margin-bottom: 24px; }
.panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; gap: 10px; flex-wrap: wrap; }
.panel-head h3 { font-size: 18px; }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.toolbar .inp { width: auto; min-width: 150px; }
.toolbar .search { flex: 1; min-width: 200px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.card { border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; background: var(--surface); }
.card:hover { border-color: var(--color-text); }
.thumb { height: 170px; background: var(--color-soft); border-bottom: 1px solid var(--color-border); overflow: hidden; position: relative; cursor: pointer; }
.thumb-inner { transform: scale(.26); transform-origin: top left; width: 794px; position: absolute; top: 8px; left: 50%; margin-left: -103px; background: var(--surface); pointer-events: none; box-shadow: 0 0 0 1px var(--color-border); }
.card-body { padding: 14px; flex: 1; }
.card-body h4 { font-size: 15px; margin-bottom: 6px; }
.meta { font-size: 12.5px; color: var(--color-muted); display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; }
.meta b { color: var(--color-text); font-weight: 600; }
.card-actions { display: flex; gap: 6px; padding: 10px 14px 14px; flex-wrap: wrap; position: relative; }
.card-actions .btn { flex: 1 1 auto; }
.empty { text-align: center; padding: 40px 20px; border: 1px dashed var(--color-border-strong); border-radius: var(--radius); }
.empty h4 { margin-bottom: 6px; font-size: 17px; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--color-border); }
.tag { display: inline-block; border: 1px solid var(--color-border-strong); border-radius: 20px; padding: 1px 9px; font-size: 12px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.form-card { max-width: 560px; }

/* ---------- Modal / toast ---------- */
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px; }
.modal { background: var(--surface); border-radius: 14px; padding: 24px; width: 100%; max-width: 440px; border: 1px solid var(--ink); }
.modal.wide { max-width: 900px; max-height: 90vh; overflow: auto; }
.modal h3 { margin-bottom: 8px; }
.modal .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
#toast-root { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 200; pointer-events: none; width: max-content; max-width: calc(100vw - 32px); }
.toast { background: var(--ink); color: var(--ink-contrast); padding: 10px 18px; border-radius: 8px; font-size: 14px; text-align: center; }

/* ---------- Builder ---------- */
.builder { display: flex; flex-direction: column; height: calc(100vh - var(--topbar-h)); }
.b-toolbar { display: flex; gap: 10px; align-items: center; padding: 10px 20px; border-bottom: 1px solid var(--color-border); flex-wrap: wrap; background: var(--surface); }
.b-toolbar .grow { flex: 1; }
.b-toolbar select { padding: 6px 8px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); }
.save-state { font-size: 12px; color: var(--color-muted); }
.b-body { flex: 1; display: grid; grid-template-columns: minmax(380px, 460px) 1fr; min-height: 0; }
.b-edit { overflow-y: auto; padding: 16px 20px 60px; border-right: 1px solid var(--color-border); }
.b-preview { overflow: auto; background: var(--preview-bg); padding: 24px; }
.mobile-tabs { display: none; }
.acc { border: 1px solid var(--color-border); border-radius: var(--radius); margin-bottom: 14px; }
.acc > summary { padding: 12px 14px; cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; }
.acc > summary::after { content: '+'; }
.acc[open] > summary::after { content: '–'; }
.acc-body { padding: 4px 14px 12px; }
.toggle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 6px 0 12px; }
.sec { border: 1px solid var(--color-border-strong); border-radius: var(--radius); margin-bottom: 12px; background: var(--surface); }
.sec.disabled { opacity: .55; }
.sec.drag-over { border: 2px dashed var(--ink); }
.sec-head { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--color-border); background: var(--color-soft); border-radius: var(--radius) var(--radius) 0 0; }
.sec-head .handle { cursor: grab; padding: 0 4px; user-select: none; }
.sec-head .title { flex: 1; font-weight: 700; font-size: 13.5px; cursor: pointer; background: none; border: 0; text-align: left; }
.sec-body { padding: 12px; }
.sec-body[hidden] { display: none; }
.item-row { display: flex; gap: 6px; align-items: flex-start; margin-bottom: 8px; }
.item-row .num { width: 22px; padding-top: 8px; font-size: 12px; color: var(--color-muted); }
.item-row .inp { flex: 1; }
.q-box { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 8px; margin-bottom: 8px; }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.opt-line { display: flex; gap: 4px; align-items: center; }
.opt-line .inp { padding: 5px 7px; }
.row2 { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.row2 .inp { width: auto; }
.add-menu { border: 1px solid var(--ink); border-radius: var(--radius); padding: 12px; margin-bottom: 14px; }
.add-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.cell-grid { overflow-x: auto; }
.cell-grid table { border-collapse: collapse; }
.cell-grid td { padding: 2px; }
.cell-grid .inp { min-width: 90px; padding: 4px 6px; }

/* ---------- Printable paper ---------- */
.paper-wrap { width: 794px; margin: 0 auto; }
.paper { width: 794px; min-height: 1123px; background: #fff; color: #000; padding: 48px 56px; font-size: 15px; line-height: 1.55; box-shadow: 0 2px 10px rgba(0,0,0,.18); position: relative; }
.paper.en { font-family: var(--font-english); direction: ltr; text-align: left; }
.paper.ur { font-family: var(--font-urdu); direction: rtl; text-align: right; line-height: 2.1; font-size: 16px; }
.paper .lang-en { font-family: var(--font-english); }
.paper .lang-ur { font-family: var(--font-urdu); direction: rtl; }
.paper .p-school { text-align: center; font-weight: 700; font-size: 17px; }
.paper .p-title { text-align: center; font-weight: 800; font-size: 20px; margin: 2px 0 8px; text-transform: none; }
.paper .p-logo { display: block; margin: 0 auto 6px; max-height: 64px; max-width: 200px; }
.paper .p-meta { display: flex; flex-wrap: wrap; gap: 4px 24px; justify-content: space-between; font-size: 14px; font-weight: 600; border-bottom: 1.5px solid #000; padding-bottom: 6px; margin-bottom: 12px; }
.paper .p-meta span.meta-item { white-space: nowrap; }
.paper .p-instr { font-size: 13.5px; border: 1px solid #000; padding: 6px 10px; margin-bottom: 12px; }
.paper .s-head { display: flex; justify-content: space-between; align-items: baseline; margin: 16px 0 8px; font-weight: 700; }
.paper .s-title { font-weight: 700; }
.paper .s-marks { font-weight: 700; white-space: nowrap; }
.paper .q-list { margin: 0; padding: 0; list-style: none; }
.paper .q-item { margin-bottom: 8px; display: flex; gap: 8px; break-inside: avoid; }
.paper .q-no { min-width: 26px; }
.paper .q-text { flex: 1; }
.paper .q-opts { display: flex; flex-wrap: wrap; gap: 2px 22px; margin-top: 2px; }
.paper .q-opts span { white-space: nowrap; }
.paper .blank { display: inline-block; border-bottom: 1px solid #000; min-width: 110px; height: 1em; vertical-align: baseline; }
.paper .ans-line { border-bottom: 1px solid #000; height: 28px; margin-top: 2px; }
.paper .ans-space { height: 60px; }
.paper .match { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 40px; margin: 4px 0 10px; margin-inline-start: 26px; }
.paper .match b { font-size: 14px; }
.paper table.p-table { border-collapse: collapse; width: 100%; margin: 4px 0 10px; }
.paper table.p-table td, .paper table.p-table th { border: 1.5px solid #000; padding: 6px 8px; min-height: 30px; height: 30px; }
.paper .passage { border-left: 3px solid #000; padding: 2px 12px; margin-bottom: 8px; }
.paper.ur .passage { border-left: 0; border-right: 3px solid #000; }
.paper .custom { white-space: pre-wrap; }
.paper .p-footer { display: flex; justify-content: space-between; font-size: 12px; margin-top: 30px; padding-top: 8px; border-top: 1px solid #000; }
.paper .keyline { font-size: 12px; border: 1px dashed #000; padding: 0 6px; margin-inline-start: 8px; }
.paper .teacher-key { font-size: 12px; font-weight: 700; }
.tf-box { display: inline-block; min-width: 70px; border-bottom: 1px solid #000; height: 1em; }

/* ---------- Print: only the paper ---------- */
#print-root { display: none; }
@media print {
  /* 12mm top/bottom page margin so every printed page (not only the first) has breathing room */
  @page { size: A4; margin: 12mm 0; }
  /* Remove the whole app from print flow (no blank trailing pages) and print only the staged paper. */
  #root, #toast-root, .modal-bg { display: none !important; }
  html, body { background: #fff; }
  #print-root { display: block !important; position: static; width: 100%; }
  #print-root .paper { box-shadow: none; width: 100%; min-height: 0; padding: 0 56px; }
  .paper-wrap { width: 100%; zoom: 1; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .two-col { grid-template-columns: 1fr; }
  .b-body { grid-template-columns: 1fr; }
  .mobile-tabs { display: flex; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--color-border); }
  .b-body[data-tab="edit"] .b-preview { display: none; }
  .b-body[data-tab="preview"] .b-edit { display: none; }
  .b-preview { padding: 12px; }
}
@media (max-width: 800px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; top: 0; transform: translateX(-100%); transition: transform .2s; width: 260px; border-right: 1px solid var(--ink); }
  .sidebar.open { transform: none; }
  .scrim.open { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 25; }
  .menu-toggle { display: inline-flex; }
  .content { padding: 16px; }
  .topbar { padding: 0 14px; }
  .profile-btn .pname { display: none; }
}

/* ---------- Mathematics ---------- */
.math { font-family: "Cambria Math", "STIX Two Math", "Latin Modern Math", "Times New Roman", Times, serif; font-size: 1.08em; direction: ltr; unicode-bidi: isolate; display: inline-block; text-align: left; line-height: 1.25; vertical-align: baseline; }
.math .mv { font-style: italic; }
.math .mo { margin: 0 .24em; }
.math .mu { margin: 0 .04em 0 .12em; }
.math .mt { font-family: var(--font-english); font-size: .92em; }
.math .mf { font-style: normal; }
.math .msp { display: inline-block; width: .17em; }
.math .msp.q { width: 1em; }
.math .msp.qq { width: 2em; }
.math .mfrac { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; margin: 0 .12em; line-height: 1.2; }
.math .mnum { border-bottom: 1.2px solid currentColor; padding: 0 .22em .06em; }
.math .mden { padding: .06em .22em 0; }
.math .msqrt { display: inline-flex; align-items: stretch; vertical-align: middle; padding-top: .1em; }
.math .msqrt-sign { display: block; position: relative; width: .85em; flex: none; align-self: stretch; min-height: 1em; margin-right: -.02em; }
/* The radical is drawn from two diagonal gradients so it stretches with its contents and is
   rasterised correctly by both the browser print engine and the html2pdf exporter. */
.math .msqrt-sign .r1 { position: absolute; left: 0; bottom: 0; width: 38%; height: 38%; background: linear-gradient(to bottom right, transparent 42%, #000 42%, #000 58%, transparent 58%); }
.math .msqrt-sign .r2 { position: absolute; left: 38%; bottom: 0; width: 62%; height: 100%; background: linear-gradient(to top right, transparent 46%, #000 46%, #000 54%, transparent 54%); }
.math .msqrt-body { border-top: 1.3px solid currentColor; padding: .06em .16em 0 .12em; }
.math .msqrt-ind { font-size: .6em; align-self: flex-start; margin-right: -.45em; margin-top: .2em; position: relative; left: .1em; }
.math .msup { font-size: .72em; vertical-align: .55em; line-height: 0; }
.math .msub { font-size: .72em; vertical-align: -.35em; line-height: 0; }
.math .msupsub { display: inline-flex; flex-direction: column; vertical-align: middle; font-size: .72em; line-height: 1.05; margin-left: .04em; }
.math .mover { border-top: 1.2px solid currentColor; padding-top: .02em; }
.math .munder { border-bottom: 1.2px solid currentColor; }
.math .macc { display: inline-flex; flex-direction: column; align-items: center; vertical-align: baseline; line-height: 1; }
.math .macc-top { font-size: .7em; line-height: .6; margin-bottom: .05em; }
.math .mbig { font-size: 1.45em; line-height: 1; vertical-align: -.1em; }
.math .mdel { font-size: 1.2em; }
.math-display { display: block; text-align: center; margin: 6px 0 4px; font-size: 1.12em; }
.paper .math-display { page-break-inside: avoid; }

/* math tools in the editor */
.mtools .row-label { font-size: 12px; font-weight: 700; margin: 8px 0 4px; }
.mtools .mgrid { display: flex; flex-wrap: wrap; gap: 4px; }
.mbtn { min-width: 34px; height: 32px; padding: 0 8px; border: 1px solid var(--color-border-strong); background: var(--surface); border-radius: var(--radius-sm); cursor: pointer; font-size: 15px; font-family: "Cambria Math", "STIX Two Math", "Times New Roman", serif; }
.mbtn:hover, .mbtn:focus-visible { border-color: var(--color-text); background: var(--color-soft); }
.mbtn.wide { font-size: 13px; font-family: var(--font-english); }
.math-live { min-height: 38px; border: 1px dashed var(--color-border-strong); border-radius: var(--radius-sm); padding: 4px 10px; margin-top: 4px; background: #fff; color: #000; display: flex; align-items: center; justify-content: center; overflow-x: auto; }
.mono { font-family: "Courier New", monospace; }
.math-help { font-size: 12px; color: var(--color-muted); line-height: 1.5; margin: 6px 0 0; }
.math-help code { border: 1px solid var(--color-border); border-radius: 4px; padding: 0 4px; background: var(--color-soft); font-size: 11.5px; }

/* ---------- Auto-translate (Urdu ⇄ English preview) ---------- */
.tr-toggle { border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); padding: 5px 9px; font-weight: 600; }
.tr-toggle.on { border-color: var(--color-text); background: var(--color-soft); }
.tr-state { font-size: 12px; color: var(--color-muted); display: inline-flex; align-items: center; gap: 6px; }
.tr-state.warn { color: var(--color-text); font-weight: 600; }
.tr-state .link-btn { font-size: 12px; }
.tr-banner { width: 794px; margin: 0 auto 10px; font-size: 12.5px; background: var(--surface); border: 1px dashed var(--ink); border-radius: var(--radius-sm); padding: 6px 10px; }
@media (max-width: 1000px) { .tr-banner { width: auto; } }
.auth-main .pw-toggle { font-size: 15px; }
.auth-logo { width: 240px; max-width: 70%; height: auto; display: block; margin: 0 auto 6px; }
.auth-name { font-weight: 800; font-size: 15px; letter-spacing: 2px; text-transform: uppercase; color: var(--color-muted); margin-bottom: 16px; }
.auth-side .auth-art { width: 150px; }
@media (max-width: 860px) { .auth-logo { width: 160px; } .auth-name { margin-bottom: 8px; } }
.brand-logo { width: 52px; height: 52px; object-fit: contain; flex: none; }
.sidebar .brand { font-size: 16px; }

/* ---------- Dark mode (UI only — the exam paper itself always stays white, as printed) ---------- */
:root[data-theme="dark"] {
  --color-background: #0F1012;
  --surface: #17191C;
  --color-soft: #212429;
  --color-text: #ECECEC;
  --color-muted: #A2A6AD;
  --color-border: #2B2E33;
  --color-border-strong: #3C4047;
  --ink: #ECECEC;
  --ink-contrast: #0F1012;
  --ink-hover: #FFFFFF;
  --preview-bg: #08090A;
  --auth-bg1: #1A1C20; --auth-bg2: #16181B; --auth-bg3: #0F1012;
  --side-1: #1C1F23; --side-2: #141619;
  --logo-filter: invert(1);
  color-scheme: dark;
}
.brand-logo, .auth-logo, .auth-art { filter: var(--logo-filter); }
:root[data-theme="dark"] .paper { box-shadow: 0 0 0 1px #2B2E33, 0 8px 30px rgba(0,0,0,.6); }
:root[data-theme="dark"] .modal-bg { background: rgba(0,0,0,.65); }
.b-toolbar select { background: var(--surface); }
.view-stage { background: var(--preview-bg); padding: 24px; overflow: auto; }
.theme-btn svg { width: 16px; height: 16px; }
.auth-theme { position: fixed; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; z-index: 5; }
.auth-theme svg { width: 18px; height: 18px; }
html { transition: none; }

/* ---------- Every device: phones, tablets, touch screens ---------- */
/* The A4 paper is scaled to fit its container by fitPapers() in paper-renderer.js (no sideways scrolling). */
@media (max-width: 800px) {
  /* 16px stops iPhone Safari from zooming the whole page when a field is tapped */
  .field input, .field select, .field textarea, .inp, .b-toolbar select { font-size: 16px; }
  .topbar h1 { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar .right { gap: 8px; }
  .view-stage { padding: 12px; }
  .b-toolbar { padding: 10px 12px; gap: 8px; }
  .b-toolbar .grow { display: none; }
  .b-toolbar .tr-toggle { order: 5; width: 100%; justify-content: flex-start; }
  .b-toolbar .tr-state { order: 6; width: 100%; }
  .b-edit { padding: 12px 12px 60px; }
  .opts { grid-template-columns: 1fr; }
  .toggle-grid { grid-template-columns: 1fr 1fr; }
  .welcome { padding: 18px; }
  .welcome h2 { font-size: 20px; }
  .panel { padding: 16px; }
  .stats { gap: 10px; }
  .stat { padding: 14px 8px; }
  .stat .n { font-size: 24px; }
  .toolbar .inp { flex: 1 1 140px; min-width: 0; }
  .table { display: block; overflow-x: auto; white-space: nowrap; }
  .modal { padding: 18px; }
  .dropdown { max-width: calc(100vw - 24px); }
}
@media (max-width: 420px) {
  .toggle-grid { grid-template-columns: 1fr; }
  .card-actions .btn { flex: 1 1 40%; }
  .add-grid { grid-template-columns: 1fr; }
}
/* Touch screens: bigger tap targets (about 40px) */
@media (pointer: coarse) {
  .icon-btn { width: 40px; height: 40px; font-size: 16px; }
  .btn.small { min-height: 38px; padding: 6px 12px; }
  .btn { min-height: 42px; }
  .nav button { padding: 12px; }
  .check input[type="checkbox"], .check input[type="radio"], .opt-line input[type="radio"] { width: 20px; height: 20px; }
  .mbtn { min-width: 40px; height: 40px; }
  .sec-head { flex-wrap: wrap; }
  .sec-head .handle { display: none; }   /* drag needs a mouse; ↑ ↓ buttons reorder on touch */
}
/* mobile browsers: 100vh includes the hidden address bar; dvh is the real visible height */
@supports (height: 100dvh) { .builder { height: calc(100dvh - var(--topbar-h)); } .app, .auth-wrap { min-height: 100dvh; } .sidebar { height: 100dvh; } }
.topbar > div:first-child { min-width: 0; flex: 1 1 auto; }
.topbar .right { flex: none; }
@media (max-width: 400px) { .profile-btn { gap: 2px; } .topbar { padding: 0 10px; } .topbar .right { gap: 6px; } }
/* Button labels never break onto two lines */
.btn, .auth-tabs button, .icon-btn, .nav button, .dropdown button, .mobile-tabs .btn { white-space: nowrap; }
.auth-tabs button { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media (max-width: 480px) {
  .auth-tabs { gap: 8px; }
  .auth-tabs button { padding: 11px 8px; font-size: 15px; }
}
@media (max-width: 360px) {
  .auth-tabs button { font-size: 14px; padding: 10px 6px; }
  .auth-main { padding-left: 16px; padding-right: 16px; }
}
.sec-head .title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* ---------- Forgot password ---------- */
.fp-step { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--color-muted); margin-bottom: 4px; }
.otp { font-family: "Courier New", ui-monospace, monospace; font-size: 26px !important; letter-spacing: 10px; text-align: center; font-weight: 700; }
.link-btn:disabled { opacity: .5; cursor: default; text-decoration: none; }

/* ---------- Database / loading ---------- */
.boot-loading { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--color-muted); font-weight: 600; }
.boot-loading .brand-logo { width: 72px; height: 72px; animation: pm-pulse 1.4s ease-in-out infinite; }
@keyframes pm-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .boot-loading .brand-logo { animation: none; } }
.local-note { font-size: 13px; text-align: center; margin: 18px 0 0; }
.save-state.warn { color: var(--color-text); font-weight: 700; }
.row-actions { white-space: nowrap; }

/* ---------- Paper Library ---------- */
.lib-intro { display: flex; justify-content: space-between; align-items: center; gap: 16px; border: 1px solid var(--color-border); border-radius: 14px; padding: 20px 24px; margin-bottom: 18px; }
.lib-intro h2 { font-size: 22px; margin-bottom: 4px; }
.lib-intro p { margin: 0; max-width: 720px; }
.lib-count { text-align: center; min-width: 90px; } .lib-count b { display: block; font-size: 30px; } .lib-count span { color: var(--color-muted); font-size: 13px; }
.lib-group { margin-bottom: 24px; } .lib-group h3 { font-size: 17px; margin-bottom: 12px; }

/* ---------- Reports ---------- */
.rep-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.rep-head h2 { font-size: 22px; margin-bottom: 2px; } .rep-head p { margin: 0; }
.rep-stats { grid-template-columns: repeat(6, 1fr); }
.rep-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.rep-grid .panel h3, section.panel > h3 { font-size: 16px; margin-bottom: 14px; }
.rep-wide { grid-column: 1 / -1; }
.hbars { display: grid; gap: 8px; }
.hbar { display: grid; grid-template-columns: minmax(80px, 34%) 1fr 34px; align-items: center; gap: 10px; font-size: 13.5px; border-radius: 6px; padding: 2px 4px; margin: 0 -4px; }
.hbar:hover { background: var(--color-soft); }
.hbar-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.hbar-t { height: 12px; background: var(--color-soft); border-radius: 0 4px 4px 0; overflow: hidden; }
.hbar-f { display: block; height: 100%; background: var(--ink); border-radius: 0 4px 4px 0; opacity: .85; }
.hbar:hover .hbar-f { opacity: 1; }
.hbar-v { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.vcols { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; align-items: end; height: 170px; }
.vcol { display: flex; flex-direction: column; align-items: center; height: 100%; gap: 4px; border-radius: 6px; }
.vcol:hover { background: var(--color-soft); }
.vcol-v { font-size: 13px; font-weight: 700; min-height: 18px; font-variant-numeric: tabular-nums; }
.vcol-t { flex: 1; width: 60%; max-width: 42px; display: flex; align-items: flex-end; border-bottom: 1px solid var(--color-border-strong); }
.vcol-f { display: block; width: 100%; background: var(--ink); border-radius: 4px 4px 0 0; opacity: .85; }
.vcol:hover .vcol-f { opacity: 1; }
.vcol-l { font-size: 12px; color: var(--color-muted); }
.table-wrap { overflow-x: auto; }
.matrix th, .matrix td { text-align: center; } .matrix th:first-child, .matrix th[scope="row"] { text-align: left; }
@media (max-width: 1100px) { .rep-stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px) { .rep-grid { grid-template-columns: 1fr; } .lib-intro { flex-direction: column; align-items: flex-start; } .lib-count { text-align: left; } }
@media (max-width: 420px) { .rep-stats { grid-template-columns: repeat(2, 1fr); } .hbar { grid-template-columns: 38% 1fr 30px; } }
.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .field select { min-height: 40px; }
/* ---------- Templates ---------- */
.tpl-prev-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.tpl-prev { max-height: 70vh; border-radius: var(--radius); }
.modal.wide .view-stage { padding: 12px; }
.tpl-h { font-size: 18px; margin: 6px 0 14px; }

/* ---------- where data is saved ---------- */
.db-note { font-size: 13.5px; line-height: 1.45; border-radius: var(--radius-sm); padding: 10px 12px; margin: 18px 0 0; text-align: left; }
.db-note.ok { border: 1px solid var(--color-border-strong); color: var(--color-muted); }
.db-note.warn { border: 1.5px solid var(--ink); font-weight: 600; }
.db-note small { font-weight: 400; color: var(--color-muted); }
.db-strip { font-size: 13px; font-weight: 600; padding: 8px 28px; border-bottom: 1px solid var(--color-border-strong); background: var(--color-soft); }
@media (max-width: 800px) { .db-strip { padding: 8px 14px; } }

/* ---------- Welcome loader (after login / sign-up) ---------- */
.welcome-loader { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 24px; cursor: pointer;
  background: radial-gradient(900px 500px at 50% 30%, var(--auth-bg1), transparent 70%), var(--color-background); animation: wl-in .25s ease-out; }
.welcome-loader.out { opacity: 0; transition: opacity .3s ease; }
.wl-inner { text-align: center; max-width: 560px; }
.wl-logo { width: 220px; max-width: 60vw; height: auto; filter: var(--logo-filter); animation: wl-pop .6s cubic-bezier(.2,.8,.2,1) both; }
.wl-title { font-family: Georgia, "Times New Roman", serif; font-size: 32px; margin: 18px 0 6px; animation: wl-up .5s .15s ease-out both; }
.wl-sub { color: var(--color-muted); margin: 0 0 22px; font-size: 16px; animation: wl-up .5s .25s ease-out both; }
.wl-bar { width: 220px; max-width: 70vw; height: 4px; margin: 0 auto; border-radius: 4px; background: var(--color-border); overflow: hidden; }
.wl-bar span { display: block; height: 100%; width: 0; background: var(--ink); border-radius: 4px; animation: wl-load 1.5s ease-in-out forwards; }
@keyframes wl-in { from { opacity: 0; } }
@keyframes wl-pop { from { opacity: 0; transform: scale(.85); } }
@keyframes wl-up { from { opacity: 0; transform: translateY(8px); } }
@keyframes wl-load { to { width: 100%; } }
@media (max-width: 480px) { .wl-title { font-size: 24px; } .wl-logo { width: 170px; } }
@media (prefers-reduced-motion: reduce) { .welcome-loader, .wl-logo, .wl-title, .wl-sub { animation: none; } .wl-bar span { animation: none; width: 100%; } }