@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap";:root{font-family:DM Sans,system-ui,sans-serif;color:#143329;background:#f5f8f5;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px;background:#f5f8f5}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}.loading-screen{min-height:100dvh;display:grid;place-content:center;justify-items:center;gap:10px;color:#477061}.loading-screen svg{color:#0b704f}.loading-screen p{margin:0;font-size:13px}.spin{animation:spin .85s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.global-error{position:fixed;left:50%;bottom:18px;transform:translate(-50%);z-index:5;width:min(calc(100% - 32px),420px);padding:11px 14px;border-radius:11px;color:#8c2929;background:#ffeded;border:1px solid #f5cccc;font-size:12px;text-align:center}.login-page{min-height:100dvh;display:grid;place-items:center;overflow:hidden;padding:22px;position:relative;background:linear-gradient(155deg,#eaf7ee,#f8fbf7 49%,#ebf6ef)}.login-orb{position:absolute;border-radius:50%;filter:blur(2px);opacity:.75}.orb-one{width:340px;height:340px;background:#c9edd5;top:-180px;right:-130px}.orb-two{width:270px;height:270px;background:#f9e4a6;bottom:-140px;left:-150px}.login-card{position:relative;z-index:1;width:min(100%,420px);padding:34px 25px 24px;background:#fffffff0;border:1px solid rgba(255,255,255,.9);border-radius:28px;box-shadow:0 20px 50px #184e341f;text-align:center}.school-mark,.brand-icon{width:58px;height:58px;border-radius:18px;color:#fff;background:linear-gradient(140deg,#16835f,#075b40);display:grid;place-items:center;margin:0 auto 16px;box-shadow:0 9px 20px #0565463d}.eyebrow{margin:0 0 5px;font-size:10px;color:#638075;letter-spacing:.11em;font-weight:700}.login-card h1,.page-title h1,.hero h1{font-family:Plus Jakarta Sans,sans-serif;margin:0;letter-spacing:-.035em}.login-card h1{color:#123e2d;font-size:clamp(27px,7vw,32px);line-height:1.17}.login-copy{color:#6b8378;margin:12px auto 25px;line-height:1.55;max-width:290px;font-size:14px}.login-card form{text-align:left}.login-card label{display:grid;gap:7px;font-size:12px;font-weight:700;color:#35594b;margin-top:15px}.login-card input{width:100%;border:1px solid #d9e7df;background:#fbfdfb;outline:none;border-radius:12px;padding:13px 14px;color:#163f30;font-size:15px;transition:.2s}.login-card input:focus{border-color:#17835f;box-shadow:0 0 0 3px #e2f3e9}.show-password{border:0;color:#087354;background:none;padding:10px 0 2px;font-size:12px;font-weight:700}.form-error{color:#c13333;font-size:12px;margin:8px 0 0}.primary-button{width:100%;border:0;display:inline-flex;justify-content:center;align-items:center;gap:8px;color:#fff;background:#0b704f;padding:14px 17px;border-radius:13px;font-weight:700;box-shadow:0 8px 16px #0965462e;transition:transform .16s,background .16s}.primary-button:hover{background:#075e43;transform:translateY(-1px)}.login-button{margin-top:17px}.demo-box{display:grid;gap:3px;padding:11px 12px;margin:21px 0 13px;color:#547265;background:#f2f8f4;border-radius:11px;text-align:left;font-size:11px}.demo-box strong{color:#1e5a40}.login-help{display:flex;gap:6px;justify-content:center;align-items:center;color:#82958c;margin:0;font-size:10px}.app-shell{min-height:100dvh;max-width:560px;margin:auto;background:#f6f8f6;padding-bottom:81px}.topbar{height:68px;padding:12px 20px;background:#fff;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ecf0ed}.brand{display:flex;align-items:center;gap:10px}.brand-icon{width:38px;height:38px;margin:0;border-radius:12px;box-shadow:none}.brand strong,.brand span{display:block}.brand strong{color:#174432;font-size:14px}.brand span{color:#7d9086;font-size:10px;margin-top:1px}.icon-button,.close-button{border:0;background:#eff7f1;color:#197251;border-radius:11px;width:38px;height:38px;display:grid;place-items:center}.portal-main{padding-bottom:10px}.hero{padding:24px 20px 21px;color:#fff;background:radial-gradient(circle at 85% 8%,#49ad7e 0,transparent 27%),linear-gradient(135deg,#0c6e4e,#07533d)}.hero-header{display:flex;justify-content:space-between;align-items:flex-start;gap:15px}.date{margin:0 0 6px;font-size:11px;color:#cce8d8}.hero h1{font-size:26px}.hero h1 span{font-size:20px}.hero h1+p{font-size:13px;margin:6px 0 0;color:#d3ebdd}.avatar{width:47px;height:47px;border:2px solid rgba(255,255,255,.65);background:#f6c85f;color:#61441b;border-radius:50%;display:grid;place-items:center;font-family:Plus Jakarta Sans;font-size:13px;font-weight:800;flex:none}.class-pill{display:inline-flex;align-items:center;gap:7px;padding:8px 10px;margin-top:20px;background:#ffffff24;border:1px solid rgba(255,255,255,.15);border-radius:10px;font-size:11px}.class-pill span{opacity:.45}.student-switcher{display:grid;gap:5px;padding:11px 20px;color:#527064;background:#eef6f1;border-bottom:1px solid #dce9e1;font-size:10px;font-weight:700}.student-switcher select{width:100%;padding:9px 10px;border:1px solid #cfdfd5;border-radius:9px;color:#214b39;background:#fff;font:inherit;font-size:12px}.data-loading{display:flex;align-items:center;justify-content:center;gap:7px;padding:7px;color:#376754;background:#e9f5ed;font-size:11px}.section{padding:23px 20px 0}.section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.section-heading h2,.subheading{margin:0;color:#1d4032;font-family:Plus Jakarta Sans;font-size:17px;letter-spacing:-.025em}.text-button{color:#087253;border:0;background:none;font-size:12px;font-weight:700;padding:4px 0;display:inline-flex;align-items:center;gap:2px}.active-task{width:100%;padding:15px;text-align:left;display:flex;align-items:center;gap:12px;border:1px solid #e2ece5;background:#fff;border-radius:16px;color:#1b4434;box-shadow:0 4px 13px #1b412d0a}.task-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:14px;color:#0c7755;background:#e2f4e8;flex:none}.task-info{display:grid;gap:3px;flex:1}.task-info strong{font-size:14px}.task-info small{font-size:11px;color:#768d82}.tag{display:inline-flex;width:fit-content;padding:3px 7px;border-radius:6px;font-size:9px;font-weight:700}.urgent{color:#b85a18;background:#fff0dd}.subject{color:#387255;background:#e7f5eb}.progress-section{padding-top:25px}.progress-card{background:#eaf5ee;padding:15px;display:flex;align-items:center;gap:15px;border-radius:17px}.progress-ring{width:67px;height:67px;display:grid;place-items:center;border-radius:50%;background:conic-gradient(#0e8059 82%,#c9e7d3 0);position:relative;flex:none}.progress-ring:before{content:"";position:absolute;inset:7px;background:#eaf5ee;border-radius:50%}.progress-ring span{z-index:1;color:#126342;font-family:Plus Jakarta Sans;font-size:17px;font-weight:800}.progress-ring small{font-size:9px}.progress-card strong{color:#24503b;font-size:13px}.progress-card p{color:#688174;font-size:11px;margin:3px 0;line-height:1.45}.notice-list{background:#fff;border:1px solid #e7eee9;border-radius:15px;overflow:hidden}.notice{padding:14px;display:flex;gap:10px}.notice+.notice{border-top:1px solid #edf1ee}.notice-dot{width:8px;height:8px;border-radius:50%;margin-top:5px;flex:none}.notice-dot.gold{background:#f0aa32}.notice-dot.blue{background:#2f91bf}.notice strong{color:#234534;display:block;font-size:12px}.notice p{color:#6f8579;margin:3px 0;font-size:11px;line-height:1.45}.notice small{color:#98a79f;font-size:10px}.notice a{display:inline-block;margin-top:6px;color:#087253;font-size:10px;font-weight:700}.empty-inline{padding:18px;border:1px dashed #d8e5dc;border-radius:13px;color:#7c9186;background:#fbfdfb;text-align:center;font-size:12px}.bottom-nav{position:fixed;z-index:4;bottom:0;left:50%;transform:translate(-50%);max-width:560px;width:100%;height:72px;background:#fffffff5;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid #e6ede8;display:grid;grid-template-columns:repeat(5,1fr);padding:7px 5px max(7px,env(safe-area-inset-bottom))}.bottom-nav button{border:0;background:transparent;display:grid;place-items:center;gap:3px;color:#8a9d93;font-size:9px}.bottom-nav button.active{color:#087152;font-weight:700}.bottom-nav button.active svg{background:#e1f4e8;box-sizing:content-box;padding:5px 10px;border-radius:9px;margin-top:-5px}.page-content{padding:25px 20px}.page-title h1{font-size:27px;color:#1c4232}.page-title>p:last-child{margin:7px 0 22px;color:#70877b;font-size:13px}.study-feature{padding:17px;background:#fff;border:1px solid #e3ebe5;border-radius:20px;box-shadow:0 6px 18px #16442c0a}.study-image{height:108px;border-radius:13px;background:linear-gradient(135deg,#d4efdc,#a3d9b5);color:#0a6e4d;display:grid;place-items:center;margin-bottom:14px}.study-feature h2{color:#204b38;font-family:Plus Jakarta Sans;font-size:19px;margin:7px 0}.study-feature p{margin:0;color:#72887d;line-height:1.5;font-size:12px}.study-meta{display:flex;flex-wrap:wrap;gap:11px;color:#658075;font-size:11px;margin:16px 0}.study-meta span{display:flex;align-items:center;gap:5px}.subheading{margin:26px 0 12px}.completed-task,.history-row{display:flex;align-items:center;gap:11px;padding:13px;background:#fff;border:1px solid #e5ece7;border-radius:14px}.check-badge{color:#168158;background:#e4f4e9;border-radius:50%;padding:5px}.completed-task div{flex:1}.completed-task strong,.history-row strong{color:#294b3c;font-size:13px}.completed-task p,.history-row p{margin:2px 0 0;color:#82948a;font-size:10px}.completed-task b{color:#087150;font-family:Plus Jakarta Sans;font-size:20px}.question-card{background:#fff;border-radius:20px;padding:18px;border:1px solid #e3ebe5}.quiz-top{display:flex;justify-content:space-between;align-items:center;color:#638077;font-size:12px;font-weight:700}.quiz-top .close-button{width:31px;height:31px}.quiz-progress{height:6px;background:#e7efe9;border-radius:8px;margin:15px 0 23px;overflow:hidden}.quiz-progress i{display:block;width:10%;height:100%;background:#0b7b57}.question-card h2{font-family:Plus Jakarta Sans;color:#1e4534;font-size:19px;line-height:1.4;margin:12px 0 19px}.answer{width:100%;min-height:52px;display:flex;gap:11px;align-items:center;text-align:left;padding:9px;margin:9px 0;border:1px solid #dde8e1;border-radius:12px;background:#fff;color:#365648;font-weight:600}.answer span{width:29px;height:29px;display:grid;place-items:center;background:#eff5f1;color:#5c786b;border-radius:8px;font-size:12px}.answer.selected{border-color:#15805a;background:#ebf7ef}.answer.selected span{background:#13805a;color:#fff}.question-card .primary-button{margin-top:15px}.attendance-score{color:#fff;background:linear-gradient(135deg,#107b57,#075a42);padding:22px;border-radius:19px;display:flex;justify-content:space-between;align-items:center}.attendance-score strong{display:block;font-family:Plus Jakarta Sans;font-size:38px;letter-spacing:-.05em}.attendance-score strong small{font-size:16px}.attendance-score span{color:#d0eadb;font-size:12px}.attendance-score svg{color:#f5c85e}.attendance-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:14px 0}.attendance-grid div{padding:12px 4px;text-align:center;border-radius:11px;background:#fff;border:1px solid #e7ede8}.attendance-grid b,.attendance-grid span{display:block}.attendance-grid b{color:#1b6c4d;font-size:17px}.attendance-grid span{color:#82958b;font-size:9px;margin-top:3px}.history-row{margin-bottom:9px}.calendar-mini{width:36px;overflow:hidden;border:1px solid #e4eae6;text-align:center;border-radius:8px;display:grid}.calendar-mini span{color:#fff;background:#0c7855;font-size:8px;padding:2px}.calendar-mini b{padding:3px;color:#315444;font-size:12px}.history-row>div:nth-child(2){flex:1}.status{padding:4px 7px;border-radius:6px;font-size:9px;font-weight:700}.status-hadir{color:#0f7953;background:#e4f4ea}.status-izin{color:#9a6b10;background:#fff4d7}.status-sakit{color:#346c99;background:#e5f1fb}.status-alpa{color:#a13c3c;background:#fde8e8}.report-list{display:grid;gap:10px}.report-card{display:flex;align-items:center;gap:12px;padding:15px;border:1px solid #e3eae5;background:#fff;border-radius:16px}.report-badge{display:grid;place-items:center;width:46px;height:46px;color:#a96d17;background:#fff1d5;border-radius:12px}.report-card div:nth-child(2){flex:1}.report-card h2{margin:5px 0 3px;font-family:Plus Jakarta Sans;color:#2a4e3e;font-size:13px}.report-card p{color:#7d9187;margin:0;font-size:11px}.report-card small{display:block;margin-top:5px;color:#91a198;font-size:9px}.report-card>svg{color:#9aac9f}.empty-state{text-align:center;padding:46px 25px;color:#92a198}.empty-state svg{color:#9ccdb1}.empty-state h2{color:#496454;font-size:17px;margin:12px 0 5px}.empty-state p{font-size:12px;line-height:1.6;margin:0}.profile-card{padding:23px 15px;text-align:center;border-radius:17px;background:#e5f4e9}.profile-card .avatar{margin:auto;width:65px;height:65px;font-size:17px;border:3px solid #fff}.profile-card h2{margin:11px 0 3px;font-family:Plus Jakarta Sans;color:#234836;font-size:17px}.profile-card p{color:#6e887a;margin:0;font-size:11px}.profile-menu{border:1px solid #e4ebe6;background:#fff;overflow:hidden;border-radius:15px;margin-top:20px}.profile-menu button{width:100%;border:0;padding:15px;display:flex;align-items:center;gap:11px;background:#fff;color:#416051;text-align:left}.profile-menu button+button{border-top:1px solid #edf1ee}.profile-menu span{flex:1;font-size:13px;font-weight:600}.profile-menu svg:last-child{color:#91a198}.profile-note{color:#8a9d92;font-size:11px;line-height:1.55;text-align:center;margin:18px 25px}.profile-details{margin:14px 0 0;padding:4px 14px;background:#fff;border:1px solid #e5ece7;border-radius:14px}.profile-details div{display:flex;justify-content:space-between;gap:15px;padding:11px 0}.profile-details div+div{border-top:1px solid #edf1ee}.profile-details dt{color:#82958b;font-size:11px}.profile-details dd{margin:0;color:#315342;font-size:11px;font-weight:700;text-align:right}.password-form{display:grid;gap:12px;margin-top:15px;padding:16px;border:1px solid #dce8e0;border-radius:15px;background:#fff}.password-form h2{margin:0 0 2px;color:#244a39;font-family:Plus Jakarta Sans;font-size:15px}.password-form label{display:grid;gap:5px;color:#49695b;font-size:11px;font-weight:700}.password-form input{width:100%;padding:11px;border:1px solid #d8e5dc;border-radius:9px;outline:none}.password-form input:focus{border-color:#17835f;box-shadow:0 0 0 3px #e2f3e9}.form-success{margin:0;color:#16704f;font-size:11px}.subject-filter{display:grid;gap:6px;margin-bottom:16px;color:#587267;font-size:11px;font-weight:700}.subject-filter select{width:100%;padding:11px 12px;border:1px solid #d8e5dc;border-radius:11px;color:#214b39;background:#fff;outline:none}.subject-filter select:focus{border-color:#17835f;box-shadow:0 0 0 3px #e2f3e9}.performance-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.performance-summary article{min-width:0;padding:13px 10px;border:1px solid #e2ebe5;border-radius:14px;background:#fff}.performance-summary span,.performance-summary small{display:block;color:#82948a;font-size:9px;line-height:1.35}.performance-summary strong{display:flex;align-items:center;gap:4px;min-height:37px;color:#17694c;font-family:Plus Jakarta Sans;font-size:22px;line-height:1.05}.performance-summary article:nth-child(2) strong{font-size:12px}.performance-summary .trend-down strong{color:#b34e43}.performance-summary .trend-up strong{color:#087150}.performance-summary .trend-stable strong,.performance-summary .trend-insufficient strong{color:#9a741e}.analytics-note{display:flex;gap:11px;margin:13px 0;padding:14px;border-radius:14px;color:#236248;background:#e5f3e9}.analytics-note>svg{flex:none}.analytics-note p{margin:0}.analytics-note strong,.analytics-note span{display:block}.analytics-note strong{margin-bottom:4px;font-size:12px}.analytics-note span{color:#58766a;font-size:11px;line-height:1.5}.chart-card{padding:16px 13px 10px;border:1px solid #e2eae4;border-radius:17px;background:#fff}.chart-card h2{margin:0;color:#204735;font-family:Plus Jakarta Sans;font-size:16px}.score-chart{width:100%;margin-top:8px}.score-chart svg{display:block;width:100%;overflow:visible}.chart-grid{stroke:#e6ede8;stroke-width:1}.chart-line{fill:none;stroke:#0c7956;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.chart-point{fill:#fff;stroke:#0c7956;stroke-width:3}.chart-axis,.chart-label{fill:#8a9b92;font-size:8px}.chart-value{fill:#24513d;font-size:9px;font-weight:800}.chart-caption{margin:0 7px 4px;color:#91a098;font-size:9px;line-height:1.45;text-align:center}.assessment-months{display:grid;gap:18px}.assessment-months h3{margin:0 0 8px;color:#688075;font-size:11px;text-transform:capitalize}.assessment-list{display:grid;gap:8px}.assessment-list article{display:grid;grid-template-columns:53px minmax(0,1fr) auto;align-items:center;gap:10px;padding:12px;border:1px solid #e3ebe5;border-radius:14px;background:#fff}.score-badge{display:grid;place-items:center;padding:8px 3px;border-radius:11px;color:#fff;background:linear-gradient(145deg,#15805b,#086345)}.score-badge strong{font-family:Plus Jakarta Sans;font-size:19px}.score-badge span{color:#cce6d8;font-size:8px}.assessment-list h4{overflow:hidden;margin:4px 0 2px;color:#294c3d;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.assessment-list p,.assessment-list small{margin:0;color:#87988f;font-size:9px;line-height:1.4}.assessment-list small{display:block;margin-top:4px;color:#647c70}.pass-state{padding:4px 6px;border-radius:6px;font-size:8px;font-weight:800;white-space:nowrap}.pass-state.passed{color:#11704e;background:#e3f3e8}.pass-state.review{color:#a45728;background:#fff0df}.progress-subject-table{overflow:hidden;border:1px solid #e1eae4;border-radius:14px;background:#fff}.progress-subject-head,.progress-subject-row{display:grid;grid-template-columns:minmax(125px,1fr) repeat(4,45px);align-items:center;gap:3px;padding:10px}.progress-subject-head{color:#fff;background:#176c4f;font-size:9px;font-weight:800}.progress-subject-head span:not(:first-child),.progress-subject-row>span,.progress-subject-row>b{text-align:center}.progress-subject-row+.progress-subject-row{border-top:1px solid #edf1ee}.progress-subject-row div{min-width:0}.progress-subject-row strong,.progress-subject-row small{display:block}.progress-subject-row strong{overflow:hidden;color:#294c3d;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.progress-subject-row small{margin-top:2px;color:#899a91;font-size:8px}.progress-subject-row>span,.progress-subject-row>b{color:#416153;font-size:10px}.progress-subject-row>span{color:#557166}.passed-score{color:#0f7652!important}.review-score{color:#b05a32!important}.period-details{display:grid;gap:10px;margin-top:18px}.period-details>article{padding:14px;border:1px solid #e3ebe5;border-radius:14px;background:#fff}.period-details h3{margin:0 0 9px;color:#294d3d;font-size:13px}.period-details p{margin:0;color:#667e72;font-size:11px;line-height:1.55}.period-details p+p{margin-top:8px}.period-details p strong,.period-details p span{display:block}.annual-recommendation{display:grid;gap:3px;margin-top:13px;padding:15px;border-radius:14px;color:#fff;background:linear-gradient(135deg,#176f51,#0b5941)}.annual-recommendation span,.annual-recommendation small{color:#cce6d8;font-size:9px}.annual-recommendation strong{font-family:Plus Jakarta Sans;font-size:15px}@media(max-width:390px){.performance-summary{grid-template-columns:1fr 1fr}.performance-summary article:first-child{grid-row:span 2}.assessment-list article{grid-template-columns:50px minmax(0,1fr)}.pass-state{grid-column:2;width:fit-content}}@media(min-width:561px){body{background:#e5ede7}.app-shell{box-shadow:0 0 70px #1439281a}.bottom-nav{border-radius:18px 18px 0 0}.login-card{padding:40px 36px 27px}}