/* ==========================================================================
 * PAPER BUILDER — assets/css/paper-builder.css
 * Builder (pb-*), "Naya paper" popup (pbn-*), My Question Papers (mp-*),
 * PYQ page ka Generate strip (pbc-*).
 * Rang site ke theme (--color-primary / --color-accent) se aate hain;
 * paper jaisi cheezein (marks box, blueprint table) serif me.
 * ========================================================================== */

.pb-app, .pbn, .mp, .pbc, .pbc-basket, .pyq-head, .pb-pk, .pb-dlg, .pb-toast, .pb-busy {
    --pb-ink: var(--color-text, #1e1b3a);
    --pb-muted: var(--color-text-muted, #6b7280);
    --pb-line: var(--color-border, #e6e6f0);
    --pb-soft: #f6f6fa;
    --pb-rule: #d9d6e6;
    --pb-pri: var(--color-primary, #4f46e5);
    --pb-acc: var(--color-accent, #f97316);
    --pb-red: #c81e1e;
    --pb-red-bg: #fff1f0;
    --pb-green: #15803d;
    --pb-green-bg: #ecfdf3;
    --pb-amber: #b45309;
    --pb-amber-bg: #fffbeb;
    --pb-serif: Georgia, 'Noto Serif Devanagari', 'Tiro Devanagari Hindi', 'Nirmala UI', serif;
}
.pbn-lock, .pbn-lock body { overflow: hidden !important; }

/* Site ke html/body par overflow-x:hidden hai (mobile drawer ke liye), jo
   position:sticky tod deta hai. Builder page par "clip" — horizontal scroll
   phir bhi band rehta hai, par right side ka Max. Marks box saath chalta hai.
   Purane browser (clip nahi jaante) purana "hidden" hi rakhte hain. */
@supports (overflow-x: clip) {
    html.pb-page, html.pb-page body { overflow-x: clip; }
}

/* ---------- page ---------- */
.pb-section { padding: 26px 0 80px; }
.pb-app { color: var(--pb-ink); }
.pb-loading { padding: 70px 0; text-align: center; color: var(--pb-muted); display: flex; gap: 10px; justify-content: center; align-items: center; }
.pb-spin { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid rgba(0,0,0,.12); border-top-color: var(--pb-pri); display: inline-block; animation: pbSpin .7s linear infinite; flex: 0 0 auto; }
@keyframes pbSpin { to { transform: rotate(360deg); } }

.pb-app .btn { line-height: 1.3; }
.pb-app .btn[disabled], .pb-pk .btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.pb-sm { padding: 8px 15px !important; font-size: 13px !important; }
.pb-link { background: none; border: 0; padding: 0; color: var(--pb-pri); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.pb-link:hover { opacity: .8; }
.pb-btn-danger { background: var(--pb-red); color: #fff; }
.pb-btn-danger:hover { opacity: .9; color: #fff; }
.pb-muted { color: var(--pb-muted); font-size: 13.5px; line-height: 1.6; margin: 0; }
.pb-muted-s { color: var(--pb-muted); font-size: 12.5px; }
.pb-mb { margin-bottom: 16px; }
.pb-okt { color: var(--pb-green); font-weight: 600; font-size: 13px; }
.pb-warnt { color: var(--pb-amber); font-weight: 600; font-size: 12.5px; }
.pb-req { color: var(--pb-red); }

/* ---------- head + stepper ---------- */
.pb-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 16px; }
.pb-back { font-size: 13px; color: var(--pb-muted); display: inline-block; margin-bottom: 4px; }
.pb-back:hover { color: var(--pb-pri); }
.pb-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pb-title { font-size: clamp(20px, 1.6vw + 14px, 27px); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; margin: 0; word-break: break-word; }
.pb-status { font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.pb-status.is-draft { background: var(--pb-amber-bg); color: var(--pb-amber); }
.pb-status.is-ready { background: var(--pb-green-bg); color: var(--pb-green); }
.pb-save { font-size: 12.5px; color: var(--pb-muted); display: flex; align-items: center; gap: 7px; min-height: 20px; }
.pb-dot { width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1; display: inline-block; }
.pb-dot.is-ok { background: #16a34a; }
.pb-dot.is-busy { background: #f59e0b; animation: pbPulse 1s ease-in-out infinite; }
.pb-dot.is-err { background: var(--pb-red); }
@keyframes pbPulse { 50% { opacity: .3; } }

.pb-steps { list-style: none; display: flex; margin: 0 0 22px; padding: 0; border-bottom: 2px solid var(--pb-line); overflow-x: auto; scrollbar-width: none; }
.pb-steps::-webkit-scrollbar { display: none; }
.pb-step { flex: 1 0 auto; }
.pb-step button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 9px; padding: 10px 14px 12px; width: 100%;
    font-size: 13.5px; font-weight: 600; color: var(--pb-muted); border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; }
.pb-step button:disabled { cursor: not-allowed; opacity: .45; }
.pb-step button:not(:disabled):hover { color: var(--pb-ink); }
.pb-step button:focus-visible { outline: 2px solid var(--pb-pri); outline-offset: -3px; border-radius: 8px; }
.pb-step-n { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; border: 1.5px solid currentColor; flex: 0 0 auto; }
.pb-step.is-on button { color: var(--pb-pri); border-bottom-color: var(--pb-pri); }
.pb-step.is-on .pb-step-n { background: var(--pb-pri); border-color: var(--pb-pri); color: #fff; }
.pb-step.is-done .pb-step-n { background: var(--pb-ink); border-color: var(--pb-ink); color: #fff; }

/* ---------- layout ---------- */
.pb-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.pb-main { min-width: 0; }
.pb-side { position: sticky; top: calc(var(--header-height, 72px) + 16px); display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 1000px) {
    .pb-grid { grid-template-columns: minmax(0, 1fr); }
    .pb-side { position: static; }
}

.pb-card { background: #fff; border: 1px solid var(--pb-line); border-radius: 14px; padding: 22px; margin-bottom: 18px; }
.pb-card-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 14px; }
.pb-card-head > div:first-child { flex: 1 1 320px; min-width: 0; }
.pb-h2 { font-size: 19px; font-weight: 800; margin: 0 0 4px; letter-spacing: -.01em; }
.pb-h3 { font-size: 15px; font-weight: 700; margin: 22px 0 10px; }
.pb-empty { text-align: center; color: var(--pb-muted); padding: 30px 20px; }
.pb-empty .btn { margin-top: 12px; }

/* ---------- form fields ---------- */
.pb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 640px) { .pb-row { grid-template-columns: 1fr; } .pb-card { padding: 18px 16px; } }
.pb-field { margin-bottom: 16px; min-width: 0; }
.pb-lbl { display: block; font-size: 12.5px; font-weight: 600; color: var(--pb-muted); margin-bottom: 6px; }
.pb-lbl small { font-weight: 500; opacity: .85; }
.pb-input { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1.5px solid var(--pb-line); border-radius: 10px; font: inherit; font-size: 14px;
    background: #fff; color: var(--pb-ink); transition: border-color .15s, box-shadow .15s; min-width: 0; }
.pb-input:focus { outline: none; border-color: var(--pb-pri); box-shadow: 0 0 0 3px rgba(79,70,229,.14); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pb-pri) 18%, transparent); }
.pb-input:disabled { background: var(--pb-soft); color: var(--pb-muted); }
.pb-input-lg { font-size: 17px; padding: 13px 14px; }
.pb-field.has-err .pb-input { border-color: var(--pb-red); }
.pb-ferr { color: var(--pb-red); font-size: 12.5px; margin-top: 5px; font-weight: 600; }
.pb-hint { font-size: 12.5px; margin-top: 6px; color: var(--pb-muted); }
.pb-check { display: flex; align-items: center; gap: 9px; font-size: 14px; cursor: pointer; margin-top: 4px; }
.pb-check input { width: 17px; height: 17px; accent-color: var(--pb-pri); }

.pb-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.pb-chips-tight { margin-top: 7px; gap: 5px; }
.pb-chip { border: 1.5px solid var(--pb-line); background: #fff; color: var(--pb-ink); border-radius: 999px; padding: 5px 13px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.pb-chip-sm { padding: 3px 10px; font-size: 12px; }
.pb-chip:hover { border-color: var(--pb-pri); color: var(--pb-pri); }
.pb-chip.is-on { background: var(--pb-ink); border-color: var(--pb-ink); color: #fff; }
/* ---------- subject search + chips ---------- */
.pb-subsearch { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.pb-subsearch .pb-input { flex: 1 1 auto; padding: 8px 12px; font-size: 13.5px; }
.pb-subcount { font-size: 11.5px; color: var(--pb-muted); white-space: nowrap; }
.pb-subnone { width: 100%; text-align: center; color: var(--pb-muted); font-size: 13px; padding: 10px 4px; }
.pb-subchip[hidden] { display: none !important; }
.pb-secclear { margin-left: auto; font-size: 12px !important; font-family: var(--font-main, inherit); }
.pb-slotclear { font-size: 12.5px; }
/* ---------- subject chips (ek se zyada subject) ---------- */
.pb-subbox { display: flex; flex-wrap: wrap; gap: 7px; border: 1.5px solid var(--pb-line); border-radius: 11px; padding: 9px; background: #fff; max-height: 178px; overflow-y: auto; }
.pb-subbox.is-empty { color: var(--pb-muted); font-size: 13.5px; padding: 11px 12px; display: flex; align-items: center; gap: 8px; }
.pb-subchip { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; border: 1.5px solid var(--pb-line); background: #fff; color: var(--pb-ink);
    border-radius: 10px; padding: 6px 12px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; line-height: 1.25; text-align: left; }
.pb-subchip small { font-weight: 500; font-size: 10.5px; color: var(--pb-muted); }
.pb-subchip:hover { border-color: var(--pb-pri); color: var(--pb-pri); }
.pb-subchip.is-on { background: var(--pb-ink); border-color: var(--pb-ink); color: #fff; }
.pb-subchip.is-on small { color: rgba(255,255,255,.72); }
.pb-subchip.is-none:not(.is-on) { opacity: .62; }

/* ---------- OR (vikalp) question ---------- */
.pb-alt { display: flex; align-items: flex-start; gap: 9px; margin: 8px 0 2px; padding: 8px 10px; border-left: 3px solid var(--pb-acc); background: #fff8f1; border-radius: 0 9px 9px 0; }
.pb-alt-tag { flex: 0 0 auto; font-family: var(--pb-serif); font-weight: 700; font-size: 12px; color: var(--pb-acc); letter-spacing: .5px; padding-top: 1px; }
.pb-alt-q { min-width: 0; flex: 1; }
.pb-alt-q .pb-clamp { font-size: 13px; }
.pb-alt-add { margin-top: 6px; border: 1.5px dashed #e3cdb4; background: transparent; color: #a35a12; font: inherit; font-size: 12px; font-weight: 600;
    padding: 4px 11px; border-radius: 999px; cursor: pointer; }
.pb-alt-add:hover { border-color: var(--pb-acc); color: var(--pb-acc); background: #fff8f1; }

.pb-marks-in { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pb-marks-in .pb-chips { margin-top: 0; }
.pb-input-marks { width: 110px; font-size: 22px; font-weight: 800; text-align: center; font-family: var(--pb-serif); font-variant-numeric: tabular-nums; padding: 8px 10px; }

.pb-seg { display: inline-flex; border: 1.5px solid var(--pb-line); border-radius: 11px; padding: 3px; background: var(--pb-soft); gap: 3px; flex-wrap: wrap; }
.pb-seg button { border: 0; background: transparent; padding: 7px 14px; border-radius: 8px; font: inherit; font-size: 13px; font-weight: 600; color: var(--pb-muted); cursor: pointer; }
.pb-seg button.is-on { background: #fff; color: var(--pb-ink); box-shadow: 0 1px 4px rgba(0,0,0,.1); }

.pb-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 6px 0 10px; flex-wrap: wrap; }
.pb-nav-flat { margin-top: 20px; }
.pb-next { padding: 12px 26px !important; font-size: 15px !important; }

/* ---------- title screen (step 0) ---------- */
.pb-title-screen { display: grid; place-items: center; padding: 20px 0 30px; }
.pb-tcard { width: min(560px, 100%); background: #fff; border: 1px solid var(--pb-line); border-radius: 18px; padding: 30px 28px 24px; position: relative; overflow: hidden; }
.pb-tcard h1 { font-size: 26px; font-weight: 800; margin: 0 0 8px; letter-spacing: -.02em; }
.pb-tcard .pb-muted { margin-bottom: 18px; max-width: 44ch; }
.pb-tsheet, .pbn-sheet { position: absolute; top: -14px; right: 22px; width: 62px; height: 80px; background: #fff; border: 1.5px solid var(--pb-rule);
    border-radius: 4px; transform: rotate(6deg); padding: 22px 9px 0; display: flex; flex-direction: column; gap: 7px; box-shadow: 0 6px 16px rgba(0,0,0,.06); }
.pb-tsheet i, .pbn-sheet i { display: block; height: 3px; border-radius: 2px; background: var(--pb-rule); }
.pb-tsheet i:first-child, .pbn-sheet i:first-child { width: 60%; background: var(--pb-ink); }

/* ---------- Max. Marks box (sidebar) ---------- */
.pb-mbox { border: 2px solid var(--pb-ink); border-radius: 3px; padding: 12px 15px 13px; background: #fff; box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4px var(--pb-rule); }
.pb-mbox-l { font-size: 12px; color: var(--pb-muted); font-weight: 600; }
.pb-mbox-n { display: flex; align-items: baseline; gap: 6px; margin: 2px 0 9px; font-family: var(--pb-serif); }
.pb-mbox-n b { font-size: 40px; line-height: 1; font-variant-numeric: tabular-nums; }
.pb-mbox-n span { font-size: 18px; color: var(--pb-muted); }
.pb-mtrack { height: 6px; background: #eeeef4; border-radius: 3px; overflow: hidden; }
.pb-mtrack span { display: block; height: 100%; background: var(--pb-ink); border-radius: 3px; transition: width .25s ease; }
.pb-mbox-msg { font-size: 12.5px; margin-top: 8px; font-weight: 700; color: var(--pb-muted); }
.pb-mbox.is-ok { border-color: var(--pb-green); }
.pb-mbox.is-ok .pb-mtrack span { background: var(--pb-green); }
.pb-mbox.is-ok .pb-mbox-msg { color: var(--pb-green); }
.pb-mbox.is-under .pb-mtrack span { background: #d97706; }
.pb-mbox.is-under .pb-mbox-msg { color: var(--pb-amber); }
.pb-mbox.is-over { border-color: var(--pb-red); background: var(--pb-red-bg); box-shadow: inset 0 0 0 3px var(--pb-red-bg), inset 0 0 0 4px #f8b4b4; }
.pb-mbox.is-over .pb-mbox-n b, .pb-mbox.is-over .pb-mbox-msg { color: var(--pb-red); }
.pb-mbox.is-over .pb-mtrack span { background: var(--pb-red); }
.pb-mbox.is-over .pb-mbox-msg { animation: pbBlink 1s steps(2, start) infinite; }
.pb-mbox.is-shake { animation: pbShake .45s ease 1; }
@keyframes pbShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
@keyframes pbBlink { to { visibility: hidden; } }

/* ---------- red flasher ---------- */
.pb-over { display: flex; gap: 12px; align-items: flex-start; background: var(--pb-red-bg); color: #7f1d1d; border: 1.5px solid #f5a3a3; border-left: 6px solid var(--pb-red);
    border-radius: 10px; padding: 12px 14px; font-size: 13.5px; line-height: 1.6; margin: 0 0 16px; animation: pbRedFlash 1.1s ease-in-out infinite; }
.pb-over b { color: var(--pb-red); }
.pb-over-ico { flex: 0 0 26px; height: 26px; border-radius: 50%; background: var(--pb-red); color: #fff; font-weight: 900; display: grid; place-items: center; font-size: 15px; }
@keyframes pbRedFlash {
    0%, 100% { background: var(--pb-red-bg); box-shadow: 0 0 0 0 rgba(200,30,30,0); }
    50% { background: #ffd4d0; box-shadow: 0 0 0 5px rgba(200,30,30,.16); }
}

.pb-side-card { background: #fff; border: 1px solid var(--pb-line); border-radius: 12px; padding: 12px 14px; }
.pb-side-t { font-size: 12px; font-weight: 700; color: var(--pb-muted); margin-bottom: 6px; }
.pb-side-info > div { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 5px 0; border-bottom: 1px dashed var(--pb-line); }
.pb-side-info > div:last-child { border-bottom: 0; }
.pb-side-info span { color: var(--pb-muted); flex: 0 0 auto; }
.pb-side-info b { text-align: right; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.pb-side-cost { font-size: 12px; color: var(--pb-muted); line-height: 1.8; padding: 0 4px; }
.pb-side-cost b { color: var(--pb-ink); }
.pb-side-cost span { font-size: 11px; }

/* mobile: niche chipki marks patti */
.pb-mbar { display: none; }
@media (max-width: 1000px) {
    .pb-mbar { display: flex; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 950; justify-content: space-between; align-items: center; gap: 10px;
        background: var(--pb-ink); color: #fff; border-radius: 12px; padding: 10px 16px; font-size: 13px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
    .pb-mbar:empty { display: none; }
    .pb-mb-m b { font-size: 16px; }
    .pb-mb-m.is-over { color: #ffb4ad; animation: pbBlink 1s steps(2, start) infinite; }
    .pb-mb-m.is-ok { color: #86efac; }
    .pb-section { padding-bottom: 110px; }
}

/* ---------- blueprint / pattern tables (paper jaise) ---------- */
.pb-tablewrap { overflow-x: auto; }
.pb-ptable { width: 100%; border-collapse: collapse; font-family: var(--pb-serif); font-size: 13px; }
.pb-ptable th, .pb-ptable td { border-bottom: 1px solid var(--pb-rule); padding: 5px 6px; text-align: left; vertical-align: top; }
.pb-ptable thead th { font-family: var(--font-main, inherit); font-size: 11px; color: var(--pb-muted); font-weight: 600; border-bottom: 1.5px solid var(--pb-ink); }
.pb-ptable tbody th { font-weight: 700; }
.pb-ptable tfoot th, .pb-ptable tfoot td { border-top: 1.5px solid var(--pb-ink); border-bottom: 0; }
.pb-nc { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }

.pb-pats { display: grid; grid-template-columns: repeat(auto-fill, minmax(275px, 1fr)); gap: 14px; }
.pb-pat { border: 1.5px solid var(--pb-line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: #fff; transition: border-color .15s; }
.pb-pat:hover { border-color: #c9c6dc; }
.pb-pat.is-on { border-color: var(--pb-pri); box-shadow: 0 0 0 3px rgba(79,70,229,.12); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pb-pri) 16%, transparent); }
.pb-pat-head strong { display: block; font-size: 14.5px; }
.pb-pat-head span { display: block; font-size: 12px; color: var(--pb-muted); margin-top: 2px; }
.pb-pat-btn { margin-top: auto; align-self: flex-start; padding: 8px 16px !important; font-size: 13px !important; }
.pb-pat-custom { border-style: dashed; }
.pb-pat-blank { display: flex; gap: 8px; flex: 1; align-items: center; padding: 8px 0; }
.pb-pat-blank span { width: 38px; height: 46px; border: 1.5px dashed #c9c6dc; border-radius: 6px; display: grid; place-items: center; font-family: var(--pb-serif); font-weight: 700; color: var(--pb-muted); }
.pb-pat-blank span:last-child { border-style: solid; color: var(--pb-pri); border-color: var(--pb-pri); }

/* ---------- format editor ---------- */
.pb-et { font-size: 13.5px; font-weight: 600; padding: 7px 12px; border-radius: 9px; background: var(--pb-soft); white-space: nowrap; display: inline-block; }
.pb-et b { font-family: var(--pb-serif); font-size: 17px; }
.pb-et.is-ok { background: var(--pb-green-bg); color: var(--pb-green); }
.pb-et.is-under { background: var(--pb-amber-bg); color: var(--pb-amber); }
.pb-et.is-over { background: var(--pb-red-bg); color: var(--pb-red); }

.pb-numbering { margin: 4px 0 18px; }
.pb-radios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 720px) { .pb-radios { grid-template-columns: 1fr; } }
.pb-radio { text-align: left; border: 1.5px solid var(--pb-line); background: #fff; border-radius: 11px; padding: 10px 12px; cursor: pointer; font: inherit; color: var(--pb-ink); }
.pb-radio b { display: block; font-family: var(--pb-serif); font-size: 14.5px; }
.pb-radio span { display: block; font-size: 12px; color: var(--pb-muted); margin-top: 3px; line-height: 1.45; }
.pb-radio.is-on { border-color: var(--pb-pri); box-shadow: inset 0 0 0 1px var(--pb-pri); }

.pb-sec { border: 1.5px solid var(--pb-line); border-radius: 12px; padding: 12px 14px 10px; margin-bottom: 12px; background: #fcfcfe; }
.pb-sec-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.pb-sec-badge { width: 30px; height: 30px; border-radius: 7px; background: var(--pb-ink); color: #fff; display: inline-grid; place-items: center; font-weight: 800; font-size: 14px; font-family: var(--pb-serif); flex: 0 0 auto; }
.pb-sec-title { flex: 1 1 200px; width: auto; padding: 7px 10px; font-weight: 600; }
.pb-sec-sum { font-size: 12.5px; color: var(--pb-muted); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pb-sec-acts { display: flex; gap: 5px; }
.pb-ib { width: 30px; height: 30px; border-radius: 8px; border: 1.5px solid var(--pb-line); background: #fff; color: var(--pb-muted); cursor: pointer; font-size: 13px; font-weight: 700; display: inline-grid; place-items: center; padding: 0; }
.pb-ib:hover:not(:disabled) { border-color: var(--pb-pri); color: var(--pb-pri); }
.pb-ib.is-danger:hover:not(:disabled) { border-color: var(--pb-red); color: var(--pb-red); }
.pb-ib:disabled { opacity: .35; cursor: not-allowed; }

.pb-brow { display: grid; grid-template-columns: minmax(160px, 1.5fr) auto auto 92px 52px 32px; gap: 8px 10px; align-items: center; padding: 9px 0; border-top: 1px dashed var(--pb-line); }
.pb-brow-h { border-top: 0; padding: 2px 0 0; font-size: 11.5px; font-weight: 600; color: var(--pb-muted); }
.pb-bc { min-width: 0; }
.pb-bc .pb-input { padding: 8px 10px; font-size: 13.5px; }
.pb-bc-sub b { font-family: var(--pb-serif); font-size: 17px; font-variant-numeric: tabular-nums; }
.pb-stepper { display: inline-flex; align-items: stretch; border: 1.5px solid var(--pb-line); border-radius: 10px; overflow: hidden; background: #fff; }
.pb-stepper button { border: 0; width: 30px; background: var(--pb-soft); color: var(--pb-muted); font-size: 16px; font-weight: 800; cursor: pointer; padding: 0; }
.pb-stepper button:hover { color: var(--pb-pri); }
.pb-stepper .pb-input { border: 0; border-radius: 0; width: 52px; text-align: center; padding: 7px 2px; font-weight: 700; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.pb-stepper .pb-input:focus { box-shadow: none; }
.pb-stepper input::-webkit-outer-spin-button, .pb-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pb-bmore { grid-column: 1 / -1; font-size: 12.5px; color: var(--pb-muted); }
.pb-bmore summary { cursor: pointer; list-style: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-bmore summary::-webkit-details-marker { display: none; }
.pb-bmore summary::before { content: '✎ '; }
.pb-bmore summary em { color: var(--pb-ink); font-style: italic; font-family: var(--pb-serif); }
.pb-bmore .pb-input { margin-top: 7px; font-size: 13px; padding: 7px 10px; }
@media (max-width: 760px) {
    /* Mobile me har block 3 line me — pehle har cheez apni line leti thi
       (delete ka ✕ akela ek poori line kha jaata tha), isliye 5 block wale
       section me bahut scroll karna padta tha.
          line 1:  [ Question type ................. ]  [✕]
          line 2:  [ Questions ]    [ Marks each ]
          line 3:  [ Choice ]       [ Marks ]            */
    .pb-brow {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 32px;
        grid-template-areas:
            "btype btype bdel"
            "bcnt  bmrk  bmrk"
            "bcho  bsub  bsub";
        gap: 9px 10px;
        padding: 11px 0 12px;
        align-items: end;
    }
    .pb-brow-h { display: none; }
    .pb-bc-t                    { grid-area: btype; }
    .pb-bc[data-l="Questions"]  { grid-area: bcnt; }
    .pb-bc[data-l="Marks each"] { grid-area: bmrk; }
    .pb-bc[data-l="Choice"]     { grid-area: bcho; }
    .pb-bc-sub                  { grid-area: bsub; }
    .pb-bc-x                    { grid-area: bdel; justify-self: end; align-self: end; }
    .pb-bc[data-l]::before { content: attr(data-l); display: block; font-size: 11px; color: var(--pb-muted); font-weight: 600; margin-bottom: 3px; }
    /* stepper: + / − ungli se dabane layak. 320px jaisi chhoti screen par
       cell chhota pad jaata hai, isliye beech ka number sikud sakta hai —
       button apni jagah nahi chhodte, aur stepper cell se bahar nahi jaata. */
    .pb-brow .pb-stepper { max-width: 100%; box-sizing: border-box; }
    .pb-brow .pb-stepper button { flex: 0 0 34px; width: 34px; font-size: 18px; }
    .pb-brow .pb-stepper .pb-input { width: 48px; min-width: 0; }
    .pb-bc-sub b { font-size: 18px; }
}
.pb-add-block, .pb-add-sec { display: block; width: 100%; border: 1.5px dashed #cfcbe0; background: transparent; color: var(--pb-pri); font: inherit; font-weight: 600;
    font-size: 13px; padding: 9px; border-radius: 10px; cursor: pointer; margin-top: 6px; }
.pb-add-block:hover, .pb-add-sec:hover { border-color: var(--pb-pri); background: #fff; }
.pb-add-sec { padding: 12px; font-size: 14px; margin-top: 4px; }

/* ---------- instructions ---------- */
.pb-note { background: var(--pb-amber-bg); border: 1px solid #f7d58a; color: #7c4a03; padding: 9px 12px; border-radius: 10px; font-size: 13px; margin-bottom: 12px; }
.pb-note.is-auto { background: var(--pb-soft); border-color: var(--pb-line); color: var(--pb-muted); }
.pb-instr { font-family: var(--pb-serif); font-size: 14.5px; line-height: 1.75; resize: vertical; min-height: 220px; }
.pb-sheet-mini { background: #fff; border: 1px solid var(--pb-line); border-radius: 4px; padding: 18px; box-shadow: 0 1px 0 var(--pb-rule), 0 6px 0 -3px #fff, 0 7px 0 -3px var(--pb-rule); }
.pb-gi { border: 1px solid #111; padding: 10px 14px; font-family: var(--pb-serif); color: #111; }
.pb-gi-t { font-weight: 700; text-decoration: underline; margin-bottom: 6px; }
.pb-gi-l { font-size: 13.5px; margin-bottom: 3px; padding-left: 28px; text-indent: -28px; line-height: 1.6; }

/* ---------- step 4: slots ---------- */
.pb-qhead { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-end; }
.pb-qhead > div:first-child { flex: 1 1 300px; }
.pb-qtools { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.pb-qtools-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 640px) { .pb-qtools { align-items: stretch; width: 100%; } .pb-qtools-btns { justify-content: flex-start; } }
.pb-prog { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--pb-muted); }
.pb-prog b { color: var(--pb-ink); font-size: 16px; }
.pb-prog-bar { width: 150px; height: 8px; border-radius: 4px; background: #eeeef4; overflow: hidden; }
.pb-prog-bar span { display: block; height: 100%; background: var(--pb-green); border-radius: 4px; transition: width .3s; }

.pb-qsec { margin-bottom: 22px; }
.pb-qsec-head { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; font-family: var(--pb-serif); }
.pb-qsec-head strong { font-size: 16px; letter-spacing: .3px; }
.pb-qsec-head > span:nth-last-child(2), .pb-qsec-head > span:last-child { margin-left: auto; font-size: 13px; color: var(--pb-muted); font-family: var(--font-main, inherit); }
.pb-qsec-head:has(.pb-secclear) > span:last-child { margin-left: 0; }
.pb-slot { background: #fff; border: 1px solid var(--pb-line); border-left: 4px solid #d4d1e2; border-radius: 12px; padding: 13px 16px; margin-bottom: 12px; }
.pb-slot.is-full { border-left-color: var(--pb-green); }
.pb-slot-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; }
.pb-slot-type { font-weight: 700; font-size: 14.5px; margin-right: 10px; }
.pb-slot-calc { font-family: var(--pb-serif); font-size: 13px; color: var(--pb-muted); white-space: nowrap; }
.pb-fill { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--pb-soft); color: #475569; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pb-fill.is-full { background: var(--pb-green-bg); color: var(--pb-green); }
.pb-qlist { list-style: none; margin: 0; padding: 0; }
.pb-qi { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 10px; padding: 9px 0; border-top: 1px solid #f0f0f5; align-items: start; }
.pb-qn { font-family: var(--pb-serif); font-weight: 700; font-size: 13px; white-space: nowrap; padding-top: 1px; }
.pb-qtxt { min-width: 0; }
.pb-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; line-height: 1.55; }
.pb-qacts { display: flex; gap: 4px; }
.pb-qacts .pb-ib { width: 27px; height: 27px; font-size: 12px; }
.pb-qi-empty .pb-qtxt { border: 1.5px dashed #d8d5e6; border-radius: 8px; padding: 7px 12px; color: var(--pb-muted); font-size: 13px; }
.pb-qi-empty .pb-qn { color: var(--pb-muted); }
@media (max-width: 560px) { .pb-qi { grid-template-columns: 1fr auto; } .pb-qn { grid-column: 1 / -1; } }
.pb-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.pb-mc { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: #f2f2f7; color: #55536b; white-space: nowrap; }
.pb-mc-ch { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.pb-mc-m { background: #eceaf6; color: var(--pb-ink); font-weight: 700; }
.pb-mc-warn { background: var(--pb-amber-bg); color: var(--pb-amber); font-weight: 700; }
.pb-slot-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }

/* ---------- picker drawer ---------- */
.pb-pk { position: fixed; inset: 0; z-index: 9990; display: flex; justify-content: flex-end; font-family: var(--font-main, inherit); color: var(--pb-ink); }
.pb-pk-back { position: absolute; inset: 0; background: rgba(17, 20, 39, .5); }
.pb-pk-panel { position: relative; width: min(660px, 100%); height: 100%; background: #f7f7fb; display: flex; flex-direction: column; box-shadow: -24px 0 60px rgba(0,0,0,.22); animation: pbSlide .22s ease-out; }
@keyframes pbSlide { from { transform: translateX(46px); opacity: .5; } to { transform: none; opacity: 1; } }
.pb-pk-head { background: #fff; padding: 14px 18px; border-bottom: 1px solid var(--pb-line); }
.pb-pk-h { display: flex; align-items: center; gap: 12px; }
.pb-pk-h > div { flex: 1; min-width: 0; }
.pb-pk-kicker { font-size: 12px; color: var(--pb-muted); font-weight: 600; }
.pb-pk-title { font-size: 17px; font-weight: 800; }
.pb-pk-x { width: 36px; height: 36px; border-radius: 10px; border: 1.5px solid var(--pb-line); background: #fff; font-size: 22px; line-height: 1; cursor: pointer; color: var(--pb-muted); }
.pb-pk-x:hover { color: var(--pb-red); border-color: var(--pb-red); }
.pb-pk-seg { margin: 10px 18px 0; }
.pb-pk-filters { background: #fff; padding: 12px 18px; border-bottom: 1px solid var(--pb-line); display: flex; flex-direction: column; gap: 9px; }
.pb-pk-scope { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.pb-pk-search { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 8px; }
.pb-pk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pb-pk-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pb-pk-filters .pb-input { padding: 8px 10px; font-size: 13px; }
@media (max-width: 560px) { .pb-pk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pb-pk-search { grid-template-columns: 1fr; } }
.pb-pk-togs { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.pb-tog { border: 1.5px solid var(--pb-line); background: #fff; border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; color: var(--pb-muted); }
.pb-tog.is-on { border-color: var(--pb-ink); background: var(--pb-ink); color: #fff; }
.pb-pk-list { flex: 1; overflow-y: auto; padding: 14px 18px 30px; -webkit-overflow-scrolling: touch; }
.pb-pk-count { font-size: 12.5px; color: var(--pb-muted); margin-bottom: 10px; }
.pb-pk-count b { color: var(--pb-ink); }
.pb-pkq { background: #fff; border: 1px solid var(--pb-line); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.pb-pkq.is-added { border-color: var(--pb-green); box-shadow: inset 3px 0 0 var(--pb-green); }
.pb-pkq .pb-meta { margin: 0 0 6px; }
.pb-pkq-text { font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.pb-img-tag { font-size: 11.5px; color: var(--pb-muted); white-space: nowrap; }
.pb-pkq-opts { margin: 6px 0 0; padding-left: 22px; font-size: 13px; color: #3f3d56; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 22px; row-gap: 2px; }
.pb-pkq-opts li { display: list-item; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { .pb-pkq-opts { grid-template-columns: 1fr; } }
.pb-pkq-full { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: #fbfbfd; border: 1px solid var(--pb-line); font-family: var(--pb-serif); font-size: 14px; line-height: 1.65; overflow-x: auto; }
.pb-pkq-full p { margin: 0 0 6px; }
.pb-pkq-full table { border-collapse: collapse; }
.pb-pkq-full .pb-qt td, .pb-pkq-full .pb-qt th { border: 1px solid #999; padding: 3px 7px; }
.pb-pkq-acts { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.pb-more { display: block; width: 100%; margin-top: 4px; }
.pb-pk-empty { text-align: center; padding: 34px 16px; color: var(--pb-muted); font-size: 13.5px; }
.pb-pk-empty b { color: var(--pb-ink); display: block; margin-bottom: 6px; font-size: 14.5px; }
.pb-pk-empty .pb-chips { justify-content: center; }
.pb-pk-empty.is-err b, .pb-pk-empty.is-err { color: var(--pb-red); }
.pb-pk-foot { background: #fff; border-top: 1px solid var(--pb-line); padding: 12px 18px; display: flex; gap: 10px; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.pb-pk-foot-r { display: flex; gap: 8px; margin-left: auto; }
.pb-skel { height: 92px; border-radius: 12px; margin-bottom: 10px; background: linear-gradient(90deg, #eeeef4 0%, #f7f7fb 50%, #eeeef4 100%); background-size: 200% 100%; animation: pbShimmer 1.2s linear infinite; }
@keyframes pbShimmer { to { background-position: -200% 0; } }

/* ---------- A4 preview pages (paper-view) ---------- */
.pb-pages { --pb-zoom: 1; display: flex; flex-direction: column; align-items: center; gap: 16px;
    background: #e9e7f0; padding: 16px 8px 22px; border-radius: 14px; }
.pb-pages.is-building { visibility: hidden; }
.pb-sheet-wrap { width: calc(210mm * var(--pb-zoom)); height: calc(297mm * var(--pb-zoom)); }
.pb-sheet { width: 210mm; height: 297mm; background: #fff; box-sizing: border-box; padding: 15mm 15mm 8mm;
    display: flex; flex-direction: column; box-shadow: 0 5px 18px rgba(0,0,0,.16);
    transform: scale(var(--pb-zoom)); transform-origin: top left; }
.pb-sheet-body { flex: 1 1 auto; min-height: 0; }
.pb-sheet-body > .pb-paper { display: flow-root; }   /* margins andar hi rahein, naap sahi aaye */
.pb-sheet-foot { flex: 0 0 7mm; display: flex; align-items: flex-end; justify-content: center;
    font-family: Georgia, 'Noto Serif Devanagari', serif; font-size: 10.5px; color: #555; }
.pb-pagebar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--pb-muted); margin: 0 0 10px; }
.pb-pagebar b { color: var(--pb-ink); }
.pb-pagebar .pb-pagechip { background: var(--pb-soft); border-radius: 999px; padding: 4px 11px; font-weight: 600; }

/* PDF banate waqt: koi gap/shadow nahi, har sheet apne page par */
.pb-pages.is-pdf { background: #fff; padding: 0; gap: 0; border-radius: 0; width: 210mm; max-width: 210mm; align-items: flex-start; margin: 0; }
.pb-pages.is-pdf .pb-sheet { box-shadow: none; }
.pb-pages.is-pdf .pb-sheet-wrap + .pb-sheet-wrap { page-break-before: always; }

@media print {
    body.pb-has-pages > *:not(.pb-print-host) { display: none !important; }
    .pb-pages { position: static; background: #fff; padding: 0; gap: 0; border-radius: 0; --pb-zoom: 1 !important; }
    .pb-sheet-wrap { width: 210mm; height: 297mm; }
    .pb-sheet { box-shadow: none; page-break-after: always; transform: none; }
    .pb-sheet-wrap:last-child .pb-sheet { page-break-after: auto; }
    @page { size: A4; margin: 0; }
}

/* ---------- dialog, toast, busy ---------- */
.pb-dlg { position: fixed; inset: 0; z-index: 10000; background: rgba(17,20,39,.55); display: grid; place-items: center; padding: 18px; }
.pb-dlg-box { background: #fff; border-radius: 16px; padding: 22px; width: min(440px, 100%); box-shadow: 0 30px 70px rgba(0,0,0,.3); max-height: 88vh; overflow-y: auto; animation: pbPop .16s ease-out; }
.pb-dlg-box.is-wide { width: min(560px, 100%); }
@keyframes pbPop { from { transform: scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
.pb-dlg-box h4 { margin: 0 0 10px; font-size: 17px; }
.pb-dlg-body { font-size: 14px; line-height: 1.65; color: #3f3d56; }
.pb-dlg-body p { margin: 0 0 8px; }
.pb-dlg-row { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 16px; }
.pb-dlg-row .btn { padding: 9px 16px; font-size: 13.5px; }
.pb-chk-head { margin: 10px 0 6px; font-size: 13.5px; }
.pb-chk-list { max-height: 240px; overflow-y: auto; border: 1px solid var(--pb-line); border-radius: 10px; padding: 8px 10px; display: grid; gap: 4px; font-size: 13px; }
.pb-chk-list label, .pb-chk-head label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.pb-chk-list small { color: var(--pb-muted); }
.pb-chk-list input, .pb-chk-head input { accent-color: var(--pb-pri); margin-top: 3px; }

.pb-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 10001;
    background: var(--pb-ink); color: #fff; padding: 11px 18px; border-radius: 12px; font-size: 13.5px; font-weight: 600; box-shadow: 0 12px 30px rgba(0,0,0,.25);
    transition: opacity .2s, transform .2s; max-width: calc(100vw - 30px); text-align: center; }
.pb-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.pb-toast.is-ok { background: #14532d; }
.pb-toast.is-warn { background: #7c4a03; }
.pb-toast.is-err { background: var(--pb-red); }
@media (max-width: 1000px) { .pb-toast { bottom: 76px; } }

.pb-busy { position: fixed; inset: 0; z-index: 10002; background: rgba(255,255,255,.72); display: grid; place-items: center; }
.pb-busy-box { background: #fff; border: 1px solid var(--pb-line); border-radius: 14px; padding: 16px 22px; display: flex; gap: 12px; align-items: center; font-weight: 600; box-shadow: 0 16px 40px rgba(0,0,0,.14); }

/* ---------- "Naya paper" popup ---------- */
.pbn[hidden] { display: none !important; }
.pbn { position: fixed; inset: 0; z-index: 9995; display: grid; place-items: center; padding: 18px; }
.pbn-back { position: absolute; inset: 0; background: rgba(17,20,39,.55); }
.pbn-box { position: relative; width: min(480px, 100%); background: #fff; border-radius: 18px; padding: 28px 24px 22px; box-shadow: 0 30px 70px rgba(0,0,0,.3); overflow: hidden; animation: pbPop .18s ease-out; color: var(--pb-ink); }
.pbn-box h3 { margin: 0 0 8px; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.pbn-sub { font-size: 13.5px; color: var(--pb-muted); line-height: 1.6; margin: 0 0 16px; max-width: 36ch; }
.pbn-lbl { display: block; font-size: 12.5px; font-weight: 600; color: var(--pb-muted); margin-bottom: 6px; }
.pbn-box input[type=text] { width: 100%; box-sizing: border-box; padding: 12px 14px; font: inherit; font-size: 16px; border: 1.5px solid var(--pb-line); border-radius: 11px; color: var(--pb-ink); }
.pbn-box input[type=text]:focus { outline: none; border-color: var(--pb-pri); box-shadow: 0 0 0 3px rgba(79,70,229,.14); }
.pbn-err { color: var(--pb-red); font-size: 12.5px; font-weight: 600; margin-top: 6px; }
.pbn-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 18px; }
.pbn-chips button { border: 1.5px solid var(--pb-line); background: #fff; border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; color: var(--pb-ink); }
.pbn-chips button:hover { border-color: var(--pb-pri); color: var(--pb-pri); }
.pbn-go { width: 100%; padding: 13px !important; font-size: 15px !important; }
.pbn-x { position: absolute; top: 10px; right: 10px; z-index: 2; width: 34px; height: 34px; border-radius: 10px; border: 0; background: rgba(255,255,255,.9); font-size: 22px; cursor: pointer; color: var(--pb-muted); }
.pbn-note { font-size: 12px; color: var(--pb-muted); margin: 10px 0 0; text-align: center; }
.pbn-sheet { right: 58px; }

/* ---------- PYQ page: Generate strip ---------- */
/* PYQ Bank ka purana promo card (.pbc / .pbc-l / .pbc-ico / .pbc-t /
   .pbc-r) hata diya gaya — ab wahan sirf button hain. Naya, chhota
   layout is file ke sabse neeche "PYQ Bank ka top" wale hisse me hai. */

/* ---------- My Question Papers ---------- */
.mp-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.mp-head .section-title { margin-bottom: 0; }
.mp-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.mp-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.mp-tab { padding: 7px 15px; border-radius: 999px; border: 1.5px solid var(--pb-line); font-size: 13px; font-weight: 600; color: var(--pb-muted); background: #fff; }
.mp-tab:hover { color: var(--pb-ink); }
.mp-tab.is-on { background: var(--pb-ink); color: #fff; border-color: var(--pb-ink); }
.mp-search { display: flex; gap: 6px; }
.mp-search input { padding: 8px 12px; border: 1.5px solid var(--pb-line); border-radius: 10px; font: inherit; font-size: 13.5px; width: 220px; max-width: 60vw; }
.mp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.mp-card { background: #fff; border: 1px solid var(--pb-line); border-radius: 14px; padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 10px; position: relative; min-width: 0; }
.mp-card:hover { border-color: #cfcbe0; }
.mp-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: 12px; color: var(--pb-muted); }
.mp-status { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.mp-status.is-ready { background: var(--pb-green-bg); color: var(--pb-green); }
.mp-status.is-draft { background: var(--pb-amber-bg); color: var(--pb-amber); }
.mp-status.is-old { background: #f1f5f9; color: #475569; }
.mp-status.is-lock { background: #e2e8f0; color: #334155; }
.mp-title { font-size: 16px; font-weight: 700; line-height: 1.35; margin: 0; color: var(--pb-ink); overflow-wrap: anywhere; }
.mp-title a { color: inherit; }
.mp-sub { font-size: 12.5px; color: var(--pb-muted); }
.mp-strip { display: flex; height: 24px; border-radius: 4px; overflow: hidden; gap: 2px; font-family: var(--pb-serif); }
.mp-strip span { display: grid; place-items: center; font-size: 11px; font-weight: 700; min-width: 20px; color: #fff; background: #1e1b3a; }
.mp-strip span:nth-child(2) { background: #3a355f; }
.mp-strip span:nth-child(3) { background: #575083; }
.mp-strip span:nth-child(4) { background: #766ea8; }
.mp-strip span:nth-child(5) { background: #978fc7; }
.mp-strip span:nth-child(n+6) { background: #b8b2dc; color: #1e1b3a; }
.mp-prog { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--pb-muted); }
.mp-prog-bar { flex: 1; height: 6px; background: #eeeef4; border-radius: 3px; overflow: hidden; }
.mp-prog-bar span { display: block; height: 100%; background: #d97706; }
.mp-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.mp-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.mp-acts .btn { padding: 7px 14px; font-size: 12.5px; }
.mp-more { position: relative; }
.mp-more summary { list-style: none; cursor: pointer; width: 34px; height: 32px; border-radius: 9px; border: 1.5px solid var(--pb-line); display: grid; place-items: center; font-weight: 800; color: var(--pb-muted); }
.mp-more summary::-webkit-details-marker { display: none; }
.mp-more[open] summary { border-color: var(--pb-ink); color: var(--pb-ink); }
.mp-menu { position: absolute; right: 0; bottom: 38px; z-index: 20; background: #fff; border: 1px solid var(--pb-line); border-radius: 12px; box-shadow: 0 14px 34px rgba(0,0,0,.14); padding: 6px; min-width: 230px; }
.mp-menu button, .mp-menu a { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 9px 11px; border-radius: 8px; font: inherit; font-size: 13px; color: var(--pb-ink); cursor: pointer; }
.mp-menu button:hover, .mp-menu a:hover { background: var(--pb-soft); }
.mp-menu .is-danger { color: var(--pb-red); }
.mp-meta { font-size: 11.5px; color: var(--pb-muted); }
.mp-warn { font-size: 12px; font-weight: 700; color: var(--pb-red); background: var(--pb-red-bg); border-radius: 8px; padding: 5px 9px; line-height: 1.45; }
.mp-empty { background: #fff; border: 1.5px dashed var(--pb-line); border-radius: 16px; padding: 36px 24px; text-align: center; max-width: 620px; margin: 10px auto; }
.mp-empty h3 { margin: 0 0 8px; font-size: 20px; }
.mp-empty p { color: var(--pb-muted); font-size: 14px; margin: 0 auto 16px; max-width: 46ch; line-height: 1.6; }
.mp-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 18px 0 20px; text-align: left; }
.mp-steps div { background: var(--pb-soft); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; color: var(--pb-muted); }
.mp-steps b { display: block; color: var(--pb-ink); font-size: 13.5px; margin-bottom: 2px; }
@media (max-width: 560px) { .mp-steps { grid-template-columns: 1fr; } }

/* ---------- dashboard card ---------- */
.pbd-card { border: 2px solid var(--color-text, #1e1b3a) !important; }
.pbd-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 14px; }
.pbd-nums div { background: var(--color-bg, #f7f7fc); border-radius: 8px; padding: 8px 4px; text-align: center; font-size: 10.5px; color: var(--color-text-muted, #6b7280); }
.pbd-nums b { display: block; font-size: 17px; color: var(--color-text, #1e1b3a); }
.pbd-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.pbd-acts .btn { font-size: 12.5px; padding: 7px 14px; }

@media (prefers-reduced-motion: reduce) {
    .pb-over, .pb-mbox.is-shake, .pb-mbox.is-over .pb-mbox-msg, .pb-mb-m.is-over, .pb-dot.is-busy, .pb-skel,
    .pb-pk-panel, .pb-dlg-box, .pbn-box, .pb-spin { animation: none !important; }
    .pb-toast { transition: none; }
}

/* =====================================================================
   Picker ka filter — "floating sheet" (desktop aur mobile, dono par)
   ---------------------------------------------------------------------
   Pehle filter (scope + search + sort + 6 dropdown + toggles) drawer ke
   upar hi chipka rehta tha. Mobile par wo ~300px kha jaata tha (640px ki
   screen me questions ke liye sirf ~150px bachte the), aur DESKTOP par
   bhi ~240px — yaani 660px chaude panel me questions ka area aadha rah
   jaata tha.

   Ab filter neeche se uthne wali sheet me hai. Screen par sirf ek chhota
   floating button dikhta hai (jis par active filter ki ginti bhi aati
   hai), aur questions ko poora panel mil jaata hai.
   ===================================================================== */
.pb-pk-panel { position: relative; overflow: hidden; }

/* ---- filter sheet ---- */
.pb-pk-filters {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 14;
    max-height: 84%; overflow-y: auto; -webkit-overflow-scrolling: touch;
    border-bottom: 0; border-radius: 18px 18px 0 0;
    box-shadow: 0 -14px 40px rgba(17, 20, 39, .26);
    padding: 8px 18px 14px;
    transform: translateY(101%); visibility: hidden;
    transition: transform .24s ease, visibility .24s;
}
.pb-pk.is-f .pb-pk-filters { transform: none; visibility: visible; }
/* upar ek chhoti "ghaseetne wali" lakeer — sheet jaisa dikhe */
.pb-pk-filters::before {
    content: ''; display: block; width: 42px; height: 4px; border-radius: 99px;
    background: #d8d5e6; margin: 2px auto 8px; flex: 0 0 auto;
}

/* ---- sheet ke peeche ka parda ---- */
.pb-pk-fmask {
    display: block; position: absolute; inset: 0; z-index: 13;
    background: rgba(17, 20, 39, .38);
    opacity: 0; pointer-events: none; transition: opacity .2s;
}
.pb-pk.is-f .pb-pk-fmask { opacity: 1; pointer-events: auto; }

/* ---- floating filter button ---- */
.pb-pk-fab {
    display: inline-flex; align-items: center; gap: 7px;
    position: absolute; right: 16px; bottom: 82px; z-index: 12;
    border: 0; border-radius: 999px; padding: 11px 18px;
    background: var(--pb-ink); color: #fff; cursor: pointer;
    font: inherit; font-size: 13.5px; font-weight: 700;
    box-shadow: 0 8px 22px rgba(17, 20, 39, .32);
    transition: opacity .18s, transform .15s;
}
.pb-pk-fab:hover { transform: translateY(-1px); }
.pb-pk-fab[hidden] { display: none; }
.pb-pk.is-f .pb-pk-fab { opacity: 0; pointer-events: none; }
.pb-pk-fn {
    font-style: normal; background: var(--pb-pri); color: #fff; border-radius: 999px;
    min-width: 19px; height: 19px; padding: 0 5px; font-size: 11.5px; font-weight: 800;
    display: inline-grid; place-items: center;
}
.pb-pk-fn[hidden] { display: none; }

/* ---- sheet ke neeche chipka "Questions dekhein" ---- */
.pb-pk-fdone {
    display: block; position: sticky; bottom: -14px; z-index: 2;
    width: 100%; margin: 4px 0 0; padding: 12px; border: 0; border-radius: 11px;
    background: var(--pb-pri); color: #fff; font: inherit; font-size: 14px; font-weight: 700;
    cursor: pointer; box-shadow: 0 -10px 14px 6px #fff;
}

/* FAB last question ko na dhake */
.pb-pk-list { padding: 14px 18px 96px; }

@media (max-width: 760px) {
    .pb-pk-filters { padding: 8px 16px 14px; }
    .pb-pk-fab { right: 14px; bottom: 80px; }
    .pb-pk-list { padding: 12px 14px 92px; }
    /* head thoda chhota — upar ki jagah bhi questions ko mile */
    .pb-pk-head { padding: 11px 14px; }
    .pb-pk-title { font-size: 15.5px; line-height: 1.3; }
    .pb-pk-foot { padding: 10px 14px; }
}

/* =====================================================================
   PYQ Bank ka top — sirf button
   ---------------------------------------------------------------------
   Pehle yahan ek bada promo card (.pbc) tha: kaagaz ka icon, heading aur
   do line ka description. Basket wali patti alag se. Dono milkar search
   bar se pehle ~140px jagah kha lete the, har baar, har visit par.

   Ab sirf button hain — page ke title ke bilkul saath. Mobile par button
   chhota ho jaata hai. Basket ki patti bhi ek patli line reh gayi hai.
   ===================================================================== */
.pyq-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; }
.pyq-head .section-title { flex: 1 1 320px; min-width: 0; margin-bottom: 14px; }
.pyq-head-acts { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.pyq-head-acts .btn { white-space: nowrap; }

/* Basket ki patli patti */
.pbc-basket {
    display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap;
    width: fit-content; max-width: 100%;   /* poori chaudai na le — utni hi jitni text ki */
    border: 1.5px dashed var(--pb-line); background: #fcfcfe;
    border-radius: 999px; padding: 7px 16px; margin: 0 0 14px; font-size: 13px;
    color: var(--pb-muted);
}
.pbc-basket b { color: var(--pb-ink); }
.pbc-basket a { font-weight: 700; color: var(--pb-pri); text-decoration: none; }
.pbc-basket a:hover { text-decoration: underline; }
.pbc-basket .pbc-basket-x { color: var(--pb-muted); }

@media (max-width: 640px) {
    .pyq-head { align-items: flex-start; }
    .pyq-head .section-title { margin-bottom: 8px; }
    .pyq-head-acts { gap: 7px; margin-bottom: 14px; }
    .pyq-head-acts .btn { padding: 7px 14px; font-size: 12.5px; }
    .pbc-basket { border-radius: 12px; padding: 8px 13px; font-size: 12.5px; }
}

/* =====================================================================
   BILINGUAL PAPER — har question ke neeche Hindi anuvaad
   ---------------------------------------------------------------------
   Anuvaad wali line English wali se thodi halki aur alag font me hai,
   taaki ek nazar me pata chale ki wo anuvaad hai. Print / Word me font
   Devanagari wala hi rehta hai (paper-blueprint.php inline style deta
   hai), kyunki Word me class-based CSS har jagah bharosemand nahi.
   ===================================================================== */
.pb-qt-hi, .pb-ans-hi { color: #1f2937; }
.pb-qt-hi > p:first-child, .pb-ans-hi > p:first-child { margin-top: 0; }
.pb-qt-hi > p:last-child,  .pb-ans-hi > p:last-child  { margin-bottom: 0; }
.pb-opts-hi td { color: #1f2937; }

/* Step 1 ka tick */
.pb-check-bi.is-off { opacity: .55; cursor: not-allowed; }
.pb-check-bi.is-off input { cursor: not-allowed; }
.pb-hint-warn { color: #b45309; }

/* Auto-fill ke chapter list me subject ka naam (ek se zyada subject wale paper me) */
.pb-chk-sub { margin: 10px 0 4px; font-size: 13.5px; }
.pb-chk-sub:first-of-type { margin-top: 6px; }
.pb-chk-sub label { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.pb-chk-sub b { color: var(--pb-ink); }
.pb-chk-sub small { color: var(--pb-muted); font-weight: 600; }