/* =====================================================================
   Tema "Teal segar" — ceria tetapi profesional. Dimuat SELEPAS korporat.css.
   Setiap modul ada warna sendiri (body[data-modul]):
     Kehadiran Sekolah = biru · Kelas Mengaji = hijau zamrud · Kelas Tambahan = oren
   Hanya penampilan. Padam fail ini (dan pautannya) untuk kembali ke tema korporat.
   ===================================================================== */
:root{
  --bg:#F4F7FA;--line:#E3E8EF;--tx:#0F172A;--mut:#5B6B80;
  --pri:#0D9488;--pri-d:#0F766E;--blue:#E3F6F3;--blueT:#0F766E;--ring:#8FDDD3;
  --sekolah:#2563EB;--mengaji:#059669;--tambahan:#EA580C;--resit:#7C3AED;
  --sh:0 1px 2px rgba(15,23,42,.04),0 4px 14px -6px rgba(15,23,42,.08);--r:16px;
}
body[data-modul="sekolah"]{--pri:#2563EB;--pri-d:#1D4ED8;--blue:#EAF1FE;--blueT:#1D4ED8;--ring:#B9CEFB}
body[data-modul="mengaji"]{--pri:#059669;--pri-d:#047857;--blue:#E6F7EF;--blueT:#047857;--ring:#9EDDC2}
body[data-modul="tambahan"]{--pri:#EA580C;--pri-d:#C2410C;--blue:#FFF0E6;--blueT:#C2410C;--ring:#FBC5A0}

body{background:var(--bg)}
.card,.importBox,.backupBox,.historyBox,.rptBox{border-color:var(--line);box-shadow:var(--sh)}
input:focus,select:focus,textarea:focus{border-color:var(--pri);box-shadow:0 0 0 3px var(--blue)}

/* Tajuk halaman dengan jalur warna modul */
.pageTitle{display:flex;align-items:center;gap:10px}
.pageTitle::before{display:block!important;content:"";width:6px;height:22px;border-radius:99px;background:var(--pri)}

/* Menu sisi: ikon modul berwarna */
.navMk{background:linear-gradient(135deg,#0F766E,#0EA5E9)!important}
.tabs button[data-modul="sekolah"] svg{stroke:var(--sekolah)}
.tabs button[data-modul="mengaji"] svg{stroke:var(--mengaji)}
.tabs button[data-modul="tambahan"] svg{stroke:var(--tambahan)}
.tabs button[data-t="s5"] svg{stroke:var(--resit)}
.tabs button.on{background:var(--blue)!important;color:var(--pri-d)!important;font-weight:600}
.tabs button.on svg{stroke:var(--pri)}
.navFoot .av,.heroAv{background:#CCF0EB!important;color:#0F766E!important}

/* Butang & sub-tab */
button.p,.authBtn{background:var(--pri)!important;border-color:var(--pri)!important}
button.p:hover:not(:disabled){background:var(--pri-d)!important}
.modeBtns button.on{color:var(--pri-d);background:#fff;box-shadow:0 1px 3px rgba(15,23,42,.1)}
.slTab button.on{background:var(--pri);border-color:var(--pri)}
.slTab button[data-m="sekolah"].on{background:var(--sekolah);border-color:var(--sekolah)}
.slTab button[data-m="mengaji"].on{background:var(--mengaji);border-color:var(--mengaji)}
.slTab button[data-m="tambahan"].on{background:var(--tambahan);border-color:var(--tambahan)}
#rpJenis button[data-jenis="sekolah"].on{background:var(--sekolah);border-color:var(--sekolah)}
#rpJenis button[data-jenis="mengaji"].on{background:var(--mengaji);border-color:var(--mengaji)}
#rpJenis button[data-jenis="tambahan"].on{background:var(--tambahan);border-color:var(--tambahan)}
.rkModul button[data-rkmodul="mengaji"].on{background:var(--mengaji);border-color:var(--mengaji)}
.rkModul button[data-rkmodul="tambahan"].on{background:var(--tambahan);border-color:var(--tambahan)}

/* Utama */
.hero{background:linear-gradient(130deg,#0F766E 0%,#0D9488 45%,#0EA5E9 100%)!important}
.hero:after{background:rgba(255,255,255,.10)!important}
.pintas{box-shadow:0 10px 28px -12px rgba(15,23,42,.25)}
.pintas .p1{background:#EAF1FE}.pintas .p1 svg{stroke:var(--sekolah)}
.pintas .p2{background:#E6F7EF}.pintas .p2 svg{stroke:var(--mengaji)}
.pintas .p3{background:#FFF0E6}.pintas .p3 svg{stroke:var(--tambahan)}
.pintas .p4{background:#F3EDFF}.pintas .p4 svg{stroke:var(--resit)}
#homeKpi .kpi{border-top:4px solid var(--sekolah)!important}
#homeKpi .kpi:nth-child(2){border-top-color:var(--mengaji)!important}
#homeKpi .kpi .kpiBar>i{background:var(--sekolah)}
#homeKpi .kpi:nth-child(2) .kpiBar>i{background:var(--mengaji)}
.karDots button.on{background:var(--pri)}
.homeGrid .card{border-top:4px solid #0D9488!important}
.homeGrid .homeTunggak{border-top-color:var(--tambahan)!important}

/* Menu bawah telefon */
.navBawah .nbFab b{background:linear-gradient(135deg,#0F766E,#0EA5E9)!important;box-shadow:0 8px 18px -6px rgba(13,148,136,.6)!important}
.navBawah button.on{color:var(--pri)}
.helaianItem i{background:var(--blue)}
.helaianItem i svg{stroke:var(--pri)}
#hlSekolah i,#hlHadir i{background:#EAF1FE}#hlSekolah i svg,#hlHadir i svg{stroke:var(--sekolah)}
#hlMengaji i,#hlRekod i,#hlBayarMengaji i{background:#E6F7EF}#hlMengaji i svg,#hlRekod i svg,#hlBayarMengaji i svg{stroke:var(--mengaji)}
#hlTambahan i,#hlRekodTambahan i,#hlBayarTambahan i,#hlBayar i{background:#FFF0E6}#hlTambahan i svg,#hlRekodTambahan i svg,#hlBayarTambahan i svg,#hlBayar i svg{stroke:var(--tambahan)}

/* Jadual: kepala lembut ikut warna modul */
th{background:var(--blue)!important;color:var(--blueT)}
#gt th.hMinggu{background:#F1F5F9!important;color:#94A3B8}
/* Telefon: senarai Pemantauan Mengaji ringkas; kotak rekod dalam helaian */
@media (max-width:800px){
  .mgRow{padding:10px 14px;gap:2px 10px}
  .mgName{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;min-height:0;font-size:15px;text-align:left;color:var(--tx)}
  .mgSub:empty{display:none}
  .mgLast{font-size:13px}
  .mgSince{align-self:center;grid-row:1/span 2!important}
}
.rmBox{border:0;box-shadow:none;padding:0}
.rmBox .gMobileLast{margin:4px 0 10px;color:var(--mut)}
.rmBox .gMobileField{margin-top:8px}
/* Gambar profil (avatar) */
.heroAv{border:0!important;padding:0!important;min-height:0!important;cursor:pointer;overflow:hidden;box-shadow:none!important}
.heroAv.adaGambar,.navFoot .av.adaGambar,.pfAv.adaGambar{background:#fff!important;padding:0}
.heroAv img,.navFoot .av img,.pfAv img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.pfGambar{display:flex;align-items:center;gap:14px;margin:6px 0 12px}
.pfAv{width:64px;height:64px;border-radius:50%!important;padding:0!important;border:2px solid var(--line)!important;background:#CCF0EB!important;color:#0F766E;font-weight:700;font-size:20px;overflow:hidden;flex:0 0 auto;min-height:0}
.payMasuk{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:8px 0 10px;font-size:12.5px;color:var(--mut)}
.payMasuk button{font-size:12.5px;padding:6px 12px}
/* Editor bayaran: medan tidak melimpah ke tepi pada telefon */
.payEditorGrid .fld{min-width:0}
.payEditorGrid input{width:100%;min-width:0;box-sizing:border-box}
@media(max-width:600px){.payEditorGrid{grid-template-columns:1fr!important}.payEditorGrid .fld:last-child{grid-column:auto!important}}
/* Tab besar: Rekod Harian / Laporan Bulanan */
.modeBtns.tabBesar{display:grid!important;grid-template-columns:1fr 1fr!important;gap:6px;width:100%;max-width:560px;padding:5px;border-radius:14px;background:#E9EEF3;margin:14px 0 12px}
.modeBtns.tabBesar button{min-height:48px;font-size:15px;font-weight:700;border-radius:10px;color:#475467;display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 10px}
.modeBtns.tabBesar button.on{background:#fff;color:var(--pri-d);box-shadow:0 2px 6px rgba(15,23,42,.12);border-bottom:3px solid var(--pri)}
@media(max-width:800px){.modeBtns.tabBesar{max-width:none}.modeBtns.tabBesar button{font-size:14px;min-height:46px}}
.modeBtns.tabBesar button{width:auto!important;grid-column:auto!important;margin:0!important}

/* ===================== FASA 8 ===================== */
/* Jalur arkib tahun persekolahan */
.arkibBand{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;background:#FFFAEB;border:1px solid #FEDF89;color:#93370D;border-radius:14px;padding:10px 14px;margin:10px 0;font-weight:600;font-size:14px}
.arkibBand .arkibTeks{flex:1 1 220px}
.arkibBand button{font-size:13px;padding:7px 12px;min-height:0}
/* Kad Mula Tahun Baharu */
.tahunBaharu{border-left:5px solid var(--pri)!important}
.tahunBaharu.besar{background:linear-gradient(135deg,#ECFDF9,#EFF8FF)!important}
.mulaTahun{max-width:560px}
.mtSenarai{display:flex;flex-direction:column;gap:6px;max-height:50vh;overflow:auto;margin-top:8px}
.mtBaris{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 12px;border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.mtBaris small{color:var(--mut)}
.mtBawa{font-size:13px;color:#344054}
/* Tong Sampah */
.tongSenarai{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.tongBaris{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.tongBaris b{display:block}.tongBaris small{color:var(--mut);font-size:12.5px}
.tongAksi{display:flex;gap:6px}.tongAksi button{font-size:13px;padding:6px 12px;min-height:0}
/* Mesej bergerak (kanan ke kiri) */
.ticker{margin:12px 0 0;border-radius:12px;background:linear-gradient(90deg,#FFF7ED,#ECFDF9);border:1px solid #FED7AA;overflow:hidden;white-space:nowrap;position:relative;height:40px;display:flex;align-items:center}
.tickerTrek{display:inline-flex;align-items:center;gap:14px;padding-left:100%;animation:tickerJalan 20s linear infinite;will-change:transform}
.ticker:hover .tickerTrek,.ticker:active .tickerTrek{animation-play-state:paused}
@keyframes tickerJalan{from{transform:translateX(0)}to{transform:translateX(-100%)}}
.tickerItem{font-size:14px;font-weight:600;color:#9A3412;background:none!important;border:0!important;box-shadow:none!important;padding:0!important;min-height:0;white-space:nowrap;cursor:default}
button.tickerItem{cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.tickerSep{color:#FDBA74}
@media (prefers-reduced-motion:reduce){.tickerTrek{animation-duration:60s!important}}
/* Luar talian: Hantar sekarang */
#mode{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
#mode.offline{background:#FFF7ED;border:1px solid #FED7AA;color:#9A3412;border-radius:12px;padding:8px 12px;font-weight:600;position:sticky;top:0;z-index:50}
#mode button{font-size:12.5px;padding:5px 12px;min-height:0}
/* Bantuan */
#bantuanCari{width:100%;margin:6px 0 12px}
.bantuanKat{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--pri-d);margin:14px 0 6px}
.bantuanItem{border:1px solid var(--line);border-radius:12px;margin-bottom:6px;background:var(--card,#fff)}
.bantuanItem summary{cursor:pointer;padding:12px 14px;font-weight:600;list-style:none}
.bantuanItem summary::-webkit-details-marker{display:none}
.bantuanItem summary::after{content:"＋";float:right;color:var(--mut)}
.bantuanItem[open] summary::after{content:"－"}
.bantuanJawapan{padding:0 14px 12px;color:#344054;line-height:1.55;font-size:14px}
.bantuanWa{margin-top:18px;border-radius:14px;padding:16px;background:#ECFDF3;border:1px solid #ABEFC6}
.bantuanWaT{font-weight:700;font-size:15px}
.waBtn{display:inline-flex;align-items:center;gap:6px;margin-top:10px;background:#16A34A;color:#fff!important;text-decoration:none;font-weight:700;border-radius:12px;padding:10px 16px}
.bantuanVersi{margin-top:10px;font-size:12px;color:var(--mut);text-align:right}
.waSokong{display:block;text-align:center;margin-top:6px;color:#15803D!important;font-weight:600;text-decoration:none}
#temaPilih{margin-top:4px}

/* ===================== MOD GELAP ===================== */
html[data-tema="gelap"]{color-scheme:dark;
  --bg:#0B1220;--card:#111A2E;--tx:#E5E7EB;--mut:#94A3B8;--line:#24324A;
  --blue:#13233F;--blueT:#93C5FD;--ring:#1E3A8A}
html[data-tema="gelap"] body{background:var(--bg)!important;color:var(--tx)}
html[data-tema="gelap"] body[data-modul="sekolah"]{--blue:#14264A;--blueT:#93C5FD}
html[data-tema="gelap"] body[data-modul="mengaji"]{--blue:#0F2E25;--blueT:#6EE7B7}
html[data-tema="gelap"] body[data-modul="tambahan"]{--blue:#3A1F0E;--blueT:#FDBA74}
html[data-tema="gelap"] .card,html[data-tema="gelap"] .stCard,html[data-tema="gelap"] .kpi,html[data-tema="gelap"] .pintas,
html[data-tema="gelap"] .appHeader,html[data-tema="gelap"] .tabs,html[data-tema="gelap"] .navBawah,html[data-tema="gelap"] .helaianIsi,
html[data-tema="gelap"] .ovBox,html[data-tema="gelap"] .importBox,html[data-tema="gelap"] .backupBox,html[data-tema="gelap"] .historyBox,
html[data-tema="gelap"] .rptBox,html[data-tema="gelap"] .authCard,html[data-tema="gelap"] .payChip,html[data-tema="gelap"] .tugasRow,
html[data-tema="gelap"] .studentMobileCard,html[data-tema="gelap"] .gMobileCard,html[data-tema="gelap"] .hMobileCard,html[data-tema="gelap"] .mgGroup,
html[data-tema="gelap"] .bantuanItem,html[data-tema="gelap"] .tongBaris,html[data-tema="gelap"] .mtBaris,html[data-tema="gelap"] .admCard,html[data-tema="gelap"] .dirClass{
  background:var(--card)!important;border-color:var(--line)!important;color:var(--tx)}
html[data-tema="gelap"] .authScreen{background:var(--bg)!important}
html[data-tema="gelap"] h1,html[data-tema="gelap"] h2,html[data-tema="gelap"] h3,html[data-tema="gelap"] .pageTitle,html[data-tema="gelap"] .cardTitle,
html[data-tema="gelap"] .kpiV,html[data-tema="gelap"] .stVal,html[data-tema="gelap"] b,html[data-tema="gelap"] label,html[data-tema="gelap"] .navBrand b{color:var(--tx)}
html[data-tema="gelap"] .stat,html[data-tema="gelap"] .reqSub,html[data-tema="gelap"] .kpiL,html[data-tema="gelap"] .kpiS,html[data-tema="gelap"] .stLbl,
html[data-tema="gelap"] small,html[data-tema="gelap"] .note,html[data-tema="gelap"] .rkNota,html[data-tema="gelap"] .payHelp{color:var(--mut)!important}
html[data-tema="gelap"] input,html[data-tema="gelap"] select,html[data-tema="gelap"] textarea{background:#0E1628!important;color:var(--tx)!important;border-color:#2A3A56!important}
html[data-tema="gelap"] button:not(.p):not(.authBtn):not(.heroBtn):not(.heroPill):not(.c):not(.tickerItem):not(.nbFab){background:#16213A;color:var(--tx);border-color:#2A3A56}
html[data-tema="gelap"] button.c{background:#0E1628;border-color:#2A3A56}
html[data-tema="gelap"] .c.H{background:#0F2E25!important;color:#6EE7B7!important;border-color:#166534!important}
html[data-tema="gelap"] .c.T{background:#3B1414!important;color:#FCA5A5!important;border-color:#7F1D1D!important}
html[data-tema="gelap"] th{background:var(--blue)!important;color:var(--blueT)!important}
html[data-tema="gelap"] td{border-color:var(--line)!important;color:var(--tx)}
html[data-tema="gelap"] tbody tr:nth-child(even) td{background:#0E1628!important}
html[data-tema="gelap"] tbody tr:hover td{background:#16213A!important}
html[data-tema="gelap"] .modeBtns,html[data-tema="gelap"] .modeBtns.tabBesar{background:#16213A!important}
html[data-tema="gelap"] .modeBtns button.on,html[data-tema="gelap"] .modeBtns.tabBesar button.on{background:var(--card)!important;color:var(--tx)!important}
html[data-tema="gelap"] .slTab button{background:#16213A;color:var(--tx);border-color:#2A3A56}
html[data-tema="gelap"] .tabs button.on{background:var(--blue)!important;color:var(--blueT)!important}
html[data-tema="gelap"] .lencana{background:#16213A;color:var(--tx);border-color:#2A3A56}
html[data-tema="gelap"] .pintas .pt span,html[data-tema="gelap"] .helaianItem b{color:var(--tx)}
html[data-tema="gelap"] .helaianItem{background:transparent}
html[data-tema="gelap"] .ticker{background:linear-gradient(90deg,#2A1A0B,#0C2A24);border-color:#7C2D12}
html[data-tema="gelap"] .tickerItem{color:#FDBA74}
html[data-tema="gelap"] .arkibBand{background:#2A1F05;border-color:#854D0E;color:#FCD34D}
html[data-tema="gelap"] .bantuanWa{background:#0F2E25;border-color:#166534}
html[data-tema="gelap"] .bantuanJawapan{color:#CBD5E1}
html[data-tema="gelap"] #mode.offline{background:#2A1A0B;border-color:#7C2D12;color:#FDBA74}
html[data-tema="gelap"] .hero{filter:saturate(.9) brightness(.9)}
html[data-tema="gelap"] .tahunBaharu.besar{background:linear-gradient(135deg,#0C2A24,#0F2240)!important}
html[data-tema="gelap"] a{color:#5EEAD4}
html[data-tema="gelap"] .waBtn{color:#fff!important}
.kelasTahun{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--mut);margin-left:auto;margin-right:10px}
.kelasTahun select{min-height:0;padding:5px 8px;font-size:13px}
html[data-tema="gelap"] .tabs button{background:transparent!important;border-color:transparent!important}
html[data-tema="gelap"] .tabs button.on{background:var(--blue)!important}
/* Mod gelap: komponen berwarna cerah */
html[data-tema="gelap"] .mgRow.late{background:#2A1416!important}
html[data-tema="gelap"] .mgName{color:var(--tx)!important}
html[data-tema="gelap"] #langgananLine,html[data-tema="gelap"] .statusLine.warn{background:#2A1F05!important;border-color:#854D0E!important;color:#FCD34D!important}
html[data-tema="gelap"] .payArrSummary.bad,html[data-tema="gelap"] .payArrBox.bad{background:#2A1416!important;border-color:#7F1D1D!important;color:#FCA5A5!important}
html[data-tema="gelap"] .payArrSummary.good,html[data-tema="gelap"] .payArrBox.good{background:#0F2E25!important;border-color:#166534!important;color:#6EE7B7!important}
html[data-tema="gelap"] .payChip.lunas{background:#0F2E25!important;border-color:#166534!important}
html[data-tema="gelap"] .payChip.unpaid{background:#2A1416!important;border-color:#7F1D1D!important}
html[data-tema="gelap"] .lencana.ok{background:#0F2E25;border-color:#166534;color:#6EE7B7}
html[data-tema="gelap"] .lencana.warn{background:#2A1F05;border-color:#854D0E;color:#FCD34D}
html[data-tema="gelap"] .studentSelected td,html[data-tema="gelap"] .studentNameBtn{background:transparent!important;color:var(--tx)!important}
html[data-tema="gelap"] .pintas .pt i{filter:brightness(.92)}

/* ---------- Kotak Ubah Tarikh Masuk ---------- */
.tmBox .helaianPemegang{display:none}
.tmNama{font-weight:700;color:var(--ink,#0f172a);margin:-4px 0 10px}
.tmLbl{font-size:12px;font-weight:600;color:var(--mut);margin:12px 0 6px;text-transform:uppercase;letter-spacing:.03em}
.tmPantas{display:flex;flex-wrap:wrap;gap:8px}
.tmPantas button{flex:1 1 auto;border-radius:999px;padding:8px 12px;min-height:40px}
.tmPantas button.on{background:var(--brand,#0d9488);border-color:var(--brand,#0d9488);color:#fff}
#tmTarikh{width:100%;min-height:46px;font-size:16px}
.tmPapar{font-size:17px;font-weight:700;margin-top:8px}
.tmPra{font-size:13px;color:var(--mut);background:rgba(13,148,136,.08);border-radius:10px;padding:8px 10px;margin-top:8px}
.tmPra:empty{display:none}
.tmPil{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;margin-bottom:6px;cursor:pointer}
.tmPil:has(input:checked){border-color:var(--brand,#0d9488);background:rgba(13,148,136,.08)}
.tmBar{margin-top:14px;justify-content:flex-end;display:flex;gap:8px}
.tmUbahKecil{margin-top:6px;padding:4px 10px;font-size:13px;min-height:0}
@media (max-width:640px){
  .tmOverlay{align-items:flex-end;padding:0}
  .tmBox{border-radius:18px 18px 0 0;max-width:none;padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  .tmBox .helaianPemegang{display:block}
  .tmBar button{flex:1}
}
html[data-tema="gelap"] .tmNama,html[data-tema="gelap"] .tmPapar{color:#e2e8f0}
html[data-tema="gelap"] .tmPra,html[data-tema="gelap"] .tmPil:has(input:checked){background:rgba(45,212,191,.12)}

/* ---------- Had kelas ---------- */
.hadKelasInfo{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:13px;color:var(--mut);margin-top:10px}
.hadChip{padding:3px 10px;border-radius:999px;background:rgba(13,148,136,.1);color:#0f766e;font-weight:600}
.hadChip.penuh{background:#FEE4E2;color:#B42318}
html[data-tema="gelap"] .hadChip{background:rgba(45,212,191,.14);color:#5eead4}
html[data-tema="gelap"] .hadChip.penuh{background:rgba(248,113,113,.16);color:#fca5a5}

/* ---------- Tab modul besar (Kelas Mengaji / Kelas Tambahan) ---------- */
.modeBtns.tabModul{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;max-width:820px;padding:0;background:none!important;border:0;margin:6px 0 16px}
#tbSub.tabModul{grid-template-columns:repeat(2,1fr);max-width:560px}
.modeBtns.tabModul button{min-height:58px;font-size:16px;font-weight:700;border-radius:14px;border:2px solid var(--line,#D0D5DD);background:#fff;color:#344054;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 12px;margin:0!important;width:auto!important;box-shadow:0 1px 3px rgba(15,23,42,.06);transition:transform .12s,box-shadow .12s}
.modeBtns.tabModul button:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(15,23,42,.1)}
.modeBtns.tabModul button.on{background:var(--pri);border-color:var(--pri);color:#fff;box-shadow:0 4px 12px rgba(15,23,42,.18)}
@media(max-width:640px){.modeBtns.tabModul{gap:6px}.modeBtns.tabModul button{font-size:13.5px;min-height:54px;padding:6px 6px;flex-direction:column;gap:2px;line-height:1.2;text-align:center}}
html[data-tema="gelap"] .modeBtns.tabModul{background:none!important}
html[data-tema="gelap"] .modeBtns.tabModul button{background:var(--card,#1E293B)!important;color:#e2e8f0!important;border-color:#334155}
html[data-tema="gelap"] .modeBtns.tabModul button.on{background:var(--pri)!important;border-color:var(--pri);color:#fff!important}

/* Kehadiran Sekolah: tab Rekod Harian / Laporan Bulanan ikut gaya tab modul besar */
body[data-modul="sekolah"] #hModeTabs.tabBesar{gap:10px;max-width:560px;padding:0;background:none!important;border-radius:0;margin:6px 0 16px}
body[data-modul="sekolah"] #hModeTabs.tabBesar button{min-height:58px;font-size:16px;border-radius:14px;border:2px solid var(--line,#D0D5DD);background:#fff;color:#344054;box-shadow:0 1px 3px rgba(15,23,42,.06);transition:transform .12s,box-shadow .12s}
body[data-modul="sekolah"] #hModeTabs.tabBesar button:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(15,23,42,.1)}
body[data-modul="sekolah"] #hModeTabs.tabBesar button.on{background:var(--pri);border-color:var(--pri);color:#fff;border-bottom:2px solid var(--pri);box-shadow:0 4px 12px rgba(15,23,42,.18)}
@media(max-width:640px){body[data-modul="sekolah"] #hModeTabs.tabBesar{gap:6px}body[data-modul="sekolah"] #hModeTabs.tabBesar button{font-size:14px;min-height:54px}}
html[data-tema="gelap"] body[data-modul="sekolah"] #hModeTabs.tabBesar{background:none!important}
html[data-tema="gelap"] body[data-modul="sekolah"] #hModeTabs.tabBesar button{background:var(--card,#1E293B)!important;color:#e2e8f0!important;border-color:#334155}
html[data-tema="gelap"] body[data-modul="sekolah"] #hModeTabs.tabBesar button.on{background:var(--pri)!important;border-color:var(--pri);color:#fff!important}

/* ---------- Banner iklan: klik penuh, gambar poster, label Iklan ---------- */
.ban .banCta{display:inline-block}
.ban.banKlik{cursor:pointer;transition:transform .12s,box-shadow .12s}
.ban.banKlik:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(15,23,42,.18)}
.ban.banKlik:focus-visible{outline:3px solid var(--ring,#99F6E4);outline-offset:2px}
.ban.banGambar{padding:0;min-height:0;aspect-ratio:3/1;background:#E5E7EB}
.ban.banGambar img{width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none}
.banLabel{position:absolute;top:8px;right:8px;z-index:2;background:rgba(15,23,42,.62);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.04em;padding:2px 8px;border-radius:99px}
.banLabelKecil{margin-left:6px;background:#FEF0C7;color:#B54708;font-size:11px;font-weight:700;padding:1px 7px;border-radius:99px}
.banSwImg{width:54px;height:18px;object-fit:cover;border-radius:4px;vertical-align:middle}
.bnGambarPrev{max-width:420px;aspect-ratio:3/1;border-radius:12px;overflow:hidden;border:1px solid var(--line);margin-bottom:8px;background:#F2F4F7}
.bnGambarPrev img{width:100%;height:100%;object-fit:cover;display:block}
.banKlikSel{white-space:nowrap;font-size:12.5px}

/* ---------- Kad Tambah Murid (susunan baharu) ---------- */
#tambahMuridCard .tmTajuk{display:block;font-weight:700;margin:14px 0 6px}
#tambahMuridCard label.tmTajuk{margin-top:4px}
#tambahMuridCard #bulk{width:100%;min-height:110px}
#tambahMuridCard .importBox{margin:14px 0 4px;border:1px dashed var(--ring,#99F6E4);border-radius:12px;background:rgba(13,148,136,.05);padding:12px 14px;box-shadow:none}
.impOk{margin-top:8px;font-size:13px;color:#027A48;font-weight:600}
.impPilihKelas{margin-top:8px}.impSoal{font-size:13px;font-weight:600;margin-bottom:6px}
.impKelasBtns{display:flex;flex-wrap:wrap;gap:6px}.impKelasBtns button{border-radius:999px}
#badd{min-height:46px;font-size:15px;font-weight:700;padding:0 18px}
#badd.kelabu,#badd:disabled{background:#E4E7EC!important;border-color:#E4E7EC!important;color:#667085!important;box-shadow:none}
@media(max-width:640px){#badd{width:100%}}
.ekAmaran:empty{display:none}
#ekKotak input,#ekKotak select{min-height:44px;font-size:15px}
html[data-tema="gelap"] #tambahMuridCard .importBox{background:rgba(45,212,191,.06);border-color:#2b4c56}
html[data-tema="gelap"] .impOk{color:#6ce9a6}
html[data-tema="gelap"] #badd.kelabu,html[data-tema="gelap"] #badd:disabled{background:#1f2a3c!important;border-color:#1f2a3c!important;color:#94a3b8!important}

/* ---------- Kehadiran: ubah tarikh masuk ---------- */
.hMasukBar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.hMasukBar .note{font-size:12.5px}
.hNama{background:none!important;border:0!important;padding:0!important;min-height:0!important;font:inherit;color:inherit;text-align:left;cursor:pointer;box-shadow:none!important}
.hNama:hover:not(:disabled){color:var(--pri);text-decoration:underline}
.hMasukKecil{display:block;font-size:11px;color:var(--mut);font-weight:500}
.hmSenarai{display:flex;flex-direction:column;gap:6px;max-height:55vh;overflow:auto}
.hmMurid{display:flex;justify-content:space-between;align-items:center;gap:10px;text-align:left;padding:10px 12px;border-radius:10px;min-height:46px}
.hmMurid small{color:var(--mut);white-space:nowrap}

/* ---------- Butang Kembali (menyerlah, seragam semua modul) ---------- */
.btnKembali{background:var(--pri)!important;border-color:var(--pri)!important;color:#fff!important;font-weight:700!important;border-radius:999px!important;padding:8px 16px!important;box-shadow:0 3px 10px rgba(15,23,42,.15);white-space:nowrap}
.btnKembali:hover{filter:brightness(1.08)}
.btnKembali:focus-visible{outline:3px solid var(--ring,#99F6E4);outline-offset:2px}

/* ---------- Medan Ayat (Al-Quran) ---------- */
.mkAy{display:flex;gap:6px;align-items:center}
.mkAy input:first-child{flex:1;min-width:0}
.gAyat{width:68px!important;flex:none;text-align:center}

/* ---------- Edit maklumat murid (semua modul) ---------- */
.emBox{max-width:620px}
.emNama{width:100%;min-height:44px;font-size:15px;font-weight:600}
.emJadual{margin-top:10px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.emBaris{display:grid;grid-template-columns:180px minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px 10px;border-top:1px solid var(--line)}
.emBaris:first-child{border-top:0}
.emBaris.off{background:rgba(148,163,184,.08);color:var(--mut)}
.emBaris.off .emNota{grid-column:2/-1}
.emModul{display:flex;align-items:center;gap:8px;font-weight:700;cursor:pointer}
.emModul input{width:20px;height:20px}
.emBaris[data-modul="sekolah"] .emModul input{accent-color:#2563EB}
.emBaris[data-modul="mengaji"] .emModul input{accent-color:#059669}
.emBaris[data-modul="tambahan"] .emModul input{accent-color:#EA580C}
.emKelas{min-height:40px;width:100%}
.emTarikh{white-space:nowrap;font-weight:700;min-height:40px}
.emNota{font-size:12.5px;color:var(--mut)}
.emBaris.on .emNota{grid-column:1/-1;color:#B54708}
.emPetua{font-size:12px;color:var(--mut);margin-top:8px}
.chipModul{display:inline-block;background:var(--blue,#EAF1FE);color:var(--blueT,#1D4ED8);border-radius:999px;padding:4px 12px;font-weight:700;font-size:13px}
@media(max-width:640px){
  .emBaris{grid-template-columns:minmax(0,1fr) auto}
  .emBaris .emModul{grid-column:1/-1}
  .emBaris.off .emNota{grid-column:1/-1}
}

/* ===================== PUSAT PEMILIK ===================== */
body.modePemilik #appMain,body.modePemilik .tabs,body.modePemilik .navBawah,body.modePemilik #authScreen{display:none!important}
.pp{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100vh;background:#F2F5F8}
.ppSisi{background:#0F172A;color:#CBD5E1;padding:18px 12px;position:sticky;top:0;height:100vh;overflow:auto}
.ppBrand{display:flex;gap:10px;align-items:center;color:#fff;margin:0 6px 18px}
.ppBrand b{display:block;font-size:15px}.ppBrand small{display:block;color:#94A3B8;font-size:11px}
.ppLogo{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#0D9488,#14B8A6);display:grid;place-items:center;font-size:18px}
.ppNav{display:flex;flex-direction:column;gap:2px}
.ppKump{display:block;color:#64748B;font-weight:700;font-size:11px;letter-spacing:.06em;margin:14px 10px 6px}
.ppNavBtn{display:flex!important;gap:10px;align-items:center;justify-content:flex-start;width:100%;text-align:left;background:none!important;border:0!important;color:#CBD5E1!important;padding:10px 12px!important;border-radius:10px!important;font-weight:600;min-height:0!important;box-shadow:none!important}
.ppNavBtn:hover{background:#1E293B!important;color:#fff!important}
.ppNavBtn.on{background:#1E293B!important;color:#fff!important;box-shadow:inset 3px 0 0 #14B8A6!important}
.ppKeluar{margin-top:16px}
.ppUtama{padding:22px 26px;min-width:0}
.ppAtas{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}.ppAtas h1{margin:0;font-size:22px;flex:1}
.ppUser{background:#fff;border:1px solid #E4E7EC;border-radius:99px;padding:6px 12px;font-size:13px}
.ppKad{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:14px}
.ppK{background:#fff;border:1px solid #EAECF0;border-radius:14px;padding:14px}
.ppK span{font-size:12px;color:#667085;font-weight:600;display:block}.ppK b{display:block;font-size:24px;margin-top:4px}
.ppK i{font-style:normal;font-size:12px;color:#12B76A;font-weight:600}.ppK.h b{color:#0F766E}.ppK.m b{color:#B42318}.ppK.m i{color:#B42318}
.ppGrid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:14px;align-items:start}
.ppCard{margin:0 0 14px!important}
.ppMuted{color:#98A2B3;font-size:12px}
.ppSt{border-radius:99px;padding:2px 9px;font-size:11.5px;font-weight:700;white-space:nowrap}
.ppSt.aktif{background:#D1FADF;color:#027A48}.ppSt.percubaan{background:#E0F2FE;color:#026AA2}.ppSt.amaran{background:#FEF0C7;color:#B54708}.ppSt.tamat{background:#FEE4E2;color:#B42318}
.ppWa,.ppWaPenuh{display:inline-block;background:#25D366;color:#fff!important;border-radius:8px;padding:6px 12px;font-weight:700;font-size:12.5px;text-decoration:none;white-space:nowrap}
.ppBars{display:flex;align-items:flex-end;gap:12px;height:190px;border-bottom:1px solid #EAECF0;padding-top:8px}
.ppBar{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;color:#667085}
.ppBar div{width:100%;border-radius:6px 6px 0 0;background:#14B8A6}.ppBar.kini div{background:#99F6E4}
.ppBar em{font-style:normal;font-size:10.5px;color:#344054;font-weight:600}.ppBar small{font-size:10px;color:#98A2B3}
.ppSplit{display:flex;height:12px;border-radius:99px;overflow:hidden;margin:6px 0 10px;background:#F2F4F7}
.ppLeg{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:#667085}.ppLeg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.ppNota{font-size:12.5px;color:#667085;margin-top:10px}
.ppAkt{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-top:1px solid #F2F4F7;font-size:13px}.ppAkt small{color:#98A2B3;white-space:nowrap}
.ppPrivasi{background:#F0FDFA!important;border-color:#99F6E4!important;color:#115E59;font-size:13px}
.ppBarAtas{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
#ppCari{width:100%;min-height:42px}
.ppChips{display:flex;flex-wrap:wrap;gap:6px}
.ppChip{border-radius:99px!important;padding:6px 12px!important;font-size:13px;min-height:0!important}
.ppChip.on{background:#0D9488!important;color:#fff!important;border-color:#0D9488!important}
.ppPelWrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:start}
.ppBaris{cursor:pointer}.ppBaris:hover td{background:#F9FAFB}.ppBaris.sel td{background:#F0FDFA}
.ppPanel{width:360px;background:#fff;border:1px solid #EAECF0;border-radius:14px;padding:16px;position:sticky;top:16px;box-shadow:0 8px 24px rgba(15,23,42,.08)}
.ppTutup{float:right;min-height:0!important;padding:4px 10px!important}
.ppHd{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.ppAv{width:48px;height:48px;border-radius:50%;background:#CCFBF1;color:#0F766E;display:grid;place-items:center;font-weight:800;flex:none}
.ppSek{border-top:1px solid #F2F4F7;padding:10px 0}.ppSek h4{margin:0 0 6px;font-size:11.5px;color:#667085;text-transform:uppercase;letter-spacing:.04em}
.ppRow{display:flex;justify-content:space-between;gap:10px;padding:3px 0;font-size:13px}.ppRow span{color:#667085}
.ppBayar.berjaya{color:#027A48}.ppBayar.gagal{color:#B42318}.ppBayar.menunggu{color:#B54708}
.ppMini{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.ppMini div{background:#F9FAFB;border-radius:10px;padding:8px;text-align:center;font-size:11px;color:#667085}.ppMini b{display:block;font-size:15px;color:#101828}
.ppActs{display:grid;grid-template-columns:1fr 1fr;gap:8px}.ppActs .ppWaPenuh{grid-column:1/-1;text-align:center;padding:9px}
.ppKarGrid{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.ppFld{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:#667085}.ppFld input,.ppFld select{min-height:40px;min-width:180px}
@media(max-width:1200px){.ppKad{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){
  .pp{grid-template-columns:1fr}
  .ppSisi{position:sticky;top:0;height:auto;z-index:20;padding:10px 10px 8px}
  .ppBrand{margin:0 4px 8px}
  .ppNav{flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:4px;scrollbar-width:none}
  .ppKump{display:none}
  .ppNavBtn{width:auto;white-space:nowrap;padding:8px 12px!important;background:#1E293B!important}
  .ppNavBtn.on{background:#0D9488!important;box-shadow:none!important}
  .ppKeluar{margin-top:0}
  .ppUtama{padding:14px}
  .ppKad{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ppGrid,.ppPelWrap{grid-template-columns:1fr}
  .ppPanel{width:auto;position:static}
}
html[data-tema="gelap"] .pp{background:#0B1220}
html[data-tema="gelap"] .ppK,html[data-tema="gelap"] .ppPanel,html[data-tema="gelap"] .ppUser{background:var(--card,#111A2E);border-color:#22304a;color:#e2e8f0}
html[data-tema="gelap"] .ppK b,html[data-tema="gelap"] .ppMini b{color:#e2e8f0}
html[data-tema="gelap"] .ppMini div{background:#16213A}
html[data-tema="gelap"] .ppPrivasi{background:rgba(45,212,191,.08)!important;color:#99f6e4}

/* ---------- Langganan: pelan Guru & Penyelaras ---------- */
.lgPelan{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))!important;gap:12px!important}
.lgKad2{padding:16px!important;border-width:2px!important;gap:10px!important}
.lgKad2.lgSyor{border-color:#0D9488!important;box-shadow:0 6px 18px rgba(13,148,136,.15);position:relative}
.lgKad2.lgSyor::before{content:"Untuk penyelaras / ramai kelas";position:absolute;top:-11px;left:14px;background:#0D9488;color:#fff;font-size:11px;font-weight:700;border-radius:99px;padding:2px 10px}
.lgNama{font-size:18px;font-weight:800}
.lgCiri{margin:0;padding-left:18px;font-size:13px;color:var(--mut);line-height:1.6}
.lgBayarBtns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:auto}
.lgBtn{display:flex!important;flex-direction:column;align-items:center;gap:0;padding:8px!important;min-height:54px}
.lgBtn b{font-size:17px}.lgBtn span{font-size:12px;opacity:.9}
html[data-tema="gelap"] .lgKad{background:var(--card,#111A2E)}
.pkSenarai{margin:4px 0 10px;padding-left:20px;line-height:1.7}
.pkFaham{margin-top:6px}
.pkPadam{background:#B42318!important;border-color:#B42318!important;color:#fff!important;font-weight:700}
.pkPadam:disabled{background:#F2F4F7!important;border-color:#E4E7EC!important;color:#98A2B3!important}

/* ---------- Mesej WhatsApp: ubah & pilihan kelas ---------- */
.waBtns{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.waUbahBtn{font-weight:700}
.waKelas{margin:6px 0 4px}
.waKelasLbl{font-size:12.5px;color:var(--mut);font-weight:600;margin-bottom:6px}
.waKelasChips{display:flex;flex-wrap:wrap;gap:6px}
.waChip{border-radius:999px!important;border:2px solid var(--line)!important;padding:6px 12px!important;font-weight:700;font-size:12.5px;min-height:0!important;background:#fff}
.waChip.on{background:var(--pri)!important;border-color:var(--pri)!important;color:#fff!important}
.waBox{max-width:560px}
.waBox textarea,.waBox input[type=text]{width:100%;font:inherit;font-size:14px;padding:9px 11px;border-radius:10px}
.waNota{font-size:11.5px;color:var(--mut);margin-top:4px}
.waAuto{border:1px dashed var(--line);border-radius:10px;padding:8px 11px;color:var(--mut);font-size:12.5px;background:rgba(148,163,184,.08);margin-top:10px}
.waPratonton{margin-top:10px}.waPratonton summary{font-size:12.5px;font-weight:700;color:var(--mut);cursor:pointer}
.waPv{white-space:pre-wrap;font:inherit;font-size:12.5px;background:#F6FEF9;border:1px solid #D1FADF;border-radius:10px;padding:10px;max-height:34vh;overflow:auto;margin:6px 0 0}
.waBar{justify-content:space-between!important}
.waReset{color:#B42318!important;border-color:#FDA29B!important}
html[data-tema="gelap"] .waChip{background:var(--card,#111A2E)}
html[data-tema="gelap"] .waPv{background:rgba(16,185,129,.06);border-color:#1f4d3d}

/* ---------- Pautan / QR guru bertugas ---------- */
.phButang{font-weight:700}
.phBox{max-width:520px}
.phBox select{width:100%;min-height:42px}
.phHasil{margin-top:12px;text-align:center}
.phQR{display:inline-block;background:#fff;padding:8px;border-radius:12px;border:1px solid var(--line)}
.phQR svg{width:200px;height:200px;display:block}
.phUrl{font-size:11.5px;color:var(--mut);word-break:break-all;margin:6px 0}
.phNota{font-size:12px;color:var(--mut)}
.phBtns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:8px}
.phBtns a,.phBtns button{display:inline-flex;align-items:center;border-radius:10px;padding:8px 12px;font-weight:700;font-size:13px;text-decoration:none;border:1px solid var(--line);color:inherit;background:#fff}
.phBtns .phWa{background:#25D366;color:#fff!important;border-color:#25D366}
.phAktif{display:flex;flex-direction:column;gap:6px}
.phRow{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12.5px;border:1px solid var(--line);border-radius:10px;padding:6px 8px}
.phRowBtns{display:flex;gap:6px;flex:none}.phRowBtns button{min-height:0!important;padding:4px 10px!important;font-size:12px}
.phDitanda{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.phLencana{background:#FEF0C7;color:#B54708;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700}
html[data-tema="gelap"] .phBtns a,html[data-tema="gelap"] .phBtns button{background:var(--card,#111A2E)}

/* QR semua kelas (v2.1.1) */
.phSemuaBtn{width:100%;margin-top:8px;min-height:44px;border-radius:10px;border:2px solid var(--pri);background:transparent;color:var(--pri);font-weight:800}
.phLabel{font-weight:800;font-size:17px;text-align:center;margin-top:4px}
.phLabelTarikh{font-size:12.5px;color:var(--mut,#667085);text-align:center}
.phSemuaBox{max-width:760px}
.phGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin-top:12px}
.phKadQR{border:1px dashed var(--line,#D0D5DD);border-radius:12px;padding:10px;text-align:center;background:#fff;color:#101828}
.phKadQR .phQR{border:0;padding:4px}
.phKadQR .phQR svg{width:140px;height:140px}
.phKadQR .phLabelTarikh{color:#475467}
.phKadQR .phDl{display:inline-block;margin-top:6px;font-size:13px}

/* Pindah kelas (v2.1.2) */
.dirAct{white-space:nowrap}.dirAct button+button{margin-left:6px}
.dirPindah{color:var(--pri)!important;border-color:var(--pri)!important}
.pdKepala{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.pdSemua{font-size:13px;padding:4px 10px;min-height:32px}
.pdSenarai{max-height:42vh;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:4px 10px;margin-top:4px}
.pdMurid{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-weight:600;cursor:pointer}
.pdMurid:first-child{border-top:0}.pdMurid input{width:20px;height:20px;flex:none}
.pdNota{font-size:12.5px;color:var(--mut,#667085);margin-top:10px}
@media(max-width:640px){.dirAct button+button{margin-left:0;margin-top:6px}.dirAct{white-space:normal}.dirAct button{display:block;width:100%}}

/* Padam rekod mengaji sehari (v2.1.3) */
.rmPadam{color:#B42318!important;border-color:#FDA29B!important;background:#FEF3F2!important;font-weight:700}
html[data-tema="gelap"] .rmPadam{background:#3A1A1A!important;color:#FDA29B!important;border-color:#7A271A!important}
.rmBox .bar{flex-wrap:wrap;gap:8px}

/* Buang nombor nama (v2.1.4) */
.bnAmaran{background:#FFFAEB;border:1px solid #FEC84B;border-radius:12px;padding:10px 12px;margin:8px 0 12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}
.bnAmaran .bnTeks{font-size:13.5px;color:#93370D;flex:1 1 220px}
html[data-tema="gelap"] .bnAmaran{background:#2A2110;border-color:#7A5A12}
html[data-tema="gelap"] .bnAmaran .bnTeks{color:#FEC84B}
.bnSenarai{max-height:46vh;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:4px 10px;margin-top:8px}
.bnBaris{display:grid;grid-template-columns:1fr auto 1fr;gap:6px 8px;align-items:center;padding:7px 0;border-top:1px solid var(--line);font-size:13.5px}
.bnBaris:first-child{border-top:0}.bnLama{color:var(--mut,#667085);text-decoration:line-through}.bnAnak{color:var(--mut)}
.bnKelas{grid-column:1/-1;font-size:11.5px;color:var(--mut,#667085);margin-top:-4px}

/* ===== Interaktif (v2.2) ===== */
@keyframes lantun{0%{transform:scale(1)}35%{transform:scale(1.18)}65%{transform:scale(.94)}100%{transform:scale(1)}}
.lantun{animation:lantun .32s ease-out}
.hMobileStatus.lantun{animation-duration:.36s}
#gt button.c,.hMobileStatus{transition:background-color .2s,color .2s,border-color .2s}
@media (prefers-reduced-motion:reduce){.lantun{animation:none}}
/* Toast Buat asal */
.toastBox.adaUndo{pointer-events:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 8px 16px;width:min(92vw,440px);max-width:none;text-align:left}
.toastBox.adaUndo span{flex:1;line-height:1.35}
.toastBox .toastUndo{background:transparent!important;color:#5EEAD4!important;border:1px solid rgba(94,234,212,.5)!important;border-radius:10px;font-weight:800;padding:6px 12px;min-height:36px;white-space:nowrap;cursor:pointer}
/* Kiraan hidup */
.hKira{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--card,#fff);border:1px solid var(--line);border-radius:12px;padding:8px 12px 10px;margin:8px 0;box-shadow:0 2px 8px rgba(15,23,42,.08);overflow:hidden;font-weight:800;font-size:14.5px}
.hKira span{padding:3px 10px;border-radius:999px}
.hKira .hkH{background:#D1FADF;color:#027A48}.hKira .hkT{background:#FEE4E2;color:#B42318}.hKira .hkB{background:#F2F4F7;color:#475467}.hKira .hkB.siap{background:#D1FADF;color:#027A48}
.hKira .hkJ{margin-left:auto;color:var(--mut,#667085);font-weight:600;font-size:12px}
.hKira .hkBar{position:absolute;left:0;bottom:0;height:3px;background:var(--pri);transition:width .3s}
html[data-tema="gelap"] .hKira{background:#111A2E}
html[data-tema="gelap"] .hKira .hkB{background:#1E293B;color:#CBD5E1}
/* Leret kad kehadiran */
.hMobileList{overflow-x:hidden}
.hMobileCard{position:relative;transition:transform .2s ease-out,background-color .15s;touch-action:pan-y}
.hMobileCard.seret{transition:none}
.hMobileCard.leretH{background:#D1FADF!important;border-color:#32D583!important}
.hMobileCard.leretT{background:#FEE4E2!important;border-color:#F97066!important}
html[data-tema="gelap"] .hMobileCard.leretH{background:#0B3B2A!important}
html[data-tema="gelap"] .hMobileCard.leretT{background:#3A1A1A!important}
.hLeretTip{display:none;font-size:12px;color:var(--mut,#667085);margin:4px 2px 2px}
@media(max-width:768px){.hLeretTip{display:block}body:has(#hMobileList.rptHide) .hLeretTip{display:none}}
/* Gambar profil lebih besar di Utama */
.heroR1{align-items:flex-start!important}
.heroAv{width:76px!important;height:76px!important;font-size:24px!important;flex:none;border:3px solid rgba(255,255,255,.85)!important;box-shadow:0 6px 18px rgba(15,23,42,.25)!important;transition:transform .15s}
.heroAv:active{transform:scale(.95)}
@media(max-width:640px){.heroAv{width:72px!important;height:72px!important;font-size:22px!important}}

/* ===== Kemaskan (v2.3) ===== */
.pageSub{margin:-6px 0 12px 16px;font-size:13.5px;color:var(--mut,#667085);font-weight:600}
body.paneBayar #ctrlCard{display:none!important}
#senaraiMuridLama,#studentDetailPane{display:none!important}
/* Serah Tugas Kehadiran: tulisan besar + kecil */
.phButang{display:inline-flex!important;flex-direction:column;align-items:flex-start;line-height:1.2;text-align:left;padding:7px 14px!important}
.phButang .phBesar{font-weight:800}
.phButang .phKecil{font-size:11.5px;font-weight:500;color:var(--mut,#667085);margin-top:2px}
/* Kotak Edit: tindakan lain */
.emLain{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:12px 0 4px;background:var(--bg,#F8FAFC)}
.emLainTajuk{font-size:12px;font-weight:800;color:var(--mut,#667085);margin-bottom:8px;text-transform:uppercase;letter-spacing:.02em}
.emLainBtns{display:flex;gap:8px}
.emLainBtns button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:48px;padding:6px 8px;font-weight:700}
.emLainBtns button small{font-size:11.5px;font-weight:500;color:var(--mut,#667085)}
.emLainBtns .emPadam{color:#B42318!important;border-color:#FDA29B!important}
html[data-tema="gelap"] .emLain{background:#0F172A}
/* Senarai Penuh Murid di telefon: padat, tanpa lajur Wali */
@media(max-width:800px){
  #dirList table{min-width:0!important;width:100%!important;table-layout:fixed}
  #dirList th:nth-child(3),#dirList td:nth-child(3){display:none}
  #dirList th:nth-child(1),#dirList td:nth-child(1){width:30px;padding-left:6px;padding-right:2px}
  #dirList th:nth-child(4),#dirList td:nth-child(4){width:146px;text-align:right;padding-right:4px;padding-left:0}
  #dirList td:nth-child(2){white-space:normal;word-break:break-word;font-size:13px}
  #dirList .dirAct{white-space:nowrap!important}
  #dirList .dirAct button{display:inline-block!important;width:auto!important;margin:0 0 0 3px!important;padding:5px 7px!important;font-size:12px;min-height:34px}
}
/* Kelas Mengaji: tiada tab Rekod Sehari / Rekod Terakhir */
#gRecordPane > .modeBtns{display:none!important}
@media(max-width:800px){
  #gRecordPane > .mobileTip,#gMobileList{display:none!important}
}
.gTarikhWa{display:flex;align-items:center;gap:6px;margin:8px 0 6px!important;padding:0!important;border:0!important;box-shadow:none!important;background:none!important}
.gTarikhWa select{flex:1;min-width:0}
/* Pemantauan: butang ↻ bulatan kecil */
#admMgSum .cardHead{display:flex;align-items:center;justify-content:space-between;gap:8px}
#admMgSum .cardHead .modeBtns{display:block!important;width:auto!important;background:none!important;padding:0!important;margin:0!important;border:0!important;box-shadow:none!important}
#admMgSum .cardHead .modeBtns button{width:36px!important;min-width:36px;height:36px;min-height:36px!important;border-radius:50%!important;padding:0!important;font-size:16px;margin:0!important}

/* ===== Modul Sijil (v2.4) ===== */
#s8{--pri:#7C3AED;--pri-d:#6D28D9}
body.diSijil #ctrlCard{display:none!important}
.sjTabs{grid-template-columns:repeat(3,1fr)!important}
.sjAmaran{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;background:#F5F3FF;border:1px solid #DDD6FE;color:#5B21B6;border-radius:12px;padding:10px 12px;margin:0 0 12px;font-size:13.5px;font-weight:600}
.sjAmaran button{min-height:36px}
html[data-tema="gelap"] .sjAmaran{background:#1E1537;border-color:#4C1D95;color:#DDD6FE}
.sjChips{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 10px}
.sjChips button{border-radius:999px!important;padding:6px 14px!important;min-height:36px;font-weight:600}
.sjChips button.on{background:#EDE9FE!important;border-color:#7C3AED!important;color:#5B21B6!important}
html[data-tema="gelap"] .sjChips button.on{background:#2E1065!important;color:#DDD6FE!important}
.sjBtnP,.sjBtnO{display:block;width:100%;margin-top:8px;min-height:44px;font-weight:700}
.sjBtnO{background:#fff;border:1.5px solid #7C3AED!important;color:#5B21B6!important}
html[data-tema="gelap"] .sjBtnO{background:transparent!important;color:#DDD6FE!important}
.sjNota{font-size:12.5px;color:var(--mut,#667085);margin-top:6px;line-height:1.45}
.sjLbl,.sjMedan label{display:block;font-size:12.5px;font-weight:700;color:var(--mut,#667085);margin:10px 0 4px}
.sjMedan input,.sjMedan textarea,#sjAyat,#sjSmKelas{width:100%;box-sizing:border-box}
#sjSmKelas{margin-bottom:8px}
.sjSmSenarai{max-height:38vh;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:2px 10px}
.sjSmMurid{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-weight:600;font-size:13.5px;cursor:pointer}
.sjSmMurid:first-child{border-top:0}.sjSmMurid input{width:19px;height:19px;flex:none}
.sjSalah{background:#FEF3F2;color:#B42318;border:1px solid #FECDCA;border-radius:10px;padding:8px 10px;font-size:13px;font-weight:600;margin-bottom:8px}
.sjPenerima{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.sjBaris{display:grid;grid-template-columns:24px 1fr 150px 32px;gap:8px;align-items:center;padding:8px 10px;border-top:1px solid var(--line)}
.sjBaris:first-child{border-top:0}
.sjBaris input[type=checkbox]{width:19px;height:19px}
.sjBaris input[type=text]{width:100%;box-sizing:border-box;min-height:38px;font-size:14px}
.sjBaris .sjSub{font-size:11.5px;color:var(--mut,#667085);margin-top:2px}
.sjBaris.salah .sjIC{border-color:#F04438!important;background:#FEF3F2;color:#B42318}
.sjBuang{width:32px;height:32px;min-height:32px!important;padding:0!important;border-radius:50%!important;color:#B42318!important}
@media(max-width:640px){.sjBaris{grid-template-columns:22px 1fr 32px}.sjBaris .sjIC{grid-column:2/3;grid-row:2}}
.sjBtns{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.sjKunciIC{font-size:12px;background:#ECFDF3;color:#027A48;border-radius:10px;padding:8px 10px;margin-top:10px;font-weight:600}
html[data-tema="gelap"] .sjKunciIC{background:#053321;color:#A6F4C5}
.sjTemplat{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.sjT{height:62px;border-radius:10px!important;border:2px solid var(--line)!important;position:relative;overflow:hidden;padding:0!important;display:flex;align-items:flex-end;justify-content:center}
.sjT span{background:rgba(255,255,255,.92);color:#344054;font-size:11.5px;font-weight:700;padding:1px 6px;border-radius:6px;margin-bottom:4px}
.sjT.on{border-color:#7C3AED!important;box-shadow:0 0 0 3px #DDD6FE}
.sjT-islamik{background:repeating-linear-gradient(45deg,#0F5132 0 6px,#D4A537 6px 8px)!important}
.sjT-emas{background:#FFFDF7!important;outline:4px double #B8892B;outline-offset:-8px}
.sjT-moden{background:linear-gradient(90deg,#0F766E 30%,#F59E0B 30% 34%,#fff 34%)!important}
.sjT-ringkas{background:linear-gradient(#1D4ED8 0 9px,#fff 9px calc(100% - 9px),#1D4ED8 calc(100% - 9px))!important}
.sjWarna{display:flex;gap:10px;flex-wrap:wrap}
.sjWarna button{width:36px;height:36px;min-height:36px!important;border-radius:50%!important;padding:0!important;border:2px solid #fff!important;box-shadow:0 0 0 1px var(--line)}
.sjWarna button.on{box-shadow:0 0 0 3px #101828}
.sjUp{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sjUpKotak{border:1.5px dashed #98A2B3;border-radius:12px;padding:10px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:13px}
.sjUpKotak.ada{border-style:solid;border-color:#7C3AED;background:#FAF5FF}
html[data-tema="gelap"] .sjUpKotak.ada{background:#1E1537}
.sjUpKotak img{max-width:100%;max-height:64px;object-fit:contain;background:repeating-conic-gradient(#F2F4F7 0 25%,#fff 0 50%) 0 0/12px 12px;border-radius:6px}
.sjUpIkon{font-size:24px;line-height:64px}
.sjUpBtn{display:flex;gap:6px}.sjUpBtn button{min-height:32px;padding:4px 10px!important;font-size:12.5px}
.sjTtd{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
@media(max-width:640px){.sjTtd{grid-template-columns:1fr}}
.sjPk{margin-top:4px}
.sjPkCv{width:100%;height:auto;display:block;border-radius:8px;box-shadow:0 4px 14px rgba(15,23,42,.15);background:#fff}
.sjPkNav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:8px}
.sjPkNav button{width:40px;min-height:36px!important;padding:0!important}
.sjPkNav span{font-weight:700;font-size:13.5px;min-width:60px;text-align:center}
.sjRingkas{font-weight:700;margin-bottom:10px}
.sjProg{font-size:13px;font-weight:600;color:#5B21B6;margin-top:8px;min-height:18px}
/* Sijil v2.4.2 */
.sjFormat{background:#FFFAEB;border:2px solid #F79009;border-radius:12px;padding:10px 12px;margin-top:10px;color:#7A2E0E;font-size:13px;line-height:1.45}
.sjFormat b{display:block;font-size:14px;margin-bottom:4px;color:#B54708}
.sjFormat ol{margin:0;padding-left:20px}.sjFormat li{margin:2px 0}
html[data-tema="gelap"] .sjFormat{background:#2A1A06;color:#FEDF89;border-color:#B54708}
.sjSubIn{display:grid;grid-template-columns:1fr 1.4fr;gap:6px;margin-top:6px}
.sjSubIn input{min-height:34px!important;font-size:12.5px!important;padding:4px 8px!important;width:100%;box-sizing:border-box}
.sjSaiz{display:flex;flex-direction:column;align-items:stretch;width:100%;font-size:12px;font-weight:700;color:var(--mut,#667085);margin-top:4px}
.sjSaiz input{width:100%;accent-color:#7C3AED}
.sjTtd .sjPenuh{grid-column:1/-1}