:root{
  --bg:#F5F6F9;
  --surface:#FFFFFF;
  --surface-2:#EEF1F6;
  --ink:#0F2137;
  --ink-soft:#54637A;
  --ink-faint:#8B97AA;
  --border:#E1E5EC;
  --brand:#113B5C;
  --brand-2:#1B5580;
  --accent:#C9852E; /* brand accent — amber, matches the salepage palette (no green) */
  --accent-soft:#FBF0E1;
  --gold:#8B5A2B; /* deeper bronze — secondary/premium highlight, same two-tone system as the salepage */
  --gold-soft:#F0E1CF;
  --good:#218A6B; /* kept green deliberately — semantic "correct answer / active" signal, not the brand accent */
  --good-soft:#E3F5EE;
  --warn:#C9852E;
  --warn-soft:#FBF0E1;
  --bad:#C0453B;
  --bad-soft:#FBEAE8;
  --shadow-sm:0 1px 2px rgba(15,33,55,.06);
  --shadow-md:0 6px 20px rgba(15,33,55,.08);
  --shadow-lg:0 16px 40px rgba(15,33,55,.14);
  --radius:16px;
  --radius-sm:10px;
  --font-display:'Fraunces',Georgia,serif;
  --font-body:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --cap-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 5L29 11L16 17L3 11L16 5Z M9 14.2V21C9 21 11.5 24 16 24C20.5 24 23 21 23 21V14.2L16 17.4L9 14.2Z' fill='black'/%3E%3C/svg%3E");
  color-scheme: light;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  -webkit-tap-highlight-color:transparent;
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;margin:0;text-wrap:balance;color:var(--ink);}
p{margin:0;}
button{font-family:inherit;}
a{color:inherit;}
.tabular{font-variant-numeric:tabular-nums;}
.mono{font-family:var(--font-mono);}

#app{max-width:560px;margin:0 auto;min-height:100vh;background:var(--bg);position:relative;padding-bottom:0;}
.screen{display:flex;flex-direction:column;min-height:100vh;}
.screen[hidden]{display:none;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:none;border-radius:12px;padding:15px 20px;font-size:16px;font-weight:700;
  cursor:pointer;transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  min-height:52px;line-height:1.2;font-family:var(--font-body);
}
.btn:active{transform:scale(.98);}
.btn:focus-visible{outline:3px solid var(--brand-2);outline-offset:2px;}
.btn-primary{background:var(--brand);color:#fff;box-shadow:var(--shadow-sm);}
.btn-primary:hover{background:var(--brand-2);}
.btn-gold{background:var(--gold);color:#fff;}
.btn-secondary{background:var(--surface);color:var(--brand);border:1.5px solid var(--border);}
.btn-ghost{background:transparent;color:var(--brand);}
.btn-danger{background:var(--bad-soft);color:var(--bad);}
.btn-block{width:100%;}
.btn-sm{padding:10px 14px;min-height:40px;font-size:14px;border-radius:10px;}
.btn:disabled{opacity:.45;cursor:not-allowed;}

/* ---------- Layout helpers ---------- */
.container{padding:20px 20px calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:16px;flex:1;}
.stack{display:flex;flex-direction:column;gap:10px;}
/* Bug fix 2026-09-15: a plain browser `hidden` attribute normally hides an
   element via the browser's own default stylesheet ([hidden]{display:none}),
   but that default rule loses to any AUTHOR css rule that also sets
   `display` on the same element — regardless of selector specificity,
   author styles simply outrank the browser's built-in styles. .stack sets
   display:flex, so any element that is BOTH class="stack" AND has the
   `hidden` attribute (e.g. #sp-success on set-password.php, or the login
   form itself once JS sets form.hidden = true after a real success) was
   never actually hidden — it showed immediately, which is why the
   "Akaun Anda Telah Diaktifkan" success message could appear before the
   form was ever submitted. This explicit override restores the intended
   behavior, matching the existing .screen[hidden] / .modal-overlay[hidden]
   / .toast[hidden] pattern already used elsewhere in this file. */
.stack[hidden]{display:none;}
.row{display:flex;align-items:center;gap:10px;}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.spacer{flex:1;}
.muted{color:var(--ink-soft);}
.faint{color:var(--ink-faint);}
.small{font-size:13px;}
.center-text{text-align:center;}

/* ---------- Card ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-sm);}
.card-flat{background:var(--surface-2);border-radius:var(--radius-sm);padding:14px;}

/* ---------- Top bar ---------- */
.topbar{position:sticky;top:0;z-index:30;background:rgba(245,246,249,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);}
.topbar-inner{max-width:560px;margin:0 auto;display:flex;align-items:center;gap:10px;padding:14px 16px;}
.topbar-title{font-family:var(--font-display);font-size:17px;font-weight:600;}
.icon-btn{width:40px;height:40px;border-radius:10px;border:1px solid var(--border);background:var(--surface);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;}
.icon-btn:active{transform:scale(.95);}
.brandmark{display:flex;align-items:center;gap:8px;}
.brandmark .logo-dot{width:30px;height:30px;border-radius:8px;background:linear-gradient(160deg,var(--brand),var(--brand-2));flex-shrink:0;position:relative;}
.brandmark .logo-dot::after{content:"";position:absolute;inset:6px;background-color:var(--gold);-webkit-mask:var(--cap-icon) center/contain no-repeat;mask:var(--cap-icon) center/contain no-repeat;}

/* ---------- Brand wordmark (two-tone "PKSK" / "BOOSTER") ---------- */
.brand-word{font-family:var(--font-display);font-weight:700;}
.brand-word .pk{color:#fff;}
.brand-word .bo{color:var(--gold);}
.hero-brand-dark .brand-word .pk,
.topbar-title .brand-word .pk{color:var(--brand);}
.hero-brand .brand-word .bo{color:#D9A441;}
.brand-tagline{
  font-family:var(--font-display);font-weight:600;font-size:11px;letter-spacing:.12em;
  color:rgba(255,255,255,.78);text-transform:uppercase;margin-top:6px;
}
.hero-brand-dark + .brand-tagline,
.auth-intro .brand-tagline{color:var(--gold);margin-top:2px;margin-bottom:4px;}

/* ---------- Bottom nav ---------- */
.bottomnav{position:sticky;bottom:0;z-index:30;background:var(--surface);border-top:1px solid var(--border);padding-bottom:env(safe-area-inset-bottom);}
.bottomnav-inner{max-width:560px;margin:0 auto;display:flex;}
.navitem{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:9px 4px 8px;background:none;border:none;color:var(--ink-faint);cursor:pointer;min-height:52px;}
.navitem svg{width:22px;height:22px;}
.navitem.active{color:var(--brand);}
.navitem span{font-size:11px;font-weight:700;}

/* ---------- Forms ---------- */
.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-size:13px;font-weight:700;color:var(--ink-soft);}
.input-wrap{position:relative;}
.input, select.input, textarea.input{
  width:100%;border:1.5px solid var(--border);border-radius:12px;padding:14px 14px;font-size:16px;
  background:var(--surface);color:var(--ink);font-family:inherit;
}
.input:focus{outline:none;border-color:var(--brand-2);box-shadow:0 0 0 3px rgba(27,85,128,.14);}
.input.has-error{border-color:var(--bad);}
textarea.input{resize:vertical;min-height:160px;line-height:1.6;}
.err-msg{color:var(--bad);font-size:12.5px;font-weight:600;min-height:16px;}
.pw-toggle{position:absolute;right:6px;top:6px;bottom:6px;background:none;border:none;color:var(--ink-soft);font-size:12px;font-weight:700;cursor:pointer;padding:0 10px;}
.checkbox-row{display:flex;align-items:flex-start;gap:10px;}
.checkbox-row input{width:20px;height:20px;flex-shrink:0;margin-top:1px;accent-color:var(--brand);}

/* ---------- Badges / states ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;}
.badge-active{background:var(--good-soft);color:var(--good);}
.badge-locked{background:var(--surface-2);color:var(--ink-soft);}
.badge-warn{background:var(--warn-soft);color:var(--warn);}
.badge-bad{background:var(--bad-soft);color:var(--bad);}

/* ---------- Progress bars ---------- */
.progress-track{height:10px;border-radius:999px;background:var(--surface-2);overflow:hidden;}
.progress-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--brand),var(--accent));transition:width .4s ease;}
.progress-fill.low{background:linear-gradient(90deg,#C0453B,#C9852E);}
.progress-fill.mid{background:linear-gradient(90deg,#C9852E,#2FA88A);}

/* ---------- Landing ---------- */
.hero{padding:38px 22px 28px;background:radial-gradient(120% 100% at 50% -10%, #1B5580 0%, #113B5C 55%, #0B2438 100%);color:#fff;border-radius:0 0 28px 28px;}
.hero-brand-wrap{text-align:center;margin-bottom:14px;}
.hero-brand{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-weight:700;font-size:24px;color:#fff;letter-spacing:.01em;
  background:none;border:none;padding:0;border-radius:0;
}
.hero-brand-dot{
  width:34px;height:34px;border-radius:9px;flex-shrink:0;position:relative;
  background:linear-gradient(160deg,var(--brand-2),#0B2438);
}
.hero-brand-dot::after{
  content:"";position:absolute;inset:7px;background-color:var(--gold);
  -webkit-mask:var(--cap-icon) center/contain no-repeat;
  mask:var(--cap-icon) center/contain no-repeat;
}
.hero-brand-dark{color:var(--brand);background:none;border:none;padding:0;margin:0 auto 10px;}
.hero .tag{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);padding:5px 12px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.02em;}
.hero h1{font-size:29px;color:#fff;margin-top:14px;line-height:1.22;}
.hero p.lead{color:rgba(255,255,255,.82);margin-top:10px;font-size:15.5px;}
.hero-stats{display:flex;gap:18px;margin-top:20px;}
.hero-stats div{display:flex;flex-direction:column;}
.hero-stats b{font-family:var(--font-display);font-size:20px;}
.hero-stats span{font-size:11.5px;color:rgba(255,255,255,.7);}

.pkg-card{border:1.5px solid var(--border);border-radius:var(--radius);padding:18px;background:var(--surface);position:relative;box-shadow:var(--shadow-sm);}
.pkg-card.featured{border-color:var(--gold);box-shadow:0 8px 24px rgba(201,133,46,.16);}
.pkg-card .ribbon{position:absolute;top:-11px;right:16px;background:var(--gold);color:#fff;font-size:11px;font-weight:800;padding:4px 10px;border-radius:999px;letter-spacing:.02em;}
.pkg-price{font-family:var(--font-display);font-size:26px;font-weight:600;}
.pkg-price .was{font-family:var(--font-body);font-size:13px;color:var(--ink-faint);text-decoration:line-through;font-weight:600;margin-right:6px;}
.feat-list{display:flex;flex-direction:column;gap:7px;margin-top:8px;}
.feat-list .fi{display:flex;gap:8px;font-size:13.5px;color:var(--ink-soft);align-items:flex-start;}
.feat-list svg{flex-shrink:0;margin-top:2px;color:var(--good);}

/* ---------- Auth ---------- */
.authcard{margin-top:-46px;}

/* ---------- Landing: value strip ---------- */
.value-strip{display:flex;flex-wrap:wrap;gap:8px 14px;padding:2px 2px;}
.vs-item{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--ink-soft);}
.vs-item svg{color:var(--accent);flex-shrink:0;}

/* ---------- Landing: USP grid ---------- */
.usp-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.usp-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px;display:flex;flex-direction:column;gap:6px;}
.usp-icon{width:36px;height:36px;border-radius:10px;background:var(--accent-soft);color:var(--brand);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.usp-card h4{font-size:13.5px;}
.usp-card p{font-size:12px;color:var(--ink-soft);line-height:1.45;}

/* ---------- Landing: how it works ---------- */
.steps-row{display:flex;gap:10px;}
.step{flex:1;display:flex;flex-direction:column;gap:4px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px;}
.step-num{width:24px;height:24px;border-radius:50%;background:var(--brand);color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);}
.step b{font-size:12.5px;margin-top:2px;}
.step span{font-size:11px;color:var(--ink-soft);}

/* ---------- Landing: smart learning flow ---------- */
.flow-strip{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--brand);}
.flow-strip span{background:var(--accent-soft);border-radius:999px;padding:5px 10px;}
.flow-arrow{color:var(--ink-faint);font-style:normal;}

/* ---------- Landing: simulation highlight ---------- */
.sim-box{background:linear-gradient(135deg,var(--brand),var(--brand-2));border-radius:var(--radius);padding:16px;color:#fff;}

/* ---------- Dashboard ---------- */
.stat-tile{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:2px;}
.stat-tile b{font-family:var(--font-display);font-size:22px;}
.stat-tile span{font-size:12px;color:var(--ink-soft);font-weight:600;}
.cat-row{display:flex;flex-direction:column;gap:6px;}
.cat-row .row-between{font-size:13.5px;font-weight:700;}
.section-title{font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);}
.suggest-card{background:linear-gradient(135deg,var(--accent-soft),#fff);border:1px solid var(--border);border-radius:var(--radius);padding:16px;}

/* ---------- Locked ---------- */
.lockwrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 24px;text-align:center;gap:14px;}
.lock-badge{width:72px;height:72px;border-radius:20px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;color:var(--ink-soft);}

/* ---------- Auth screens (login/signup-style intro + card) ---------- */
.auth-intro{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:8px 0 4px;}
.auth-badge{width:56px;height:56px;border-radius:16px;background:linear-gradient(160deg,var(--brand),var(--accent));color:#fff;font-size:24px;margin-bottom:6px;box-shadow:var(--shadow-md);}
.auth-intro h2{font-size:21px;}
.auth-card{gap:16px;padding:22px 18px;}

/* ---------- Practice menu ---------- */
.mode-card{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;cursor:pointer;text-align:left;width:100%;}
.mode-card:active{background:var(--surface-2);}
.mode-icon{width:44px;height:44px;border-radius:12px;background:var(--accent-soft);color:var(--brand);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.mode-card h4{font-size:15.5px;}
.mode-card p{font-size:12.5px;color:var(--ink-soft);margin-top:2px;}
.chev{color:var(--ink-faint);flex-shrink:0;}

.catgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.catchip{border:1.5px solid var(--border);background:var(--surface);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:8px;cursor:pointer;text-align:left;}
.catchip.selected{border-color:var(--brand);background:var(--accent-soft);}
.catchip .cico{width:36px;height:36px;border-radius:10px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;color:var(--brand);}
.countpick{display:flex;gap:10px;}
.countpick button{flex:1;padding:14px;border-radius:12px;border:1.5px solid var(--border);background:var(--surface);font-weight:800;font-size:15px;cursor:pointer;}
.countpick button.selected{border-color:var(--brand);background:var(--brand);color:#fff;}

/* ---------- Quiz ---------- */
.quiz-header{position:sticky;top:0;z-index:20;background:var(--brand);color:#fff;padding:12px 16px;}
.quiz-header-inner{max-width:560px;margin:0 auto;}
.quiz-timer{font-family:var(--font-mono);font-weight:700;font-size:15px;padding:5px 10px;border-radius:8px;background:rgba(255,255,255,.14);}
.quiz-timer.warn10{background:var(--warn);}
.quiz-timer.warn5{background:var(--bad);animation:pulse 1s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.55;}}
.quiz-progress-track{height:6px;border-radius:999px;background:rgba(255,255,255,.22);margin-top:10px;overflow:hidden;}
.quiz-progress-fill{height:100%;background:#fff;border-radius:999px;}

.qmeta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:2px;}
.qtag{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;padding:3px 8px;border-radius:6px;background:var(--surface-2);color:var(--ink-soft);}
.qtext{font-size:17px;font-weight:700;line-height:1.5;color:var(--ink);}
.option{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  border:1.5px solid var(--border);background:var(--surface);border-radius:14px;padding:14px 14px;
  font-size:15.5px;font-weight:600;cursor:pointer;min-height:52px;color:var(--ink);
}
.option .oletter{width:28px;height:28px;border-radius:8px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex-shrink:0;color:var(--ink-soft);}
.option.selected{border-color:var(--brand);background:var(--accent-soft);}
.option.selected .oletter{background:var(--brand);color:#fff;}
.option.correct{border-color:var(--good);background:var(--good-soft);}
.option.correct .oletter{background:var(--good);color:#fff;}
.option.incorrect{border-color:var(--bad);background:var(--bad-soft);}
.option.incorrect .oletter{background:var(--bad);color:#fff;}
.option:disabled{cursor:default;}
.flagbar{display:flex;justify-content:center;}
.flagbtn{display:flex;align-items:center;gap:6px;background:none;border:none;color:var(--ink-soft);font-weight:700;font-size:13px;cursor:pointer;padding:8px 12px;}
.flagbtn.flagged{color:var(--gold);}

.navgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;}
.navcell{aspect-ratio:1;border-radius:9px;border:1.5px solid var(--border);background:var(--surface);font-weight:800;font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink-soft);position:relative;}
.navcell.current{border-color:var(--brand);border-width:2px;color:var(--brand);}
.navcell.answered{background:var(--accent-soft);border-color:var(--accent);color:var(--brand);}
.navcell.flagged::after{content:"";position:absolute;top:-4px;right:-4px;width:9px;height:9px;border-radius:50%;background:var(--gold);border:1.5px solid var(--surface);}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--ink-soft);}
.legend span{display:inline-flex;align-items:center;gap:5px;}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block;}

.quiz-footer{position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--border);padding:12px 16px calc(12px + env(safe-area-inset-bottom));}
.quiz-footer-inner{max-width:560px;margin:0 auto;display:flex;gap:10px;}

/* ---------- Modal ---------- */
.modal-overlay{position:fixed;inset:0;background:rgba(15,33,55,.5);display:flex;align-items:flex-end;justify-content:center;z-index:100;padding:0;}
.modal-overlay[hidden]{display:none;}
.modal-sheet{background:var(--surface);border-radius:20px 20px 0 0;padding:22px 20px calc(22px + env(safe-area-inset-bottom));max-width:560px;width:100%;box-shadow:var(--shadow-lg);}
@media(min-width:560px){.modal-overlay{align-items:center;}.modal-sheet{border-radius:20px;}}

/* ---------- Result ---------- */
.score-ring-wrap{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 0;}
.score-ring{width:168px;height:168px;position:relative;}
.score-ring svg{transform:rotate(-90deg);width:100%;height:100%;}
.score-ring .ring-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.score-ring .ring-label b{font-family:var(--font-display);font-size:36px;}
.score-ring .ring-label span{font-size:12px;color:var(--ink-soft);font-weight:700;}
.resultstat{display:flex;flex-direction:column;align-items:center;gap:2px;flex:1;}
.resultstat b{font-size:18px;}
.resultstat span{font-size:11.5px;color:var(--ink-soft);font-weight:700;}

.review-item{border:1px solid var(--border);border-radius:14px;padding:14px;background:var(--surface);display:flex;flex-direction:column;gap:10px;}
.review-item .badge-num{font-size:11px;font-weight:800;color:var(--ink-faint);}
.working-list{display:flex;flex-direction:column;gap:6px;background:var(--surface-2);border-radius:10px;padding:12px;}
.working-list div{font-size:13.5px;font-family:var(--font-mono);}

/* ---------- Empty / misc ---------- */
.emptystate{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:30px 16px;color:var(--ink-soft);}
.divider{height:1px;background:var(--border);border:none;margin:2px 0;}
.footnote{font-size:11.5px;color:var(--ink-faint);text-align:center;line-height:1.5;padding:10px 6px;}
.wordcount-pill{position:sticky;bottom:0;background:var(--surface);}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 18px;border-radius:12px;font-size:13.5px;font-weight:700;z-index:200;box-shadow:var(--shadow-lg);max-width:88vw;text-align:center;}
.toast[hidden]{display:none;}

::selection{background:var(--accent-soft);}