:root{
    --primary:#10b77f; --primary-dark:#0c9268; --primary-light:#e6f7f1;
    --accent:#d97706; --accent-light:#fdf1e0;
    --ink:#0f172a; --muted:#64748b; --border:#e2e8f0;
    --bg:#f4f6f8; --surface:#ffffff; --surface-2:#f8fafc;
    --danger:#dc2626; --danger-light:#fdecec;
    --radius:14px; --radius-sm:9px; --radius-btn:10px;
    --shadow:0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.06);
    --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    /* Warna turunan yang bisa dikustomisasi lewat Pengaturan > Branding (lihat applyBranding() di AppScript.html).
       Default-nya sengaja mengikuti var brand yang sudah ada, jadi tampilan TIDAK berubah selama belum dikustomisasi. */
    --secondary:var(--primary); --secondary-dark:var(--primary-dark); --secondary-light:var(--primary-light);
    --success:var(--primary); --success-dark:var(--primary-dark); --success-light:var(--primary-light);
    --warning:var(--accent); --warning-light:var(--accent-light);
    --error:var(--danger); --error-light:var(--danger-light);
    --topnav-bg:var(--surface); --topnav-text:var(--ink);
    --sidebar-bg:var(--surface); --sidebar-text:var(--muted);
    --bottom-nav-h:60px; --bottom-nav-total-h:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));
  }
  [data-theme="dark"]{
    --ink:#f1f5f9; --muted:#94a3b8; --border:#27313f;
    --bg:#0b1220; --surface:#111a2b; --surface-2:#15203380;
    --primary-light:#0f2a22; --accent-light:#2a2011; --danger-light:#2a1414;
  }
  *{box-sizing:border-box;}
  html,body{height:100%;}
  body{margin:0;font-family:var(--font);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;}
  a{color:inherit;}
  button{font-family:inherit;}
  /* Teks tombol/menu/chip tidak boleh terseleksi saat ditekan atau ditahan (bottom nav, tombol tambah, tombol umum, tab, chip, dll.). Input, textarea, dan isi tabel/kartu biasa tetap bisa diseleksi. */
  button,[role="button"],summary,
  .btn,.fab,.link-btn,.nav-item,.bn-item,.bn-add-circle,.card-click,.acd-pill,.seg button,.dropdown-item,.icon-select-trigger,.notif-item,.input-icon-toggle,
  .color-swatch,.color-preset,.icon-picker-item,.chip-multi-item,.checkout-menu-btn,.checkout-pay-card,
  .inv-click,.inv-pick-item,.inv-tab,.pc-chip,.pc-card,.pc-citem,.pc-newcust,.pc-bar-cart,.pu-click,.pu-seg button,.pu-pop-item,.pu-tab,.pu-mini,.sl-click,.sl-seg button,.sl-pop-item{
    -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;
  }
  ::selection{background:var(--primary);color:#fff;}
  #app{min-height:100vh;}

  /* ---------- Layout ---------- */
  .shell{display:flex;min-height:100vh;}
  .sidebar{
    width:264px;flex-shrink:0;background:var(--sidebar-bg);border-right:1px solid var(--border);
    display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0;z-index:70;
    transition:transform .25s ease;
  }
  .sidebar-brand{display:flex;align-items:center;gap:10px;padding:20px 20px 14px;}
  .sidebar-brand .logo{width:40px;height:40px;flex-shrink:0;border-radius:10px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:17px;overflow:hidden;}
  .sidebar-brand .name{font-weight:800;font-size:19px;letter-spacing:-.02em;}
  .sidebar-plan-info{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--muted);margin-top:2px;}
  .sidebar-plan-info svg{width:13px;height:13px;flex-shrink:0;}
  .nav-scroll{flex:1;overflow-y:auto;padding:6px 12px 12px;}
  .nav-group-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:14px 10px 6px;font-weight:700;}
  .nav-item{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:10px;color:var(--sidebar-text);font-size:14px;font-weight:600;cursor:pointer;margin-bottom:2px;}
  .nav-item svg{width:18px;height:18px;flex-shrink:0;}
  .nav-badge{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--danger);color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;line-height:1;flex-shrink:0;}
  .feat-icon svg{width:18px;height:18px;flex-shrink:0;}
  .nav-item:hover{background:var(--surface-2);color:var(--ink);}
  .nav-item.active{background:var(--secondary-light);color:var(--secondary-dark);}
  [data-theme="dark"] .nav-item.active{color:var(--secondary);}
  .sidebar-foot{padding:12px;border-top:1px solid var(--border);}

  .main{flex:1;margin-left:264px;display:flex;flex-direction:column;min-width:0;}
  .topbar{position:sticky;top:0;z-index:30;background:var(--topnav-bg);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:14px;padding:12px 22px;}
  .topbar .spacer{flex:1;}
  .topbar h1{color:var(--topnav-text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  /* Semua tombol/dropdown ikon di topbar tidak boleh ikut menyusut (flex-shrink) atau saling
     bertumpuk - kalau dibiarkan shrink, hitbox-nya bisa tumpang tindih di layar sempit dan bikin
     tombol jadi "kadang tidak bisa diklik" karena klik jatuh ke tombol tetangganya. */
  .topbar > button, .topbar > .dropdown{flex-shrink:0;}
  .page{padding:22px;max-width:1320px;width:100%;margin:0 auto;}
  .menu-toggle{display:none;}

  /* z-index 60 sengaja lebih tinggi dari .settings-savebar (55) - lingkaran tombol tambah (.bn-add-circle)
     menonjol di atas garis bar ini, dan karena elemen fixed ini membentuk stacking context sendiri,
     z-index pada anaknya (.bn-add-circle) tidak akan pernah menembus elemen luar manapun kalau z-index
     bottom-nav ini sendiri masih lebih rendah - makanya dinaikkan di sini, bukan hanya di anaknya. */
  .bottom-nav{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--topnav-bg);border-top:1px solid var(--border);height:var(--bottom-nav-total-h);padding-bottom:env(safe-area-inset-bottom);padding-left:8px;padding-right:8px;gap:2px;}
  .bn-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:0 2px;margin:6px 0;border-radius:6px;color:var(--sidebar-text);font-size:10.5px;font-weight:700;cursor:pointer;}
  .bn-item svg{width:20px;height:20px;}
  .bn-item.active{color:var(--secondary-dark);background:var(--secondary-light);}
  /* Tombol tambah transaksi yang menonjol di tengah bottom nav (menggantikan slot "Budget") - lingkaran
     terangkat sedikit di atas garis bar, menonjol dari item lain (lihat bottomNavHtml() di AppScript.html). */
  .bn-item-add{justify-content:center;margin:0;}
  .bn-add-circle{width:55px;height:55px;min-width:55px;min-height:55px;flex:0 0 55px;border-radius:50%;background:var(--secondary);color:#fff;display:flex;align-items:center;justify-content:center;position:relative;top:-9px;z-index:56;transition:transform .12s ease,background .12s ease;}
  .bn-add-circle svg{width:26px;height:26px;}
  /* .pressed dikontrol manual lewat JS (onAddBtnClick_ di AppScript.html), bukan :active/:hover -
     pseudo-class itu bisa nyangkut di warna tekan kalau modal langsung terbuka saat disentuh,
     terutama di browser mobile yang tidak selalu memproses touchend dengan benar saat DOM berubah. */
  .bn-add-circle.pressed{transform:scale(.9);background:var(--secondary-dark);}

  @media (max-width:980px){
    .sidebar{transform:translateX(-100%);}
    .sidebar.open{transform:translateX(0);box-shadow:0 0 0 1000px rgba(0,0,0,.35);}
    .main{margin-left:0;padding-bottom:var(--bottom-nav-total-h);}
    .menu-toggle{display:flex;}
    .page{padding:14px;}
    .bottom-nav{display:flex;}
    /* Di mobile, tombol sembunyikan saldo pindah dari topbar ke dalam card Saldo Kas (lebih dekat
       dengan angka yang disembunyikan) - #hide-balances-btn topbar disembunyikan lewat !important
       karena visibilitasnya juga diatur inline oleh JS (lihat route()/renderShellFrame()). */
    #hide-balances-btn{display:none !important;}
    /* !important wajib di sini - rule dasar .hide-balances-btn-mobile{display:none} di bawah
       (dekat .cash-summary-card) ditulis SETELAH blok media query ini di source, jadi tanpa
       !important rule itu menang walau breakpoint ini aktif (spesifisitas sama, urutan source
       yang menentukan) dan tombolnya tidak pernah muncul di mobile. */
    .hide-balances-btn-mobile{display:flex !important;}
  }

  /* ---------- Components ---------- */
  .btn{display:inline-flex;align-items:center;gap:8px;border:1px solid transparent;border-radius:var(--radius-btn);padding:9px 16px;font-weight:700;font-size:14px;cursor:pointer;transition:.15s;white-space:nowrap;}
  .btn svg{width:16px;height:16px;}
  .btn-primary{background:var(--secondary);color:#fff;}
  .btn-primary:hover{background:var(--secondary-dark);}
  .btn-outline{background:transparent;border-color:var(--border);color:var(--ink);}
  .btn-outline:hover{background:var(--surface-2);}
  .btn-danger{background:var(--error-light);color:var(--error);}
  .btn-danger:hover{opacity:.85;}
  .btn-ghost{background:transparent;color:var(--muted);}
  .btn-ghost:hover{background:var(--surface-2);color:var(--ink);}
  .btn-sm{padding:6px 11px;font-size:13px;border-radius:calc(var(--radius-btn) - 2px);}
  .btn-icon{padding:8px;border-radius:var(--radius-btn);}
  .btn:disabled{opacity:.5;cursor:not-allowed;}

  .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);}
  .card-pad{padding:20px;}
  .grid{display:grid;gap:16px;}
  .grid-4{grid-template-columns:repeat(4,1fr);}
  .grid-3{grid-template-columns:repeat(3,1fr);}
  .grid-2{grid-template-columns:repeat(2,1fr);}
  @media (max-width:980px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr 1fr;}}
  @media (max-width:640px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr;}}
  /* Anak grid HARUS boleh menyempit (min-width:0) - tanpa ini kolom "1fr" melebar mengikuti isi (mis. tabel
     lebar) sehingga kartu meluber keluar layar alih-alih membiarkan .table-wrap di dalamnya bisa digeser. */
  .grid > *{min-width:0;}
  /* Dua kartu tabel berdampingan jadi satu kolom lebih awal (sampai 980px) supaya tabelnya tidak sempit. */
  @media (max-width:980px){.grid.grid-stack-md{grid-template-columns:1fr;}}

  .stat-card{display:flex;flex-direction:column;gap:8px;}
  .stat-card .label{font-size:13px;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:8px;}
  .stat-card .value{font-size:24px;font-weight:800;letter-spacing:-.02em;}
  .stat-icon{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;}
  .stat-icon svg{width:17px;height:17px;}

  .cash-summary-card{margin-bottom:16px;}
  .cash-summary-head{display:flex;align-items:center;gap:10px;margin-bottom:4px;}
  .cash-summary-head b{font-size:15px;letter-spacing:.03em;flex:1;}
  /* Tombol sembunyikan saldo di dalam card - duplikat dari #hide-balances-btn di topbar, hanya
     tampil di mobile (lihat media query @980px) supaya tidak dobel dengan versi topbar di desktop. */
  .hide-balances-btn-mobile{display:none;margin-left:auto;flex-shrink:0;}
  .cash-summary-icon{width:30px;height:30px;border-radius:9px;background:var(--primary-light);color:var(--primary-dark);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
  .cash-summary-icon svg{width:16px;height:16px;}
  .cash-summary-period{font-size:13px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
  /* Badge ruang kerja aktif: gaya sama dengan pengalih ruang kerja di sidebar (.nav-item + latar --surface-2), ukuran lebih ringkas. */
  .org-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:10px;background:var(--surface-2);color:var(--sidebar-text);font-size:13px;font-weight:600;max-width:100%;}
  .org-badge svg{width:16px;height:16px;flex-shrink:0;}
  .org-badge span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .cash-summary-total{font-size:38px;font-weight:800;letter-spacing:-.02em;margin:18px 0 14px;word-break:break-all;}
  .cash-summary-flow{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:600;flex-wrap:wrap;margin-bottom:14px;}
  .cash-summary-flow .flow-up, .cash-summary-flow .flow-down{display:inline-flex;align-items:center;gap:4px;}
  .cash-summary-flow .flow-up svg, .cash-summary-flow .flow-down svg{width:14px;height:14px;flex-shrink:0;}
  .cash-summary-flow .flow-up{color:var(--primary);}
  .cash-summary-flow .flow-down{color:var(--accent);}
  .cash-summary-flow .flow-sep{color:var(--border);}
  .cash-summary-net{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--primary-dark);flex-wrap:wrap;}
  .cash-summary-net svg{width:16px;height:16px;flex-shrink:0;}
  @media (max-width:420px){.cash-summary-total{font-size:28px;}}

  h1{font-size:22px;font-weight:800;margin:0;letter-spacing:-.02em;}
  #page-title{font-size:18px;}
  h2{font-size:17px;font-weight:800;margin:0;}
  .page-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap;}
  /* Daftar Transaksi: pencarian + filter (tipe, akun, kategori, sub kategori, pelapor) dalam satu baris yang membungkus di layar sempit. */
  .tx-head{align-items:flex-start;}
  .tx-filters{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 420px;min-width:0;}
  .tx-filters input,.tx-filters select{flex:1 1 150px;min-width:130px;max-width:230px;}
  @media (max-width:560px){.tx-filters input,.tx-filters select{flex:1 1 calc(50% - 8px);max-width:none;min-width:0;}.tx-filters input{flex-basis:100%;}}
  /* Judul halaman (dipindah dari #page-title di topbar ke dalam .page, di atas .page-head) + sub-head
     deskripsi singkat - dipakai semua halaman kecuali Dashboard, lihat pageHeaderHtml_() di AppScript.html. */
  .page-title-h{font-size:18px;font-weight:800;margin:0;letter-spacing:-.02em;}
  .page-sub-head{font-size:13px;color:var(--muted);margin:4px 0 16px;}
  .muted{color:var(--muted);}
  .text-danger{color:var(--error);}
  .text-primary{color:var(--primary);}
  .text-accent{color:var(--accent);}

  table{width:100%;border-collapse:collapse;font-size:14px;}
  th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700;padding:10px 14px;border-bottom:1px solid var(--border);}
  td{padding:12px 14px;border-bottom:1px solid var(--border);vertical-align:middle;}
  tr:last-child td{border-bottom:none;}
  /* Grid kartu statistik Dashboard Super: 2 kolom di HP, 4 kolom di layar lebar. */
  .grid-stat{display:grid;gap:16px;grid-template-columns:repeat(2,1fr);}
  @media (min-width:981px){.grid-stat{grid-template-columns:repeat(4,1fr);}}
  /* Detail Akun Kas */
  .card-click{cursor:pointer;transition:box-shadow .15s ease, transform .15s ease;}
  .card-click:hover{box-shadow:0 2px 4px rgba(15,23,42,.06), 0 12px 28px rgba(15,23,42,.10);}
  .acd-infos{margin-top:16px;border-top:1px solid var(--border);padding-top:6px;}
  .acd-info{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--border);font-size:14px;}
  .acd-info:last-child{border-bottom:none;}
  .acd-pills{display:flex;gap:10px;overflow-x:auto;padding:3px 3px 12px;margin:0 -3px 4px;scrollbar-width:none;}
  .acd-pills::-webkit-scrollbar{display:none;}
  .acd-pill{flex-shrink:0;padding:5px 10px;border:1.5px solid var(--border);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit;font-weight:600;font-size:13px;cursor:pointer;}
  .acd-pill.active{border-color:var(--primary);color:var(--primary);}
  .acd-balance-icon{width:20px;height:20px;flex-shrink:0;color:var(--muted);}
  .acd-minis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:6px;}
  .acd-mini{background:var(--surface-2);border-radius:10px;padding:10px 12px;min-width:0;font-size:clamp(12px,3.4vw,15px);}
  /* Mobile: tiga ringkasan ditumpuk satu per baris (label kiri, nilai kanan) dengan jarak yang pas. */
  @media(max-width:600px){
    .acd-minis{grid-template-columns:1fr;gap:8px;}
    .acd-mini{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;}
  }
  .access-grid .btn-sm{justify-content:center;}
  /* Donut di kiri, legenda (titik warna, nama + persen, nominal) di kanan - sama di mobile maupun desktop, tidak menumpuk. */
  .acc-comp-wrap{display:flex;align-items:center;gap:18px;flex-wrap:nowrap;}
  .chart-box.acc-comp-chart{width:180px;height:180px;flex-shrink:0;}
  .acc-comp-legend{flex:1;min-width:0;display:flex;flex-direction:column;gap:14px;}
  .acc-comp-row{display:flex;align-items:center;gap:10px;font-size:14px;}
  .acc-comp-dot{width:11px;height:11px;border-radius:50%;flex-shrink:0;}
  @media(max-width:600px){.chart-box.acc-comp-chart{width:140px;height:140px;}}
  @media(max-width:420px){.chart-box.acc-comp-chart{width:128px;height:128px;}.acc-comp-wrap{gap:12px;}.acc-comp-legend{gap:12px;}.acc-comp-row{font-size:13px;gap:8px;}}
  /* Akun Kas + Komposisi Saldo berdampingan di desktop (2 kolom), menumpuk di layar sempit. */
  .dash-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;align-items:stretch;}
  .dash-pair > .card{margin:0 !important;}
  @media(max-width:980px){.dash-pair{grid-template-columns:1fr;}}
  .hm-wrap{overflow-x:auto;}
  .hm-row{display:grid;grid-template-columns:44px repeat(8,minmax(34px,1fr));gap:4px;margin-bottom:4px;min-width:340px;}
  .hm-day{font-size:12px;font-weight:600;color:var(--muted);display:flex;align-items:center;}
  .hm-hcell{font-size:11px;color:var(--muted);text-align:left;}
  .hm-cell{height:34px;border-radius:6px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;}
  .hm-cell.hm-peak{outline:2px solid var(--error);outline-offset:1px;}
  .hm-legend{font-size:11.5px;margin-top:8px;}
  .rep-badge{display:inline-flex;align-items:center;gap:4px;background:#f8fafc;color:#64748b;border-radius:6px;padding:2px 8px;font-size:11.5px;font-weight:500;line-height:1.4;white-space:nowrap;max-width:100%;}
  .rep-badge svg{width:1.1em;height:1.1em;flex-shrink:0;}
  .rep-badge span{overflow:hidden;text-overflow:ellipsis;}
  .modal-head h2 .tx-title-plus{width:19px;height:19px;vertical-align:-3px;margin-right:2px;}
  .acd-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);}
  .acd-row:last-child{border-bottom:none;}
  /* Card ajakan install PWA di Dashboard (lihat pwaInstallCardHtml_). */
  .pwa-install-card{background:var(--surface);border:2px solid var(--primary);border-radius:var(--radius);padding:20px 18px;margin:16px 0;box-shadow:var(--shadow);}
  .table-wrap{overflow-x:auto;}
  tfoot svg{width:16px;height:16px;flex-shrink:0;}
  .row-actions{display:flex;gap:6px;justify-content:flex-end;}

  .badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;font-size:12px;font-weight:700;}
  .badge-green{background:var(--success-light);color:var(--success-dark);}
  /* Halaman Kuota Aplikasi - ikon di badge "Aktif" dan di label tiap baris kuota sengaja diperkecil
     (18px) daripada ukuran default ic() supaya sebaris rapi dengan teks 15px di sampingnya. */
  .quota-active-badge svg{width:18px;height:18px;}
  .quota-item-label svg{width:18px;height:18px;}
  /* Ikon refresh di badge "Sedang proses singkron": diperkecil 10% (24px -> 21.6px) & berputar. */
  .badge-syncing svg{width:21.6px;height:21.6px;flex-shrink:0;animation:spin .9s linear infinite;}
  .badge-amber{background:var(--warning-light);color:var(--warning);}
  .badge-red{background:var(--error-light);color:var(--error);}
  .badge-gray{background:var(--surface-2);color:var(--muted);}

  .icon-chip{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .icon-chip svg{width:18px;height:18px;}
  .icon-chip-sm{width:30.4px;height:30.4px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .icon-chip-sm svg{width:14.4px;height:14.4px;}

  /* Card rincian Pemasukan/Pengeluaran per kategori di Dashboard (lihat cashBreakdownCardHtml_). */
  .cat-breakdown-card h2{font-size:18px;font-weight:800;margin:0 0 6px;}
  .cat-breakdown-card h2 + .cat-breakdown-list{margin-bottom:22px;}
  .cat-breakdown-card .cat-breakdown-list:last-child{margin-bottom:0;}
  .cat-breakdown-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);}
  .cat-breakdown-row:last-child{border-bottom:0;}
  .cat-breakdown-chip{width:30.4px;height:30.4px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .cat-breakdown-chip svg{width:14.4px;height:14.4px;}
  .cat-breakdown-name{flex:1;min-width:0;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .cat-breakdown-amount{font-size:13px;font-weight:600;white-space:nowrap;}
  .cat-breakdown-pct{width:36px;text-align:right;font-size:12px;color:var(--muted);flex-shrink:0;}

  .progress{height:8px;background:var(--surface-2);border-radius:99px;overflow:hidden;}
  .progress > div{height:100%;border-radius:99px;transition:width .3s;}

  /* Kartu Tagihan Rutin (tab Belum Dibayar) - 3 kolom: chip kalender, info tagihan, nominal + aksi. */
  .bill-list{display:flex;flex-direction:column;gap:12px;}
  .bill-card{display:flex;align-items:center;gap:14px;}
  .bill-card-icon{width:42px;height:42px;border-radius:11px;background:var(--primary-light);color:var(--primary-dark);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .bill-card-icon svg{width:19px;height:19px;}
  .bill-card-body{flex:1;min-width:0;}
  .bill-card-name{font-weight:700;font-size:14.5px;}
  .bill-card-meta{font-size:12.5px;margin:2px 0 6px;}
  .bill-card-amount{text-align:right;flex-shrink:0;}
  .bill-card-amount-value{font-weight:800;font-size:16px;margin-bottom:8px;}
  @media (max-width:640px){
    .bill-card{flex-wrap:wrap;}
    .bill-card-amount{text-align:left;width:100%;margin-left:56px;}
  }

  input,select,textarea{
    width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--border);
    background:var(--surface);color:var(--ink);font-size:14px;font-family:inherit;
  }
  input:focus,select:focus,textarea:focus{outline:2px solid var(--primary);outline-offset:-1px;border-color:var(--primary);}
  label{font-size:13px;font-weight:700;color:var(--muted);display:block;margin-bottom:6px;}
  .field{margin-bottom:14px;}
  .field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  @media (max-width:640px){.field-row{grid-template-columns:1fr;}}
  .seg{display:flex;background:var(--surface-2);border-radius:10px;padding:3px;gap:2px;}
  .seg button{flex:1;padding:8px;border:none;background:transparent;border-radius:8px;font-weight:700;font-size:13px;color:var(--muted);cursor:pointer;}
  .seg button.active{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08);}
  /* Tab Pemasukan/Pengeluaran di form Tambah Transaksi SENGAJA beda dari .seg generik di atas (dipakai
     filter/tab lain) - tab aktif berwarna sesuai jenisnya (hijau untuk Pemasukan, oranye untuk
     Pengeluaran) lengkap dengan ikon, tab tidak aktif polos tanpa ikon (lihat txTypeSegHtml_ di
     AppScript.html). Dibuat sebagai class terpisah (bukan mengubah .seg) supaya tab/filter lain yang
     memakai .seg di halaman lain tidak ikut berubah gayanya. */
  .tx-type-btn.active.tx-type-income{background:var(--primary-light);color:var(--primary-dark);box-shadow:none;}
  .tx-type-btn.active.tx-type-expense{background:var(--accent-light);color:var(--accent);box-shadow:none;}
  .tx-type-btn.active.tx-type-transfer{background:rgba(124,58,237,.12);color:#7c3aed;box-shadow:none;}
  .tx-type-btn svg{width:15px;height:15px;vertical-align:-3px;margin-right:4px;}

  .modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.5);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:100;padding:16px;}
  .modal{background:var(--surface);border-radius:16px;width:100%;max-width:460px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.25);}
  /* head/foot sengaja sticky di dalam area scroll modal sendiri - supaya tombol X dan Simpan/Batal selalu
     berada di posisi yang bisa dijangkau & diprediksi, tidak ikut tergeser saat body form discroll
     (mis. karena keyboard virtual di HP membuat modal jadi lebih pendek dari isinya). */
  .modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--surface);z-index:2;}
  .modal-body{padding:20px;}
  .modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:16px 20px;border-top:1px solid var(--border);position:sticky;bottom:0;background:var(--surface);z-index:2;}

  .toast-wrap{position:fixed;top:16px;right:16px;z-index:200;display:flex;flex-direction:column;gap:8px;}
  .toast{background:var(--ink);color:var(--bg);padding:11px 16px;border-radius:10px;font-size:13.5px;font-weight:600;box-shadow:var(--shadow);display:flex;align-items:center;gap:8px;min-width:220px;animation:slidein .2s ease;}
  .toast.error{background:var(--error);color:#fff;}
  .toast.success{background:var(--success-dark);color:#fff;}
  @keyframes slidein{from{transform:translateX(30px);opacity:0;}to{transform:translateX(0);opacity:1;}}

  .empty{text-align:center;padding:50px 20px;color:var(--muted);}
  /* ">" (anak langsung), BUKAN descendant biasa - supaya ikon besar ini tidak ikut membesarkan ikon
     tombol yang bersarang di dalam .empty (mis. tombol "Upgrade Aplikasi" di lockedFeatureHtml_()),
     yang semestinya tetap memakai ukuran ikon tombol normal (.btn svg, 16px) sesuai teksnya. */
  .empty > svg{width:38px;height:38px;margin-bottom:10px;opacity:.5;}

  .avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:13px;flex-shrink:0;}
  .fab{position:fixed;bottom:24px;right:24px;z-index:50;width:56px;height:56px;border-radius:50%;background:var(--secondary);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px rgba(0,0,0,.25);border:none;cursor:pointer;transition:bottom .2s ease;}
  .fab svg{width:24px;height:24px;}
  .fab.fab-hidden{display:none;}
  /* Di mobile, tombol tambah transaksi sudah menyatu di tengah bottom nav (lihat .bn-item-add) -
     .fab terapung jadi duplikat dan disembunyikan saja di lebar ini, bukan sekadar digeser ke atas
     seperti sebelumnya. */
  @media (max-width:980px){ .fab{display:none;} }

  .dropdown{position:relative;}
  .dropdown-menu{position:absolute;right:0;top:calc(100% + 8px);background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);min-width:200px;z-index:60;overflow:hidden;padding:6px;}
  .dropdown-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;font-size:13.5px;font-weight:600;cursor:pointer;color:var(--ink);}
  .dropdown-item:hover{background:var(--surface-2);}
  .dropdown-item svg{width:16px;height:16px;color:var(--muted);}

  /* Dropdown kustom ber-chip-ikon (Kategori/Sub Kategori/Akun Kas di form Transaksi - lihat
     iconSelectHtml_ di AppScript.html). Dibangun dari .dropdown/.dropdown-menu di atas, tapi menu-nya
     melebar selebar kolom (bukan min-width 200px tetap) supaya sejajar dengan trigger-nya. */
  .icon-select{width:100%;}
  .icon-select-trigger{display:flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:7px 10px;cursor:pointer;background:var(--surface);}
  .icon-select-trigger span:not(.icon-chip){flex:1;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .icon-select-caret{width:16px;height:16px;color:var(--muted);flex-shrink:0;}
  .icon-select-menu{left:0;right:0;top:calc(100% + 6px);max-height:260px;overflow-y:auto;}
  .tx-balance-arrow{width:12px;height:12px;}

  .notif-badge{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:99px;background:var(--danger);color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;line-height:1;pointer-events:none;}
  .notif-panel{width:340px;max-width:calc(100vw - 32px);padding:0;}
  @media (max-width:640px){
    /* Di layar sempit, "right:0" relatif ke tombol lonceng bisa membuat panel selebar 340px meluber
       keluar tepi kiri layar. Lepaskan dari posisi relatif ke tombolnya dan pakukan ke viewport. */
    .notif-panel{position:fixed;left:12px;right:12px;top:64px;width:auto;max-width:none;}
  }
  .notif-panel-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--border);}
  .notif-panel-head b{font-size:14px;}
  .notif-list{max-height:360px;overflow-y:auto;}
  .notif-item{display:flex;gap:10px;padding:12px 14px;cursor:pointer;border-bottom:1px solid var(--border);position:relative;}
  .notif-item:last-child{border-bottom:none;}
  .notif-item:hover{background:var(--surface-2);}
  .notif-item.unread{background:var(--primary-light);}
  .notif-item-icon{flex-shrink:0;margin-top:2px;}
  .notif-item-icon svg{width:18px;height:18px;}
  .notif-item-body{flex:1;min-width:0;}
  .notif-item-title{font-size:13px;font-weight:700;}
  .notif-item-msg{font-size:12.5px;margin-top:2px;}
  .notif-item-time{font-size:11px;margin-top:4px;}
  .notif-dot{width:8px;height:8px;border-radius:50%;background:var(--primary);flex-shrink:0;margin-top:6px;}

  .minicard-extra{display:flex;align-items:center;gap:4px;}
  .minicard-extra svg{width:12px;height:12px;flex-shrink:0;}

  .auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#0f172a,var(--primary) 130%);padding:20px;}
  .auth-card{background:var(--surface);border-radius:20px;padding:34px;width:100%;max-width:420px;box-shadow:0 30px 60px rgba(0,0,0,.3);}
  .auth-logo{display:flex;flex-direction:column;align-items:center;gap:10px;justify-content:center;margin-bottom:6px;}
  .auth-logo .logo{width:60px;height:60px;border-radius:12px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:20px;overflow:hidden;}
  .auth-logo .logo.has-img{width:auto;height:auto;max-width:220px;background:none;border-radius:0;}
  .auth-logo .logo.has-img img{display:block;max-width:100%;max-height:72px;width:auto;height:auto;object-fit:contain;}
  .auth-logo .name{font-weight:800;font-size:24px;}
  .auth-sub{text-align:center;color:var(--muted);font-size:13.5px;margin-bottom:24px;}
  /* Ikon abu-abu di dalam field Username/Password halaman login (lihat authLoginHtml di AppScript.html) -
     ikon kiri posisinya absolute (pakai class langsung dari ic(name, cls), bukan svg anak dari wrapper -
     lihat pola yang sama di .tx-balance-arrow), tombol mata di kanan khusus field Password untuk
     show/hide (ikonnya sendiri svg anak tombol, konsisten dengan .dropdown-item svg). */
  .input-icon-wrap{position:relative;}
  .input-icon-wrap input{padding-left:38px;}
  .input-icon-wrap.has-toggle input{padding-right:38px;}
  .input-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--muted);pointer-events:none;}
  .input-icon-toggle{position:absolute;right:4px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--muted);padding:7px;display:flex;align-items:center;border-radius:8px;}
  .input-icon-toggle:hover{background:var(--surface-2);}
  .input-icon-toggle svg{width:17px;height:17px;}
  .link-btn{background:none;border:none;color:var(--secondary-dark);font-weight:700;cursor:pointer;padding:0;font-size:inherit;}
  .spin{width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;}
  /* Tombol ghost/outline berlatar terang (mis. ikon arsip/aktifkan) - spinner putih tidak terlihat, pakai warna primer. */
  .btn-ghost .spin,.btn-outline .spin{border-color:var(--border);border-top-color:var(--primary);}
  /* Tombol "Ya, Lanjutkan" saat diproses: tetap terbaca penuh (tidak diredupkan seperti .btn:disabled biasa),
     spinner + teks "Memproses..." berwarna sama dengan teks tombol supaya kontras di tema terang/gelap. */
  .btn.is-busy,.btn.is-busy:disabled{opacity:1;cursor:progress;display:inline-flex;align-items:center;gap:10px;font-weight:700;}
  .btn.is-busy .spin{width:18px;height:18px;border-width:3px;border-color:currentColor;border-top-color:transparent;opacity:1;flex:none;}
  @keyframes spin{to{transform:rotate(360deg);}}
  .loading-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;color:var(--muted);flex-direction:column;gap:12px;}
  /* Layar pembuka (Index.html): sama dengan splash shell PWA - latar Primary, logo di kotak transparan, teks putih. */
  #boot-screen{background:var(--primary);color:#fff;gap:16px;}
  .boot-logo{width:56px;height:56px;border-radius:16px;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:26px;overflow:hidden;}
  .boot-logo img{width:100%;height:100%;object-fit:cover;display:block;}
  .boot-spin{width:28px;height:28px;border-width:3px;border-color:rgba(255,255,255,.3);border-top-color:#fff;}
  .skel{background:linear-gradient(90deg,var(--surface-2) 25%,var(--border) 37%,var(--surface-2) 63%);background-size:400% 100%;animation:skel 1.4s ease infinite;border-radius:8px;}
  @keyframes skel{0%{background-position:100% 50%;}100%{background-position:0 50%;}}
  .chart-box{position:relative;height:260px;}
  .tag{display:inline-flex;padding:2px 8px;background:var(--surface-2);border-radius:6px;font-size:11px;color:var(--muted);margin-right:4px;}

  /* ---------- Pengaturan (Branding & Backup) ---------- */
  .settings-page{padding-bottom:90px;}
  .settings-hint{color:var(--muted);font-size:12.5px;margin:-6px 0 16px;}
  .settings-divider{border:none;border-top:1px solid var(--border);margin:22px 0;}
  .color-field{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap;}
  .color-swatch{width:44px;height:38px;flex-shrink:0;border-radius:8px;border:1px solid var(--border);padding:2px;cursor:pointer;background:var(--surface);}
  .color-field input[type=text]{flex:1;min-width:110px;font-family:monospace;text-transform:lowercase;}
  .color-presets{display:flex;gap:6px;}
  .color-preset{width:26px;height:26px;border-radius:50%;border:2px solid var(--surface);box-shadow:0 0 0 1px var(--border);cursor:pointer;flex-shrink:0;padding:0;}
  .icon-picker{display:flex;flex-wrap:wrap;gap:8px;}
  .icon-picker-item{width:38px;height:38px;border-radius:10px;border:2px solid var(--border);background:var(--surface-2);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);flex-shrink:0;}
  .icon-picker-item svg{width:18px;height:18px;}
  .icon-picker-item.active{border-color:var(--secondary);color:var(--secondary);background:var(--secondary-light,var(--surface));}
  /* Dipakai form Budget/Target (lihat chipMultiHtml_ di AppScript.html) - multi-select Kategori & Sub
     Kategori bergaya chip, bukan <select multiple> native (kurang ergonomis, apalagi di HP). */
  .chip-multi{display:flex;flex-wrap:wrap;gap:8px;max-height:168px;overflow-y:auto;padding:2px;}
  .chip-multi-item{padding:6px 13px;border-radius:99px;border:2px solid var(--border);background:var(--surface-2);font-size:12.5px;color:var(--muted);cursor:pointer;flex-shrink:0;user-select:none;}
  .chip-multi-item.active{border-color:var(--secondary);color:var(--secondary);background:var(--secondary-light,var(--surface));font-weight:700;}
  .logo-upload-row{display:flex;align-items:center;gap:12px;margin-bottom:6px;flex-wrap:wrap;}
  .logo-preview{width:72px;height:72px;border-radius:16px;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;font-weight:800;font-size:26px;}
  .logo-preview img{width:100%;height:100%;object-fit:cover;}
  .settings-savebar{position:fixed;left:264px;right:0;bottom:0;z-index:55;background:var(--surface);border-top:1px solid var(--border);padding:12px 22px;box-shadow:0 -4px 16px rgba(0,0,0,.06);}
  .settings-savebar .btn{width:100%;justify-content:center;}
  @media (max-width:980px){
    .settings-savebar{left:0;bottom:var(--bottom-nav-total-h);padding:10px 14px;}
    .settings-page{padding-bottom:150px;}
  }

  /* ---------- Pengaturan Pembayaran (Transfer Bank / E-Wallet / QRIS Dinamis) ---------- */
  .pay-account-row{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:10px;}
  .pay-badge{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:12px;letter-spacing:-.02em;flex-shrink:0;}
  .qris-preview-box{width:120px;height:120px;border-radius:12px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;background:var(--surface-2);color:var(--muted);}
  .qris-preview-box canvas{width:100%;height:100%;}
  .qris-payload-text{font-family:monospace;font-size:11.5px;color:var(--muted);word-break:break-all;line-height:1.5;}

  /* ---------- Checkout (halaman penuh tersendiri, TANPA shell dashboard - lihat route() di AppScript.html) ---------- */
  .checkout-shell{min-height:100vh;background:var(--bg);display:flex;flex-direction:column;}
  /* Header checkout: tanpa topbar/garis batas - hanya baris tipis ikon menu + badge "Checkout Aman",
     lalu brand (logo/nama/deskripsi) dan stepper proses, semuanya rata tengah (lihat checkoutStepperHtml_
     di AppScript.html untuk markup stepper-nya). */
  .checkout-header{text-align:center;padding:20px 16px 4px;}
  .checkout-header-top{display:flex;align-items:center;justify-content:space-between;}
  .checkout-menu-btn{background:none;border:none;color:var(--ink);cursor:pointer;padding:6px;display:flex;align-items:center;justify-content:center;border-radius:8px;}
  .checkout-menu-btn:hover{background:var(--surface-2);}
  .checkout-menu-btn svg{width:22px;height:22px;}
  .checkout-secure-badge{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--primary-dark);background:var(--primary-light);padding:6px 10px;border-radius:99px;flex-shrink:0;}
  .checkout-secure-badge svg{width:14px;height:14px;}
  .checkout-brand-center{display:flex;flex-direction:column;align-items:center;gap:2px;margin:8px 0 26px;}
  .checkout-logo-lg{width:56px;height:56px;border-radius:16px;overflow:hidden;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:26px;margin-bottom:8px;}
  .checkout-logo-lg img{width:100%;height:100%;object-fit:cover;}
  .checkout-brand-name-lg{font-size:21px;font-weight:800;letter-spacing:-.02em;}
  .checkout-brand-desc-lg{font-size:13px;color:var(--muted);margin-top:2px;}
  .checkout-body{flex:1;max-width:1100px;width:100%;margin:0 auto;padding:4px 16px 40px;box-sizing:border-box;}
  .checkout-loading-row{display:flex;align-items:center;justify-content:center;min-height:60vh;}
  .checkout-loading-progress-wrap{display:flex;align-items:center;gap:10px;width:240px;max-width:70vw;}
  .checkout-loading-progress{flex:1;height:8px;border-radius:99px;background:var(--surface-2);overflow:hidden;}
  .checkout-loading-progress-bar{height:100%;width:0%;background:var(--primary);border-radius:99px;transition:width .2s ease;}
  .checkout-loading-progress-pct{font-size:12px;font-weight:700;color:var(--muted);min-width:34px;text-align:right;flex-shrink:0;}
  /* Overlay "Sedang memproses ..." saat tombol LANJUTKAN PEMBAYARAN diklik (lihat withCheckoutProcessing_
     di AppScript.html) - layar digelapkan+diburamkan supaya jelas seluruh halaman sedang menunggu
     respons server, bukan cuma tombolnya. */
  .checkout-processing-overlay{position:fixed;inset:0;z-index:200;background:rgba(15,23,42,.55);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;}
  .checkout-processing-box{display:flex;flex-direction:column;align-items:center;gap:14px;color:#fff;font-weight:700;font-size:14px;}

  /* Stepper proses (Pilih Versi -> Lengkapi -> Selesaikan): lingkaran kosong+nomor abu-abu = belum
     sampai, lingkaran terisi+nomor = langkah saat ini, lingkaran terisi+centang = sudah lewat. Progres
     mengikuti bagian mana yang sedang diisi pengguna (lihat updateCheckoutStepper_), bukan halaman
     terpisah - checkout ini tetap satu halaman yang di-scroll. */
  .checkout-stepper{display:flex;align-items:flex-start;justify-content:center;max-width:320px;margin:0 auto 24px;}
  .stepper-item{display:flex;flex-direction:column;align-items:center;gap:7px;flex-shrink:0;width:72px;}
  .stepper-circle{width:34px;height:34px;border-radius:50%;border:2px solid var(--border);background:var(--surface);color:var(--muted);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13.5px;flex-shrink:0;}
  .stepper-circle svg{width:16px;height:16px;}
  .stepper-circle.filled{background:var(--secondary);border-color:var(--secondary);color:#fff;}
  .stepper-label{font-size:11.5px;color:var(--muted);font-weight:700;text-align:center;}
  .stepper-label.filled{color:var(--ink);}
  .stepper-line{height:2px;background:var(--border);flex:1;margin-top:17px;min-width:16px;}
  .stepper-line.filled{background:var(--secondary);}

  .checkout-title-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:18px;}
  .checkout-h1{font-size:18px;font-weight:800;margin:0;}

  .checkout-grid{display:flex;flex-direction:column;gap:16px;}
  .checkout-main{display:flex;flex-direction:column;gap:16px;min-width:0;}
  .checkout-side{min-width:0;display:flex;flex-direction:column;gap:16px;}
  @media (min-width:1024px){
    .checkout-grid{display:grid;grid-template-columns:1fr 380px;gap:24px;align-items:start;}
    .checkout-side{position:sticky;top:90px;}
  }

  .checkout-section-label{display:flex;align-items:center;gap:8px;font-weight:800;font-size:14px;margin-bottom:14px;}
  .checkout-section-label svg{width:17px;height:17px;color:var(--secondary);}

  .checkout-plan-row{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;}
  .checkout-plan-name{font-weight:800;font-size:15.5px;}
  .checkout-plan-price{text-align:right;}
  .checkout-plan-price-strike{font-size:12px;color:var(--muted);text-decoration:line-through;}
  .checkout-plan-price-now{font-size:18px;font-weight:800;}

  /* Grid 2 kolom - kartu pembayaran (lihat checkoutPaymentListHtml_/checkoutPayRowHtml_ di
     AppScript.html), menggantikan daftar baris horizontal sebelumnya. Logo memakai ulang .pay-badge
     (sama seperti daftar rekening bank/e-wallet di Pengaturan, tapi diperkecil khusus di sini lewat
     .checkout-pay-card-row .pay-badge) supaya nama bank/e-wallet muat sejajar di SAMPING logo, bukan
     di bawahnya. */
  .checkout-pay-list{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  .checkout-pay-card{position:relative;padding:16px;border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;}
  .checkout-pay-card-row{display:flex;align-items:center;gap:10px;}
  .checkout-pay-card-row .pay-badge{width:36px;height:36px;border-radius:9px;font-size:10px;}
  .checkout-pay-card-text{min-width:0;}
  .checkout-pay-card-name{font-weight:700;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .checkout-pay-card-cat{font-size:11px;}
  /* Highlight kartu terpilih SENGAJA pakai class biasa (diatur manual lewat JS di onCheckoutPaymentPick_/
     onPublicPaymentPick_), BUKAN selector :has() - :has() memaksa browser menghitung ulang style SELURUH
     kartu di daftar setiap kali satu checkbox dicentang/dilepas (perubahan state checkbox mana pun bisa
     mengubah hasil :has() di kartu lain), yang di HP lebih lemah terasa macet sesaat setelah tiap tap -
     ini yang menyebabkan laporan "freeze, kadang checkbox yang ke-klik malah bukan yang disentuh" (jeda
     render itu membuat sentuhan berikutnya jatuh di elemen yang salah). Class langsung di kartu yang
     berubah jauh lebih murah karena cuma 1-2 elemen yang di-restyle, bukan seluruh daftar. */
  .checkout-pay-card.pay-row-selected{border-color:var(--secondary);border-width:2px;padding:15px;background:var(--secondary-light,var(--surface-2));}
  .checkout-pay-check-badge{position:absolute;top:12px;right:12px;color:var(--secondary);display:none;}
  .checkout-pay-card.pay-row-selected .checkout-pay-check-badge{display:flex;}
  .checkout-pay-check-badge svg{width:18px;height:18px;}
  .checkout-pay-checkbox{width:18px;height:18px;flex-shrink:0;margin:0;accent-color:var(--secondary);}

  .checkout-terms-row{display:flex;align-items:flex-start;gap:10px;font-size:13px;}
  .checkout-terms-row input{width:auto;margin-top:2px;}

  .checkout-sum-row{display:flex;justify-content:space-between;font-size:13.5px;padding:4px 0;}
  .checkout-sum-discount{color:var(--primary-dark);}
  .checkout-sum-total{display:flex;justify-content:space-between;align-items:baseline;font-size:20px;font-weight:800;letter-spacing:-.02em;}
  .checkout-pay-btn{width:100%;justify-content:center;margin-top:16px;font-size:15px;padding:13px;}
  .checkout-trust-row{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:10px;}
  .checkout-trust-row span{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--muted);white-space:nowrap;}
  .checkout-trust-row svg{width:13px;height:13px;flex-shrink:0;}

  .checkout-status-wrap{padding:30px 0;}
  .checkout-status-icon{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto;}
  .checkout-status-icon svg{width:28px;height:28px;}
  .checkout-status-icon-pending{background:var(--warning-light);color:var(--warning);}
  .checkout-status-icon-success{background:var(--success-light);color:var(--success-dark);}
  .checkout-status-icon-fail{background:var(--error-light);color:var(--error);}
  .checkout-status-row{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;padding:8px 0;border-bottom:1px solid var(--border);}
  .checkout-status-row:last-of-type{border-bottom:none;}
  .checkout-countdown{text-align:center;font-size:12.5px;font-weight:700;color:var(--warning);margin-top:8px;}