@font-face { font-family:"Fraunces"; src:url("/static/fonts/fraunces.woff2") format("woff2"); font-weight:400 600; font-display:swap; }
@font-face { font-family:"IBM Plex Sans"; src:url("/static/fonts/ibmplexsans.woff2") format("woff2"); font-weight:400 600; font-display:swap; }
:root{
  --paper:#FAFAF8; --ink:#1A1A2E; --navy:#1F3864; --accent:#4A6FA5; --sel:#E8F0FE;
  --ok:#2E7D52; --err:#B23A3A; --line:#E2E0D8; --radius:10px; --maxw:720px;
}
*{box-sizing:border-box} html{font-size:17px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"IBM Plex Sans",system-ui,sans-serif;line-height:1.55}
.wrap{max-width:var(--maxw);margin:0 auto;padding:2.5rem 1.25rem}
h1,h2,h3{font-family:"Fraunces",Georgia,serif;color:var(--navy);line-height:1.15;letter-spacing:-.01em}
h1{font-size:2.1rem;margin:.2rem 0 .4rem}
.sub{color:#5b5b6b;margin-top:0}
label{display:block;font-weight:600;margin:.9rem 0 .3rem}
input[type=text],input[type=email],textarea{width:100%;padding:.7rem .8rem;border:1px solid var(--line);border-radius:var(--radius);font:inherit;background:#fff}
input:focus,textarea:focus,button:focus-visible{outline:3px solid var(--sel);outline-offset:1px;border-color:var(--accent)}
.btn{display:inline-block;background:var(--navy);color:#fff;border:0;border-radius:var(--radius);padding:.8rem 1.4rem;font:inherit;font-weight:600;cursor:pointer;transition:transform .08s ease,background .2s}
.btn:hover{background:#16294a} .btn:active{transform:translateY(1px)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem 1.3rem;margin:1rem 0;animation:rise .4s ease both}
.card:nth-child(2){animation-delay:.04s}.card:nth-child(3){animation-delay:.08s}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.q-num{font-family:"Fraunces",serif;color:var(--accent);font-weight:600}
.opt{display:flex;gap:.6rem;align-items:flex-start;padding:.55rem .7rem;border:1px solid var(--line);border-radius:var(--radius);margin:.4rem 0;cursor:pointer}
.opt:hover{background:var(--sel)} .opt input{margin-top:.25rem}
.progress{position:sticky;top:0;background:var(--paper);padding:.6rem 0;border-bottom:1px solid var(--line);font-weight:600;color:var(--navy);z-index:5}
.bar{height:6px;background:var(--line);border-radius:3px;overflow:hidden;margin-top:.4rem}
.bar>i{display:block;height:100%;background:var(--accent);width:0;transition:width .3s}
table{width:100%;border-collapse:collapse;font-size:.95rem}
th,td{text-align:left;padding:.55rem .6rem;border-bottom:1px solid var(--line)}
th{background:var(--navy);color:#fff;font-weight:600}
.badge{display:inline-block;padding:.1rem .5rem;border-radius:999px;font-size:.8rem;font-weight:600}
.badge.graded{background:#E2F3E5;color:var(--ok)} .badge.submitted{background:#FBE4D8;color:#9a5b1d}
.done{text-align:center;padding:3rem 1rem} .done .mark{font-size:3rem;color:var(--ok)}
.info-btn{border:1px solid var(--line);background:#fff;border-radius:8px;cursor:pointer;padding:.15rem .5rem;font-size:1.05rem;line-height:1.3}
.info-btn:hover{background:var(--sel);border-color:var(--accent)}
.modal{display:none;position:fixed;inset:0;background:rgba(26,26,46,.45);z-index:50;padding:2rem 1rem;overflow:auto}
.modal.open{display:flex;align-items:flex-start;justify-content:center}
.modal-box{background:#fff;max-width:640px;width:100%;border-radius:var(--radius);padding:1.4rem 1.5rem;box-shadow:0 12px 40px rgba(0,0,0,.25);animation:rise .25s ease both}
.modal-box h2{margin:.1rem 0 .2rem}
.modal-close{float:right;border:0;background:none;font-size:1.7rem;line-height:1;cursor:pointer;color:#999;padding:0 .2rem}
.modal-close:hover{color:var(--ink)}
.exp{border-top:1px solid var(--line);padding:.8rem 0}
.exp-q{font-weight:600;color:var(--navy);margin:.2rem 0}
.exp-score{color:var(--accent);font-weight:600;margin:.2rem 0;font-size:.95rem}
.exp-text{white-space:pre-wrap;color:#2b2b3a;margin:.3rem 0 0;font-size:.95rem}
footer{color:#8a8a96;font-size:.8rem;text-align:center;margin-top:2rem}