:root{
  --bg:#FBF6EE; --paper:#FFFDF9; --ink:#33323D; --mute:#7A7787; --line:#EBE3D6;
  --sage:#8FAE8B; --sage-d:#557754; --sage-l:#E4EEDF;
  --blush:#F6D7D0; --blush-d:#C9776B; --blush-l:#FCEBE7;
  --lav:#E2DCF3; --lav-d:#7568B3; --sun:#FBE7B5;
  --ok:#4C8A57; --bad:#C0584D;
  --r:20px; --shadow:0 14px 34px -18px rgba(86,74,52,.35);
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--body);min-height:100vh;
  background-image:
   radial-gradient(520px 420px at 8% -5%,var(--blush) 0%,transparent 70%),
   radial-gradient(560px 460px at 100% 8%,var(--lav) 0%,transparent 70%),
   radial-gradient(600px 500px at 50% 112%,var(--sage-l) 0%,transparent 70%);
  background-attachment:fixed}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.2;margin:0 0 .4em;letter-spacing:-.01em}
h1{font-size:clamp(2rem,6vw,3rem)} h2{font-size:1.5rem} h3{font-size:1.15rem}
p{margin:0 0 .8em}
a{color:var(--sage-d)}
.wrap{max-width:760px;margin:0 auto;padding:20px 16px 80px}
.wrap.wide{max-width:1080px}
.eyebrow{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sage-d);font-weight:800}
.mute{color:var(--mute)} .small{font-size:.88rem}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--shadow);margin-bottom:18px}
.hero{text-align:center;padding:36px 8px 18px}
.hero h1 em{font-style:italic;color:var(--sage-d);font-weight:500}
.leaf{width:54px;height:54px;margin:0 auto 10px;display:block}

/* form + buttons */
label{display:block;font-weight:700;font-size:.92rem;margin:0 0 6px}
input[type=text],input[type=password],input[type=number],select,textarea{
  width:100%;font:inherit;color:inherit;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;outline:none;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{border-color:var(--sage);box-shadow:0 0 0 4px var(--sage-l)}
textarea{min-height:92px;resize:vertical}
.field{margin-bottom:16px}
.row{display:flex;gap:12px;flex-wrap:wrap}.row>*{flex:1 1 150px}
.btn{font:inherit;font-weight:800;border:0;border-radius:999px;padding:13px 26px;min-height:46px;cursor:pointer;background:var(--sage-d);color:#fff;
  box-shadow:0 8px 18px -10px var(--sage-d);transition:transform .12s,filter .12s}
.btn:hover{filter:brightness(1.07)} .btn:active{transform:translateY(1px)}
.btn:focus-visible,.opt:focus-within,.chip:focus-visible{outline:3px solid var(--lav-d);outline-offset:2px}
.btn.ghost{background:transparent;color:var(--sage-d);box-shadow:none;border:1.5px solid var(--sage)}
.btn.soft{background:var(--lav);color:#3d3470;box-shadow:none}
.btn.danger{background:var(--blush-l);color:var(--bad);box-shadow:none;border:1.5px solid var(--blush)}
.btn.sm{padding:8px 16px;min-height:36px;font-size:.88rem}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.actions{display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap;margin-top:8px}
.err{color:var(--bad);font-weight:700;font-size:.9rem;margin-top:8px;min-height:1.2em}

/* class picker */
.classes{display:flex;gap:10px}
.cls{flex:1;position:relative}
.cls input{position:absolute;opacity:0}
.cls span{display:block;text-align:center;padding:12px 0;border-radius:14px;border:1.5px solid var(--line);background:#fff;font-family:var(--display);font-weight:600;font-size:1.2rem;cursor:pointer}
.cls input:checked+span{background:var(--sage-l);border-color:var(--sage);color:var(--sage-d)}
.cls input:focus-visible+span{outline:3px solid var(--lav-d);outline-offset:2px}

/* stepper */
.steps{display:flex;gap:8px;align-items:center;margin:4px 0 18px}
.steps i{flex:1;height:7px;border-radius:9px;background:var(--line)}
.steps i.on{background:var(--sage)} .steps i.now{background:var(--sage-d)}
.stepmeta{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}

/* passage */
.passage{background:linear-gradient(180deg,#FFFBEF,#FFF8E6);border:1.5px dashed #E8D6A2;border-radius:var(--r);padding:20px 22px;margin-bottom:18px;position:relative}
.passage:before{content:"READ FIRST";position:absolute;top:-11px;left:18px;background:var(--sun);color:#7a5b00;font-size:.7rem;font-weight:800;letter-spacing:.14em;padding:3px 12px;border-radius:99px}
.passage h4{font-family:var(--display);margin:14px 0 4px;font-size:1.05rem}
.passage p{margin:0 0 .6em} .passage ol,.passage ul{margin:0 0 .7em;padding-left:1.4rem}
.passage li{margin:.15em 0}
mark.kw{background:linear-gradient(transparent 55%,#F9D977 55%);color:inherit;font-weight:800;padding:0 1px;border-radius:2px}
.kwbox{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.kwbox b{width:100%;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--lav-d)}
.chip{background:var(--lav);color:#3d3470;border-radius:99px;padding:5px 13px;font-size:.88rem;font-weight:700}
.chip small{font-weight:600;opacity:.75}

/* questions */
.q{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:18px 18px 12px;margin-bottom:14px;box-shadow:var(--shadow)}
.q h3{display:flex;gap:12px;align-items:flex-start;font-family:var(--body);font-weight:800;font-size:1.02rem;margin-bottom:12px}
.num{flex:none;width:32px;height:32px;border-radius:50%;background:var(--blush);color:var(--blush-d);display:grid;place-items:center;font-family:var(--display);font-weight:700}
.opt{display:flex;gap:12px;align-items:center;padding:11px 14px;border:1.5px solid var(--line);border-radius:14px;margin-bottom:9px;cursor:pointer;background:#fff;transition:background .12s,border-color .12s}
.opt:hover{border-color:var(--sage)}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt .l{flex:none;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;font-weight:800;font-size:.85rem;color:var(--mute)}
.opt:has(input:checked){background:var(--sage-l);border-color:var(--sage)}
.opt:has(input:checked) .l{background:var(--sage-d);border-color:var(--sage-d);color:#fff}
.opt:has(input:focus-visible){outline:3px solid var(--lav-d);outline-offset:2px}

/* result */
.scorecard{text-align:center}
.ring{width:170px;height:170px;margin:6px auto 10px;position:relative}
.ring svg{transform:rotate(-90deg)}
.ring .n{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-size:2.9rem;font-weight:600}
.ring .n small{display:block;font-family:var(--body);font-size:.75rem;color:var(--mute);letter-spacing:.1em;text-transform:uppercase;margin-top:-8px}
.split{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:10px 0}
.pill{border-radius:99px;padding:6px 16px;font-weight:800;font-size:.9rem;background:var(--lav);color:#3d3470}
.pill.ok{background:#DCEFDD;color:var(--ok)} .pill.bad{background:var(--blush-l);color:var(--bad)} .pill.warn{background:var(--sun);color:#7a5b00}
.delivery{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;padding:12px 16px;border-radius:16px;background:var(--lav);margin:12px 0;font-weight:700}
.delivery.ok{background:#DCEFDD;color:var(--ok)} .delivery.bad{background:var(--blush-l);color:var(--bad)}
.rev{border-left:5px solid var(--line);border-radius:6px 16px 16px 6px}
.rev.ok{border-left-color:var(--ok)} .rev.bad{border-left-color:var(--bad)} .rev.warn{border-left-color:#E0B13C}
.rev .a{font-size:.95rem;margin:3px 0}
.rev .why{background:var(--sage-l);border-radius:12px;padding:8px 12px;font-size:.9rem;margin-top:8px}
.tag{font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;border-radius:99px;padding:2px 10px;margin-left:8px;vertical-align:middle}
.tag.ok{background:#DCEFDD;color:var(--ok)} .tag.bad{background:var(--blush-l);color:var(--bad)} .tag.warn{background:var(--sun);color:#7a5b00}

/* teacher */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.status{display:inline-flex;gap:8px;align-items:center;font-weight:800;font-size:.85rem;padding:6px 14px;border-radius:99px;background:var(--sun);color:#7a5b00}
.status:before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor}
.status.on{background:#DCEFDD;color:var(--ok)} .status.off{background:var(--blush-l);color:var(--bad)}
.qrgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.qrc{text-align:center;padding:18px 14px}
.qrc svg{width:100%;max-width:190px;height:auto;cursor:zoom-in;background:#fff;border-radius:14px;padding:8px;border:1px solid var(--line)}
.qrc h3{margin:10px 0 2px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin:14px 0}
.stat{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 16px}
.stat b{display:block;font-family:var(--display);font-size:1.7rem;font-weight:600}
.stat span{font-size:.8rem;color:var(--mute);text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.filters .chip{border:0;cursor:pointer;font:inherit;font-weight:800;font-size:.88rem;background:#fff;border:1.5px solid var(--line);color:var(--mute)}
.filters .chip.on{background:var(--sage-l);border-color:var(--sage);color:var(--sage-d)}
.tablewrap{overflow-x:auto;border-radius:16px;border:1px solid var(--line);background:#fff}
table{border-collapse:collapse;width:100%;font-size:.93rem}
th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
th{background:var(--sage-l);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sage-d)}
tr:last-child td{border-bottom:0}
td.score{font-family:var(--display);font-weight:700;font-size:1.1rem}
.empty{text-align:center;padding:34px 10px;color:var(--mute)}
dialog{border:0;border-radius:24px;padding:0;max-width:min(680px,94vw);width:100%;box-shadow:0 30px 80px -20px rgba(40,30,20,.5);background:var(--bg);color:var(--ink)}
dialog::backdrop{background:rgba(51,50,61,.45);backdrop-filter:blur(3px)}
.dlg{padding:22px;max-height:86vh;overflow:auto}
.dlg .close{float:right}
dialog.qrbig svg{width:min(78vw,420px);height:auto;display:block;margin:10px auto;background:#fff;padding:14px;border-radius:18px}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:11px 20px;border-radius:99px;font-weight:700;z-index:50;box-shadow:0 14px 30px -10px rgba(0,0,0,.4);animation:up .25s ease}
@keyframes up{from{opacity:0;transform:translate(-50%,10px)}}
.essay-edit{display:flex;gap:8px;align-items:center;margin-top:8px}.essay-edit input{width:80px}
.foot{text-align:center;margin-top:26px;font-size:.85rem}
.notice{background:var(--sun);border-radius:14px;padding:10px 14px;font-size:.9rem;margin-bottom:14px}
.hide{display:none!important}
@media (max-width:520px){.card{padding:18px}.wrap{padding:14px 12px 70px}}
@media print{
  body{background:#fff} .top,.noprint,#results,.foot,.toast{display:none!important}
  .qrgrid{grid-template-columns:repeat(3,1fr)} .card{box-shadow:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}