:root{--bg:#F7F9FB;--card:#fff;--tx:#263238;--mut:#6B7280;--line:#E5EAF0;--blue:#DCEAF7;--blueT:#315B78;--ok:#DDEDE5;--okT:#3D6B55;--no:#F8E2D8;--noT:#9A5B48;--pri:#3E6E94;--pt:#fff;--sh:0 2px 8px rgba(30,50,70,.06);--r:12px;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);color-scheme:light}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tx);font:14px/1.5 Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;overflow-x:hidden}
main{max-width:1100px;margin:0 auto;padding:12px 14px 24px}
h1{font-size:18px;margin:0;color:var(--blueT);letter-spacing:.02em;line-height:1.25}
.sub{color:var(--blueT);opacity:.8;font-size:12px;font-weight:600;letter-spacing:.06em}
.pageTitle{font-size:22px;font-weight:700;margin:18px 0 12px;letter-spacing:.03em}
.secHead{font-size:18px;font-weight:700;margin:0 0 10px}
.cardTitle{font-size:16px;font-weight:700;margin:0 0 10px}
input,select,textarea,button{font:inherit;color:inherit}
input,select,textarea{background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px 10px;min-height:38px}
input:focus,select:focus,textarea:focus,button:focus-visible{outline:2px solid #9CC0E0;outline-offset:1px}
select{max-width:100%}
input[type=checkbox]{min-height:0;width:16px;height:16px;accent-color:var(--pri)}
button{border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 14px;font-weight:600;cursor:pointer;color:var(--tx);min-height:38px}
button:hover:not(:disabled){background:#F1F6FB}
button:disabled{opacity:.55;cursor:default}
button.p{background:var(--pri);color:var(--pt);border-color:var(--pri)}
button.p:hover:not(:disabled){background:#355F82}
#sl button,.studentMobileDelete{background:var(--no);color:var(--noT);border-color:#EFCDBF}
.card,.importBox,.backupBox,.historyBox,.rptBox{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:14px;margin:12px 0}
.appHeader{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;background:var(--blue);border-radius:var(--r);padding:10px 14px}
.adminBar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.adminUser{font-size:12px;color:var(--blueT);overflow-wrap:anywhere}
.logoutBtn{font-size:12px;padding:5px 10px;min-height:32px}
.statusLine{font-size:12px;color:var(--mut);margin:6px 2px 0}
.tabs{display:flex;gap:8px;margin:12px 0 0}
.tabs button{flex:1;padding:10px 12px;border-radius:12px;color:var(--mut);background:#fff}
.tabs button.on{background:var(--blue);color:var(--blueT);border-color:#C5DAEE}
.sec{display:none}.sec.on{display:block}
.ctrl{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.fld label{display:block;font-size:13px;color:var(--mut);margin-bottom:4px;font-weight:500}
.fld select{width:100%}
.ctrlBtns{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap}
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:0 0 12px}
.stCard{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:10px 14px;border-top:3px solid var(--line)}
.stCard.accB{border-top-color:#BBD4EC}.stCard.accG{border-top-color:#BFDCCD}.stCard.accP{border-top-color:#EFC9B9}
.stLbl{font-size:12px;color:var(--mut)}
.stVal{font-size:24px;font-weight:700;line-height:1.2;margin-top:2px}
.modeBtns{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.modeBtns button{min-height:34px;padding:6px 12px;font-size:13px;color:var(--mut)}
.modeBtns button.on{background:var(--blue);color:var(--blueT);border-color:#C5DAEE}
.bar{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0;align-items:center}
.wrap{overflow:auto;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);max-height:72vh;max-width:100%}
table{border-collapse:collapse;width:100%}
th,td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:center;white-space:nowrap}
th{font-size:12px;font-weight:600;color:var(--blueT);background:var(--blue);position:sticky;top:0;z-index:2}
tbody tr:hover td{background:#FAFCFE}
#gt td:first-child,#gt th:first-child{text-align:left;position:sticky;left:0;background:#fff;z-index:1;min-width:150px}
#gt th:first-child{background:var(--blue);z-index:3}
#sl td:nth-child(2),#sl th:nth-child(2),.regDesktop td:first-child,.regDesktop th:first-child,table.last td:first-child{text-align:left}
th.h{cursor:pointer}th.h:hover{background:#CFE2F4}
.c{width:30px;height:28px;padding:0;border-radius:6px;font-weight:700;min-height:0;background:#fff}
.c.H{background:var(--ok);color:var(--okT);border-color:#C7DFD3}.c.T{background:var(--no);color:var(--noT);border-color:#EFCDBF}
.g td{text-align:left}
td input[type=text]{width:100%;min-width:140px}
td select{min-width:150px}
textarea{width:100%;min-height:90px}
.stat{font-size:13px;color:var(--mut)}
.note{font-size:12px;color:var(--mut);margin-top:16px}
.empty{padding:26px;text-align:center;color:var(--mut)}
.studentLink{border:0;background:none;padding:0;min-height:0;text-align:left;color:var(--blueT);font-weight:600;cursor:pointer}.studentLink:hover{text-decoration:underline;background:none}
.historyHead{display:flex;justify-content:space-between;gap:8px;align-items:center;flex-wrap:wrap}.historyTitle{font-weight:700}.historySub{color:var(--mut);font-size:13px}
.searchBox{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.searchBox input{min-width:240px;max-width:100%}.searchCount{font-size:13px;color:var(--mut)}
.cardHead{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}.cardHead .cardTitle{margin:0}
.chk{display:inline-flex;align-items:center;gap:6px;margin-right:10px}
.mobileTip,.gMobileList,.hMobileControls,.hMobileList,.studentMobileList,.regMobileList{display:none}
.lastMobileReading{font-weight:600;margin-top:6px}
.gMobileCard,.hMobileCard,.studentMobileCard,.lastMobileCard,.summaryMobileCard,.hSummaryCard{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);margin:8px 0;padding:12px}
.gMobileName,.studentMobileName{font-weight:700;font-size:15px;line-height:1.35}
.gMobileClass{font-size:12px;color:var(--mut);margin:2px 0 9px}
.gMobileRow{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.gMobileField{display:flex;flex-direction:column;gap:4px}
.gMobileField label,.studentMobileLabel{display:block;font-size:12px;color:var(--mut)}
.gMobileField select,.gMobileField input,.studentMobileField input[type=text],.studentMobileField select{width:100%;min-height:40px}
.gMobileDate{margin-top:8px;font-size:12px;color:var(--mut)}
.gMobileLast{margin-top:8px;padding-top:8px;border-top:1px solid var(--line);font-size:12px;color:var(--mut)}
.gMobileEmpty{padding:14px;text-align:center;color:var(--mut);border:1px dashed var(--line);border-radius:var(--r)}
.lastMobileCard .studentLink{display:block;font-size:15px;font-weight:700}
.lastMobileMeta{display:block;font-size:13px;color:var(--mut);margin:5px 0}
.summaryMobileCard .smName,.hSummaryName,.hMobileName{font-weight:600;margin-bottom:8px;line-height:1.35}
.summaryMobileGrid,.hSummaryGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}
.summaryMobileGrid div,.hSummaryGrid div{background:var(--bg);border-radius:8px;padding:7px;text-align:center}
.summaryMobileGrid b,.hSummaryGrid b{display:block;font-size:16px}
.summaryMobileGrid span,.hSummaryGrid span{font-size:11px;color:var(--mut)}
.hMobileStatus{width:100%;min-height:44px;font-weight:600}
.hMobileStatus.empty{background:#fff;color:var(--mut);padding:8px}
.hMobileStatus.present{background:var(--ok);color:var(--okT);border-color:#C7DFD3}
.hMobileStatus.absent{background:var(--no);color:var(--noT);border-color:#EFCDBF}
.studentMobileField{margin-top:8px}
.studentMobileChecks{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.studentMobileCheck{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:9px}
.studentMobileDelete{width:100%;margin-top:10px}
.studentNameBtn{display:block;width:100%;border:0;background:transparent;padding:8px 10px;text-align:left;font-weight:600;cursor:pointer;color:var(--blueT);border-radius:8px;min-height:40px}
.studentNameBtn:hover{background:#F3F8FC;text-decoration:underline}
.studentDetail{margin-top:12px;border:1px solid var(--line);border-radius:var(--r);background:#fff;box-shadow:var(--sh);padding:14px}
.studentDetailHead{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap}
.studentDetailName{font-size:18px;font-weight:800;line-height:1.35}
.studentDetailSub{font-size:12px;color:var(--mut);margin-top:3px}
.studentDetailGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.studentDetailField label{display:block;font-size:12px;color:var(--mut);margin-bottom:5px}
.studentDetailField input,.studentDetailField select{width:100%;min-height:42px}
.studentDetailChecks{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.studentDetailCheck{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:10px}
.studentEditRow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.studentEditRow input{flex:1;min-width:220px}
.studentDetailActions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.studentDetailActions button{min-height:40px}
@media(max-width:720px){.studentDetailGrid{grid-template-columns:1fr}.studentEditRow input{min-width:100%}}
.backupTitle,.importTitle{font-weight:700;margin-bottom:5px}
.backupSub,.importSub{font-size:12px;color:var(--mut);line-height:1.5;margin-bottom:10px}
.importSub{margin-bottom:0}
.backupBtns,.importBtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
#restoreFile,#importAttendanceFile{display:none}
.rptTitle{font-weight:700;margin:2px 0 8px}
.rptTbl,table.rptTbl{width:100%!important;min-width:0!important;max-width:100%;table-layout:auto}
.rptTbl th,.rptTbl td{white-space:normal;padding:7px 5px;text-align:center;position:static;min-width:0}
.rptTbl td{background:transparent}
.rptKv td:first-child{text-align:left;width:62%}.rptKv td:last-child{text-align:right;font-weight:700;white-space:nowrap}
.rptStu td:nth-child(2),.rptStu th:nth-child(2){text-align:left;word-break:break-word}.rptStu td:first-child{width:26px}
.rptNote{font-size:12px;color:var(--mut);margin-top:6px}
.regWarn{background:var(--no);color:var(--noT);border-radius:10px;padding:9px 12px;margin:8px 0;font-size:13px}
.rptHide{display:none!important}
.regMobileList input[type=date]{width:100%}
details.card>summary{cursor:pointer;font-weight:600;color:var(--blueT)}
details.card[open]>summary{margin-bottom:10px}
.authScreen{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:18px}
.authCard{width:min(420px,100%);background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:0 8px 24px rgba(30,50,70,.10)}
.authLogo{font-size:28px;text-align:center;margin-bottom:6px}
.authTitle{font-size:20px;font-weight:700;text-align:center;color:var(--blueT)}
.authSub{font-size:13px;color:var(--mut);text-align:center;margin:5px 0 16px}
.authField{margin-top:10px}
.authField label{display:block;font-size:13px;color:var(--mut);margin-bottom:4px}
.authField input{width:100%;min-height:44px;font-size:15px}
.authBtn{width:100%;min-height:44px;margin-top:14px;background:var(--pri);color:var(--pt);border-color:var(--pri)}
.authMsg{min-height:20px;margin-top:10px;font-size:13px;color:var(--noT);text-align:center}
.authHint{font-size:11px;color:var(--mut);text-align:center;margin-top:12px;line-height:1.45}
.authHidden{display:none!important}
#gDayControls{align-items:center}#gDayControls select{flex:1;min-width:150px}
@media(max-width:768px){
  main{padding:10px 10px 22px}
  .mobileTip{display:block;margin:6px 0}
  .ctrl{grid-template-columns:1fr 1fr}.fld#fldK{grid-column:1/-1}
  .ctrlBtns button{flex:1 1 100%}
  .stats{grid-template-columns:1fr 1fr;gap:8px}.stCard:last-child{grid-column:1/-1}
  .stVal{font-size:22px}
  .tabs{gap:6px}.tabs button{padding:10px 4px;font-size:13px}
  select,button,input,textarea{font-size:14px}
  input,select,textarea{font-size:16px}
  .modeBtns{display:grid;grid-template-columns:1fr 1fr}.modeBtns button{width:100%}
  .searchBox{width:100%}.searchBox input{min-width:0;flex:1;width:100%}
  .wrap{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .wrap table{min-width:900px;width:max-content}
  #gt,#gtg,.wrap table.g{min-width:980px}
  .rptTbl th,.rptTbl td{font-size:12px;padding:6px 3px}
  .gDesktop,.hDesktop,.studentDesktop,.regDesktop{display:none!important}
  .gMobileList,.hMobileList,.studentMobileList,.regMobileList{display:block!important}
  #s2 .wrap{overflow:visible}#s2 table{display:none!important}
  #s2 #gHistory table{display:table!important}#s2 #gHistory .wrap{overflow-x:auto}
  #s2 #gPaymentPane table{display:table!important}#s2 #gPaymentPane table{width:100%;min-width:0}
  #payList .payTable th:nth-child(3),#payList .payTdCls{display:none}#payList .payTable th:first-child{width:30px}#payList .payTdName,#payList .payLink{white-space:normal;word-break:break-word}#payList .payArr{white-space:normal;display:inline-block}
  .hMobileControls{display:grid;grid-template-columns:auto 44px 1fr 44px;gap:6px;align-items:center;margin:9px 0}
  .hMobileControls select{min-width:0;width:100%}
  #hAllPresent{grid-column:1/-1}
  #ahReport{grid-column:1/-1}
}

.classBadge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:12px;font-weight:600}.classBadge.on{background:var(--ok);color:var(--okT)}.classBadge.off{background:var(--no);color:var(--noT)}
.classActions{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}.classActions button{min-height:32px;padding:5px 9px;font-size:12px}
.paymentGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:end}.paymentSummary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:10px 0}.payCard{padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff}.payCard b{display:block;font-size:18px;margin-top:3px}.payTable input{min-width:90px}.payStatus{font-weight:700}.payStatus.lunas{color:#167a43}.payStatus.partial{color:#9a6700}.payStatus.unpaid{color:#b42318}.payHelp{font-size:12px;color:var(--mut);margin-top:6px}.payActions{display:flex;gap:8px;flex-wrap:wrap}.payMonthList{font-size:13px;line-height:1.6}.payStudentList{display:flex;flex-direction:column;gap:8px}
.payRowBtn{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px 12px;border-radius:12px;background:#fff;min-height:52px}
.payRowBtn:hover{background:#F3F8FC}
.payRowNo{color:var(--mut);font-size:12px;min-width:22px}
.payRowName{flex:1;font-weight:600;color:var(--blueT);overflow-wrap:anywhere}
.payRowMeta{font-size:12px;color:var(--mut);display:block;font-weight:400}
.payBadge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.payBadge.lunas{background:var(--ok);color:var(--okT)}.payBadge.partial{background:#FBF0D5;color:#8A6410}.payBadge.unpaid{background:var(--no);color:var(--noT)}
.payDetailHead{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap}
.payDetailName{font-size:18px;font-weight:800;line-height:1.35}
.paySum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0}
.paySum div{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px}
.paySum span{display:block;font-size:12px;color:var(--mut)}.paySum b{font-size:17px}
.paySum .bad b{color:#b42318}.paySum .good b{color:#167a43}
.payMonths{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;margin-top:10px}
.payMonth{border:1px solid var(--line);border-radius:12px;padding:10px;background:#fff}
.payMonth.cur{border-color:#9CC0E0;box-shadow:0 0 0 2px #DCEAF7}
.payMonth.future{opacity:.65}
.payMonth.na{background:var(--bg);opacity:.6}
.payMonthHead{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-bottom:8px;font-weight:700}
.payMonthGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.payMonthGrid label{display:block;font-size:11px;color:var(--mut);margin-bottom:2px}
.payMonthGrid input{width:100%;min-height:36px;padding:5px 8px}
.payMonthGrid .full{grid-column:1/-1}
.payMonthBtns{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.payMonthBtns button{min-height:32px;padding:4px 10px;font-size:12px}
.payMonthInfo{font-size:12px;color:var(--mut);margin-top:6px}
@media(max-width:800px){.paySum{grid-template-columns:1fr 1fr}}
@media(max-width:800px){.paymentGrid,.paymentSummary{grid-template-columns:repeat(2,minmax(0,1fr))}.paymentGrid .fld{min-width:0}.paymentGrid select,.paymentGrid input{width:100%;min-width:0}.payTable{font-size:12px}.payTable th,.payTable td{padding:6px 4px}}


/* ===== TEMA UI PROFESIONAL (override; padam blok ini untuk kembali ke rupa asal) ===== */
:root{
  --bg:#F3F6F6;--card:#fff;--tx:#1F2A2E;--mut:#64748B;--line:#E2E8EA;
  --blue:#E4F2EF;--blueT:#0F4C47;--pri:#0F766E;--pt:#fff;
  --ok:#DCF3E6;--okT:#166A3F;--no:#FDE7E0;--noT:#A23B22;
  --sh:0 1px 2px rgba(15,40,40,.05),0 4px 14px rgba(15,40,40,.05);--r:14px;
  --pri-d:#0B5C56;--ring:#7CC4BC;
}
body{font-size:14.5px;letter-spacing:.005em;-webkit-font-smoothing:antialiased}
main{padding:0 16px 40px}
.sub{letter-spacing:.12em;font-size:11px;opacity:.85}
h1{font-size:19px;letter-spacing:.04em}

/* Header */
.appHeader{background:linear-gradient(135deg,#0F766E 0%,#115E59 100%);border-radius:0 0 18px 18px;margin:0 -16px;padding:18px 20px;box-shadow:0 6px 20px rgba(15,70,64,.25)}
.appHeader h1{color:#fff}
.appHeader .sub{color:#CFEFEA}
.appHeader .adminUser{color:#DDF4F0}
.appHeader .logoutBtn{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.35)}
.appHeader .logoutBtn:hover:not(:disabled){background:rgba(255,255,255,.26)}
.statusLine{margin:10px 2px 0}

/* Tab navigasi */
.tabs{position:sticky;top:0;z-index:50;background:rgba(243,246,246,.92);backdrop-filter:blur(8px);margin:0 -16px;padding:10px 16px;gap:6px;border-bottom:1px solid var(--line)}
.tabs button{border:1px solid transparent;background:transparent;color:var(--mut);border-radius:10px;font-weight:600;transition:background .15s,color .15s}
.tabs button:hover:not(:disabled){background:#E8EFEF}
.tabs button.on{background:var(--pri);color:#fff;border-color:var(--pri);box-shadow:0 2px 8px rgba(15,118,110,.3)}

/* Tajuk halaman */
.pageTitle{font-size:20px;letter-spacing:.02em;color:var(--blueT);margin:22px 0 12px;display:flex;align-items:center;gap:10px}
.pageTitle::before{content:"";width:4px;height:20px;border-radius:2px;background:var(--pri)}
.cardTitle{color:var(--blueT)}

/* Butang & input */
button{border-radius:10px;transition:background .15s,box-shadow .15s,transform .05s}
button:active:not(:disabled){transform:translateY(1px)}
button:hover:not(:disabled){background:#EEF5F4}
button.p{background:var(--pri);border-color:var(--pri);box-shadow:0 1px 2px rgba(15,70,64,.25)}
button.p:hover:not(:disabled){background:var(--pri-d)}
input,select,textarea{border-radius:10px;border-color:#D5DDE0;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--pri);box-shadow:0 0 0 3px rgba(15,118,110,.18)}
button:focus-visible{outline:2px solid var(--ring)}
input[type=checkbox]{accent-color:var(--pri)}
.authBtn{background:var(--pri)!important}

/* Kad */
.card,.importBox,.backupBox,.historyBox,.rptBox{border-radius:var(--r);border-color:var(--line);padding:16px}
.ctrl{align-items:end}

/* Statistik */
.stats{gap:12px}
.stCard{border-radius:var(--r);border:1px solid var(--line);border-top:4px solid #CFE3E0;padding:12px 16px}
.stCard.accB{border-top-color:#7CC4BC}.stCard.accG{border-top-color:#6FCF97}.stCard.accP{border-top-color:#F2A58E}
.stLbl{font-size:12px;text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.stVal{font-size:26px;color:var(--blueT)}

/* Sub-tab */
.modeBtns{background:#E8EEEE;padding:4px;border-radius:12px;display:inline-flex;gap:4px}
.modeBtns button{border:0;background:transparent;color:var(--mut);border-radius:9px}
.modeBtns button.on{background:#fff;color:var(--pri);box-shadow:0 1px 3px rgba(15,40,40,.15)}
.modeBtns button:hover:not(.on):not(:disabled){background:rgba(255,255,255,.6)}

/* Jadual */
.wrap{border-radius:var(--r)}
th{background:#EAF4F2;color:var(--blueT);text-transform:uppercase;font-size:11px;letter-spacing:.05em;padding:10px 8px}
th.h:hover{background:#D9ECE8}
td{padding:8px}
tbody tr:nth-child(even) td{background:#FAFCFC}
tbody tr:hover td{background:#F0F8F7}
#gt td:first-child{background:inherit}
.c{border-radius:8px;border-color:#D5DDE0}
.c.H{background:var(--ok);color:var(--okT);border-color:#B7E0C6}
.c.T{background:var(--no);color:var(--noT);border-color:#F3C2B4}

/* Pautan murid, kad mobile */
.studentLink,.studentNameBtn{color:var(--pri)}
.gMobileCard,.hMobileCard,.studentMobileCard,.lastMobileCard,.summaryMobileCard,.hSummaryCard{border-radius:var(--r)}
.hMobileStatus.present{border-color:#B7E0C6}
.hMobileStatus.absent{border-color:#F3C2B4}

/* Bayaran */
.payCard{border-radius:var(--r);box-shadow:var(--sh);border-top:3px solid #7CC4BC}
.payCard b{font-size:22px;color:var(--blueT)}
.payRowBtn{border-color:var(--line);box-shadow:var(--sh);transition:border-color .15s,transform .1s}
.payRowBtn:hover{background:#fff;border-color:var(--pri);transform:translateX(2px)}
.payRowBtn::after{content:"›";color:var(--mut);font-size:20px;line-height:1}
.payMonth.cur{border-color:var(--pri);box-shadow:0 0 0 2px rgba(15,118,110,.18)}
.payBadge.lunas{background:var(--ok);color:var(--okT)}
.payMonthBtns button.p{box-shadow:none}

/* Kelas */
.classBadge{padding:4px 10px}

/* Login */
.authScreen{background:linear-gradient(135deg,#0F766E 0%,#115E59 55%,#0B3F3B 100%)}
.authCard{border-radius:20px;border:0;box-shadow:0 20px 50px rgba(0,0,0,.28);padding:30px 26px}
.authLogo{font-size:34px;width:64px;height:64px;line-height:64px;margin:0 auto 10px;border-radius:50%;background:var(--blue)}
.authTitle{font-size:22px;color:var(--blueT)}
.authField input{border-radius:12px}

/* Nota & kotak lain */
.note{text-align:center;margin-top:28px}
.empty{border:1px dashed var(--line);border-radius:var(--r);background:#fff}
details.card>summary{padding:2px 0}
.searchBox input{border-radius:999px;padding-left:14px}

/* Mobile: bar navigasi bawah gaya aplikasi */
@media(max-width:768px){
  main{padding:0 12px 96px}
  .appHeader{margin:0 -12px;padding:14px 16px;border-radius:0 0 16px 16px}
  h1{font-size:16px}
  .tabs{position:fixed;top:auto;bottom:0;left:0;right:0;margin:0;padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);border-bottom:0;background:rgba(255,255,255,.96);box-shadow:0 -4px 16px rgba(15,40,40,.08);z-index:100}
  .tabs button{font-size:11.5px;padding:8px 2px;min-height:48px;line-height:1.25;border-radius:12px}
  .pageTitle{font-size:18px}
  .modeBtns{display:grid;width:100%}
  .stVal{font-size:22px}
}
@media print{.tabs,.appHeader .adminBar{display:none!important}}

.payArrSummary{padding:10px 12px;border-radius:10px;margin-bottom:10px;font-size:14px}
.payArrSummary.bad{background:#FDECEC;color:#8A1C1C}.payArrSummary.good{background:var(--ok);color:var(--okT)}
.payTable{width:100%;border-collapse:collapse;font-size:14px}
.payTable th{text-align:left;font-size:12px;color:var(--mut);font-weight:600;padding:8px;border-bottom:1px solid var(--line);text-transform:uppercase;letter-spacing:.03em}
.payTable th,.payTable td{text-align:left!important}
.payTable td{padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
.payTr{cursor:pointer}.payTr:hover td,.payTr:focus td{background:#F3F8FC;outline:none}
.payGroup td{background:var(--bg);font-weight:700;color:var(--pri,#0F766E);padding-top:12px}
.payTdNo{width:44px;color:var(--mut)}.payTdCls{color:var(--mut);white-space:nowrap}
.payLink{font-weight:600;color:inherit;text-decoration:underline;text-decoration-color:rgba(0,0,0,.18);text-underline-offset:3px}
.payArr{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:700;white-space:nowrap}
.payArr.arr3{background:#FDECEC;color:#B42318}.payArr.arr1{background:#FBF0D5;color:#8A6410}.payArr.arr0{background:var(--ok);color:var(--okT)}
.payArrBox{border-radius:12px;padding:12px 14px;margin:12px 0}
.payArrBox.bad{background:#FDECEC;border:1px solid #F5C2C2}.payArrBox.good{background:var(--ok);border:1px solid #BFE3CC}
.payArrTitle{font-size:17px;font-weight:800}.payArrBox.bad .payArrTitle{color:#B42318}.payArrBox.good .payArrTitle{color:#167a43}
.payArrMonths{margin-top:2px;font-weight:600;color:#8A1C1C}.payArrPaid{margin-top:6px;font-size:13px;color:var(--mut)}
.payArrBox .payActions{margin-top:10px}
.payChips{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-top:10px}
.payChip{position:relative;border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}
.payChip.cur{box-shadow:0 0 0 2px var(--pri,#0F766E) inset}
.payChip.editing{box-shadow:0 0 0 2px #315B78 inset}
.payChipBtn{display:flex;flex-direction:column;align-items:center;gap:1px;width:100%;padding:8px 4px 7px;border:0;background:transparent;cursor:pointer;min-height:76px}
.payChipBtn:disabled{cursor:default}
.payChipM{font-size:13px;font-weight:700}.payChipI{font-size:20px;font-weight:800;line-height:1.2}.payChipS{font-size:11px;color:var(--mut)}
.payChip.lunas{background:#E9F7EE;border-color:#BFE3CC}.payChip.lunas .payChipI{color:#167a43}
.payChip.partial{background:#FDF5E3;border-color:#F0D9A0}.payChip.partial .payChipI{color:#B7791F}
.payChip.unpaid{background:#FDECEC;border-color:#F5C2C2}.payChip.unpaid .payChipI{color:#B42318}.payChip.unpaid .payChipS{color:#B42318}
.payChip.future,.payChip.na{background:#F6F7F9}.payChip.future .payChipI,.payChip.na .payChipI{color:#A0A7B1}
.payChipEdit{position:absolute;top:2px;right:2px;border:0;background:transparent;font-size:12px;padding:2px 4px;cursor:pointer;opacity:.55;min-height:0}
.payChipEdit:hover{opacity:1}.payChipEdit:disabled{display:none}
.payEditor{margin-top:12px;border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--bg)}
.payEditorTitle{font-weight:700;margin-bottom:8px}
.payEditorGrid{display:grid;grid-template-columns:1fr 1fr 2fr;gap:10px}
@media(max-width:800px){.payChips{grid-template-columns:repeat(4,minmax(0,1fr))}.payEditorGrid{grid-template-columns:1fr 1fr}.payEditorGrid .fld:last-child{grid-column:1/-1}}
@media(max-width:480px){.payChips{grid-template-columns:repeat(3,minmax(0,1fr))}.payTdCls{white-space:normal}}

.roleGuru .adminOnly,.roleGuru [data-admin="1"],.roleGuru .studentActionDelete{display:none!important}
.guruKelasBox{display:flex;flex-wrap:wrap;gap:8px}.guruKelasBox label{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:14px;cursor:pointer}
.guruTag{display:inline-block;padding:2px 8px;margin:2px;border-radius:999px;background:var(--bg);border:1px solid var(--line);font-size:12px}

.guruMgBox{margin-top:10px;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:#fff}
.guruMgBox summary{cursor:pointer;font-weight:700}
.guruMgList{max-height:320px;overflow:auto;display:flex;flex-direction:column;gap:2px}
.guruMgList label{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:6px;font-size:14px;cursor:pointer}
.guruMgList label:hover{background:var(--bg)}
.guruMgHead{font-weight:700;color:var(--pri,#0F766E);margin-top:8px;padding:2px 6px;background:var(--bg);border-radius:6px}

.dirFilters{display:grid;grid-template-columns:1fr 1fr 2fr;gap:10px;margin-bottom:6px}
@media(max-width:700px){.dirFilters{grid-template-columns:1fr 1fr}.dirFilters .fld:last-child{grid-column:1/-1}}
.dirOwner{font-size:13px}.dirOwner.me{color:#167a43;font-weight:700}.dirMuted{color:var(--mut);font-size:13px}
.dirAct{white-space:nowrap}.dirAct button{padding:5px 10px;font-size:13px;margin:2px}.dirSel{font-size:13px;padding:4px 6px;max-width:170px}
.dirWait{display:inline-block;font-size:12.5px;color:#8A6410;background:#FBF0D5;border-radius:999px;padding:3px 9px;margin-right:4px}
.reqCard{border-left:4px solid #315B78}.lockCard{border-left:4px solid #A0A7B1}
.reqSub{font-size:13px;color:var(--mut);margin:8px 0 4px}
.reqRow{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.reqName{font-weight:700}.reqMeta{font-size:13px;color:var(--mut);grid-column:1}.reqBtns{grid-column:2;grid-row:1/span 2;display:flex;gap:6px;align-items:center}
.reqRow.locked .reqName{color:#6B7280}.lockRec{grid-column:1/-1;font-size:13px;background:var(--bg);border-radius:8px;padding:8px;margin-top:4px}
.reqBadge{display:inline-block;min-width:18px;padding:1px 6px;margin-left:6px;border-radius:999px;background:#B42318;color:#fff;font-size:11px;font-weight:700}
.importBox{margin-top:14px;border-top:1px dashed var(--line);padding-top:12px}.impErr{color:#B42318;font-size:13px;margin:4px 0}

/* ===== Fasa 1 ===== */
.linkBtn{background:none;border:0;color:var(--blueT,#315B78);text-decoration:underline;font-size:13px;margin-top:8px;cursor:pointer;padding:4px}
.modBanner{background:#FDECEC;color:#8A1C1C;border:1px solid #F5C2C2;border-radius:10px;padding:8px 12px;margin:6px 0;font-size:14px}
.modBanner button{margin-left:8px;padding:3px 10px;font-size:13px}
#modEditBtn.on{background:#B42318;color:#fff;border-color:#B42318}
body.adminView #gt,body.adminView #hMobileList,body.adminView #gtg,body.adminView #gl,body.adminView #gMobileList{pointer-events:none}
body.adminView #hAllPresent,body.adminView .studentActionDelete,body.adminView .importBtns #importAttendanceBtn{display:none!important}
body:not(.roleGuru) .guruOnly{display:none!important}
.toastBox{position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(20px);background:#263238;color:#fff;padding:10px 16px;border-radius:12px;font-size:14px;opacity:0;pointer-events:none;transition:all .25s;z-index:200;max-width:90vw;text-align:center}
.toastBox.show{opacity:1;transform:translateX(-50%) translateY(0)}
.tabs button i{font-style:normal;margin-right:6px}
.homeDate{color:var(--mut);margin:-4px 0 10px;font-size:14px}
.homeItem{display:flex;gap:10px;align-items:center;width:100%;text-align:left;padding:10px 12px;margin:6px 0;border-radius:10px;background:#FFF7ED;border:1px solid #F3D9B1;font-size:14px;cursor:pointer}
.homeItem:hover{background:#FDEFD9}.homeIc{font-size:18px}
.homeOk{color:#167a43;font-weight:600;padding:6px 0}
.homeLine{padding:6px 0;border-bottom:1px solid var(--line);font-size:14px}.homeLine.bad{color:#B42318}.homeLine.small{font-size:13px;color:var(--mut);border:0;padding:3px 0}
.homeSub{margin-top:10px;font-weight:700;font-size:13px}
.barRow{display:grid;grid-template-columns:minmax(110px,1.2fr) 2fr auto;gap:10px;align-items:center;padding:6px 0;font-size:14px}
.barLbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barTrack{height:10px;background:#EEF2F5;border-radius:999px;overflow:hidden}.barFill{height:100%;background:#2E9E6A;border-radius:999px}.barFill.mg{background:#315B78}
.barVal{font-size:13px;font-weight:700;white-space:nowrap}.barVal.bad{color:#B42318}
.twRow{display:grid;grid-template-columns:110px 1fr auto;gap:10px;padding:9px 0;border-top:1px solid var(--line);align-items:start}
.twRow.past .twDate,.twRow.past .twBody{opacity:.55}.twForm.editing{outline:2px solid #F59E0B;outline-offset:4px;border-radius:12px}.twRow.now{background:#E9F7EE;border-radius:8px;padding:9px 6px}
.twDate{font-weight:700;font-size:13px;color:var(--blueT,#315B78)}.twTitle{font-weight:600}.twMeta{font-size:12.5px;color:var(--mut);margin-top:2px}
.twNow{display:inline-block;margin-top:4px;font-size:11.5px;background:#167a43;color:#fff;border-radius:999px;padding:2px 8px}
.twAct button{padding:3px 7px;font-size:13px;margin-left:2px}
.twMonth{margin-top:12px;font-weight:800;color:var(--pri,#0F766E)}.twMonth.cur::after{content:" · bulan ini";font-weight:600;color:var(--mut);font-size:12px}
.twForm{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:10px;margin:8px 0}.twFormTitle{font-weight:700;margin-bottom:6px}
.twFormGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.admGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-top:8px}
.admCard{text-align:left;border:1px solid var(--line);border-radius:12px;padding:12px;background:#fff;cursor:pointer;display:flex;flex-direction:column;gap:3px}
.admCard:hover{border-color:var(--pri,#0F766E)}.admCard.sel{box-shadow:0 0 0 2px var(--pri,#0F766E) inset}
.admName{font-weight:800}.admSub{font-size:12.5px;color:var(--mut)}.admStats{display:flex;align-items:baseline;gap:6px;margin-top:4px}
.admBig{font-size:24px;font-weight:800;color:#167a43}.admBig.bad{color:#B42318}.admSmall{font-size:12px;color:var(--mut)}
.admFoot{font-size:12.5px}.admFoot.bad{color:#B42318;font-weight:600}
.mgGroup{border:1px solid var(--line);border-radius:10px;margin:8px 0;background:#fff}
.mgGroup summary{padding:10px 12px;cursor:pointer;font-size:14.5px}.mgGroup summary .bad{color:#B42318;font-weight:700}
.mgRow{display:grid;grid-template-columns:1.4fr 1fr 1.6fr auto;gap:8px;align-items:center;padding:7px 12px;border-top:1px solid var(--line);font-size:13.5px}
.mgRow.late{background:#FFF5F5}.mgName{background:none;border:0;padding:0;text-align:left;font-weight:700;cursor:pointer;color:inherit;font-size:13.5px}
.mgSub,.mgLast{color:var(--mut);font-size:12.5px}.mgSince{font-weight:700;white-space:nowrap}.mgRow.late .mgSince{color:#B42318}
.mgHist{grid-column:1/-1;background:var(--bg);border-radius:8px;padding:8px;font-size:12.5px;max-height:220px;overflow:auto}
.stBadge{display:inline-block;margin-left:6px;font-size:11px;padding:1px 7px;border-radius:999px;background:#EEF2F5;color:#6B7280;font-weight:600}
tr.inactive td{opacity:.6}
.logList{max-height:480px;overflow:auto}.logRow{display:grid;grid-template-columns:120px 140px 1fr;gap:8px;padding:6px 0;border-top:1px solid var(--line);font-size:13px}
.logTime{color:var(--mut)}.logWho{font-weight:600}
@media(max-width:800px){
  body{padding-bottom:78px}
  .tabs{position:fixed;left:0;right:0;bottom:0;z-index:100;margin:0!important;background:#fff;border-top:1px solid var(--line);box-shadow:0 -4px 16px rgba(0,0,0,.06);padding:4px 4px calc(4px + env(safe-area-inset-bottom));display:flex;gap:2px;border-radius:0}
  .tabs button{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 2px!important;font-size:11px!important;border-radius:10px;min-width:0}
  .tabs button i{margin:0;font-size:18px;line-height:1.1}
  .tabs button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .tabs button .reqBadge{position:absolute;margin:0 0 0 22px;font-size:10px}
  .tabs button{position:relative}
  .twFormGrid{grid-template-columns:1fr 1fr}.twRow{grid-template-columns:86px 1fr auto}
  .mgRow{grid-template-columns:1fr auto}.mgSub,.mgLast{grid-column:1}.mgSince{grid-column:2;grid-row:1}
  .logRow{grid-template-columns:1fr;gap:1px}
  .adminBar{flex-wrap:wrap;gap:4px}.adminBar .logoutBtn{padding:6px 8px;font-size:12px}
  .barRow{grid-template-columns:1.3fr 1fr auto}.barLbl{white-space:normal;font-size:13px;line-height:1.25}
}

.dirClass{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;text-align:left;padding:12px 14px;margin:8px 0 0;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;font-size:15px}
.dirClass:hover{border-color:var(--pri,#0F766E);background:#F6FAF9}
.dirClass.open{background:var(--bg);border-color:var(--pri,#0F766E);border-bottom-left-radius:0;border-bottom-right-radius:0}
.dirClassName{font-weight:800;color:var(--pri,#0F766E)}.dirClassMeta{font-size:13px;color:var(--mut);white-space:nowrap}
.dirTable{border:1px solid var(--pri,#0F766E);border-top:0;margin-bottom:6px}
@media(max-width:600px){.dirClass{flex-direction:column;align-items:flex-start;gap:2px}}
.dirAct .mgOn{background:#E9F7EE;border-color:#BFE3CC;color:#167a43}.dirAct .mgOff{background:#F6F7F9;color:#6B7280}

.authLogo:has(img){width:auto!important;height:auto!important;background:none!important;border-radius:0!important;box-shadow:none!important;margin:0 auto 10px!important;display:block!important}
.authLogo img{width:110px;height:auto;display:block;margin:0 auto}
.brand{display:flex;align-items:center;gap:12px}.brandLogo{width:48px;height:auto;background:#fff;border-radius:10px;padding:3px;flex:none}
@media(max-width:600px){.brandLogo{width:38px}}
@media(display-mode:standalone){body{padding-top:env(safe-area-inset-top)}}

/* ===== Fasa 2 ===== */
.statusLine.offline{background:#FFF7ED;color:#8A4B0F;border:1px solid #F3D9B1;border-radius:10px;padding:6px 10px}
.annCard{border-left:4px solid #B7791F}
.annRow{padding:10px 0;border-top:1px solid var(--line)}.annRow.imp .annTitle{color:#B42318}
.annTitle{font-weight:800}.annBody{margin-top:3px;white-space:pre-wrap;font-size:14px}.annMeta{font-size:12px;color:var(--mut);margin-top:4px}
.annBtns{margin-top:6px}.annBtns button{padding:4px 10px;font-size:13px}
.twForm input,.twForm textarea{width:100%;margin:4px 0}
.overlay{position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:300;display:flex;align-items:center;justify-content:center;padding:16px}
.ovBox{background:#fff;border-radius:16px;padding:16px;max-width:460px;width:100%;max-height:90vh;overflow:auto;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.ovBox.wide{max-width:640px}.rcImg{width:100%;height:auto;border:1px solid var(--line);border-radius:10px}
.rcPick{display:flex;flex-direction:column;gap:6px;margin:8px 0}
#printArea{display:none}
@media print{
  body.printing>*:not(#printArea){display:none!important}
  body.printing #printArea{display:block!important}
  body.printing{background:#fff!important;padding:0!important}
  @page{size:A4;margin:14mm}
}
.rcPrint img{width:100%;max-width:170mm}
/* Fasa 3 */
.mgChartWrap{margin:8px 0 12px}.mgChart{width:100%;height:auto;max-height:260px;display:block}
.mgGrid{stroke:var(--line);stroke-width:1}.mgAx{font:12px Arial,sans-serif;fill:var(--mut)}
.mgLine{fill:none;stroke:#0F766E;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.mgDot{fill:#0F766E;stroke:var(--card);stroke-width:2}.mgHit{fill:transparent}.mgPt:hover .mgDot{r:6}
.mgChartCap,.mgChartNone{font-size:12px;color:var(--mut);margin-top:4px}
.mgLvl{font-size:12px;color:var(--mut);margin-left:6px}
.slipRow{border-top:1px solid var(--line);padding:10px 0}.slipHead{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}
.slipMeta{font-size:12px;color:var(--mut)}.slipEdit{display:flex;gap:8px;margin-top:6px;align-items:flex-start}
.slipEdit textarea{flex:1;min-width:0;font:inherit;padding:8px;border:1px solid var(--line);border-radius:10px;resize:vertical}
.slipSaved{font-size:12px;color:#0F766E}
.naikTable select{max-width:100%}
.backupRemind{border-left:4px solid #D97706}
.slipPage{page-break-after:always;break-after:page;text-align:center}.slipPage img{width:100%;max-width:175mm}
.sijil{width:297mm;height:209mm;box-sizing:border-box;padding:12mm;page-break-after:always;break-after:page;font-family:Arial,sans-serif;color:#0F3D36}
.sjIn{height:100%;box-sizing:border-box;border:3px double #0F766E;outline:6px solid #0F766E;outline-offset:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;padding:8mm}
.sjLogo{height:24mm;margin-bottom:2mm}.sjOrg{font-size:20pt;font-weight:bold;letter-spacing:1px}.sjAddr{font-size:10pt;color:#374151;margin-bottom:6mm}
.sjTitle{font-size:28pt;font-weight:bold;color:#0F766E;letter-spacing:3px;margin-bottom:3mm}.sjTxt{font-size:13pt;margin:1.5mm 0}
.sjName{font-size:22pt;font-weight:bold;margin:3mm 0;border-bottom:1px solid #9CA3AF;padding:0 10mm 2mm}.sjAw{font-size:22pt;font-weight:bold;color:#0F766E;margin:2mm 0}
.sjSign{align-self:flex-end;margin:2mm 14mm 0 0;text-align:center;font-size:11pt}.sjLine{width:65mm;border-top:1px solid #111;margin:12mm auto 2mm}.sjSn{font-weight:bold}.sjSr{font-size:10pt}

.rp{font-family:Arial,sans-serif;color:#111;font-size:11pt}
.rpHead{display:flex;gap:14px;align-items:center;border-bottom:2px solid #0F766E;padding-bottom:8px}.rpHead img{width:64px}
.rpOrg{font-weight:800;font-size:15pt}.rpAddr{font-size:9.5pt;color:#444}.rpTitle{font-weight:800;font-size:13pt;color:#0F766E;margin-top:4px}
.rpMeta{font-size:9pt;color:#555;margin:6px 0 10px}
.rpSum{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:8px}.rpSum div{border:1px solid #ccc;border-radius:6px;padding:6px 8px}.rpSum b{display:block;font-size:14pt}.rpSum span{font-size:8.5pt;color:#555}
.rp h2{font-size:12pt;margin:14px 0 6px;color:#0F3D36;border-bottom:1px solid #ccc;padding-bottom:3px}.rp h3{font-size:10.5pt;margin:10px 0 4px}
.rp table{width:100%;border-collapse:collapse;font-size:9.5pt;page-break-inside:auto}.rp th,.rp td{border:1px solid #bbb;padding:4px 6px;text-align:left;vertical-align:top}
.rp th{background:#EEF6F4}.rp td.n{text-align:right}.rp tr{page-break-inside:avoid}.rpKv{max-width:110mm}

/* Langganan (Fasa 5) */
.lgPelan{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:12px 0 6px}
.lgKad{border:1px solid var(--line,#E4E7EC);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:6px;background:#fff}
.lgHarga{font-size:24px;font-weight:700;color:#1E3A8A}
.lgTempoh{font-size:12px;color:var(--mut,#667085);margin-top:-6px}
.lgKet{font-size:13px;color:#344054;min-height:18px}
.lgKad select{width:100%}