/* Mumtaz UPKK — gaya */
:root {
  --ink: #1F2A44; --muted: #4A5672; --garis: #DCD6EE;
  --ungu: #5937B7; --ungu-g: #3E2585; --ungu-l: #ECE6FF;
  --kuning: #FFC531; --kuning-g: #C99200; --kuning-t: #3D2A00;
  --hijau: #1B7A43; --hijau-g: #105230; --hijau-l: #D4F2E0;
  --merah: #B8325E; --merah-g: #7E1F3F; --merah-l: #FFDDE7; --jambu: #FF5C8A;
  --oren: #C2410C; --oren-g: #8A2E08;
  --biru: #1F7FD1;
  --putih: #FFFFFF;
  --bg: #FFF2C2;
  --r: 18px;
  --f-badan: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-tajuk: 'Baloo 2', 'Nunito', system-ui, sans-serif;
  --f-ar: 'Noto Naskh Arabic', 'Amiri', 'Scheherazade New', 'Traditional Arabic', serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--f-badan); font-weight: 700; color: var(--ink);
  background: #E9E3FA; line-height: 1.45; -webkit-tap-highlight-color: transparent;
}
body.latar-utama { --bg: #FFF2C2; }
body.latar-mula { --bg: #EDE5FF; }
body.latar-subjek, body.latar-nota, body.latar-semak { --bg: #F4F1FB; }
body.latar-kuiz { --bg: #D6EEFF; }
body.latar-keputusan { --bg: #6A3FE0; }
body.latar-kad { --bg: #CDF5DC; }
body.latar-bertulis { --bg: #FFE6D2; }
body.latar-ulang { --bg: #FFE3EC; }
body.latar-profil { --bg: #E6D9FF; }
body.latar-info { --bg: #F4F1FB; }
#app { max-width: 480px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; background: var(--bg); position: relative; }
img { display: block; }
h1, h2, h3 { font-family: var(--f-tajuk); font-weight: 800; line-height: 1.15; margin: 0; }
p { margin: 0; }
a { color: var(--ungu); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--biru); outline-offset: 2px; }

.ar { font-family: var(--f-ar); font-weight: 700; unicode-bidi: isolate; font-size: 1.12em; line-height: 1.6; }
.kecil { font-size: 14px; color: var(--muted); }
.tengah { text-align: center; }
.pad { padding: 0 20px; }
.ruang { flex: 1 1 auto; }

.skrin {
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; gap: 14px;
  padding: 0 0 calc(24px + env(safe-area-inset-bottom));
}
.skrin > .kad-putih, .skrin > .senarai-pilihan, .skrin > .kaki-butang, .skrin > .tajuk-bahagian, .skrin > .grid-subjek,
.skrin > .statistik, .skrin > .grid-lencana, .skrin > .sub-tajuk, .skrin > .senarai-ringkas, .skrin > .senarai-semak,
.skrin > .kad-butang, .skrin > .kuiz-meta, .skrin > .soalan-wrap, .skrin > .senarai-jawapan, .skrin > .peta, .skrin > .misi, .skrin > .pasang, .skrin > p.tengah { margin-left: 16px; margin-right: 16px; }
.skrin:has(.nav-bawah), .skrin.ada-nav { padding-bottom: 100px; }

/* Memuat */
.memuat { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--muted); }
.memuat img { animation: denyut 1.4s ease-in-out infinite; }
@keyframes denyut { 50% { transform: scale(1.06); } }

/* Butang */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 20px;
  border-radius: 16px; border: 0; cursor: pointer; text-decoration: none; font-weight: 800; font-size: 16px; text-align: center;
  transition: transform .08s ease, box-shadow .08s ease;
}
.btn:active { transform: translateY(3px); box-shadow: none !important; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn.besar { min-height: 56px; font-size: 17px; width: 100%; }
.btn.kecil-btn { min-height: 44px; padding: 8px 16px; }
.btn.kuning { background: var(--kuning); color: var(--kuning-t); box-shadow: 0 4px 0 var(--kuning-g); }
.btn.ungu { background: var(--ungu); color: #fff; box-shadow: 0 4px 0 var(--ungu-g); }
.btn.hijau { background: var(--hijau); color: #fff; box-shadow: 0 4px 0 var(--hijau-g); }
.btn.merah { background: var(--merah); color: #fff; box-shadow: 0 4px 0 var(--merah-g); }
.btn.oren { background: var(--oren); color: #fff; box-shadow: 0 4px 0 var(--oren-g); }
.btn.garis { background: #fff; color: var(--ungu); border: 2px solid var(--garis); box-shadow: 0 3px 0 var(--garis); }
.btn.garis-merah { background: #fff; color: var(--merah); border: 2px solid var(--jambu); box-shadow: 0 4px 0 #FFB3C8; }
.btn.garis-putih { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.55); }
.btn.teks-merah { background: transparent; color: var(--merah); min-height: 44px; text-decoration: underline; }
.btn-ikon {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
  background: rgba(255,255,255,.18); color: #fff; text-decoration: none; border: 0; cursor: pointer;
}
.btn-ikon.putih { background: #fff; color: var(--ink); box-shadow: 0 2px 0 var(--garis); }
.kaki-butang { display: flex; flex-direction: column; gap: 10px; }
.kad-butang { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.kad-putih { background: #fff; border-radius: var(--r); padding: 16px; box-shadow: 0 4px 0 rgba(89,55,183,.12); }
.kad-putih h2 { font-size: 19px; margin-bottom: 6px; }
.kad-putih p + p { margin-top: 8px; }
.label-atas { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #FFE7A3; }
.label-atas.gelap { color: var(--oren); }
.cip { font-size: 13px; font-weight: 800; color: var(--ungu); background: var(--ungu-l); padding: 6px 12px; border-radius: 999px; }
.cip-kuning { background: var(--kuning); color: var(--kuning-t); border-radius: 999px; padding: 8px 16px; font-weight: 800; font-size: 15px; text-align: center; }
.sub-tajuk { font-size: 20px; margin-top: 6px; }

/* Bar kemajuan */
.bar { display: block; height: 8px; background: rgba(31,42,68,.1); border-radius: 999px; overflow: hidden; width: 100%; }
.bar > i { display: block; height: 100%; background: var(--w, var(--ungu)); border-radius: 999px; transition: width .35s ease; }
.bar.besar { height: 14px; background: rgba(255,255,255,.7); }
.bar.besar > i { background: #12A5A5; }
.hijau-bar { height: 10px; background: #A9DDBC; margin: 0 20px; width: auto; }
.hijau-bar > i { background: var(--hijau); }
.kuning-bar { height: 10px; background: rgba(255,255,255,.3); }
.kuning-bar > i { background: var(--kuning); }

/* Kepala halaman */
.kepala { display: flex; align-items: center; gap: 12px; padding: 16px 16px 12px; padding-top: calc(16px + env(safe-area-inset-top)); background: var(--w, var(--ungu)); color: #fff; }
.kepala-ikon { width: 44px; height: 44px; background: #fff; border-radius: 12px; padding: 3px; }
.kepala-teks { flex: 1 1 auto; min-width: 0; }
.kepala-teks h1 { font-size: 22px; }
.kepala-teks p { font-size: 13px; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kepala .kiraan { font-weight: 800; font-size: 15px; }
.s-kad .kepala, .s-bertulis .kepala { background: transparent; color: var(--ink); }
.s-kad .kepala .btn-ikon, .s-bertulis .kepala .btn-ikon { background: #fff; color: var(--ink); box-shadow: 0 2px 0 rgba(0,0,0,.08); }
.s-kad .kepala .kiraan { color: var(--hijau); }
.s-bertulis .kepala .kiraan { color: var(--oren); }
.kepala-biasa { padding: calc(24px + env(safe-area-inset-top)) 20px 0; }
.kepala-biasa h1 { font-size: 28px; }
.kepala-biasa p { color: var(--muted); margin-top: 6px; }

/* Mula */
.s-mula { align-items: stretch; padding: calc(28px + env(safe-area-inset-top)) 20px 28px; gap: 16px; }
.mula-logo { align-self: center; }
.s-mula h1 { text-align: center; font-size: 34px; color: var(--ungu); }
.mula-moto { text-align: center; color: var(--muted); font-size: 17px; margin-top: -10px; }
.mula-ciri { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.mula-ciri li { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.7); border-radius: 14px; padding: 8px 12px; font-size: 15px; }
.borang { display: flex; flex-direction: column; gap: 10px; }
.borang label[for], .borang legend { font-weight: 800; font-size: 15px; }
.borang input[type=text], .borang input:not([type]) , .borang #nama {
  font: inherit; font-size: 18px; padding: 12px 14px; border-radius: 14px; border: 2px solid var(--garis); background: #FBFAFF; min-height: 52px;
}
.borang #nama:focus { border-color: var(--ungu); outline: none; box-shadow: 0 0 0 3px var(--ungu-l); }
.borang fieldset { border: 0; padding: 0; margin: 6px 0 0; }
.borang legend { margin-bottom: 8px; padding: 0; }
.pilih-tahun { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.pilih-tahun label { position: relative; }
.pilih-tahun input { position: absolute; opacity: 0; inset: 0; }
.pilih-tahun span { display: grid; place-items: center; min-height: 48px; border-radius: 12px; background: var(--ungu-l); color: var(--ungu); font-size: 13px; font-weight: 800; text-align: center; line-height: 1.1; padding: 4px; cursor: pointer; }
.pilih-tahun input:checked + span { background: var(--kuning); color: var(--kuning-t); box-shadow: 0 3px 0 var(--kuning-g); }
.pilih-tahun input:focus-visible + span { outline: 3px solid var(--biru); outline-offset: 2px; }
.ralat { color: var(--merah); font-size: 14px; }

/* Utama */
.utama-kepala { display: flex; align-items: center; gap: 10px; padding: calc(18px + env(safe-area-inset-top)) 16px 2px; }
.utama-salam { flex: 1 1 auto; min-width: 0; }
.utama-salam p { font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.utama-salam h1 { font-size: 24px; color: var(--ungu); }
.cip-streak { display: flex; align-items: center; gap: 4px; background: #fff; border-radius: 999px; padding: 4px 12px 4px 4px; font-size: 14px; font-weight: 800; color: #7A5200; white-space: nowrap; box-shadow: 0 2px 0 rgba(0,0,0,.06); }
.misi { background: var(--ungu); color: #fff; border-radius: 24px; padding: 18px; display: flex; gap: 10px; align-items: center; box-shadow: 0 6px 0 var(--ungu-g); }
.misi.siap { background: #1B7A43; box-shadow: 0 6px 0 var(--hijau-g); }
.misi-teks { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-width: 0; }
.misi h2 { font-size: 22px; }
.misi p { font-size: 14px; opacity: .95; }
.misi .btn { margin-top: 6px; }
.pasang { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 14px; border: 2px dashed var(--ungu); background: rgba(255,255,255,.6); color: var(--ungu); font-weight: 800; cursor: pointer; }
.tajuk-bahagian { display: flex; align-items: baseline; justify-content: space-between; margin-top: 4px; }
.tajuk-bahagian h2 { font-size: 21px; }
.tajuk-bahagian span { font-size: 13px; color: var(--muted); }
.grid-subjek { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sel-subjek { background: #fff; border-radius: 18px; padding: 10px 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: var(--ink); box-shadow: 0 4px 0 rgba(0,0,0,.07); }
.sel-subjek:active { transform: translateY(2px); }
.sel-subjek .nama { font-size: 13px; font-weight: 800; text-align: center; line-height: 1.15; min-height: 30px; display: flex; align-items: center; }
.sel-subjek .bar { height: 6px; }

.nav-bawah {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; z-index: 5;
  background: #fff; border-top: 1px solid var(--garis); display: grid; grid-template-columns: repeat(3, 1fr);
  padding: 6px 8px calc(8px + env(safe-area-inset-bottom));
}
.nav-bawah a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; min-height: 52px; text-decoration: none; color: var(--muted); font-size: 12px; font-weight: 700; }
.nav-bawah a.aktif { color: var(--ungu); font-weight: 800; }

/* Subjek */
.subjek-atas { background: var(--w); border-radius: 0 0 28px 28px; padding-bottom: 14px; }
.subjek-atas .kepala { background: transparent; }
.tab-tahun { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 0 16px; }
.tab-tahun button { min-height: 44px; border: 0; border-radius: 12px; font-weight: 800; font-size: 15px; cursor: pointer; background: rgba(255,255,255,.2); color: #fff; }
.tab-tahun button[aria-selected=true] { background: var(--kuning); color: var(--kuning-t); box-shadow: 0 3px 0 var(--kuning-g); }
.tab-tahun button:disabled { opacity: .35; cursor: default; }
.pecahan b { font-family: var(--f-tajuk); }
.pecahan ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.pecahan li { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--muted); }
.pecahan li b { color: var(--ink); }
.peta { list-style: none; padding: 6px 0; display: flex; flex-direction: column; gap: 18px; position: relative; }
.peta::before { content: ''; position: absolute; left: 50%; top: 20px; bottom: 20px; border-left: 4px dashed rgba(89,55,183,.18); }
.peta li { display: flex; align-items: center; gap: 14px; padding-right: 30px; position: relative; }
.peta li.kanan { flex-direction: row-reverse; text-align: right; padding-right: 0; padding-left: 30px; }
.nod { flex: 0 0 auto; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; font-size: 34px; text-decoration: none;
  background: #fff; box-shadow: 0 6px 0 #C9C4D9, 0 0 0 4px var(--w) inset; }
.nod.separa { background: #FFF4D0; box-shadow: 0 6px 0 var(--kuning-g), 0 0 0 4px var(--kuning) inset; }
.nod.penuh { background: #DDF6E6; box-shadow: 0 6px 0 var(--hijau-g), 0 0 0 4px #27AE60 inset; }
.nod:active { transform: translateY(4px); box-shadow: 0 2px 0 #C9C4D9, 0 0 0 4px var(--w) inset; }
.nod-teks { display: flex; flex-direction: column; gap: 4px; background: rgba(255,255,255,.92); border-radius: 14px; padding: 8px 12px; min-width: 0; }
.peta li.kanan .nod-teks { align-items: flex-end; }
.nod-teks b { font-size: 15px; line-height: 1.25; }
.bintang-baris { display: inline-flex; gap: 2px; }
.bintang-baris img.kosong { filter: grayscale(1) opacity(.35); }
.cabaran { display: flex; align-items: center; gap: 12px; }
.cabaran > div { flex: 1 1 auto; }
.cabaran h2 { font-size: 18px; margin: 0; }
.cabaran p { font-size: 13px; color: var(--muted); }
.cabaran.kunci img { opacity: .7; }

/* Topik */
.topik-hero { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 8px 20px 0; }
.topik-hero .emoji { font-size: 54px; width: 96px; height: 96px; display: grid; place-items: center; background: #fff; border-radius: 50%; box-shadow: 0 6px 0 rgba(0,0,0,.08), 0 0 0 5px var(--w) inset; }
.topik-hero h2 { font-size: 24px; }
.catatan { border-left: 6px solid var(--kuning); }
.catatan b { font-family: var(--f-tajuk); }
.senarai-pilihan { display: flex; flex-direction: column; gap: 10px; }
.pilihan-topik { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 18px; padding: 10px 14px; text-decoration: none; color: var(--ink); box-shadow: 0 4px 0 rgba(0,0,0,.07); border-left: 6px solid var(--p); min-height: 72px; }
.pilihan-topik span { flex: 1 1 auto; display: flex; flex-direction: column; }
.pilihan-topik b { font-family: var(--f-tajuk); font-size: 18px; }
.pilihan-topik small { color: var(--muted); font-size: 13px; }
.pilihan-topik svg { color: var(--p); flex: 0 0 auto; }
.pilihan-topik:active { transform: translateY(2px); }

/* Nota */
.senarai-nota { counter-reset: n; list-style: none; padding: 0 16px; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.senarai-nota li { counter-increment: n; background: #fff; border-radius: 16px; padding: 14px 14px 14px 54px; position: relative; font-size: 16px; line-height: 1.6; box-shadow: 0 3px 0 rgba(0,0,0,.05); }
.senarai-nota li::before { content: counter(n); position: absolute; left: 12px; top: 12px; width: 30px; height: 30px; border-radius: 10px; background: var(--w); color: #fff; display: grid; place-items: center; font-family: var(--f-tajuk); font-size: 15px; }
.senarai-nota li.nota-ar { font-size: 18px; }

/* Kuiz */
.kuiz-atas { display: flex; align-items: center; gap: 12px; padding: calc(16px + env(safe-area-inset-top)) 16px 0; }
.nyawa { display: flex; align-items: center; gap: 4px; font-weight: 800; font-size: 17px; color: var(--merah); }
.kuiz-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 800; color: var(--muted); }
.kuiz-meta .cip { max-width: 70%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soalan-wrap { display: flex; gap: 10px; align-items: flex-end; }
.soalan-wrap > img { flex: 0 0 auto; }
.gelembung { flex: 1 1 auto; background: #fff; border-radius: 20px 20px 20px 6px; padding: 16px; box-shadow: 0 3px 0 rgba(0,0,0,.07); }
.gelembung p { font-family: var(--f-tajuk); font-size: 20px; font-weight: 700; line-height: 1.3; }
.gelembung p.soalan-ar, .soalan-ar { font-size: 22px; }
.senarai-jawapan { display: flex; flex-direction: column; gap: 10px; }
.pilihan {
  min-height: 58px; width: 100%; border-radius: 16px; border: 2px solid #CFE2EF; background: #fff; box-shadow: 0 4px 0 #CFE2EF;
  display: flex; align-items: center; gap: 12px; padding: 8px 14px; font-size: 17px; font-weight: 800; cursor: pointer; text-align: left; color: var(--ink);
}
.pilihan:not([disabled]):active { transform: translateY(3px); box-shadow: none; }
.pilihan .huruf { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 15px; background: #E3EEF5; }
.pilihan .teks { flex: 1 1 auto; }
.pilihan.pil-ar .teks { font-size: 20px; }
.pilihan.betul { background: #E5F7EC; border-color: #27AE60; box-shadow: 0 4px 0 #27AE60; }
.pilihan.betul .huruf { background: #27AE60; color: #fff; }
.pilihan.salah { background: #FFE8EF; border-color: var(--jambu); box-shadow: 0 4px 0 var(--jambu); }
.pilihan.salah .huruf { background: var(--jambu); color: #fff; }
.pilihan.buang { opacity: .3; text-decoration: line-through; }
.pilihan[disabled] { cursor: default; }
.pilihan.betul[disabled], .pilihan.salah[disabled] { opacity: 1; }
.kuiz-bawah { display: flex; gap: 10px; padding: 0 16px; align-items: center; }
.petunjuk { flex: 0 0 auto; color: #0B6E6E; }
.arahan { flex: 1 1 auto; min-height: 52px; border-radius: 16px; background: rgba(255,255,255,.6); color: var(--muted); display: grid; place-items: center; font-weight: 800; }
.maklum { margin-top: auto; padding: 18px 20px calc(18px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; display: flex; flex-direction: column; gap: 10px; position: sticky; bottom: 0; animation: naik .22s ease-out; }
.maklum.ok { background: var(--hijau-l); color: #124D2C; }
.maklum.tidak { background: var(--merah-l); color: #6E1B37; }
.maklum-tajuk { display: flex; align-items: center; gap: 10px; }
.maklum-tajuk h2 { font-size: 23px; }
.maklum p { font-size: 15px; line-height: 1.5; }
.jawapan-betul b { font-weight: 800; }
.s-kuiz { padding-bottom: 0; }
@keyframes naik { from { transform: translateY(30px); opacity: 0; } }

/* Keputusan */
.s-keputusan { color: #fff; align-items: center; text-align: center; padding: calc(28px + env(safe-area-inset-top)) 20px 24px; gap: 12px; }
.s-keputusan h1 { font-size: 46px; color: var(--kuning); line-height: 1; }
.s-keputusan .sub { color: #E8E1FF; }
.keputusan-maskot { animation: lompat .7s ease-out; }
@keyframes lompat { 0% { transform: scale(.5); opacity: 0; } 60% { transform: scale(1.08); } }
.bintang-besar .bintang-baris { gap: 8px; align-items: flex-end; }
.bintang-besar img:nth-child(2) { width: 68px; height: 68px; }
.bintang-besar img.kosong { filter: grayscale(1) brightness(1.8) opacity(.4); }
.statistik { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
.statistik > div { background: rgba(255,255,255,.14); border-radius: 18px; padding: 12px 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.statistik b { font-family: var(--f-tajuk); font-size: 26px; font-weight: 800; display: flex; align-items: center; gap: 4px; }
.statistik span { font-size: 13px; color: #E8E1FF; }
.statistik .xp { color: var(--kuning); }
.statistik.gelap > div { background: #fff; box-shadow: 0 4px 0 rgba(89,55,183,.12); }
.statistik.gelap span { color: var(--muted); }
.statistik.gelap .xp { color: #7A5200; }
.s-keputusan .kad-putih { color: var(--ink); width: 100%; text-align: left; }
.lencana-baru { display: flex; align-items: center; gap: 12px; }
.lencana-baru small { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.lencana-baru b { font-family: var(--f-tajuk); font-size: 19px; }
.semak-salah { width: 100%; text-align: left; background: rgba(255,255,255,.12); border-radius: 18px; padding: 12px 14px; }
.semak-salah summary { cursor: pointer; font-weight: 800; color: #FFE7A3; min-height: 32px; }
.semak-salah ol { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.semak-salah li p { font-size: 15px; }
.semak-salah .kecil { color: #E8E1FF; }
.s-keputusan .kaki-butang { width: 100%; }
.konfeti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 20; }
.konfeti i { position: absolute; top: -12px; width: 10px; height: 14px; border-radius: 2px; animation: jatuh linear forwards; }
@keyframes jatuh { to { top: 105%; transform: translateX(30px) rotate(540deg); } }

/* Kad imbas */
.kad-pentas { flex: 1 1 auto; position: relative; padding: 10px 24px; display: flex; min-height: 420px; }
.kad-bayang { position: absolute; top: 24px; left: 44px; right: 44px; bottom: 6px; background: #A9DDBC; border-radius: 32px; transform: rotate(-4deg); }
.kad-imbas {
  position: relative; width: 100%; border-radius: 32px; border: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 24px; background: #fff; box-shadow: 0 8px 0 #8FCBA5; text-align: center; animation: kadMasuk .25s ease-out;
}
.kad-imbas.belakang { background: var(--hijau); color: #fff; box-shadow: 0 8px 0 var(--hijau-g); animation: balik .3s ease-out; }
@keyframes kadMasuk { from { transform: translateX(24px); opacity: 0; } }
@keyframes balik { from { transform: perspective(800px) rotateY(80deg); } }
.kad-gambar { width: 180px; height: 180px; object-fit: contain; }
.kad-gambar.kecil-g { width: 110px; height: 110px; background: #fff; border-radius: 24px; padding: 8px; }
.kad-depan { font-family: var(--f-tajuk); font-size: 34px; font-weight: 800; line-height: 1.2; }
.kad-depan.panjang { font-size: 24px; }
.kad-depan.ar-besar, .kad-depan .ar { font-size: 52px; font-family: var(--f-ar); line-height: 1.5; }
.kad-depan.ar-besar .ar { font-size: 1em; }
.kad-depan-kecil { font-size: 18px; color: #DFF5E7; }
.kad-depan-kecil.ar-besar .ar { font-size: 32px; }
.kad-belakang { font-family: var(--f-tajuk); font-size: 30px; font-weight: 800; line-height: 1.2; }
.kad-belakang.ar-besar .ar { font-size: 40px; }
.petunjuk-balik { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); margin-top: 6px; }
.kad-butang { margin: 0 16px; }
.tengah-skrin { align-items: center; justify-content: center; text-align: center; padding: 32px 20px; gap: 14px; }
.tengah-skrin h1 { font-size: 30px; }
.tengah-skrin .sub { color: var(--muted); font-size: 16px; }
.tengah-skrin .kaki-butang { width: 100%; margin: 10px 0 0; }

/* Bertulis */
.soalan-bertulis p { font-family: var(--f-tajuk); font-size: 21px; line-height: 1.3; margin-top: 6px; }
.tulis { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--muted); }
.tulis textarea { font: inherit; font-size: 16px; color: var(--ink); border: 2px solid #F3D3BB; border-radius: 12px; padding: 10px; resize: vertical; min-height: 80px; }
.tulis textarea:focus { outline: none; border-color: var(--oren); }
.skema { border-left: 6px solid var(--hijau); }
.skema b { font-family: var(--f-tajuk); font-size: 18px; }
.skema ul { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: 16px; }

/* Semak */
.semak-ringkas { display: flex; flex-direction: column; gap: 8px; }
.semak-ringkas .bar > i { background: var(--w); }
.senarai-semak { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; margin-top: 0; margin-bottom: 0; }
.semak-item { display: flex; align-items: flex-start; gap: 12px; background: #fff; border-radius: 14px; padding: 12px; cursor: pointer; position: relative; box-shadow: 0 3px 0 rgba(0,0,0,.05); min-height: 52px; }
.semak-item input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.semak-item .kotak { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; border: 2.5px solid var(--garis); display: grid; place-items: center; color: transparent; }
.semak-item.ditanda .kotak { background: #27AE60; border-color: #27AE60; color: #fff; }
.semak-item.ditanda .teks { color: var(--muted); }
.semak-item input:focus-visible + .kotak { outline: 3px solid var(--biru); outline-offset: 2px; }
.semak-item .no { flex: 0 0 auto; font-family: var(--f-tajuk); color: var(--w); min-width: 22px; }
.semak-item .teks { flex: 1 1 auto; font-size: 15px; padding-top: 2px; }

/* Ulang */
.ulang-kad { display: flex; align-items: center; gap: 16px; }
.besar-nombor { font-family: var(--f-tajuk); font-size: 44px; color: var(--merah); display: block; line-height: 1; }
.senarai-ringkas { list-style: none; padding: 0; margin-top: 0; margin-bottom: 0; display: flex; flex-direction: column; gap: 8px; }
.senarai-ringkas li { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 14px; padding: 8px 12px; }
.senarai-ringkas li span { flex: 1 1 auto; }
.senarai-ringkas li b { font-family: var(--f-tajuk); font-size: 18px; color: var(--merah); }
.kosong-skrin { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 24px 28px; }
.kosong-skrin p { color: var(--muted); }

/* Profil */
.profil-atas { background: var(--ungu); color: #fff; padding: calc(24px + env(safe-area-inset-top)) 20px 22px; border-radius: 0 0 28px 28px; display: flex; gap: 14px; align-items: center; }
.profil-atas > div { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.profil-atas h1 { font-size: 28px; overflow-wrap: anywhere; }
.profil-atas p { color: #E2D8FF; }
.profil-atas small { font-size: 12px; color: #E2D8FF; }
.grid-lencana { list-style: none; padding: 0; margin-top: 0; margin-bottom: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.grid-lencana li { background: #fff; border-radius: 16px; padding: 10px 6px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; }
.grid-lencana b { font-family: var(--f-tajuk); font-size: 15px; }
.grid-lencana small { font-size: 11.5px; color: var(--muted); line-height: 1.25; }
.grid-lencana li.terkunci img { filter: grayscale(1) opacity(.4); }
.senarai-kuasa { list-style: none; margin: 0 16px; display: flex; flex-direction: column; gap: 10px; }
.senarai-kuasa li { display: grid; grid-template-columns: 34px 96px 1fr 44px; align-items: center; gap: 10px; font-size: 14px; }
.senarai-kuasa li .kecil { grid-column: span 2; }
.senarai-kuasa b { text-align: right; }

/* Info */
.info-logo { float: right; margin: 0 0 8px 10px; }
.s-info details { border-top: 1px solid #EEE9F8; padding: 8px 0; }
.s-info summary { cursor: pointer; min-height: 32px; }
.s-info .kad-putih p { font-size: 15px; }

/* Ralat */
.s-ralat { align-items: center; justify-content: center; text-align: center; padding: 24px; }

/* Toast dan dialog */
#toast { position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 20px); background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 14px; font-weight: 800; opacity: 0; pointer-events: none; transition: .25s; z-index: 30; max-width: 90vw; text-align: center; }
#toast.ada { opacity: 1; transform: translate(-50%, 0); }
.lapis { position: fixed; inset: 0; background: rgba(20,14,40,.5); display: grid; place-items: center; z-index: 40; padding: 20px; }
.dialog { background: #fff; border-radius: 22px; padding: 20px; max-width: 360px; width: 100%; display: flex; flex-direction: column; gap: 16px; font-size: 17px; }
.dialog .kad-butang { margin: 0; }

@media (min-width: 481px) {
  body { padding: 0; }
  #app { box-shadow: 0 0 0 1px rgba(89,55,183,.08), 0 20px 60px rgba(89,55,183,.18); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Pembetulan selepas ujian */
.skrin > .statistik { width: auto; }
.utama-kepala img { width: 50px; height: 50px; }
.utama-salam h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tab-tahun button { font-size: 13px; line-height: 1.1; padding: 4px 2px; }
.semua-tahun { padding: 0 16px; color: #fff; font-size: 14px; opacity: .92; }
.tahun-topik { font-size: 12px; color: var(--muted); }
.s-semak .sub-tajuk { margin-left: 16px; }
@media (max-width: 360px) {
  .utama-kepala > img { display: none; }
  .cip-streak { font-size: 13px; }
}
.kepala .kiraan { white-space: nowrap; flex: 0 0 auto; }

/* Hafazan surah */
:root { --f-quran: 'Amiri Quran', 'Amiri', 'Noto Naskh Arabic', serif; --kertas: #FFFBEF; --emas: #B98A2E; }
body.latar-hafazan { --bg: #E3F6F4; }
.kad-hafazan { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); border: 2px solid #00A8A8; }
.kad-hafazan span { flex: 1 1 auto; display: flex; flex-direction: column; }
.kad-hafazan b { font-family: var(--f-tajuk); font-size: 18px; }
.kad-hafazan small { color: var(--muted); font-size: 13px; }
.kad-hafazan svg { color: #00A8A8; }
.s-hafazan .semak-ringkas .bar > i, .s-surah .bar > i { background: #00A8A8; }
.senarai-surah { list-style: none; padding: 0; margin: 0 16px; display: flex; flex-direction: column; gap: 8px; }
.senarai-surah a { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 16px; padding: 10px 12px; text-decoration: none; color: var(--ink); box-shadow: 0 3px 0 rgba(0,0,0,.06); min-height: 64px; }
.senarai-surah a.hafal { background: #E8F8EE; }
.no-surah { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px; background: #DDF3F1; color: #006F6F; display: grid; place-items: center; font-family: var(--f-tajuk); font-size: 15px; }
.nama-surah { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.nama-surah b { font-size: 16px; }
.nama-surah small { color: var(--muted); font-size: 13px; }
.ar-surah { font-family: var(--f-quran); font-size: 22px; color: #006F6F; white-space: nowrap; }
.tanda-hafal { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: #27AE60; color: #fff; display: grid; place-items: center; }
.s-surah .kepala { background: #00807F; }
.surah-alat { display: flex; justify-content: space-between; gap: 10px; margin: 0 16px; flex-wrap: wrap; }
.segmen, .saiz { display: flex; background: #fff; border-radius: 14px; padding: 4px; gap: 4px; box-shadow: 0 2px 0 rgba(0,0,0,.06); }
.segmen button, .saiz button { min-height: 40px; padding: 0 14px; border: 0; border-radius: 10px; background: transparent; font-weight: 800; cursor: pointer; color: var(--muted); }
.segmen button[aria-pressed=true] { background: #00807F; color: #fff; }
.saiz button:disabled { opacity: .35; cursor: default; }
.mushaf {
  margin: 0 12px; background: var(--kertas); border-radius: 22px; padding: 18px 16px 22px; border: 2px solid #E9D9A8;
  box-shadow: 0 0 0 6px #fff inset, 0 0 0 8px #E9D9A8 inset, 0 6px 0 rgba(0,0,0,.06); text-align: center;
}
.surah-tajuk { font-family: var(--f-quran); font-weight: 400; font-size: 26px; color: #6B4E12; background: linear-gradient(#F6E7BC, #EED79A); border-radius: 12px; padding: 6px 12px; margin: 6px 6px 10px; line-height: 1.6; }
.basmalah { font-family: var(--f-quran); font-size: calc(var(--saiz) * .9); line-height: 2; color: var(--ink); margin-bottom: 6px; }
.senarai-ayat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; text-align: right; }
.ayat { font-family: var(--f-quran); font-size: var(--saiz); line-height: 2.15; color: #1B1B1B; padding: 4px 8px; border-radius: 12px; }
.ayat + .ayat { border-top: 1px dashed #E9D9A8; }
.no-ayat { color: var(--emas); font-size: .8em; white-space: nowrap; margin-inline-start: 4px; }
.ayat[role=button] { cursor: pointer; }
.ayat[role=button]:focus-visible { outline: 3px solid var(--biru); }
.ayat.tersorok { display: flex; align-items: center; gap: 10px; background: rgba(0,128,127,.06); }
.petunjuk-ayat { color: #00807F; }
.garis-sorok { flex: 1 1 auto; height: .5em; border-radius: 999px; background: repeating-linear-gradient(90deg, #CFE7E6 0 18px, transparent 18px 26px); }
.s-surah .kaki-butang .btn.garis { min-height: 48px; }

/* Nota berwarna */
.nota-hero { display: flex; align-items: center; gap: 14px; margin: 0 16px; padding: 14px 16px; border-radius: 20px; background: #fff; box-shadow: 0 4px 0 rgba(0,0,0,.06); border-bottom: 4px solid var(--w); }
.nota-hero .emoji { flex: 0 0 auto; font-size: 34px; width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: color-mix(in srgb, var(--w) 16%, #fff); }
.nota-hero h2 { font-size: 20px; text-wrap: balance; }
.nota-hero p { font-size: 13px; color: var(--muted); }
.kata-kunci h2 { font-size: 17px; margin: 0; }
.cip-kunci { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cip-kunci button { border: 2px solid color-mix(in srgb, var(--w) 45%, #fff); background: color-mix(in srgb, var(--w) 10%, #fff); color: var(--ink); border-radius: 999px; padding: 6px 14px; min-height: 40px; font-weight: 800; font-size: 14px; cursor: pointer; }
.cip-kunci button:active { transform: translateY(2px); }
.cip-kunci .ar-cip .ar { font-size: 18px; }
.senarai-nota { counter-reset: none; }
.senarai-nota li { padding: 14px 14px 14px 52px; }
.senarai-nota li::before { content: none; }
.no-nota { position: absolute; left: 12px; top: 14px; width: 28px; height: 28px; border-radius: 9px; background: var(--w); color: #fff; display: grid; place-items: center; font-family: var(--f-tajuk); font-size: 14px; }
.isi-nota { display: flex; flex-direction: column; gap: 6px; }
.isi-nota p { margin: 0; }
.label-nota { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-tajuk); font-weight: 800; font-size: 15px; line-height: 1.2; color: var(--ink); background: color-mix(in srgb, var(--w) 14%, #fff); border-radius: 8px; padding: 4px 10px; }
.label-nota::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--w); flex: 0 0 auto; }
mark.kunci { background: linear-gradient(transparent 52%, rgba(255,197,49,.6) 52%); color: inherit; font-weight: 800; padding: 0 1px; border-radius: 2px; }
b.takrif { color: color-mix(in srgb, var(--w) 70%, #1F2A44); font-weight: 800; }
b.angka { font-weight: 800; color: var(--merah); }
.senarai-titik { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.senarai-titik li { position: relative; padding: 2px 0 2px 22px !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; font-size: 15.5px; }
.senarai-titik li::before { content: '' !important; position: absolute; left: 4px; top: .7em; width: 9px; height: 9px; border-radius: 3px; background: var(--w); transform: rotate(45deg); }
.grid-kosa { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.grid-kosa li { padding: 6px 4px !important; text-align: center; background: color-mix(in srgb, var(--w) 8%, #fff) !important; border: 1.5px solid color-mix(in srgb, var(--w) 30%, #fff); border-radius: 12px !important; box-shadow: none !important; display: flex; flex-direction: column; gap: 0; }
.grid-kosa li::before { content: none !important; }
.grid-kosa .ar { font-size: 21px; line-height: 1.6; }
.grid-kosa small { font-size: 12.5px; color: var(--muted); }
.senarai-nota li.contoh { background: #F0FAF4; border: 2px dashed #9ED9B4; }
.senarai-nota li.tip { background: #FFF8E1; border: 2px solid #FFE08A; }
.lencana-nota { align-self: flex-start; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--hijau); padding: 2px 8px; border-radius: 6px; }
.lencana-nota.tip { background: #B7791F; }
.cip-hijau { text-align: center; color: var(--hijau); font-weight: 800; background: var(--hijau-l); border-radius: 14px; padding: 12px; }
.papan-maksud .dialog { align-items: center; text-align: center; gap: 10px; }
.maksud-depan { font-family: var(--f-tajuk); font-size: 26px; font-weight: 800; color: var(--ungu); }
.maksud-depan.ar-besar .ar { font-size: 38px; }
.maksud-belakang { font-size: 17px; }
.maksud-gambar { width: 96px; height: 96px; object-fit: contain; }
.kad-gambar.belakang-g { width: 150px; height: 150px; background: #fff; border-radius: 28px; padding: 10px; }
.kad-imbas:not(.belakang) .kad-depan.ar-besar .ar { font-size: 64px; }

/* v1.3: profil, laporan ibu bapa, lapor kesilapan, semakan */
a.utama-salam { text-decoration: none; color: inherit; }
.tukar-ikon { font-size: .6em; color: var(--muted); vertical-align: middle; }
.nota-beta { margin: 4px 16px 0; font-size: 13px; color: var(--muted); text-align: center; line-height: 1.5; }
.nota-beta button, .lapor-kecil { background: none; border: 0; padding: 4px 2px; color: var(--ungu); font-weight: 800; text-decoration: underline; cursor: pointer; font-size: 13px; min-height: 32px; }
.tengah-x { align-self: center; }
.maklum .lapor-kecil { align-self: flex-start; color: inherit; opacity: .85; }
.nota-ulangan { font-size: 14px; color: #E8E1FF; background: rgba(255,255,255,.12); border-radius: 12px; padding: 8px 12px; }
.togol { display: flex; align-items: center; gap: 12px; margin: 0 16px; cursor: pointer; position: relative; }
.togol > span:first-child { flex: 1 1 auto; display: flex; flex-direction: column; }
.togol small { color: var(--muted); font-size: 13px; }
.togol input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.suis { flex: 0 0 auto; width: 52px; height: 30px; border-radius: 999px; background: #CFC8E6; position: relative; transition: background .2s; }
.suis::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.togol input:checked + .suis { background: var(--hijau); }
.togol input:checked + .suis::after { transform: translateX(22px); }
.togol input:focus-visible + .suis { outline: 3px solid var(--biru); outline-offset: 2px; }
.senarai-anak { list-style: none; padding: 0; margin: 0 16px; display: flex; flex-direction: column; gap: 10px; }
.senarai-anak button { width: 100%; display: flex; align-items: center; gap: 12px; background: #fff; border: 2px solid transparent; border-radius: 20px; padding: 10px 14px; text-align: left; cursor: pointer; box-shadow: 0 4px 0 rgba(89,55,183,.12); }
.senarai-anak button.aktif { border-color: var(--ungu); }
.senarai-anak button > span:not(.cip) { flex: 1 1 auto; display: flex; flex-direction: column; }
.senarai-anak b { font-family: var(--f-tajuk); font-size: 19px; }
.senarai-anak small { color: var(--muted); font-size: 13px; }
.tab-anak { display: flex; gap: 6px; margin: 0 16px; overflow-x: auto; }
.tab-anak a { flex: 0 0 auto; padding: 8px 16px; border-radius: 999px; background: #fff; color: var(--ungu); font-weight: 800; text-decoration: none; min-height: 40px; display: grid; place-items: center; }
.tab-anak a[aria-selected=true] { background: var(--ungu); color: #fff; }
.laporan-atas { display: flex; align-items: center; gap: 14px; margin: 0 16px; }
.laporan-atas h2 { font-size: 24px; }
.laporan-atas p { color: var(--muted); font-size: 14px; }
.carta-hari { display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; height: 130px; align-items: end; margin-top: 8px; }
.carta-hari .lajur { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 2px; min-width: 0; }
.carta-hari i { display: block; width: 100%; min-height: 3px; background: var(--ungu); border-radius: 5px 5px 2px 2px; }
.carta-hari i.kosong { background: #E4DFF2; height: 3px !important; }
.carta-hari .nilai { font-size: 9.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.carta-hari small { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.saranan { border-left: 6px solid var(--kuning); }
.saranan ul { margin: 6px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.senarai-lemah { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 10px; }
.senarai-lemah li { display: flex; align-items: center; gap: 10px; }
.senarai-lemah li > span { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.senarai-lemah small { color: var(--muted); font-size: 12.5px; }
.senarai-kuasa.dalam { margin: 8px 0 0; padding: 0; }
.senarai-kuasa.dalam li { grid-template-columns: 30px minmax(0, 1.4fr) 1fr 40px; }
.senarai-kuasa .nama small { color: var(--muted); font-weight: 700; }
.kaki-butang.dalam { margin-top: 10px; }
.kaki-butang.dalam label.btn { cursor: pointer; }
textarea.kod { width: 100%; font: 13px/1.4 ui-monospace, monospace; border: 2px solid var(--garis); border-radius: 12px; padding: 8px; word-break: break-all; }
.dialog.borang label { font-weight: 800; font-size: 14px; }
.dialog select, .dialog textarea:not(.kod) { font: inherit; font-size: 16px; border: 2px solid var(--garis); border-radius: 12px; padding: 10px; background: #FBFAFF; width: 100%; }
.dialog.borang { gap: 8px; max-height: 90vh; overflow-y: auto; }
.petikan { font-size: 14px; background: #F4F1FB; border-radius: 10px; padding: 8px 10px; border-left: 4px solid var(--ungu); }
.semak-topik h2 { font-size: 18px; }
.semak-topik h3 { font-size: 15px; margin: 12px 0 4px; color: var(--ungu); }
.semak-topik ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; }
.semak-topik li { display: flex; gap: 6px; align-items: flex-start; }
.semak-topik li > span { flex: 1 1 auto; min-width: 0; }
.semak-topik li .lapor-kecil { flex: 0 0 auto; }
.pilihan-semak { display: flex; flex-direction: column; margin-top: 2px; color: var(--muted); }
.pilihan-semak .betul { color: var(--hijau); font-weight: 800; }
.semak-topik small { display: block; color: var(--muted); }
.senarai-ringkas li a { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; text-decoration: none; color: var(--ink); min-height: 44px; }
.senarai-ringkas li a span { flex: 1 1 auto; }
.senarai-ringkas li a b { color: var(--muted); font-size: 14px; }
.senarai-anak .cip { white-space: nowrap; flex: 0 0 auto; }

/* v1.4: akses penuh berbayar */
body.latar-beli { --bg: #FFF2C2; }
body.latar-keputusan-cerah { --bg: #EDE5FF; }
.kad-buka { display: flex; align-items: center; gap: 12px; margin: 0 16px; padding: 12px 14px; border-radius: 20px; background: #fff; border: 2px solid var(--kuning); box-shadow: 0 4px 0 var(--kuning-g); text-decoration: none; color: var(--ink); }
.kad-buka > span:not(.harga-cip) { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.kad-buka b { font-family: var(--f-tajuk); font-size: 18px; }
.kad-buka small { color: var(--muted); font-size: 13px; }
.harga-cip { flex: 0 0 auto; background: var(--kuning); color: var(--kuning-t); font-family: var(--f-tajuk); font-weight: 800; font-size: 18px; padding: 6px 12px; border-radius: 12px; }
.nod { position: relative; }
.nod.berkunci { background: #EFEDF5; box-shadow: 0 6px 0 #C9C4D9, 0 0 0 4px #D8D3E6 inset; }
.nod.berkunci > span { opacity: .45; filter: grayscale(.6); }
.nod .mangga { position: absolute; right: -6px; bottom: -6px; width: 30px; height: 30px; background: #fff; border-radius: 50%; padding: 3px; box-shadow: 0 2px 4px rgba(0,0,0,.15); }
.kunci-topik { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; border: 2px solid var(--kuning); }
.kunci-topik .kaki-butang { width: 100%; }
.kad-harga { display: flex; align-items: center; gap: 16px; margin: 0 16px; padding: 18px; border-radius: 24px; background: var(--ungu); color: #fff; box-shadow: 0 6px 0 var(--ungu-g); }
.kad-harga h2 { font-size: 22px; }
.harga { font-family: var(--f-tajuk); font-size: 40px; font-weight: 800; color: var(--kuning); line-height: 1.1; }
.harga small { font-family: var(--f-badan); font-size: 15px; color: #E2D8FF; font-weight: 700; }
.semak-hijau li::before { content: '✓' !important; background: none !important; transform: none !important; color: var(--hijau); font-weight: 800; width: auto !important; height: auto !important; top: 1px !important; left: 0 !important; }
.semak-hijau li { font-size: 15.5px; }
.borang input[type=email], .borang input[type=tel], .borang #namaBeli, .borang #idBil, .borang .input-kod { font: inherit; font-size: 18px; padding: 12px 14px; border-radius: 14px; border: 2px solid var(--garis); background: #FBFAFF; min-height: 52px; width: 100%; }
.borang input:focus { border-color: var(--ungu); outline: none; box-shadow: 0 0 0 3px var(--ungu-l); }
.input-kod { text-transform: uppercase; letter-spacing: .12em; text-align: center; font-family: ui-monospace, Menlo, monospace !important; }
.setuju { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; font-weight: 700; cursor: pointer; }
.setuju input { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 1px; accent-color: var(--ungu); }
.kotak-kod { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; border: 2px dashed var(--ungu); }
.kotak-kod small { color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-size: 12px; }
.kod-besar { font-family: ui-monospace, Menlo, monospace; font-size: 28px; letter-spacing: .08em; color: var(--ungu); user-select: all; }
.tengah-img { margin: 0 auto; }
.berdenyut { animation: denyut 1.2s ease-in-out infinite; }
details.kad-putih summary { cursor: pointer; font-weight: 800; min-height: 32px; }
details.kad-putih .borang { margin-top: 10px; }

/* v1.5 bayaran DuitNow QR */
.langkah-bayar { display: flex; flex-direction: column; gap: 10px; }
.langkah-bayar h2 { display: flex; align-items: center; gap: 10px; font-size: 18px; line-height: 1.25; }
.no-langkah { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ungu); color: #fff; font-size: 17px; }
.qr-bayar { display: block; width: min(100%, 300px); height: auto; margin: 4px auto 0; border-radius: 18px; border: 2px solid #eee; background: #fff; }
.langkah-bayar .btn.garis { align-self: center; }
.kecil-btn { min-height: 40px; padding: 8px 16px; font-size: 15px; }
.langkah-bayar input[type=file] { padding: 10px; background: #fff; }
.label-palsu { font-weight: 800; }
.pilih-fail { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; cursor: pointer; }
.pilih-fail .btn { pointer-events: none; }
.fail-tersorok { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.fail-tersorok:focus-visible + * , .pilih-fail:focus-within .btn { outline: 3px solid var(--kuning); }