/* =========================================================
   fixos-app.css — rupa jenama FixOS untuk skrin dalam app (index.html) yang melibatkan perjalanan pendaftaran:
   log masuk kedai, banner & halaman Langganan & Bil, wizard persediaan (onboarding), Bantuan, modal Naik Taraf.
   SEMUA pemilih berskop `body.fx` — kelas ini ditambah app.js HANYA bila tenant BUKAN MINIFIX
   (State.tetapan.kandunganMinifix === false). MINIFIX tidak berubah sedikit pun.
   Token: /fixos-tema.css (--fx-*). Dalam skop ini token tema app (--panel, --primary...) dipetakan semula ke palet FixOS,
   jadi komponen sedia ada (x-btn, x-panel, input-group...) mewarisi rupa baharu tanpa ubah markup.
   Modal-overlay: TIADA animasi pada lapisan skrin penuh (elak kelip Android, rujuk nota Fasa 88 dlm index.html).
   ========================================================= */
body.fx #loginPage,
body.fx #page-langganan,
body.fx #bannerLangganan,
body.fx #modalOnboarding,
body.fx #modalBantuanOb,
body.fx #modalNaikTaraf,
body.fx #modalWaRisiko {
  --bg:var(--fx-bg);--bg2:var(--fx-bg2);--bg3:var(--fx-bg2);--panel:var(--fx-kad);--panel2:var(--fx-kad2);
  --line:var(--fx-garis);--line2:var(--fx-garis2);--line-halus:var(--fx-garis);--garis-kad:var(--fx-garis);
  --teks:var(--fx-ink);--teks2:var(--fx-redup);--teks3:var(--fx-halus);
  --primary:var(--fx-ungu);--on-primary:var(--fx-on-ungu);--danger:var(--fx-merah);--on-merah:#FFFFFF;
  --tona-biru-bg:var(--fx-biru-lembut);--tona-biru-fg:var(--fx-biru-teks);
  --tona-cyan-bg:var(--fx-cyan-lembut);--tona-cyan-fg:var(--fx-cyan-teks);
  --tona-hijau-bg:var(--fx-hijau-lembut);--tona-hijau-fg:var(--fx-hijau-teks);
  --tona-oren-bg:var(--fx-oren-lembut);--tona-oren-fg:var(--fx-oren-teks);
  --tona-kuning-bg:var(--fx-kuning-lembut);--tona-kuning-fg:var(--fx-kuning-teks);
  --tona-ungu-bg:var(--fx-ungu-lembut);--tona-ungu-fg:var(--fx-ungu-teks);
  --tona-merah-bg:var(--fx-merah-lembut);--tona-merah-fg:var(--fx-merah-teks);
  --tona-pink-bg:var(--fx-pink-lembut);--tona-pink-fg:var(--fx-pink-teks);
  --cyan:var(--fx-cyan);--biru:var(--fx-biru);--hijau:var(--fx-hijau);--oren:var(--fx-oren);--ungu:var(--fx-ungu);--accent:var(--fx-pink);--merah:var(--fx-merah);--kuning:var(--fx-kuning);
  --txt-cyan:var(--fx-ungu-teks);--txt-merah:var(--fx-merah-teks);--txt-hijau:var(--fx-hijau-teks);
  --tebal-garis:1px;--r:14px;--r2:24px;--r-btn:14px;--r-input:14px;
  --bayang-kad:var(--fx-bayang);
  font-family:var(--fx-font);
}

/* ---------- Log masuk kedai ---------- */
body.fx #loginPage{position:relative;overflow:hidden;background:var(--fx-grad-kepala);color:var(--fx-ink)}
body.fx #loginPage::before,body.fx #loginPage::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
body.fx #loginPage::before{width:300px;height:300px;background:#F472B6;opacity:.28;top:-110px;right:-80px}
body.fx #loginPage::after{width:240px;height:240px;background:#FACC15;opacity:.2;bottom:-100px;left:-70px}
body.fx #loginPage .login-kad{position:relative;z-index:1;max-width:420px;padding:34px 26px 26px;border-radius:32px;border:0;background:var(--fx-kad);box-shadow:var(--fx-bayang-besar)}
body.fx #loginPage .login-logo{width:72px;height:72px;border-radius:24px;background:linear-gradient(135deg,#FACC15,#F472B6);color:#1A1033;font-size:30px;box-shadow:0 10px 24px rgba(190,24,93,.3);transform:rotate(-4deg)}
body.fx #loginPage .login-kad h1{letter-spacing:-.02em;font-size:26px;color:var(--fx-ink)}
body.fx #loginPage .login-sub{display:block;width:fit-content;margin:8px auto 22px;padding:3px 14px;border-radius:999px;background:var(--fx-ungu-lembut);color:var(--fx-ungu-teks);font-weight:800;font-size:12.5px}
body.fx #loginPage .input-group label{font-size:13px;font-weight:800;color:var(--fx-ink)}
body.fx #loginPage .input-ikon input{min-height:54px;border-radius:16px;border:2px solid var(--fx-garis);background:var(--fx-kad2);color:var(--fx-ink);font-weight:600}
body.fx #loginPage .input-ikon input:focus{border-color:var(--fx-ungu);background:var(--fx-kad);outline:none}
body.fx #loginPage .input-ikon>i{color:var(--fx-ungu-teks)}
body.fx #loginPage .btn-mata{min-width:44px;min-height:44px;color:var(--fx-ungu-teks)}
body.fx #loginPage .btn-primary{min-height:56px;border-radius:18px;font-size:16px;font-weight:800;background:var(--fx-ungu);color:var(--fx-on-ungu);border:0;box-shadow:0 8px 18px rgba(109,40,217,.32)}
body.fx #loginPage .btn-primary:hover{background:var(--fx-ungu-hover)}
body.fx #loginPage .login-nota{background:var(--fx-cyan-lembut);border:0;color:var(--fx-cyan-teks);border-radius:16px;font-size:12.5px}
body.fx #loginPage .login-nota i,body.fx #loginPage .login-nota b{color:var(--fx-cyan-teks)}
body.fx #loginPage .login-daftar-pautan{font-size:13.5px;color:var(--fx-redup)}
body.fx #loginPage .login-daftar-pautan a{color:var(--fx-ungu-teks);font-weight:800;text-decoration:underline;display:inline-block;padding:10px 4px}
body.fx #loginPage .alert.a-ralat{border-radius:16px;background:var(--fx-merah-lembut);color:var(--fx-merah-teks)}
body.fx #loginPage :focus-visible{outline:3px solid var(--fx-fokus);outline-offset:2px}
body.fx #loginPage .login-ssm{color:var(--fx-halus)}
@media (prefers-reduced-motion:no-preference){
  body.fx #loginPage .login-kad{animation:fxMasuk .4s cubic-bezier(.16,1,.3,1) both}
  body.fx #loginPage .btn-primary{transition:transform .18s cubic-bezier(.34,1.56,.64,1),background-color .16s}
  body.fx #loginPage .btn-primary:active{transform:scale(.96)}
}
@keyframes fxMasuk{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}

/* ---------- Banner langganan ---------- */
body.fx #bannerLangganan.lg-banner{background:var(--fx-ungu-lembut);color:var(--fx-ungu-teks);border-bottom:0;border-radius:0 0 20px 20px;font-weight:700}
body.fx #bannerLangganan.lg-banner.lg-amaran{background:var(--fx-kuning-lembut);color:var(--fx-kuning-teks)}
body.fx #bannerLangganan.lg-banner.lg-bahaya{background:var(--fx-merah-lembut);color:var(--fx-merah-teks)}
body.fx #bannerLangganan .btn{min-height:44px;border-radius:14px;font-weight:800}

/* ---------- Langganan & Bil ---------- */
body.fx #page-langganan .x-kepala{background:var(--fx-grad-kepala);color:#fff;border-radius:28px;padding:20px 18px;position:relative;overflow:hidden}
body.fx #page-langganan .x-kepala::after{content:"";position:absolute;width:150px;height:150px;border-radius:50%;background:#F472B6;opacity:.25;right:-40px;top:-60px;pointer-events:none}
body.fx #page-langganan .x-kepala-ikon{background:var(--fx-kuning);color:var(--fx-on-kuning);border-radius:16px;width:48px;height:48px}
body.fx #page-langganan .x-kepala h1{font-size:22px;letter-spacing:-.02em}
body.fx #page-langganan .x-panel{border-radius:28px;padding:18px;border:1px solid var(--fx-garis);background:var(--fx-kad);box-shadow:var(--fx-bayang)}
body.fx #page-langganan .x-ph h2,body.fx #page-langganan .x-ph h3{font-size:16.5px;letter-spacing:-.01em}
body.fx #page-langganan .x-ph .x-ikon{width:40px;height:40px;border-radius:13px;font-size:17px}
body.fx #page-langganan .x-btn{border-radius:16px;min-height:52px}
body.fx #page-langganan .x-btn-utama{background:var(--fx-ungu);color:var(--fx-on-ungu);box-shadow:0 6px 14px rgba(109,40,217,.28)}
body.fx #page-langganan .x-btn-utama:hover{background:var(--fx-ungu-hover)}
body.fx #page-langganan .x-btn-sek{background:var(--fx-kad2);border:2px solid var(--fx-garis2);color:var(--fx-ink)}
body.fx #page-langganan :focus-visible{outline:3px solid var(--fx-fokus);outline-offset:2px}
body.fx #page-langganan .lg-pelan-grid{gap:12px}
body.fx #page-langganan .lg-pelan{--aksen:var(--fx-ungu);border:2px solid var(--fx-garis);border-top:7px solid var(--aksen);border-radius:22px;background:var(--fx-kad2);padding:14px;gap:6px;min-height:48px;box-shadow:none}
body.fx #page-langganan .lg-pelan:nth-child(1){--aksen:var(--fx-hijau)}
body.fx #page-langganan .lg-pelan:nth-child(2){--aksen:var(--fx-biru)}
body.fx #page-langganan .lg-pelan:nth-child(3){--aksen:var(--fx-ungu)}
body.fx #page-langganan .lg-pelan:nth-child(4){--aksen:var(--fx-pink)}
body.fx #page-langganan .lg-pelan.pilih{border-color:var(--fx-ungu);border-top-color:var(--aksen);background:var(--fx-ungu-lembut);box-shadow:0 8px 20px rgba(109,40,217,.2)}
body.fx #page-langganan .lg-pelan .lg-harga{font-size:24px;font-weight:800;letter-spacing:-.02em}
body.fx #page-langganan .lg-pelan small{color:var(--fx-redup)}
body.fx #page-langganan .lg-lencana{background:var(--fx-kuning-lembut);color:var(--fx-kuning-teks);font-weight:800;padding:3px 12px}
body.fx #page-langganan .lg-bar{height:10px;background:var(--fx-ungu-lembut);border-radius:999px}
body.fx #page-langganan .lg-bar>span{background:var(--fx-grad-aksen);border-radius:999px}
body.fx #page-langganan .lg-bar.lg-amaran>span{background:var(--fx-kuning)}
body.fx #page-langganan .lg-bar.lg-bahaya>span{background:var(--fx-merah)}
body.fx #page-langganan .lg-kotak{border:0;border-radius:18px;background:var(--fx-ungu-lembut);color:var(--fx-ungu-teks)}
body.fx #page-langganan .lg-kotak.amaran{background:var(--fx-kuning-lembut);color:var(--fx-kuning-teks)}
body.fx #page-langganan .lg-kotak.bahaya{background:var(--fx-merah-lembut);color:var(--fx-merah-teks)}
body.fx #page-langganan .lg-modul{border:0;border-radius:14px;background:var(--fx-kad2)}
body.fx #page-langganan .lg-pilih,body.fx #page-langganan .lg-opsi label{border:2px solid var(--fx-garis);border-radius:16px;background:var(--fx-kad2);min-height:48px}
body.fx #page-langganan .lg-jumlah-besar{color:var(--fx-ungu-teks);font-size:30px;letter-spacing:-.02em}
body.fx #page-langganan .lg-qr{border-radius:22px;border:3px solid var(--fx-ungu-lembut)}
body.fx #page-langganan .lg-baris{border-bottom-color:var(--fx-garis)}
body.fx #page-langganan .lg-tbl th{color:var(--fx-ungu-teks)}

/* ---------- Wizard persediaan + Bantuan ---------- */
body.fx #modalOnboarding .ob-modal,body.fx #modalBantuanOb .ob-modal{border-radius:32px;overflow:hidden;border:0;box-shadow:var(--fx-bayang-besar);background:var(--fx-kad)}
body.fx #modalOnboarding .mk-mh,body.fx #modalBantuanOb .mk-mh{background:var(--fx-grad-kepala);color:#fff;border-bottom:0;padding:16px 18px}
body.fx #modalOnboarding .mk-mh h3,body.fx #modalBantuanOb .mk-mh h3{color:#fff}
body.fx #modalOnboarding .mk-mh .btn-ikon,body.fx #modalBantuanOb .mk-mh .btn-ikon{background:rgba(255,255,255,.2);color:#fff;border-radius:50%}
body.fx #modalOnboarding :focus-visible,body.fx #modalBantuanOb :focus-visible{outline:3px solid var(--fx-fokus);outline-offset:2px}
body.fx #modalOnboarding .ob-kemajuan{padding:14px 14px 6px;gap:6px}
body.fx #modalOnboarding .ob-titik{min-height:48px;position:relative}
body.fx #modalOnboarding .ob-titik-no{width:34px;height:34px;font-size:14px;border-width:2px;background:var(--fx-kad2);border-color:var(--fx-garis2);color:var(--fx-redup)}
body.fx #modalOnboarding .ob-titik-label{font-size:11px;color:var(--fx-redup)}
body.fx #modalOnboarding .ob-titik.ob-siap .ob-titik-no{background:var(--fx-hijau);border-color:var(--fx-hijau);color:#fff}
body.fx #modalOnboarding .ob-titik.ob-semasa .ob-titik-no{background:var(--fx-kuning);border-color:var(--fx-kuning);color:var(--fx-on-kuning);box-shadow:0 0 0 5px color-mix(in srgb,var(--fx-kuning) 35%,transparent)}
body.fx #modalOnboarding .ob-titik.ob-semasa .ob-titik-label{color:var(--fx-ink);font-weight:800}
body.fx .ob-ikon{width:48px;height:48px;border-radius:16px;font-size:20px;background:var(--fx-ungu-lembut);color:var(--fx-ungu-teks)}
body.fx .ob-tajuk{font-size:18px;letter-spacing:-.01em}
body.fx .ob-kecil{color:var(--fx-ungu-teks)}
body.fx .ob-medan input,body.fx .ob-medan select,body.fx .ob-medan textarea{min-height:50px;border-radius:14px;border:2px solid var(--fx-garis);background:var(--fx-kad2);color:var(--fx-ink)}
body.fx .ob-medan input:focus,body.fx .ob-medan select:focus,body.fx .ob-medan textarea:focus{border-color:var(--fx-ungu);outline:none}
body.fx .ob-medan label{color:var(--fx-ink)}
body.fx .ob-kaki{padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px))}
body.fx .ob-kaki .x-btn{border-radius:16px;min-height:52px}
body.fx .ob-kaki .x-btn-utama,body.fx .ob-import-aksi .x-btn-utama{background:var(--fx-ungu);color:var(--fx-on-ungu);box-shadow:0 6px 14px rgba(109,40,217,.28)}
body.fx .ob-kaki .x-btn-sek,body.fx .ob-import-aksi .x-btn-sek{background:var(--fx-kad2);border:2px solid var(--fx-garis2);color:var(--fx-ink)}
body.fx .ob-cip-btn{min-height:44px;border-width:2px;border-color:var(--fx-garis2);background:var(--fx-kad2)}
body.fx .ob-cip-btn.ob-on{background:var(--fx-ungu);border-color:var(--fx-ungu);color:var(--fx-on-ungu)}
body.fx .ob-borang-staf,body.fx .ob-wa-kad{border:0;border-radius:22px;background:var(--fx-ungu-lembut)}
body.fx .ob-pin-nota{background:var(--fx-kuning-lembut);color:var(--fx-kuning-teks);border-radius:14px}
body.fx .ob-senarai-staf li{border:2px solid var(--fx-garis);border-radius:16px}
body.fx .ob-logo-kotak{border:3px dashed var(--fx-ungu);border-radius:24px;background:var(--fx-ungu-lembut);color:var(--fx-ungu-teks)}
body.fx .ob-ringkas li{background:var(--fx-ungu-lembut);color:var(--fx-ungu-teks);border-radius:14px;font-weight:700}
body.fx .ob-ringkas li:nth-child(2){background:var(--fx-cyan-lembut);color:var(--fx-cyan-teks)}
body.fx .ob-ringkas li:nth-child(3){background:var(--fx-hijau-lembut);color:var(--fx-hijau-teks)}
body.fx .ob-ringkas li:nth-child(4){background:var(--fx-oren-lembut);color:var(--fx-oren-teks)}
body.fx .ob-ringkas li:nth-child(5){background:var(--fx-pink-lembut);color:var(--fx-pink-teks)}
body.fx .ob-semak li.ob-siap{color:var(--fx-hijau-teks);font-weight:700}
body.fx .ob-contoh{border:3px dashed var(--fx-garis2);border-radius:22px}
body.fx .ob-hasil{border-radius:16px}
body.fx .ob-pautan{min-height:44px;color:var(--fx-ungu-teks)}
body.fx .ob-artikel{border:2px solid var(--fx-garis);border-radius:18px;background:var(--fx-kad2);min-height:56px;font-weight:700}
body.fx .ob-btn-wa{background:#15803D;color:#fff;border-radius:16px}
@media (prefers-reduced-motion:no-preference){
  body.fx .ob-kaki .x-btn,body.fx .ob-cip-btn{transition:transform .18s cubic-bezier(.34,1.56,.64,1)}
  body.fx .ob-kaki .x-btn:active,body.fx .ob-cip-btn:active{transform:scale(.96)}
}

/* ---------- Modal Naik Taraf ---------- */
body.fx #modalNaikTaraf .mk-modal{border-radius:32px;overflow:hidden;border:0;background:var(--fx-kad)}
body.fx #modalNaikTaraf .mk-mh{background:var(--fx-grad-kepala);color:#fff;border-bottom:0}
body.fx #modalNaikTaraf .mk-mh h3{color:#fff}
body.fx #modalNaikTaraf .mk-mh .btn-ikon{background:rgba(255,255,255,.2);color:#fff;border-radius:50%}
body.fx #modalNaikTaraf .x-btn{border-radius:16px;min-height:52px}
body.fx #modalNaikTaraf .x-btn-utama{background:var(--fx-ungu);color:var(--fx-on-ungu)}

/* ---------- Langganan & Bil: kad pelan semasa, segmen, resit ---------- */
body.fx #page-langganan .f5-lg-hero{background:var(--fx-grad-kepala);color:#fff;border:0;border-radius:28px;padding:20px 18px;position:relative;overflow:hidden}
body.fx #page-langganan .f5-lg-hero::after{content:"";position:absolute;width:140px;height:140px;border-radius:50%;background:#F472B6;opacity:.22;right:-40px;bottom:-60px;pointer-events:none}
body.fx #page-langganan .f5-lg-hero .x-ikon{background:var(--fx-kuning);color:var(--fx-on-kuning)}
body.fx #page-langganan .f5-lg-hero .f5-chip{background:rgba(255,255,255,.2);color:#fff}
body.fx #page-langganan .f5-lg-pelan-n b{font-size:24px;letter-spacing:-.02em}
body.fx #page-langganan .f5-chip{font-weight:800}
body.fx #page-langganan .f5-seg{border-radius:18px;background:var(--fx-ungu-lembut);padding:5px}
body.fx #page-langganan .f5-seg label{border-radius:14px;color:var(--fx-ungu-teks)}
body.fx #page-langganan .f5-seg label:has(input:checked){background:var(--fx-ungu);color:var(--fx-on-ungu);box-shadow:0 4px 10px rgba(109,40,217,.3)}
body.fx #page-langganan .f5-pilih-kad{border-radius:18px;border-color:var(--fx-garis);background:var(--fx-kad2)}
body.fx #page-langganan .f5-pilih-kad:has(input:checked){border-color:var(--fx-ungu);background:var(--fx-ungu-lembut)}
body.fx #page-langganan .f5-pilih-kad input{accent-color:var(--fx-ungu)}
body.fx #page-langganan .f5-resit{border:3px dashed var(--fx-garis2);border-radius:22px;background:var(--fx-kad2)}
body.fx #page-langganan .f5-resit-t{color:var(--fx-ungu-teks)}
body.fx #page-langganan .f5-lg-semak{background:var(--fx-ungu);color:#fff}
body.fx #page-langganan .f5-modul{border:0;border-radius:16px;background:var(--fx-kad2)}
body.fx #page-langganan .f5-modul i{color:var(--fx-hijau-teks)}
body.fx #page-langganan .x-stat{border-radius:22px}
body.fx #page-langganan .f5-bh-t{color:var(--fx-ungu-teks)}
body.fx #page-langganan .f5-trek{background:var(--fx-ungu-lembut)}
body.fx #page-langganan .f5-trek i{background:var(--fx-grad-aksen)}
body.fx #page-langganan .input-group input,body.fx #page-langganan .input-group select{min-height:50px;border-radius:14px;border:2px solid var(--fx-garis);background:var(--fx-kad2);color:var(--fx-ink)}
@media (prefers-reduced-motion:no-preference){
  body.fx #page-langganan .lg-pelan,body.fx #page-langganan .x-btn{transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s,background-color .16s}
  body.fx #page-langganan .lg-pelan:active,body.fx #page-langganan .x-btn:active{transform:scale(.96)}
}