:root {
  color-scheme: light;
  --navy:#172944;
  --ink:#17263b;
  --blue:#245c8b;
  --paper:#fff;
  --on-primary:#fff;
  --mist:#edf2f8;
  --line:#d5dfeb;
  --quiet:#495b73;
  --gold:#eed07d;
  --radius:.85rem;
  font-family:system-ui,Segoe UI,sans-serif;
  color:var(--ink);
  background:var(--mist);
}
*,*::before,*::after { box-sizing:border-box }
body { margin:0 }
[hidden] { display:none !important }
h1,h2,h3,p { margin:0 0 .65rem }
h2 { line-height:1.2 }
a { color:var(--blue); text-underline-offset:.2em }
button,.button { display:inline-block; border:1px solid transparent; border-radius:.52rem; padding:.64rem .9rem; font:700 .86rem/1.2 system-ui,sans-serif; color:var(--on-primary); background:var(--blue); cursor:pointer; text-decoration:none; white-space:normal }
button:hover,.button:hover { background:color-mix(in srgb,var(--blue),var(--on-primary) 12%) }
button:disabled { opacity:.56; cursor:default }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible { outline:3px solid #bd7913; outline-offset:2px }
.secondary { background:#f5f8fc; color:var(--navy); border-color:var(--line) }
.secondary:hover { background:#e5eef7 }
label { display:block; font-weight:700; font-size:.8rem; margin:.8rem 0 .35rem; letter-spacing:.03em }
input,select { font:inherit; color:inherit; border:1px solid #a8b9ce; border-radius:.48rem; background:var(--paper); padding:.54rem .65rem; width:100%; min-width:0 }
input[type="radio"],input[type="checkbox"] { width:auto; accent-color:var(--blue) }
progress { accent-color:var(--blue); width:100%; height:.58rem; vertical-align:middle }
form > button { margin-top:.8rem }
.muted { color:var(--quiet) }
.eyebrow { font-size:.74rem; letter-spacing:.15em; font-weight:800; color:var(--blue) }
.masthead { display:flex; align-items:center; gap:1rem; padding:.85rem clamp(.8rem,3vw,2.6rem); background:var(--navy); color:var(--on-primary); border-bottom:3px solid var(--gold) }
.masthead h1 { font-size:clamp(1.13rem,2vw,1.7rem); margin:0; overflow-wrap:anywhere }
.masthead p { font-weight:650; margin:.12rem 0; font-size:clamp(.83rem,1.25vw,1rem) }
.masthead small { color:var(--on-primary); letter-spacing:.12em; font-weight:700; font-size:.68rem }
.insignia { display:grid; place-items:center; flex:none; width:2.9rem; height:2.9rem; border:1px solid var(--gold); border-radius:.75rem; color:var(--gold); font-family:Georgia,serif; font-weight:700; font-size:1.1rem }
.student { height:100dvh; display:flex; flex-direction:column; overflow:hidden }
.exam { flex:1; min-height:0; display:grid; grid-template-columns:minmax(240px,32fr) minmax(0,68fr); gap:.85rem; padding:.85rem }
.sheet,.reader { min-height:0; min-width:0; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius) }
.sheet { padding:.85rem 1rem; overflow:auto }
.sheet h2 { font-size:1.05rem }
#student-name { font-weight:750; overflow-wrap:anywhere; margin-bottom:.2rem }
#student-section { margin-bottom:.4rem }
#answer-message,#entry-status { font-size:.84rem; min-height:1.15em; margin:.55rem 0; font-weight:650 }
.reader { display:flex; flex-direction:column; overflow:hidden }
.reader-tools { flex:none; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.35rem; padding:.5rem; border-bottom:1px solid var(--line) }
.reader-tools button { background:#edf3f9; color:var(--ink); border-color:var(--line); padding:.42rem .63rem }
.reader-tools output { min-width:3rem; text-align:center; font-variant-numeric:tabular-nums; font-weight:750; font-size:.85rem }
#pdf-scroll { overflow:auto; min-height:0; flex:1; background:#dfe7f0; position:relative }
#pdf-pages { display:grid; justify-items:center; gap:12px; padding:12px 18px; min-width:max-content }
.pdf-page { position:relative; background:white; box-shadow:0 1px 6px #1d2c4730 }
.pdf-page canvas { width:100%; height:100%; display:block }
table { width:100%; border-collapse:collapse }
th,td { text-align:left; border-bottom:1px solid var(--line); padding:.55rem .62rem }
th { color:var(--navy); background:#edf3f9; font-size:.81rem }
.bubbles { margin-top:.55rem }
.bubbles th,.bubbles td { padding:.12rem; text-align:center; font-variant-numeric:tabular-nums }
.bubbles thead th { padding:.32rem .1rem }
.bubbles tbody th { width:28% }
.bubbles .pending th { box-shadow:inset .2rem 0 #e0b449 }
.bubble { display:grid; place-items:center; min-height:1.32rem; margin:0; cursor:pointer }
.bubble input { padding:0; margin:0; width:.94rem; height:.94rem }
dialog { border:1px solid var(--line); border-radius:1rem; padding:1.4rem; width:min(29rem,calc(100% - 1.5rem)); color:var(--ink); box-shadow:0 16px 70px #17294445 }
dialog::backdrop { background:#14263bc7 }
dialog p { line-height:1.45 }
dialog progress:not([hidden]) { display:block; margin-bottom:.4rem }
dialog button { margin-top:.5rem }
.actions { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin-top:.75rem }
.login { min-height:100dvh; display:grid; place-items:center; padding:1rem; background:linear-gradient(140deg,var(--navy),var(--gold)) }
.login .card { width:min(29rem,100%) }
.login form { margin-bottom:1rem }
.dashboard { width:min(95rem,100%); margin:auto; padding:clamp(.7rem,2vw,1.7rem) }
.logout { margin-left:auto }
.logout button { margin-top:0 }
.tabs { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1.15rem }
.tabs a { border:1px solid var(--line); border-radius:.5rem; padding:.58rem .82rem; background:var(--paper); text-decoration:none; font-weight:650 }
.tabs [aria-current] { color:var(--on-primary); background:var(--navy); border-color:var(--navy) }
.card { min-width:0; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:1rem; margin-bottom:.85rem }
.module-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.6rem; margin-bottom:.85rem }
.module-head h2 { margin:0 }
.metrics,.form-grid,.filters { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr)); gap:.65rem }
.metrics .card strong { display:block; font-size:1.6rem; margin-top:.28rem }
.metrics .card .date { font-size:1.02rem }
.metrics small,.distribution p { color:var(--quiet) }
.distribution summary { cursor:pointer; font-weight:700 }
.distribution h3 { margin-top:1rem; font-size:.91rem }
.distribution p { font-size:.82rem }
.filters { grid-template-columns:repeat(auto-fit,minmax(8rem,1fr)); align-items:end }
.results-head { margin-top:1rem }
.table-scroll { overflow:auto }
.row-actions,.upload { display:flex; align-items:center; flex-wrap:wrap; gap:.55rem; font-size:.79rem }
.row-actions a,.link { font-weight:750 }
.upload > button,.row-actions button { margin:0 }
.upload input { width:min(100%,16rem) }
.link,.link:hover { padding:0; background:none; text-decoration:underline }
.danger { color:#9e2438 }
.compact { max-width:29rem }
.check { display:flex; gap:.5rem; align-items:center }
.notice { padding:.7rem .9rem; border-radius:.5rem; background:#e3f2eb; color:#194931 }
.notice.error { background:#fce8e9; color:#7e2132 }
.answer-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(6rem,1fr)); gap:.55rem; margin:.85rem 0 }
.answer-cell { border:1px solid var(--line); border-radius:.5rem; padding:.4rem .55rem; background:#f7f9fc }
.answer-cell label { margin-top:0 }
.answer-cell small { display:block }
.answer-cell.correct { background:#e5f3ec }
.answer-cell.wrong { background:#fbe8e9 }
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
@media(max-width:660px) {
  .exam { grid-template-columns:1fr; grid-template-rows:minmax(0,42fr) minmax(0,58fr); padding:.4rem; gap:.4rem }
  .sheet { padding:.5rem .7rem }
  .masthead { padding:.5rem .65rem; gap:.6rem }
  .insignia { width:2.2rem; height:2.2rem }
  .reader-tools { padding:.3rem }
}

.brand-logo { object-fit:contain; background:var(--paper); padding:.15rem }
input[type="color"] { padding:.18rem; height:2.5rem }
#logo { display:block; margin:.45rem 0; width:min(100%,26rem) }
#logo-help { display:block; color:var(--quiet) }