/* Engnow Level Test — mirrors the Engnow B theme tokens. Scoped to .elt */
.elt{--ink:#0f0f0f;--paper:#f5f3ee;--text:#141414;--muted:#6f6a62;--muted-on:#9b968c;--line:#d9d5cc;--red:#e0301e;--font-d:'Kanit','IBM Plex Sans Thai',sans-serif;max-width:720px;margin:0 auto;font-size:16px;line-height:1.6}
.elt *{box-sizing:border-box}
.elt .k{font-family:var(--font-d);font-weight:800;line-height:.95;margin:0;letter-spacing:-.02em}
.elt .k6{font-family:var(--font-d);font-weight:600;line-height:1.25;margin:0}
.elt .lbl{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.elt .lbl--on{color:var(--muted-on)}
.elt .red{color:var(--red)}
.elt .muted{color:var(--muted)}
.elt .dark{background:var(--ink);color:#f5f3ee;padding:24px 20px}
.elt .dark .lbl{color:var(--muted-on)}
.elt .dark .k,.elt .dark .k6{color:#f5f3ee}
.elt .redline{height:4px;background:var(--red)}
.elt .card{background:#fff;border:2px solid var(--line);padding:20px}
.elt .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;font-weight:600;font-size:16px;border:2px solid var(--text);color:var(--text);background:transparent;cursor:pointer;font-family:inherit;text-decoration:none;white-space:nowrap}
.elt .btn:hover{background:var(--text);color:var(--paper)}
.elt .btn--fill{background:var(--red);border-color:var(--red);color:#fff}
.elt .btn--fill:hover{background:var(--text);border-color:var(--text);color:#fff}
.elt .btn--ghost{border-color:var(--line);color:var(--muted)}
.elt .btn--ghost:hover{border-color:var(--text);color:var(--text);background:transparent}
.elt .btn--block{width:100%}
.elt .btn[disabled]{opacity:.45;cursor:not-allowed}
.elt .stack{display:flex;flex-direction:column;gap:14px}
.elt .row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.elt .row--between{justify-content:space-between}
.elt .goal{display:flex;align-items:center;gap:12px;min-height:56px;padding:0 16px;border:2px solid var(--line);background:#fff;font-size:15px;font-weight:500;cursor:pointer}
.elt .goal input{width:18px;height:18px;margin:0;accent-color:var(--red)}
.elt .goal:has(input:checked){border-color:var(--text);background:var(--text);color:var(--paper)}
.elt .segs{display:flex;gap:3px}
.elt .seg{height:4px;flex:1;background:var(--line)}
.elt .seg.done{background:var(--text)}
.elt .seg.now{background:var(--red)}
.elt .passage{border-left:4px solid var(--text);padding:10px 14px;background:#fff;font-size:17px;line-height:1.6}
.elt .q{font-family:var(--font-d);font-weight:800;font-size:clamp(24px,5vw,32px);line-height:1.15;margin:0}
.elt .q .blank{color:var(--red)}
.elt .opt{display:flex;align-items:center;gap:14px;min-height:58px;padding:10px 16px;border:2px solid var(--line);background:#fff;color:var(--text);font-size:17px;font-weight:500;cursor:pointer;font-family:inherit;text-align:left;width:100%;line-height:1.35}
.elt .opt:hover{border-color:var(--text)}
.elt .opt.on{border-color:var(--text);background:var(--text);color:var(--paper)}
.elt .opt .key{font-family:var(--font-d);font-weight:700;font-size:13px;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:1px solid currentColor;flex:none}
.elt .level{display:flex;align-items:flex-end;gap:16px}
.elt .level .k{font-size:clamp(88px,20vw,120px)}
.elt .cefr{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:3px}
.elt .cefr span{height:8px;background:#3a3a3a}
.elt .cefr span.past{background:#f5f3ee}
.elt .cefr span.on{background:var(--red)}
.elt .cefr-lbl{display:flex;justify-content:space-between;font-size:11px;color:var(--muted-on)}
.elt .cefr-lbl .on{color:var(--red);font-weight:700}
.elt .bar{height:10px;background:#dcd8cf;position:relative}
.elt .bar span{position:absolute;left:0;top:0;bottom:0;background:var(--text)}
.elt .bar.weak span{background:var(--red)}
.elt .skill{display:flex;flex-direction:column;gap:6px}
.elt .skill .row{font-size:14px}
.elt .review{border:2px solid var(--line);background:#fff;padding:16px;display:flex;flex-direction:column;gap:8px}
.elt .review.wrong{border-color:var(--text)}
.elt .review .ans{font-family:var(--font-d);font-weight:600;font-size:17px}
.elt .review .ans .no{text-decoration:line-through;color:var(--muted)}
.elt .review .why{font-size:14px;color:#2b2a27;line-height:1.55;margin:0}
.elt .review a{color:var(--red);font-weight:600;font-size:14px;text-decoration:none}
.elt details.more summary{cursor:pointer;color:var(--muted);font-size:14px;font-weight:600;list-style:none}
.elt details.more summary::-webkit-details-marker{display:none}
.elt .plan{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;padding:12px 0;border-top:1px solid var(--line);align-items:start;text-decoration:none;color:var(--text)}
.elt .plan:last-of-type{border-bottom:1px solid var(--line)}
.elt .plan .d{font-family:var(--font-d);font-weight:800;font-size:22px;color:var(--muted)}
.elt .plan:first-of-type .d{color:var(--red)}
.elt .plan .t{font-family:var(--font-d);font-weight:600;font-size:15px;display:block}
.elt .plan:hover .t{color:var(--red)}
.elt .field{min-height:50px;border:2px solid #3a3a3a;background:#0f0f0f;color:#f5f3ee;padding:0 14px;font-size:16px;font-family:inherit;width:100%}
.elt .field:focus{outline:none;border-color:#f5f3ee}
.elt .note{font-size:12px;color:var(--muted-on)}
.elt .ok{color:#1d6b3a;font-weight:600}
.elt .err{color:var(--red);font-weight:600}
.elt .fade{animation:eltfade .25s ease}
@keyframes eltfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.elt .fade{animation:none}}