/* UPLOAD TO: public_html/mcq/assets/ct-student.css  (07-10-2026 student pages: white by default, dark on toggle) */
:root{
  --navy:#0b182e; --navy-2:#16305c; --navy-3:#24467d; --brandtext:#16305c;
  --gold:#e0a33b; --gold-2:#e8ae4b; --gold-ink:#8a5a06; --gold-pale:#fdf4e3; --gold-line:#f0dcb4; --gold-deep:#7a4f05;
  --ink:#0d1f3c; --muted:#4f5d75; --faint:#8494ab;
  --line:#e2e8f2; --line-2:#eef2f8; --surface:#f5f8fc; --paper:#fff; --paper-2:#fbfcfe;
  --ok:#0b6b3a; --ok-bg:#e8f7ee; --ok-line:#b9e5c9; --ok-solid:#16a34a;
  --warn:#8a4b04; --warn-bg:#fff4db; --warn-line:#f5d99a;
  --bad:#a3201a; --bad-bg:#fdecea; --bad-line:#f5c2bd; --bad-solid:#dc2626;
  --phy:#1d4ed8; --phy-bg:#eef3ff; --che:#047857; --che-bg:#e9f8f2; --mat:#6d28d9; --mat-bg:#f3eefe; --gen:#16305c; --gen-bg:#eef2f8;
  --lift:0 1px 2px rgba(11,24,46,.05), 0 12px 32px -16px rgba(11,24,46,.28);
  --lift-2:0 2px 4px rgba(11,24,46,.06), 0 24px 50px -24px rgba(11,24,46,.40);
  --head-bg:rgba(255,255,255,.86);
  --display:"Bricolage Grotesque","Trebuchet MS",sans-serif;
  --body:"Mukta","Segoe UI",system-ui,sans-serif;
  --r-sm:10px; --r:14px; --r-lg:20px;
  --bg-art:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'%3E%3Cg fill='none' stroke='%2316305c' stroke-opacity='0.07' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(90 92)'%3E%3Cellipse rx='44' ry='15'/%3E%3Cellipse rx='44' ry='15' transform='rotate(60)'/%3E%3Cellipse rx='44' ry='15' transform='rotate(-60)'/%3E%3Ccircle r='4.5'/%3E%3C/g%3E%3Cpath d='M300 70c18-34 36-34 54 0s36 34 54 0 36-34 54 0'/%3E%3Cg transform='translate(450 250)'%3E%3Cpath d='M0-34 29-17 29 17 0 34-29 17-29-17z'/%3E%3Ccircle r='17'/%3E%3C/g%3E%3Cpath d='M232 236c-10 0-12 8-13 18l-7 64c-1 10-3 18-13 18'/%3E%3Cpath d='M60 330h96M60 330V234M60 330 156 234'/%3E%3Cpath d='M76 330a16 16 0 0 0-4-11'/%3E%3Cpath d='M300 470h150M320 490V370'/%3E%3Cpath d='M330 380q45 150 100 0'/%3E%3Cpath d='M120 470h44M128 470v40M156 470v40c0 6 4 8 8 6'/%3E%3Cpath d='M500 420h-34l20 24-20 24h34'/%3E%3Cpath d='M210 120l18 18m0-18-18 18'/%3E%3Ccircle cx='380' cy='170' r='3'/%3E%3Ccircle cx='160' cy='420' r='3'/%3E%3Cpath d='M500 110v26m-13-13h26'/%3E%3C/g%3E%3C/svg%3E");
  --blob-1:rgba(224,163,59,.17); --blob-2:rgba(29,78,216,.08); --blob-3:rgba(16,185,129,.07);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --navy-2:#2f5596; --navy-3:#3d67ad; --brandtext:#a9c4f5;
  --gold-ink:#f0bf63; --gold-pale:rgba(224,163,59,.13); --gold-line:rgba(224,163,59,.38); --gold-deep:#f3c56d;
  --ink:#e6edf7; --muted:#a3b1c6; --faint:#75859d;
  --line:#26344d; --line-2:#1c2840; --surface:#0f1930; --paper:#121c31; --paper-2:#152039;
  --ok:#6ee7a0; --ok-bg:rgba(34,197,94,.13); --ok-line:rgba(34,197,94,.38);
  --warn:#fbbf24; --warn-bg:rgba(245,158,11,.13); --warn-line:rgba(245,158,11,.38);
  --bad:#fca5a5; --bad-bg:rgba(239,68,68,.13); --bad-line:rgba(239,68,68,.38);
  --phy:#8fb0ff; --phy-bg:rgba(59,130,246,.15); --che:#5fd4a6; --che-bg:rgba(16,185,129,.14); --mat:#c4a8ff; --mat-bg:rgba(139,92,246,.16);
  --gen:#a9c4f5; --gen-bg:rgba(148,163,184,.12);
  --lift:0 1px 2px rgba(0,0,0,.3), 0 12px 32px -16px rgba(0,0,0,.65);
  --lift-2:0 2px 4px rgba(0,0,0,.35), 0 24px 50px -24px rgba(0,0,0,.75);
  --head-bg:rgba(13,21,38,.86);
  --bg-art:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'%3E%3Cg fill='none' stroke='%23cbd5e1' stroke-opacity='0.06' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(90 92)'%3E%3Cellipse rx='44' ry='15'/%3E%3Cellipse rx='44' ry='15' transform='rotate(60)'/%3E%3Cellipse rx='44' ry='15' transform='rotate(-60)'/%3E%3Ccircle r='4.5'/%3E%3C/g%3E%3Cpath d='M300 70c18-34 36-34 54 0s36 34 54 0 36-34 54 0'/%3E%3Cg transform='translate(450 250)'%3E%3Cpath d='M0-34 29-17 29 17 0 34-29 17-29-17z'/%3E%3Ccircle r='17'/%3E%3C/g%3E%3Cpath d='M232 236c-10 0-12 8-13 18l-7 64c-1 10-3 18-13 18'/%3E%3Cpath d='M60 330h96M60 330V234M60 330 156 234'/%3E%3Cpath d='M76 330a16 16 0 0 0-4-11'/%3E%3Cpath d='M300 470h150M320 490V370'/%3E%3Cpath d='M330 380q45 150 100 0'/%3E%3Cpath d='M120 470h44M128 470v40M156 470v40c0 6 4 8 8 6'/%3E%3Cpath d='M500 420h-34l20 24-20 24h34'/%3E%3Cpath d='M210 120l18 18m0-18-18 18'/%3E%3Ccircle cx='380' cy='170' r='3'/%3E%3Ccircle cx='160' cy='420' r='3'/%3E%3Cpath d='M500 110v26m-13-13h26'/%3E%3C/g%3E%3C/svg%3E");
  --blob-1:rgba(224,163,59,.09); --blob-2:rgba(59,130,246,.13); --blob-3:rgba(16,185,129,.06);
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0}
body{color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;background:var(--paper);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
:root[data-theme="dark"] body{background:#0a1222}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(760px 360px at 88% -40px,var(--blob-1),transparent 70%),
    radial-gradient(640px 340px at 0% -60px,var(--blob-2),transparent 70%),
    radial-gradient(560px 380px at 50% 112%,var(--blob-3),transparent 70%),
    var(--bg-art) 0 0/560px 560px repeat}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;letter-spacing:-.02em;margin:0;line-height:1.15}
a{color:inherit}
:focus-visible{outline:2.5px solid var(--navy-3);outline-offset:2px;border-radius:6px}
.wrap{max-width:1080px;margin:0 auto;padding-inline:20px}
.ic{width:15px;height:15px;flex:0 0 auto}

/* ---- header ---- */
header.top{position:sticky;top:0;z-index:30;background:var(--head-bg);
  backdrop-filter:saturate(1.6) blur(12px);-webkit-backdrop-filter:saturate(1.6) blur(12px);border-bottom:1px solid var(--line-2)}
.topbar{max-width:1080px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:18px;
  text-decoration:none;letter-spacing:-.02em;white-space:nowrap;color:var(--ink)}
.mark{width:32px;height:32px;border-radius:9px;background:linear-gradient(140deg,#16305c,#0b182e);color:var(--gold);display:grid;
  place-items:center;font-size:12px;font-weight:800;box-shadow:0 6px 14px -8px rgba(11,24,46,.8)}
.nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.nav a{font-family:var(--display);font-weight:700;font-size:14.5px;text-decoration:none;color:var(--muted);
  padding:8px 12px;border-radius:9px;transition:background .12s,color .12s}
.nav a:hover{background:var(--surface);color:var(--ink)}
.nav a.on{color:var(--ink);background:var(--surface)}
.nav a.out{color:var(--bad)}
.nav a.out:hover{background:var(--bad-bg)}
.theme-btn{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--paper);color:var(--muted);
  display:inline-grid;place-items:center;cursor:pointer;flex-shrink:0;transition:color .12s,border-color .12s}
.theme-btn:hover{color:var(--gold-ink);border-color:var(--gold-line)}
.theme-btn svg{width:17px;height:17px}
.theme-btn .i-sun{display:none}
:root[data-theme="dark"] .theme-btn .i-sun{display:block}
:root[data-theme="dark"] .theme-btn .i-moon{display:none}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;min-width:118px;
  padding:11px 18px;border-radius:var(--r-sm);font-family:var(--display);font-weight:800;font-size:14.5px;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:transform .12s ease,box-shadow .15s ease,background .15s ease}
.btn:active{transform:translateY(1px)}
.b-start{background:var(--gold);color:#241603;border-color:#c98c22;
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 8px 18px -10px rgba(169,112,15,.9)}
.b-start:hover{background:var(--gold-2);transform:translateY(-1px)}
.b-resume{background:var(--navy-2);color:#fff}
.b-resume:hover{background:var(--navy-3);transform:translateY(-1px)}
.b-done{background:var(--paper);color:var(--brandtext);border-color:var(--brandtext)}
.b-done:hover{background:var(--gen-bg)}
.b-pay{background:var(--gold-pale);color:var(--gold-deep);border-color:var(--gold-line)}
.b-pay:hover{filter:brightness(.97)}
.b-off{background:var(--surface);color:var(--muted);border-color:var(--line);cursor:not-allowed;pointer-events:none}

/* ---- cards / tables (result, progress) ---- */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);margin-bottom:18px;box-shadow:var(--lift)}
.card-h{padding:13px 18px;border-bottom:1px solid var(--line-2);font-family:var(--display);font-weight:800;font-size:16px;color:var(--ink);
  display:flex;align-items:center;gap:10px}
.card-p{padding:16px 18px}
.tbl,.tbl-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;padding:9px 14px;background:var(--surface);color:var(--muted);font-family:var(--display);font-weight:700;font-size:11.5px;
  text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
td{padding:9px 14px;border-top:1px solid var(--line-2);color:var(--ink)}
.empty{border:1.5px dashed var(--line);border-radius:var(--r);background:var(--surface);padding:30px 20px;
  text-align:center;color:var(--muted);font-size:15px}
.empty svg{width:34px;height:34px;color:var(--faint);display:block;margin:0 auto 8px}

footer.pagefoot{border-top:1px solid var(--line-2);background:var(--surface);padding:16px 20px;
  text-align:center;font-size:13px;color:var(--muted)}

/* question pictures are black line-art: always on a white plate */
.qimg-plate img,.q img,.qtext img,.obody img,.body img,.expl img,.fbx img{background:#fff}

@media (max-width:560px){ .nav a.hide-sm{display:none} .brand .nm{display:none} .wrap{padding-inline:14px} }
@media (prefers-reduced-motion:reduce){ *{transition:none !important;animation:none !important} }
@media print{ body::before,header.top,.no-print,.theme-btn{display:none !important} body{background:#fff !important;color:#111} }