@import url('https://fonts.googleapis.com/css2?family=Anuphan:wght@400;500;600;700&display=swap');
:root{--bg:#f5f7fb;--paper:#fff;--text:#19263d;--muted:#8290a5;--line:#e9edf5;--primary:#3468e9;--soft:#edf2ff;--shadow:0 6px 28px #173a6d06;--yellow:#ffdb81}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.65 Anuphan,'Segoe UI',Tahoma,sans-serif}a{color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}button,input,select,textarea{font:inherit}button,.button{display:inline-flex;justify-content:center;align-items:center;gap:8px;background:var(--primary);color:#fff;border:1px solid transparent;border-radius:11px;padding:11px 20px;cursor:pointer;font-weight:600;line-height:1.5;text-decoration:none}button:hover,.button:hover{filter:brightness(.95);text-decoration:none}button:disabled{opacity:.55;cursor:wait}.secondary{background:var(--paper);border-color:var(--line);color:var(--text)}.light{background:white;color:#3468e9}.danger{background:#fff0f1;color:#cf4555}.text-button{background:transparent;color:var(--muted);padding:6px 9px}.small-button{padding:5px 12px;font-size:13px}input,select,textarea{display:block;width:100%;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--text);padding:11px 13px;outline:none;min-width:0}input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px #3468e912}textarea{resize:vertical}label{display:block;margin-bottom:18px;font-size:14px;font-weight:500}label input,label select,label textarea{margin-top:7px}h1,h2,h3,p{margin-top:0}h1{font-size:29px;line-height:1.4;letter-spacing:-.5px;margin-bottom:6px}h2{font-size:20px;margin:25px 0 16px}h3{font-size:17px;margin-bottom:12px}.muted{color:var(--muted)}.small,small{font-size:12px}.pre{white-space:pre-wrap;overflow-wrap:anywhere}.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.8px;color:var(--primary)}.sidebar{position:fixed;inset:0 auto 0 0;width:260px;padding:30px 22px;background:var(--paper);border-right:1px solid var(--line);display:flex;flex-direction:column;z-index:20}.brand{display:flex;align-items:center;gap:12px;color:var(--text);font-size:19px;font-weight:700;letter-spacing:-.5px}.brand img{width:43px;height:43px}.brand small{display:block;font-size:8px;letter-spacing:1.5px;color:var(--muted);margin-top:2px}.nav-caption{display:block;font-size:11px;letter-spacing:.4px;color:var(--muted);margin:32px 12px 12px}nav a{display:flex;align-items:center;gap:13px;padding:12px 15px;border-radius:11px;color:var(--muted);margin:5px 0;font-size:17px}nav a span{font-size:14px}nav a.selected,nav a:hover{background:var(--soft);color:var(--primary);text-decoration:none}.badge{background:var(--yellow);color:#815a19;font-size:10px;padding:2px 6px;border-radius:6px}.sidebar-bottom{margin-top:auto}.learning-note{background:var(--soft);border-radius:15px;padding:20px;font-size:8px;letter-spacing:1px;color:var(--primary);margin-top:25px}.learning-note strong{display:block;font-size:18px;letter-spacing:0;margin-top:8px}.profile{display:flex;gap:11px;margin-top:24px;align-items:center;color:var(--text);font-size:12px}.profile small{display:block;color:var(--muted);font-size:10px}.avatar{background:#fff0d9;color:#bd8b32;border-radius:50%;width:40px;height:40px;display:grid;place-items:center;font-size:19px}.main{margin-left:260px}.topbar{height:84px;background:var(--paper);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 42px;gap:12px}.topbar>div{display:flex;align-items:center;gap:18px}.breadcrumb{font-size:12px;color:var(--muted)}.breadcrumb span{margin:0 13px}.inline{display:inline}.content{max-width:1560px;margin:0 auto;padding:35px 42px;min-height:calc(100vh - 150px)}.page-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;gap:15px}.page-heading p{margin-bottom:0;font-size:13px}.grid{display:grid;gap:22px}.two{grid-template-columns:repeat(2,minmax(0,1fr))}.three{grid-template-columns:repeat(3,minmax(0,1fr))}.four{grid-template-columns:repeat(4,minmax(0,1fr))}.panel{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:25px;margin-bottom:22px;box-shadow:var(--shadow)}.form-panel{max-width:850px}.welcome{background:linear-gradient(112deg,#3468e9,#6586ef);border-radius:20px;padding:36px 40px;color:#fff;display:flex;justify-content:space-between;overflow:hidden;position:relative;min-height:270px;margin-bottom:25px}.welcome h2{font-size:30px;line-height:1.5;margin:15px 0 10px}.welcome p{font-size:12px;color:#e1e9ff}.pill{background:var(--soft);color:var(--primary);border-radius:7px;padding:5px 10px;font-size:11px;font-weight:600;display:inline-block}.welcome .pill{background:#ffffff24;color:white;font-size:8px;letter-spacing:1.7px}.welcome .button{font-size:12px}.welcome-art{position:relative;width:260px;flex-shrink:0;align-self:center}.book{background:#ffda7a;color:#ae7731;width:150px;height:200px;transform:rotate(-12deg);border-radius:9px 18px 18px 9px;box-shadow:inset 12px 0 #efbd52,12px 12px 0 #ffffff25,30px 30px 70px #163b9230;margin:auto;padding:15px 30px;font-weight:700;font-size:62px}.book span{display:block;font-size:9px;letter-spacing:1px;line-height:1.8}.spark{position:absolute;top:-15px;right:20px;color:#ffe499;font-size:48px}.floating-label{position:absolute;bottom:0;right:-10px;background:white;color:#3468e9;border-radius:10px;padding:12px 20px;font-size:12px;box-shadow:0 8px 40px #25428b24}.metric{display:flex;align-items:center;gap:15px;margin-bottom:0;padding:21px 18px}.metric>span{border-radius:13px;background:var(--soft);color:var(--primary);font-size:23px;min-width:45px;height:45px;display:grid;place-items:center}.metric:nth-child(2)>span{background:#e7f7f0;color:#2f9976}.metric:nth-child(3)>span{background:#fff5db;color:#c69930}.metric:nth-child(4)>span{background:#f2ecff;color:#9371d1}.metric small{font-size:11px;color:var(--muted)}.metric strong{display:block;font-size:26px;line-height:1.4}.section-title{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:27px 0 18px}.section-title h2,.section-title h3{margin:0}.section-title input{width:260px;font-size:12px}.count{font-size:11px;background:var(--line);padding:3px 7px;border-radius:6px;vertical-align:middle;margin-left:5px}.course-card{background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}.course-cover{height:155px;background:#deebff;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;color:#5e8be0}.course-cover:after{content:'';position:absolute;width:160px;height:160px;border:25px solid #ffffff60;border-radius:40px;right:-70px;bottom:-80px;transform:rotate(30deg)}.course-cover b{font-size:55px;transform:rotate(-7deg);border:2px solid #ffffffa0;border-radius:20px;padding:0 15px;color:inherit}.course-tag{position:absolute;left:15px;top:15px;color:inherit;background:#ffffffa0;font-size:9px;padding:4px 9px;border-radius:6px}.cover-dots{position:absolute;right:28px;top:35px;font-size:30px}.color-1{background:#e7e2fb;color:#9b82cf}.color-2{background:#fff0d7;color:#d3a24c}.color-3{background:#dff3eb;color:#6fbba1}.course-body{padding:21px}.course-body .eyebrow{font-size:9px;letter-spacing:.5px}.course-body h3{margin:7px 0 10px;font-size:17px}.course-body h3 a{color:var(--text)}.course-body p{font-size:11px;margin-bottom:16px}.clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:36px}.course-meta{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-bottom:13px}.course-link{display:flex;justify-content:space-between;border-top:1px solid var(--line);margin-top:16px;padding-top:12px;font-size:12px;font-weight:600}.progress{height:7px;border-radius:10px;background:var(--line);overflow:hidden;margin:8px 0}.progress i{display:block;height:100%;background:var(--primary);border-radius:10px}.actions{display:flex;flex-wrap:wrap;gap:10px;margin:15px 0}.list-row{display:flex;align-items:center;justify-content:space-between;gap:17px;padding:18px 0;border-bottom:1px solid var(--line);color:var(--text);font-size:14px}.list-row:last-child{border-bottom:0}.list-row small{display:block;color:var(--muted);font-size:11px}.list-row b{display:block}.grow{flex:1;color:var(--text)}.lesson-num{font-size:22px;color:#b5c5e3;background:var(--soft);border-radius:12px;padding:9px 13px}.round-link{background:var(--soft);border-radius:50%;width:32px;height:32px;display:grid;place-items:center;flex-shrink:0}.announcement summary{display:flex;justify-content:space-between;gap:10px;font-weight:600}.announcement small{color:var(--muted);font-weight:400}.alert{padding:14px 18px;background:#edf3ff;border-radius:10px;color:#3468e9;margin-bottom:20px;font-size:13px}.error,.late{background:#fff0f1;color:#cf4555}.success{background:#e9f8ef;color:#288454}.file{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:12px 15px;background:var(--bg);border-radius:10px;margin:10px 0;overflow-wrap:anywhere}.attachment-image{max-width:100%;max-height:350px;border-radius:12px}.video-frame,video{width:100%;aspect-ratio:16/9;background:#0d1730;border:0;border-radius:12px}.video-speed{display:flex;align-items:center;gap:12px;margin-top:8px}.video-speed select{width:auto}.drop-zone{background:var(--bg);border:2px dashed var(--line);padding:22px;border-radius:12px;text-align:center}.drop-zone small{display:block;color:var(--muted);margin-top:10px}.drop-zone.drag{border-color:var(--primary);background:var(--soft)}.checkbox{display:flex;gap:10px;align-items:center}.checkbox input{width:auto;margin:0}.table-wrap{overflow:auto}table{border-collapse:collapse;width:100%;font-size:12px;text-align:left}th{color:var(--muted);font-weight:500;white-space:nowrap;background:var(--bg);position:sticky;top:0}td,th{padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:top}td{white-space:nowrap}.search-bar{display:flex;gap:12px;margin-bottom:20px;max-width:650px}.pagination{display:flex;flex-wrap:wrap;gap:8px}.pagination a{padding:5px 12px;background:var(--paper);border-radius:7px}.pagination .selected{background:var(--primary);color:white}details summary{cursor:pointer}details[open]>summary{margin-bottom:18px}.version{border-left:2px solid var(--line);padding:10px 18px;margin:10px 0;font-size:12px}.empty{text-align:center;padding:50px 15px;color:var(--muted);grid-column:1/-1}.empty>span{font-size:40px;color:#bdc9dc}.empty h3{margin-top:12px}.empty p{font-size:12px}.prose{max-width:900px}.prose li{margin-bottom:10px}code{overflow-wrap:anywhere;white-space:normal;font-size:12px}footer{display:flex;justify-content:space-between;padding:20px 42px;border-top:1px solid var(--line);font-size:9px;letter-spacing:1px;color:var(--muted)}.mobile-menu{display:none}.login-layout{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}.login-story{background:linear-gradient(145deg,#edf3ff,#e6ecfc);padding:48px 10%;position:relative;overflow:hidden}.login-story .brand{margin-bottom:90px}.login-story>.eyebrow{font-size:10px}.login-story h1{font-size:clamp(40px,4vw,65px);line-height:1.45;margin:20px 0}.login-story em{color:#3468e9;font-style:normal}.login-story p{color:#7e8ca4;font-size:14px}.story-cards{display:flex;gap:18px;margin-top:38px;position:relative;z-index:1}.story-cards div{padding:17px 20px;background:#ffffffb0;border-radius:14px;color:#3468e9;font-size:24px}.story-cards b{font-size:10px;color:#70819d}.login-panel{display:flex;align-items:center;justify-content:center;background:var(--paper);padding:35px}.login-form{width:100%;max-width:380px}.login-form h2{font-size:29px;margin-bottom:8px}.login-form>p{font-size:13px}.login-form form{margin-top:30px}.login-form form button{width:100%;margin:10px 0}.orbit{position:absolute;border:40px solid #ffffff55;border-radius:50%;height:300px;width:300px;pointer-events:none}.orbit.one{right:-150px;bottom:-80px}.orbit.two{width:170px;height:170px;right:-40px;top:10px}.setup{display:flex;justify-content:center;align-items:flex-start;padding:45px 15px}.setup-card{background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow);width:650px;max-width:100%;padding:36px;border-radius:22px}.setup-card h1{margin-top:15px}.setup-card form>button{width:100%}.brand-symbol{width:50px;height:50px;border-radius:15px;background:var(--primary);color:white;display:grid;place-items:center;font-weight:700;font-size:27px;margin-bottom:15px}[hidden]{display:none!important}[data-theme=dark]{--bg:#111827;--paper:#1b2536;--text:#e4eaf5;--muted:#98a5ba;--line:#2c384c;--soft:#233556;--shadow:none}[data-theme=dark] .login-story{background:linear-gradient(145deg,#1c2b48,#24355b)}[data-theme=dark] .story-cards div{background:#293c5e}[data-theme=dark] .story-cards b{color:#bac8df}a:focus-visible,button:focus-visible{outline:3px solid #ffc951;outline-offset:3px}
@media(min-width:1600px){.content{padding:42px 60px}.welcome{min-height:300px}.welcome-art{margin-right:70px}.course-cover{height:190px}}
@media(max-width:1200px){.sidebar{width:225px;padding:25px 15px}.main{margin-left:225px}.content{padding:28px}.topbar{padding:0 28px}.four{grid-template-columns:repeat(2,minmax(0,1fr))}.three{grid-template-columns:repeat(2,minmax(0,1fr))}.welcome-art{width:200px}.metric{padding:18px}.brand{font-size:17px}.brand img{width:37px;height:37px}}
@media(max-width:760px){.sidebar{transform:translateX(-100%);transition:transform .2s;width:255px}.menu-open .sidebar{transform:translateX(0);box-shadow:20px 0 100px #0005}.main{margin-left:0}.topbar{height:65px;padding:0 16px;position:sticky;top:0;z-index:10}.mobile-menu{display:block;padding:4px 9px;background:var(--soft);color:var(--primary)}.breadcrumb{display:none}.topbar>div{gap:8px}.content{padding:24px 16px}.page-heading{align-items:flex-start;flex-wrap:wrap}h1{font-size:24px}.welcome{padding:25px;min-height:245px}.welcome h2{font-size:25px}.welcome-art{width:120px;opacity:.8;position:absolute;right:-20px;bottom:10px;pointer-events:none}.book{width:100px;height:140px;padding:15px;font-size:40px}.book span{font-size:7px}.floating-label,.spark{display:none}.welcome>div:first-child{position:relative;z-index:2;max-width:85%}.welcome p{max-width:210px}.four{gap:12px}.metric{gap:9px;padding:15px 10px}.metric>span{min-width:33px;height:36px;font-size:19px}.metric strong{font-size:23px}.metric small{font-size:9px}.three{grid-template-columns:1fr}.two{grid-template-columns:1fr;gap:0}.section-title{flex-wrap:wrap;gap:12px}.section-title input{width:100%}.panel{padding:19px}.list-row{gap:10px;flex-wrap:wrap}.list-row .button{font-size:11px;padding:8px 11px}.lesson-num{font-size:16px;padding:8px}.announcement summary{flex-wrap:wrap}.actions .button{font-size:12px;padding:9px 12px}.login-layout{grid-template-columns:1fr}.login-story{padding:24px 30px}.login-story .brand{margin-bottom:25px}.login-story h1{font-size:30px;margin:10px 0}.login-story h1 br{display:none}.login-story p,.story-cards,.login-story>.eyebrow{display:none}.login-panel{padding:35px 25px}.login-form h2{font-size:26px}footer{padding:15px 18px;font-size:8px}footer span{display:none}.setup-card{padding:23px}.search-bar button{white-space:nowrap}.intro .pre{font-size:13px}.welcome .pill{font-size:7px}.course-cover{height:175px}}
@media print{.sidebar,.topbar,.page-heading .button,.no-print,footer,.search-bar{display:none!important}.main{margin:0}.content{padding:0}.panel{box-shadow:none;border:0;padding:0}.table-wrap{overflow:visible}table{font-size:8px}td,th{padding:6px;white-space:normal;position:static}.content>details{display:none}body{background:white;color:black}.progress i{print-color-adjust:exact}.page-heading{margin-bottom:20px}@page{size:A4 landscape;margin:12mm}}
.sidebar-close{display:none}@media(max-width:760px){.sidebar-close{display:block;align-self:flex-end;background:var(--soft);color:var(--primary);padding:0 10px;margin:-14px -5px 8px;font-size:22px}.sidebar{overflow-y:auto}.sidebar .nav-caption{margin-top:20px}}