/* ============ VARIABLES ============ */
        :root {
            --bg: #f0f2f5;
            --surf: #fff;
            --surf2: #f7f8fa;
            --surf3: #eef0f3;
            --brd: #dde1e7;
            --brd2: #c5cbd5;
            --tx: #1a1d23;
            --tx2: #5a6070;
            --tx3: #8a92a8;
            --pr: #2563eb;
            --pr-l: #eff6ff;
            --pr-d: #1d4ed8;
            --ac: #0891b2;
            --ok: #16a34a;
            --ok-l: #f0fdf4;
            --er: #dc2626;
            --er-l: #fef2f2;
            --wa: #d97706;
            --wa-l: #ffffeb;
            --pu: #7c3aed;
            --pu-l: #f5f3ff;
            --sh: 0 1px 3px rgba(0, 0, 0, .08);
            --sh-md: 0 4px 8px rgba(0, 0, 0, .08);
            --sh-lg: 0 10px 20px rgba(0, 0, 0, .1);
            --r: 7px;
            --rs: 4px;
            --rl: 12px;
            --hh: 52px;
            --lw: 295px;
        }

        [data-theme="dark"] {
            --bg: #0d0f14;
            --surf: #171923;
            --surf2: #1e2130;
            --surf3: #252a3a;
            --brd: #2a3048;
            --brd2: #3a4260;
            --tx: #e4e8f5;
            --tx2: #8a95b0;
            --tx3: #5a6280;
            --pr: #3b82f6;
            --pr-l: #1a2a4a;
            --pr-d: #2563eb;
            --ac: #22d3ee;
            --ok: #22c55e;
            --ok-l: #0d2a1a;
            --er: #f87171;
            --er-l: #2a1010;
            --wa: #fbbf24;
            --wa-l: #2a1e08;
            --pu: #a78bfa;
            --pu-l: #1e1530;
            --sh: 0 1px 3px rgba(0, 0, 0, .4);
            --sh-md: 0 4px 8px rgba(0, 0, 0, .4);
            --sh-lg: 0 10px 20px rgba(0, 0, 0, .5);
        }

        *,
        *:before,
        *:after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        html {
            font-size: 13px;
            -webkit-tap-highlight-color: transparent;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: var(--bg);
            color: var(--tx);
            height: 100vh;
            height: 100dvh;
            overflow: hidden;
            transition: background .2s, color .2s;
        }
        ::-webkit-scrollbar {
            width: 4px;
            height: 4px;
        }
        ::-webkit-scrollbar-track {
            background: transparent;
        }
        ::-webkit-scrollbar-thumb {
            background: var(--brd2);
            border-radius: 2px;
        }

        /* ============ HEADER ============ */
        .hdr {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: var(--hh);
            background: var(--surf);
            border-bottom: 1px solid var(--brd);
            display: flex;
            align-items: center;
            padding: 0 10px;
            gap: 6px;
            z-index: 900;
            box-shadow: var(--sh);
            flex-wrap: nowrap;
            overflow: hidden;
        }
        .logo {
            display: flex;
            align-items: center;
            gap: 6px;
            font-weight: 800;
            font-size: .9rem;
            color: var(--pr);
            flex-shrink: 0;
        }
        .logo-ic {
            width: 28px;
            height: 28px;
            background: var(--pr);
            border-radius: 6px;
            display: grid;
            place-items: center;
            color: #fff;
            font-size: .8rem;
            flex-shrink: 0;
        }
        .logo-sub {
            font-size: .48rem;
            color: var(--tx3);
            font-weight: 400;
            display: block;
            line-height: 1;
        }
        .hdr-sep {
            flex: 1;
            min-width: 4px;
        }
        .thm-bar {
            display: flex;
            background: var(--surf3); /* Makes the track distinct from the header */
            border: 1px solid var(--brd); /* Crisp outer edge */
            border-radius: 20px;
            padding: 3px; /* Tighter padding to hug the buttons */
            gap: 2px;
            flex-shrink: 0;
            box-shadow: inset 0 1px 4px rgba(0,0,0,0.06); /* Adds a 3D carved-out depth */
        }
        .thm-btn {
            border: none;
            background: transparent;
            border-radius: 16px;
            padding: 5px 12px;
            font-size: .68rem;
            font-weight: 600;
            cursor: pointer;
            color: var(--tx2); /* Darker text for inactive options so they are easier to read */
            transition: all .2s cubic-bezier(0.4, 0, 0.2, 1); /* Super smooth snapping animation */
            font-family: inherit;
            white-space: nowrap;
        }
        .thm-btn:hover {
            color: var(--tx);
        }
        .thm-btn.on {
            background: var(--surf); /* The active button pops out brightly */
            color: var(--pr);
            box-shadow: 0 2px 5px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.02); /* Premium floating drop-shadow */
        }


        /* ============ BUTTONS ============ */
        .btn {
            border: none;
            border-radius: var(--rs);
            padding: 5px 10px;
            font-size: .72rem;
            font-weight: 600;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            transition: all .15s;
            white-space: nowrap;
            font-family: inherit;
            line-height: 1.3;
            vertical-align: middle;
        }
        .btn:active {
            transform: scale(.96);
        }
        .bp { background: var(--pr); color: #fff; }
        .bp:hover { background: var(--pr-d); }
        .bs { background: var(--ok); color: #fff; }
        .bs:hover { filter: brightness(.9); }
        .bd { background: var(--er); color: #fff; }
        .bd:hover { filter: brightness(.9); }
        .bw { background: var(--wa); color: #fff; }
        .bw:hover { filter: brightness(.9); }
        .bpu { background: var(--pu); color: #fff; }
        .bpu:hover { filter: brightness(.9); }
        .bo { background: var(--surf); color: var(--tx); border: 1px solid var(--brd); box-shadow: var(--sh); }
        .bo:hover { border-color: var(--pr); color: var(--pr); background: var(--pr-l); }
        .bo.on { border-color: var(--pr); color: var(--pr); background: var(--pr-l); font-weight: 700; }
        .bg { background: none; color: var(--tx2); border: none; }
        .bg:hover { background: var(--surf2); color: var(--tx); }
        .bsm { padding: 3px 8px; font-size: .67rem; }
        .bxs { padding: 2px 6px; font-size: .62rem; border-radius: 3px; }
        .bblk { width: 100%; justify-content: center; }

        /* ============ LAYOUT ============ */
        .wrap {
            display: flex;
            height: calc(100vh - var(--hh));
            height: calc(100dvh - var(--hh));
            margin-top: var(--hh);
            overflow: hidden;
        }
        .hdr > button.btn.bo { display: none; }
        .lp {
            width: var(--lw);
            min-width: var(--lw);
            max-width: var(--lw);
            background: var(--surf);
            border-right: 1px solid var(--brd);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            transition: width .25s;
        }
        /* =======================================================
           MODERN HYBRID TAB BAR UI (PILL + ACCENT BOX)
        ======================================================= */
        .lp-tabs {
            display: flex !important;
            background: #f1f5f9 !important; /* Premium inset track gray */
            padding: 4px !important;
            border-radius: 8px !important;
            gap: 4px !important;
            border: 1px solid #e2e8f0 !important;
            margin-bottom: 10px !important;
        }

        .lp-tab {
            flex: 1 !important;
            display: flex !important;
            flex-direction: row !important; /* Keeps icon and text inline */
            align-items: center !important;
            justify-content: center !important;
            gap: 6px !important;
            padding: 4px 12px !important;
            font-size: 0.82rem !important;
            font-weight: 700 !important;
            color: #64748b !important; /* Distinct dark gray for unselected tabs */
            border: 1px solid transparent !important;
            background: transparent !important;
            border-radius: 6px !important;
            cursor: pointer !important;
            transition: all 0.15s ease !important;
        }

        /* Hover effect for unselected tabs */
        .lp-tab:hover {
            color: #1e293b !important;
            background: rgba(255, 255, 255, 0.4) !important;
        }

        /* Active Selected Tab State */
        .lp-tab.on {
            color: #2563eb !important; /* Brilliant royal blue text */
            background: #ffffff !important; /* Crisp white floating card background */
            border-color: #2563eb !important; /* High-contrast sharp accent border */
            box-shadow: 0 2px 4px rgba(37, 99, 235, 0.08) !important;
        }

        .lp-sc { flex: 1; overflow-y: auto; overflow-x: hidden; padding-bottom: 80px; }
        .rp { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); }
        .rp-prev { flex: 1; overflow: auto; padding: 14px; display: block; text-align: center; min-height: 120px; }
        .rp-hnd { height: 5px; background: var(--brd); cursor: ns-resize; flex-shrink: 0; position: relative; transition: background .2s; }
        .rp-hnd:hover { background: var(--pr); }
        .rp-hnd:after { content: ''; position: absolute; width: 32px; height: 2px; background: var(--tx3); border-radius: 1px; top: 1.5px; left: 50%; transform: translateX(-50%); }
        .rp-bank { flex: 1; min-height: 110px; overflow-y: auto; background: var(--surf); flex-shrink: 0; border-top: 1px solid var(--brd); }

        /* ============ FORM ============ */
        .lps { border-bottom: 1px solid var(--brd); padding: 10px; }
        .lps-t { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--pr); margin-bottom: 9px; display: flex; align-items: center; gap: 5px; background: var(--pr-l); padding: 6px 9px; border-radius: var(--rs); }
        .boxed-fg { background: var(--surf2); border-radius: 8px; padding: 10px 12px; margin-top: 10px; margin-bottom: 0; }
        .boxed-fg.tog-row { margin-top: 10px; padding: 4px 12px; }
        .fg { margin-bottom: 6px; }
        .fl { display: block; font-size: .64rem; font-weight: 700; color: var(--tx); margin-bottom: 3px; text-transform: uppercase; letter-spacing: .4px; }
        .fc { width: 100%; background: var(--surf2); border: 1px solid var(--brd); border-radius: var(--rs); color: var(--tx); padding: 5px 8px; font-size: .77rem; outline: none; transition: border-color .18s, box-shadow .18s; font-family: inherit; }
        .fc:focus { border-color: var(--pr); box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); background: var(--surf); }
        .fc::placeholder { color: var(--tx3); }
        select.fc { appearance: auto; -webkit-appearance: auto; cursor: pointer; }
        select.fc option { background: var(--surf); color: var(--tx); }
        textarea.fc { resize: vertical; min-height: 50px; line-height: 1.45; }
        .fr { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
        .fr3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; }
        .tog-row { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; cursor: pointer; font-size: .73rem; color: var(--tx2); user-select: none; }
        .tog { width: 29px; height: 15px; background: var(--brd2); border-radius: 8px; position: relative; transition: background .18s; flex-shrink: 0; cursor: pointer; }
        .tog.on { background: var(--pr); }
        .tog:after { content: ''; position: absolute; width: 9px; height: 9px; background: #fff; border-radius: 50%; top: 3px; left: 3px; transition: left .18s; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
        .tog.on:after { left: 17px; }

        /* ============ SEARCH ============ */
        .srch-wrap { padding: 8px 10px; border-bottom: 1px solid var(--brd); display: flex; gap: 5px; align-items: center; flex-shrink: 0; background: var(--surf); }
        .srch-inp { flex: 1; background: var(--surf2); border: 1px solid var(--brd); border-radius: var(--rs); color: var(--tx); padding: 5px 8px; font-size: .75rem; outline: none; font-family: inherit; }
        .srch-inp:focus { border-color: var(--pr); box-shadow: 0 0 0 2px rgba(37, 99, 235, .1); }
        .srch-cls { display: flex; gap: 3px; flex-wrap: wrap; padding: 5px 10px 0; flex-shrink: 0; }
        .srch-cl-btn { border: 1px solid var(--brd); background: var(--surf2); color: var(--tx2); border-radius: 11px; padding: 2px 8px; font-size: .62rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: all .15s; }
        .srch-cl-btn.on { background: var(--pr); color: #fff; border-color: var(--pr); }
        .srch-sticky { position: sticky; top: 0; z-index: 10; background: var(--surf); }

        /* ============ LP CHAPTERS ============ */
        .ch2-nd { border-bottom: 1px solid var(--brd); }
        .ch2-hd { display: flex; align-items: center; text-align: left; padding: 7px 10px; cursor: pointer; font-size: .73rem; font-weight: 600; color: var(--tx); background: var(--surf); user-select: none; transition: background .13s; min-height: 36px; gap: 5px; }
        .ch2-hd:hover { background: var(--surf2); }
        .ch2-hd .arr { margin-left: auto; font-size: .57rem; color: var(--tx3); transition: transform .18s; flex-shrink: 0; }
        .ch2-hd.on .arr { transform: rotate(90deg); }
        .ch2-bd { display: none; padding-left: 8px; background: var(--surf2); }
        .ch2-bd.on { display: block; }
        .ex2-it { display: flex; align-items: center; padding: 5px 8px; cursor: pointer; font-size: .68rem; color: var(--ac); font-weight: 600; transition: background .13s; border-left: 2px solid var(--ac); margin: 2px 0; border-radius: 3px; background: var(--pr-l); gap: 5px; }
        .ex2-it:hover { background: rgba(8, 145, 178, .12); }
        .ex2-it.on { background: rgba(8, 145, 178, .22); font-weight: 700; }

        /* ============ BANK ============ */
        .bk-hdr { padding: 7px 12px; border-bottom: 1px solid var(--brd); display: flex; flex-direction: column; align-items: stretch; gap: 5px; background: var(--surf); position: sticky; top: 0; z-index: 10; flex-shrink: 0; }
        .bk-hdr-t { font-size: .67rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--tx2); display: flex; align-items: center; gap: 5px; }
        .bk-empty { text-align: center; padding: 22px; color: var(--tx3); font-size: .77rem; }
        .ch-nd { border-bottom: 1px solid var(--brd); }
        .ch-hd { display: flex; align-items: center; padding: 7px 12px; cursor: pointer; font-size: .74rem; font-weight: 600; color: var(--tx); background: var(--surf); user-select: none; transition: background .13s; min-height: 38px; gap: 5px; }
        .ch-hd:hover { background: var(--surf2); }
        .ch-badge { font-size: .57rem; background: var(--pr-l); color: var(--pr); border: 1px solid rgba(37, 99, 235, .2); border-radius: 8px; padding: 1px 6px; font-weight: 600; flex-shrink: 0; }
        .ch-arr { font-size: .57rem; color: var(--tx3); transition: transform .18s; flex-shrink: 0; margin-left: auto; }
        .ch-hd.on .ch-arr { transform: rotate(90deg); }
        .ch-bd { display: none; background: var(--bg); }
        .ch-bd.on { display: block; }
        .ex-nd { border-top: 1px solid var(--brd); }
        .ex-hd { display: flex; align-items: center; padding: 5px 12px 5px 20px; cursor: pointer; font-size: .69rem; font-weight: 600; color: var(--ac); background: var(--surf2); user-select: none; transition: background .13s; min-height: 32px; gap: 5px; }
        .ex-hd:hover { background: var(--brd); }
        .ex-hd.on .ch-arr { transform: rotate(90deg); }
        .ex-bd { display: none; }
        .ex-bd.on { display: block; }

        /* ============ Q ROWS ============ */
        .q-row { display: flex; align-items: stretch; border-top: 1px solid var(--brd); background: var(--surf); transition: background .13s; min-height: 36px; }
        .q-row:hover { background: var(--pr-l); }
        .q-row.sel { background: var(--pr-l); }
        .q-on { width: 32px; min-width: 32px; display: flex; align-items: center; justify-content: center; font-size: .59rem; color: var(--tx3); border-right: 1px solid var(--brd); font-weight: 600; flex-shrink: 0; padding: 5px 0; }
        .q-row.sel .q-on { color: var(--pr); }
        .q-tx { flex: 1; padding: 6px 8px; font-size: .69rem; color: var(--tx2); line-height: 1.4; cursor: pointer; overflow: hidden; }
        .q-row.sel .q-tx { color: var(--tx); }
        .q-mt { display: flex; align-items: center; gap: 3px; padding: 6px 6px 6px 0; flex-shrink: 0; }
        .q-add-btn { border: none; background: var(--pr); color: #fff; border-radius: 3px; padding: 2px 7px; font-size: .64rem; font-weight: 700; cursor: pointer; font-family: inherit; white-space: nowrap; transition: background .13s; }
        .q-add-btn:hover { background: var(--pr-d); }
        .q-add-btn.rm { background: var(--er); }
        .q-sub-row { display: flex; align-items: stretch; border-top: 1px solid var(--brd); background: var(--surf3); min-height: 32px; padding-left: 8px; }
        .q-sub-row.sel { background: var(--pr-l); }

        /* ============ TOOLBAR ============ */
        .ptb { background: var(--surf); border-bottom: 1px solid var(--brd); padding: 5px 10px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; flex-shrink: 0; }
        .ptb-right { display: flex; align-items: center; gap: 4px; margin-left: auto; }
        .zm-wrap { display: flex; align-items: center; gap: 4px; }
        .zm-wrap span { font-size: .64rem; color: var(--tx3); }
        .zm-wrap input[type=range] { width: 150px; accent-color: var(--pr); cursor: pointer; }
        .zm-inp { width: 42px; background: var(--surf2); border: 1px solid var(--brd); border-radius: var(--rs); color: var(--tx); padding: 3px 4px; font-size: .68rem; font-family: inherit; text-align: center; outline: none; }
        .zm-inp:focus { border-color: var(--pr); }

        /* ============ EXAM PAPER ============ */
        .paper-zw { display: inline-block; transform-origin: top center; transition: transform .18s; margin-bottom: 20px; }
        .exam-paper { width: 210mm; min-height: 10mm; background: #fff; color: #111; box-shadow: 0 2px 20px rgba(0, 0, 0, .15), 0 0 0 1px rgba(0, 0, 0, .05); border-radius: 1px; position: relative; text-align: left; }
        .paper-body { padding: 12mm 16mm 14mm; color: #111; font-family: inherit; font-size: 10pt; line-height: 1.5; }

        /* ============ PAPER HEADER ============ */
        .ph { border-bottom: 2.5px double #000; padding-bottom: 8px; margin-bottom: 8px; text-align: center; }
        .ph-lr { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 5px; }
        .ph-logo { width: 50px; height: 50px; border: 1.5px solid #999; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .42rem; color: #888; cursor: pointer; overflow: hidden; flex-shrink: 0; background: #f8f8f8; }
        .ph-logo img { width: 100%; height: 100%; object-fit: cover; }
        .ph-logo:hover { border-color: #555; }
        .ph-mid { flex: 1; }
        .ph-sn { font-size: 1.3em; font-weight: 900; text-transform: uppercase; letter-spacing: .4px; line-height: 1.2; color: #000; display: block; }
        .ph-sa { font-size: 0.75em; color: #444; margin-top: 2px; display: block; }
        .ph-et { font-size: 1em; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; margin: 6px 0 4px; display: block; }
        .ph-subj { font-size: 0.95em; font-weight: 700; letter-spacing: .8px; margin: 3px 0; color: #000; display: block; }
        .ph-ir { display: flex; justify-content: space-between; align-items: center; font-size: 0.95em; font-weight: 600; margin-top: 6px; padding: 0 4px; color: #000; }
        #phCI { font-size: 0.95em; font-weight: 700; }
        #phTI, #phMI { font-size: 0.85em; }
        .ph-rr { display: flex; justify-content: space-between; font-size: 0.75em; color: #000; font-weight: 600; margin-top: 3px; padding: 0 2px; }                

        /* ============ INSTRUCTIONS ============ */
        .ib { border: 1px solid #000; padding: 5px 9px; margin: 6px 0; font-size: 0.7em; font-family: inherit; }
        .ib strong { font-size: 1.07em; }
        .ib ol { padding-left: 15px; margin-top: 2px; line-height: 1.6; }

        /* ============ SECTION DIVIDER ============ */
        .p-sec { background: #111 !important; color: #fff !important; text-align: center; font-weight: 700; font-size: 0.85em; padding: 4px 8px; margin: 8px 0 5px; letter-spacing: 1px; display: flex; align-items: center; justify-content: center; gap: 6px; -webkit-print-color-adjust: exact; print-color-adjust: exact; page-break-inside: auto; }

        /* ============ PAPER Q ============ */
        .pq { margin-bottom: 7px; position: relative; page-break-inside: auto; font-family: inherit; }
        .pq:hover { background: rgba(37, 99, 235, .02); border-radius: 2px; }
        .pq-row { display: flex; align-items: flex-start; gap: 5px; }
        .pq-num { font-weight: 700; flex-shrink: 0; min-width: 22px; font-size: inherit; color: #000; }
        .pq-cont { flex: 1; color: #000; font-size: inherit; line-height: 1.5; font-family: inherit; }
        .pq-mt { flex-shrink: 0; font-weight: 700; font-size: 0.85em; white-space: nowrap; color: #000; padding-left: 6px; align-self: flex-start; margin-top: 2px; font-family: inherit; }

        /* ============ BILINGUAL DISPLAY (Hindi above English, aligned) ============ */
        .q-hi { font-size: 1em; line-height: 1.6; color: inherit; outline: none; overflow: hidden; }
        .q-en { font-size: 0.93em; line-height: 1.5; color: inherit; opacity: .82; margin-top: 3px; outline: none; overflow: hidden; }
        .sq-item .q-hi, .sq-item .q-en { display: block; }
        .sq-item .q-en { margin-top: 2px; }

        /* ============ SUB QUESTIONS ============ */
        .pq-subs { margin: 4px 0 4px 18px; }
        .sq-item { display: flex; align-items: flex-start; gap: 4px; margin-bottom: 3px; font-size: inherit; color: #000; font-family: inherit; min-width: 0; }
        .sq-item img, .sq-item svg, .q-img-host { max-width: 100%; height: auto; }
        .sub-col1 { display: flex; flex-direction: column; }
        .sub-col2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px 16px; }
        .sub-col3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px 10px; }
        .sub-col4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px 8px; }


        /* ============ COL BUTTONS ============ */
        .col-btns { display: inline-flex; gap: 2px; margin-bottom: 4px; align-items: center; }
        .col-btn { border: 1px solid #bbb; background: #f0f0f0; color: #444; border-radius: 2px; padding: 1px 7px; font-size: 6.5pt; cursor: pointer; font-family: inherit; transition: all .13s; line-height: 1.4; }
        .col-btn.on { background: #111; color: #fff; border-color: #111; }
        .add-subq-btn { display: inline-block; border: 1px dashed #aaa; background: none; color: #888; border-radius: 3px; padding: 2px 8px; font-size: .58rem; cursor: pointer; margin-top: 4px; font-family: inherit; transition: all .13s; }
        .add-subq-btn:hover { border-color: var(--pr); color: var(--pr); }
        .add-or-btn { display: inline-block; border: 1px dashed #aaa; background: none; color: #888; border-radius: 3px; padding: 2px 8px; font-size: .58rem; cursor: pointer; margin-top: 4px; font-family: inherit; transition: all .13s; }
        .add-or-btn:hover { border-color: var(--wa); color: var(--wa); }
        .add-or-btn.or-active { animation: orBlink .85s ease-in-out infinite; border-style: dashed; }
        @keyframes orBlink { 0%,100% { color: var(--wa); border-color: var(--wa); background: none; box-shadow: 0 0 0 2px rgba(217,119,6,.15); } 50% { color: #b45309; border-color: #f59e0b; background: #fef3c7; box-shadow: 0 0 0 4px rgba(217,119,6,.2); } }
        .p-or { text-align: center; font-size: 0.85em; font-weight: 700 !important; color: #555; margin: 5px 0 4px; letter-spacing: 1px; font-family: inherit; }
        .pq-or { margin-bottom: 7px; position: relative; page-break-inside: auto; font-family: inherit; }
        .pq-or:hover { background: rgba(37,99,235,.02); border-radius: 2px; }
        .pq-or:hover .pq-ctrl { display: flex; }
        .sq-rm { background: none; border: none; color: var(--er); cursor: pointer; font-size: .65rem; padding: 0 2px; flex-shrink: 0; line-height: 1; opacity: .6; transition: opacity .13s; }
        .sq-rm:hover { opacity: 1; }

        /* ===== Question images (paper canvas) ===== */
        .q-img-host { position: relative; display: block; width: 100%; }
        .q-img-wrap { position: absolute; z-index: 5; cursor: pointer; user-select: none; touch-action: none; }
        .q-img-wrap img { display: block; width: 100%; height: 100%; object-fit: cover; border: 1px solid #999; border-radius: 2px; pointer-events: none; }
        .q-img-wrap.selected { outline: 2px solid var(--pr); outline-offset: 2px; }
        .q-drag-h { display: none; position: absolute; left: -30px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; background: var(--surf); border: 1px solid var(--pr); border-radius: 6px; color: var(--pr); align-items: center; justify-content: center; cursor: grab; box-shadow: 0 1px 3px rgba(0,0,0,.2); touch-action: none; }
        .q-img-wrap.selected .q-drag-h { display: flex; }
        .q-resize-h { display: none; position: absolute; right: -7px; bottom: -7px; width: 16px; height: 16px; background: var(--pr); border: 2px solid #fff; border-radius: 50%; cursor: nwse-resize; box-shadow: 0 0 0 1px var(--pr); touch-action: none; }
        .q-img-wrap.selected .q-resize-h { display: block; }
        .q-rm-img { display: none; position: absolute; top: -10px; right: -10px; width: 20px; height: 20px; border-radius: 50%; background: #fdeceb; color: #a33; border: 1px solid #e2a29c; font-size: 11px; line-height: 1; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
        .q-img-wrap.selected .q-rm-img { display: flex; }

        /* ===== Question images (Write Q modal upload strip) ===== */
        .img-strip { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
        .add-img-btn { cursor: pointer; background: var(--pr-lt, rgba(37,99,235,.08)); color: var(--pr); border: 1px solid var(--pr); border-radius: 6px; font-size: .65rem; padding: 5px 10px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-family: inherit; }
        .add-img-btn.compact { width: 28px; height: 28px; padding: 0; justify-content: center; font-size: 1rem; font-weight: 700; }
        .thumb-chip { position: relative; display: inline-flex; width: 28px; height: 28px; }
        .thumb-chip img { width: 28px; height: 28px; object-fit: cover; border-radius: 5px; border: 1px solid var(--brd); }
        .thumb-x { position: absolute; top: -6px; right: -6px; width: 14px; height: 14px; border-radius: 50%; background: #fdeceb; color: #a33; border: 1px solid #e2a29c; font-size: 8px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }

        /* ============ ANSWER SPACE ============ */
        .ans-sp { margin: 4px 0 4px 18px; }
        .ans-line { border-bottom: 1px solid #ccc; min-height: 18px; margin-bottom: 1px; }
        .ans-blank { min-height: 18px; margin-bottom: 1px; }

        /* ============ HOVER CONTROLS ============ */
        .pq-ctrl { display: none; position: absolute; right: -45px; top: 0; flex-direction: column; gap: 5px; z-index: 50; padding-left: 30px; }
        .pq-ctrl .btn { font-size: .95rem; padding: 6px 10px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
        .pq:hover .pq-ctrl { display: flex; }
        .dh, .dh-or { cursor: grab; color: var(--tx3); font-size: .67rem; padding: 0 3px; user-select: none; flex-shrink: 0; opacity: .3; transition: opacity .13s; }
        .pq:hover .dh, .pq:hover .dh-or { opacity: .65; }
        .dh:hover, .dh-or:hover { opacity: 1; color: var(--pr); }
        /* A block (a main question plus any OR divider/siblings attached to
           it) renders as one wrapper so the whole thing visually moves
           together when dragged — exactly like a question with sub-parts
           already does, since those live inside one element too. Plain,
           unstyled containers: they must not add any spacing of their own. */
        .qblock { display: block; }
        .qblock-or-list { display: block; }
        .sortable-ghost { opacity: .25; background: rgba(37, 99, 235, .06) !important; }
        .no-qs { text-align: center; padding: 16px; color: #aaa; font-style: italic; font-size: 8.5pt; }
        #welcomeMsg { pointer-events: none; }

        /* ============ MODAL ============ */
        .mb { position: fixed; inset: 0; background: rgba(0, 0, 0, .52); z-index: 1000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .2s; backdrop-filter: blur(1.5px); }
        .mb.on { opacity: 1; pointer-events: all; }
        .mbox { background: var(--surf); border: 1px solid var(--brd); border-radius: var(--rl); padding: 17px; width: 93%; max-width: 70vw; max-height: 88vh; overflow-y: auto; box-shadow: var(--sh-lg); transform: translateY(8px); transition: transform .2s; }
        .mb.on .mbox { transform: translateY(0); }
        .mbox.wide { max-width: 80vw; }
        .mt { font-size: .88rem; font-weight: 700; color: var(--tx); margin-bottom: 11px; display: flex; align-items: center; justify-content: space-between; gap: 7px; }
        .mt-x { background: none; border: none; cursor: pointer; color: var(--tx3); font-size: 1rem; padding: 2px 5px; border-radius: 3px; transition: color .13s; font-family: inherit; }
        .mt-x:hover { color: var(--er); }

        /* ============ PAPER HISTORY (v7.3) ============ */
        .hist-topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--brd); }
        .hist-selall { display: flex; align-items: center; gap: 6px; font-size: .7rem; font-weight: 700; color: var(--tx2); cursor: pointer; }
        .hist-selall input { width: 15px; height: 15px; accent-color: var(--pr); cursor: pointer; }
        .hist-spacer { flex: 1 1 auto; min-width: 4px; }
        .hist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; }
        .hist-card { border: 1px solid var(--brd); border-radius: var(--r); background: var(--surf2); padding: 10px; transition: border-color .15s, background .15s; }
        .hist-card.sel { border-color: var(--pr); background: var(--pr-l); }
        .hist-card-top { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 2px; }
        .hist-card-top input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--pr); cursor: pointer; margin-top: 2px; flex-shrink: 0; }
        .hist-card-title { flex: 1; min-width: 0; }
        .hist-card-cls { font-size: .76rem; font-weight: 700; color: var(--tx); line-height: 1.35; }
        .hist-card-sub { font-size: .64rem; color: var(--tx3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .hist-badge-group { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
        .hist-badge { display: inline-block; font-size: .56rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 2px 7px; border-radius: 9px; flex-shrink: 0; }
        .hist-badge.saved { background: var(--ok-l); color: var(--ok); }
        .hist-badge.draft { background: var(--wa-l); color: var(--wa); }
        .hist-badge.imported { background: var(--pu-l); color: var(--pu); }
        .hist-card-meta { display: flex; flex-wrap: wrap; gap: 4px 9px; font-size: .63rem; color: var(--tx3); margin: 7px 0 10px; }
        .hist-card-btns { display: flex; gap: 5px; }
        .hist-card-btns .btn { flex: 1; padding: 5px 6px; font-size: .66rem; justify-content: center; }
        .hist-empty { text-align: center; padding: 36px 16px; color: var(--tx3); }
        .hist-empty-ic { font-size: 2.1rem; margin-bottom: 8px; opacity: .6; }
        .hist-empty-t { font-size: .8rem; font-weight: 700; color: var(--tx2); margin-bottom: 3px; }
        .hist-empty-s { font-size: .68rem; line-height: 1.5; max-width: 240px; margin: 0 auto; }
        .hist-count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; background: var(--pr); color: #fff; font-size: .56rem; font-weight: 700; margin-left: 5px; }
        @media(max-width:640px) {
            .mbox { width: 90vw !important; max-width: 90vw !important; }
            #historyModal .mbox.wide { padding: 12px; }
            .hist-topbar { flex-wrap: nowrap; overflow-x: auto; gap: 5px; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
            .hist-topbar::-webkit-scrollbar { display: none; }
            .hist-selall { flex: 0 0 auto; font-size: .6rem; gap: 4px; white-space: nowrap; }
            .hist-selall input { width: 13px; height: 13px; }
            .hist-spacer { display: none; }
            .hist-topbar .btn { flex: 1 1 0; min-width: 0; padding: 5px 5px; font-size: .58rem; gap: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
            .hist-grid { grid-template-columns: 1fr; }
        }
        .qttab-bar { display: flex; gap: 3px; flex-wrap: wrap; margin-bottom: 9px; }
        .qttab { border: 1px solid var(--brd); background: var(--surf2); color: var(--tx2); border-radius: var(--rs); padding: 3px 8px; font-size: .67rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: all .15s; }
        .qttab.on, .qttab:hover { background: var(--pr); color: #fff; border-color: var(--pr); }
        .mathbar { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; background: var(--surf2); border: 1px solid var(--brd); border-radius: var(--rs); padding: 6px 8px; margin-bottom: 9px; }
        .mathbar-lbl { font-size: .62rem; color: var(--tx3); font-weight: 700; margin-right: 2px; flex-shrink: 0; }
        .mathbar button { border: 1px solid var(--brd); background: var(--surf); color: var(--tx2); border-radius: 4px; padding: 3px 8px; font-size: .72rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: all .12s; min-width: 26px; }
        .mathbar button:hover { background: var(--pr); color: #fff; border-color: var(--pr); }
        .ag-ch-list { max-height: 180px; overflow-y: auto; border: 1px solid var(--brd); border-radius: var(--rs); padding: 4px; }
        .ag-ch-it { display: flex; align-items: center; gap: 6px; padding: 3px 5px; border-radius: 3px; cursor: pointer; font-size: .73rem; transition: background .13s; }
        .ag-ch-it:hover { background: var(--surf2); }
        .ag-ch-it input { accent-color: var(--pr); cursor: pointer; width: 12px; height: 12px; }

        /* ============ TOAST ============ */
        .toast { position: fixed; bottom: 16px; right: 13px; background: var(--surf); border: 1px solid var(--brd); border-left: 3px solid var(--pr); border-radius: var(--r); padding: 7px 12px; font-size: .73rem; color: var(--tx); z-index: 9999; box-shadow: var(--sh-lg); animation: tin .22s ease; max-width: 250px; pointer-events: none; }
        .toast.s { border-left-color: var(--ok); }
        .toast.w { border-left-color: var(--wa); }
        .toast.e { border-left-color: var(--er); }
        .toast.out { animation: tout .2s ease forwards; }
        @keyframes tin { from { transform: translateX(108%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
        @keyframes tout { to { transform: translateX(108%); opacity: 0; } }

        /* ============ SECTION THEMES ============ */
        .sec-theme-dark .p-sec { background: #111 !important; color: #fff !important; border: 1px solid #111 !important; }
        .sec-theme-light .p-sec { background: #f3f4f6 !important; color: #111 !important; border: 1px solid #d1d5db !important; }
        .sec-theme-outline .p-sec { background: #fff !important; color: #000 !important; border: 2px solid #000 !important; }

        /* ============ PRINT STYLES ============ */
        @media print {
            /* 1. UNLOCK ALL MASTER CONTAINERS (Fixes the text slicing bug) */
            html, body, .wrap, .rp, .rp-prev, .exam-paper, .paper-body { 
                background: white !important; color: black !important; 
                height: auto !important; overflow: visible !important; 
                display: block !important; margin: 0 !important; padding: 0 !important;
            }
            /* Custom border-text must stay dark/visible on the printed white page,
               even if the dark-mode override made it near-white for screen viewing */
            .border-text-overlay div { color: rgba(0, 0, 0, 0.22) !important; }
            .paper-zw { 
                display: block !important; /* Forces Chrome to paginate text normally */
                transform: none !important; margin: 0 !important; width: 100% !important; 
            }
            .exam-paper { box-shadow: none !important; border: none !important; }
            .paper-body { padding: 10mm 14mm !important; }

                        /* 2. HIDE UI CONTROLS & FORMAT LOGOS */
            body > *:not(.wrap) { display: none !important; }
            .lp, .ptb, .rp-hnd, .rp-bank, .hdr, .srch-wrap, .toast, .pq-ctrl, .dh, .dh-or, .col-btns, .add-subq-btn, .add-or-btn, .sq-rm, #welcomeMsg, .no-qs, .p-sec button, .q-drag-h, .q-resize-h, .q-rm-img { display: none !important; }
            .q-img-wrap { outline: none !important; }
            .ph-logo { border: none !important; background: transparent !important; color: transparent !important; }
      
            /* 3. NATURAL FLOW QUESTION LAYOUT — restored from the older, reliable
               version. Question number/text/marks stay in normal flex flow (no
               absolute positioning), so text wraps and breaks across pages the
               same predictable way the browser already handles for any flex
               row — this is what avoids text getting cut at page boundaries. */
            .pq, .pq-or { page-break-inside: auto !important; break-inside: auto !important; margin-bottom: 7px !important; background: transparent !important; }
            .pq-row { page-break-inside: auto !important; break-inside: auto !important; }
            .pq:hover { background: transparent !important; }

            /* 4. PURE BLOCK SUB-QUESTIONS */
            .sq-item { display: block !important; position: relative !important; padding-left: 32px !important; margin-bottom: 4px !important; page-break-inside: auto !important; break-inside: auto !important; }
            .sq-lbl { display: block !important; position: absolute !important; left: 0 !important; top: 0 !important; width: 28px !important; }
            .sq-txt { display: block !important; width: 100% !important; page-break-inside: auto !important; break-inside: auto !important; }
            .sub-col2 { display: block !important; column-count: 2 !important; column-gap: 16px !important; }
            .sub-col3 { display: block !important; column-count: 3 !important; column-gap: 10px !important; }
            .sub-col4 { display: block !important; column-count: 4 !important; column-gap: 8px !important; }

            /* 5. PAPER HEADERS & SECTIONS */
            .p-or { display: block !important; text-align: center; font-size: 8.5pt; font-weight: 700; color: #333; margin: 5px 0; letter-spacing: 1px; }
            .ph-sn, .ph-sa, .ph-et, .ph-subj, .ph { display: block !important; }
            .ph-ir, .ph-lr, .ph-rr { display: flex !important; flex-direction: row !important; justify-content: space-between !important; width: 100% !important; }
            .ph-rr[style*="display: none"], #phRoll[style*="display: none"], #phSet[style*="display: none"], #instrBox[style*="display: none"] { display: none !important; }
            #phTI { text-align: left !important; flex: 1; }
            #phCI { text-align: center !important; flex: 1; }
            #phMI { text-align: right !important; flex: 1; }
            #phSet { text-align: left !important; }
            #phRoll { text-align: right !important; }
            .ib { display: block !important; }


            /* 6. PAGE SETTINGS */
            @page { margin-top: 15mm !important; margin-bottom: 15mm !important; }
            * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
            #watermarkEl { position: fixed !important; top: 50% !important; left: 50% !important; }
        }

        .hidden { display: none !important; }

        /* ============ Google Sheet CONFIG ============ */
        .at-cfg { background: var(--surf2); border: 1px solid var(--brd); border-left: 3px solid #f03e3e; border-radius: var(--rs); padding: 8px 10px; margin-top: 4px; }
        .at-cfg.connected { border-left-color: var(--ok); }
        .at-status { display: flex; align-items: center; gap: 5px; font-size: .62rem; font-weight: 700; margin-bottom: 6px; }
        .at-dot { width: 7px; height: 7px; border-radius: 50%; background: #f03e3e; flex-shrink: 0; }
        .at-cfg.connected .at-dot { background: var(--ok); }
        .at-toggle { font-size: .6rem; color: var(--pr); cursor: pointer; text-decoration: underline; margin-left: auto; }
        .at-fields { display: none; }
        .at-fields.open { display: block; }

        /* ============ HTML/SVG IN QUESTIONS ============ */
        .pq-cont svg { max-width: 100%; height: auto; display: block; margin: 4px 0; }
        .pq-cont table { border-collapse: collapse; font-size: inherit; margin: 4px 0; }
        .pq-cont table td, .pq-cont table th { border: 1px solid #999; padding: 2px 6px; }
        .pq-cont img { max-width: 100%; height: auto; display: block; margin: 4px 0; }
        .q-tx svg, .q-tx table, .q-tx img { max-width: 100%; }
        .sq-txt svg, .sq-txt table, .sq-txt img { max-width: 100%; }

        /* Loading state */
        .bk-loading { text-align: center; padding: 22px; color: var(--tx3); font-size: .77rem; }
        .bk-loading::after { content: ''; display: inline-block; width: 14px; height: 14px; border: 2px solid var(--brd2); border-top-color: var(--pr); border-radius: 50%; animation: spin .7s linear infinite; margin-left: 7px; vertical-align: middle; }
        @keyframes spin { to { transform: rotate(360deg); } }

@media(max-width:640px) {
    :root { --lw: 262px; --hh: 88px; }

    .hdr {
        padding: 4px 8px;
        flex-wrap: wrap;
        align-items: center;
        gap: 2px;
        overflow: hidden;
        height: var(--hh);
    }

    /* ROW 1 */
    .logo { position: static; flex: 0 0 auto; }

    .hdr > a {
        flex: 1 1 auto;
        text-align: center;
        font-size: 11px !important;
        margin-right: 0 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .hdr > button:last-child {
        position: static;
        flex: 0 0 auto;
        z-index: 10;
    }
    .hdr > button.btn.bo { display: inline-flex; }

    /* ROW BREAK */
    .hdr-sep {
        display: block !important;
        flex: 0 0 100%;
        height: 0;
    }

    /* ROW 2 - shrink everything to fit in one line */
    .thm-bar {
        flex: 0 0 auto;
        padding: 1px;
        gap: 0px;
    }
    .thm-bar .thm-btn { font-size: 8px; padding: 2px 4px; }
    .hdr > .thm-btn   { font-size: 8px; padding: 2px 4px; margin-left: 2px !important; }
    .hdr > .btn.bpu,
    .hdr > .btn.bs,
    .hdr > .btn.bp    { font-size: 8px; padding: 2px 5px; gap: 2px; }

    .lp { position: fixed; left: -270px; top: var(--hh); height: calc(100vh - var(--hh)); height: calc(100dvh - var(--hh)); z-index: 500; transition: left .25s; width: 270px !important; min-width: 270px !important; max-width: 270px !important; }
    .lp.open { left: 0; box-shadow: var(--sh-lg); }
}

        /* ============ DARK MODE — LIVE PAPER CANVAS ONLY ============ */
        @media screen {
            [data-theme="dark"] .exam-paper {
                background: #1a1d27;
                color: #e4e8f5;
                box-shadow: 0 2px 24px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06);
            }
            [data-theme="dark"] .paper-body { color: #e4e8f5; }
            [data-theme="dark"] .pq-num,
            [data-theme="dark"] .pq-cont,
            [data-theme="dark"] .pq-mt,
            [data-theme="dark"] .sq-item,
            [data-theme="dark"] .ph-sn,
            [data-theme="dark"] .ph-sa,
            [data-theme="dark"] .ph-subj,
            [data-theme="dark"] .ph-ir,
            [data-theme="dark"] .ph-rr { color: #e4e8f5; }
            [data-theme="dark"] .ph { border-bottom-color: #3a4260; }
            [data-theme="dark"] .ib { border-color: #3a4260; }
            [data-theme="dark"] .ans-line { border-bottom-color: #3a4260; }
            [data-theme="dark"] .p-or { color: #9aa2c0; }
            [data-theme="dark"] .col-btn { border-color: #3a4260; background: #252a3a; color: #c4cae0; }
            [data-theme="dark"] .col-btn.on { background: var(--pr); color: #fff; border-color: var(--pr); }
            [data-theme="dark"] .add-subq-btn,
            [data-theme="dark"] .add-or-btn { border-color: #3a4260; color: #9aa2c0; }
            [data-theme="dark"] .pq-cont svg, [data-theme="dark"] .q-tx svg, [data-theme="dark"] .sq-txt svg { filter: invert(0.9) hue-rotate(180deg); }
            [data-theme="dark"] .pq-cont table td, [data-theme="dark"] .pq-cont table th, [data-theme="dark"] .q-tx table td, [data-theme="dark"] .q-tx table th { border-color: #5a6280; }
            [data-theme="dark"] #watermarkEl { filter: invert(0.9); }
            [data-theme="dark"] .border-text-overlay div { color: rgba(228, 232, 245, 0.15) !important; }
            [data-theme="dark"] #paperBody { border-color: #5a6280 !important; outline-color: #5a6280 !important; }
            
        }