*{box-sizing:border-box}html,body{margin:0;font-family:'Sarabun',sans-serif;background:#f6f8fc;color:#172033}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}.container{max-width:1240px;margin:auto;padding:28px 20px 60px}.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:24px;padding:12px 22px;background:#fff;border-bottom:1px solid #e8edf5;box-shadow:0 4px 18px rgba(15,23,42,.04)}.brand{display:flex;align-items:center;gap:12px;min-width:260px}.brand img{width:48px;height:48px;object-fit:contain;border-radius:14px}.brand span{display:flex;flex-direction:column}.brand b{font-size:17px}.brand small{color:#7b879d}.topnav{display:flex;align-items:center;gap:6px;flex:1}.topnav a{padding:10px 13px;border-radius:12px;font-weight:700;color:#526077}.topnav a:hover,.topnav a.active{background:#eef4ff;color:var(--primary)}.userbox{display:flex;align-items:center;gap:12px;font-weight:700}.userbox span{max-width:190px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.userbox a{color:#e11d48}.pagehead{display:flex;justify-content:space-between;align-items:end;gap:18px;margin-bottom:22px}.pagehead h1{font-size:30px;margin:0}.pagehead p{margin:5px 0 0;color:#718096}.actions{display:flex;gap:9px;flex-wrap:wrap}.btn{border:0;border-radius:12px;padding:10px 15px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px}.btn.primary{background:var(--primary);color:#fff}.btn.soft{background:#edf3ff;color:#254c9b}.btn.green{background:#e7f8ef;color:#137044}.btn.red{background:#ffecef;color:#b4233f}.btn.yellow{background:#fff6dc;color:#855b00}.btn.dark{background:#172033;color:#fff}.grid{display:grid;gap:18px}.grid.cols2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.cols3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid.cols4{grid-template-columns:repeat(4,minmax(0,1fr))}.card{background:#fff;border:1px solid #e8edf5;border-radius:20px;padding:20px;box-shadow:0 8px 26px rgba(15,23,42,.045)}.card h2,.card h3{margin-top:0}.stat{padding:18px}.stat .n{font-size:32px;font-weight:800}.stat .label{color:#7b879d;font-weight:700}.course-card{display:flex;flex-direction:column;min-height:190px}.course-icon{width:52px;height:52px;display:grid;place-items:center;border-radius:16px;background:#edf3ff;font-size:26px}.course-card h3{font-size:19px;margin:14px 0 6px}.muted{color:#7b879d}.small{font-size:13px}.badge{display:inline-block;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:800;background:#edf3ff;color:#315aa8}.badge.green{background:#e7f8ef;color:#147044}.badge.yellow{background:#fff6dc;color:#855b00}.badge.red{background:#ffecef;color:#b4233f}.badge.gray{background:#eef1f5;color:#5f6b7a}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.field label{display:block;margin-bottom:7px;font-weight:800}.field input,.field select,.field textarea{width:100%;border:1px solid #dce3ee;border-radius:12px;padding:11px 13px;background:#fff;outline:none}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 12%,transparent)}.field textarea{min-height:120px;resize:vertical}.field.full{grid-column:1/-1}.flash{padding:13px 16px;border-radius:14px;margin-bottom:18px;font-weight:700}.flash.success{background:#e9f9f0;color:#146c43}.flash.error{background:#fff0f1;color:#a8203a}.flash.warning{background:#fff6df;color:#7d5800}.table-wrap{overflow:auto;border:1px solid #e8edf5;border-radius:16px}.table{width:100%;border-collapse:collapse;background:#fff}.table th,.table td{padding:12px 13px;border-bottom:1px solid #edf1f6;text-align:left;vertical-align:top}.table th{font-size:13px;color:#68758b;background:#f9fbfe;white-space:nowrap}.table tr:last-child td{border-bottom:0}.tabs{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 20px}.tabs a{padding:9px 13px;border-radius:11px;background:#fff;border:1px solid #e1e7f0;font-weight:800;color:#607087}.tabs a.active{background:var(--primary);color:#fff;border-color:var(--primary)}.unit{border-left:5px solid var(--primary)}.lesson-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid #edf1f6}.lesson-row:first-of-type{border-top:0}.progress{height:9px;background:#edf1f6;border-radius:99px;overflow:hidden}.progress i{display:block;height:100%;background:var(--primary)}.login-shell{min-height:100vh;display:grid;place-items:center;padding:20px;background:linear-gradient(135deg,#eef4ff,#fff9e8)}.login-card{width:min(950px,100%);display:grid;grid-template-columns:.9fr 1.1fr;background:#fff;border-radius:28px;overflow:hidden;box-shadow:0 25px 70px rgba(33,48,78,.14)}.login-side{background:linear-gradient(145deg,var(--primary),#15366f);color:#fff;padding:44px}.login-side img{width:84px;height:84px;object-fit:contain;background:#fff;border-radius:24px;padding:7px}.login-form{padding:44px}.login-choice{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:22px}.login-choice label{border:1px solid #dce3ee;border-radius:14px;padding:12px;text-align:center;font-weight:800;cursor:pointer}.login-choice input{margin-right:6px}.hero{padding:25px;background:linear-gradient(120deg,#fff,#f0f5ff);border-radius:22px;border:1px solid #e5ebf5;margin-bottom:20px}.hero h1{margin:0 0 6px}.empty{text-align:center;padding:38px 20px;color:#7b879d}.split{display:grid;grid-template-columns:1.2fr .8fr;gap:20px}.sticky-side{position:sticky;top:90px}.notice{padding:13px 15px;border-radius:13px;background:#f4f7fb;color:#5d6a7d}.score-big{font-size:42px;font-weight:800;color:var(--primary)}.question{padding:18px;margin-bottom:14px;border:1px solid #e5eaf2;border-radius:16px;background:#fff}.option{display:block;padding:10px 12px;border:1px solid #e1e7ef;border-radius:11px;margin-top:8px;cursor:pointer}.option:hover{background:#f7faff}.check-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.check{display:flex;align-items:center;gap:7px;padding:9px 10px;border:1px solid #e1e7ef;border-radius:10px;background:#fff}.right{text-align:right}.nowrap{white-space:nowrap}.danger-zone{border-color:#ffd6dd;background:#fffafb}@media(max-width:980px){.topbar{align-items:flex-start;flex-wrap:wrap}.brand{min-width:0;flex:1}.topnav{order:3;width:100%;overflow:auto}.userbox span{display:none}.grid.cols4{grid-template-columns:repeat(2,1fr)}.grid.cols3{grid-template-columns:repeat(2,1fr)}.split{grid-template-columns:1fr}.sticky-side{position:static}}@media(max-width:650px){.container{padding:20px 13px 45px}.pagehead{align-items:flex-start;flex-direction:column}.pagehead h1{font-size:25px}.grid.cols2,.grid.cols3,.grid.cols4,.form-grid,.check-grid{grid-template-columns:1fr}.login-card{grid-template-columns:1fr}.login-side{padding:28px}.login-form{padding:28px 22px}.topbar{padding:10px 12px}.brand small{display:none}.topnav a{white-space:nowrap}.card{padding:16px}}

/* Room-separated grade entry */
.class-tabs{margin-bottom:14px;overflow-x:auto;white-space:nowrap;padding-bottom:4px}
.class-tabs a{display:inline-flex;align-items:center;gap:5px}
.inline-grade-form{margin:0}
.inline-grade-grid{display:grid;grid-template-columns:120px minmax(240px,1fr) auto;gap:10px;align-items:center}
.inline-grade-grid input{width:100%}
.grade-entry-table td{vertical-align:middle}
@media(max-width:900px){.inline-grade-grid{grid-template-columns:1fr}.inline-grade-grid .actions{justify-content:flex-start}.grade-entry-table{min-width:850px}}

/* V8: icon picker */
.icon-picker{position:relative}.icon-picker-current{width:100%;min-height:58px;border:1px solid #dce3ee;border-radius:14px;background:#fff;display:flex;align-items:center;gap:12px;padding:9px 13px;cursor:pointer;text-align:left}.icon-picker-current span{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:#f2f6ff;font-size:24px}.icon-picker-current small{font-weight:800;color:#64748b}.icon-picker-menu{position:absolute;z-index:50;top:calc(100% + 8px);left:0;width:min(390px,92vw);padding:12px;background:#fff;border:1px solid #dfe6f0;border-radius:18px;box-shadow:0 18px 50px rgba(15,23,42,.18);display:grid;grid-template-columns:repeat(7,1fr);gap:7px}.icon-picker-menu[hidden]{display:none}.icon-choice{height:43px;border:1px solid #e7ebf2;border-radius:11px;background:#fff;font-size:22px;cursor:pointer}.icon-choice:hover,.icon-choice.selected{background:#edf4ff;border-color:var(--primary);transform:translateY(-1px)}

/* V8: student-friendly UI */
body.student-ui{background:linear-gradient(180deg,#f5fbff 0,#fff9f3 46%,#f7fbff 100%);min-height:100vh}.student-ui .topbar{background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom-color:#e5eff8}.student-ui .brand b{color:#23445f}.student-ui .topnav a{border-radius:999px}.student-ui .topnav a:hover,.student-ui .topnav a.active{background:#e9f7ff;color:#17658f}.student-ui .userbox{background:#fff8e8;padding:7px 10px;border-radius:999px}.student-ui .container{max-width:1180px}.student-welcome{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:28px 30px;margin-bottom:28px;border:1px solid #dfeef7;border-radius:28px;background:linear-gradient(135deg,#e8f8ff,#fff7df 58%,#f6edff);box-shadow:0 12px 34px rgba(48,96,124,.08);overflow:hidden}.student-welcome h1{font-size:32px;margin:7px 0 4px;color:#25445d}.student-welcome p{margin:0;color:#60788d;font-size:16px;font-weight:600}.student-kicker{display:inline-flex;padding:6px 11px;border-radius:999px;background:#fff;color:#39708f;font-size:13px;font-weight:800;box-shadow:0 4px 12px rgba(0,0,0,.04)}.student-welcome-art{font-size:52px;letter-spacing:8px;filter:drop-shadow(0 7px 9px rgba(0,0,0,.08))}.student-section-head{display:flex;align-items:end;justify-content:space-between;gap:14px;margin:8px 0 14px}.student-section-head h2{margin:0;font-size:24px;color:#294a63}.student-section-head p{margin:4px 0 0;color:#7a8fa0}.student-score-link{padding:10px 15px;background:#fff3bf;color:#795800;border-radius:999px;font-weight:800}.student-course-grid{gap:20px}.student-course-card{min-height:225px;border:0;border-radius:25px;box-shadow:0 10px 28px rgba(51,85,104,.09);transition:.18s ease;overflow:hidden;position:relative}.student-course-card:before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:linear-gradient(90deg,#73c9f4,#ffd874,#b8e8bd,#d6b7f5)}.student-course-card:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(51,85,104,.14)}.student-course-top{display:flex;justify-content:space-between;align-items:center}.student-ui .student-course-card .course-icon{width:62px;height:62px;font-size:31px;border-radius:20px;background:linear-gradient(145deg,#edf8ff,#fff3dc)}.student-course-card h3{font-size:20px;color:#24465e}.student-card-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto;padding-top:16px;border-top:1px dashed #e8edf1;color:#688093;font-size:13px}.student-card-footer b{color:#2579a6}.student-task-head{margin-top:30px}.student-task-list{display:grid;gap:11px}.student-task-card{display:flex;align-items:center;gap:14px;padding:15px 17px;background:#fff;border:1px solid #e8eef4;border-radius:20px;box-shadow:0 6px 18px rgba(50,79,97,.05);transition:.15s}.student-task-card:hover{transform:translateX(3px);border-color:#cfe5f3}.student-task-icon{width:48px;height:48px;display:grid;place-items:center;background:#fff4d8;border-radius:15px;font-size:23px;flex:0 0 auto}.student-task-main{min-width:0;display:flex;flex-direction:column;gap:2px}.student-task-main small{color:#7990a1;font-weight:700}.student-task-main b{font-size:16px;color:#284b63}.student-task-main span{font-size:12px;color:#8a99a6}.student-task-go{margin-left:auto;white-space:nowrap;color:#24739d;font-weight:800}.student-empty{border:1px dashed #cfe0ea;background:rgba(255,255,255,.7)}.student-ui .unit{border-left:0;border-top:6px solid #8bd3f5;border-radius:24px}.student-ui .lesson-row{padding:15px 5px}.student-ui .lesson-row .btn.soft{background:#e9f8ff;color:#17658f}.student-ui .tabs a{border-radius:999px}.student-ui .card{border-color:#e8eef3}.student-ui .score-big{color:#ef9b27}
@media(max-width:650px){.icon-picker-menu{grid-template-columns:repeat(6,1fr)}.student-welcome{padding:22px 19px}.student-welcome h1{font-size:25px}.student-welcome-art{font-size:36px}.student-section-head{align-items:flex-start;flex-direction:column}.student-task-go{display:none}.student-course-card{min-height:205px}}

/* V9: highlight the indicator currently being edited */
.table tr.row-highlight td{background:#fff8e8}

/* V12: course-level examinations */
.exam-switch{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px}.exam-switch a{padding:11px 16px;border-radius:14px;background:#fff;border:1px solid #dce3ee;font-weight:800;color:#334155;text-decoration:none}.exam-switch a.active{background:#eff6ff;border-color:#93c5fd;color:#1d4ed8}.exam-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}.exam-card{display:flex;gap:15px;align-items:flex-start}.exam-card-icon{font-size:38px;line-height:1}.exam-card-body{flex:1;min-width:0}.exam-card-body h3{margin:10px 0 7px}.exam-meta{display:flex;gap:8px 14px;flex-wrap:wrap;font-size:13px;color:#64748b}.exam-schedule{margin-top:12px;padding:11px 13px;border-radius:13px;background:#f8fafc}.exam-card-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}.btn.disabled{opacity:.55;pointer-events:none}.student-exam-alerts{display:grid;gap:10px;margin-bottom:25px}.student-exam-alert{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;padding:15px 17px;border-radius:18px;border:1px solid #fde68a;background:#fffbeb;box-shadow:0 7px 20px rgba(15,23,42,.04)}.student-exam-alert.is-open{border-color:#86efac;background:#f0fdf4}.student-exam-alert .student-task-main{flex:1;display:flex;flex-direction:column;gap:3px}.student-exam-alert .student-task-main small{color:#64748b}.student-exam-alert .student-task-main span{font-size:13px;color:#64748b}.student-exam-alert .student-task-go{font-weight:800;color:#2563eb}.student-exam-head{margin-top:28px}@media(max-width:700px){.exam-card{display:block}.exam-card-icon{margin-bottom:8px}.student-exam-alert{align-items:flex-start}.student-exam-alert .student-task-go{display:none}}