:root{
  --brand:#0f5c4d; --brand-d:#0a4338; --tint:#e6f1ee; --ink:#1c2321; --mute:#5d6966;
  --line:#c9d3d0; --bg:#f6f8f7; --flag:#c2410c; --ok:#16794c; --bad:#b42318; --amber:#f2b441;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg);font-size:16px}
button{font:inherit;cursor:pointer;color:inherit}
.btn{background:var(--brand);color:#fff;border:0;border-radius:999px;padding:10px 24px;font-weight:600}
.btn:hover{background:var(--brand-d)}
.btn.ghost{background:#fff;color:var(--brand);border:1.5px solid var(--brand)}
.btn.ghost:hover{background:var(--tint)}
.btn.danger{background:var(--bad)}
.btn.small{padding:6px 14px;font-size:14px}
.link{background:none;border:0;color:var(--brand);font-weight:600;text-decoration:underline;padding:0}

/* ---------- Home ---------- */
.home-top{background:var(--tint);padding:22px 0 34px}
.wrap{max-width:980px;margin:0 auto;padding:0 24px}
.brandbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}
.logo{font-weight:800;font-size:22px;color:var(--brand);letter-spacing:.2px}
.logo span{color:var(--flag)}
.home-top h1{font-size:34px;font-weight:500;margin:0 0 14px}
.namebox{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.namebox input{font:inherit;padding:9px 12px;border:1.5px solid var(--line);border-radius:8px;width:280px;max-width:100%}
h2{font-size:24px;margin:34px 0 14px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:0 1px 3px rgba(0,0,0,.06);text-align:left;display:flex;flex-direction:column;gap:6px}
button.card:hover{border-color:var(--brand);box-shadow:0 3px 10px rgba(15,92,77,.15)}
.card .ico{font-size:28px}
.card b{font-size:17px}
.card small{color:var(--mute);line-height:1.4}
.resume{border-left:6px solid var(--amber);flex-direction:row;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
table.list{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
table.list th,table.list td{padding:10px 12px;text-align:left;border-bottom:1px solid #e5eae8;font-size:15px}
table.list th{background:#eef3f1;font-size:13px;text-transform:uppercase;letter-spacing:.4px;color:var(--mute)}
.empty{background:#fff;border:1px dashed var(--line);border-radius:12px;padding:22px;color:var(--mute);text-align:center}
.foot{color:var(--mute);font-size:13px;margin:40px 0 30px}

.auth{min-height:100vh;display:grid;place-items:center;background:var(--tint);padding:20px}
.auth .card{width:min(400px,100%);gap:12px;padding:28px}
.auth h2{margin:6px 0 4px}
.auth label{display:flex;flex-direction:column;gap:4px;font-size:14px;font-weight:600}
.auth input,.filters input,.filters select{font:inherit;padding:9px 12px;border:1.5px solid var(--line);border-radius:8px}
.authmsg{margin:0;background:#fff4e5;border-radius:8px;padding:8px 12px;font-size:14px}
.filters{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin:22px 0 0}
.btn[disabled]{opacity:.6;cursor:default}

/* ---------- Test shell ---------- */
.test{display:grid;grid-template-rows:auto auto 1fr auto;height:100vh}
.top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:var(--tint);padding:10px 28px;border-bottom:2px solid var(--brand)}
.top .sec{font-weight:700;font-size:18px}
.top .plain{background:none;border:0;padding:4px 0;font-size:14px;font-weight:600}
.tc{text-align:center}
#timer{font-size:22px;font-weight:700;min-height:28px;font-variant-numeric:tabular-nums}
#timer.warn{color:var(--bad)}
.pill{background:#fff;border:1px solid var(--ink);border-radius:999px;font-size:12px;font-weight:700;padding:2px 12px}
.tr{display:flex;justify-content:flex-end;gap:18px;position:relative}
.tool{background:none;border:0;display:flex;flex-direction:column;align-items:center;font-size:12px;font-weight:600;gap:2px;padding:4px 6px;border-bottom:3px solid transparent}
.tool .i{font-size:18px}
.tool.on{border-bottom-color:var(--brand);color:var(--brand)}
.banner{background:var(--brand);color:#fff;text-align:center;font-size:12px;font-weight:700;letter-spacing:.6px;padding:5px;margin:0 28px;border-radius:0 0 12px 12px}
.panes{display:grid;grid-template-columns:var(--split,50%) 8px 1fr;min-height:0;background:#fff}
.pane{overflow:auto;padding:28px 44px}
.divider{background:#8c9794;cursor:col-resize;position:relative}
.divider::after{content:"⇔";position:absolute;top:90px;left:-7px;background:var(--ink);color:#fff;font-size:11px;border-radius:4px;padding:2px 3px}
#passage,.stem,.choice,.rev-p{font-family:Georgia,"Times New Roman",serif;font-size:17px;line-height:1.6}
#passage p{margin:0 0 12px}
#passage ul{margin:6px 0 12px 22px;padding:0}
#passage .t-label{font-weight:700;margin-top:10px}
table.data{border-collapse:collapse;margin:6px 0 14px;font-family:"Segoe UI",sans-serif;font-size:15px}
table.data th,table.data td{border:1px solid #777;padding:6px 12px;text-align:left}
table.data th{background:#eef3f1}
.qbar{display:flex;align-items:center;gap:10px;background:#eef1f0;border-bottom:2px dashed var(--ink);margin-bottom:14px}
.qnum{background:var(--ink);color:#fff;font-weight:700;padding:6px 12px}
.markbtn{background:none;border:0;font-size:14px;display:flex;gap:6px;align-items:center}
.markbtn.on{color:var(--flag);font-weight:700}
.elimtoggle{margin-left:auto;margin-right:4px;border:1px solid var(--ink);border-radius:5px;background:#fff;font-size:12px;font-weight:700;padding:3px 6px;text-decoration:line-through}
.elimtoggle.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.stem{margin:0 0 14px}
.choice-row{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.choice{flex:1;display:flex;gap:14px;align-items:flex-start;text-align:left;background:#fff;border:1.5px solid #6b7673;border-radius:10px;padding:11px 14px;position:relative}
.choice:hover{background:#f3f7f6}
.choice .ltr{flex:none;width:26px;height:26px;border:1.5px solid var(--ink);border-radius:50%;display:grid;place-items:center;font:700 13px "Segoe UI",sans-serif}
.choice.sel{border:3px solid var(--brand);padding:9.5px 12.5px}
.choice.sel .ltr{background:var(--brand);color:#fff;border-color:var(--brand)}
.choice.elim{color:#8a9391;border-color:#b5bdbb}
.choice.elim::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;border-top:2px solid var(--ink)}
.strike{flex:none;width:40px;background:none;border:0;font-size:12px;font-weight:700;text-decoration:underline}
.strike .c{display:inline-grid;place-items:center;width:22px;height:22px;border:1.5px solid var(--ink);border-radius:50%;text-decoration:line-through}
.bottom{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:var(--tint);padding:12px 28px;border-top:2px solid var(--brand);position:relative}
.bottom .who{font-weight:700;font-size:17px}
.navbtn{background:var(--ink);color:#fff;border:0;border-radius:8px;padding:9px 16px;font-weight:700}
.bottom .acts{display:flex;justify-content:flex-end;gap:10px}

/* popovers & modals */
.pop{position:absolute;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.22);z-index:30}
.pop.more{right:0;top:56px;min-width:210px;padding:6px 0}
.pop.more button{display:flex;gap:12px;width:100%;background:none;border:0;padding:11px 18px;text-align:left}
.pop.more button:hover{background:var(--tint)}
.pop.nav{bottom:62px;left:50%;transform:translateX(-50%);width:min(560px,92vw);padding:18px 22px}
.pop.dir{left:28px;top:72px;width:min(660px,90vw);padding:22px 24px;font-family:Georgia,serif;line-height:1.55}
.pop h3{margin:0 0 10px;text-align:center;font-size:17px}
.legend{display:flex;gap:22px;justify-content:center;font-size:13px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:8px 0;margin-bottom:14px}
.grid{display:flex;flex-wrap:wrap;gap:12px 10px;justify-content:flex-start}
.nq{width:34px;height:34px;border:1.5px dashed var(--ink);background:#fff;color:var(--brand);font-weight:700;position:relative;border-radius:3px}
.nq.ans{background:var(--brand);color:#fff;border-style:solid;border-color:var(--brand)}
.nq.mk::after{content:"⚑";position:absolute;top:-11px;right:-6px;color:var(--flag);font-size:14px}
.nq.cur::before{content:"📍";position:absolute;top:-16px;left:8px;font-size:11px}
.center{text-align:center}
.overlay{position:fixed;inset:0;background:rgba(20,30,28,.55);display:grid;place-items:center;z-index:50;padding:20px}
.modal{background:#fff;border-radius:12px;max-width:640px;width:100%;max-height:88vh;overflow:auto;padding:24px 28px;box-shadow:0 10px 40px rgba(0,0,0,.3)}
.modal.wide{max-width:900px}
.modal h3{font-size:22px;margin:0 0 12px;font-weight:600}
.modal .row{display:flex;justify-content:flex-end;gap:12px;margin-top:20px;flex-wrap:wrap}
table.keys{width:100%;border-collapse:collapse}
table.keys td,table.keys th{border:1px solid var(--line);padding:8px 12px;text-align:left}
table.keys th{background:var(--ink);color:#fff}

/* review page & intermission */
.checkwork{overflow:auto;background:var(--bg);padding:30px 20px;text-align:center}
.checkwork h2{font-weight:500;font-size:28px;margin:0 0 14px}
.checkwork .box{background:#fff;border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,.12);max-width:760px;margin:22px auto;padding:22px 26px;text-align:left}
.checkwork .box .hd{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:22px;font-weight:700;flex-wrap:wrap;gap:8px}
.checkwork .box .hd span{font-weight:400;font-size:13px}
.screen{min-height:100vh;display:grid;place-items:center;background:var(--ink);color:#fff;text-align:center;padding:24px}
.screen .inner{max-width:560px}
.screen h1{font-weight:500}
.screen .big{font-size:54px;font-weight:700;font-variant-numeric:tabular-nums;margin:10px 0 20px}
.screen .btn{background:var(--amber);color:var(--ink)}

/* highlights */
mark.hl{background:#ffe066;color:inherit;cursor:pointer;padding:1px 0}
mark.hl.b{background:#bfe3ff}
mark.hl.p{background:#ffc9de}
mark.hl.u{text-decoration:underline;text-decoration-thickness:2px}
mark.hl[data-note]{border-bottom:2px dotted var(--ink)}
#hlbar{position:absolute;z-index:40;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 4px 16px rgba(0,0,0,.25);padding:6px 8px;display:flex;gap:6px;align-items:center;flex-wrap:wrap;max-width:300px}
#hlbar button{width:28px;height:28px;border-radius:50%;border:1.5px solid #555;background:#fff;font-size:13px;padding:0}
#hlbar .y{background:#ffe066}#hlbar .b{background:#bfe3ff}#hlbar .p{background:#ffc9de}
#hlbar textarea{width:100%;font:14px "Segoe UI",sans-serif;min-height:70px;margin-top:4px}
#hlbar .save{width:auto;border-radius:6px;padding:0 10px;background:var(--brand);color:#fff;border:0}
.hlmode #passage{cursor:text}

/* line reader */
#lr{position:fixed;z-index:35;width:46vw;min-width:320px;user-select:none}
#lr .lrh{background:rgba(20,26,25,.93);color:#fff;height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;cursor:move;font-size:12px}
#lr .slot{height:34px;border:2px solid #fff;outline:1px solid #333;pointer-events:none}
#lr .lrb{background:rgba(20,26,25,.85);height:44px}
#lr button{background:none;border:0;color:#fff;font-size:18px}

/* report */
.report .hero{background:var(--tint);padding:26px 0}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-top:16px}
.stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px}
.stat .n{font-size:32px;font-weight:700;color:var(--brand)}
.stat .l{font-size:13px;color:var(--mute)}
.bar{background:#dfe6e4;border-radius:99px;height:12px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--brand)}
.dom{display:grid;grid-template-columns:240px 1fr 70px;gap:12px;align-items:center;margin-bottom:10px;font-size:15px}
.tag{font-weight:700}.tag.ok{color:var(--ok)}.tag.bad{color:var(--bad)}.tag.skip{color:var(--mute)}
.rev-c{border:1.5px solid var(--line);border-radius:8px;padding:8px 12px;margin:6px 0;font-family:Georgia,serif}
.rev-c.right{border-color:var(--ok);background:#e8f6ee}
.rev-c.wrong{border-color:var(--bad);background:#fdecea}
.expl{background:var(--tint);border-radius:8px;padding:12px 14px;margin-top:12px}
#toast{position:fixed;top:84px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 18px;border-radius:8px;z-index:60;font-weight:600}
@media (max-width:760px){
  .panes{grid-template-columns:1fr;grid-auto-rows:min-content;overflow:auto}
  .divider{display:none}.pane{overflow:visible;padding:18px}
  .top,.bottom{padding:10px 14px}.banner{margin:0 14px}
  .dom{grid-template-columns:1fr 1fr 50px}
}
@media print{.noprint{display:none!important}.report .hero{background:none}}