/* Andika ialah fon literasi SIL untuk pembaca permulaan. Disimpan setempat
   supaya paparan kekal konsisten apabila murid belajar di luar talian. */
@font-face{font-family:"Andika";src:url("../fonts/Andika-Regular.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Andika";src:url("../fonts/Andika-Medium.woff2") format("woff2");font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:"Andika";src:url("../fonts/Andika-SemiBold.woff2") format("woff2");font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:"Andika";src:url("../fonts/Andika-Bold.woff2") format("woff2");font-style:normal;font-weight:700;font-display:swap}

/* ============ TOKEN ============ */
:root{
  --bg:#EDF2F2; --bg2:#E3ECEC; --surface:#FFFFFF; --surface2:#F5FAFA;
  --ink:#10222A; --ink2:#48606B; --ink3:#7C949D; --line:#D4E2E2; --line2:#C0D4D4;
  --teal:#0E9384; --teal-d:#0A6F63; --teal-soft:#D6F2EE;
  --kunyit:#E0A200; --kunyit-soft:#FCEFC7;
  --merah:#D92B54; --merah-soft:#FCE0E7;
  --biru:#3D5AF1; --ungu:#7C3AED; --oren:#E8710A; --hijau:#0B9A5B;
  --betul:#0B9A5B; --betul-soft:#D7F2E4; --salah:#D92B54; --atas:#FFFFFF;
  --wau-a:#0E9384; --wau-b:#E0A200;
  --shadow-s:0 1px 2px rgba(16,34,42,.06),0 2px 8px rgba(16,34,42,.05);
  --shadow-m:0 2px 4px rgba(16,34,42,.06),0 10px 24px rgba(16,34,42,.09);
  --shadow-l:0 8px 20px rgba(16,34,42,.10),0 24px 60px rgba(16,34,42,.14);
  --r-s:10px; --r-m:16px; --r-l:24px; --r-xl:32px;
  --font-murid:"Andika",sans-serif;
  --disp:var(--font-murid);
  --body:var(--font-murid);
}
:root[data-font-size="besar"]{font-size:112.5%}
:root[data-font-size="sangat-besar"]{font-size:125%}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0B1618; --bg2:#0F2024; --surface:#152A2E; --surface2:#1C363B;
    --ink:#E8F2F1; --ink2:#A5BFBF; --ink3:#7B9799; --line:#26454B; --line2:#325A61;
    --teal:#2DD4BF; --teal-d:#14B8A6; --teal-soft:#123F3D;
    --kunyit:#FBC02D; --kunyit-soft:#3D3213;
    --merah:#FF6183; --merah-soft:#3E1622;
    --biru:#8494FF; --ungu:#A78BFA; --oren:#FB923C; --hijau:#34D399;
    --betul:#34D399; --betul-soft:#0F3A2C; --salah:#FF6183; --atas:#06211F;
    --shadow-s:0 1px 2px rgba(0,0,0,.4);
    --shadow-m:0 2px 6px rgba(0,0,0,.4),0 12px 28px rgba(0,0,0,.35);
    --shadow-l:0 10px 24px rgba(0,0,0,.45),0 28px 64px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --bg:#0B1618; --bg2:#0F2024; --surface:#152A2E; --surface2:#1C363B;
  --ink:#E8F2F1; --ink2:#A5BFBF; --ink3:#7B9799; --line:#26454B; --line2:#325A61;
  --teal:#2DD4BF; --teal-d:#14B8A6; --teal-soft:#123F3D;
  --kunyit:#FBC02D; --kunyit-soft:#3D3213;
  --merah:#FF6183; --merah-soft:#3E1622;
  --biru:#8494FF; --ungu:#A78BFA; --oren:#FB923C; --hijau:#34D399;
  --betul:#34D399; --betul-soft:#0F3A2C; --salah:#FF6183; --atas:#06211F;
  --shadow-s:0 1px 2px rgba(0,0,0,.4);
  --shadow-m:0 2px 6px rgba(0,0,0,.4),0 12px 28px rgba(0,0,0,.35);
  --shadow-l:0 10px 24px rgba(0,0,0,.45),0 28px 64px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
[hidden]{display:none !important}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:1rem; line-height:1.6;
  /* Profil huruf murid: bentuk satu tingkat a dan g ialah bentuk lalai Andika.
     Ketiga-tiga suis dimatikan secara nyata supaya komponen tidak mengaktifkan
     bentuk tipografi dua tingkat secara tidak sengaja. */
  font-feature-settings:"ss01" 0,"ss13" 0,"ss14" 0;
  font-synthesis:none;
  font-kerning:normal;
  -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(circle at 12% -4%, color-mix(in srgb, var(--teal) 14%, transparent), transparent 45%),
                   radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--kunyit) 16%, transparent), transparent 42%);
  background-attachment:fixed;
}
h1,h2,h3,h4{font-family:var(--disp); font-weight:600; margin:0; text-wrap:balance; letter-spacing:0}
button{font-family:inherit; font-size:inherit; color:inherit; cursor:pointer}
button,input,select,textarea,svg text{font-family:var(--body);font-feature-settings:"ss01" 0,"ss13" 0,"ss14" 0;font-synthesis:none}
svg text.svg-emoji{font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;font-feature-settings:normal;font-synthesis:initial}
:focus-visible{outline:3px solid var(--biru); outline-offset:3px; border-radius:6px}
.langkau{position:fixed;left:12px;top:8px;z-index:100;background:var(--surface);color:var(--ink);padding:10px 14px;border-radius:10px;transform:translateY(-150%)}
.langkau:focus{transform:none}

/* ============ RANGKA ============ */
.balut{max-width:1080px; margin:0 auto; padding:0 20px 72px}
.bar{
  position:sticky; top:0; z-index:40; backdrop-filter:blur(12px);
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom:1px solid var(--line);
}
.bar-in{max-width:1080px; margin:0 auto; padding:10px 20px; display:flex; align-items:center; gap:14px}
.jenama{display:flex; align-items:center; gap:10px; background:none; border:0; padding:0}
.jenama b{font-family:var(--disp); font-weight:700; font-size:20px; letter-spacing:-.02em; white-space:nowrap}
@media (max-width:600px){
  .jenama > span{display:none}
  .bar-in{gap:7px; padding:9px 12px}
  #chip-bintang{display:none}
  .chip{padding:5px 9px; font-size:13px; gap:4px}
  .ikon-btn{width:34px; height:34px; font-size:15px; border-radius:10px}
}
@media (max-width:420px){#chip-hari{display:none}}
.jenama small{display:block; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink3); font-weight:700; line-height:1}
.tolak{margin-left:auto}
.chip{
  display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line); font-weight:700; font-size:14px;
  font-variant-numeric:tabular-nums; box-shadow:var(--shadow-s);
}
.chip.emas{background:var(--kunyit-soft); border-color:color-mix(in srgb,var(--kunyit) 45%,transparent); color:var(--ink)}
button.chip{cursor:pointer}
.ikon-btn{
  width:38px; height:38px; display:grid; place-items:center; border-radius:12px;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-s); font-size:17px;
}
.ikon-btn:hover{border-color:var(--line2)}

/* ============ BUTANG ============ */
.btn{
  border:0; border-radius:14px; padding:13px 22px; font-weight:700; font-size:15px;
  background:var(--teal); color:var(--atas); box-shadow:0 3px 0 var(--teal-d), var(--shadow-s);
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:active{transform:translateY(3px); box-shadow:0 0 0 var(--teal-d)}
.btn.hantu{background:var(--surface); color:var(--ink); border:1px solid var(--line); box-shadow:var(--shadow-s)}
.btn.hantu:active{transform:translateY(2px)}
.btn.kecil{padding:9px 16px; font-size:14px; border-radius:11px}
.btn[disabled]{opacity:.45; cursor:not-allowed; transform:none}

/* ============ SKRIN ============ */
.skrin{display:none; animation:masuk .34s cubic-bezier(.22,.9,.3,1)}
.skrin.aktif{display:block}
@keyframes masuk{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}

/* ---- Skrin mula ---- */
.hero{padding:38px 0 26px; display:grid; gap:8px}
.eyebrow{font-size:11.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--teal-d)}
.hero h1{font-size:clamp(30px,6vw,48px); font-weight:600; line-height:1.05}
.hero p{margin:2px 0 0; color:var(--ink2); max-width:56ch}

.tahun-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(154px,1fr)); gap:14px; margin-top:22px}
.kad-tahun{
  position:relative; text-align:left; border:1px solid var(--line); background:var(--surface);
  border-radius:var(--r-l); padding:18px 16px 16px; box-shadow:var(--shadow-s); overflow:hidden;
  transition:transform .16s cubic-bezier(.22,.9,.3,1), box-shadow .16s ease;
}
.kad-tahun:hover{transform:translateY(-4px); box-shadow:var(--shadow-m)}
.kad-tahun::before{content:""; position:absolute; inset:0 0 auto 0; height:5px; background:var(--warna)}
.kad-tahun .nom{
  font-family:var(--disp); font-weight:700; font-size:44px; line-height:.9; color:var(--warna);
  display:block; margin:6px 0 2px;
}
.kad-tahun .lbl{font-weight:700; font-size:14px}
.kad-tahun .sub{font-size:12.5px; color:var(--ink3); margin-top:2px}
.bar-maju{height:7px; border-radius:99px; background:var(--bg2); margin-top:12px; overflow:hidden}
.bar-maju i{display:block; height:100%; border-radius:99px; background:var(--warna,var(--teal)); transition:width .5s cubic-bezier(.22,.9,.3,1)}
.kad-tahun .peratus{font-size:11.5px; font-weight:700; color:var(--ink3); margin-top:6px; font-variant-numeric:tabular-nums}

.jalur{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px}
.stat{
  flex:1 1 150px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m);
  padding:14px 16px; box-shadow:var(--shadow-s);
}
.stat b{display:block; font-family:var(--disp); font-size:28px; font-weight:600; line-height:1.1; font-variant-numeric:tabular-nums}
.stat span{font-size:12px; color:var(--ink3); font-weight:600}

/* ---- Skrin topik ---- */
.tajuk-skrin{display:flex; align-items:center; gap:12px; padding:26px 0 4px; flex-wrap:wrap}
.tajuk-skrin h2{font-size:clamp(22px,4vw,32px); font-weight:600}
.lencana-tahun{
  display:inline-grid; place-items:center; width:44px; height:44px; border-radius:14px;
  background:var(--warna); color:#fff; font-family:var(--disp); font-weight:700; font-size:22px; flex:none;
}
.nota{color:var(--ink2); font-size:14px; margin:6px 0 0}
.topik-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:12px; margin-top:20px}
.kad-topik{
  text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m);
  padding:15px 15px 13px; box-shadow:var(--shadow-s); display:grid; gap:8px;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.kad-topik:hover{transform:translateY(-3px); box-shadow:var(--shadow-m); border-color:var(--warna)}
.kad-topik .ikon{font-size:22px; line-height:1}
.kad-topik .nama{font-weight:700; font-size:14.5px; line-height:1.3}
.kad-topik .aras-baris{display:flex; gap:6px; align-items:center; margin-top:2px}
.pip{
  flex:1; height:26px; border-radius:8px; background:var(--bg2); display:grid; place-items:center;
  font-size:10.5px; font-weight:700; color:var(--ink3); letter-spacing:.04em;
}
.pip.ada{background:var(--kunyit-soft); color:var(--ink)}
.pip.kunci{opacity:.5}

/* ---- Modal aras ---- */
.tirai{
  position:fixed; inset:0; z-index:60; background:rgba(6,20,24,.55); backdrop-filter:blur(3px);
  display:none; place-items:center; padding:20px;
}
.tirai.buka{display:grid}
.modal{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); padding:24px;
  width:min(430px,100%); box-shadow:var(--shadow-l); animation:pop .28s cubic-bezier(.2,1.2,.4,1);
}
@keyframes pop{from{opacity:0; transform:scale(.93)}to{opacity:1; transform:none}}
.modal h3{font-size:21px; margin-bottom:2px}
.modal .nota{margin-bottom:16px}
.aras-pilih{display:grid; gap:10px}
.aras-btn{
  display:flex; align-items:center; gap:12px; text-align:left; width:100%;
  background:var(--surface2); border:1px solid var(--line); border-radius:var(--r-m); padding:13px 15px;
  transition:border-color .15s ease, transform .12s ease;
}
.aras-btn:hover:not([disabled]){border-color:var(--teal); transform:translateX(3px)}
.aras-btn .n{
  width:34px; height:34px; border-radius:11px; display:grid; place-items:center; flex:none;
  background:var(--teal-soft); color:var(--teal-d); font-family:var(--disp); font-weight:700; font-size:17px;
}
.aras-btn .t{font-weight:700; font-size:14.5px}
.aras-btn .d{font-size:12px; color:var(--ink3)}
.aras-btn .bintang{margin-left:auto; font-size:13px; letter-spacing:1px}

/* ---- Kuiz ---- */
.hud{display:flex; align-items:center; gap:10px; padding:20px 0 12px; flex-wrap:wrap}
.hud .tajuk{font-weight:700; font-size:14px}
.hud .kecilnya{font-size:12px; color:var(--ink3); font-weight:600}
.rentetan{background:var(--merah-soft); color:var(--merah); border-color:transparent}
.jejak{height:8px; border-radius:99px; background:var(--bg2); overflow:hidden; margin-bottom:20px}
.jejak i{display:block; height:100%; background:linear-gradient(90deg,var(--teal),var(--biru)); border-radius:99px; transition:width .4s cubic-bezier(.22,.9,.3,1)}
.panggung{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:clamp(20px,4vw,34px); box-shadow:var(--shadow-m); position:relative; overflow:hidden;
}
.panggung::after{content:""; position:absolute; inset:auto 0 0 0; height:4px; background:linear-gradient(90deg,var(--teal),var(--kunyit),var(--merah))}
.soalan{font-family:var(--body); font-weight:600; font-size:clamp(1.45rem,3.6vw,2.05rem); line-height:1.5; text-wrap:pretty; letter-spacing:.005em}
.visual{margin:18px 0 4px; display:flex; justify-content:center; overflow-x:auto}
.visual svg{max-width:100%; height:auto}
.jawapan{display:grid; grid-template-columns:repeat(2,1fr); gap:11px; margin-top:22px}
@media (max-width:520px){.jawapan{grid-template-columns:1fr}}
.jwp{
  background:var(--surface2); border:2px solid var(--line); border-radius:var(--r-m);
  padding:16px 18px; font-family:var(--body); font-weight:600; font-size:1.18rem; line-height:1.45; text-align:left;
  display:flex; align-items:center; gap:12px; transition:border-color .14s ease, transform .12s ease, background .14s ease;
}
.jwp .huruf{
  width:28px; height:28px; flex:none; border-radius:9px; background:var(--bg2); display:grid; place-items:center;
  font-size:13px; font-weight:700; font-family:var(--body); color:var(--ink2);
}
.jwp:hover:not(.mati){border-color:var(--teal); transform:translateY(-2px)}
.jwp.betul{border-color:var(--betul); background:var(--betul-soft)}
.jwp.betul .huruf{background:var(--betul); color:#fff}
.jwp.cuba{border-color:var(--kunyit); background:var(--kunyit-soft)}
.jwp.salah{border-color:var(--salah); background:var(--merah-soft)}
.jwp.mati{cursor:default; opacity:.72}
.jwp.betul::after,.jwp.cuba::after,.jwp.salah::after{margin-left:auto;font-size:.72rem;font-weight:700;white-space:nowrap}
.jwp.betul::after{content:"Betul";color:var(--betul)}
.jwp.cuba::after{content:"Cuba lagi";color:var(--ink)}
.jwp.salah::after{content:"Belum tepat";color:var(--salah)}
@keyframes goyang{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.maklum{
  margin-top:18px; border-radius:var(--r-m); padding:14px 16px; display:none; gap:10px; align-items:flex-start;
  border:1px solid var(--line); background:var(--surface2); animation:masuk .25s ease;
}
.maklum.tunjuk{display:flex}
.maklum>div{min-width:0;flex:1}
.maklum.ok{background:var(--betul-soft); border-color:color-mix(in srgb,var(--betul) 40%,transparent)}
.maklum.no{background:var(--merah-soft); border-color:color-mix(in srgb,var(--salah) 40%,transparent)}
.maklum.hint{background:var(--kunyit-soft);border-color:color-mix(in srgb,var(--kunyit) 55%,transparent)}
.maklum.ajar{background:var(--teal-soft);border-color:color-mix(in srgb,var(--teal) 48%,transparent)}
.maklum .kepala{font-weight:700; font-size:14.5px; display:block; margin-bottom:2px}
.maklum .isi{font-size:1rem; color:var(--ink2); line-height:1.55;overflow-wrap:anywhere}
.petunjuk-label,.bimbingan-kapsyen,.pengukuhan-tag{display:block;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-d);margin-bottom:4px}
.petunjuk-label{color:var(--ink)}
.visual-bimbingan{display:grid;gap:12px;margin:12px 0 14px}
.visual-kiraan,.visual-objek{
  margin:0;padding:14px;border:1px solid color-mix(in srgb,var(--teal) 30%,var(--line));border-radius:14px;
  background:color-mix(in srgb,var(--surface) 88%,var(--teal-soft));color:var(--ink);overflow:hidden
}
.visual-kiraan figcaption,.visual-objek figcaption{font-size:1rem;font-weight:700;margin-bottom:10px;color:var(--teal-d)}
.jadual-kiraan-bingkai{max-width:100%;overflow-x:auto;padding:2px 1px 7px;overscroll-behavior-inline:contain}
.jadual-kiraan,.jadual-langkah-bahagi{border-collapse:collapse;margin-inline:auto;font-variant-numeric:tabular-nums;white-space:nowrap}
.jadual-kiraan th,.jadual-kiraan td,.jadual-langkah-bahagi th,.jadual-langkah-bahagi td{padding:6px 8px;text-align:center;border:1px solid var(--line)}
.jadual-kiraan th:first-child{position:sticky;left:0;z-index:1;min-width:7.4rem;text-align:left;background:var(--surface);font-size:.72rem;color:var(--ink2)}
.jadual-kiraan .kepala-nilai-tempat th{background:var(--bg2);color:var(--ink2);font-size:.68rem;font-weight:700}
.jadual-kiraan .kepala-nilai-tempat th:first-child{z-index:2}
.jadual-kiraan .digit{min-width:2.05rem;font-size:1.25rem;font-weight:600;line-height:1.25}
.jadual-kiraan .titik-perpuluhan{min-width:.7rem;padding-inline:2px;font-size:1.3rem;font-weight:700;vertical-align:bottom}
.jadual-kiraan .baris-bawa th,.jadual-kiraan .baris-bawa td{color:var(--teal-d);background:var(--teal-soft)}
.jadual-kiraan .baris-kumpul-semula th,.jadual-kiraan .baris-kumpul-semula td{color:var(--oren);background:var(--kunyit-soft)}
.jadual-kiraan .baris-jawapan{border-top:3px solid var(--ink)}
.jadual-kiraan .baris-jawapan th,.jadual-kiraan .baris-jawapan td{font-weight:700;background:var(--surface)}
.jadual-kiraan .baris-hasil-separa th,.jadual-kiraan .baris-hasil-separa td{color:var(--biru)}
.nota-perpuluhan,.petunjuk-blok{font-size:.8rem;color:var(--ink2);margin:0 0 9px}
.langkah-visual{margin:11px 0 0;padding-left:1.35rem;display:grid;gap:4px;color:var(--ink2);font-size:.86rem;line-height:1.48}
.rumusan-visual{margin:10px 0 0;padding:8px 10px;border-radius:9px;background:var(--betul-soft);font-weight:600}
.gabung-objek{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.kumpulan-objek,.hasil-objek,.kumpulan-blok{display:grid;gap:7px;justify-items:center;padding:9px;border-radius:11px;background:var(--surface);border:1px solid var(--line)}
.hasil-objek{margin-top:10px}
.simbol-operasi{font-size:1.45rem;font-weight:700;color:var(--teal-d)}
.bingkai-sepuluh{display:grid;grid-template-columns:repeat(5,1.25rem);grid-template-rows:repeat(2,1.25rem);gap:2px;padding:3px;border:2px solid var(--ink2);border-radius:6px;background:var(--surface)}
.bingkai-sepuluh>span{display:grid;place-items:center;border:1px solid var(--line);border-radius:3px;font-size:.76rem;line-height:1}
.objek-ada{color:var(--teal-d)}
.objek-kosong{color:var(--line2)}
.objek-dikeluarkan{color:var(--salah);background:var(--merah-soft);font-weight:700}
.kumpulan-blok>span,.hasil-objek>span{display:flex;align-items:flex-end;justify-content:center;gap:4px;flex-wrap:wrap}
.pertukaran-blok{margin:10px 0;padding:8px 10px;border-left:4px solid var(--kunyit);border-radius:8px;background:var(--kunyit-soft);color:var(--ink);font-size:.82rem;font-weight:600}
.pertukaran-blok p{margin:0}.pertukaran-blok p+p{margin-top:4px}
.blok-selepas-kumpul-semula{display:grid;gap:7px;justify-items:center;margin-top:10px;padding:10px;border:2px dashed var(--oren);border-radius:11px;background:var(--surface)}
.blok-selepas-kumpul-semula>span{display:flex;align-items:flex-end;justify-content:center;gap:4px;flex-wrap:wrap}
.blok-ratus,.blok-puluh,.blok-sa{display:inline-grid;place-items:center;color:var(--teal-d);background:var(--teal-soft);border:1px solid var(--teal);font-weight:700}
.blok-ratus{width:2rem;height:2rem;border-radius:4px;font-size:1.45rem}
.blok-puluh{width:.66rem;height:2rem;border-radius:3px;font-size:1.35rem}
.blok-sa{width:.75rem;height:.75rem;border-radius:3px;font-size:.55rem}
.blok-sifar{font-weight:700;color:var(--ink2)}
.kumpulan-syiling{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:8px 0;border-top:1px solid var(--line)}
.kumpulan-syiling:first-of-type{border-top:0}
.label-syiling{min-width:5.5rem;font-weight:700;font-size:.82rem}
.syiling{width:2.5rem;height:2.5rem;display:grid;place-content:center;border:2px solid var(--kunyit);border-radius:50%;background:var(--kunyit-soft);color:var(--ink);line-height:1;text-align:center}
.syiling b{font-size:.84rem}.syiling small{font-size:.48rem;margin-top:2px}
.susun-bahagi{width:max-content;max-width:100%;margin:4px auto 12px;display:grid;grid-template-columns:auto auto;grid-template-areas:"kosong hasil" "pembahagi dividen";align-items:end;font-variant-numeric:tabular-nums;font-size:1.35rem;font-weight:600}
.hasil-bahagi{grid-area:hasil;padding:0 10px 3px;border-bottom:2px solid var(--ink)}
.pembahagi{grid-area:pembahagi;padding:4px 8px 4px 0}
.dividen{grid-area:dividen;padding:4px 10px;border-left:2px solid var(--ink)}
.jadual-langkah-bahagi th{background:var(--bg2);font-size:.72rem;color:var(--ink2)}
.jadual-langkah-bahagi td{font-size:.88rem;background:var(--surface)}
.langkah-bimbingan{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:9px;counter-reset:langkah}
.langkah-bimbingan li{counter-increment:langkah;display:grid;grid-template-columns:30px 1fr;gap:9px;align-items:start;background:color-mix(in srgb,var(--surface) 74%,transparent);border:1px solid color-mix(in srgb,var(--teal) 24%,var(--line));border-radius:12px;padding:10px 11px}
.langkah-bimbingan li::before{content:counter(langkah);width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:var(--teal);color:#fff;font-weight:700;font-size:.82rem}
.langkah-bimbingan b{display:block;color:var(--ink);font-size:.86rem;margin-bottom:1px}
.langkah-bimbingan span{display:block}
.jawapan-akhir{margin-top:10px;padding:10px 12px;border-radius:11px;background:var(--surface);border:2px solid var(--teal);color:var(--ink);font-weight:600}
.cara-semak{margin-top:9px;font-size:.86rem;color:var(--ink2)}
.nota-skor-bimbingan{display:block;margin-top:8px;font-size:.78rem;color:var(--ink3)}
.kaki-kuiz{display:flex; gap:10px; margin-top:20px; align-items:center; flex-wrap:wrap}
@media (max-width:520px){
  .kaki-kuiz .btn{width:100%}
  .langkah-bimbingan li{grid-template-columns:28px 1fr;padding:9px}
  .maklum{padding:13px}
  .visual-kiraan,.visual-objek{padding:11px 9px}
  .jadual-kiraan th,.jadual-kiraan td,.jadual-langkah-bahagi th,.jadual-langkah-bahagi td{padding:5px 6px}
  .jadual-kiraan th:first-child{min-width:6.3rem;font-size:.66rem}
  .jadual-kiraan .digit{min-width:1.78rem;font-size:1.12rem}
  .langkah-visual{font-size:.8rem}
}

/* ---- Keputusan ---- */
.hasil{text-align:center; padding:34px clamp(18px,4vw,40px)}
.bintang-besar{display:flex; justify-content:center; gap:10px; margin:6px 0 14px}
.bintang-besar span{font-size:clamp(40px,9vw,60px); filter:grayscale(1) opacity(.28); transform:scale(.8); transition:none}
.bintang-besar span.nyala{animation:letup .55s cubic-bezier(.2,1.3,.4,1) forwards}
@keyframes letup{0%{filter:grayscale(1) opacity(.28); transform:scale(.8) rotate(-20deg)}60%{transform:scale(1.28) rotate(8deg)}100%{filter:none; transform:scale(1) rotate(0)}}
.skor-besar{font-family:var(--disp); font-size:clamp(38px,8vw,56px); font-weight:600; line-height:1; font-variant-numeric:tabular-nums}
.hasil .nota{font-size:15px}
.lencana-baru{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:18px}
.lencana{
  display:flex; align-items:center; gap:9px; background:var(--kunyit-soft); border:1px solid color-mix(in srgb,var(--kunyit) 45%,transparent);
  border-radius:14px; padding:9px 14px; font-weight:700; font-size:13.5px;
}
.lencana .e{font-size:19px}
.lencana.tutup{background:var(--surface2); border-color:var(--line); opacity:.55; font-weight:600}
.kaki-hasil{display:flex; gap:10px; justify-content:center; margin-top:24px; flex-wrap:wrap}
.semak{margin-top:26px; text-align:left; display:grid; gap:8px}
.semak-item{display:flex; gap:10px; align-items:flex-start; background:var(--surface2); border:1px solid var(--line); border-radius:12px; padding:11px 13px; font-size:13.5px}
.semak-item .tanda{font-size:15px; line-height:1.4}
.semak-item b{font-weight:700}
.semak-item .b2{color:var(--ink2); display:block; font-weight:500}
.status-bimbingan{display:table;margin:0 0 4px;padding:2px 7px;border-radius:999px;font-size:.68rem;font-weight:700;letter-spacing:.02em;background:var(--kunyit-soft);color:var(--ink)}
.status-bimbingan.kuasai{background:var(--betul-soft);color:var(--betul)}

/* ---- Kemajuan ---- */
.kotak{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); padding:22px; box-shadow:var(--shadow-s); margin-top:18px}
.kotak h3{font-size:18px; margin-bottom:12px}
.baris-tahun{display:grid; grid-template-columns:64px 1fr 62px; gap:12px; align-items:center; padding:9px 0; border-top:1px solid var(--line)}
.baris-tahun:first-of-type{border-top:0}
.baris-tahun .nm{font-weight:700; font-size:13.5px}
.baris-tahun .kn{text-align:right; font-size:12.5px; color:var(--ink3); font-weight:700; font-variant-numeric:tabular-nums}
.lencana-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px}

/* ---- misi harian ---- */
.chip.api{background:var(--merah-soft); border-color:color-mix(in srgb,var(--merah) 35%,transparent); color:var(--merah)}
.chip.api.padam{opacity:.5; color:var(--ink3); background:var(--surface); border-color:var(--line)}
.tajuk-bahagian{font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink3); margin:30px 0 12px}
.papan-misi{
  margin-top:26px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l);
  padding:20px 20px 16px; box-shadow:var(--shadow-s); position:relative; overflow:hidden;
}
.papan-misi::before{content:""; position:absolute; inset:0 0 auto 0; height:4px; background:linear-gradient(90deg,var(--merah),var(--kunyit))}
.misi-kepala{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:14px}
.misi-kepala h3{font-size:19px}
.misi-kepala .kira{margin-left:auto; font-size:12.5px; font-weight:700; color:var(--ink3); font-variant-numeric:tabular-nums}
.misi{display:grid; grid-template-columns:38px 1fr auto; gap:12px; align-items:center; padding:11px 0; border-top:1px solid var(--line)}
.misi:first-of-type{border-top:0; padding-top:2px}
.misi .e{width:38px; height:38px; border-radius:12px; background:var(--surface2); display:grid; place-items:center; font-size:18px}
.misi.siap .e{background:var(--betul-soft)}
.misi .t{font-weight:700; font-size:14.5px; line-height:1.3}
.misi .g{font-size:12px; color:var(--ink3); font-weight:600; font-variant-numeric:tabular-nums; margin-top:3px}
.misi .bar{height:6px; border-radius:99px; background:var(--bg2); overflow:hidden; margin-top:6px}
.misi .bar i{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--kunyit),var(--merah)); transition:width .5s cubic-bezier(.22,.9,.3,1)}
.misi.siap .bar i{background:var(--betul)}
.btn-tuntut{
  border:0; border-radius:11px; padding:9px 14px; font-weight:700; font-size:13px; white-space:nowrap;
  background:var(--kunyit); color:#1B1400; box-shadow:0 3px 0 color-mix(in srgb,var(--kunyit) 65%,#000);
  animation:denyut 1.6s ease-in-out 4;
}
.btn-tuntut:active{transform:translateY(3px); box-shadow:none}
@keyframes denyut{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.tanda-siap{font-size:12.5px; font-weight:700; color:var(--betul); white-space:nowrap}
.misi-bonus{
  margin-top:14px; padding:12px 14px; border-radius:14px; background:var(--kunyit-soft);
  border:1px solid color-mix(in srgb,var(--kunyit) 40%,transparent); display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:700;
}
.rentetan-nota{margin-top:12px; font-size:12.5px; color:var(--ink3); font-weight:600}

/* ---- kunci langganan ---- */
.kad-tahun.terkunci{opacity:.68}
.kad-tahun.terkunci .nom{color:var(--ink3)}
.tanda-kunci{
  position:absolute; top:12px; right:12px; background:var(--kunyit-soft); color:var(--ink);
  border:1px solid color-mix(in srgb,var(--kunyit) 45%,transparent); border-radius:999px;
  padding:3px 9px; font-size:10.5px; font-weight:700; letter-spacing:.04em;
}
.tanda-saya{
  position:absolute; top:12px; right:12px; background:var(--warna); color:#fff;
  border-radius:999px; padding:3px 9px; font-size:10.5px; font-weight:700; letter-spacing:.04em;
}

/* ---- skrin plus ---- */
.plus-lajur{display:grid; grid-template-columns:1fr .9fr; gap:16px; align-items:start; margin-top:18px}
@media (max-width:760px){.plus-lajur{grid-template-columns:1fr}}
.faedah{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.faedah li{display:grid; grid-template-columns:34px 1fr; gap:12px; align-items:start}
.faedah .e{font-size:20px; line-height:1.2}
.faedah b{display:block; font-size:14.5px}
.faedah span{font-size:13px; color:var(--ink3)}
.kad-harga{border-color:color-mix(in srgb,var(--teal) 45%,transparent)}
.harga-baris{display:flex; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid var(--line)}
.harga-baris b{display:block; font-family:var(--disp); font-size:30px; font-weight:600; line-height:1.05}
.harga-baris span{font-size:12.5px; color:var(--ink3); font-weight:600}
.harga-baris.sunyi b{font-size:21px; color:var(--ink2)}
.jimat{margin-left:auto; background:var(--betul-soft); color:var(--betul); border-radius:999px; padding:5px 11px; font-size:11.5px; font-weight:700}
.kecil-nota{font-size:11.5px; line-height:1.5; margin-top:12px}

/* ---- akaun penjaga ---- */
.akaun-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px;align-items:start}
@media (max-width:760px){.akaun-grid{grid-template-columns:1fr}}
.borang{display:grid;gap:12px}
.medan{display:grid;gap:5px;font-size:.88rem;font-weight:700}
.medan input,.medan select{
  width:100%;padding:12px 14px;border:1px solid var(--line2);border-radius:12px;
  background:var(--surface2);color:var(--ink);font:inherit
}
.medan small{font-weight:500;color:var(--ink3)}
.semak-terma{display:flex;gap:9px;align-items:flex-start;font-size:.78rem;color:var(--ink2)}
.semak-terma input{margin-top:4px}
.semak-terma a,.kaki-laman a{color:var(--teal-d);font-weight:700}
.akaun-sempit{max-width:560px;margin-inline:auto}
.pautan-butang{border:0;background:none;color:var(--teal-d);font:inherit;font-weight:700;text-decoration:underline;cursor:pointer;padding:7px 3px}
.btn.bahaya{background:var(--merah);color:#fff;box-shadow:none}
.btn.hantu.bahaya{background:transparent;color:var(--merah);border-color:color-mix(in srgb,var(--merah),transparent 55%)}
.akaun-status{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.profil-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin-top:12px}
.profil-anak{background:var(--surface2);border:2px solid var(--line);border-radius:var(--r-m);padding:14px;text-align:left;display:grid;gap:3px}
.profil-anak.aktif{border-color:var(--teal);background:var(--teal-soft)}
.profil-anak b{font-size:1rem}.profil-anak span{font-size:.78rem;color:var(--ink3)}
.akaun-mesej{min-height:1.5em;font-size:.85rem;font-weight:700;color:var(--merah)}
.kaki-laman{max-width:1080px;margin:0 auto;padding:18px 20px 34px;border-top:1px solid var(--line);display:flex;gap:16px;flex-wrap:wrap;color:var(--ink3);font-size:.78rem}
.pemilik-produk{flex-basis:100%;display:flex;gap:3px 14px;flex-wrap:wrap}

/* ---- kedai wau ---- */
.wau-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px}
.kad-wau{
  background:var(--surface2); border:2px solid var(--line); border-radius:var(--r-m); padding:14px 12px;
  display:grid; justify-items:center; gap:8px; text-align:center; transition:border-color .15s ease, transform .12s ease;
}
.kad-wau:hover:not([disabled]){transform:translateY(-3px)}
.kad-wau.dipakai{border-color:var(--teal); background:var(--teal-soft)}
.kad-wau .nm{font-weight:700; font-size:13px; line-height:1.3}
.kad-wau .hg{font-size:12px; font-weight:700; color:var(--ink3); font-variant-numeric:tabular-nums}
.kad-wau[disabled]{opacity:.55; cursor:not-allowed}

/* pecahan bertindan */
.fr{display:inline-flex; flex-direction:column; align-items:center; vertical-align:-.42em; line-height:1.06; margin:0 .18em; font-size:.8em}
.fr i{font-style:normal; padding:0 .2em}
.fr i:first-child{border-bottom:2.2px solid currentColor}

canvas#confetti{position:fixed; inset:0; pointer-events:none; z-index:70}
.dokumen-undang{width:min(820px,calc(100% - 32px));margin:32px auto 64px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(22px,5vw,48px);box-shadow:var(--shadow-m)}
.dokumen-undang h1{font-size:clamp(2rem,6vw,3rem);margin:18px 0}.dokumen-undang h2{font-size:1.25rem;margin:30px 0 8px}.dokumen-undang p,.dokumen-undang li{color:var(--ink2)}
.dokumen-undang li+li{margin-top:8px}.dokumen-undang a{color:var(--teal-d)}
.amaran-siaran{background:var(--kunyit-soft);border:1px solid var(--kunyit);border-radius:12px;padding:12px 14px;color:var(--ink)!important}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
}