*{box-sizing:border-box}body{margin:0;background:#f5faff;color:#0a3565;font-family:Sarabun,Tahoma,sans-serif}.topbar{background:#063e70;color:#fff}.top{width:min(1400px,calc(100% - 48px));height:72px;margin:auto;display:flex;align-items:center;gap:28px}.brand{color:#fff;text-decoration:none;display:flex;align-items:center;font:700 20px Prompt;white-space:nowrap}.brand b{color:#ffc928}.brand small{display:block;font:500 10px Sarabun}.top nav{margin-left:auto;display:flex;align-self:stretch;align-items:center;gap:22px}.top nav a{color:#fff;text-decoration:none;font-weight:700;font-size:14px;height:100%;display:flex;align-items:center;position:relative}.top nav a.active{color:#ffd02d}.top nav a.active:after{content:"";height:3px;background:#ffd02d;position:absolute;left:0;right:0;bottom:0}.social{font-weight:700;white-space:nowrap}.social span,.social i{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#1789f6;color:#fff;font-style:normal}.social i{background:#ff2b55}.hero{background:linear-gradient(115deg,#f7fcff,#eaf7ff);border-bottom:1px solid #d6e9f7}.crumb{width:min(1400px,calc(100% - 48px));margin:auto;padding:14px 0 8px;font-size:13px;color:#6293bd}.crumb a{color:#3e8ccc;text-decoration:none}.crumb span{margin:0 9px}.heroIn{width:min(1400px,calc(100% - 48px));margin:auto;min-height:245px;display:grid;grid-template-columns:1fr 360px;gap:35px;align-items:center}.title{display:flex;gap:22px;align-items:center}.icon{width:104px;height:104px;border-radius:24px;background:linear-gradient(145deg,#29b47a,#0a8f78);color:#fff;display:grid;place-items:center;font:800 48px Prompt;box-shadow:0 16px 28px #0b967629}.title h1{font:800 44px Prompt;margin:0;color:#073d79}.title h2{font:700 19px Prompt;margin:8px 0 4px;color:#083f76}.title p{margin:0;color:#55728d}.benefits{display:grid;grid-template-columns:repeat(4,1fr);margin:26px 0 0 126px}.benefits>div{padding:0 20px;border-right:1px solid #d4e4f1}.benefits>div:first-child{padding-left:0}.benefits>div:last-child{border:0}.benefits b{display:block;margin-top:-21px;margin-left:28px;color:#123e6c}.benefits small{display:block;margin:4px 0 0 28px;color:#6f8498}.teacher{height:210px;display:flex;align-items:center;justify-content:center;gap:8px}.teacher img{height:200px;max-width:190px;object-fit:contain}.teacher div{font:700 16px Prompt;text-align:center}.teacher u{display:block;width:90px;border-bottom:3px solid #ffc528;margin:7px auto}.wrap{width:min(1400px,calc(100% - 48px));margin:18px auto 36px}.tabs{display:grid;grid-template-columns:repeat(4,1fr);margin-bottom:12px}.tabs button{height:60px;border:1px solid #cde1f2;background:#fff;color:#0b3b6c;font:700 16px Prompt;cursor:pointer}.tabs button:first-child{border-radius:12px 0 0 12px}.tabs button:last-child{border-radius:0 12px 12px 0}.tabs .active{background:#168bf0;color:#fff;border-color:#168bf0}.panel{background:#fff;border:1px solid #d4e7f7;border-radius:16px;box-shadow:0 8px 22px #0a5f9d0b}.setup{padding:18px;margin-bottom:14px}.panelhead{display:flex;align-items:center;justify-content:space-between;gap:16px}.panel h3{font:800 20px Prompt;margin:0;color:#0a3767}.panelhead p{margin:2px 0;color:#6f8396}.setupgrid{display:grid;grid-template-columns:1.5fr .8fr 1.3fr .8fr .7fr;gap:12px;margin-top:16px}.setupgrid label{font-weight:700;color:#183e65}.setupgrid input{width:100%;height:42px;border:1px solid #c8def1;border-radius:9px;padding:0 11px;font:500 15px Sarabun;color:#123e6c;background:#fbfdff}.panel button,.actions button{height:40px;border:0;border-radius:9px;background:#168bf0;color:#fff;padding:0 16px;font-weight:800;cursor:pointer}.panel button.ghost,.ghost{background:#fff;color:#1376cc;border:1px solid #bcd8ef}.panel button.danger{background:#fff0f2;color:#ce3151;border:1px solid #ffc3d0}.layout{display:grid;grid-template-columns:minmax(0,1fr) 365px;gap:14px}.studentpanel{padding:18px;min-width:0}.actions{display:flex;gap:8px}.tablewrap{overflow:auto;margin-top:14px;border:1px solid #d6e6f2;border-radius:12px}table{width:100%;border-collapse:collapse;min-width:900px}th{background:#eaf6ff;font:700 13px Prompt;color:#0b3c6e;padding:10px 7px;border-right:1px solid #d5e6f2}th.left{text-align:left}td{padding:7px;border-top:1px solid #e2edf5;border-right:1px solid #e2edf5;text-align:center;color:#294e70}td.name{text-align:left;min-width:220px}td input{width:100%;height:34px;border:1px solid #cfe0ee;border-radius:7px;text-align:center;color:#123e6c}td.name input{text-align:left;padding:0 8px}.status{display:inline-grid;place-items:center;padding:5px 10px;border-radius:999px;font-weight:800;font-size:12px}.status.up{background:#e4f9ef;color:#0a8d55}.status.same{background:#fff6d9;color:#a36b00}.status.down{background:#fff0f2;color:#d33550}.delta.up{color:#0c9a60;font-weight:800}.delta.down{color:#d33c54;font-weight:800}.delrow{background:transparent!important;color:#b64b61!important;padding:0!important}.tablefoot{display:flex;justify-content:space-between;padding:12px 2px 0;color:#5b768e}.tablefoot b{color:#0c73d5}aside{display:grid;gap:14px}.summary,.tools{padding:18px}.compare{display:grid;grid-template-columns:1fr 28px 1fr;gap:8px;align-items:center;margin-top:14px}.scorecard{padding:13px 12px;border-radius:13px;text-align:center}.scorecard.before{background:#edf6ff}.scorecard.after{background:#eafbf3}.scorecard small{display:block;color:#648099;font-weight:700}.scorecard b{display:block;font:800 28px Prompt;color:#0c4c82}.scorecard.after b{color:#07945e}.scorecard span{font-weight:800;color:#7590a8}.arrow{font:800 22px Prompt;text-align:center;color:#6b8aa5}.improve{margin-top:12px;padding:14px;border-radius:14px;background:linear-gradient(135deg,#f5fffb,#e5fff4);border:1px solid #c8f0de;text-align:center}.improve small{display:block;color:#608273}.improve b{display:block;font:800 20px Prompt;color:#088554}.improve span{font-weight:800;color:#1d9a6d}.stats{margin-top:12px}.stats p{display:flex;justify-content:space-between;margin:8px 0;color:#60798f}.stats b{color:#083c70}.tools button{width:100%;margin-top:9px}.chartpanel{margin-top:14px;padding:18px}.legend{display:flex;gap:18px;color:#58758e;font-weight:700}.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px}.legend i.pre{background:#60a5fa}.legend i.post{background:#34d399}.chartwrap{margin-top:14px;border:1px solid #d9e8f4;border-radius:12px;padding:12px;background:linear-gradient(#fff,#fbfdff)}#chart{width:100%;height:320px;display:block}.lower{display:grid;grid-template-columns:1.2fr .8fr;gap:14px;margin-top:14px}.lower .panel{padding:18px}.insights{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}.insights>div{padding:15px;border-radius:12px;background:#f7fbff;border:1px solid #dceaf6}.insights b{display:block;font:800 18px Prompt;color:#0c65b9}.insights small{color:#70889d}.narrative{margin:12px 0 0;padding:12px 14px;background:#eef9ff;border-radius:10px;color:#456b89;line-height:1.7}.lower ol{margin:12px 0 0 20px;padding:0}.lower li{margin:7px 0;color:#456681}.modal{position:fixed;inset:0;background:#092d506b;display:grid;place-items:center;z-index:20}.modal[hidden]{display:none}.modalbox{width:min(520px,calc(100% - 30px));background:#fff;padding:22px;border-radius:16px}.modalbox textarea{width:100%;height:220px;border:1px solid #cddfed;border-radius:10px;padding:12px;font:500 15px Sarabun}.modalbox>div{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}.modalbox button{height:40px;border:0;border-radius:9px;padding:0 18px;font-weight:800;background:#168bf0;color:#fff}footer{background:#063e70;color:#d4e5f3;margin-top:35px}footer>div,footer>p{width:min(1400px,calc(100% - 48px));margin:auto}footer>div{min-height:110px;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center}.fbrand{font:700 20px Prompt;color:#fff}.fbrand b{color:#ffc928}.fbrand small{display:block;font:500 10px Sarabun}.fsocial{text-align:right}.fsocial a{color:#fff;text-decoration:none;background:#ffc62a;padding:10px 20px;border-radius:999px}.fbrand+em{text-align:center;font:700 16px Prompt}footer>p{border-top:1px solid #2d638e;padding:15px 0 24px;font-size:12px}footer>p span{float:right}@media(max-width:1050px){.top nav{display:none}.heroIn{grid-template-columns:1fr}.teacher{display:none}.benefits{margin-left:0}.layout{grid-template-columns:1fr}.setupgrid{grid-template-columns:1fr 1fr}.lower{grid-template-columns:1fr}}@media(max-width:700px){.top,.heroIn,.crumb,.wrap,footer>div,footer>p{width:calc(100% - 24px)}.title{align-items:flex-start}.title h1{font-size:32px}.icon{width:78px;height:78px;font-size:34px}.benefits{grid-template-columns:1fr 1fr;gap:14px}.benefits>div{border:0;padding:0}.tabs{overflow:auto}.tabs button{min-width:190px}.setupgrid{grid-template-columns:1fr}.compare{grid-template-columns:1fr}.arrow{transform:rotate(90deg)}.insights{grid-template-columns:1fr}footer>div{grid-template-columns:1fr;padding:22px 0;gap:18px;text-align:center}.fsocial{text-align:center}footer>p span{float:none;display:block;margin-top:8px}}@media print{.topbar,.hero,.tabs,.tools,.lower,#chartPanel,.actions,.setup,footer{display:none!important}.wrap{width:100%;margin:0}.layout{display:block}.studentpanel{border:0;box-shadow:none}.layout aside{display:none}.tablewrap{overflow:visible;border:0}table{min-width:0;font-size:10px}}