*{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,#2b9cff,#0b68df);color:#fff;display:grid;place-items:center;font:800 38px Prompt;box-shadow:0 16px 28px #147de229}.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,.scoreheads p{margin:2px 0;color:#6f8396}.setupgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:12px;margin-top:16px}.setupgrid label,.scorecolgrid label{font-weight:700;color:#183e65}.setupgrid input,.scorecolgrid input,.criteria input{width:100%;height:42px;border:1px solid #c8def1;border-radius:9px;padding:0 11px;font:500 15px Sarabun;color:#123e6c;background:#fbfdff}.scoreheads{border-top:1px dashed #d6e5f1;margin-top:18px;padding-top:16px}.sectiontitle{display:flex;justify-content:space-between;align-items:center}.sectiontitle h4{font:800 17px Prompt;margin:0}.scorecolgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}.scorecol{background:#f7fbff;border:1px solid #d4e7f7;padding:10px;border-radius:12px;display:grid;grid-template-columns:1fr 92px 34px;gap:8px;align-items:end}.scorecol label{font-size:12px}.scorecol button{height:42px;border:0;border-radius:9px;background:#ffe8eb;color:#c6284c;font-weight:800;cursor:pointer}.totals{display:flex;gap:20px;margin-top:10px;color:#52718e}.totals b{color:#0f73d5}.layout{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:14px}.studentpanel{padding:18px;min-width:0}.actions{display:flex;gap:8px}.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}.tablewrap{overflow:auto;margin-top:14px;border:1px solid #d6e6f2;border-radius:12px}table{width:100%;border-collapse:collapse;min-width:880px}th{background:#eaf6ff;font:700 13px Prompt;color:#0b3c6e;padding:10px 7px;border-right:1px solid #d5e6f2}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:190px}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}.gradepill,.statuspill{display:inline-grid;place-items:center;min-width:48px;padding:4px 9px;border-radius:999px;color:#fff;font-weight:800}.g4{background:#0bbb72}.g35{background:#27b7a3}.g3{background:#35a8ea}.g25{background:#8378ee}.g2{background:#f7b21b}.g15{background:#ff8c35}.g1{background:#ff665f}.g0{background:#9ba8b7}.pass{background:#e4f9ef;color:#0a8d55}.fail{background:#fff0f2;color:#d33550}.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}.avgbox{display:flex;gap:18px;align-items:center;margin-top:14px}.ring{width:118px;height:118px;border-radius:50%;border:16px solid #18b976;display:grid;place-items:center;align-content:center;box-shadow:inset 0 0 0 10px #eef9f5}.ring b{font:800 25px Prompt}.ring small{font-weight:700;color:#6f8598}.stats{flex:1}.stats p{display:flex;justify-content:space-between;margin:8px 0;color:#60798f}.stats b{color:#083c70}.gradebars{margin-top:14px}.barrow{display:grid;grid-template-columns:58px 1fr 48px;gap:8px;align-items:center;margin:8px 0;font-size:13px}.bartrack{height:10px;border-radius:999px;background:#eaf1f7;overflow:hidden}.barfill{height:100%;border-radius:999px;background:linear-gradient(90deg,#1a8ef2,#18c88d)}.tools button{width:100%;margin-top:9px}.criteria{margin-top:14px;padding:18px}.criteriagrid{display:grid;grid-template-columns:repeat(8,1fr);gap:10px;margin-top:15px}.crit{background:#f8fbff;border:1px solid #d7e8f6;border-radius:12px;padding:10px}.crit b{display:block;font:800 18px Prompt;margin-bottom:6px}.crit label{font-size:12px;color:#688099}.hint{margin-top:12px;padding:10px 12px;background:#fff8dc;border-radius:10px;color:#85660f}.lower{display:grid;grid-template-columns:1.2fr .8fr;gap:14px;margin-top:14px}.lower .panel{padding:18px}.lower ol{margin:12px 0 0 20px;padding:0}.lower li{margin:7px 0;color:#456681}.lower p{color:#516f88;line-height:1.65}.note{background:#eef8ff;padding:10px 12px;border-radius:10px}.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}.criteriagrid{grid-template-columns:repeat(4,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:28px}.benefits{grid-template-columns:1fr 1fr;gap:14px}.benefits>div{border:0;padding:0}.setupgrid,.scorecolgrid{grid-template-columns:1fr 1fr}.tabs{overflow:auto}.tabs button{min-width:190px}.criteriagrid{grid-template-columns:repeat(2,1fr)}.lower{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,.criteria,.lower,footer,.actions,.scoreheads,.setup{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}}