/* =====================================================================
   rupa.css — reka bentuk ListBelanja "Lejar Ringgit" (pusingan 140, Okt 2026 — docs/JENAMA.md, KONTRAK K0)

   Palet daripada wang kertas Malaysia; setiap warna SATU makna:
     ungu  (RM100) tindakan & jenama (--cop)         emas (RM50)  wang · simpanan · jenama (--emas; teks → --emas-gelap)
     hijau (RM5)   berjaya / dituntut (--hijau)      amber (RM20) perhatian / tarikh akhir (--amber)
     merah (RM10)  bahaya / padam (--merah)          kertas hangat (--kertas / --kertas2 kad / --kertas3 sekunder)
   Bentuk: radius 16 kad / 12 kawalan / 999 pil; garis rambut 1 px + bayang lembut hanya pada hover/fokus; ruang 4-pt (--s1…--s6);
   skala jenis --fs-*; angka ringgit (.angka) sentiasa tabular 650 −.02em; sasaran sentuh ≥ 44 px; gerakan ≤ 200 ms & prefers-reduced-motion.
   Blok berlabel p140 jenama (token + komponen asas) milik ejen jenama — ikon: public/ikon-set.js, lambang/wordmark: public/jenama-kira.js.
   Dimuat selepas gaya kritikal dalam index.html, jadi ia mengatasinya.
   ===================================================================== */
/* p140 jenama — TOKEN (satu sumber: ikon/OG/jenama/e-mel dijana daripadanya; salinan index.html & seo.css dijaga ujian-palet.mjs) */
:root{--kertas:#F6F3EC;--kertas2:#FFFDF9;--kertas3:#EBE6DA;--dakwat:#1D1930;--pudar:#615B74;--garis:#DDD6C8;--cop:#3F2A86;--cop-lembut:#EEE8FB;--emas:#E0A51F;--emas-lembut:#FBF1D6;--emas-gelap:#7A530C;--atas-emas:#1D1930;--hijau:#2D7A4D;--hijau-lembut:#EAF6EE;--hijau-teks:#246A41;--amber:#9A5A0B;--amber-lembut:#FBF0E2;--merah:#B3362F;--merah-lembut:#FBE7E5;--atas-cop:#FFFFFF;--r:12px;--r-kad:16px;--r-besar:18px;--bayang:0 10px 28px -14px rgba(29,25,48,.35),0 1px 2px rgba(29,25,48,.06);--fokus:0 0 0 3px rgba(63,42,134,.35);--sans:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,"Noto Sans","PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;--mono:var(--sans);--fs-paparan:40px;--fs-besar:32px;--fs-sederhana:26px;--fs-tajuk:20px;--fs-subtajuk:17px;--fs-badan:16px;--fs-nota:13.5px;--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--gerak:.18s}
/* Tema (pusingan 131): ikut peranti (lalai) — gelap bila peranti gelap KECUALI dipaksa terang (html[data-tema=terang]); html[data-tema=gelap] memaksa gelap.
   Pilihan disimpan localStorage lb_tema (dipasang pasang-awal.js sebelum lukisan pertama) & tetapan paparan (finance.tema) merentas peranti. */
:root[data-tema=terang]{color-scheme:light}
@media(prefers-color-scheme:dark){:root:not([data-tema=terang]){--kertas:#110F1A;--kertas2:#1A1626;--kertas3:#251F33;--dakwat:#EFEBF7;--pudar:#A9A2BB;--garis:#352D47;--cop:#B9A2F2;--cop-lembut:#2B2241;--emas:#E0A51F;--emas-lembut:#2E2512;--emas-gelap:#F0C45A;--atas-emas:#1D1930;--hijau:#6CC38A;--hijau-lembut:#1B2E22;--hijau-teks:#6CC38A;--amber:#EFA64B;--amber-lembut:#2E2213;--merah:#EF8A80;--merah-lembut:#3A1F1E;--atas-cop:#1A1430;--bayang:0 10px 28px -14px rgba(0,0,0,.6),0 1px 2px rgba(0,0,0,.3);--fokus:0 0 0 3px rgba(185,162,242,.45)}}
:root[data-tema=gelap]{color-scheme:dark;--kertas:#110F1A;--kertas2:#1A1626;--kertas3:#251F33;--dakwat:#EFEBF7;--pudar:#A9A2BB;--garis:#352D47;--cop:#B9A2F2;--cop-lembut:#2B2241;--emas:#E0A51F;--emas-lembut:#2E2512;--emas-gelap:#F0C45A;--atas-emas:#1D1930;--hijau:#6CC38A;--hijau-lembut:#1B2E22;--hijau-teks:#6CC38A;--amber:#EFA64B;--amber-lembut:#2E2213;--merah:#EF8A80;--merah-lembut:#3A1F1E;--atas-cop:#1A1430;--bayang:0 10px 28px -14px rgba(0,0,0,.6),0 1px 2px rgba(0,0,0,.3);--fokus:0 0 0 3px rgba(185,162,242,.45)}

/* p140 jenama — ASAS JENIS */
body{font:var(--fs-badan)/1.55 var(--sans);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;color:var(--dakwat)}
h1,h2,h3,h4{line-height:1.25;letter-spacing:-.01em;overflow-wrap:break-word}
h2.tajukBantuan{font-size:24px;line-height:1.25;font-weight:650;letter-spacing:-.01em}
.paparan{font-size:var(--fs-paparan);line-height:1.08;font-weight:800;letter-spacing:-.02em}
.tajuk{font-size:var(--fs-tajuk);line-height:1.25;font-weight:700;letter-spacing:-.01em}
.subtajuk{font-size:var(--fs-subtajuk);line-height:1.3;font-weight:650}
.angka{font-variant-numeric:tabular-nums;font-weight:650;letter-spacing:-.02em;font-feature-settings:"tnum"}
.angka.besar,.angka.paparan{font-size:var(--fs-besar);line-height:1.1;letter-spacing:-.02em}
.angka.masuk{color:var(--hijau)}.angka.keluar{color:var(--dakwat)}.angka.emas{color:var(--emas-gelap)}
[lang^="zh"] i,[lang^="zh"] em{font-style:normal}
.lbl{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--pudar)}
.note{font-size:var(--fs-nota);line-height:1.55;color:var(--pudar)}
.besar{font-family:var(--sans);font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.baris .v,.slip .j{font-family:var(--sans);font-weight:600;font-variant-numeric:tabular-nums}
.wordmark{display:inline-flex;align-items:baseline;gap:0;font-family:var(--sans);letter-spacing:-.02em;line-height:1.1;color:var(--dakwat);white-space:nowrap;text-decoration:none}
.wordmark .wmA{font-weight:500}.wordmark .wmB{font-weight:800}
.wordmark i{font-style:normal;border-bottom:.11em solid var(--emas);padding-bottom:.04em}
.wordmark .wmTag{display:block;width:100%;font-size:.55em;font-weight:600;letter-spacing:0;color:var(--pudar);margin-top:.35em}
.wordmark.atasCop{color:var(--atas-cop)}.wordmark.atasCop i{border-bottom-color:var(--emas)}
.wordmark .wmTag{flex-basis:100%}.wordmark:has(.wmTag){flex-wrap:wrap}

/* p140 jenama — KOMPONEN ASAS (K0). Hover/fokus/aktif/dilumpuhkan; sasaran ≥ 44 px; telefon → desktop. */
.pill{font-family:var(--sans);font-size:13px;letter-spacing:0;text-transform:none;font-weight:600;border-radius:999px;padding:7px 13px;min-height:36px;background:var(--kertas2);border:1px solid var(--garis);color:var(--dakwat);line-height:1.3;transition:background var(--gerak) ease,border-color var(--gerak) ease,color var(--gerak) ease}
a.pill{color:var(--cop);text-decoration:none;display:inline-flex;align-items:center}
.pill.ikonTeks{display:inline-flex;align-items:center;gap:6px}
.pill:hover{border-color:var(--cop)}
.pill.aktif,.pill.on,.pill[aria-pressed=true]{background:var(--cop-lembut);border-color:var(--cop);color:var(--cop)}
.pill.bad{color:var(--merah);border-color:var(--merah)}
.tag{font-family:var(--sans);font-size:11.5px;letter-spacing:0;text-transform:none;border-radius:999px;padding:1px 8px;font-weight:600;white-space:nowrap;border:1px solid transparent;color:var(--pudar);background:var(--kertas3)}
.tag.ok{background:var(--cop-lembut);color:var(--cop)}
.tag.warn{background:var(--amber-lembut);color:var(--amber)}
.tag.bahaya{background:var(--merah-lembut);color:var(--merah)}
.tag.emas{background:var(--emas-lembut);color:var(--emas-gelap)}
.tag.hijau{background:var(--hijau-lembut);color:var(--hijau)}
.btn{font-family:var(--sans);font-size:15px;font-weight:650;letter-spacing:0;text-transform:none;min-height:48px;padding:12px 18px;border-radius:var(--r);background:var(--cop);color:var(--atas-cop);border:1.5px solid transparent;line-height:1.25;text-align:center;text-decoration:none;cursor:pointer;transition:background var(--gerak) ease,border-color var(--gerak) ease,box-shadow var(--gerak) ease,transform var(--gerak) ease}
.btn:hover{background:var(--cop);background:color-mix(in srgb, var(--cop) 88%, var(--dakwat))}
.btn.ghost{background:var(--kertas2);color:var(--dakwat);border-color:var(--garis)}
.btn.ghost:hover{border-color:var(--cop);color:var(--cop)}
.btn.bahaya,.btn.danger{background:var(--merah);color:#fff}
.btn.bahaya:hover,.btn.danger:hover{background:var(--merah);background:color-mix(in srgb, var(--merah) 88%, var(--dakwat))}
.btn.emas{background:var(--emas);color:var(--atas-emas)}
.btn.kecil{min-height:40px;padding:8px 14px;font-size:14px;border-radius:10px}
.btn.wide{display:block;width:100%;text-align:center}
.btn.ikonTeks{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn.ikonTeks.wide{display:flex}
.btn:active{transform:translateY(1px)}
.btn:disabled,.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed;transform:none}
.btn .ikon{width:20px;height:20px;flex:none;vertical-align:-.25em}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:none;box-shadow:var(--fokus)}
.card{background:var(--kertas2);border-radius:var(--r-kad);padding:var(--s4);border:1px solid var(--garis);margin:10px 0;transition:box-shadow var(--gerak) ease,border-color var(--gerak) ease}
.card:hover,.card:focus-within{box-shadow:var(--bayang)}
.card.tenang,.card.tenang:hover,.card.tenang:focus-within{box-shadow:none}
.card.kuning{border-color:var(--garis);border-color:color-mix(in srgb, var(--amber) 45%, var(--garis));background:var(--amber-lembut);box-shadow:inset 4px 0 0 var(--amber)}
.card.biru{border-color:var(--garis);border-color:color-mix(in srgb, var(--cop) 35%, var(--garis));background:var(--cop-lembut)}
.card.kuning .lbl{color:var(--amber)}
.card.biru .lbl{color:var(--cop)}
/* p148: padanan resit ↔ transaksi (kad dalam lembar resit) */
.card.hijauTenang{border-color:var(--garis);border-color:color-mix(in srgb, var(--hijau) 40%, var(--garis));background:var(--hijau-lembut)}
.card.hijauTenang .lbl{color:var(--hijau)}
.tag.biru{background:var(--cop-lembut);color:var(--cop)}
.padanBaris{display:flex;justify-content:space-between;gap:8px;align-items:center;flex-wrap:wrap;padding:8px 0;border-top:1px solid var(--garis)}
.padanBaris:first-of-type{border-top:0}
.padanTeks{min-width:0;flex:1 1 180px;overflow-wrap:break-word;line-height:1.35}
.padanButang{display:flex;gap:6px;flex-wrap:wrap}
.padanButang .btn{min-height:36px;padding:6px 12px;font-size:13px}
.card.emas{border-color:color-mix(in srgb, var(--emas) 55%, var(--garis));background:var(--emas-lembut)}
.card>.lbl:first-child,:where(.card>h3:first-child){margin-bottom:6px}
.baris{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:11px 0;border-bottom:1px solid var(--garis);min-height:48px;background:none;color:inherit}
.baris:last-child{border-bottom:none}
.baris .t b{display:block;font-size:14.5px;font-weight:600}
.baris .t span,.baris .t small{color:var(--pudar);font-size:13px}
.baris .v{white-space:nowrap;flex:none;font-variant-numeric:tabular-nums}
.baris>.ikon,.baris>.ikonBulat{flex:none}
button.baris:hover .t b,a.baris:hover .t b{color:var(--cop)}
.row{display:flex;gap:9px;align-items:flex-end;flex-wrap:wrap}
.row>*{flex:1;min-width:110px}
.row.rapat{gap:6px}
.row.rapat>*{flex:0 0 auto;min-width:0}
.bantuanBaris{display:flex;gap:8px;align-items:flex-start;font-size:var(--fs-nota);color:var(--pudar);line-height:1.5;margin:6px 0}
.bantuanBaris .ikon{flex:none;width:18px;height:18px;margin-top:2px;color:var(--cop)}
.ikon{display:inline-block;width:24px;height:24px;vertical-align:-.3em;flex:none;color:inherit}
.ikon svg{width:100%;height:100%;display:block}
.ikon.kecil{width:18px;height:18px}.ikon.besar{width:32px;height:32px}
.ikonBulat{width:40px;height:40px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:var(--cop-lembut);color:var(--cop);flex:none}
.ikonBulat.emas{background:var(--emas-lembut);color:var(--emas-gelap)}.ikonBulat.hijau{background:var(--hijau-lembut);color:var(--hijau)}
.ikonBulat.amber{background:var(--amber-lembut);color:var(--amber)}.ikonBulat.merah{background:var(--merah-lembut);color:var(--merah)}
.ikonBulat .ikon{width:22px;height:22px}
/* Panel wang "wang kertas" (elemen yang diingati): ungu dalam, jalur emas nipis, angka ringgit besar. */
.hero{border-radius:var(--r-kad);background:var(--kertas2);border:1px solid var(--garis);padding:18px;margin:14px 0}
.hero:has(.besar){position:relative;overflow:hidden;border:none;padding:20px 20px 18px;color:#FFFDF9;background:
    repeating-radial-gradient(circle at 88% 20%, rgba(255,255,255,.07) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 1px, transparent 1px 7px),
    linear-gradient(135deg, #30205F, #3F2A86 55%, #5A41AD)}
.hero:has(.besar)::after{content:"";position:absolute;inset:7px;border:1px solid rgba(255,255,255,.22);border-radius:11px;pointer-events:none}
.hero:has(.besar)::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--emas);opacity:.95}
.hero:has(.besar) .lbl,.hero:has(.besar) .note{color:rgba(255,253,249,.86)}
.hero:has(.besar) .besar{color:#fff;font-size:42px;font-weight:650;letter-spacing:-.02em}
.hero:has(.besar) a{color:#fff}
.hero:has(.besar) .tag{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.28)}
@media(prefers-color-scheme:dark){
  :root:not([data-tema=terang]) .hero:has(.besar){background:
    repeating-radial-gradient(circle at 88% 20%, rgba(255,255,255,.05) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(115deg, rgba(255,255,255,.04) 0 1px, transparent 1px 7px),
    linear-gradient(135deg, #1E1440, #2B1E5C 55%, #3F2A86)}
}
:root[data-tema=gelap] .hero:has(.besar){background:
    repeating-radial-gradient(circle at 88% 20%, rgba(255,255,255,.05) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(115deg, rgba(255,255,255,.04) 0 1px, transparent 1px 7px),
    linear-gradient(135deg, #1E1440, #2B1E5C 55%, #3F2A86)}
/* Keadaan: kosong (ikon + satu ayat + satu butang), memuat (rangka), ralat (cuba lagi), luar talian (jalur). */
.kosong{text-align:center;padding:36px 18px;color:var(--pudar);display:flex;flex-direction:column;align-items:center;gap:10px}
.kosong .ikonBulat{width:56px;height:56px;border-radius:18px;margin-bottom:2px}
.kosong .ikonBulat .ikon{width:28px;height:28px}
:where(.kosong) :is(b,h3){color:var(--dakwat);font-size:var(--fs-subtajuk);font-weight:650;margin:0}
:where(.kosong) p{margin:0;max-width:34ch;font-size:var(--fs-nota);line-height:1.55}
.kosong .btn{margin-top:6px}
.memuat{position:relative;overflow:hidden;background:var(--kertas3);border-radius:10px;min-height:14px;color:transparent!important;user-select:none}
.memuat::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);animation:lbKilau 1.3s ease-in-out infinite}
.memuat.baris,.memuat.teks{display:block;height:14px;margin:8px 0;border-bottom:none}
.memuat.kad{height:88px;border-radius:var(--r-kad);margin:10px 0}
.memuat.bulat{width:40px;height:40px;border-radius:50%}
@keyframes lbKilau{to{transform:translateX(100%)}}
.ralatKad{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--r-kad);background:var(--merah-lembut);border:1px solid color-mix(in srgb, var(--merah) 35%, var(--garis));color:var(--dakwat);margin:10px 0}
.ralatKad .ikon{color:var(--merah);flex:none;margin-top:1px}
.ralatKad b{display:block;font-weight:650}
.ralatKad p{margin:2px 0 0;font-size:var(--fs-nota);color:var(--pudar)}
.ralatKad .btn{margin-left:auto;flex:none}
.luarTalian{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 14px;font-size:var(--fs-nota);font-weight:600;background:var(--amber-lembut);color:var(--amber);border-bottom:1px solid color-mix(in srgb, var(--amber) 30%, transparent)}
.luarTalian .ikon{width:18px;height:18px}
/* Jadual responsif: lajur angka kanan; pada telefon setiap baris menjadi kad berlabel (data-lbl). */
.jadual{width:100%;border-collapse:collapse;font-size:14.5px}
.jadual th{text-align:left;font-size:12.5px;font-weight:600;color:var(--pudar);padding:8px 10px;border-bottom:1px solid var(--garis);letter-spacing:0;text-transform:none}
.jadual td{padding:10px;border-bottom:1px solid var(--garis);vertical-align:top;overflow-wrap:break-word}
.jadual tr:last-child td{border-bottom:none}
.jadual th.n,.jadual td.n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.jadual tbody tr:hover td{background:var(--cop-lembut);background:color-mix(in srgb, var(--cop) 5%, transparent)}
.jadual tfoot td{font-weight:650;border-top:2px solid var(--garis);border-bottom:none}
.jadualBalut{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
@media(max-width:600px){
  .jadual.kad thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .jadual.kad tr{display:block;border:1px solid var(--garis);border-radius:var(--r);padding:6px 12px;margin:8px 0;background:var(--kertas2)}
  .jadual.kad td{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dashed var(--garis);padding:7px 0;text-align:right}
  .jadual.kad td:last-child{border-bottom:none}
  .jadual.kad td::before{content:attr(data-lbl);color:var(--pudar);font-size:12.5px;font-weight:600;text-align:left;flex:1}
}
/* Carta SVG (palang/lengkung — bukan .bar/.garis yang sudah dipakai UI) — warna token; <title> & jadual data tersembunyi (.sr) untuk pembaca skrin. */
.carta{display:block;width:100%;height:auto;font-family:var(--sans);font-size:11px;color:var(--pudar);overflow:visible}
.carta .palang{fill:var(--cop)}.carta .palang.emas{fill:var(--emas)}.carta .palang.pudar{fill:var(--kertas3)}.carta .palang.hijau{fill:var(--hijau)}.carta .palang.merah{fill:var(--merah)}
.carta .lengkung{fill:none;stroke:var(--cop);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.carta .lengkung.emas{stroke:var(--emas)}.carta .kawasan{fill:var(--cop);opacity:.12}
.carta .paksi{stroke:var(--garis);stroke-width:1}.carta .grid{stroke:var(--garis);stroke-dasharray:2 4;stroke-width:1}
.carta text{fill:currentColor}.carta .titik{fill:var(--kertas2);stroke:var(--cop);stroke-width:2}
.cartaPetunjuk{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--pudar);margin:6px 0 0}
.cartaPetunjuk i{display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--cop);margin-right:5px;vertical-align:-1px}
.cartaPetunjuk i.emas{background:var(--emas)}.cartaPetunjuk i.pudar{background:var(--kertas3)}.cartaPetunjuk i.hijau{background:var(--hijau)}.cartaPetunjuk i.merah{background:var(--merah)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Statistik: grid kad kecil (label · angka · nota) — 2 lajur telefon, 3–4 desktop. */
.statGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:10px 0}
@media(min-width:640px){.statGrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1024px){.statGrid{grid-template-columns:repeat(4,minmax(0,1fr))}.statGrid.tiga{grid-template-columns:repeat(3,minmax(0,1fr))}}
.stat{background:var(--kertas2);border:1px solid var(--garis);border-radius:var(--r-kad);padding:12px 14px;min-width:0;display:flex;flex-direction:column;gap:2px}
.stat .lbl{font-size:12.5px}
.stat .angka{font-size:clamp(16px,5vw,22px);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat .note{font-size:12.5px;margin:0}
.stat.cop{border-color:color-mix(in srgb, var(--cop) 35%, var(--garis));background:var(--cop-lembut)}
.stat.emas{border-color:color-mix(in srgb, var(--emas) 55%, var(--garis));background:var(--emas-lembut)}
.stat.hijau{background:var(--hijau-lembut)}.stat.merah{background:var(--merah-lembut)}
button.stat{text-align:left;cursor:pointer;transition:border-color var(--gerak) ease,box-shadow var(--gerak) ease}
button.stat:hover{border-color:var(--cop);box-shadow:var(--bayang)}
/* Lembar: pengepala dengan Kembali (.kepala). Bar tab/segmen (.tabBar) = komponen tunggal dalam public/tab.css (pusingan 142). .lembarhd lama kekal berfungsi. */
.lembar .kepala{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:10px;padding:10px 14px;min-height:58px;background:var(--kertas);background:color-mix(in srgb, var(--kertas) 92%, transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--garis)}
.lembar .kepala .kembali{display:inline-flex;align-items:center;gap:4px;min-height:44px;min-width:44px;padding:0 10px 0 6px;border-radius:999px;color:var(--cop);font-weight:650;font-size:14.5px;background:none}
.lembar .kepala .kembali:hover{background:var(--cop-lembut)}
:where(.lembar .kepala) h2,.lembar .kepala .tajuk{flex:1;min-width:0;font-size:var(--fs-subtajuk);font-weight:700;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lembar .kepala .aksiKepala{flex:none;display:flex;gap:6px}
/* Gerakan ≤ 200 ms; dihormati prefers-reduced-motion. */
@media(prefers-reduced-motion:reduce){.memuat::after{animation:none}.btn,.card,.pill,.stat{transition:none}.btn:active{transform:none}}
@media(max-width:380px){.btn{font-size:14.5px;padding:12px 14px}.hero:has(.besar) .besar{font-size:34px}.statGrid{gap:8px}.stat{padding:10px 12px}}
/* Tiada skrol mendatar: kad, jadual & teks membalut. */
.card,.hero,.stat,.kosong,.ralatKad{overflow-wrap:break-word;min-width:0}

/* ── Pengepala & navigasi ───────────────────────────────────────────── */
header{background:var(--kertas);background:color-mix(in srgb, var(--kertas) 92%, transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hd{padding:10px 14px;min-height:58px}
.hd .nm{font-size:18px;font-weight:700;letter-spacing:-.015em;color:var(--cop)}
.pilihTahun{font-family:var(--sans);font-size:13px;font-weight:600;min-width:0;max-width:44vw;text-overflow:ellipsis}
.hd{gap:8px}
.hd .nm{flex:none}
.hd .pill{white-space:nowrap}
#awanBtn{padding:7px 11px}
.hd #awanBtn,.hd .bantuan{flex:none}
@media(max-width:359px){.hd .nm{display:none}}
@media(max-width:420px){
  .hd .nm{font-size:16px}
  .pilihTahun{font-size:12.5px;padding-left:10px}
}
/* Pusingan 141 (reka): butang bantuan "?" 44 px (sasaran sentuh) & HANYA <button> — kelas "bantuan" juga dipakai titik kalendar (i.bantuan, STR). */
button.bantuan{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--garis);background:var(--kertas2);color:var(--cop);font-weight:700;font-size:18px;line-height:1;flex:none}
nav{background:var(--kertas2)}
.navin{height:66px}
.nb{font-family:var(--sans);font-size:11.5px;letter-spacing:0;text-transform:none;font-weight:600;gap:4px;padding:6px 0;border-radius:12px}
.nb svg{width:22px;height:22px}
.nb.on{color:var(--cop)}
.nb.on svg{background:var(--cop-lembut);border-radius:999px;padding:2px 12px;box-sizing:content-box;width:22px}
.snap{width:62px;height:62px;background:var(--cop);color:var(--atas-cop);border:4px solid var(--kertas2);box-shadow:0 4px 14px transparent;box-shadow:0 4px 14px color-mix(in srgb, var(--cop) 40%, transparent)}
.snap svg{width:26px;height:26px}

.aksi{border-radius:var(--r-besar);background:var(--cop);border-color:var(--cop);color:var(--atas-cop);padding:18px;min-height:76px}
.aksi.kedua{background:var(--kertas2);color:var(--dakwat);border:1.5px solid var(--garis)}
.aksi.kedua svg{color:var(--cop)}
.aksi b{font-size:17px;font-weight:650}
.aksi span{opacity:.82}

.slip{border-radius:14px;padding:13px 14px;min-height:56px}
.sect .lbl{font-size:14px;color:var(--dakwat)}
.bar{height:8px}
.bar i{background:var(--hijau)}

/* ── Medan borang ───────────────────────────────────────────────────── */
:where(.fld) label{font-size:13.5px;font-weight:600;color:var(--pudar)}
.fld input,.fld select,.fld textarea{border-radius:var(--r);border:1.5px solid var(--garis);background:var(--kertas2);min-height:48px;padding:11px 13px}
input[type=checkbox],input[type=radio]{accent-color:var(--cop)}
/* Medan tarikh ikut format tetapan (8 Okt 2026): input asli memaparkan tarikh ikut LOKAL PERANTI (Android en-US → MM/DD/YYYY),
   bukan pilihan pengguna (Lagi › Paparan). Pembalut .tarikhPilih (app.js hiasTarikh): teks kelihatan = format tetapan;
   input asli di atasnya, telus — ketukan membuka pemilih tarikh peranti seperti biasa. Rupa sama dengan .fld input. */
.tarikhPilih{position:relative;display:block;width:100%}
.tarikhPilih .tarikhTeks{display:flex;align-items:center;min-height:48px;width:100%;padding:11px 13px;border:1.5px solid var(--garis);border-radius:var(--r);background:var(--kertas2);font-size:16px;color:var(--dakwat);box-sizing:border-box;line-height:1.3}
.tarikhPilih .tarikhTeks.kosong{color:var(--pudar)}
.tarikhPilih .tarikhTeks::after{content:"";margin-left:auto;width:16px;height:16px;flex:none;opacity:.7;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center/contain no-repeat}
.tarikhPilih>input[type=date]{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;padding:0;border:0;opacity:0;cursor:pointer;font-size:16px;-webkit-appearance:none;appearance:none}
.tarikhPilih>input[type=date]:disabled{cursor:default}
.tarikhPilih.lumpuh .tarikhTeks{opacity:.55}
.tarikhPilih:has(>input:disabled) .tarikhTeks{opacity:.55}
.tarikhPilih:focus-within .tarikhTeks{outline:2px solid var(--cop);outline-offset:1px}
.row .fld>.tarikhPilih{min-width:0}
/* Kotak input di luar .fld (jadual editor, jadual CP500) */
.card input:not([type=checkbox]):not([type=radio]):not([type=range]),.card select,.card textarea{border:1.5px solid var(--garis);border-radius:10px;background:var(--kertas2);padding:8px 10px;min-height:42px;width:100%}
.card table input{min-width:64px}
.card table td{padding:4px 4px 4px 0;vertical-align:middle}
input[type=range]{accent-color:var(--cop);width:100%}

/* ── Lembaran, toast, modal ─────────────────────────────────────────── */
.lembar{background:var(--kertas)}
.lembarhd{background:var(--kertas2);min-height:58px}
#lembarBantuan{z-index:66}
/* Lembar tertutup keluar daripada susunan Tab & pohon kebolehcapaian (sebelum ini papan kekunci & pembaca skrin boleh masuk ke butang
   lembar yang tidak kelihatan); semasa membuka ia serta-merta (fokus boleh dialihkan ke dalam lembar). */
/* Pusingan 120 (ujian automatik Safari/WebKit, 2 larian CI): lembar TERTUTUP = display:none — keluar daripada susunan Tab & pohon
   kebolehcapaian, dan TIADA sifat DIWARISI (visibility) yang bertukar bila lembar dibuka. Dahulu visibility:hidden ↔ visible (dengan atau
   tanpa transisi): enjin WebKit mengekalkan visibility:hidden LAPUK pada elemen di dalam lembar (borang Wang masuk, medan waranti resit,
   kawalan tempoh) walaupun lembar sudah kelihatan — tidak boleh diketik pada iPhone/iPad/Mac. Gerak naik/turun kini @keyframes pada
   transform (tiada transisi); .menutup = app.js mengekalkan lembar selama animasi turun (≈ .22 s) kemudian membuangnya sendiri. */
.lembar{display:none;transform:none;transition:none}
.lembar.on,.lembar.menutup{display:block}
.lembar.on{animation:lembarNaik .22s ease}
.lembar.menutup{animation:lembarTurun .22s ease forwards;pointer-events:none}
@keyframes lembarNaik{from{transform:translateY(100%)}to{transform:none}}
@keyframes lembarTurun{from{transform:none}to{transform:translateY(100%)}}
@media(prefers-reduced-motion:reduce){.lembar.on,.lembar.menutup{animation:none}}
.toast{border-radius:999px;padding:12px 18px;font-size:14.5px;bottom:96px}
.modal,.statusKad{border-radius:var(--r-besar)}

/* ── Pusat bantuan ──────────────────────────────────────────────────── */
details.bab{background:var(--kertas2);border:1px solid var(--garis);border-radius:14px;margin:8px 0;overflow:hidden}
details.bab summary{list-style:none;cursor:pointer;padding:15px 16px;font-weight:650;font-size:16px;display:flex;gap:10px;align-items:center;justify-content:space-between;min-height:52px}
details.bab summary::-webkit-details-marker{display:none}
details.bab summary::after{content:"";width:9px;height:9px;flex:none;border-right:2px solid var(--pudar);border-bottom:2px solid var(--pudar);transform:rotate(45deg);margin-left:auto}
details.bab[open] summary::after{transform:rotate(225deg)}
details.bab summary .tag{margin-left:auto}
.babIsi{padding:0 16px 16px;line-height:1.6;max-width:68ch}
.babIsi p{margin:8px 0}
.babIsi ul,.babIsi ol{padding-left:20px;margin:8px 0}
.babIsi li{margin:6px 0}
.babIsi dt{font-weight:650;margin-top:12px}
.babIsi dd{color:var(--pudar);margin:2px 0 0}
.babIsi .nota{background:var(--cop-lembut);border-radius:10px;padding:10px 12px;font-size:14px}

/* ── Kedalaman halus: garis nipis & cahaya latar ────────────────────── */
body{background:radial-gradient(900px 420px at 110% -10%, transparent, transparent 70%),
  radial-gradient(700px 380px at -20% 0%, transparent, transparent 70%),
  var(--kertas);background:
  radial-gradient(900px 420px at 110% -10%, color-mix(in srgb, var(--cop) 9%, transparent), transparent 70%),
  radial-gradient(700px 380px at -20% 0%, color-mix(in srgb, var(--hijau) 6%, transparent), transparent 70%),
  var(--kertas);background-attachment:fixed}
.card,.slip,.aksi.kedua,details.bab{border-color:var(--garis);border-color:color-mix(in srgb, var(--dakwat) 9%, transparent)}
.lembar{background:var(--kertas)}

/* ── Pusat bantuan & tutorial ───────────────────────────────────────── */
.tuHabHd{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;margin:14px 0 4px}
.tuSeksyen{font-size:13.5px;font-weight:650;color:var(--pudar);margin:20px 0 8px}
.tuKad{display:flex;align-items:center;gap:13px;width:100%;text-align:left;padding:14px;border-radius:16px;background:var(--kertas2);border:1px solid var(--garis);border:1px solid color-mix(in srgb, var(--dakwat) 9%, transparent);transition:transform .18s ease,border-color .18s ease}
.tuKad:hover{border-color:var(--cop)}
.tuKad:active{transform:scale(.99)}
.tuKad.tuUtama{padding:18px;background:linear-gradient(135deg, var(--cop-lembut), var(--kertas2));border-color:var(--garis);border-color:color-mix(in srgb, var(--cop) 35%, transparent)}
.tuIkon{width:44px;height:44px;flex:none;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--cop);color:var(--atas-cop);font-weight:700;font-size:17px}
.tuKad:not(.tuUtama) .tuIkon{background:var(--cop-lembut);color:var(--cop)}
.tuKadTeks{flex:1;min-width:0}.tuKadTeks b{display:block;font-size:15.5px}
.tuKadTeks span{display:block;font-size:13.5px;color:var(--pudar)}
.tuKad.tuUtama .tuKadTeks b{font-size:17px}
.tuMinit{font-size:12px;font-weight:650;color:var(--pudar);white-space:nowrap}
.tuGrid{display:grid;grid-template-columns:1fr;gap:8px}
@media(min-width:620px){.tuGrid{grid-template-columns:1fr 1fr}}
.tuSenarai{background:var(--kertas2);border:1px solid var(--garis);border:1px solid color-mix(in srgb, var(--dakwat) 9%, transparent);border-radius:16px;overflow:hidden}
.tuRujukan{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:52px;padding:0 16px;text-align:left;font-weight:600;border-bottom:1px solid var(--garis);border-bottom:1px solid color-mix(in srgb, var(--dakwat) 7%, transparent)}
.tuRujukan:last-child{border-bottom:none}
.tuRujukan i{font-style:normal;color:var(--pudar);font-size:20px}
.tuBaca{padding:14px 0 30px}.tuBaca h2{margin:14px 0 6px}
.tuBaca .babIsi{padding:0}

.tuPemain{padding:12px 0 30px;animation:tuMasuk .22s ease}
@keyframes tuMasuk{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.tuPemainHd{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
.tuPemainHd h3{font-size:19px;line-height:1.3}
.tuKecil{font-size:13px;color:var(--pudar)}
.tuBerjaya{background:var(--kertas2);background:color-mix(in srgb, var(--hijau) 14%, var(--kertas2));color:var(--hijau);border-radius:12px;padding:10px 12px;font-weight:650;margin:10px 0}
.tuKemajuan{height:6px;border-radius:99px;background:var(--kertas3);overflow:hidden}
.tuKemajuan i{display:block;height:100%;background:var(--cop);transition:width .3s ease}

/* simulator */
.tuSim{display:grid;gap:14px}
@media(min-width:720px){.tuSim{grid-template-columns:300px 1fr;align-items:start}}
.tuSimSkrin{position:relative;max-width:300px;margin:0 auto;width:100%}
.tuMock{border-radius:26px;border:6px solid var(--dakwat);background:var(--kertas);padding:10px 10px 0;min-height:430px;display:flex;flex-direction:column;gap:8px;font-size:12px;overflow:hidden}
.tuMockHd{display:flex;align-items:center;gap:6px}.tuMockHd b{color:var(--cop)}
.tuSp{flex:1}.tuChip{border:1px solid var(--garis);border-radius:99px;padding:2px 7px;background:var(--kertas2)}
.tuBulat{width:20px;height:20px;border-radius:50%;border:1px solid var(--garis);display:flex;align-items:center;justify-content:center;background:var(--kertas2)}
.tuMockWang{border-radius:10px;padding:12px;color:#fff;background:linear-gradient(135deg,#30205F,#5A41AD)}
.tuMockWang small{display:block;opacity:.85}.tuMockWang strong{font-size:22px}
.tuMockBtn{border-radius:12px;padding:12px;background:var(--kertas2);border:1px solid var(--garis);font-weight:650}
.tuMockBtn.utama{background:var(--cop);color:var(--atas-cop);border-color:var(--cop)}
.tuMockKad{border-radius:10px;padding:10px;background:var(--kertas2);border:1px solid var(--garis)}
.tuBar{height:6px;border-radius:9px;background:var(--kertas3);margin:6px 0;overflow:hidden}
.tuBar i{display:block;height:100%;background:var(--hijau)}.tuBar i.penuh{background:var(--amber)}
.tuMockDua{display:grid;grid-template-columns:1fr 1fr;gap:8px}
:where(.tuMockDua) span{border-radius:10px;padding:10px;text-align:center;background:var(--kertas2);border:1px solid var(--garis)}
.tuMockNav .tuTitik{top:-10px;right:-4px;transform:none}
.tuMockNav .tuTitik.aktif{transform:scale(1.15)}
.tuMockNav{margin-top:auto;display:grid;grid-template-columns:repeat(5,1fr);align-items:center;text-align:center;padding:10px 0;background:var(--kertas2);border-top:1px solid var(--garis);margin-left:-10px;margin-right:-10px;font-size:10.5px}
.tuMockKam{width:34px;height:34px;border-radius:50%;background:var(--cop);color:var(--atas-cop);display:flex;align-items:center;justify-content:center;margin:0 auto}
.tuT{position:relative}
.tuBalik{color:var(--cop);font-weight:650;min-height:44px;padding:0 2px;margin-bottom:6px}
.tuTitik{position:absolute;right:-8px;top:50%;transform:translate(0,-50%);z-index:2;width:30px;height:30px;border-radius:50%;background:var(--amber);color:#fff;font-weight:700;font-size:13px;border:2px solid #fff;box-shadow:0 0 0 0 var(--amber);box-shadow:0 0 0 0 color-mix(in srgb, var(--amber) 60%, transparent);animation:tuDenyut 1.8s ease-out infinite}
.tuTitik.dilihat{background:var(--cop);animation:none}
.tuTitik.aktif{background:var(--dakwat);color:var(--kertas);transform:translate(0,-50%) scale(1.15);animation:none}
@keyframes tuDenyut{0%{box-shadow:0 0 0 0 var(--amber);box-shadow:0 0 0 0 color-mix(in srgb, var(--amber) 60%, transparent)}
  70%{box-shadow:0 0 0 12px transparent}100%{box-shadow:0 0 0 0 transparent}}
.tuPanel{background:var(--kertas2);border:1px solid var(--garis);border:1px solid color-mix(in srgb, var(--dakwat) 9%, transparent);border-radius:16px;padding:16px}
.tuPanel h4{font-size:17px;margin:10px 0 4px}.tuPanel p{margin:6px 0 12px}

/* sandbox */
.tuArahan{font-weight:600;margin-bottom:10px}
.tuDoks{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tuDok{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border-radius:14px;min-height:92px;background:var(--kertas2);border:1.5px solid var(--garis);font-size:12.5px;font-weight:600;cursor:grab;transition:border-color .18s ease,transform .18s ease}
.tuDok span{font-size:26px}.tuDok.aktif{border-color:var(--cop);background:var(--cop-lembut)}
.tuDok:active{transform:scale(.97)}
.tuZon{margin:12px 0;min-height:150px;border:2px dashed var(--garis);border:2px dashed color-mix(in srgb, var(--cop) 45%, var(--garis));border-radius:16px;display:flex;align-items:center;justify-content:center;padding:14px;color:var(--pudar);transition:background .2s ease}
.tuZon.atas{background:var(--cop-lembut)}
.tuKertas{position:relative;width:100%;max-width:280px;background:#fff;color:#222;border-radius:4px;padding:12px 14px;font:12.5px/1.6 ui-monospace,Menlo,monospace;box-shadow:0 2px 10px rgba(0,0,0,.12);overflow:hidden}
.tuImbas{position:absolute;left:0;right:0;height:26px;top:-26px;background:linear-gradient(transparent, transparent, transparent);background:linear-gradient(transparent, color-mix(in srgb, var(--cop) 45%, transparent), transparent);animation:tuSapu 1.25s ease-in-out forwards}
@keyframes tuSapu{to{top:100%}}
.tuFail{display:inline-block;max-width:100%;font-size:13.5px;color:var(--cop);font-weight:600;cursor:pointer;margin:2px 0 8px}
/* Kawalan fail asli ~308px lebar dalam Chromium — tanpa had ia melimpah pada skrin 280–320px (sapuan Okt 2026). */
.tuFail input{display:block;width:100%;max-width:100%;margin-top:6px;font-size:13px}
.tuHasil{background:var(--kertas2);border:1px solid var(--garis);border:1px solid color-mix(in srgb, var(--dakwat) 9%, transparent);border-radius:16px;padding:6px 14px 12px}
.tuMedan{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--garis);animation:tuMasuk .25s ease}
.tuMedan span{color:var(--pudar)}.tuMedan b{text-align:right}

/* stepper */
.tuTitian{list-style:none;display:flex;justify-content:space-between;position:relative;margin:4px 6px 16px;padding:0}
.tuTitian::before{content:"";position:absolute;left:12px;right:12px;top:50%;height:2px;background:var(--garis)}
.tuTitian li{position:relative}
.tuTitian button{width:36px;height:36px;border-radius:50%;background:var(--kertas2);border:2px solid var(--garis);font-weight:700;color:var(--pudar);transition:all .2s ease}
.tuTitian button.kini{border-color:var(--cop);color:var(--cop);box-shadow:var(--fokus)}
.tuTitian button.siap{background:var(--cop);border-color:var(--cop);color:var(--atas-cop)}
.tuLangkah{background:var(--kertas2);border:1px solid var(--garis);border:1px solid color-mix(in srgb, var(--dakwat) 9%, transparent);border-radius:16px;padding:18px;animation:tuMasuk .22s ease}
.tuLangkah h4{font-size:19px;margin:4px 0 6px}.tuLangkah p{margin:0 0 10px}
.tuLencana{display:inline-block;font-size:12.5px;font-weight:650;color:var(--cop);background:var(--cop-lembut);border-radius:8px;padding:3px 9px;margin-bottom:12px}
.tuTanda{display:flex;align-items:center;gap:10px;min-height:48px;margin-bottom:8px;cursor:pointer;font-weight:600}
.tuTanda input{width:24px;height:24px}
.tuNavLangkah{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}

/* kalkulator */
.tuKira{display:grid;gap:12px}
@media(min-width:720px){.tuKira{grid-template-columns:1fr 280px;align-items:start}.tuKira>.tuKecil{grid-column:1/-1}}
.tuKiraInput{display:grid;gap:10px}
.tuGelongsor{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;background:var(--kertas2);border:1px solid var(--garis);border:1px solid color-mix(in srgb, var(--dakwat) 9%, transparent);border-radius:14px;padding:12px 14px}
.tuGelongsor span{font-weight:600}.tuGelongsor input{grid-column:1/-1;height:28px}
.tuTicker{position:sticky;top:70px;border-radius:16px;padding:14px 16px;color:#FFFDF9;background:linear-gradient(135deg,#30205F,#5A41AD)}
.tuTicker div{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.tuTicker div:last-child{border-bottom:none}
.tuTicker span{opacity:.86}.tuTicker .utama b{font-size:22px}
.tuTicker .jimat b{color:var(--emas)}

/* togol */
.tuTogol{display:grid;gap:10px}
.tuSoalan{background:var(--kertas2);border:1px solid var(--garis);border:1px solid color-mix(in srgb, var(--dakwat) 9%, transparent);border-radius:14px;padding:14px;transition:border-color .2s ease}
.tuSoalan.betul{border-color:var(--hijau)}.tuSoalan.salah{border-color:var(--amber)}
.tuSoalan p{margin:8px 0 0;font-size:14px}
/* senarai beli */
.tuBarang{list-style:none;padding:0;margin:0 0 12px;background:var(--kertas2);border-radius:16px;border:1px solid var(--garis);border:1px solid color-mix(in srgb, var(--dakwat) 9%, transparent);overflow:hidden}
.tuBarang li{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--garis);transition:background .25s ease}
.tuBarang li:last-child{border-bottom:none}
.tuBarang li.siap{background:transparent;background:color-mix(in srgb, var(--hijau) 8%, transparent)}
.tuBarang li.siap .tuBarangNama{text-decoration:line-through;text-decoration-color:var(--pudar)}
.tuKotak{width:24px;height:24px;flex:none;border-radius:7px;border:2px solid var(--garis);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--hijau)}
.tuBarang li.siap .tuKotak{border-color:var(--hijau)}
.tuBarangNama{flex:1;font-weight:600;font-size:14.5px}
.tuBarangHarga{text-align:right;font-size:13.5px;white-space:nowrap}
.tuBarangHarga s{color:var(--pudar)}.tuBarangHarga small{color:var(--pudar)}
.tuTanya{background:var(--amber-lembut);border-radius:14px;padding:14px;margin-bottom:12px}
.tuDuaBtn{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.tuRingkas{display:flex;justify-content:space-between;padding:12px 14px;border-radius:12px;background:var(--cop-lembut);font-weight:650}

/* boleh tuntut */
.tuChips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.tuChipBtn{border-radius:999px;border:1.5px solid var(--garis);background:var(--kertas2);padding:9px 14px;font-weight:600;font-size:13.5px;min-height:42px;transition:all .18s ease}
.tuChipBtn.pilih{background:var(--cop);border-color:var(--cop);color:var(--atas-cop)}
.tuJawapan{background:var(--kertas2);border:1px solid var(--garis);border-left:4px solid var(--pudar);border-radius:14px;padding:14px;animation:tuMasuk .22s ease}
.tuJawapan.ya{border-left-color:var(--hijau)}.tuJawapan.mungkin{border-left-color:var(--amber)}
.tuJawapan.tidak{border-left-color:var(--merah)}
.tuJawapan h4{margin:8px 0 2px;font-size:16px}

/* peranan */
.tuKeb{list-style:none;padding:0;margin:12px 0;background:var(--kertas2);border-radius:16px;border:1px solid var(--garis);border:1px solid color-mix(in srgb, var(--dakwat) 9%, transparent);overflow:hidden}
.tuKeb li{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--garis);font-size:14.5px}
.tuKeb li:last-child{border-bottom:none}
.tuKeb li.mati{color:var(--pudar)}
.tuKeb li span:first-child{width:22px;flex:none;font-weight:700;color:var(--hijau)}
.tuKeb li.mati span:first-child{color:var(--merah)}
.tuSuis{margin-left:auto;width:46px;height:28px;border-radius:99px;background:var(--kertas3);position:relative;flex:none;transition:background .2s ease}
.tuSuis::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s ease}
.tuSuis.on{background:var(--cop)}.tuSuis.on::after{transform:translateX(18px)}

/* ambil alih tuntutan */
.tuDuaPanel{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:12px}
@media(min-width:560px){.tuDuaPanel{grid-template-columns:1fr 1fr}}
.tuPanelKecil{background:var(--kertas2);border:1px solid var(--garis);border:1px solid color-mix(in srgb, var(--dakwat) 9%, transparent);border-radius:16px;padding:14px}
.tuPanelKecil h4{font-size:16px;margin:0 0 2px}
.tuResitKad{border-radius:12px;border:1px solid var(--garis);padding:12px;margin:10px 0;font-weight:600;background:var(--kertas)}
.tuTuntut{border-radius:12px;padding:11px 12px;font-size:13.5px;font-weight:600;transition:background .25s ease,color .25s ease}
.tuTuntut.ada{background:var(--cop-lembut);color:var(--cop)}
.tuTuntut.kosong{background:var(--kertas3);color:var(--pudar)}

@media(prefers-reduced-motion:reduce){.tuTitik,.tuImbas,.tuPemain,.tuLangkah,.tuMedan,.tuJawapan{animation:none!important}}

/* ── Teks besar ─────────────────────────────────────────────────────── */
body.besar{font-size:18px}
body.besar .lbl{font-size:14.5px}
body.besar .btn{font-size:17px;min-height:54px}
body.besar .nb{font-size:13px}
body.besar details.bab summary{font-size:18px}
body.besar .hero:has(.besar) .besar{font-size:48px}

@media(max-width:380px){
  .btn{font-size:14.5px;padding:12px 14px}
  .hero:has(.besar) .besar{font-size:34px}
}
@media(prefers-reduced-motion:reduce){.btn:active{transform:none}}

.tuBarang li.siap .tag{text-decoration:none}

/* kad log masuk / daftar */

/* seksyen */

/* div role=navigation, BUKAN <nav>: gaya global nav{position:fixed} ialah bar navigasi bawah app. */

/* ── Jalur konteks di bawah pengepala ─────────────────────────────── */
.hdSub{display:flex;align-items:center;gap:8px;padding:0 14px 9px;max-width:var(--lebar,560px);margin:0 auto;font-size:12.5px;flex-wrap:nowrap;overflow:hidden}
.hdSub .hdChip{flex:none}
.hdSub .spacer{flex:1}
.hdChip{border-radius:999px;padding:4px 11px;font-weight:650;font-size:12px;line-height:1.5;background:var(--kertas3);color:var(--pudar);border:1px solid transparent}
.hdChip.admin{background:var(--cop-lembut);color:var(--cop)}
.hdChip.member{background:var(--kertas3);color:var(--pudar)}
.hdChip.auditor{background:var(--amber-lembut);color:var(--amber)}
.hdChip.cuba{background:var(--amber-lembut);color:var(--amber)}
.hdChip.pemilik{background:var(--dakwat);color:var(--kertas);min-height:26px;cursor:pointer;transition:transform .18s ease}
.hdChip.pemilik:active{transform:scale(.97)}
.hdRumah{font-weight:650;color:var(--dakwat);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw}
.hdNota{color:var(--pudar);white-space:nowrap}
@media(max-width:380px){.hdRumah{max-width:30vw}.hdNota{display:none}}

/* ── Pusat bantuan: rupa dikemas kini ─────────────────────────────── */
.tuHabHero{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;background:linear-gradient(135deg,var(--cop-lembut),transparent 70%);border-radius:18px;padding:16px;margin:12px 0 4px}
:where(.tuHabHero) h2{margin:0}
.tuCariBar{position:sticky;top:0;z-index:3;padding:10px 0 6px;background:linear-gradient(var(--kertas) 72%, transparent)}
.tuCariKotak{display:flex;align-items:center;gap:10px;background:var(--kertas2);border-radius:999px;padding:0 16px;border:1.5px solid var(--garis);min-height:50px;transition:border-color .2s ease,box-shadow .2s ease}
.tuCariKotak:focus-within{border-color:var(--cop);box-shadow:var(--fokus)}
.tuCariKotak span{color:var(--pudar);font-size:19px;line-height:1}
.tuCariKotak input{flex:1;border:none;background:none;min-height:48px;font-size:16px;color:var(--dakwat);outline:none;padding:0}
.tuKad{position:relative;overflow:hidden}
.tuKad::after{content:"›";position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--pudar);font-size:22px;transition:transform .2s ease,color .2s ease}
.tuKad:hover::after{color:var(--cop);transform:translateY(-50%) translateX(3px)}
.tuKad .tuMinit{margin-right:16px}
.tuKad.tuUtama{background:linear-gradient(135deg,var(--cop),#5A41AD);border-color:transparent;color:#fff}
.tuKad.tuUtama .tuKadTeks span,.tuKad.tuUtama .tuMinit{color:rgba(255,255,255,.88)}
.tuKad.tuUtama .tuIkon{background:rgba(255,255,255,.18);color:#fff}
.tuKad.tuUtama::after{color:rgba(255,255,255,.8)}
.tuRujukan{transition:background .18s ease,padding-left .18s ease}
.tuRujukan:hover{background:var(--cop-lembut);padding-left:20px}
.tuSeksyen{display:flex;align-items:center;gap:10px}
.tuSeksyen::after{content:"";flex:1;height:1px;background:var(--garis)}

/* ── Pusat bantuan: SEMUA tutorial & bab kelihatan tanpa carian (Okt 2026) ──────────────────────────────────────
   Hab = Disyorkan → Semua tutorial (ikut topik) → Rujukan lengkap (akordion). Grid minmax(0,1fr): perkataan panjang
   tidak boleh melebarkan lajur (skrol mendatar) pada skrin 280–360px. */
.tuHabSub{margin:2px 0 0}
.tuGrid{grid-template-columns:minmax(0,1fr)}
@media(min-width:620px){.tuGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tuKad.tuKadPadat{padding:11px 12px;gap:11px;border-radius:14px;min-height:62px}
.tuKad.tuKadPadat .tuIkon{width:38px;height:38px;border-radius:10px;font-size:15px}
.tuKad.tuKadPadat .tuKadTeks b{font-size:15px;line-height:1.3}
.tuKad.tuKadPadat .tuKadTeks span{font-size:13px;line-height:1.4;margin-top:1px}
.tuKad.tuKadPadat .tuMinit{margin-right:14px}
/* Skrin sempit (≤ 359px: iPhone SE 1, Galaxy Fold): ikon & jarak lebih kecil supaya tajuk tidak pecah 4 baris. */
@media(max-width:359px){.tuKad,.tuKad.tuKadPadat{gap:9px;padding:11px 10px}.tuKad .tuIkon,.tuKad.tuKadPadat .tuIkon{width:32px;height:32px;border-radius:9px;font-size:13px}
  .tuKad.tuUtama .tuKadTeks b{font-size:15.5px}.tuKad .tuMinit{font-size:11px;margin-right:12px}.tuKad::after{right:8px}
  .tuBabKump>summary{gap:10px;padding:12px 10px}.tuBabKump>summary .tuIkon{width:34px;height:34px}}
/* Kad utama dalam mod gelap: --cop gelap ialah ungu CERAH (#B9A2F2) — teks putih di atasnya hanya ~2.4:1. Guna teal gelap. */
@media(prefers-color-scheme:dark){:root:not([data-tema=terang]) .tuKad.tuUtama{background:linear-gradient(135deg,#2B1E5C,#5A41AD)}}
:root[data-tema=gelap] .tuKad.tuUtama{background:linear-gradient(135deg,#2B1E5C,#5A41AD)}
.tuKad .tuKadTeks b,.tuKad .tuKadTeks span{overflow-wrap:break-word}
.tuDisyorLain{margin-top:8px}
.tuKumpTajuk{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:650;line-height:1.35;color:var(--dakwat);margin:18px 0 8px}
.tuKumpTajuk>span{color:var(--cop);min-width:18px;text-align:center}
.tuBabKump{background:var(--kertas2);border:1px solid var(--garis);border:1px solid color-mix(in srgb, var(--dakwat) 9%, transparent);border-radius:16px;margin:0 0 10px;overflow:hidden}
.tuBabKump>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:13px;padding:14px;min-height:56px;border-radius:16px}
.tuBabKump>summary::-webkit-details-marker{display:none}
.tuBabKump>summary::marker{content:""}
.tuBabKump>summary .tuIkon{background:var(--cop-lembut);color:var(--cop);font-size:18px}
.tuBabKump>summary .tuKumpTeks span{overflow-wrap:break-word}
.tuBabKump>summary>i{font-style:normal;color:var(--pudar);font-size:22px;line-height:1;transition:transform .2s ease}
.tuBabKump[open]>summary>i{transform:rotate(90deg)}
.tuBabKump[open]>summary{border-radius:16px 16px 0 0}
.tuBabKump>.tuSenarai{border:0;border-top:1px solid var(--garis);border-radius:0}
.tuBabKump>summary:hover .tuKumpTeks b{color:var(--cop)}
.tuRujukan span{min-width:0;overflow-wrap:break-word;padding:12px 0}
.tuTiada{padding:14px 16px;margin:0}
.tuRuangBawah{height:28px}
.tuBaca .tuSenarai{margin-top:4px}
@media(prefers-reduced-motion:reduce){.tuBabKump>summary>i,.tuKad,.tuRujukan{transition:none}}
.pautanTutorial{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 2px;color:var(--cop);font-weight:650;text-align:left}
.pautanTutorial:hover{text-decoration:underline}

/* ── Pendapatan sampingan: navigasi dua peringkat & hab ───────────── */
.niaNav{padding:10px 0 2px}
.niaHab{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}
@media(min-width:620px){.niaHab{grid-template-columns:repeat(3,1fr)}}
.niaHabKad{text-align:left;background:var(--kertas2);border:1px solid var(--garis);border:1px solid color-mix(in srgb, var(--dakwat) 9%, transparent);border-radius:14px;padding:13px;min-height:74px;display:flex;flex-direction:column;gap:4px;transition:transform .18s ease,border-color .18s ease}
.niaHabKad b{font-size:14.5px;line-height:1.25}
.niaHabKad span{font-size:12.5px;color:var(--pudar);line-height:1.4}
.niaHabKad:active{transform:scale(.985)}
.niaHabKad:hover{border-color:var(--cop)}
.niaHabKad.perhatian{border-color:var(--amber);border-color:color-mix(in srgb, var(--amber) 50%, var(--garis));background:var(--amber-lembut)}
.niaHabKad.perhatian span{color:var(--amber)}

/* ── Navigasi langkah (Cukai & Pendapatan sampingan) ───────────────── */
.niaNav{position:sticky;top:0;z-index:4;padding:8px 0 10px;background:linear-gradient(var(--kertas) 78%, transparent)}

/* demo senarai beli: barang ditanda satu per satu, berulang */

/* demo analisis: bar tumbuh */

/* demo ambil alih */

/* pemeriksa interaktif */

/* ── Pusat bantuan: pintu masuk mengikut topik ─────────────────────── */
.tuKumpGrid{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:620px){.tuKumpGrid{grid-template-columns:1fr 1fr}}
.tuKump{display:flex;align-items:center;gap:13px;width:100%;text-align:left;padding:16px;border-radius:18px;background:var(--kertas2);border:1px solid var(--garis);border:1px solid color-mix(in srgb, var(--dakwat) 9%, transparent);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.tuKump:hover{border-color:var(--cop);transform:translateY(-2px);box-shadow:0 14px 30px -22px var(--cop);box-shadow:0 14px 30px -22px color-mix(in srgb, var(--cop) 60%, transparent)}
.tuKump .tuIkon{background:var(--cop-lembut);color:var(--cop);font-size:18px}
.tuKumpTeks{flex:1;min-width:0}.tuKumpTeks b{display:block;font-size:16px}
.tuKumpTeks span{display:block;font-size:13.5px;color:var(--pudar);margin-top:2px}
.tuKumpTeks small{display:block;font-size:12px;color:var(--cop);font-weight:650;margin-top:6px}
.tuKump i{font-style:normal;color:var(--pudar);font-size:22px}
.tuKumpHd{display:flex;gap:12px;align-items:center;margin:8px 0 6px}
:where(.tuKumpHd) h3{font-size:20px;margin:0}

/* ── Tutorial dasar automatik: garis masa & angka anda ─────────────── */
.dsrAnda{background:linear-gradient(135deg,var(--cop-lembut),transparent 75%);border-radius:16px;padding:12px 14px;margin-bottom:12px}
.dsrAndaBaris{display:grid;grid-template-columns:26px 1fr;gap:8px;align-items:center;padding:6px 0;font-size:14px}
.dsrAndaBaris span{width:26px;height:26px;border-radius:8px;background:var(--cop);color:var(--atas-cop);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.dsrAndaBaris i{grid-column:2;display:block;height:7px;border-radius:99px;background:var(--kertas3);overflow:hidden}
.dsrAndaBaris i em{display:block;height:100%;background:var(--cop);border-radius:99px;transition:width .5s ease}
.dsrGaris{list-style:none;margin:10px 0 14px;padding:0 0 0 8px;position:relative}
.dsrGaris::before{content:"";position:absolute;left:25px;top:14px;bottom:14px;width:2px;background:var(--garis)}
.dsrItem{position:relative;margin-bottom:8px}
.dsrItem > button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 14px 12px 10px;border-radius:14px;background:var(--kertas2);border:1px solid var(--garis);border:1px solid color-mix(in srgb, var(--dakwat) 9%, transparent);transition:border-color .2s ease,transform .18s ease}
.dsrItem > button:hover{border-color:var(--cop)}
.dsrItem.buka > button{border-color:var(--cop);background:var(--cop-lembut)}
.dsrIkon{width:34px;height:34px;flex:none;border-radius:50%;background:var(--kertas);border:2px solid var(--garis);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:var(--cop);z-index:1}
.dsrItem.buka .dsrIkon{background:var(--cop);color:var(--atas-cop);border-color:var(--cop)}
.dsrTeks{flex:1;min-width:0}.dsrTeks b{display:block;font-size:15px;line-height:1.3}
.dsrTeks span{display:block;font-size:12.5px;color:var(--pudar);margin-top:2px}
.dsrItem i{font-style:normal;font-size:20px;color:var(--pudar);width:20px;text-align:center}
.dsrHurai{margin:8px 0 0 46px;padding:10px 12px;border-radius:12px;background:var(--kertas);border:1px solid var(--garis);font-size:14px;line-height:1.55;animation:tuMasuk .2s ease}
.dsrJamin{display:flex;gap:10px;align-items:flex-start;background:var(--kertas2);background:color-mix(in srgb, var(--hijau) 10%, var(--kertas2));border-radius:14px;padding:12px 14px;margin-bottom:12px;font-size:14px;line-height:1.5}
.dsrJamin b{color:var(--hijau);font-size:17px;line-height:1.2}
@media(prefers-reduced-motion:reduce){.dsrHurai{animation:none}}

/* ── OAuth ── */
.oauthAtau{display:flex;align-items:center;gap:10px;margin:12px 0 10px;color:var(--pudar);font-size:12.5px}
.oauthAtau::before,.oauthAtau::after{content:"";flex:1;height:1px;background:var(--garis)}
.oauthBtn{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:8px}
.oauthIkon{width:22px;height:22px;border-radius:50%;background:var(--kertas3);display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;color:var(--dakwat)}

/* ── PWA: pemasangan & kemas kini ── */
.pasang{display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:start}
.pasang .row{grid-column:1/3}
.pasangIkon img{border-radius:12px;display:block}
.iosKongsi{display:inline-block;font-size:15px;color:var(--cop);transform:translateY(1px)}
.toast.pwaKemasKini{display:flex;align-items:center;gap:10px;bottom:calc(84px + env(safe-area-inset-bottom,0px))}
.toast.pwaKemasKini .pill{min-height:34px;background:var(--cop);color:var(--atas-cop);border-color:var(--cop)}
/* Sentuhan: sasaran ≥ 44px, tiada zum automatik iOS pada input (≥16px) */
input,select,textarea{font-size:max(16px,1em)}
button,.pill,button.tag{min-height:36px}
@media(display-mode:standalone){header .hd{padding-top:max(8px,env(safe-area-inset-top,0px))}}
/* Lembar & modal pada telefon: ruang selamat bawah, tinggi ikut papan kekunci (dvh) */
.lembar{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
.statusKad{max-height:min(90vh,900px);max-height:min(90dvh,900px);overflow:auto;overscroll-behavior:contain}
@supports(height:100dvh){.lembar{max-height:100dvh}}

/* ── Panduan pemasangan ── */
.pasangKepala{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.pasangKepala img{border-radius:12px}
.pasangLangkah{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:8px}
.pasangLangkah li{display:grid;grid-template-columns:40px 1fr;gap:10px;align-items:center;background:var(--kertas2);border:1px solid var(--garis);border-radius:14px;padding:10px 12px;font-size:14.5px;line-height:1.5}
.pasangLangkah small{display:block;font-size:11.5px;color:var(--pudar);font-weight:650;letter-spacing:.02em}
.pasangNo{width:40px;height:40px;border-radius:12px;background:var(--cop);color:var(--atas-cop);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700}
.pasangPanduan{text-align:left}
.pasangPanduan .btn{text-align:center}
/* Ilustrasi menu Chrome */
.pasangIlu{background:#fff;color:#202124;border-radius:14px;border:1px solid var(--garis);overflow:hidden;margin:0 0 12px;font:13px/1.3 system-ui,sans-serif;box-shadow:0 8px 24px -16px rgba(0,0,0,.4)}
.iluBar{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;background:#f1f3f4}
.iluBar span{background:#fff;border-radius:99px;padding:5px 12px;color:#5f6368;font-size:12px}
.iluTitik{font-size:20px;line-height:1;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(63,42,134,.15);color:var(--cop);animation:iluDenyut 1.6s ease-in-out infinite}
.iluMenu{margin:0 0 0 auto;width:72%;padding:4px 0}
.iluMenu div{padding:9px 14px;color:#5f6368}
.iluMenu .iluSerlah{background:rgba(63,42,134,.12);color:var(--cop);font-weight:700;border-left:3px solid var(--cop);animation:iluDenyut 1.6s ease-in-out infinite .4s}
@keyframes iluDenyut{0%,100%{box-shadow:0 0 0 0 rgba(63,42,134,.0)}50%{box-shadow:0 0 0 6px rgba(63,42,134,.18)}}
@media(prefers-reduced-motion:reduce){.iluTitik,.iluMenu .iluSerlah{animation:none}}
/* Panduan pasang: butang tutup di atas, butang "Faham" melekat di bawah dan
   di atas bar navigasi pelayar (DuckDuckGo, Samsung) — satu ketukan cukup. */
.pasangPanduan{position:relative}
.pasangX{position:absolute;top:-4px;right:-4px;width:40px;height:40px;min-height:40px;border-radius:50%;border:1px solid var(--garis);background:var(--kertas2);color:var(--dakwat);font-size:16px;display:flex;align-items:center;justify-content:center;z-index:2}
/* Kaki melekat menutup padding bawah kad (.statusKad padding-bawah 26px) — kandungan yang ditatal tidak kelihatan di bawah butang. */
.pasangKaki{position:sticky;bottom:-26px;padding:10px 0 calc(30px + env(safe-area-inset-bottom,0px));margin:4px 0 -26px;background:linear-gradient(transparent,var(--kertas) 30%)}
#statusTutup:has(.pasangPanduan) .statusKad{max-height:min(82vh,820px);max-height:min(82dvh,820px);margin-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
.pasangTunggu{text-align:center;padding:4px 0 6px}
.pasangTunggu .bar i{transition:width .25s linear}
.iluMenuTitik{font-style:normal;color:#5f6368;font-size:18px;margin-left:6px}
.iluBar .iluTitik{margin-left:auto}
.iluNota{padding:8px 12px 10px;font-size:12.5px;color:#5f6368}
/* Pusat Arahan */
.pa-label{font-size:10px;font-weight:700;letter-spacing:.03em;padding:1px 5px;border-radius:5px;margin-left:4px;vertical-align:middle;border:1px solid currentColor;opacity:.85}
.pa-actual{color:var(--cop)}.pa-estimated{color:#9a6b00}.pa-projected{color:#5b4bb7}.pa-unavailable{color:#8a8f98}
.pa-status .besar{font-size:30px;font-weight:800}
.pa-status.pa-green{border-left:6px solid #1f9d55}.pa-status.pa-yellow{border-left:6px solid #d4a800}
.pa-status.pa-orange{border-left:6px solid #e67700}.pa-status.pa-red{border-left:6px solid #d62828}
.pa-amaran{border:1px solid var(--garis);border-left-width:5px;border-radius:12px;padding:8px 10px;margin:8px 0}
.pa-amaran.pa-critical{border-left-color:#d62828}.pa-amaran.pa-high{border-left-color:#e67700}
.pa-amaran.pa-warning{border-left-color:#d4a800}.pa-amaran.pa-info{border-left-color:#8a8f98}
#pusatArahan input[type=number]{width:100%;margin-top:3px}
/* Pusat Kewangan (pemilik, 28 Sep 2026) */
#kewanganBadan{max-width:100%}
#kewanganBadan .card,#kewanganBadan .hero,#kewanganBadan .baris,#kewanganBadan .t,#kewanganBadan .note,#kewanganBadan .pa-amaran{min-width:0;overflow-wrap:break-word}
#kewanganBadan input[type=number]{width:100%;margin-top:3px}
#kewanganBadan .pa-amaran .row>*{flex:0 0 auto}
#kewanganBadan .baris .t{flex:1 1 55%}
#kewanganBadan .baris .v{text-align:right;max-width:45%;overflow-wrap:break-word}
@media (max-width:480px){ #kewanganBadan .baris .v{max-width:100%;flex:1 1 100%;text-align:left} }
.kwBar{height:6px;border-radius:4px;background:var(--garis);overflow:hidden;margin-top:4px;max-width:260px}
.kwBar i{display:block;height:100%;border-radius:4px;background:var(--cop)}
.kwJadual{border-collapse:collapse;font-size:12.5px;width:100%;font-variant-numeric:tabular-nums}
.kwJadual th,.kwJadual td{border-bottom:1px solid var(--garis);padding:6px 4px;text-align:right;vertical-align:top;white-space:nowrap}
.kwJadual th:first-child,.kwJadual td:first-child{text-align:left}
.kwJadual th{white-space:normal;line-height:1.2}
.kwJadual th{font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--pudar)}

/* ═══ Baris responsif (seluruh app): teks + kumpulan tindakan ═══
   .baris-aksi = kumpulan butang (BUKAN .aksi — itu jubin tindakan skrin utama) di hujung baris. Pada skrin sempit ia jatuh ke
   bawah teks dan tidak pernah menolak kandungan keluar dari skrin. */
.baris .baris-aksi{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;flex:0 0 auto;max-width:100%}
.baris .baris-aksi .tag,.baris>button.tag{padding:7px 12px;min-height:34px}
@media (max-width:480px){
  .baris{flex-wrap:wrap}
  .baris .baris-aksi{flex:1 1 100%;justify-content:flex-start}
}
/* Pusat Arahan: kandungan panjang (URL, ID, e-mel, JSON) dipecah, tidak melebarkan halaman */
#pusatArahan{max-width:100%}
#pusatArahan .card,#pusatArahan .baris,#pusatArahan .t,#pusatArahan .note,#pusatArahan .pa-amaran{min-width:0;overflow-wrap:anywhere}
#pusatArahan .pa-amaran .row{flex-wrap:wrap}
#pusatArahan .pa-amaran .row>*{flex:0 0 auto}
#pusatArahan .baris .v{text-align:right;max-width:55%;overflow-wrap:anywhere}
@media (max-width:480px){ #pusatArahan .baris .v{max-width:100%;flex:1 1 100%;text-align:left} }
/* Kad Enjin Pertumbuhan: nilai panjang (statistik pinggir, pendaftaran organik) dibalut, tidak melebarkan lembar. */
#pa_pertumbuhan .baris .v{white-space:normal}

/* Pelayar yang menyokong color-mix() mendapat cincin fokus yang ikut tema. */
@supports (color:color-mix(in srgb, red 50%, blue)){:root{--fokus:0 0 0 3px color-mix(in srgb, var(--cop) 35%, transparent)}}

/* ═══ Jaring keselamatan mudah alih ═════════════════════════════════
   1. iOS Safari zum masuk bila medan berfon < 16px difokus, dan tidak
      zum keluar semula — pengguna tersekat dalam paparan yang dibesarkan.
      Hanya pada peranti sentuh, supaya reka letak komputer tidak berubah. */
@media (pointer:coarse){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
  select,textarea{font-size:16px!important}
}
/* 2. E-mel, URL dan nama fail yang panjang tanpa ruang tidak boleh
      menolak halaman keluar dari skrin. break-word hanya memecahkan
      perkataan bila ia benar-benar tidak muat. */
body{overflow-wrap:break-word}
img,video{max-width:100%;height:auto}

/* 4. Jadual lebar dalam kad sentiasa boleh ditatal mendatar. */
.skrolX{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}

/* Kalkulator cukai: SATU lembaran gaya kongsi public/kira.css (halaman utama, dalam app & halaman awam /kalkulator-cukai/). */

/* ═══ Pembantu e-Filing BE — kotak demi kotak ═══ */
.efAtas .btn{margin-top:4px}
.efKemajuan{font-size:13px;color:var(--pudar);margin-bottom:8px}
/* details.efLangkah (spesifisiti 0,1,1) mengatasi .kiraLangkah{padding:6px 0} kira.css yang dimuat SELEPAS rupa.css (dahulu teks langkah
   melekat pada sempadan kad) — tanpa mentakrif kelas .kira* di luar kira.css (satu sumber gaya kalkulator). */
details.efLangkah{background:var(--kertas2);border:1px solid var(--garis);border-radius:14px;padding:4px 12px;margin:10px 0}
.efLangkah>summary{font-size:15px}
.efBaris{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"kod t v" "kod t alat";
  gap:4px 10px;align-items:center;padding:10px 0;border-bottom:1px dashed var(--garis)}
.efBaris.sifar{opacity:.62}
.efBaris .efKod{grid-area:kod;align-self:start}
.efBaris>.t{grid-area:t;display:flex;flex-direction:column;gap:4px;min-width:0;overflow-wrap:break-word}
.efBaris>.v{grid-area:v;font-variant-numeric:tabular-nums;font-weight:650;text-align:right;white-space:nowrap}
.efBaris .efSalin{grid-area:alat;justify-self:end}
.efBaris .efTanda{grid-area:alat;justify-self:start;margin-left:-2px}
.efBaris .efSalin,.efBaris .efTanda{align-self:center}
.efA6{grid-template-areas:"kod t"}
.efKod{font:12px var(--mono);font-weight:700;min-width:40px;text-align:center;padding:3px 6px;border-radius:8px;
  border:1px solid var(--cop);color:var(--cop)}
.efSalin{min-height:36px;min-width:64px;padding:0 12px;border-radius:10px;border:1px solid var(--garis);background:transparent;
  color:var(--cop);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.efTanda{display:inline-flex;align-items:center;justify-content:center;min-width:36px;min-height:36px;cursor:pointer}
.efTanda input{width:22px;height:22px}
.efInput{max-width:180px;margin-top:2px}
.efPerinci{display:grid;gap:6px;margin-top:2px}
.efAhli{display:flex;flex-direction:column;gap:3px;padding:6px 8px;border-radius:10px;background:var(--kertas3)}
.efNama{font-weight:600;font-size:13.5px}
.efTambah{display:flex;flex-direction:column;gap:2px}
.efDua{display:flex;gap:8px;flex-wrap:wrap}
.efDua .efInput{flex:1;min-width:120px}
.efDerma{display:grid;grid-template-columns:auto minmax(0,1fr) 120px;gap:8px;align-items:center;padding:6px 0;
  border-bottom:1px dashed var(--garis)}
.efDerma .efInput{max-width:none}
@media(max-width:420px){.efDerma{grid-template-columns:auto minmax(0,1fr)}.efDerma .efInput{grid-column:2}}

/* Jubin halaman utama: kalkulator, e-Filing, e-Invois */

/* e-Invois (penjual & pembeli) */
.eiKump { margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed var(--garis); }
.eiKump > .lbl { margin-bottom: 4px; }
.eiMedan { display: flex; align-items: center; gap: 10px; padding: 6px 0; min-width: 0; }
.eiMedan .t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.eiMedan .t b { overflow-wrap: break-word; }
.eiTanda { margin-top: 12px; gap: 8px; align-items: stretch; }
.eiTanda input { flex: 1; min-width: 0; }
.eiBarisInput { display: flex; gap: 8px; align-items: center; }
.eiBarisInput input, .eiBarisInput textarea { flex: 1; min-width: 0; }
.eiPembeli { margin-bottom: 10px; }
/* Kad pembeli organisasi (pusingan 94) — nilai panjang (alamat, e-mel) membalut antara perkataan (break-word: perkataan dipecah
   HANYA bila lebih lebar daripada satu baris — e-mel panjang), butang Salin kekal ≥ 36px di kanan. */
.eiOrgBaris .t .note { display: block; overflow-wrap: break-word; white-space: pre-line; }
.eiOrgBaris .efSalin { flex: 0 0 auto; }

/* ═══ Label bulat (tag) — teks di tengah, tidak lari; label resit dipotong dengan … ═══ */
span.tag{display:inline-flex;align-items:center;min-height:26px;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.slip .tag{max-width:220px}
/* ── Tab Resit (8 Okt 2026): penapis pantas (cip menatal mendatar), susunan & lompat bulan, pengepala bulan dengan jumlah,
   kad ringkas (tarikh · kategori · tag tindakan sahaja). Satu sumber untuk app; tiada salinan di tempat lain. ── */
.resitBar{margin-top:10px}
.resitTapis{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px 2px 6px;margin:0 -2px;scroll-snap-type:x proximity}
.resitTapis::-webkit-scrollbar{display:none}
.resitTapis .cip{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 12px;border-radius:999px;border:1.5px solid var(--garis);background:var(--kertas2);color:var(--dakwat);font-weight:600;font-size:13px;white-space:nowrap;scroll-snap-align:start;transition:background .15s ease,border-color .15s ease}
.resitTapis .cip b{font-weight:700;font-size:12px;padding:1px 7px;border-radius:999px;background:var(--kertas);background:color-mix(in srgb, var(--dakwat) 8%, transparent)}
.resitTapis .cip.amaran{color:var(--amber);border-color:var(--amber);border-color:color-mix(in srgb, var(--amber) 55%, var(--garis))}
.resitTapis .cip.pilih{background:var(--cop);border-color:var(--cop);color:var(--atas-cop)}
.resitTapis .cip.pilih b{background:rgba(255,255,255,.22)}
.resitSusun{display:flex;gap:8px;align-items:center;margin-top:4px;flex-wrap:wrap}
.resitSusun>*{flex:1 1 160px;min-width:0}
.resitSusunLbl{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--pudar)}
.resitSusunLbl select{flex:1;min-width:0}
.resitSusun select{min-height:40px;border-radius:10px;border:1.5px solid var(--garis);background:var(--kertas2);padding:6px 10px;font-size:14px;font-weight:600;color:var(--dakwat);width:100%;max-width:100%}
.sect.sectResit{flex-wrap:wrap;row-gap:2px}
.sect.sectResit .sectRingkas{font-size:12.5px;white-space:nowrap}
.slip .a>.m{min-width:0;flex:1 1 auto}
.slip .a>span:last-child{flex:none;max-width:60%}
.slip .slipMeta{display:flex;gap:6px;align-items:center;margin-top:5px;flex-wrap:wrap;row-gap:4px}
.slip .slipTarikh{font-variant-numeric:tabular-nums;font-weight:600;color:var(--dakwat)}
.slip .slipKat{color:var(--pudar)}
.slip .slipKat::before{content:"·";margin-right:6px;color:var(--garis)}
@media(max-width:360px){.resitSusun>*{flex-basis:100%}.sect.sectResit .sectRingkas{flex-basis:100%;text-align:left}}
/* ═══ Pembantu e-Filing pada telefon: nilai & butang di bawah label, tiada lari ke tepi ═══ */
@media(max-width:480px){
  .efBaris{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"kod t" "kod v" "kod alat";gap:6px 10px}
  .efBaris>.v{text-align:left;white-space:normal}
  .efBaris .efSalin{justify-self:start}
  .efBaris .efTanda{justify-self:end}
  .efInput{max-width:100%}
  .efKod{min-width:34px;font-size:11px;padding:3px 4px}
  .efDerma{grid-template-columns:auto minmax(0,1fr)}.efDerma .efInput{grid-column:2}
}
/* ═══ Makeover: langkah seterusnya, perjalanan, perhatian, tindakan pantas, Lagi ═══ */
.langkahKad{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 12px;align-items:start;padding:14px;border-radius:16px;
  border:1.5px solid var(--cop);background:var(--cop-lembut);margin:12px 0 4px}
.langkahIkon{width:44px;height:44px;border-radius:50%;background:var(--cop);color:var(--atas-cop);display:flex;align-items:center;
  justify-content:center;font-size:20px;flex:none}
.langkahTeks{min-width:0}.langkahTeks .lbl{color:var(--cop)}
.langkahTeks h2{margin:2px 0 4px;font-size:17px;line-height:1.3;overflow-wrap:break-word}
.langkahTeks .note{margin:0}
.langkahKad .btn{grid-column:1/3;margin-top:2px}
.perjalanan{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:4px 0 10px}
.pjLangkah{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;border-radius:12px;border:1px solid var(--garis);
  background:var(--kertas2);color:inherit;font:inherit;text-align:center;min-height:44px;cursor:pointer;min-width:0}
.pjNo{width:28px;height:28px;border-radius:50%;border:2px solid var(--garis);display:inline-flex;align-items:center;justify-content:center;
  font-weight:700;font-size:13px;color:var(--pudar);flex:none}
.pjLangkah.siap .pjNo{background:var(--hijau);border-color:var(--hijau);color:var(--atas-cop)}
.pjLangkah.semasa{border-color:var(--cop);box-shadow:0 0 0 2px var(--cop-lembut)}
.pjLangkah.semasa .pjNo{border-color:var(--cop);color:var(--cop)}
.pjTeks{display:flex;flex-direction:column;gap:2px;min-width:0;max-width:100%}
.pjTeks b{font-size:12.5px;line-height:1.2;overflow-wrap:break-word}
.pjTeks span{font-size:11px;color:var(--pudar);line-height:1.25;overflow-wrap:break-word}
.perjalanan.ringkas .pjLangkah{padding:8px 4px}
@media(max-width:380px){.pjTeks span{display:none}.pjTeks b{font-size:11px;letter-spacing:-.01em}.perjalanan .pjLangkah{padding-left:2px;padding-right:2px}}
/* Pusingan 138: penjejak bayaran balik — jalur 4 langkah memakai .perjalanan/.pjLangkah yang sama (senarai, bukan butang). */
.balikJalur{list-style:none;padding:0;margin:8px 0 10px}
.balikJalur .pjLangkah{cursor:default}
.pjLangkah.langkau{opacity:.55}
.balikKad{scroll-margin-top:112px}   /* tatalKe(blok "start") — tajuk & amaun tidak terlindung di bawah pengepala melekit (2 baris) */
.balikKad .balikBorang{margin:6px 0 10px;flex-wrap:wrap}
.balikKad .balikBorang>.fld{flex:1 1 180px;min-width:0;margin-bottom:0}
.balikKad .balikNasihat{margin:0 0 10px}
.balikKad .balikNasihat ul{margin:4px 0 0;padding-left:20px}
.balikKad>.pill{margin-top:8px}
.aksiGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0 10px}
.aksiGrid .aksi{margin:0;min-height:64px;padding:12px;gap:10px;flex-direction:column;align-items:flex-start}
.aksiGrid .aksi svg{width:24px;height:24px}
.aksiGrid .aksi b{font-size:14.5px}.aksiGrid .aksi span span{font-size:11.5px}
.lagiPerhatian>summary{list-style:none;cursor:pointer;margin:2px 0 10px;min-height:44px;display:flex;align-items:center;justify-content:center;
  color:var(--cop);font-weight:600;border:1px dashed var(--garis);border-radius:12px}
.lagiPerhatian>summary::-webkit-details-marker{display:none}
.lagiPerhatian[open]>summary{display:none}
.utamaKemas{text-align:center;margin:8px 0 12px;color:var(--hijau)}
.utamaLagi{width:100%;text-align:left;display:flex;align-items:center;gap:10px;padding:12px 0;background:transparent;border:0;border-top:1px solid var(--garis);color:inherit;font:inherit;cursor:pointer}
.seterusnyaKad{margin-top:16px}
.seterusnyaBtn{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.seterusnyaBtn .btn{flex:1 1 auto}
.cukaiBantuanBar{display:flex;justify-content:flex-end;margin:0 0 6px}
.lagiSek{border:1px solid var(--garis);border-radius:14px;background:var(--kertas2);margin:8px 0}
.lagiSek>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;min-height:52px;padding:6px 14px;font-weight:650}
.lagiSek>summary::-webkit-details-marker{display:none}
.lagiSek>summary i{margin-left:auto;font-style:normal;color:var(--pudar);transition:transform .2s ease}
.lagiSek[open]>summary i{transform:rotate(90deg)}
.lagiSek .lagiIsi{padding:0 14px 12px}
.lagiSek .lagiIsi>.card{margin-top:0}
.alatGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:6px 0 14px}
.alat{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:12px;border-radius:14px;border:1px solid var(--garis);
  background:var(--kertas2);color:inherit;font:inherit;text-align:left;min-height:44px;cursor:pointer;min-width:0}
.alatIkon{font-size:20px}.alat b{font-size:14px;overflow-wrap:break-word}.alat .note{font-size:12px;margin:0}

/* ═══ Kad pemula (e-Filing & Pendapatan sampingan): bahasa biasa, 3–4 ayat, satu butang mula ═══ */
.pemulaKad{border-color:var(--cop);background:var(--cop-lembut)}
details.pemulaKad>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;min-height:44px}
details.pemulaKad>summary::-webkit-details-marker{display:none}
.pemulaIkon{font-size:18px}
.pemulaSenarai{margin:8px 0 6px;padding-left:20px;font-size:14px;line-height:1.5}
.pemulaSenarai li{margin:4px 0}
/* Suis bahasa halaman statik (Terma, Privasi). Warna EKSPLISIT: .pill dalam rupa.css tiada
   color — tanpa ini butang jatuh ke warna lalai pelayar (teks hitam di atas latar mod gelap). */
.bhsSuis{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 14px}
.bhsSuis button{color:var(--dakwat);background:var(--kertas2);border:1px solid var(--garis);cursor:pointer}
.bhsSuis button[aria-pressed="true"]{background:var(--cop);color:var(--atas-cop);border-color:var(--cop)}
.bhsSuis button:focus-visible{outline:2px solid var(--cop);outline-offset:2px}
/* ═══ Terma & privasi dalam app: kad Lagi, Pelan, Padam akaun, Jemputan, Maklum balas, Pusat bantuan ═══ */
.undangPautan{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.undangPautan a.pill{border:1px solid var(--garis)}
.undangNota a,.oauthSetuju a,.tuKakiUndang a{color:var(--cop)}
.oauthSetuju{margin:8px 0 0;font-size:12.5px}
.tuKakiUndang{text-align:center;font-size:12.5px;color:var(--pudar);margin:18px 0 8px;line-height:1.9}
/* ═══ Notis perubahan Terma & Dasar Privasi (Utama, Lagi) + Sejarah perubahan (halaman statik) ═══ */
.undangNotis{margin:8px 0 6px}
.undangNotis b{display:block;line-height:1.35}
.undangRingkas{margin:6px 0;padding-left:18px;font-size:14px;line-height:1.5}
.undangRingkas li{margin:3px 0;overflow-wrap:break-word}
.undangNotis a,.undangNotisLagi a{color:var(--cop);font-weight:600}
.undangNotisLagi{margin-top:10px;padding-top:10px;border-top:1px solid var(--garis)}
ul.perubahan{padding-left:18px}
ul.perubahan li{margin:6px 0;overflow-wrap:break-word}
.perubahan .penting{display:inline-block;font-size:12px;line-height:1.4;padding:1px 8px;border-radius:999px;background:var(--cop-lembut);color:var(--cop);font-weight:600}
/* Penjaga boot: bar "masih memuatkan" (25 Sep 2026) */
.lambatBar{position:fixed;left:12px;right:12px;bottom:calc(72px + env(safe-area-inset-bottom,0px));z-index:60;padding:10px 12px;border-radius:12px;background:var(--kertas2);border:1px solid var(--garis);display:flex;gap:10px;align-items:center;justify-content:space-between;font-size:13px;box-shadow:0 6px 24px rgba(0,0,0,.18)}
.lambatBar .btn{padding:8px 14px;flex:0 0 auto}

/* Hero: aliran identiti ListBelanja — senarai belanja → resit → pelepasan (27 Sep 2026) */

/* Utama: kad senarai belanja (27 Sep 2026) */
.senaraiRingkas{list-style:none;margin:8px 0 0;padding:0;max-height:260px;overflow-y:auto;overscroll-behavior:contain}
.senaraiRingkas li{border-bottom:1px solid var(--garis)}
.senaraiRingkas label{display:flex;align-items:center;gap:10px;min-height:42px;padding:4px 2px;cursor:pointer}
.senaraiRingkas .nm{flex:1;min-width:0;overflow-wrap:break-word}
.senaraiRingkas input{width:20px;height:20px;flex:none;margin:0}
/* Tutorial Resit melalui e-mel & istilah rasmi LHDN di bawah terjemahan (29 Sep 2026) */
.tuEmelSim h4{margin:4px 0}
.tuEmelAlamat{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
.tuEmelAlamat code{flex:1 1 180px;min-width:0;overflow-wrap:anywhere;font-size:13px}
.tuEmel{display:grid;gap:6px;margin:8px 0}
.tuEmel div{display:flex;gap:8px;min-width:0}
.tuEmel span{flex:0 0 auto;color:var(--pudar);min-width:64px}
.tuEmel b{min-width:0;overflow-wrap:anywhere;font-weight:600}
.tuEmelBaris{display:flex;gap:8px;align-items:center;margin-top:8px;padding-top:8px;border-top:1px solid var(--garis)}
.tuEmelBaris span{flex:1;min-width:0;display:flex;flex-direction:column}
.tuEmelBaris b{overflow-wrap:anywhere}
.tuEmelTolak{color:var(--merah);font-weight:600;margin:8px 0}
.istilah{display:inline-block;opacity:.75;font-size:12px}
.tuBabTutorial{width:100%;margin-top:18px;text-align:left}
/* Titik panas tidak menutup teks (30 Sep 2026). Baris blok & sel dua kolum mengkhaskan ruang kanan untuk titik; cip,
   butang "?" & tab navigasi memakai lencana kecil DI ATAS label — dahulu titik menutup "TT2026", label tab (Receipts, Tax,
   More) dan hujung "Upload a bill or PDF" pada telefon. Lencana 24–26px kekal ≥ saiz sasaran minimum WCAG 2.2 (24px). */
.tuMock .tuMockBtn.tuT,.tuMock .tuMockKad.tuT,.tuMock .tuMockDua>.tuT{padding-right:30px}
.tuMockHd .tuTitik{top:-12px;right:-22px;width:24px;height:24px;font-size:11px;transform:none}
.tuMockHd .tuTitik.aktif{transform:scale(1.15)}
.tuMockHd .tuBulat .tuTitik{top:50%;right:auto;left:-30px;transform:translateY(-50%)}
.tuMockHd .tuBulat .tuTitik.aktif{transform:translateY(-50%) scale(1.15)}
.tuMockNav{padding-top:38px}
.tuMockNav .tuTitik{top:-36px;right:auto;left:50%;width:26px;height:26px;font-size:11.5px;transform:translateX(-50%)}
.tuMockNav .tuTitik.aktif{transform:translateX(-50%) scale(1.15)}

/* Peti Sokongan — pemilik platform (1 Okt 2026) */
.skCip{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.skCip .pill.on{background:var(--cop);border-color:var(--cop);color:var(--atas-cop)}
.skBaris{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;background:var(--kertas2);border:1px solid var(--garis);border-radius:12px;
  padding:10px 12px;margin:0 0 8px;color:inherit;font:inherit;cursor:pointer}
.skBaris.belum{border-color:var(--cop);box-shadow:inset 3px 0 0 var(--cop)}
.skAtas{display:flex;justify-content:space-between;gap:8px;min-width:0}
.skAtas b,.skSubjek,.skCebis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.skBaris.belum .skSubjek{font-weight:700}
.skStatus{font-size:12px;opacity:.75}
.skTeks{white-space:pre-wrap;overflow-wrap:anywhere;margin-top:8px;line-height:1.55}
.skKeluar{border-left:3px solid var(--cop)}
.skAsal{display:block;width:100%;min-height:380px;border:1px solid var(--garis);border-radius:8px;background:#fff;margin-top:8px}
.skLampiran{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:8px}
.skTpl{padding:10px 0;border-top:1px solid var(--garis)}

/* Lawatan dibina daripada Peta UI (28 Sep 2026): jalur konteks, perjalanan cukai, jalur tab Cukai (membalut — titik
   tidak terpotong pada skrin sempit), tab/navigasi aktif. */
.tuMockSub{display:flex;align-items:center;gap:6px;padding:6px 30px 6px 8px;border-radius:10px;background:var(--kertas2);border:1px solid var(--garis);font-size:11px}
.tuJalan{display:flex;gap:6px;margin-top:6px}
.tuJalan i{font-style:normal;width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--garis);font-size:11px}
.tuMockTab{display:flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:14px;background:var(--kertas3)}
.tuMockTab>.tuT{border-radius:99px;padding:7px 30px 7px 10px;white-space:nowrap;color:var(--pudar)}
.tuMockTab .tuAktif{background:var(--kertas2);color:var(--cop);font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,.12),inset 0 0 0 1px var(--garis)}
.tuMockNav .tuAktif{font-weight:700;color:var(--cop)}
/* Kepala mock (28 Sep 2026): Awan & "?" bersebelahan — setiap titik lencana di kanan-atas cipnya (bukan kiri "?"), dengan
   ruang 16px selepas cip di kanan supaya lencana tidak menindih cip seterusnya/tepi telefon. Nombor dibaca kiri → kanan. */
.tuMockHd>.tuSp~.tuT{margin-right:16px}
/* Pusingan 106 (14 Okt 2026): butang mata 👁 (mod privasi) menambah cip keempat — nama app pada barisnya sendiri dan cip tidak membalut
   (dahulu "ListBelanja", "TT2026" & "Awan ✓" terputus di dalam telefon 268px dan lencana menindih cip jiran). */
.tuMockHd{flex-wrap:wrap;row-gap:14px}
.tuMockHd>.tuMockNm{flex:1 0 100%;white-space:nowrap}
.tuMockHd>.tuT{white-space:nowrap;flex:none}
.tuMockHd>.tuT:not(.tuBulat){margin-right:16px}
.tuMockHd .tuBulat .tuTitik{top:-12px;right:-22px;left:auto;transform:none}
.tuMockHd .tuBulat .tuTitik.aktif{transform:scale(1.15)}

/* ═══ IMBASAN TAK SEGERAK (28 Sep 2026): kad rangka, medan rangka, bar tidak tentu, toast bertindakan ═══════════════
   Tiada tindanan modal semasa AI membaca. Rangka berkilau (shimmer) dalam kedua-dua tema; pengguna yang memilih
   "kurangkan gerakan" mendapat rangka statik. */
@keyframes rangkaKilau{from{background-position:200% 0}to{background-position:-200% 0}}
.rangka{display:block;border-radius:8px;background:var(--kertas3);background:linear-gradient(90deg,var(--kertas3) 25%,color-mix(in srgb, var(--kertas3) 55%, var(--kertas2)) 50%,var(--kertas3) 75%);
  background-size:200% 100%;animation:rangkaKilau 1.4s ease-in-out infinite}
.rangkaBaris{height:13px}
.slipImbas{cursor:pointer;border-style:dashed}
.slipImbasBaris{display:flex;gap:12px;align-items:center;min-width:0}
.slipImbasGambar{width:52px;height:52px;flex:none;border-radius:10px;object-fit:cover;background:var(--kertas3)}
.slipImbasTeks{flex:1;min-width:0;display:block}
.slipImbasStatus{display:flex;align-items:center;gap:7px;margin-top:9px;color:var(--cop);font-weight:600}
.putarKecil{display:inline-block;width:13px;height:13px;flex:none;border:2px solid var(--kertas3);border-top-color:var(--cop);border-radius:50%;
  animation:putar .8s linear infinite;vertical-align:-2px;margin-right:6px}
.slipImbasStatus .putarKecil{margin-right:0}
/* Medan lembar semasa dibaca: input dinyahdayakan dengan kilauan di belakang teks — nilai lama kelihatan pudar. */
.medanResit.rangkaMedan input,.medanResit.rangkaMedan select{color:var(--pudar);background-image:linear-gradient(90deg,transparent 25%,color-mix(in srgb, var(--cop) 12%, transparent) 50%,transparent 75%);
  background-size:200% 100%;animation:rangkaKilau 1.6s ease-in-out infinite;opacity:.85}
/* Bacaan baru tiba: medan & kad disorot sekali sahaja. */
@keyframes medanIsi{0%{background:var(--cop-lembut);box-shadow:0 0 0 0 color-mix(in srgb, var(--hijau) 55%, transparent);background:color-mix(in srgb, var(--hijau) 14%, var(--kertas2))}100%{box-shadow:0 0 0 8px transparent}}
.medanResit.medanIsi input,.medanResit.medanIsi select{animation:medanIsi 1.6s ease-out 1}
.slip.slipBaru{animation:medanIsi 1.8s ease-out 1}
.kadDibaca{margin-bottom:12px}.kadDibacaSiap{margin-bottom:12px;border-color:var(--hijau)}
.kadImbas .t b{display:flex;align-items:center;gap:6px}
/* Bar nipis di atas: tidak tentu selagi ada imbasan berjalan. */
@keyframes progTakTentu{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}}
.prog.takTentu i{width:34%!important;animation:progTakTentu 1.3s ease-in-out infinite}
/* Toast dengan butang tindakan ("Lihat"). */
.toast{display:flex;align-items:center;gap:12px;justify-content:center;flex-wrap:wrap}
.toastAksi{background:var(--kertas);color:var(--dakwat);border-radius:999px;padding:6px 12px;font-weight:700;font-size:13.5px;min-height:34px}
@media(prefers-reduced-motion:reduce){.rangka,.medanResit.rangkaMedan input,.medanResit.rangkaMedan select,.prog.takTentu i,.medanResit.medanIsi input,.medanResit.medanIsi select,.slip.slipBaru,.putarKecil{animation:none!important}
  .prog.takTentu i{width:100%!important;opacity:.5}}
/* Kad kongsi menegak (28 Sep 2026): butang di bawah hero Cukai / Borang B & pratonton 9:16 dalam tindanan. */
.hero + .kongsiBtn{margin:10px 0 4px}
.kongsiPratonton{display:block;height:min(52vh,460px);height:min(52dvh,460px);width:auto;max-width:100%;aspect-ratio:9/16;object-fit:contain;margin:4px auto 12px;border-radius:14px;box-shadow:0 8px 28px rgba(0,0,0,.18)}

/* Kad kongsi & media sosial dalam app (29 Sep 2026) */
.kongsiBundar{display:flex;gap:10px;align-items:flex-start;margin:4px 0 0;cursor:pointer}
.kongsiBundar input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--cop)}
.kongsiBundar .note{display:block;margin-top:2px}
.sosialCipBaris{display:flex;flex-wrap:wrap;gap:6px}
.sosialCip{display:inline-flex;align-items:center;min-height:40px;padding:6px 13px;border-radius:999px;border:1px solid var(--garis);background:var(--kertas2);
  color:var(--dakwat);font-size:13.5px;font-weight:650;text-decoration:none;-webkit-tap-highlight-color:transparent}
.sosialCip:hover,.sosialCip:focus-visible{border-color:var(--cop);color:var(--cop)}
.kadSosial .ikutiSenarai{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}

#pa_sosial .paSosialGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
#pa_sosial .paSosialGrid input{width:100%;margin-top:3px}

/* Penilaian pengguna — Tetapan › Nilai ListBelanja (2 Okt 2026) */
.bintangPilih{display:flex;gap:4px;margin:6px 0 2px}
.bintangBtn{font-size:30px;line-height:1;min-width:44px;min-height:44px;color:var(--pudar);border-radius:var(--r);padding:4px}
.bintangBtn.aktif,.bintangBtn:hover{color:var(--amber)}
.bintangBtn:focus-visible{outline:2px solid var(--cop);outline-offset:2px}
.bintangKecil{color:var(--amber);letter-spacing:1px;white-space:nowrap}
/* Pengoptimum cukai isi rumah — chip status had (2 Okt 2026) */
.kkStatus{margin-left:4px}.kkAVAILABLE{color:var(--cop);border-color:var(--cop)}.kkNEARING_CAP{color:var(--amber);border-color:var(--amber)}.kkREACHED{color:var(--merah);border-color:var(--merah)}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   IDENTITI "LEJAR" (9 Okt 2026 — keputusan Nazri: reka bentuk mesti tersendiri, bukan serupa app resit/cukai lain)
   Satu cerita visual: buku lejar keluarga di atas kertas krim. Palet daripada wang kertas RM100 (ungu) sebagai cop jenama
   — jarang dipakai fintech Malaysia (kebanyakannya teal/biru/hijau) — dengan RM20 jingga untuk perhatian, RM5 hijau untuk
   berjaya. Motif: kertas resit bergerigi, cop "✓", garis lejar bertitik antara label & nilai, angka tabular, huruf italik serif
   untuk frasa penting. Tiada fon luar (fon sistem sahaja), tiada imej hiasan, gerakan dihormati (prefers-reduced-motion).
   Blok ini DI HUJUNG rupa.css supaya ia mengatasi gaya pendaratan terdahulu tanpa mengubah hook (id/kelas) yang diuji.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
:root{--serif:Georgia,"Noto Serif","Songti SC","Times New Roman",serif;--lejar:1px dotted color-mix(in srgb, var(--dakwat) 28%, transparent)}
/* Kertas resit bergerigi (hujung bawah) — dipakai hero, harga & kad terpilih. */
.lejarGerigi{position:relative}
.lejarGerigi::after{content:"";position:absolute;left:0;right:0;bottom:-12px;height:12px;pointer-events:none;
  background:linear-gradient(-45deg,transparent 8.5px,var(--kertas2) 0) 0 0/17px 12px repeat-x,linear-gradient(45deg,transparent 8.5px,var(--kertas2) 0) 0 0/17px 12px repeat-x}

/* ── Hero: kertas lejar bergaris, tajuk besar, frasa italik serif ── */

/* ── Seksyen & tajuk ── */

/* ── Langkah: angka italik serif ── */

/* ── Kad log masuk, akhir & kaki ── */

/* Agihan item resit (9 Okt 2026): peribadi / perniagaan / belum — segmen 3 butang sebaris, pilihan sebaris, jumlah berjalan */
.agihSemua{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 8px}
.agihBaris{padding:9px 0;border-bottom:var(--lejar)}
.agihAtas{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.agihAtas .t{min-width:0;flex:1 1 auto;overflow-wrap:break-word}
.agihAtas .v{flex:none;font-variant-numeric:tabular-nums;font-weight:700}
.agihPilih>select{flex:1 1 100%;width:100%;min-height:44px}
.agihJum{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,92px),1fr));gap:8px;margin:10px 0 6px}
.agihJum div{background:var(--kertas2);border:1px solid var(--garis);border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:2px;min-width:0}
.agihJum b{font-variant-numeric:tabular-nums;font-size:15px;overflow-wrap:break-word}
.agihJum .note{font-size:12px;line-height:1.3}
@media (max-width:359px){.agihJum{grid-template-columns:1fr}}
/* "Satu app untuk semua" (9 Okt 2026): lima persona — kad ringkas bergaris lejar */

/* Tutorial pusingan 85: agihan item, pratonton penyata & CSV */
.tuAgihBaris{padding:6px 0;border-bottom:var(--lejar)}
.tuAgihJum{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:10px 0}
.tuAgihJum span{background:var(--kertas2);border:1px solid var(--garis);border-radius:10px;padding:6px 8px;font-size:12px;color:var(--pudar);display:flex;flex-direction:column;min-width:0}
.tuAgihJum b{color:var(--dakwat);font-size:14px;font-variant-numeric:tabular-nums;overflow-wrap:break-word}
.tuPudar{opacity:.55}
.tuCsv{font-size:11px;line-height:1.5;background:var(--kertas2);border:1px solid var(--garis);border-radius:10px;padding:10px;overflow:auto;white-space:pre;margin:8px 0;max-width:100%}
/* Persona "Siapa anda?" (9 Okt 2026): grid pilihan & senarai "Mula di sini" */
.personaGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.personaPilih{position:relative;text-align:left;border:1.5px solid var(--garis);background:var(--kertas2);color:var(--dakwat);border-radius:14px;padding:12px 12px 10px;display:flex;flex-direction:column;gap:3px;min-height:44px;cursor:pointer}
.personaPilih.cadang{border-color:var(--cop)}
.personaPilih b{font-size:14.5px;overflow-wrap:normal}.personaPilih .note{font-size:12px;line-height:1.35;overflow-wrap:break-word}
@media(max-width:359px){.personaPilih{padding:10px 9px 9px}.personaPilih b{font-size:13px}.personaPilih .note{font-size:11.5px}}
.personaIkon{font-size:22px;line-height:1}
.personaAtas{display:flex;align-items:center;justify-content:space-between;gap:6px;flex-wrap:wrap}
.personaTag{position:static;flex:0 0 auto;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:var(--cop);color:var(--atas-cop);border-radius:999px;padding:2px 7px}
/* Pusingan 127: MOD RINGKAS — 3 langkah besar untuk akaun baharu (nombor/✓, ikon, teks, butang; 320 px: butang penuh lebar di bawah) */
.ringkasLangkah{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:10px}
.ringkasLangkah li.card{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:8px 10px;align-items:center;margin:0}
.ringkasLangkah .t{min-width:0;display:flex;flex-direction:column;gap:2px;overflow-wrap:break-word}
.ringkasLangkah .t b{font-size:15px;line-height:1.3}.ringkasLangkah .t .note{margin:0}
.ringkasNo{width:28px;height:28px;border-radius:50%;border:2px solid var(--cop);color:var(--cop);display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex:none}
.ringkasLangkah li.siap .ringkasNo{background:var(--hijau);border-color:var(--hijau);color:var(--atas-cop)}
.ringkasIkon{font-size:22px;line-height:1;flex:none}
.ringkasLangkah .btn{min-width:84px;padding-left:12px;padding-right:12px}
@media(max-width:420px){.ringkasLangkah li.card{grid-template-columns:auto auto minmax(0,1fr)}.ringkasLangkah .btn{grid-column:1/4;width:100%}}
.personaLangkah{list-style:none;margin:8px 0 0;padding:0}
.personaLangkah li{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:var(--lejar)}
.personaLangkah li:last-child{border-bottom:none}
.personaLangkah .t{flex:1;min-width:0;display:flex;flex-direction:column;overflow-wrap:break-word}
.personaLangkah .t b{font-size:14px}.personaLangkah .t .note{font-size:12.5px}
.personaTik{flex:none;width:26px;height:26px;border-radius:50%;background:var(--kertas2);border:1.5px solid var(--garis);display:grid;place-items:center;font-size:12px;font-weight:800;color:var(--pudar)}
.personaLangkah li.siap .personaTik{background:var(--hijau);border-color:var(--hijau);color:var(--atas-cop)}
.personaLangkah li.siap .t b{text-decoration:line-through;color:var(--pudar)}
/* Pusingan 93: PERSONA BERBILANG — pilih semua yang berkenaan, cip peranan, langkah peranan lain, cadangan "Rekod anda menunjukkan" */
.personaPilih.pilih{border-color:var(--cop);background:var(--cop-lembut);box-shadow:inset 0 0 0 1px var(--cop)}
.personaPilih[aria-pressed="true"] .personaTag{background:var(--hijau);color:var(--kertas2)}
.personaPilih:focus-visible,.personaTogol .cip:focus-visible{outline:2px solid var(--cop);outline-offset:2px}
#personaSimpan{margin-top:10px}
.personaCip{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 2px}
.personaCip .tag{display:inline-flex;align-items:center;gap:4px;max-width:100%;overflow-wrap:break-word;min-width:0}
.personaLain{list-style:none;margin:6px 0 0;padding:0}
.personaLain li{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:var(--lejar)}
.personaLain li:last-child{border-bottom:none}
.personaLain .personaIkon{flex:none;width:26px;text-align:center;font-size:19px}
.personaLain .t,.personaCadang .t{flex:1;min-width:0;display:flex;flex-direction:column;overflow-wrap:break-word}
.personaLain .t b{font-size:14px}.personaLain .t .note{font-size:12.5px}
.personaCadang{margin-top:10px;border:1.5px dashed var(--cop);border-radius:12px;padding:4px 10px}
.personaCadang .baris{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border-bottom:var(--lejar);padding:8px 0}
.personaCadang .baris:last-child{border-bottom:none}
.personaCadang .baris-aksi{display:flex;gap:6px;flex:none;flex-wrap:wrap}
.personaTogol{display:flex;flex-wrap:wrap;gap:8px}
.personaTogol .cip{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 12px;border-radius:999px;border:1.5px solid var(--garis);background:var(--kertas2);color:var(--dakwat);font-weight:600;font-size:13px;cursor:pointer;max-width:100%;text-align:left;overflow-wrap:break-word}
.personaTogol .cip.pilih{background:var(--cop);border-color:var(--cop);color:var(--atas-cop)}
@media(max-width:359px){.personaTogol .cip{font-size:12.5px;padding:6px 10px}.personaCadang .baris-aksi{width:100%}}
/* Pusingan 93: wizard "Perlu fail cukai?" (kad pemula tab e-Filing) */
.pwWiz{margin:10px 0;border:1.5px solid var(--garis);border-radius:14px;padding:4px 12px 10px;background:var(--kertas)}
.pwWiz>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;list-style:none}
.pwWiz>summary::-webkit-details-marker{display:none}
.pwWiz>summary::after{content:"›";margin-left:auto;flex:none;width:20px;height:20px;line-height:20px;text-align:center;transition:transform .15s ease;font-size:20px;color:var(--pudar)}   /* kotak segi empat sama: anak panah yang diputar 90° kekal dalam kotaknya (16 Okt 2026: melimpah 12px bila terbuka) */
.pwWiz[open]>summary::after{transform:rotate(90deg)}
.pwSoalan{border:0;margin:10px 0 0;padding:0;min-width:0}
:where(.pwSoalan) legend{font-weight:650;font-size:14px;margin-bottom:6px;padding:0;overflow-wrap:break-word;max-width:100%}
.pwPilihan{display:flex;flex-wrap:wrap;gap:6px}
.pwPilih{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 12px;border:1.5px solid var(--garis);border-radius:999px;background:var(--kertas2);cursor:pointer;font-size:13.5px;max-width:100%}
.pwPilih input{width:18px;height:18px;flex:none;margin:0;accent-color:var(--cop)}
.pwPilih span{overflow-wrap:break-word;min-width:0}
.pwPilih:has(input:checked){border-color:var(--cop);background:var(--cop-lembut)}
#pw_semak{margin-top:12px}
.pwHasil{margin:12px 0 0}
/* Langganan & bil berulang (9 Okt 2026) */
.berulangBaris .v{font-variant-numeric:tabular-nums}
.berulangTag{display:inline-block;background:var(--emas);color:#1D1930;border-radius:999px;padding:1px 8px;font-size:11.5px;font-weight:700}
.berulangBaris.lewat .t b{color:var(--cop)}
/* ── Kalendar wang (pusingan 138): "Cukup hingga gaji?", grid bulan (Isnin dahulu), senarai akan datang, lencana & bahagian lipat ── */
.kalCukup{border:1px solid var(--garis);border-radius:var(--r);padding:10px 12px;margin:10px 0 12px;background:var(--kertas2)}
.kalCukup.kurang{border-color:color-mix(in srgb, var(--merah) 45%, var(--garis));box-shadow:inset 4px 0 0 var(--merah)}
.kalCukup.ketat{border-color:color-mix(in srgb, var(--amber) 45%, var(--garis));box-shadow:inset 4px 0 0 var(--amber);background:var(--amber-lembut)}
.kalCukup.cukup{box-shadow:inset 4px 0 0 var(--hijau)}
.kalCukup .baris{min-height:40px}
.kalCukup .v{font-variant-numeric:tabular-nums;white-space:nowrap}
.kalLabel{display:block}
.kalSelepas{display:block;font-size:12px;font-weight:500;color:var(--pudar);text-align:right}
.kalAmaran{margin:6px 0 2px;font-weight:650}
.kalCukup.kurang .kalAmaran{color:var(--merah)}
.kalCukup.ketat .kalAmaran{color:var(--amber)}
.kalCukup.cukup .kalAmaran{color:var(--hijau)}
.kalBaki{margin-top:8px}
.kalBaki .row{gap:8px;align-items:center;flex-wrap:wrap;margin:4px 0}
.kalBaki input{flex:1 1 120px;min-width:0}
.kalBaki .row .pill{flex:none}
.kalNav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:6px 0}
.kalNav b{font-size:16px;text-align:center;flex:1;min-width:0}
.kalNav button{width:44px;height:44px;flex:none;border-radius:50%;border:1.5px solid var(--garis);background:var(--kertas2);color:var(--cop);font-size:22px;font-weight:700;line-height:1}
.kalNav button:disabled{opacity:.35}
.kalGrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin:4px 0 12px}
.kalMinggu{font-size:12px;font-weight:650;color:var(--pudar);text-align:center;padding:2px 0}
.kalHari{min-height:44px;min-width:0;border-radius:10px;border:1px solid transparent;background:var(--kertas2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:4px 0;color:var(--dakwat);font-variant-numeric:tabular-nums;cursor:pointer}
.kalHari.ada{border-color:var(--garis)}
.kalHari.kini{border-color:var(--cop);font-weight:700}
.kalHari.pilih{background:var(--cop);color:var(--atas-cop);border-color:var(--cop)}
.kalNo{font-size:14px;line-height:1}
.kalTitik{display:flex;gap:2px;height:6px}
.kalTitik i{width:6px;height:6px;border-radius:50%;background:var(--cop)}
.kalTitik i.gaji{background:var(--hijau)}
.kalTitik i.percubaan{background:var(--amber)}
.kalTitik i.dikesan{background:var(--pudar)}
.kalTitik i.ok{opacity:.35}
.kalHari.pilih .kalTitik i{background:var(--atas-cop)}
.kalBaris{align-items:flex-start;flex-wrap:wrap;gap:10px;padding:8px 0}
.kalTarikh{flex:none;width:42px;text-align:center;display:flex;flex-direction:column;line-height:1.15;color:var(--pudar);font-size:12px}
.kalTarikh b{font-size:18px;color:var(--dakwat)}
.kalBaris .t{min-width:0}
.kalBaris>.v{margin-left:auto}
.kalBaris .v{font-variant-numeric:tabular-nums;white-space:nowrap}
.kalBaris .v.masuk{color:var(--hijau)}
.kalBaris.dibayar .t b{color:var(--pudar)}
.kalAksi{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 100%;min-width:0;margin:-4px 0 0 52px}
.kalTag{display:inline-block;border-radius:999px;padding:1px 8px;font-size:11.5px;font-weight:700;background:var(--kertas3);color:var(--dakwat);max-width:100%;white-space:normal}
.kalTag.ok{background:var(--cop-lembut);color:var(--cop)}
.kalTag.lewat{background:var(--amber-lembut);color:var(--amber)}
.kalTag.naik{background:var(--emas);color:#1D1930}
.kalSeksyen{margin:10px 0 0}
details.bab.kalSeksyen summary>span{min-width:0}
details.bab.kalSeksyen summary .tag{display:table;margin:4px 0 0;font-size:12px}
.kalSeksyen .kalIsi{padding:0 16px 14px}
.kalSeksyen [hidden]{display:none !important}
.kalBorangBaris{gap:8px;flex-wrap:wrap}
.kalBorangBaris .fld{flex:1 1 130px;min-width:0}
.kalPautan code{display:block;overflow-wrap:anywhere;word-break:break-all;background:var(--kertas3);border-radius:8px;padding:8px 10px;font-size:13px}
.kalButang{gap:8px;flex-wrap:wrap;margin:8px 0}
/* p142:reka2 — asas 180 px (dahulu 140): "Turn off the subscription" terputus pada 142 px di 390 px; pasangan kini bertindan dalam kad sempit. */
.kalButang .btn{flex:1 1 180px;text-align:center;text-decoration:none}
.kalCara{margin:6px 0 0 18px;padding:0}

/* Pusingan 86: tutorial persona, berulang & eksport 5 format */

.tuPersonaGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:10px}
.tuPersona{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:10px;border-radius:12px;border:1.5px solid var(--garis);background:var(--kertas2);min-height:44px}
.tuPersona span{font-size:22px;line-height:1}.tuPersona b{font-size:13.5px}.tuPersona small{font-size:11.5px;color:var(--pudar);line-height:1.35}
.tuPersona.tuPilih{border-color:var(--cop);background:var(--cop-lembut);box-shadow:inset 0 0 0 1px var(--cop)}
.tuPersonaGrid+.btn{margin-top:10px}
.tuEmelBaris.tuLewat{border-color:var(--amaran,#b45309)}
@media (max-width:359px){.tuPersonaGrid{grid-template-columns:1fr}}
/* Pusingan 87: Klien saya (mod akauntan berbilang klien) */
.klienBaris.semasa{background:var(--kertas2);background:color-mix(in srgb,var(--cop) 8%,transparent);border-radius:12px}
.klienBaris.pudar{opacity:.6}
.klienTag{font-size:12px;font-weight:600;color:var(--cop)}
.klienAmaran{color:var(--amber);font-weight:600}
/* Pusingan 95: Portfolio klien firma — cip TT & penapis berbalut, baris klien (teks + .baris-aksi yang jatuh ke bawah di telefon),
   jalur kiri merah/amber untuk lewat/hampir tarikh akhir, nota firma condong. */
#kadPortfolio .pfTt,#kadPortfolio .pfTapis{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
#kadPortfolio .pill.on{background:var(--cop);border-color:var(--cop);color:var(--atas-cop)}
.pfRingkas{margin:0 0 8px;overflow-wrap:break-word}
.pfBaris,.pfCalon{gap:10px;padding:8px 4px}
.pfBaris .t,.pfCalon .t{min-width:0;flex:1 1 0;display:flex;flex-direction:column;gap:2px}
.pfBaris .note,.pfCalon .note{overflow-wrap:break-word}
.pfBaris.pf-lewat{box-shadow:inset 3px 0 0 var(--merah)}
.pfBaris.pf-hampir{box-shadow:inset 3px 0 0 var(--amber)}
.pfBaris.pf-lewat .pfHari{color:var(--merah);font-weight:650}
.pfBaris.pf-hampir .pfHari{color:var(--amber);font-weight:650}
.pfNota{font-style:italic}
.pfPk{white-space:nowrap;align-self:center}
.pfPk-siap{color:var(--hijau)}
.pfCalonSek .pfCalon:last-child,.pfSenarai .pfBaris:last-child{border-bottom:none}
/* Akhir tempoh perakaunan: bulan + hari bersebelahan, membalut pada skrin sempit (pusingan 95). */
.pfAkhir{display:flex;flex-wrap:wrap;gap:8px}
.pfAkhir select{flex:1 1 8em;min-width:0}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   PUSINGAN 88 (9 Okt 2026) — PENYELARASAN & PENDARATAN BAHARU (teguran Nazri: "layout tidak sekata dan selari… butang
   ada yang lebih tinggi dan rendah… fill in the blank box lari… G terlalu rapat"). Peraturan di sini DIKUATKUASAKAN oleh
   semak-reka.mjs (pemeriksaan penjajaran: butang/pautan terakhir kad sebaris mesti sama paras; medan borang sebaris mesti
   bermula pada paras yang sama) — deploy disekat jika berulang.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

/* Kad sebaris: kandungan menolak butang/pautan ke BAWAH — semua butang dalam satu baris sama paras. */

/* Medan borang app: baris grid .fld tidak diregangkan (label, input, nota bermula di atas; kalkulator: kira.css). */
.fld{align-content:start}
/* Butang Google: lambang rasmi berwarna, ruang yang cukup, gaya neutral (garis panduan jenama). */
.oauthBtn{gap:12px;min-height:48px}
.oauthBtn[data-oauth="google"]{background:var(--kertas2);color:var(--dakwat);border:1px solid var(--garis)}
.oauthBtn[data-oauth="google"]:hover{border-color:var(--cop)}
.oauthIkon{width:26px;height:26px;flex:0 0 26px;border-radius:50%;background:#FFFFFF;box-shadow:0 0 0 1px var(--garis);display:inline-grid;place-items:center}
.oauthIkon svg{width:16px;height:16px;display:block}

/* Gerakan: setiap langkah muncul mengikut giliran dalam gelung 7 s. */

/* ── Katalog semua ciri (dahulu dinding cip) ── */

[data-kumpulan="masuk"]{--k-ikon:"📥";--k-warna:var(--cop)}
[data-kumpulan="cukai"]{--k-ikon:"🧮";--k-warna:var(--cop)}
[data-kumpulan="wang"]{--k-ikon:"💸";--k-warna:var(--hijau)}
[data-kumpulan="niaga"]{--k-ikon:"🏢";--k-warna:var(--amber)}
[data-kumpulan="pasukan"]{--k-ikon:"👥";--k-warna:#B35C8A}
[data-kumpulan="aman"]{--k-ikon:"🔒";--k-warna:var(--pudar)}

/* Tile senarai beli (latar gelap, kad putih): baris ahli kekal terbaca. */

/* Kad "Pasang di peranti ini": tajuk & nota pada baris berasingan (dahulu "…peranti iniBuka seperti app…" bercantum). */
.pasang .t>b,.pasang .t>.note{display:block}
.pasang .t>b{font-size:15.5px;line-height:1.3;margin-bottom:3px}
/* Persona "Siapa anda?" (7 pilihan): baris terakhir DIPUSATKAN — tiada lubang kosong di kanan (4 + 3 di desktop, 2 + 2 + 2 + 1 di telefon). */
.personaGrid{display:flex;flex-wrap:wrap;justify-content:center}
.personaGrid>.personaPilih{flex:1 1 150px;max-width:calc(50% - 4px)}
@media(min-width:620px){.personaGrid>.personaPilih{flex-basis:calc(25% - 6px);max-width:calc(25% - 6px)}}

/* ═══ Pusingan 89: waranti fleksibel, projek & pusat kos, tuntutan perbelanjaan ═══ */
.warantiBaris{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
.warantiBaris>input[type=number]{flex:0 0 96px;min-width:0}
.warantiBaris>select{flex:1 1 160px;min-width:0}
.warantiBaris>.warantiHingga{flex:1 1 180px;min-width:0;display:block}
.warantiBaris>[hidden]{display:none!important}
.warantiBaris>.btn{flex:0 0 auto}
.warantiCip{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 2px}
.cipWar{min-height:38px;padding:6px 12px;border-radius:999px;border:1px solid var(--garis);background:var(--kertas2);color:var(--dakwat);font-size:13px;font-weight:600;cursor:pointer;line-height:1.2}
.cipWar:hover{border-color:var(--cop)}
.cipWar:focus-visible{outline:none;box-shadow:var(--fokus)}
.cipWar.cadang{border-color:var(--cop);background:var(--cop-lembut);color:var(--cop)}
.warantiDikesan{display:block;margin-top:4px}
.tuntutanKad .tuntutanTag{margin-left:6px;vertical-align:middle}
.tuntutanButang{display:flex;flex-wrap:wrap;gap:8px}.tuntutanButang .btn{flex:1 1 140px}
.tuntutanNota{margin:0 0 10px;font-size:13px;color:var(--pudar);overflow-wrap:break-word}
/* Pusingan 92: 5 status (termasuk "Disemak") — flex-wrap: 2 + 2 + 1 penuh pada telefon, 5 sebaris pada skrin lebar. */
.tuntutanRingkasGrid{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.tuntutanRingkasGrid>.tuntutanRingkas{flex:1 1 calc(50% - 8px);min-width:0}
@media(min-width:620px){.tuntutanRingkasGrid>.tuntutanRingkas{flex-basis:calc(20% - 8px)}}
.tuntutanRingkas{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:10px 12px;border:1px solid var(--garis);border-radius:14px;background:var(--kertas2);color:var(--dakwat);min-height:88px;cursor:pointer}
.tuntutanRingkas b{font-size:17px}
.tuntutanRingkas.pilih{border-color:var(--cop);box-shadow:inset 0 0 0 1px var(--cop)}
.tuntutanRingkas.ok b{color:var(--hijau)}.tuntutanRingkas.amaran b{color:var(--amber)}
.tuntutanRingkas:focus-visible{outline:none;box-shadow:var(--fokus)}
.tuntutanAlat{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 10px}
.tuntutanBaris{border-bottom:var(--lejar);padding:4px 0}
.tuntutanBaris:last-child{border-bottom:none}
.tuntutanBuka{display:flex;width:100%;justify-content:space-between;gap:10px;text-align:left;background:none;border:0;padding:8px 0;color:inherit;cursor:pointer;min-height:44px}
.tuntutanBuka .t{display:flex;flex-direction:column;min-width:0;overflow-wrap:break-word}
.tuntutanBuka .v{flex:0 0 auto;text-align:right;font-weight:700}
.tuntutanBuka .tuntutanAmaun{white-space:nowrap}
.tuntutanAtas{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.tuntutanAtas .tag{white-space:normal;line-height:1.3;padding:2px 8px}
.warantiFld>.note,.projekFld>.note{display:block;margin-top:6px;line-height:1.45}
.warantiFld>.pautanTutorial,.projekFld>.pautanTutorial{display:flex;margin-top:2px}
.tuntutanPantas{display:flex;gap:6px;flex-wrap:wrap;margin:2px 0 6px}
.pill.utama{background:var(--cop);border-color:var(--cop);color:var(--atas-cop)}
.tuntutanEksport{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}.tuntutanEksport .btn{flex:1 1 160px}
.projekGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin:12px 0}
.projekKad{display:flex;flex-direction:column;gap:4px;text-align:left;padding:14px;border:1px solid var(--garis);border-radius:16px;background:var(--kertas2);color:var(--dakwat);cursor:pointer;min-height:118px}
.projekKad:hover{border-color:var(--cop)}
.projekKad:focus-visible{outline:none;box-shadow:var(--fokus)}
.projekKad b{overflow-wrap:break-word}
.projekJum{font-size:20px;font-weight:800;letter-spacing:-.01em}
.projekBajet{display:block;height:7px;border-radius:999px;background:var(--kertas3);overflow:hidden;margin-top:auto}
.projekBajet i{display:block;height:100%;width:var(--p,0%);background:var(--hijau);border-radius:inherit}
.projekBajet.lebih i{background:var(--merah)}
.projekBajet.besar{height:10px;margin:6px 0 14px}
/* Pusingan 92: flex-wrap (bukan grid) — kotak ganjil terakhir memenuhi baris, bukan meninggalkan lubang; amaun mengecil sedikit
   pada telefon 320px supaya "RM 16,850.00" kekal satu baris. */
.projekRingkas{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.projekRingkas>div{flex:1 1 130px;min-width:0;border:1px solid var(--garis);border-radius:12px;padding:10px;background:var(--kertas2);display:flex;flex-direction:column}
.projekRingkas b{font-size:clamp(15px,4.4vw,17px)}
.amaranTeks{color:var(--merah)}
.projekBar{display:grid;grid-template-columns:minmax(min(8em,45%),1.3fr) minmax(0,1fr) auto;gap:8px;align-items:center;padding:6px 0;font-size:13.5px}
.projekBar span{overflow-wrap:break-word}
.projekBar i{display:block;height:8px;border-radius:999px;background:var(--cop);width:var(--p,0%)}
/* Pusingan 120: BAJET vs SEBENAR (Laporan) — bar terpakai ikut status; garis menegak = masa tempoh berlalu (tempoh semasa). */
.bajetSenarai{display:flex;flex-direction:column;gap:12px;margin:10px 0 4px}
.bajetKepala{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;column-gap:10px;row-gap:2px;font-size:14px}
.bajetKepala>span{flex:1 1 9em;min-width:0;overflow-wrap:break-word;font-weight:600}.bajetKepala>b{flex:0 1 auto;margin-left:auto;text-align:right;font-size:13.5px}
.bajetBar{position:relative;height:9px;border-radius:999px;background:var(--kertas3);margin:6px 0 4px;overflow:hidden}
.bajetBar i{display:block;height:100%;border-radius:999px;width:var(--p,0%);background:var(--hijau)}
.bajetBar u{position:absolute;top:-2px;bottom:-2px;left:var(--m,0%);width:2px;background:var(--dakwat);opacity:.55;text-decoration:none}
.s-hampir .bajetBar i{background:var(--amber)}.s-lebih .bajetBar i{background:var(--merah)}.s-tiadaBajet .bajetBar i{background:var(--pudar)}
.bajetNota{margin:0;font-size:12.5px}.s-lebih .bajetStatus{color:var(--merah);font-weight:650}.s-hampir .bajetStatus{color:var(--amber);font-weight:650}
.s-ok .bajetStatus{color:var(--hijau);font-weight:650}.bajetAmaran{color:var(--merah);margin:4px 0}
.projekBar b{white-space:nowrap}

/* ═══ Pusingan 90: direktori Semua ciri, perbatuan, dasar tuntutan, laporan tahunan, tempoh tukar ═══ */
.tuntutanAlat .cip{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 12px;border-radius:999px;border:1.5px solid var(--garis);background:var(--kertas2);color:var(--dakwat);font-weight:600;font-size:13px;white-space:nowrap;cursor:pointer}
.tuntutanAlat .cip b{font-weight:700;font-size:12px;padding:1px 7px;border-radius:999px;background:var(--kertas);background:color-mix(in srgb, var(--dakwat) 8%, transparent)}
.tuntutanAlat .cip.pilih{background:var(--cop);border-color:var(--cop);color:var(--atas-cop)}
.tuntutanAlat .cip.pilih b{background:rgba(255,255,255,.22)}
.tuntutanAlat .cip:focus-visible{outline:none;box-shadow:var(--fokus)}
.sorotCiri{animation:sorotCiri 1.8s ease}
@keyframes sorotCiri{0%,60%{box-shadow:0 0 0 3px var(--cop)}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.sorotCiri{animation:none;box-shadow:0 0 0 3px var(--cop)}}
.ciriCari{display:flex;align-items:center;gap:8px;border:1.5px solid var(--garis);border-radius:14px;background:var(--kertas2);padding:0 12px;margin:12px 0 10px;min-height:46px}
.ciriCari:focus-within{border-color:var(--cop);box-shadow:var(--fokus)}
.ciriCari span{color:var(--pudar);font-size:18px}
.ciriCari input{flex:1;min-width:0;border:0;background:transparent;box-shadow:none;padding:10px 0;font-size:15px}
.ciriCari input:focus{outline:none;box-shadow:none}
.ciriGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin:8px 0 16px}
.ciriKad{display:flex;flex-direction:column;gap:6px;padding:14px;border:1px solid var(--garis);border-radius:16px;background:var(--kertas2);min-width:0}
.ciriAtas{display:flex;align-items:flex-start;gap:10px}
.ciriAtas b{overflow-wrap:break-word;line-height:1.35}
.ciriIkon{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--cop-lembut);font-size:18px}
.ciriKad .note{margin:0;overflow-wrap:break-word}
/* Pusingan 93: persona sasaran setiap ciri & tapis ikut persona */
.ciriUntuk{display:flex;flex-wrap:wrap;gap:2px;font-size:14px;line-height:1.2;letter-spacing:1px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ciriAksi{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:4px;align-items:center}
.ciriAksi .btn{min-height:44px;padding:8px 16px}   /* p142: sasaran sentuh ≥ 44px */
.ciriAksi .pill{min-height:44px}
.dasarTuntutan{margin:12px 0}
.dasarTuntutan summary{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;cursor:pointer;min-height:40px;list-style:none}
.dasarTuntutan summary::-webkit-details-marker{display:none}
.dasarTuntutan summary::after{content:"›";margin-left:auto;transition:transform .2s ease;font-weight:700;color:var(--pudar)}
.dasarTuntutan[open] summary::after{transform:rotate(90deg)}
.dasarGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px 12px;margin:8px 0}
.dasarBaris{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13.5px;min-width:0}
.dasarBaris span{min-width:0;overflow-wrap:break-word}
.dasarBaris input{flex:0 0 120px;max-width:120px;min-width:0}
.tuntutanLebih{align-self:flex-start;margin-top:4px;white-space:normal;line-height:1.3}
.perbatuanJumlah{font-weight:700;font-size:16px;margin:10px 0;min-height:1.4em;color:var(--cop)}
.kadPerbatuan b{font-size:15px}
.tukarNota{color:var(--amber)}
.laporanBulan{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px;align-items:end;height:130px;margin-top:8px}
.laporanBulanLajur{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;height:100%;min-width:0}
.laporanBulanLajur i{display:block;width:70%;max-width:26px;height:var(--p,0%);min-height:0;border-radius:6px 6px 2px 2px;background:var(--cop)}
.laporanBulanLajur span{font-size:10.5px;color:var(--pudar);white-space:nowrap;overflow:hidden;text-overflow:clip;max-width:100%}

/* TIADA PERKATAAN TERPUTUS (10 Okt 2026, pusingan 91) — baris senarai: bila ruang sempit, butang/nilai di kanan turun ke
   baris baharu; teks TIDAK dihimpit sehingga perkataan dipecah ("Professional s"). Dijaga pengesan 'perkataan terputus' &
   'teks bertindih' dalam semak-reka.mjs pada 7 lebar (320 → 1440). */
.baris .t{flex:1 1 7em}
.baris>.row{flex:0 1 auto;flex-wrap:wrap;justify-content:flex-end;margin-left:auto}
.baris>.row>*{flex:0 0 auto;min-width:0}
/* Pusingan 120: resit rasmi pada baris Wang masuk — baris penuh di bawah butiran (membalut di telefon). */
.pendapatanBaris{flex-wrap:wrap}
.baris>.row.resitRasmiBaris{flex:1 1 100%;justify-content:flex-start;align-items:center;gap:6px;margin-left:0}
.resitRasmiNo{font-size:12.5px;font-weight:650;color:var(--hijau);font-variant-numeric:tabular-nums}.resitRasmiNo.batal{color:var(--merah)}
.resitRasmiKunci{font-size:11.5px;margin:0}
.resitRasmiSejarah .resitRasmiNo{font-weight:600;font-size:12.5px}
.resitRasmiTetapan{margin-top:8px}.resitRasmiTetapan>summary{cursor:pointer;font-weight:650;min-height:40px;display:flex;align-items:center}
/* Pusingan 120: imbas BANYAK Borang EA sekali gus (public/ea-pukal.js) — baris setiap borang (menunggu / membaca / dibaca / gagal /
   sunting), grid angka yang membalut sendiri (320 px → desktop), ringkasan & eksport. Warna melalui token (tema cerah & gelap). */
:where(.eapKuota) p{margin:0}.eapKuota p+p{margin-top:6px}
.eapPilih{display:flex;flex-direction:column;gap:10px}.eapPilih .note{margin:0}
.eapTogol{cursor:pointer;align-items:flex-start;gap:10px;border-bottom:none;padding:0}
.eapTogol input{width:20px;height:20px;flex:none;margin-top:2px}
.eapStatus{margin:10px 0;font-weight:600;min-height:1em}
.eapStatus:empty{display:none}
.eapSenarai{display:flex;flex-direction:column;gap:10px;margin:10px 0}
.eapBaris{margin:0}
.eapBaris.s-menunggu,.eapBaris.s-mengimbas{border-style:dashed}
.eapBaris.s-mengimbas{opacity:.85}
.eapBaris.s-gagal{border-color:var(--merah)}
.eapBaris.beramaran{border-color:var(--amber)}
.eapKepala{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.eapNama{flex:1 1 12em;min-width:0;overflow-wrap:break-word}
.eapKepala .tag{flex:0 0 auto}
.eapMajikan,.eapFail{margin:4px 0 0;overflow-wrap:break-word}
.eapRalat{color:var(--merah);margin:6px 0 0;overflow-wrap:break-word}
.eapAngka{display:grid;grid-template-columns:repeat(auto-fill,minmax(8.5em,1fr));gap:8px 12px;margin:10px 0 4px}
.eapSel{display:flex;flex-direction:column;min-width:0}
.eapSel .note{margin:0;overflow-wrap:break-word}
.eapSel b{font-variant-numeric:tabular-nums;overflow-wrap:break-word}
.eapButang{flex-wrap:wrap;gap:8px;margin-top:10px}
.eapButang .pill{min-height:40px}
.eapButang .btn{flex:1 1 10em;min-width:0}
.eapUbah{display:grid;grid-template-columns:repeat(auto-fill,minmax(12em,1fr));gap:0 12px;margin-top:8px}
.eapUbah .fld{margin:6px 0;min-width:0}
.eapRingkas .note{margin:4px 0}
.eapEksport{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.eapEksport .eksportPasangan{flex:1 1 100%}
.eapEksport>.btn{flex:1 1 160px}
.eapKosong{margin:4px 0 10px}
/* Anggaran cukai syarikat (pusingan 91) */
.syarikatBesar{font-size:30px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--cop);line-height:1.15;margin:4px 0 2px}
.syarikatTanda{display:flex;gap:10px;align-items:flex-start;cursor:pointer;padding:8px 0 2px;font-size:14px;line-height:1.4}
.syarikatTanda input{width:20px;height:20px;flex:none;margin-top:1px}
.syarikatHasil .baris .v{white-space:nowrap}
/* ═══ Pusingan 93 (C1) — KUMPULAN, JAWATAN, PENGGUNA & RUANG: Pengguna & kebenaran (jenis kumpulan, profil, ahli dengan jawatan &
   "akaun lain"), "Siapa yang anda tambah?" (kad jawatan), kebenaran berkumpulan, Ruang saya, penukar ruang di pengepala & kad
   "Ruang lain anda". Teks membalut antara perkataan (overflow-wrap:break-word), sasaran sentuh ≥ 44px, sekata 320–1440px. ═══ */
.kumpNama{font-size:18px;font-weight:650;margin-top:6px;line-height:1.3;overflow-wrap:break-word}
.kumpHero .kumpNama{font-size:20px}
.kumpJenis{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:8px 0 4px}
.kumpJenisTag{background:var(--cop-lembut);color:var(--cop);padding:3px 10px;font-size:12.5px;white-space:normal;overflow-wrap:break-word}
.kumpKerusi{margin-top:4px;font-weight:600}
.kumpSkemaLama{margin:0}
.kumpJenisGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.kumpJenisBtn{display:flex;align-items:center;gap:8px;text-align:left;min-height:48px;padding:8px 10px;border-radius:12px;border:1.5px solid var(--garis);background:var(--kertas2);color:var(--dakwat);font:inherit;font-size:13.5px;font-weight:600;line-height:1.3;cursor:pointer}
.kumpJenisBtn span:last-child{min-width:0;overflow-wrap:break-word}
.kumpJenisBtn.pilih{border-color:var(--cop);background:var(--cop-lembut);box-shadow:inset 0 0 0 1px var(--cop)}
.kumpJenisBtn:focus-visible,.jawatanKad:focus-visible,.hdRuang:focus-visible,.ruangBaris:focus-visible,.kumpBaris:focus-visible{outline:2px solid var(--cop);outline-offset:2px}
.kumpProfil,.jawatanJenis{border:1px solid var(--garis);border-radius:14px;background:var(--kertas2);margin:12px 0 0}
.kumpProfil{padding:0 12px 12px}
.kumpProfil>summary,.jawatanJenis>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;min-height:52px;padding:6px 2px;font-weight:650}
.jawatanJenis>summary{padding:6px 14px}
.kumpProfil>summary::-webkit-details-marker,.jawatanJenis>summary::-webkit-details-marker{display:none}
.kumpProfil>summary i,.jawatanJenis>summary i{margin-left:auto;font-style:normal;color:var(--pudar);transition:transform .2s ease}
.kumpProfil[open]>summary i,.jawatanJenis[open]>summary i{transform:rotate(90deg)}
.jawatanJenis>summary .t{min-width:0;overflow-wrap:break-word}
.jawatanJenis>.jawatanGrid{padding:0 12px 12px}
.kumpProfil .fld textarea{width:100%;min-height:64px;resize:vertical}
.kumpBaris,.ruangBaris{color:inherit;font:inherit;cursor:pointer}
.kumpIkon,.ruangIkon,.jawatanIkon{flex:none;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;font-size:18px;line-height:1;border-radius:10px;background:var(--kertas3)}
.kumpLuar{background:var(--kertas3);color:var(--pudar);vertical-align:middle;margin-left:2px}
.kumpAnda{font-weight:500;color:var(--pudar);font-size:12.5px}
.jawatanGrid{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
@media(min-width:620px){.jawatanGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.jawatanKad{display:flex;align-items:flex-start;gap:10px;text-align:left;width:100%;min-height:56px;padding:12px;border-radius:14px;border:1.5px solid var(--garis);background:var(--kertas2);color:var(--dakwat);font:inherit;cursor:pointer}
.jawatanKad:hover{border-color:var(--cop)}
.jawatanKad .t{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.jawatanKad b{font-size:15px;line-height:1.3;overflow-wrap:break-word}
.jawatanKad .note{font-size:12.5px;line-height:1.4;color:var(--pudar);overflow-wrap:break-word}
.jawatanTag{font-size:11.5px;font-weight:600;line-height:1.35;color:var(--cop);overflow-wrap:break-word}
.kbKump{padding:2px 0}
.kbKump+.kbKump{border-top:1px solid var(--garis);margin-top:6px;padding-top:10px}
.kbKump>.lbl{color:var(--cop);font-size:12.5px;margin-bottom:2px}
.kbNota{margin:10px 0 0}
/* Penukar ruang di pengepala — nama panjang dipendekkan dengan elipsis (tiada limpahan); butang "← Kumpulan saya" disorok pada
   skrin sempit bila penukar ada (senarai penukar sudah mempunyai kumpulan sendiri). */
.hdRuang{display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:52vw;min-height:30px;padding:3px 10px;border-radius:999px;border:1.5px solid var(--garis);background:var(--kertas2);color:var(--dakwat);font:inherit;font-size:12.5px;font-weight:650;line-height:1.4;cursor:pointer;flex:0 1 auto}
.hdRuangNama{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hdRuangPanah{color:var(--pudar);font-size:11px}
@media(max-width:420px){.hdSub.adaRuang #hd_kembaliKlien{display:none}.hdRuang{max-width:46vw}}
.ruangSenarai{display:flex;flex-direction:column}
.ruangBaris.semasa,.kumpBaris.semasa{background:var(--kertas3);background:color-mix(in srgb,var(--cop) 8%,transparent);border-radius:12px}
.ruangBaris .note,.klienBaris .note{overflow-wrap:break-word}
#kadRuangLain .ruangBaris:last-of-type{border-bottom:none}

/* Pusingan 93 — ciri persona (fasa E) */
/* Penyewa harta sewa (borang sumber, kad sumber & tab Sewa) */
.niaPenyewa{border:1px solid var(--garis);border-radius:14px;padding:12px;margin:12px 0 4px;background:var(--kertas2);min-width:0}
.niaPenyewa .row{flex-wrap:wrap}
.niaPenyewa .row>.fld{flex:1 1 140px;min-width:0}
.niaPenyewaRingkas,.niaPeringatanSewa{display:block;overflow-wrap:break-word}
.niaPeringatanSewa{color:var(--amber);font-weight:600}
/* Pratonton import penyata: setiap baris = pilih + keterangan, kemudian destinasi & kategori (turun ke bawah, tidak menghimpit teks) */
.penyataBaris{align-items:flex-start;gap:6px 10px}
.penyataPilih{display:flex;gap:10px;align-items:flex-start;flex:1 1 100%;min-width:0;cursor:pointer}
.penyataPilih input{width:20px;height:20px;flex:none;margin-top:2px}
.penyataTeks{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;overflow-wrap:break-word}
.penyataTeks b{overflow-wrap:break-word}
.penyataKawal{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 100%;min-width:0;padding-left:30px}
.penyataKawal>span{display:flex;flex:1 1 180px;min-width:0}
.penyataKawal>span:empty{display:none}
.penyataKawal select{width:100%;min-width:0;min-height:40px;border-radius:10px;border:1.5px solid var(--garis);background:var(--kertas2);color:var(--dakwat);padding:6px 8px;font-size:13px}
.penyataBaris>.pill{margin-left:30px;white-space:normal;text-align:left}
@media (max-width:359px){.penyataKawal{padding-left:0}.penyataBaris>.pill{margin-left:0}}
/* Agihan item: empat jumlah (Peribadi / Perniagaan / Aset / Belum) — 4 lajur, atau 2 × 2 pada skrin sempit (nilai RM tidak dipecah) */
.agihJum{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:560px){.agihJum{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Pusingan 138: tiga kotak (Semakan pra-isi LHDN — ada e-Invois · bukti sendiri · perlu semak) sebaris; satu lajur di skrin paling sempit. */
.agihJum.tiga{grid-template-columns:repeat(3,minmax(0,1fr))}
/* Skrin telefon: tiga kotak menjadi tiga baris (label · amaun, bilangan di bawah) — label panjang & amaun RM tidak terpotong. */
@media (max-width:480px){.agihJum.tiga{grid-template-columns:1fr;gap:6px}
  .agihJum.tiga div{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:10px}
  .agihJum.tiga div>.note:first-child{flex:1 1 0;min-width:0}
  .agihJum.tiga div>b{flex:none}
  .agihJum.tiga div>.note:last-child{flex-basis:100%}}
.praisiKad details.praisiAhli>summary{list-style-position:inside}
.praisiKad details.praisiAhli>summary .t{display:inline-flex;flex-direction:column;vertical-align:top;max-width:calc(100% - 24px)}
.praisiKad details.praisiAhli>.baris{padding-left:16px}
/* Agihan item: cadangan aset (komputer, telefon, perabot) */
.agihCadangAset{margin-top:6px;font-size:12.5px;min-height:34px;padding:5px 11px;white-space:normal;text-align:left;max-width:100%}
/* Projek → belanja perniagaan */
.projekNiaga{margin:12px 0}
.projekNiagaMedan{display:flex;flex-wrap:wrap;gap:8px}
.projekNiagaMedan>.fld{flex:1 1 200px;min-width:0}
.projekNiagaMedan select{width:100%;min-width:0}
.projekNiaga .btn{width:100%;white-space:normal}
/* Tutorial agihan: empat jumlah (Peribadi / Perniagaan / Aset / Belum) */
.tuAgihJum{grid-template-columns:repeat(4,1fr)}
@media (max-width:480px){.tuAgihJum{grid-template-columns:repeat(2,1fr)}}
/* ═══ Pusingan 93 (C2): tadbir urus kewangan organisasi — pembayar cukai, tutup tahun kumpulan, nota minta admin, dasar tuntutan
   untuk semua ahli, eksport tuntutan ke perisian perakaunan, pembeli e-Invois kumpulan, baki awal penyata ═══ */
.pembayarCukai{margin:0 0 10px}
.pembayarCukai select{width:100%;min-width:0;min-height:42px;margin-top:4px}
.pembayarLbl{display:block;margin-top:8px}
.pembayarNama{margin:6px 0 0;overflow-wrap:break-word}
.pembayarCukai .note,.kunciOrg .note,.mintaAdmin .note{overflow-wrap:break-word}
.kunciOrg .btn{white-space:normal}
.mintaAdmin{margin:10px 0;overflow-wrap:break-word}
.notaDasarTuntutan{margin:12px 0}
.notaDasarSenarai{margin:6px 0 0;padding-left:18px}
.notaDasarSenarai li{margin:3px 0;font-size:13px;color:var(--pudar);overflow-wrap:break-word}
.tuntutEksport{margin:12px 0}
.tuntutEksport summary{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;cursor:pointer;min-height:40px;list-style:none}
.tuntutEksport summary::-webkit-details-marker{display:none}
.tuntutEksport summary::after{content:"›";margin-left:auto;transition:transform .2s ease;font-weight:700;color:var(--pudar)}
.tuntutEksport[open] summary::after{transform:rotate(90deg)}
.tuntutEksport .row{flex-wrap:wrap}
.tuntutEksport .row>.fld{flex:1 1 140px;min-width:0}
.tuntutEksport select{width:100%;min-width:0}
.tuntutEksport .btn,.tuntutEksport .note{white-space:normal;overflow-wrap:break-word}
.eiModPembeli{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 2px}
.eiModPembeli .cip{flex:1 1 140px;min-width:0;white-space:normal}
.eiPembeli input[readonly],.eiPembeli textarea[readonly]{background:var(--kertas2)}
/* ── Pusingan 138: e-Invois di kaunter — QR pembeli MyInvois (kad pembeli, senarai beli, lembar skrin penuh) ──
   Panel QR SENTIASA hitam atas putih (kontras penuh untuk pengimbas juruwang, termasuk tema gelap); teks lain ikut token tema. */
.eiQrBlok{margin-top:14px;padding-top:12px;border-top:1px solid var(--garis)}
.eiQrBaris{display:flex;gap:12px;align-items:center;margin:8px 0 10px}
.eiQrBaris .note{flex:1;min-width:0;overflow-wrap:break-word}
.eiQrMini{flex:none;width:104px;background:#fff;border:1px solid var(--garis);border-radius:var(--r);padding:4px}
.eiQrMini svg,.eiQrMini img{display:block;width:100%;height:auto}
.eiQrMini img{max-height:150px;object-fit:contain}
.eiQrAksi{gap:8px;flex-wrap:wrap;align-items:stretch}
.eiQrAksi .btn{flex:1 1 150px;min-width:0;white-space:normal}
.eiQrKongsi{align-items:flex-start;margin-top:8px}
.eiQrKongsi input{width:21px;height:21px;flex:none;margin-top:2px}
.kaunterKad .kaunterMinta,.kaunterMintaKad .kaunterMinta{margin:8px 0 0;overflow-wrap:break-word}
.kaunterPembeli{margin-top:8px;border-bottom:none}
.kaunterPembeli .t{min-width:0;overflow-wrap:break-word}
.kaunterLembar .wrap{max-width:600px}
.kaunterTajuk{font-size:22px;line-height:1.25;font-weight:700;margin:0 0 4px;color:var(--dakwat)}
.kaunterArahan{margin:0 0 10px}
.kaunterPanel{background:#fff;color:#000;border-radius:var(--r-besar);padding:clamp(12px,4vw,24px);margin:0 auto;max-width:520px;border:2px solid #000}
.kaunterPanel svg,.kaunterPanel img{display:block;width:100%;height:auto;max-height:60vh;margin:0 auto;object-fit:contain}
.kaunterNama{color:#000;font-size:clamp(20px,5.6vw,28px);font-weight:750;line-height:1.2;text-align:center;margin:12px 0 0;overflow-wrap:break-word}
.kaunterTinLbl{color:#333;font-size:14px;font-weight:600;text-align:center;margin:8px 0 0}
.kaunterTin{color:#000;font-size:clamp(20px,5.6vw,30px);font-weight:800;letter-spacing:.04em;text-align:center;font-variant-numeric:tabular-nums;overflow-wrap:break-word}
.kaunterLain{color:#000;font-size:16px;font-weight:600;text-align:center;margin-top:6px;overflow-wrap:break-word}
.kaunterKosong{min-height:180px;display:flex;align-items:center;justify-content:center;text-align:center;color:#000;font-size:16px;font-weight:600;padding:12px}
:where(.kaunterKosong) p{margin:0}
.kaunterAksi{gap:8px;flex-wrap:wrap;margin-top:12px;align-items:stretch}
.kaunterAksi>a.btn{display:flex;align-items:center;justify-content:center;text-align:center}
.kaunterSalinan .kaunterAksi,.einvoisKad .kaunterAksi{margin-top:8px}
.kaunterAksi .btn{flex:1 1 150px;min-width:0;white-space:normal}
.kaunterMintaKad{margin-top:14px}
.kaunterPrivasi{margin:12px 0 0}
.kaunterResitAkhir{margin:-4px 0 10px;color:var(--amber);font-weight:600}
.kaunterResitAkhir:empty{display:none}
.kaunterSalinan{margin-top:10px;padding-top:10px;border-top:1px solid var(--garis)}
.kaunterSelepas .baris{width:100%;text-align:left}
.pmBakiAwal .row{gap:8px;flex-wrap:nowrap;align-items:center}
.pmBakiAwal input{flex:1 1 auto;min-width:0}
.pmBakiAwal .btn{flex:none}
/* ── Pusingan 96: e-Invois setiap resit, semakan pra-fail & skor sedia audit ── */
.einvoisKad .baris{align-items:flex-start}
.einvoisKad .einvoisUuid{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;letter-spacing:.3px;overflow-wrap:anywhere}
.einvoisKad.einvoisSah{border-color:color-mix(in srgb,var(--hijau) 45%,var(--garis))}
.einvoisKad .btn,.einvoisKad .pill{white-space:normal;overflow-wrap:break-word}
.einvoisKad .row>.btn{flex:1 1 150px;min-width:0}
.semakFailKad{overflow:hidden}
.semakFailAtas{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.semakFailAtas>div:first-child{flex:1 1 160px;min-width:0}
.skorBulat{--skor:0;--warnaSkor:var(--amber);flex:none;width:72px;height:72px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:conic-gradient(var(--warnaSkor) calc(var(--skor) * 1%),var(--kertas3) 0);position:relative;color:var(--dakwat)}
.skorBulat::before{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--kertas)}
.skorBulat b,.skorBulat span{position:relative;z-index:1;line-height:1}
.skorBulat b{font-size:22px;font-variant-numeric:tabular-nums}
.skorBulat span{font-size:10px;color:var(--pudar);margin-top:2px}
.skorBar{height:6px;border-radius:999px;background:var(--kertas3);margin-top:10px;overflow:hidden}
.skorBar i{display:block;height:100%;border-radius:999px;transition:width .4s ease}
.semakSenarai{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.semakSenarai li{display:flex;align-items:flex-start;gap:8px;padding:8px 10px;border-radius:12px;background:var(--kertas2);border:1px solid var(--garis);flex-wrap:wrap}
.semakSenarai li .t{flex:1 1 180px;min-width:0;font-size:13px;overflow-wrap:break-word}
.semakSenarai li .pill{flex:none;white-space:normal}
.semakSenarai .semakIkon{flex:none;width:18px;text-align:center}
.semakSenarai li.semak-halang{border-color:color-mix(in srgb,var(--merah) 45%,var(--garis))}
.semakSenarai li.semak-amaran{border-color:color-mix(in srgb,var(--amber) 45%,var(--garis))}
/* Pusingan 138 — Resit sahih: pautan ke resit lain dalam kad isyarat — sebaris penuh & boleh dibalut (320px, nama kedai panjang). */
.kadSahih .semakSenarai li .pill{flex:1 1 100%;max-width:100%;text-align:left;overflow-wrap:break-word}
.semakBersih{color:var(--hijau)}
/* ── Pusingan 96: penjana invois (tab Invois, niaga.js) ── */
.niItemKepala{display:grid;grid-template-columns:minmax(0,1fr) 76px 108px 36px;gap:6px;font-size:12px;font-weight:600;color:var(--pudar);margin:6px 0 2px}
.niItem{display:grid;grid-template-columns:minmax(0,1fr) 76px 108px 36px;gap:6px;align-items:center;margin-bottom:6px}
.niItem input{min-width:0;width:100%;min-height:44px;padding:8px 10px;border-radius:var(--r);border:1.5px solid var(--garis);background:var(--kertas2)}
.niBuang{min-width:36px;min-height:44px;border-radius:var(--r);border:1.5px solid var(--garis);background:var(--kertas2);color:var(--pudar);font-size:20px;line-height:1}
@media(max-width:400px){.niItemKepala{display:none}.niItem{grid-template-columns:1fr 1fr;grid-template-areas:"ket ket" "kuantiti harga" "buang buang"}
  .niItem input[data-nik="keterangan"],.niItem input[data-inv-k="keterangan"]{grid-column:1/3}.niItem .niBuang{grid-column:1/3;min-height:40px}}
.niInv{padding:6px 0 10px;border-bottom:1px solid var(--garis)}
.niInv:last-child{border-bottom:none}
.niInv .baris{min-height:0;padding:4px 0}
.niInv .baris .t .note .tag{margin-top:4px}
.niInvAksi{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.niInvAksi .pill{white-space:normal;text-align:center}

/* ── Pusingan 96: mod privasi (amaun ••••), kunci peranti (tindanan) & pencapaian (lencana) ── */
.hd .privasiBtn{flex:none;min-width:40px;min-height:40px;padding:0 10px;font-size:17px;line-height:1}
.hd .privasiBtn[aria-pressed="true"]{background:var(--cop-lembut);border-color:var(--cop)}
.amaunTersembunyi{display:inline-block;letter-spacing:.08em;color:var(--pudar);border-radius:6px;padding:0 3px;background:var(--kertas3);cursor:pointer;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;font-variant-numeric:tabular-nums;line-height:inherit}
.amaunTersembunyi.dedah{color:inherit;background:var(--cop-lembut);letter-spacing:0}
.besar .amaunTersembunyi,.hero .amaunTersembunyi{padding:0 6px}
.kunciSkrin{position:fixed;inset:0;z-index:88;display:none;align-items:center;justify-content:center;padding:24px 16px calc(24px + env(safe-area-inset-bottom,0px));
  background:var(--kertas);overflow:auto}
.kunciSkrin.on{display:flex}
.kunciAktif{overflow:hidden}
.kunciAktif .toast{z-index:89}
.kunciKad{width:100%;max-width:380px;background:var(--kertas2);border:1px solid var(--garis);border-radius:var(--r-besar);padding:26px 20px;text-align:center;
  box-shadow:0 12px 40px rgba(0,0,0,.14)}
.kunciIkon{font-size:44px;line-height:1;margin-bottom:10px}
.kunciKad h2{margin:0 0 6px;font-size:20px;letter-spacing:-.01em}
.kunciKad .note{overflow-wrap:break-word}
.kunciNota{min-height:1.2em;margin:8px 0 14px;color:var(--amber)}
.kunciKad .btn{white-space:normal}
.pencapaianKad .pencapaianAtas{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.pencapaianKad .pencapaianAtas .pautanTutorial{min-height:40px}
.pencapaianKad .bar{height:8px}
.pencapaianKad .bar i{background:var(--cop)}
.lencanaGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:0;padding:0}
.lencanaGrid.ringkas{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.lencana{display:flex;flex-direction:column;gap:4px;padding:10px;border-radius:var(--r);border:1px solid var(--garis);background:var(--kertas2);min-width:0;overflow-wrap:break-word}
.lencana b{font-size:13px;line-height:1.3}
.lencana .note{font-size:12px;line-height:1.35}
.lencana .lencanaIkon{font-size:26px;line-height:1}
.lencana.dicapai{border-color:color-mix(in srgb,var(--cop) 45%,var(--garis));background:var(--cop-lembut)}
.lencana.berkunci{opacity:.78}
.lencana.berkunci .lencanaIkon{filter:grayscale(1)}
.lencana .bar{height:5px;margin-top:auto}
.lencana .bar i{background:var(--cop)}
.lencanaGrid.ringkas .lencana{align-items:center;text-align:center}
@media(max-width:360px){.lencanaGrid{grid-template-columns:1fr 1fr}.lencanaGrid.ringkas{grid-template-columns:repeat(3,1fr)}}
/* ═══ Pusingan 96: Pindah dari app lain (pratonton #statusKad) & pasangan butang eksport CSV | Excel ═══ */
.pindahLajurKotak{margin:6px 0 10px;border:1.5px solid var(--garis);border-radius:12px;padding:8px 10px;background:var(--kertas2)}
.pindahLajurKotak summary{cursor:pointer;min-height:40px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pindahLajurGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:8px}
.pindahLajur{display:flex;flex-direction:column;gap:4px;min-width:0}
.pindahLajur select{width:100%;min-width:0;min-height:40px;border-radius:10px;border:1.5px solid var(--garis);background:var(--kertas);color:var(--dakwat);padding:6px 8px;font-size:13px}
.pindahPratonton .penyataKawal .pill{min-height:40px;max-width:100%;white-space:normal;text-align:left;overflow-wrap:break-word}
.eksportPasangan{display:inline-flex;flex-wrap:wrap;gap:8px;max-width:100%}
.eksportPasangan .btn{flex:1 1 140px;min-height:40px}
.eksportPasangan.wide{display:flex;width:100%}
.tuntutanEksport .eksportPasangan{flex:1 1 100%}
.tuBarisBtn{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:none;border:0;padding:4px 0;color:inherit;font:inherit;text-align:left;cursor:pointer;min-height:40px}
.tuBarisBtn b,.tuBarisBtn small{overflow-wrap:break-word}
/* Kad pemilik: perubahan peraturan automatik & cadangan (11 Okt 2026) — teks diberi ruang lebar; butang turun ke baris baharu
   bila sempit (tiada perkataan terputus pada 320 px). */
.npAuto,.npCad{display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px 10px;padding:10px 0}
.npAuto .t,.npCad .t{flex:1 1 16em;gap:2px}
.npAuto .baris-aksi,.npCad .baris-aksi{margin-left:auto;align-self:center}
.npCad details summary{cursor:pointer;min-height:32px;display:flex;align-items:center}
.npCad q{display:block;font-style:italic;margin:4px 0 0;overflow-wrap:break-word}
/* ═══ Pusingan 115: pemantau harga barang (#lembarHarga), petunjuk harga dalam senarai beli & butang suara borang tanpa resit ═══ */
.hbSenarai{padding-top:4px;padding-bottom:4px}
.hbItem>.baris{width:100%;text-align:left;align-items:flex-start;gap:10px}
.hbItem>.baris .t{min-width:0;overflow-wrap:break-word}
.hbItem.buka>.baris{border-bottom:none}
.hbHarga{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none;font-variant-numeric:tabular-nums;white-space:nowrap}
.hbButiran{padding:2px 2px 12px;border-bottom:1px solid var(--garis)}
.hbTag{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 8px}
.hbKecil{padding:6px 0}
.hbKecil .v{font-variant-numeric:tabular-nums}
.hargaPetunjuk{color:var(--cop);font-weight:600;overflow-wrap:break-word}
.suaraBaris{display:flex;gap:6px;align-items:stretch}
.suaraBaris input{flex:1;min-width:0}
.suaraBaris .pill{flex:none;min-width:44px;min-height:44px;font-size:18px;justify-content:center}
#tn_suara.mendengar{background:var(--merah);border-color:var(--merah);color:var(--kertas2);animation:suaraDenyut 1.2s ease-in-out infinite}
@keyframes suaraDenyut{0%,100%{opacity:1}50%{opacity:.62}}
@media (prefers-reduced-motion:reduce){#tn_suara.mendengar{animation:none}}

/* ═══ Pusingan 118: wizard "Data cukai" (satu tempat, langkah demi langkah) & e-Filing "Salin ke MyTax" ═══ */
.dcKepala{padding:14px 0 4px}
.dcTajuk{font-size:21px;line-height:1.25;margin:0 0 6px}
.dcTahun{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:4px 0 8px}
.dcTahun select{min-height:44px;max-width:100%;border-radius:var(--r);border:1.5px solid var(--garis);background:var(--kertas2);padding:8px 12px;color:var(--dakwat)}
.dcMusim,.dcBaca{display:block;margin:6px 0;padding:10px 12px;border-radius:var(--r);background:var(--kertas2);border:1px solid var(--garis)}
.dcMusim .pill{margin-left:6px}
.dcProgres{height:8px;border-radius:999px;background:var(--kertas3);overflow:hidden;margin:10px 0}
.dcProgres i{display:block;height:100%;border-radius:999px;background:var(--cop);transition:width .35s ease}
.dcNav{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 8px;-webkit-overflow-scrolling:touch}
.dcNav::-webkit-scrollbar{display:none}
.dcNavBtn{flex:0 0 auto;display:flex;align-items:center;gap:6px;min-height:44px;padding:6px 12px 6px 6px;border-radius:999px;border:1.5px solid var(--garis);background:var(--kertas2);color:var(--dakwat);font:600 13px var(--sans);cursor:pointer}
.dcNavN{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--kertas3);font-weight:700}
.dcNavBtn.siap .dcNavN{background:var(--hijau);color:var(--kertas2)}
.dcNavBtn.aktif{border-color:var(--cop);box-shadow:var(--fokus)}
.dcNavBtn.aktif .dcNavN{background:var(--cop);color:var(--atas-cop)}
.dcKad{padding:16px}
.dcSoalan{font-size:18px;line-height:1.35;margin:0 0 8px}
.dcSoalanKecil{font-size:15.5px;line-height:1.35;margin:16px 0 8px}
.dcPilih{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin:8px 0 12px}
.dcPilihan{min-height:52px;padding:10px 14px;border-radius:var(--r);border:1.5px solid var(--garis);background:var(--kertas2);color:var(--dakwat);font:600 15px var(--sans);cursor:pointer;text-align:center;overflow-wrap:break-word}
.dcPilihan.pilih{border-color:var(--cop);background:var(--cop-lembut);box-shadow:inset 0 0 0 1px var(--cop)}
.dcPilihan.pilih::before{content:"✓ "}
.dcPilihan:disabled{opacity:.55;cursor:default}
.dcImbas{min-height:56px;font-size:16px;margin:6px 0 4px}
.dcNotaKecil{margin:2px 0 10px}
.dcAtau{display:flex;align-items:center;gap:10px;margin:14px 0 8px;color:var(--pudar);font-size:13px;text-align:center}
.dcAtau::before,.dcAtau::after{content:"";flex:1;height:1px;background:var(--garis)}
.dcMedan input{font-size:17px}
.dcMedan .note{display:block}
.dcMedan.kecil input{max-width:200px}
.pautanTeks{background:none;border:0;padding:10px 0;color:var(--cop);font:600 14px var(--sans);text-decoration:underline;cursor:pointer;min-height:44px;text-align:left}
.dcSenaraiEA{margin:10px 0}
.dcEA>.pill{flex:0 0 auto}
.dcLanjut{margin:10px 0;border:1px solid var(--garis);border-radius:var(--r);padding:0 12px;background:var(--kertas2)}
.dcLanjut>summary{min-height:48px;display:flex;align-items:center;cursor:pointer;font-weight:600;line-height:1.3;padding:6px 0}
.dcLanjut[open]{padding-bottom:10px}
.dcTanda{margin:6px 0}
.dcHasilKecil{margin-top:14px;padding:12px;border-radius:var(--r);background:var(--cop-lembut);display:flex;flex-direction:column;gap:4px}
.dcKump{border:1px solid var(--garis);border-radius:var(--r);padding:12px;margin:12px 0;background:var(--kertas2)}
.dcSubTajuk{margin:16px 0 6px}
.dcPel{padding:10px 0;border-bottom:1px solid var(--garis)}
.dcPel:last-of-type{border-bottom:0}
.dcPelAtas{display:flex;flex-direction:column;gap:2px;margin-bottom:6px;overflow-wrap:break-word}
.dcPel .fld{margin:0}
.dcAmaran{color:var(--amber);font-weight:600}
.dcSemakEA{margin:10px 0}
.dcSemakEA .fld{margin:8px 0}
.dcSemakEA select{min-height:48px}
.dcMod{border:1px solid var(--garis);border-radius:var(--r);padding:10px 12px;margin:10px 0}
.dcMod legend{font-weight:600;padding:0 4px}
.dcMod label{display:flex;align-items:center;gap:8px;min-height:44px}
.dcPratonton{margin:10px 0;padding:10px 12px;border-radius:var(--r);background:var(--kertas2);border:1px solid var(--garis)}
.dcEaBtn{gap:8px;margin-top:10px}
.dcEaBtn .btn{flex:1 1 0;min-width:0}
.dcBawah{position:sticky;bottom:0;display:flex;justify-content:space-between;gap:10px;padding:10px 0 calc(10px + env(safe-area-inset-bottom,0px));background:var(--kertas);border-top:1px solid var(--garis);margin-top:12px;z-index:2}
.dcBawah .btn{flex:1 1 0;min-width:0}
.dcBawah>span{flex:1 1 0}
.dcAnggaran{display:flex;flex-direction:column;gap:2px;margin:12px 0 24px;padding:12px 14px;border-radius:var(--r-kad);background:var(--kertas2);border:1px dashed var(--garis)}
.dcAnggaranNilai{font-size:18px}
.dcAnggaranNilai.balik{color:var(--hijau)}
.dcAnggaranNilai.bayar{color:var(--amber)}
.dcRingkasSenarai{margin:10px 0}
.dcRingkas>.pill{flex:0 0 auto}
.dcSiapBtn{flex-direction:column}
.dcHub .dcHubAtas{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.dcHub .dcHubAtas>div:first-child{flex:1 1 auto;min-width:0}
.dcHubN{flex:none;font-size:22px;font-weight:750;color:var(--cop);white-space:nowrap}
.dcHubCip{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px}
.dcHubCip .cip{display:inline-flex;align-items:center;gap:4px;min-height:40px;padding:6px 12px;border-radius:999px;border:1.5px solid var(--garis);background:var(--kertas2);color:var(--dakwat);font-weight:600;font-size:13px;cursor:pointer}
.dcHubCip .cip.siap{border-color:var(--hijau);color:var(--hijau)}
.efSalinSect{margin-top:18px}
.efSalinNota{margin:0 0 8px}
.efBelum{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin:8px 0;padding:10px 12px;border-radius:var(--r);background:var(--amber-lembut);border:1px solid var(--garis)}
.efBelum>span{flex:1 1 180px;min-width:0}
.efUbahBaris{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 2px}
.efTagBelum{margin-left:8px}
.efMaklumat>.v{font-weight:600}
@media (max-width:420px){.dcPilih{grid-template-columns:1fr}.dcTajuk{font-size:19px}.dcBawah .btn{padding:12px 10px;font-size:14.5px}}
/* Pusingan 119: Apa yang baharu — sepanduk Utama (sekali setiap kemas kini), lembar Lagi, bahagian pendaratan & bab panduan. */
.baharuSepanduk{border-left:4px solid var(--cop)}
.baharuAtas{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.baharuTajukSepanduk{margin:8px 0 10px;line-height:1.4;overflow-wrap:break-word}
.baharuAksi{display:flex;flex-wrap:wrap;gap:8px}
.baharuAksi .btn{flex:1 1 140px;min-width:0}
.baharuEntri{display:flex;flex-direction:column;gap:6px}
.baharuTajukEntri{font-size:17px;margin:0;line-height:1.35;overflow-wrap:break-word}
.baharuButiran{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px;line-height:1.5}

/* Pusingan 131: Hala tuju & cadangan ciri — kad cadangan (status, undi), borang cadangan, seksyen. */
.halaKad{display:flex;flex-direction:column;gap:6px}
.halaAtas{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.halaAtas time{margin-left:auto}
.halaTajuk{font-size:17px;margin:0;line-height:1.35;overflow-wrap:break-word}
.halaHuraian{margin:0;line-height:1.5;color:var(--pudar);font-size:14.5px;overflow-wrap:break-word}
.halaAksi{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.halaAksi .halaUndi{flex:0 1 auto;min-width:0}
.halaSeksyen{font-size:15px;margin:18px 0 8px;color:var(--pudar);text-transform:uppercase;letter-spacing:.04em}
#halaCadang textarea{width:100%;box-sizing:border-box;min-height:84px;resize:vertical}
.baharuBab dt{font-weight:700;margin-top:12px;overflow-wrap:break-word}
.baharuBab dd{margin:4px 0 0}
:where(.baharuBab) ul{margin:0;padding-left:20px}

/* Pusingan 128: Tahun saya dalam resit — grid kad statistik; perancang jimat cukai — baris pilihan. */
.tahunGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
/* Pusingan 129: baris butang kongsi Tahun saya — setiap butang penuh lebar pada skrin sempit (tiada perkataan terputus). */
.tahunKongsiBaris{gap:8px;flex-wrap:wrap;margin-top:14px}.tahunKongsiBaris .btn{flex:1 1 auto;white-space:nowrap}
@media (max-width:480px){.tahunKongsiBaris .btn{flex:1 1 100%}}
.tahunStat{display:flex;gap:12px;align-items:flex-start;margin:0}
.tahunStat .tahunIkon{font-size:26px;line-height:1;flex:none;margin-top:2px}
.tahunStat .tahunNilai{font-size:20px;font-weight:700;line-height:1.3;margin-top:2px;overflow-wrap:break-word}
.tahunStat .baris{border-bottom:none}
.rancangBaris{flex-wrap:wrap;row-gap:4px}
.rancangBaris .t{flex:1 1 11em;min-width:0}
.rancangBaris .v{flex:0 1 auto;text-align:right}
.rancangBaris input[type=checkbox]{accent-color:var(--cop)}
/* Telefon sempit: nilai jimat turun ke baris sendiri di bawah nama (sejajar dengan teks) — nama pelepasan panjang tidak dihimpit. */
@media (max-width:480px){.rancangBaris .v{flex:1 1 100%;text-align:left;padding-left:31px}}
@media (max-width:420px){.tahunGrid{grid-template-columns:1fr}.tahunStat .tahunNilai{font-size:18px}}
/* Pusingan 134: Pasar › Senarai saya — kad PELAN membeli (satu kedai · gabungan · termurah setiap barang): satu ketikan bertukar pelan, pelan
   dipaparkan ditanda; baris butang tindakan sama tinggi (CTA sebaris walaupun teks membalut). */
.pasarPelan{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.pasarPelanKad{flex:1 1 150px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:2px;min-height:64px;padding:10px 12px;border:1.5px solid var(--garis);border-radius:var(--r);background:var(--kertas2);color:var(--dakwat);text-align:left;cursor:pointer;font:inherit}
.pasarPelanKad .pasarPelanNama{font-weight:650;font-size:13.5px;overflow-wrap:break-word}
.pasarPelanKad .pasarPelanRm{font-weight:700;font-size:16px}
.pasarPelanKad.pilih{border-color:var(--cop);box-shadow:inset 0 0 0 1px var(--cop);background:var(--kertas)}
.barisButang{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;align-items:stretch}
.barisButang>.btn{flex:1 1 160px;display:flex;align-items:center;justify-content:center;text-align:center}
.pilihJenisBaris .note{display:block}

/* Pusingan 135 (rombakan): Utama — "Semua ciri ikut fungsi" (6 kumpulan = pendaratan = direktori; jubin membuka direktori ditapis),
   pautan butiran pada kad wang (hero) & bajet. Token warna sahaja (lihat ujian-pencapaian). */
.fungsiGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:6px 0 10px}
@media(min-width:560px){.fungsiGrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.fungsiKad{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-height:64px;margin:0;padding:12px;border:1.5px solid var(--garis);border-radius:var(--r-besar);background:var(--kertas2);color:var(--dakwat);font:inherit;text-align:left;cursor:pointer}
.fungsiKad:hover{border-color:var(--k-warna,var(--cop))}
.fungsiKad:focus-visible{outline:none;box-shadow:var(--fokus)}
.fungsiIkon{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;font-size:18px;line-height:1;background:var(--kertas3);background:color-mix(in srgb,var(--k-warna,var(--cop)) 14%,var(--kertas2))}
.fungsiKad .t{display:flex;flex-direction:column;gap:2px;min-width:0}
.fungsiKad b{font-size:14px;line-height:1.25;font-weight:700}
.fungsiKad .note{font-size:12px;margin:0}
.heroPautan,.pautanKad{display:inline-flex;align-items:center;gap:4px;min-height:40px;margin:6px 0 0;padding:4px 0;border:0;background:none;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.heroPautan{position:relative;z-index:1;color:inherit;text-decoration:underline;text-underline-offset:3px}
.pautanKad{color:var(--cop)}
.heroPautan:hover,.pautanKad:hover{text-decoration:underline}
.heroPautan:focus-visible,.pautanKad:focus-visible{outline:none;box-shadow:var(--fokus);border-radius:8px}

/* p139 ec — Borang EA / EC dalam Data cukai: sumber bacaan (terus tanpa AI / AI), "Dibaca daripada borang" (ke mana setiap nilai pergi),
   salinan fail sebagai bukti, langkah susulan & cadangan langkah lain. Token warna sedia ada (tema cerah & gelap); 320 px → desktop. */
.dcSumber{font-weight:600}
.dcSumber.terus{color:var(--hijau)}
.dcAntrian{font-weight:600;color:var(--cop)}
.dcMaklumat{margin:12px 0;padding:10px 12px;border-radius:var(--r);background:var(--kertas2);border:1px solid var(--garis)}
.dcMaklumatSenarai{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.dcMaklumatSenarai>li{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;overflow-wrap:break-word}
.dcMaklumatSenarai>li>.note{align-self:stretch}
.dcMkTajuk{display:block;align-self:stretch;font-size:15px;line-height:1.4}
.dcMkTajuk b{font-weight:650}
.dcMkTajuk .tag{margin-left:6px;vertical-align:middle;min-height:22px;background:var(--kertas3)}
.dcElaun{list-style:none;margin:4px 0 0;padding:0;align-self:stretch;border-top:1px dashed var(--garis)}
.dcElaun li{display:flex;justify-content:space-between;gap:10px;padding:4px 0;font-size:13.5px;border-bottom:1px dashed var(--garis)}
.dcElaun li span:first-child{min-width:0;overflow-wrap:break-word}
.dcElaun li span:last-child{flex:none;font-weight:600}
.dcFailEA{margin:10px 0;padding:6px 12px 10px;border-radius:var(--r);border:1px solid var(--garis);background:var(--kertas2)}
.dcFailEA .tuTanda{margin-bottom:0}
.dcFailEA .note{margin:2px 0 0}
.dcCadangan{margin:8px 0;padding:8px 10px;border-radius:var(--r);background:var(--cop-lembut)}
.dcSusulan{margin:6px 0 12px}
.dcSusulan .note{margin:0}
.dcSusulanBtn{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.dcSusulanBtn .pill,.dcEA .baris-aksi .pill{min-height:44px}
/* Kad semakan ditatal ke atas lembar: tajuk & baris sumber bacaan tidak terlindung di bawah pengepala lembar yang melekat. */
.dcSemakEA{scroll-margin-top:76px}
/* p139 tarikh — nota tarikh gaji DIPINDA / ANGGARAN (Wang › kitaran bajet): satu blok ringkas yang tenang, bukan amaran merah */
.notaTarikhGaji{margin:8px 0 0;padding:6px 10px;border-radius:10px;font-size:13px;line-height:1.45;background:var(--kertas3);color:var(--dakwat)}
.notaTarikhGaji b{font-weight:700}
.notaTarikhGaji .tgItem{white-space:nowrap}
.hero .notaTarikhGaji{background:rgba(255,255,255,.14);color:inherit}

/* p139 ux — pendedahan berperingkat yang SEKATA (details.lipatUx): baris ringkasan ≥ 44px dengan anak panah, kandungan sekunder di
   dalam; maklumat tanpa tindakan sebagai baris ⓘ tenang (bukan kad kuning); keadaan kosong dengan satu tindakan utama. */
details.lipatUx>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;min-height:44px;font-weight:650;line-height:1.35}
details.lipatUx>summary::-webkit-details-marker{display:none}
details.lipatUx>summary::marker{content:""}
details.lipatUx>summary::after{content:"›";margin-left:auto;flex:none;width:20px;height:20px;line-height:20px;text-align:center;font-size:20px;font-weight:400;color:var(--pudar);transition:transform .15s ease}
details.lipatUx[open]>summary::after{transform:rotate(90deg)}
details.lipatUx>summary>.t{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto;overflow-wrap:break-word}
details.lipatUx>summary>.t .note{font-weight:400}
details.card.lipatUx{padding-top:8px;padding-bottom:8px}
details.card.lipatUx[open]{padding-bottom:15px}
@media(prefers-reduced-motion:reduce){details.lipatUx>summary::after{transition:none}}
.utamaInfo{margin:12px 2px 0;color:var(--pudar);font-size:13.5px}
.utamaInfo>summary{font-weight:600;color:var(--pudar)}
.utamaInfo>.note{margin:0 0 8px}
.jadualInfo>summary{font-size:14.5px}
.duaTahunHari{color:var(--amber);font-weight:650}
.undangButir{margin:4px 0}
.undangButir>summary{font-size:14px;color:var(--cop)}
.paksaBLipat{margin-top:6px;border-top:1px solid var(--garis)}
.paksaBLipat>summary{font-size:14px;color:var(--pudar)}
.pelepasanKosong{margin:2px 0 6px}
.pelepasanBelum{border-top:1px solid var(--garis);margin-top:2px}
.pelepasanBelum>summary{font-size:14.5px;color:var(--cop)}
.kwspButir,.tp1Butir{margin:6px 0 4px;border-top:1px solid var(--garis)}
.kwspButir>summary,.tp1Butir>summary{font-size:14px;color:var(--cop)}
.efAtas .efAyat{font-size:19px;line-height:1.35;letter-spacing:0;color:var(--dakwat)}
#v-resit.resitAkaunKosong #q,#v-resit.resitAkaunKosong #resitBar,#v-resit.resitAkaunKosong #pilihBtn{display:none}
.kosong .resitKosongImbas{display:block;margin:16px auto 4px;min-width:min(260px,100%);max-width:100%}
.wangTempohLain{margin-top:10px;border-top:1px solid var(--garis)}
.wangTempohLain>summary{font-size:14px;color:var(--pudar)}
details.efLangkah>summary>.efTagBelum{flex:none;white-space:nowrap}   /* p139 ux: tag "belum diisi" tidak lagi terpotong ("belum diis") — tajuk bahagian membalut */
/* p139 ux — pengepala telefon: tahun taksiran mesti TERBACA (dahulu "TT2…" / "T…" pada 320–412px dalam 3 bahasa). Punca tambahan:
   .pill{background:…} (singkatan) menetapkan semula gambar anak panah pilihan — terang: tiada anak panah; gelap: anak panah berulang
   bertindih teks. Anak panah dipulihkan sekali (tidak berulang, ruang 28px); versi gelap index.html (spesifisiti lebih tinggi) kekal.
   Nama jenama disorok ≤ 420px (kekal pada tablet/desktop, skrin pemuat, ikon & tajuk app); label "TT2026 → 2027" muat, "TT2026"
   di bawah 360px (isiTahun). */
.hd .pilihTahun{padding-right:28px;background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 8l3-3.5' fill='none' stroke='%236B6F76' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:11px}
@media(max-width:420px){.hd .nm{display:none}.hd{gap:6px}}
/* p139 lagi — TAB LAGI IKUT KATEGORI (pusingan 139). Hab tenang (kad akaun ringkas, carian, pintasan, senarai kategori dalam 4 kumpulan)
   → halaman kategori dalam tab yang sama (alat = baris butang, tetapan = baris boleh-lipat). Token palet sedia ada sahaja (terang & gelap
   ikut token); petak ikon diwarnakan ikut kategori melalui --k-warna; sasaran sentuh ≥ 44px; tiada skrol mendatar pada 320px. */
#v-tetapan .lagiHab[hidden],#v-tetapan .lagiKat[hidden],#v-tetapan [data-lagi-hasil][hidden],#v-tetapan [data-lagi-utama][hidden]{display:none!important}
#v-tetapan .lagiHab{padding-top:12px}
#v-tetapan [data-warna="cop"]{--k-warna:var(--cop)}
#v-tetapan [data-warna="hijau"]{--k-warna:var(--hijau)}
#v-tetapan [data-warna="amber"]{--k-warna:var(--amber)}
#v-tetapan [data-warna="emas"]{--k-warna:var(--emas)}
#v-tetapan [data-warna="kelabu"]{--k-warna:var(--pudar)}
.lagiIkon{flex:none;width:36px;height:36px;display:grid;place-items:center;border-radius:11px;font-size:19px;line-height:1;background:var(--kertas3);background:color-mix(in srgb,var(--k-warna,var(--cop)) 14%,var(--kertas2))}
.lagiIkon.lagiIkonBesar{width:48px;height:48px;border-radius:14px;font-size:24px}
.lagiChevron{flex:none;margin-left:auto;font-style:normal;font-size:20px;line-height:1;color:var(--pudar);transition:transform .2s ease}
/* Kad akaun ringkas */
.lagiAkaun{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:0 0 12px}
.lagiAkaun .t{flex:1 1 160px;min-width:0;display:flex;flex-direction:column;gap:2px}
.lagiAkaun .t b{font-size:17px;font-weight:700;line-height:1.3;overflow-wrap:break-word}
.lagiAkaun .note{margin:0;overflow-wrap:break-word}
.lagiAvatar{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:19px;font-weight:700;color:var(--cop);background:var(--cop-lembut)}
.lagiPelan{align-self:flex-start;margin-top:5px;min-height:28px;padding:3px 11px;font-size:12.5px;display:inline-flex;align-items:center;color:var(--cop);border-color:var(--garis)}
.lagiUrus{flex:none;min-height:44px;padding:10px 16px;font-size:14px}
@media(max-width:440px){.lagiUrus{flex:1 1 100%}}
/* Carian */
.lagiCariKotak{position:relative;margin:4px 0 6px}
.lagiCariKotak svg[aria-hidden]{position:absolute;left:14px;top:50%;width:20px;height:20px;transform:translateY(-50%);fill:none;stroke:var(--pudar);stroke-width:2;stroke-linecap:round;pointer-events:none}
.lagiCariKotak input{width:100%;box-sizing:border-box;min-height:50px;padding:12px 14px 12px 44px;border:1.5px solid var(--garis);border-radius:14px;background:var(--kertas2);color:var(--dakwat);font:inherit;font-size:16px}
.lagiCariKotak input::placeholder{color:var(--pudar)}
.lagiCariKotak input:focus-visible{outline:none;border-color:var(--cop);box-shadow:var(--fokus)}
.lagiIntro{margin:6px 0 2px;display:flex;flex-wrap:wrap;align-items:center;column-gap:6px}
.lagiPautan{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 4px;border:0;background:none;color:var(--cop);font:inherit;font-size:14px;font-weight:650;cursor:pointer}
.lagiPautan:focus-visible{outline:none;box-shadow:var(--fokus);border-radius:8px}
/* Tajuk kumpulan (h2 dengan rupa .sect) */
#v-tetapan h2.lagiKumpTajuk{margin:20px 0 8px;font-size:inherit;font-weight:inherit;line-height:1.3}
#v-tetapan h2.lagiKumpTajuk .lbl{font-size:13.5px;font-weight:700;color:var(--pudar)}
/* Senarai berkumpulan: satu kad, baris dipisah garis halus */
.lagiSenarai{border:1px solid var(--garis);border-radius:var(--r-kad);background:var(--kertas2);overflow:hidden}
.lagiBaris,.lagiSek>summary{display:flex;align-items:center;gap:12px;width:100%;min-height:62px;margin:0;padding:10px 14px;box-sizing:border-box;border:0;border-top:1px solid var(--garis);background:transparent;color:var(--dakwat);font:inherit;text-align:left;cursor:pointer;transition:background .15s ease}
.lagiSenarai>:first-child,.lagiSenarai>:first-child>summary{border-top:0}
.lagiBaris .t,.lagiSek>summary .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.lagiBaris .t b,.lagiSek>summary .t b{font-size:15.5px;font-weight:650;line-height:1.3;overflow-wrap:break-word}
.lagiBaris .t .note{margin:0;font-size:13px;line-height:1.4;overflow-wrap:break-word}
body.besar .lagiBaris .t b,body.besar .lagiSek>summary .t b{font-size:17.5px}
body.besar .lagiBaris .t .note{font-size:14.5px}
@media(hover:hover){.lagiBaris:hover,.lagiSek>summary:hover{background:var(--kertas3);background:color-mix(in srgb,var(--k-warna,var(--cop)) 6%,var(--kertas2))}
  .lagiPintasBtn:hover{border-color:var(--k-warna,var(--cop))}.lagiKembali:hover{background:var(--cop-lembut)}.lagiPautan:hover{text-decoration:underline}}
.lagiBaris:active{background:var(--kertas3)}
.lagiBaris:focus-visible,.lagiSek>summary:focus-visible,.lagiPintasBtn:focus-visible{outline:3px solid var(--cop);outline-offset:-3px;box-shadow:none}
.lagiStatus{display:block;margin-top:3px;font-size:12.5px;font-weight:650;color:var(--hijau);overflow-wrap:break-word}
.lagiStatus.amaran{color:var(--amber)}
/* Pintasan "Untuk anda" */
.lagiPintas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media(min-width:620px){.lagiPintas{grid-template-columns:repeat(4,minmax(0,1fr))}}
.lagiPintasBtn{display:flex;align-items:center;gap:10px;min-height:58px;min-width:0;margin:0;padding:10px 12px;border:1px solid var(--garis);border-radius:14px;background:var(--kertas2);color:var(--dakwat);font:inherit;text-align:left;cursor:pointer;transition:border-color .15s ease,transform .15s ease}
.lagiPintasBtn b{min-width:0;font-size:14px;font-weight:650;line-height:1.3;overflow-wrap:break-word}
.lagiPintasBtn:active{transform:translateY(1px)}
/* Skrin sempit (≤ 360px, 2 lajur ±142px): ikon di atas label supaya perkataan panjang ("kewangan", "Financial") tidak terputus. */
@media (max-width:360px){.lagiPintasBtn{flex-direction:column;align-items:flex-start;gap:6px}}
/* Hasil carian */
.lagiHasil{margin-top:8px}
.lagiHasilBil{margin:6px 2px 8px}
/* Halaman kategori */
.lagiKat{padding-top:10px}
.lagiKatKepala{margin-bottom:12px}
.lagiKembali{display:inline-flex;align-items:center;gap:4px;min-height:44px;margin:0 0 4px -6px;padding:0 14px 0 6px;border:0;border-radius:999px;background:none;color:var(--cop);font:inherit;font-size:15px;font-weight:650;cursor:pointer}
.lagiKembali span{font-size:24px;line-height:1;margin-top:-2px}
.lagiKembali:focus-visible{outline:none;box-shadow:var(--fokus)}
.lagiKatTajuk{display:flex;align-items:center;gap:12px}
.lagiKatTajuk .t{min-width:0}
:where(.lagiKatTajuk) h2{margin:0;font-size:21px;font-weight:700;line-height:1.25;letter-spacing:-.01em;overflow-wrap:break-word}
.lagiKatTajuk h2:focus{outline:none}
.lagiKatTajuk .note{margin:2px 0 0}
.lagiAkaunPenuh{margin:0 0 12px}
/* Bahagian boleh-lipat dalam kategori — baris dalam senarai yang sama (peraturan .lagiSek lama berkotak dibatalkan di sini) */
#v-tetapan .lagiSenarai>.lagiSek{margin:0;border:0;border-radius:0;background:transparent}
.lagiSek>summary{list-style:none}
.lagiSek>summary::-webkit-details-marker{display:none}
.lagiSek[open]>summary .lagiChevron{transform:rotate(90deg)}
.lagiSek .lagiIsi{padding:0 14px 14px}
.lagiSek .lagiIsi>.card,.lagiSek .lagiIsi>.hero{margin:8px 0;background:var(--kertas);box-shadow:none}
.lagiSek .lagiIsi>:first-child{margin-top:2px}
.lagiSek .lagiIsi .card.biru{background:var(--cop-lembut)}
#v-tetapan .lagiSek[data-sama]>.lagiIsi>.card:first-child>.lbl:first-child{display:none}
.lagiTarikhGaji{border-top:1px dashed var(--garis);border-bottom:1px dashed var(--garis);margin:12px 0 6px;padding:8px 0}
.lagiTarikhGaji .btn{min-height:44px;padding:8px 16px;font-size:14px}
.lagiFailAnda{margin:0;color:var(--dakwat)}
/* Gerakan halus HANYA semasa navigasi (buka kategori, kembali, buka bahagian) — bukan pada lukisan semula segerak; "kurangkan gerakan"
   dihormati (app.js tidak menambah kelas, dan CSS mematikannya). */
@keyframes lagiMasuk{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.lagiAnimasi{animation:lagiMasuk .2s ease both}
@media (prefers-reduced-motion:reduce){.lagiAnimasi{animation:none}.lagiChevron,.lagiBaris,.lagiPintasBtn{transition:none}}
/* ═══ p139 jadual — komponen "Tarikh gaji" (public/jadual-gaji.js, KONTRAK K5): soalan dengan kad pilihan besar, butiran yang perlu sahaja,
   pratonton tarikh gaji (jubin kalendar + lencana sumber Rasmi ANM / Anggaran / Dipinda). Token palet sahaja (terang & gelap); sasaran
   sentuh ≥ 44px; tiada skrol mendatar pada 320px; fieldset tidak dijadikan flex (Safari lama) — pembalut div di dalamnya. ═══ */
.jgKad{display:flex;flex-direction:column;gap:12px;scroll-margin-top:76px}
.jgMedan,.jgPratonton{scroll-margin-top:76px}
.jgKepala{display:flex;align-items:center;gap:12px}
.jgKepala .t{flex:1;min-width:0}
.jgTajuk{margin:0;font-size:17px;font-weight:700;line-height:1.3;letter-spacing:-.01em}
.jgKepala .note{margin:2px 0 0}
.jgIkon{flex:none;width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--kertas3);font-size:20px;line-height:1}
.jgIkon.besar{width:44px;height:44px;background:var(--cop-lembut)}
.jgSoalan,.jgLaras{min-width:0;margin:0;padding:0;border:0}
.jgKekerapan{min-width:0}
:where(.jgSoalan) legend{display:block;width:100%;margin:0 0 10px;padding:0}
.jgTajukSoalan{display:block;font-size:16.5px;font-weight:700;line-height:1.35}
.jgSoalan legend .note{display:block;margin-top:2px}
.jgPilihanSenarai{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
@media(min-width:640px){.jgPilihanSenarai{grid-template-columns:repeat(2,minmax(0,1fr))}}
.jgPilihan{position:relative;display:flex;align-items:center;gap:12px;min-height:64px;margin:0;padding:12px 44px 12px 12px;border:1.5px solid var(--garis);border-radius:var(--r-kad);background:var(--kertas2);cursor:pointer;transition:border-color .15s,background-color .15s}
.jgPilihan:hover{border-color:var(--cop)}
.jgPilihan input{position:absolute;width:1px;height:1px;margin:0;opacity:0}
.jgPilihan:focus-within,.jgPilihanKecil:focus-within{box-shadow:var(--fokus)}
.jgPilihan .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.jgPilihan b{font-size:15px;line-height:1.3}
.jgPilihan .note{margin:0}
.jgPilihan.on{border-color:var(--cop);background:var(--cop-lembut)}
.jgPilihan.on .jgIkon{background:var(--kertas2)}
.jgTanda{position:absolute;top:50%;right:12px;width:22px;height:22px;display:grid;place-items:center;transform:translateY(-50%);border:1.5px solid var(--garis);border-radius:50%;font-size:12px;font-weight:800;color:transparent}
.jgPilihan.on .jgTanda{border-color:var(--cop);background:var(--cop);color:var(--atas-cop)}
.jgMedan{display:flex;flex-direction:column;gap:10px}
.jgMedan:empty{display:none}
.jgMedan .fld{display:flex;flex-direction:column;gap:5px;margin:0}
.jgKad .jgMedan select,.jgKad .jgMedan input[type=date]{width:100%;min-height:48px;padding:10px 12px;font-size:16px}
.jgMedan [aria-invalid="true"]{border-color:var(--merah)}
.jgMedan .note,.jgLaras .note{margin:0}
.jgDuaHari{gap:10px}
:where(.jgLaras) legend{margin:0 0 6px;padding:0}
.jgLarasPilihan{display:flex;flex-direction:column;gap:6px;margin-bottom:6px}
.jgPilihanKecil{display:flex;align-items:center;gap:10px;min-height:44px;margin:0;padding:8px 12px;border:1.5px solid var(--garis);border-radius:var(--r);background:var(--kertas2);cursor:pointer;line-height:1.35}
.jgPilihanKecil input{flex:none;width:20px;height:20px;margin:0}
.jgPilihanKecil.on{border-color:var(--cop);background:var(--cop-lembut)}
.jgInfo{padding:12px 14px;border-radius:var(--r);background:var(--kertas3)}
:where(.jgInfo) p{margin:0;font-size:14.5px;line-height:1.5}
.jgInfo p.note{font-size:13.5px}
.jgInfo p+p{margin-top:6px}
.jgPratonton{display:flex;flex-direction:column;gap:8px;padding-top:12px;border-top:1px dashed var(--garis)}
.jgSeterusnya{margin:0;font-weight:650;line-height:1.4}
.jgSeterusnya:empty{display:none}
.jgSenarai{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin:0;padding:0;list-style:none}
@media(min-width:760px){.jgSenarai{grid-template-columns:repeat(2,minmax(0,1fr))}}
.jgTarikh{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:12px;row-gap:4px;min-height:56px;padding:8px 10px;border:1px solid var(--garis);border-radius:14px;background:var(--kertas2)}
/* Skrin sempit: lencana sumber turun ke bawah teks (bukan menghimpit tarikh & nota ke lajur sempit). */
@media(max-width:420px){.jgTarikh{grid-template-columns:auto minmax(0,1fr)}.jgTarikh .jgKal{grid-row:1/span 2}.jgTarikh .jgLencana{grid-column:2;justify-self:start;max-width:100%}}
.jgTarikh.pertama{border-color:var(--cop);box-shadow:inset 3px 0 0 var(--cop)}
.jgTarikh .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.jgTarikh .t b{font-size:14.5px;line-height:1.3}
.jgTarikh .note{margin:0;font-size:12.5px;line-height:1.4}
.jgKal{flex:none;width:46px;overflow:hidden;border:1px solid var(--garis);border-radius:10px;background:var(--kertas);text-align:center;line-height:1}
.jgKal .b{display:block;padding:3px 0;background:var(--cop);color:var(--atas-cop);font-size:10.5px;font-weight:750;letter-spacing:.04em;text-transform:uppercase}
.jgKal .h{display:block;padding:5px 0 6px;color:var(--dakwat);font-size:19px;font-weight:750;font-variant-numeric:tabular-nums}
.jgKal.besar{width:60px}
.jgKal.besar .h{padding:7px 0 8px;font-size:26px}
.jgLencana{max-width:45%;overflow:hidden;padding:4px 9px;border:1px solid transparent;border-radius:999px;font-size:11.5px;font-weight:700;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}
.jgLencana.rasmi{border-color:var(--hijau);background:var(--kertas2);color:var(--hijau)}
.jgLencana.anggaran{background:var(--amber-lembut);color:var(--amber)}
.jgLencana.dipinda{background:var(--cop-lembut);color:var(--cop)}
.jgRingkas{display:flex;align-items:center;gap:14px;padding:12px;border-radius:var(--r-kad);background:var(--cop-lembut)}
.jgRingkas .t{min-width:0;display:flex;flex-direction:column;gap:2px}
.jgRingkas .note{margin:0}
.jgTarikhBesar{font-size:18px;line-height:1.3}
.jgJenisBaris{display:flex;align-items:center;gap:10px}
.jgJenisBaris b{font-size:14.5px;line-height:1.35}
.jgKesan{padding:10px 12px;border-radius:var(--r);background:var(--kertas3)}
.jgKesan b{display:block;font-size:13.5px}
.jgKesan .note{margin:2px 0 0}
.jgDikesan{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-radius:var(--r);background:var(--amber-lembut)}
.jgDikesan .note{margin:0;color:var(--dakwat)}
.jgPautan{display:flex;flex-wrap:wrap;gap:0 16px;margin:0}
.jgPautan a{display:inline-flex;align-items:center;min-height:44px;color:var(--cop);font-size:13.5px;font-weight:650;text-decoration:underline;text-underline-offset:3px}
.jgPautan a:focus-visible{outline:none;box-shadow:var(--fokus);border-radius:8px}
.jgRalat{margin:0;padding:10px 12px;border-radius:var(--r);background:var(--amber-lembut);color:var(--merah);font-size:14px;font-weight:650}
.jgAksi{display:flex;flex-direction:column;gap:8px}
@media(min-width:640px){.jgAksi{flex-direction:row}.jgAksi .btn{flex:1 1 0}}
.jgKosong{margin:0}
@media(prefers-reduced-motion:reduce){.jgPilihan{transition:none}}
/* ═══ p139 gaji — hab "Gaji saya" (public/gaji.js): lembar #lembarGaji, tab, semakan penyata, analisis (carta SVG, jadual, cip), kad Utama.
   Token warna sahaja (terang & gelap ikut :root); sasaran sentuh ≥ 44px; 320px tanpa skrol mendatar. */
.gajiLembar .wrap{max-width:640px}
.gjHab{padding:8px 0 24px}
.gjKepala{margin:6px 0 10px}
.gjTajuk{font-size:22px;line-height:1.25;font-weight:700;letter-spacing:-.01em;margin:0 0 4px}
.gjKepala .note{margin:0}
.gjPrivasi{display:flex;gap:8px;align-items:flex-start;margin:18px 2px 0;padding:12px 14px;border-radius:var(--r);background:var(--kertas3);background:color-mix(in srgb,var(--cop) 7%,var(--kertas2))}
.gjMemuat{display:flex;flex-direction:column;align-items:center;gap:10px;padding:34px 0}
.gjKosong{text-align:center;padding:22px 16px}
.gjKosong h3{margin:8px 0 4px;font-size:18px;font-weight:700}
.gjKosong .note{margin:0 0 14px}
.gjIkonBesar{font-size:40px;line-height:1}
.gjNaikBtn{margin-top:4px}
.gjKosong .pautanKad,.gjNaikKad .pautanKad{margin-top:8px}
.gjLangkah{margin:10px 0 0;padding:0 0 0 22px;color:var(--pudar);font-size:13.5px;line-height:1.55}
.gjLangkah li{margin:4px 0}
.gjHero .heroPautan{margin-top:8px}
.gjSeterusnya .gjBesar{font-size:24px;font-weight:700;letter-spacing:-.01em;margin:4px 0 2px}
.gjSeterusnya .note{margin:0}
.gjBarisKad,.gjKadUtama{display:flex;width:100%;text-align:left;cursor:pointer}
.gjCadangAwam .btn{margin-top:10px}
.gjUbah{list-style:none;margin:6px 0 0;padding:0}
.gjUbah li{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--garis);font-size:14px;line-height:1.45}
.gjUbah li:last-child{border-bottom:0}
.gjUbahIkon{flex:none;width:22px;text-align:center}
.gjNaikKad .note{margin:0 0 10px}
.gjTiada{text-align:center;margin:18px 0}
/* Penyata (satu bulan = <details>) */
details.gjPenyata,details.gjSeksyen{padding:0}
details.gjPenyata>summary,details.gjSeksyen>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:14px 16px;min-height:52px}
details.gjPenyata>summary::-webkit-details-marker,details.gjSeksyen>summary::-webkit-details-marker,details.gjBarisSemak>summary::-webkit-details-marker{display:none}
details.gjPenyata>summary .t,details.gjSeksyen>summary .t{flex:1;min-width:0}
details.gjPenyata>summary .t b,details.gjSeksyen>summary .t b{display:block;font-size:15.5px;line-height:1.3}
details.gjPenyata>summary .t .note,details.gjSeksyen>summary .t .note{display:block;margin-top:2px}
details.gjPenyata>summary .v{font-weight:700;white-space:nowrap}
details.gjPenyata>summary::after,details.gjSeksyen>summary::after{content:"";width:9px;height:9px;flex:none;border-right:2px solid var(--pudar);border-bottom:2px solid var(--pudar);transform:rotate(45deg);margin-left:2px}
details.gjPenyata[open]>summary::after,details.gjSeksyen[open]>summary::after{transform:rotate(225deg)}
.gjPenyataIsi,.gjSeksyenIsi{padding:0 16px 14px;border-top:1px solid var(--garis)}
.gjJum{display:flex;flex-wrap:wrap;gap:6px 16px;padding:10px 0 4px;font-size:13.5px;color:var(--pudar)}
.gjJum b{color:var(--dakwat);font-weight:700}
.gjSub{margin:12px 0 2px}
.gjB{min-height:42px;padding:7px 0}
.gjB .t b{font-size:14px}
.gjAksi{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.gjAksi .pill{min-height:40px;display:inline-flex;align-items:center}
.gjBahaya{color:var(--merah)}
/* Analisis */
.gjLabel{display:block;font-size:14.5px;line-height:1.35}
.gjSeksyenIsi .baris .t .note{display:block;margin-top:1px}
.gjBarTindan{display:flex;height:10px;border-radius:99px;overflow:hidden;background:var(--kertas3);margin:8px 0 6px}
.gjBarTindan i{display:block;height:100%}
.gjSeg-berkanun{background:var(--cop)}
.gjSeg-komitmen{background:var(--amber)}
.gjSeg-lain{background:var(--pudar)}
.gjBarHad{margin:6px 0 8px}
.gjAmaran{color:var(--amber)}
.gjSeimbang{color:var(--hijau)}
.gjCarta{margin:8px 0 10px}
.gjCarta svg{display:block;width:100%;height:120px;border-radius:8px;background:var(--kertas3);background:color-mix(in srgb,var(--dakwat) 4%,var(--kertas2))}
.gjCartaBar{fill:var(--cop);opacity:.85}
.gjCartaKasar{stroke:var(--amber);stroke-width:2;stroke-linejoin:round}
.gjCartaAsas{stroke:var(--hijau);stroke-width:1.5;stroke-dasharray:4 3}
.gjCartaPaksi{display:flex;justify-content:space-between;font-size:11.5px;color:var(--pudar);margin-top:4px}
.gjCarta figcaption{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;margin-top:4px}
.gjLeg{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-1px;margin-right:4px}
.gjLegBersih{background:var(--cop)}
.gjLegKasar{background:var(--amber)}
.gjLegAsas{background:var(--hijau)}
.gjJadual{display:grid;grid-template-columns:minmax(0,1fr) max-content max-content;column-gap:10px;margin:8px 0 6px;font-size:14px}
.gjJBaris{display:contents}
.gjJBaris>span{padding:7px 0;border-bottom:1px solid var(--garis);min-width:0;overflow-wrap:break-word}
.gjJBaris>span:not(:first-child){text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.gjJKepala>span{font-size:12.5px;color:var(--pudar);font-weight:600;border-bottom:2px solid var(--garis)}
.gjJKepala>span:not(:first-child){white-space:normal;overflow-wrap:break-word}
@media(max-width:359px){.gjJadual{font-size:13px;column-gap:6px}}
.gjJKuat>span{font-weight:700}
.gjJBaris:last-child>span{border-bottom:0}
.gjCukai{margin:12px 0}
.gjCukai .note{margin:6px 0 0}
.gjCip{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:8px 0}
.gjCip .lbl{width:100%;margin-bottom:2px}
.gjCip .cip{display:inline-flex;align-items:center;min-height:40px;padding:6px 14px;border-radius:999px;border:1.5px solid var(--garis);background:var(--kertas2);color:var(--dakwat);font-weight:600;font-size:13.5px;cursor:pointer}
.gjCip .cip.pilih{background:var(--cop);border-color:var(--cop);color:var(--atas-cop)}
.gjCip .cip:focus-visible{outline:none;box-shadow:var(--fokus)}
.gjTanda{display:flex;gap:10px;align-items:flex-start;min-height:44px;padding:8px 0;cursor:pointer;font-size:14.5px;line-height:1.4}
.gjTanda input{width:20px;height:20px;flex:none;margin:2px 0 0;accent-color:var(--cop)}
.gjTanda .note{display:block;margin-top:2px}
.gjFld{margin:10px 0}
.gjFld .lbl{display:block;margin-bottom:4px}
.gjFld input,.gjFld select{width:100%;box-sizing:border-box}
.gjSeksyenIsi .btn{margin-top:10px}
.gjNotaAkhir{margin:14px 2px 0}
/* Semakan sebelum simpan */
.gjSemak>.note{margin:0 0 12px}
.gjItem{border:1px solid var(--garis);border-radius:var(--r-kad);background:var(--kertas2);padding:14px 16px;margin:10px 0}
.gjItemKepala{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin-bottom:8px;font-size:15px;overflow-wrap:break-word}
.gjItem>.pill{margin-top:8px}
.gjRekod{padding:10px 0 4px;border-top:1px dashed var(--garis);margin-top:8px}
.gjRekod:first-of-type{border-top:0;margin-top:0;padding-top:0}
.gjMedan{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 12px}
.gjBulanPilih{display:flex;gap:6px}
.gjBulanPilih select{flex:1;min-width:0}
.gjBulanPilih select:last-child{flex:0 0 6.6em}
@media(max-width:420px){.gjMedan{grid-template-columns:minmax(0,1fr)}}
.gjAmaranSenarai{list-style:none;margin:6px 0;padding:10px 12px;border-radius:var(--r);background:var(--amber-lembut);color:var(--amber);font-size:13.5px;line-height:1.5}
.gjAmaranSenarai li{margin:2px 0}
.gjPendua{margin:8px 0;padding:10px 12px;border-radius:var(--r);background:var(--cop-lembut)}
.gjPendua .note{margin:0 0 4px}
.gjPendua .gjTanda{min-height:40px;padding:4px 0}
details.gjBarisSemak{margin:6px 0 4px;border:1px solid var(--garis);border-radius:var(--r);padding:0 12px}
details.gjBarisSemak>summary{list-style:none;cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:650;font-size:14.5px}
details.gjBarisSemak>summary::after{content:"";width:8px;height:8px;margin-left:auto;border-right:2px solid var(--pudar);border-bottom:2px solid var(--pudar);transform:rotate(45deg)}
details.gjBarisSemak[open]>summary::after{transform:rotate(225deg)}
details.gjBarisSemak>.gjSub:first-of-type{margin-top:4px}
.gjBarisEdit{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 7em 44px;gap:6px;align-items:center;margin:6px 0}
.gjBarisEdit input,.gjBarisEdit select{min-height:44px;padding:8px 10px;font-size:14px;min-width:0;width:100%;box-sizing:border-box;border-radius:10px;border:1.5px solid var(--garis);background:var(--kertas2);color:var(--dakwat)}
.gjBarisEdit .gjBAmaun{text-align:right;font-variant-numeric:tabular-nums}
.gjBuang{min-height:44px;min-width:44px;padding:0;display:inline-flex;align-items:center;justify-content:center;color:var(--merah)}
.gjTambah{margin:4px 0 8px;min-height:40px;display:inline-flex;align-items:center}
@media(max-width:520px){
  .gjBarisEdit{grid-template-columns:minmax(0,1fr) 7.2em;grid-template-areas:"nama buang" "jenis amaun";margin:10px 0}
  .gjBarisEdit .gjBNama{grid-area:nama}.gjBarisEdit .gjBJenis{grid-area:jenis}.gjBarisEdit .gjBAmaun{grid-area:amaun}.gjBarisEdit .gjBuang{grid-area:buang;justify-self:end}
  .gjBarisEdit+.gjBarisEdit{border-top:1px dashed var(--garis);padding-top:8px}
}
.gjPilihan{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px}
.gjPilihan .btn{flex:1 1 160px}
.gjPilihan .note{width:100%;margin:0}
.gjMembaca{display:flex;gap:8px;align-items:center}
.gjPadamSelepas{margin:12px 0 4px;padding:10px 12px;border-radius:var(--r);background:var(--kertas2);border:1px solid var(--garis)}
.gjAksiBawah{display:flex;gap:8px;margin-top:14px;position:sticky;bottom:0;padding:10px 0 calc(8px + env(safe-area-inset-bottom,0px));background:var(--kertas)}
.gjAksiBawah .btn{flex:1 1 0;min-width:0}
.gjAksiBawah .btn:disabled{opacity:.55;cursor:not-allowed}
.gjAksiBawah [data-gj-simpanTempat]{flex:1.4 1 0;display:flex}
.gjAksiBawah [data-gj-simpanTempat] .btn{flex:1}

/* ═══ p140 cangkerang — CANGKERANG APP & SKRIN (pusingan 140, 29 Okt 2026) ═══════════════════════════════════════════════════════
   Reka bentuk semula app log masuk mengikut docs/JENAMA.md ("Lejar Ringgit"): pengepala jenama (lambang + wordmark), navigasi bawah 5 kawalan
   dengan ikon monolin → lajur sisi kiri ≥ 1024px, kandungan ≤ 1100px dua lajur, lembar = panel sisi di desktop, papan pemuka Utama (hero
   "angka ringgit", statGrid, slot ejen), baris resit baharu, Wang/Beli/Cukai sebagai kad & stat, borang seragam, keadaan kosong/ralat/memuat/
   luar talian, tema terang & gelap melalui TOKEN sahaja (tiada warna hex di sini). Token & komponen asas K0 (.statGrid .stat .kosong .memuat
   .ralatKad .luarTalian .jadual .carta .tabBar .ikon .angka) milik ejen `jenama` (blok atas fail); sandaran berspesifisiti SIFAR
   (:where) di hujung blok ini supaya takrif jenama sentiasa menang. iOS 15: tiada :has() yang kritikal, tiada container query.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Pengepala: lambang + wordmark, pemilih TT, kawalan ─────────────────────────────────────────────────────────────────────── */
header{background:var(--kertas);background:color-mix(in srgb, var(--kertas) 94%, transparent);border-bottom:1px solid var(--garis)}
.hd{gap:8px;padding:9px 14px;min-height:60px}
.hdLambang{display:inline-flex;width:30px;height:30px;flex:none;align-items:center;justify-content:center}
.hdLambang svg{width:28px;height:28px;fill:none;stroke:var(--cop);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hdLambang .lbSambung{stroke:var(--emas);stroke-width:1.9}
.hdLambang .lbBulat{fill:var(--emas);stroke:var(--emas)}
.hdLambang .lbTanda{stroke:var(--kertas2);stroke-width:1.7}
.hd .nm{position:relative;display:inline-flex;align-items:baseline;font-size:19px;letter-spacing:-.02em;color:var(--dakwat);line-height:1.2;margin-right:2px}
.hd .nm .nmList{font-weight:500}.hd .nm .nmBelanja{font-weight:800}
.hd .nm::after{content:"";position:absolute;left:34%;right:44%;bottom:-3px;height:2px;border-radius:2px;background:var(--emas)}
.hd .pill{min-height:40px}
.hd .privasiBtn{display:inline-flex;align-items:center;justify-content:center;padding:0 10px}
.hd .privasiBtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.hd .privasiBtn[aria-pressed="true"]{background:var(--cop-lembut);border-color:var(--cop);color:var(--cop)}
.hd .bantuan{border-color:var(--garis)}
/* ≤ 420px: wordmark disorok (p139 ux — tahun taksiran mesti terbaca), lambang kekal sebagai jenama; kawalan dirapatkan. */
@media(max-width:420px){.hd .nm{display:none}.hdLambang{width:26px}.hdLambang svg{width:26px;height:26px}.hd{gap:6px;padding-left:10px;padding-right:10px}.hd .pilihTahun{max-width:40vw;flex:0 1 auto}.hd .privasiBtn{padding:0 8px}.hd #awanBtn{padding:7px 9px}}
@media(max-width:359px){.hdLambang{display:none}.hd{gap:5px}}
/* Jalur konteks: lebih lapang, teks sedikit lebih besar untuk dibaca di telefon */
.hdSub{padding:0 14px 10px;gap:8px;font-size:13px}

/* ── 2. Jalur luar talian (K0 .luarTalian) ─────────────────────────────────────────────────────────────────────────────────────── */
.luarTalian{position:sticky;top:0;z-index:39;display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 14px;font-size:13.5px;font-weight:600;
  background:var(--amber-lembut);color:var(--amber);border-bottom:1px solid var(--garis);text-align:center}
.luarTalian[hidden]{display:none}
.luarTalian svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* ── 3. Navigasi: bar bawah (telefon/tablet) ───────────────────────────────────────────────────────────────────────────────────── */
/* Bar bawah LEGAP (bukan kaca 96%): kandungan di bawahnya tidak "tembus" — semakan kontras OKU menilai butang yang separa terlindung dengan betul. */
nav{background:var(--kertas2);border-top:1px solid var(--garis)}
.navin{height:64px;grid-template-columns:1fr 1fr 80px 1fr 1fr}
.nb{gap:3px;padding:6px 0 4px;font-size:11.5px;font-weight:600;color:var(--pudar);border-radius:0;min-height:56px;justify-content:center;transition:color .15s ease}
.nb svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;padding:3px 14px;box-sizing:content-box;border-radius:999px;transition:background .18s ease}
.nb.on{color:var(--cop);font-weight:700}
.nb.on svg{background:var(--cop-lembut);padding:3px 14px;width:24px}
.nb:focus-visible{outline:none;box-shadow:none}.nb:focus-visible svg{box-shadow:var(--fokus)}
.snap{width:58px;height:58px;background:var(--cop);color:var(--atas-cop);border:4px solid var(--kertas2);transform:translateY(-14px);box-shadow:0 6px 18px rgba(0,0,0,.18);transition:transform .15s ease}
.snap svg{width:26px;height:26px;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.snap:active{transform:translateY(-13px) scale(.97)}
@media(prefers-reduced-motion:reduce){.nb,.nb svg,.snap{transition:none}}

/* ── 4. Desktop ≥ 1024px: lajur sisi kiri, kandungan ≤ 1100px, lembar = panel sisi ────────────────────────────────────────────── */
@media(min-width:1024px){
  :root{--lebar:1100px;--sisi:236px}
  body{padding-left:var(--sisi);padding-bottom:40px}
  nav{position:fixed;left:0;top:0;bottom:0;right:auto;width:var(--sisi);border-top:none;border-bottom:none;border-right:1px solid var(--garis);padding:0;overflow-y:auto}
  .navin{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:4px;height:auto;max-width:none;padding:18px 14px 20px}
  .navin::before{content:"ListBelanja";order:-2;display:block;padding:6px 12px 18px;font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--cop)}
  .nb{flex-direction:row;justify-content:flex-start;gap:12px;min-height:46px;padding:0 12px;border-radius:12px;font-size:15px;font-weight:600;color:var(--dakwat)}
  .nb svg{padding:0;width:22px;height:22px;border-radius:0;background:none}
  .nb.on{background:var(--cop-lembut);color:var(--cop)}
  .nb.on svg{background:none;padding:0;width:22px}
  .nb:focus-visible{box-shadow:var(--fokus)}.nb:focus-visible svg{box-shadow:none}
  .snap{order:-1;width:auto;height:50px;border-radius:12px;transform:none;border:none;box-shadow:none;justify-self:stretch;justify-content:flex-start;gap:12px;padding:0 14px;margin:0 0 14px;font-size:15px;font-weight:700}
  .snap::after{content:attr(aria-label)}
  .snap:active{transform:translateY(1px)}
  .snap svg{width:22px;height:22px}
  .toast{left:calc(50% + var(--sisi) / 2);bottom:32px}
  .lambatBar{left:calc(var(--sisi) + 12px)}
  /* Lembar: panel sisi kanan (muncul dengan pudar), latar app dimalapkan; panduan di atas */
  .lembar{left:auto;right:0;width:min(760px,calc(100vw - var(--sisi)));border-left:1px solid var(--garis);box-shadow:-16px 0 48px rgba(0,0,0,.16)}
  .lembar.on{animation:lembarSisiMasuk .22s ease}
  .lembar.menutup{animation:lembarSisiKeluar .22s ease forwards}
  body.lembarTerbuka::after{content:"";position:fixed;inset:0;z-index:59;background:rgba(0,0,0,.28)}
  .lembar .wrap,.lembar>.wrap{max-width:680px}
  .kunciSkrin,.tutup,.statusTutup{left:var(--sisi)}
  .hdSub{padding-left:14px}
}
/* Panel sisi muncul/hilang dengan pudar (bukan luncur dari luar skrin) — tiada bingkai di mana panel melepasi tepi kanan skrin (semak-reka). */
@keyframes lembarSisiMasuk{from{opacity:0}to{opacity:1}}
@keyframes lembarSisiKeluar{from{opacity:1}to{opacity:0}}
@media(prefers-reduced-motion:reduce){.lembar.on,.lembar.menutup{animation:none}body.lembarTerbuka::after{display:none}}
@media(min-width:1280px){:root{--lebar:1100px}}

/* ── 5. Kandungan: tajuk skrin, bahagian & grid dua lajur di desktop ──────────────────────────────────────────────────────────── */
.skrinKepala{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 0 8px}
.skrinTajuk{font-size:var(--fs-tajuk,20px);font-weight:700;color:var(--dakwat);letter-spacing:-.01em}
.sect{margin:20px 0 8px}
.sect .lbl{font-size:13.5px;font-weight:700;color:var(--pudar);letter-spacing:.01em}
.sect .ln{background:var(--garis);opacity:.8}
main.wrap>.card:first-child{margin-top:12px}
/* Desktop (≥ 1024px): satu lajur kandungan yang selesa dibaca di sebelah lajur sisi — bukan grid dua lajur (kad bersebelahan berlainan
   tinggi melanggar PRINSIP REKA BENTUK SEKATA; disahkan semak-reka pusingan 140). Slot kad modul juga satu lajur. */
@media(min-width:1024px){
  #v-utama,#v-cukai{max-width:760px;margin-left:auto;margin-right:auto}
  #lembarWang .wrap,#lembarBeli .wrap{max-width:680px}
}

/* ── 6. Utama: hero "angka ringgit" (kitaran gaji, baki hingga gaji) + statGrid ───────────────────────────────────────────────── */
#v-utama>.hero{margin:14px 0 10px;padding:18px 18px 16px}
.heroAtas{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.heroAtas .lbl{font-size:13px;letter-spacing:0}
.heroTag{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:650;line-height:1.2;background:rgba(255,255,255,.16);color:inherit;max-width:100%;overflow-wrap:break-word}
.heroTag svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.heroLabel{font-size:13.5px;font-weight:600;opacity:.9;margin-top:2px}
.hero .besar.angka,.hero .angka.besar{font-family:var(--sans);font-variant-numeric:tabular-nums;font-weight:650;letter-spacing:-.02em;font-size:var(--fs-paparan,40px);line-height:1.05;margin:4px 0 2px}
.hero .angka.merah,.hero .besar.merah{color:var(--merah)}
.heroStat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:14px 0 4px}
@media(min-width:620px){.heroStat{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:620px) and (max-width:1023.98px){.heroStat.tiga{grid-template-columns:repeat(3,minmax(0,1fr))}}
.heroStat .stat{display:flex;flex-direction:column;gap:3px;min-width:0;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);color:inherit}
.heroStat .stat .statLabel{font-size:12.5px;font-weight:600;opacity:.88;line-height:1.3;overflow-wrap:break-word}
.heroStat .stat .statNilai{font-variant-numeric:tabular-nums;font-weight:650;letter-spacing:-.02em;font-size:17px;line-height:1.25;overflow-wrap:break-word}
.heroStat .stat .statNota{font-size:12px;opacity:.82;line-height:1.3;overflow-wrap:break-word}
.heroStat .stat.emas .statNilai{color:var(--emas)}
.heroStat button.stat{text-align:left;cursor:pointer;font:inherit;transition:background .15s ease}
.heroStat button.stat:hover{background:rgba(255,255,255,.2)}
.heroStat button.stat:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,255,255,.45)}
.heroBar{height:6px;border-radius:999px;background:rgba(255,255,255,.2);overflow:hidden;margin:10px 0 0}
.heroBar i{display:block;height:100%;border-radius:999px;background:var(--emas);width:var(--p,0%)}
.heroBar i.penuh{background:var(--merah)}
.heroKaki{font-size:12.5px;line-height:1.5;margin-top:10px;padding-top:9px;border-top:1px solid rgba(255,255,255,.2);opacity:.9}
.heroNota{display:block;margin-top:4px}
#v-utama>.hero .heroPautan{margin-top:8px}
/* Hero pada tema yang kad heronya bukan dakwat (sandaran bila jenama menukar .hero menjadi kad kertas): warna teks ikut --hero-teks */
.hero.heroKertas{color:var(--dakwat)}
.hero.heroKertas .heroTag,.hero.heroKertas .heroStat .stat{background:var(--kertas3);border-color:var(--garis)}
.hero.heroKertas .heroKaki{border-top-color:var(--garis)}
/* Kad Utama: lebih lapang, tajuk kad tebal, sektor "Perlu perhatian" */
#v-utama .card>.lbl:first-child{font-size:13.5px;font-weight:700;margin-bottom:2px}
#v-utama button.card{transition:border-color .15s ease,transform .15s ease}
#v-utama button.card:hover{border-color:var(--cop)}
#v-utama button.card:active{transform:translateY(1px)}
.utamaLagi{min-height:56px}
.utamaLagi .t b{font-weight:650}
.utamaLagi:hover .t b{color:var(--cop)}
/* Tindakan pantas: ikon monolin dalam petak lembut, 2 lajur; 4 lajur di desktop */
.aksiGrid{gap:10px}
.aksiGrid .aksi{min-height:84px;padding:14px;gap:10px;border-radius:var(--r-kad,16px)}
.aksiGrid .aksi svg{width:26px;height:26px;stroke-width:1.75}
.aksiGrid .aksi.kedua svg{color:var(--cop)}
.aksiGrid .aksi b{font-size:15px}
@media(min-width:760px){.aksiGrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Slot ejen ciri (K5): kad daripada lejar/rancang/tangkap dilukis di sini ikut tertib daftar */
#slotUtama:empty,#slotWang:empty{display:none}

/* ── 7. Mod ringkas (3 langkah) — reka bentuk baharu, susunan kekal ────────────────────────────────────────────────────────────── */
.ringkasLangkah>li.card{gap:14px;padding:16px}
.ringkasLangkah .ringkasNo{width:34px;height:34px;font-size:15px;background:var(--kertas3);color:var(--pudar)}
.ringkasLangkah>li.card.siap .ringkasNo{background:var(--hijau);color:var(--atas-cop)}
.ringkasLangkah .ringkasIkon{font-size:22px}
.ringkasLangkah>li.card .t b{font-size:16px}

/* ── 8. Resit: kotak carian, bar penapis, pengepala bulan melekat, baris resit dengan ikon sumber ─────────────────────────────── */
.cariKotak{position:relative;margin:2px 0 6px}
.cariKotak svg[aria-hidden]{position:absolute;left:14px;top:50%;width:20px;height:20px;transform:translateY(-50%);fill:none;stroke:var(--pudar);stroke-width:1.9;stroke-linecap:round;pointer-events:none}
.cariKotak input{width:100%;box-sizing:border-box;min-height:50px;padding:12px 14px 12px 44px;border:1.5px solid var(--garis);border-radius:14px;background:var(--kertas2);color:var(--dakwat);font:inherit;font-size:16px}
.cariKotak input::placeholder{color:var(--pudar)}
.cariKotak input:focus-visible{outline:none;border-color:var(--cop);box-shadow:var(--fokus)}
.resitAlat{display:flex;gap:8px;align-items:center;margin-top:8px}
.resitAlat .spacer{flex:1}
.kakiSenarai{text-align:center;margin:14px 0 24px}
.resitTapis .cip{min-height:38px}
.sect.sectResit{position:sticky;top:var(--kepalaTinggi,96px);z-index:3;margin:16px 0 6px;padding:8px 0 6px;background:var(--kertas);background:linear-gradient(var(--kertas) 82%, transparent)}
.sect.sectResit .lbl{font-size:14px;color:var(--dakwat)}
.slip{display:grid;grid-template-columns:40px minmax(0,1fr);gap:4px 12px;align-items:start;padding:12px 14px;border-radius:var(--r-kad,16px);border:1px solid var(--garis);transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.slip:hover{border-color:var(--cop);box-shadow:var(--bayang,0 8px 24px rgba(0,0,0,.06))}
.slip:active{transform:translateY(1px)}
.slipIkon{grid-row:1 / span 2;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;background:var(--kertas3);background:color-mix(in srgb, var(--cop) 9%, var(--kertas2));color:var(--cop)}
.slipIkon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.slip.slipPelepasan .slipIkon{background:var(--hijau-lembut,rgba(46,125,79,.12));color:var(--hijau)}
.slip.slipPerluSemak .slipIkon{background:var(--amber-lembut);color:var(--amber)}
.slip .a{min-width:0}
.slip .a>.m{font-size:15.5px;font-weight:650;line-height:1.3;white-space:normal;overflow-wrap:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.slip .j,.slip .slipJumlah{font-variant-numeric:tabular-nums;font-weight:650;letter-spacing:-.02em;font-size:15.5px}
.slip .slipJumlah{display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.slip .slipJumlah .note{font-weight:500;font-size:12px}
.slip .slipMeta{margin-top:2px}
.slip .slipImbasBaris{grid-column:1 / -1}
.slip.slipImbas{grid-template-columns:minmax(0,1fr)}
.slip.slipBaru{border-color:var(--hijau);box-shadow:inset 3px 0 0 var(--hijau)}
/* Keadaan kosong resit: ikon besar, satu ayat, satu butang */
#senarai .kosong{padding:40px 18px 30px}
#senarai .kosong .kosongIkon{display:inline-flex;width:64px;height:64px;align-items:center;justify-content:center;border-radius:20px;background:var(--cop-lembut);color:var(--cop);margin-bottom:12px}
#senarai .kosong .kosongIkon svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#senarai .kosong .kosongAyat{display:block;font-size:16px;font-weight:600;color:var(--dakwat);line-height:1.4;margin:0 auto 4px;max-width:34ch}
#senarai .kosong .note{display:block;max-width:40ch;margin:0 auto}
#senarai .kosong .btn{margin-top:14px}

/* ── 9. Wang & Beli: susunan kad, slot, fasa segmen ────────────────────────────────────────────────────────────────────────────── */
#wangBadan .hero,#beliBadan .hero,#hargaBadan .hero{margin:12px 0 10px}
#wangBadan .card>.lbl:first-child,#beliBadan .card>.lbl:first-child{font-weight:700}
.wangRingkas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 4px}
@media(min-width:560px){.wangRingkas{grid-template-columns:repeat(4,minmax(0,1fr))}}
.wangRingkas .stat{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;background:var(--kertas2);border:1px solid var(--garis);min-width:0}
.wangRingkas .stat .statLabel{font-size:12.5px;color:var(--pudar);font-weight:600;line-height:1.3;overflow-wrap:break-word}
.wangRingkas .stat .statNilai{font-variant-numeric:tabular-nums;font-weight:650;letter-spacing:-.02em;font-size:16px;overflow-wrap:break-word}
.wangRingkas .stat.masuk .statNilai{color:var(--hijau)}.wangRingkas .stat.keluar .statNilai{color:var(--merah)}
#beliBadan label.baris{align-items:center;gap:12px;min-height:54px}
#beliBadan label.baris input[type=checkbox]{width:22px;height:22px;border-radius:7px}
#beliBadan label.baris .t b{font-size:15px}
#beliBadan .baris.siap{opacity:.55}
#beliBadan .baris.siap .t>b{text-decoration:line-through}
#beliBadan .beliBuang{color:var(--pudar);font-size:19px;padding:0 4px;min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px}
#beliBadan .beliBuang:hover{background:var(--kertas3);color:var(--merah)}
#beliBadan .beliKunci{padding:0 6px}
#beliBadan .beliHargaSebenar{width:84px;padding:7px;border:1.5px solid var(--amber);border-radius:var(--r);background:var(--kertas);text-align:right;min-height:40px}
.beliTambah{display:flex;flex-wrap:wrap;gap:8px}
.beliTambah>input{flex:1 1 140px;min-width:0}
.beliTambah>input.beliQty{flex:0 0 64px;max-width:64px}
.beliTambah>input.beliHarga{flex:0 0 96px;max-width:96px}
.beliAksi{display:flex;gap:8px;margin-top:9px}
.beliAksi>.btn{flex:1 1 0;min-width:0}
.beliTampalBtn{margin-top:8px}

/* ── 10. Cukai: bar tab (.tabBar — public/tab.css), perjalanan, hero cukai, kad stat ─────────────────────────────────────────────────────────── */
#v-cukai .niaNav{padding:10px 0 8px}
#v-cukai .perjalanan{margin:12px 0 6px}
#cukai_panel>.hero{margin:10px 0}
#v-cukai .cukaiBantuanBar{margin:0 0 4px}
.pjLangkah{border-radius:14px;padding:12px 6px;gap:7px}
.pjNo{width:30px;height:30px;font-size:13.5px}
.pjLangkah.semasa{background:var(--cop-lembut)}
.pjTeks b{font-size:13px}
.dcNavBtn .dcNavN{width:30px;height:30px}
.dcProgres{height:6px}

/* ── 11. Borang & kawalan seragam: label atas, bantuan bawah, ralat sebaris, togol, pilihan segmen, kotak semak ───────────────── */
.fld{margin-bottom:14px}
:where(.fld) label,.fld>.lbl{display:block;margin-bottom:6px;font-size:13.5px;font-weight:600;color:var(--dakwat)}
.fld input:not([type=checkbox]):not([type=radio]):not([type=range]),.fld select,.fld textarea{width:100%;min-height:48px;padding:11px 13px;border:1.5px solid var(--garis);border-radius:var(--r);background:var(--kertas2);color:var(--dakwat);font-size:16px;line-height:1.3;transition:border-color .15s ease,box-shadow .15s ease}
.fld input:focus-visible,.fld select:focus-visible,.fld textarea:focus-visible{outline:none;border-color:var(--cop);box-shadow:var(--fokus)}
.fld input[aria-invalid="true"],.fld select[aria-invalid="true"],.fld textarea[aria-invalid="true"]{border-color:var(--merah)}
.fld input:disabled,.fld select:disabled,.fld textarea:disabled{opacity:.55;cursor:not-allowed}
.fldNota{display:block;margin:6px 0 0;font-size:13px;color:var(--pudar);line-height:1.45}
.fldRalat{display:block;margin:6px 0 0;font-size:13px;font-weight:600;color:var(--merah);line-height:1.45}
.fldRalat:empty{display:none}
.row{gap:10px}
.row>.fld{margin-bottom:0}
.modalTajuk{font-size:var(--fs-tajuk,20px);line-height:1.3;margin:6px 0 6px;letter-spacing:-.01em}
.modalNota{margin:0 0 14px}
.modalAksi{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.modal,.statusKad{padding:22px 20px}
.modal .lbl:first-child{color:var(--cop)}
/* Togol (suis) — <label class="suis"><input type="checkbox"><span class="suisTrek"></span><span class="t">…</span></label> */
.suis{display:flex;align-items:center;gap:12px;min-height:48px;cursor:pointer}
.suis input{position:absolute;width:1px;height:1px;margin:0;opacity:0}
.suisTrek{flex:none;width:46px;height:28px;border-radius:999px;background:var(--kertas3);border:1.5px solid var(--garis);position:relative;transition:background .2s ease,border-color .2s ease}
.suisTrek::after{content:"";position:absolute;top:2px;left:2px;width:21px;height:21px;border-radius:50%;background:var(--kertas2);box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s ease}
.suis input:checked+.suisTrek{background:var(--cop);border-color:var(--cop)}
.suis input:checked+.suisTrek::after{transform:translateX(18px)}
.suis input:focus-visible+.suisTrek{box-shadow:var(--fokus)}
.suis .t{min-width:0;display:flex;flex-direction:column;gap:2px}
input[type=checkbox]:not(.tuTanda input),input[type=radio]{width:20px;height:20px}
label.baris input[type=checkbox]{flex:none}
@media(prefers-reduced-motion:reduce){.suisTrek,.suisTrek::after,.fld input,.fld select,.fld textarea{transition:none}}

/* ── 12. Keadaan: memuat (rangka), ralat (cuba lagi), kosong ───────────────────────────────────────────────────────────────────── */
.memuat .rangkaBaris,.rangkaKad{position:relative;overflow:hidden;background:var(--kertas3)}
.memuatUtama{display:flex;flex-direction:column;gap:10px;padding:14px 0}
.memuatUtama .rangkaKad{height:150px;border-radius:var(--r-kad,16px)}
.memuatUtama .memuatDua{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.memuatUtama .memuatDua .rangkaKad{height:74px}
.memuatUtama .rangkaKad.rendah{height:56px}
.memuatSenarai{display:flex;flex-direction:column;gap:8px;padding:8px 0}
.memuatSenarai .rangkaKad{height:68px;border-radius:var(--r-kad,16px)}
.memuat .rangkaBaris::after,.rangkaKad::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);animation:rangkaKilau 1.4s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.memuat .rangkaBaris::after,.rangkaKad::after{animation:none}}
@keyframes rangkaKilau{to{transform:translateX(100%)}}
.ralatKad{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:16px;border-radius:var(--r-kad,16px);border:1px solid var(--garis);border-left:4px solid var(--merah);background:var(--kertas2);margin:12px 0}
.ralatKad b{font-size:15.5px;line-height:1.35}
.ralatKad .note{margin:0;overflow-wrap:break-word}
.ralatKad .btn{margin-top:4px;min-height:44px}
.ralatKad .ralatIkon{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:11px;background:var(--merah-lembut,rgba(179,54,47,.1));color:var(--merah)}
.ralatKad .ralatIkon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.kosong{color:var(--pudar)}
.kosong .btn{margin-top:12px}

/* ── 13. Carta kongsi (carta-kira.js) — warna token, teks paksi kecil, bar mendatar ──────────────────────────────────────────── */
.cartaBekas{margin:8px 0 4px}
.cartaBekas svg.carta{display:block;width:100%;height:auto;max-height:200px;overflow:visible}
.carta .grid{stroke:var(--garis);stroke-width:1;opacity:.9}
.carta .bar{opacity:.92}
.carta .bar.sorot{opacity:1;stroke:var(--dakwat);stroke-width:1}
.carta .bar.sifar{opacity:.35}
.carta .garis{stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.carta .titik{stroke:var(--kertas2);stroke-width:1.2}
.carta .asas{stroke:var(--hijau);stroke-width:1.5;stroke-dasharray:4 3}
.carta text{font-family:var(--sans);font-size:10.5px;fill:var(--pudar);font-variant-numeric:tabular-nums}
.carta .nilai{fill:var(--dakwat);font-weight:600;font-size:10px}
.carta .bar.siri-cop{fill:var(--cop)}.carta .bar.siri-emas{fill:var(--emas)}.carta .bar.siri-hijau{fill:var(--hijau)}.carta .bar.siri-amber{fill:var(--amber)}.carta .bar.siri-merah{fill:var(--merah)}.carta .bar.siri-pudar{fill:var(--pudar)}
.carta .garis.siri-cop,.carta .titik.siri-cop{stroke:var(--cop)}.carta .titik.siri-cop{fill:var(--cop)}
.carta .garis.siri-emas,.carta .titik.siri-emas{stroke:var(--emas)}.carta .titik.siri-emas{fill:var(--emas)}
.carta .garis.siri-hijau,.carta .titik.siri-hijau{stroke:var(--hijau)}.carta .titik.siri-hijau{fill:var(--hijau)}
.carta .garis.siri-amber,.carta .titik.siri-amber{stroke:var(--amber)}.carta .titik.siri-amber{fill:var(--amber)}
.carta .garis.siri-merah,.carta .titik.siri-merah{stroke:var(--merah)}.carta .titik.siri-merah{fill:var(--merah)}
.carta .garis.siri-pudar,.carta .titik.siri-pudar{stroke:var(--pudar)}.carta .titik.siri-pudar{fill:var(--pudar)}
.cartaLegenda{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px;font-size:12.5px;color:var(--pudar)}
.cartaLegenda span{display:inline-flex;align-items:center;gap:6px}
.cartaSwatch{display:inline-block;width:12px;height:12px;border-radius:3px;background:var(--cop)}
.cartaSwatch.siri-emas{background:var(--emas)}.cartaSwatch.siri-hijau{background:var(--hijau)}.cartaSwatch.siri-amber{background:var(--amber)}.cartaSwatch.siri-merah{background:var(--merah)}.cartaSwatch.siri-pudar{background:var(--pudar)}
.cartaSwatch.asas{background:transparent;border-top:2px dashed var(--hijau);height:0;border-radius:0}
.cartaDatar{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.cartaDatarBaris{display:grid;grid-template-columns:minmax(min(9em,40%),1.2fr) minmax(0,1fr) auto;gap:4px 10px;align-items:center;font-size:14px}
.cartaDatarLabel{min-width:0;overflow-wrap:break-word;display:flex;flex-direction:column;gap:1px}
.cartaDatarLabel small{color:var(--pudar);font-size:12px}
.cartaDatarBar{display:block;height:8px;border-radius:999px;background:var(--kertas3);overflow:hidden}
.cartaDatarBar i{display:block;height:100%;width:var(--p,0%);border-radius:999px;background:var(--cop)}
.cartaDatarBar i.siri-emas{background:var(--emas)}.cartaDatarBar i.siri-hijau{background:var(--hijau)}.cartaDatarBar i.siri-amber{background:var(--amber)}.cartaDatarBar i.siri-merah{background:var(--merah)}.cartaDatarBar i.siri-pudar{background:var(--pudar)}
.cartaDatarBaris.lebih .cartaDatarBar i{background:var(--merah)}
.cartaDatarNilai{white-space:nowrap;font-weight:650}
@media(max-width:380px){.cartaDatarBaris{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"label nilai" "bar bar"}.cartaDatarLabel{grid-area:label}.cartaDatarBar{grid-area:bar}.cartaDatarNilai{grid-area:nilai}}

/* ── 14. Lembar: pengepala (K0 .kepala) dengan butang kembali berikon, tajuk; toast; dialog ─────────────────────────────────── */
.lembarhd.kepala{min-height:60px;gap:8px;padding:10px 14px;background:var(--kertas2);background:color-mix(in srgb, var(--kertas2) 96%, transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lembarhd.kepala .kembaliBtn{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:6px 14px 6px 10px;color:var(--cop);font-weight:650}
.lembarhd.kepala>.lbl{font-size:15px;font-weight:700;color:var(--dakwat)}
.lembarhd.kepala .bantuan{width:44px;height:44px}
.toast{bottom:92px;border-radius:14px;padding:12px 16px;font-size:14.5px;font-weight:500;box-shadow:0 10px 30px rgba(0,0,0,.25);max-width:min(92vw,440px);line-height:1.4;display:flex;align-items:center;gap:12px;justify-content:center}
/* Butang toast = pil kertas berteks dakwat (kontras AA dalam kedua-dua tema; emas di atas kertas hanya 1.98:1 — semak-reka OKU). */
.toast .toastAksi{font-weight:700;min-height:36px;padding:4px 12px;border-radius:999px;flex:none}
.toast .toastAksi:hover{background:var(--kertas2)}
.tutup,.statusTutup{background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
@media(prefers-reduced-motion:reduce){.toast{transition:none}}

/* ── 15. Kebolehcapaian: fokus kelihatan pada setiap kawalan, sasaran ≥ 44px, teks besar ─────────────────────────────────────── */
.pill:focus-visible,.tag:focus-visible,.slip:focus-visible,.aksi:focus-visible,button.card:focus-visible,.utamaLagi:focus-visible,.baris:focus-visible{outline:none;box-shadow:var(--fokus)}
.hd .pill,.hd .bantuan,.resitAlat .pill,.skrinKepala .pill{min-height:44px}
.heroStat button.stat,.resitTapis .cip{min-height:44px}
body.besar .heroStat .stat .statNilai{font-size:19px}
body.besar .slip .a>.m{font-size:17px}
body.besar .nb{font-size:13px}
/* Tema gelap: bayang lebih pekat, kilauan rangka lebih lembut, hero stat lebih jelas */
@media(prefers-color-scheme:dark){:root:not([data-tema=terang]) .slip:hover{box-shadow:0 8px 24px rgba(0,0,0,.4)}
  :root:not([data-tema=terang]) .memuat .rangkaBaris::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent)}
  :root:not([data-tema=terang]) .rangkaKad::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent)}
  :root:not([data-tema=terang]) .snap{box-shadow:0 6px 18px rgba(0,0,0,.5)}}
:root[data-tema=gelap] .slip:hover{box-shadow:0 8px 24px rgba(0,0,0,.4)}
:root[data-tema=gelap] .memuat .rangkaBaris::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent)}
:root[data-tema=gelap] .rangkaKad::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent)}
:root[data-tema=gelap] .snap{box-shadow:0 6px 18px rgba(0,0,0,.5)}

/* ── 16. SANDARAN K0 berspesifisiti sifar (:where) — nilai sama dengan kontrak; takrif `jenama` (spesifisiti biasa) mengatasinya ── */
:where(.angka){font-variant-numeric:tabular-nums;font-weight:650;letter-spacing:-.02em}
:where(.statGrid){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
:where(.stat){display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;background:var(--kertas2);border:1px solid var(--garis);min-width:0}
:where(.kosong){text-align:center;padding:36px 18px;color:var(--pudar)}
:where(.memuat){display:block}
:where(.luarTalian){display:flex}
:where(.ikon){display:inline-flex;width:1.25em;height:1.25em;vertical-align:-.25em}
:where(.ikon svg){width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
:where(.jadual){width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
:where(.jadual th,.jadual td){padding:8px 6px;border-bottom:1px solid var(--garis);text-align:left;vertical-align:top}
:where(.jadual th){font-size:12.5px;color:var(--pudar);font-weight:600}
:where(.jadual td.angka,.jadual th.angka){text-align:right;white-space:nowrap}
@media(max-width:559px){:where(.jadual.responsif thead){display:none}:where(.jadual.responsif tr){display:block;padding:8px 0;border-bottom:1px solid var(--garis)}
  :where(.jadual.responsif td){display:flex;justify-content:space-between;gap:10px;border:none;padding:3px 0}:where(.jadual.responsif td)::before{content:attr(data-lajur);color:var(--pudar);font-size:12.5px}}
:where(.bantuanBaris){display:flex;align-items:center;gap:8px;min-height:44px;color:var(--cop);font-weight:650}
:where(.card.tenang){box-shadow:none}
:where(.btn.kecil){min-height:40px;padding:8px 14px;font-size:14px}
:where(.btn.bahaya){background:var(--merah);color:var(--atas-cop)}
:where(.tag.bahaya){color:var(--merah);border-color:var(--merah);background:var(--merah-lembut,rgba(179,54,47,.1))}
:where(.tag.emas){color:var(--amber);border-color:var(--emas);background:var(--emas-lembut,rgba(224,165,31,.14))}
:where(.pill.aktif){background:var(--cop);border-color:var(--cop);color:var(--atas-cop)}

/* p140 integrasi — butang cari semua dokumen dalam keadaan kosong Resit */
.resitCariSemua{margin-top:10px}
/* ═══ p140 lejar (K1): Akaun & baki — lembar #lembarAkaun, kad Wang, pemilih akaun, import penyata ═══ */
.akaunLembar .wrap{max-width:640px}
.akHab{padding:8px 0 24px}
.akStat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 12px}
.akStat4{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:480px){.akStat4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.akStatKad{padding:10px 12px;margin:0;display:flex;flex-direction:column;gap:4px;min-width:0}
.akStatKad .lbl{font-size:12px}
.akStatKad b{font-size:17px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.akStatBersih{background:var(--kertas2);background:color-mix(in srgb,var(--cop) 8%,var(--kertas2))}
.akStatKecil{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:8px 0 10px}
.akStatKecil>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.akStatKecil b{font-size:15px;overflow-wrap:break-word}
.angka{font-variant-numeric:tabular-nums;font-weight:650;letter-spacing:-.02em}
.akMerah{color:var(--merah)}
.akHijau{color:var(--hijau)}
.akKump{padding:0 12px;margin:0 0 12px}
.akKump .baris:last-child{border-bottom:none}
.akBaris,.akAcara{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px 0;background:none;border:0;border-bottom:1px solid var(--garis);color:var(--dakwat);font:inherit;min-height:52px}
button.akBaris,button.akAcara{cursor:pointer;border-radius:0}
.akBaris .t,.akAcara .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.akBaris .t b,.akAcara .t b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.akBaris .v,.akAcara .v{flex:none;white-space:nowrap}
.akIkon{flex:none;width:36px;height:36px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:var(--kertas3);font-size:18px}
.akPadam{flex:none;color:var(--pudar);font-size:19px;padding:0 6px;background:none;border:0;min-width:44px;min-height:44px;cursor:pointer}
.akPadan{background:var(--hijau-lembut,transparent);background:color-mix(in srgb,var(--hijau) 10%,transparent)}
.akButang{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 12px}
.akButang .btn{flex:1 1 140px;min-width:0}
.akNota{margin:4px 0 10px;color:var(--pudar)}
.akKosong .akCepatGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}
.akCepat{min-height:52px;justify-content:center}
.akJenis{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 12px}
.akJenis .cip.on{background:var(--cop);border-color:var(--cop);color:var(--atas-cop)}
.akKotak{display:flex;gap:10px;align-items:flex-start;padding:10px 0;cursor:pointer}
.akKotak input{margin-top:4px;flex:none;width:20px;height:20px}
.akHero{padding:16px}
.akHero .besar{font-size:30px;margin:4px 0 6px}
.akKadInfo{margin:0 0 6px}
.akCarta{width:100%;height:72px;display:block;margin-top:6px}
.akGaris{stroke:var(--cop);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.akSifar{stroke:var(--garis);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.akJadualTersembunyi{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.akTempoh{margin:0 0 12px}
.akTempoh .pill{min-width:44px;min-height:44px;font-size:18px;line-height:1}
.akPilih .note{display:block;margin-top:4px}
.akImport{margin:0 0 10px}
.akImport .row{flex-wrap:wrap}
.akImport .fld{flex:1 1 180px}
.akKepalaBaris{display:flex;gap:10px;align-items:center;min-width:0}
.akKepalaBaris .pill{flex:none;min-height:44px}
.akKepalaBaris .gjTajuk{margin:0;min-width:0;overflow-wrap:break-word}
.akTempohBaris{display:flex;gap:6px;align-items:center}
.akTempohBaris select{flex:1;min-width:0}
.akTempohBaris .pill{flex:none}
.akHero .akGaris{stroke:currentColor;opacity:.85}
.akHero .akSifar{stroke:currentColor;opacity:.35}
.akButang .btn{padding-left:12px;padding-right:12px}
@media(max-width:479px){.akStat{grid-template-columns:1fr;gap:6px}.akStatKad{flex-direction:row;align-items:baseline;justify-content:space-between;padding:10px 14px}.akStatBersih{grid-column:auto}
  .akStat4{grid-template-columns:repeat(2,minmax(0,1fr))}.akStat4 .akStatKad{flex-direction:column;align-items:flex-start}.akStat4 .akStatKad b{font-size:15.5px}
  .akStat.akStatKecil{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.akStatKecil b{font-size:13.5px;white-space:nowrap}}
#kadAkaunWang .akKump{padding:0;margin:0}
.akHab .row{align-items:flex-start}
/* ═══ p140 rancang — hab Rancangan wang (public/rancang.js): lembar #lembarRancang, tab, kad matlamat/pinjaman/hutang/langganan, statistik,
   pelan bebas hutang (slider, jadual, carta SVG), bahagi bil, nilai bersih & kesihatan, kad Utama/Wang. Token K0 sahaja (sandaran var(--x, nilai));
   sasaran sentuh ≥ 44px; 320px tanpa skrol mendatar; prefers-reduced-motion dihormati. */
.rancangLembar .wrap{max-width:720px}
.rwHab{padding:8px 0 28px}
.rwKepala{margin:6px 0 10px}
.rwTajuk{font-size:var(--fs-tajuk,22px);line-height:1.25;font-weight:700;letter-spacing:-.01em;margin:0 0 4px;display:flex;align-items:center;gap:8px}
.rwTajuk svg{width:24px;height:24px;flex:none}
.rwKepala .note{margin:0}
.rwIsi>.card,.rwIsi>details.card,.rwIsi>form.card{margin-bottom:12px}
.rwPrivasi{display:flex;gap:8px;align-items:flex-start;margin:18px 2px 0;padding:12px 14px;border-radius:var(--r,12px);background:var(--kertas3);background:color-mix(in srgb,var(--cop) 7%,var(--kertas2))}
.rwMemuat{display:flex;flex-direction:column;align-items:center;gap:10px;padding:34px 0}
.rwKosong{text-align:center;padding:24px 16px}
.rwKosong h3{margin:8px 0 4px;font-size:18px;font-weight:700}
.rwKosong .note{margin:0 auto 14px;max-width:46ch}
.rwIkonBesar{font-size:40px;line-height:1}
.rwAksiKosong,.rwDuaBtn{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.rwAksiKosong .btn,.rwDuaBtn .btn{flex:1 1 180px}
.rwDuaBtn{margin:4px 0 12px}
.rwHero{margin-bottom:12px}
.rwHero .besar{font-variant-numeric:tabular-nums;font-weight:650;letter-spacing:-.02em}
.rwStatGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 12px}
@media(min-width:720px){.rwStatGrid{grid-template-columns:repeat(4,minmax(0,1fr))}.rwStatGrid.rwStatDua{grid-template-columns:repeat(2,minmax(0,1fr))}.rwStatGrid.rwStatTiga{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:379px){.rwStatGrid.rwStatTiga{grid-template-columns:minmax(0,1fr)}}
.rwStat{display:flex;flex-direction:column;gap:3px;min-width:0;padding:12px 14px;border:1px solid var(--garis);border-radius:var(--r-kad,16px);background:var(--kertas2)}
.rwStatLabel{font-size:13px;font-weight:600;color:var(--pudar)}
.rwStatNilai{font-size:clamp(16px,4.4vw,20px);font-weight:650;letter-spacing:-.02em;font-variant-numeric:tabular-nums;overflow-wrap:break-word}
.rwStat .note{margin:0;font-size:12.5px;line-height:1.4}
.rwNeg,.rwStat.rwNeg .rwStatNilai{color:var(--merah)}
.rwPintas{display:grid;gap:8px;margin-top:4px}
@media(min-width:720px){.rwPintas{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rwBarisBtn{display:flex;width:100%;text-align:left;cursor:pointer;background:none;font:inherit;color:inherit;align-items:center;gap:10px;min-height:52px}
.rwPintas .rwBarisBtn{margin:0;padding:12px 14px}
.card>.rwBarisBtn{border-left:0;border-right:0;border-top:0;padding:8px 0}
.rwBarisBtn .t{flex:1;min-width:0;display:flex;flex-direction:column}
.rwBarisBtn .note{margin:2px 0 0}
.rwBarisBtn:focus-visible,.rwIkonBtn:focus-visible{outline:none;box-shadow:var(--fokus)}
.rwIsyarat{margin:6px 0}
/* Kad matlamat / pinjaman / langganan / orang */
.rwMtKepala{display:flex;align-items:center;gap:12px}
.rwMtIkon{flex:none;width:44px;height:44px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font-size:22px;background:var(--emas-lembut,var(--kertas3));background:var(--emas-lembut,color-mix(in srgb,var(--emas) 18%,var(--kertas2)))}
.rwMtTeks{flex:1;min-width:0;display:flex;flex-direction:column}
.rwMtTeks b{font-size:16px;line-height:1.3;overflow-wrap:break-word}
.rwMtTeks .note{margin:2px 0 0}
.rwMtPeratus{flex:none;font-weight:650;font-size:17px;font-variant-numeric:tabular-nums;letter-spacing:-.02em;text-align:right}
.rwBar{margin:12px 0 6px}
.rwBar i{background:var(--emas)}
.rwBar i.rwOk{background:var(--hijau)}
.rwBarMerah i{background:var(--merah)}
.rwCapai .rwMtIkon{background:var(--hijau-lembut,var(--cop-lembut))}
.rwMtAngka{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;font-variant-numeric:tabular-nums}
.rwMtAngka .note{margin:0}
.rwAksi{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.rwAksi .pill,.kalAksi .pill{min-height:44px;display:inline-flex;align-items:center}
.rwBahaya{color:var(--merah)}
.btn.ghost.rwBahaya{border-color:color-mix(in srgb,var(--merah) 40%,var(--garis))}
.rwSejarah{margin-top:12px;padding-top:10px;border-top:1px dashed var(--garis)}
.rwB{min-height:42px;padding:7px 0}
.rwB .t{display:flex;flex-direction:column;min-width:0}
.rwB .t .kalTag,.rwHutangBaris .t .kalTag{align-self:flex-start}
.rwB .v{font-variant-numeric:tabular-nums;white-space:nowrap}
.rwSub{margin:12px 0 2px}
.rwAmaran{color:var(--amber)}
/* Borang */
.rwBorang .lbl:first-child{font-size:15px;color:var(--dakwat);margin-bottom:8px}
.rwBorang .fld{margin:10px 0}
.rwBorang .fld input,.rwBorang .fld select{width:100%;box-sizing:border-box;min-height:48px}
.rwBorang .fld .note{display:block;margin-top:4px}
.rwDua,.rwTiga{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}
.rwTiga{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:479px){.rwDua,.rwTiga{grid-template-columns:minmax(0,1fr)}}
.rwDeposit{margin-top:12px;padding:12px;border-radius:var(--r,12px);background:var(--kertas3);background:color-mix(in srgb,var(--cop) 5%,var(--kertas2))}
.rwPenuh{flex:1 1 100%}
.rwIkonPilih{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 6px}
.rwIkonBtn{width:44px;height:44px;border-radius:12px;border:1.5px solid var(--garis);background:var(--kertas2);font-size:20px;cursor:pointer;padding:0}
.rwIkonBtn.pilih{border-color:var(--cop);background:var(--cop-lembut);box-shadow:0 0 0 1px var(--cop)}
.rwTanda{display:flex;gap:10px;align-items:flex-start;min-height:44px;padding:8px 0;cursor:pointer;font-size:14.5px;line-height:1.4}
.rwTanda input{width:20px;height:20px;flex:none;margin:2px 0 0;accent-color:var(--cop)}
.rwTanda .note{display:block;margin-top:2px}
.rwAksiBorang{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.rwAksiBorang .btn{flex:1 1 140px}
.rwAksiBorang .btn:disabled{opacity:.55;cursor:not-allowed}
/* Seksyen boleh lipat */
details.rwSeksyen{padding:0}
details.rwSeksyen>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:14px 16px;min-height:52px}
details.rwSeksyen>summary::-webkit-details-marker{display:none}
details.rwSeksyen>summary .t{flex:1;min-width:0;display:flex;flex-direction:column}
details.rwSeksyen>summary .note{margin:2px 0 0}
details.rwSeksyen>summary::after{content:"";width:9px;height:9px;flex:none;border-right:2px solid var(--pudar);border-bottom:2px solid var(--pudar);transform:rotate(45deg)}
details.rwSeksyen[open]>summary::after{transform:rotate(225deg)}
.rwSeksyenIsi{padding:4px 16px 14px;border-top:1px solid var(--garis)}
.rwSeksyenIsi .fld{margin:12px 0}
.rwSeksyenIsi input[type=range]{width:100%;min-height:44px;accent-color:var(--cop)}
.rwCip{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 6px}
.rwCip .cip,.rwOrangCip .cip,.rwItemOrang .cip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:6px 14px;border-radius:999px;border:1.5px solid var(--garis);background:var(--kertas2);color:var(--dakwat);font-weight:600;font-size:13.5px;cursor:pointer}
.rwCip .cip.pilih,.rwOrangCip .cip.pilih,.rwItemOrang .cip.pilih{background:var(--cop);border-color:var(--cop);color:var(--atas-cop)}
.rwCip .cip:disabled{opacity:.5;cursor:not-allowed}
.rwCip .cip:focus-visible,.rwOrangCip .cip:focus-within,.rwItemOrang .cip:focus-within{outline:none;box-shadow:var(--fokus)}
.rwJadual{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);column-gap:8px;margin:8px 0 6px;font-size:13.5px}
.rwJadual.rwJTiga{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,.8fr)}
.rwJBaris{display:contents}
.rwJBaris>span{padding:7px 0;border-bottom:1px solid var(--garis);min-width:0;overflow-wrap:break-word;font-variant-numeric:tabular-nums}
.rwJBaris>span:not(:first-child){text-align:right}
.rwJKepala>span{font-size:12px;color:var(--pudar);font-weight:600;border-bottom:2px solid var(--garis)}
.rwJBaris:last-child>span{border-bottom:0}
@media(max-width:359px){.rwJadual{font-size:12.5px;column-gap:5px}}
.rwTertib .pill{min-width:44px;min-height:44px;justify-content:center}
.rwBanding{margin-top:12px;padding-top:8px;border-top:1px dashed var(--garis)}
.rwCarta{margin:10px 0}
.rwCarta svg{display:block;width:100%;height:100px;border-radius:8px;background:var(--kertas3);background:color-mix(in srgb,var(--dakwat) 4%,var(--kertas2))}
.rwCartaGaris{stroke:var(--cop);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.rwCartaSifar{stroke:var(--merah);stroke-width:1;stroke-dasharray:4 3;vector-effect:non-scaling-stroke}
.rwCartaPaksi{display:flex;justify-content:space-between;font-size:11.5px;color:var(--pudar);margin-top:4px}
figure.rwCarta.card{margin:0 0 12px}
/* Hutang kawan & bahagi bil */
.rwOrang .rwMtKepala .pill{flex:none;min-height:44px}
.rwHutangBaris{flex-wrap:wrap;align-items:center;gap:4px 10px}
.rwHutangBaris .t{flex:1 1 12em;display:flex;flex-direction:column;min-width:0}
.rwHutangBaris .v{font-weight:650;font-variant-numeric:tabular-nums}
.rwHutangBaris .kalAksi{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.rwHutangBaris.rwSaya .v{color:var(--merah)}
.rwOrangCip{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:4px}
.rwCipBuang{border:0;background:none;color:inherit;font-size:18px;line-height:1;min-width:28px;min-height:28px;cursor:pointer;padding:0}
.rwTambahOrang{display:inline-flex;gap:6px;align-items:center;flex:1 1 200px;min-width:0}
.rwTambahOrang input{flex:1;min-width:0;min-height:44px}
.rwTambahOrang .pill{min-width:44px;min-height:44px;justify-content:center}
.rwItemSenarai{margin:8px 0}
.rwItemBaris{display:flex;flex-direction:column;gap:6px;padding:8px 0;border-bottom:1px solid var(--garis)}
.rwItemBaris .t b{overflow-wrap:break-word}
.rwItemOrang{display:flex;flex-wrap:wrap;gap:6px}
.rwItemOrang .cip.kecil{min-height:40px;padding:4px 12px;font-size:13px}
.rwItemOrang input{position:absolute;opacity:0;width:1px;height:1px}
.rwPeratus{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:0 12px}
.rwHasil{margin-top:12px;padding:12px;border-radius:var(--r,12px);background:var(--emas-lembut,var(--kertas3));background:var(--emas-lembut,color-mix(in srgb,var(--emas) 12%,var(--kertas2)))}
/* Nilai bersih & kesihatan */
.rwNbBar{display:grid;grid-template-columns:6.5em minmax(0,1fr) auto;gap:10px;align-items:center;font-variant-numeric:tabular-nums}
.rwNbBar .bar{margin:8px 0}
.rwIsyaratKad .rwIsyaratTeks{margin:0;font-size:15px;line-height:1.5}
.rwIsyaratKad .note{margin:6px 0 0}
.rwKat{flex-wrap:wrap;gap:4px 10px}
.rwKat .t{flex:1 1 10em}
.rwKat .kalAksi{display:flex;gap:6px}
/* Kad Utama & Wang */
.rwKadUtama{display:flex;width:100%;text-align:left;cursor:pointer}
.rwKadAksi{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.rwKadAksi .btn{flex:1 1 100%;line-height:1.25}
@media(min-width:560px){.rwKadAksi .btn{flex:1 1 0}}
@media(prefers-reduced-motion:reduce){.rwIkonBtn,.rwCip .cip{transition:none}}
.rwHutangBaris a{color:var(--cop);font-weight:600}
.hero.rwHero:has(.besar) .besar{font-size:clamp(28px,8.5vw,42px);overflow-wrap:break-word}

/* ═══ Pusingan 141 — gaya baharu setiap ejen DI BAWAH penanda masing-masing (elak konflik gabungan) ═══ */
/* ── p142:cukai2 ── */
/* Borang lain (E · P · M), pratonton jimat Bajet & perbandingan tanpa nama — tab Cukai (kelas komponen sendiri; tiada tetapan semula elemen). */
.c2Borang{align-items:flex-start}
.c2Borang .t,.c2Banding .t{min-width:0}
.c2Borang .t>.note{display:block;margin-top:2px;overflow-wrap:break-word}
.c2Aksi{display:block;margin-top:8px}
.c2Aksi .btn{min-height:44px}
.c2Hari{display:inline-block;color:var(--amber);font-size:13px;font-weight:700;white-space:nowrap}
.c2Label{margin:6px 0 8px}
.c2Besar{font-size:22px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums;margin-top:2px;overflow-wrap:break-word}
.c2Besar.c2Jimat{color:var(--hijau)}
.c2Besar.c2Tambah{color:var(--amber)}
.c2Ubah .t .c2Lebih{color:var(--hijau);font-weight:700}
.c2Senarai{margin:0 0 12px;padding-left:18px}
.c2Senarai>li{margin:4px 0}
.c2Tahap{margin:0 0 4px;font-weight:600;color:var(--dakwat)}
.c2Bar{display:block;height:6px;border-radius:999px;background:var(--kertas3);margin-top:6px;overflow:hidden}
.c2Bar>span{display:block;height:100%;background:var(--cop);border-radius:inherit}
.btn.c2Keluar{margin-top:12px;min-height:44px}
.c2Pemastautin{margin-top:4px}

/* ── p142:niaga2 ── */
/* SST-02 (tab Pendapatan sampingan › Cukai) */
.sstPilih{margin-top:8px}
.sstPilih>.fld{flex:1 1 200px;min-width:0}
.sstTarikh{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px;margin:10px 0 4px;padding:10px 12px;border-radius:12px;background:var(--kertas3);border:1px solid var(--garis)}
.sstTarikh.hampir{background:var(--amber-lembut);border-color:var(--amber);border-color:color-mix(in srgb, var(--amber) 45%, var(--garis))}
.sstTarikh.lewat{background:var(--merah-lembut);border-color:var(--merah);border-color:color-mix(in srgb, var(--merah) 45%, var(--garis))}
.sstTarikh.lewat .note{color:var(--merah);font-weight:650}
.sstJujur{padding:8px 10px;border-radius:10px;background:var(--cop-lembut);color:var(--dakwat)}
.sstTetapan{margin-top:8px}
.sstTetapan>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600;color:var(--cop)}
.sstTetapan .row>.fld{flex:1 1 180px;min-width:0}
.sstJumlah .v b{font-size:20px}
.sstAksi{gap:8px;align-items:stretch}
.sstAksi>.btn{flex:1 1 140px;min-width:0;text-align:center;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.sstSenarai>summary{cursor:pointer;min-height:44px;display:flex;align-items:center}
#sst_teks{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px}
/* Resit pelanggan (kad dalam tab Invois) & butang PDF */
.n2ResitAksi{gap:8px;align-items:stretch}
.n2ResitAksi>.btn{flex:1 1 130px;min-width:0}
.n2Resit .row>input{flex:1 1 120px;min-width:0}
/* Per diem (lembar #lembarPerdiem, Dasar tuntutan, kad resit) */
.pdMakan>.fld{flex:1 1 90px;min-width:0}
.pdHasil{margin:8px 0 10px}
.pdHasil .baris .v{white-space:nowrap}
.pdZonBaris>.fld{flex:1 1 120px;min-width:0}
.dasarPerdiem{border-top:1px dashed var(--garis);margin-top:12px;padding-top:4px}
.kadPerdiem .note{overflow-wrap:break-word}
/* Sasaran kutipan (warna status: tercapai hijau, hampir amber, ketinggalan merah) */
.s-capai .bajetBar i{background:var(--hijau)}.s-landasan .bajetBar i{background:var(--cop)}.s-hampir.sasaranBaris .bajetBar i{background:var(--amber)}
.s-ketinggalan .bajetBar i{background:var(--merah)}.s-tiadaSasaran .bajetBar i{background:var(--pudar)}
.s-capai .bajetStatus{color:var(--hijau);font-weight:650}.s-ketinggalan .bajetStatus{color:var(--merah);font-weight:650}.s-landasan .bajetStatus{color:var(--cop);font-weight:650}
.pmoPratonton .penyataKawal select{min-height:44px}
/* Hartanah: rumah pertama & pinjaman */
.hrtRp{overflow-wrap:break-word}
/* Nota di bawah label baris hasil kalkulator (label tidak tebal sebelum ini bercantum dengan nota pada satu baris). */
.hrtHab .baris .t>.note{display:block;margin-top:2px}
/* Kotak semak kekal di sebelah labelnya pada skrin sempit (.baris membalut di bawah 420px). */
.hrtHab .hrtKotak{flex-wrap:nowrap}

/* ── p142:pasar2 ── */
/* Pusingan 142 (pasar2): kad tambahan hab Pasar (Kedai saya, Bila patut beli, SHMMP, produk kod bar), paparan Menu ikut bajet / Resepi /
   Import (public/pasar-tambahan.js, public/menu.js). Kelas komponen sendiri (p2*) — tiada tetapan semula elemen berkekhususan kelas. */
.p2Blok{display:block}
.p2Kad .lbl .note{font-weight:500;margin-left:6px}
.p2Nota{margin:8px 0 0}
.p2Pautan{color:var(--cop);font-weight:600;text-decoration:underline;text-underline-offset:2px;display:inline-flex;align-items:center;min-height:44px}
.p2Senarai{margin:6px 0 0;padding-left:18px;columns:2 220px;column-gap:24px}
.p2Senarai>li{margin:2px 0;break-inside:avoid}
.p2Kedai{align-items:center;gap:8px}
.p2KedaiBuka{background:none;border:0;padding:6px 0;text-align:left;color:inherit;font:inherit;flex:1 1 auto;min-width:0;min-height:44px;display:flex;flex-direction:column;align-items:flex-start;cursor:pointer}
.p2Blok .pill,.p2Menu .pill,.p2Kepala .pill,.pill.p2Cip{min-height:44px}
.p2Kepala{margin:8px 0 0}
.row.p2Kepala>*{flex:0 0 auto;min-width:0}
.p2Tindakan{gap:8px;flex-wrap:wrap}
.p2Tindakan>.btn,.p2Tindakan>.pill{flex:1 1 180px}
.p2Cips{gap:6px;flex-wrap:wrap;margin:4px 0;align-items:center}
.row.p2Cips>*{flex:0 0 auto;min-width:0}
.pill.p2Cip[aria-checked=true]{background:var(--cop);color:var(--atas-cop);border-color:var(--cop)}
.p2Grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
/* p142:reka2 — label dua baris ("Bajet makanan seminggu (RM)") menolak kotak isian tidak sebaris dengan jirannya (semak-reka "tidak sekata"):
   setiap .fld = 3 baris dikongsi (label dijajar ke bawah · kawalan · nota), sama seperti pasangan .row. iOS 15 (tiada subgrid) kekal grid lama. */
@supports (grid-template-rows:subgrid){.p2Grid{align-items:start;row-gap:0}.p2Grid>.fld{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:start}.p2Grid>.fld>label{align-self:end}}
.p2Angka{font-size:30px;margin:4px 0 2px}
.p2Minggu{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px;margin-top:10px}
.p2Hari{border:1px solid var(--garis);border-radius:12px;padding:8px 10px;background:var(--kertas2);min-width:0}
.p2Hidangan{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 8px;align-items:center;padding:6px 0 0;border-top:1px dashed var(--garis)}
.p2Hidangan>.note{grid-column:1/-1;font-size:12px;line-height:1.2}
.p2NamaResepi{min-height:44px;padding:4px 0;text-align:left;justify-self:start;overflow-wrap:break-word}
.p2Kos{white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}
.p2Bahan{list-style:none;margin:6px 0 0;padding:0}
.p2Bahan>li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--garis)}
.p2Langkah{margin:6px 0 0;padding-left:20px}
.p2Langkah>li{margin:6px 0;line-height:1.5}
.p2Orang{max-width:160px;margin:0}
.p2Pilih{cursor:pointer}
.p2Pilih>input{width:22px;height:22px;flex:none}
.p2Halal{margin-top:10px;padding-top:10px;border-top:1px solid var(--garis)}
.p2Bungkus{overflow-wrap:break-word;word-break:normal}
.p2Ikut{margin:0}
.p2Ikut+.p2Nota{margin:6px 0 12px}
.p2Sebahagian{color:var(--amber)}

/* ── p142:rumah2 ── */
/* Isi rumah (pusingan 142): lembar hos #lembarRumah2 (peti dokumen tersulit, elaun anak & duit raya, laporan keadaan sewa), kad GPS dalam borang
   perbatuan, peraturan kategori & pratetap pindah. Token sedia ada sahaja; sasaran sentuh ≥ 44px; 320px tanpa skrol mendatar; tetapan elemen
   melalui :where() (kelas komponen sentiasa menang — pelajaran p141). */
.r2Lembar .wrap{max-width:720px;padding-bottom:32px}
.r2Lembar .lembarhd.kepala .kembaliBtn{min-height:44px}
.r2Lembar .lembarhd.kepala .bantuan{width:44px;height:44px}
.r2Lembar .btn.kecil,.r2Lembar .pill,.niaKeadaan{min-height:44px}
#lembarRumah2 input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),#lembarRumah2 select{min-height:44px}
.r2Lembar .card{margin-bottom:12px}
.r2Lembar input,.r2Lembar select,.r2Lembar textarea{max-width:100%;min-width:0;box-sizing:border-box}
.r2Lembar .row>.fld{min-width:0;flex:1 1 140px}
.r2Lembar .row{flex-wrap:wrap}
.r2Memuat{display:flex;justify-content:center;padding:34px 0}
.petiTajuk,.drTajuk,.kdTajuk{font-size:var(--fs-tajuk,20px);line-height:1.25;font-weight:700;letter-spacing:-.01em;margin:6px 0 4px;overflow-wrap:break-word}
:where(.r2Lembar) h2+.note{margin:0 0 12px}
/* Peti */
.petiStatus{margin:8px 0 0}
.petiButang,.drButang,.kdButang,.pjButang{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.petiButang>.btn,.drButang>.btn,.kdButang>.btn,.pjButang>.btn{flex:1 1 150px;margin:0}
.petiSenarai{display:flex;flex-direction:column}
.petiBaris{align-items:flex-start;gap:10px;flex-wrap:wrap}
.petiBaris>.t{flex:1 1 200px;min-width:0;display:flex;flex-direction:column;gap:3px;overflow-wrap:break-word}
.petiIkon{flex:none;font-size:22px;line-height:1.3}
.petiAksi{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.petiTahap{align-self:flex-start;white-space:normal}
.petiTahap-luput{background:var(--merah-lembut);color:var(--merah)}
.petiTahap-segera{background:var(--amber-lembut);color:var(--dakwat)}
.petiTahap-hampir{background:var(--emas-lembut);color:var(--dakwat)}
.petiTahap-ok{background:var(--hijau-lembut);color:var(--dakwat)}
.petiPratonton{margin:6px 0 10px}
.petiGambar{display:block;max-width:100%;max-height:60vh;margin:0 auto 8px;border-radius:var(--r,12px);object-fit:contain}
.petiNota{margin:6px 0;overflow-wrap:break-word}
.petiCentang{cursor:pointer;align-items:flex-start;gap:10px;border-bottom:none}
.petiCentang input{width:22px;height:22px;flex:none;margin-top:2px}
.petiCentang>.t{display:flex;flex-direction:column;gap:2px;min-width:0}
.petiKodTeks{font-family:var(--mono,ui-monospace,monospace);font-size:clamp(16px,4.6vw,22px);letter-spacing:.06em;text-align:center;padding:12px 8px;margin:10px 0;
  background:var(--kertas);border:1.5px dashed var(--garis);border-radius:var(--r,12px);overflow-wrap:anywhere;user-select:all}
.petiBahaya,.drBahaya,.kdBahaya{color:var(--merah);margin-top:8px}
.petiLupa{margin-top:8px}
.petiLupaNota{margin:8px 0 0}
.petiTerang summary,.petiTetapan summary{cursor:pointer;min-height:44px;display:flex;align-items:center;list-style:none}
/* Ringkasan <details> berpapar flex kehilangan penanda asal — anak panah sendiri (berpusing bila dibuka). */
.petiTerang>summary::-webkit-details-marker,.petiTetapan>summary::-webkit-details-marker,.kdBilik>summary::-webkit-details-marker,.pjHad>summary::-webkit-details-marker{display:none}
.petiTerang>summary::after,.petiTetapan>summary::after,.kdBilik>summary::after,.pjHad>summary::after{content:"▾";margin-left:auto;padding-left:8px;color:var(--pudar);transition:transform var(--gerak) ease}
.petiTerang[open]>summary::after,.petiTetapan[open]>summary::after,.kdBilik[open]>summary::after,.pjHad[open]>summary::after{transform:rotate(180deg)}
@media(prefers-reduced-motion:reduce){.petiTerang>summary::after,.petiTetapan>summary::after,.kdBilik>summary::after,.pjHad>summary::after{transition:none}}
.petiSenaraiNota{margin:6px 0 0 18px;padding:0;display:flex;flex-direction:column;gap:6px}
.petiTetapan .btn{margin-top:8px}
/* Elaun & duit raya */
.drBersih{font-variant-numeric:tabular-nums;white-space:nowrap}
.drBersih.kurang{color:var(--merah)}
.drAnakAtas{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:8px;overflow-wrap:break-word}
.drAtas{align-items:flex-end;gap:8px}
.drAtas>.btn{flex:1 1 180px}
.drPerayaanKad{padding:6px 0;border-bottom:1px solid var(--garis)}
.drPerayaanKad:last-child{border-bottom:none}
.drPerayaanKad .baris>.t,.drEntri>.t{display:flex;flex-direction:column;gap:2px;min-width:0;overflow-wrap:break-word}
.drOrang{padding-left:12px;border-bottom:none}
.drEntri{gap:8px}
.drBuang{flex:none;min-width:44px;min-height:44px;font-size:20px;color:var(--pudar);background:none;border:none;cursor:pointer}
.drBuang:focus-visible,.kdGambarBuang:focus-visible{outline:none;box-shadow:var(--fokus)}
/* Laporan keadaan */
.kdKembali{margin:4px 0 10px}
.kdBaris{width:100%;text-align:left;gap:10px;align-items:flex-start;background:none;border-left:none;border-right:none;border-top:none;cursor:pointer;min-height:44px}
.kdBaris>.t{flex:1 1 auto;display:flex;flex-direction:column;gap:2px;min-width:0;overflow-wrap:break-word}
.kdStatus{flex:none}
.kdStatus.sah{background:var(--hijau-lembut);color:var(--dakwat)}
.kdBilik summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;list-style:none}
.kdItem{padding:10px 0;border-bottom:1px solid var(--garis)}
.kdItem:last-of-type{border-bottom:none}
.kdItemAtas{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.kdItemNama{flex:1 1 140px;min-width:0;overflow-wrap:break-word}
.kdItemAtas select{flex:0 1 200px;min-height:44px}
.kdNota{width:100%;margin-top:6px;min-height:44px}
.kdGambar{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;align-items:center}
.kdGambarKotak{position:relative;width:88px;height:66px;border-radius:8px;overflow:hidden;background:var(--kertas3)}
.kdGambarKotak img{width:100%;height:100%;object-fit:cover;display:block}
.kdGambarBuang{position:absolute;top:0;right:0;min-width:44px;min-height:44px;background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:flex-start;justify-content:flex-end}
.kdGambarBuang::before{content:"×";display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin:3px;border-radius:999px;background:var(--dakwat);color:var(--kertas2);font-size:17px;line-height:1}
.kdTambahGambar{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.kdTambahItem,.kdTambahBilik{gap:8px;margin-top:8px;align-items:center}
.kdTambahItem input,.kdTambahBilik input{flex:1 1 160px;min-height:44px}
.kdTtd{padding:8px 0;border-bottom:1px solid var(--garis)}
.kdTtd:last-of-type{border-bottom:none}
.kdTtd .row{gap:8px;margin-top:6px;align-items:center}
.kdTtd input{flex:1 1 160px;min-height:44px}
.kdSah{color:var(--hijau)}
/* GPS dalam borang perbatuan */
.pjKm{font-size:clamp(28px,8vw,40px);font-weight:700;margin:6px 0 2px;font-variant-numeric:tabular-nums}
.pjRalat{color:var(--merah)}
.pjHad summary{cursor:pointer;min-height:44px;display:flex;align-items:center;list-style:none}
:where(.pjHad) ul{margin:4px 0 8px 18px;padding:0;display:flex;flex-direction:column;gap:4px}
/* Peraturan kategori & pratetap pindah */
.aturanNota{margin:-4px 0 10px}
.pindahPratetap{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;padding:8px 10px;border-radius:var(--r,12px);background:var(--cop-lembut);margin:4px 0 8px}
.pindahPratetap a{color:var(--cop);font-weight:600;min-height:44px;display:inline-flex;align-items:center}
.pindahPratetap .pill{min-height:44px}
.niaKeadaan{margin-top:6px;align-self:flex-start}


/* ── p142:pembantu2 ── */
/* Skrin persetujuan Sambung AI: identiti CIMD yang disemak (hos dokumen) — garis kiri warna jenama, teks tidak terpotong. */
.saiCimd{border-left:3px solid var(--cop);padding:6px 10px;border-radius:6px;background:var(--cop-lembut);color:var(--dakwat);overflow-wrap:break-word}
.saiCimd>span{color:var(--cop);font-weight:700;margin-right:4px}
/* Tarikh gaji: label jujur cuti negeri berbilang negeri (belum dikira) — warna amaran lembut, sebaris dengan nota lain (kelas sendiri, bukan jg*). */
.cimdCutiBelum{border-left:3px solid var(--amber);padding:6px 10px;border-radius:6px;background:var(--amber-lembut);color:var(--dakwat);overflow-wrap:break-word}

/* ── p141:tangkap ── */
/* Butang tag dalam dialog (tong sampah Pulih/Buang, Alat resit) — sasaran sentuh ≥ 44px (dahulu gaya sebaris 36px). */
button.tag.tagBtn,.baris>button.tag.tagBtn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:8px 14px;font-size:13.5px;border-color:var(--cop);color:var(--cop)}
button.tag.tagBtn.bahaya{border-color:var(--merah);color:var(--merah)}
/* Kod pengesahan pemajuan Gmail dalam kad peti Utama & Perlu semak (tangkap.css belum tentu dimuat di Utama). */
.petiPemajuan{display:flex;flex-direction:column;gap:2px;padding:8px 0;border-top:1px solid var(--garis);min-width:0}
.petiPemajuan>b{overflow-wrap:break-word}
.petiPemajuanBaris{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px}
.petiPemajuanBaris .btn.kecil{min-height:44px}
.petiPemajuanBaris .pill{min-height:44px;min-width:44px}
.tkKod{font-family:var(--mono,ui-monospace,monospace);font-size:15px;font-weight:700;letter-spacing:.06em;padding:4px 8px;border-radius:8px;background:var(--kertas3);color:var(--dakwat);white-space:nowrap}

/* ── p141:cukai ── */
/* Nota kadar cukai syarikat (langkah Bajet diumumkan / kadar TT lalu dibawa) — jarak sebelum tag kelayakan PKS. */
#sy_hasilKad .syarikatKadarNota{margin:0 0 10px}

/* ── p141:pembantu ── */
/* Sambung AI kepada rekod saya (public/sambung-ai.js): skrin persetujuan OAuth & Sambungan AI. Gaya pada kelas komponen sendiri
   (PELAJARAN p141: tiada tetapan semula elemen berkekhususan kelas — :where() untuk elemen anak). Sasaran sentuh ≥ 44px. */
.saiLembar .wrap{max-width:720px}
/* Butang kepala lembar (Kembali, ?) ≥ 44px dalam lembar ini (sasaran sentuh). */
.saiLembar .lembarhd .pill,.saiLembar .lembarhd .bantuan{min-height:44px;min-width:44px}
.saiMinta{font-size:var(--fs-subtajuk);line-height:1.5;margin:4px 0 12px;overflow-wrap:break-word;color:var(--dakwat)}
.saiKlien{display:grid;gap:8px}
:where(.saiKlien) p{margin:0}
.saiHos{font-family:var(--sans);font-size:clamp(18px,5vw,22px);font-weight:700;color:var(--dakwat);overflow-wrap:break-word;line-height:1.3}
.saiUri,.saiAlamat code{display:block;font-family:var(--mono);font-size:13px;line-height:1.5;padding:8px 10px;border-radius:var(--r);background:var(--kertas2);border:1px solid var(--garis);color:var(--dakwat);overflow-wrap:anywhere;word-break:break-all;min-width:0}
.saiAmaran{border-left:3px solid var(--amber);padding:6px 10px;background:var(--amber-lembut);border-radius:6px;color:var(--dakwat)}
.saiSkop{display:flex;align-items:flex-start;gap:10px;min-height:44px;padding:8px 0;cursor:pointer;line-height:1.45;font-size:15px;color:var(--dakwat)}
.saiTempoh{margin-top:10px}
.saiSkop input{width:22px;height:22px;flex:0 0 22px;margin:2px 0 0;accent-color:var(--cop)}
.saiSkop input:disabled{cursor:default}
.saiWajib{display:inline-flex;align-items:center;min-height:24px;padding:2px 8px;font-size:12px;margin-left:4px;vertical-align:middle}
.saiLalai{margin:4px 0 10px;text-align:center}
.saiPilih{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 18px}
.saiPilih .btn{width:100%;min-height:48px}
.saiAlamat{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap;margin-top:6px}
.saiAlamat code{flex:1 1 220px}
.saiAlamat .btn{min-height:44px;flex:0 0 auto}
.saiLangkah,.saiSenarai{margin:6px 0 10px;padding-left:20px;line-height:1.55;color:var(--dakwat);font-size:15px}
:where(.saiLangkah,.saiSenarai) li{margin:4px 0}
.saiSambungan{display:grid;gap:6px}
:where(.saiSambungan) p{margin:0}
.saiBaris{display:flex;align-items:center;gap:10px;justify-content:space-between;min-width:0}
.saiBaris .t{display:flex;flex-direction:column;gap:2px;min-width:0;overflow-wrap:break-word}
.saiBatal{min-height:44px;flex:0 0 auto}
.saiHosKecil{font-family:var(--mono);font-size:12px;overflow-wrap:break-word}
.saiCipBaris{display:flex;gap:6px;flex-wrap:wrap}
.saiCip{min-height:28px;padding:3px 10px;font-size:12px;cursor:default}
.saiDibatal{margin:6px 2px 4px;display:grid;gap:4px}
.saiBatalBaris{font-size:var(--fs-nota);color:var(--pudar);overflow-wrap:break-word}
.saiLogSenarai{list-style:none;margin:0;padding:0;display:grid;gap:0}
.saiLog{display:grid;grid-template-columns:minmax(84px,auto) 1fr;gap:2px 10px;padding:8px 0;border-bottom:1px solid var(--garis);font-size:14px;align-items:baseline}
.saiLog:last-child{border-bottom:none}
.saiLog .note{grid-column:2;overflow-wrap:break-word}
.saiLogMasa{color:var(--pudar);font-size:13px;white-space:nowrap}
.saiLogAlat{font-weight:600;color:var(--dakwat);overflow-wrap:break-word}
@media(max-width:340px){.saiPilih{grid-template-columns:1fr}}

/* ── p141:wang ── */
/* Akaun asing (kadar BNM), carta nilai bersih lejar, templat matlamat, peringatan hutang & QR DuitNow, lapisan transaksi kalendar, minggu ini, sampul. */
.akKadar{font-variant-numeric:tabular-nums}
.rwNbTempoh{margin:6px 0 4px}
.rwNbUbah{margin:2px 0 6px;font-weight:600;color:var(--dakwat)}
.rwCartaTitik{fill:var(--cop)}
.rwTemplat .rwCip{margin-bottom:0}
.rwTemplatCip .cip{min-height:44px}
.rwTemplatAsas{margin:4px 0 8px;padding:8px 10px;border-radius:var(--r);background:var(--emas-lembut);color:var(--dakwat)}
.rwSinking{margin:2px 0 8px;font-variant-numeric:tabular-nums}
.rwSinking:empty{display:none}
.rwPelepasan{margin-top:6px}
.rwPelepasan .pautanKad,.rwMatlamat .pautanKad,.rwHutangAlat .pautanKad{min-height:44px}
.rwHutangAlat .rwTogol{cursor:pointer;align-items:flex-start;gap:10px}
.rwHutangAlat .rwTogol input{width:22px;height:22px;flex:none;margin-top:2px}
.rwQrBaris{border-bottom:none;padding-bottom:0}
.rwQrLapis{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(10,10,20,.62)}
.rwQrKad{width:100%;max-width:420px;max-height:calc(100vh - 32px);overflow:auto;text-align:center;margin:0}
/* QR SENTIASA hitam atas putih (zon senyap untuk pengimbas, termasuk tema gelap) — peraturan SAMA dengan panel QR e-Invois di kaunter (p138). */
.rwQrImej{display:block;width:100%;max-width:340px;height:auto;margin:10px auto;border-radius:var(--r);background:white;padding:8px;box-sizing:border-box}
.rwKadar{margin-top:8px}
.rwOrang .rwMtKepala{flex-wrap:wrap}
.rwOrang .rwMtTeks{flex:1 1 140px}
.rwOrangAksi{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;margin-left:auto;min-width:0}
.kalLapisan{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 2px}
.kalLapisan .pill{min-height:44px;display:inline-flex;align-items:center}
.kalJum{font-size:10.5px;line-height:1;color:var(--pudar);font-variant-numeric:tabular-nums;max-width:100%;overflow:hidden;text-overflow:clip;white-space:nowrap}
.kalJum.masuk{color:var(--hijau)}
.kalJum.pindah{color:var(--pudar)}
.kalHari.pilih .kalJum{color:var(--atas-cop)}
.kalTitik i.cuti{background:var(--emas)}
.kalTxRingkas{margin:0 0 10px;font-variant-numeric:tabular-nums}
.kalTxTajuk{margin-top:12px}
.kalTxSenarai{display:flex;flex-direction:column}
.kalTx{width:100%;text-align:left;background:none;border-left:0;border-right:0;border-top:0;cursor:pointer;gap:10px;min-height:48px}
.kalTxIkon{flex:none;width:24px;text-align:center}
.kalTx-masuk .v{color:var(--hijau)}
.kalTx-pindah .v{color:var(--pudar)}
.kal-cuti b{color:var(--dakwat)}
.mgAtas{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:6px 0 8px}
.mgJumlah{font-size:var(--fs-tajuk);line-height:1.15}
.mgCarta{display:flex;align-items:flex-end;gap:3px;height:48px;flex:0 1 160px;min-width:96px}
.mgBar{flex:1 1 0;min-width:4px;border-radius:3px 3px 0 0;background:var(--garis)}
.mgBar.kini{background:var(--cop)}
.mgBanding{margin:0 0 6px}
.mgBanding.lebih{color:var(--dakwat)}
.mgKatBaris{width:100%;text-align:left;background:none;border-left:0;border-right:0;border-top:0;cursor:pointer;min-height:44px}
.wangSampul{cursor:pointer;align-items:flex-start;gap:10px;border-bottom:none}
.wangSampul input{width:22px;height:22px;flex:none;margin-top:2px}
@media(max-width:379px){.mgAtas{flex-direction:column;align-items:stretch}.mgCarta{flex-basis:auto;height:40px}.kalJum{font-size:9.5px}}
/* Sel hari ≥ 44px lebar pada telefon ≥ 360px: grid 7 lajur memakai ruang pelapik kad (4px tinggal dari bingkai) & jarak 2px.
   PENGECUALIAN 320–359px (pusingan 141, reka — disemak): 7 × 44 + 6 × 2 = 320 = SELURUH lebar skrin; sel 38.6 × 45.5px (≥ 24px WCAG 2.5.8
   AA, tinggi ≥ 44, dipisahkan 2px). Grid tepi-ke-tepi (−30px) dicuba & DITOLAK: sel melimpah keluar bingkai kad dan sel hujung jatuh dalam
   zon leret-tepi sistem (kembali iOS/Android) — lebih sukar diketuk, bukan lebih mudah. Dikawal semak-reka (aliran Wang p141). */
@media(max-width:480px){#kadKalendar .kalGrid{gap:2px;margin-inline:-12px}}

/* ── p141:gaji ── */
/* Tarikh gaji: hari rehat negeri & cuti umum, bayaran sekali (timpaan), senarai cuti dikira. Kelas komponen sendiri (tiada tetapan semula
   elemen berkekhususan kelas — pelajaran p141); token palet sahaja; sasaran sentuh ≥ 44px; tiada skrol mendatar pada 320px. */
.tgcKotak{min-width:0;margin:4px 0 0;padding:12px 0 0;border:0;border-top:1px dashed var(--garis)}
:where(.tgcKotak)>legend{display:block;width:100%;margin:0 0 6px;padding:0}
.tgcKotak .fld{display:flex;flex-direction:column;gap:5px;margin:0 0 8px}
.tgcKotak select{width:100%;min-height:48px;padding:10px 12px;font-size:16px}
.tgcKotak .note{margin:6px 0 0}
.tgcTanda{display:flex;align-items:center;gap:10px;min-height:44px;margin:0;padding:8px 12px;border:1.5px solid var(--garis);border-radius:var(--r);background:var(--kertas2);cursor:pointer;line-height:1.35}
.tgcTanda input{flex:none;width:20px;height:20px;margin:0}
.tgcTanda:focus-within{box-shadow:var(--fokus)}
.tgcTimpaan{margin:4px 0 0;padding:10px 0 0;border-top:1px dashed var(--garis)}
.tgcTimpaan>summary{display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;font-weight:650;line-height:1.35}
.tgcTimpaan>.note{margin:4px 0 8px}
.tgcTimpaanSenarai{display:flex;flex-direction:column;gap:6px;margin:0 0 10px;padding:0;list-style:none}
.tgcTimpaanSenarai li{display:flex;align-items:center;gap:10px;min-height:44px;padding:4px 4px 4px 12px;border:1px solid var(--garis);border-radius:var(--r);background:var(--kertas2)}
.tgcTimpaanSenarai li>span{flex:1;min-width:0;font-size:14px;line-height:1.4;overflow-wrap:break-word}
.tgcTimpaanSenarai .pill{flex:none;min-width:44px;min-height:40px;justify-content:center}
.tgcTimpaanBaru{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));align-items:start;gap:10px;margin:0 0 10px}
.tgcTimpaanBaru .fld{display:flex;flex-direction:column;gap:5px;margin:0;min-width:0}
.tgcTimpaanBaru select,.tgcTimpaanBaru input{width:100%;min-height:48px;padding:10px 12px;font-size:16px}
.tgcRingkas{margin:0}
.tgcSenarai{margin:2px 0 0}
.tgcSenarai>summary{display:flex;align-items:center;min-height:44px;cursor:pointer;font-size:14px;font-weight:650}
.tgcSenarai ul{margin:4px 0 8px;padding:0 0 0 18px;font-size:13.5px;line-height:1.6;color:var(--pudar)}
.tgcSenarai time{color:var(--dakwat);font-weight:600}
.jgLencana.timpaan{background:var(--emas-lembut);color:var(--emas-gelap)}
/* Kalendar wang: titik & baris acara bantuan kerajaan (fasa STR, luput SARA). */
.kalTitik i.bantuan{background:var(--emas)}
.kal-bantuan .t b{color:var(--emas-gelap)}
/* Gaji saya: kad eksport penyata gaji. */
.gjEksportKad .note{margin:4px 0 10px}
.gjEksportKad .eksportPasangan{display:flex;width:100%}
/* Bantuan saya (STR & SARA) — lembar #lembarBantuanSaya. */
.bsyHab{padding:8px 0 24px}
.bsyKepala{margin:6px 0 10px}
.bsyTajuk{font-size:22px;line-height:1.25;font-weight:700;letter-spacing:-.01em;margin:0 0 4px}
.bsyKepala .note{margin:0}
.bsyPrivasi{display:flex;gap:8px;align-items:flex-start;margin:18px 2px 0;padding:12px 14px;border-radius:var(--r);background:var(--kertas3)}
.bsyAnggaran{margin-left:6px;vertical-align:middle;background:var(--amber-lembut);color:var(--amber)}
.bsyHero .heroPautan{margin-top:8px}
.bsyHero .note+.note{margin-top:4px}
.bsyMula .btn{margin-top:10px}
.bsyMula .note{margin:4px 0 0}
.bsyBesar{margin:6px 0 2px;font-size:22px;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.bsyFasaKad .note,.bsySaraKad .note{margin:0}
.bsyDepan .note{margin:4px 0 0}
.bsyRasmi .note{margin:4px 0 10px}
.bsyPautanSenarai{display:flex;flex-direction:column;gap:6px}
.bsyPautan{display:inline-flex;align-items:center;min-height:44px;padding:6px 0;color:var(--cop);font-weight:600;line-height:1.35;overflow-wrap:break-word}
.bsyPautanBaris{margin:2px 0 0}
.bsySenaraiFasa li .bsyPautanBaris{flex:1 1 100%}
.bsyGarisMasa .t .bsyPautan{align-self:flex-start;min-height:44px}
.bsySaraBarang{margin:14px 2px 0}
.bsyPautanSenarai .bsyPautan{padding:8px 12px;border:1px solid var(--garis);border-radius:var(--r);background:var(--kertas2)}
.bsyCip{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.bsyCip .cip{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:72px;padding:6px 16px;border-radius:999px;border:1.5px solid var(--garis);background:var(--kertas2);color:var(--dakwat);font-weight:650;font-size:14px;cursor:pointer}
.bsyCip .cip.pilih{background:var(--cop);border-color:var(--cop);color:var(--atas-cop)}
.bsyCip .cip:focus-visible{outline:none;box-shadow:var(--fokus)}
.bsyBorang .lbl{margin-bottom:4px}
.bsyBorang .fld{display:flex;flex-direction:column;gap:5px;margin:8px 0 0;min-width:0}
.bsyBorang input[type=number]{width:100%;min-height:48px;padding:10px 12px;font-size:16px}
.bsyBorang .note{margin:6px 0 0}
.bsyPilih{min-width:0;margin:6px 0 0;padding:0;border:0}
:where(.bsyPilih)>legend{display:block;margin:0 0 6px;padding:0}
.bsyRadio,.bsyTanda{display:flex;align-items:center;gap:10px;min-height:44px;margin:6px 0 0;padding:8px 12px;border:1.5px solid var(--garis);border-radius:var(--r);background:var(--kertas2);cursor:pointer;line-height:1.35}
.bsyRadio input,.bsyTanda input{flex:none;width:20px;height:20px;margin:0}
.bsyRadio:focus-within,.bsyTanda:focus-within{box-shadow:var(--fokus)}
.bsyDua{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.bsyAksi{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.bsyAksi .btn{flex:1 1 150px;min-height:44px}
.bsyHasil p{margin:6px 0 0}
.bsyHasil .baris .t .note{display:block;margin-top:1px}
.bsySenaraiFasa{display:flex;flex-direction:column;gap:8px;margin:8px 0 0;padding:0;list-style:none}
.bsySenaraiFasa li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:10px 12px;border:1px solid var(--garis);border-radius:var(--r);background:var(--kertas2)}
.bsySenaraiFasa li.lalu{opacity:.8}
.bsySenaraiFasa .t{flex:1 1 180px;min-width:0;display:flex;flex-direction:column;gap:1px}
.bsySenaraiFasa .note{margin:0}
.bsySenaraiFasa .bsyPautan{min-height:44px;font-size:13.5px}
.bsyFasa>.note{margin:10px 0 0}
.bsySaraHero .note+.note{margin-top:4px}
.bsyTetapan .fld{display:flex;flex-direction:column;gap:5px;margin:8px 0 0;min-width:0}
.bsyTetapan input,.bsyTetapan select{width:100%;min-height:48px;padding:10px 12px;font-size:16px}
.bsyTetapan .note{margin:6px 0 0}
.bsyBakiSebenar{margin:10px 0 0;padding:8px 0 0;border-top:1px dashed var(--garis)}
.bsyBakiSebenar>summary{display:flex;align-items:center;min-height:44px;cursor:pointer;font-weight:650}
.bsySenarai{display:flex;flex-direction:column;margin:6px 0 0;padding:0;list-style:none}
.bsySenarai li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-height:52px;padding:8px 0;border-bottom:1px solid var(--garis)}
.bsySenarai li:last-child{border-bottom:0}
.bsySenarai .t{flex:1 1 160px;min-width:0;display:flex;flex-direction:column;gap:1px;overflow-wrap:break-word}
.bsySenarai .note{margin:0}
.bsySenarai .v{font-weight:700;white-space:nowrap}
.bsySenarai .pill{min-height:40px;min-width:44px;justify-content:center}
.bsyAmaun{display:flex;align-items:center;gap:8px;margin:0}
.bsyAmaun .lbl{margin:0;flex:0 1 auto;min-width:0}
.bsyAmaun input{flex:1 1 90px;min-width:0;max-width:140px;min-height:44px;padding:8px 10px;font-size:16px}
.bsyGuna li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 10px}
.bsyGuna li .t{grid-column:1/-1}
.bsyGuna li .bsyAmaun{grid-column:1;min-width:0}
.bsyGuna li .pill{grid-column:2}
.bsyKredit>summary{display:flex;align-items:center;min-height:44px;cursor:pointer;font-size:14px;font-weight:650}
.bsyLejar>.note,.bsyCalon>.note{margin:4px 0 0}
.bsyCalon .fld{display:flex;flex-direction:column;gap:5px;margin:10px 0 0}
.bsyCalon input[type=search]{width:100%;min-height:48px;padding:10px 12px;font-size:16px}
.bsyGarisMasa{display:flex;flex-direction:column;gap:8px;margin:8px 0 0;padding:0;list-style:none}
.bsyGarisMasa li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:10px 12px;border:1px solid var(--garis);border-radius:var(--r);background:var(--kertas2);box-shadow:inset 3px 0 0 var(--emas)}
.bsyGarisMasa li.lalu{box-shadow:inset 3px 0 0 var(--garis);opacity:.85}
.bsyTarikh{flex:none;min-width:96px;font-weight:700;font-size:14px}
.bsyGarisMasa .t{flex:1 1 180px;min-width:0;display:flex;flex-direction:column;gap:1px}
.bsyGarisMasa .note{margin:0}
.bsyJadual>.note{margin:10px 0 0}
.bsyJadual>.btn{margin-top:10px}
/* Gaji pekerja (majikan mikro) — public/gaji-pekerja.js */
.gpkHab{padding:8px 0 24px}
.gpkKepala{margin:6px 0 10px}
.gpkTajuk{font-size:22px;line-height:1.25;font-weight:700;letter-spacing:-.01em;margin:0 0 4px}
.gpkKepala .note{margin:0}
.gpkPrivasi{display:flex;gap:8px;align-items:flex-start;margin:18px 2px 0;padding:12px 14px;border-radius:var(--r);background:var(--kertas3)}
.gpkIsi>.btn{margin-top:10px}
.gpkIsi .fld{display:flex;flex-direction:column;gap:5px;margin:8px 0 0;min-width:0}
.gpkIsi .fld input,.gpkIsi .fld select{width:100%;min-height:48px;padding:10px 12px;font-size:16px}
.gpkIsi .fld .note{margin:2px 0 0}
.gpkBaris{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.gpkBaris>div{min-width:0;display:flex;flex-direction:column;gap:1px;overflow-wrap:break-word}
.gpkBaris .pill{flex:none;min-height:44px}
.gpkPekerja .note,.gpkEA .gpkBaris .note{margin:2px 0 0}
.gpkMajikan .btn,.gpkKosong .btn{margin-top:10px}
.gpkMajikan .note,.gpkKosong .note{margin:6px 0 0}
.gpkBorang>.lbl{margin-bottom:4px}
.gpkBorang>.note{margin:6px 0 0}
.gpkDua{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:0 10px;align-items:start}
.gpkKotak{min-width:0;margin:12px 0 0;padding:4px 12px 12px;border:1.5px solid var(--garis);border-radius:var(--r)}
.gpkKotak>legend{padding:0 6px;font-weight:650}
.gpkTanda{display:flex;align-items:flex-start;gap:10px;min-height:44px;margin:10px 0 0;padding:10px 12px;border:1.5px solid var(--garis);border-radius:var(--r);background:var(--kertas2);cursor:pointer;line-height:1.35}
.gpkTanda input{flex:none;width:20px;height:20px;margin:1px 0 0}
.gpkTanda .note{display:block;margin:2px 0 0}
.gpkTanda:focus-within{box-shadow:var(--fokus)}
.gpkAksi{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.gpkAksi .btn{flex:1 1 140px;min-height:44px}
.gpkAsas>summary,.gpkSlip>summary{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;min-height:44px;cursor:pointer;font-weight:650}
.gpkAsas>summary,.gpkSlip>summary{list-style:none;position:relative;padding-right:30px}
.gpkAsas>summary::-webkit-details-marker,.gpkSlip>summary::-webkit-details-marker{display:none}
.gpkAsas>summary::after,.gpkSlip>summary::after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;margin-top:-7px;border-right:2px solid var(--pudar);border-bottom:2px solid var(--pudar);transform:rotate(45deg);transition:transform .15s ease}
.gpkAsas[open]>summary::after,.gpkSlip[open]>summary::after{transform:rotate(225deg);margin-top:-2px}
@media (prefers-reduced-motion:reduce){.gpkAsas>summary::after,.gpkSlip>summary::after{transition:none}}
.gpkPrivasi>span:last-child,.bsyPrivasi>span:last-child{flex:1 1 auto;min-width:0}
.gpkAsasSenarai{margin:8px 0 6px;padding-left:20px}
.gpkAsasSenarai li{margin:4px 0;line-height:1.45}
.gpkNama{min-width:0;display:flex;flex-direction:column;gap:1px;overflow-wrap:break-word}
.gpkNama .note{margin:0;font-weight:400}
.gpkBersih{font-weight:400;font-size:14px}
.gpkBersih b{font-variant-numeric:tabular-nums}
.gpkMasuk{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0 10px;align-items:end;margin:4px 0 8px}
.gpkKira{margin:6px 0 8px}
.gpkKira .baris .v,.gpkJumlah .baris .v,.gpkEA .baris .v{font-variant-numeric:tabular-nums;white-space:nowrap}
.gpkSubLbl{margin:12px 0 2px}
.gpkSlip>.btn{margin-top:6px;min-height:44px}
.gpkSlip>.note{margin:6px 0 0}
.gpkJumlah>.note{margin:8px 0 0}
.gpkSimpanKad>.btn{min-height:48px}
.gpkStatus{margin:0 0 10px}
.gpkStatus.ok{color:var(--hijau)}
.gpkButang{margin-top:10px;gap:8px}
.gpkButang>.btn{min-height:44px}
.gpkEksport{display:flex;gap:8px}
.gpkEksport .btn{flex:1 1 0;min-height:44px}
.gpkSimpanKad>.note{margin:8px 0 0}
.gpkSumber{margin:12px 2px 0}
.gpkPautan{display:inline-flex;align-items:center;min-height:44px;padding:6px 0;color:var(--cop);font-weight:600;line-height:1.35;overflow-wrap:break-word}
.gpkPautanBaris{margin:0 2px}
.gpkCip{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.gpkCip .cip{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:72px;padding:6px 16px;border-radius:999px;border:1.5px solid var(--garis);background:var(--kertas2);color:var(--dakwat);font-weight:650;font-size:14px;cursor:pointer}
.gpkCip .cip.pilih{background:var(--cop);border-color:var(--cop);color:var(--atas-cop)}
.gpkCip .cip:focus-visible{outline:none;box-shadow:var(--fokus)}
.gpkEA .tag{flex:none}

/* ── p141:kenderaan ── */
/* Kenderaan & BUDI95 (public/kenderaan.js): lembar #lembarKenderaan, meter BUDI95, log isian, borang kenderaan, kad Utama. Token K0 sahaja;
   sasaran sentuh ≥ 44px; 320px tanpa skrol mendatar; tetapan elemen melalui :where() — kelas komponen sentiasa menang (pelajaran p141). */
.kendLembar .wrap{max-width:720px}
.kendLembar .lembarhd.kepala .kembaliBtn{min-height:44px}
.kendLembar .lembarhd.kepala .bantuan{width:44px;height:44px}
.kendHab .pill{min-height:44px}
.kendHab{padding:8px 0 28px}
.kendKepala{margin:6px 0 10px}
.kendTajuk{font-size:var(--fs-tajuk,20px);line-height:1.25;font-weight:700;letter-spacing:-.01em;margin:0 0 4px;display:flex;align-items:center;gap:8px}
:where(.kendKepala) .note{margin:0}
.kendIsi>.card{margin-bottom:12px}
.kendPrivasi{display:flex;gap:10px;align-items:flex-start;margin:18px 2px 8px;padding:12px 14px;border-radius:var(--r,12px);background:var(--kertas3)}
.kendPrivasiIkon{flex:none;line-height:1.5}
:where(.kendPrivasi) .note{margin:0;flex:1;min-width:0}
.kendMemuat{display:flex;justify-content:center;padding:34px 0}
.kendKosong{text-align:center;padding:24px 16px}
:where(.kendKosong) h3{margin:8px 0 4px;font-size:18px;font-weight:700}
.kendKosong>.note{margin:0 auto 14px;max-width:46ch}
.kendIkonBesar{font-size:40px;line-height:1}
.kendDuaBtn{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 12px}
.kendDuaBtn .btn{flex:1 1 180px}
.kendAksiBaris{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.kendAksiBaris .pill{min-height:44px;display:inline-flex;align-items:center;text-decoration:none}
/* Meter BUDI95 */
.kendMeter{border-color:var(--garis);border-color:color-mix(in srgb,var(--cop) 30%,var(--garis))}
.kendMeter.amaran{background:var(--amber-lembut);border-color:color-mix(in srgb,var(--amber) 45%,var(--garis))}
.kendMeter.habis{background:var(--merah-lembut);border-color:color-mix(in srgb,var(--merah) 45%,var(--garis))}
.kendMeterKepala{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.kendMeterAngka{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin:6px 0 2px;font-variant-numeric:tabular-nums}
.kendMeterNilai{font-size:var(--fs-besar,32px);line-height:1.1}
.kendMeterHad{color:var(--pudar);font-weight:600}
.kendBar{height:10px;background:var(--kertas3);border-radius:99px;overflow:hidden;margin:8px 0}
.kendBar>.kendBarIsi{display:block;height:100%;background:var(--hijau);border-radius:99px}
.kendBar.amaran>.kendBarIsi{background:var(--amber)}
.kendBar.habis>.kendBarIsi{background:var(--merah)}
.kendAmaran{margin:8px 0 4px;font-weight:600;font-size:14px;line-height:1.5}
.kendAmaran.amaran{color:var(--amber)}
.kendAmaran.habis{color:var(--merah)}
.kendJujur{margin-top:8px}
/* Baris boleh ketik (tarikh penting, log isian) */
.kendBarisBtn{display:flex;width:100%;text-align:left;cursor:pointer;background:none;font:inherit;color:inherit;align-items:center;gap:10px;min-height:52px;border:0;border-bottom:1px solid var(--garis);padding:10px 0;flex-wrap:nowrap}
.kendBarisBtn .t{flex:1;min-width:0;display:flex;flex-direction:column}
.kendBarisBtn .note{margin:2px 0 0;overflow-wrap:break-word}
.kendBarisBtn:focus-visible{outline:none;box-shadow:var(--fokus);border-radius:8px}
.kendIkonKecil,.kendTarikh{flex:none;width:40px;height:40px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:var(--kertas3);font-size:16px;font-variant-numeric:tabular-nums}
.kendStatus{flex:none}
.kendStatus.tamat{color:var(--merah);background:var(--merah-lembut)}
.kendStatus.hampir{color:var(--amber);background:var(--amber-lembut)}
.kendSub.budi{color:var(--hijau);background:var(--hijau-lembut)}
.kendSub.tiada{color:var(--amber);background:var(--amber-lembut)}
/* Kad kenderaan */
.kendKadKepala{display:flex;align-items:center;gap:12px}
.kendKadKepala .t{flex:1;min-width:0;display:flex;flex-direction:column}
.kendKadNama{font-size:16px;line-height:1.3;overflow-wrap:break-word}
.kendIkonBulat{flex:none;width:44px;height:44px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font-size:22px;background:var(--cop-lembut)}
.kendKadBaris{margin:6px 0 0}
/* Log isian */
.kendNav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 6px}
.kendNavLabel{flex:1;text-align:center;min-width:0}
.kendNav .pill{min-width:44px;min-height:44px;font-size:18px;line-height:1}
.kendNav .pill:disabled{opacity:.4;cursor:default}
.kendTiada{margin:10px 0}
.kendIsian .kendBarisBtn .v{font-weight:650;white-space:nowrap}
.kendUbah{padding:6px 0 12px;border-bottom:1px solid var(--garis)}
/* Borang */
:where(.kendBorang) h3{margin:0 0 8px;font-size:17px;font-weight:700}
.kendBorang .row{align-items:flex-end}   /* label 1 atau 2 baris — medan input sebaris tetap sejajar di bawah */
.kendSet{border:0;padding:0;margin:10px 0 0;min-width:0}
.kendLegenda{padding:0;margin:0 0 4px}
.kendTanda{cursor:pointer;border-bottom:none}
.kendKotak{width:22px;height:22px;flex:none}
.kendPadam{margin-top:6px;min-height:44px}
.kendLesen{align-items:flex-end}
.kendLesen .btn{flex:0 0 auto;min-width:110px;min-height:48px}
.kendSejarah{margin-top:8px}
.kendSejarahTajuk{cursor:pointer;min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:14.5px;font-weight:600;list-style:none}
.kendSejarahTajuk::-webkit-details-marker{display:none}
.kendSejarahTajuk::after{content:"▾";color:var(--pudar);font-size:14px;transition:transform .15s}
.kendSejarah[open]>.kendSejarahTajuk::after{transform:rotate(180deg)}
/* Pautan sumber rasmi sebaris: kawasan sentuh dibesarkan ke ≥ 44px tanpa mengubah tinggi baris (padding + margin negatif). */
.kendSumber{display:inline-block;padding:15px 2px;margin:-15px 0;white-space:nowrap}
.kendAjak .btn{margin-top:8px}
/* Harga tanpa subsidi: tajuk & sumber selebar kad, kemudian senarai gred → harga (2 lajur) — lajur kiri tidak lagi tersepit. */
.kendHargaBlok{padding:10px 0 4px;border-top:1px solid var(--garis)}
.kendHargaTajuk{display:block;font-size:14.5px;font-weight:600}
:where(.kendHargaBlok) .note{margin:2px 0 8px}
.kendHargaSenarai{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:baseline}
.kendHargaV{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
:where(.kendFakta) .note+.note{margin-top:8px}
/* Kad Utama */
.kendKadUtama{display:flex;width:100%;text-align:left;cursor:pointer;font:inherit;color:inherit;align-items:center;gap:10px}
.kendKadUtama .t{flex:1;min-width:0}
.kendKadUtama.amaran{border-color:color-mix(in srgb,var(--amber) 45%,var(--garis))}
.kendKadUtama.habis{border-color:color-mix(in srgb,var(--merah) 45%,var(--garis))}
.kendUtamaBaris{display:block;margin-top:2px}
@media(max-width:379px){.kendMeterNilai{font-size:26px}.kendLesen .btn{flex:1 1 100%}.kendIkonKecil,.kendTarikh{width:34px;height:34px}.kendBarisBtn{gap:8px}.kendIsian .kendBarisBtn .v{font-size:14px}}
/* Pembetulan am (ditemui semasa audit p141): medan tarikh KOSONG berhias (.tarikhPilih › .tarikhTeks.kosong) mewarisi gaya keadaan-kosong
   global .kosong (flex lajur, teks tengah, gap 10px) → "DD/MM/YYYY" di tengah & ikon kalendar jatuh ke baris kedua (tinggi ≈ 71px). */
.tarikhPilih .tarikhTeks.kosong{flex-direction:row;text-align:start;gap:0}

/* ── p141:pasar ── */
/* Semak caj resit, Kad ahli, Inflasi bakul saya, label data KPDN lewat (pasar.js / app.js). Tiada tetapan semula elemen berkekhususan kelas —
   setiap gaya pada kelas komponen sendiri (pelajaran p141). Skrin kaunter SENGAJA putih/hitam dalam kedua-dua tema (kontras pengimbas). */
.pasarLewat{margin:14px 2px 0;padding:8px 12px;border-radius:12px;background:var(--emas-lembut);color:var(--dakwat);border:1px solid var(--garis)}
.cajKad .btn.wide{margin-top:2px}
.cajHasil{margin-top:10px;display:flex;flex-direction:column;gap:10px}
.cajBaris{padding:10px 12px;border-radius:12px;border:1px solid var(--garis);background:var(--kertas);display:flex;flex-direction:column;gap:6px}
.cajBaris .t{display:flex;flex-direction:column;gap:3px;min-width:0}
.cajBaris .t b{color:var(--merah);overflow-wrap:break-word}
.cajBaris.dilaras .t b{color:var(--dakwat)}
.cajBaris .barisButang{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.cajBaris .barisButang .btn{flex:1 1 180px;min-height:44px}
.cajOk{margin:10px 0 0;color:var(--hijau)}
.cajTanda{margin-top:10px}
.cajTanda summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:600;color:var(--cop)}
.cajTanda .baris{gap:8px}
.cajTanda .baris .t{min-width:0}
.cajTanda .baris .t b{overflow-wrap:break-word}
.cajTanda .pill,.kadAhliAksi .pill,.kadAhliPelan .pill,.kadAhliBeli .pill,.kadBaucar .pill{min-height:44px;min-width:44px}
.cajTanda .pill.perlu{border-color:var(--amber);color:var(--dakwat)}
.cajAduanTeks{width:100%;box-sizing:border-box;font:inherit;font-size:14px;line-height:1.5;padding:10px 12px;border-radius:12px;border:1px solid var(--garis);background:var(--kertas);color:var(--dakwat);resize:vertical}
.cajDialog .cajBaris{margin:0 0 10px}
body.pasarSkrinBuka{overflow:hidden}
.pasarSkrin{position:fixed;inset:0;z-index:86;background:white;color:black;overflow:auto;-webkit-overflow-scrolling:touch;display:flex;align-items:flex-start;justify-content:center;
  padding:calc(20px + env(safe-area-inset-top,0px)) 16px calc(20px + env(safe-area-inset-bottom,0px))}
.pasarSkrinIsi{width:100%;max-width:560px;margin-inline:auto;display:flex;flex-direction:column;gap:12px;text-align:center}
.pasarSkrinLbl{font-size:14px;font-weight:600;color:rgb(68,68,68);overflow-wrap:break-word}
.pasarSkrinBesar{font-size:clamp(22px,6vw,30px);font-weight:750;line-height:1.2;letter-spacing:-.01em;overflow-wrap:break-word}
.pasarSkrinBaris{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 14px;border-radius:12px;border:2px solid black;text-align:left}
.pasarSkrinBaris span{font-size:15px;font-weight:600;min-width:0}
.pasarSkrinBaris b{font-size:clamp(20px,6vw,28px);font-variant-numeric:tabular-nums;white-space:nowrap}
.pasarSkrinBaris.lebih{background:black;color:white}
.pasarSkrinNota{font-size:14px;line-height:1.5;color:rgb(51,51,51);overflow-wrap:break-word}
.pasarSkrinMinta{margin:0;font-size:16px;font-weight:600;line-height:1.45}
.pasarSkrin .pasarSkrinTutup{min-height:52px;background:black;color:white;border-color:black;margin-top:4px}
.pasarSkrin .pasarSkrinTutup:focus-visible{outline:3px solid rgb(63,42,134);outline-offset:3px}
.kadAhliKod{background:white;padding:12px 0;display:flex;justify-content:center}
.kadAhliBar{width:100%;max-width:520px;height:clamp(110px,28vw,170px);display:block}
.kadAhliQr{width:min(72vw,300px);height:auto;display:block}
.kadAhliNombor{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:clamp(20px,6.4vw,30px);font-weight:700;letter-spacing:.08em;overflow-wrap:break-word;color:black}
.kadAhliSenarai{padding-top:4px;padding-bottom:4px}
.kadAhliBaris{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kadAhliPapar{flex:1 1 220px;min-width:0;min-height:56px;display:flex;align-items:center;gap:12px;text-align:left;background:transparent;border:0;padding:6px 0;color:inherit;font:inherit;cursor:pointer}
.kadAhliPapar .t{display:flex;flex-direction:column;gap:2px;min-width:0}
.kadAhliPapar .t b{overflow-wrap:break-word}
.kadAhliPapar:focus-visible{outline:2px solid var(--cop);outline-offset:2px;border-radius:8px}
.kadAhliIkon{flex:none;width:44px;height:44px;border-radius:12px;background:var(--cop-lembut);color:var(--cop);display:flex;align-items:center;justify-content:center;font-size:20px}
.kadAhliTag{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;min-width:0}
.kadAhliTag .tag{white-space:normal;max-width:100%;overflow-wrap:break-word;line-height:1.35}
.kadAhliAksi{gap:6px;flex-wrap:nowrap;margin-left:auto}
.kadAhliPelan{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--garis)}
.kadDua,.kadTiga{display:flex;gap:8px;flex-wrap:wrap}
.kadDua .fld,.kadTiga .fld{flex:1 1 140px;min-width:0}
.kadBaucar{gap:8px}
.kadRalat{display:block;margin-top:4px;color:var(--merah)}
.kadRalat:empty{display:none}
.hbInflasiKad .hbInflasi .v{font-size:20px;font-weight:700;white-space:nowrap}
.hbInflasiKad .hbInflasi .t{min-width:0}
.hbInflasiKad .hbInflasi .t b{overflow-wrap:break-word}
.kalTitik i.kadahli{background:var(--emas)}
@media(prefers-reduced-motion:reduce){.pasarSkrin{scroll-behavior:auto}}

/* ── p141:niaga ── */
/* Pendapatan sampingan (lembar #lembarNiaga): sasaran sentuh ≥ 44px pada jalur tab, pemilih tahun & butang padam ×; nilai TEKS dalam .baris
   membalut (dahulu .v nowrap melimpah di 360–390px); sesi & kadar, penyesuaian bank, fail pukal MyInvois. Gaya pada kelas komponen sendiri
   (tiada tetapan semula elemen berkekhususan kelas — pelajaran p141). */
/* PUNCA jalur tab terpotong 236px di desktop: <nav class="niaNav"> mewarisi gaya global bar navigasi (rupa.css ≥ 1024px
   nav{width:var(--sisi);bottom:0;overflow-y:auto}). niaga.js & Cukai kini <div>; tetapan semula pada KELAS kekal sebagai pengawal. */
.niaNav{width:auto;left:auto;right:auto;bottom:auto;border-right:0;overflow:visible}
#lembarNiaga #nia_ya,#lembarNiaga #nia_uid,#lembarNiaga #nia_untuk{min-height:44px}
#lembarNiaga .pautanKad{min-height:44px}
/* .baris .v (0,2,0) menetapkan nowrap + flex:none — kelas ini MESTI sekurang-kurangnya (0,2,0) & kemudian dalam fail supaya menang. */
.baris .niaVTeks{white-space:normal;flex:0 1 auto;min-width:0;max-width:60%;text-align:right;overflow-wrap:break-word}
.niaPadamX{flex:none;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;border:0;background:none;color:var(--pudar);font-size:20px;line-height:1;border-radius:var(--r);cursor:pointer}
.niaPadamX:hover{background:var(--kertas3);color:var(--merah)}
.niaPadamX:focus-visible{outline:none;box-shadow:var(--fokus)}
.nsKump .baris .v{font-weight:650}
.nsSesi{min-height:44px;padding:6px 0 6px 10px;border-left:2px solid var(--garis)}
.nsSesi .t{min-width:0;overflow-wrap:break-word}
.nkPukalBaris{align-items:flex-start}
.nkPukalBaris .t{min-width:0;overflow-wrap:break-word}
:where(.nkPukalBaris) input[type=checkbox]{margin-top:3px}
/* Kalkulator CKHT & duti setem (#lembarHartanah — dicipta hartanah.js). */
#lembarHartanah .kembaliBtn{min-height:44px}
.hrtHab{padding:8px 0 28px}
.hrtHab .row{align-items:flex-start}
.hrtKotak{cursor:pointer;align-items:flex-start}
:where(.hrtKotak) input{flex:none;margin-top:2px}
.baris .hrtV{white-space:normal;flex:0 1 auto;min-width:0;max-width:62%;text-align:right;overflow-wrap:break-word}
.hrtHab .baris .t{min-width:0;flex:1 1 auto}
.hrtSumber{margin:10px 0 6px;overflow-wrap:break-word}
:where(.hrtSumber) a{display:inline-flex;align-items:center;min-height:44px;color:var(--cop)}
.hrtAmaran{margin:8px 2px 0}
@media (max-width:420px){.baris .hrtV,.baris .niaVTeks{max-width:55%}}
/* Tuntutan & Wang masuk (resit rasmi) — sasaran sentuh ≥ 44px (diukur pelayar 390px: .pill 36px, .cip 40px, pemilih ahli 23px,
   ringkasan <details> 40px, input had dasar 43px). Diskop pada lembar domain niaga; .pill/.cip global kekal (reka). */
#lembarTuntutan .pill,#lembarPendapatan .pill,#lembarTuntutan .cip{min-height:44px;min-width:44px}
#lembarTuntutan .resitSusunLbl select{min-height:44px}
#lembarTuntutan .dasarTuntutan summary,#lembarPendapatan .resitRasmiTetapan>summary{min-height:44px}
#lembarTuntutan .dasarBaris input{min-height:44px}
/* Lembar Pendapatan sampingan (semua tab): butang .pill tindakan (invois, produk, aset, sumber, fail, e-Invois) 36px, salin 36px,
   ringkasan "Jadual penuh" 21px, medan 43px, tanda CP500 dibayar 20px → ≥ 44px. */
#lembarNiaga .pill,#lembarNiaga .efSalin{min-height:44px;min-width:44px}
#lembarNiaga summary.note{min-height:44px;padding:12px 0}
#lembarNiaga input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),#lembarNiaga select{min-height:44px}
.niaTanda{display:flex;align-items:center;gap:6px;min-height:44px;cursor:pointer}
:where(.niaTanda) input{flex:none}

/* ── p141:kumpulan ── */
/* Data saya (Lagi › Data & pemulihan): senarai kategori data tenang — tiada tetapan semula elemen berkekhususan kelas (pelajaran 141). */
.dsLembar{display:flex;flex-direction:column;gap:var(--s3);text-align:left;min-width:0}
.dsJudul{margin:0;font-size:var(--fs-tajuk);letter-spacing:-.015em;line-height:1.25}
.dsPengenalan,.dsTetamu{margin:0}
.dsTetamu{padding:10px 12px;border-radius:var(--r);background:var(--amber-lembut);color:var(--dakwat)}
.dsSenarai{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.dsKat{margin:0;padding:14px 14px 12px;display:flex;flex-direction:column;gap:6px;min-width:0}
.dsKepala{display:flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap}
.dsIkon{flex:none;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:10px;background:var(--cop-lembut);color:var(--cop)}
.dsIkon .ikon,.dsIkon .ikonSvg{width:18px;height:18px}
.dsTajuk{margin:0;font-size:15.5px;line-height:1.3;font-weight:700;flex:1 1 auto;min-width:0;overflow-wrap:break-word}
.dsBil{flex:none;white-space:normal}
.dsKaki .tag{white-space:normal;max-width:100%}
.dsApa{margin:0;font-size:14px;line-height:1.5;color:var(--dakwat);overflow-wrap:break-word}
.dsButir{margin:0;display:grid;grid-template-columns:minmax(0,1fr);gap:2px;font-size:13.5px;line-height:1.45}
:where(.dsButir) dt{margin:6px 0 0;font-weight:650;color:var(--pudar);font-size:12.5px;letter-spacing:.01em}
:where(.dsButir) dd{margin:0;color:var(--dakwat);overflow-wrap:break-word}
.dsKaki{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:6px}
.dsPautan{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font-size:13.5px;font-weight:600;color:var(--cop);text-underline-offset:3px}
.dsTindakan{display:flex;flex-direction:column;gap:8px}
.dsTindakan .btn{min-height:44px}
.dsPadam{color:var(--merah);border-color:var(--merah)}

/* ── p141:operasi ── */
/* Bendera "mungkin berubah — sahkan di sumber rasmi" di sebelah pautan sumber rasmi (app.js tandaSumberSemak; public/sumber-kira.js). */
.sumberSemak{display:inline-block;max-width:100%;margin:2px 0;margin-inline-start:6px;padding:1px 8px;border-radius:999px;background:var(--amber-lembut);color:var(--amber);font-size:var(--fs-nota);font-weight:600;line-height:1.45;vertical-align:baseline;white-space:normal;overflow-wrap:break-word}

/* ── p141:reka ── */

/* Pusingan 141 (reka): jadual tiga lajur Gaji saya (tahun berjalan & "jika") pada telefon — label sebaris penuh, dua amaun di bawahnya.
   Dahulu lajur label mengecut di bawah lebar satu perkataan pada 390 px ("Pendapatan" terputus) kerana dua lajur amaun nowrap. */
@media(max-width:480px){
  .gjJadual{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .gjJBaris>span:first-child{grid-column:1/-1;padding:8px 0 0;border-bottom:0;font-weight:600}
  .gjJKepala>span:first-child{display:none}
  .gjJBaris>span:not(:first-child){padding-top:2px}
}
/* Medan berpasangan dalam .row (cth. "Baki pembukaan (RM)" + "Tarikh pembukaan", "Baki penyata" + "Tarikh penyata"): dahulu dijajar ke
   BAWAH (align-items:flex-end) — label dua baris atau nota di bawah satu medan menolak kotak isian tidak sebaris (semak-reka "tidak sekata").
   Kini (pelayar dengan subgrid; iOS 15 kekal seperti dahulu) setiap medan = 3 baris dikongsi: label (dijajar ke bawah) · kawalan · nota —
   kotak isian SENTIASA sebaris walau label/nota berbeza panjang. Hanya .row yang semua anaknya .fld dengan ≤ 3 anak.
   Kekhususan sengaja RENDAH (.row:where(…) = 0,1,0): komponen yang menyusun barisnya sendiri (kalkulator kira.css, .rwDua …) tetap menang.
   Lajur auto-fit ≥ 140 px (pusingan 141 reka2; dahulu 110 px = .row lama): pada 320 px pasangan BERTINDAN — dahulu 2 × ~125 px: tarikh
   "30/10/2026" bersentuh ikon kalendar, "DD/MM/YYYY" terpotong (kad ahli, kenderaan, CKHT, penyata bank, fail pukal), pilihan terpotong
   ("RON95 汽…"); ≥ 360 px kekal dua lajur (≥ 145 px). Pelayar tanpa subgrid (iOS 15) kekal .row flex lama. */
@supports (grid-template-rows:subgrid){
  .row:where(:has(>.fld+.fld):not(:has(>:not(.fld))):not(:has(>.fld>:nth-child(4)))){display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));align-items:start}
  .row:where(:has(>.fld+.fld):not(:has(>:not(.fld))):not(:has(>.fld>:nth-child(4))))>.fld{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:start;margin-bottom:0}
  .row:where(:has(>.fld+.fld):not(:has(>:not(.fld))):not(:has(>.fld>:nth-child(4))))>.fld>label{align-self:end}
}
/* Akaun & baki — baris akaun/acara: nama penuh (tiada "Maybank …" terpotong) & amaun turun ke baris sendiri bila ruang sempit
   (dahulu lajur teks mengecut ke 47–63 px pada 320 px dan perkataan terputus). */
.akBaris,.akAcara{flex-wrap:wrap;row-gap:2px}
.akBaris .t,.akAcara .t{flex:1 1 9em}
.akBaris .t b,.akAcara .t b{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:break-word}
.akBaris .v,.akAcara .v{margin-left:auto}
/* Rancangan wang — kepala kad (matlamat, pinjaman, orang): amaun/peratus turun ke baris sendiri bila sempit (dahulu teks 51 px pada 320 px). */
.rwMtKepala{flex-wrap:wrap;row-gap:4px}
.rwMtKepala>.rwMtTeks{flex:1 1 9em}
.rwMtKepala>:last-child:not(.rwMtTeks):not(.rwMtIkon){margin-left:auto}
/* Pusat Tangkap: lencana bilangan (latar emas) — teks atas emas SENTIASA --atas-emas (dahulu --dakwat: 1.87:1 dalam tema gelap). */
/* Baris Perlu semak pada telefon: amaun di bawah nama (dahulu nama kedai panjang dipecah per huruf dalam lajur 87 px). */
@media(max-width:420px){
  .lembar .tkBaris:not(.tkTokenBaris){grid-template-columns:auto auto minmax(0,1fr);grid-template-areas:"pilih ikon teks" "pilih ikon amaun" "pilih ikon aksi"}
  .lembar .tkBaris .v{justify-self:start}
  .lembar .tkBaris .t b,.lembar .tkBaris .t .note{overflow-wrap:break-word}
}
/* "Kurangkan gerakan" — jaring keselamatan untuk SEMUA komponen app & pendaratan (termasuk helaian modul tangkap.css, kira.css,
   pendaratan.css): animasi & peralihan selesai serta-merta; peristiwa animationend/transitionend tetap berlaku (JS tidak tersekat). */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}}
/* PENDARATAN DI TENGAH SKRIN DESKTOP (pusingan 141): lajur sisi app (≥ 1024 px: body padding-left var(--sisi), toast/dialog dianjak)
   dahulu turut dikenakan pada pendaratan yang TIADA lajur sisi — seluruh pendaratan beralih 236 px ke kanan (lajur hero sempit &
   perkataan terputus pada 1280 px). Kini hanya bila app kelihatan; pelayar tanpa :has() → main pendaratan menarik balik padding itu. */
@media(min-width:1024px){
  body:has(>#app.hide){padding-left:0}
  body:has(>#app.hide) .toast{left:50%}
  body:has(>#app.hide) .lambatBar{left:12px}
  body:has(>#app.hide) :is(.kunciSkrin,.tutup,.statusTutup){left:0}
}
@supports not selector(:has(*)){@media(min-width:1024px){#v-masuk.lp{margin-left:calc(-1 * var(--sisi))}}}
/* Perniagaan (Untung rugi & kad lain) pada ≤ 359 px: label panjang ("Pembaikan & penyelenggaraan") tidak dihimpit — amaun turun ke baris
   sendiri (corak .baris pusingan 91) sebelum perkataan dipecah. */
@media(max-width:359px){#lembarNiaga .baris .t{flex-basis:9.5em}}
/* Mod TEKS BESAR: pil (butang kecil) ≥ 44 px & sama tinggi dengan medan sebaris (dahulu medan 42 px di sebelah pil 36 px dalam
   lembar Wang); baris resit pada telefon — amaun turun ke baris sendiri sebelum nama kedai dipecah ("CAWANG AN"). */
body.besar .pill{min-height:44px}
body.besar .row>.pill{align-self:stretch}
@media(max-width:420px){body.besar .slip .a{flex-wrap:wrap;row-gap:2px}body.besar .slip .a>.m{flex:1 1 9em}body.besar .slip .a>span:last-child{margin-left:auto}}
/* Gaji pekerja: butang cetak + pasangan eksport (⬇ CSV · ⬇ Excel) — lajur ≥ 210 px supaya setiap butang eksport ≥ ~100 px (dahulu lajur
   160 px → butang 76 px, "Excel" terputus di tengah perkataan pada 390 px). Telefon: cetak sebaris penuh, eksport di bawahnya. */
.gpkDua.gpkButang{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
/* Nilai bersih (Rancangan wang): baris Aset / Liabiliti — lajur label tetap 6.5em menyempitkan amaun pada telefon: "RM 394,700.00" dipecah
   dua baris ("RM" / "394,700.00", tidak sebaris label) & bar liabiliti runtuh ke 0 px (320 px, 3 bahasa). Amaun tidak dibalut; < 420 px:
   label & amaun sebaris, bar selebar kad di bawahnya. */
.rwNbBar>b{white-space:nowrap}
@media(max-width:419.98px){.rwNbBar{grid-template-columns:minmax(0,1fr) auto;row-gap:0}.rwNbBar>.bar{grid-column:1/-1;grid-row:2;margin:4px 0 10px}}
/* Butiran akaun: nama akaun panjang (cth. "Akaun SGD (DBS Multiplier — simpanan kerja di Singapura)") turun ke bawah butang Kembali dengan
   lebar penuh — dahulu tajuk 22px dihimpit di sebelah butang (5 baris pada 320 px). Tajuk pendek kekal sebaris (flex-wrap: hanya bila tidak muat). */
.akKepalaBaris{flex-wrap:wrap;row-gap:6px}

/* ── p142:banyak ── */
/* Satu gambar, banyak resit (public/banyak.js): lembar semakan "N resit ditemui dalam gambar ini" — jubin lakaran setiap potongan (2 lajur
   telefon → 3 lajur ≥ 640 px; seluruh jubin ialah sasaran sentuh ≥ 44 px), kad dalam lembar resit & tag senarai. Tiada tetapan semula
   elemen berkekhususan kelas; blok berpusat memakai margin-inline:auto sendiri. */
.banyakKad .banyakTajuk{font-size:var(--fs-subtajuk);font-weight:700;line-height:1.3;margin:4px 0 6px;color:var(--dakwat)}
.banyakGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0 4px}
@media(min-width:640px){.banyakGrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.banyakItem{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0;min-height:44px;padding:8px;border:1px solid var(--garis);border-radius:var(--r);background:var(--kertas2);cursor:pointer;transition:border-color .15s,box-shadow .15s}
.banyakItem.pilih{border-color:var(--cop);box-shadow:inset 0 0 0 1px var(--cop)}
.banyakItem.utama{cursor:default}
.banyakItem:focus-within{outline:2px solid var(--cop);outline-offset:2px}
.banyakItem>input[type=checkbox]{position:absolute;top:12px;right:12px;width:24px;height:24px;margin:0;accent-color:var(--cop);z-index:1;cursor:inherit}
.banyakLakaran{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:3/4;border-radius:8px;background:var(--kertas3);overflow:hidden}
.banyakLakaran>img{display:block;max-width:100%;max-height:100%;object-fit:contain;transition:opacity .15s}
.banyakItem:not(.pilih) .banyakLakaran>img{opacity:.4;filter:grayscale(1)}
.banyakRangka{width:62%;height:74%;border-radius:6px;background:linear-gradient(90deg,var(--kertas3),var(--kertas2),var(--kertas3));background-size:200% 100%;animation:banyakKilat 1.2s linear infinite}
@keyframes banyakKilat{to{background-position:-200% 0}}
.banyakKe{position:absolute;top:8px;left:8px;min-width:26px;height:26px;padding:0 7px;border-radius:999px;background:var(--cop);color:var(--atas-cop);font-size:12.5px;font-weight:700;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.banyakTeks{display:flex;flex-direction:column;gap:2px;min-width:0}
.banyakTeks>b{font-size:14px;line-height:1.3;overflow-wrap:break-word}
.banyakTeks>.note{font-size:12.5px;line-height:1.45;overflow-wrap:break-word}
.banyakTeks>.tag{align-self:flex-start;margin-top:2px}
.banyakKad .banyakKemajuan{min-height:1.5em;margin:10px 0 4px;text-align:center}
.banyakKad .banyakTutupNota{max-width:34em;margin:10px auto 0;margin-inline:auto;text-align:center}
.banyakKad .banyakLebih{margin:8px 0 0}
.banyakKadResit{margin-top:12px}
.banyakKadResit .banyakKadTajuk{margin:6px 0 4px}
.banyakAdik{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 2px}
.banyakAdik>.pill{min-height:44px;max-width:100%;white-space:normal;text-align:left;line-height:1.35}
.banyakAksi{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.banyakAksi>.btn{flex:1 1 12em;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.banyakAksi:empty{display:none}
.tag.banyakTag{background:var(--emas-lembut);color:var(--emas-gelap)}
@media(prefers-reduced-motion:reduce){.banyakRangka{animation:none}.banyakItem,.banyakLakaran>img{transition:none}}

/* ── p142:dapur ── */
/* Berbilang senarai beli (penukar .tabBar + Urus), tugasan, dialog urus senarai/item, sisa makanan (kad Dapur, borang, laporan).
   Semua pemilih berkelas komponen sendiri (tiada tetapan semula elemen); sasaran sentuh ≥ 44px; token warna sahaja (terang & gelap). */
.beliSenaraiTempat:empty{display:none}
.beliSenaraiBaris{display:flex;align-items:center;gap:8px;margin:12px 0 0;min-width:0}
.beliSenaraiBaris>.tabBar{flex:1 1 auto;min-width:0;margin:0}
.beliSenaraiBaris>.pill,.sbItemSenarai .pill,.sbUrus>.pill,.dapurAksi>.pill,.sisaGuna .pill,.sisaLaporan .pill,.sisaNavTempoh>.pill{min-height:44px}
.beliSenaraiBaris>.pill{flex:0 0 auto;white-space:nowrap}
.pill.beliUrusItem{min-height:44px;white-space:nowrap}
:where(.sbSeksyen) select,:where(.sbSeksyen) input,:where(.sbBaruBaris)>input,.sbBaruBaris>.btn{min-height:44px}
.beliTapis{margin:0 0 10px}
.beliTapis .tabBar{margin:0}
.beliTugas,.beliKedai{white-space:nowrap}
.sbUrus{text-align:left}
.sbKepala{font-size:16px;margin:0 0 4px}
.sbUrus .note{margin:0 0 10px}
.sbBaruBaris{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch;margin:0 0 10px}
:where(.sbBaruBaris)>input{flex:1 1 12em;min-width:0}
.sbBaruBaris>.btn{flex:0 0 auto}
.sbBaris{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:8px 0;border-bottom:1px solid var(--garis)}
.sbBaris.sbAktif{background:var(--cop-lembut);border-radius:12px;padding:8px 10px;border-bottom-color:transparent}
.sbNama{flex:1 1 12em;min-width:0;min-height:44px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;text-align:left;background:none;border:0;padding:0;color:inherit;font:inherit;cursor:pointer}
:where(.sbNama)>b{font-weight:650;overflow-wrap:break-word}
.sbNama .note{margin:0;color:var(--pudar);font-size:13px}
.sbNama:disabled{cursor:default}
.sbAksi{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;flex:1 1 100%}
.sbAksiKumpulan{display:flex;flex-wrap:wrap;gap:6px}
.sbAksiKumpulan:empty{display:none}
.sbAksiKumpulan:last-child{margin-left:auto}
.sbAksi .pill{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.sbAksi .pill:disabled{opacity:.45}
.sbPadam{color:var(--merah)}
.sbArkib{margin-top:12px}
.sbItemSenarai{max-height:min(40vh,360px);overflow:auto;overscroll-behavior:contain;margin:8px 0;border-top:1px solid var(--garis)}
:where(.sbItem) input[type=checkbox]{width:21px;height:21px;flex:none}
.sbSeksyen{border-top:1px solid var(--garis);padding-top:10px;margin-top:10px;display:flex;flex-direction:column;gap:6px}
:where(.sbSeksyen) select,:where(.sbSeksyen) input{width:100%}
/* Medan dialog urus (di luar .fld/.card): rupa medan app yang SAMA — terang & gelap. */
:where(.sbBaruBaris, .sbSeksyen) :is(input, select){border-radius:var(--r);border:1.5px solid var(--garis);background:var(--kertas2);color:var(--dakwat);padding:10px 12px;font:inherit;font-size:16px}
.sbSeksyen .barisButang{margin-top:4px}
.sbUrus>.btn.wide{margin-top:12px}
.dapurAksi{flex-wrap:wrap;justify-content:flex-end}
.sisaJumlah{font-size:28px;margin-top:4px}
.sisaAnggaran{font-size:12.5px}
.sisaKepala{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.sisaKepala>.pill{flex:0 0 auto}
.sisaTempoh{flex:0 1 16em;min-width:0}
.sisaNavTempoh{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:8px;margin:10px 0}
.sisaNavTempoh>.pill{padding:0;display:inline-flex;align-items:center;justify-content:center}
.sisaNavTempoh>.pill:disabled{opacity:.45}
.sisaLaporan .baris .t{flex:1 1 auto;min-width:0}
.sisaLaporan .bar{display:block;height:8px;margin-top:6px;border-radius:999px;background:var(--kertas3);overflow:hidden}
.sisaLaporan .bar i{display:block;height:100%;border-radius:inherit;background:var(--cop)}
.sisaTempoh .tabBar,.sisaPenuh .tabBar{margin:0}
.sisaPenuh{margin:0 0 10px}
:where(.sisaNavTempoh)>b{text-align:center;font-size:15.5px}
.sisaHero .besar{font-size:30px}
.sisaStat{margin-bottom:10px}
.sisaAliran .t{min-width:0}
.sisaBorang .fld{margin-bottom:10px}

/* ── p142:sejarah ── */
/* Sejarah perubahan (pusingan 142): garis masa ikut hari, entri = kad tenang berjalur jenis (ubah/padam/tong/pulih), baris beza "lama → baharu"
   yang membalut di telefon (grid satu lajur) & tiga lajur dari 560px; butang Pulihkan ≥ 44px. Tetapan semula senarai melalui :where() (0 kekhususan). */
.sejarahLembar .wrap{max-width:640px}
#tutupSejarah{min-height:44px}
.sjLembar{padding:12px 0 28px}
.sjAtas{margin:4px 0 14px}
.sjJudul{font-size:var(--fs-tajuk);font-weight:700;line-height:1.25;margin:0}
.sjRekod{margin:4px 0 0;color:var(--pudar);font-size:var(--fs-nota);overflow-wrap:break-word}
.sjRekod b{color:var(--dakwat);font-weight:650}
.sjStatus{display:grid;gap:6px;margin:0 0 12px}
.sjNota{margin:0;padding:8px 12px;border-radius:12px;background:var(--kertas3);color:var(--dakwat)}
.sjNota.warn{background:var(--amber-lembut);color:var(--amber)}
.sjNota.bahaya{background:var(--merah-lembut);color:var(--merah)}
:where(.sjGaris),:where(.sjSenarai){list-style:none;margin:0;padding:0}
.sjHari+.sjHari{margin-top:18px}
.sjHariTajuk{font-size:13px;font-weight:650;color:var(--pudar);margin:0 0 8px;letter-spacing:0}
.sjSenarai{display:grid;gap:10px}
.sjEntri{margin:0;padding:12px 14px;border-left:3px solid var(--garis)}
.sjEntri[data-jenis=padam]{border-left-color:var(--merah)}
.sjEntri[data-jenis=tong]{border-left-color:var(--amber)}
.sjEntri[data-jenis=pulihTong]{border-left-color:var(--hijau)}
.sjKepala{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap}
.sjIkon{display:inline-flex;color:var(--cop);flex:none}
.sjIkon .ikon{width:18px;height:18px}
.sjSiapa{flex:1 1 auto;min-width:0;overflow-wrap:break-word}
.sjMasa{margin-left:auto;white-space:nowrap}
.sjBeza{margin:10px 0 0;display:grid;gap:8px}
.sjBaris{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding-top:8px;border-top:1px solid var(--garis);align-items:center}
.sjBaris>.sjMedan,.sjBaris>.sjNilai{grid-column:1}
.sjBaris>.sjTindak{grid-column:2;grid-row:1/span 2;align-self:center}
.sjMedan{font-size:13px;font-weight:600;color:var(--pudar);margin:0}
.sjNilai{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;min-width:0;overflow-wrap:break-word}
.sjLama del{color:var(--pudar);text-decoration-color:color-mix(in srgb, var(--merah) 60%, transparent)}
.sjPanah{color:var(--pudar)}
.sjBaru{color:var(--dakwat);font-weight:600}
.sjPetikan .sjBaru{font-weight:500}
.sjTindak{margin:0}
.btn.kecil.sjPulih{min-height:44px;display:inline-flex;align-items:center;gap:6px;padding:8px 12px;white-space:nowrap}
.sjPulih .ikon{width:16px;height:16px}
.sjTiadaBeza{margin:8px 0 0}
.sjKaki{margin:18px 0 0}
.sjLebih{margin:14px 0 8px}
.sjKosong{padding-top:28px}
.btn.btnSejarah{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:9px}
.btnSejarahIkon{color:var(--pudar);min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:none;border:0;padding:0;flex:none;cursor:pointer}
.btnSejarahIkon:hover,.btnSejarahIkon:focus-visible{background:var(--kertas3);color:var(--cop)}
.btnSejarahIkon .ikon{width:18px;height:18px}
.btnSejarah .ikon{width:18px;height:18px}
@media(min-width:560px){.sjBaris{grid-template-columns:minmax(120px,30%) minmax(0,1fr) auto}.sjBaris>.sjNilai{grid-column:2;grid-row:1}.sjBaris>.sjTindak{grid-column:3;grid-row:1}}

/* ── p142:tandatangan ── */
/* Kad Sijil digital (tab e-Invois) & hantar terus pukal (kad Fail pukal MyInvois). Nilai panjang (DN sijil, nombor siri perpuluhan, cap jari)
   dipecah di mana-mana supaya tiada skrol mendatar pada 320 px; butang pilih fail ≥ 44 px. */
.ttdPecah{overflow-wrap:break-word}
.ttdPecah code{font-size:12px;overflow-wrap:anywhere}
.fld .ttdFail{cursor:pointer}
.ttdFail::file-selector-button{min-height:32px;margin-right:10px;padding:6px 12px;border:1px solid var(--garis);border-radius:999px;background:var(--kertas);color:var(--dakwat);font:inherit;cursor:pointer}
.ttdRalat{min-height:0;margin:2px 0 8px;color:var(--merah)}
.ttdRalat:empty{display:none}
.ttdAmaran{margin:8px 0 0;padding-left:18px;color:var(--amber)}
:where(.ttdAmaran) li{margin:3px 0}
.ttdButir summary{min-height:44px;display:flex;align-items:center;cursor:pointer}
.ttdHasil .baris .t{min-width:0}
.ttdHantar .btn:disabled{opacity:.55}

/* ── p142:tab ── */
/* SATU komponen tab/segmen = .tabBar dalam public/tab.css (dimuat selepas helaian ini). Di sini HANYA jarak susun atur bekas (margin) —
   tiada rupa tab; pengawal: ujian-tab142-satu.mjs (peraturan .tabBar di luar tab.css hanya margin/kedudukan). */
.agihPilih{margin-top:8px}
.agihPilih>.tabBar{margin:0 0 6px}
.tuHabHd>.tabBar{margin:0}
.tuDuaBtn{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px}

/* ── p142:reka2 ── */
/* Pembaikan reka bentuk merentas ejen daripada aliran semak-reka p142 (pusingan 142, ejen reka2). */
/* Senarai beli — kepala senarai aktif (nama senarai panjang + 📤 Kongsi + ☑ Urus item): dahulu pil Kongsi mengecut ke 59 px dan perkataannya
   terputus pada 390 px. Pil tidak mengecut; nama senarai membalut dan pil turun ke baris sendiri (garis mengisi baki). */
.sect.sectBeli{flex-wrap:wrap;row-gap:6px}
.sect.sectBeli>.lbl{flex:0 1 auto;min-width:0;overflow-wrap:break-word}
.sect.sectBeli>.ln{flex:1 1 0;min-width:12px}
.sect.sectBeli>.pill{flex:0 0 auto;white-space:nowrap}
/* Utama › kad Senarai beli — tajuk memuatkan nama senarai aktif (pusingan 142): nama panjang dahulu menghimpit pil "N belum dibeli ›" ke
   68 px pada 320 px (perkataan terputus). Pil tidak mengecut; tajuk membalut & pil turun ke kanan baris berikutnya bila perlu. */
.kadSenaraiKepala{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;row-gap:6px}
.kadSenaraiKepala>.lbl{flex:1 1 10em;min-width:0;overflow-wrap:break-word}
.kadSenaraiKepala>.pill{flex:0 0 auto;white-space:nowrap;margin-left:auto}

/* ── p143:auditui ── */
/* Bahagi bil › cip nama orang (span — butang × di dalamnya sahaja yang boleh diklik): kursor tangan dahulu mewarisi .rwOrangCip .cip
   (robot e2e: "boleh diklik tetapi tiada tindakan / tidak boleh dicapai papan kekunci"). Kursor lalai; butang × kekal penunjuk. */
.rwOrangCip .cip{cursor:default}
.rwOrangCip .cip .rwCipBuang{cursor:pointer}
/* ── p144: pariti Belanje — tindakan pantas belanja, kategori saya, tab Rancang tambahan, carta donat & baris kategori boleh diketik ── */
.tnTarikhAlat{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;margin:-4px 0 12px}
.tnTarikhAlat .pill{min-height:44px}
.tnTarikhAlat .tnMasa{flex:1 1 140px;margin:0;min-width:0}
.tnTindakan{margin:4px 0 12px;padding:12px;border:1px dashed var(--garis);border-radius:var(--r);background:var(--kertas3)}
.tnTindakanBaris{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.tnTindakanBaris .pill{min-height:44px}
.tnPanel{margin-top:10px}
.ksSenarai{list-style:none;margin:12px 0;padding:0;display:flex;flex-direction:column;gap:8px}
.ksBaris{padding:10px 12px;border:1px solid var(--garis);border-radius:var(--r);background:var(--kertas2)}
.ksBaris.ksSorok{opacity:.72}
.ksKepala{display:flex;flex-wrap:wrap;align-items:center;gap:8px;justify-content:space-between}
.ksKepala b{flex:1 1 140px;min-width:0;overflow-wrap:break-word}
.ksAlat{display:flex;flex-wrap:wrap;gap:6px}
.ksAlat .pill{min-height:44px;min-width:44px}
.ksSub{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.ksCip{display:inline-flex;align-items:center;gap:2px;padding:0 0 0 12px;border-radius:999px;background:var(--cop-lembut);color:var(--cop);font-size:14px;font-weight:600;max-width:100%;overflow-wrap:break-word}
.ksBuang{min-width:44px;min-height:44px;border:0;background:none;color:inherit;font:inherit;cursor:pointer;border-radius:999px}
.ksBuang:focus-visible{outline:2px solid var(--cop);outline-offset:-4px}
.ksTambah .row{gap:8px}
.rwKatPilih{border:0;margin:0 0 12px;padding:0;min-width:0}
.rwCekBalut{display:flex;flex-wrap:wrap;gap:8px}
.pill.rwCek{min-height:44px;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.pill.rwCek input{width:18px;height:18px;margin:0}
.rwCekBaris{display:flex;align-items:center;gap:10px;min-height:44px;margin:4px 0 10px;cursor:pointer}
.rwCekBaris input{width:20px;height:20px;margin:0;flex:none}
.rwPudar{opacity:.72}
.rwCipKat{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.barisKlik{position:relative}
.barisKlik:focus-within{outline:2px solid var(--cop);outline-offset:2px;border-radius:var(--r)}
.katLihat{appearance:none;-webkit-appearance:none;border:0;background:none;padding:0;margin:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.katLihat::after{content:"";position:absolute;inset:0}
.katLihat:focus-visible{outline:none}
.cartaDonat{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin:8px 0 12px}
.cartaDonat svg.carta{width:150px;height:150px;flex:none;transform:rotate(0deg)}
.cartaDonat .cartaDonatLatar{stroke:var(--kertas3)}
.cartaDonat circle.siri-cop{stroke:var(--cop)}.cartaDonat circle.siri-emas{stroke:var(--emas)}.cartaDonat circle.siri-hijau{stroke:var(--hijau)}
.cartaDonat circle.siri-amber{stroke:var(--amber)}.cartaDonat circle.siri-merah{stroke:var(--merah)}.cartaDonat circle.siri-pudar{stroke:var(--pudar)}
.cartaDonatTengah{font-size:5px;font-weight:700;fill:var(--dakwat)}
.cartaDonatLegenda{list-style:none;margin:0;padding:0;flex:1 1 180px;min-width:0;display:flex;flex-direction:column;gap:6px}
.cartaDonatLegenda li{display:flex;align-items:center;gap:8px;font-size:14px;min-width:0}
.cartaDonatLegenda li span{flex:1;min-width:0;overflow-wrap:break-word}
.cartaDonatLegenda li small{color:var(--pudar);min-width:3ch;text-align:right}
.cartaDonatLegenda i{width:12px;height:12px;border-radius:3px;flex:none}
.cartaDonatLegenda i.siri-cop{background:var(--cop)}.cartaDonatLegenda i.siri-emas{background:var(--emas)}.cartaDonatLegenda i.siri-hijau{background:var(--hijau)}
.cartaDonatLegenda i.siri-amber{background:var(--amber)}.cartaDonatLegenda i.siri-merah{background:var(--merah)}.cartaDonatLegenda i.siri-pudar{background:var(--pudar)}
/* ── p144: pisah resit ikut kategori (lembar resit) ── */
.pkSenarai{display:flex;flex-direction:column;gap:6px}
.pkBaris{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--garis)}
.pkBaris:last-child{border-bottom:0}
.pkNama{flex:1 1 160px;min-width:0;overflow-wrap:break-word}
.pkBaris select{flex:0 1 200px;min-width:0;max-width:100%;min-height:44px}
.pkKumpulan{display:flex;flex-direction:column;gap:4px}
.pkKump{display:flex;justify-content:space-between;gap:8px;padding:6px 10px;border-radius:var(--r);background:var(--kertas2);overflow-wrap:break-word}
/* ── p144: jenama dokumen invois (logo, tandatangan/cop, warna) ── */
.niJenama{margin-top:14px;padding-top:12px;border-top:1px solid var(--garis)}
.niJenamaGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px;margin:8px 0}
.niJenamaImej{display:flex;flex-direction:column;gap:6px;min-width:0}
.niJenamaPrat{display:flex;align-items:center;justify-content:center;min-height:84px;padding:8px;border:1px dashed var(--garis);border-radius:var(--r);background:var(--kertas2)}
.niJenamaPrat img{max-width:100%;max-height:90px;width:auto;height:auto}
.niJenama input[type=color]{width:56px;height:44px;padding:2px;border-radius:var(--r)}
/* p145 — gambar profil (kad akaun hab Lagi, Tetapan, lembar tukar) & pulih sandaran */
button.lagiAvatar{position:relative;border:0;padding:0;cursor:pointer;font:inherit;font-size:19px;font-weight:700;min-width:46px;min-height:46px}
button.lagiAvatar:focus-visible{outline:2px solid var(--fokus);outline-offset:2px}
.lagiAvatarImg{overflow:hidden;background:var(--kertas2)}
.lagiAvatar img,.gpAvatarKecil img,.gpPratonton img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.lagiAvatarPen{position:absolute;right:-2px;bottom:-2px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;line-height:1;background:var(--kertas);color:var(--cop);border:1px solid var(--garis)}
.gpBaris{margin-top:12px;gap:10px;align-items:center}
.gpAvatarKecil{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;overflow:hidden;font-weight:700;color:var(--cop);background:var(--cop-lembut)}
.gpPratonton{width:128px;height:128px;margin:12px auto;border-radius:50%;display:grid;place-items:center;overflow:hidden;font-size:44px;font-weight:700;color:var(--cop);background:var(--cop-lembut);border:1px solid var(--garis)}
.pulihPratonton .pulihBaris{gap:10px;align-items:flex-start}
.pulihPratonton .pulihBaris input[type=checkbox]{flex:none;width:22px;height:22px;margin-top:2px}
/* ── p145: tab Kadar simpanan (Rancang wang — public/rancang-kadar.js): kad skim sama tinggi sebaris (sumber di dasar kad), teks membalut ── */
.rwKsKepala .rwKsTajuk{margin:0 0 6px;font-size:var(--fs-subtajuk);font-weight:700;line-height:1.3;overflow-wrap:break-word}
.rwKsKepala .note{margin:4px 0 0}
.rwKsPenafian{color:var(--pudar)}
.rwKsSusun{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 10px}
.rwKsSusun .pill{min-height:44px;display:inline-flex;align-items:center;white-space:normal;text-align:left}
.rwKsSenarai{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:12px}
.rwKsSenarai>.card{margin:0;display:flex;flex-direction:column;min-width:0}
.rwKsSkim .note,.rwKsOpr .note{margin:6px 0 0;overflow-wrap:break-word}
.rwKsSkim .rwMtPeratus,.rwKsOpr .rwMtPeratus{white-space:normal;max-width:100%;overflow-wrap:break-word}
.rwKsFakta{margin:8px 0 0;padding:0 0 0 18px;display:flex;flex-direction:column;gap:3px;font-size:var(--fs-nota);color:var(--pudar)}
.rwKsFakta li{overflow-wrap:break-word}
.rwKsPelepasan{margin-top:10px;padding:10px 12px;border-radius:var(--r);background:var(--kertas3)}
.rwKsPelepasan .lbl{margin:0}
.rwKsPelepasan .note{margin:4px 0 0}
.rwKsPelepasan .pautanKad{min-height:44px}
.rwKsSumber{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px;margin-top:auto;padding-top:10px;font-size:var(--fs-nota)}
.rwKsSumber a{display:inline-flex;align-items:center;min-height:44px;color:var(--cop);font-weight:600;overflow-wrap:break-word}
.rwKsSumber .note{margin:0;flex:1 1 100%}
.rwKsOpr .rwKsSumber{margin-top:4px}
.rwKsKira .rwKsMatlamatLbl{margin-top:12px}
.rwKsHasil{margin-top:8px}
.rwKsHasil .baris .t{flex:1 1 12em}
.rwKsHasil .baris .v{flex:0 0 auto;font-variant-numeric:tabular-nums}
.rwKsAuto{margin-top:14px;color:var(--pudar)}
/* ── p145: imbas dokumen — pengimbas dalam peranti (public/imbas-dokumen.js): lembar skrin PENUH di setiap lebar (bukan panel sisi desktop),
   pentas foto + sisi empat (SVG) + 4 pemegang 48 px (sasaran sentuh ≥ 44 px, pusat kelihatan), kanta pembesar semasa menyeret, kawalan di
   bawah (potret) atau di kanan (landskap/desktop). Token palet sahaja. ── */
.lembar.imbasDokLembar{left:0;right:0;width:auto;max-width:none;border-left:0;box-shadow:none;padding-bottom:0;overflow:hidden}
.imbasDokLembar.on,.imbasDokLembar.menutup{display:flex;flex-direction:column}
.imbasDokLembar [hidden]{display:none!important}
.imbasDokKepala{flex:none;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.imbasDokKepala>.pill{flex:none;min-height:44px}
.imbasDokTajuk{flex:1 1 8em;min-width:0;margin:0;font-size:var(--fs-subtajuk);line-height:1.3;font-weight:650;overflow-wrap:break-word}
.imbasDokKiraan{flex:none}
.imbasDokBadan{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:var(--s3);padding:var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom,0px));overflow-y:auto}
.imbasDokKiri{flex:1 0 auto;display:flex;flex-direction:column;gap:var(--s2)}
.imbasDokStatus,.imbasDokBucuNota{flex:none;margin:0;overflow-wrap:break-word}
.imbasDokStatus{min-height:1.55em;color:var(--dakwat)}
.imbasDokPentas{position:relative;flex:1 1 auto;min-height:220px;border-radius:var(--r);background:var(--kertas3);overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.imbasDokFoto,.imbasDokHasil{position:absolute;left:0;top:0;display:block;box-shadow:var(--bayang)}
.imbasDokGaris{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.imbasDokGaris[aria-hidden]{pointer-events:none}
.imbasDokKanta[aria-hidden]{pointer-events:none}
.imbasDokLuar{fill:var(--kertas);fill-opacity:.62}
.imbasDokKuad{fill:none;stroke:var(--cop);stroke-width:2.5;stroke-linejoin:round}
.imbasDokBucu{position:absolute;left:0;top:0;width:48px;height:48px;min-height:48px;margin:-24px 0 0 -24px;padding:0;border:0;border-radius:50%;background:transparent;cursor:grab;touch-action:none;z-index:2}
.imbasDokBucu::before{content:"";position:absolute;inset:10px;border-radius:50%;border:3px solid var(--cop);background:var(--kertas2);box-shadow:var(--bayang);transition:inset var(--gerak) ease}
.imbasDokBucu::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--cop)}
.imbasDokBucu.seret{cursor:grabbing}
.imbasDokBucu.seret::before{inset:6px;background:var(--cop-lembut)}
.imbasDokBucu:focus-visible{outline:none;box-shadow:none}
.imbasDokBucu:focus-visible::before{border-width:4px;box-shadow:var(--fokus)}
.imbasDokKanta{position:absolute;left:0;top:0;width:112px;height:112px;border-radius:50%;border:2px solid var(--cop);box-shadow:var(--bayang);z-index:3}
.imbasDokSibuk{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--kertas3);background:color-mix(in srgb,var(--kertas3) 72%,transparent);z-index:4}
.imbasDokKawal{flex:none;display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.imbasDokKawal>*{flex:none}
.imbasDokKawal .tabBar{margin:0}
.imbasDokKawal>.lbl{margin-top:var(--s1)}
.imbasDokAlat{display:flex;flex-wrap:wrap;gap:var(--s2)}
.imbasDokAlat .pill{flex:1 1 auto;min-height:44px;white-space:normal;overflow-wrap:break-word;text-align:center}
.imbasDokAksi{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s1)}
.imbasDokAksi .btn{flex:1 1 8em;min-width:0}
@media(min-width:600px) and (orientation:landscape),(min-width:1000px){
  .imbasDokBadan{flex-direction:row;align-items:stretch;overflow:hidden}
  .imbasDokKiri{flex:1 1 auto;min-width:0;min-height:0}
  .imbasDokPentas{min-height:160px}
  .imbasDokKawal{flex:0 0 clamp(250px,30vw,340px);overflow-y:auto;padding-top:calc(1.55em + var(--s2))}
}
/* Telefon: arahan papan kekunci disembunyikan secara visual (masih dibaca pembaca skrin melalui aria-describedby) — pentas lebih besar. */
@media(max-width:599px),(max-height:500px){.imbasDokBucuNota{display:none}}
@media(prefers-reduced-motion:reduce){.imbasDokBucu::before{transition:none}}
.petiImbas{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin-top:var(--s2)}
.petiImbas[hidden]{display:none}
.petiImbas .btn{flex:0 0 auto;min-height:44px}
.petiImbas .note{flex:1 1 12em;min-width:0;overflow-wrap:break-word}
/* ── p145-wang-a: bil belum bayar (Kalendar wang), ganjaran kad & caj pindahan (Akaun), bayaran balik dinanti, bajet sifar, amaran belanja &
   simpanan automatik (Rancang wang), kad Utama "Wang perlu perhatian". Token sedia ada sahaja; sasaran sentuh ≥ 44px; teks membalut. ── */
.kalBilImbas{margin:0 0 10px;padding:10px;border:1px dashed var(--garis);border-radius:var(--r);background:var(--kertas2)}
.kalBilImbas .btn{min-height:44px}
.kalBilNota{margin:6px 0 0;overflow-wrap:break-word}
.kalBilNota:empty{display:none}
.kalBilRuj{display:block;overflow-wrap:break-word;color:var(--pudar)}
.uWangABaris{flex-wrap:wrap}
.uWangABaris .t{flex:1 1 12em;min-width:0}
.uWangABaris .kalAksi,.rwSaTertunda .kalAksi{margin:4px 0 0;justify-content:flex-end}
.akGanjaran .baris .t{flex:1 1 9em;min-width:0}
.akGanjaran .baris .v{flex:0 0 auto}
.akGjKadar{border:0;margin:0 0 8px;padding:0;min-width:0}
.akGjBaris{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:8px;align-items:end;margin:0 0 6px}
.akGjBaris .fld{margin:0;min-width:0}
.akGjBorang .row{flex-wrap:wrap}
.akGjBorang .row>.fld{flex:1 1 160px;min-width:0}
.akGjBorang select,.akGjBorang input{min-height:44px;width:100%}
.akGjCad{margin:4px 0 8px;padding-left:18px}
.akGjCad li{margin:3px 0;overflow-wrap:break-word}
.akGjRingkas .baris{flex-wrap:wrap}
.akGjRingkas .baris .t{flex:1 1 10em;min-width:0}
.akGjRingkas .baris .v{flex:0 1 auto;min-width:0;overflow-wrap:break-word;text-align:right}
.akCaj{margin:4px 0 10px}
.akCaj>summary{min-height:44px;display:flex;align-items:center;cursor:pointer}
.akCaj .row{flex-wrap:wrap;margin-top:6px}
.akCaj .row>.fld{flex:1 1 150px;min-width:0}
.rwStatGrid.rwStatSatu{grid-template-columns:minmax(0,1fr)}
@media(min-width:720px){.rwStatGrid.rwStatSatu{grid-template-columns:minmax(0,1fr)}}
.rwTgCalon{margin:6px 0 4px;padding:8px 10px;border-radius:var(--r);background:var(--kertas2)}
.rwTgCalon .baris{flex-wrap:wrap}
.rwTgCalon .baris .t{flex:1 1 10em;min-width:0}
.rwTgCalon .pill,.rwSaRingkas .pautanKad,.rwSifar .cip{min-height:44px}
.rwSifar .baris{flex-wrap:wrap}
.rwSifar .baris .t{flex:1 1 10em;min-width:0}
.rwSfBaki{border-top:1px solid var(--garis);margin-top:4px;padding-top:8px}
.rwSfBaki.rwNeg .v,.rwSfBaki.rwNeg .t b{color:var(--merah)}
.rwSifar .rwBorang,.rwAmaranBelanja .rwB{margin-top:8px}
.rwSaRingkas{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px;margin:6px 0 2px}
.rwSaRingkas .note{flex:1 1 14em;min-width:0;overflow-wrap:break-word}
.rwSaTertunda .baris{flex-wrap:wrap}
.rwSaTertunda .baris .t{flex:1 1 12em;min-width:0}

/* ═══ p145-keselamatan: PENGESAHAN DUA LANGKAH (public/dua-langkah.js) — Tetapan › Kaedah log masuk, skrin kod log masuk & kad pulih kata
   laluan. Token reka sedia ada sahaja; sasaran sentuh ≥ 44 px; membalut pada 320 px (tiada lebar tetap > 360 px). Kod QR hitam atas putih
   (atribut SVG) dengan zon senyap — kontras penuh dalam tema gelap; kod pemulihan & kunci = fon tetap lebar, dipecah di sempadan kumpulan. */
.dlKad{margin-top:14px;padding-top:12px;border-top:1px dashed var(--garis);min-width:0}
.dlKad:empty{display:none}
.dlStatus{border-bottom:none}
.dlStatus .tag{flex:0 0 auto}
.dlBaris{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.dlBaris>.btn{flex:1 1 12em;min-height:44px}
.dlBahaya{color:var(--merah)}
.dlSahkan{margin-top:12px;padding:12px;border:1px solid var(--garis);border-radius:var(--r);background:var(--kertas3)}
.dlSahkan[hidden]{display:none!important}
.dlPesan{color:var(--merah);margin:8px 0 0;min-height:1em}
.dlPesan:empty{display:none}
.dlAmaran{color:var(--amber)}
.dlBerjaya{color:var(--hijau);font-weight:600}
.dlDisediakan{margin:8px 0 0}
.dlLangkah{margin:8px 0 0;padding-left:1.3em;display:grid;gap:12px}
.dlLangkah>li{min-width:0}
.dlLangkah p{margin:0 0 8px}
.dlQrKotak{display:flex;justify-content:center;margin:6px 0 10px}
.dlQr{display:block;width:min(220px,70vw);height:auto;border-radius:var(--r);border:1px solid var(--garis)}
.dlRahsiaBaris{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.dlRahsia,.dlKodSenarai code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:15px;font-weight:600;letter-spacing:.06em;
  padding:6px 10px;border-radius:var(--r);background:var(--kertas2);border:1px solid var(--garis);color:var(--dakwat);overflow-wrap:break-word;min-width:0}
.dlRahsia{flex:1 1 14em;user-select:all;-webkit-user-select:all}
.dlRahsiaBaris>.btn{flex:0 0 auto;min-height:44px}
.dlKodKotak{margin-top:12px;padding:12px;border:1px solid var(--emas);border-radius:var(--r);background:var(--emas-lembut)}
.dlKodSenarai{list-style:decimal;margin:10px 0 4px;padding-left:2em;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11.5em),1fr));gap:6px 16px}
.dlKodSenarai li{min-width:0}
.dlKodSenarai code{display:inline-block;user-select:all;-webkit-user-select:all}
.dlSetuju{display:flex;gap:10px;align-items:flex-start;margin:12px 0;line-height:1.5;cursor:pointer;min-height:44px}
.dlSetuju input{width:22px;height:22px;flex:none;margin-top:1px}
.dlRuang{height:9px}
#kodMfaKad .pill{margin-top:8px}
#kodMfaKad input,.dlKad input,#pulih_kod{letter-spacing:.08em}

/* ── p145:kumpulan — buku kumpulan (bk*), komen & @sebutan (km*, btnKomen*), tugasan berulang & senarai kemas (tg*, sbTemplat), susunan
   lorong kedai (beliLorong*, sbLorong*), mod memasak (masak*). Token reka sedia ada sahaja; sasaran sentuh ≥ 44 px; teks membalut (break-word);
   baris label + tindakan membalut pada skrin sempit (tiada skrol mendatar 320 px); fokus kelihatan melalui gaya butang/pill sedia ada. ── */
.bkWadah{margin:0 0 12px}
.bkKad{overflow-wrap:break-word}
.bkIntro{margin:4px 0 10px}
.bkSenarai{display:flex;flex-direction:column;gap:2px}
.bkBaris{width:100%;text-align:left;min-height:48px}
.bkArkib{margin-top:8px}
.bkArkib>summary{min-height:44px;display:flex;align-items:center;cursor:pointer;color:var(--pudar)}
.bkKepala{display:flex;flex-direction:column;gap:4px;margin:0 0 10px}
.bkKepala>.pill{align-self:flex-start}
.bkTajuk{margin:4px 0 0;font-size:20px;line-height:1.25;overflow-wrap:break-word}
.bkBuku .tabBar{margin:10px 0}
.bkBelanja,.bkPindah{flex-wrap:wrap}
.bkBelanja .t,.bkPindah .t{flex:1 1 10em;min-width:0}
.bkBelanja .kalAksi,.bkPindah .kalAksi{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.bkBaki{font-variant-numeric:tabular-nums;white-space:normal}
.bkPositif{color:var(--hijau)}
.bkAksi{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 6px}
.bkBorang fieldset.bkSet,.bkBorang fieldset.bkAhliPilih{border:0;padding:0;margin:12px 0 0;min-width:0}
.bkBorang legend.lbl{padding:0;margin:0 0 6px}
.bkPeserta{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.bkPesertaBaris{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.bkPesertaBaris>.cip{flex:1 1 9em;min-height:44px}
.bkPesertaBaris>input{flex:0 1 9em;min-width:0;min-height:44px}
.bkHasil{margin-top:12px}
.bkTambahAhli{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.bkTambahAhli .rwAksi{display:flex;flex-wrap:wrap;gap:6px}
.bkBorang .rwItemBaris .t{display:flex;flex-wrap:wrap;gap:6px}
.bkBorang .rwItemBaris .t input{flex:1 1 8em;min-width:0;min-height:44px}
.btnKomenIkon{color:var(--pudar);min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:2px;border-radius:999px;background:none;border:0;padding:0 6px;flex:none;cursor:pointer;position:relative;font-size:17px}
.btnKomenIkon:hover,.btnKomenIkon:focus-visible{background:var(--kertas3);color:var(--cop)}
.btn.btnKomen{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:9px}
.kmLencana{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--cop);color:var(--kertas);font-size:12px;font-weight:700;line-height:1}
.kmTajuk{margin:4px 0 6px;font-size:20px}
.kmSenarai{display:flex;flex-direction:column;gap:10px}
.kmKomen{padding:10px 12px;border:1px solid var(--garis);border-radius:var(--r);background:var(--kertas2);overflow-wrap:break-word}
.kmKomen.kmSaya{background:var(--kertas3)}
.kmKomen.kmDipadam{background:none;border-style:dashed}
.kmKepala{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.kmTeks{margin:6px 0 0;white-space:normal;line-height:1.45}
.kmSebut{color:var(--cop)}
.kmAksi{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.kmTulis textarea{width:100%;min-height:88px}
.kmCadang{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 0}
.kmCadang:empty{display:none}
.kmCalon[aria-selected=true]{border-color:var(--cop);color:var(--cop)}
.kmBebenang{width:100%;text-align:left;min-height:48px}
.sbTemplat{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.sbLorong{list-style:none;margin:10px 0;padding:0;display:flex;flex-direction:column;gap:4px}
.sbLorong>li.sbBaris{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px}
.sbLorongNama{flex:1 1 10em;min-width:0}
.beliLorong{margin:6px 0 10px}
.beliLorongBaris{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.beliLorongBaris select{flex:1 1 12em;min-width:0;min-height:44px}
.beliKedaiLain{opacity:.85}
.masakTajuk{margin:4px 0 6px;font-size:22px;line-height:1.25;overflow-wrap:break-word}
.masakKunci{margin:0 0 8px}
.masakAmaran{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.masakPemasaSenarai{display:flex;flex-direction:column;gap:6px;margin:0 0 10px}
.masakPemasaBaris{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--garis);border-radius:var(--r);background:var(--kertas2)}
.masakPemasaBaris.tamat{border-color:var(--amber);box-shadow:inset 4px 0 0 var(--amber)}
.masakPemasaLabel{flex:1 1 10em;min-width:0;overflow-wrap:break-word}
.masakPemasaMasa{font-size:22px;font-variant-numeric:tabular-nums}
.masakPemasaAksi{display:flex;gap:6px;flex-wrap:wrap}
.masakTeks{font-size:clamp(20px,5.2vw,30px);line-height:1.45;margin:8px 0 14px;overflow-wrap:break-word}
.masakMasa{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:2px 12px;margin:2px 0;border-radius:999px;border:2px solid var(--cop);background:var(--kertas);color:var(--cop);font:inherit;font-size:.9em;cursor:pointer;vertical-align:baseline}
.masakMasa:hover,.masakMasa:focus-visible{background:var(--kertas3)}
.masakNav{display:flex;flex-wrap:wrap;gap:10px}
.masakNav>.btn{flex:1 1 9em;min-height:52px;font-size:18px}
.masakSemua>summary{min-height:44px;display:flex;align-items:center;cursor:pointer}
.masakSemua ol{margin:8px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:6px}
.masakSemua .pautanTeks{text-align:left;min-height:44px}
.masakKini{font-weight:700;color:var(--cop)}
.masakBahanKepala{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px}
.masakSkala{display:flex;align-items:center;gap:10px}
.masakSkala>b{min-width:2ch;text-align:center;font-size:18px}
.masakSemak{min-height:48px}
.masakSemak.siap .t{text-decoration:line-through;color:var(--pudar)}
@media(min-width:720px){.masakTeks{font-size:30px}.bkPesertaBaris>.cip{flex:0 1 14em}}
/* ── p145-borangp: Pembantu Borang P (Pendapatan sampingan › Sumber › Borang P; kad Cukai "Borang lain") ── */
.niaBorangP{margin-top:6px;align-self:flex-start;min-height:44px}
.bpKad .bpTutup{margin-top:10px;min-height:44px}
.bpJujur{padding:8px 10px;border-radius:10px;background:var(--cop-lembut);color:var(--dakwat)}
.bpSumber{margin:8px 0 0;overflow-wrap:break-word}
.bpSumber a{display:inline-flex;align-items:center;min-height:44px;padding:0 2px}
.bpPekongsi{border:1px solid var(--garis);border-radius:var(--r);padding:10px 12px 12px;margin:0 0 12px;min-width:0;background:var(--kertas2)}
.bpPekongsi legend{padding:0 6px;font-weight:650;max-width:100%;overflow-wrap:break-word}
.bpDua,.bpGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:0 12px;min-width:0}
.bpPilih{display:flex;flex-wrap:wrap;gap:4px 16px;margin:2px 0 8px}
.bpRadio{display:inline-flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;min-width:0;overflow-wrap:break-word}
.bpRadio input{width:20px;height:20px;flex:none}
.bpManfaat,.bpLanjut,.bpPek{margin:6px 0;min-width:0}
.bpManfaat>summary,.bpLanjut>summary,.bpPek>summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:600;overflow-wrap:break-word}
.bpBuang{margin-top:6px;min-height:44px}
.bpSimpan{margin-top:12px}
.bpSemak{margin:6px 0 0;padding-left:20px}
.bpSemak li{margin:4px 0;overflow-wrap:break-word}
.bpRalat{color:var(--merah)}
.bpAmaran{color:var(--amber)}
.bpNotaSemak{color:var(--pudar)}
.bpKotak{flex-wrap:wrap}
.bpKotak .t{min-width:0;overflow-wrap:break-word}
.bpKotak .v.bpVTeks{white-space:normal;flex:0 1 auto;min-width:0;max-width:100%;overflow-wrap:break-word;text-align:right}
.bpSalin{min-height:44px;flex:none}
.bpSek{margin:14px 0 2px}
.bpAksi{gap:8px;flex-wrap:wrap}
.bpAksi .btn{flex:1 1 160px;min-height:44px}
/* ── p145 wang-b: laporan & paparan tersimpan (Wang), kad imej kongsi, rentetan & cabaran (Lagi), Tanya wang saya, semak leret, pegangan ── */
.lwSenarai{display:flex;flex-direction:column}
.lwBaris{width:100%;text-align:left;min-height:44px}
.lwCip{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.lwCip .pill{min-height:44px}
.lwPanel{text-align:left;max-height:80vh;overflow-y:auto;overflow-x:hidden;min-width:0}
.lwGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:8px 12px}
.lwGrid[hidden]{display:none}
.lwGrid .fld{min-width:0}
.lwGrid select,.lwGrid input{width:100%;min-height:44px}
.lwSet{border:0;padding:0;margin:10px 0 0;min-width:0}
:where(.lwSet) legend{padding:0;margin-bottom:4px}
.lwPilih{display:inline-flex;align-items:center;gap:6px;cursor:pointer;max-width:100%;overflow-wrap:break-word}
.lwPilih input{width:18px;height:18px;margin:0;flex:none;accent-color:var(--cop)}
.lwPilih:has(input:checked){background:var(--cop-lembut);border-color:var(--cop);color:var(--cop)}
.lwPilih:focus-within{box-shadow:var(--fokus)}
.lwLipat{margin:10px 0}
.lwRingkas{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:12px 0 4px}
.lwRingkas b{font-size:var(--fs-sederhana)}
.lwRingkas .note{flex:1 1 12em;min-width:0}
.lwJadual{display:flex;flex-direction:column;margin:8px 0;border:1px solid var(--garis);border-radius:var(--r);overflow:hidden}
.lwJBaris{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1.2fr) minmax(0,.7fr) minmax(0,1.1fr);gap:6px;padding:8px 10px;border-top:1px solid var(--garis);font-size:14px}
.lwJBaris:first-child{border-top:0}
.lwJBaris span{min-width:0;overflow-wrap:break-word}
.lwJBaris span.angka{text-align:right}
.lwJKepala{background:var(--kertas3);font-weight:700;font-size:13px}
.lwRekod{display:flex;flex-direction:column}
.lwAksi{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.lwAksi .btn{flex:1 1 auto;min-height:44px}
@media(max-width:380px){.lwJBaris{grid-template-columns:minmax(0,1.6fr) minmax(0,1.2fr) minmax(0,.6fr);font-size:13px}.lwJBaris span:nth-child(4){display:none}}
.wangKongsiBaris{display:flex;justify-content:flex-end;margin:4px 0 8px}
.wangKongsiBaris .btn{min-height:44px;flex:0 1 auto;max-width:100%;white-space:normal}
.kwSembunyi{margin:10px 0 0;cursor:pointer;border-bottom:0}
.kwSembunyi input{width:21px;height:21px;flex:none;accent-color:var(--cop)}
.mgIngat{cursor:pointer;border-bottom:0;margin-top:6px}
.mgIngat input{width:21px;height:21px;flex:none;accent-color:var(--cop)}
.mgCabaran{margin:8px 0 0;color:var(--cop)}
.tanyaWangNota{margin:10px 0 4px}
.cbRentetan{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:var(--r);background:var(--hijau-lembut);margin:0 0 10px}
.cbRentetan .t{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 10em}
.cbIkon{font-size:22px;line-height:1;flex:none}
.cbSenarai{display:flex;flex-direction:column;gap:10px}
.cbBaris{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border:1px solid var(--garis);border-radius:var(--r);background:var(--kertas2)}
.cbBaris.berjaya{border-color:var(--hijau);background:var(--hijau-lembut)}
.cbAtas{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px}
.cbAtas b{flex:1 1 12em;min-width:0;overflow-wrap:break-word}
.cbAtas .pill{min-height:44px}
.cbBaris .bar i{background:var(--hijau)}
.cbGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin:6px 0 0}
.cbLencana{display:flex;flex-direction:column;gap:4px;padding:10px;border-radius:var(--r);border:1px solid var(--garis);background:var(--kertas2);min-width:0;overflow-wrap:break-word;opacity:.8}
.cbLencana b{font-size:13px;line-height:1.3}
.cbLencana .note{font-size:12px}
.cbLencana.dicapai{opacity:1;border-color:var(--cop);background:var(--cop-lembut)}
.cbLencana:not(.dicapai) .cbIkon{filter:grayscale(1)}
@media(max-width:360px){.cbGrid{grid-template-columns:1fr 1fr}}
.tkLeretTogol{display:flex;justify-content:flex-end;margin:0 0 8px}
.tkLeretTogol .pill{min-height:44px}
.tkLeret{display:flex;flex-direction:column;gap:10px}
.tkLeretTimbun{display:grid;overflow:hidden;padding:6px 4px 14px}
.tkLeretTimbun>*{grid-area:1/1}
.tkLeretKad{display:flex;flex-direction:column;gap:8px;padding:18px;border-radius:var(--r-besar);border:1px solid var(--garis);background:var(--kertas2);box-shadow:var(--bayang);min-height:180px;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;transition:transform var(--gerak) ease,border-color var(--gerak) ease;overflow-wrap:break-word;min-width:0}
.tkLeretKad.seret{transition:none;cursor:grabbing}
.tkLeretKad:focus-visible{outline:none;box-shadow:var(--fokus),var(--bayang)}
.tkLeretKad.belakang{transform:translateY(8px) scale(.97);opacity:.55;box-shadow:none}
.tkLeretKad[data-arah=kanan]{border-color:var(--hijau);background:var(--hijau-lembut)}
.tkLeretKad[data-arah=kiri]{border-color:var(--amber);background:var(--amber-lembut)}
.tkLeretKad[data-arah=atas]{border-color:var(--cop);background:var(--cop-lembut)}
.tkLeretJenis{display:flex;align-items:center;gap:6px;color:var(--pudar);font-size:13px;font-weight:600}
.tkLeretTajuk{font-size:var(--fs-tajuk);line-height:1.3}
.tkLeretAmaun{font-size:var(--fs-besar)}
.tkLeretButang{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tkLeretButang .btn{min-height:48px;white-space:normal;padding-left:8px;padding-right:8px}
.tkLeretBil,.tkLeretNota,.tkLeretPetunjuk{margin:0}
@media(max-width:340px){.tkLeretButang{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.tkLeretKad{transition:none}}
.akPegangan .akBaris{width:100%;text-align:left}
.akPegangan .akStat4{margin-bottom:8px}
/* p145-niaga — penyata pelanggan, caj lewat, tahap harga, medan tersuai, wang pejabat (perjalanan & runcit), cuti pekerja, ringkasan Borang E */
.niPlJadual,.gpkJadualE{width:100%;border-collapse:collapse;font-size:var(--fs-nota);font-variant-numeric:tabular-nums}
.niPlJadual th,.niPlJadual td,.gpkJadualE th,.gpkJadualE td{padding:6px 8px;border-bottom:1px solid var(--garis);text-align:left;vertical-align:top}
.niPlJadual td:nth-child(3),.gpkJadualE td:first-child{min-width:9em}
.niPlJadual th,.gpkJadualE th{color:var(--pudar);font-weight:650;background:var(--kertas2)}
.niPlJadual .n,.gpkJadualE .n{text-align:right;white-space:nowrap}
.niPlJadual td button{min-height:44px;min-width:44px}
.niCajNota{color:var(--amber)}
.niCajGanti{margin:8px 0;padding:8px 10px;border:1px solid var(--garis);border-radius:var(--r);background:var(--kertas2)}
.niCajGanti summary{min-height:44px;display:flex;align-items:center;cursor:pointer}
.niCajGanti summary:focus-visible{outline:2px solid var(--cop);outline-offset:2px}
.niTet145{display:flex;flex-direction:column;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--garis)}
.niTahapInput{width:100%;min-width:88px;min-height:44px}
.tuntutanPejabat{flex-wrap:wrap;gap:8px}
.tuntutanPejabat .btn{flex:1 1 180px;min-height:44px}
.wpTajuk{margin:4px 0 6px;font-size:var(--fs-tajuk);color:var(--dakwat);overflow-wrap:break-word}
.wpBorang{display:flex;flex-direction:column;gap:8px}
.wpBorang .row,.wpBarisAnggaran{flex-wrap:wrap;gap:8px}
.wpBorang .row>.fld,.wpBarisAnggaran>.fld{flex:1 1 160px;min-width:0}
.wpBorang input,.wpBorang select{min-height:44px;max-width:100%}
.wpKad{display:flex;flex-direction:column;gap:6px}
.wpKad .niInvAksi{flex-wrap:wrap}
.wpBaris{padding:8px 0;border-top:1px solid var(--garis)}
.wpPenyelesaian{padding:8px 10px;border-radius:var(--r);background:var(--cop-lembut);color:var(--dakwat)}
.gpkCutiMohon,.gpkCutiSenarai,.gpkCutiBaki,.gpkCutiKalendar,.gpkCutiHak,.gpkCutiAsas,.gpkBorangE{display:flex;flex-direction:column;gap:8px}
.gpkCutiGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,120px),1fr));gap:8px}
.gpkCutiGrid input{min-height:44px;width:100%}
.gpkHariRehat{display:flex;flex-wrap:wrap;gap:6px 14px}
.gpkHariRehat label{min-height:44px;display:inline-flex;align-items:center;gap:6px}
.gpkCutiBaris{padding:8px 0;border-bottom:1px solid var(--garis)}
.gpkCutiBaris:last-child{border-bottom:0}
.gpkCutiBaris .gpkAksi{flex-wrap:wrap;gap:6px}
.gpkKalGrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.gpkKalSel{position:relative;min-height:44px;display:flex;align-items:flex-start;justify-content:flex-start;padding:4px 6px;border:1px solid var(--garis);border-radius:var(--r);background:var(--kertas);font-size:var(--fs-nota);font-variant-numeric:tabular-nums}
.gpkKalSel.kosong{border-color:transparent;background:none}
.gpkKalSel.rehat{background:var(--kertas2);color:var(--pudar)}
.gpkKalSel.ada{border-color:var(--cop);background:var(--cop-lembut)}
.gpkKalBil{position:absolute;right:4px;bottom:3px;min-width:18px;padding:0 4px;border-radius:999px;background:var(--cop);color:var(--atas-cop);font-size:11px;font-weight:700;line-height:18px;text-align:center}
.gpkBorangE .gpkEksport{display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:380px){.gpkKalSel{padding:2px 3px}.gpkKalBil{right:2px;bottom:2px;min-width:16px;line-height:16px}.niPlJadual th,.niPlJadual td,.gpkJadualE th,.gpkJadualE td{padding:5px 6px}}
.wpLembar .wrap{display:flex;flex-direction:column;gap:10px}
/* ── Pusingan 149 (pariti Dooit): warna kategori pilihan pengguna (swatch kategori-saya-kira WARNA_KATEGORI → token palet; tema gelap ikut token),
   editor rupa "Kategori saya" (grid emoji ≥ 44px, swatch radio), segmen Keperluan/Kehendak/Simpanan, tag akaun "tidak dikira", kumpulan Hari/Bulan. */
.cartaDonat circle.siri-copLembut{stroke:color-mix(in srgb,var(--cop) 55%,var(--kertas2))}.cartaDonat circle.siri-emasGelap{stroke:var(--emas-gelap)}
.cartaDonat circle.siri-hijauGelap{stroke:color-mix(in srgb,var(--hijau) 65%,var(--dakwat))}.cartaDonat circle.siri-merahLembut{stroke:color-mix(in srgb,var(--merah) 55%,var(--kertas2))}
.cartaDonatLegenda i.siri-copLembut,.ksSwatch i.siri-copLembut{background:var(--cop-lembut);background:color-mix(in srgb,var(--cop) 55%,var(--kertas2))}.cartaDonatLegenda i.siri-emasGelap,.ksSwatch i.siri-emasGelap{background:var(--emas-gelap)}
.cartaDonatLegenda i.siri-hijauGelap,.ksSwatch i.siri-hijauGelap{background:var(--hijau);background:color-mix(in srgb,var(--hijau) 65%,var(--dakwat))}.cartaDonatLegenda i.siri-merahLembut,.ksSwatch i.siri-merahLembut{background:var(--merah-lembut);background:color-mix(in srgb,var(--merah) 55%,var(--kertas2))}
.ksSwatch i.siri-cop{background:var(--cop)}.ksSwatch i.siri-emas{background:var(--emas)}.ksSwatch i.siri-hijau{background:var(--hijau)}.ksSwatch i.siri-amber{background:var(--amber)}.ksSwatch i.siri-merah{background:var(--merah)}.ksSwatch i.siri-pudar{background:var(--pudar)}
.ksIkon{flex:none;font-size:20px;line-height:1;width:28px;text-align:center}
.ksTagKelas{font-size:11.5px;font-weight:600;color:var(--pudar);background:var(--kertas3);border-radius:999px;padding:2px 8px;white-space:nowrap}
.ksRupa{margin-top:10px;padding:10px 12px;border:1px solid var(--garis);border-radius:var(--r);background:var(--kertas)}
.ksRupa .lbl{margin-top:8px}
.ksEmojiGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:4px;margin:6px 0}
.ksEmojiGrid button{min-width:44px;min-height:44px;border:1.5px solid transparent;border-radius:10px;background:var(--kertas2);font-size:20px;line-height:1;cursor:pointer;padding:0}
.ksEmojiGrid button[aria-pressed=true]{border-color:var(--cop);background:var(--cop-lembut)}
.ksEmojiGrid button:focus-visible{outline:2px solid var(--cop);outline-offset:-2px}
.ksIkonTaip{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ksIkonTaip input{width:5.5em;text-align:center;font-size:20px}
.ksSwatchBaris{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.ksSwatch{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px 0 8px;border:1.5px solid var(--garis);border-radius:999px;background:var(--kertas2);cursor:pointer;font-size:13px;font-weight:600}
.ksSwatch input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.ksSwatch i{width:16px;height:16px;border-radius:50%;flex:none;background:var(--kertas3);border:1px solid color-mix(in srgb,var(--dakwat) 15%,transparent)}
.ksSwatch.pilih{border-color:var(--cop);background:var(--cop-lembut)}
.ksSwatch:focus-within{outline:2px solid var(--cop);outline-offset:2px}
.ksRupaAksi{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.ksRupaAksi .btn{min-height:44px}
.ksSubCip .ksRupaSub{min-width:44px;min-height:44px;border:0;background:none;color:inherit;cursor:pointer;font:inherit;padding:0 6px}
.nwsKelas{margin:6px 0 2px}
.nwsNota{margin:4px 0 0;font-size:12.5px}
.akTagLuar{margin-left:6px;font-size:11px;font-weight:600;color:var(--pudar);background:var(--kertas3);border-radius:999px;padding:1px 7px;vertical-align:middle;white-space:nowrap}
.akBaris.akLuar .v{opacity:.72}
.akTogol{display:flex;align-items:flex-start;gap:10px;min-height:44px;padding:10px 0;cursor:pointer}
.akTogol input{width:22px;height:22px;flex:none;margin:1px 0 0;accent-color:var(--cop)}
.akTogol .t{display:flex;flex-direction:column;gap:2px;min-width:0}
.akKumpul{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px}
.akKumpul .tabBar{margin:0;flex:0 1 auto}
.akKumpulKepala{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 10px;padding:10px 12px 4px;border-top:1px solid var(--garis);margin-top:4px}
.akKumpulKepala:first-child{border-top:0;margin-top:0}
.akKumpulKepala b{font-size:13.5px}
.akKumpulKepala .note{font-size:12px;font-variant-numeric:tabular-nums;text-align:right;flex:1 1 auto}
.akKumpulKepala .note .hijau{color:var(--hijau)}
.resitKelas{margin-top:-2px}
.rwBelanjaTogol{display:flex;align-items:flex-start;gap:10px;min-height:44px;padding:8px 0;cursor:pointer}
.rwBelanjaTogol input{width:22px;height:22px;flex:none;margin:1px 0 0;accent-color:var(--cop)}
.dsMula{margin-top:8px}
.dsMulaKad .baris{padding:8px 0}