:root{--ink:#163046;--navy:#09283d;--teal:#067d80;--orange:#e2a04e;--cream:#f5f8fa;--line:#d4e1e9;--light:#e9f6f5;--shadow:0 12px 32px rgba(7,40,61,.09)}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--cream);color:var(--ink);font:16px/1.65 'Segoe UI',Tahoma,Arial,sans-serif}button,select,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #319aaa;outline-offset:2px}p{margin:0 0 13px}h1,h2,h3{line-height:1.25;margin:0 0 12px}h1{font-size:clamp(30px,3vw,48px)}h2{font-size:clamp(22px,2.5vw,34px)}h3{font-size:19px}.app{height:100dvh;display:flex;flex-direction:column;overflow:hidden}.topbar{height:66px;flex:none;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:0 24px}.mark{border-radius:12px;background:var(--navy);color:#fff;padding:7px 11px;font-size:13px;font-weight:800}.brand{font-size:15px;font-weight:900}.progress{margin-left:auto;min-width:180px;font-size:12px;text-align:right}.progress .bar{height:6px;background:#e5edef;border-radius:12px;overflow:hidden}.progress .bar span{display:block;height:100%;background:var(--teal);transition:width .2s}.shell{flex:1;min-height:0;display:flex}.sidebar{width:258px;flex:none;background:#082438;color:#eaf5f7;overflow:auto;padding:20px 12px}.sidebar .small{font-size:12px;color:#aac0cc;margin:8px 7px 15px}.side-link{width:100%;display:block;text-align:left;border:0;background:transparent;color:#c8dee6;border-radius:10px;padding:10px 11px;margin:2px 0;font-size:13px}.side-link.current{background:#155d66;color:#fff;font-weight:800}.side-link:disabled{opacity:.38}.main{min-width:0;flex:1;display:flex;flex-direction:column;overflow:hidden}.stage{min-height:0;overflow:auto;padding:24px;display:flex;justify-content:center;align-items:flex-start}.panel{width:min(960px,100%);background:white;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);overflow:hidden}.panel-head{padding:24px 29px 19px;background:linear-gradient(90deg,#f0f9f8,#fff);border-bottom:1px solid var(--line)}.eyebrow{font-size:12px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;color:var(--teal);margin-bottom:9px}.panel-body{padding:26px 30px}.lead{font-size:18px;color:#476175}.tag{display:inline-block;background:#deeeee;color:#00676e;padding:5px 10px;border-radius:20px;font-weight:800;font-size:12px}.example{margin:10px 0;border:1px solid #dce9ee;border-radius:13px;padding:13px 16px;background:#fbfdfd}.example strong{font-size:17px;color:#122f49;display:block;margin-bottom:4px}.example p{margin:0;color:#52718a;font-size:14px}.callout{border-left:4px solid var(--teal);background:#f1f9f8;padding:14px 18px;border-radius:7px;margin:16px 0}.footer{min-height:80px;flex:none;background:#fff;border-top:1px solid var(--line);display:flex;gap:10px;align-items:center;justify-content:space-between;padding:15px 25px}.button{border-radius:11px;background:#fff;color:#102a42;border:1px solid var(--line);padding:10px 19px;font-weight:800}.button.primary{background:var(--navy);border-color:var(--navy);color:#fff}.button.accent{background:var(--teal);border-color:var(--teal);color:#fff}.button.warn{background:#fff0de;border-color:#efbf83}.button.small{font-size:13px;padding:6px 10px}.button.inline{display:inline-block;margin:3px 5px 3px 0}.status{font-size:13px;color:#5b7280}.login-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.hero{background:#092c39;color:#fff;border-radius:15px;padding:26px}.hero h1{font-family:Georgia,serif;letter-spacing:.01em}.hero h2{color:#eca955}.hero p{color:#bdd8dc}.field{display:block;font-weight:800;margin:12px 0 7px}.field input,.field select{display:block;width:100%;background:#fff;border:1px solid #cbdce5;border-radius:10px;padding:11px 13px;font-weight:500;color:#183d54}.hint{font-size:12px;color:#647d8c}.question-card{position:relative;border:1px solid #d4e1e9;border-radius:18px;padding:22px 20px 16px;background:#fff;isolation:isolate;overflow:hidden;user-select:none;-webkit-user-select:none}.question-card::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(30deg,transparent,transparent 15px,rgba(0,60,70,.025) 15px,rgba(0,60,70,.025) 16px),radial-gradient(rgba(0,80,99,.045) .6px,transparent .6px);background-size:auto,9px 9px;pointer-events:none;z-index:0}.question-card>*:not(.aocr){position:relative;z-index:2}.question-card .aocr{position:absolute;inset:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;overflow:hidden;align-items:center;justify-items:center;opacity:.09;pointer-events:none;z-index:1;transform:rotate(-17deg) scale(1.15);font-weight:900;font-size:10px;line-height:1.5;color:#305869}.aocr span{width:95%;text-align:center;overflow-wrap:anywhere}.trace{margin-top:14px;text-align:right;font-size:10px;font-weight:700;color:#718593}.question-title{font-size:clamp(18px,2.4vw,25px);font-weight:800;line-height:1.4;margin:8px 0 18px}.option{display:flex;gap:13px;padding:13px 15px;margin:9px 0;border:1px solid #d7e4e8;border-radius:12px;background:#fff;align-items:center;cursor:pointer;line-height:1.4;min-height:54px}.option:hover{border-color:#87abb4;background:#f5fbfb}.option.selected{border-color:var(--teal);box-shadow:inset 0 0 0 1px var(--teal);background:#e9f7f6}.option.locked{pointer-events:none}.letter{border-radius:7px;background:#edf2f5;padding:4px 9px;font-weight:900;flex:none}.option input{accent-color:var(--teal);flex:none}.feedback{background:#f0f7f7;border:1px solid #c9e4e0;border-radius:11px;padding:14px 18px;margin-top:18px;font-weight:600}.muted{color:#5c7885}.blocks{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.block{padding:15px;border:1px solid #d8e4e9;border-radius:14px}.block strong{font-size:27px;color:#056f78;display:block}.submit-warning{border:1px solid #e5c89e;background:#fff8ea;border-radius:12px;padding:15px}.topic-table{width:100%;border-collapse:collapse}.topic-table td,.topic-table th{padding:9px 12px;border-bottom:1px solid #d5e5e8;text-align:left}.topic-table td:last-child,.topic-table th:last-child{text-align:right}.toast{position:fixed;top:76px;right:16px;background:#113f50;color:white;padding:14px 18px;max-width:320px;border-radius:11px;z-index:100;font-size:13px}.toast[hidden]{display:none}.mobile-menu{display:none}.pill{background:#eaf2f6;border-radius:999px;font-size:12px;padding:5px 9px;display:inline-block;margin:2px}.saving{opacity:.6;pointer-events:none}@media(max-width:950px){.sidebar{width:205px}.stage{padding:14px}.panel-body{padding:20px}.blocks{grid-template-columns:1fr 1fr}}@media(max-width:740px){.mobile-menu{display:block;border:none;background:#e6f5f3;border-radius:8px;padding:8px 12px;color:#073a49}.sidebar{display:none;position:fixed;z-index:30;top:65px;bottom:0;left:0;width:min(300px,86vw);box-shadow:10px 0 24px #122e3e44}.sidebar.open{display:block}.brand{font-size:12px}.progress{min-width:95px}.topbar{padding:0 10px;height:61px}.mark{font-size:11px}.stage{padding:10px}.panel{border-radius:13px}.panel-head{padding:17px}.panel-body{padding:17px}.footer{padding:11px;min-height:66px;gap:6px}.button{padding:9px 12px;font-size:13px}.login-grid{grid-template-columns:1fr}.hero{padding:15px}.hero h1{font-size:28px}.hero h2{font-size:21px}.question-card{padding:16px 11px}.question-card .aocr{opacity:.045;font-size:9px}.blocks{grid-template-columns:1fr}.progress .count{font-size:11px}.status{font-size:11px}}@media(prefers-contrast:more){.question-card .aocr{opacity:.02}.question-card::before{opacity:.2}}@media print{body{display:none!important}}

/* Teacher presentation does not expose student attempts or scores. */
.teacher-mode{background:#eef3f6}.teacher-shell{display:flex;flex-direction:column;min-height:100dvh;color:#123950;font-family:Arial,'Noto Sans Thai',sans-serif}.teacher-top,.teacher-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 20px;background:#103a56;color:#fff}.teacher-top{position:sticky;top:0;z-index:3;flex-wrap:wrap}.teach-tools{display:flex;gap:8px;flex-wrap:wrap}.teach-tools button,.teach-tools a,.teacher-footer button,.teach-speak button{border:1px solid #b8d3e0;border-radius:9px;padding:9px 12px;background:#fff;color:#103a56;font:inherit;cursor:pointer;text-decoration:none}.teacher-footer{position:sticky;bottom:0}.teacher-footer button:disabled{opacity:.35;cursor:default}.teacher-content{display:flex;flex:1;min-height:0}.teacher-list{width:265px;min-width:230px;background:#fff;border-right:1px solid #d7e4ec;max-height:calc(100dvh - 112px);overflow:auto}.teacher-list button{display:block;width:100%;padding:12px;border:0;border-bottom:1px solid #e8eff4;text-align:left;background:transparent;color:#153b50;cursor:pointer}.teacher-list button.active{background:#d8eeec;font-weight:bold}.teacher-main{flex:1;max-width:1250px;margin:20px auto;padding:clamp(18px,3vw,38px);border-radius:18px;background:#fff;box-shadow:0 10px 35px #12395012;min-width:0}.teacher-label{font-weight:bold;color:#167d82}.teacher-main h1{font-size:clamp(25px,3.2vw,46px);margin:16px 0 10px}.teacher-main h2{font-size:clamp(17px,2vw,23px);color:#b05e18;margin:0 0 22px}.teacher-para{font-size:clamp(17px,2vw,24px);line-height:1.7}.teach-examples{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin:25px 0}.teach-example{border:1px solid #cbdfe7;border-radius:13px;padding:18px;background:#f7fbfc}.teach-sentence{font-size:clamp(18px,2vw,26px);font-weight:bold;line-height:1.4}.teach-explain{font-size:17px;margin-top:12px;color:#406074;line-height:1.6}.teach-tip{padding:13px 17px;border-left:5px solid #ec9e49;background:#fff9f2;font-size:18px}.teach-speak{display:flex;gap:9px;flex-wrap:wrap}.teach-speak button{background:#e9f6f5}@media(max-width:800px){.teacher-list{display:none}.teacher-list.expanded{display:block;position:absolute;z-index:4;top:115px;left:0;max-height:60vh;box-shadow:8px 10px 30px #12395044}.teacher-main{margin:8px;border-radius:12px}.teacher-top,.teacher-footer{padding:8px 12px}}

/* v1.1.3 local instructor preview. Does not change student assessment styles. */
.preview-badge{background:#fff0d9;color:#78420c;border:1px solid #ebb66c;border-radius:999px;padding:5px 9px;font-size:12px;font-weight:800;white-space:nowrap}
.preview-login-link{display:block;margin-top:12px;text-align:center;text-decoration:none;border:2px solid #25858c;background:#eaf8f7;color:#095d62;font-weight:800;border-radius:10px;padding:10px 8px}
.preview-intro-note,.preview-summary,.preview-side-help{background:#fff5e7;color:#6d4314;border:1px solid #e7ca96;border-radius:12px;padding:12px 15px;margin:7px 0 18px;line-height:1.6}.preview-side-help{font-size:12px}
.preview-next,.preview-shortcut{background:#eef7f8;color:#075e66;border:1px solid #80bcc2!important}
.teacher-top a{white-space:nowrap}
@media(max-width:760px){.preview-badge{font-size:11px}.preview-shortcut{padding:7px;font-size:12px}.preview-login-link{font-size:13px}}
/* Small-screen preview toolbar stays fully readable; student toolbar is unchanged. */
@media(max-width:740px){
 .preview-mode .topbar{gap:5px;padding:0 8px}
 .preview-mode .topbar .brand{flex:0 1 84px;min-width:55px;line-height:1.25;font-size:10px}
 .preview-mode .topbar .mark{font-size:10px;padding:6px 7px}
 .preview-mode .topbar .progress{flex:0 1 65px;min-width:45px}
 .preview-mode .topbar .progress .count{font-size:10px}
 .preview-mode .preview-badge{flex:0 1 105px;min-width:78px;white-space:normal;font-size:10px;line-height:1.23;padding:5px}
 .preview-mode .footer .status{display:none}
 .preview-mode .footer .button{font-size:12px;padding:8px 9px}
}

/* v1.1.4 standard: Test Mode uses the ordinary login with student_id=TEST only. */
#identityFields[hidden], #testNotice[hidden]{display:none!important}
#testNotice{border:2px solid #bd6524;background:#fff2e6;color:#73380b;padding:13px 16px;margin:13px 0;border-radius:12px}
#testNotice p{margin:3px 0 0}
.preview-mode .preview-badge{background:#8b2b22;color:#fff;border-color:#8b2b22;font-weight:900}
.preview-mode .panel-head{border-top:5px solid #b94d31}
.preview-mode .preview-summary{border:2px solid #bb5633;background:#fff4eb}
@media(max-width:740px){.preview-mode .preview-badge{line-height:1.23;font-size:10px}}