/* English Growth — tampilan sesuai desain kanvas */
:root{--eg-ink:#18364B;--eg-body:#33473F;--eg-muted:#4C5F57;--eg-bg:#F4F6F2;--eg-line:#DCE5E2;--eg-forest:#173D35;--eg-forest2:#2C5C50;--eg-teal:#176F6B;--eg-mint:#E2F2ED;--eg-cream:#FBF1D8;--eg-gold:#E7C77B;--eg-goldt:#6E5419;--eg-rose:#F8E7E1;--eg-roset:#8E4636;--eg-radius:18px}
.eg-body{margin:0;background:var(--eg-bg);color:var(--eg-body);font-family:'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
.eg-body *{box-sizing:border-box}
.eg-body a{color:var(--eg-teal)}.eg-body a:hover{color:var(--eg-forest)}
.eg-body h1,.eg-body h2,.eg-body h3{color:var(--eg-ink);line-height:1.15;letter-spacing:-.01em;margin:0 0 .4em}
.eg-body h1{font-size:clamp(28px,4vw,44px)}.eg-body h2{font-size:22px}.eg-body h3{font-size:18px}
.eg-body img{max-width:100%}
.eg-wrap{max-width:1280px;margin:0 auto;padding-left:32px;padding-right:32px}
.eg-main{padding-top:32px;padding-bottom:40px;min-height:60vh}
.eg-narrow{max-width:880px}
.eg-muted{color:var(--eg-muted)}.eg-teal{color:var(--eg-teal)}.eg-gold{color:var(--eg-goldt)}
.eg-lead{font-size:18px;color:var(--eg-muted);margin:0 0 24px;max-width:640px}
/* header */
.eg-top{background:#fff;border-bottom:1px solid var(--eg-line)}
.eg-top-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding-top:14px;padding-bottom:14px}
.eg-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--eg-forest)!important;font-weight:800;font-size:18px}
.eg-logo-mark{width:36px;height:36px;border-radius:10px;background:var(--eg-forest);color:var(--eg-gold);display:flex;align-items:center;justify-content:center}
.eg-logo.is-dark{color:#fff!important}.eg-logo.is-dark .eg-logo-mark{background:var(--eg-forest2)}
.eg-nav{display:flex;flex-wrap:wrap;gap:4px;flex:1 1 480px}
.eg-nav a{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;text-decoration:none;font-weight:700;font-size:15px;color:var(--eg-muted)}
.eg-nav a:hover{background:var(--eg-mint);color:var(--eg-forest)}
.eg-nav a.is-active{background:var(--eg-forest);color:#fff}
.eg-nav-public{justify-content:flex-end;align-items:center}
.eg-user{display:flex;align-items:center;gap:10px}
.eg-avatar{width:44px;height:44px;border-radius:50%;background:var(--eg-mint);overflow:hidden;display:inline-flex}
.eg-avatar img{width:100%;height:100%}
.eg-username{font-weight:700;color:var(--eg-ink)}
.eg-iconlink{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;color:var(--eg-muted)!important}
.eg-iconlink:hover{background:var(--eg-mint)}
.eg-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--eg-line);background:#fff;color:var(--eg-forest);font:inherit;font-weight:700;font-size:14px;padding:9px 14px;border-radius:999px;min-height:44px;cursor:pointer}
.eg-chip.is-on{background:var(--eg-mint);border-color:#B9CEC4}
/* buttons */
.eg-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--eg-forest);color:#fff!important;border:1px solid var(--eg-forest);font:inherit;font-weight:800;font-size:16px;padding:12px 20px;border-radius:12px;text-decoration:none;min-height:48px;cursor:pointer}
.eg-btn:hover{background:#0F2A26}
.eg-btn--ghost{background:#fff;color:var(--eg-forest)!important;border-color:#B9CEC4}.eg-btn--ghost:hover{background:var(--eg-mint)}
.eg-btn--gold{background:var(--eg-gold);color:var(--eg-forest)!important;border-color:var(--eg-gold)}.eg-btn--gold:hover{background:#DDB862}
.eg-actions{display:flex;flex-wrap:wrap;gap:12px}.eg-end{justify-content:flex-end;margin-top:18px}
/* pills, cards */
.eg-pill{display:inline-flex;align-items:center;gap:6px;background:var(--eg-mint);color:var(--eg-forest);font-weight:800;font-size:12px;letter-spacing:.04em;padding:6px 12px;border-radius:999px}
.eg-pill.is-cream{background:var(--eg-cream);color:var(--eg-goldt)}.eg-pill.is-rose{background:var(--eg-rose);color:var(--eg-roset)}.eg-pill.is-grey{background:#EEF1EE;color:var(--eg-muted)}
.eg-card{background:#fff;border:1px solid var(--eg-line);border-radius:var(--eg-radius);padding:22px}
.eg-card.is-cream{background:var(--eg-cream);border-color:#EFE1B7}.eg-card.is-mint{background:var(--eg-mint);border-color:#CFE3D8}
.eg-flex{display:flex;flex-wrap:wrap;gap:16px;align-items:stretch}
.eg-flex>.eg-card,.eg-flex>.eg-darkcard{flex:1 1 220px}
.eg-grow{flex:999 1 520px!important;min-width:0}
.eg-side-col{flex:1 1 320px!important;min-width:0}
.eg-stack{display:flex;flex-direction:column;gap:14px;flex:1 1 320px}
.eg-row-card{display:flex;gap:14px;align-items:flex-start}
.eg-section{margin-top:48px}.eg-section-sm{margin-top:16px}
.eg-iconbox{width:46px;height:46px;border-radius:12px;background:var(--eg-mint);color:var(--eg-forest);display:inline-flex;align-items:center;justify-content:center;flex:none}
.eg-iconbox.is-cream{background:var(--eg-cream)}
.eg-step h3{margin-top:14px}.eg-step p{margin:0;color:var(--eg-muted);font-size:15px}
.eg-darkcard{background:var(--eg-forest);color:#CFE0D6;border-radius:22px;padding:28px}
.eg-darkcard h2,.eg-darkcard strong{color:#fff}
.eg-kicker-gold{color:var(--eg-gold);font-weight:800;font-size:13px;letter-spacing:.06em}
.eg-quote{font-size:24px;font-weight:800;color:#fff;line-height:1.3;margin:12px 0}
.eg-mintbox{background:var(--eg-mint);border-radius:22px;padding:30px}
.eg-prose p,.eg-prose li{line-height:1.7}.eg-prose h2{margin-top:1em}
.eg-alert{background:var(--eg-rose);color:var(--eg-roset);border-radius:14px;padding:14px 18px;margin:0 0 18px;font-weight:600}
.eg-alert.is-ok{background:var(--eg-mint);color:var(--eg-forest)}
/* hero & scene */
.eg-hero{display:flex;flex-wrap:wrap;gap:36px;align-items:center}
.eg-hero-text{flex:1 1 480px;min-width:0}.eg-hero-text h1{font-size:clamp(34px,5vw,56px);margin:18px 0 14px}
.eg-hero-art{flex:1 1 380px}
.eg-scene{position:relative;border-radius:24px;overflow:hidden;background:#E6F1EB}
.eg-hills{position:absolute;left:0;right:0;bottom:0;width:100%;height:58%}
.eg-scene img{position:absolute;left:50%;bottom:0;transform:translateX(-50%);max-width:90%}
.eg-continue{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.eg-continue h2{color:#fff;font-size:22px;margin:8px 0 4px}.eg-continue p{margin:0}
/* forms */
.eg-form h2{font-size:19px;margin-top:22px}.eg-form h2:first-of-type{margin-top:0}
.eg-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.eg-body label{font-weight:700;color:var(--eg-ink);font-size:15px}
.eg-fields label,.eg-textarea{display:flex;flex-direction:column;gap:6px}
.eg-body input[type=text],.eg-body input[type=password],.eg-body input[type=email],.eg-body textarea,.eg-body select{font:inherit;font-size:16px;color:var(--eg-ink);border:1px solid #B9CEC4;border-radius:12px;padding:11px 13px;background:#fff;min-height:46px;width:100%}
.eg-textarea{margin-bottom:16px}
.eg-check{display:flex;gap:12px;align-items:flex-start;font-weight:600;margin:10px 0}
.eg-check input,.eg-radio input{width:22px;height:22px;margin-top:2px;accent-color:var(--eg-forest);flex:none}
.eg-radio{flex:1 1 260px;display:flex;gap:12px;align-items:flex-start;border:2px solid var(--eg-line);border-radius:16px;padding:16px;cursor:pointer;font-weight:500}
.eg-radio:has(input:checked){border-color:var(--eg-teal);background:var(--eg-mint)}
.eg-login form p{margin:0 0 14px}.eg-login label{display:block;margin-bottom:6px}
.eg-login input[type=submit]{background:var(--eg-forest);color:#fff;border:0;border-radius:12px;padding:12px 22px;font:inherit;font-weight:800;min-height:48px;cursor:pointer}
.eg-login .login-remember label{display:flex;gap:8px;align-items:center;font-weight:600}
.eg-narrowcard{max-width:720px;margin:0 auto}
/* lists, bars */
.eg-bar{height:10px;background:#E3EBE6;border-radius:999px;overflow:hidden}.eg-bar i{display:block;height:100%;background:var(--eg-teal);border-radius:999px}
.eg-list{list-style:none;padding:0;margin:0}
.eg-list li{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:12px 0;border-top:1px solid var(--eg-line)}
.eg-list li>a:first-child{font-weight:700;color:var(--eg-ink);flex:1 1 220px}
.eg-listbar{width:160px}
.eg-phases{display:flex;flex-wrap:wrap;gap:12px;padding:0;margin:0;list-style:none}
.eg-phase{flex:1 1 180px;background:#fff;border:1px solid var(--eg-line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:2px}
.eg-phase strong{color:var(--eg-ink);font-size:17px;margin-top:10px}
.eg-phase-top{display:flex;justify-content:space-between;align-items:center;color:var(--eg-forest)}
.eg-phase small{font-weight:800;font-size:11px;letter-spacing:.04em;color:var(--eg-muted)}
.eg-phase.is-done small{color:var(--eg-teal)}
.eg-phase.is-now{background:var(--eg-cream);border:2px solid var(--eg-gold)}.eg-phase.is-now small{color:var(--eg-goldt)}
.eg-unitcard{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--eg-ink)!important}
.eg-unitcard strong{font-size:18px}
.eg-crumb{font-size:14px;color:var(--eg-muted);margin-bottom:12px}
.eg-video{position:relative;margin-top:16px}.eg-video iframe{width:100%;aspect-ratio:16/9;height:auto;border-radius:14px}
.eg-itemlist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.eg-itemlist a{display:block;padding:12px 14px;border-radius:12px;border:1px solid var(--eg-line);text-decoration:none;color:var(--eg-ink)!important}
.eg-itemlist li.is-done a{background:var(--eg-mint)}.eg-itemlist li.is-open a{background:var(--eg-cream)}
.eg-phase-tag{font-size:12px;font-weight:800;color:var(--eg-teal)}
/* soal & feedback */
.eg-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:18px;font-size:14px}
.eg-stimulus{font-size:clamp(19px,2.4vw,24px);font-weight:800;color:var(--eg-ink);line-height:1.35}
.eg-question{font-size:20px!important}
.eg-options{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.eg-opt{width:100%;text-align:left;display:flex;gap:14px;align-items:center;font:inherit;font-size:16px;color:var(--eg-ink);background:#fff;border:1px solid var(--eg-line);border-radius:14px;padding:14px 16px;min-height:56px;cursor:pointer}
.eg-opt:hover{border-color:#9BB9AC}
.eg-opt:disabled{cursor:default}
.eg-optkey{width:32px;height:32px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-weight:800;background:#E3EBE6}
.eg-opt.is-wrong{background:var(--eg-rose);border:2px solid var(--eg-roset)}.eg-opt.is-wrong .eg-optkey{background:var(--eg-roset);color:#fff}
.eg-opt.is-right{background:var(--eg-mint);border:2px solid var(--eg-teal)}.eg-opt.is-right .eg-optkey{background:var(--eg-forest);color:#fff}
.eg-feedback{background:#fff;border:2px solid var(--eg-line);border-radius:20px;padding:22px}
.eg-feedback.is-wrong{border-color:var(--eg-roset)}.eg-feedback.is-right{border-color:var(--eg-teal)}
.eg-fb-head{display:flex;align-items:center;gap:8px;font-weight:800}
.eg-feedback.is-wrong .eg-fb-head{color:var(--eg-roset)}.eg-feedback.is-right .eg-fb-head{color:var(--eg-teal)}
.eg-fb-msg{font-size:20px;font-weight:800;color:var(--eg-ink);line-height:1.35;margin:12px 0}
.eg-fb-arti{color:var(--eg-muted);font-style:italic;margin:0 0 12px}
.eg-fb-text{color:var(--eg-muted);font-size:15px}
.eg-fb-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.eg-chipbtn{font:inherit;font-weight:800;font-size:14px;color:var(--eg-teal);background:#fff;border:1px solid #B9CEC4;border-radius:999px;padding:10px 16px;min-height:44px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
.eg-chipbtn.is-solid{background:var(--eg-forest);color:#fff!important;border-color:var(--eg-forest)}
.eg-fb-box{margin-top:14px;padding:14px 16px;border-radius:14px;background:var(--eg-mint)}
.eg-fb-box.is-cream{background:var(--eg-cream)}
.eg-camline{font-size:14px;color:var(--eg-muted);display:flex;gap:8px;align-items:center;margin:0}
/* activities & progress */
.eg-actcard{display:flex;gap:14px;align-items:flex-start;text-decoration:none;color:var(--eg-ink)!important}
.eg-actcard>div{display:flex;flex-direction:column;gap:4px;align-items:flex-start}.eg-actcard strong{font-size:17px}
.eg-stat{display:flex;flex-direction:column;gap:2px}.eg-stat strong{font-size:40px;color:var(--eg-forest);letter-spacing:-.02em;line-height:1.1}.eg-stat small{color:var(--eg-teal);font-weight:700}
.eg-bars{display:flex;align-items:flex-end;gap:16px;height:220px}
.eg-barcol{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px;color:var(--eg-muted)}
.eg-barcol strong{color:var(--eg-ink)}
.eg-barcol i{display:block;width:100%;max-width:56px;background:#9CC8B2;border-radius:10px 10px 4px 4px}.eg-barcol i.is-now{background:var(--eg-forest)}
.eg-garden{display:flex;align-items:flex-end;justify-content:space-around;min-height:90px;color:#B9CEC4}.eg-garden .is-grown{color:#3F7F66}
.eg-badges{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:12px}
.eg-badges li{flex:1 1 150px;text-align:center;border:1px solid var(--eg-line);border-radius:16px;padding:16px;color:#9AA9A2;display:flex;flex-direction:column;align-items:center;gap:4px}
.eg-badges li strong{color:var(--eg-muted)}.eg-badges li span{font-size:13px;color:var(--eg-muted)}
.eg-badges li.is-got{background:var(--eg-cream);border-color:#EFE1B7;color:var(--eg-goldt)}.eg-badges li.is-got strong{color:var(--eg-ink)}
.eg-details{border-top:1px solid var(--eg-line);padding:10px 0}.eg-details summary{cursor:pointer;font-weight:700;color:var(--eg-ink)}
/* footer */
.eg-footer{border-top:1px solid var(--eg-line);background:#fff}
.eg-footer-row{display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between;align-items:center;padding-top:22px;padding-bottom:22px;font-size:14px;color:var(--eg-muted)}
.eg-footer nav{display:flex;gap:20px}
/* staff */
.eg-staff{display:flex;flex-wrap:wrap;min-height:100vh}
.eg-sidebar{flex:1 1 240px;max-width:300px;background:var(--eg-forest);padding:22px 16px;display:flex;flex-direction:column;gap:6px}
.eg-sidebar-sub{font-size:13px;color:#CFE0D6;margin:8px 8px 18px}
.eg-sidebar nav{display:flex;flex-direction:column;gap:4px}
.eg-sidebar nav a{display:flex;gap:12px;align-items:center;padding:11px 12px;border-radius:10px;text-decoration:none;font-weight:700;color:#CFE0D6!important}
.eg-sidebar nav a:hover,.eg-sidebar nav a.is-active{background:var(--eg-forest2);color:#fff!important}
.eg-staff-main{flex:999 1 640px;min-width:0;padding:28px 32px 40px}
.eg-staff-head{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:flex-end;margin-bottom:20px}
.eg-inline-form label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--eg-muted)}
.eg-ind{margin-bottom:14px}.eg-ind>div:first-child{display:flex;justify-content:space-between;margin-bottom:6px}
.eg-tablewrap{overflow-x:auto}
.eg-table{width:100%;border-collapse:collapse;min-width:720px}
.eg-table th{text-align:left;padding:12px 14px;font-size:13px;color:var(--eg-muted);border-bottom:1px solid var(--eg-line)}
.eg-table td{padding:12px 14px;border-bottom:1px solid var(--eg-line);color:var(--eg-ink)}
.eg-lockbar{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
/* mobile */
.eg-tabbar{display:none}
@media (max-width:760px){
 .eg-wrap{padding-left:18px;padding-right:18px}
 .eg-screen-app .eg-nav{display:none}
 .eg-screen-app .eg-username{display:none}
 .eg-tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;background:#fff;border-top:1px solid var(--eg-line);justify-content:space-around;padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
 .eg-tabbar a{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:64px;min-height:48px;justify-content:center;text-decoration:none;font-size:12px;font-weight:800;color:var(--eg-muted)!important}
 .eg-tabbar a.is-active{color:var(--eg-forest)!important}
 .eg-screen-app .eg-footer{padding-bottom:72px}
 .eg-staff-main{padding:20px 18px}
 .eg-sidebar{max-width:none}
 .eg-hero-text h1{margin-top:12px}
}
/* v0.2.0 */
.eg-checkin{padding:16px}.eg-checkin.is-ask{border:2px solid var(--eg-gold);background:var(--eg-cream)}
.eg-checkin-q{margin:0 0 10px;font-size:15px}
.eg-checkin-row{display:flex;flex-wrap:wrap;gap:6px}
.eg-feel{flex:1 1 72px;display:flex;flex-direction:column;align-items:center;gap:2px;border:1px solid var(--eg-line);background:#fff;border-radius:12px;padding:8px 6px;min-height:56px;cursor:pointer;font:inherit}
.eg-feel span{font-size:22px;line-height:1}.eg-feel small{font-size:12px;font-weight:700;color:var(--eg-muted)}
.eg-feel.is-on{border-color:var(--eg-teal);background:var(--eg-mint)}
.eg-work{margin-top:12px;padding-top:12px;border-top:1px solid var(--eg-line)}.eg-work .eg-fb-msg{font-size:17px;margin:0 0 8px}
.eg-fb-culture{margin:-4px 0 12px;padding:10px 12px;border-radius:12px;background:var(--eg-cream);color:var(--eg-goldt);font-weight:600}
.eg-log{margin:0 0 18px}.eg-log summary{cursor:pointer;font-size:16px}.eg-log .eg-form{margin-top:12px}
.eg-rubric{margin:0 0 14px;padding-left:20px;color:var(--eg-muted)}
.eg-emo-label{font-size:12px;font-weight:800;color:var(--eg-muted);letter-spacing:.04em;margin:14px 0 6px;text-transform:uppercase}
.eg-prewrap{white-space:pre-wrap}
.eg-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}.eg-tabs a{padding:9px 14px;border-radius:999px;border:1px solid var(--eg-line);background:#fff;text-decoration:none;font-weight:700;font-size:14px;color:var(--eg-muted)!important}.eg-tabs a.is-active{background:var(--eg-forest);color:#fff!important;border-color:var(--eg-forest)}
.eg-table--sm{min-width:0}.eg-table--sm td,.eg-table--sm th{padding:8px 10px;font-size:14px}
.eg-alert.is-cream{background:var(--eg-cream);color:var(--eg-goldt)}
.eg-likert{border:1px solid var(--eg-line);border-radius:14px;padding:14px 16px;margin:0 0 12px}
.eg-likert legend{font-weight:700;color:var(--eg-ink);padding:0 4px}
.eg-likert-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.eg-likert-row label{display:flex;align-items:center;gap:6px;border:1px solid var(--eg-line);border-radius:10px;padding:8px 12px;min-height:44px;cursor:pointer;font-weight:700}
.eg-likert-row label:has(input:checked){background:var(--eg-mint);border-color:var(--eg-teal)}
.eg-inline-form .eg-actions{margin-top:10px}