:root{--ink:#23283d;--muted:#9297aa;--line:#eceef3;--primary:#605de1;--font:'IBM Plex Sans Thai',sans-serif}*{box-sizing:border-box}body{margin:0;background:#f6f7fa;color:var(--ink);font:14px var(--font)}button,select,input{font:inherit}button{cursor:pointer}.sidebar{position:fixed;inset:0 auto 0 0;width:245px;background:#fff;border-right:1px solid var(--line);padding:25px 17px 14px;display:flex;flex-direction:column;z-index:5}.brand{display:flex;align-items:center;gap:9px;padding:4px 8px;color:#22263b;text-decoration:none;font:800 20px Manrope,sans-serif}.brand-mark{width:29px;height:29px;display:grid;place-items:center;border-radius:9px;background:#6864e7;color:#fff}.brand-dot{color:#6562e8;margin-left:-8px}.school-switch{display:flex;align-items:center;gap:10px;padding:12px 9px;margin:26px 0;border:1px solid var(--line);border-radius:10px}.school-switch>div:nth-child(2){flex:1}.school-avatar,.profile-avatar,.top-avatar{display:grid;place-items:center;border-radius:9px;width:34px;height:34px;background:#efefff;color:#5b59d6;font-weight:700}.school-switch strong,.profile strong{display:block;font-size:12px}.school-switch small,.profile small{display:block;color:#9b9fb0;font-size:12px;margin-top:2px}.nav-caption{padding:0 10px 9px;color:#a2a5b3;font-size:12px}.spaced{margin-top:27px}.sidebar nav{display:grid;gap:4px}.nav-item{height:40px;width:100%;border:0;background:transparent;color:#777c90;border-radius:8px;text-align:left;padding:0 11px;font-size:12px}.nav-item.active{background:#f0efff;color:#5956db;font-weight:600}.nav-item i,.nav-item b{float:right}.sidebar-bottom{margin-top:auto}.help-card{background:#f6f6ff;border:1px solid #efefff;border-radius:11px;padding:13px}.help-card strong{font-size:12px}.help-card p{font-size:12px;color:#9296a9}.help-card button,.text-button{border:0;background:none;color:#5c59d7;font-size:12px}.profile{display:flex;align-items:center;gap:9px;padding:14px 4px 0;margin-top:12px;border-top:1px solid #f0f1f4}.profile>div:nth-child(2){flex:1}.profile-avatar,.top-avatar{border-radius:50%;background:#dafeff;color:#36b7bb}.main-area{margin-left:245px;min-height:100vh}.topbar{height:64px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 38px}.breadcrumbs,.top-actions{color:#969aac;font-size:12px}.top-actions{display:flex;align-items:center;gap:15px}.top-actions select{border:0;background:transparent}.icon-button{border:0;background:none}.top-avatar{width:30px;height:30px;display:grid;place-items:center}.mobile-menu{display:none}.page-content{max-width:1420px;margin:auto;padding:30px 38px}.welcome-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px}.eyebrow,.welcome-row p,.section-heading p,.panel-heading p{color:#969aac;font-size:12px;margin:4px 0}.welcome-row h1{font-size:22px;margin:0}.welcome-row h1 span{color:#50f9ff}.primary-button{height:37px;padding:0 14px;background:var(--primary);border:0;border-radius:8px;color:#fff;font-size:12px;font-weight:600}.summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.summary-card{height:146px;background:#fff;border:1px solid var(--line);border-radius:11px;padding:15px;position:relative;overflow:hidden;color:#818699;font-size:12px}.summary-card>div:first-child{display:flex;align-items:center;justify-content:space-between}.metric-icon{width:27px;height:27px;display:grid;place-items:center;border-radius:8px}.violet{color:#726fe1;background:#f0efff}.blue{color:#5595d5;background:#eaf4fd}.amber{color:#2ce2e8;background:#e4feff}.green{color:#38a27e;background:#e8f7f0}.summary-card>strong{display:inline-block;margin-top:7px;font:700 27px Manrope,sans-serif;color:#252a3e}.summary-card em{font-style:normal;font-size:12px;color:#3eaa81;background:#e9f7f0;padding:3px 6px;border-radius:20px}.summary-card em.warn{background:#e4feff;color:#2ae3ea}.summary-card>small{display:block;font-size:12px;color:#a0a3b1;margin-top:3px}.bars{position:absolute;bottom:12px;left:15px;right:15px;height:20px;display:flex;align-items:end;gap:4px}.bars i{height:8px;flex:1;border-radius:3px 3px 0 0;background:#e3e2ff}.bars i:nth-child(3n){height:12px}.bars i:nth-child(4n){height:15px}.bars i:nth-child(7n){height:19px;background:#7774e7}.avatar-stack{margin-top:14px;color:#78639a;background:#f5f1fc;border-radius:20px;width:max-content;padding:4px 7px}.progress{height:5px;background:#f0f1f6;border-radius:5px;margin-top:13px}.progress i{display:block;width:73%;height:100%;background:#49f2f7;border-radius:5px}.spark{position:absolute;bottom:9px;color:#39a985;font:700 25px Manrope,sans-serif}.section-heading{display:flex;align-items:end;justify-content:space-between;margin-top:28px}.section-heading h2,.panel h2{font-size:14px;margin:0}.class-filters{display:flex;gap:6px;margin:15px 0 12px}.class-filter{border:1px solid transparent;background:transparent;color:#9296a8;border-radius:7px;padding:6px 10px;font-size:12px}.class-filter.active{background:#fff;color:#5755cf;border-color:#e5e4fb}.class-filter span{color:#a3a6b5}.course-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.course-card{border:1px solid var(--line);background:#fff;border-radius:11px;padding:13px;min-width:0}.course-top{display:flex;justify-content:space-between}.course-symbol{width:34px;height:34px;border-radius:10px;display:grid;place-items:center}.lavender{background:#f0efff;color:#716de1}.mint{background:#eaf7f0;color:#46a880}.peach{background:#e6feff;color:#40e4ea}.sky{background:#ebf4ff;color:#5995da}.course-title{font-size:12px;margin:11px 0 1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.course-code{font:12px Manrope,sans-serif;color:#a3a6b4}.course-tags{display:flex;gap:5px;margin-top:10px}.course-tag{padding:3px 7px;border-radius:5px;font-size:12px;color:#777b8e;background:#f5f6f9}.course-tag.grade{color:#5e5bd4;background:#f0efff}.course-bottom{display:flex;justify-content:space-between;border-top:1px solid #f0f1f5;margin-top:12px;padding-top:9px;color:#9296a7;font-size:12px}.course-bottom b{color:#50556a}.lower-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:20px}.panel{background:#fff;border:1px solid var(--line);border-radius:11px;padding:15px;min-width:0}.panel-heading{display:flex;justify-content:space-between;margin-bottom:8px}.agenda-item{height:49px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #f2f3f6;font-size:12px}.agenda-item time{width:34px}.agenda-item time small,.agenda-item>div small{display:block;color:#a3a6b4;font-size:12px}.agenda-item>i{width:3px;height:27px;border-radius:3px}.teal{background:#54b394}.purple{background:#8b83eb}.orange{background:#54f1f6}.agenda-item>div{flex:1}.tag{font-size:12px;color:#888;background:#f5f6f9;padding:4px;border-radius:5px}.task-row{height:52px;border-bottom:1px solid #f2f3f6;display:flex;align-items:center;position:relative;font-size:12px;padding-left:4px}.task-row>small{position:absolute;left:31px;bottom:4px;color:#a0a3b1;font-size:12px}.task-row>b{margin-left:auto;text-align:center}.task-row>b small{display:block}.panel>.text-button{margin-top:9px}.empty-state{padding:50px;text-align:center;color:#969aac;background:#fff;border:1px solid var(--line);border-radius:10px}.empty-state>span{display:block;font-size:28px}footer{display:flex;justify-content:space-between;padding:18px 2px;color:#adb0bc;font-size:12px}.alt-toolbar{display:flex;gap:9px;margin:20px 0}.search-box{height:37px;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:0 11px;min-width:230px}.search-box input{border:0;outline:0}.alt-select{height:37px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:0 11px}.data-table{width:100%;border-collapse:collapse;background:#fff}.data-table th,.data-table td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);font-size:12px}.data-table th{background:#fbfbfd;color:#969aab}.status-pill{padding:4px 8px;border-radius:5px;font-size:12px;background:#eaf7f0;color:#45a17c}.status-pill.pending{background:#e2feff;color:#38d5db}.modal-backdrop{position:fixed;inset:0;background:#1c203866;z-index:20;display:grid;place-items:center;padding:16px}.modal-backdrop[hidden],section[hidden]{display:none}.modal{position:relative;background:#fff;width:min(100%,430px);border-radius:15px;padding:25px}.modal-close{position:absolute;right:15px;top:12px;border:0;background:none;font-size:23px}.modal h2{font-size:17px}.modal p{font-size:12px;color:#999dae}.modal form{display:grid;gap:12px}.modal label{display:grid;gap:5px;font-size:12px}.modal input,.modal select{height:37px;padding:0 10px;border:1px solid #e8e9ef;border-radius:7px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.modal-actions{display:flex;justify-content:flex-end;gap:8px}.secondary-button{height:37px;padding:0 13px;border:1px solid #e8e9ef;border-radius:7px;background:#fff}.toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,15px);padding:10px 16px;border-radius:8px;background:#242940;color:#fff;font-size:12px;opacity:0;transition:.2s;z-index:30}.toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:1100px){.sidebar{width:220px}.main-area{margin-left:220px}.page-content{padding:24px}.summary-grid,.course-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.lower-grid{grid-template-columns:1fr}}@media(max-width:700px){.sidebar{transform:translateX(-100%);transition:transform .2s}.sidebar.open{transform:translateX(0);box-shadow:10px 0 35px #20253a1a}.main-area{margin-left:0}.mobile-menu{display:block}.topbar{height:57px;padding:0 14px}.page-content{padding:22px 14px}.welcome-row h1{font-size:17px}.welcome-row>.primary-button{font-size:0;width:38px;padding:0}.summary-grid,.course-grid{gap:8px}.summary-card{height:135px;padding:11px}.class-filters{overflow:auto;white-space:nowrap}.class-filter{flex:none}.lower-grid{grid-template-columns:1fr}.data-table{min-width:590px}#alternatePage{overflow:auto}}@media(max-width:370px){.summary-grid,.course-grid{grid-template-columns:1fr}}
/* อ่านง่ายขึ้น */
body{font-size:16px}.nav-item{font-size:14px}.nav-caption{font-size:12px}.school-switch strong,.profile strong{font-size:13px}.school-switch small,.profile small{font-size:12px}.breadcrumbs,.top-actions,.eyebrow{font-size:12px}.welcome-row h1{font-size:26px}.welcome-row p,.section-heading p,.panel-heading p{font-size:12px}.summary-card{font-size:12px}.summary-card>strong{font-size:30px}.summary-card>small{font-size:12px}.summary-card em{font-size:12px}.section-heading h2,.panel h2{font-size:16px}.class-filter{font-size:12px}.course-title{font-size:14px}.course-code,.course-tag,.course-bottom{font-size:12px}.agenda-item{font-size:12px}.agenda-item time{font-size:12px}.agenda-item>div small,.agenda-item time small{font-size:12px}.task-row{font-size:12px}.task-row>small{font-size:12px}.text-button,.help-card button{font-size:12px}.help-card strong{font-size:13px}.help-card p{font-size:12px}.data-table th,.data-table td{font-size:12px}.alt-select,.search-box input,.modal label,.modal input,.modal select,.secondary-button,.primary-button{font-size:12px}.modal>p{font-size:12px}.status-pill{font-size:12px}footer{font-size:12px}
@media(max-width:700px){.welcome-row h1{font-size:21px}.nav-item{font-size:14px}.course-title{font-size:13px}.summary-card>small,.course-code,.course-tag,.course-bottom{font-size:12px}.class-filter{font-size:12px}}

/* ธีมสีน้ำตาล */
:root{--ink:#233c3d;--muted:#679192;--line:#d4ebec;--primary:#3f8082}
body{background:#f0f8f8;color:#233c3d}
.sidebar,.topbar,.panel,.summary-card,.course-card,.modal,.data-table,.search-box,.alt-select,.class-filter.active{background-color:#faffff;border-color:#d4ebec}
.brand{color:#233c3d}.brand-mark,.primary-button{background:#3f8082}.brand-dot,.help-card button,.text-button,.agenda-link{color:#3f8082}
.nav-item.active{background:#e1f5f5;color:#347779}.nav-item:hover{background:#eaf8f9;color:#347779}
.school-avatar,.metric-icon.violet,.metric-icon.blue,.metric-icon.amber,.metric-icon.green,.course-symbol.lavender,.course-symbol.mint,.course-symbol.peach,.course-symbol.sky,.course-tag.grade{background:#dcf3f4;color:#367d80}
.class-filter.active{color:#347779;border-color:#c0e8e9}.class-filter.active span,.course-tag.grade{color:#3f8082}
.task-icon.paper,.task-icon.quiz,.task-icon.book{background:#dcf3f4;color:#3f8082}
.status-pill,.agenda-tag.ongoing{background:#e0f4f4;color:#3f8082}
.progress i{background:#53b2b5}.bars i{background:#c9ebec}.bars i:nth-child(7n){background:#4fa4a7}.summary-card em{background:#e0f4f4;color:#3f8082}
.help-card{background:#eaf8f9;border-color:#d6f0f1}
.course-card:hover{border-color:#aededf}
.modal-icon{background:#dcf3f4;color:#3f8082}
@media(max-width:700px){.sidebar.open{box-shadow:10px 0 35px #392d271a}}
.footer-links{display:flex;gap:16px}.footer-links button{border:0;background:none;color:#3f8082;font:inherit;cursor:pointer}.footer-links button:hover{text-decoration:underline}.policy-content,.faq-list{max-width:850px;background:#faffff;border:1px solid #d4ebec;border-radius:12px;padding:24px;margin-top:20px;color:#365657}.policy-content h2,.faq-list h2{font-size:22px;margin:8px 0 16px}.policy-content h3{font-size:16px;margin:22px 0 6px;color:#3f8082}.policy-content p,.faq-list p{font-size:14px;line-height:1.85;color:#567779}.notice-banner,.policy-note{padding:11px 13px;background:#e1f5f5;border-radius:8px;color:#3f8082;font-size:12px}.faq-list details{border-top:1px solid #d4ebec;padding:14px 2px}.faq-list summary{cursor:pointer;font-size:14px;font-weight:600;color:#336667}.faq-list details p{margin:10px 0 0}@media(max-width:700px){footer{flex-wrap:wrap;gap:10px}.footer-links{width:100%;gap:14px}.policy-content,.faq-list{padding:16px}.policy-content h2,.faq-list h2{font-size:19px}}
.photo-hint{font-size:12px;color:#679091;margin:-8px 0 10px}.student-photo-slot{position:relative;display:inline-grid;place-items:center;vertical-align:middle;width:32px;height:32px;margin-right:9px;border:1px dashed #8dc3c5;border-radius:50%;background:#eaf8f9;color:#3f8082;overflow:hidden}.student-photo-slot input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:2}.student-photo-slot img{width:100%;height:100%;object-fit:cover;border-radius:50%}.student-photo-slot img[hidden],.student-photo-slot span[hidden]{display:none}
/* ตราสัญลักษณ์และหน้าฟีเจอร์ครู */
.sidebar{overflow-y:auto}.brand{gap:10px;align-items:center;letter-spacing:0}.brand-mark{position:relative;flex:0 0 43px;width:43px;height:43px;overflow:hidden;border-radius:50%;background:#6f392f;border:2px solid #48bec2}.brand-mark img{position:absolute;width:200%;height:200%;max-width:none;left:-50%;top:-50%;object-fit:contain}.brand-title{font:700 12px/1.45 var(--font);letter-spacing:0;color:#233c3d}.progress-toolbar{display:flex;align-items:center;gap:10px;margin:18px 0}.sample-label{display:inline-block;padding:5px 9px;background:#dcf3f4;color:#3f8082;border-radius:6px;font-size:12px;font-weight:600}.progress-toolbar .search-box{margin-left:auto}.learner-progress-grid,.learning-game-grid,.assessment-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.learner-progress-card,.learning-game-card,.assessment-card,.lesson-plan-card{background:#faffff;border:1px solid #d4ebec;border-radius:11px;padding:16px}.learner-heading{display:flex;align-items:center;gap:10px;padding-bottom:13px;border-bottom:1px solid #dcf0f1}.learner-avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#dcf3f4;color:#3f8082;font-size:17px}.learner-heading>div{display:grid;gap:2px;flex:1}.learner-heading strong{font-size:13px}.learner-heading small,.assessment-card small{color:#679192;font-size:12px}.growth-tag{padding:4px 8px;color:#3f8082;background:#e1f5f5;border-radius:16px;font-size:12px}.learner-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:13px 0}.learner-stats div{display:grid;gap:3px}.learner-stats span,.progress-caption{font-size:12px;color:#679192}.learner-stats b,.progress-caption b{font-size:12px;color:#294849}.progress-caption{display:flex;justify-content:space-between;margin:5px 0}.learner-track{height:7px;border-radius:8px;background:#dcf0f1;overflow:hidden}.learner-track i{display:block;height:100%;border-radius:8px;background:#4fa4a7}.task-progress{margin-top:10px}.feature-intro{margin:16px 0}.feature-intro p{font-size:13px;color:#679192;margin:8px 0}.learning-game-card{min-height:200px}.game-card-top{display:flex;justify-content:space-between;align-items:center}.game-icon,.assessment-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:#dcf3f4;color:#3f8082;font-size:18px;font-weight:700}.learning-game-card h3,.assessment-card h3,.lesson-plan-card h3{font-size:15px;margin:13px 0 4px}.game-lesson{font-size:12px;color:#679192}.game-play{margin-top:12px;border-top:1px solid #dcf0f1;padding-top:10px}.game-play summary{cursor:pointer;color:#3f8082;font-size:12px;font-weight:600}.game-play p{font-size:12px;line-height:1.6}.game-answer{display:block;width:100%;text-align:left;padding:8px 10px;border:1px solid #d4ebec;border-radius:7px;margin:6px 0;background:#fff;color:#365657;font-size:12px}.game-answer:hover{background:#eaf8f9}.game-feedback{display:block;font-size:12px;color:#a64d3f;margin-top:8px}.game-feedback.correct{color:#577b48}.lesson-plan-list{display:grid;gap:10px}.lesson-plan-card{display:flex;align-items:flex-start;gap:13px}.plan-index{width:34px;height:34px;flex:none;display:grid;place-items:center;background:#dcf3f4;color:#3f8082;border-radius:9px}.plan-main{flex:1}.plan-main h3{margin:0}.plan-main p{font-size:12px;color:#679192;margin:4px 0 9px}.plan-meta{display:grid;gap:4px;color:#476c6d;font-size:12px}.assessment-card{position:relative}.assessment-card>.course-tag{position:absolute;right:14px;top:16px}.assessment-card p{font-size:12px;line-height:1.65;color:#679192;min-height:42px}.assessment-card small{display:block;border-top:1px solid #dcf0f1;padding-top:9px}.sample-label{white-space:nowrap}
@media(max-width:700px){.brand-mark{flex-basis:39px;width:39px;height:39px}.brand-title{font-size:12px}.progress-toolbar{flex-wrap:wrap}.progress-toolbar .search-box{margin-left:0;min-width:100%}.learner-progress-grid,.learning-game-grid,.assessment-grid{grid-template-columns:1fr}.learner-progress-card,.learning-game-card,.assessment-card{padding:13px}.lesson-plan-card{padding:12px;gap:9px}.plan-meta{font-size:12px}}
/* จัดตำแหน่งปุ่มสร้างห้องเรียนและปรับสัดส่วนโลโก้ */
.brand-mark{flex-basis:48px;width:48px;height:48px}.brand-mark img{object-fit:cover}.brand-title{max-width:150px}.section-actions{display:flex;align-items:center;gap:14px}.section-actions .primary-button,.create-room-button{white-space:nowrap}.alt-toolbar .create-room-button{margin-left:auto}@media(max-width:700px){.brand-mark{flex-basis:42px;width:42px;height:42px}.section-heading{align-items:flex-start;gap:10px}.section-actions{align-items:flex-end;flex-direction:column-reverse;gap:5px}.section-actions .primary-button{height:34px;padding:0 10px;font-size:12px}.section-actions .text-button{font-size:12px}.alt-toolbar .create-room-button{margin-left:0}.alt-toolbar{flex-wrap:wrap}}
/* แสดงตราที่ครอปพอดีจากภาพต้นฉบับโดยไม่ตัดขอบวงกลม */
.brand-mark{width:48px;height:48px;flex:0 0 48px;border-radius:50%;overflow:hidden;background:#6f392f}.brand-mark img{position:static;display:block;width:100%;height:100%;max-width:100%;object-fit:cover;object-position:center}.brand-mark img{border-radius:50%}
@media(max-width:700px){.brand-mark{width:42px;height:42px;flex-basis:42px}}
/* ครอปตราจากไฟล์ต้นฉบับโดยตรง เพื่อรองรับการเปิดเว็บแบบ file:// */
.brand-mark{position:relative;overflow:hidden;border-radius:50%;background:#6f392f}.brand-mark img{position:absolute;left:50%;top:50%;width:360%;height:auto;max-width:none;transform:translate(-50%,-50%);object-fit:initial;border-radius:0}
@media(max-width:700px){.brand-mark img{width:360%}}
/* ใช้ตราทั้งวงจาก Logo.png โดยตัดเฉพาะพื้นที่สีดำรอบภาพ */
.brand-mark{width:56px;height:56px;flex:0 0 56px;position:relative;overflow:hidden;border-radius:50%;background:#6f392f;border:2px solid #48bec2}.brand-mark img{display:block;position:static;width:100%;height:100%;max-width:100%;transform:none;object-fit:cover;object-position:center;border-radius:50%}
@media(max-width:700px){.brand-mark{width:50px;height:50px;flex-basis:50px}}
.scheme-toolbar{display:flex;align-items:center;gap:12px;margin:18px 0}.scheme-term{font-size:12px;color:#3f8082}.scheme-list{display:grid;gap:12px;max-width:980px}.scheme-card{background:#faffff;border:1px solid #d4ebec;border-radius:11px;padding:16px}.scheme-course{font-size:12px;color:#679192}.scheme-title-row{display:flex;align-items:center;gap:10px;margin:8px 0 13px}.scheme-title-row h3{font-size:15px;margin:0;flex:1}.scheme-unit{padding:5px 8px;border-radius:7px;background:#dcf3f4;color:#3f8082;font-size:12px;white-space:nowrap}.scheme-hours{color:#3f8082;font-size:12px;white-space:nowrap}.scheme-details{display:grid;grid-template-columns:.7fr 1.6fr 1.1fr;gap:12px;border-top:1px solid #dcf0f1;padding-top:11px}.scheme-details div{display:grid;gap:4px}.scheme-details small{font-size:12px;color:#679192}.scheme-details b{font-size:12px;font-weight:500;color:#365657}@media(max-width:700px){.scheme-toolbar{flex-wrap:wrap}.scheme-title-row{flex-wrap:wrap}.scheme-title-row h3{min-width:65%}.scheme-details{grid-template-columns:1fr;gap:8px}.scheme-details div{grid-template-columns:110px 1fr;align-items:start}}

/* ฟอนต์ Google Fonts ที่อ่านง่ายและตัวอักษรใหญ่ขึ้น */
body{font-family:'Noto Sans Thai','Source Sans 3',sans-serif;font-size:17px;line-height:1.55;color:#233c3d}
.brand-title{font-size:13px}.nav-item{font-size:14px;line-height:1.45}.nav-caption{font-size:12px}.school-switch strong,.profile strong{font-size:14px}.school-switch small,.profile small{font-size:12px}.breadcrumbs,.top-actions{font-size:12px}.top-actions select{font-size:13px}.welcome-row h1{font-size:27px;line-height:1.4}.welcome-row p,.section-heading p,.panel-heading p{font-size:13px;line-height:1.6}.section-heading h2,.panel h2{font-size:17px}.primary-button,.secondary-button{font-size:13px}.class-filter{font-size:13px}.summary-card{font-size:13px}.summary-card>strong{font-size:31px}.summary-card>small{font-size:12px}.summary-card em{font-size:12px}.course-title{font-size:15px}.course-code,.course-tag,.course-bottom{font-size:12px}.agenda-item{font-size:13px}.agenda-item time{font-size:12px}.agenda-item>div small,.agenda-item time small{font-size:12px}.tag,.status-pill{font-size:12px}.task-row{font-size:13px}.task-row>small{font-size:12px}.text-button,.help-card button{font-size:13px}.help-card strong{font-size:14px}.help-card p{font-size:13px}.data-table th,.data-table td{font-size:13px}.modal label,.modal input,.modal select,.modal>p{font-size:13px}.policy-content p,.faq-list p{font-size:15px}.faq-list summary{font-size:15px}.learner-heading strong,.scheme-title-row h3,.learning-game-card h3,.assessment-card h3,.lesson-plan-card h3{font-size:16px}.learner-stats span,.progress-caption,.game-play p,.game-answer,.plan-meta,.scheme-details b{font-size:12px}
@media(max-width:700px){body{font-size:16px}.nav-item{font-size:14px}.brand-title{font-size:12px}.welcome-row h1{font-size:22px}.welcome-row p{font-size:12px}.section-heading h2,.panel h2{font-size:16px}.class-filter{font-size:12px}.course-title{font-size:14px}.course-code,.course-tag,.course-bottom{font-size:12px}.summary-card>small{font-size:12px}.summary-card>strong{font-size:28px}.agenda-item,.task-row{font-size:12px}.data-table th,.data-table td{font-size:12px}.policy-content p,.faq-list p{font-size:14px}}
.scheme-toolbar>div{display:flex;align-items:center;gap:12px}.scheme-filters{display:grid;grid-template-columns:minmax(150px,200px) minmax(180px,260px) minmax(220px,1fr);gap:10px;margin:14px 0}.scheme-create-form{background:#faffff;border:1px solid #b2e1e3;border-radius:12px;padding:16px;margin:14px 0}.scheme-create-form[hidden]{display:none}.scheme-form-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px;color:#2b5253}.scheme-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.scheme-form-grid label{display:grid;gap:5px;color:#486e6f;font-size:12px}.scheme-form-grid input,.scheme-form-grid select{height:38px;padding:0 10px;border:1px solid #cae7e8;border-radius:7px;background:#fff;color:#365657;font:inherit}.scheme-form-actions{display:flex;align-items:center;justify-content:space-between;margin-top:14px}.form-hint{font-size:12px;color:#679192}.scheme-card-head{display:flex;align-items:start;justify-content:space-between;gap:12px}.scheme-card-head h3{font-size:15px;margin:5px 0 0}.scheme-unit-list{display:grid;margin-top:12px;border-top:1px solid #dcf0f1}.scheme-unit-row{display:grid;grid-template-columns:auto minmax(160px,1.2fr) minmax(120px,.65fr) minmax(180px,1.5fr);align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid #e3f3f3}.scheme-unit-row strong{font-size:12px;color:#365657}.scheme-unit-row>span:not(.scheme-unit),.scheme-unit-row small{font-size:12px;color:#679192}.scheme-empty{font-size:12px;color:#679192;margin:12px 0 0}
@media(max-width:700px){.scheme-toolbar{align-items:flex-start}.scheme-toolbar>div{align-items:flex-start;flex-direction:column;gap:5px}.scheme-filters{grid-template-columns:1fr}.scheme-form-grid{grid-template-columns:1fr}.scheme-form-actions{align-items:flex-start;flex-direction:column;gap:10px}.scheme-unit-row{grid-template-columns:auto 1fr;gap:7px}.scheme-unit-row>span:not(.scheme-unit),.scheme-unit-row small{grid-column:2}.scheme-card-head h3{font-size:14px}}
.discussion-toolbar{display:flex;align-items:center;gap:12px;margin:18px 0}.discussion-compose,.discussion-card{display:flex;background:#faffff;border:1px solid #d4ebec;border-radius:12px;padding:16px;gap:12px}.discussion-compose{margin-bottom:14px}.compose-avatar,.discussion-avatar,.comment-avatar{display:grid;place-items:center;flex:none;border-radius:50%;background:#dcf3f4;color:#3f8082;font-weight:600}.compose-avatar,.discussion-avatar{width:38px;height:38px}.compose-fields{flex:1;min-width:0;display:grid;gap:9px}.compose-fields input,.compose-fields textarea,.reply-form input{width:100%;border:1px solid #d4ebec;border-radius:8px;padding:9px 11px;background:#fff;color:#294849;font:inherit;font-size:13px}.compose-fields textarea{resize:vertical}.compose-actions{display:flex;align-items:center;justify-content:space-between}.compose-actions select{height:36px;max-width:75%;border:1px solid #d4ebec;border-radius:7px;background:#fff;color:#365657;padding:0 9px;font:inherit;font-size:12px}.discussion-feed{display:grid;gap:12px}.discussion-card{display:block;padding:16px}.discussion-card header{display:flex;align-items:center;gap:9px}.discussion-by{display:grid;gap:2px}.discussion-by strong,.comment-row strong{font-size:13px}.discussion-by small{font-size:12px;color:#679192}.discussion-card h3{font-size:16px;margin:13px 0 5px}.discussion-body{font-size:13px;line-height:1.7;color:#365657;margin:0 0 14px;white-space:normal}.comment-list{border-top:1px solid #dcf0f1;padding-top:8px}.comment-row{display:flex;align-items:flex-start;gap:8px;padding:8px 0}.comment-avatar{width:28px;height:28px;font-size:12px}.comment-row p{font-size:12px;line-height:1.55;margin:2px 0 0;color:#486e6f;white-space:pre-wrap}.reply-form{display:flex;gap:8px;align-items:center;margin:7px 0 0 36px}.reply-form input{flex:1}.reply-form button{border:0;background:none;color:#3f8082;font:inherit;font-size:12px;white-space:nowrap}.reply-form button:hover{text-decoration:underline}@media(max-width:700px){.discussion-toolbar{align-items:flex-start;flex-direction:column}.discussion-toolbar select{width:100%}.discussion-compose,.discussion-card{padding:12px;gap:8px}.compose-avatar{width:32px;height:32px}.discussion-card h3{font-size:15px}.discussion-body{font-size:12px}.reply-form{margin-left:0}.compose-actions{align-items:flex-end;gap:8px}.compose-actions select{max-width:70%;font-size:12px}}
.pdf-upload-label{display:grid;gap:6px;padding:11px;border:1px dashed #8dc3c5;border-radius:8px;background:#f3fdfd;color:#486e6f;font-size:12px}.pdf-upload-label input{font-size:12px}.pdf-upload-label span{font-size:12px;color:#3f8082;overflow-wrap:anywhere}.pdf-upload-label small{font-size:12px;color:#679192}.plan-pdf-link{display:inline-flex;align-items:center;gap:5px;color:#3f8082;font-size:12px;text-decoration:underline;overflow-wrap:anywhere}
.report-toolbar{display:flex;align-items:center;gap:10px;margin:17px 0}.report-toolbar .scheme-term{margin-right:auto}.report-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:12px 0}.report-summary article,.report-panel{background:#faffff;border:1px solid #d4ebec;border-radius:11px}.report-summary article{display:grid;gap:4px;padding:13px 15px}.report-summary small{color:#679192;font-size:12px}.report-summary strong{font:700 23px 'Source Sans 3','Noto Sans Thai',sans-serif;color:#2b5253}.report-panel{padding:15px;margin:12px 0}.report-heading h2{font-size:16px;margin:0}.report-heading p{font-size:12px;color:#679192;margin:4px 0 12px}.report-table-wrap{overflow:auto}.report-table-wrap .data-table{min-width:680px}.report-table-wrap .data-table td strong{color:#365657}.report-empty{text-align:center;color:#679192;padding:25px!important}.followup-list{display:grid;gap:8px}.followup-card{display:flex;align-items:center;gap:10px;padding:11px;border:1px solid #dcf0f1;border-radius:9px}.followup-avatar{width:30px;height:30px;display:grid;place-items:center;flex:none;border-radius:50%;background:#dcf9fa;color:#a64d3f;font-weight:700}.followup-info{display:grid;gap:2px;flex:1}.followup-info strong{font-size:12px}.followup-info span,.followup-info p{font-size:12px;color:#679192;margin:0}.pending-count{padding:4px 8px;border-radius:14px;background:#dcf9fa;color:#a64d3f;font-size:12px;white-space:nowrap}@media(max-width:700px){.report-toolbar{flex-wrap:wrap}.report-toolbar .scheme-term{margin-right:0}.report-toolbar select{width:100%}.report-summary{gap:7px}.report-summary article{padding:10px}.report-summary small{font-size:12px}.report-summary strong{font-size:20px}.report-panel{padding:11px}.followup-card{align-items:flex-start}.pending-count{font-size:12px}}
.pending-task-list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:5px}.pending-task-list li{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:7px 9px;border-radius:7px;background:#f1fbfb;color:#375a5b;font-size:12px}.pending-task-list li>span{flex:1}.pending-task-list time{white-space:nowrap;color:#3f8082;font-size:12px;font-weight:600}.pending-task-list time.overdue{color:#b34c3b}@media(max-width:700px){.pending-task-list li{flex-direction:column;gap:3px}.pending-task-list time{white-space:normal}}
.library-toolbar,.library-filters{display:flex;align-items:center;gap:10px;margin:15px 0}.library-toolbar .primary-button{margin-left:auto}.library-filters .search-box{flex:1}.resource-form{background:#faffff;border:1px solid #b2e1e3;border-radius:12px;padding:16px;margin:14px 0}.resource-form[hidden],#resourcePdfField[hidden],#resourceYoutubeField[hidden]{display:none}.resource-form-heading,.resource-form-actions{display:flex;align-items:center;justify-content:space-between;gap:10px}.resource-form-heading{margin-bottom:12px}.resource-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.resource-form-grid label{display:grid;gap:5px;color:#486e6f;font-size:12px}.resource-form-grid input,.resource-form-grid textarea,.resource-form-grid select{border:1px solid #cae7e8;border-radius:7px;background:#fff;color:#365657;padding:9px 10px;font:inherit;font-size:13px}.resource-form-grid textarea{resize:vertical}.resource-span{grid-column:1/-1}.resource-form-grid small{font-size:12px;color:#679192}.resource-form-actions{margin-top:13px}.resource-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.resource-card{background:#faffff;border:1px solid #d4ebec;border-radius:11px;padding:14px;min-width:0}.resource-card-top{display:flex;justify-content:space-between;align-items:center}.resource-icon{width:35px;height:35px;display:grid;place-items:center;border-radius:9px;background:#dcf3f4;color:#3f8082}.resource-icon.video{background:#dcf9fa;color:#a64d3f}.resource-card h3{font-size:14px;margin:12px 0 5px}.resource-card p{font-size:12px;line-height:1.6;color:#679192;min-height:35px}.resource-course{font-size:12px;color:#3f8082;padding-top:8px;border-top:1px solid #dcf0f1}.resource-empty-file{font-size:12px;color:#679192;background:#f1fbfb;border-radius:7px;padding:9px;margin-top:9px}.resource-file-link{display:block;margin-top:9px;color:#3f8082;font-size:12px;overflow-wrap:anywhere}.youtube-frame{position:relative;aspect-ratio:16/9;margin-top:10px;background:#172121;border-radius:8px;overflow:hidden}.youtube-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media(max-width:900px){.resource-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:700px){.library-toolbar,.library-filters{align-items:stretch;flex-direction:column}.library-toolbar .primary-button{margin:0}.library-filters select{width:100%}.resource-form-grid{grid-template-columns:1fr}.resource-span{grid-column:auto}.resource-form-actions{align-items:flex-start;flex-direction:column}.resource-grid{grid-template-columns:1fr}}
.assignment-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:18px 0}.assignment-toolbar p{color:#679192;font-size:13px;margin:5px 0}.assignment-form{background:#faffff;border:1px solid #b2e1e3;border-radius:12px;padding:17px;margin:14px 0}.assignment-form[hidden]{display:none}.assignment-form-head,.assignment-form-actions{display:flex;justify-content:space-between;align-items:center;gap:10px}.assignment-form-head{margin-bottom:14px;color:#2b5253}.assignment-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.assignment-form-grid label{display:grid;gap:6px;color:#486e6f;font-size:13px}.assignment-form-grid input,.assignment-form-grid select{min-height:40px;border:1px solid #cae7e8;border-radius:7px;background:#fff;padding:8px 10px;color:#365657;font:inherit}.assignment-form-grid small{font-size:12px;color:#679192}.assignment-span{grid-column:1/-1}.assignment-form-actions{margin-top:15px}.assignment-list{display:grid;gap:11px}.assignment-card{padding:15px 17px;background:#faffff;border:1px solid #d4ebec;border-radius:11px}.assignment-card-main,.assignment-card-title,.assignment-card-meta,.assignment-card-bottom{display:flex;align-items:center;gap:12px}.assignment-card-main{justify-content:space-between}.assignment-card-title{min-width:0}.assignment-symbol{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:10px;background:#dcf3f4;color:#3f8082}.assignment-card h3{font-size:15px;margin:0}.assignment-card p{font-size:12px;color:#679192;margin:4px 0 0}.assignment-card-meta{padding:12px 0;margin:12px 0;border-top:1px solid #e1f2f2;border-bottom:1px solid #e1f2f2}.assignment-card-meta>span{display:grid;gap:4px;font-size:12px;color:#365657}.assignment-card-meta small{font-size:12px;color:#679192}.assignment-countdown{margin-left:auto!important;color:#3f8082!important;font-weight:700}.assignment-countdown.overdue{color:#ae5142!important}.assignment-card-bottom{justify-content:space-between;font-size:12px;color:#679192}.assignment-card-bottom a{color:#3f8082;overflow-wrap:anywhere}.assignment-card-bottom b{color:#365657}@media(max-width:700px){.assignment-toolbar{align-items:stretch;flex-direction:column}.assignment-toolbar .primary-button{width:100%}.assignment-form-grid{grid-template-columns:1fr}.assignment-span{grid-column:auto}.assignment-form-actions{align-items:flex-start;flex-direction:column}.assignment-card-main{align-items:flex-start}.assignment-card-meta{align-items:flex-start;flex-wrap:wrap}.assignment-card-meta>span{min-width:42%}.assignment-countdown{margin-left:0!important}.assignment-card-bottom{align-items:flex-start;flex-direction:column}}
.exam-menu-parent{display:flex;align-items:center;justify-content:space-between}.exam-menu-parent span{margin-left:auto;color:#7badaf}.exam-subnav{display:grid;gap:3px;margin:0 0 4px 12px;padding-left:8px;border-left:2px solid #ccedee}.exam-subnav[hidden]{display:none}.exam-subnav .nav-item{height:auto;min-height:38px;padding:7px 9px;line-height:1.45;font-size:12px}.exam-subnav .nav-item.active{background:#e1f5f5;color:#347779}
.calendar-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin:17px 0}.calendar-stat-grid article,.calendar-panel,.calendar-settings,.exam-hub-card,.exam-date-panel,.exam-course-card{background:#faffff;border:1px solid #d4ebec;border-radius:11px}.calendar-stat-grid article{padding:14px;display:grid;gap:6px;min-height:96px}.calendar-stat-grid small,.calendar-stat-grid span{font-size:12px;color:#679192}.calendar-stat-grid strong{font-size:19px;color:#3f8082}.calendar-panel{padding:16px;margin:12px 0}.calendar-toolbar,.calendar-nav,.calendar-view-toggle{display:flex;align-items:center;gap:8px}.calendar-toolbar{justify-content:space-between;flex-wrap:wrap;margin-bottom:14px}.calendar-view-toggle{background:#e6f6f7;border-radius:8px;padding:3px}.calendar-view-toggle button,.calendar-nav button{border:0;background:transparent;border-radius:6px;padding:7px 10px;color:#437173;font:inherit;font-size:12px}.calendar-view-toggle button.active{background:#faffff;color:#3f8082;box-shadow:0 1px 3px #392d2718}.calendar-nav strong{font-size:14px;min-width:150px;text-align:center}.calendar-nav button{border:1px solid #d4ebec;background:#faffff;font-size:16px}.calendar-nav .calendar-today{font-size:12px}.calendar-weekdays,.calendar-month-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.calendar-weekdays span{text-align:center;padding:9px 2px;color:#679192;font-size:12px}.calendar-day{min-height:92px;padding:7px;border-top:1px solid #dcf0f1;border-right:1px solid #dcf0f1;min-width:0}.calendar-day:nth-child(7n){border-right:0}.calendar-day.outside{background:#f3fbfb}.calendar-day-number{font-size:12px;color:#386062}.calendar-day.is-today{background:#e6f6f7}.calendar-day.is-today .calendar-day-number{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#3f8082;color:white}.calendar-event{display:block;width:100%;margin-top:5px;padding:5px 6px;text-align:left;border:0;border-radius:5px;background:#daf4f5;color:#3f8082;font:inherit;font-size:12px;line-height:1.35;cursor:pointer}.calendar-event.final{background:#d9f1f2;color:#338083}.calendar-week-list{display:grid}.calendar-week-row{display:grid;grid-template-columns:160px 1fr;align-items:center;gap:12px;min-height:60px;padding:8px 10px;border-top:1px solid #dcf0f1}.calendar-week-row strong{font-size:12px;color:#386062}.calendar-week-row.is-today{background:#e6f6f7}.calendar-week-row>div{display:flex;gap:8px;flex-wrap:wrap}.calendar-week-row .calendar-event{width:auto;min-width:130px;margin:0}.calendar-settings{padding:15px;margin:12px 0}.calendar-settings h2{font-size:15px;margin:0}.calendar-settings p,.calendar-settings>small{color:#679192;font-size:12px}.calendar-settings-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:12px 0}.calendar-settings-grid label{display:grid;gap:5px;color:#486e6f;font-size:12px}.calendar-settings-grid input{height:39px;border:1px solid #cae7e8;border-radius:7px;background:#fff;padding:7px 9px;font:inherit}.exam-hub-intro p{font-size:13px;color:#679192}.exam-hub-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:17px 0}.exam-hub-card{padding:18px;display:grid;justify-items:start;gap:10px}.exam-card-icon{font-size:24px;color:#3f8082}.exam-hub-card h2{font-size:17px;margin:0}.exam-hub-card p{font-size:12px;color:#679192;margin:0}.exam-hub-card>strong{font-size:13px;color:#3f8082}.exam-prototype-note{padding:12px 14px;border-radius:8px;background:#e6f6f7;color:#3f8082;font-size:12px;line-height:1.6}.exam-access-header{display:grid;justify-items:start;gap:8px}.exam-access-header h2{font-size:22px;margin:4px 0 0}.exam-access-header p{font-size:12px;color:#679192;margin:0}.exam-date-panel{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px;margin:14px 0}.exam-date-panel>div{display:grid;gap:5px}.exam-date-panel small{font-size:12px;color:#679192}.exam-date-panel strong{font-size:16px;color:#365657}.exam-days-left{font-size:13px;font-weight:700;color:#3f8082}.exam-course-list{display:grid;gap:9px;margin:14px 0}.exam-course-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px}.exam-course-tag{font-size:12px;color:#3f8082}.exam-course-card h3{font-size:14px;margin:3px 0}.exam-course-card small{color:#679192;font-size:12px}.exam-course-card .secondary-button{color:#3f8082;border-color:#c0e8e9}
@media(max-width:900px){.calendar-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:700px){.calendar-stat-grid{gap:7px}.calendar-stat-grid article{padding:10px;min-height:86px}.calendar-stat-grid strong{font-size:16px}.calendar-panel{padding:9px}.calendar-toolbar{align-items:flex-start;flex-direction:column}.calendar-nav{width:100%;justify-content:space-between;gap:4px}.calendar-nav strong{min-width:0;flex:1;font-size:12px}.calendar-day{min-height:65px;padding:4px 2px}.calendar-day-number{font-size:12px}.calendar-event{padding:4px 2px;font-size:12px}.calendar-settings-grid{grid-template-columns:1fr}.calendar-week-row{grid-template-columns:92px 1fr;gap:6px;padding:7px 5px}.calendar-week-row .calendar-event{min-width:0;font-size:12px}.exam-hub-grid{grid-template-columns:1fr}.exam-hub-card{padding:14px}.exam-date-panel,.exam-course-card{align-items:flex-start;flex-direction:column}.exam-course-card .secondary-button{width:100%}}
.role-preview{display:grid;gap:6px;padding:10px 9px;margin:2px 0 14px;border:1px solid #d4ebec;border-radius:9px;background:#faffff}.role-preview label{font-size:12px;color:#3f8082;font-weight:700}.role-preview select{height:35px;width:100%;padding:0 9px;border:1px solid #cae7e8;border-radius:7px;background:#fff;color:#365657;font:inherit;font-size:12px}.role-preview small{font-size:12px;line-height:1.45;color:#679192}.role-hero,.role-info-card{padding:22px;background:#faffff;border:1px solid #d4ebec;border-radius:12px}.role-hero h2,.role-info-card h2{font-size:22px;color:#2b5253;margin:10px 0}.role-hero p,.role-info-card p{font-size:14px;color:#679192;line-height:1.7}.role-link-grid,.role-action-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:15px}.role-link-grid button{padding:12px 15px;border:1px solid #d4ebec;border-radius:9px;background:#faffff;color:#3f8082;font:inherit;cursor:pointer}.role-course-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin:14px 0}.role-course-grid article,.student-task-list article{padding:15px;background:#faffff;border:1px solid #d4ebec;border-radius:10px}.role-course-grid article>span{font-size:12px;color:#3f8082}.role-course-grid h3,.student-task-list h3{font-size:15px;color:#2b5253;margin:8px 0}.role-course-grid small,.student-task-list p,.student-task-list article>span{font-size:12px;color:#679192}.role-page-heading h2{font-size:20px;margin:8px 0 4px}.role-page-heading p{font-size:12px;color:#679192}.student-task-list{display:grid;gap:9px}.student-task-list article{display:flex;justify-content:space-between;align-items:center;gap:12px}.student-task-list p{margin:0}.demo-data-note{margin-top:14px;padding:11px 13px;border-radius:8px;background:#e6f6f7;color:#3f8082;font-size:12px;line-height:1.6}.role-action-row{align-items:center}@media(max-width:700px){.role-course-grid{grid-template-columns:1fr}.role-hero,.role-info-card{padding:16px}.role-hero h2,.role-info-card h2{font-size:18px}.student-task-list article{align-items:flex-start;flex-direction:column}}
.sidebar{overflow-y:auto}.role-preview{flex:none}
.login-menu-wrap{position:relative}.login-menu-button{height:36px;padding:0 12px;border:1px solid #c0e8e9;border-radius:8px;background:#faffff;color:#3f8082;font:inherit;font-size:12px;font-weight:700;white-space:nowrap}.login-menu-button span{margin-left:5px}.login-menu{position:absolute;right:0;top:calc(100% + 9px);z-index:15;width:260px;padding:12px;background:#faffff;border:1px solid #d4ebec;border-radius:11px;box-shadow:0 12px 30px #392d2720;display:grid;gap:5px}.login-menu[hidden]{display:none}.login-menu>strong{font-size:12px;color:#2b5253;padding:4px 7px 7px}.login-menu>button{width:100%;padding:9px 8px;text-align:left;border:0;border-radius:7px;background:transparent;color:#365657;font:inherit;font-size:12px}.login-menu>button:hover{background:#e6f6f7;color:#3f8082}.login-menu>button small{color:#75aaab}.login-menu>p{margin:5px 7px 2px;padding-top:8px;border-top:1px solid #dcf0f1;font-size:12px;color:#679192}.top-actions{position:relative}@media(max-width:700px){.login-menu-wrap{position:static}.login-menu{position:absolute;right:10px;top:52px;width:min(280px,calc(100vw - 20px))}.login-menu-button{height:33px;padding:0 8px;font-size:12px}}
.assessment-workspace-header{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0 12px}.assessment-workspace-header>div{margin-right:auto}.assessment-workspace-header p{margin:6px 0 0;color:#679192;font-size:12px}.assessment-tabs{display:flex;gap:6px;overflow:auto;border-bottom:1px solid #d4ebec;margin-bottom:16px}.assessment-tab{flex:none;padding:10px 12px;border:0;border-bottom:2px solid transparent;background:transparent;color:#679192;font:inherit;font-size:12px}.assessment-tab.active{border-color:#3f8082;color:#3f8082;font-weight:700}.assessment-section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0}.assessment-section-heading h2{font-size:16px;margin:0}.assessment-section-heading p{font-size:12px;color:#679192;margin:4px 0 0}.assessment-editor{margin:12px 0;padding:16px;background:#faffff;border:1px solid #b2e1e3;border-radius:11px}.assessment-editor[hidden]{display:none}.assessment-editor-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.assessment-editor-grid label,.assessment-record-picker label{display:grid;gap:6px;color:#486e6f;font-size:12px}.assessment-editor-grid input,.assessment-editor-grid select,.assessment-editor-grid textarea,.assessment-record-picker select{min-height:39px;padding:8px 10px;border:1px solid #cae7e8;border-radius:7px;background:#fff;color:#365657;font:inherit}.assessment-editor-grid textarea{resize:vertical}.assessment-editor-grid .assessment-span{grid-column:1/-1}.assessment-editor-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}.assessment-plan-list,.support-list{display:grid;gap:10px;margin:12px 0}.assessment-plan-card,.support-record,.assessment-final-panel{padding:15px;background:#faffff;border:1px solid #d4ebec;border-radius:10px}.assessment-plan-main{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.assessment-plan-main h3{font-size:15px;margin:7px 0 3px}.assessment-plan-main p,.support-record p{font-size:12px;color:#679192;margin:3px 0}.assessment-plan-main>strong{font-size:13px;color:#3f8082;white-space:nowrap}.assessment-indicator{display:grid;gap:3px;padding:10px 0;border-bottom:1px solid #dcf0f1;font-size:12px;color:#365657}.assessment-indicator b{color:#679192;font-size:12px}.assessment-plan-meta{display:flex;gap:16px;flex-wrap:wrap;padding-top:9px;color:#679192;font-size:12px}.assessment-record-picker{max-width:480px;margin:12px 0}.assessment-record-grid{display:grid}.assessment-record-head,.assessment-record-row{display:grid;grid-template-columns:minmax(120px,.7fr) minmax(100px,.45fr) minmax(220px,1.6fr);gap:9px;align-items:center}.assessment-record-head{padding:8px 0;color:#679192;font-size:12px;border-bottom:1px solid #dcf0f1}.assessment-record-row{padding:8px 0;border-bottom:1px solid #e3f3f3}.assessment-record-row strong{font-size:12px;color:#365657}.assessment-record-row input{height:37px;min-width:0;padding:7px 9px;border:1px solid #cae7e8;border-radius:7px;background:#fff;font:inherit;font-size:12px}.assessment-record-form,.assessment-history{margin:14px 0}.assessment-history h3{font-size:14px}.table-subline{display:block;margin-top:3px;color:#679192}.assessment-workspace-header .scheme-term{margin-left:auto;color:#679192;font-size:12px}.support-record{display:flex;align-items:center;justify-content:space-between;gap:12px}.support-record strong{font-size:12px}.support-record small{font-size:12px;color:#679192}.assessment-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0}.assessment-summary-grid article{display:grid;gap:5px;padding:13px;background:#faffff;border:1px solid #d4ebec;border-radius:9px}.assessment-summary-grid small{font-size:12px;color:#679192}.assessment-summary-grid strong{font-size:20px;color:#3f8082}.assessment-final-panel{margin:12px 0}.assessment-final-panel h3{font-size:14px;margin:0}.assessment-final-panel ul{padding-left:20px;color:#365657;font-size:12px;line-height:1.8}.assessment-final-panel .form-hint{display:block;margin:10px 0}.assessment-final-panel .report-table-wrap{overflow:auto}@media(max-width:700px){.assessment-workspace-header{align-items:stretch}.assessment-workspace-header>div{width:100%}.assessment-workspace-header select{width:100%}.assessment-workspace-header .scheme-term{margin-left:0}.assessment-tabs{margin-right:-14px}.assessment-tab{padding:9px;font-size:12px}.assessment-section-heading{align-items:flex-start;flex-direction:column}.assessment-editor-grid{grid-template-columns:1fr}.assessment-editor-grid .assessment-span{grid-column:auto}.assessment-editor-actions{align-items:flex-start;flex-direction:column}.assessment-record-head,.assessment-record-row{grid-template-columns:80px 80px minmax(150px,1fr);gap:6px}.assessment-record-grid{overflow:auto}.assessment-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.assessment-plan-main h3{font-size:13px}.assessment-plan-meta{gap:8px}.support-record{align-items:flex-start;flex-direction:column}}
.student-page-head{margin:10px 0 22px}.student-page-head h2{font-size:26px;margin:7px 0}.student-page-head p{color:var(--muted);margin:0}.student-shortcuts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:20px 0 32px}.student-shortcuts button,.student-unit-card,.student-chat,.student-assignment-card,.student-grade-card,.student-quiz-feedback{background:#fff;border:1px solid var(--line,#cfedee);border-radius:16px;padding:20px;color:inherit}.student-shortcuts button{text-align:left;cursor:pointer}.student-shortcuts strong,.student-shortcuts span{display:block}.student-shortcuts span{margin-top:8px;color:var(--muted)}.student-course-filter{margin-bottom:16px}.student-course-filter label,.student-chat>label{display:grid;gap:8px;max-width:440px;font-weight:600}.student-course-filter select,.student-chat select{padding:12px;border:1px solid #bee3e4;border-radius:10px;background:white}.student-unit-list,.student-assignment-list,.student-grade-sections{display:grid;gap:14px}.student-unit-card{display:flex;align-items:center;justify-content:space-between;gap:20px}.student-unit-card h3,.student-assignment-card h3{margin:8px 0}.student-unit-card p,.student-assignment-card p{color:var(--muted)}.student-unit-actions{display:flex;gap:8px;flex-wrap:wrap}.student-download{display:inline-block;color:#2c8a8d;margin:8px 0;font-weight:600}.student-chat{max-width:900px}.student-chat-messages{display:grid;gap:10px;max-height:420px;overflow:auto;padding:18px 0}.student-message{padding:12px 15px;background:#eef9f9;border-radius:12px}.student-message time{float:right;color:var(--muted);font-size:13px}.student-message p{margin:8px 0 0}.student-chat-form{border-top:1px solid #eee;padding-top:16px}.student-chat-form>div{display:flex;gap:10px;margin-top:8px}.student-chat-form input{flex:1;min-width:0;padding:12px;border:1px solid #bee3e4;border-radius:10px}.student-quiz-feedback{margin:18px 0;display:grid;gap:12px}.student-quiz-feedback label{padding:10px;background:#eef9f9;border-radius:8px}.student-quiz-feedback span{color:#2c8a8d;font-weight:600}.student-assignment-filters{display:flex;gap:8px;margin:16px 0}.student-assignment-card{display:grid;gap:8px}.student-assignment-top{display:flex;justify-content:space-between;gap:12px}.student-upload{display:grid;gap:8px;font-weight:600}.student-assignment-actions{display:flex;justify-content:flex-end}.student-grade-summary{display:flex;align-items:center;gap:12px;margin:18px 0;padding:18px 22px;background:#dff6f7;border-radius:14px}.student-grade-summary strong{font-size:30px;color:#257b7e}.student-grade-summary small{font-size:16px}.student-grade-card{display:grid;grid-template-columns:minmax(200px,1fr) minmax(0,2fr) auto;align-items:center;gap:16px}.student-grade-card h3{margin:0 0 5px}.student-grade-card>div:first-child span{color:var(--muted)}.student-score-pills{display:flex;gap:7px;flex-wrap:wrap}.student-score-pills span{padding:7px 9px;background:#eef9f9;border-radius:8px;font-size:14px}.student-grade-card>strong{color:#257b7e;white-space:nowrap}@media(max-width:900px){.student-shortcuts{grid-template-columns:repeat(2,1fr)}.student-grade-card{grid-template-columns:1fr}.student-unit-card{align-items:flex-start;flex-direction:column}}@media(max-width:560px){.student-shortcuts{grid-template-columns:1fr}.student-chat-form>div{flex-direction:column}.student-assignment-top{flex-direction:column}}
.admin-page-heading{margin:8px 0 22px}.admin-page-heading h2{font-size:26px;margin:8px 0}.admin-page-heading p{color:var(--muted);margin:0}.admin-exam-panel,.admin-settings-card{background:#fff;border:1px solid #cfedee;border-radius:16px;padding:22px;margin-bottom:16px}.admin-exam-status{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-bottom:18px;border-bottom:1px solid #eee;margin-bottom:18px}.admin-exam-status>div{display:grid;gap:6px}.admin-exam-status>div>span{color:var(--muted)}.admin-exam-status strong{font-size:20px}.exam-open{color:#287451}.exam-closed{color:#379b9e}.admin-exam-status label,.admin-settings-form label{display:grid;gap:8px;font-weight:600}.admin-exam-status input,.admin-settings-form input,.admin-settings-form select{padding:11px 12px;border:1px solid #bee3e4;border-radius:10px;background:#fff;min-height:44px}.admin-room-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:18px 0}.admin-room-checks>label{display:flex;align-items:flex-start;gap:12px;border:1px solid #d0f1f2;border-radius:12px;padding:14px;cursor:pointer}.admin-room-checks>label:has(input:checked){border-color:#3c9ea1;background:#effbfb}.admin-room-checks input{margin-top:4px;accent-color:#2f8285}.admin-room-checks label span{display:grid;gap:5px}.admin-room-checks small{color:var(--muted)}.admin-exam-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}.danger-button{padding:11px 16px;border:1px solid #a5e4e6;border-radius:10px;background:#fff7f5;color:#9c3f2f;font-weight:700;cursor:pointer}.admin-exam-room-list,.admin-room-list{display:flex;gap:10px;flex-wrap:wrap}.admin-exam-room-list>span,.admin-room-list>span{background:#eef9f9;border-radius:9px;padding:9px 12px;color:#257b7e}.admin-settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.admin-settings-card h3{margin:0 0 6px}.admin-settings-card>p{margin:0 0 16px;color:var(--muted)}.admin-settings-form{display:grid;gap:14px}.admin-settings-form button{justify-self:start}.admin-room-list-card{margin-top:16px}.admin-course-list{display:grid;gap:8px}.admin-course-list article{display:flex;justify-content:space-between;gap:12px;padding:12px;background:#f3fbfb;border-radius:9px}.admin-course-list article span{color:var(--muted)}@media(max-width:720px){.admin-settings-grid{grid-template-columns:1fr}.admin-room-checks{grid-template-columns:1fr}.admin-exam-status{align-items:flex-start;flex-direction:column}.admin-course-list article{flex-direction:column}}
.admin-crud-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:12px;border:1px solid #daf1f2;border-radius:12px;background:#fff}.admin-crud-row>div:first-child{display:grid;gap:4px}.admin-crud-row small{color:var(--muted)}.admin-entity-list{display:grid;gap:9px}.admin-row-actions{display:flex;gap:7px}.admin-row-actions button,.admin-crud-edit button{padding:8px 12px}.admin-crud-edit{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr auto auto;align-items:end;gap:10px;padding-top:12px;border-top:1px solid #eee}.admin-crud-edit[hidden]{display:none}.admin-crud-edit label{display:grid;gap:6px;font-weight:600}.admin-crud-edit input,.admin-crud-edit select{min-width:0;min-height:42px;padding:9px 10px;border:1px solid #bee3e4;border-radius:9px;background:#fff}.admin-crud-edit .text-button{white-space:nowrap}@media(max-width:700px){.admin-crud-row{grid-template-columns:1fr}.admin-row-actions{justify-content:flex-start}.admin-crud-edit{grid-template-columns:1fr 1fr}.admin-crud-edit button{justify-self:start}}
.admin-course-tools{display:flex;align-items:end;justify-content:space-between;gap:14px;padding:16px 18px;background:#fff;border:1px solid #cfedee;border-radius:14px;margin-bottom:16px}.admin-course-tools label{display:grid;gap:7px;flex:1;max-width:640px;font-weight:600}.admin-course-tools select,.admin-resource-form input,.admin-resource-form select,.admin-resource-form textarea{padding:11px 12px;border:1px solid #bee3e4;border-radius:10px;background:#fff;min-height:44px}.admin-resource-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}.admin-resource-heading h3{margin:0 0 5px}.admin-resource-heading p{margin:0;color:var(--muted)}.admin-resource-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.admin-resource-form>label{display:grid;gap:7px;font-weight:600}.admin-resource-form .admin-resource-wide,.admin-resource-form-actions{grid-column:1/-1}.admin-resource-form-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:8px}.admin-resource-list{display:grid;gap:12px}.admin-resource-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:16px;border:1px solid #daf1f2;border-radius:12px;background:#fff}.admin-resource-row-main{min-width:0}.admin-resource-row-main h4{margin:6px 0}.admin-resource-row-main p{margin:6px 0;color:var(--muted)}.admin-resource-type{font-size:13px;font-weight:700;color:#338f92}.admin-resource-row-main a{display:inline-block;margin-top:7px;color:#338f92;font-weight:600}.admin-resource-row details{margin-top:8px}.admin-lesson-preview{white-space:pre-wrap;background:#eef9f9;padding:12px;border-radius:9px}.admin-resource-row .admin-row-actions{flex-shrink:0}.admin-course-content{margin-top:16px}@media(max-width:700px){.admin-course-tools{align-items:stretch;flex-direction:column}.admin-resource-form{grid-template-columns:1fr}.admin-resource-form .admin-resource-wide,.admin-resource-form-actions{grid-column:auto}.admin-resource-form-actions{align-items:flex-start;flex-direction:column}.admin-resource-row{flex-direction:column}.admin-resource-row .admin-row-actions{align-self:flex-end}}
.guest-tips-heading{margin:8px 0 22px}.guest-tips-heading h2{font-size:27px;margin:7px 0}.guest-tips-heading p{color:var(--muted);margin:0}.guest-tips-toolbar{display:flex;align-items:end;gap:14px;margin:18px 0}.guest-tips-toolbar label{display:grid;gap:7px;min-width:240px;font-weight:600}.guest-tips-toolbar select,.guest-tips-toolbar input{min-height:44px;padding:10px 12px;border:1px solid #bee3e4;border-radius:10px;background:#fff}.guest-tips-toolbar .search-box{display:flex;align-items:center;flex:1;max-width:480px}.guest-tip-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.guest-tip-card{background:#fff;border:1px solid #cfedee;border-radius:15px;padding:20px}.guest-tip-category{display:inline-block;padding:5px 9px;border-radius:999px;background:#e2f7f7;color:#30898c;font-size:13px;font-weight:700}.guest-tip-card h3{margin:12px 0 5px}.guest-tip-card>strong{font-size:14px;color:#338f92}.guest-tip-card p{color:var(--muted);line-height:1.65}.guest-tip-card details{border-top:1px solid #daf1f2;padding-top:12px}.guest-tip-card summary{cursor:pointer;color:#257b7e;font-weight:700}.guest-tip-card ol{padding-left:22px;line-height:1.8;color:#375657}@media(max-width:700px){.guest-tips-toolbar{align-items:stretch;flex-direction:column}.guest-tips-toolbar label{min-width:0}.guest-tips-toolbar .search-box{max-width:none}.guest-tip-grid{grid-template-columns:1fr}}
body,.main-area,.page-content,#overviewPage,#alternatePage{background:#fff!important}
.admin-tip-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.admin-tip-form>label{display:grid;gap:7px;font-weight:600}.admin-tip-form input:not([type=checkbox]),.admin-tip-form select,.admin-tip-form textarea{padding:11px 12px;border:1px solid #bee3e4;border-radius:10px;background:#fff}.admin-tip-form .admin-tip-wide,.admin-tip-actions{grid-column:1/-1}.admin-tip-publish{display:flex!important;align-items:center;gap:9px}.admin-tip-actions{display:flex;align-items:center;justify-content:space-between;gap:14px}.admin-tip-list{display:grid;gap:12px}.admin-tip-row{display:flex;justify-content:space-between;gap:16px;border:1px solid #d8eeef;border-radius:12px;padding:16px}.admin-tip-main{min-width:0}.admin-tip-main h4{margin:8px 0 5px}.admin-tip-main>strong{font-size:14px;color:#31888b}.admin-tip-main p{color:var(--muted);margin:7px 0}.admin-tip-main a{color:#31888b;font-weight:600}.admin-tip-row-actions{display:flex;gap:7px;align-items:flex-start;flex-wrap:wrap;justify-content:flex-end}.guest-tip-file{display:inline-block;margin-top:10px;color:#31888b;font-weight:700}.guest-tip-card .guest-tip-file{border:1px solid #c6eaeb;padding:8px 10px;border-radius:8px}.main-area,.page-content,#overviewPage,#alternatePage{background:#fff!important}@media(max-width:700px){.admin-tip-form{grid-template-columns:1fr}.admin-tip-form .admin-tip-wide,.admin-tip-actions{grid-column:auto}.admin-tip-actions,.admin-tip-row{align-items:flex-start;flex-direction:column}.admin-tip-row-actions{justify-content:flex-start}}
#roleNavigation{overflow-y:auto;flex:1;min-height:0;scrollbar-width:thin}.sidebar-bottom{flex-shrink:0}
.guest-plan-heading{margin:8px 0 22px}.guest-plan-heading h2{font-size:27px;margin:7px 0}.guest-plan-heading p{color:var(--muted);margin:0}.guest-plan-list{display:grid;gap:16px}.guest-plan-card{background:#fff;border:1px solid #cfedee;border-radius:15px;padding:20px}.guest-plan-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding-bottom:14px;border-bottom:1px solid #daf1f2}.guest-plan-course{color:#31888b;font-weight:700;font-size:14px}.guest-plan-card h3{margin:7px 0 0}.guest-plan-count{white-space:nowrap;padding:6px 10px;border-radius:999px;background:#e6f8f9;color:#31888b;font-size:13px;font-weight:700}.guest-plan-units{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding-top:14px}.guest-plan-units section,.guest-plan-details{padding:14px;background:#f5fbfb;border-radius:11px}.guest-plan-units h4{margin:6px 0}.guest-plan-units p,.guest-plan-details p{margin:7px 0;color:#486768}.guest-plan-unit-number{font-size:13px;font-weight:700;color:#349195}.guest-plan-details{margin-top:14px}.guest-plan-details a{display:inline-block;margin-top:8px;color:#31888b;font-weight:700}@media(max-width:700px){.guest-plan-units{grid-template-columns:1fr}.guest-plan-card-head{flex-direction:column}}

.assessment-tool-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.assessment-tool-actions .danger-button{padding:8px 12px;font:inherit;font-size:12px}.assessment-tool-actions .secondary-button{padding:8px 12px;font:inherit;font-size:12px}

.plan-card-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.plan-card-actions .secondary-button,.plan-card-actions .danger-button{padding:8px 12px;font:inherit;font-size:12px}

.schedule-page-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:12px 0 20px}.schedule-page-heading h2{margin:8px 0 4px;font-size:22px}.schedule-page-heading p,.schedule-note{margin:0;color:#679192}.schedule-sample-badge{padding:7px 11px;border-radius:20px;background:#dff6f7;color:#3f8082;font-size:12px;font-weight:700}.teaching-schedule-table{min-width:720px}.schedule-note{font-size:13px;margin-top:14px}@media(max-width:600px){.schedule-page-heading{align-items:flex-start;flex-direction:column}}

.admin-record-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.admin-record-actions .secondary-button,.admin-record-actions .danger-button{padding:8px 12px;font:inherit;font-size:12px}

.student-roster-heading{margin:10px 0 18px}.student-roster-heading h2{margin:8px 0 4px;font-size:22px}.student-roster-heading p{margin:0;color:#679192}.student-roster-table{min-width:760px}.student-row-actions,.student-edit-actions{display:flex;gap:7px;flex-wrap:wrap}.student-row-actions button,.student-edit-actions button{padding:8px 11px;font:inherit;font-size:12px}.student-edit-row>td{background:#f3fdfd}.student-edit-form{display:grid;grid-template-columns:repeat(4,minmax(140px,1fr));gap:12px;align-items:end}.student-edit-form label{display:grid;gap:6px;font-weight:600}.student-edit-form input,.student-edit-form select{min-width:0;min-height:40px;padding:8px 10px;border:1px solid #bee3e4;border-radius:8px;background:#fff}.student-edit-actions{grid-column:1/-1;justify-content:flex-end}@media(max-width:700px){.student-edit-form{grid-template-columns:repeat(2,minmax(120px,1fr))}}

.student-grade-dashboard{display:grid;grid-template-columns:2fr 1fr 1fr;gap:14px;margin:18px 0}.grade-dashboard-card{padding:20px;border:1px solid #cfedee;border-radius:15px;background:#fff}.grade-dashboard-card>span{display:block;color:#679192;font-size:13px}.grade-dashboard-card>strong{display:block;margin-top:10px;color:#257b7e;font-size:27px}.grade-dashboard-card>strong small{font-size:16px;color:#679192}.grade-dashboard-card>p{margin:6px 0 12px;color:#679192;font-size:13px}.grade-dashboard-total{background:#eef9f9}.grade-dashboard-total>b{display:block;margin-top:8px;color:#3f8082;font-size:13px}.grade-dashboard-track,.grade-breakdown-track{height:9px;border-radius:10px;background:#dcf0f1;overflow:hidden}.grade-dashboard-track i,.grade-breakdown-track i{display:block;height:100%;border-radius:inherit;background:#409396}.grade-awaiting{font-size:20px!important;color:#52a3a6!important}.grade-dashboard-breakdown{padding:20px;border:1px solid #cfedee;border-radius:15px;background:#fff;margin-bottom:16px}.grade-breakdown-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:15px}.grade-breakdown-heading h3{margin:0;font-size:17px}.grade-breakdown-heading p{margin:5px 0 0;color:#679192;font-size:13px}.grade-breakdown-row{display:grid;grid-template-columns:minmax(180px,1fr) minmax(120px,2fr) 48px;align-items:center;gap:14px;padding:11px 0;border-top:1px solid #e1f2f2}.grade-breakdown-row>div:first-child{display:flex;justify-content:space-between;gap:12px}.grade-breakdown-row>div:first-child span{color:#679192}.grade-breakdown-row>b{text-align:right;color:#257b7e}.grade-breakdown-track i.unpublished{background:#c3dcdd}@media(max-width:800px){.student-grade-dashboard{grid-template-columns:1fr 1fr}.grade-dashboard-total{grid-column:1/-1}.grade-breakdown-row{grid-template-columns:1fr 48px}.grade-breakdown-track{grid-column:1/2;grid-row:2}.grade-breakdown-row>b{grid-column:2;grid-row:1/3}}@media(max-width:520px){.student-grade-dashboard{grid-template-columns:1fr}.grade-dashboard-total{grid-column:auto}.grade-breakdown-heading{flex-direction:column}.grade-breakdown-row>div:first-child{flex-direction:column;gap:3px}}

/* ==========================================================
   ธีมโทนน้ำตาล "Coffee & Paper" — ชั้นสไตล์สุดท้าย (override)
   ========================================================== */
:root{
  --espresso:#163233;--coffee:#224e50;--mocha:#317174;--caramel:#40bdc1;--honey:#61dfe3;
  --latte:#c3edef;--sand:#d9f5f6;--cream:#ecfbfc;--paper:#f7ffff;
  --ink:#1c3d3f;--muted:#5c9496;--line:#ceedee;--primary:#309296;
  --sage:#6f8f72;--terracotta:#2fc0c5;
  --shadow-sm:0 1px 2px rgba(34,78,80,.06),0 2px 8px rgba(34,78,80,.05);
  --shadow-md:0 2px 4px rgba(34,78,80,.05),0 10px 28px rgba(34,78,80,.09);
  --radius:16px;
  --font:'Noto Sans Thai','Source Sans 3',sans-serif;
  --serif:'Noto Serif Thai','Noto Sans Thai',serif;
}
body{background:var(--cream);color:var(--ink);font-family:var(--font);
  background-image:radial-gradient(circle at 100% 0,rgba(97,223,227,.10),transparent 38%),radial-gradient(circle at 0 100%,rgba(49,113,116,.06),transparent 40%);background-attachment:fixed}
::selection{background:var(--honey);color:var(--espresso)}

/* ---------- แถบเมนูข้าง: สีกาแฟเข้ม ---------- */
body .sidebar{background:linear-gradient(180deg,var(--coffee) 0%,var(--espresso) 100%);border-right:0;color:#d2f6f7;box-shadow:4px 0 24px rgba(22,50,51,.18)}
body .sidebar .brand,body .sidebar .brand-title,body .sidebar .brand *{color:#e6feff}
body .sidebar .brand img{border-radius:50%;box-shadow:0 0 0 3px rgba(97,223,227,.35)}
body .sidebar .school-switch{background:rgba(230,254,255,.06);border:1px solid rgba(230,254,255,.12);border-radius:14px}
body .sidebar .school-switch strong,body .sidebar .profile strong{color:#e6feff}
body .sidebar .school-switch small,body .sidebar .profile small{color:#94d3d5}
body .sidebar .school-avatar,body .sidebar .profile-avatar{background:linear-gradient(135deg,var(--honey),var(--caramel));color:var(--espresso)}
body .sidebar .nav-caption{color:#7ac6c9;letter-spacing:.06em;text-transform:uppercase;font-size:12px;font-weight:600}
body .sidebar .nav-item{color:#bdeaeb;border-radius:10px;transition:background .15s,color .15s,transform .15s}
body .sidebar .nav-item:hover{background:rgba(230,254,255,.08);color:#fff;transform:translateX(2px)}
body .sidebar .nav-item.active{background:linear-gradient(90deg,var(--caramel),#33a3a7);color:#fff;font-weight:600;box-shadow:0 4px 14px rgba(64,189,193,.35)}
body .sidebar .exam-subnav .nav-item{color:#a6dee0}
body .sidebar .help-card{background:rgba(230,254,255,.07);border-color:rgba(230,254,255,.12);color:#d2f6f7}
body .sidebar .help-card p{color:#94d3d5}
body .sidebar .text-button,body .sidebar .help-card button{color:var(--honey)}
body .sidebar .profile{border-top-color:rgba(230,254,255,.12)}
body .sidebar .profile button,body .sidebar .icon-button{color:#bdeaeb}
body .sidebar::-webkit-scrollbar{width:6px}body .sidebar::-webkit-scrollbar-thumb{background:rgba(230,254,255,.18);border-radius:9px}

/* ---------- แถบบน ---------- */
body .topbar{background:rgba(247,255,255,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:4}
body .breadcrumbs{color:var(--muted)}
body .breadcrumbs strong,body #breadcrumbCurrent{color:var(--coffee)}
body .top-avatar{background:linear-gradient(135deg,var(--honey),var(--caramel));color:#fff}

/* ---------- ส่วนต้อนรับ ---------- */
body .welcome-row{position:relative;overflow:hidden;border-radius:22px;padding:26px 30px;margin-bottom:26px;color:#eafeff;
  background:linear-gradient(120deg,var(--coffee) 0%,var(--mocha) 55%,var(--caramel) 120%);box-shadow:var(--shadow-md)}
body .welcome-row::after{content:"";position:absolute;right:-60px;top:-80px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(97,223,227,.45),transparent 65%);pointer-events:none}
body .welcome-row::before{content:"";position:absolute;inset:0;opacity:.08;pointer-events:none;
  background-image:repeating-linear-gradient(45deg,#fff 0 1px,transparent 1px 14px)}
body .welcome-row>*{position:relative;z-index:1}
body .welcome-row .eyebrow{color:#b7f4f6;font-weight:500}
body .welcome-row h1,body #pageTitle{font-family:var(--serif);font-weight:700;letter-spacing:-.01em;color:#f2ffff}
body .welcome-row h1 span{color:var(--honey)}
body .welcome-row p,body #pageSubtitle{color:#baeef0}

/* ---------- การ์ดและแผง ---------- */
body .panel,body .summary-card,body .course-card,body .modal,body .scheme-card,body .learning-game-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
body .summary-card,body .course-card,body .learning-game-card,body .scheme-card{transition:transform .18s ease,box-shadow .18s ease}
body .summary-card:hover,body .course-card:hover,body .learning-game-card:hover,body .scheme-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
body .summary-card{position:relative;overflow:hidden}
body .summary-card::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:linear-gradient(90deg,var(--caramel),var(--honey))}
body .summary-card strong{font-family:var(--serif);color:var(--espresso)}
body .metric-icon{background:var(--sand)!important;color:var(--mocha)!important;border-radius:10px}
body .metric-icon.green{background:#e5eee3!important;color:var(--sage)!important}
body .metric-icon.amber{background:#cefafb!important;color:#1fb2b8!important}
body .bars i{background:var(--latte)}
body .bars i:nth-child(6),body .bars i:nth-child(13){background:var(--caramel)}
body .progress,body .progress-track{background:var(--sand)}
body .progress i,body .progress span,body .progress-bar{background:linear-gradient(90deg,var(--caramel),var(--honey))}
body .spark path,body .spark polyline{stroke:var(--caramel)}

/* ---------- หัวข้อ ---------- */
body h2,body h3,body .section-heading h2,body .panel-heading h2,body .admin-page-heading h2{font-family:var(--serif);color:var(--espresso)}
body .sample-label{background:var(--sand);color:var(--mocha);border-radius:999px;padding:4px 11px}

/* ---------- ปุ่ม ---------- */
body .primary-button{background:linear-gradient(135deg,var(--mocha),var(--coffee));color:#eefeff;border:0;border-radius:12px;box-shadow:0 4px 14px rgba(34,78,80,.25);transition:transform .15s,box-shadow .15s,filter .15s}
body .primary-button:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(34,78,80,.3);filter:brightness(1.07)}
body .secondary-button{background:var(--paper);color:var(--coffee);border:1px solid var(--latte);border-radius:12px}
body .secondary-button:hover{background:var(--sand)}
body .danger-button{border-radius:12px}
body .text-button{color:var(--caramel)}
body .login-menu-button{border-color:var(--latte);border-radius:12px;color:var(--coffee);background:var(--paper)}

/* ---------- ตัวกรองระดับชั้น ---------- */
body .class-filter{border-radius:999px;color:var(--muted);border:1px solid transparent;transition:all .15s}
body .class-filter:hover{background:var(--sand);color:var(--coffee)}
body .class-filter.active{background:var(--coffee);color:#eafeff;border-color:var(--coffee);box-shadow:0 3px 10px rgba(34,78,80,.25)}
body .class-filter span{opacity:.7;margin-left:3px}

/* ---------- รายการ / ตาราง ---------- */
body .agenda-item,body .task-row{border-color:var(--line)}
body .agenda-item i{background:var(--caramel)!important}
body .agenda-item i.teal{background:var(--sage)!important}
body .agenda-item i.purple{background:var(--mocha)!important}
body .agenda-item i.orange{background:var(--honey)!important}
body .data-table th,body table th{background:var(--sand);color:var(--mocha)}
body .data-table tr:hover td,body table tbody tr:hover td{background:#ecfdfe}

/* ---------- ฟอร์ม ---------- */
body input,body select,body textarea{border-color:var(--latte)}
body input:focus,body select:focus,body textarea:focus{outline:none;border-color:var(--caramel);box-shadow:0 0 0 3px rgba(64,189,193,.18)}

/* ---------- โมดอล / ทอสต์ ---------- */
body .modal-backdrop{background:rgba(22,50,51,.45);backdrop-filter:blur(3px)}
body .toast{background:var(--espresso);color:#e6feff;border-radius:12px;box-shadow:var(--shadow-md)}

/* ---------- มือถือ ---------- */
@media(max-width:700px){
  body .welcome-row{padding:20px;border-radius:18px}
  body .welcome-row h1{font-size:24px}
}
body .spark{color:var(--caramel);opacity:.85}
body .avatar-stack{color:var(--mocha);background:var(--sand)}
body .class-filter.active span{opacity:.85;color:var(--honey)}
body .summary-card strong{font-feature-settings:"lnum"}
body .course-card .course-tag,body .tag{border-radius:8px}

/* ---------- ตารางสอนแบบตาราง (ข้อมูลจริง) ---------- */
.tt-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:18px 0}
.tt-summary div{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow-sm)}
.tt-summary strong{display:block;font:700 24px var(--serif);color:var(--espresso)}
.tt-summary span{font-size:12px;color:var(--muted)}
.tt-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--line);background:var(--paper);box-shadow:var(--shadow-sm)}
body .tt-grid{width:100%;min-width:920px;border-collapse:separate;border-spacing:0;table-layout:fixed}
body .tt-grid th,body .tt-grid td{padding:6px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);text-align:center;vertical-align:middle;font-size:12px}
body .tt-grid thead th{background:var(--coffee);color:#e6feff;font-weight:600}
body .tt-grid thead th:first-child{width:92px}
body .tt-grid thead th small{display:block;font-weight:400;color:#afebed;font-size:12px;margin-top:2px}
body .tt-grid .tt-day{background:var(--sand);color:var(--espresso);font:700 14px var(--serif)}
body .tt-grid tr:hover td{background:transparent}
.tt-lunch{background:repeating-linear-gradient(45deg,#e4f8f8 0 6px,#edfcfc 6px 12px);color:var(--muted);font-size:12px;writing-mode:vertical-rl;letter-spacing:.1em}
body .tt-grid thead th:nth-child(6){width:44px}
.tt-cell{border-radius:10px;padding:8px 4px;display:flex;flex-direction:column;gap:2px;min-height:64px;justify-content:center;line-height:1.25}
.tt-cell strong{font-size:12.5px;letter-spacing:.02em}
.tt-cell span{font-size:14px;font-weight:700}
.tt-cell small{font-size:12px;opacity:.75}
.tt-lavender{background:#d2f2f3;color:#205f62}.tt-mint{background:#e3ebdf;color:#3f5a42}.tt-peach{background:#c6f9fb;color:#178285}.tt-sky{background:#e8e1ec;color:#4d3d58}
.tt-duty{background:#e7f5f6;color:var(--muted);border:1px dashed var(--latte)}
.tt-duty strong{font-size:12px;color:var(--mocha)}
.tt-legend{display:flex;flex-wrap:wrap;gap:10px 18px;margin:14px 2px;font-size:12px;color:var(--ink)}
.tt-legend-item{display:inline-flex;align-items:center;gap:6px}
.tt-dot{width:12px;height:12px;border-radius:4px;display:inline-block}
.tt-dot.tt-lavender{background:#82d0d3}.tt-dot.tt-mint{background:#8fae8f}.tt-dot.tt-peach{background:#6de8ed}.tt-dot.tt-sky{background:#a996b6}
.agenda-item.is-done{opacity:.55}
@media(max-width:700px){.tt-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- ตารางเรียนรายห้อง ---------- */
.ct-picker{display:grid;gap:8px;margin:16px 0;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow-sm)}
.ct-grade{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ct-grade>span{min-width:38px;font:700 13px var(--serif);color:var(--mocha)}
.ct-room{min-width:34px;height:30px;border-radius:999px;border:1px solid var(--latte);background:var(--paper);color:var(--coffee);font-size:12px;transition:all .15s}
.ct-room:hover{background:var(--sand)}
.ct-room.active{background:var(--coffee);color:#eafeff;border-color:var(--coffee);box-shadow:0 3px 10px rgba(34,78,80,.25)}
.ct-grid .tt-cell{min-height:70px}
.ct-grid .ct-teacher{font-size:12px;font-weight:600}
.ct-t1{background:#cff6f7;color:#187275}.ct-t2{background:#e6ebdd;color:#4a5a35}.ct-t3{background:#c9eced;color:#205f62}.ct-t4{background:#ccf2f3;color:#1a8285}.ct-t5{background:#dfe8e3;color:#36574a}
.ct-t6{background:#f0dede;color:#7a3b3b}.ct-t7{background:#ceeff0;color:#22686a}.ct-t8{background:#e2e3ec;color:#3d4366}.ct-t9{background:#d2f7f8;color:#159397}.ct-t10{background:#e8e0ee;color:#54406a}
.tt-dot.ct-t1{background:#73e1e5}.tt-dot.ct-t2{background:#9fb184}.tt-dot.ct-t3{background:#61b9bc}.tt-dot.ct-t4{background:#61dce0}.tt-dot.ct-t5{background:#86ab9a}.tt-dot.ct-t6{background:#c98b8b}.tt-dot.ct-t7{background:#66c4c7}.tt-dot.ct-t8{background:#8f95bd}.tt-dot.ct-t9{background:#6ce7ec}.tt-dot.ct-t10{background:#a790bd}
.ct-mine{box-shadow:inset 0 0 0 2px var(--caramel);position:relative}
.ct-mine::after{content:"★";position:absolute;top:3px;right:6px;font-size:12px;color:var(--caramel)}
.tt-dot.ct-mine-dot{background:var(--paper);box-shadow:inset 0 0 0 2px var(--caramel)}
.ct-today th.tt-day{background:var(--coffee);color:#e6feff}
.ct-today th.tt-day small{display:block;font:500 12px var(--font);color:var(--honey)}
.ct-today td{background:#edfeff}

/* ==========================================================
   ธีม "แดง + เขียวอมฟ้า" — หัวข้อเป็นสีแดง เมนูและส่วนอื่นไล่เฉดสีคู่ตรงข้าม (ชั้นสุดท้าย)
   ========================================================== */
:root{
  --red-950:#3d0a10;--red-800:#8e1722;--red-700:#a81c29;--red-600:#c4262f;--red-400:#ec6b70;--red-100:#ffe1df;
  --espresso:#062a2c;--coffee:#0b4448;--mocha:#14696d;--caramel:#1b9a9c;--honey:#5cc8c4;
  --latte:#cfe8e7;--sand:#e4f2f1;--cream:#f2f8f8;--paper:#fdffff;
  --ink:#12302f;--muted:#5f8584;--line:#dbe9e8;--primary:#14696d;
  --terracotta:#c4262f;
  --shadow-sm:0 1px 2px rgba(6,42,44,.06),0 2px 8px rgba(6,42,44,.05);
  --shadow-md:0 2px 4px rgba(6,42,44,.05),0 10px 28px rgba(6,42,44,.09);
}
/* เมนูข้าง: ไล่เฉดเขียวอมฟ้าเข้ม → เข้มมาก */
body .sidebar{background:linear-gradient(180deg,#0f5a5e 0%,#0b4448 45%,#062a2c 100%);color:#d6f1f0;box-shadow:4px 0 24px rgba(6,42,44,.22)}
body .sidebar .brand,body .sidebar .brand-title,body .sidebar .brand *,
body .sidebar .school-switch strong,body .sidebar .profile strong{color:#effffe}
body .sidebar .school-switch small,body .sidebar .profile small,body .sidebar .help-card p{color:#9fd3d1}
body .sidebar .nav-caption{color:#7fc2c0}
body .sidebar .nav-item,body .sidebar .profile button,body .sidebar .icon-button{color:#c9ebe9}
body .sidebar .nav-item:hover{background:rgba(239,255,254,.10);color:#fff}
body .sidebar .nav-item.active{background:linear-gradient(90deg,#1b9a9c,#14787b);color:#fff;box-shadow:0 4px 14px rgba(27,154,156,.38)}
body .sidebar .exam-subnav .nav-item{color:#b4e0de}
body .sidebar .help-card{background:rgba(239,255,254,.07);border-color:rgba(239,255,254,.14);color:#d6f1f0}
body .sidebar .school-switch{background:rgba(239,255,254,.07);border-color:rgba(239,255,254,.14)}
body .sidebar .brand img{box-shadow:0 0 0 3px rgba(92,200,196,.4)}
body .sidebar .school-avatar,body .sidebar .profile-avatar,body .top-avatar{background:linear-gradient(135deg,#5cc8c4,#1b9a9c);color:#062a2c}
body .sidebar .text-button,body .sidebar .help-card button{color:#7fe0db}
body .sidebar .profile{border-top-color:rgba(239,255,254,.14)}
/* หัวข้อ: สีแดง */
body .welcome-row{background:linear-gradient(120deg,var(--red-950) 0%,var(--red-800) 55%,var(--red-600) 120%);color:#fff1ef}
body .welcome-row::after{background:radial-gradient(circle,rgba(236,107,112,.45),transparent 65%)}
body .welcome-row .eyebrow{color:#ffd0cc}
body .welcome-row h1 span{color:#ffc2bd}
body .welcome-row p,body #pageSubtitle{color:#ffdedb}
body .welcome-row h1,body #pageTitle{color:#fff7f6}
body h2,body h3,body .section-heading h2,body .panel-heading h2,body .admin-page-heading h2{color:var(--red-700)}
body .breadcrumbs strong,body #breadcrumbCurrent{color:var(--red-700)}
body .summary-card strong{color:var(--red-800)}
body .summary-card::before{background:linear-gradient(90deg,var(--red-600),var(--red-400))}
/* ปุ่ม/ตัวกรอง/แถบความคืบหน้า: เฉดเขียวอมฟ้า */
body .primary-button{background:linear-gradient(135deg,#14787b,#0b4448);color:#effffe;box-shadow:0 4px 14px rgba(6,42,44,.25)}
body .secondary-button{color:var(--coffee);border-color:var(--latte)}
body .class-filter.active{background:var(--coffee);border-color:var(--coffee);color:#effffe}
body .class-filter.active span{color:#7fe0db}
body .progress i,body .progress span,body .progress-bar{background:linear-gradient(90deg,#14787b,#5cc8c4)}
body .metric-icon.amber{background:#ffe9e6!important;color:var(--red-700)!important}
body .metric-icon.green{background:#dff3ec!important;color:#2f8f6a!important}
body .toast{background:var(--espresso);color:#effffe}
body .modal-backdrop{background:rgba(6,42,44,.45)}
body input:focus,body select:focus,body textarea:focus{border-color:var(--caramel);box-shadow:0 0 0 3px rgba(27,154,156,.2)}

/* ---------- แผนการสอน (ผู้มาเยือน): แท็บรายวิชา + แถวสัปดาห์แบบกดขยาย ---------- */
.gp-toolbar{display:grid;gap:12px;margin:0 0 16px}
.gp-chips{display:flex;flex-wrap:wrap;gap:8px}
.gp-chip{border:1px solid var(--line);background:var(--paper);color:var(--coffee);border-radius:999px;padding:8px 14px;font:inherit;font-size:13px;line-height:1.3;text-align:left}
.gp-chip b{margin-left:6px;padding:1px 8px;border-radius:999px;background:var(--sand);color:var(--mocha);font-size:12px}
.gp-chip:hover{background:var(--sand)}
.gp-chip.active{background:var(--coffee);border-color:var(--coffee);color:#fff}
.gp-chip.active b{background:rgba(255,255,255,.2);color:#fff}
.gp-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.gp-tools .search-box{flex:1 1 240px}
.gp-list{display:grid;gap:8px}
.gp-group{margin:18px 0 4px;font-size:16px}
.gp-group small{margin-left:8px;color:var(--muted);font-weight:400;font-size:13px}
.gp-row{background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.gp-row[open]{box-shadow:var(--shadow-sm)}
.gp-row summary{display:flex;gap:12px;align-items:center;padding:12px 14px;cursor:pointer;list-style:none}
.gp-row summary::-webkit-details-marker{display:none}
.gp-row summary::after{content:"⌄";margin-left:auto;color:var(--muted);transition:transform .15s}
.gp-row[open] summary::after{transform:rotate(180deg)}
.gp-week{flex:none;min-width:86px;padding:5px 10px;border-radius:999px;background:var(--sand);color:var(--mocha);font-size:12.5px;font-weight:600;text-align:center}
.gp-main{display:grid;gap:2px;min-width:0}
.gp-main strong{font-weight:600;color:var(--red-700);overflow-wrap:anywhere}
.gp-main small{color:var(--muted);font-size:12.5px}
.gp-body{display:grid;gap:12px;padding:4px 16px 16px;border-top:1px dashed var(--line);background:var(--cream)}
.gp-body h4{margin:12px 0 4px;font-size:13px;color:var(--mocha)}
.gp-body p,.gp-body ul{margin:0;font-size:14px;line-height:1.65}
.gp-body ul{padding-left:20px}
.gp-body a{color:var(--mocha);font-weight:600}
@media(max-width:600px){.gp-row summary{align-items:flex-start;padding:12px}.gp-week{min-width:0}}
.gp-body .gp-empty{color:var(--muted)}


.gp-select{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.gp-select select{min-width:min(100%,320px)}

/* ---- ปรับ UX: ซ่อนข้อความสำหรับนักพัฒนาจากผู้มาเยือน/นักเรียน ---- */
body[data-role="guest"] .demo-data-note,body[data-role="student"] .demo-data-note{display:none}
.nav-caption{font-size:12px}
.guest-home-extra{margin-top:20px}
.guest-home-term{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;padding:12px 16px;border-radius:12px;background:#e8f4f2;color:#0f4c46;margin-bottom:16px}
.guest-home-term span{font-size:13px}
.guest-home-extra h2{margin:0 0 12px;font-size:18px}
.guest-home-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.guest-home-course{padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:#fff}
.guest-home-course h3{margin:8px 0 4px;font-size:16px}
.guest-home-course p{margin:0;color:#6f7385;font-size:13px}
.guest-home-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
#sidebarBackdrop{position:fixed;inset:0;background:rgba(15,29,28,.5);z-index:4}
#sidebarBackdrop[hidden]{display:none}
@media(min-width:901px){#sidebarBackdrop{display:none!important}}
@media(max-width:900px){
  .topbar{gap:8px}
  .breadcrumbs{flex:1 1 0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .top-actions{flex:0 0 auto;gap:6px;min-width:0}
  .login-menu-button{max-width:132px;overflow:hidden;text-overflow:ellipsis}
  .spark{overflow:hidden;max-width:calc(100% - 24px)}
  .nav-item{min-height:44px}
  .icon-button,.mobile-menu{min-width:40px;min-height:40px}
  .top-actions select,button.secondary-button,button.primary-button,.text-button,.class-filter,.footer-links button,select,input:not([type=checkbox]):not([type=radio]):not([type=file]),summary{min-height:40px}
  .footer-links button{padding:0 6px}
}
@media(max-width:480px){
  .top-actions label{font-size:0;gap:0}
  .top-actions select{font-size:13px}
}

.library-count{margin:4px 2px 10px;color:#6f7385;font-size:13px}
.library-more{display:block;margin:16px auto 4px}
.resource-card[hidden]{display:none}

.room-chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px}
.room-chips span{padding:3px 10px;border-radius:999px;background:#e8f4f2;color:#0f4c46;font-size:13px;font-weight:600}
.guest-course-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.guest-course-card .guest-home-links{margin-top:12px}

.teacher-profile{max-width:760px}
.tp-section{margin:18px 0;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:#fff}
.tp-section h3{margin:0 0 10px;font-size:16px;color:#0f4c46}
.tp-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.tp-list li{display:flex;flex-direction:column;gap:2px}
.tp-list li span{color:#6f7385;font-size:13px}
.tp-note{margin:16px 0 0;padding:12px 14px;border-radius:10px;background:#e8f4f2;color:#0f4c46;font-size:13px;line-height:1.6}

.teacher-contact{max-width:760px}
.contact-grid{display:grid;gap:12px;margin:18px 0}
.contact-card{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:#fff;color:inherit;text-decoration:none;min-height:64px}
.contact-card:hover{border-color:#0f4c46;background:#f3faf9}
.contact-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#e8f4f2;color:#0f4c46;font-size:18px;flex:none}
.contact-card small{display:block;color:#6f7385;font-size:13px}
.contact-card strong{font-size:17px;color:#0f4c46;word-break:break-all}

/* ภาพรวม: การ์ดรายวิชาแบบรวมห้อง */
.subject-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.subject-card{background:var(--paper,#fff);border:1px solid var(--line,#eceef3);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:12px}
.subject-card header{display:flex;gap:12px;align-items:center}
.subject-card h3{margin:0;font-size:17px;line-height:1.3;color:#0f4c46}
.subject-card header small{color:var(--muted,#6b7a80);font-size:13px}
.subject-total{margin:0;font-size:14px;color:var(--muted,#6b7a80)}
.subject-total b{color:#0f4c46;font-size:16px}
.room-chips{display:flex;flex-wrap:wrap;gap:8px}
.room-chip{display:inline-flex;flex-direction:column;align-items:center;min-width:64px;padding:6px 10px;border-radius:10px;background:#eaf7f7;border:1px solid #cfe9ea;font-weight:600;font-size:14px;color:#256567;line-height:1.3}
.room-chip small{font-weight:400;font-size:12px;color:#5d8a8c}

/* เกมตามบทเรียน (อาร์เคด) */
.lg-soon{margin:18px 0;color:#6b7a80;font-size:14px}
body.game-open{overflow:hidden}
.ag-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:6px 0 16px}
.ag-head h2{margin:0;font-size:22px;color:#0f4c46}.ag-head p{margin:4px 0 0;color:#6b7a80;font-size:14px}
.ag-total{background:#1d2b53;color:#ffd84d;font-weight:700;font-size:18px;padding:8px 16px;border-radius:999px}
.ag-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.ag-gamecard{position:relative;overflow:hidden;border-radius:18px;padding:18px;color:#fff;display:flex;flex-direction:column;gap:6px;min-height:220px;box-shadow:0 8px 20px rgba(20,30,60,.2);transition:transform .15s}
.ag-gamecard:hover{transform:translateY(-4px) rotate(-.4deg)}
.ag-gamecard h3{margin:4px 0 0;font-size:18px;color:#fff;line-height:1.3}.ag-gamecard p{margin:0;font-size:13px;opacity:.9}
.ag-gc-icon{font-size:44px;line-height:1;filter:drop-shadow(0 3px 4px rgba(0,0,0,.3))}
.ag-gc-tag{align-self:flex-start;background:rgba(255,255,255,.22);padding:2px 10px;border-radius:999px;font-size:12px;font-weight:600}
.ag-gc-stars{font-size:20px;margin-top:auto;letter-spacing:2px}
.ag-play{border:0;border-radius:12px;padding:10px;font:inherit;font-weight:700;font-size:15px;cursor:pointer;background:#fff;color:#1d2b53}
.ag-play:hover{background:#ffd84d}
.ag-orange{--c1:#ff9a3c;--c2:#e8452c}.ag-purple{--c1:#8b5cf6;--c2:#3b1d8f}.ag-teal{--c1:#14b8a6;--c2:#0b5d6b}.ag-red{--c1:#f43f5e;--c2:#7f1230}.ag-blue{--c1:#38bdf8;--c2:#1d4ed8}
.ag-gamecard{background:linear-gradient(135deg,var(--c1),var(--c2))}
.ag-modal{position:fixed;inset:0;z-index:1000;background:rgba(8,12,30,.78);display:flex;align-items:center;justify-content:center;padding:12px}
.ag-wrap{width:min(900px,100%);max-height:96vh;display:flex;flex-direction:column;gap:8px}
.ag-hud{display:flex;align-items:center;gap:10px;background:#12183a;color:#fff;border-radius:14px;padding:8px 12px}
.ag-title{margin-right:auto;min-width:0}.ag-title small{display:block;opacity:.7;font-size:12px}.ag-title b{font-size:17px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-stats{display:flex;gap:12px;font-weight:700;font-size:16px;white-space:nowrap}
.ag-btn{border:0;background:rgba(255,255,255,.14);color:#fff;border-radius:10px;width:36px;height:36px;font-size:16px;cursor:pointer}
.ag-goal{margin:0;color:#e9edff;font-size:15px;min-height:22px;padding:0 4px}
.ag-stage{position:relative;overflow:hidden;border-radius:16px;min-height:min(60vh,480px);height:min(60vh,480px);background:radial-gradient(circle at 20% 10%,var(--c1) -40%,transparent 55%),linear-gradient(180deg,#0f1738,#1b2a6b);padding:14px;color:#fff}
.ag-stage.ag-hit{animation:agflash .32s}@keyframes agflash{30%{box-shadow:inset 0 0 0 6px #ff3b5c;transform:translateX(-5px)}70%{transform:translateX(5px)}}
.ag-burst{position:absolute;font-size:34px;pointer-events:none;animation:agburst .7s forwards;transform:translate(-50%,-50%);z-index:5}
@keyframes agburst{to{transform:translate(-50%,-120%) scale(1.6);opacity:0}}
/* ตกพื้น */
.ag-prog{position:absolute;left:12px;bottom:10px;z-index:3;background:rgba(0,0,0,.45);padding:4px 12px;border-radius:999px;font-weight:700}.ag-prog.miss{background:#d91d44}
.ag-fall{position:absolute;top:0;border:0;border-radius:999px;padding:9px 16px;font:700 17px/1.1 ui-monospace,Consolas,monospace;background:#fff;color:#1d2b53;cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,.4);touch-action:manipulation;white-space:nowrap}
.ag-stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:repeating-linear-gradient(90deg,#ff3b5c 0 14px,transparent 14px 28px);opacity:.8;pointer-events:none}
/* แยกด่วน */
.ag-sort{display:flex;flex-direction:column;align-items:center;gap:12px;height:calc(100% - 100px)}
.ag-count{font-weight:700;opacity:.85}.ag-bar{width:100%;height:12px;border-radius:99px;background:rgba(255,255,255,.18);overflow:hidden}.ag-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ffd84d,#ff5470)}
.ag-bigcard{margin-top:6px;background:#fff;color:#1d2b53;border-radius:20px;padding:26px 24px;font-size:24px;font-weight:800;text-align:center;max-width:90%;box-shadow:0 10px 26px rgba(0,0,0,.4)}
.ag-bigcard.ag-in{animation:agdrop .35s}@keyframes agdrop{from{transform:translateY(-60px) scale(.9);opacity:0}}
.ag-bigcard.ag-ok{background:#c9f7d8}.ag-bigcard.ag-no{background:#ffd3da;animation:agflash .32s}
.ag-combo{min-height:26px;font-weight:800;color:#ffd84d;font-size:18px}
.ag-bins{position:absolute;left:14px;right:14px;bottom:14px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ag-bin{border:3px solid rgba(255,255,255,.4);background:rgba(255,255,255,.12);color:#fff;border-radius:18px;padding:12px;font:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px}
.ag-bin span{font-size:30px}.ag-bin b{font-size:21px}.ag-bin small{opacity:.7;font-size:20px}.ag-bin:hover{background:rgba(255,255,255,.25)}.ag-bin.ag-right{border-color:#3df08a;background:rgba(61,240,138,.3)}
/* ไพ่ */
.ag-mem{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;height:100%}
.ag-card{position:relative;border:0;padding:0;background:none;perspective:700px;cursor:pointer;min-height:90px}
.ag-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;border-radius:14px;padding:6px;font-size:14px;font-weight:700;line-height:1.3;backface-visibility:hidden;transition:transform .4s}
.ag-back{background:linear-gradient(135deg,var(--c1),var(--c2));font-size:28px;border:2px solid rgba(255,255,255,.5)}
.ag-front{background:#fff;color:#1d2b53;transform:rotateY(180deg)}.ag-front.ag-term{background:#fff3b0;font-size:16px}
.ag-card.open .ag-back,.ag-card.done .ag-back{transform:rotateY(180deg)}.ag-card.open .ag-front,.ag-card.done .ag-front{transform:rotateY(0)}
.ag-card.done .ag-front{background:#c9f7d8;box-shadow:0 0 0 3px #3df08a}
/* มอนสเตอร์ */
.ag-monster{text-align:center}.ag-mon{font-size:78px;line-height:1.1;display:inline-block;filter:drop-shadow(0 6px 8px rgba(0,0,0,.5))}
.ag-mon.ag-shake{animation:agshake .45s}.ag-mon.ag-attack{animation:agattack .45s}.ag-mon.ag-die{animation:agdie .7s forwards}
@keyframes agshake{25%{transform:translateX(-14px) rotate(-8deg);filter:brightness(2)}75%{transform:translateX(14px) rotate(8deg)}}
@keyframes agattack{50%{transform:scale(1.5) translateY(18px)}}@keyframes agdie{to{transform:scale(.2) rotate(360deg);opacity:0}}
.ag-hp{width:min(320px,80%);height:16px;border-radius:99px;background:rgba(255,255,255,.2);margin:4px auto 10px;overflow:hidden}.ag-hp i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#3df08a,#ffd84d);transition:width .4s}
.ag-q{font-size:19px;font-weight:700;text-align:center;margin:12px 0}
.ag-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.ag-opt{border:3px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);color:#fff;border-radius:14px;padding:14px;font:700 16px/1.3 inherit;cursor:pointer}
.ag-opt:hover{background:rgba(255,255,255,.25)}.ag-opt.ag-right{border-color:#3df08a;background:rgba(61,240,138,.3)}.ag-opt.ag-wrong{border-color:#ff3b5c;background:rgba(255,59,92,.35)}
/* ฟองสบู่ */
.ag-ordwrap{display:grid;grid-template-columns:1.2fr 1fr;gap:14px;margin-top:12px;height:calc(100% - 26px)}
.ag-bubbles{display:flex;flex-wrap:wrap;gap:12px;align-content:flex-start}
.ag-bubble{border:0;border-radius:24px;padding:12px 16px;background:radial-gradient(circle at 30% 25%,#fff,#bfe6ff);color:#12306b;font:700 15px/1.3 inherit;cursor:pointer;max-width:240px;box-shadow:0 6px 14px rgba(0,0,0,.35);animation:agfloat 3s ease-in-out infinite}
@keyframes agfloat{50%{transform:translateY(-8px)}}.ag-bubble.ag-wrong{background:#ffb3c0;animation:agflash .4s}.ag-bubble.ag-pop{animation:agpop .4s forwards}@keyframes agpop{to{transform:scale(0);opacity:0}}
.ag-bubble:disabled{pointer-events:none}
.ag-ladder{margin:0;padding:10px 10px 10px 34px;background:rgba(255,255,255,.1);border-radius:14px;overflow:auto;font-weight:700;color:#aef5c8}.ag-ladder li{margin:6px 0;animation:agdrop .35s}
/* จบเกม */
.ag-end{position:absolute;inset:0;background:rgba(8,12,30,.82);display:flex;align-items:center;justify-content:center;z-index:10;animation:agdrop .3s}
.ag-endbox{text-align:center;padding:10px 20px}.ag-stars{font-size:46px;letter-spacing:6px}.ag-endbox h3{font-size:26px;margin:6px 0;color:#fff}.ag-endbox p{margin:4px 0;font-size:16px}.ag-hint{opacity:.8}
.ag-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.ag-big{border:0;border-radius:14px;padding:12px 22px;font:700 17px inherit;cursor:pointer;background:#ffd84d;color:#1d2b53}.ag-big.ag-ghost{background:rgba(255,255,255,.18);color:#fff}
@media(max-width:640px){.ag-stage{height:68vh;padding:10px}.ag-mem{grid-template-columns:repeat(3,1fr)}.ag-ordwrap{grid-template-columns:1fr;grid-template-rows:auto 1fr}.ag-bigcard{font-size:20px}.ag-title b{font-size:15px}.ag-stats{font-size:14px;gap:8px}.ag-mon{font-size:60px}}

/* ชุดท้าทาย + กราฟิกเพิ่มเติม */
.ag-pink{--c1:#ff5fa2;--c2:#8e1b6b}.ag-green{--c1:#34d399;--c2:#046c4e}
.ag-spark{position:absolute;width:8px;height:8px;border-radius:50%;pointer-events:none;z-index:6;animation:agspark .65s ease-out forwards}
@keyframes agspark{to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}
.ag-tabs{display:flex;gap:10px;margin:0 0 12px;flex-wrap:wrap}
.ag-tab{border:2px solid #cfe0e2;background:#fff;border-radius:14px;padding:10px 18px;font:700 16px inherit;cursor:pointer;color:#1d2b53;display:flex;gap:8px;align-items:center}
.ag-tab small{font-weight:600;opacity:.7}.ag-tab.on{background:#1d2b53;color:#fff;border-color:#1d2b53}
.ag-tab-hard.on{background:linear-gradient(135deg,#ff5e3a,#b3122e);border-color:#b3122e;box-shadow:0 0 18px rgba(255,70,50,.5)}
.ag-note{margin:0 0 12px;color:#8a2b1d;background:#fff1ee;border:1px solid #ffd2c9;border-radius:12px;padding:8px 14px;font-size:14px}
.ag-hardcard{background:linear-gradient(160deg,#10163a,#2a0f3c);box-shadow:0 0 0 2px var(--c1),0 8px 26px rgba(0,0,0,.45),0 0 24px color-mix(in srgb,var(--c1) 55%,transparent)}
.ag-hardcard::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 0%,color-mix(in srgb,var(--c1) 55%,transparent),transparent 55%);pointer-events:none}
.ag-ribbon{position:absolute;top:12px;right:-30px;transform:rotate(35deg);background:linear-gradient(90deg,#ff7a18,#e8183c);color:#fff;font-size:12px;font-weight:800;padding:3px 38px;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.ag-hardcard .ag-play{background:linear-gradient(90deg,var(--c1),#ffd84d);color:#10163a}
.ag-hardmode .ag-stage{background:radial-gradient(circle at 15% 8%,color-mix(in srgb,var(--c1) 55%,transparent) 0,transparent 50%),radial-gradient(circle at 90% 95%,rgba(255,60,120,.28),transparent 45%),linear-gradient(180deg,#090c26,#1a1048);box-shadow:0 0 0 2px var(--c1),0 0 34px color-mix(in srgb,var(--c1) 65%,transparent)}
.ag-hardmode .ag-stage::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(2px 2px at 20px 30px,#fff,transparent),radial-gradient(1.5px 1.5px at 90px 80px,#cde,transparent),radial-gradient(2px 2px at 160px 20px,#fff,transparent),radial-gradient(1px 1px at 60px 140px,#fff,transparent),radial-gradient(1.5px 1.5px at 130px 110px,#bdf,transparent);background-size:180px 160px;animation:agstars 18s linear infinite;opacity:.7}
@keyframes agstars{to{background-position:-180px 160px}}
.ag-hardmode .ag-hud{background:linear-gradient(90deg,#1b0f3d,#3a0f2b);box-shadow:0 0 18px rgba(255,70,90,.35)}
.ag-hardmode .ag-title b{background:linear-gradient(90deg,#fff,#ffd84d);-webkit-background-clip:text;background-clip:text;color:transparent}
.ag-hardmode .ag-fall{background:linear-gradient(180deg,#fff,#cfe6ff);box-shadow:0 0 18px rgba(120,200,255,.8),0 4px 10px rgba(0,0,0,.5)}
.ag-hardmode .ag-opt,.ag-hardmode .ag-bin{backdrop-filter:blur(4px);box-shadow:0 0 14px rgba(255,255,255,.08)}
.ag-hardmode .ag-bubble{box-shadow:0 0 22px rgba(130,210,255,.7),0 6px 14px rgba(0,0,0,.4)}
/* ทายเอฟเฟกต์ */
.ag-see{display:flex;flex-direction:column;align-items:center;gap:10px;position:relative}
.ag-frame{border-radius:16px;padding:6px;background:linear-gradient(135deg,var(--c1),#fff3,var(--c2));box-shadow:0 0 28px color-mix(in srgb,var(--c1) 60%,transparent)}
.ag-canvas{display:block;width:min(360px,76vw);height:auto;border-radius:12px;background:#000}
.ag-opts2{width:100%;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
/* ผสมสี */
.ag-mixer{display:flex;flex-direction:column;align-items:center;gap:10px;position:relative}
.ag-swatches{display:flex;align-items:center;gap:16px}.ag-swatches>div{text-align:center}
.ag-sw{width:min(130px,26vw);height:min(130px,26vw);border-radius:50%;border:4px solid rgba(255,255,255,.85);margin:0 auto 6px;transition:background .1s}
.ag-vs{font-weight:900;font-size:22px;opacity:.7}
.ag-sliders{width:min(480px,100%);display:flex;flex-direction:column;gap:8px}
.ag-sl{display:grid;grid-template-columns:28px 1fr 42px;align-items:center;gap:10px;font-weight:800}
.ag-sl input{width:100%;height:12px;border-radius:99px;appearance:none;-webkit-appearance:none;outline:none}
.ag-sl-R input{background:linear-gradient(90deg,#000,#f00)}.ag-sl-G input{background:linear-gradient(90deg,#000,#0f0)}.ag-sl-B input{background:linear-gradient(90deg,#000,#00f)}
.ag-sl input::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;border:3px solid #1d2b53;cursor:pointer;box-shadow:0 0 8px rgba(255,255,255,.7)}
.ag-sl input::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid #1d2b53;cursor:pointer}
.ag-sl output{text-align:right;font-variant-numeric:tabular-nums}
@media(max-width:640px){.ag-sw{width:90px;height:90px}}

/* นักเรียน: รายการใบความรู้ในหน่วย */
.student-sheets{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.student-sheets .student-download{display:inline-block}
.student-sheet-pending{color:#6b7a80}.student-sheet-pending small{margin-left:6px;font-size:12px;background:#f1f4f5;border-radius:999px;padding:1px 8px}
.student-sheet-none{color:#6b7a80;margin:6px 0 0}

/* รูปประจำตัวนักเรียน */
.profile-avatar,.top-avatar{position:relative;overflow:hidden}
.photo-avatar{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.acct-photo{width:36px;height:48px;object-fit:cover;object-position:top;border-radius:6px;background:#eceef3;display:block}

/* เกม ว20292 (games-w20292.js) */
.cg-bar{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.cg-course{border:2px solid #cfe0e2;background:#fff;border-radius:999px;padding:8px 16px;font:700 14px inherit;color:#1d2b53;cursor:pointer}
.cg-course.on{background:#1d2b53;border-color:#1d2b53;color:#ffd84d}
.cg-timer{margin-bottom:8px}
.cg-prompt{margin:8px 2px;font-size:16px;font-weight:700;color:#fff;line-height:1.4}
.cg-prompt.cg-big{font-size:22px;text-align:center;margin:18px 6px}
.cg-keyhint{text-align:center;color:#cfd8ff;font-size:14px;margin-bottom:12px}
.cg-keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.cg-key{border:3px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);color:#fff;border-radius:14px;padding:16px 8px;font:800 20px inherit;cursor:pointer;letter-spacing:.5px}
.cg-key.ag-right{border-color:#3df08a;background:rgba(61,240,138,.3)}.cg-key.ag-wrong{border-color:#ff3b5c;background:rgba(255,59,92,.35)}
/* หน้าต่าง Word จำลอง */
.cg-word{background:#fff;color:#222;border-radius:10px;overflow:hidden;font-size:13px;max-width:640px;margin:0 auto;box-shadow:0 8px 24px rgba(0,0,0,.35);user-select:none}
.cg-word [data-p]{cursor:pointer;transition:outline .1s}.cg-word [data-p]:hover{outline:2px dashed #6aa8ff;outline-offset:-2px}
.cg-w-title{background:#2b579a;color:#fff;text-align:center;padding:6px;font-weight:600}
.cg-w-top{display:flex;justify-content:space-between;align-items:center;background:#f3f3f3;padding:4px 8px;gap:8px}
.cg-w-qat{background:#e3e8f2;border-radius:6px;padding:3px 10px;letter-spacing:6px}.cg-w-search{background:#fff;border:1px solid #ccc;border-radius:6px;padding:3px 24px 3px 8px;color:#888}
.cg-w-tabs{display:flex;gap:16px;padding:4px 10px;background:#f3f3f3;border-bottom:1px solid #ddd}.cg-w-tabs b{color:#2b579a;border-bottom:2px solid #2b579a}
.cg-w-ribbon{display:flex;gap:6px;padding:6px 8px;background:#fafafa;border-bottom:1px solid #ddd}
.cg-w-grp{border-right:1px solid #ddd;padding:2px 14px;text-align:center}.cg-w-grp em{display:block;font-style:normal;font-weight:700;margin-bottom:4px}.cg-w-grp small{color:#777}
.cg-w-body{display:flex;background:#d9dde5;padding:8px;gap:6px;height:128px}
.cg-w-page{flex:1;background:#fff;padding:12px 16px;display:flex;flex-direction:column;gap:8px}.cg-w-page i{display:block;height:7px;background:#d6dae2;border-radius:4px}.cg-w-page i.s{width:55%}
.cg-w-scroll{width:14px;background:#ececec;border-radius:7px;position:relative}.cg-w-scroll u{position:absolute;left:2px;right:2px;top:6px;height:40px;background:#aaa;border-radius:6px}
.cg-w-status{display:flex;justify-content:space-between;background:#2b579a;color:#fff;padding:4px 10px}.cg-w-views{letter-spacing:6px;padding:0 6px}
.cg-good{outline:3px solid #3df08a!important;outline-offset:-3px;background-color:rgba(61,240,138,.25)}
.cg-bad{outline:3px solid #ff3b5c!important;outline-offset:-3px;background-color:rgba(255,59,92,.25)}
.cg-reveal{outline:3px dashed #ffd84d!important;outline-offset:-3px;animation:cgblink .35s 2}
@keyframes cgblink{50%{background-color:rgba(255,216,77,.5)}}
/* จัดรูปแบบ */
.cg-fmt{display:grid;grid-template-columns:1fr 1fr;gap:10px}.cg-fmt-col h4{margin:0 0 6px;color:#ffd84d;font-size:14px}
.cg-doc{background:#fff;color:#111;border-radius:8px;padding:10px 12px;min-height:150px}.cg-doc p{margin:0 0 4px;line-height:1.5}
.cg-tools{margin-top:8px;display:grid;gap:6px;font-size:13px;color:#fff}.cg-tools>div{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.cg-tg{border:2px solid rgba(255,255,255,.4);background:rgba(255,255,255,.12);color:#fff;border-radius:8px;padding:5px 9px;font:600 13px inherit;cursor:pointer}.cg-tg.on{background:#ffd84d;color:#1d2b53;border-color:#ffd84d}
.cg-fmt-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px}
@media(max-width:640px){.cg-fmt{grid-template-columns:1fr}}
/* ทายการจัดวางภาพ */
.cg-qbox{text-align:center}.cg-qpic{min-height:10px}
.cg-diagram{background:#fff;border-radius:10px;padding:12px;width:min(320px,100%);margin:6px auto 0;position:relative}
.cg-diagram i{display:block;height:6px;background:#c7ccd8;border-radius:3px;margin:6px 0}
.cg-d-img{display:block;background:linear-gradient(135deg,#ffb74d,#f06292);border-radius:6px}
.cg-d-line{display:flex;align-items:center;gap:6px}.cg-d-line i{flex:1}.cg-d-img.inl{width:46px;height:46px}
.cg-d-flow{overflow:hidden}.cg-d-img.fl{float:left;width:84px;height:84px;margin:2px 10px 4px 0}.cg-d-img.ti{border-radius:50%;shape-outside:circle(50%);margin-right:4px}
.cg-d-over{position:relative}.cg-d-img.ov{position:absolute;left:30%;top:14px;width:90px;height:70px}.cg-d-img.bh{opacity:.55}.cg-d-img.fr{box-shadow:0 2px 6px rgba(0,0,0,.35)}
/* หนังสือราชการ */
.cg-letter{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:12px;height:100%}
.cg-pool{display:flex;flex-direction:column;gap:6px;overflow:auto;padding-right:4px}
.cg-card{border:2px solid rgba(255,255,255,.4);background:rgba(255,255,255,.12);color:#fff;border-radius:10px;padding:8px 10px;font:600 13px/1.35 inherit;text-align:left;cursor:pointer}
.cg-card.sel{background:#ffd84d;color:#1d2b53;border-color:#ffd84d}.cg-card.used{opacity:.3}
.cg-a4{background:#fff;border-radius:6px;padding:10px 14px;display:flex;flex-direction:column;gap:5px;overflow:auto}
.cg-slot{display:flex;gap:6px;align-items:center;border:2px dashed #b9c0d4;background:#f6f8ff;color:#223;border-radius:6px;padding:4px 8px;min-height:30px;font:600 12px/1.3 inherit;cursor:pointer}
.cg-slot small{color:#8a93b0;font-weight:700}.cg-slot span{flex:1}
.cg-sl-c{justify-content:center}.cg-sl-m{margin-left:35%}.cg-sl-r{margin-left:35%}.cg-sl-j span{text-align:justify;text-indent:1.5em}
.cg-slot.done{border-style:solid;border-color:#2cc27a;background:#e7fbf1}
.cg-nope{animation:cgshake .4s;border-color:#ff3b5c!important}@keyframes cgshake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@media(max-width:640px){.cg-letter{grid-template-columns:1fr}.cg-pool{max-height:34%}}
/* บรรณาธิการตรวจงาน */
.cg-review{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:12px;height:100%}
.cg-paper{background:#fff;color:#111;border-radius:6px;padding:12px;display:flex;flex-direction:column;gap:4px;overflow:auto}
.cg-line{border:0;background:transparent;text-align:left;font:15px/1.5 inherit;color:#111;padding:3px 6px;border-radius:5px;cursor:pointer}.cg-line:hover{background:#eef2ff}
.cg-line.sel{background:#fff3b0;outline:2px solid #f0b400}.cg-line.fixed{background:#e7fbf1;text-decoration:underline wavy #2cc27a}
.cg-side{display:flex;flex-direction:column;gap:8px;overflow:auto;color:#fff}.cg-side h4{margin:0;color:#ffd84d}
.cg-pick{display:grid;gap:6px;font-size:13px}.cg-pick small{color:#cfd8ff}
.cg-cmt{border:2px solid rgba(255,255,255,.4);background:rgba(255,255,255,.12);color:#fff;border-radius:10px;padding:8px 10px;font:600 13px/1.4 inherit;text-align:left;cursor:pointer}.cg-cmt:disabled{opacity:.45}
.cg-cmt.ag-wrong{border-color:#ff3b5c;background:rgba(255,59,92,.35)}
.cg-cm{margin:0;padding-left:18px;font-size:13px;display:grid;gap:6px}.cg-cm small{display:block;color:#cfd8ff}
@media(max-width:640px){.cg-review{grid-template-columns:1fr}}
/* ว31182: เกมเลือกคำตอบ โครงร่างเว็บ และบล็อกโค้ด */
.cg-why{min-height:22px;margin:2px 6px 8px;color:#ffd84d;font-size:14px;font-weight:600;text-align:center}
.cg-choices .cg-key{font-size:16px;line-height:1.35}
.cg-wire{background:#fff;border-radius:8px;padding:8px;display:flex;flex-direction:column;gap:6px;overflow:auto}
.cg-wire-mid{display:grid;grid-template-columns:1fr 1.4fr;gap:6px;flex:1}
.cg-wire .cg-slot{flex-direction:column;align-items:flex-start;justify-content:center}.cg-wire .cg-slot small{font-size:11px}.cg-wire .cg-slot span{font-size:12px}
.cg-code{background:#1b2336;border-radius:8px;padding:10px;color:#fff;overflow:auto}.cg-code h4{margin:0 0 8px;color:#ffd84d;font-size:14px}
.cg-stack{display:flex;flex-direction:column;gap:3px}
.cg-placed{background:#4c7bd9;border-radius:8px;padding:8px 10px;font:600 13px/1.3 ui-monospace,Consolas,monospace;box-shadow:inset 0 -3px 0 rgba(0,0,0,.25)}.cg-placed.ev{background:#e0a21c;color:#1d2b53}
.cg-blk{font-family:ui-monospace,Consolas,monospace}.cg-blk.ev{border-color:#e0a21c}
/* ว20292 เกมแอคชั่นโรกไลต์ (Phaser) */
.ag-stage:has(.rg-host){padding:0;background:#0f1733}
.rg-host{position:absolute;inset:0}.rg-host canvas{display:block;touch-action:none}
.rg-load{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#cfd8ff;font-weight:700}
.rg-hud{position:absolute;left:10px;right:10px;top:8px;pointer-events:none;color:#fff;font-weight:700;text-shadow:0 1px 3px #000;z-index:3}
.rg-top{display:flex;justify-content:space-between;gap:8px;font-size:15px}
.rg-xp{height:9px;background:rgba(255,255,255,.22);border-radius:99px;overflow:hidden;margin-top:4px}.rg-xp i{display:block;height:100%;width:0;background:linear-gradient(90deg,#6fd0ff,#8b7bff);transition:width .15s}
.rg-ups{margin-top:4px;font-size:15px;min-height:20px}
.rg-boss{margin:6px auto 0;width:min(360px,70%);text-align:center;font-size:14px}.rg-bhp i{background:linear-gradient(90deg,#ff7a7a,#ff2e5a);width:100%}
.rg-banner{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);z-index:4;background:rgba(10,14,40,.82);color:#ffd84d;font-weight:800;font-size:clamp(16px,3.4vw,26px);padding:12px 22px;border-radius:16px;pointer-events:none;text-align:center;max-width:90%}
.rg-banner.show{animation:rgban 2.6s forwards}@keyframes rgban{0%{opacity:0;transform:translate(-50%,-30%)}12%,80%{opacity:1;transform:translate(-50%,-50%)}100%{opacity:0}}
.rg-ov{position:absolute;inset:0;z-index:6;background:rgba(8,12,30,.82);display:flex;align-items:center;justify-content:center;padding:12px;overflow:auto}
.rg-box{width:min(620px,100%);color:#fff;text-align:center}.rg-box small{color:#ffd84d;font-weight:700}.rg-box h3{margin:8px 0 12px;font-size:clamp(17px,3vw,22px);color:#fff;line-height:1.4}
.rg-opts{display:grid;gap:8px}.rg-opt{font-size:17px!important;padding:12px 8px!important}.rg-why{min-height:20px;margin:10px 0 0;color:#ffe9a8;font-size:14px}
.rg-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:10px}
.rg-card{display:flex;flex-direction:column;gap:4px;align-items:center;border:3px solid rgba(255,255,255,.4);background:rgba(255,255,255,.12);color:#fff;border-radius:16px;padding:14px 8px;font:inherit;cursor:pointer}
.rg-card:hover{background:rgba(255,216,77,.25);border-color:#ffd84d}.rg-card span{font-size:38px}.rg-card b{font-size:16px}.rg-card em{font-style:normal;font-size:13px;opacity:.9}.rg-card small{color:#9be7ff}
.rg-ov[hidden],.rg-boss[hidden],.rg-banner[hidden]{display:none!important}
.gp-cover{margin:0 0 10px}.gp-cover a{font-weight:700;color:#0f6b63}

.scheme-embed{width:100%;height:600px;border:0;display:block;margin:12px 0 0;background:transparent}
.scheme-menu{margin:8px 0 18px}.scheme-menu a{display:inline-block;text-decoration:none}
.pretest-note{color:var(--muted,#5b6f6e);margin:6px 0 12px}
.pretest-list{margin:0;padding-left:1.6rem;display:grid;gap:18px;font-size:1.1rem}
.pretest-q{margin:0 0 6px;font-weight:600}
.pretest-choices{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.pretest-choices li{padding:6px 10px;border:1px solid rgba(0,0,0,.1);border-radius:8px}

body[data-role="guest"] .sidebar-bottom .profile>span{display:none}
.tt-teacher-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:14px 0}.tt-teacher-bar select{flex:1;min-width:220px;padding:10px 12px;border:1px solid #cfe0e0;border-radius:12px;font:inherit;background:#fff}.tt-teacher-bar .primary-button{text-decoration:none;white-space:nowrap}.tt-teacher-name{margin:6px 0 12px;font-size:1.25rem}
.ac-pdf{text-decoration:none;white-space:nowrap}.ac-next{display:flex;flex-direction:column;gap:2px;margin:14px 0;padding:14px 18px;border-radius:16px;background:#e8f4f3;border:1px solid #b9dcda}.ac-next small{color:#0f6b68}.ac-next strong{font-size:1.1rem}.ac-filters{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.ac-month{margin:18px 0}.ac-month h3{margin:0 0 8px;color:#0f4f4d}.ac-item{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;padding:10px 14px;margin-bottom:6px;border-radius:12px;background:#fff;border:1px solid #dbe7e7;border-left:5px solid #9bb;}.ac-date{min-width:110px;font-weight:700;color:#0f4f4d}.ac-item.ac-past{opacity:.55}.ac-item.ac-now{background:#fff7df;border-color:#e3b93c}.ac-badge{font-style:normal;font-size:.8rem;background:#e3b93c;color:#4a3600;border-radius:999px;padding:2px 10px}.ac-key{border-left-color:#b11226}.ac-exam{border-left-color:#d9822b}.ac-meeting{border-left-color:#7a4bb8}.ac-sport{border-left-color:#2c8f4e}.ac-activity{border-left-color:#2b78c5}.ac-holiday{border-left-color:#c2185b}.ac-deadline{border-left-color:#777}
#quickNav{display:flex;gap:8px;overflow-x:auto;padding:10px 38px;background:#fff;border-bottom:1px solid var(--line);scrollbar-width:thin;-webkit-overflow-scrolling:touch}
#quickNav .qn-item{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border:1px solid #cfe0e0;border-radius:999px;background:#f4fbfa;color:#0f4f4d;font:inherit;font-weight:600;cursor:pointer;white-space:nowrap}
#quickNav .qn-item:hover{background:#e3f3f1}#quickNav .qn-item.active{background:#0f6b68;border-color:#0f6b68;color:#fff}
@media(max-width:720px){#quickNav{padding:8px 14px}#quickNav .qn-item{padding:7px 13px;font-size:.92rem}}
body.has-quicknav #roleNavigation nav{display:flex;flex-direction:column;overflow-x:hidden}
body.has-quicknav #roleNavigation [data-page="publicHome"],body.has-quicknav #roleNavigation [data-page="guestTeachingSchedule"],body.has-quicknav #roleNavigation [data-page="classTimetable"]{display:none}
body.has-quicknav #roleNavigation [data-page="guestCourses"]{order:1}body.has-quicknav #roleNavigation [data-page="guestTeachingPrograms"]{order:2}body.has-quicknav #roleNavigation [data-page="guestLessonPlans"]{order:3}body.has-quicknav #roleNavigation [data-page="guestPreTests"]{order:4}body.has-quicknav #roleNavigation [data-page="games"]{order:5}
body.has-quicknav #roleNavigation [data-page="aboutTeacher"]{order:6;margin-top:10px;border-top:1px solid rgba(255,255,255,.15);padding-top:12px}body.has-quicknav #roleNavigation [data-page="contactTeacher"]{order:7}body.has-quicknav #roleNavigation [data-page="faq"]{order:8}body.has-quicknav #roleNavigation [data-page="privacy"]{order:9}
.ac-countdown{margin:14px 0;padding:18px 20px;border-radius:18px;background:linear-gradient(135deg,#0f4f4d,#0f6b68);color:#fff}.ac-cd-head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}.ac-cd-head small{opacity:.85}.ac-cd-head select{max-width:100%;padding:8px 10px;border-radius:10px;border:0;font:inherit;background:#fff;color:#0f3f3d}.ac-cd-title{display:block;margin:8px 0 12px;font-size:1.25rem}.ac-cd-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:520px}.ac-cd-grid div{background:rgba(255,255,255,.14);border-radius:14px;padding:10px 6px;text-align:center}.ac-cd-grid b{display:block;font-size:2rem;line-height:1.1;font-variant-numeric:tabular-nums}.ac-cd-grid span{font-size:.85rem;opacity:.9}.ac-cd-note{display:block;margin-top:10px;opacity:.85}
.ac-item{display:grid;grid-template-columns:130px 1fr auto;gap:4px 14px;align-items:baseline}.ac-item .ac-date{min-width:0}@media(max-width:720px){.ac-item{grid-template-columns:1fr}.ac-cd-grid b{font-size:1.5rem}}

/* หน้าหลักนักเรียน: เรียนสัปดาห์นี้ (student-home.js) */
.sh-card h3{margin:6px 0 4px}.sh-card .student-sheets{margin:8px 0 0}.sh-next{margin-top:8px;font-size:.92em;color:var(--muted,#5b6b70)}.sh-todo{color:#b4232a;font-weight:600}.sh-card .student-unit-actions{margin-top:10px}
/* หน้าคะแนนของฉัน (student-home.js) */
.sg-row{display:grid;grid-template-columns:minmax(0,1fr) auto 118px;gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--line,#cfedee)}.sg-row strong{display:block}.sg-row span{color:var(--muted,#5b6b70);font-size:.92em}.sg-row>b{white-space:nowrap}.sg-total{font-weight:700}.sg-pill{justify-self:end;border-radius:999px;padding:3px 12px;font-size:.85em;font-weight:600;white-space:nowrap}.sg-row .sg-now{background:#e1f5f2;color:#0f6b63}.sg-row .sg-wait{background:#fdf0e1;color:#9a5a10}.sg-row .sg-later{background:#f1f3f4;color:#5b6b70}.sg-small{font-size:1.15rem!important;line-height:1.4}
@media (max-width:640px){.sg-row{grid-template-columns:minmax(0,1fr) auto}.sg-pill{grid-column:1/-1;justify-self:start}}
/* ภาระงาน (student-home.js) */
.sa-card .student-assignment-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.sa-card .sg-pill{flex:none}.sa-sheets{margin:10px 0 0;padding-left:0;list-style:none;display:grid;gap:8px}.sa-sheets small{color:var(--muted,#5b6b70)}.sa-note{margin:4px 0 14px;color:var(--muted,#5b6b70);font-size:.95em}
.sa-card .sg-now{background:#e1f5f2;color:#0f6b63}.sa-card .sg-wait{background:#fdf0e1;color:#9a5a10}.sa-card .sg-later{background:#f1f3f4;color:#5b6b70}
/* สอบออนไลน์ (exam-online.js) */
.ex-card p{margin:8px 0 0}.ex-done{color:#0f6b63}.ex-warn{color:#b4232a}.ex-actions{display:flex;gap:10px;margin:16px 0}
.ex-bar{position:sticky;top:72px;z-index:5;display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:#fff;border:1px solid var(--line,#cfedee);border-radius:16px;padding:12px 16px;margin-bottom:16px;box-shadow:0 6px 18px rgba(0,0,0,.06)}
.ex-bar span{color:var(--muted,#5b6b70)}.ex-clock{font-size:1.3rem;font-weight:700;color:#0f6b63;font-variant-numeric:tabular-nums}.ex-clock.ex-hurry{color:#b4232a}
.ex-list{padding-left:1.6em;margin:0}.ex-sec{margin:22px 0 8px -1.2em;color:#8b1a24;font-size:1.05rem}.ex-q{margin:0 0 14px;padding:14px 16px;background:#fff;border:1px solid var(--line,#cfedee);border-radius:14px}.ex-q p{margin:0 0 8px;font-weight:600}
.ex-choices label{display:block;padding:8px 10px;border-radius:10px;cursor:pointer}.ex-choices label:hover{background:#f1faf9}.ex-choices input{margin-right:6px}.ex-choices label:has(input:checked){background:#e1f5f2}
.ex-result{max-width:520px;margin:10px 0 18px}
.ex-admin{margin-bottom:18px}.ex-admin-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}.ex-admin-top h3{margin:6px 0 4px}.ex-admin-top small{color:var(--muted,#5b6b70)}
.ex-minutes{display:inline-flex;gap:8px;align-items:center;margin:14px 0 8px}.ex-rooms{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin:6px 0 12px}.ex-rooms>span{font-weight:600;margin-right:4px}.ex-rooms label{display:inline-flex;gap:5px;align-items:center}
.ex-res-head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:14px 0 10px}.ex-res-sum{font-weight:600;margin-right:auto}
.ex-table-wrap{overflow-x:auto}.ex-table{width:100%;border-collapse:collapse;font-size:.95em}.ex-table th,.ex-table td{padding:8px 10px;border-top:1px solid var(--line,#cfedee);text-align:left;white-space:nowrap}.ex-table small{color:var(--muted,#5b6b70)}
.ex-table .sg-now,.ex-card .sg-now{background:#e1f5f2;color:#0f6b63}.ex-table .sg-wait{background:#fdf0e1;color:#9a5a10}.ex-table .sg-later{background:#f1f3f4;color:#5b6b70}.ex-table .sg-pill{border-radius:999px;padding:3px 10px;font-size:.85em;font-weight:600}
@media (max-width:640px){.ex-bar{top:60px}}
/* รายชื่อนักเรียนจริงพร้อมรูป (roster-real.js) */
.rr-search{min-width:200px;flex:1;max-width:320px}
.rr-info{margin:-6px 0 12px;color:#5f7f80;font-size:14px}
.rr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.rr-card{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.rr-photo{position:relative;aspect-ratio:3/4;background:#eaf3f3;display:grid;place-items:center}
.rr-photo span{font-size:40px;font-weight:700;color:#8fb5b6}
.rr-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.rr-text{padding:8px 10px 10px;display:flex;flex-direction:column;gap:2px;line-height:1.35}
.rr-text b{font-size:14px}
.rr-text small{color:#7a8a8b;font-size:12px}
.rr-text .rr-off{color:#b4533f}
@media (max-width:560px){.rr-grid{grid-template-columns:repeat(2,1fr);gap:8px}.rr-search{max-width:none}}
/* กระดานสนทนารายห้อง (board.js) */
.bd-box{max-width:980px}
.bd-hint{align-self:center;color:#6b8a8b;font-size:13px}
.bd-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin:4px 0 14px}
.bd-head h3{margin:0}
.bd-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.bd-form[hidden]{display:none}
.bd-form{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:14px}
.bd-form input,.bd-form textarea{font:inherit;padding:10px 12px;border:1px solid #cfe3e4;border-radius:10px;resize:vertical;width:100%;box-sizing:border-box}
.bd-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.bd-item{all:unset;box-sizing:border-box;display:grid;grid-template-columns:40px 1fr 92px;gap:12px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line);cursor:pointer}
.bd-item:last-child{border-bottom:0}
.bd-item:hover,.bd-item:focus-visible{background:#f3fafa}
.bd-pinned{background:#fffaf0}
.bd-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.bd-main b{font-size:15px;overflow-wrap:anywhere}
.bd-main small,.bd-count small{color:#7a8a8b;font-size:12px}
.bd-snip{color:#5c6d6e;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-count{display:flex;flex-direction:column;align-items:flex-end;font-size:12px;color:#5c6d6e;text-align:right}
.bd-count b{font-size:18px;color:#1b6f71}
.bd-ava{width:36px;height:36px;border-radius:50%;display:inline-grid;place-items:center;background:#dcefef;color:#2f7476;font-weight:700;flex:none}
.bd-ava.bd-teacher{background:#7b1e2b;color:#fff}
.bd-who.bd-teacher{color:#7b1e2b;font-weight:700}
.bd-who em{font-style:normal;font-size:11px;background:#7b1e2b;color:#fff;border-radius:999px;padding:1px 7px;margin-left:2px}
.bd-tag{font-style:normal;font-size:11px;background:#f4c84a;color:#4a3500;border-radius:999px;padding:1px 8px;margin-right:6px;vertical-align:2px}
.bd-tag.bd-lock{background:#e4e7ea;color:#555}
.bd-post{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:10px}
.bd-op{border-color:#9fd0d1;box-shadow:0 2px 0 #dcefef}
.bd-op h3{margin:0 0 10px;overflow-wrap:anywhere}
.bd-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px}
.bd-meta>span:not(.bd-ava):not(.bd-who){color:#7a8a8b;font-size:12px}
.bd-body{white-space:pre-wrap;overflow-wrap:anywhere;margin-top:10px;line-height:1.6}
.bd-sub{color:#5c6d6e;margin:16px 0 8px;font-weight:600}
.bd-link{all:unset;cursor:pointer;color:#b4533f;font-size:12px;margin-left:auto}
.bd-link:hover{text-decoration:underline}
.bd-pager{display:flex;gap:8px;justify-content:center;margin:12px 0}
@media (max-width:560px){.bd-item{grid-template-columns:34px 1fr;}.bd-count{grid-column:2;flex-direction:row;gap:6px;align-items:baseline;justify-content:flex-start}.bd-count b{font-size:14px}}
/* รายงานผลจากข้อมูลจริง (report-real.js) */
.rp-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:16px}
.rp-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.rp-card span{color:#5f7f80;font-size:13px}
.rp-card b{font-size:26px;color:#173f40}
.rp-card b small{font-size:13px;font-weight:500;color:#6b8a8b}
.rp-card em{font-style:normal;font-size:12px;color:#7a8a8b}
.rp-sec{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:16px}
.rp-sec h3{margin:0 0 4px;color:#9b1c2c}
.rp-sec h3 small{font-size:14px;color:#6b8a8b;font-weight:500}
.rp-note{color:#6b8a8b;font-size:13px;margin:0 0 10px}
.rp-scroll{overflow-x:auto;margin-bottom:10px}
.rp-table td,.rp-table th{text-align:center;white-space:nowrap}
.rp-table td.table-title{text-align:left}
.rp-id{display:block;color:#8a9a9b;font-size:11px}
.rp-low{color:#b4233a;font-weight:700}
.rp-none{color:#a5b0b1}
.rp-link{all:unset;cursor:pointer;color:#1b6f71;font-weight:700;text-decoration:underline}
.rp-follow{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.rp-f{border:1px solid #f0d5d8;background:#fff8f8;border-radius:10px;padding:10px 12px}
.rp-f b small{font-weight:500;color:#7a8a8b}
.rp-f ul{margin:6px 0 0;padding-left:18px;font-size:13px;color:#7b2b35}
.rp-bar .gp-select{white-space:nowrap}
/* ความคืบหน้ารายคน (progress-real.js) */
.pg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}
.pg-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.pg-card header{display:flex;align-items:center;gap:12px}
.pg-card header>div{flex:1;min-width:0}
.pg-card h4{margin:0;font-size:16px;overflow-wrap:anywhere}
.pg-card header small{color:#7a8a8b;font-size:12px}
.pg-photo{position:relative;width:48px;height:60px;border-radius:10px;overflow:hidden;background:#dcefef;display:grid;place-items:center;flex:none}
.pg-photo span{font-size:20px;font-weight:700;color:#2f7476}
.pg-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.pg-ok{background:#e1f5ec;color:#1d7a4f}.pg-warn{background:#fde8ea;color:#b4233a}.pg-idle{background:#eef0f2;color:#6b7378}
.pg-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;border-top:1px solid var(--line);padding-top:10px}
.pg-stats span{display:block;color:#6b8a8b;font-size:12px}
.pg-stats b{font-size:15px}
.pg-bar>div{display:flex;justify-content:space-between;font-size:13px;color:#5f7f80;margin-bottom:4px}
.pg-bar i{display:block;height:8px;background:#e3f1f1;border-radius:99px;overflow:hidden}
.pg-bar s{display:block;height:100%;background:#1b8a8c;border-radius:99px;text-decoration:none}
.pg-units{display:flex;flex-wrap:wrap;gap:6px}
.pg-u{min-width:34px;padding:3px 6px;border-radius:8px;background:#f1f3f4;color:#9aa4a6;font-size:12px;text-align:center;display:inline-flex;gap:4px;justify-content:center}
.pg-u em{font-style:normal;font-weight:700}
.pg-u.ok{background:#e1f5ec;color:#1d7a4f}.pg-u.low{background:#fde8ea;color:#b4233a}
.pg-why{margin:0;font-size:12px;color:#b4233a}
@media (max-width:560px){.pg-grid{grid-template-columns:1fr}.pg-stats{grid-template-columns:repeat(2,1fr)}}
.pg-stats{grid-template-columns:repeat(3,1fr)}
.pg-stats small{display:block;color:#8a9a9b;font-size:11px}
/* สอบหลังเรียน (posttest.js) */
.pt-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:#6b8a8b;margin:-4px 0 10px}
.pt-choice{display:block;padding:6px 10px;border:1px solid rgba(0,0,0,.1);border-radius:8px;margin-bottom:4px;cursor:pointer}
.pt-choice:has(input:checked){border-color:#1b8a8c;background:#eaf7f7}
.pt-compare{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0}
.pt-compare div{background:#f5fafa;border-radius:10px;padding:10px;text-align:center}
.pt-compare span{display:block;font-size:12px;color:#6b8a8b}
.pt-compare b{font-size:22px}
.pt-up{color:#1d7a4f;font-weight:700}.pt-down{color:#b4233a;font-weight:700}
.pa-list{display:flex;flex-direction:column;gap:10px}
.pa-unit{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.pa-unit.pa-on{border-color:#7cc7b0;box-shadow:0 2px 0 #dff3ea}
.pa-unit header{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.pa-unit header small{display:block;color:#6b8a8b;font-size:12px;margin-top:4px}
.pa-unit .ex-rooms{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;font-size:14px}
.pa-all{margin-left:0;color:#1b6f71}
.pa-btns{justify-content:flex-start}
.pa-res{border-top:1px solid var(--line);padding-top:10px}
/* คะแนนใบงาน (worksheet-scores.js) */
.ws-actions{margin-left:auto}
.ws-table th{vertical-align:bottom;text-align:center;min-width:92px}
.ws-table th small{display:block;font-weight:400;font-size:11px;color:#7a8a8b;white-space:normal;line-height:1.3}
.ws-max{all:unset;cursor:pointer;display:inline-block;margin-top:4px;font-size:11px;padding:1px 8px;border-radius:999px;background:#e3f1f1;color:#1b6f71}
.ws-in{width:60px;padding:6px;border:1px solid #cfe3e4;border-radius:8px;text-align:center;font:inherit}
.ws-in:focus{outline:2px solid #1b8a8c;border-color:transparent}
.ws-in.ws-dirty{background:#fff6cf;border-color:#e6c34a}
.ws-table td{text-align:center}.ws-table td.table-title{text-align:left;white-space:nowrap}
.ws-sum{font-weight:700;color:#173f40;white-space:nowrap}
/* แถบตัวกรอง: ไม่ให้ป้ายกับช่องเลือกหดจนซ้อนกัน */
.alt-toolbar{align-items:center}
.alt-toolbar .gp-select{flex:none;white-space:nowrap}
.alt-toolbar .gp-select select{min-width:120px;max-width:100%}
.alt-toolbar .rr-search{flex:1 1 200px;min-width:160px}
@media (max-width:560px){.alt-toolbar .gp-select{flex:1 1 100%}.alt-toolbar .gp-select select{flex:1}}
/* สมุดประเมินผล (assess-book.js) */
.ab-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:-4px 0 14px;border-bottom:1px solid var(--line)}
.ab-tab{border:0;background:none;padding:8px 14px;font:inherit;font-weight:600;color:#6b8a8b;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1px}
.ab-tab.on{color:#0f5f61;border-bottom-color:#1b8a8c}
.ab-title{margin:0 0 2px;color:#9b1c2c}
.ab-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap;margin-bottom:10px}
.ab-head>div:first-child{flex:1;min-width:260px}
.ab-strip{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.ab-dot{width:34px;height:30px;border-radius:8px;border:1px solid var(--line);background:#fff;font:inherit;font-size:13px;cursor:pointer;color:#5c6d6e}
.ab-dot.half{background:#fff3d6;border-color:#e6c34a;color:#8a5a00}.ab-dot.ok{background:#e1f5ec;border-color:#7cc7b0;color:#1d7a4f}
.ab-dot.cur{outline:2px solid #1b8a8c;outline-offset:1px;font-weight:700}
.ab-forms{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;margin-bottom:10px}
.ab-form{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.ab-form>div{flex:1;min-width:0}.ab-form b{display:block;font-size:14px}.ab-form small{color:#7a8a8b;font-size:12px}
.ab-form.open{cursor:pointer}.ab-form.open:hover,.ab-form.open:focus-visible{border-color:#1b8a8c;box-shadow:0 2px 0 #dcefef}
.ab-form.off{opacity:.62}
.ab-no{flex:none;width:28px;height:28px;border-radius:8px;background:#e3f1f1;color:#0f5f61;display:grid;place-items:center;font-weight:700;font-size:13px}
.ab-half{background:#fff3d6;color:#8a5a00}.ab-auto{background:#e8eefc;color:#2d4fa3}
.ab-warn{background:#fff3d6;border-radius:8px;padding:8px 12px;font-size:13px;color:#7a5200}
.ab-row{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin:6px 0 12px}
.ab-row label{display:flex;gap:6px;align-items:center;font-weight:600;font-size:14px}
.ab-short{width:80px}
.ab-num{width:58px;height:32px;border:1px solid #cfe3e4;border-radius:8px;text-align:center;font:inherit}
.ab-autoval{display:inline-block;min-width:40px;padding:4px 8px;border-radius:8px;background:#e8eefc;color:#2d4fa3;font-weight:700}
.ab-obj td.table-title{white-space:normal;min-width:220px}.ab-tool{text-align:left;white-space:normal;min-width:200px;font-size:13px;color:#5c6d6e}
.ab-ind{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:10px;background:#fff}
.ab-ind h4{margin:0 0 4px;font-size:14px}
.ab-ind details{font-size:13px;color:#5c6d6e;margin-bottom:6px}.ab-ind summary{cursor:pointer;color:#1b6f71}
.ab-ind details p{background:#f3fafa;border-radius:8px;padding:8px 10px;margin:6px 0 0}
.ab-three{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ab-three label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600}
.ab-three textarea,.ab-sum{width:100%;border:1px solid #cfe3e4;border-radius:9px;padding:7px 9px;font:inherit;font-weight:400;resize:vertical}
.ab-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.ab-chip{border:1px dashed #1b8a8c;background:#fff;color:#0f5f61;border-radius:999px;padding:3px 10px;font:inherit;font-size:12px;cursor:pointer}
.ab-save{font-size:13px;color:#6b8a8b;align-self:center}.ab-save.ok{color:#1d7a4f}.ab-save.dirty{color:#a86a00}
@media (max-width:700px){.ab-three{grid-template-columns:1fr}.ab-forms{grid-template-columns:1fr}}
/* สมุดประเมินผล ระยะที่ 2: ตารางให้คะแนนรายคน */
.ab-gridwrap{max-height:68vh;overflow:auto;border:1px solid var(--line);border-radius:12px}
.ab-grid{margin:0}
.ab-grid thead th{position:sticky;top:0;z-index:2;background:#eef7f7;vertical-align:bottom;text-align:center;min-width:86px}
.ab-grid thead tr+tr th{top:34px}
.ab-grid th small{display:block;font-weight:400;font-size:11px;color:#6b8a8b;white-space:normal;line-height:1.3;max-width:130px;margin:0 auto}
.ab-colno{display:inline-block;font-weight:700}
.ab-fillcol{all:unset;cursor:pointer;display:block;margin:4px auto 0;font-size:11px;color:#1b6f71;text-decoration:underline}
.ab-grid td{text-align:center;white-space:nowrap}
.ab-grid td.ab-name{text-align:left;position:sticky;left:0;background:#fff;z-index:1;min-width:170px}
.ab-grid tr.ab-dirty td,.ab-grid tr.ab-dirty td.ab-name{background:#fffbe8}
.ab-seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.ab-seg button{border:0;background:#fff;min-width:30px;height:30px;padding:0 6px;cursor:pointer;font:inherit;font-size:13px;font-weight:600;color:#8a9a9b}
.ab-seg button+button{border-left:1px solid var(--line)}
.ab-seg button.on.ok{background:#1d9a67;color:#fff}.ab-seg button.on.warn{background:#e2a93a;color:#fff}.ab-seg button.on.bad{background:#d9534f;color:#fff}
.ab-grid td.tot{font-weight:700;color:#173f40}
.ab-kpa th.k{background:#e8eefc}.ab-kpa th.p{background:#e1f5ec}.ab-kpa th.a{background:#fff3d6}
.ab-src{color:#2d4fa3;font-weight:600}
.ab-filehelp{font-size:13px;color:#5c6d6e;margin:0 0 8px}.ab-filehelp summary{cursor:pointer;color:#1b6f71}
.pg-warn{background:#fde8ea;color:#b4233a}
/* สมุดประเมินผล ระยะที่ 3: งานกลุ่ม */
.ab-members{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px 14px}
.ab-members label{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px;padding:3px 0;border-bottom:1px dashed var(--line)}
.ab-members label.none span{color:#b4233a}
.ab-members select{min-width:96px;height:32px}
.ab-group{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:12px;background:#fff}
.ab-ghead{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-bottom:8px}
.ab-ghead input{max-width:220px}
.ab-ghead .rp-note{margin:0;flex:1}
.ab-group .ab-grid thead th{position:static}
.ab-pres{display:flex;gap:6px;align-items:center;font-size:13px;white-space:nowrap}
/* การวัดและประเมินผล (assess-hub.js) */
.ah-table td{vertical-align:top}.ah-table td small{display:block}
.ah-exam td{background:#fff8e6}
.ah-plans{text-align:left;white-space:normal;min-width:280px}
.ah-chip{all:unset;cursor:pointer;display:block;font-size:13px;color:#0f5f61;padding:2px 0;text-decoration:underline;text-underline-offset:2px}
.ah-rules{margin:0;padding-left:20px;line-height:1.7;font-size:14px}
.ah-matrix th,.ah-matrix td{text-align:center}
.ah-matrix td.table-title{text-align:left;min-width:190px;white-space:normal}
.ah-link{all:unset;cursor:pointer;font-weight:700;color:#0f5f61}
.ah-cell{display:inline-block;min-width:54px;padding:4px 8px;border-radius:8px;border:1px solid var(--line);background:#f6f7f8;color:#8a9a9b;font:inherit;font-size:13px;cursor:pointer}
.ah-cell.half{background:#fff3d6;border-color:#e6c34a;color:#7a5200}.ah-cell.ok{background:#e1f5ec;border-color:#7cc7b0;color:#1d7a4f;font-weight:700}
.ah-tool ol{margin:4px 0 6px;padding-left:22px;line-height:1.6;font-size:14px}
.ah-tool .ab-head{margin-bottom:4px}.ah-tool h3{margin:0}
.ah-rub td{white-space:normal;text-align:left;font-size:13px;min-width:130px;vertical-align:top}
.ah-miss{white-space:normal;text-align:left;font-size:13px;color:#7a5200;min-width:200px}
.ab-srclink{all:unset;cursor:pointer;display:block;margin-top:3px;font-size:11px;color:#1b6f71;text-decoration:underline;white-space:nowrap}
.ab-srclink:hover{color:#0f5f61}
.ab-row label .ab-srclink{display:inline;margin:0 0 0 4px}
/* เกมห้องปริศนา (games-escape.js) */
.esc-map,.esc-room{display:flex;flex-direction:column;gap:12px;color:#14213d}
.esc-story{margin:0;background:#fff8e6;border-left:4px solid #e2a93a;padding:10px 14px;border-radius:0 10px 10px 0;line-height:1.6}
.esc-doors{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.esc-door{display:flex;flex-direction:column;gap:4px;align-items:flex-start;text-align:left;padding:12px 14px;border-radius:14px;border:2px solid #d6dbe6;background:#fff;font:inherit;cursor:pointer}
.esc-door.open{border-color:#1b8a8c;box-shadow:0 3px 0 #bfe3e4}.esc-door.ok{border-color:#1d9a67;background:#effaf4}
.esc-door.lock{opacity:.55;cursor:not-allowed}
.esc-dno{font-size:28px}.esc-door small{color:#5b6b7c;font-size:12px}
.esc-note{margin:0;color:#5b6b7c;font-size:13px}
.esc-head{display:flex;gap:10px;align-items:center}.esc-head small{display:block;color:#5b6b7c;font-size:12px}
.esc-back{border:1px solid #d6dbe6;background:#fff;border-radius:9px;padding:6px 10px;font:inherit;cursor:pointer}
.esc-objs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.esc-obj{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;border-radius:14px;border:2px dashed #b9c3d6;background:#fff;font:inherit;cursor:pointer}
.esc-obj.sel{border-style:solid;border-color:#1b8a8c}.esc-obj.done{border-style:solid;border-color:#1d9a67;background:#effaf4}
.esc-ico{font-size:34px}.esc-st{color:#5b6b7c;font-size:13px}.esc-st b{color:#14213d;font-size:16px}
.esc-panel{background:#fff;border:1px solid #d6dbe6;border-radius:14px;padding:12px 14px;min-height:90px}
.esc-q{margin:0 0 10px;font-weight:700;line-height:1.5}
.esc-opts{display:flex;flex-wrap:wrap;gap:8px}
.esc-opts .cg-ch,.esc-opts .cg-card{flex:1 1 220px;text-align:left}
.esc-seq{margin:0 0 10px;padding-left:22px;color:#1d7a4f;font-weight:600}
.esc-match{display:grid;grid-template-columns:1fr 1fr;gap:10px}.esc-match>div{display:flex;flex-direction:column;gap:6px}
.esc-match .sel{outline:3px solid #1b8a8c}
.esc-type{display:flex;gap:8px;flex-wrap:wrap}.esc-type input{flex:1;min-width:180px;height:42px;font-size:16px}
.esc-hint{margin:6px 0 0;color:#5b6b7c;font-size:13px}
.esc-got{display:grid;grid-template-columns:auto auto 1fr;gap:4px 12px;align-items:center}
.esc-got span{font-size:30px;color:#1b8a8c}.esc-got b{font-size:34px}.esc-got p{margin:0}.esc-got small{grid-column:1/-1;color:#5b6b7c}
.esc-fail{text-align:center}.esc-fail p{color:#5b6b7c}
.esc-lock{background:#14213d;color:#fff;border-radius:14px;padding:12px 14px}
.esc-lockh{font-weight:700;margin-bottom:8px}
.esc-code{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.esc-code label{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:22px}
.esc-code input{width:52px;height:52px;text-align:center;font-size:26px;font-weight:700;border-radius:10px;border:2px solid #4b5b7c}
.esc-msg{margin:8px 0 0;color:#ffd166;min-height:1.2em}
.esc-room{position:relative}
.esc-out{position:absolute;inset:0;background:rgba(10,20,40,.72);display:grid;place-items:center;border-radius:14px;z-index:5}
.esc-outbox{background:#fff;color:#14213d;border-radius:16px;padding:20px;max-width:460px;text-align:center}
.esc-big{font-size:46px}.esc-recap{background:#effaf4;border-radius:10px;padding:10px;line-height:1.6}
.esc-feature{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;margin:0 0 14px}
.esc-feature .ag-gc-icon{font-size:40px}.esc-feature h3{margin:2px 0}.esc-feature p{margin:0}
@media (max-width:640px){.esc-objs{grid-template-columns:1fr}.esc-match{grid-template-columns:1fr}.esc-feature{grid-template-columns:1fr}}
.esc-head,.esc-head b{color:#fff}.esc-head small{color:rgba(255,255,255,.78)}
.esc-note{color:rgba(255,255,255,.85)}
#lessonGameModal .ag-stage:has(.esc-map),#lessonGameModal .ag-stage:has(.esc-room){overflow:auto}
/* ห้องปริศนา: ปุ่มคำตอบอ่านชัดบนกล่องสีขาว + กุญแจ + วิธีเล่น */
.esc-panel{color:#14213d}
.esc-btn{border:2px solid #c9d2e3;background:#f7f9fc;color:#14213d;border-radius:12px;padding:10px 14px;font:600 15px/1.4 inherit;text-align:left;cursor:pointer;flex:1 1 220px}
.esc-btn:hover:not(:disabled){border-color:#1b8a8c;background:#eef8f8}
.esc-btn.esc-sel{border-color:#1b8a8c;background:#dff3f3;outline:3px solid #9fd6d7}
.esc-btn.esc-yes{border-color:#1d9a67;background:#e1f5ec}
.esc-btn.esc-wrongx{border-color:#d9534f;background:#fdecec;color:#a33;text-decoration:line-through}
.esc-btn.esc-used{opacity:.45;border-style:dashed}
.esc-btn.esc-no{animation:escShake .4s}
@keyframes escShake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.esc-go{flex:0 0 auto;background:#1b8a8c;border-color:#1b8a8c;color:#fff;text-align:center}
.esc-in{flex:1;min-width:180px;height:44px;font-size:17px;border:2px solid #c9d2e3;border-radius:10px;padding:0 12px}
.esc-how1{margin:-4px 0 10px;color:#1b6f71;font-size:13px;font-weight:600}
.esc-how{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;padding:8px 14px 8px 32px;background:rgba(255,255,255,.12);border-radius:12px;color:#fff;font-size:14px;font-weight:600}
.esc-match .esc-btn{flex:none}
.esc-got{display:flex;gap:12px;align-items:center;font-size:40px}.esc-got b{font-size:17px;color:#1d7a4f}.esc-got p{margin:2px 0;font-size:14px}.esc-got small{font-size:13px;color:#5b6b7c}
.esc-keys{display:flex;gap:12px;flex-wrap:wrap}
.esc-key{display:inline-flex;align-items:center;gap:6px;font-size:26px;padding:6px 12px;border-radius:12px;background:rgba(255,255,255,.1);border:2px dashed rgba(255,255,255,.35)}
.esc-key i{font-style:normal;font-size:22px}
.esc-key.got{background:rgba(29,154,103,.35);border-style:solid;border-color:#7ee2b3}
.esc-lock .esc-msg{color:#ffd166;font-weight:700}
/* สถิติการเล่นเกม (game-stats.js) */
.gs-top{font-size:17px!important;line-height:1.3}
.gs-table td{vertical-align:middle}
.gs-name{white-space:nowrap}.gs-name img{width:28px;height:36px;object-fit:cover;object-position:top;border-radius:6px;vertical-align:middle;margin-right:8px}
.gs-none td{color:#9aa4a6}
.gs-detail td{border-top:0;padding-top:0;background:#fafcfc}
.gs-chip{display:inline-block;margin:2px 6px 2px 0;padding:2px 8px;border-radius:999px;background:#e3f1f1;color:#0f5f61;font-size:12px}
.gs-g small{color:#7a8a8b}