/* NusaIQ original 2026 brand layer. UI only; print and game mechanics stay separate. */
/* Page chrome paints at full opacity so accessibility checks and first input stay stable. */
:root {
  --ep-paper: #fff8f0;
  --ep-ink: #17233c;
  --ep-muted: #5a6578;
  --ep-forest: #2d6a4f;
  --ep-coral: #b63a35;
  --ep-mint: #d7f2e8;
  --ep-focus: #1b5e45;
  --ep-line: #d5e5dc;
  --ep-line-strong: #7b879a;
  --ep-surface-muted: #f2f4f7;
  --ep-primary: #2d6a4f;
  --ep-primary-light: #40916c;
  --ep-primary-accent: #2d6a4f;
  --ep-primary-dark: #1b4332;
  --ep-bg: #fff8f0;
  --ep-bg-warm: #fff8f0;
  --ep-color-canvas: #fff8f0;
  --ep-color-action: #2d6a4f;
  --ep-color-action-hover: #1b4332;
  --ep-color-focus: #1b5e45;
  --ep-shadow-2: 0 12px 34px rgba(68, 43, 139, .1);
  --ep-shadow-3: 0 18px 45px rgba(68, 43, 139, .16);
}
body.ep-body { color: #17233c; background: #fff8f0; }
.ep-bg-scene { background: radial-gradient(600px 360px at 100% 0, #e3f2e9, transparent 75%), radial-gradient(540px 400px at 0 80%, #ffead9, transparent 78%), #fff8f0; }
.ep-bg-scene::before { background: radial-gradient(circle, rgba(124,92,250,.2), transparent 70%); }
.ep-bg-scene::after { background: radial-gradient(circle, rgba(255,138,91,.17), transparent 70%); }
.ep-bg-dots { opacity: .13; background-image: radial-gradient(#2d6a4f 1px, transparent 1px); }
.ep-brand { color: #17233c; font-size: 1.15rem; }
.ep-brand-mark { background: #e8f5ef; box-shadow: none; border-radius: 13px; }
.ep-brand-logo { display: block; width: 178px; max-width: 100%; height: auto; }
.ep-topbar { padding-top: 20px; }
.ep-hero-card { max-width: 1080px; display: grid; grid-template-columns: minmax(0,1fr) minmax(250px,42%); align-items: center; gap: 16px; text-align: left; padding: clamp(22px,4vw,48px); margin: 14px 16px 0; background: #fff; border: 1px solid #ece8fb; border-radius: 32px; box-shadow: var(--ep-shadow-2); overflow: hidden; }
.header-hero { max-width: 1120px; margin: auto; }
.header-hero h1 { color: #17233c; font-size: clamp(2rem,5vw,4rem); line-height: 1.04; letter-spacing: -.05em; }
.header-hero .tagline { margin: 10px 0; max-width: 34em; color: #5a6578; }
.header-hero .mascot { display:none !important; }
.ep-home-copy > .ep-game-hero { display:none !important; }
.header-hero .mascot-img { width: 56px; height: 56px; animation: none; }
.ep-home-art { display: block; width: 100%; height: auto; border-radius: 25px; aspect-ratio: 1200/896; object-fit: contain; }
.ep-home-eyebrow { margin: 0; color: #2d6a4f; font-size: .8rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
#userGreeting { color: #2d6a4f; }
.ep-menu { display: flex; max-width: 1100px; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; padding: 6px 18px 13px; margin: 16px auto 0; }
.ep-menu-item, .ep-menu-item.mi-primary, .ep-menu-item.mi-gold { flex: 0 0 112px; min-height: 72px; background: #fff; border: 1px solid #e2ebdf; box-shadow: 0 4px 15px rgba(27,67,50,.07); color: #3d3270; border-radius: 19px; }
.ep-menu-item:hover { box-shadow: 0 8px 24px rgba(27,67,50,.15); }
.ep-menu-item .mi-ico { font-size: 1.35rem; }
.sec-title { max-width: 1100px; color: #2d6a4f; letter-spacing: .06em; font-size: .88rem; }
.ep-year-chooser { max-width: 1100px; }
.ep-year-button { border-radius: 13px; border-color: #d5e5dc; background: #fff; color: #433968; }
.ep-year-button.is-active { background: #2d6a4f; border-color: #2d6a4f; color: #fff; }
.ep-subjects { max-width: 1100px; grid-template-columns: repeat(auto-fit,minmax(min(100%,230px),1fr)); gap: 16px; }
.ep-subject { background: #fff; border: 1px solid #e2ebdf; border-bottom: 1px solid #e2ebdf !important; border-radius: 25px; min-height: 210px; padding: 23px; box-shadow: var(--ep-shadow-2); }
.ep-subject::before { opacity: .18; }
.ep-subject .icon { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 21px; background: #e8f5ef; box-shadow: inset -5px -6px 11px rgba(45,106,79,.1), 0 9px 14px rgba(27,67,50,.12); font-size: 2rem; }
.ep-subject .icon img { display:block; width:100%; height:100%; object-fit:contain; }
.ep-subject .icon img { transition:transform .22s ease-out; }
.ep-subject:hover .icon img { transform:translateY(-3px) rotate(-3deg); }
.ep-subject h2 { color: #17233c; }
.ep-subject .topics { color: #5a6578; }
.ep-subject .badge { background: #e8f5ef; color: #1b4332; }
.ep-subject.card-math .icon { background: #fff0e8; }
.ep-subject.card-sains .icon { background: #dff8ef; }
.ep-subject.card-bm .icon { background: #ffedda; }
.ep-subject.card-arab .icon { background: #fff6cf; }
.ep-subject.card-english .icon { background: #e5efff; }
.ep-subject.card-sejarah .icon { background: #ffe9e7; }
.ep-hub-header { max-width: 1100px; margin: 16px auto 24px; background: #fff; border: 1px solid #d7e9df; border-radius: 30px; box-shadow: var(--ep-shadow-2); padding: 28px; }
.ep-hub-header h1 { color: #17233c; }
.ep-hub-accent-sains { --ni-subject-art:url("../../assets/brand/subject-sains.webp"); }
.ep-hub-accent-bm { --ni-subject-art:url("../../assets/brand/subject-bm.webp"); }
.ep-hub-accent-english { --ni-subject-art:url("../../assets/brand/subject-english.webp"); }
.ep-hub-accent-sejarah { --ni-subject-art:url("../../assets/brand/subject-sejarah.webp"); }
.ep-hub-accent-umum { --ni-subject-art:url("../../assets/brand/subject-umum.webp"); }
.ep-field-kit--math { --ni-subject-art:url("../../assets/brand/subject-matematik.webp"); }
.ep-field-kit--arab { --ni-subject-art:url("../../assets/brand/subject-arab.webp"); }
.ep-hub-header .icon, .ep-game-card .g-icon, .ep-kit-card__icon { display: inline-grid; place-items: center; width: 65px; height: 65px; border-radius: 20px; background-color: #e8f5ef; background-image:var(--ni-subject-art); background-size:contain; background-position:center; background-repeat:no-repeat; box-shadow: inset -4px -5px 9px rgba(45,106,79,.09); font-size:0 !important; }
.ep-kit-hero { position:relative; padding-right:clamp(130px,19vw,225px) !important; }
.ep-kit-hero::after { content:""; position:absolute; right:20px; top:50%; transform:translateY(-50%); width:clamp(110px,15vw,175px); aspect-ratio:1; background-image:var(--ni-subject-art); background-size:contain; background-repeat:no-repeat; background-position:center; pointer-events:none; }
.ep-games { max-width: 1100px; gap: 16px; }
.ep-game-card { background: #fff; border: 1px solid #d7e9df; border-bottom: 1px solid #d7e9df; border-radius: 24px; box-shadow: var(--ep-shadow-2); }
.ep-game-card h3 { color: #17233c; }
.ep-field-kit.ep-hub-accent-math .ep-game-card .g-tag,
.ep-game-card .g-tag { background: #e8f5ef; color: #1b4332; }
.ep-field-kit { background: #fff8f0; }
.ep-field-kit .ep-kit-hero, .ep-field-kit .ep-kit-card { border: 1px solid #d7e9df; border-radius: 28px; box-shadow: var(--ep-shadow-2); }
.ep-field-kit .ep-kit-kicker { color: #2d6a4f; border-color: #a7d4b4; }
.ep-field-kit .ep-kit-card__action { color: #2d6a4f; }
.ep-field-kit .ep-kit-card > p { color:#37474f; }
.ep-field-kit .ep-kit-card > .ep-kit-card__action { color:#1b4332; }
.ep-field-kit .ep-kit-chip { border-color: #d5e5dc; }
@media (max-width: 650px) {
  .ep-kit-hero { padding-right:25px !important; padding-top:125px !important; }
  .ep-kit-hero::after { top:10px; right:14px; transform:none; width:110px; }
  .ep-hero-card { grid-template-columns: 1fr; text-align: left; padding: 22px; margin-inline: 8px; }
  .ep-home-art { max-height: 190px; object-position: center 55%; }
  .ep-subjects { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding-inline: 12px; }
  .ep-subject { min-height: 185px; padding: 15px; }
  .ep-subject .icon { width: 54px; height: 54px; font-size: 1.65rem; }
  .ep-subject h2 { font-size: 1rem; }
}
@media (max-width: 360px) { .ep-subjects { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ep-bg-scene::before, .ep-bg-scene::after { animation: none; } .ep-subject .icon img { transition:none; } }
/* Parent and progress areas use calmer versions of the same surfaces. */
.ep-body > .card, .ep-body .wrap > .card { background:#fff; border:1px solid #d7e9df; border-radius:25px; box-shadow:var(--ep-shadow-2); }
.ep-body .card h1, .ep-body .wrap > .card h1 { color:#17233c; }
.ep-body .stat, .ep-body .subject-row, .ep-body .day { background:#e8f5ef; }
.ep-body .stat .v, .ep-body .stat .val, .ep-body .subject-row .s-score { color:#1b4332; }
.ep-body .bar > i, .ep-body .bar-fill { background:#40916c; }
.ep-body .btn-p, .ep-body .ep-btn-primary { background:#2d6a4f; color:#fff; }
.ep-body .btn-s, .ep-body .ep-btn-secondary { border-color:#cce0d3; color:#1b4332; }
.ep-body #pinGate { background:linear-gradient(145deg,#312261,#2d6a4f); }
.ep-body #pinGate .dot.filled { background:#ffba8a; }

/* A compact workspace: navigation, overview and the current learning year. */
.ep-home .ep-ambient { display: none; }
.ep-home-shell { z-index: 1; }
.ep-home-shell .ep-topbar { max-width: 1280px; padding: 14px 24px; }
.ep-home-shell .ep-brand { min-height: 44px; }
.ep-profile-button { min-height: 44px; padding: 10px 18px; border: 1px solid var(--ep-line); border-radius: 14px; background: #fff; color: #1b4332; font: 800 .9rem var(--ep-font-body, 'Nunito', sans-serif); cursor: pointer; }
.ep-home-layout { display: grid; grid-template-columns: 210px minmax(0,1fr); gap: 24px; max-width: 1280px; margin: 0 auto; padding: 4px 24px 24px; }
.ep-home-main { min-width: 0; }
.ep-dashboard-nav { position: sticky; top: 20px; align-self: start; display: grid; gap: 5px; padding: 12px; background: #fff; border: 1px solid var(--ep-line); border-radius: 22px; box-shadow: 0 6px 20px rgba(27,67,50,.05); z-index: 20; max-height: calc(100dvh - 40px); overflow-y: auto; }
.ep-nav-link { display: flex; align-items: center; gap: 10px; min-width: 44px; min-height: 54px; padding: 9px 12px; border: 0; border-radius: 13px; background: transparent; color: #1b4332; font: 800 .95rem var(--ep-font-body, 'Nunito', sans-serif); text-decoration: none; text-align: left; cursor: pointer; }
.ep-nav-link img { display: block; width: 30px; height: 30px; object-fit: contain; flex: 0 0 auto; }
.ep-nav-link:hover, .ep-nav-more[open] > summary { background: #f0f8f3; }
.ep-nav-link.is-current { background: #2d6a4f; color: #fff; }
.ep-nav-note { display: block; margin-top: 2px; color: #5a6578; font-size: .68rem; font-weight: 700; }
.ep-nav-dots { display: grid; place-items: center; width: 30px; height: 30px; font-size: 1.25rem; letter-spacing: .08em; flex: 0 0 auto; }
.ep-nav-more > summary { list-style: none; }
.ep-nav-more > summary::-webkit-details-marker { display: none; }
.ep-nav-panel { display: grid; gap: 4px; padding: 4px 0 0; }
.ep-nav-heading { margin: 8px 10px; color: #5a6578; font-size: .67rem; font-weight: 800; letter-spacing: .04em; }
.ep-nav-panel .ep-menu-item { justify-content: flex-start; align-items: center; flex-direction: row; width: 100%; min-height: 44px; padding: 10px; border: 0; border-radius: 10px; box-shadow: none; background: #fff; color: #1b4332; text-align: left; font-size: .9rem; }
.ep-nav-panel .ep-menu-item:hover { background: #f0f8f3; }
.ep-sidebar-hint { margin: 10px 10px 6px; padding-top: 14px; border-top: 1px solid var(--ep-line); color: #5a6578; font-size: .78rem; line-height: 1.6; }
.ep-home-main button:focus-visible, .ep-home-main a:focus-visible, .ep-nav-link:focus-visible, .ep-nav-panel .ep-menu-item:focus-visible, .ep-profile-button:focus-visible, .ep-dashboard-year select:focus-visible { outline: 3px solid #1b5e45; outline-offset: 3px; }
.ep-dashboard-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 4px 0 20px; }
.ep-dashboard-kicker { margin: 0 0 6px; font-size: .7rem; font-weight: 900; letter-spacing: .07em; color: #2d6a4f; }
.ep-dashboard-header h1 { margin: 0; color: #17233c; font-size: clamp(1.5rem,2.6vw,2rem); line-height: 1.2; letter-spacing: -.03em; }
.ep-dashboard-year { flex: 0 0 146px; display: grid; gap: 5px; }
.ep-dashboard-year label { font-size: .75rem; font-weight: 800; color: #5a6578; }
.ep-dashboard-year select { width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid #a6c6b5; border-radius: 12px; background: #fff; color: #1b4332; font: 800 1rem var(--ep-font-body, 'Nunito', sans-serif); cursor: pointer; }
.ep-dashboard-welcome { display: grid; grid-template-columns: minmax(0,1fr) 140px; align-items: center; gap: 20px; padding: 24px 28px; border: 1px solid #c7e3d4; border-radius: 24px; background: linear-gradient(115deg,#e8f5ef,#f5fbf7); }
.ep-dashboard-welcome h2 { margin: 0 0 6px; color: #1b4332; font-size: clamp(1.3rem,2vw,1.7rem); line-height: 1.25; overflow-wrap: anywhere; }
.ep-dashboard-welcome p:not(.ep-dashboard-kicker) { max-width: 38em; margin: 0 0 14px; color: #3e5d4e; font-size: .95rem; line-height: 1.5; }
.ep-dashboard-welcome .ep-home-art { width: 140px; height: 140px; aspect-ratio: 1; border-radius: 0; object-fit: contain; }
.ep-dashboard-action { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 10px 16px; border: 0; border-radius: 12px; background: #2d6a4f; color: #fff; font: 800 .9rem var(--ep-font-body, 'Nunito', sans-serif); text-decoration: none; cursor: pointer; }
.ep-dashboard-action:hover { background: #1b4332; }
.ep-dashboard-text-action { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 0; border: 0; background: transparent; color: #1b5e45; font: 800 .9rem var(--ep-font-body, 'Nunito', sans-serif); text-decoration: none; cursor: pointer; }
.ep-dashboard-overview-grid { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: 16px; margin: 18px 0 24px; }
.ep-resume-card, .ep-dashboard-stats { padding: 20px; border: 1px solid var(--ep-line); border-radius: 20px; background: #fff; }
.ep-section-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ep-section-heading h2, .ep-dashboard-stats h2 { margin: 0; color: #17233c; font-size: 1.1rem; line-height: 1.3; }
.ep-small-note { white-space: nowrap; font-size: .72rem; color: #1b4332; background: #e8f5ef; padding: 5px 8px; border-radius: 8px; font-weight: 800; }
.ep-resume-content { display: flex; align-items: center; gap: 12px; margin: 14px 0 6px; }
.ep-resume-content img { width: 56px; height: 56px; object-fit: contain; flex: 0 0 auto; }
.ep-resume-content h3 { margin: 0 0 5px; color: #17233c; font-size: 1rem; line-height: 1.35; overflow-wrap: anywhere; }
.ep-resume-content p, .ep-dashboard-stats > p, .ep-section-heading > div > p { margin: 4px 0 0; color: #5a6578; font-size: .82rem; line-height: 1.5; }
.ep-dashboard-stats dl { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin: 18px 0 6px; }
.ep-dashboard-stats dl > div + div { border-left: 1px solid var(--ep-line); padding-left: 12px; }
.ep-dashboard-stats dt { font-size: .74rem; line-height: 1.45; color: #5a6578; }
.ep-dashboard-stats dd { margin: 6px 0 0; color: #1b4332; font-size: 1.6rem; font-weight: 900; line-height: 1; overflow-wrap: anywhere; }
.ep-dashboard-library > .ep-section-heading { margin-bottom: 16px; }
.ep-library-label { font-size: .68rem; font-weight: 900; color: #2d6a4f; letter-spacing: .08em; }
.ep-home-main .ep-subjects { max-width: none; margin: 0; padding: 0; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.ep-home-main .ep-subject { display: grid; grid-template-columns: 54px minmax(0,1fr); align-content: center; align-items: center; column-gap: 14px; row-gap: 4px; min-height: 120px; padding: 18px; border-radius: 18px; box-shadow: 0 5px 16px rgba(27,67,50,.045); text-align: left; }
.ep-home-main .ep-subject::before { display: none; }
.ep-home-main .ep-subject .icon { width: 54px; height: 54px; grid-row: 1/3; border-radius: 17px; }
.ep-home-main .ep-subject h3 { grid-column: 2; margin: 0; font-size: 1rem; color: #17233c; line-height: 1.35; }
.ep-home-main .ep-subject .topics { grid-column: 2; margin: 0; font-size: .72rem; line-height: 1.5; }
.ep-home-main .ep-subject .badge { top: 7px; right: 8px; font-size: .65rem; }
.ep-account-panel { border-top: 1px solid var(--ep-line); margin-top: 10px; }
.ep-account-panel .ep-timer-pill { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0 0; padding: 10px; width: 100%; border-radius: 12px; font-size: .72rem; text-align: left; }
.ep-home-main .footer { padding: 16px 0 0; color: #5a6578; font-size: .78rem; text-align: center; }
.ep-home-main .footer .ep-batik { max-width: 280px; margin: 10px auto; }
.ep-home [hidden] { display: none !important; }
@media (max-width: 999px) {
  .ep-home-shell { padding-bottom: calc(92px + env(safe-area-inset-bottom,0px)); }
  .ep-home-layout { display: block; padding: 4px 20px 20px; }
  .ep-dashboard-nav { position: fixed; top: auto; bottom: max(10px,env(safe-area-inset-bottom,0px)); left: 14px; right: 14px; max-width: 650px; max-height: none; overflow: visible; margin: auto; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 2px; padding: 6px; border-radius: 20px; box-shadow: 0 8px 28px rgba(27,67,50,.14); }
  .ep-desktop-only { display: none !important; }
  .ep-nav-link { flex-direction: column; justify-content: center; gap: 3px; padding: 5px 1px; min-height: 60px; font-size: .7rem; text-align: center; }
  .ep-nav-link img, .ep-nav-dots { width: 26px; height: 26px; }
  .ep-nav-note { display: none; }
  .ep-nav-panel { position: absolute; bottom: calc(100% + 10px); left: 0; right: 0; max-height: min(70vh,470px); overflow-y: auto; overscroll-behavior: contain; padding: 12px; background: #fff; border: 1px solid var(--ep-line); border-radius: 20px; box-shadow: 0 8px 30px rgba(27,67,50,.15); }
  .ep-nav-panel .ep-menu-item { padding-inline: 12px; font-size: .95rem; }
}
@media (max-width: 700px) {
  .ep-home-shell .ep-topbar { padding: 10px 16px; }
  .ep-home-shell .ep-brand-logo { width: 132px; }
  .ep-home-layout { padding: 4px 14px 16px; }
  .ep-dashboard-header { gap: 12px; padding-bottom: 16px; }
  .ep-dashboard-header h1 { font-size: 1.3rem; }
  .ep-dashboard-header .ep-dashboard-kicker { font-size: .6rem; letter-spacing: .025em; }
  .ep-dashboard-year { flex-basis: 124px; }
  .ep-dashboard-year label { font-size: .67rem; }
  .ep-dashboard-year select { font-size: .92rem; }
  .ep-dashboard-welcome { padding: 18px; gap: 10px; grid-template-columns: minmax(0,1fr) 92px; border-radius: 20px; }
  .ep-dashboard-welcome .ep-home-art { width: 92px; height: 92px; }
  .ep-dashboard-welcome h2 { font-size: 1.25rem; }
  .ep-dashboard-welcome .ep-dashboard-kicker { font-size: .6rem; }
  .ep-dashboard-welcome p:not(.ep-dashboard-kicker) { font-size: .84rem; }
  .ep-dashboard-welcome .ep-dashboard-action { padding-inline: 12px; font-size: .82rem; }
  .ep-dashboard-overview-grid { grid-template-columns: 1fr; gap: 12px; margin: 14px 0 22px; }
  .ep-resume-card, .ep-dashboard-stats { padding: 16px; }
  .ep-library-label { display: none; }
  .ep-home-main .ep-subjects { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .ep-home-main .ep-subject { grid-template-columns: minmax(0,1fr); align-content: start; min-height: 154px; padding: 14px; row-gap: 8px; }
  .ep-home-main .ep-subject .icon { grid-row: auto; width: 46px; height: 46px; }
  .ep-home-main .ep-subject h3, .ep-home-main .ep-subject .topics { grid-column: 1; }
}
@media (max-width: 360px) {
  .ep-dashboard-welcome { grid-template-columns: minmax(0,1fr) 78px; padding: 16px; }
  .ep-dashboard-welcome .ep-home-art { width: 78px; height: 78px; }
  .ep-dashboard-header .ep-dashboard-kicker { display: none; }
}
@media (max-height: 500px) and (max-width: 999px) {
  .ep-nav-link { min-height: 44px; flex-direction: row; }
  .ep-nav-link img, .ep-nav-dots { width: 22px; height: 22px; }
  .ep-nav-panel { max-height: calc(100dvh - 96px); }
}
@media (prefers-reduced-motion: reduce) { .ep-home button, .ep-home a { transition: none; } }