:root{--ink:#172033;--muted:#64748b;--line:#cfe0e8;--bg:#edf7fb;--card:#fff;--teal:#1388a8;--teal2:#0e7894;--navy:#143a59;--good:#0f766e;--warn:#b45309;--bad:#b91c1c;--soft:#f4fafc}
*{box-sizing:border-box} html,body{margin:0;min-height:100%;font-family:Inter,"Noto Sans Thai","Tahoma",Arial,sans-serif;color:var(--ink);background:linear-gradient(135deg,#eaf7fb 0%,#f8fbfd 60%,#fff 100%)}
body{user-select:none;-webkit-user-select:none}.noscript{padding:2rem}.wrap{width:min(1100px,calc(100% - 28px));margin:28px auto 48px}.hero{background:linear-gradient(135deg,var(--teal),#177fa0);color:white;border-radius:26px;padding:28px 34px;box-shadow:0 14px 40px rgba(20,58,89,.12)}
.hero h1{margin:0;font-size:clamp(28px,4vw,48px);line-height:1.08}.hero p{font-size:clamp(16px,2vw,22px);margin:10px 0 0}.eyebrow{font-weight:700;letter-spacing:.03em;opacity:.92;margin-bottom:7px}.dev{margin-top:10px!important;font-size:14px!important;opacity:.9}
.card{background:rgba(255,255,255,.96);border:1px solid rgba(183,209,220,.8);border-radius:22px;padding:24px;box-shadow:0 10px 35px rgba(20,58,89,.08);margin-top:20px}.card h2{margin:0 0 14px;font-size:26px}.muted{color:var(--muted);line-height:1.65}.identity-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end;margin-top:18px}.identity-row label{font-weight:700}.identity-row input{width:100%;margin-top:7px;border:1px solid #b9cfda;border-radius:13px;padding:14px 16px;font-size:18px;background:#fff}.btn{border:0;border-radius:13px;padding:13px 19px;font-weight:800;font-size:16px;cursor:pointer;background:#e6f2f6;color:#16405d}.btn.primary{background:var(--navy);color:#fff}.btn.teal{background:var(--teal);color:#fff}.btn:disabled{opacity:.45;cursor:not-allowed}.identity-result{margin-top:14px;border-radius:14px;padding:15px 17px;display:flex;gap:12px;align-items:flex-start;background:#f6fafc;border:1px solid #d7e6ed}.identity-result.verified{background:#effcf8;border-color:#b8e7d6}.verify{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#0f766e;color:white;font-weight:900}.identity-result b{display:block;font-size:18px}.identity-result span{display:block;color:var(--muted);margin-top:3px}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.rules{margin:18px 0 0;padding:16px 18px;border-radius:14px;background:#f7fbfd;border:1px solid #dceaf0}.rules li{margin:7px 0;line-height:1.5}
.top{position:sticky;top:0;z-index:5;background:rgba(237,247,251,.95);backdrop-filter:blur(10px);border-bottom:1px solid #d6e6ed;padding:12px 0}.top-inner{width:min(1100px,calc(100% - 28px));margin:auto;display:flex;gap:12px;justify-content:space-between;align-items:center}.top-title b{display:block}.top-title span{color:var(--muted);font-size:13px}.badges{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.badge{font-size:12px;font-weight:800;padding:6px 9px;border-radius:999px;background:#eaf4f7;color:#28506a}.badge.warn{background:#fff7ed;color:#9a4c08}.quiz{width:min(900px,calc(100% - 28px));margin:24px auto 48px}.studentbar{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:14px;color:#425a6e}.progress{height:10px;background:#d9e9ef;border-radius:999px;overflow:hidden;margin:14px 0 20px}.progress>div{height:100%;background:linear-gradient(90deg,var(--teal),#25a6a6)}.qcard{background:white;border:1px solid #cfe0e8;border-radius:22px;padding:26px;box-shadow:0 12px 38px rgba(20,58,89,.09)}.qmeta{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}.setpill{display:inline-flex;padding:7px 11px;border-radius:999px;background:#e9f5f8;color:#0f6580;font-weight:800;font-size:13px}.qno{color:var(--muted);font-weight:700}.context{margin:18px 0 0;padding:14px 16px;background:#f7fafc;border-left:4px solid #8ab8c9;border-radius:10px;line-height:1.6}.qcard h2{font-size:clamp(21px,3vw,30px);line-height:1.35;margin:18px 0}.choices{display:grid;gap:11px}.choice{display:flex;gap:12px;width:100%;text-align:left;border:1px solid #cbdde6;background:#fff;border-radius:15px;padding:14px;cursor:pointer;font-size:17px;color:var(--ink)}.choice:hover{border-color:#78aebe;background:#f8fcfd}.choice.selected{border:2px solid var(--teal);background:#eefafd}.letter{width:32px;height:32px;flex:0 0 32px;border-radius:9px;background:#e8f2f6;display:grid;place-items:center;font-weight:900;color:#175776}.choice.selected .letter{background:var(--teal);color:#fff}.qfoot{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:20px;flex-wrap:wrap}.note{font-size:13px;color:var(--muted)}
.break-card{text-align:center}.break-scoreless{font-size:46px;font-weight:900;color:var(--teal);margin:12px 0}.break-card .muted{max-width:680px;margin:0 auto}.sending{text-align:center;padding:45px 24px}.spinner{width:46px;height:46px;border:5px solid #d6e8ef;border-top-color:var(--teal);border-radius:50%;margin:0 auto 18px;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.send-error{border:1px solid #f2c5c5;background:#fff8f8;border-radius:15px;padding:16px;color:#8c2020;margin-top:15px}
.result-hero{display:grid;grid-template-columns:1fr auto;align-items:center;gap:24px}.scorebox{background:var(--navy);border-radius:24px;padding:26px 34px;text-align:center;min-width:250px}.scorebox strong{display:block;font-size:62px;line-height:1}.scorebox span{display:block;margin-top:10px;font-size:20px}.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.student-info h2,.sets h2{margin-top:0}.student-info p{font-size:18px;margin:8px 0}.setcards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:14px}.setcard{border:1px solid #c7dce5;border-radius:18px;padding:18px;background:#f9fcfd}.setcard span{display:block;color:var(--muted);font-size:14px}.setcard strong{display:block;color:#0b748d;font-size:36px;margin-top:8px}.recommend{font-size:19px;margin:24px 0 6px;padding:16px 18px;background:#f3fafb;border-radius:14px}.confirm{font-size:12px;color:#6b7f8f;line-height:1.55;word-break:break-word}.footer{color:#657a8b;font-size:13px;margin-top:28px}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#143a59;color:white;padding:11px 16px;border-radius:12px;transition:.2s;z-index:20;max-width:90%;text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:800px){.setcards{grid-template-columns:1fr 1fr}.result-grid{grid-template-columns:1fr}.result-hero{grid-template-columns:1fr}.scorebox{min-width:0}.identity-row{grid-template-columns:1fr}.hero{padding:24px}.wrap{margin-top:16px}.qcard{padding:20px}}
@media(max-width:480px){.setcards{grid-template-columns:1fr}.top-inner{align-items:flex-start}.badges{justify-content:flex-start}.qfoot .btn{width:100%}}

.mission-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}.mission-card{border:1px solid #d9e6ec;border-radius:18px;padding:18px;background:#fff}.mission-card b{display:block;color:#153b5b;margin-bottom:6px}.lesson{background:linear-gradient(135deg,#f7fbfd,#eef8f4);border:1px solid #cfe3e8}.lesson h2{margin-top:0}.thai-box{background:#fff7e8;border-left:4px solid #d89119;padding:14px 16px;border-radius:10px;margin:14px 0}.examples{display:grid;gap:8px;margin:14px 0}.example{background:white;border:1px solid #d9e6ec;border-radius:10px;padding:10px 12px}.attempt-note{padding:10px 12px;border-radius:10px;margin-top:12px}.attempt-note.hint{background:#fff7e8;color:#7c4a00}.attempt-note.good{background:#eaf8f1;color:#176540}.attempt-note.bad{background:#fff0ef;color:#9a3028}.choice.wrong{border-color:#d46a60;background:#fff2f0}.choice.correct{border-color:#31a36b;background:#eaf8f1}.section-table{width:100%;border-collapse:collapse;margin-top:18px}.section-table th,.section-table td{padding:12px 10px;border-bottom:1px solid #dce6ec;text-align:left}.section-table th{color:#193a56;background:#f4f8fb}.big-score{font-size:52px;font-weight:800;color:#12966b;white-space:nowrap}.summary-top{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:start}.status-note{font-size:13px;color:#617487;margin-top:10px}.progressbar{height:10px;border-radius:999px;background:#e5eef2;overflow:hidden}.progressbar>i{display:block;height:100%;background:linear-gradient(90deg,#2395dc,#18a56f)}@media(max-width:760px){.mission-grid{grid-template-columns:1fr}.summary-top{grid-template-columns:1fr}.section-table{font-size:14px}.big-score{font-size:42px}}