/* public/tema.css — Design tokens MINIFIX (Teal/Cyan Profesional) */
:root{
  /* Bayang elemen terapung (FAB + item menunya). Pd tema gelap, angkatan
     datang drpd bayang hitam pekat + sedikit pancaran jenama. */
  --bayang-fab:0 2px 6px rgba(0,0,0,.5), 0 10px 30px rgba(6,182,212,.22);
  --bayang-apung:0 2px 8px rgba(0,0,0,.45);
  /* Dark (lalai) */
  /* Latar belakang lapisan (bg=terluar, bg2/bg3=lapisan atas, panel/panel2=kad/borang) */
  --bg:#050B14;--bg2:#0A1220;--bg3:#16233A;--panel:#0F1A2B;--panel2:#132238;
  /* Garis sempadan/pembahagi (line=biasa, line2=lebih terang utk fokus/hover) */
  --line:#1E3A57;--line2:#264B6E;--line-halus:var(--line);
  /* Warna teks (teks=utama, teks2=sekunder/label, teks3=paling pudar/hint) */
  --teks:#E6F1FF;--teks2:#8FA9C4;--teks3:#5B7799;
  /* Warna jenama & aksi utama (cyan=aksen jenama, primary=butang/pautan utama) */
  --cyan:#22D3EE;--cyan2:#06B6D4;--primary:#0E7490;--on-primary:#F8FAFC;--on-accent:#03121B;
  /* Warna status/semantik (hijau/success=lulus, kuning=amaran, merah/danger=ralat, dsb) */
  --biru:#3B82F6;--hijau:#34D399;--success:#16A34A;--kuning:#FBBF24;
  --accent:#F59E0B;--oren:#FB923C;--merah:#F87171;--danger:#DC2626;--ungu:#A78BFA;
  --on-oren:#FFFFFF;--on-merah:#FFFFFF;
  /* Fasa N — dua hue TAMBAHAN (belum dipakai badge lain) utk status lab */
  --teal:#2DD4BF;--indigo:#818CF8;
  /* Radius sudut (r=kad/butang biasa, r2=lebih besar utk modal/panel) & tempoh transisi (pantas/sedang) */
  --r:12px;--r2:16px;--pantas:.16s cubic-bezier(.4,0,.2,1);--sedang:.28s cubic-bezier(.4,0,.2,1);
  /* Gaya Tema (Fasa 1) — token STRUKTUR. Nilai di sini = rupa gaya asal SEMASA
     (tiada perubahan piksel); gaya ceria/pastel menggantikannya di bawah.
     font-ui=fon antara muka, r-btn/r-input=sudut butang/medan borang,
     tebal-garis=ketebalan sempadan kad/medan, bayang-kad/bayang-btn=bayang
     kad/butang, garis-kad=warna sempadan kad, tekan-y=anjakan butang bila
     ditekan (kesan "tekan" gaya pastel). */
  --font-ui:'Inter','Segoe UI',system-ui,sans-serif;
  --r-btn:10px;--r-input:10px;--tebal-garis:1px;
  --bayang-kad:none;--bayang-btn:none;--garis-kad:var(--line);--tekan-y:0px;
  /* line-halus = pembahagi DALAMAN (garis jadual/senarai/hr/tab); garis-kad = sempadan LUAR kad/butang/medan. Asal & ceria: sama dgn --line. */
  --line-halus:var(--line);
  /* Fasa 70g — token teks selamat kontras (guna atas latar polos/tint, BUKAN chip pekat) */
  --txt-biru:var(--biru);--txt-ungu:var(--ungu);--txt-kuning:var(--kuning);--txt-cyan:var(--cyan);
  --txt-oren:var(--oren);--txt-hijau:var(--hijau);--txt-merah:var(--merah);--txt-neutral:var(--teks2);
  /* Token chip/badge — tema GELAP.
     Dulu: tint 15% LUTSINAR + teks warna tepu. Dua masalah dilaporkan
     pengguna: (a) tint 15% hampir hilang di atas panel gelap, jadi pil
     tidak kelihatan sbg pil; (b) warna tepu spt --teks2/--oren di atas
     latar gelap tidak cukup kontras utk dibaca sekali imbas.
     Sekarang: latar LEGAP (dicampur dgn --bg, bukan transparent) supaya
     ia konsisten di atas mana-mana permukaan, + teks DICERAHKAN ke arah
     putih. Sasaran kontras >= 7:1. */
  --bdg-biru-bg:color-mix(in srgb, var(--biru) 22%, var(--bg));
  --bdg-biru-fg:color-mix(in srgb, var(--biru) 60%, #FFFFFF);
  --bdg-ungu-bg:color-mix(in srgb, var(--ungu) 22%, var(--bg));
  --bdg-ungu-fg:color-mix(in srgb, var(--ungu) 70%, #FFFFFF);
  --bdg-kuning-bg:color-mix(in srgb, var(--kuning) 22%, var(--bg));
  --bdg-kuning-fg:color-mix(in srgb, var(--kuning) 92%, #FFFFFF);
  --bdg-cyan-bg:color-mix(in srgb, var(--cyan) 22%, var(--bg));
  --bdg-cyan-fg:color-mix(in srgb, var(--cyan) 92%, #FFFFFF);
  --bdg-oren-bg:color-mix(in srgb, var(--oren) 22%, var(--bg));
  --bdg-oren-fg:color-mix(in srgb, var(--oren) 80%, #FFFFFF);
  --bdg-hijau-bg:color-mix(in srgb, var(--hijau) 22%, var(--bg));
  --bdg-hijau-fg:color-mix(in srgb, var(--hijau) 90%, #FFFFFF);
  --bdg-neutral-bg:color-mix(in srgb, var(--teks2) 22%, var(--bg));
  --bdg-neutral-fg:color-mix(in srgb, var(--teks2) 75%, #FFFFFF);
  --bdg-merah-bg:color-mix(in srgb, var(--merah) 22%, var(--bg));
  --bdg-merah-fg:color-mix(in srgb, var(--merah) 70%, #FFFFFF);
  --bdg-teal-bg:color-mix(in srgb, var(--teal) 22%, var(--bg));
  --bdg-teal-fg:color-mix(in srgb, var(--teal) 85%, #FFFFFF);
  --bdg-indigo-bg:color-mix(in srgb, var(--indigo) 22%, var(--bg));
  --bdg-indigo-fg:color-mix(in srgb, var(--indigo) 70%, #FFFFFF);
}
/* Override token bila peranti guna tema terang sistem (prefers-color-scheme) dan
   staff belum pilih tema secara manual — kumpulan token sama makna spt di atas */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
  /* Bayang elemen terapung — versi TERANG. Nilai gelap (hitam 30-40%)
     pd latar putih menghasilkan kabus kelabu yang kelihatan kotor, bukan
     ketinggian; guna lapisan sangat lembut bersaiz berbeza. */
  --bayang-fab:0 1px 2px rgba(15,23,42,.10), 0 6px 16px rgba(15,23,42,.12), 0 14px 34px rgba(14,116,144,.16);
  --bayang-apung:0 1px 2px rgba(15,23,42,.06), 0 4px 12px rgba(15,23,42,.10);
    --bg:#F8FAFC;--bg2:#FFFFFF;--bg3:#EEF2F6;--panel:#FFFFFF;--panel2:#F1F5F9;
    --line:#E2E8F0;--line2:#CBD5E1;--line-halus:var(--line);
    --teks:#0F172A;--teks2:#475569;--teks3:#64748B;
    --cyan:#0891B2;--cyan2:#0E7490;--primary:#0E7490;--on-primary:#FFFFFF;--on-accent:#3B1F00;
    --biru:#2563EB;--hijau:#16A34A;--success:#15803D;--kuning:#D97706;
    --accent:#F59E0B;--oren:#EA580C;--merah:#DC2626;--danger:#B91C1C;--ungu:#7C3AED;
    --on-oren:#FFFFFF;--on-merah:#FFFFFF;
    /* Fasa N — dua hue TAMBAHAN (belum dipakai badge lain) utk status lab */
    --teal:#0D9488;--indigo:#4F46E5;
    /* Fasa 70g — shade lebih gelap (Tailwind ~800) supaya teks/chip lulus WCAG 4.5:1 atas latar terang */
    --txt-biru:#1E40AF;--txt-ungu:#5B21B6;--txt-kuning:#92400E;--txt-cyan:#164E63;
    --txt-oren:#9A3412;--txt-hijau:#166534;--txt-merah:#991B1B;--txt-neutral:var(--teks2);
    --bdg-biru-bg:#1E40AF;--bdg-biru-fg:#FFFFFF;
    --bdg-ungu-bg:#5B21B6;--bdg-ungu-fg:#FFFFFF;
    --bdg-kuning-bg:#92400E;--bdg-kuning-fg:#FFFFFF;
    --bdg-cyan-bg:#164E63;--bdg-cyan-fg:#FFFFFF;
    --bdg-oren-bg:#9A3412;--bdg-oren-fg:#FFFFFF;
    --bdg-hijau-bg:#166534;--bdg-hijau-fg:#FFFFFF;
    --bdg-neutral-bg:#475569;--bdg-neutral-fg:#FFFFFF;
    --bdg-merah-bg:#991B1B;--bdg-merah-fg:#FFFFFF;
    --bdg-teal-bg:#115E59;--bdg-teal-fg:#FFFFFF;
    --bdg-indigo-bg:#3730A3;--bdg-indigo-fg:#FFFFFF;
  }
}
/* Override token bila staff pilih tema TERANG secara manual (attr data-theme) */
:root[data-theme="light"]{
  /* Bayang elemen terapung — versi TERANG. Nilai gelap (hitam 30-40%)
     pd latar putih menghasilkan kabus kelabu yang kelihatan kotor, bukan
     ketinggian; guna lapisan sangat lembut bersaiz berbeza. */
  --bayang-fab:0 1px 2px rgba(15,23,42,.10), 0 6px 16px rgba(15,23,42,.12), 0 14px 34px rgba(14,116,144,.16);
  --bayang-apung:0 1px 2px rgba(15,23,42,.06), 0 4px 12px rgba(15,23,42,.10);
  --bg:#F8FAFC;--bg2:#FFFFFF;--bg3:#EEF2F6;--panel:#FFFFFF;--panel2:#F1F5F9;
  --line:#E2E8F0;--line2:#CBD5E1;--line-halus:var(--line);
  --teks:#0F172A;--teks2:#475569;--teks3:#64748B;
  --cyan:#0891B2;--cyan2:#0E7490;--primary:#0E7490;--on-primary:#FFFFFF;--on-accent:#3B1F00;
  --biru:#2563EB;--hijau:#16A34A;--success:#15803D;--kuning:#D97706;
  --accent:#F59E0B;--oren:#EA580C;--merah:#DC2626;--danger:#B91C1C;--ungu:#7C3AED;
  --on-oren:#FFFFFF;--on-merah:#FFFFFF;
  /* Fasa N — dua hue TAMBAHAN (belum dipakai badge lain) utk status lab */
  --teal:#0D9488;--indigo:#4F46E5;
  --txt-biru:#1E40AF;--txt-ungu:#5B21B6;--txt-kuning:#92400E;--txt-cyan:#164E63;
  --txt-oren:#9A3412;--txt-hijau:#166534;--txt-merah:#991B1B;--txt-neutral:var(--teks2);
  --bdg-biru-bg:#1E40AF;--bdg-biru-fg:#FFFFFF;
  --bdg-ungu-bg:#5B21B6;--bdg-ungu-fg:#FFFFFF;
  --bdg-kuning-bg:#92400E;--bdg-kuning-fg:#FFFFFF;
  --bdg-cyan-bg:#164E63;--bdg-cyan-fg:#FFFFFF;
  --bdg-oren-bg:#9A3412;--bdg-oren-fg:#FFFFFF;
  --bdg-hijau-bg:#166534;--bdg-hijau-fg:#FFFFFF;
  --bdg-neutral-bg:#475569;--bdg-neutral-fg:#FFFFFF;
  --bdg-merah-bg:#991B1B;--bdg-merah-fg:#FFFFFF;
  --bdg-teal-bg:#115E59;--bdg-teal-fg:#FFFFFF;
  --bdg-indigo-bg:#3730A3;--bdg-indigo-fg:#FFFFFF;
}
/* Override token bila staff pilih tema GELAP secara manual (attr data-theme,
   nilai sama dgn lalai :root — eksplisit supaya tak bergantung prefers-color-scheme) */
:root[data-theme="dark"]{
  /* Bayang elemen terapung (FAB + item menunya). Pd tema gelap, angkatan
     datang drpd bayang hitam pekat + sedikit pancaran jenama. */
  --bayang-fab:0 2px 6px rgba(0,0,0,.5), 0 10px 30px rgba(6,182,212,.22);
  --bayang-apung:0 2px 8px rgba(0,0,0,.45);
  --bg:#050B14;--bg2:#0A1220;--bg3:#16233A;--panel:#0F1A2B;--panel2:#132238;
  --line:#1E3A57;--line2:#264B6E;--line-halus:var(--line);
  --teks:#E6F1FF;--teks2:#8FA9C4;--teks3:#5B7799;
  --cyan:#22D3EE;--cyan2:#06B6D4;--primary:#0E7490;--on-primary:#F8FAFC;--on-accent:#03121B;
  --biru:#3B82F6;--hijau:#34D399;--success:#16A34A;--kuning:#FBBF24;
  --accent:#F59E0B;--oren:#FB923C;--merah:#F87171;--danger:#DC2626;--ungu:#A78BFA;
  --on-oren:#FFFFFF;--on-merah:#FFFFFF;
  /* Fasa N — dua hue TAMBAHAN (belum dipakai badge lain) utk status lab */
  --teal:#2DD4BF;--indigo:#818CF8;
  --txt-biru:var(--biru);--txt-ungu:var(--ungu);--txt-kuning:var(--kuning);--txt-cyan:var(--cyan);
  --txt-oren:var(--oren);--txt-hijau:var(--hijau);--txt-merah:var(--merah);--txt-neutral:var(--teks2);
  /* Sama seperti blok :root gelap di atas — latar legap + teks dicerahkan.
     JANGAN kembalikan ke tint 15% lutsinar: itu punca laporan "status
     susah dibaca". */
  --bdg-biru-bg:color-mix(in srgb, var(--biru) 22%, var(--bg));
  --bdg-biru-fg:color-mix(in srgb, var(--biru) 60%, #FFFFFF);
  --bdg-ungu-bg:color-mix(in srgb, var(--ungu) 22%, var(--bg));
  --bdg-ungu-fg:color-mix(in srgb, var(--ungu) 70%, #FFFFFF);
  --bdg-kuning-bg:color-mix(in srgb, var(--kuning) 22%, var(--bg));
  --bdg-kuning-fg:color-mix(in srgb, var(--kuning) 92%, #FFFFFF);
  --bdg-cyan-bg:color-mix(in srgb, var(--cyan) 22%, var(--bg));
  --bdg-cyan-fg:color-mix(in srgb, var(--cyan) 92%, #FFFFFF);
  --bdg-oren-bg:color-mix(in srgb, var(--oren) 22%, var(--bg));
  --bdg-oren-fg:color-mix(in srgb, var(--oren) 80%, #FFFFFF);
  --bdg-hijau-bg:color-mix(in srgb, var(--hijau) 22%, var(--bg));
  --bdg-hijau-fg:color-mix(in srgb, var(--hijau) 90%, #FFFFFF);
  --bdg-neutral-bg:color-mix(in srgb, var(--teks2) 22%, var(--bg));
  --bdg-neutral-fg:color-mix(in srgb, var(--teks2) 75%, #FFFFFF);
  --bdg-merah-bg:color-mix(in srgb, var(--merah) 22%, var(--bg));
  --bdg-merah-fg:color-mix(in srgb, var(--merah) 70%, #FFFFFF);
  --bdg-teal-bg:color-mix(in srgb, var(--teal) 22%, var(--bg));
  --bdg-teal-fg:color-mix(in srgb, var(--teal) 85%, #FFFFFF);
  --bdg-indigo-bg:color-mix(in srgb, var(--indigo) 22%, var(--bg));
  --bdg-indigo-fg:color-mix(in srgb, var(--indigo) 70%, #FFFFFF);
}
/* Fasa 1 (Ciri A — Sorotan Carian) — highlight teks padanan carian */
.carian-sorot{background:color-mix(in srgb, var(--kuning) 45%, transparent);color:inherit;border-radius:3px;padding:0 1px}

/* ============================================================
   GAYA PAPARAN (Fasa 1 — Gaya Tema): ceria · pastel
   Atribut <html data-gaya="ceria|pastel"> (tiada = gaya asal, tidak
   disentuh blok di bawah). Setiap gaya ada set token PENUH utk gelap &
   terang. Corak 3 peringkat sama spt di atas, tetapi spesifisiti
   dinaikkan supaya sentiasa menang atas token asal:
     - :root[data-gaya]                          (0,2,0) gelap lalai; di
       atas fail → menang atas blok asal sama spesifisiti (:not(...) media).
     - media terang :root[data-gaya]:not([data-theme="dark"])   (0,3,0)
     - :root[data-gaya][data-theme="light"|"dark"]              (0,3,0)
   Nilai chip (bdg-*) ialah hex LEGAP (bukan color-mix) supaya kontras
   boleh diuji automatik — lihat tests/kontrasGaya.test.js.
   ============================================================ */
/* ---- CERIA (indigo + lime; Plus Jakarta Sans) — GELAP (lalai bila data-gaya sahaja) ---- */
:root[data-gaya="ceria"]{
  --font-ui:'Plus Jakarta Sans','Inter','Segoe UI',system-ui,sans-serif;
  --r:16px;--r2:20px;--r-btn:12px;--r-input:12px;--tebal-garis:1px;--tekan-y:0px;
  --bayang-fab:0 2px 6px rgba(0,0,0,.5), 0 10px 30px rgba(163,230,53,.20);--bayang-apung:0 2px 8px rgba(0,0,0,.45);--bayang-kad:none;--bayang-btn:none;--garis-kad:var(--line);
  --bg:#0B0D17;--bg2:#10121E;--bg3:#1A1E30;--panel:#151827;--panel2:#1B1F33;
  --line:#262A3D;--line2:#343A55;--line-halus:var(--line);
  --teks:#F1F5F9;--teks2:#94A3B8;--teks3:#7C8AA5;
  --cyan:#22D3EE;--cyan2:#06B6D4;--primary:#A3E635;--on-primary:#0B0D17;--on-accent:#0B0D17;
  --biru:#60A5FA;--hijau:#A3E635;--success:#22C55E;--kuning:#FBBF24;
  --accent:#F472B6;--oren:#FB923C;--merah:#FB7185;--danger:#E11D48;--ungu:#C084FC;
  --on-oren:#1C1917;--on-merah:#1C1917;
  --teal:#2DD4BF;--indigo:#818CF8;
  --txt-biru:var(--biru);--txt-ungu:var(--ungu);--txt-kuning:var(--kuning);--txt-cyan:var(--cyan);
  --txt-oren:var(--oren);--txt-hijau:var(--hijau);--txt-merah:var(--merah);--txt-neutral:var(--teks2);
  --bdg-biru-bg:#93C5FD;--bdg-biru-fg:#0B0D17;--bdg-ungu-bg:#D8B4FE;--bdg-ungu-fg:#0B0D17;
  --bdg-kuning-bg:#FDE68A;--bdg-kuning-fg:#0B0D17;--bdg-cyan-bg:#67E8F9;--bdg-cyan-fg:#0B0D17;
  --bdg-oren-bg:#FDBA74;--bdg-oren-fg:#0B0D17;--bdg-hijau-bg:#BEF264;--bdg-hijau-fg:#0B0D17;
  --bdg-neutral-bg:#CBD5E1;--bdg-neutral-fg:#0B0D17;--bdg-merah-bg:#FDA4AF;--bdg-merah-fg:#0B0D17;
  --bdg-teal-bg:#5EEAD4;--bdg-teal-fg:#0B0D17;--bdg-indigo-bg:#A5B4FC;--bdg-indigo-fg:#0B0D17;
  /* tona kategori (kad statistik) */
  --tona-biru-bg:#203865;--tona-biru-fg:#93C5FD;--tona-hijau-bg:#2D421F;--tona-hijau-fg:#BEF264;--tona-oren-bg:#552B1F;--tona-oren-fg:#FDBA74;--tona-kuning-bg:#50341D;--tona-kuning-fg:#FDE68A;--tona-ungu-bg:#3B2062;--tona-ungu-fg:#D8B4FE;--tona-merah-bg:#521931;--tona-merah-fg:#FDA4AF;--tona-cyan-bg:#113C51;--tona-cyan-fg:#67E8F9;--tona-pink-bg:#501C3F;--tona-pink-fg:#F9A8D4;--tona-hero-bg:#3730A3;--tona-hero-fg:#E0E7FF;
}
/* ceria — TERANG bila sistem terang & staff belum pilih tema manual */
@media (prefers-color-scheme: light){
  :root[data-gaya="ceria"]:not([data-theme="dark"]){
    --bayang-fab:0 2px 6px rgba(17,24,39,.12), 0 10px 28px rgba(79,70,229,.28);--bayang-apung:0 1px 2px rgba(17,24,39,.06), 0 4px 12px rgba(17,24,39,.10);--bayang-kad:0 1px 2px rgba(17,24,39,.06);--bayang-btn:0 1px 2px rgba(17,24,39,.10);--garis-kad:var(--line);
    --bg:#F6F7FB;--bg2:#FFFFFF;--bg3:#EEF2FF;--panel:#FFFFFF;--panel2:#F3F4F6;
    --line:#E5E7EB;--line2:#D1D5DB;--line-halus:var(--line);
    --teks:#111827;--teks2:#4B5563;--teks3:#6B7280;
    --cyan:#0369A1;--cyan2:#0284C7;--primary:#4F46E5;--on-primary:#FFFFFF;--on-accent:#2A1000;
    --biru:#2563EB;--hijau:#15803D;--success:#15803D;--kuning:#B45309;
    --accent:#F97316;--oren:#C2410C;--merah:#E11D48;--danger:#BE123C;--ungu:#7C3AED;
    --on-oren:#FFFFFF;--on-merah:#FFFFFF;
    --teal:#0F766E;--indigo:#4F46E5;
    --txt-biru:#075985;--txt-ungu:#5B21B6;--txt-kuning:#78350F;--txt-cyan:#155E75;
    --txt-oren:#7C2D12;--txt-hijau:#14532D;--txt-merah:#9F1239;--txt-neutral:var(--teks2);
    --bdg-biru-bg:#E0F2FE;--bdg-biru-fg:#0C4A6E;--bdg-ungu-bg:#EDE9FE;--bdg-ungu-fg:#4C1D95;
    --bdg-kuning-bg:#FEF3C7;--bdg-kuning-fg:#78350F;--bdg-cyan-bg:#CFFAFE;--bdg-cyan-fg:#164E63;
    --bdg-oren-bg:#FFEDD5;--bdg-oren-fg:#7C2D12;--bdg-hijau-bg:#DCFCE7;--bdg-hijau-fg:#14532D;
    --bdg-neutral-bg:#F3F4F6;--bdg-neutral-fg:#374151;--bdg-merah-bg:#FFE4E6;--bdg-merah-fg:#881337;
    --bdg-teal-bg:#CCFBF1;--bdg-teal-fg:#134E4A;--bdg-indigo-bg:#EEF2FF;--bdg-indigo-fg:#3730A3;
  /* tona kategori (kad statistik) */
  --tona-biru-bg:#E0F2FE;--tona-biru-fg:#0C4A6E;--tona-hijau-bg:#DCFCE7;--tona-hijau-fg:#14532D;--tona-oren-bg:#FFEDD5;--tona-oren-fg:#7C2D12;--tona-kuning-bg:#FEF3C7;--tona-kuning-fg:#78350F;--tona-ungu-bg:#EDE9FE;--tona-ungu-fg:#4C1D95;--tona-merah-bg:#FFE4E6;--tona-merah-fg:#881337;--tona-cyan-bg:#CFFAFE;--tona-cyan-fg:#164E63;--tona-pink-bg:#FCE7F3;--tona-pink-fg:#831843;--tona-hero-bg:#4F46E5;--tona-hero-fg:#FFFFFF;
  }
}
/* ceria — TERANG eksplisit */
:root[data-gaya="ceria"][data-theme="light"]{
  --bayang-fab:0 2px 6px rgba(17,24,39,.12), 0 10px 28px rgba(79,70,229,.28);--bayang-apung:0 1px 2px rgba(17,24,39,.06), 0 4px 12px rgba(17,24,39,.10);--bayang-kad:0 1px 2px rgba(17,24,39,.06);--bayang-btn:0 1px 2px rgba(17,24,39,.10);--garis-kad:var(--line);
  --bg:#F6F7FB;--bg2:#FFFFFF;--bg3:#EEF2FF;--panel:#FFFFFF;--panel2:#F3F4F6;
  --line:#E5E7EB;--line2:#D1D5DB;--line-halus:var(--line);
  --teks:#111827;--teks2:#4B5563;--teks3:#6B7280;
  --cyan:#0369A1;--cyan2:#0284C7;--primary:#4F46E5;--on-primary:#FFFFFF;--on-accent:#2A1000;
  --biru:#2563EB;--hijau:#15803D;--success:#15803D;--kuning:#B45309;
  --accent:#F97316;--oren:#C2410C;--merah:#E11D48;--danger:#BE123C;--ungu:#7C3AED;
  --on-oren:#FFFFFF;--on-merah:#FFFFFF;
  --teal:#0F766E;--indigo:#4F46E5;
  --txt-biru:#075985;--txt-ungu:#5B21B6;--txt-kuning:#78350F;--txt-cyan:#155E75;
  --txt-oren:#7C2D12;--txt-hijau:#14532D;--txt-merah:#9F1239;--txt-neutral:var(--teks2);
  --bdg-biru-bg:#E0F2FE;--bdg-biru-fg:#0C4A6E;--bdg-ungu-bg:#EDE9FE;--bdg-ungu-fg:#4C1D95;
  --bdg-kuning-bg:#FEF3C7;--bdg-kuning-fg:#78350F;--bdg-cyan-bg:#CFFAFE;--bdg-cyan-fg:#164E63;
  --bdg-oren-bg:#FFEDD5;--bdg-oren-fg:#7C2D12;--bdg-hijau-bg:#DCFCE7;--bdg-hijau-fg:#14532D;
  --bdg-neutral-bg:#F3F4F6;--bdg-neutral-fg:#374151;--bdg-merah-bg:#FFE4E6;--bdg-merah-fg:#881337;
  --bdg-teal-bg:#CCFBF1;--bdg-teal-fg:#134E4A;--bdg-indigo-bg:#EEF2FF;--bdg-indigo-fg:#3730A3;
  /* tona kategori (kad statistik) */
  --tona-biru-bg:#E0F2FE;--tona-biru-fg:#0C4A6E;--tona-hijau-bg:#DCFCE7;--tona-hijau-fg:#14532D;--tona-oren-bg:#FFEDD5;--tona-oren-fg:#7C2D12;--tona-kuning-bg:#FEF3C7;--tona-kuning-fg:#78350F;--tona-ungu-bg:#EDE9FE;--tona-ungu-fg:#4C1D95;--tona-merah-bg:#FFE4E6;--tona-merah-fg:#881337;--tona-cyan-bg:#CFFAFE;--tona-cyan-fg:#164E63;--tona-pink-bg:#FCE7F3;--tona-pink-fg:#831843;--tona-hero-bg:#4F46E5;--tona-hero-fg:#FFFFFF;
}
/* ceria — GELAP eksplisit (nilai sama dgn lalai gaya, eksplisit utk menang atas media terang) */
:root[data-gaya="ceria"][data-theme="dark"]{
  --bayang-fab:0 2px 6px rgba(0,0,0,.5), 0 10px 30px rgba(163,230,53,.20);--bayang-apung:0 2px 8px rgba(0,0,0,.45);--bayang-kad:none;--bayang-btn:none;--garis-kad:var(--line);
  --bg:#0B0D17;--bg2:#10121E;--bg3:#1A1E30;--panel:#151827;--panel2:#1B1F33;
  --line:#262A3D;--line2:#343A55;--line-halus:var(--line);
  --teks:#F1F5F9;--teks2:#94A3B8;--teks3:#7C8AA5;
  --cyan:#22D3EE;--cyan2:#06B6D4;--primary:#A3E635;--on-primary:#0B0D17;--on-accent:#0B0D17;
  --biru:#60A5FA;--hijau:#A3E635;--success:#22C55E;--kuning:#FBBF24;
  --accent:#F472B6;--oren:#FB923C;--merah:#FB7185;--danger:#E11D48;--ungu:#C084FC;
  --on-oren:#1C1917;--on-merah:#1C1917;
  --teal:#2DD4BF;--indigo:#818CF8;
  --txt-biru:var(--biru);--txt-ungu:var(--ungu);--txt-kuning:var(--kuning);--txt-cyan:var(--cyan);
  --txt-oren:var(--oren);--txt-hijau:var(--hijau);--txt-merah:var(--merah);--txt-neutral:var(--teks2);
  --bdg-biru-bg:#93C5FD;--bdg-biru-fg:#0B0D17;--bdg-ungu-bg:#D8B4FE;--bdg-ungu-fg:#0B0D17;
  --bdg-kuning-bg:#FDE68A;--bdg-kuning-fg:#0B0D17;--bdg-cyan-bg:#67E8F9;--bdg-cyan-fg:#0B0D17;
  --bdg-oren-bg:#FDBA74;--bdg-oren-fg:#0B0D17;--bdg-hijau-bg:#BEF264;--bdg-hijau-fg:#0B0D17;
  --bdg-neutral-bg:#CBD5E1;--bdg-neutral-fg:#0B0D17;--bdg-merah-bg:#FDA4AF;--bdg-merah-fg:#0B0D17;
  --bdg-teal-bg:#5EEAD4;--bdg-teal-fg:#0B0D17;--bdg-indigo-bg:#A5B4FC;--bdg-indigo-fg:#0B0D17;
  /* tona kategori (kad statistik) */
  --tona-biru-bg:#203865;--tona-biru-fg:#93C5FD;--tona-hijau-bg:#2D421F;--tona-hijau-fg:#BEF264;--tona-oren-bg:#552B1F;--tona-oren-fg:#FDBA74;--tona-kuning-bg:#50341D;--tona-kuning-fg:#FDE68A;--tona-ungu-bg:#3B2062;--tona-ungu-fg:#D8B4FE;--tona-merah-bg:#521931;--tona-merah-fg:#FDA4AF;--tona-cyan-bg:#113C51;--tona-cyan-fg:#67E8F9;--tona-pink-bg:#501C3F;--tona-pink-fg:#F9A8D4;--tona-hero-bg:#3730A3;--tona-hero-fg:#E0E7FF;
}
/* ---- PASTEL (garis tebal, bayang keras; Nunito) — GELAP (lalai bila data-gaya sahaja) ---- */
:root[data-gaya="pastel"]{
  --font-ui:'Nunito','Inter','Segoe UI',system-ui,sans-serif;
  --r:18px;--r2:22px;--r-btn:14px;--r-input:14px;--tebal-garis:2px;--tekan-y:2px;
  --bayang-fab:4px 4px 0 #E7E5E4;--bayang-apung:3px 3px 0 #E7E5E4;--bayang-kad:4px 4px 0 var(--line);--bayang-btn:3px 3px 0 var(--line);--garis-kad:var(--line);
  --bg:#1C1917;--bg2:#231F1D;--bg3:#322D2A;--panel:#292524;--panel2:#332E2B;
  --line:#E7E5E4;--line2:#FAFAF9;--line-halus:#44403C;
  --teks:#FAFAF9;--teks2:#D6D3D1;--teks3:#A8A29E;
  --cyan:#5EEAD4;--cyan2:#2DD4BF;--primary:#A7F3D0;--on-primary:#1C1917;--on-accent:#1C1917;
  --biru:#93C5FD;--hijau:#86EFAC;--success:#22C55E;--kuning:#FDE68A;
  --accent:#FDE68A;--oren:#FDBA74;--merah:#FDA4AF;--danger:#E11D48;--ungu:#C4B5FD;
  --on-oren:#1C1917;--on-merah:#1C1917;
  --teal:#5EEAD4;--indigo:#A5B4FC;
  --txt-biru:var(--biru);--txt-ungu:var(--ungu);--txt-kuning:var(--kuning);--txt-cyan:var(--cyan);
  --txt-oren:var(--oren);--txt-hijau:var(--hijau);--txt-merah:var(--merah);--txt-neutral:var(--teks2);
  --bdg-biru-bg:#BFDBFE;--bdg-biru-fg:#1C1917;--bdg-ungu-bg:#DDD6FE;--bdg-ungu-fg:#1C1917;
  --bdg-kuning-bg:#FDE68A;--bdg-kuning-fg:#1C1917;--bdg-cyan-bg:#99F6E4;--bdg-cyan-fg:#1C1917;
  --bdg-oren-bg:#FED7AA;--bdg-oren-fg:#1C1917;--bdg-hijau-bg:#A7F3D0;--bdg-hijau-fg:#1C1917;
  --bdg-neutral-bg:#E7E5E4;--bdg-neutral-fg:#1C1917;--bdg-merah-bg:#FECDD3;--bdg-merah-fg:#1C1917;
  --bdg-teal-bg:#5EEAD4;--bdg-teal-fg:#1C1917;--bdg-indigo-bg:#C7D2FE;--bdg-indigo-fg:#1C1917;
  /* tona kategori (kad statistik) */
  --tona-biru-bg:#2F4367;--tona-biru-fg:#BFDBFE;--tona-hijau-bg:#215442;--tona-hijau-fg:#A7F3D0;--tona-oren-bg:#6C3E20;--tona-oren-fg:#FED7AA;--tona-kuning-bg:#67521B;--tona-kuning-fg:#FDE68A;--tona-ungu-bg:#483767;--tona-ungu-fg:#DDD6FE;--tona-merah-bg:#6A2D37;--tona-merah-fg:#FECDD3;--tona-cyan-bg:#22544E;--tona-cyan-fg:#99F6E4;--tona-pink-bg:#673049;--tona-pink-fg:#FBCFE8;--tona-hero-bg:#2F4367;--tona-hero-fg:#BFDBFE;
}
/* pastel — TERANG bila sistem terang & staff belum pilih tema manual */
@media (prefers-color-scheme: light){
  :root[data-gaya="pastel"]:not([data-theme="dark"]){
    --bayang-fab:4px 4px 0 #1C1917;--bayang-apung:3px 3px 0 #1C1917;--bayang-kad:4px 4px 0 var(--line);--bayang-btn:3px 3px 0 var(--line);--garis-kad:var(--line);
    --bg:#FFF8F1;--bg2:#FFFFFF;--bg3:#FFEDD5;--panel:#FFFFFF;--panel2:#FFF3E6;
    --line:#1C1917;--line2:#44403C;--line-halus:#E7E0D8;
    --teks:#1C1917;--teks2:#57534E;--teks3:#78716C;
    --cyan:#0F766E;--cyan2:#115E59;--primary:#6EE7B7;--on-primary:#1C1917;--on-accent:#1C1917;
    --biru:#1D4ED8;--hijau:#15803D;--success:#15803D;--kuning:#A16207;
    --accent:#FDE68A;--oren:#C2410C;--merah:#BE123C;--danger:#BE123C;--ungu:#6D28D9;
    --on-oren:#FFFFFF;--on-merah:#FFFFFF;
    --teal:#0F766E;--indigo:#4338CA;
    --txt-biru:#1E3A8A;--txt-ungu:#4C1D95;--txt-kuning:#713F12;--txt-cyan:#134E4A;
    --txt-oren:#7C2D12;--txt-hijau:#14532D;--txt-merah:#881337;--txt-neutral:var(--teks2);
    --bdg-biru-bg:#BFDBFE;--bdg-biru-fg:#1C1917;--bdg-ungu-bg:#DDD6FE;--bdg-ungu-fg:#1C1917;
    --bdg-kuning-bg:#FDE68A;--bdg-kuning-fg:#1C1917;--bdg-cyan-bg:#99F6E4;--bdg-cyan-fg:#1C1917;
    --bdg-oren-bg:#FED7AA;--bdg-oren-fg:#1C1917;--bdg-hijau-bg:#A7F3D0;--bdg-hijau-fg:#1C1917;
    --bdg-neutral-bg:#E7E5E4;--bdg-neutral-fg:#1C1917;--bdg-merah-bg:#FECDD3;--bdg-merah-fg:#1C1917;
    --bdg-teal-bg:#5EEAD4;--bdg-teal-fg:#1C1917;--bdg-indigo-bg:#C7D2FE;--bdg-indigo-fg:#1C1917;
  /* tona kategori (kad statistik) */
  --tona-biru-bg:#BFDBFE;--tona-biru-fg:#1C1917;--tona-hijau-bg:#A7F3D0;--tona-hijau-fg:#1C1917;--tona-oren-bg:#FED7AA;--tona-oren-fg:#1C1917;--tona-kuning-bg:#FDE68A;--tona-kuning-fg:#1C1917;--tona-ungu-bg:#DDD6FE;--tona-ungu-fg:#1C1917;--tona-merah-bg:#FECDD3;--tona-merah-fg:#1C1917;--tona-cyan-bg:#99F6E4;--tona-cyan-fg:#1C1917;--tona-pink-bg:#FBCFE8;--tona-pink-fg:#1C1917;--tona-hero-bg:#BFDBFE;--tona-hero-fg:#1C1917;
  }
}
/* pastel — TERANG eksplisit */
:root[data-gaya="pastel"][data-theme="light"]{
  --bayang-fab:4px 4px 0 #1C1917;--bayang-apung:3px 3px 0 #1C1917;--bayang-kad:4px 4px 0 var(--line);--bayang-btn:3px 3px 0 var(--line);--garis-kad:var(--line);
  --bg:#FFF8F1;--bg2:#FFFFFF;--bg3:#FFEDD5;--panel:#FFFFFF;--panel2:#FFF3E6;
  --line:#1C1917;--line2:#44403C;--line-halus:#E7E0D8;
  --teks:#1C1917;--teks2:#57534E;--teks3:#78716C;
  --cyan:#0F766E;--cyan2:#115E59;--primary:#6EE7B7;--on-primary:#1C1917;--on-accent:#1C1917;
  --biru:#1D4ED8;--hijau:#15803D;--success:#15803D;--kuning:#A16207;
  --accent:#FDE68A;--oren:#C2410C;--merah:#BE123C;--danger:#BE123C;--ungu:#6D28D9;
  --on-oren:#FFFFFF;--on-merah:#FFFFFF;
  --teal:#0F766E;--indigo:#4338CA;
  --txt-biru:#1E3A8A;--txt-ungu:#4C1D95;--txt-kuning:#713F12;--txt-cyan:#134E4A;
  --txt-oren:#7C2D12;--txt-hijau:#14532D;--txt-merah:#881337;--txt-neutral:var(--teks2);
  --bdg-biru-bg:#BFDBFE;--bdg-biru-fg:#1C1917;--bdg-ungu-bg:#DDD6FE;--bdg-ungu-fg:#1C1917;
  --bdg-kuning-bg:#FDE68A;--bdg-kuning-fg:#1C1917;--bdg-cyan-bg:#99F6E4;--bdg-cyan-fg:#1C1917;
  --bdg-oren-bg:#FED7AA;--bdg-oren-fg:#1C1917;--bdg-hijau-bg:#A7F3D0;--bdg-hijau-fg:#1C1917;
  --bdg-neutral-bg:#E7E5E4;--bdg-neutral-fg:#1C1917;--bdg-merah-bg:#FECDD3;--bdg-merah-fg:#1C1917;
  --bdg-teal-bg:#5EEAD4;--bdg-teal-fg:#1C1917;--bdg-indigo-bg:#C7D2FE;--bdg-indigo-fg:#1C1917;
  /* tona kategori (kad statistik) */
  --tona-biru-bg:#BFDBFE;--tona-biru-fg:#1C1917;--tona-hijau-bg:#A7F3D0;--tona-hijau-fg:#1C1917;--tona-oren-bg:#FED7AA;--tona-oren-fg:#1C1917;--tona-kuning-bg:#FDE68A;--tona-kuning-fg:#1C1917;--tona-ungu-bg:#DDD6FE;--tona-ungu-fg:#1C1917;--tona-merah-bg:#FECDD3;--tona-merah-fg:#1C1917;--tona-cyan-bg:#99F6E4;--tona-cyan-fg:#1C1917;--tona-pink-bg:#FBCFE8;--tona-pink-fg:#1C1917;--tona-hero-bg:#BFDBFE;--tona-hero-fg:#1C1917;
}
/* pastel — GELAP eksplisit (nilai sama dgn lalai gaya, eksplisit utk menang atas media terang) */
:root[data-gaya="pastel"][data-theme="dark"]{
  --bayang-fab:4px 4px 0 #E7E5E4;--bayang-apung:3px 3px 0 #E7E5E4;--bayang-kad:4px 4px 0 var(--line);--bayang-btn:3px 3px 0 var(--line);--garis-kad:var(--line);
  --bg:#1C1917;--bg2:#231F1D;--bg3:#322D2A;--panel:#292524;--panel2:#332E2B;
  --line:#E7E5E4;--line2:#FAFAF9;--line-halus:#44403C;
  --teks:#FAFAF9;--teks2:#D6D3D1;--teks3:#A8A29E;
  --cyan:#5EEAD4;--cyan2:#2DD4BF;--primary:#A7F3D0;--on-primary:#1C1917;--on-accent:#1C1917;
  --biru:#93C5FD;--hijau:#86EFAC;--success:#22C55E;--kuning:#FDE68A;
  --accent:#FDE68A;--oren:#FDBA74;--merah:#FDA4AF;--danger:#E11D48;--ungu:#C4B5FD;
  --on-oren:#1C1917;--on-merah:#1C1917;
  --teal:#5EEAD4;--indigo:#A5B4FC;
  --txt-biru:var(--biru);--txt-ungu:var(--ungu);--txt-kuning:var(--kuning);--txt-cyan:var(--cyan);
  --txt-oren:var(--oren);--txt-hijau:var(--hijau);--txt-merah:var(--merah);--txt-neutral:var(--teks2);
  --bdg-biru-bg:#BFDBFE;--bdg-biru-fg:#1C1917;--bdg-ungu-bg:#DDD6FE;--bdg-ungu-fg:#1C1917;
  --bdg-kuning-bg:#FDE68A;--bdg-kuning-fg:#1C1917;--bdg-cyan-bg:#99F6E4;--bdg-cyan-fg:#1C1917;
  --bdg-oren-bg:#FED7AA;--bdg-oren-fg:#1C1917;--bdg-hijau-bg:#A7F3D0;--bdg-hijau-fg:#1C1917;
  --bdg-neutral-bg:#E7E5E4;--bdg-neutral-fg:#1C1917;--bdg-merah-bg:#FECDD3;--bdg-merah-fg:#1C1917;
  --bdg-teal-bg:#5EEAD4;--bdg-teal-fg:#1C1917;--bdg-indigo-bg:#C7D2FE;--bdg-indigo-fg:#1C1917;
  /* tona kategori (kad statistik) */
  --tona-biru-bg:#2F4367;--tona-biru-fg:#BFDBFE;--tona-hijau-bg:#215442;--tona-hijau-fg:#A7F3D0;--tona-oren-bg:#6C3E20;--tona-oren-fg:#FED7AA;--tona-kuning-bg:#67521B;--tona-kuning-fg:#FDE68A;--tona-ungu-bg:#483767;--tona-ungu-fg:#DDD6FE;--tona-merah-bg:#6A2D37;--tona-merah-fg:#FECDD3;--tona-cyan-bg:#22544E;--tona-cyan-fg:#99F6E4;--tona-pink-bg:#673049;--tona-pink-fg:#FBCFE8;--tona-hero-bg:#2F4367;--tona-hero-fg:#BFDBFE;
}