* {
  box-sizing: border-box;
}
body {
  margin: 0;
  width: 100%;
  overflow-x: hidden;
  font-family:
    "Plus Jakarta Sans",
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  background: #fafaf8;
  color: #0b0d12;
  transition: 0.25s;
  -webkit-font-smoothing: antialiased;
}

/* Status antrean lokal. Diletakkan di atas navigasi bawah agar tetap
   terlihat di iOS/Android, tetapi tidak menutup tombol apa pun. */
.offline-sync-banner {
  position: fixed;
  left: 50%;
  bottom: calc(5.4rem + env(safe-area-inset-bottom, 0px));
  z-index: 160;
  width: max-content;
  max-width: calc(100vw - 2rem);
  min-height: 2.35rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transform: translateX(-50%);
  padding: 0.55rem 0.8rem;
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 999px;
  color: #78350f;
  background: rgba(255, 251, 235, 0.96);
  box-shadow: 0 12px 30px -18px rgba(120, 53, 15, 0.65);
  backdrop-filter: blur(12px);
  font-size: 0.67rem;
  font-weight: 700;
}
.offline-sync-banner > span {
  min-width: 0;
}
.offline-sync-button {
  flex: 0 0 auto;
  min-height: 1.7rem;
  padding: 0.28rem 0.58rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: inherit;
  background: rgba(255, 255, 255, 0.78);
  font: inherit;
  font-size: 0.62rem;
  line-height: 1;
  cursor: pointer;
}
.offline-sync-button:disabled {
  cursor: wait;
  opacity: 0.55;
}
.offline-sync-button.hidden {
  display: none !important;
}
.offline-sync-banner.hidden {
  display: none !important;
}
.offline-sync-banner svg {
  width: 0.9rem;
  height: 0.9rem;
  flex: 0 0 auto;
}
.offline-sync-banner.synced {
  color: #065f46;
  border-color: rgba(5, 150, 105, 0.2);
  background: rgba(236, 253, 245, 0.96);
}
@media (min-width: 1024px) {
  .offline-sync-banner {
    bottom: 1.25rem;
  }
}
@media (max-width: 380px) {
  .offline-sync-banner {
    width: calc(100vw - 1rem);
    max-width: none;
    gap: 0.38rem;
    padding: 0.48rem 0.55rem;
    border-radius: 1rem;
    font-size: 0.61rem;
  }
  .offline-sync-banner > span {
    flex: 1 1 auto;
    line-height: 1.25;
  }
  .offline-sync-button {
    padding-inline: 0.45rem;
    font-size: 0.58rem;
  }
}
.glass {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(11, 13, 18, 0.08);
  box-shadow: 0 10px 30px -10px rgba(11, 13, 18, 0.08);
}
.bento {
  border-radius: 24px;
}
.btn {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn:active {
  transform: scale(0.96);
}
.risk-red {
  border-left: 4px solid #ef4444;
  background: linear-gradient(
    135deg,
    rgba(239, 68, 68, 0.03) 0%,
    rgba(255, 255, 255, 0.95) 100%
  );
}
.risk-yellow {
  border-left: 4px solid #eab308;
  background: linear-gradient(
    135deg,
    rgba(234, 179, 8, 0.03) 0%,
    rgba(255, 255, 255, 0.95) 100%
  );
}
.risk-green {
  border-left: 4px solid #22c55e;
  background: linear-gradient(
    135deg,
    rgba(34, 197, 94, 0.03) 0%,
    rgba(255, 255, 255, 0.95) 100%
  );
}
.hidden-page {
  display: none !important;
}
.fade-in {
  animation: fadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
input,
select,
textarea {
  outline: none;
  min-width: 0;
}
.loader {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(163, 23, 43, 0.2);
  border-top-color: #a3172b;
  border-radius: 999px;
  animation: spin 0.7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.safe-lock {
  background: linear-gradient(
    135deg,
    rgba(15, 157, 119, 0.08) 0%,
    rgba(15, 157, 119, 0.01) 100%
  );
}
.food-gap {
  background: linear-gradient(
    135deg,
    rgba(217, 119, 6, 0.08) 0%,
    rgba(217, 119, 6, 0.01) 100%
  );
}
.food-empty {
  background: linear-gradient(
    135deg,
    rgba(163, 23, 43, 0.08) 0%,
    rgba(163, 23, 43, 0.01) 100%
  );
}
.food-neutral {
  background: linear-gradient(
    135deg,
    rgba(113, 113, 122, 0.08) 0%,
    rgba(113, 113, 122, 0.01) 100%
  );
}
.float-slow {
  animation: floatY 5s ease-in-out infinite;
}
@keyframes floatY {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}
.modern-insight-card {
  background: linear-gradient(
    135deg,
    rgba(163, 23, 43, 0.03) 0%,
    rgba(255, 255, 255, 0.95) 100%
  );
  border: 1px solid rgba(163, 23, 43, 0.12);
  box-shadow: 0 16px 36px -10px rgba(163, 23, 43, 0.08);
}

/* Pengeluaran tetap terlihat; rincian analisa dibuka sesuai kebutuhan. */
.home-expenses-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.home-expense-card { min-width: 0; padding: 16px; background: #fff; border: 1px solid #e4e4e7; border-radius: 20px; }
button.home-expense-card { display: block; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; transition: transform 0.15s, border-color 0.15s; }
button.home-expense-card:hover { border-color: #fecdd3; }
button.home-expense-card:active { transform: scale(0.98); }
.home-expense-panah { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; color: #71717a; }
.home-expense-yesterday { background: #fff5f6; border-color: #f2d6dc; }
.home-expense-label { min-height: 32px; font-size: 12px; line-height: 16px; font-weight: 600; color: #71717a; }
.home-expense-value { margin-top: 5px; font-family: "Plus Jakarta Sans", sans-serif; font-size: 25px; line-height: 1.3; font-weight: 700; color: #18181b; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.home-expense-yesterday .home-expense-value { color: #a3172b; }
.home-expense-caption { margin: 5px 0 0; font-size: 12px; line-height: 1.5; color: #71717a; }
.home-expense-scope { margin: 7px 2px 0; font-size: 12px; line-height: 1.5; color: #71717a; }
.an-accordion > summary { list-style: none; }
.an-accordion > summary::-webkit-details-marker { display: none; }
.an-accordion-kepala { display: flex; align-items: center; gap: 12px; padding: 20px; min-height: 76px; cursor: pointer; border-radius: inherit; }
.an-accordion-kepala:focus-visible { outline: 2px solid #a3172b; outline-offset: 3px; }
.an-accordion-icon { flex: 0 0 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: #a3172b; color: #fff; border-radius: 12px; }
.an-accordion-icon svg { width: 18px; height: 18px; }
.an-accordion-title { flex: 1; min-width: 0; }
.an-accordion-title > span { display: block; font-size: 14px; line-height: 1.4; font-weight: 700; color: #18181b; }
.an-accordion-title > small { display: block; margin-top: 3px; font-size: 12px; line-height: 1.5; color: #71717a; }
.an-accordion-chevron { width: 18px; height: 18px; flex: 0 0 18px; color: #a3172b; transition: transform 160ms ease; }
.an-accordion[open] > summary .an-accordion-chevron { transform: rotate(180deg); }
.an-accordion-isi { padding: 0 20px 20px; }
.an-accordion-isi > #anModeBadge { margin-bottom: 12px; }
.ui-nyaman .home-expense-label, .ui-nyaman .an-accordion-title > span { font-size: 15px; }
.ui-nyaman .home-expense-label { min-height: 40px; line-height: 20px; }
.ui-nyaman .home-expense-caption, .ui-nyaman .home-expense-scope, .ui-nyaman .an-accordion-title > small { font-size: 13px; }
@media (max-width: 359px) {
  .home-expenses-grid { grid-template-columns: 1fr; }
  .home-expense-label, .ui-nyaman .home-expense-label { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .an-accordion-chevron { transition: none; } }

/* --- UPLOAD DROPZONE: FIX OVERFLOW NAMA FILE PANJANG --- */
.upload-dropzone {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1rem;
  border: 1.5px dashed rgba(11, 13, 18, 0.18);
  border-radius: 0.75rem;
  background: #fafaf8;
  color: #6b7280;
  cursor: pointer;
  transition: 0.2s;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}
.upload-dropzone:hover {
  border-color: #a3172b;
  background: rgba(163, 23, 43, 0.03);
  color: #a3172b;
}
.upload-dropzone i,
.upload-dropzone svg {
  flex: 0 0 auto;
}
.upload-dropzone .upload-dropzone-filename {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  text-align: left;
}

.scrollbar-none {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.scrollbar-none::-webkit-scrollbar {
  display: none;
}
.loader-shimmer {
  background: linear-gradient(
    90deg,
    rgba(163, 23, 43, 0.1) 25%,
    rgba(163, 23, 43, 0.35) 50%,
    rgba(163, 23, 43, 0.1) 75%
  );
  background-size: 200% 100%;
  animation: shimmerMove 1.4s ease-in-out infinite;
}
@keyframes shimmerMove {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
#globalLoader {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.22s ease,
    visibility 0.22s ease;
}
#globalLoader.visible {
  opacity: 1;
  visibility: visible;
}

/* --- DIPERBARUI: SPLASH SCREEN / LOADER CARD SUPAYA TIDAK SIKU & ADA BORDER --- */
#globalLoaderCard {
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  border-radius: 24px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.25);
}

@media (prefers-reduced-motion: reduce) {
  .loader-shimmer {
    animation: none;
  }
  #globalLoader,
  #globalLoaderCard {
    transition: none;
  }
}

/* ==========================================================================
   KARTU STATISTIK: SEJAJAR, DAN ANGKANYA TIDAK KELUAR DARI KARTU
   ==========================================================================
   DUA MASALAH YANG DIPERBAIKI DI SINI.

   1. TIDAK SEJAJAR. Aturan lama memberi tinggi minimum 42px pada label
      kartu statistik supaya angka di keempat kartu berada di garis yang
      sama. Lalu kartu "Sisa Uang / Kebutuhan Pokok" dikecualikan dari
      aturan itu (min-height: 0), karena kartu itu punya DUA label dan
      terlihat terlalu jangkung. Akibatnya angka pertamanya naik sekitar
      29px dan tidak lagi sejajar dengan tiga kartu di sebelahnya --
      pengecualian itu memperbaiki tinggi kartu tapi merusak kelurusannya.

      Sekarang semua label memakai tinggi yang sama, termasuk yang di
      kartu terbagi. Barisnya jadi: label sejajar, angka sejajar, dan
      keterangan paling bawah sejajar (didorong ke dasar kartu). Bagian
      tengah kartu terbagi -- garis pembatas dan blok keduanya -- mengisi
      ruang sisa di antaranya.

   2. ANGKA MELUBER KELUAR KARTU. Nominal dirender dengan ukuran tetap
      (text-2xl). Selama angkanya pendek tidak terlihat masalahnya, tapi
      begitu pengguna mencatat data sungguhan -- "Rp 1.740.332.976" di
      kartu selebar 200px -- teksnya melewati tepi kartu.

      Penanganannya dua lapis. Lapis pertama di sini: nowrap + overflow
      hidden, supaya seburuk apa pun keadaannya teks TIDAK pernah keluar
      kotak. Lapis kedua di app.js (paskanNominal_): ukuran huruf
      dikecilkan bertahap hanya kalau memang tidak muat, jadi angka pendek
      tetap tampil besar dan angka panjang tetap terbaca utuh -- bukan
      dipotong. Keduanya diperlukan: CSS saja akan memotong angka, JS saja
      akan gagal kalau skripnya belum jalan.
   ========================================================================== */
.stat-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
}

.stat-label {
  display: flex !important;
  align-items: flex-start !important;
  gap: 6px !important;
  min-height: 2.65rem;
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: -0.01em !important;
  line-height: 1.25 !important;
  text-transform: uppercase;
  min-width: 0;
}
.stat-label svg,
.stat-label i {
  flex: 0 0 14px !important;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  max-width: 14px !important;
  max-height: 14px !important;
  margin-top: 2px !important;
  object-fit: contain;
}
.stat-label span {
  flex: 1 1 auto !important;
  min-width: 0;
  line-height: 1.25 !important;
}

.stat-value {
  display: block;
  width: 100%;
  min-width: 0;
  margin-top: 0.15rem;
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  /* Jaring pengaman: MEMBUNGKUS, bukan memotong. Lihat catatan di
     [data-fit] di bawah -- nominal tidak boleh pernah kena elipsis. */
  overflow-wrap: anywhere;
}

/* Ruang tengah kartu statistik sederhana. Nominalnya dipusatkan secara
   tegak di sisa ruang antara label dan keterangan bawah, bukan menempel
   di bawah label -- kalau menempel, kartu terlihat berat di atas dan
   kosong melompong di bawahnya. Kartu terbagi dua tidak memakai ini:
   ruangnya memang sudah terpakai oleh blok keduanya. */
.stat-body {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-width: 0;
}

.stat-sub {
  font-size: 12px;
  line-height: 1.4;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Keterangan terakhir tiap kartu didorong ke dasar, jadi garis bawahnya
   sejajar di keempat kartu berapa pun panjang isi di atasnya. */
.stat-sub-bottom {
  margin-top: auto;
  padding-top: 0.5rem;
}

@media (max-width: 380px) {
  .glass.bento {
    padding: 1.1rem !important;
  }
  #profileForm input,
  #profileForm select,
  #cashflowModal input,
  #cashflowModal select,
  #debtModal input,
  #debtModal select,
  #basicNeedForm input,
  #basicNeedForm select {
    font-size: 16px;
  }
  .font-display.text-3xl {
    font-size: 1.6rem !important;
  }
}

@media (max-width: 340px) {
  #profileForm .grid.grid-cols-2 {
    grid-template-columns: 1fr;
  }
}

#app,
#app * {
  min-width: 0;
}
img,
svg {
  max-width: 100%;
}

.skeleton-block {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    100deg,
    rgba(11, 13, 18, 0.055) 8%,
    rgba(11, 13, 18, 0.09) 18%,
    rgba(11, 13, 18, 0.055) 33%
  );
  background-size: 200% 100%;
  animation: skeletonSweep 1.6s ease-in-out infinite;
}
.skeleton-block::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 40%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 60%
  );
  background-size: 200% 100%;
  animation: skeletonSweep 1.6s ease-in-out infinite;
  animation-delay: 0.05s;
}
@keyframes skeletonSweep {
  0% {
    background-position: 150% 0;
  }
  100% {
    background-position: -50% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton-block,
  .skeleton-block::after {
    animation: none;
    background-position: 0 0;
  }
}

.skeleton-line {
  border-radius: 8px;
  height: 0.85em;
}

.is-refreshing {
  position: relative;
  transition: opacity 0.2s ease;
}
.is-refreshing::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.5);
  /* Safari (macOS & iOS) hanya mengenali versi berawalan -webkit-. Tanpa
     baris itu, efek buramnya hilang sama sekali di sana. */
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  pointer-events: none;
  animation: refreshPulse 1s ease-in-out infinite;
}
/* PENYEGARAN SAAT APLIKASI BARU DIBUKA -- TANPA MENUTUPI ANGKANYA.
   ----------------------------------------------------------------
   .is-refreshing memburamkan seluruh isi. Itu pas untuk penyegaran yang
   diminta pengguna: ia menekan tombol, ia menunggu, buramnya menjawab
   "iya, sedang diproses".

   Tapi saat aplikasi baru dibuka, isinya berasal dari simpanan dan
   satu-satunya alasan menampilkannya adalah supaya BISA DIBACA. Memburam-
   kannya selama satu sampai tiga detik menghapus seluruh manfaatnya --
   pengguna tetap menatap layar yang tidak terbaca, cuma sekarang ada
   angka samar di baliknya.

   Karena itu versi halus: angkanya dibiarkan tajam, dan yang bergerak
   cuma garis tipis di tepi atas. */
.is-refreshing.is-refreshing--halus::after {
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  animation: none;
  inset: 0 0 auto 0;
  height: 2px;
  border-radius: 0;
  overflow: hidden;
}
.is-refreshing.is-refreshing--halus::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  width: 38%;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #a3172b, transparent);
  animation: garisSegar 1.1s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes garisSegar {
  0% {
    transform: translateX(-40%);
  }
  100% {
    transform: translateX(300%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .is-refreshing.is-refreshing--halus::before {
    animation: none;
    width: 100%;
    opacity: 0.5;
  }
}

@keyframes refreshPulse {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 0.15;
  }
}

.bn-freq-btn {
  border-color: #e4e4e7;
  background: #ffffff;
  color: #71717a;
}
.bn-freq-btn:hover {
  border-color: #e99a9c;
  background: #fdf3f2;
}
.bn-freq-btn.bn-freq-active {
  border-color: #a3172b;
  background: #fdf3f2;
  color: #861525;
  box-shadow: 0 4px 14px -6px rgba(163, 23, 43, 0.35);
}
.bn-freq-btn .bn-freq-check {
  color: #a3172b;
}

#basicNeedsList {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.scroll-fade-y {
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    black 14px,
    black calc(100% - 14px),
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    black 14px,
    black calc(100% - 14px),
    transparent 100%
  );
}
.bn-need-row {
  padding: 0.9rem 0.85rem;
  row-gap: 0.4rem;
  flex-wrap: wrap;
}
.bn-need-statusbaris {
  flex: 0 0 100%;
  min-width: 0;
}
.bn-need-row.bn-need-redup .bn-need-amount {
  color: #71717a;
  text-decoration: line-through;
}
.bn-need-status {
  font-size: 12px;
  line-height: 1.4;
  color: #71717a;
}
.bn-need-status.ditutup {
  color: #047857;
  font-weight: 600;
}
.bn-need-status button {
  font-weight: 700;
  color: #be123c;
  text-decoration: underline;
}
.bn-need-status.pilih {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.bn-need-status.pilih button {
  padding: 5px 10px;
  border-radius: 999px;
  background: #fff1f2;
  text-decoration: none;
}
.bn-need-status.pilih button.batal {
  background: transparent;
  color: #71717a;
}
.bn-need-tutup {
  font-size: 12px;
  font-weight: 600;
  color: #be123c;
}
@media (max-width: 420px) {
  .bn-need-row {
    padding: 1rem 0.9rem;
  }
  .bn-need-row .bn-need-name {
    font-size: 0.95rem;
  }
  .bn-need-row .bn-need-amount {
    font-size: 0.95rem;
  }
}

.ch-filter-btn {
  background: #ffffff;
  border-color: #e4e4e7;
  color: #52525b;
}
.ch-filter-btn:hover {
  background: #fafafa;
  border-color: #d4d4d8;
}
.ch-filter-active {
  background: #a3172b !important;
  border-color: #a3172b !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px -4px rgba(163, 23, 43, 0.45);
}

@media (max-width: 640px) {
  #profileForm input,
  #profileForm select {
    font-size: 16px;
  }
}
#profileForm input[type="date"],
#profileForm select {
  -webkit-appearance: none;
  appearance: none;
  min-height: 48px;
  line-height: 1.3;
  background-color: #fff;
}
#profileForm select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 16px;
  padding-right: 2.5rem;
}
#profileForm input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.upload-dropzone-done {
  border-style: solid;
  border-color: rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.06);
  color: #047857;
}
.upload-dropzone-done:hover {
  border-color: #a3172b;
  background: rgba(163, 23, 43, 0.03);
  color: #a3172b;
}

.no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.post-thumb {
  position: relative;
  width: 72px;
  height: 72px;
  flex: 0 0 auto;
  border-radius: 0.85rem;
  overflow: hidden;
  border: 1px solid rgba(11, 13, 18, 0.08);
}
.post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.post-thumb button {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  background: rgba(11, 13, 18, 0.7);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.post-carousel {
  scroll-snap-type: x mandatory;
}
.post-carousel > img {
  scroll-snap-align: start;
}

.post-thumb-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 13, 18, 0.45);
}
.post-thumb-error {
  color: #fff;
  cursor: pointer;
}
.post-thumb-done {
  position: absolute;
  bottom: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  background: #10b981;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ========================================================== */
/* PERBAIKAN PRESISI KHUSUS iOS (SAFE AREA, DATE, & HEADER)  */
/* ========================================================== */

/* 1. Perbaikan Posisi Navbar Bawah di iOS */
#mobileNavbar {
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  border-radius: 1.5rem 1.5rem 0 0;
  padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
  padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  #mobileNavbar {
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
  }
}

/* Setiap halaman dan kontrol navigasi tetap tepat di dalam viewport.
   Ini mencegah scrollbar horizontal/ruang kosong akibat elemen lebar
   penuh pada desktop maupun perangkat iOS dan Android. */
html,
body,
main,
section,
header,
nav {
  max-width: 100%;
}

/* --- PERBAIKAN: NAVBAR MUNCUL DI HALAMAN LOGIN ---------------------
   Navbar dipasangi class "hidden" DAN "flex" sekaligus di index.html.
   Keduanya sama-sama mengatur properti display dan punya specificity
   identik (0,1,0), jadi pemenangnya ditentukan semata oleh urutan aturan
   di dalam stylesheet hasil generate Tailwind -- bukan oleh urutan
   penulisan di atribut class. Dengan Tailwind Play CDN
   (cdn.tailwindcss.com) urutan itu tidak dijamin, dan di perangkat ini
   ".flex" yang menang. Akibatnya navbar selalu terlihat, dan
   classList.add("hidden") dari app.js tidak berpengaruh sama sekali --
   itulah kenapa perbaikan di sisi JavaScript saja tidak menyelesaikan
   masalah ini.

   Selector di bawah memakai ID + class (specificity 1,1,0) sehingga
   selalu mengalahkan ".flex" apa pun urutan yang dihasilkan Tailwind. */
#mobileNavbar.hidden {
  display: none !important;
}

/* Padanan "lg:hidden": navbar bawah hanya untuk layar kecil. Aturan ini
   perlu ditulis ulang di sini karena ".lg\:hidden" bawaan Tailwind kalah
   specificity dari selector ber-ID di atas. */
@media (min-width: 1024px) {
  #mobileNavbar {
    display: none !important;
  }
}

/* 2. Perbaikan Field Tanggal Supaya Tidak Keluar Container di iOS */
input[type="date"] {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  min-width: 0 !important;
}

.grid input[type="date"],
.space-y-3 input[type="date"],
.space-y-4 input[type="date"],
.space-y-5 input[type="date"] {
  min-width: 0;
  max-width: 100%;
}

/* 3. Perbaikan Header Atas agar Tidak Tertutup Notch / Kamera Depan iOS */
@supports (padding-top: env(safe-area-inset-top)) {
  header.sticky {
    padding-top: env(safe-area-inset-top);
  }
}

/* 4. PERBAIKAN (kendala #3): pastikan tombol Google Sign-In (iframe dari
   Google Identity Services) tidak pernah melebihi lebar containernya di
   layar sempit -- lapisan pertahanan terakhir di atas fix width dinamis
   yang sudah dilakukan di app.js (initializeGoogleLogin). */
#googleButton {
  max-width: 100%;
  overflow: hidden;
}
#googleButton > div {
  max-width: 100% !important;
}

/* ==========================================================================
   SISTEM MODAL: PRESISI, BERTUMPUK, & AMAN DARI KEYBOARD  (kendala #1 & #6)
   ==========================================================================
   Dua masalah yang diperbaiki di sini sekaligus:

   1. TERTIMPA (kendala #1). Modal "Catat/Ubah Kas" dan modal "Riwayat Kas
      Lengkap" dua-duanya memakai z-50. Ketika keduanya terbuka, yang
      menang ditentukan semata oleh urutan elemen di DOM -- dan
      cashHistoryModal ditulis SETELAH cashflowModal, jadi form ubahnya
      selalu berada di BAWAH daftar riwayat. Di desktop kebetulan masih
      terlihat karena lebar layarnya, di HP form itu tertutup rapat.
      Sekarang setiap modal yang dibuka mendapat z-index dinamis di atas
      modal yang sudah terbuka (lihat bukaModal() di app.js), dan kelas
      .modal-overlay di bawah ini yang menjadi penanda elemennya.

   2. TOMBOL SIMPAN TIDAK TERJANGKAU (kendala #6). Sebelumnya isi modal
      dipusatkan dengan `flex items-center` pada lapisan yang TIDAK bisa
      digulir. Begitu isinya lebih tinggi dari layar -- form tagihan yang
      sudah punya beberapa jadwal cicilan, form profil, atau layar pendek
      karena keyboard HP muncul -- bagian atas dan bawahnya terpotong
      keluar layar dan tombol submit benar-benar tidak bisa dijangkau.
      Sekarang lapisannya sendiri yang bisa digulir: modal tetap di tengah
      selama masih muat (margin:auto), dan otomatis menempel ke atas lalu
      bisa digulir begitu tidak muat.
   ========================================================================== */
/* MODAL TERSEMBUNYI HARUS BENAR-BENAR TERSEMBUNYI.
   Setiap modal ditulis dengan class "hidden" DAN "flex" sekaligus.
   Keduanya mengatur properti display dengan specificity yang sama
   (0,1,0), jadi pemenangnya ditentukan semata oleh urutan aturan di
   stylesheet hasil generate Tailwind -- dan dengan Tailwind Play CDN
   (cdn.tailwindcss.com) urutan itu TIDAK dijamin. Ini masalah yang sama
   yang dulu membuat navbar bawah muncul di halaman login (lihat
   #mobileNavbar.hidden di atas): kalau ".flex" yang menang, modal
   tersembunyi tetap menempati layar dan menghalangi ketukan pada apa pun
   di bawahnya -- termasuk tombol Simpan di form yang sedang dibuka.

   Selector ini memakai atribut + class (specificity 0,2,0) plus
   !important, jadi selalu menang apa pun urutan yang dihasilkan
   Tailwind. Tanpa ini, perbaikan presisi modal apa pun tetap bisa
   dipatahkan oleh urutan CSS yang di luar kendali kita. */
[data-modal-overlay].hidden {
  display: none !important;
}

.modal-overlay {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  align-items: flex-start !important;
  padding-top: max(1rem, env(safe-area-inset-top, 0px)) !important;
  padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px)) !important;
}

/* Anak langsung modal (kartunya) tetap terpusat selama tingginya muat.
   `margin:auto` pada flex item memusatkan di kedua arah TANPA memotong
   bagian yang meluber -- ini yang tidak bisa dilakukan `items-center`.

   Elemen berposisi absolute dikecualikan (tombol tutup di lightbox,
   panah navigasi): margin auto pada elemen absolute justru menggeser
   posisinya dari tempat yang sudah ditentukan inset-nya. */
.modal-overlay > *:not(.absolute) {
  margin-top: auto !important;
  margin-bottom: auto !important;
  flex-shrink: 0;
}

/* Modal yang memang dirancang menempel ke bawah layar di HP
   (bottom sheet) tetap menempel ke bawah -- tapi sekarang bisa digulir
   kalau isinya lebih tinggi dari layar. */
#postComposerModal.modal-overlay > *:not(.absolute),
#pushPromptModal.modal-overlay > *:not(.absolute),
#installAppModal.modal-overlay > *:not(.absolute) {
  margin-bottom: 0 !important;
}
@media (min-width: 640px) {
  #postComposerModal.modal-overlay > *:not(.absolute),
  #pushPromptModal.modal-overlay > *:not(.absolute),
  #installAppModal.modal-overlay > *:not(.absolute) {
    margin-bottom: auto !important;
  }
}

/* Modal chat memang dirancang menempel penuh ke bawah di HP: biarkan
   perilaku aslinya, jangan diubah jadi bisa digulir. */
#chatThreadModal.modal-overlay {
  overflow: hidden;
  align-items: flex-end !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
@media (min-width: 640px) {
  #chatThreadModal.modal-overlay {
    align-items: center !important;
    padding: 1rem !important;
  }
}
#imageLightbox.modal-overlay,
#photoCropModal.modal-overlay {
  align-items: center !important;
}
#imageLightbox.modal-overlay {
  overflow: hidden;
  padding: 0 !important;
}

/* Modal besar yang isinya bergulir sendiri (riwayat, tren, kebutuhan
   pokok) tidak perlu ikut digulir dari lapisannya. */
.modal-overlay > .modal-sheet {
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
}

/* Begitu ada field yang mendapat fokus, browser HP mengangkat keyboard
   dan memangkas tinggi viewport. scroll-margin memberi ruang supaya
   field yang sedang diisi -- dan tombol di bawahnya -- tidak berhenti
   tepat di balik keyboard saat digulirkan ke tampilan. */
.modal-overlay input,
.modal-overlay select,
.modal-overlay textarea {
  scroll-margin-top: 5rem;
  scroll-margin-bottom: 7rem;
}

/* Bantuan dibuka dari modal Profil. Sebagian Android WebView gagal
   menampilkan overlay kedua bila hanya mengandalkan kelas z-index Tailwind;
   selector tetap ini membuatnya selalu menjadi satu dialog penuh di atas. */
#supportModal {
  z-index: 96 !important;
  min-height: 100vh;
  min-height: 100dvh;
}

#supportModal > div {
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Biarkan browser tetap menggulir chat secara vertikal, tetapi kirim
   gerakan horizontal ke JavaScript agar “geser kanan untuk balas” konsisten
   pada Android dan iPhone. */
#chatMessagesList [data-msg] {
  touch-action: pan-y;
  -webkit-touch-callout: none;
  user-select: none;
}

#chatMsgMenu.hidden {
  display: none !important;
}

/* Lapisan menu pesan dibuat tipis supaya pesan yang dipilih tetap
   terlihat jelas di belakangnya. */
#chatMsgMenu {
  background-color: rgba(11, 13, 18, 0.15);
}

/* Pesan yang sedang dipilih (ditahan): blok sorotan selebar baris plus
   garis di gelembungnya, tetap terlihat di balik lapisan menu. */
#chatMessagesList [data-msg] {
  position: relative;
  border-radius: 14px;
  transition: background-color 0.15s ease;
}

#chatMessagesList [data-msg].chat-terpilih {
  background-color: rgba(163, 23, 43, 0.16);
  box-shadow: 0 0 0 4px rgba(163, 23, 43, 0.16);
}

#chatMessagesList [data-msg].chat-terpilih > div {
  box-shadow: 0 0 0 2px #a3172b;
}

/* Ikon balas yang muncul saat gelembung digeser kiri/kanan. */
.chat-geser-ikon {
  position: absolute;
  top: 50%;
  left: 4px;
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  background: #fff;
  color: #a3172b;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-50%) scale(0.6);
}

.chat-geser-ikon.kanan {
  left: auto;
  right: 4px;
}
#chatMsgMenu:not(.hidden) {
  display: flex;
}
#chatMsgMenu {
  position: fixed;
  inset: 0;
  z-index: 130;
}
#supportModal:not(.hidden) {
  display: flex;
}

/* ==========================================================================
   KARTU KEBUTUHAN POKOK TERBAGI DUA  (kendala #4)
   ==========================================================================
   Satu kartu, dua ruang, dipisah satu garis yang membentang penuh dari
   tepi kiri ke tepi kanan kartu. Karena kartunya punya padding, garis
   ditarik keluar dengan margin negatif sebesar padding itu -- kalau
   tidak, garisnya berhenti di dalam dan tidak terbaca sebagai pembatas
   dua bagian.
   ========================================================================== */
.split-card {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.split-card-divider {
  height: 1px;
  border: 0;
  margin: 0.875rem -1.25rem;
  background: linear-gradient(
    90deg,
    rgba(11, 13, 18, 0.02) 0%,
    rgba(11, 13, 18, 0.14) 12%,
    rgba(11, 13, 18, 0.14) 88%,
    rgba(11, 13, 18, 0.02) 100%
  );
}
.split-card-half {
  min-width: 0;
}

/* ==========================================================================
   PRIORITAS TAGIHAN PILIHAN PENGGUNA  (kendala #10)
   ========================================================================== */
.prio-group-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.125rem 0.5rem;
}
.prio-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex: 0 0 auto;
}
.prio-urgent .prio-dot,
.prio-chip-urgent {
  background: #a3172b;
}
.prio-high .prio-dot,
.prio-chip-high {
  background: #f97316;
}
.prio-medium .prio-dot,
.prio-chip-medium {
  background: #eab308;
}
.prio-low .prio-dot,
.prio-chip-low {
  background: #64748b;
}
.prio-chip {
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 6px;
  line-height: 1.5;
  flex: 0 0 auto;
}
.prio-select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 10px;
  padding-right: 16px;
}

/* Kartu tagihan yang cicilan bulan ini sudah dibayar (kendala #12).
   Tetap bisa dibayar lagi -- hanya diberi tanda supaya tidak salah
   ketuk dua kali tanpa sadar. */
.debt-paid {
  position: relative;
}
.debt-paid::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.45);
  pointer-events: none;
}
.debt-paid > * {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   TULISAN AI TERSINGKAP BERTAHAP  (kendala #7)
   ==========================================================================
   Menggantikan tiga titik "sedang mengetik" yang membuat pengguna merasa
   menggantung. Yang dilihat sekarang: teks jawaban tampil sedikit demi
   sedikit, dengan kursor tipis di ujung -- jelas sedang berjalan, bukan
   macet.
   ========================================================================== */
.ai-caret::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: currentColor;
  opacity: 0.75;
  animation: aiCaret 0.9s steps(1) infinite;
}
@keyframes aiCaret {
  0%,
  49% {
    opacity: 0.75;
  }
  50%,
  100% {
    opacity: 0;
  }
}
.ai-draft-line {
  height: 0.7rem;
  border-radius: 6px;
  background: rgba(11, 13, 18, 0.08);
  overflow: hidden;
  position: relative;
}
.ai-draft-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(163, 23, 43, 0.22) 50%,
    transparent 100%
  );
  background-size: 220% 100%;
  animation: aiDraftSweep 1.1s ease-in-out infinite;
}
@keyframes aiDraftSweep {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -60% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ai-caret::after,
  .ai-draft-line::after {
    animation: none;
  }
}

/* ==========================================================================
   PANEL ANALISIS AI PER MODE  (kendala #11)
   ========================================================================== */
/* --------------------------------------------------------------------------
   TAB PENGURUT (dipakai pengatur urutan di Mapping Prioritas)
   --------------------------------------------------------------------------
   Sebelumnya tiap tab hanya berpadding 0,4rem dengan jarak antartab 0,25rem
   -- di layar sempit ketiganya nyaris bersentuhan, dan area ketuknya hanya
   sekitar 28px, di bawah ambang nyaman untuk jari (44px). Sekarang lebih
   lapang, punya keadaan hover yang terlihat, dan cincin fokus untuk
   navigasi papan ketik. */
.an-tab-bar {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3rem;
  border-radius: 1rem;
  background: rgba(244, 244, 245, 0.9);
  border: 1px solid rgba(11, 13, 18, 0.05);
}
.an-tab {
  flex: 1 1 0;
  min-width: 0;
  /* 42px: sedikit di bawah 44px yang disarankan Apple & Google, tapi
     karena ketiganya berjajar rapat dalam satu bilah dan tidak ada
     sasaran lain di sekitarnya, tinggi ini sudah nyaman ditekan tanpa
     membuat bilahnya setinggi tombol utama. */
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 0.55rem;
  border-radius: 0.75rem;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: #71717a;
  background: transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition:
    color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}
.an-tab:hover {
  color: #861525;
  background: rgba(163, 23, 43, 0.06);
}
.an-tab:focus-visible {
  outline: 2px solid #a3172b;
  outline-offset: 1px;
}
.an-tab-active,
.an-tab-active:hover {
  background: #ffffff;
  color: #861525;
  box-shadow:
    0 1px 2px rgba(11, 13, 18, 0.05),
    0 6px 16px -8px rgba(11, 13, 18, 0.3);
}

/* Kartu tagihan sangat sempit pada ponsel kecil. Tombol tetap presisi
   dengan menyisakan ikon saja; nama aksinya masih tersedia lewat title. */
@media (max-width: 380px) {
  .debt-pay-label {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   BILAH TAB ANALISIS YANG BISA DIGESER
   --------------------------------------------------------------------------
   Empat label dalam satu baris tidak muat di layar 360-390px: kalau
   dipaksa, semuanya terpotong jadi "Analisa K…" dan justru tidak ada yang
   terbaca. Jadi di layar sempit bilahnya digeser ke samping -- tiap tab
   memakai lebarnya sendiri, dan yang sedang aktif selalu digeser ke
   tengah oleh pilihSeksiAnalisa(). */
.an-tab-bar-geser {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.an-tab-bar-geser::-webkit-scrollbar {
  display: none;
}

/* Mapping Prioritas hanya memiliki tiga tab pendek. Tombol dibentangkan
   tepat dari sisi ke sisi agar tidak ada ruang kosong di sudut bilah,
   baik di desktop maupun ponsel. */
#debtTriageSection .an-tab-bar-geser {
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 0.85rem;
}
#debtTriageSection .an-tab-bar-geser .an-tab {
  flex: 1 1 0;
  border-radius: 0;
}
#debtTriageSection .an-tab-bar-geser .an-tab:first-child {
  border-radius: 0.78rem 0 0 0.78rem;
}
#debtTriageSection .an-tab-bar-geser .an-tab:last-child {
  border-radius: 0 0.78rem 0.78rem 0;
}
.an-tab-bar-geser .an-tab {
  flex: 0 0 auto;
}

/* Tab Detail Analisa selalu berjumlah lima dan labelnya sudah dibuat
   pendek. Karena itu semuanya harus membagi lebar bilah secara presisi,
   bukan memakai lebar isi seperti bilah yang memang dapat digeser.
   Aturan khusus ini juga mengalahkan `.an-tab-bar-geser .an-tab` di atas
   yang sebelumnya meninggalkan ruang kosong di sisi kanan. */
#analisaPage .an-tab-bar {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  padding: 0;
  overflow: hidden;
  width: 100%;
  border-radius: 0.85rem;
}

#analisaPage .an-tab-bar .an-tab {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0.6rem 0.25rem;
  border-radius: 0;
  font-size: clamp(9.5px, 2.7vw, 11.5px);
}

#analisaPage .an-tab-bar .an-tab:first-child {
  border-radius: 0.78rem 0 0 0.78rem;
}

#analisaPage .an-tab-bar .an-tab:last-child {
  border-radius: 0 0.78rem 0.78rem 0;
}

/* Pada ponsel ikon menghabiskan hampir separuh lebar satu tab. Label
   adalah informasi utamanya, jadi ikon disembunyikan hanya di ukuran
   sempit agar kelima nama tetap terbaca utuh di iOS dan Android. */
@media (max-width: 480px) {
  #analisaPage .an-tab-bar .an-tab > svg,
  #analisaPage .an-tab-bar .an-tab > i {
    display: none;
  }
}
@media (min-width: 640px) {
  /* Ruangnya cukup: keempatnya berbagi lebar sama rata supaya bilahnya
     terlihat rapi, bukan menumpuk di kiri. */
  .an-tab-bar-geser .an-tab {
    flex: 1 1 0;
  }
}

/* --------------------------------------------------------------------------
   KARTU ANALISIS YANG BISA DILIPAT (hanya di layar sempit)
   --------------------------------------------------------------------------
   Di HP tiap kartu menampilkan judul + dua baris pertama isinya. Yang
   dilipat BUKAN judulnya -- judul semua kartu tetap terbaca sekaligus,
   jadi pengguna bisa memilih mana yang mau dibaca tanpa membuka satu per
   satu.

   Batasnya memakai max-height, bukan line-clamp: sebagian kartu berisi
   daftar bernomor dan tabel kecil, dan line-clamp hanya bekerja pada
   teks biasa -- pada daftar ia tidak memotong apa pun. */
.an-kartu-kepala {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  text-align: left;
  margin-bottom: 0.15rem;
  color: inherit;
  background: none;
}

.an-kartu-panah {
  margin-left: auto;
  opacity: 0.5;
  transition: transform 0.2s ease;
}

.an-kartu.terbuka .an-kartu-panah {
  transform: rotate(180deg);
}

.an-kartu-lagi {
  display: none;
  margin-top: 0.35rem;
  font-size: 12px;
  font-weight: 700;
  color: inherit;
  opacity: 0.75;
  text-decoration: underline;
  background: none;
}

@media (max-width: 1023px) {
  .an-kartu-isi {
    position: relative;
    max-height: 2.7rem;
    overflow: hidden;
  }

  /* Baris terakhir dipudarkan memakai mask, BUKAN lapisan gradien putih.
     Kartu analisis punya empat warna latar (merah muda, kuning, hijau,
     abu); lapisan putih di atasnya akan terlihat sebagai coretan pucat
     di tiga di antaranya. Mask memudarkan teksnya sendiri, jadi ia
     benar apa pun warna kartunya. */
  .an-kartu-isi {
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  }

  .an-kartu.terbuka .an-kartu-isi {
    max-height: none;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .an-kartu-lagi {
    display: inline-block;
  }
}

/* Di layar lebar tidak ada yang dilipat: ruangnya ada, dan menyembunyikan
   isi hanya menambah ketukan. Panah & tombolnya ikut disembunyikan supaya
   tidak ada penanda yang menjanjikan sesuatu yang tidak terjadi. */
@media (min-width: 1024px) {
  .an-kartu-panah {
    display: none;
  }
  .an-kartu-kepala {
    cursor: default;
  }
}
/* Sisa dari zaman akordeon (.an-item / .an-panah) sudah dihapus bersama
   markup-nya. Yang tertinggal di sini hanya aturan untuk orang yang
   menyetel sistemnya mengurangi gerakan. */
@media (prefers-reduced-motion: reduce) {
  .an-kartu-panah {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   BARIS RIWAYAT KAS
   --------------------------------------------------------------------------
   Susunan lama menumpuk empat hal dalam satu baris rapat: lencana kategori,
   tanggal, lencana "rutin", lalu nominal dan tombol hapus berdempetan. Tiga
   lencana kecil dalam satu baris membuat mata tidak tahu harus mulai dari
   mana, dan di layar sempit kategorinya terpotong lebih dulu.

   Sekarang dua baris dengan urutan baca yang jelas: keterangan dan nominal
   di baris pertama (dua hal yang paling dicari), rincian di baris kedua
   sebagai teks biasa dengan pemisah titik -- bukan lencana. Lencana itu
   penekanan; kalau semuanya ditekankan, tidak ada yang menonjol.

   Grid dipakai, bukan flex, supaya hanya kolom keterangan yang menyusut
   saat ruang menyempit. Nominal tidak pernah ikut terhimpit.
   -------------------------------------------------------------------------- */
.cf-row {
  display: grid;
  /* Kolom nominal dibatasi lewat TRACK-nya (minmax), bukan lewat
     max-width persen pada elemennya.

     Persentase pada item grid di dalam track "auto" itu jebakan: lebar
     track ditentukan oleh isi item, sementara persentasenya dihitung dari
     lebar track -- saling menunggu. Browser memutus lingkaran itu dengan
     mengecilkan kotaknya, dan akibatnya nominal sekecil "Rp 80.000" pun
     ikut dikecilkan sampai 9px lalu terbelah dua baris. */
  /* Dua baris: judul + nominal di atas, info kecil di bawah selebar
     kartu. Dulu info kecil dipaksa satu baris di kolom yang sama dengan
     judul, sehingga di HP tumpah menimpa nominal dan judul tinggal "K...". */
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas:
    "ikon judul nominal panah"
    "ikon meta meta panah";
  align-items: start;
  column-gap: 0.75rem;
  row-gap: 3px;
  padding: 0.75rem 0.875rem;
  border-radius: 0.9rem;
  border: 1px solid rgba(11, 13, 18, 0.06);
  background: #ffffff;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.12s ease;
}
.cf-row:hover {
  background: #fafafa;
  border-color: rgba(11, 13, 18, 0.13);
}
.cf-row:active {
  transform: scale(0.995);
}
.cf-row:focus-visible {
  outline: 2px solid #a3172b;
  outline-offset: 2px;
}
.cf-ikon {
  grid-area: ikon;
  align-self: start;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cf-ikon i,
.cf-ikon svg {
  width: 16px;
  height: 16px;
}
.cf-row-in .cf-ikon {
  background: #ecfdf5;
  color: #059669;
}
.cf-row-out .cf-ikon {
  background: #fdf3f2;
  color: #a3172b;
}
.cf-utama {
  display: contents;
}
.cf-judul {
  grid-area: judul;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: #27272a;
  line-height: 1.3;
  /* Maksimal dua baris, supaya keterangan panjang tetap terbaca. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.cf-meta {
  grid-area: meta;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 0.3rem;
  min-width: 0;
  font-size: 12px;
  color: #71717a;
  line-height: 1.35;
}
.cf-meta > * {
  flex: 0 0 auto;
  white-space: nowrap;
}
.cf-meta-kategori {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cf-rutin {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: #0284c7;
  font-weight: 600;
}
.cf-rutin i,
.cf-rutin svg {
  width: 10px;
  height: 10px;
}
.cf-nominal {
  grid-area: nominal;
  min-width: 0;
  max-width: 11rem;
  white-space: nowrap;
  text-align: right;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
.cf-row-in .cf-nominal {
  color: #059669;
}
.cf-row-out .cf-nominal {
  color: #a3172b;
}
.cf-panah {
  grid-area: panah;
  align-self: center;
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  color: #d4d4d8;
  transition: color 0.15s ease;
}
.cf-row:hover .cf-panah {
  color: #a3172b;
}
@media (max-width: 400px) {
  .cf-row {
    column-gap: 0.6rem;
    padding: 0.7rem 0.75rem;
  }
  /* Di HP panah tidak perlu: seluruh kartu sudah bisa diketuk. */
  .cf-row .cf-panah {
    display: none;
  }
}

/* Status verifikasi dokumen KTP/KK (kendala #13) */
.doc-verdict {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.7rem;
  font-size: 12px;
  line-height: 1.45;
  margin-top: 0.5rem;
}
.doc-verdict-ok {
  background: rgba(16, 185, 129, 0.08);
  color: #047857;
  border: 1px solid rgba(16, 185, 129, 0.28);
}
.doc-verdict-warn {
  background: rgba(234, 179, 8, 0.1);
  color: #92400e;
  border: 1px solid rgba(234, 179, 8, 0.3);
}
.doc-verdict-bad {
  background: rgba(163, 23, 43, 0.08);
  color: #861525;
  border: 1px solid rgba(163, 23, 43, 0.28);
}
.doc-verdict-busy {
  background: rgba(11, 13, 18, 0.04);
  color: #52525b;
  border: 1px solid rgba(11, 13, 18, 0.08);
}

/* Semua elemen ber-data-fit adalah nominal yang ukurannya dipaskan ke
   lebar wadahnya oleh paskanNominal_() di app.js. Aturan di bawah ini
   jaring pengamannya: kalau skripnya belum sempat jalan, teksnya tetap
   terpotong di dalam kotak, bukan meluber keluar kartu. */
[data-fit] {
  min-width: 0;
  /* SENGAJA TIDAK ADA text-overflow: ellipsis DI SINI.
     Sebelumnya ada, sebagai pengaman kalau skrip pengepas belum jalan.
     Tapi elipsis pada nominal berarti digitnya hilang -- "Rp 3.000..."
     tidak memberi tahu apa pun, dan pengguna harus membuka kartunya lagi
     hanya untuk tahu angkanya. Itu memindahkan kerja ke pengguna demi
     tampilan yang rapi.

     Jadi pengamannya diganti: kalau tidak muat, angkanya MEMBUNGKUS ke
     baris berikutnya. Dua baris memang kurang rapi, tapi angkanya utuh
     dan tetap di dalam kartu. Skrip pengepas (paskanNominal_) tetap
     mengecilkan hurufnya lebih dulu supaya kebanyakan kasus cukup satu
     baris; membungkus hanya jalan terakhir. */
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   HALAMAN LOGIN DI JENDELA PENDEK
   ==========================================================================
   Gejalanya: logo dan judul "Halo, selamat datang kembali." terpotong di
   TEPI ATAS layar, dan tidak bisa digulir ke sana sama sekali.

   Penyebabnya kombinasi tiga class di #loginPage dan kolom kirinya:

     h-screen  -> tinggi dikunci persis setinggi layar
     justify-center -> isi dipusatkan tegak
     overflow-hidden -> apa pun yang meluber DIPOTONG, bukan digulir

   Selama isinya lebih pendek dari layar, tidak ada yang terlihat salah.
   Isi kolom kiri tingginya 684px, jadi di jendela 900px atau 800px aman.
   Begitu tinggi jendela turun di bawah ~700px -- laptop 1366x768 dengan
   toolbar, jendela yang tidak dimaksimalkan, atau DevTools didok di bawah
   -- kelebihannya terbagi rata ke atas dan ke bawah oleh justify-center,
   lalu bagian atas dipotong overflow-hidden. Logo hilang, dan karena
   digulir pun tidak bisa, tidak ada cara apa pun menjangkaunya.

   Perbaikannya memakai pola yang sama dengan modal di atas: kolomnya
   dibuat BISA DIGULIR, dan pemusatan diserahkan ke `my-auto` yang memang
   sudah ada di elemen isinya. Margin auto memusatkan selama masih ada
   ruang lebih, dan mengecil sendiri jadi nol begitu isinya tidak muat --
   jadi isi mulai dari atas dan seluruhnya terjangkau.

   justify-content sengaja dikembalikan ke flex-start. `justify-center`
   pada wadah yang bisa digulir punya cacat lama: bagian yang meluber ke
   ATAS tidak bisa dicapai dengan menggulir di banyak browser. Margin auto
   tidak punya masalah itu.
   ========================================================================== */
#loginPage > div:first-child {
  overflow-y: auto;
  overscroll-behavior: contain;
  justify-content: flex-start;
}

/* --------------------------------------------------------------------------
   HALAMAN LOGIN DI LAYAR LEBAR (>= 1536px)
   --------------------------------------------------------------------------
   Gejalanya: di monitor besar, form login terlihat mungil dan menempel ke
   tepi kiri, dengan ruang kosong luas di sebelah kanannya.

   Penyebabnya bukan setelan browser, melainkan dua nilai TETAP di markup:

     max-w-[380px]  -> lebar form tidak pernah bertambah
     lg:mx-0        -> form dirapatkan ke kiri, tidak dipusatkan

   Jadi di layar 2000px, kolom kirinya 1000px tapi hanya 380px yang
   terpakai -- 524px sisanya kosong, dan seluruh isinya berkumpul di
   pojok kiri. Di 1280px sampai 1440px hal ini tidak terasa karena
   kolomnya memang hanya 640-720px; masalahnya baru muncul di monitor
   besar, dan itu yang membuatnya lolos dari pengujian awal.

   Perbaikannya bertahap, dan HANYA di atas 1536px supaya tampilan
   1280-1440px yang sudah pas tidak ikut berubah:
   formnya diberi ruang tumbuh, lalu dipusatkan di kolomnya sendiri.
   Dipusatkan, bukan sekadar ditambah padding -- ruang kosong yang
   seimbang di kiri-kanan terbaca sebagai sengaja, sementara ruang kosong
   yang menumpuk di satu sisi terbaca sebagai rusak.
   -------------------------------------------------------------------------- */
/* Kartu login melebar bertahap mengikuti layar.

   Sebelumnya ia terkunci 380px sampai layar 1536px. Di layar 1280-1440,
   kolom kirinya 640-720px -- kartu 380px di tengah ruang selebar itu
   terlihat seperti tempelan kecil yang lupa diperbesar, bukan seperti
   halaman masuk yang dirancang. */
@media (min-width: 1024px) {
  #loginPage > div:first-child > * {
    max-width: 420px;
    margin-inline: auto;
  }
  #loginPage h1 {
    font-size: 2rem;
  }
}

@media (min-width: 1440px) {
  #loginPage > div:first-child > * {
    max-width: 460px;
  }
  #loginPage h1 {
    font-size: 2.15rem;
  }
}

@media (min-width: 1536px) {
  #loginPage > div:first-child > * {
    max-width: 480px;
    margin-inline: auto;
  }
  #loginPage h1 {
    font-size: 2.25rem;
  }
}

/* LAYAR PENDEK (iPhone SE/8 potret, atau HP mana pun saat papan ketik
   muncul). Isi kartunya 730px, sementara layarnya cuma 667px -- tombol
   "Masuk" jatuh di bawah lipatan, dan orang yang baru membuka aplikasi
   melihat halaman yang seolah tidak punya tombol masuk.

   Jaraknya dirapatkan secukupnya supaya tombolnya ikut terlihat tanpa
   menggulir. Ukuran sasaran ketuk TIDAK dikurangi -- yang dipangkas
   hanya ruang kosong. */
@media (max-height: 720px) {
  #loginPage h1 {
    font-size: 1.5rem;
    line-height: 1.15;
  }
  #loginPage > div:first-child > * {
    padding-top: 0;
    padding-bottom: 0;
  }
  #loginPage form {
    margin-top: 0.85rem;
  }
  #loginPage form > div {
    margin-top: 0.6rem;
  }
  /* Blok sambutan & catatan kaki dirapatkan paling dulu: keduanya
     penjelasan, bukan alat. Kolom isian dan tombolnya tidak disentuh. */
  #loginPage .mt-2,
  #loginPage .mt-5 {
    margin-top: 0.5rem;
  }
  #loginPage .mb-6 {
    margin-bottom: 0.85rem;
  }
}

@media (min-width: 1920px) {
  #loginPage > div:first-child > * {
    max-width: 480px;
  }
  #loginPage h1 {
    font-size: 2.5rem;
  }
}

/* 100vh di browser HP dihitung SEOLAH bilah alamat sedang tersembunyi,
   padahal saat halaman dibuka bilah itu masih terlihat. Akibatnya layar
   login sedikit lebih tinggi dari ruang yang benar-benar terlihat, dan
   bagian bawahnya (tautan "Daftar", catatan kebijakan privasi) tertutup.
   100dvh mengikuti tinggi yang benar-benar terlihat saat itu juga. */
@supports (height: 100dvh) {
  #loginPage {
    height: 100dvh;
  }
}

/* ==========================================================================
   DAFTAR INGATAN: TANDA BAHWA MASIH ADA LANJUTANNYA
   ==========================================================================
   Daftar ingatan di Pengaturan dibatasi tingginya supaya modalnya tidak
   memanjang tak terkendali. Konsekuensinya kartu terakhir terpotong --
   dan tanpa tanda apa pun, potongan itu terbaca sebagai tampilan RUSAK,
   bukan sebagai daftar yang bisa digulir. Ini ditemukan lewat screenshot,
   bukan lewat kode: teksnya benar-benar terpenggal di tengah kata.

   Batang gulir tidak bisa diandalkan sebagai tandanya. Di macOS, iOS, dan
   Chrome modern batang gulir bersifat overlay -- baru muncul SAAT sedang
   digulir, jadi justru tidak terlihat pada saat pengguna butuh tahu bahwa
   ada yang bisa digulir.

   Gradasi pudar di tepi bawah menyelesaikannya tanpa memotong isi dan
   tanpa menambah teks. Warnanya menyamai latar .glass (putih 90%) supaya
   terbaca sebagai isi yang "memudar ke bawah", bukan sebagai garis.
   pointer-events: none WAJIB -- tanpa itu lapisan ini menutupi tombol
   hapus pada kartu terakhir dan ketukannya tidak sampai.
   ========================================================================== */
.ingatan-wadah {
  position: relative;
}

.ingatan-wadah::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 32px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.92) 75%,
    rgba(255, 255, 255, 0.98) 100%
  );
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

/* Kelas ini dipasang & dilepas app.js: hanya saat memang masih ada isi di
   bawah. Kalau daftarnya pendek atau sudah digulir sampai habis, pudarnya
   hilang -- kalau tidak, kartu terakhir terlihat redup tanpa sebab. */
.ingatan-wadah.ada-lanjutan::after {
  opacity: 1;
}

/* ==========================================================================
   "hidden" YANG HARUS MENANG -- HANYA DI TEMPAT YANG MEMANG BERMASALAH
   ==========================================================================
   CATATAN PENTING, JANGAN DIUBAH JADI ATURAN GLOBAL LAGI.

   Sempat ada aturan `.hidden { display: none !important }` polos di sini,
   dengan maksud menuntaskan sekali untuk selamanya kasus elemen yang
   ditulis dengan class "hidden" DAN class pengatur display sekaligus.
   Aturan itu MERUSAK SELURUH TAMPILAN DESKTOP, dan begini sebabnya:

     <div class="hidden lg:flex ...">   <- panel kiri halaman login
     <div class="hidden lg:block ...">  <- sidebar desktop
     <div class="hidden lg:grid ...">   <- baris kartu desktop
     <button class="hidden sm:flex ..."> <- tombol di header

   Itu idiom baku Tailwind untuk "sembunyi di HP, tampil di desktop".
   Utilitas `lg:flex` hidup di dalam @media, dan sebuah deklarasi biasa di
   dalam @media TIDAK PERNAH bisa mengalahkan deklarasi ber-!important di
   luarnya -- !important menang lebih dulu, sebelum media query ikut
   diperhitungkan. Akibatnya semua elemen khusus desktop tidak pernah
   muncul: halaman login kehilangan panel gradasinya, dashboard kehilangan
   sidebar dan barisan kartunya. Di HP tidak kelihatan apa-apa, karena di
   sana elemen-elemen itu memang seharusnya tersembunyi.

   Jadi masalahnya HARUS diselesaikan per elemen. Yang benar-benar butuh
   penguat hanyalah elemen yang display-nya di-toggle app.js sementara ia
   juga membawa class display polos (tanpa awalan breakpoint). Daftar di
   bawah ini hasil pemindaian index.html & app.js, bukan tebakan:

     #mobileNavbar        -> sudah ditangani di bagian atas file
     [data-modal-overlay] -> sudah ditangani di bagian modal
     tiga elemen di bawah -> "hidden" + "flex" polos
     .doc-verdict         -> "hidden" + display dari file ini sendiri

   Kalau nanti ada elemen baru dengan pola yang sama, tambahkan di sini --
   JANGAN kembali ke selector global. */
#profileNudgeCard.hidden,
#safetyAlert.hidden,
#chEmpty.hidden,
.doc-verdict.hidden {
  display: none !important;
}

/* ==========================================================================
   SUSUNAN KARTU STATISTIK: 2x2
   ==========================================================================
   Sebelumnya keempat kartu berjajar dalam satu baris di layar lebar. Dua
   hal membuatnya tidak pernah terlihat rapi:

   1. Kartu "Sisa Uang" berisi DUA blok, jadi ia jauh lebih tinggi dari
      tiga kartu lainnya. Ketiganya ikut diregangkan menyamai tingginya,
      dan menyisakan ruang kosong besar yang tidak ada isinya.
   2. Empat kartu dalam satu baris berarti tiap kartu hanya ~200px. Nominal
      miliaran harus dikecilkan sampai belasan piksel supaya muat.

   Dengan 2x2, kartunya jadi lebih dari dua kali lebih lebar (~450px di
   layar 1440px), sehingga nominal sebesar apa pun tampil pada ukuran
   penuh tanpa dikecilkan sama sekali. Dan yang perlu diregangkan tinggal
   SATU kartu -- yang sebaris dengan kartu terbagi -- bukan tiga.

   Di bawah 640px tetap satu kolom: dua kolom di layar selebar itu
   menghasilkan kartu ~155px, dan masalah nomor 2 kembali muncul. */
#statsGrid.stats-tiga > div:last-child {
  grid-column: 1 / -1;
}
#statsGrid.stats-satu > #foodCard {
  grid-column: 1 / -1;
}

/* ==========================================================================
   KUTIPAN BALASAN DI CHAT  (kendala #9)
   ==========================================================================
   Bentuknya: garis tebal di sisi kiri + latar redup, di dalam gelembung
   pesannya. Dua hal yang membuatnya tetap terbaca di kedua sisi:

   1. Gelembung sendiri berlatar merah tua dan gelembung lawan bicara
      berlatar abu terang. Satu warna kutipan tidak bisa melayani
      keduanya -- karena itu ada varian .chat-kutipan-saya yang memakai
      warna transparan di atas latar merah, bukan warna baku.
   2. Kutipan dibatasi dua baris. Membalas paragraf panjang tidak boleh
      membuat kutipannya lebih tinggi daripada balasannya sendiri. */
.chat-kutipan {
  display: block;
  border-left: 3px solid rgba(163, 23, 43, 0.85);
  background: rgba(0, 0, 0, 0.05);
  border-radius: 0.5rem;
  padding: 0.35rem 0.55rem;
  cursor: pointer;
}

.chat-kutipan-saya {
  border-left-color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.16);
}

.chat-kutipan-nama {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.2;
  color: rgb(163, 23, 43);
}

.chat-kutipan-saya .chat-kutipan-nama {
  color: rgba(255, 255, 255, 0.95);
}

.chat-kutipan-teks {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.75rem;
  line-height: 1.35;
  opacity: 0.85;
  /* overflow-wrap, bukan word-break: kata panjang tetap dipotong, tapi
     kata biasa tidak ikut terbelah di tengah. */
  overflow-wrap: anywhere;
}

/* Sorotan sesaat setelah melompat ke pesan asli. Dibuat dengan animasi
   yang mengembalikan dirinya sendiri ke keadaan semula, supaya tidak ada
   gaya yang tertinggal kalau kelasnya gagal dilepas. */
/* Sorotan kartu yang dituju dari notifikasi (postingan, Mapping
   Prioritas, kotak pasangan). */
.notif-disorot {
  animation: chatSorot 1.6s ease-out;
}

.chat-disorot > div {
  animation: chatSorot 1.4s ease-out;
}

@keyframes chatSorot {
  0%,
  60% {
    box-shadow: 0 0 0 3px rgba(192, 38, 47, 0.55);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(192, 38, 47, 0);
  }
}

/* Orang yang menyetel sistemnya untuk mengurangi gerakan tidak diberi
   kedipan; sorotannya tetap ada, hanya tidak beranimasi. */
@media (prefers-reduced-motion: reduce) {
  .chat-disorot > div {
    animation: none;
    box-shadow: 0 0 0 3px rgba(192, 38, 47, 0.55);
  }
}

/* Menahan pesan untuk memunculkan menu berarti gerakan "pilih teks"
   bawaan sistem harus dimatikan di area itu -- kalau tidak, di iOS yang
   muncul adalah gagang penyeleksi teks, bukan menunya. Kolom ketik tidak
   ikut terkena karena aturannya hanya menyasar daftar pesan. */
#chatMessagesList [data-msg] {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* --------------------------------------------------------------------------
   DAFTAR KEBUTUHAN POKOK DI HALAMAN ANALISA
   --------------------------------------------------------------------------
   Memakai penanda titik yang sama dengan Mapping Prioritas tagihan
   (.prio-dot + .prio-*), supaya dua daftar yang fungsinya sejenis tidak
   terlihat seperti berasal dari dua aplikasi berbeda. */
.an-pokok-daftar {
  border: 1px solid rgba(11, 13, 18, 0.08);
  border-radius: 1rem;
  padding: 0.9rem 1rem;
}

.an-pokok-baris {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding-left: 0.1rem;
}

.an-pokok-baris .prio-dot {
  margin-top: 0.3rem;
}

/* Bilah kemajuan untuk kebutuhan yang baru terbayar sebagian. Angka
   "sudah Rp500.000 dari Rp1.500.000" tetap ditulis di sebelahnya --
   bilahnya membantu membandingkan sekilas, tapi tidak boleh jadi
   satu-satunya cara membaca nilainya. */
.an-pokok-bar {
  display: block;
  height: 3px;
  margin-top: 0.3rem;
  border-radius: 999px;
  background: rgba(11, 13, 18, 0.08);
  overflow: hidden;
}

.an-pokok-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #f59e0b;
}

/* ==========================================================================
   ANIMASI PANEL KANAN HALAMAN LOGIN
   ==========================================================================
   Tujuannya kesan tenang dan mahal, bukan ramai. Aturan yang dipakai:

   1. Semua lapisan hiasan position:absolute + pointer-events:none, jadi
      tidak pernah menambah tinggi panel dan tidak pernah menghalangi
      klik pada tombol di bawahnya.
   2. Hanya transform & opacity yang dianimasikan. Keduanya ditangani
      compositor GPU, jadi tidak memaksa browser menghitung ulang tata
      letak tiap frame -- ini yang membedakan animasi yang halus di HP
      kelas bawah dengan yang tersendat.
   3. Putarannya 18-30 detik. Gerakan cepat di halaman login terbaca
      seperti iklan; yang lambat terbaca seperti sesuatu yang sedang
      bekerja dengan tenang.
   4. Semuanya dimatikan untuk orang yang menyetel sistemnya mengurangi
      gerakan -- bagi sebagian orang animasi latar memicu pusing, dan
      halaman login bukan tempat untuk memaksakan itu.
   ========================================================================== */

/* --- Dua gumpalan cahaya yang saling menyeberang dengan lambat --- */
.login-aurora {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  opacity: 0.5;
  will-change: transform;
}

.login-aurora-1 {
  width: 26rem;
  height: 26rem;
  top: -8rem;
  left: -6rem;
  background: radial-gradient(
    circle,
    rgba(255, 99, 132, 0.55),
    transparent 70%
  );
  animation: loginAurora1 26s ease-in-out infinite;
}

.login-aurora-2 {
  width: 22rem;
  height: 22rem;
  bottom: -7rem;
  right: -5rem;
  background: radial-gradient(
    circle,
    rgba(255, 205, 160, 0.4),
    transparent 70%
  );
  animation: loginAurora2 32s ease-in-out infinite;
}

@keyframes loginAurora1 {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(4rem, 3rem, 0) scale(1.15);
  }
}

@keyframes loginAurora2 {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1.1);
  }
  50% {
    transform: translate3d(-3.5rem, -2.5rem, 0) scale(1);
  }
}

/* --- Sapuan kilau yang melintas sekali tiap 9 detik --- */
.login-kilau {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.07) 50%,
    transparent 60%
  );
  background-size: 260% 100%;
  animation: loginKilau 9s ease-in-out infinite;
}

@keyframes loginKilau {
  0%,
  65% {
    background-position: 160% 0;
  }
  100% {
    background-position: -60% 0;
  }
}

/* --- Kisi halus, memberi kesan "papan pantau" tanpa menarik perhatian --- */
.login-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.12;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.5) 1px, transparent 1px);
  background-size: 44px 44px;
  /* Dipudarkan di tepi supaya kisinya tidak terpotong mendadak di batas
     panel, yang justru membuat panelnya terlihat seperti gambar tempel. */
  -webkit-mask-image: radial-gradient(
    ellipse at 50% 45%,
    #000 35%,
    transparent 78%
  );
  mask-image: radial-gradient(ellipse at 50% 45%, #000 35%, transparent 78%);
  animation: loginGrid 30s linear infinite;
}

@keyframes loginGrid {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 44px 44px;
  }
}

/* --- Cincin: berdenyut pelan, satu per satu --- */
.login-denyut {
  animation: loginDenyut 3.9s ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes loginDenyut {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.75;
  }
  50% {
    transform: scale(1.045);
    opacity: 1;
  }
}

/* --- Titik yang mengorbit di cincin terluar --- */
.login-orbit {
  position: absolute;
  inset: 0;
  pointer-events: none;
  animation: loginOrbit 18s linear infinite;
  will-change: transform;
}

.login-orbit-balik {
  /* Arah berlawanan & lebih lambat: dua titik searah terlihat seperti
     satu benda yang patah, dua titik berlawanan terlihat sengaja. */
  inset: 1.5rem;
  animation-duration: 27s;
  animation-direction: reverse;
}

.login-orbit-titik {
  position: absolute;
  top: -4px;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 12px 3px rgba(255, 255, 255, 0.6);
}

.login-orbit-titik-kecil {
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  top: -2.5px;
  opacity: 0.7;
}

@keyframes loginOrbit {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* --- Logo di tengah: naik-turun sangat halus --- */
.login-logo {
  animation: loginLogo 7s ease-in-out infinite;
  will-change: transform;
}

@keyframes loginLogo {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-7px) rotate(-1.5deg);
  }
}

/* --- Masuknya isi panel: bertahap dari bawah, sekali saja --- */
.login-masuk {
  animation: loginMasuk 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Elemen yang SUDAH punya animasi float-slow memakai dua animasi
   sekaligus: float-slow untuk gerak terus-menerus, loginMasuk untuk
   kemunculan awal. Urutan animation-delay di atribut style mengikuti
   urutan nama animasi di sini. */
.login-masuk.float-slow {
  animation:
    floatY 5s ease-in-out infinite,
    loginMasuk 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes loginMasuk {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-aurora,
  .login-kilau,
  .login-grid,
  .login-denyut,
  .login-orbit,
  .login-logo,
  .login-masuk,
  .login-masuk.float-slow {
    animation: none;
  }
  /* Kemunculannya dibatalkan berarti opacity harus dikembalikan -- kalau
     tidak, isinya tetap tersembunyi di keadaan awal animasi. */
  .login-masuk {
    opacity: 1;
    transform: none;
  }
}

/* Ikon di bilah tab hanya muncul kalau ruangnya memang ada. Di layar HP,
   lima ikon memakan ~110px dari ~300px yang tersedia -- itu selisih antara
   bilah yang muat utuh dan bilah yang harus digeser untuk menemukan tab
   terakhir. Ikonnya membantu, tapi tidak sepenting labelnya terbaca. */
@media (max-width: 519px) {
  .an-tab-bar-geser .an-tab i,
  .an-tab-bar-geser .an-tab svg {
    display: none;
  }

  /* Padding & jarak dirapatkan HANYA di layar sempit. Selisihnya kecil
     per tab (sekitar 7px), tapi dikali lima itu cukup untuk membuat
     kelima label muat sekaligus di layar 375px -- artinya tab terakhir
     terlihat tanpa perlu digeser sama sekali. Tinggi 42px tidak ikut
     dikurangi: itu batas nyaman untuk ditekan jempol. */
  .an-tab-bar-geser {
    gap: 0.25rem;
    padding: 0.22rem;
  }

  .an-tab-bar-geser .an-tab {
    padding-left: 0.32rem;
    padding-right: 0.32rem;
    font-size: 12px;
  }
}

.an-pane-judul {
  margin-bottom: 0.1rem;
}

/* --------------------------------------------------------------------------
   AREA KETUK KARTU ANALISIS DI LAYAR SEMPIT
   --------------------------------------------------------------------------
   Baris judul kartu tingginya hanya mengikuti tinggi hurufnya (~20px), dan
   "Selengkapnya" bahkan ~18px. Di HP keduanya adalah SATU-SATUNYA cara
   membuka isi kartu, jadi 20px terlalu kecil: jempol yang meleset sedikit
   tidak mengenai apa pun dan kartunya terasa tidak merespons.

   Yang ditambah hanya padding vertikal, bukan tinggi barisnya, supaya
   jarak antar kartu tetap sama dan tata letaknya tidak bergeser. */
@media (max-width: 1023px) {
  .an-kartu-kepala {
    min-height: 40px;
    padding-block: 0.35rem;
    margin-bottom: 0;
  }

  .an-kartu-lagi {
    min-height: 34px;
    padding-block: 0.4rem;
    padding-right: 0.75rem;
    margin-top: 0.1rem;
  }
}

/* Tautan teks kecil di halaman login. Sama alasannya: garis sentuh jempol
   tidak sehalus kursor tetikus. */
.login-tautan-kecil {
  display: inline-block;
  /* padding-block, bukan tinggi tetap: tautannya ada DI TENGAH kalimat,
     jadi mengubah tingginya akan menggeser baris di sekitarnya. */
  padding-block: 0.6rem;
}

/* Baris tautan halaman publik di bawah catatan privasi. Tautannya tidak di
   tengah kalimat, jadi jarak atas dikurangi (padding tautan sudah memberi
   ruang) dan tiap tautan tidak boleh patah di tengah ("Kalkulator /
   Pinjaman") -- kalau layar sangat sempit, yang turun baris satu tautan utuh. */
.login-tautan-baris {
  margin-top: -0.35rem;
  column-gap: 0.45rem;
}
.login-tautan-baris a,
.login-tanpa-patah {
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   JUDUL UTAMA KARTU ANALISIS
   --------------------------------------------------------------------------
   Ukurannya mengikuti lebar layar lewat clamp(), bukan satu ukuran tetap.
   Alasannya: judul ini kalimat penuh yang panjangnya berubah-ubah ("Kas kamu
   tercatat Rp0. Ini prioritas darurat."), dan ukuran tetap yang enak dibaca
   di layar 400px akan terlihat kekecilan di layar 1440px.

   text-wrap: balance membagi kata lebih rata antar baris, jadi tidak ada
   baris terakhir yang cuma berisi satu kata menggantung. Browser yang belum
   mendukungnya mengabaikannya begitu saja -- tidak ada yang rusak. */
.an-judul-utama {
  font-size: clamp(1.15rem, 1rem + 1.1vw, 1.6rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-wrap: balance;
  /* Kalimatnya boleh dipotong di tengah kata HANYA kalau satu kata memang
     lebih panjang dari kartunya -- mis. nominal tanpa spasi. */
  overflow-wrap: anywhere;
}

/* Titik penanda halaman Akses Cepat. Titiknya kecil (6px) supaya tidak
   berebut perhatian dengan kartunya, tapi tombolnya 24px supaya tetap bisa
   ditekan jempol tanpa harus tepat sasaran. */
.quick-actions-dot-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.quick-actions-dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  transition:
    width 0.2s ease,
    background-color 0.2s ease;
}

/* Titik halaman yang sedang aktif dibuat memanjang, bukan cuma berganti
   warna: bedanya masih terbaca oleh mata yang sulit membedakan merah dan
   abu. */
.quick-actions-dot-btn[aria-current="true"] .quick-actions-dot {
  width: 16px;
}

@media (prefers-reduced-motion: reduce) {
  .quick-actions-dot {
    transition: none;
  }
}

/* Angka jumlah di tombol saring berita. Dibuat redup dan kecil supaya
   yang dibaca lebih dulu tetap nama kategorinya, bukan angkanya. */
.berita-jumlah {
  margin-left: 0.35rem;
  font-size: 12px;
  font-weight: 700;
  opacity: 0.55;
}

/* Baris pilihan "Pengeluaran ini untuk". Dibuat flex supaya ikon centang
   penanda "sudah dicatat" menempel di kanan dan tidak ikut mendorong
   lebar dropdown-nya -- teks panjang dipotong, ikonnya tidak pernah. */
.cf-untuk-opsi {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.cf-untuk-opsi > span:first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.cf-untuk-centang {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: #10b981;
}

/* Tab kategori berita yang belum ada isinya. Tetap ditampilkan supaya
   pengguna tahu kategorinya ada, tapi diredupkan dan tidak bisa diketuk
   supaya tidak ada yang mengetuknya lalu mendarat di layar kosong. */
.berita-tab-kosong {
  opacity: 0.45;
  cursor: not-allowed;
}

.berita-tab-kosong:hover {
  background: transparent;
  color: #71717a;
}

/* Tab kategori berita yang sedang kosong. Diredupkan supaya mata langsung
   tahu mana yang ada isinya, tapi tetap bisa diketuk -- ketukannya
   menjelaskan kenapa kosong, dan itu lebih berguna daripada tombol mati. */
.an-tab-kosong {
  opacity: 0.45;
}

/* --------------------------------------------------------------------------
   CENTANG HIJAU "SUDAH BERES"
   --------------------------------------------------------------------------
   Satu bentuk untuk semua tempat yang menandai sesuatu sudah dibayar:
   kartu tagihan, daftar kebutuhan pokok, dan pilihan di form kas. */
.centang-hijau {
  display: block;
  color: #10b981;
  flex: 0 0 auto;
}

/* Di kartu tagihan, centangnya melayang di pojok kanan atas -- tidak ikut
   menambah tinggi kartu sama sekali. Itu intinya: kartu yang sudah dibayar
   dan yang belum harus SAMA TINGGI, supaya barisnya tetap lurus. */
.tanda-lunas {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  z-index: 2;
  line-height: 0;
  /* Lingkaran putih tipis di belakangnya supaya centangnya tetap terbaca
     di atas latar kartu yang warnanya berbeda-beda menurut risiko. */
  background: #ffffff;
  border-radius: 999px;
  box-shadow: 0 0 0 2px #ffffff;
  pointer-events: auto;
}

/* Judul tagihan diberi ruang supaya tidak tertimpa centangnya. */
.debt-paid h4 {
  padding-right: 1.5rem;
}

.an-pokok-centang {
  flex: 0 0 auto;
  margin-top: 0.1rem;
  line-height: 0;
}

/* ==========================================================================
   HALAMAN BERITA KEUANGAN
   ==========================================================================
   Disusun mengikuti mockup: bilah pil kategori di atas, lalu kartu dengan
   foto di kiri dan lencana kategori di kepala isinya.

   Prinsip yang dipakai di sini:

   1. Warna adalah BAHASA, bukan hiasan. Satu kategori = satu warna, dan
      warna itu muncul di tiga tempat sekaligus (pil saring, lencana di
      kartu, garis tepi kiri kartu). Begitu pengguna tahu "biru = Edukasi"
      sekali, ia tidak perlu membaca labelnya lagi.
   2. Tinggi kartunya DIBATASI, bukan dibiarkan mengikuti panjang judul.
      Judul berita dari feed panjangnya tidak bisa ditebak -- ada yang 4
      kata, ada yang 20. Tanpa batas, daftarnya jadi bergerigi dan sulit
      dipindai. Judul 2 baris, ringkasan 2 baris, sisanya dipotong.
   3. Fotonya persegi. Feed media mengirim rasio yang berbeda-beda; kotak
      persegi dengan object-fit:cover membuat semuanya terlihat seragam
      tanpa pernah menggepengkan gambar siapa pun.
   ========================================================================== */

/* --- Bilah pil kategori --- */
.berita-chip-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Padding bawah menyediakan ruang untuk bayangan pil yang aktif --
     tanpa itu bayangannya terpotong garis wadah yang bisa digeser. */
  padding: 0.15rem 0.15rem 0.35rem;
  margin: -0.15rem -0.15rem -0.35rem;
}
.berita-chip-bar::-webkit-scrollbar {
  display: none;
}

.berita-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(11, 13, 18, 0.08);
  background: #ffffff;
  color: #3f3f46;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.005em;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(11, 13, 18, 0.04);
  transition:
    color 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

.berita-chip-ikon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

/* Warna ikon mengikuti kategorinya, walau pilnya sendiri putih. Itu yang
   membuat kategorinya bisa dikenali sekilas tanpa membaca. */
.berita-chip-rose .berita-chip-ikon {
  color: #a3172b;
}
.berita-chip-sky .berita-chip-ikon {
  color: #0284c7;
}
.berita-chip-amber .berita-chip-ikon {
  color: #d97706;
}
.berita-chip-orange .berita-chip-ikon {
  color: #ea580c;
}
.berita-chip-zinc .berita-chip-ikon {
  color: #71717a;
}

.berita-chip:hover:not(:disabled) {
  border-color: rgba(163, 23, 43, 0.35);
  color: #861525;
}

.berita-chip:focus-visible {
  outline: 2px solid #a3172b;
  outline-offset: 2px;
}

/* Yang aktif: merah penuh. Sengaja SATU warna untuk semua kategori --
   warna aktif menandai "ini yang sedang dipilih", dan kalau ia ikut
   berganti-ganti mengikuti kategori, artinya jadi kabur. */
.berita-chip-aktif,
.berita-chip-aktif:hover {
  background: #a3172b;
  border-color: #a3172b;
  color: #ffffff;
  box-shadow: 0 6px 16px -8px rgba(163, 23, 43, 0.9);
}
.berita-chip-aktif .berita-chip-ikon {
  color: #ffffff;
}

.berita-chip-kosong {
  opacity: 0.45;
  cursor: not-allowed;
}

/* --- Kartu berita --- */
.berita-kartu {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.85rem;
  padding-right: 2.5rem;
  border-radius: 1.25rem;
  border: 1px solid rgba(11, 13, 18, 0.07);
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(11, 13, 18, 0.04);
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.berita-kartu:hover {
  border-color: rgba(163, 23, 43, 0.25);
  box-shadow: 0 10px 26px -18px rgba(11, 13, 18, 0.5);
}

.berita-kartu:focus-visible {
  outline: 2px solid #a3172b;
  outline-offset: 2px;
}

.berita-kartu:active {
  transform: scale(0.995);
}

.berita-foto {
  width: 88px;
  height: 88px;
  flex: 0 0 auto;
  border-radius: 0.9rem;
  object-fit: cover;
  background: #f4f4f5;
}

/* Foto yang gagal dimuat TIDAK disembunyikan: kalau ia hilang, isinya
   melebar dan tinggi kartunya berubah sendiri -- daftar jadi bergerigi
   hanya karena satu gambar mati. Yang tersisa kotak abu seukuran sama. */
.berita-foto-gagal {
  object-fit: contain;
  background: #f4f4f5;
}

.berita-foto-kosong {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #71717a;
  background: #f4f4f5;
}
.berita-foto-kosong svg {
  width: 26px;
  height: 26px;
}

.berita-isi {
  flex: 1 1 auto;
  min-width: 0;
}

.berita-label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0.35rem;
  max-width: 100%;
}
.berita-label svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}

.berita-label-rose {
  background: #fdf3f2;
  color: #861525;
}
.berita-label-sky {
  background: #f0f9ff;
  color: #0369a1;
}
.berita-label-amber {
  background: #fffbeb;
  color: #b45309;
}
.berita-label-orange {
  background: #fff7ed;
  color: #c2410c;
}
.berita-label-zinc {
  background: #fafafa;
  color: #52525b;
}

.berita-judul {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3;
  color: #0b0d12;
  letter-spacing: -0.01em;
  margin: 0 0 0.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.berita-ringkas {
  font-size: 12.5px;
  line-height: 1.45;
  color: #71717a;
  margin: 0 0 0.45rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.berita-meta {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 12.5px;
  color: #71717a;
  min-width: 0;
}
.berita-titik {
  flex: 0 0 auto;
}
.berita-meta > span:last-child {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Panah penanda "bisa dibuka". Bukan tombol -- seluruh kartunya sudah
   bisa diketuk, jadi panah yang bisa difokus terpisah hanya menambah
   satu perhentian tanpa guna bagi pengguna papan ketik. */
.berita-panah {
  position: absolute;
  top: 0.85rem;
  right: 0.7rem;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #fafafa;
  border: 1px solid rgba(11, 13, 18, 0.06);
  color: #71717a;
  pointer-events: none;
}
.berita-panah svg {
  width: 15px;
  height: 15px;
}

.berita-bagikan {
  position: absolute;
  right: 0.7rem;
  bottom: 0.7rem;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(11, 13, 18, 0.08);
  color: #71717a;
  transition:
    color 0.18s ease,
    border-color 0.18s ease;
}
.berita-bagikan:hover {
  color: #a3172b;
  border-color: rgba(163, 23, 43, 0.3);
}
.berita-bagikan svg {
  width: 14px;
  height: 14px;
}

/* LAYAR HP: KOLOM JUDUL HARUS DIBERI RUANG, BUKAN JUDULNYA YANG DIPAKSA
   PENDEK.

   Aturan ini dulu mulai di 359px, dan itu meleset: hampir tidak ada HP
   yang selebar itu. Di 390px -- iPhone, dan kelas yang paling banyak
   dipakai pengguna kita -- kartunya 350px, foto memakan 88px, dan sisa
   untuk judul cuma 193px. Dua baris di lebar itu muat sekitar 48 huruf,
   jadi judul sependek "Susun daftar utang 30 menit, tahu mana duluan"
   pun terpotong di tengah kata.

   Judul yang terpotong di tengah kata adalah kegagalan yang mahal:
   pembaca memutuskan mau membuka atau tidak justru dari baris itu.

   Dua perubahan: ambangnya dinaikkan ke 430px supaya benar-benar
   mengenai HP yang dipakai orang, dan judulnya boleh tiga baris. Kartu
   jadi tidak sama tinggi persis, dan itu memang dipilih -- daftar yang
   rapi tapi judulnya terpenggal lebih buruk daripada daftar yang
   tingginya sedikit berbeda. */
@media (max-width: 430px) {
  .berita-foto {
    width: 72px;
    height: 72px;
  }
  .berita-kartu {
    gap: 0.65rem;
    padding: 0.7rem;
    padding-right: 2.3rem;
  }
  .berita-judul {
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }
}

/* =====================================================================
   JANJI PENJAGAAN DATA
   =====================================================================
   Nadanya menenangkan, bukan resmi. Popup kebijakan yang berbentuk
   dinding teks abu-abu dibaca nol orang -- dan yang nol orang baca tidak
   menenangkan siapa pun, cuma jadi tombol "Setuju" yang ditekan cepat.
   ===================================================================== */
.janji-perisai {
  width: 60px;
  height: 60px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0f9d77;
  background: linear-gradient(145deg, #ecfdf5, #d1fae5);
  box-shadow: 0 10px 26px -14px rgba(15, 157, 119, 0.7);
  animation: janjiPerisaiMasuk 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes janjiPerisaiMasuk {
  from {
    transform: scale(0.7);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.janji-judul {
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.janji-baris {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.7rem 0.8rem;
  border-radius: 1rem;
  background: #fafafa;
  border: 1px solid rgba(11, 13, 18, 0.05);
}
.janji-ikon {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  margin-top: 2px;
  color: #0f9d77;
}
.janji-baris-judul {
  font-size: 12.5px;
  font-weight: 700;
  color: #18181b;
  line-height: 1.35;
  margin: 0 0 2px;
}
.janji-baris-isi {
  font-size: 12.5px;
  color: #71717a;
  line-height: 1.55;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .janji-perisai {
    animation: none;
  }
}

/* =====================================================================
   TUR PERKENALAN KARTU
   =====================================================================
   Kegelapannya berasal dari box-shadow #turSorot, bukan dari latar
   #turLapis. Lihat catatannya di index.html.
   ===================================================================== */
body.tur-aktif {
  overflow: hidden;
}

#turLapis {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
}

#turSorot {
  position: fixed;
  border-radius: 22px;
  /* Inilah yang menggelapkan seluruh layar sekaligus melubanginya. */
  box-shadow: 0 0 0 9999px rgba(11, 13, 18, 0.72);
  border: 2px solid rgba(255, 255, 255, 0.9);
  transition:
    top 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    left 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: auto;
}

#turBalon {
  position: fixed;
  width: min(330px, calc(100vw - 24px));
  background: #ffffff;
  border-radius: 20px;
  padding: 1rem 1.1rem 0.9rem;
  box-shadow: 0 24px 60px -20px rgba(11, 13, 18, 0.55);
  pointer-events: auto;
  animation: turBalonMasuk 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes turBalonMasuk {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Panah. Digambar sebagai kotak diputar 45 derajat supaya mewarisi
   warna & bayangan balonnya -- SVG terpisah akan terlihat tertempel. */
#turPanah {
  position: absolute;
  width: 14px;
  height: 14px;
  background: #ffffff;
  transform: rotate(45deg);
  border-radius: 3px;
  margin-left: -7px;
}
#turBalon[data-arah="bawah"] #turPanah {
  top: -6px;
}
#turBalon[data-arah="atas"] #turPanah {
  bottom: -6px;
}

.tur-hitung {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a3172b;
  margin: 0 0 0.3rem;
}
.tur-judul {
  font-size: 15px;
  font-weight: 700;
  color: #0b0d12;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 0.35rem;
  text-wrap: balance;
}
.tur-isi {
  font-size: 12.5px;
  color: #52525b;
  line-height: 1.6;
  margin: 0 0 0.9rem;
}

.tur-aksi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.tur-lewati {
  font-size: 12px;
  font-weight: 600;
  color: #71717a;
  padding: 0.5rem 0.25rem;
  background: none;
  border: 0;
  cursor: pointer;
}
.tur-lewati:hover {
  color: #71717a;
}
.tur-mundur,
.tur-lanjut {
  /* 40px: tombol yang lebih kecil dari ini sulit ditekan dengan ibu jari
     di layar sempit, dan tur yang tombolnya meleset lebih menjengkelkan
     daripada tidak ada tur sama sekali. */
  min-height: 40px;
  padding: 0 1rem;
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s ease;
}
.tur-mundur {
  background: #f4f4f5;
  color: #52525b;
  border: 0;
}
.tur-mundur:hover {
  background: #e4e4e7;
}
.tur-lanjut {
  background: #a3172b;
  color: #ffffff;
  border: 0;
  box-shadow: 0 8px 20px -10px rgba(163, 23, 43, 0.9);
}
.tur-lanjut:hover {
  background: #861525;
}

@media (prefers-reduced-motion: reduce) {
  #turSorot,
  #turBalon {
    transition: none;
    animation: none;
  }
}

/* =====================================================================
   HALAMAN CARI PENGHASILAN TAMBAHAN
   ===================================================================== */
.cu-jujur {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  border-radius: 1rem;
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
  font-size: 12px;
  line-height: 1.6;
}
.cu-jujur p {
  margin: 0;
}

.cu-filter {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.35rem;
  /* Bilah gulung disembunyikan, tapi gulungnya tetap ada. Di layar
     sempit chip-nya memang tidak muat, dan memaksanya membungkus
     membuat tinggi halaman berubah-ubah tiap kali filter ditekan. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cu-filter::-webkit-scrollbar {
  display: none;
}

.cu-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(11, 13, 18, 0.1);
  background: #ffffff;
  color: #52525b;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    color 0.18s ease,
    background 0.18s ease;
}
.cu-chip svg {
  width: 14px;
  height: 14px;
}
.cu-chip:hover {
  border-color: rgba(163, 23, 43, 0.3);
  color: #a3172b;
}
.cu-chip-aktif {
  background: #a3172b;
  border-color: #a3172b;
  color: #ffffff;
}
.cu-chip-aktif:hover {
  color: #ffffff;
}
.cu-chip-jml {
  font-size: 12px;
  font-weight: 700;
  opacity: 0.65;
}

.cu-kartu {
  border-radius: 1.25rem;
  border: 1px solid rgba(11, 13, 18, 0.07);
  background: #ffffff;
  padding: 1rem 1.1rem 1.1rem;
  box-shadow: 0 1px 2px rgba(11, 13, 18, 0.04);
}
.cu-nama {
  font-size: 15px;
  font-weight: 700;
  color: #0b0d12;
  letter-spacing: -0.01em;
  margin: 0 0 0.4rem;
}
.cu-isi {
  font-size: 12.5px;
  color: #52525b;
  line-height: 1.6;
  margin: 0 0 0.8rem;
}

/* Modal awal & waktu cair ditaruh berdampingan dan diberi latar sendiri:
   ini dua hal yang paling menentukan pilihan bagi orang yang uangnya
   menipis, jadi tidak boleh tenggelam di dalam paragraf. */
.cu-fakta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.cu-fakta > div {
  background: #fafafa;
  border: 1px solid rgba(11, 13, 18, 0.05);
  border-radius: 0.8rem;
  padding: 0.55rem 0.7rem;
  min-width: 0;
}
.cu-fakta-label {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #71717a;
  margin-bottom: 2px;
}
.cu-fakta-nilai {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: #3f3f46;
  line-height: 1.4;
}
@media (max-width: 400px) {
  .cu-fakta {
    grid-template-columns: 1fr;
  }
}

.cu-cocok {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  font-size: 12.5px;
  color: #0f9d77;
  line-height: 1.5;
  margin: 0 0 0.85rem;
}
.cu-cocok svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  margin-top: 2px;
}

.cu-tautan {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  min-height: 42px;
  border-radius: 0.9rem;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  background: #fdf3f2;
  color: #a3172b;
  border: 1px solid #fbe4e3;
  transition: background 0.18s ease;
}
.cu-tautan:hover {
  background: #fbe4e3;
}
.cu-tautan svg {
  width: 13px;
  height: 13px;
}
.cu-tautan-mati {
  background: #fafafa;
  color: #71717a;
  border-color: rgba(11, 13, 18, 0.06);
  cursor: default;
}

.cu-waspada {
  border-radius: 1.25rem;
  border: 1px solid #f5c6c6;
  background: #fdf3f2;
  padding: 1rem 1.1rem;
}
.cu-waspada-kepala {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 12.5px;
  font-weight: 700;
  color: #861525;
  margin-bottom: 0.6rem;
}
.cu-waspada-isi {
  margin: 0;
  padding-left: 1.05rem;
  list-style: disc;
}
.cu-waspada-isi li {
  font-size: 12px;
  color: #5c101b;
  line-height: 1.6;
  margin-bottom: 0.4rem;
}
.cu-waspada-isi li:last-child {
  margin-bottom: 0;
}
.cu-waspada-kaki {
  font-size: 12px;
  color: #861525;
  opacity: 0.75;
  margin: 0.7rem 0 0;
}

/* ======================================================================
   PANDUAN MENUMBUHKAN UANG — HANYA DI DETAIL ANALISA
   ====================================================================== */
.growth-guide {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid rgba(5, 150, 105, 0.2);
  border-radius: 1.15rem;
  background: linear-gradient(145deg, #f0fdf8, #fff 58%, #f7fee7);
}
.growth-guide-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.growth-guide-icon {
  width: 2.35rem;
  height: 2.35rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 0.8rem;
  color: #fff;
  background: linear-gradient(145deg, #059669, #047857);
}
.growth-guide-icon svg {
  width: 1rem;
  height: 1rem;
}
.growth-guide-kicker {
  margin-bottom: 0.2rem;
  color: #047857;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.growth-guide h4 {
  margin: 0;
  color: #18181b;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
}
.growth-guide-head p,
.growth-choice-priority p,
.growth-guide-warning p {
  margin: 0.25rem 0 0;
  color: #71717a;
  font-size: 0.68rem;
  line-height: 1.55;
}
.growth-guide-head strong {
  color: #047857;
}
.growth-choice-priority {
  display: flex;
  gap: 0.65rem;
  margin-top: 0.9rem;
  padding: 0.75rem;
  border: 1px solid rgba(5, 150, 105, 0.18);
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.82);
}
.growth-choice-priority > svg {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  color: #059669;
}
.growth-choice-priority strong {
  display: block;
  color: #065f46;
  font-size: 0.72rem;
}
.growth-sim-tabs {
  display: flex;
  width: 100%;
  max-width: 100%;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.75rem;
  padding: 0.25rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border: 1px solid rgba(24, 24, 27, 0.08);
  border-radius: 0.9rem;
  background: rgba(244, 244, 245, 0.84);
}
.growth-sim-tabs::-webkit-scrollbar {
  display: none;
}
.growth-sim-tab {
  min-height: 2.25rem;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.5rem 0.62rem;
  border: 1px solid transparent;
  border-radius: 0.7rem;
  color: #71717a;
  background: transparent;
  font-size: 0.64rem;
  font-weight: 800;
  white-space: nowrap;
  transition:
    color 0.16s ease,
    background 0.16s ease,
    box-shadow 0.16s ease;
}
.growth-sim-tab svg {
  width: 0.9rem;
  height: 0.9rem;
  flex: 0 0 auto;
}
.growth-sim-tab.active {
  color: #047857;
  border-color: rgba(5, 150, 105, 0.12);
  background: #fff;
  box-shadow: 0 5px 14px -10px rgba(4, 120, 87, 0.8);
}
.growth-sim-panel {
  min-width: 0;
  margin-top: 0.65rem;
  padding: 0.85rem;
  border: 1px solid rgba(24, 24, 27, 0.08);
  border-radius: 0.95rem;
  background: rgba(255, 255, 255, 0.86);
}
.growth-sim-profile > div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.growth-sim-profile strong {
  color: #27272a;
  font-size: 0.8rem;
}
.growth-sim-profile > span {
  display: block;
  margin-top: 0.15rem;
  color: #71717a;
  font-size: 0.62rem;
  font-weight: 700;
}
.growth-sim-profile p,
.growth-sim-assumption {
  margin: 0.35rem 0 0;
  color: #71717a;
  font-size: 0.65rem;
  line-height: 1.5;
}
.growth-sim-label {
  padding: 0.2rem 0.4rem;
  border-radius: 999px;
  color: #047857;
  background: #ecfdf5;
  font-size: 0.54rem;
  font-weight: 800;
  white-space: nowrap;
}
.growth-sim-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 0.8rem;
}
.growth-sim-form label {
  min-width: 0;
  display: block;
}
.growth-sim-form label > span {
  display: block;
  margin-bottom: 0.3rem;
  color: #52525b;
  font-size: 0.61rem;
  font-weight: 700;
}
.growth-sim-input {
  width: 100%;
  min-width: 0;
  min-height: 2.55rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0 0.65rem;
  overflow: hidden;
  border: 1px solid #e4e4e7;
  border-radius: 0.75rem;
  background: #fff;
}
.growth-sim-input:focus-within {
  border-color: rgba(5, 150, 105, 0.55);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.09);
}
.growth-sim-input input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: #27272a;
  background: transparent;
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.growth-sim-input b {
  flex: 0 0 auto;
  color: #71717a;
  font-size: 0.62rem;
}
.growth-sim-assumption {
  padding: 0.55rem 0.65rem;
  border-radius: 0.7rem;
  background: #fafafa;
}
.growth-sim-result {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  margin-top: 0.65rem;
}
.growth-sim-result > div {
  min-width: 0;
  padding: 0.65rem;
  border-radius: 0.75rem;
  background: #f4f4f5;
}
.growth-sim-result > div.utama {
  color: #fff;
  background: #047857;
}
.growth-sim-result span,
.growth-sim-result strong {
  display: block;
}
.growth-sim-result span {
  color: #71717a;
  font-size: 0.55rem;
  line-height: 1.3;
}
.growth-sim-result .utama span {
  color: rgba(255, 255, 255, 0.75);
}
.growth-sim-result strong {
  margin-top: 0.22rem;
  overflow-wrap: anywhere;
  color: #27272a;
  font-size: 0.69rem;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
.growth-sim-result .utama strong {
  color: #fff;
}
.growth-sim-result .growth-sim-minus {
  color: #861525;
}
.growth-guide-warning {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.65rem 0.7rem;
  border-radius: 0.75rem;
  color: #6f1220;
  background: rgba(253, 243, 242, 0.8);
}
.growth-guide-warning > svg {
  width: 0.9rem;
  height: 0.9rem;
  flex: 0 0 auto;
  margin-top: 0.15rem;
}
.growth-guide-warning p {
  margin: 0;
  color: #6f1220;
}
.growth-guide-ai {
  width: 100%;
  min-height: 2.65rem;
  margin-top: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border-radius: 0.8rem;
  color: #fff;
  background: #047857;
  font-size: 0.7rem;
  font-weight: 800;
}
.growth-guide-ai:hover {
  background: #065f46;
}
.growth-guide-ai svg {
  width: 0.9rem;
  height: 0.9rem;
}

@media (max-width: 520px) {
  .growth-guide {
    padding: 0.8rem;
  }
  .growth-sim-form {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 380px) {
  .growth-guide-head {
    gap: 0.55rem;
  }
  .growth-guide-icon {
    width: 2rem;
    height: 2rem;
  }
  .growth-sim-panel {
    padding: 0.7rem;
  }
  .growth-sim-result {
    grid-template-columns: 1fr;
  }
  .growth-sim-result > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
  }
  .growth-sim-result strong {
    margin-top: 0;
    text-align: right;
  }
}

/* ==========================================================================
   SKALA DESKTOP
   --------------------------------------------------------------------------
   Mobile tetap memakai ukuran semula. Mulai 1024px, satuan rem sedikit
   dibesarkan dan pembatas halaman dilonggarkan agar aplikasi memakai ruang
   monitor dengan wajar, bukan terlihat seperti halaman ponsel di tengah.
   ========================================================================== */
@media (min-width: 1024px) {
  html {
    font-size: 17px;
  }

  #dashboardPage > header > div,
  #dashboardPage > main {
    width: min(100%, 90rem);
    max-width: 90rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }

  #dashboardContent,
  #dashboardSkeleton {
    grid-template-columns: minmax(0, 2.15fr) minmax(22rem, 0.85fr);
    gap: 2rem;
  }

  /* Jangan paksa elemen selalu menjadi grid. `display: grid !important`
     sebelumnya mengalahkan class `hidden`, sehingga shimmer dan konten
     dashboard bisa tampil bersamaan atau shimmer menetap setelah data siap. */
  #dashboardContent:not(.hidden),
  #dashboardSkeleton:not(.hidden) {
    display: grid;
  }

  #dashboardContent.hidden,
  #dashboardSkeleton.hidden {
    display: none !important;
  }

  #dashboardContent > div:first-child,
  #dashboardSkeleton > div:first-child {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }

  #desktopCommunitySidebar {
    display: block !important;
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    position: sticky;
    top: 5rem;
    width: 100%;
    min-width: 0;
  }

  #communityPage > header > div,
  #communityPage > header + div,
  #messagesPage > header > div,
  #messagesPage > header + div,
  #legalAidPage > header > div,
  #legalAidPage > header + div {
    width: min(100%, 64rem);
    max-width: 64rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }

  #cariUangPage > header > div,
  #cariUangPage > header + div,
  #beritaPage > header > div,
  #beritaPage > main {
    width: min(100%, 70rem);
    max-width: 70rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }

  #chatThreadModal .chat-sheet {
    width: min(92vw, 52rem);
    max-width: 52rem;
    height: min(84dvh, 54rem);
    max-height: 84dvh;
  }

  #chatMessagesList > [data-msg] > div {
    max-width: 68%;
  }

  #profileModal > div,
  #settingsModal > div,
  #supportModal > div {
    max-width: 32rem;
  }
}

@media (min-width: 1536px) {
  #dashboardPage > header > div,
  #dashboardPage > main {
    width: min(100%, 96rem);
    max-width: 96rem;
  }
}

/* ===================== RENCANA PENSIUN ===================== */
.pn-status { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.pn-status-btn {
  display: flex; align-items: center; justify-content: center; gap: 0.45rem;
  padding: 0.8rem 0.6rem; border-radius: 0.9rem; border: 1px solid #e4e4e7;
  background: #fff; color: #52525b; font-size: 13px; font-weight: 600; transition: all .15s;
}
.pn-status-btn svg, .pn-status-btn i { width: 16px; height: 16px; flex: 0 0 auto; }
.pn-status-aktif { border-color: #ea580c; background: #fff7ed; color: #9a3412; box-shadow: 0 0 0 3px rgba(234,88,12,.1); }
.pn-grup { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #71717a; padding-top: .35rem; }
.pn-hint { font-size: 12px; color: #71717a; margin: .3rem 0 0; line-height: 1.45; }
.pn-kosong { display: flex; gap: .7rem; align-items: flex-start; padding: 1rem 1.1rem; border-radius: 1.25rem; background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; font-size: 13px; line-height: 1.55; }
.pn-kosong svg, .pn-kosong i { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; }
.pn-hasil { border-radius: 1.25rem; padding: 1.1rem 1.15rem; border: 1px solid; }
.pn-aman { background: #ecfdf5; border-color: #a7f3d0; }
.pn-waspada { background: #fffbeb; border-color: #fde68a; }
.pn-bahaya { background: #fdf3f2; border-color: #f5c6c6; }
.pn-hasil-label { display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .2rem .6rem; border-radius: 999px; background: rgba(255,255,255,.75); }
.pn-aman .pn-hasil-label { color: #047857; }
.pn-waspada .pn-hasil-label { color: #b45309; }
.pn-bahaya .pn-hasil-label { color: #861525; }
.pn-hasil-judul { font-size: 19px; font-weight: 700; line-height: 1.3; color: #18181b; margin: .55rem 0 .8rem; }
.pn-hasil-baris { margin: 0; display: grid; gap: .45rem; }
.pn-hasil-baris div { display: flex; justify-content: space-between; gap: 1rem; font-size: 13px; }
.pn-hasil-baris dt { color: #52525b; }
.pn-hasil-baris dd { flex: 0 0 auto; margin: 0; font-weight: 700; color: #18181b; text-align: right; font-variant-numeric: tabular-nums; }
.pn-hasil-saran { font-size: 13px; line-height: 1.6; color: #27272a; margin: .9rem 0 0; padding-top: .8rem; border-top: 1px dashed rgba(0,0,0,.1); }
.pn-hasil-asumsi { font-size: 12px; color: #71717a; margin: .55rem 0 0; line-height: 1.5; }
.pn-arahan { margin-top: 1rem; padding: 1.25rem; border: 1px solid #e4e4e7; border-radius: 20px; background: white; overflow-wrap: anywhere; }
.pn-arahan h3 { font-weight: 700; font-size: 1.1rem; }
.pn-arahan p, .pn-arahan li { margin: .75rem 0; line-height: 1.6; }
.pn-arahan-inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: .75rem; }
.pn-arahan label { display: flex; flex-direction: column; gap: .5rem; min-width: 0; font-size: .875rem; }
.pn-arahan select, .pn-arahan input { width: 100%; min-width: 0; padding: .75rem; border: 1px solid #d4d4d8; border-radius: 12px; background: white; font-size: 16px; }
.pn-arahan a { color: #861525; text-decoration: underline; }
.pn-arahan summary { cursor: pointer; font-weight: 600; }
.pn-arahan-catatan { color: #52525b; font-size: .8rem; }

/* Kartu pendaftaran kerja sampingan -- selalu paling atas. */
.kerja-kartu {
  border-color: #f5c6c6;
  background: linear-gradient(180deg, #fdf3f2 0%, #ffffff 55%);
}
.kerja-lencana {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #861525;
  background: #fbe4e3;
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 0.5rem;
}
.kerja-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.85rem;
}
.kerja-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 12.5px;
  font-weight: 600;
  color: #3f3f46;
  background: #ffffff;
  border: 1px solid rgba(11, 13, 18, 0.08);
  border-radius: 999px;
  padding: 4px 10px;
}
.kerja-chip svg {
  width: 13px;
  height: 13px;
  color: #a3172b;
}
.kerja-daftar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  min-height: 44px;
  border-radius: 0.9rem;
  font-size: 13px;
  font-weight: 700;
  background: #a3172b;
  color: #ffffff;
  transition: background 0.18s ease;
}
.kerja-daftar:hover {
  background: #861525;
}
.kerja-daftar svg {
  width: 14px;
  height: 14px;
}
.kerja-catatan {
  font-size: 12px;
  color: #71717a;
  line-height: 1.5;
  margin: 0.5rem 0 0;
}
.kerja-status {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 12px;
  font-weight: 600;
  color: #0f9d77;
  margin-bottom: 0.6rem;
}
.kerja-status svg {
  width: 14px;
  height: 14px;
}
.kerja-grup {
  margin-bottom: 0.9rem;
}
.kerja-label {
  font-size: 12px;
  font-weight: 700;
  color: #52525b;
  margin-bottom: 0.4rem;
}
.kerja-opsi-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.kerja-opsi {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 12px;
  border: 1px solid #e4e4e7;
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
}
.kerja-opsi input {
  accent-color: #a3172b;
}
.kerja-opsi:has(input:checked) {
  border-color: #e99a9c;
  background: #fdf3f2;
  color: #861525;
  font-weight: 600;
}
.kerja-modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.kerja-modal.hidden {
  display: none;
}
.kerja-modal-isi {
  background: #ffffff;
  width: 100%;
  max-width: 28rem;
  max-height: 92vh;
  overflow-y: auto;
  padding: 1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
  border-radius: 1.5rem 1.5rem 0 0;
}
@media (min-width: 640px) {
  .kerja-modal {
    align-items: center;
    padding: 1rem;
  }
  .kerja-modal-isi {
    border-radius: 1.5rem;
  }
}

/* Keuangan bersama suami-istri (modal Profil) */
.pasangan-box {
  margin-top: 1rem;
  padding: 0.9rem;
  border-radius: 1rem;
  border: 1px solid #f5c6c6;
  background: #fff7f8;
}
.pasangan-box.hidden {
  display: none;
}
.pasangan-judul {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 13px;
  font-weight: 700;
  color: #18181b;
  margin-bottom: 0.4rem;
}
.pasangan-judul svg {
  width: 16px;
  height: 16px;
  color: #a3172b;
}
.pasangan-teks {
  font-size: 12px;
  line-height: 1.5;
  color: #52525b;
  margin: 0 0 0.6rem;
}
.pasangan-peringatan {
  font-size: 12.5px;
  color: #b45309;
  background: #fffbeb;
  border-radius: 0.6rem;
  padding: 0.5rem 0.6rem;
  margin: 0 0 0.6rem;
}
.pasangan-sub {
  font-size: 12px;
  font-weight: 700;
  color: #71717a;
  margin: 0.4rem 0 0.35rem;
}
.pasangan-baris {
  display: flex;
  gap: 0.4rem;
}
.pasangan-input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid #e4e4e7;
  background: #ffffff;
  font-size: 13px;
}
.pasangan-tombol,
.pasangan-tombol-lemah {
  min-height: 40px;
  padding: 0 1rem;
  border-radius: 0.75rem;
  font-size: 12px;
  font-weight: 700;
}
.pasangan-tombol {
  background: #a3172b;
  color: #ffffff;
}
.pasangan-tombol-lemah {
  background: #ffffff;
  color: #a3172b;
  border: 1px solid #f5c6c6;
  margin-top: 0.5rem;
}
.pasangan-baris .pasangan-tombol-lemah {
  margin-top: 0;
}
.pasangan-opsi-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.6rem;
}
.pasangan-opsi {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 12.5px;
  color: #3f3f46;
}
.pasangan-opsi input {
  accent-color: #a3172b;
  width: 16px;
  height: 16px;
}
.lencana-pasangan {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  max-width: 7rem;
  font-size: 12px;
  font-weight: 600;
  color: #861525;
  background: #fbe4e3;
  border-radius: 999px;
  padding: 1px 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}
.lencana-pasangan svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

/* ==========================================================================
   RIWAYAT KAS DI HP: BOTTOM SHEET LAYAR PENUH
   ==========================================================================
   Sebelumnya modal ini mengambang di tengah dengan jarak 1rem di semua
   sisi. Di HP, kepala modal (judul, tiga kartu total, filter, pencarian)
   menghabiskan sebagian besar tinggi layar, jadi daftar transaksinya --
   bagian yang sebenarnya dicari -- tinggal secuil dan tertutup habis saat
   keyboard muncul.

   Di layar kecil sekarang:
   - Sheet naik dari bawah hampir setinggi layar, dengan pegangan di atas.
   - Kartu total menyusut saat daftar digulir atau pencarian dipakai
     (kelas .ch-ringkas, dipasang pasangGulirRiwayatKas_ di app.js).
   - Label tanggal menempel di atas saat digulir, jadi selalu jelas
     transaksi yang sedang dilihat dari hari apa.
   - Ruang bawah memperhitungkan safe area iPhone.
   Layar >= 640px tidak berubah.
   ========================================================================== */
.ch-pegangan {
  display: none;
}
.ch-ringkasan {
  transition:
    max-height 0.25s ease,
    opacity 0.2s ease,
    margin 0.25s ease;
  max-height: 120px;
  overflow: hidden;
}
@media (max-width: 639px) {
  #cashHistoryModal.modal-overlay {
    padding: 0 !important;
    align-items: flex-end !important;
    overflow: hidden;
  }
  #cashHistoryModal > .modal-sheet {
    max-width: none;
    width: 100%;
    height: calc(100dvh - 0.75rem - env(safe-area-inset-top, 0px));
    max-height: calc(100dvh - 0.75rem - env(safe-area-inset-top, 0px));
    border-radius: 1.75rem 1.75rem 0 0;
    border-bottom: 0;
    padding: 0.5rem 1rem 0;
    background: #fafaf8;
    animation: chNaik 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  /* Aturan umum ".modal-overlay > *" memusatkan kartu dengan margin
     auto; sheet ini harus menempel ke dasar layar. */
  #cashHistoryModal.modal-overlay > .modal-sheet {
    margin-top: auto !important;
    margin-bottom: 0 !important;
  }
  .ch-pegangan {
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: #d4d4d8;
    margin: 0 auto 0.75rem;
    flex-shrink: 0;
  }
  /* Daftar mengisi SELURUH sisa tinggi; min-height lama membuatnya
     keluar dari sheet di layar pendek. */
  #cashHistoryModal .ch-daftar-wrap {
    min-height: 0;
  }
  #chList {
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    overscroll-behavior: contain;
  }
  /* Filter jadi segmented control yang ringkas */
  #cashHistoryModal .ch-segmen {
    background: #f1f1f0;
    border-radius: 0.9rem;
    padding: 3px;
    gap: 3px;
  }
  #cashHistoryModal .ch-segmen .ch-filter-btn {
    border: 0;
    border-radius: 0.7rem;
    min-height: 36px;
  }
  #cashHistoryModal #chSearchInput {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    font-size: 16px; /* < 16px membuat iOS memperbesar halaman saat fokus */
  }
  #chSheet.ch-ringkas .ch-ringkasan {
    max-height: 0;
    opacity: 0;
    margin-bottom: 0;
  }
  /* Label tanggal menempel di atas saat digulir */
  #chList .ch-hari {
    position: sticky;
    top: 0;
    z-index: 2;
    margin: 0 -0.25rem 0.375rem;
    padding: 0.4rem 0.5rem;
    background: rgba(250, 250, 248, 0.94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 0.6rem;
  }
  /* Mask pudar atas menutupi label yang menempel; di HP diganti
     bayangan tipis saja di bawah. */
  #chList.scroll-fade-y {
    mask-image: linear-gradient(
      to bottom,
      black 0,
      black calc(100% - 14px),
      transparent 100%
    );
    -webkit-mask-image: linear-gradient(
      to bottom,
      black 0,
      black calc(100% - 14px),
      transparent 100%
    );
  }
}
@keyframes chNaik {
  from {
    transform: translateY(24px);
    opacity: 0.6;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  #cashHistoryModal > .modal-sheet {
    animation: none;
  }
  .ch-ringkasan {
    transition: none;
  }
}

/* ---------- Lencana ketersediaan username ---------- */
.tanda-username {
  position: absolute;
  right: 10px;
  top: 50%;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tanda-username svg { width: 14px; height: 14px; }
.tanda-username.tampil { opacity: 1; transform: scale(1); }
.tanda-username.ok {
  background: #a3172b;
  color: #fff;
  box-shadow: 0 4px 12px rgba(163, 23, 43, 0.35);
}
.tanda-username.tidak {
  background: #fff1f2;
  color: #e11d48;
  box-shadow: inset 0 0 0 1.5px #fecdd3;
}
.tanda-username.cek {
  border: 2px solid #f4d4d8;
  border-top-color: #a3172b;
  animation: putar-tanda-username 0.7s linear infinite;
}
@keyframes putar-tanda-username { to { transform: rotate(360deg); } }
.tanda-username.ok svg path { stroke-dasharray: 20; stroke-dashoffset: 20; animation: gores-centang 0.35s 0.08s ease-out forwards; }
@keyframes gores-centang { to { stroke-dashoffset: 0; } }
.petunjuk-username-ok { color: #3f3f46; font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .tanda-username, .tanda-username.ok svg path { transition: none; animation: none; stroke-dashoffset: 0; }
}

/* Lencana centang akun resmi MyCashShield (lencanaResmi_ di app.js).
   Bentuk "badge" berisi warna brand dengan centang putih, supaya beda
   jelas dari nama biasa yang sekadar mirip. */
.lencana-resmi {
  display: inline-block;
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  margin-left: 2px;
  vertical-align: -2px;
}
.lencana-resmi-isi { fill: #a3172b; }
.lencana-resmi-centang {
  fill: none;
  stroke: #fff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Tombol lapor/blokir di header chat tidak berlaku untuk percakapan AI
   (jawaban AI dilaporkan per pesan). */
#chatThreadModal[data-thread-kind="ai"] #chatThreadLaporBtn { display: none; }
.lapor-tautan {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  color: #71717a;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.lapor-tautan:hover { color: #a3172b; }
.lapor-opsi {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid #e4e4e7;
  border-radius: 12px;
  background: #fff;
  font-size: 13px;
  cursor: pointer;
}
.lapor-opsi:has(input:checked) { border-color: #a3172b; background: #fff1f2; }

/* ---------- Halaman Tren Keuangan ---------- */
.tren-periode { display: flex; gap: 8px; }
.tren-chip {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid #e4e4e7;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  color: #52525b;
}
.tren-chip.aktif { background: #a3172b; border-color: #a3172b; color: #fff; }
.tren-sorotan-kartu {
  border-radius: 24px;
  padding: 20px;
  color: #fff;
  background: linear-gradient(135deg, #0f9d77, #0b7a5c);
  box-shadow: 0 10px 30px -12px rgba(15, 157, 119, 0.6);
}
.tren-sorotan-kartu.negatif {
  background: linear-gradient(135deg, #a3172b, #7f1d1d);
  box-shadow: 0 10px 30px -12px rgba(163, 23, 43, 0.6);
}
.tren-meter { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.25); overflow: hidden; }
.tren-meter span { display: block; height: 100%; border-radius: inherit; background: #fff; }
.tren-wawasan {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  font-size: 13px;
  line-height: 1.5;
  background: #f4f4f5;
  color: #3f3f46;
}
.tren-wawasan.baik { background: #ecfdf5; color: #065f46; }
.tren-wawasan.waspada { background: #fff1f2; color: #9f1239; }
.tren-bar { position: relative; height: 8px; border-radius: 999px; background: #f4f4f5; }
.tren-bar .kini { display: block; height: 100%; border-radius: inherit; background: #a3172b; }
.tren-bar .rata { position: absolute; top: -3px; width: 2px; height: 14px; background: #18181b; border-radius: 2px; transform: translateX(-1px); }
.tren-beda { font-size: 12px; font-weight: 700; padding: 2px 6px; border-radius: 999px; }
.tren-beda.naik { background: #fff1f2; color: #be123c; }
.tren-beda.turun { background: #ecfdf5; color: #047857; }
.tren-beda.sama, .tren-beda.baru { background: #f4f4f5; color: #71717a; }

/* Utilitas yang dipakai halaman Tren, Lapor, dan Hapus Akun tapi belum
   ada di tailwind.css (berkas Tailwind statis, tidak dibangun ulang). */
.z-\[105\] { z-index: 105; }
.z-\[106\] { z-index: 106; }
.max-h-\[90vh\] { max-height: 90vh; }
.bg-rose-700 { background-color: #be123c; }
.hover\:bg-rose-800:hover { background-color: #9f1239; }
.bg-zinc-800 { background-color: #27272a; }
.hover\:bg-zinc-200:hover { background-color: #e4e4e7; }
.h-0\.5 { height: 0.125rem; }
.list-disc { list-style-type: disc; }
.pl-5 { padding-left: 1.25rem; }
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.125rem; }
@media (min-width: 640px) {
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sm\:px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
}
.bg-rose-50\/50 { background-color: rgb(255 241 242 / 0.5); }

/* Pesan dialog boleh memakai baris baru (\n) untuk memisah paragraf. */
#alertMessage,
#confirmMessage {
  white-space: pre-line;
}

/* =====================================================================
   HALAMAN CATAT KAS (#cashflowModal, layar penuh)
   ===================================================================== */
.kas-halaman {
  background: #fafaf8;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.kas-kepala {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: max(12px, env(safe-area-inset-top)) 16px 12px;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid #f1f1f3;
}
.kas-kembali {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: #f4f4f5;
  color: #3f3f46;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kas-isi { max-width: var(--kas-lebar, 640px); margin: 0 auto; padding: 16px 16px 0; }
.kas-cepat { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kas-cepat-kartu {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid #ececef;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.kas-cepat-kartu:hover { box-shadow: 0 6px 20px -10px rgba(0, 0, 0, 0.25); }
.kas-cepat-kartu:active { transform: scale(0.98); }
.kas-cepat-kartu b { display: block; font-size: 13px; color: #18181b; }
.kas-cepat-kartu small { display: block; font-size: 12px; color: #71717a; line-height: 1.35; margin-top: 2px; }
.kas-cepat-ikon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kas-cepat-ikon.merah { background: #fff1f2; color: #a3172b; }
.kas-cepat-ikon.biru { background: #eff6ff; color: #1d4ed8; }
.kas-tip { font-size: 12px; color: #71717a; text-align: center; margin: 10px 0 0; line-height: 1.5; }
.kas-form { margin-top: 16px; display: flex; flex-direction: column; gap: 14px; }
.kas-kartu { background: #fff; border: 1px solid #ececef; border-radius: 22px; padding: 16px; }
#impKasPanel { margin-top: 16px; }
.kas-label { display: block; font-size: 12px; font-weight: 600; color: #71717a; margin-bottom: 6px; }
.kas-jenis { display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 4px; border-radius: 18px; background: #efeff1; }
.kas-jenis button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 700;
  color: #71717a;
  transition: all 0.15s;
}
.kas-jenis button.aktif-keluar { background: #fff; color: #a3172b; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }
.kas-jenis button.aktif-masuk { background: #fff; color: #047857; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }
.kas-nominal {
  border-radius: 24px;
  padding: 18px 18px 16px;
  color: #fff;
  background: linear-gradient(135deg, #a3172b, #7f1d1d);
  box-shadow: 0 12px 30px -14px rgba(163, 23, 43, 0.7);
  transition: background 0.2s;
}
.kas-nominal.masuk { background: linear-gradient(135deg, #0f9d77, #0b7a5c); box-shadow: 0 12px 30px -14px rgba(15, 157, 119, 0.7); }
.kas-nominal .kas-label { color: rgba(255, 255, 255, 0.8); }
.kas-nominal-baris { display: flex; align-items: baseline; gap: 8px; }
.kas-nominal-baris span { font-size: 22px; font-weight: 700; opacity: 0.85; }
.kas-nominal-baris input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  color: #fff;
  font-size: 34px;
  font-weight: 800;
  font-family: "Plus Jakarta Sans", sans-serif;
  letter-spacing: -0.5px;
}
.kas-nominal-baris input::placeholder { color: rgba(255, 255, 255, 0.5); }
.kas-nominal #cfNominalKet { color: rgba(255, 255, 255, 0.85); }
.kas-nominal #cfNominalBuka { color: #fff; text-decoration: underline; }
.kas-akun { display: flex; flex-wrap: wrap; gap: 6px; }
.kas-akun button,
.kas-chip-baris button {
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid #e4e4e7;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  color: #52525b;
  transition: all 0.15s;
}
.kas-akun button.aktif,
.kas-chip-baris button.aktif { border-color: #a3172b; background: #fff1f2; color: #a3172b; }
.kas-akun .titik { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.kas-chip-baris { display: flex; gap: 6px; overflow-x: auto; margin-top: 8px; padding-bottom: 2px; scrollbar-width: none; }
.kas-chip-baris::-webkit-scrollbar { display: none; }
.kas-chip-baris button { white-space: nowrap; flex-shrink: 0; }
.kas-aksi {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 10px;
  padding: 14px 0 calc(16px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, #fafaf8 70%, rgba(250, 250, 248, 0));
}
.kas-aksi button[disabled] { opacity: 0.5; }
.imp-kepala { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.imp-ringkas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.imp-ringkas div { background: #f7f7f8; border-radius: 14px; padding: 10px; }
.imp-ringkas small { display: block; font-size: 12px; color: #71717a; }
.imp-ringkas b { font-size: 13px; }
.imp-baris { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid #f1f1f3; cursor: pointer; }
.imp-baris input[type="checkbox"] { width: 18px; height: 18px; margin-top: 3px; accent-color: #a3172b; flex-shrink: 0; }
.imp-isi { flex: 1; min-width: 0; }
.imp-ket { display: block; font-size: 13px; font-weight: 600; color: #18181b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-meta { display: block; font-size: 12px; color: #71717a; margin-top: 2px; line-height: 1.6; }
.imp-meta select { font-size: 12px; border: 1px solid #e4e4e7; border-radius: 8px; padding: 2px 4px; background: #fff; max-width: 170px; }
.imp-nominal { font-size: 13px; font-weight: 800; white-space: nowrap; }
.imp-nominal.masuk { color: #047857; }
.imp-nominal.keluar { color: #a3172b; }
.imp-ada { display: inline-block; font-size: 12px; font-weight: 700; color: #b45309; background: #fffbeb; border-radius: 6px; padding: 1px 6px; margin-left: 6px; }
.imp-baris.tidak-dipilih { opacity: 0.55; }
.text-rose-700 { color: #be123c; }
.cf-akun { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.cf-akun span { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }

/* ---------- Tren Keuangan: tampilan fintech ---------- */
#trenPage { background: #f6f6f8; }
.tren-periode {
  display: inline-grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding: 4px;
  border-radius: 14px;
  background: #ebebef;
}
.tren-periode .tren-chip { border: 0; background: transparent; padding: 7px 16px; border-radius: 10px; color: #71717a; }
.tren-periode .tren-chip.aktif { background: #fff; color: #18181b; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); }
.tren-hero {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  padding: 20px 20px 18px;
  color: #fff;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(163, 23, 43, 0.55) 0%, rgba(163, 23, 43, 0) 60%),
    linear-gradient(160deg, #18181b 0%, #0b0d12 100%);
  box-shadow: 0 18px 40px -20px rgba(11, 13, 18, 0.8);
}
.tren-hero-label { font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.65); letter-spacing: 0.2px; }
.tren-hero-angka { font-family: "Plus Jakarta Sans", sans-serif; font-size: 32px; font-weight: 700; letter-spacing: -0.5px; margin-top: 4px; }
.tren-hero-ikon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tren-hero-beda { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px; }
.tren-hero-beda.naik { background: rgba(244, 63, 94, 0.2); color: #fda4af; }
.tren-hero-beda.turun { background: rgba(16, 185, 129, 0.2); color: #6ee7b7; }
.tren-hero-spark { margin: 14px -4px 6px; }
.tren-hero-bawah { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.tren-hero-bawah small { display: block; font-size: 12px; color: rgba(255, 255, 255, 0.55); }
.tren-hero-bawah b { font-size: 14px; }
.tren-hero .tren-meter { background: rgba(255, 255, 255, 0.15); height: 6px; }
.tren-kpi { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 640px) {
  .tren-kpi { grid-template-columns: repeat(4, 1fr); }
}
.tren-kpi-kartu { background: #fff; border-radius: 20px; padding: 14px; border: 1px solid #ededf0; }
.tren-kpi-kartu small { display: block; font-size: 12px; font-weight: 600; color: #71717a; margin-top: 8px; }
.tren-kpi-kartu b { display: block; font-family: "Plus Jakarta Sans", sans-serif; font-size: 17px; font-weight: 700; color: #18181b; margin-top: 2px; }
.tren-kpi-kartu > span:last-child { display: block; font-size: 12px; color: #71717a; }
.tren-kpi-ikon { width: 30px; height: 30px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.tren-kpi-cincin { display: flex; align-items: center; gap: 10px; }
.tren-kpi-cincin small { margin-top: 0; }
.tren-kpi-cincin span { display: block; font-size: 12px; color: #71717a; }
.tren-panel { background: #fff; border-radius: 24px; padding: 18px; border: 1px solid #ededf0; }
.tren-panel-kepala { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.tren-panel-kepala h2 { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 15px; color: #18181b; }
.tren-panel-kepala p { font-size: 12px; color: #71717a; margin-top: 1px; }
.tren-pil { font-size: 12px; font-weight: 800; color: #a3172b; background: #fff1f2; padding: 3px 8px; border-radius: 999px; }
.tren-legenda { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 10px; font-size: 12px; font-weight: 600; color: #71717a; }
.tren-legenda span { display: inline-flex; align-items: center; gap: 4px; }
.tren-legenda i { width: 8px; height: 8px; border-radius: 3px; display: inline-block; }
.tren-legenda i.garis { width: 12px; height: 2px; background: #18181b; border-radius: 2px; }
.tren-wawasan { border-radius: 16px; align-items: flex-start; }
.tren-wawasan-ikon {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tren-donat { display: grid; grid-template-columns: 140px 1fr; gap: 16px; align-items: center; }
.tren-donat-kanvas { position: relative; width: 140px; height: 140px; }
.tren-donat-tengah {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.tren-donat-tengah small { font-size: 12px; color: #71717a; }
.tren-donat-tengah b { font-family: "Plus Jakarta Sans", sans-serif; font-size: 14px; }
.tren-donat-daftar { min-width: 0; }
.tren-donat-baris { display: flex; align-items: center; gap: 6px; padding: 5px 0; font-size: 12px; }
.tren-donat-baris i { width: 8px; height: 8px; border-radius: 3px; flex-shrink: 0; }
.tren-donat-baris .nama { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: #3f3f46; }
.tren-donat-baris .pct { font-weight: 800; color: #18181b; font-variant-numeric: tabular-nums; }
.tren-akun-titik { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
@media (max-width: 380px) {
  .tren-donat { grid-template-columns: 1fr; justify-items: center; }
  .tren-donat-daftar { width: 100%; }
}

/* =====================================================================
   HALAMAN PROFIL (#profileModal, layar penuh)
   ===================================================================== */
.profil-halaman {
  background: #f6f6f8;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.profil-isi {
  max-width: var(--kas-lebar, 560px);
  margin: 0 auto;
  padding: 16px 16px calc(32px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.profil-hero {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  padding: 26px 20px 22px;
  text-align: center;
  color: #fff;
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 60%),
    linear-gradient(150deg, #a3172b 0%, #6b0f1d 100%);
  box-shadow: 0 18px 40px -22px rgba(163, 23, 43, 0.9);
}
.profil-avatar { position: relative; width: 88px; height: 88px; margin: 0 auto 12px; }
.profil-avatar #profileModalAvatar,
.profil-avatar #profileModalAvatarImg {
  width: 88px;
  height: 88px;
  border-radius: 30px;
  border: 3px solid rgba(255, 255, 255, 0.85);
}
.profil-avatar #profileModalAvatar {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.18);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 32px;
  font-weight: 700;
}
.profil-avatar #profileModalAvatar.hidden { display: none; }
.profil-avatar #profileModalAvatarImg { position: absolute; inset: 0; object-fit: cover; }
.profil-kamera {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  color: #a3172b;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.profil-nama { font-family: "Plus Jakarta Sans", sans-serif; font-size: 21px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 4px; }
.profil-username { font-size: 13px; color: rgba(255, 255, 255, 0.8); margin-top: 2px; }
.profil-kontak { font-size: 12px; color: rgba(255, 255, 255, 0.7); margin-top: 2px; }
.profil-mode {
  display: inline-block;
  margin-top: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 12px;
  font-weight: 700;
}
.profil-kartu { background: #fff; border-radius: 22px; padding: 16px; border: 1px solid #ededf0; }
.profil-lengkap { display: flex; align-items: center; gap: 14px; }
.profil-lengkap b { display: block; font-size: 14px; color: #18181b; }
.profil-lengkap p { font-size: 12.5px; color: #71717a; margin-top: 2px; line-height: 1.4; }
.profil-cincin { position: relative; width: 52px; height: 52px; flex-shrink: 0; }
.profil-cincin span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #18181b;
}
.profil-tombol-kecil { padding: 8px 14px; border-radius: 12px; background: #fff1f2; color: #a3172b; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.profil-judul-grup { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: #71717a; margin-bottom: 8px; }
.profil-data > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid #f4f4f5;
}
.profil-data > div:first-child { border-top: 0; }
.profil-data dt { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #71717a; white-space: nowrap; }
.profil-data dt svg { width: 16px; height: 16px; color: #71717a; }
.profil-data dd { font-size: 13px; font-weight: 600; color: #27272a; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.profil-menu { padding: 8px; }
.profil-menu .profil-judul-grup { padding: 8px 8px 0; }
.profil-menu > button,
.profil-menu > a {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 8px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  color: #27272a;
  text-align: left;
  transition: background 0.15s;
}
.profil-menu > button:hover,
.profil-menu > a:hover { background: #f7f7f8; }
.profil-menu .panah { width: 16px; height: 16px; margin-left: auto; color: #c4c4c8; }
.profil-menu .bahaya { color: #be123c; }
.profil-menu .ikon { width: 34px; height: 34px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.profil-menu .ikon svg { width: 17px; height: 17px; }
.profil-menu .ikon.merah { background: #fff1f2; color: #be123c; }
.profil-menu .ikon.ungu { background: #f5f3ff; color: #7c3aed; }
.profil-menu .ikon.biru { background: #eff6ff; color: #1d4ed8; }
.profil-menu .ikon.hijau { background: #ecfdf5; color: #047857; }
.profil-menu .ikon.abu { background: #f4f4f5; color: #52525b; }
.profil-versi { text-align: center; font-size: 12px; color: #71717a; padding: 4px 0 8px; }

/* ---------- Sumber dana: satu baris + lembar pilihan ---------- */
.kas-akun-tombol {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  border-radius: 14px;
  border: 1px solid #e4e4e7;
  background: #fff;
  text-align: left;
  font-size: 14px;
}
.kas-akun-tombol .titik,
.akun-baris .titik { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.kas-akun-tombol b { color: #18181b; }
.kas-akun-tombol .kosong { color: #71717a; }
.kas-akun-tombol .ganti { margin-left: auto; font-size: 12px; font-weight: 700; color: #a3172b; }
.akun-sheet-latar { background: rgba(11, 13, 18, 0.45); display: flex; align-items: flex-end; justify-content: center; }
.akun-sheet-latar.hidden { display: none; }
.akun-sheet {
  width: 100%;
  max-width: 520px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 26px 26px 0 0;
  padding: 10px 16px calc(16px + env(safe-area-inset-bottom));
  animation: akunNaik 0.2s ease-out;
}
@keyframes akunNaik { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.akun-sheet-pegangan { width: 40px; height: 4px; border-radius: 4px; background: #e4e4e7; margin: 0 auto 12px; }
.akun-daftar { overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.akun-grup { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #71717a; padding: 12px 4px 4px; }
.akun-baris { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 8px; border-radius: 12px; font-size: 14px; font-weight: 600; color: #27272a; text-align: left; }
.akun-baris:hover { background: #f7f7f8; }
.akun-baris.aktif { background: #fff1f2; color: #a3172b; }
.akun-baris.tambah { color: #a3172b; }
.akun-baris.kosongkan { color: #71717a; font-weight: 500; justify-content: center; margin-top: 6px; }

/* ---------- Kartu hero Tren: warna brand ---------- */
.tren-hero {
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(60% 80% at 0% 100%, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0) 70%),
    linear-gradient(160deg, #27272a 0%, #18181b 55%, #0b0d12 100%);
  box-shadow: 0 18px 40px -22px rgba(11, 13, 18, 0.75);
}
.tren-hero-label { color: rgba(255, 255, 255, 0.78); }
.tren-hero-ikon { background: rgba(255, 255, 255, 0.18); }
.tren-hero-bawah small { color: rgba(255, 255, 255, 0.72); }
.tren-hero .tren-meter { background: rgba(255, 255, 255, 0.22); }
.tren-hero-beda.naik { background: rgba(255, 255, 255, 0.18); color: #fff; }
.tren-hero-beda.turun { background: rgba(255, 255, 255, 0.92); color: #047857; }
.akun-sheet-latar { z-index: 107; }

/* ---------- Catat cepat (dashboard) ---------- */
.cepat-kartu { background: #fff; border: 1px solid #ececef; border-radius: 22px; padding: 10px 10px 10px 14px; box-shadow: 0 6px 20px -16px rgba(0, 0, 0, 0.4); }
.cepat-baris { display: flex; align-items: center; gap: 8px; }
.cepat-baris input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 14px; padding: 8px 0; color: #18181b; }
.cepat-baris input::placeholder { color: #71717a; }
.cepat-ikon { width: 36px; height: 36px; border-radius: 12px; background: #f4f4f5; color: #52525b; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cepat-ikon.merekam { background: #a3172b; color: #fff; animation: kedip 1s infinite; }
@keyframes kedip { 50% { opacity: 0.6; } }
/* Tanpa ini display:flex mengalahkan .hidden: tombol Batal seolah mati. */
.cepat-pratinjau.hidden { display: none; }
.cepat-pratinjau { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 4px 2px; font-size: 12px; }
.cepat-pratinjau b { font-size: 14px; color: #18181b; }
.cepat-pratinjau span { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: #f4f4f5; color: #52525b; font-weight: 600; }
.cepat-pratinjau .titik { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.cepat-pratinjau .jenis { padding: 3px 8px; border-radius: 999px; font-weight: 800; }
.cepat-pratinjau .jenis.keluar { background: #fff1f2; color: #a3172b; }
.cepat-pratinjau .jenis.masuk { background: #ecfdf5; color: #047857; }
.cepat-pratinjau span.aksi { margin-left: auto; padding: 0; background: none; gap: 6px; }
.cepat-pratinjau .cepat-banyak { flex-basis: 100%; display: flex; flex-direction: column; gap: 6px; }
.cepat-pratinjau .cepat-banyak > div { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cepat-pratinjau .cepat-banyak small { flex-basis: 100%; color: #71717a; font-size: 12px; padding-left: 2px; }
.cepat-pratinjau .batal { padding: 7px 12px; border-radius: 12px; background: #f4f4f5; color: #52525b; font-weight: 700; }
.cepat-pratinjau .simpan { padding: 7px 14px; border-radius: 12px; background: #a3172b; color: #fff; font-weight: 700; }
.cepat-favorit { display: flex; align-items: center; gap: 6px; overflow-x: auto; padding: 8px 2px 2px; scrollbar-width: none; }
.cepat-favorit:empty { display: none; }
.cepat-favorit::-webkit-scrollbar { display: none; }
.cepat-favorit .label { font-size: 12px; color: #71717a; flex-shrink: 0; }
.cepat-favorit button { flex-shrink: 0; white-space: nowrap; padding: 6px 11px; border-radius: 999px; border: 1px dashed #e4b4bb; background: #fff7f8; color: #a3172b; font-size: 12px; font-weight: 600; }

/* ---------- Pengguna baru: impor mutasi ---------- */
.mulai-impor { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 20px; background: linear-gradient(135deg, #eff6ff, #f5f3ff); border: 1px solid #dbeafe; }
.mulai-impor.hidden { display: none; }
.mulai-impor-ikon { width: 42px; height: 42px; border-radius: 14px; background: #fff; color: #1d4ed8; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mulai-impor b { font-size: 14px; color: #1e3a8a; }
.mulai-impor p { font-size: 12.5px; color: #3b4f80; margin-top: 2px; line-height: 1.4; }
.mulai-impor button { padding: 9px 14px; border-radius: 12px; background: #1d4ed8; color: #fff; font-size: 12px; font-weight: 700; flex-shrink: 0; }

/* ---------- Saldo rekening & e-wallet ---------- */
.saldo-kartu { background: #fff; border: 1px solid #ececef; border-radius: 22px; padding: 16px; }
.saldo-kartu.hidden { display: none; }
.saldo-baris { width: 100%; text-align: left; display: flex; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid #f4f4f5; font-size: 13px; }
.saldo-baris:active { background: #fafafa; }
.saldo-isi { font-size: 12px; font-weight: 700; color: #a3172b; }
.saldo-total { padding: 2px 0 8px; }
.saldo-total small { display: block; font-size: 12px; color: #71717a; }
.saldo-total b { font-family: var(--font-display, inherit); font-size: 22px; font-variant-numeric: tabular-nums; color: #18181b; }
.saldo-total b.minus { color: #be123c; }
.saldo-baris:first-child { border-top: 0; }
.saldo-baris .titik { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.saldo-baris .nama { flex: 1; font-weight: 600; color: #3f3f46; }
.saldo-baris b { font-variant-numeric: tabular-nums; color: #18181b; }
.saldo-baris b.minus { color: #be123c; }
.saldo-baris.total { border-top: 1px dashed #e4e4e7; }
.saldo-baris.total .nama { color: #71717a; }
.saldo-kosong { width: 100%; text-align: left; padding: 12px; border-radius: 14px; background: #f7f7f8; font-size: 12px; color: #52525b; line-height: 1.5; }

/* ---------- Toast ---------- */
.mcs-toast {
  position: fixed;
  left: 50%;
  bottom: calc(88px + env(safe-area-inset-bottom));
  transform: translate(-50%, 20px);
  z-index: 140;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: calc(100% - 32px);
  padding: 12px 14px 12px 16px;
  border-radius: 16px;
  background: #18181b;
  color: #fff;
  font-size: 13px;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s;
}
.mcs-toast.tampil { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.mcs-toast button { color: #fda4af; font-weight: 800; white-space: nowrap; }

/* Kartu cara cepat yang dituju pintasan. */
.kas-cepat-kartu.sorot { border-color: #a3172b; box-shadow: 0 0 0 4px rgba(163, 23, 43, 0.15); }

/* =====================================================================
   AKUN YANG DIBLOKIR (#blokirModal, layar penuh)
   ===================================================================== */
.blokir-info { display: flex; gap: 12px; padding: 14px; border-radius: 20px; background: #fff; border: 1px solid #ececef; }
.blokir-info-ikon { width: 40px; height: 40px; border-radius: 14px; background: #f4f4f5; color: #52525b; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.blokir-info b { display: block; font-size: 13px; color: #18181b; margin-bottom: 4px; }
.blokir-info ul { margin: 0; padding-left: 16px; list-style: disc; font-size: 12.5px; color: #71717a; line-height: 1.6; }
.blokir-kartu { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 20px; background: #fff; border: 1px solid #ececef; }
.blokir-avatar { width: 48px; height: 48px; border-radius: 9999px; flex-shrink: 0; object-fit: cover; background: #e4e4e7; color: #71717a; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; filter: grayscale(1); opacity: 0.85; }
.blokir-label { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 2px 8px; border-radius: 9999px; background: #fff1f2; color: #be123c; font-size: 12px; font-weight: 700; }
.blokir-buka { flex-shrink: 0; padding: 8px 12px; border-radius: 12px; border: 1px solid #e4e4e7; background: #fff; font-size: 12px; font-weight: 700; color: #3f3f46; }
.blokir-buka:active { transform: scale(0.97); }
.blokir-kosong { text-align: center; padding: 36px 20px; border-radius: 20px; background: #fff; border: 1px dashed #e4e4e7; }
.blokir-kosong span { width: 48px; height: 48px; border-radius: 16px; background: #ecfdf5; color: #059669; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.blokir-kosong b { display: block; font-size: 14px; color: #18181b; }
.blokir-kosong p { font-size: 12px; color: #71717a; margin-top: 4px; line-height: 1.5; }

/* =====================================================================
   HALAMAN CATAT TAGIHAN (#debtModal)
   ===================================================================== */
.tagihan-nominal { background: linear-gradient(135deg, #3f3f46, #18181b); box-shadow: 0 12px 30px -14px rgba(24, 24, 27, 0.6); }
.tagihan-kategori { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 480px) { .tagihan-kategori { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tagihan-kategori button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left;
  padding: 12px; border-radius: 16px; border: 1.5px solid #ececef; background: #fff; transition: all 0.15s;
}
.tagihan-kategori button:active { transform: scale(0.98); }
.tagihan-kategori button.aktif { border-color: #a3172b; background: #fff7f8; box-shadow: 0 6px 18px -12px rgba(163, 23, 43, 0.6); }
.tagihan-kategori b { font-size: 12.5px; color: #18181b; line-height: 1.25; }
.tagihan-kategori .ikon { width: 32px; height: 32px; border-radius: 11px; display: flex; align-items: center; justify-content: center; }
.tagihan-kategori small { font-size: 12px; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
.tagihan-kategori .merah { background: #fff1f2; color: #be123c; }
.tagihan-kategori .kuning { background: #fffbeb; color: #b45309; }
.tagihan-kategori .hijau { background: #ecfdf5; color: #047857; }
.tagihan-kategori .gelap { background: #27272a; color: #fff; }
.tagihan-jadwal summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; }
.tagihan-jadwal summary::-webkit-details-marker { display: none; }
.tagihan-jadwal summary b { display: block; font-size: 13px; color: #18181b; }
.tagihan-jadwal summary small { display: block; font-size: 12px; color: #71717a; }
.tagihan-jadwal[open] .panah { transform: rotate(180deg); }
.tagihan-jadwal .panah { transition: transform 0.2s; }

/* =====================================================================
   BACA BERITA -- TAMPILAN BUKU (#beritaModal)
   ===================================================================== */
.buku-latar { display: flex; flex-direction: column; background: radial-gradient(circle at 50% 0%, #3b1219 0%, #1c1917 60%); color: #fff; }
.buku-atas { display: flex; align-items: center; gap: 10px; padding: max(12px, env(safe-area-inset-top)) 14px 8px; }
.buku-atas-judul { flex: 1; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buku-ikon { width: 40px; height: 40px; border-radius: 14px; background: rgba(255, 255, 255, 0.1); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.15s, opacity 0.15s; }
.buku-ikon:active { background: rgba(255, 255, 255, 0.2); }
.buku-ikon:disabled { opacity: 0.3; }
.buku-panggung { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 8px 14px; }
.buku { position: relative; width: min(560px, 100%); height: min(760px, 100%); perspective: 1800px; }
.buku-status { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 24px; text-align: center; border-radius: 6px 20px 20px 6px; background: #fffdf8; color: #71717a; font-size: 14px; }
.buku-halaman {
  position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 6px 20px 20px 6px; background: #fffdf8; color: #27272a;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6), inset 14px 0 18px -14px rgba(0, 0, 0, 0.22);
  transform-origin: left center; backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.buku-halaman::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(0, 0, 0, 0.25), transparent 40%); opacity: 0; }
.buku-halaman.pergi { z-index: 2; }
.balik-maju { animation: bukuMaju 0.55s cubic-bezier(0.45, 0, 0.55, 1) forwards; }
.balik-maju::after, .balik-mundur::after { animation: bukuBayang 0.55s ease forwards; }
.balik-mundur { z-index: 3; animation: bukuMundur 0.55s cubic-bezier(0.45, 0, 0.55, 1); }
@keyframes bukuMaju { 0% { transform: rotateY(0); } 75% { opacity: 1; } 100% { transform: rotateY(-110deg); opacity: 0; } }
@keyframes bukuMundur { 0% { transform: rotateY(-110deg); opacity: 0; } 25% { opacity: 1; } 100% { transform: rotateY(0); } }
@keyframes bukuBayang { 50% { opacity: 1; } 100% { opacity: 0; } }

.buku-halaman.sampul { background: #fff; }
.buku-foto { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; flex-shrink: 0; background: #f4f4f5; }
.buku-sampul-isi { padding: 18px 22px 0; flex: 1; min-height: 0; overflow: hidden; }
.buku-pil { display: inline-block; padding: 3px 10px; border-radius: 999px; background: #fff1f2; color: #a3172b; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.buku-sampul-isi h2 { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 22px; line-height: 1.25; margin: 10px 0 6px; color: #18181b; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.buku-meta { font-size: 12.5px; color: #71717a; }
.buku-ringkas { margin-top: 12px; font-family: Georgia, "Times New Roman", serif; font-size: 15px; line-height: 1.6; color: #52525b; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.buku-petunjuk { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 12px 22px 18px; font-size: 12px; font-weight: 700; color: #a3172b; }

.buku-halaman.teks { padding: 20px 24px 30px 28px; }
.buku-kepala-hal { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #71717a; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1px solid #f0ebe1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buku-teks { flex: 1; min-height: 0; overflow: hidden; font-family: Georgia, "Times New Roman", serif; font-size: 16.5px; line-height: 1.72; color: #3f3f46; }
.buku-teks p { margin: 0 0 14px; text-indent: 1.4em; hyphens: auto; -webkit-hyphens: auto; }
.buku-teks p.lanjut { text-indent: 0; }
.buku-teks.awal p:first-child { text-indent: 0; }
.buku-teks.awal p:first-child::first-letter { float: left; font-size: 3.1em; line-height: 0.9; padding: 4px 8px 0 0; font-weight: 700; color: #a3172b; }

.buku-halaman.penutup { align-items: center; justify-content: center; gap: 10px; padding: 28px; text-align: center; }
.buku-penutup-ikon { width: 56px; height: 56px; border-radius: 18px; background: #ecfdf5; color: #047857; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.buku-halaman.penutup b { font-family: "Plus Jakarta Sans", sans-serif; font-size: 20px; color: #18181b; }
.buku-halaman.penutup p { font-size: 13px; color: #71717a; line-height: 1.5; margin-bottom: 8px; max-width: 320px; }
.buku-tombol { width: 100%; max-width: 320px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 13px 16px; border-radius: 16px; border: 1px solid #e4e4e7; background: #fff; font-size: 13px; font-weight: 700; color: #3f3f46; }
.buku-tombol.utama { background: #a3172b; border-color: #a3172b; color: #fff; }
.buku-tombol.tipis { border: 0; background: none; color: #71717a; font-weight: 600; }

.buku-kaki { display: flex; align-items: center; gap: 12px; padding: 8px 14px calc(14px + env(safe-area-inset-bottom)); }
.buku-progres { flex: 1; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.15); overflow: hidden; }
.buku-progres span { display: block; height: 100%; width: 0; border-radius: inherit; background: #fb7185; transition: width 0.35s ease; }
.buku-nomor-kaki { font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, 0.75); font-variant-numeric: tabular-nums; min-width: 44px; text-align: center; }
@media (max-height: 640px) { .buku-teks { font-size: 15px; line-height: 1.6; } .buku-foto { aspect-ratio: 16 / 8; } }

/* =====================================================================
   JATAH MYCASHSHIELD AI
   ===================================================================== */
.cepat-jatah { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 8px; padding: 6px 4px 0; border-top: 1px dashed #f1f1f3; font-size: 12px; color: #71717a; text-align: left; }
.cepat-jatah b { color: #18181b; }
.cepat-jatah .teks { flex: 1; min-width: 0; }
.cepat-jatah-bar { width: 44px; height: 5px; border-radius: 999px; background: #f4f4f5; overflow: hidden; flex-shrink: 0; }
.cepat-jatah-bar span { display: block; height: 100%; border-radius: inherit; background: #0f9d77; }
.cepat-jatah.kuning { color: #b45309; }
.cepat-jatah.kuning .cepat-jatah-bar span { background: #d97706; }
.cepat-jatah.merah { color: #be123c; }
.kas-jatah { display: block; margin-top: 4px; font-style: normal; font-size: 12px; font-weight: 700; color: #047857; }
.jatah-baris { display: flex; gap: 10px; align-items: flex-start; }
.jatah-baris b { font-size: 13px; color: #18181b; }
.jatah-baris small { display: block; font-size: 12px; color: #71717a; margin-top: 4px; }
.jatah-baris .tabular-nums { font-size: 12px; font-weight: 700; color: #3f3f46; }
.jatah-ikon { width: 32px; height: 32px; border-radius: 11px; background: #fff1f2; color: #a3172b; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.jatah-bar { height: 6px; border-radius: 999px; background: #f4f4f5; overflow: hidden; margin-top: 6px; }
.jatah-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #0f9d77, #34d399); }
.jatah-kode { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; border-radius: 14px; border: 1px dashed #d4d4d8; background: #fafafa; font-size: 12px; color: #3f3f46; }
.jatah-dukung { flex: 1; padding: 10px; border-radius: 14px; background: #a3172b; color: #fff; font-size: 13px; font-weight: 700; }

.saldo-kartu .saldo-catatan { margin-top: 8px; font-size: 12px; color: #71717a; line-height: 1.4; }
.saldo-kosong b { color: #a3172b; }

/* Foto Linimasa: bingkai mengikuti rasio foto (lihat pasRasioFoto_).
   Foto di luar batas 4:5 s.d. 1,91:1 ditampilkan utuh dengan latar,
   bukan dipotong. */
.post-foto { width: 100%; aspect-ratio: 4 / 5; max-height: 80vh; border-radius: 1rem; overflow: hidden; background: #f4f4f5; }
.post-foto > img, .post-foto.post-carousel > img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ---------- Kartu "Uangmu ada di mana" & cocokkan saldo ---------- */
.saldo-baris .nama small { display: block; font-size: 12px; font-weight: 500; color: #71717a; margin-top: 1px; }
.saldo-baris .nama .masuk, .saldo-ringkas .masuk, .cocok-rincian .masuk { color: #047857; }
.saldo-baris .nama .keluar, .saldo-ringkas .keluar, .cocok-rincian .keluar { color: #be123c; }
.saldo-ringkas, .cocok-rincian { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 12px; color: #71717a; background: #f7f7f8; border-radius: 14px; padding: 10px 12px; }
.saldo-ringkas { margin-top: 8px; }
.saldo-ringkas b, .cocok-rincian b { text-align: right; font-variant-numeric: tabular-nums; color: #3f3f46; }
.saldo-ringkas .garis, .cocok-rincian .garis { border-top: 1px dashed #e4e4e7; padding-top: 6px; margin-top: 2px; color: #18181b; font-weight: 700; }
.cocok-selisih { border-radius: 14px; padding: 10px 12px; font-size: 12px; line-height: 1.45; }
.cocok-selisih b { display: block; font-size: 14px; margin-bottom: 2px; }
.cocok-selisih.pas { background: #ecfdf5; color: #047857; }
.cocok-selisih.kurang { background: #fff1f2; color: #9f1239; }
.cocok-selisih.lebih { background: #eff6ff; color: #1d4ed8; }
.cocok-rincian .cocok-catatan { grid-column: 1 / -1; margin: 4px 0 0; font-size: 12px; line-height: 1.45; color: #71717a; }

/* ---------- Halaman Semua Transaksi (#cashHistoryModal) ---------- */
.rk-isi { padding-bottom: calc(32px + env(safe-area-inset-bottom)); }
.rk-tambah { width: 40px; height: 40px; border-radius: 14px; background: #a3172b; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 8px 18px -10px rgba(163, 23, 43, 0.9); }
.rk-bulan { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.rk-bulan > button:not(.rk-bulan-label) { width: 36px; height: 36px; border-radius: 12px; background: #fff; border: 1px solid #ececef; color: #3f3f46; display: flex; align-items: center; justify-content: center; }
.rk-bulan > button:disabled { opacity: 0.35; }
.rk-bulan-label { flex: 1; font-family: var(--font-display, inherit); font-weight: 700; font-size: 15px; color: #18181b; padding: 8px; border-radius: 12px; }
.rk-bulan-label:active { background: #f4f4f5; }
/* Kartu ringkasan angka memakai satu gaya netral (gelap) di semua layar.
   Merah hanya untuk aksi dan uang keluar, hijau untuk uang masuk/aman --
   angka positif di atas latar merah membingungkan. */
.rk-hero { border-radius: 24px; padding: 18px 18px 14px; color: #fff; background: radial-gradient(70% 90% at 100% 0%, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 60%), linear-gradient(160deg, #27272a 0%, #18181b 55%, #0b0d12 100%); box-shadow: 0 18px 40px -22px rgba(11, 13, 18, 0.75); }
.rk-hero > span { font-size: 12px; color: rgba(255,255,255,0.8); }
.rk-hero > b { display: block; font-family: var(--font-display, inherit); font-size: 28px; line-height: 1.15; margin-top: 2px; font-variant-numeric: tabular-nums; }
.rk-hero-dua { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.rk-hero-dua > div { background: rgba(255,255,255,0.14); border-radius: 14px; padding: 9px 11px; min-width: 0; }
.rk-hero-dua small { display: flex; align-items: center; gap: 4px; font-size: 12px; color: rgba(255,255,255,0.8); }
.rk-hero-dua strong { display: block; font-size: 14px; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-saldo { margin-top: 18px; }
.rk-judul { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.rk-judul h2 { font-family: var(--font-display, inherit); font-weight: 700; font-size: 14px; color: #18181b; }
.rk-judul button { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 700; color: #a3172b; }
.rk-strip { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 2px; }
.rk-strip::-webkit-scrollbar { display: none; }
.rk-saldo-kartu { flex: 0 0 auto; min-width: 140px; text-align: left; background: #fff; border: 1px solid #ececef; border-radius: 18px; padding: 11px 13px; }
.rk-saldo-nama { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #52525b; }
.rk-saldo-kartu .titik, .rk-chip .titik { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.rk-saldo-kartu b { display: block; font-size: 15px; margin-top: 4px; color: #18181b; font-variant-numeric: tabular-nums; }
.rk-saldo-kartu b.minus { color: #be123c; }
.rk-saldo-kartu small { font-size: 12px; font-weight: 700; color: #a3172b; }
.rk-saldo-kosong { flex: 1; display: flex; gap: 12px; align-items: center; text-align: left; background: #fff; border: 1px dashed #e4e4e7; border-radius: 18px; padding: 13px 14px; color: #a3172b; }
.rk-saldo-kosong span { font-size: 12px; color: #71717a; line-height: 1.45; }
.rk-saldo-kosong b { display: block; color: #18181b; font-size: 13px; }
.rk-filter { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.rk-segmen { display: flex; gap: 3px; background: #f1f1f0; border-radius: 14px; padding: 3px; }
.rk-segmen .ch-filter-btn { flex: 1; border: 0; border-radius: 11px; min-height: 36px; font-size: 13px; font-weight: 600; }
/* Segmented control: pilihan tidak aktif menyatu dengan latar abu, yang
   aktif terangkat putih. Dulu tiap tombol kotak putih terpisah. */
.rk-segmen .ch-filter-btn { background: transparent; color: #52525b; box-shadow: none; }
.rk-segmen .ch-filter-btn:hover { background: rgba(255,255,255,0.6); }
.rk-segmen .ch-filter-btn.ch-filter-active { background: #fff !important; color: #a3172b !important; box-shadow: 0 1px 3px rgba(11,13,18,0.12) !important; }
.rk-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: #fff; border: 1px solid #ececef; font-size: 12px; font-weight: 600; color: #52525b; }
.rk-chip.aktif { background: #18181b; border-color: #18181b; color: #fff; }
.rk-cari { position: relative; }
.rk-cari i, .rk-cari svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #71717a; }
.rk-cari input { width: 100%; padding: 11px 12px 11px 38px; border-radius: 14px; border: 1px solid #ececef; background: #fff; font-size: 16px; outline: none; }
.rk-cari input:focus { border-color: #a3172b; box-shadow: 0 0 0 4px rgba(163, 23, 43, 0.08); }
.rk-daftar { margin-top: 16px; display: flex; flex-direction: column; gap: 16px; }
.rk-hari { position: sticky; top: calc(64px + env(safe-area-inset-top)); z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 4px; margin-bottom: 6px; background: rgba(250, 250, 248, 0.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 12px; font-weight: 700; color: #52525b; }
.rk-hari-total { display: flex; gap: 8px; font-size: 12px; font-variant-numeric: tabular-nums; }
.rk-hari-total em { font-style: normal; font-weight: 600; }
.rk-hari-total .masuk { color: #047857; }
.rk-hari-total .keluar { color: #be123c; }
.rk-baris { display: flex; flex-direction: column; gap: 8px; }
.rk-kosong { text-align: center; color: #71717a; padding: 40px 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rk-kosong p { font-size: 14px; font-weight: 600; color: #71717a; }
.rk-kosong small { font-size: 12px; }

/* ---------- Pindah dana ---------- */
.kas-jenis button.aktif-pindah { background: #fff; color: #1d4ed8; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }
.kas-nominal.pindah { background: linear-gradient(135deg, #2563eb, #1e40af); box-shadow: 0 12px 30px -14px rgba(37, 99, 235, 0.7); }
.cf-row-pindah .cf-ikon { background: #eff6ff; color: #1d4ed8; }
.cf-row-pindah .cf-nominal { color: #1d4ed8; }

/* =====================================================================
   HALAMAN PENUH DI DESKTOP
   =====================================================================
   Riwayat Kas, Catat Kas, Catat Tagihan, dan Profil dirancang untuk HP.
   Di layar lebar isinya dulu tetap selebar HP di tengah layar, sementara
   judul halaman menempel di tepi kiri. Sekarang:
   - judul halaman sejajar dengan isinya (lebar mengikuti --kas-lebar);
   - Riwayat Kas: ringkasan & filter di kolom kiri yang tetap terlihat,
     daftar transaksi di kanan;
   - Catat Kas & Catat Tagihan: kartu isian berdampingan dua kolom;
   - Profil: kartu profil di kiri, menu di kanan.
   Di bawah 1024px tampilannya tidak berubah. */
.profil-halaman { --kas-lebar: 560px; }
.kas-kepala {
  padding-left: max(16px, calc((100% - var(--kas-lebar, 640px)) / 2 + 16px));
  padding-right: max(16px, calc((100% - var(--kas-lebar, 640px)) / 2 + 16px));
}

@media (min-width: 1024px) {
  .kas-kepala { padding-top: max(16px, env(safe-area-inset-top)); padding-bottom: 16px; }
  .kas-kepala h1 { font-size: 1.35rem; }

  /* Riwayat Kas */
  #cashHistoryModal { --kas-lebar: 1200px; }
  .rk-isi {
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    padding-top: 24px;
  }
  .rk-samping {
    position: sticky;
    top: 96px;
    max-height: calc(100vh - 112px);
    overflow-y: auto;
    scrollbar-width: thin;
    padding: 0 4px 12px 0;
  }
  .rk-hero { padding: 22px 22px 18px; }
  .rk-hero > b { font-size: 34px; }
  .rk-samping .rk-strip { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
  .rk-samping #chSaldoStrip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rk-samping .rk-saldo-kartu { min-width: 0; }
  .rk-samping .rk-saldo-kosong { grid-column: 1 / -1; }
  .rk-samping .rk-chip:hover, .rk-saldo-kartu:hover { border-color: #d4d4d8; }
  .rk-utama {
    min-width: 0;
    background: #fff;
    border: 1px solid #ececef;
    border-radius: 24px;
    padding: 6px 20px 20px;
    min-height: calc(100vh - 140px);
  }
  .rk-daftar { margin-top: 0; gap: 18px; }
  .rk-hari {
    top: 77px;
    margin: 0 -20px 6px;
    padding: 12px 24px 8px;
    background: rgba(255, 255, 255, 0.95);
    font-size: 13px;
  }
  .rk-hari-total { font-size: 12px; gap: 12px; }
  /* Di dalam panel putih, baris transaksi tidak perlu jadi kartu lagi:
     cukup baris rata dengan garis pemisah, menyala saat disorot. */
  .rk-utama .rk-baris { gap: 0; }
  .rk-utama .cf-row { border: 0; border-radius: 14px; padding: 12px 12px; margin: 0 -8px; }
  .rk-utama .cf-row + .cf-row { box-shadow: inset 0 1px 0 #f1f1f3; }
  .rk-utama .cf-row:hover { background: #fafaf8; box-shadow: none; }
  .rk-utama .cf-row:hover + .cf-row { box-shadow: none; }
  .rk-kosong { padding: 80px 0; }

  /* Catat Kas & Catat Tagihan: kartu isian berdampingan. dense mengisi
     kolom kanan kalau ada blok penuh (mis. "Untuk siapa") di antaranya. */
  #cashflowModal, #debtModal { --kas-lebar: 1000px; }
  #cashflowModal .kas-isi, #debtModal .kas-isi { padding-top: 24px; }
  #cashflowModal .kas-form, #debtModal .kas-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-auto-flow: row dense;
    gap: 16px;
    align-items: start;
  }
  #cashflowModal .kas-form > *, #debtModal .kas-form > * { grid-column: 1 / -1; }
  #cashflowModal .kas-form > section.kas-kartu,
  #debtModal .kas-form > section.kas-kartu { grid-column: auto; }
  .kas-aksi { justify-content: flex-end; background: none; }
  .kas-aksi #cfSubmitBtn, .kas-aksi button[type="submit"] { flex: 0 0 auto; min-width: 260px; }

  /* Profil: kartu identitas di kiri (tetap terlihat), menu di kanan. */
  #profileModal { --kas-lebar: 1040px; }
  #profileModal .profil-isi {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    column-gap: 24px;
    row-gap: 0;
    align-items: start;
    padding-top: 24px;
  }
  #profileModal .profil-isi > * { grid-column: 2; margin-bottom: 14px; }
  #profileModal .profil-isi > .profil-hero {
    grid-column: 1;
    grid-row: 1 / span 30;
    position: sticky;
    top: 96px;
    padding: 34px 24px 28px;
  }
}

/* Uang bocor: selisih saldo bank yang tidak tercatat. */
.cf-bocor { font-size: 12px; font-weight: 700; letter-spacing: 0.01em; color: #b45309; background: #fef3c7; padding: 1px 6px; border-radius: 999px; }
.cf-selisih { font-size: 12px; font-weight: 700; color: #1d4ed8; }
.rk-bocor { margin-top: 10px; font-size: 12.5px; font-weight: 600; color: #fde68a; }
.cocok-ingat { display: block; width: 100%; margin-top: 6px; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); text-align: left; font-size: 13px; font-weight: 700; color: #27272a; }
.bocor-pengingat { display: flex; gap: 12px; margin-bottom: 12px; padding: 14px; border-radius: 18px; background: #fffbeb; border: 1px solid #fde68a; color: #78350f; }
.bocor-pengingat.aktif { background: #fff1f2; border-color: #fecdd3; color: #881337; }
.bocor-ikon { width: 36px; height: 36px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.7); }
.bocor-ikon svg, .bocor-ikon i { width: 18px; height: 18px; }
.bocor-pengingat b { display: block; font-size: 13px; }
.bocor-pengingat p { font-size: 12px; line-height: 1.5; margin-top: 2px; opacity: 0.9; }
.bocor-aksi { display: flex; gap: 14px; margin-top: 8px; }
.bocor-aksi button { font-size: 12px; font-weight: 700; }
.bocor-aksi button:first-child { color: #a3172b; }
.bocor-aksi button:last-child { opacity: 0.7; }
.rk-strip.hidden { display: none; }

/* =====================================================================
   HALAMAN CICILAN BULAN INI (#cicilanModal)
   ===================================================================== */
.stat-klik { position: relative; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.stat-klik:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(11,13,18,.35); }
.stat-klik:active { transform: scale(.985); }
.stat-klik:focus-visible { outline: 2px solid #a3172b; outline-offset: 2px; }
.stat-klik-panah { position: absolute; top: 14px; right: 14px; width: 24px; height: 24px; border-radius: 999px; background: #f4f4f5; color: #71717a; display: flex; align-items: center; justify-content: center; }
.stat-klik-panah svg { width: 13px; height: 13px; }
#kapasitasCard .stat-label { padding-right: 26px; }

.ci-isi { padding-bottom: calc(32px + env(safe-area-inset-bottom)); }
.ci-hero { border-radius: 24px; padding: 18px 18px 14px; color: #fff; background: radial-gradient(70% 90% at 100% 0%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 60%), linear-gradient(150deg, #27272a 0%, #18181b 55%, #0b0d12 100%); box-shadow: 0 18px 40px -24px rgba(11,13,18,.9); }
.ci-hero > span { font-size: 12px; color: rgba(255,255,255,.72); }
.ci-hero > b { display: block; font-family: var(--font-display, inherit); font-size: 30px; line-height: 1.15; margin-top: 2px; font-variant-numeric: tabular-nums; }
.ci-progres { margin-top: 14px; height: 8px; border-radius: 999px; background: rgba(255,255,255,.14); overflow: hidden; }
.ci-progres i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #34d399, #10b981); transition: width .5s cubic-bezier(.2,.8,.2,1); }
.ci-hero > p { margin-top: 8px; font-size: 12px; color: rgba(255,255,255,.8); }
.ci-hero .rk-hero-dua > div { background: rgba(255,255,255,.08); }

.ci-banding { display: flex; gap: 12px; margin-top: 12px; padding: 14px; border-radius: 18px; border: 1px solid; font-size: 12px; line-height: 1.5; }
.ci-banding:empty { display: none; }
.ci-banding svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.ci-banding b { display: block; font-size: 14px; margin-bottom: 1px; }
.ci-banding.ok { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.ci-banding.kurang { background: #fff1f2; border-color: #fecdd3; color: #881337; }
.ci-segmen { margin-top: 14px; }

.ci-utama { margin-top: 18px; }
.ci-bagian + .ci-bagian { margin-top: 20px; }
.ci-bagian-judul { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 4px 8px; font-size: 13px; font-weight: 700; color: #18181b; }
.ci-bagian-judul em { font-style: normal; font-size: 12px; font-weight: 600; color: #71717a; font-variant-numeric: tabular-nums; }
.ci-item { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 12px; margin-bottom: 8px; background: #fff; border: 1px solid #ececef; border-radius: 18px; overflow: hidden; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease; }
.ci-item:hover { border-color: #d4d4d8; box-shadow: 0 10px 24px -18px rgba(11,13,18,.35); }
.ci-item:active { transform: scale(.995); }
.ci-item:focus-visible { outline: 2px solid #a3172b; outline-offset: 2px; }
.ci-item.beres { background: #fcfcfb; }
.ci-item.beres .ci-atas b { color: #71717a; }
.ci-tgl { flex-shrink: 0; width: 58px; min-height: 62px; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; background: #f4f4f5; color: #3f3f46; text-align: center; }
.ci-tgl small { font-size: 12px; font-weight: 800; letter-spacing: .06em; color: #71717a; line-height: 1.1; }
.ci-tgl b { font-family: var(--font-display, inherit); font-size: 24px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.ci-tgl.dekat { background: #fff7ed; color: #c2410c; }
.ci-tgl.dekat small { color: #ea580c; }
.ci-tgl.telat { background: linear-gradient(160deg, #be123c, #a3172b); color: #fff; box-shadow: 0 10px 20px -12px rgba(163,23,43,.9); }
.ci-tgl.telat small { color: rgba(255,255,255,.85); }
.ci-tgl.beres { background: #ecfdf5; color: #047857; }
.ci-tgl.beres small { color: #059669; }
.ci-badan { flex: 1; min-width: 0; }
.ci-atas { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ci-atas b { font-size: 14px; font-weight: 700; color: #18181b; min-width: 0; overflow-wrap: anywhere; }
.ci-atas .prio-chip { flex-shrink: 0; }
.ci-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 4px; font-size: 12.5px; color: #71717a; }
.ci-tempo { font-weight: 600; }
.ci-tempo.beres { color: #047857; }
.ci-tempo.dekat { color: #c2410c; }
.ci-tempo.telat { color: #be123c; background: #fff1f2; padding: 1px 7px; border-radius: 999px; }
.ci-bar { margin-top: 8px; height: 5px; border-radius: 999px; background: #f4f4f5; overflow: hidden; max-width: 260px; }
.ci-bar i { display: block; height: 100%; background: #f59e0b; border-radius: inherit; }
.ci-sebagian { margin-top: 4px; font-size: 12px; color: #b45309; font-weight: 600; }
.ci-kanan { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; text-align: right; }
.ci-angka { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.ci-kanan strong { font-size: 15px; font-weight: 800; color: #18181b; font-variant-numeric: tabular-nums; }
.ci-item.beres .ci-kanan strong { color: #047857; }
.ci-kanan small { font-size: 12px; color: #71717a; }
.ci-bayar { margin-top: 6px; padding: 7px 16px; border-radius: 12px; background: #a3172b; color: #fff; font-size: 12px; font-weight: 700; box-shadow: 0 8px 16px -10px rgba(163,23,43,.9); transition: background .15s ease; }
.ci-bayar:hover { background: #8a1324; }
.ci-centang { margin-top: 4px; display: inline-flex; }
.ci-centang svg { width: 20px; height: 20px; }

@media (min-width: 1024px) {
  #cicilanModal { --kas-lebar: 1120px; }
  .ci-isi { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 28px; align-items: start; padding-top: 24px; }
  .ci-samping { position: sticky; top: 96px; }
  .ci-hero { padding: 22px 22px 18px; }
  .ci-hero > b { font-size: 36px; }
  .ci-utama { margin-top: 0; background: #fff; border: 1px solid #ececef; border-radius: 24px; padding: 20px; min-height: calc(100vh - 140px); }
  .ci-utama .ci-item { border-color: #f1f1f3; }
  .ci-item { padding: 14px 18px 14px 14px; }
  .ci-tgl { width: 64px; min-height: 68px; }
}
@media (min-width: 640px) {
  .ci-kanan { flex-direction: row; align-items: center; gap: 16px; }
  .ci-bayar, .ci-centang { margin-top: 0; }
  .ci-bayar { min-width: 84px; }
  .ci-centang { width: 84px; justify-content: center; }
}
.ci-gajian { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 10px; margin-top: 14px; padding: 12px 14px; background: #fff; border: 1px solid #ececef; border-radius: 16px; }
.ci-gajian > span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #18181b; }
.ci-gajian select { font-size: 13px; font-weight: 600; color: #a3172b; background: #fdf2f3; border: 0; border-radius: 10px; padding: 7px 10px; }
.ci-gajian small { grid-column: 1 / -1; font-size: 12px; line-height: 1.45; color: #71717a; }

/* Pilihan cara bayar tagihan (cicilan tetap / bayar minimum) */
.tipe-tagihan { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tipe-tagihan button { text-align: left; padding: 10px 12px; border-radius: 14px; border: 1.5px solid #e4e4e7; background: #fff; transition: border-color .15s, background .15s; }
.tipe-tagihan button b { display: block; font-size: 13px; color: #27272a; }
.tipe-tagihan button small { display: block; font-size: 12px; color: #71717a; margin-top: 1px; }
.tipe-tagihan button.aktif { border-color: #a3172b; background: #fdf3f2; }
.tipe-tagihan button.aktif b { color: #a3172b; }

/* Penanda tunda / tunggakan / minimum di halaman cicilan */
.ci-label { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.ci-label.tunda { background: #eff6ff; color: #1d4ed8; }
.ci-label.tunggak { background: #fef2f2; color: #b91c1c; }
.ci-label.minimum { background: #f4f4f5; color: #52525b; }
.ci-tunda { font-size: 12.5px; font-weight: 600; color: #71717a; padding: 6px 10px; border-radius: 10px; border: 1px solid #e4e4e7; background: #fff; white-space: nowrap; }
.ci-tunda:hover { border-color: #a3172b; color: #a3172b; }
.tunda-opsi { display: block; width: 100%; text-align: left; padding: 12px 14px; border-radius: 16px; border: 1.5px solid #e4e4e7; background: #fff; margin-top: 8px; transition: border-color .15s, background .15s; }
.tunda-opsi:hover { border-color: #a3172b; background: #fdf3f2; }
.tunda-opsi b { display: block; font-size: 13.5px; color: #18181b; }
.tunda-opsi small { display: block; font-size: 12.5px; color: #71717a; margin-top: 2px; line-height: 1.45; }

/* Rencana bebas utang (renderRencanaUtang_) */
.rencana-utang { border: 1px solid #ede9e3; background: #fff; border-radius: 18px; padding: 14px 16px; }
.rencana-judul { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #a3172b; margin-bottom: 8px; }
.rencana-baris { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font-size: 13px; padding: 5px 0; border-bottom: 1px dashed #f1ede8; }
.rencana-baris span { color: #52525b; min-width: 0; }
.rencana-baris b { color: #0b0d12; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rencana-rasio.sehat { color: #047857; }
.rencana-rasio.berat { color: #b45309; }
.rencana-rasio.bahaya { color: #be123c; }
.rencana-catatan { margin: 10px 0 0; padding-left: 18px; font-size: 12px; line-height: 1.55; color: #52525b; list-style: disc; }
.rencana-catatan li + li { margin-top: 4px; }
.rencana-aksi { margin-top: 10px; width: 100%; padding: 10px 12px; border-radius: 12px; background: #a3172b; color: #fff; font-size: 13px; font-weight: 700; }

/* Target tabungan (renderTujuan_) */
.tujuan-kartu { border: 1px solid #ede9e3; background: #fff; border-radius: 18px; padding: 14px 16px; margin-top: 12px; }
.tujuan-judul { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #047857; margin-bottom: 6px; }
.tujuan-judul button { font-size: 12px; font-weight: 700; color: #a3172b; text-transform: none; letter-spacing: 0; }
.tujuan-item { display: block; width: 100%; text-align: left; padding: 8px 0; border-top: 1px dashed #f1ede8; }
.tujuan-item:first-of-type { border-top: 0; }
.tujuan-atas { display: flex; justify-content: space-between; font-size: 13px; }
.tujuan-atas span { color: #047857; font-weight: 700; font-variant-numeric: tabular-nums; }
.tujuan-bar { height: 7px; border-radius: 99px; background: #ecfdf5; margin: 6px 0 4px; overflow: hidden; }
.tujuan-bar i { display: block; height: 100%; background: #10b981; border-radius: 99px; }
.tujuan-bawah { font-size: 12px; color: #71717a; }
.tujuan-saran { font-size: 12px; color: #52525b; line-height: 1.5; margin: 0; }

/* ==========================================================================
   DAFTAR TAGIHAN BARIS + LEMBAR AKSI (debtRowHtml / bukaAksiTagihan)
   ========================================================================== */
.tg-grup + .tg-grup { margin-top: 18px; }
.tg-grup-kepala { display: flex; align-items: center; gap: 8px; padding: 0 4px 8px; font-size: 12px; color: #3f3f46; }
.tg-grup-kepala b { font-weight: 800; letter-spacing: .02em; }
.tg-grup-jumlah { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: #f4f4f5; color: #52525b; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.tg-grup-total { margin-left: auto; font-size: 12px; font-weight: 700; color: #71717a; font-variant-numeric: tabular-nums; }
.tg-daftar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
/* 2 kolom hanya kalau KARTUNYA lebar (bukan layarnya): di laptop kartu
   Mapping bisa sempit karena ada sidebar, dan 2 kolom sempit memotong nama. */
.tg-detail-isi, #ciSemua { container-type: inline-size; }
@container (min-width: 680px) { .tg-daftar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tg-baris { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px 12px 16px; border-radius: 16px; background: #fff; border: 1px solid #f0ece6; box-shadow: 0 1px 2px rgba(11, 13, 18, .04); transition: transform .12s ease, box-shadow .12s ease; overflow: hidden; }
.tg-baris::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: var(--prio, #64748b); }
.tg-baris:active { transform: scale(.985); }
@media (hover: hover) { .tg-baris:hover { box-shadow: 0 6px 18px rgba(11, 13, 18, .08); } }
.tg-baris.lunas { opacity: .55; }
.tg-baris.lunas .tg-nama { text-decoration: line-through; }
.prio-garis-urgent { --prio: #a3172b; }
.prio-garis-high { --prio: #f97316; }
.prio-garis-medium { --prio: #eab308; }
.prio-garis-low { --prio: #64748b; }
.tg-ikon { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: #f4f4f5; color: #52525b; }
.tg-ikon svg { width: 20px; height: 20px; }
.tg-ikon.risiko-red { background: #fff1f2; color: #be123c; }
.tg-ikon.risiko-yellow { background: #fffbeb; color: #b45309; }
.tg-ikon.risiko-green { background: #ecfdf5; color: #047857; }
.tg-tengah { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tg-nama { font-size: 14px; font-weight: 700; color: #0b0d12; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-meta { font-size: 12px; color: #71717a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; }
.tg-meta svg { width: 12px; height: 12px; flex: 0 0 auto; }
.tg-kanan { flex: 0 1 auto; min-width: 0; max-width: 46%; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.tg-sisa { font-size: 13.5px; font-weight: 800; color: #0b0d12; font-variant-numeric: tabular-nums; white-space: nowrap; max-width: 100%; }
.tg-status { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: #f4f4f5; color: #52525b; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.tg-status.telat { background: #fff1f2; color: #be123c; }
.tg-status.dekat { background: #fffbeb; color: #b45309; }
.tg-status.beres { background: #ecfdf5; color: #047857; }

.tg-aksi-kepala { display: flex; align-items: center; gap: 12px; }
.tg-aksi-kepala b { display: block; font-size: 16px; font-weight: 800; }
.tg-aksi-kepala small { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: #71717a; margin-top: 2px; }
.tg-aksi-info { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }
.tg-aksi-info div { background: #fafaf8; border: 1px solid #f0ece6; border-radius: 12px; padding: 8px 10px; }
.tg-aksi-info dt { font-size: 12px; color: #71717a; }
.tg-aksi-info dd { margin: 2px 0 0; font-size: 13px; font-weight: 700; color: #0b0d12; }
.tg-aksi-utama { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px; border-radius: 14px; background: #a3172b; color: #fff; font-weight: 800; font-size: 14px; }
.tg-aksi-utama svg { width: 18px; height: 18px; }
.tg-aksi-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #71717a; margin: 14px 0 6px; }
.tg-prio-pilih { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tg-prio-pilih button { padding: 8px 4px; border-radius: 10px; border: 1px solid #ede9e3; background: #fff; font-size: 12px; font-weight: 700; color: #52525b; }
.tg-prio-pilih button.aktif { background: var(--prio); border-color: var(--prio); color: #fff; }
.tg-aksi-baris { display: flex; gap: 8px; margin-top: 14px; }
.tg-aksi-baris button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 6px; border-radius: 12px; background: #f4f4f5; font-size: 12px; font-weight: 700; color: #3f3f46; }
.tg-aksi-baris button svg { width: 15px; height: 15px; }
.tg-aksi-baris button.hapus { color: #be123c; background: #fff1f2; flex: 0 0 auto; padding: 10px 14px; }
.tg-aksi-catatan { font-size: 12px; color: #71717a; display: flex; align-items: center; gap: 6px; }

/* Panel rencana ringkas: tiga ubin + saran yang bisa dibuka */
.rencana-ubin-wadah { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rencana-ubin { background: #fafaf8; border: 1px solid #f0ece6; border-radius: 14px; padding: 10px; min-width: 0; }
.rencana-ubin small { display: block; font-size: 12px; color: #71717a; }
.rencana-ubin b { display: block; font-size: 16px; font-weight: 800; color: #0b0d12; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.rencana-ubin span { display: block; font-size: 12px; color: #71717a; margin-top: 2px; line-height: 1.3; }
.rencana-ubin.rasio.sehat b { color: #047857; }
.rencana-ubin.rasio.berat b { color: #b45309; }
.rencana-ubin.rasio.bahaya b { color: #be123c; }
.rencana-saran { margin-top: 10px; }
.rencana-saran summary { cursor: pointer; font-size: 12px; font-weight: 700; color: #a3172b; list-style: none; }
.rencana-saran summary::-webkit-details-marker { display: none; }
.rencana-saran summary::after { content: " ›"; }
.rencana-saran[open] summary::after { content: " ⌄"; }
.tg-aksi-info div:last-child:nth-child(odd) { grid-column: span 2; }

/* Mapping prioritas jadi satu kartu: rencana (datar) + detail terlipat */
#debtTriageSection .rencana-utang { border: 0; padding: 0; background: transparent; }
.tg-detail { margin-top: 14px; border-top: 1px solid #f0ece6; padding-top: 12px; }
.tg-detail > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 0; }
.tg-detail > summary::-webkit-details-marker { display: none; }
.tg-detail-judul { font-size: 14px; font-weight: 800; color: #0b0d12; display: inline-flex; align-items: center; gap: 6px; }
.tg-detail-judul::after { content: "›"; font-size: 18px; line-height: 1; color: #71717a; transition: transform .15s ease; }
.tg-detail[open] .tg-detail-judul::after { transform: rotate(90deg); }
.tg-detail-ringkas { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.tg-ringkas-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: #52525b; background: #f4f4f5; border-radius: 99px; padding: 3px 9px; }
.tg-ringkas-chip i { width: 7px; height: 7px; border-radius: 99px; background: var(--prio); }
.tg-ringkas-chip.telat { background: #fff1f2; color: #be123c; }
.tg-detail-isi { margin-top: 12px; }

/* Analisis -> Mapping Prioritas */
.an-ke-mapping { width: 100%; padding: 10px 12px; border-radius: 12px; background: #fff1f2; color: #a3172b; font-size: 12.5px; font-weight: 800; text-align: center; }
.an-tautan { color: #a3172b; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* Kartu Mapping = ringkasan; daftar tagihan ada di halaman Cicilan */
.tg-ringkas-baris { margin-top: 14px; border-top: 1px solid #f0ece6; padding-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.tg-ringkas-baris .tg-detail-ringkas { margin-left: 0; }
.tg-lihat-semua { width: 100%; padding: 11px 12px; border-radius: 12px; background: #0b0d12; color: #fff; font-size: 13px; font-weight: 800; }
.ci-tampilan { margin-bottom: 12px; }
/* Tampilan "Semua utang": ringkasan bulanan di samping tidak relevan. */
.ci-mode-semua .ci-hero, .ci-mode-semua #ciBanding, .ci-mode-semua .ci-segmen, .ci-mode-semua .ci-gajian { display: none; }
.ci-mode-semua .ci-samping { display: none; }

/* Tanda bahwa baris tagihan bisa diketuk (semua umur) */
.tg-panah { flex: 0 0 auto; margin-left: -4px; font-size: 20px; line-height: 1; color: #d4d4d8; }
/* Huruf minimal 12px di elemen ringkas (semua umur) */
.tg-status, .tg-grup-total, .tg-ringkas-chip, .rencana-ubin small { font-size: 12px; }
.rencana-ubin span { font-size: 12.5px; }

/* ==========================================================================
   TAMPILAN NYAMAN — usia 55+ (terapkanUiNyaman_ dari tanggal lahir)
   ========================================================================== */
.ui-nyaman .tg-nama { font-size: 16px; white-space: normal; }
.ui-nyaman .tg-meta { font-size: 14px; white-space: normal; }
.ui-nyaman .tg-sisa { font-size: 16px; }
.ui-nyaman .tg-status { font-size: 13.5px; padding: 3px 10px; }
.ui-nyaman .tg-baris { padding: 16px 14px 16px 18px; min-height: 76px; }
.ui-nyaman .tg-ikon { width: 46px; height: 46px; }
.ui-nyaman .tg-grup-kepala { font-size: 14px; }
.ui-nyaman .tg-grup-total, .ui-nyaman .tg-ringkas-chip { font-size: 13.5px; }
.ui-nyaman .tg-ringkas-chip { padding: 6px 12px; }
.ui-nyaman .tg-lihat-semua, .ui-nyaman .tg-aksi-utama { font-size: 16px; min-height: 52px; }
.ui-nyaman .tg-prio-pilih { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ui-nyaman .tg-prio-pilih button, .ui-nyaman .tg-aksi-baris button { min-height: 48px; font-size: 14px; }
.ui-nyaman .tg-aksi-kepala b { font-size: 18px; }
.ui-nyaman .tg-aksi-info dt { font-size: 13px; }
.ui-nyaman .tg-aksi-info dd { font-size: 15.5px; }
/* Ubin bertumpuk: angka lengkap tidak muat tiga sejajar */
.ui-nyaman .rencana-ubin-wadah { grid-template-columns: minmax(0, 1fr); }
.ui-nyaman .rencana-ubin { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 12px 14px; }
.ui-nyaman .rencana-ubin small { font-size: 14px; flex: 1 1 100%; }
.ui-nyaman .rencana-ubin b { font-size: 19px; white-space: normal; }
.ui-nyaman .rencana-ubin span { font-size: 14px; }
.ui-nyaman .rencana-catatan { font-size: 14.5px; line-height: 1.6; }
.ui-nyaman .rencana-saran summary { font-size: 14.5px; }
.ui-nyaman .an-ke-mapping { font-size: 15px; min-height: 48px; }
/* Nyaman: sisa & status turun ke baris kedua supaya angka lengkap tidak terpotong */
.ui-nyaman .tg-baris { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; grid-template-areas: "ikon tengah panah" "ikon kanan panah"; column-gap: 12px; row-gap: 8px; align-items: center; }
.ui-nyaman .tg-ikon { grid-area: ikon; align-self: start; }
.ui-nyaman .tg-tengah { grid-area: tengah; }
.ui-nyaman .tg-kanan { grid-area: kanan; max-width: none; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; }
.ui-nyaman .tg-panah { grid-area: panah; }

/* Aturan 50/30/20 (anIsi503020_) */
.r53 { border: 1px solid #f0ece6; background: #fff; border-radius: 16px; padding: 14px; margin-bottom: 10px; }
.r53-judul { font-size: 13px; font-weight: 800; color: #0b0d12; display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.r53-judul small { font-size: 12px; font-weight: 600; color: #71717a; }
.r53-bar { display: flex; height: 12px; border-radius: 99px; overflow: hidden; background: #f4f4f5; margin-top: 10px; }
.r53-bar i { display: block; height: 100%; }
.r53-patokan { position: relative; height: 8px; margin-bottom: 6px; }
.r53-patokan span { position: absolute; top: 0; width: 2px; height: 8px; background: #a1a1aa; transform: translateX(-1px); }
.r53-baris { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px dashed #f0ece6; }
.r53-titik { width: 10px; height: 10px; border-radius: 99px; flex: 0 0 auto; }
.r53-nama { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 700; color: #27272a; }
.r53-nama small { display: block; font-size: 12px; font-weight: 500; color: #71717a; }
.r53-angka { text-align: right; flex: 0 0 auto; }
.r53-angka b { display: block; font-size: 15px; color: #0b0d12; font-variant-numeric: tabular-nums; }
.r53-angka small { font-size: 12px; color: #71717a; }
.r53-angka.lewat b { color: #b45309; }
.r53-catatan { font-size: 12px; color: #71717a; margin: 8px 0 0; line-height: 1.45; }
.ui-nyaman .r53-nama, .ui-nyaman .r53-judul { font-size: 15px; }
.ui-nyaman .r53-angka b { font-size: 18px; }
.ui-nyaman .r53-nama small, .ui-nyaman .r53-angka small, .ui-nyaman .r53-catatan { font-size: 13.5px; }

/* ---------- Desktop / layar lebar ---------- */
@media (min-width: 1024px) {
  /* "Semua utang": kolom ringkasan bulanan disembunyikan, jadi daftar
     memakai seluruh lebar (bukan terjepit di kolom 360px). Dengan lebar
     ini daftar otomatis jadi 2 kolom (container query .tg-daftar). */
  .ci-mode-semua .ci-isi { grid-template-columns: minmax(0, 1fr); }
  /* Lembar aksi tagihan & target tabungan jadi dialog di tengah layar. */
  #tagihanAksiSheet, #tujuanSheet { align-items: center; }
  #tagihanAksiSheet .akun-sheet, #tujuanSheet .akun-sheet { border-radius: 26px; max-height: 86vh; padding-bottom: 20px; }
  #tagihanAksiSheet .akun-sheet-pegangan, #tujuanSheet .akun-sheet-pegangan { display: none; }
}

/* Tab urutan daftar tagihan: 4 tab sama lebar, tidak perlu digeser */
.tg-urut { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; }
.tg-urut .an-tab { min-width: 0; padding-left: 4px; padding-right: 4px; white-space: nowrap; text-align: center; }
/* Ubin ringkas: label satu baris, tinggi ketiga ubin sama */
.rencana-ubin-wadah { align-items: stretch; }
.rencana-ubin small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-nyaman .rencana-ubin small { white-space: normal; }
/* Baris tagihan: kolom kanan dibatasi supaya nama & cicilan tidak terpotong */
.tg-kanan { max-width: 40%; }
.tg-tengah .tg-meta { white-space: nowrap; }
.tg-ringkas-baris .tg-detail-ringkas { gap: 5px; }
.tg-ringkas-baris .tg-ringkas-chip { padding: 3px 8px; font-size: 12.5px; }
.ui-nyaman .tg-ringkas-baris .tg-ringkas-chip { padding: 6px 12px; font-size: 13.5px; }
/* Chip ringkasan satu baris; kalau tidak muat bisa digeser, tidak turun baris */
.tg-ringkas-baris .tg-detail-ringkas { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.tg-ringkas-baris .tg-detail-ringkas::-webkit-scrollbar { display: none; }
.tg-ringkas-baris .tg-ringkas-chip { flex: 0 0 auto; }
.ui-nyaman .tg-ringkas-baris .tg-detail-ringkas { flex-wrap: wrap; }

/* Layar wajib update (cekWajibUpdate_) */
.wajib-update { position: fixed; inset: 0; z-index: 2147483000; background: #fafaf8; display: flex; align-items: center; justify-content: center; padding: 24px; }
.wajib-update-isi { max-width: 380px; text-align: center; }
.wajib-update-isi img { margin: 0 auto 18px; border-radius: 18px; }
.wajib-update-isi h2 { font-size: 22px; font-weight: 800; color: #0b0d12; margin: 0 0 10px; }
.wajib-update-isi p { font-size: 15px; line-height: 1.6; color: #52525b; margin: 0 0 22px; }
.wajib-update-isi button { width: 100%; min-height: 52px; border-radius: 16px; background: #a3172b; color: #fff; font-size: 16px; font-weight: 800; }
.wajib-update-isi small { display: block; margin-top: 12px; font-size: 13px; color: #71717a; }

/* Dropdown kategori / "pengeluaran ini untuk" di HP: ruang kosong di bawah
   halaman supaya kolomnya bisa digulir ke dekat atas layar, di atas
   keyboard (lihat bukaDropdownDiAtasKeyboard_). */
.kas-ruang-keyboard .kas-isi { padding-bottom: 70vh; }
#cfUntukCari, #cfKategori { scroll-margin-top: 84px; }

/* Dialog pemberitahuan, konfirmasi, dan layar memuat SELALU di lapisan
   paling atas. Dulu z-index-nya 100, sedangkan lembar bawah (akun, admin,
   jatah AI: 107) dan halaman chat (120-130) lebih tinggi -- dialog
   "Kembalikan kuota?" muncul DI BELAKANG lembar Admin sehingga tidak
   bisa diketuk. Tetap di bawah layar wajib update. */
#alertModal, #confirmModal { z-index: 9000; }
#globalLoader { z-index: 8990; }

/* =====================================================================
   MODAL HADIAH KUOTA AI (tampilkanHadiahKuota_)
   ===================================================================== */
.hadiah-latar {
  position: fixed; inset: 0; z-index: 9050;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: radial-gradient(120% 90% at 50% 30%, rgba(163, 23, 43, 0.55), rgba(11, 13, 18, 0.78));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: hadiahMuncul 0.25s ease-out;
  overflow: hidden;
}
.hadiah-latar.hadiah-keluar { animation: hadiahHilang 0.22s ease-in forwards; }
.hadiah-konfeti { position: absolute; inset: 0; pointer-events: none; }
.hadiah-konfeti i {
  position: absolute; top: -16px; width: 9px; height: 14px; border-radius: 2px; opacity: 0.95;
  animation-name: hadiahJatuh; animation-timing-function: cubic-bezier(.25,.6,.4,1); animation-iteration-count: 2;
}
.hadiah-kartu {
  position: relative; width: 100%; max-width: 360px; text-align: center;
  padding: 30px 24px 20px; border-radius: 30px; color: #fff; overflow: hidden;
  background: linear-gradient(160deg, #c8283f 0%, #a3172b 45%, #6e0d1c 100%);
  box-shadow: 0 30px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.25);
  animation: hadiahLoncat 0.6s cubic-bezier(.2,1.4,.4,1);
}
.hadiah-sinar {
  position: absolute; left: 50%; top: 70px; width: 420px; height: 420px; margin: -210px 0 0 -210px;
  background: repeating-conic-gradient(rgba(255,214,102,.22) 0deg 10deg, transparent 10deg 24deg);
  border-radius: 50%; animation: hadiahPutar 12s linear infinite; pointer-events: none;
}
.hadiah-ikon {
  position: relative; width: 84px; height: 84px; margin: 0 auto 10px; border-radius: 26px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, #ffe08a, #f59e0b); color: #7c2d12;
  box-shadow: 0 12px 30px rgba(245,158,11,.5); animation: hadiahGoyang 1.6s ease-in-out infinite;
}
.hadiah-ikon svg { width: 44px; height: 44px; stroke-width: 2.2; }
.hadiah-angka {
  position: relative; font: 800 64px/1 "Plus Jakarta Sans", system-ui; letter-spacing: -0.02em;
  background: linear-gradient(180deg, #fff 30%, #ffe08a); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 6px 24px rgba(255,224,138,.35);
}
.hadiah-satuan { position: relative; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #ffe08a; margin-bottom: 14px; }
.hadiah-kartu h2 { position: relative; font: 800 20px/1.3 "Plus Jakarta Sans", system-ui; margin: 0 0 8px; }
.hadiah-kartu p { position: relative; font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.88); margin: 0 0 20px; }
.hadiah-pakai {
  position: relative; width: 100%; min-height: 52px; border-radius: 16px; font-size: 16px; font-weight: 800;
  background: linear-gradient(180deg, #ffe08a, #f5b72b); color: #6e0d1c; box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
.hadiah-nanti { position: relative; width: 100%; padding: 12px; margin-top: 4px; font-size: 13px; font-weight: 700; color: rgba(255,255,255,.75); }
@keyframes hadiahMuncul { from { opacity: 0; } to { opacity: 1; } }
@keyframes hadiahHilang { to { opacity: 0; transform: scale(.98); } }
@keyframes hadiahLoncat { 0% { transform: scale(.6) translateY(40px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes hadiahGoyang { 0%,100% { transform: rotate(-6deg) scale(1); } 50% { transform: rotate(6deg) scale(1.06); } }
@keyframes hadiahPutar { to { transform: rotate(360deg); } }
@keyframes hadiahJatuh { 0% { transform: translateY(0) rotate(0); } 100% { transform: translateY(105vh) rotate(720deg); } }
@media (prefers-reduced-motion: reduce) {
  .hadiah-latar, .hadiah-kartu, .hadiah-ikon, .hadiah-sinar { animation: none; }
  .hadiah-konfeti { display: none; }
}

/* Kartu Sisa Uang: penyebab dipotong (renderPokokBelumKartu_). */
.pokok-belum {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(24, 24, 27, 0.06);
  font-size: 12px;
  line-height: 1.45;
  color: #3f3f46;
}
.pokok-belum b { color: #18181b; }
.pokok-belum button {
  margin-top: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #18181b;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

/* Lembar cek kebutuhan pokok (renderCekPokok_). */
.cek-pokok { display: flex; flex-direction: column; gap: 8px; }
.cek-pokok-item {
  border: 1px solid #f4f4f5;
  border-radius: 16px;
  padding: 4px 12px 12px;
  background: #fff;
}
.cek-pokok-item.buka { border-color: #fecdd3; box-shadow: 0 6px 18px rgba(190, 18, 60, 0.06); }
.cek-pokok-kepala {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0 0;
  text-align: left;
}
.cek-pokok-kepala span { font-size: 14px; font-weight: 700; color: #18181b; min-width: 0; }
.cek-pokok-kepala small, .cek-pokok-kandidat small { display: block; font-size: 12px; font-weight: 500; color: #71717a; }
.cek-pokok-kepala b { font-size: 12px; color: #be123c; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cek-pokok-tanya { margin: 12px 0 8px; font-size: 13px; font-weight: 700; color: #18181b; }
.cek-pokok-pilih {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid #e4e4e7;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  color: #27272a;
}
.cek-pokok-pilih.utama { background: #be123c; border-color: #be123c; color: #fff; text-align: center; }
.cek-pokok-kembali { margin-top: 8px; font-size: 12px; font-weight: 600; color: #71717a; }
.cek-pokok-kandidat {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fafafa;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: #27272a;
}
.cek-pokok-kandidat b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cek-pokok-kosong, .cek-pokok-catatan { font-size: 12px; color: #71717a; margin-top: 6px; }
.cek-pokok-chip { display: flex; flex-wrap: wrap; gap: 6px; }
.cek-pokok-chip button {
  padding: 9px 14px;
  border-radius: 999px;
  background: #fff1f2;
  color: #be123c;
  font-size: 13px;
  font-weight: 700;
}
.cek-pokok-jadwal { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cek-pokok-jadwal select, .cek-pokok-jadwal input {
  width: 100%;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid #e4e4e7;
  background: #fff;
  font-size: 13px;
}
.cek-pokok-jadwal label { font-size: 12px; color: #71717a; display: flex; flex-direction: column; gap: 4px; }
.cek-pokok-beres { padding: 16px; font-size: 13px; font-weight: 600; color: #047857; text-align: center; }

/* Cocokkan saldo: status dicek, rekening lain, paylater, pilihan selisih. */
.saldo-total span { display: block; margin-top: 2px; font-size: 12px; color: #71717a; }
.saldo-baris .nama small { display: block; font-size: 12px; font-weight: 500; color: #71717a; }
.saldo-baris .nama small.dicek { color: #047857; }
.saldo-lain { margin-top: 6px; border-top: 1px solid #f4f4f5; }
.saldo-lain summary { padding: 11px 0; font-size: 12px; font-weight: 600; color: #71717a; cursor: pointer; }
.saldo-utang { margin-top: 12px; padding: 12px; border-radius: 14px; background: #fffbeb; border: 1px solid #fde68a; }
.saldo-utang > b { display: block; font-size: 13px; color: #92400e; }
.saldo-utang p { margin: 4px 0 6px; font-size: 12px; line-height: 1.45; color: #78350f; }
.saldo-utang-baris { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid #fde68a; font-size: 13px; font-weight: 600; color: #3f3f46; }
.saldo-utang-baris button { padding: 6px 12px; border-radius: 999px; background: #18181b; color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; }
.saldo-utang-baris small.ada { font-size: 12px; color: #047857; font-weight: 700; }
.cocok-tanya { display: block; margin: 10px 0 4px; font-size: 12px; font-weight: 700; color: #3f3f46; }
.cocok-catatan-baris { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 6px; padding: 9px 10px; border-radius: 10px; background: #fff; text-align: left; font-size: 12px; font-weight: 600; color: #27272a; }
.cocok-catatan-baris small { display: block; font-size: 12px; font-weight: 500; color: #71717a; }
.cocok-catatan-baris em { font-style: normal; color: #b45309; font-weight: 700; }
.cocok-catatan-baris b { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Riwayat Kas: pilihan tampilan & ringkasan per hari (renderRiwayatHarian_). */
.rk-tampilan { display: inline-flex; padding: 3px; border-radius: 12px; background: #f4f4f5; gap: 2px; }
.rk-tampilan button { padding: 7px 14px; border-radius: 9px; font-size: 13px; font-weight: 700; color: #71717a; }
.rk-tampilan button.aktif { background: #fff; color: #18181b; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }
.rk-harian { border-radius: 18px; background: #fff; border: 1px solid #ececef; overflow: hidden; }
.rk-harian-kepala, .rk-harian-baris { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 14px; }
.rk-harian-kepala { font-size: 12px; font-weight: 700; color: #71717a; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid #f4f4f5; }
.rk-harian-kepala span:not(:first-child), .rk-harian-baris > span:not(.tgl) { text-align: right; }
.rk-harian-baris { width: 100%; text-align: left; border-top: 1px solid #f4f4f5; font-size: 13px; }
.rk-harian-baris:first-of-type { border-top: 0; }
.rk-harian-baris:active { background: #fafafa; }
.rk-harian-baris .tgl b { display: block; font-weight: 700; color: #18181b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-harian-baris .tgl small { display: block; font-size: 12px; color: #71717a; }
.rk-harian-baris .masuk, .rk-harian-baris .keluar { position: relative; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; padding-bottom: 6px; }
.rk-harian-baris .masuk { color: #047857; }
.rk-harian-baris .keluar { color: #be123c; }
.rk-harian-baris i { position: absolute; right: 0; bottom: 0; height: 3px; border-radius: 2px; background: currentColor; opacity: 0.35; }
.rk-harian-kosong { padding: 24px; text-align: center; font-size: 13px; color: #71717a; }

/* Home: kartu Hari ini & tugas hari ini (renderHariIni_). */
.hari-ini { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 4px; padding: 22px 22px 18px; border-radius: 28px; color: #fff;
  background: radial-gradient(130% 120% at 15% 0%, #36070d 0%, #7f1819 38%, #a3172b 72%, #6f1220 100%); box-shadow: 0 18px 40px -22px rgba(127, 24, 25, 0.7); }
.hari-ini.aman { background: radial-gradient(130% 120% at 15% 0%, #04291f 0%, #065f46 45%, #047857 75%, #064e3b 100%); box-shadow: 0 18px 40px -22px rgba(4, 120, 87, 0.7); }
.hari-ini.waspada { background: radial-gradient(130% 120% at 15% 0%, #3b2304 0%, #92400e 45%, #b45309 75%, #78350f 100%); }
.hari-ini.netral { background: #18181b; }
.hari-ini-label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.8; }
.hari-ini-angka { font-family: var(--font-display, inherit); font-size: 36px; line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.hari-ini-angka.kecil { font-size: 24px; }
.hari-ini-sub { font-size: 13px; line-height: 1.45; opacity: 0.85; }
.hari-ini > button { align-self: flex-start; margin-top: 10px; padding: 9px 14px; border-radius: 999px; background: #fff; color: #18181b; font-size: 13px; font-weight: 700; }
.hari-ini-rinci { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.hari-ini-rinci span { font-size: 12px; line-height: 1.3; opacity: 0.8; min-width: 0; }
.hari-ini-rinci b { display: block; margin-top: 2px; font-size: 13px; font-variant-numeric: tabular-nums; opacity: 1; overflow-wrap: anywhere; }
.hari-ini-tugas { margin-top: 12px; padding: 14px; border-radius: 22px; background: #fff; border: 1px solid #ececef; }
.hari-ini-tugas h3 { margin: 0 0 6px; font-size: 13px; font-weight: 800; color: #18181b; }
.hari-ini-tugas-baris { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-top: 1px solid #f4f4f5; text-align: left; color: #be123c; }
.hari-ini-tugas-baris:first-of-type { border-top: 0; }
.hari-ini-tugas-baris span { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: #18181b; }
.hari-ini-tugas-baris b { display: block; font-weight: 700; }
.hari-ini-tugas-baris small { display: block; font-size: 12px; font-weight: 500; color: #71717a; }
.hari-ini-tugas-baris .panah { color: #d4d4d8; }

/* Kartu progres penguji & lembar masukan. */
.penguji-kartu { margin-top: 12px; padding: 14px 16px; border-radius: 22px; background: #fffbeb; border: 1px solid #fde68a; display: flex; flex-direction: column; gap: 6px; }
.penguji-kartu b { font-size: 13px; color: #78350f; }
.penguji-kartu span { font-size: 12px; line-height: 1.45; color: #92400e; }
.penguji-kartu button { align-self: flex-start; margin-top: 4px; padding: 7px 12px; border-radius: 999px; background: #fff; border: 1px solid #fde68a; font-size: 12px; font-weight: 700; color: #92400e; }
.penguji-bar { height: 6px; border-radius: 999px; background: #fef3c7; overflow: hidden; }
.penguji-bar i { display: block; height: 100%; border-radius: inherit; background: #d97706; }
.masukan-nilai { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.masukan-nilai button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 14px; border: 1px solid #e4e4e7; background: #fff; font-size: 22px; }
.masukan-nilai button small { font-size: 12px; font-weight: 600; color: #71717a; }
.masukan-nilai button.aktif { border-color: #be123c; background: #fff1f2; }

.hari-ini-aman { position: absolute; top: 16px; right: 16px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); font-size: 12px; font-weight: 700; letter-spacing: 0.02em; }
.hari-ini .hari-ini-label { padding-right: 96px; }
.hari-ini-catatan { grid-column: 1 / -1; font-size: 12px; opacity: 0.7; }

.tunda-pengantar { margin: 0 0 10px; font-size: 12px; line-height: 1.5; color: #52525b; }
.tunda-opsi.utama { border-color: #fecdd3; background: #fff1f2; }

/* Label yang dipaskan otomatis (PASKAN_TEKS_) butuh lebar terbatas. */
.rencana-ubin small, .rencana-ubin b, .rencana-ubin span { display: block; min-width: 0; max-width: 100%; }
.rencana-ubin { min-width: 0; }

/* HP paling kecil (≤ 340px): kolom sempit diubah supaya label tetap satu
   baris (lihat PASKAN_TEKS_). */
@media (max-width: 340px) {
  .hari-ini-rinci { grid-template-columns: 1fr; gap: 4px; }
  .hari-ini-rinci > span { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
  .hari-ini-rinci b { margin-top: 0; }
  .rencana-ubin-wadah { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Kartu yang memasang display sendiri tetap patuh pada .hidden. */
.penguji-kartu.hidden, .hari-ini-tugas.hidden { display: none; }

/* Lencana mode di header: dipaskan (PASKAN_TEKS_), tidak menabrak tombol. */
#profileLabel { max-width: 100%; }
@media (max-width: 340px) { #catatCepatInput::placeholder { font-size: 13px; } }

/* Tombol & lembar "Lagi ditagih sekarang?" (bukaDitagih). */
.ditagih-tombol { width: 100%; display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; border-radius: 18px; background: #fff; border: 1.5px dashed #fda4af; color: #be123c; text-align: left; }
.ditagih-tombol.hidden { display: none; }
.ditagih-tombol span { flex: 1; min-width: 0; }
.ditagih-tombol b { display: block; font-size: 14px; color: #9f1239; }
.ditagih-tombol small { display: block; font-size: 12.5px; color: #71717a; }
.ditagih-isi section { margin-top: 14px; }
.ditagih-isi h4 { margin: 0 0 6px; font-size: 13px; font-weight: 800; color: #18181b; }
.ditagih-isi ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13px; line-height: 1.45; color: #3f3f46; }
.ditagih-isi blockquote { margin: 0; padding: 12px 14px; border-radius: 14px; background: #f4f4f5; font-size: 13px; line-height: 1.55; color: #27272a; }
.ditagih-salin { margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: #18181b; color: #fff; font-size: 12px; font-weight: 700; }
.ditagih-aksi { margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ditagih-aksi a, .ditagih-aksi button { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 8px; border-radius: 14px; background: #fff1f2; color: #9f1239; font-size: 12.5px; font-weight: 700; text-align: center; text-decoration: none; }
.ditagih-aksi .bahaya { background: #be123c; color: #fff; }
.ditagih-catatan { margin: 8px 0 0; font-size: 12.5px; line-height: 1.45; color: #71717a; }

/* Kemajuan bayar utang (renderKemajuanUtang_). */
.kemajuan-utang { margin-top: 12px; padding: 16px; border-radius: 22px; background: #fff; border: 1px solid #ececef; }
.kemajuan-utang.hidden { display: none; }
.kemajuan-kepala { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: #71717a; }
.kemajuan-kepala em { font-style: normal; color: #047857; }
.kemajuan-angka { display: block; margin-top: 4px; font-family: var(--font-display, inherit); font-size: 24px; font-weight: 800; color: #047857; font-variant-numeric: tabular-nums; }
.kemajuan-sub { display: block; font-size: 12px; color: #71717a; }
.kemajuan-batang { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; height: 64px; margin-top: 12px; align-items: end; }
.kemajuan-batang span { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.kemajuan-batang i { width: 100%; max-width: 28px; border-radius: 6px 6px 2px 2px; background: #10b981; opacity: 0.85; }
.kemajuan-batang small { font-size: 12px; color: #71717a; }

/* Sapaan, masa sulit, amplop gaji. */
.sapaan { margin-top: 12px; display: flex; gap: 10px; align-items: flex-start; padding: 12px 12px 12px 14px; border-radius: 20px; background: #f5f3ff; border: 1px solid #ddd6fe; }
.sapaan.hidden { display: none; }
.sapaan-avatar { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #7c3aed; color: #fff; }
.sapaan > div { flex: 1; min-width: 0; }
.sapaan p { margin: 0; font-size: 13px; line-height: 1.5; color: #3b0764; }
.sapaan > div > button { margin-top: 8px; padding: 6px 12px; border-radius: 999px; background: #7c3aed; color: #fff; font-size: 12px; font-weight: 700; }
.sapaan-tutup { flex-shrink: 0; color: #a78bfa; }
.hari-ini .hari-ini-tautan { background: transparent; color: #fff; text-decoration: underline; padding: 6px 0 0; margin-top: 2px; font-weight: 600; }
.masa-sulit-pilih { display: grid; gap: 8px; }
.masa-sulit-pilih button { text-align: left; padding: 12px 14px; border-radius: 16px; border: 1.5px solid #e4e4e7; background: #fff; }
.masa-sulit-pilih b { display: block; font-size: 14px; color: #18181b; }
.masa-sulit-pilih small { display: block; font-size: 12px; color: #71717a; margin-top: 2px; }
.masa-sulit-pilih .biasa { text-align: center; font-size: 13px; font-weight: 700; color: #71717a; border-style: dashed; }
.amplop-pengantar { margin: 0 0 8px; font-size: 13px; line-height: 1.5; color: #52525b; }
.amplop-baris { display: flex; align-items: center; gap: 12px; padding: 12px 2px; border-top: 1px solid #f4f4f5; color: #be123c; }
.amplop-baris span { flex: 1; min-width: 0; }
.amplop-baris b { display: block; font-size: 14px; color: #18181b; }
.amplop-baris small { display: block; font-size: 12.5px; color: #71717a; }
.amplop-baris em { font-style: normal; font-weight: 800; color: #18181b; font-variant-numeric: tabular-nums; white-space: nowrap; }
.amplop-catatan { margin: 8px 0 0; padding: 10px 12px; border-radius: 12px; background: #fff1f2; font-size: 12.5px; color: #9f1239; }
.amplop-ok { width: 100%; margin-top: 14px; padding: 13px; border-radius: 14px; background: #18181b; color: #fff; font-weight: 700; font-size: 14px; }

/* Catat otomatis dari email & draf. */
.catat-email-pengantar { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: #52525b; }
.catat-email-alamat { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; background: #f4f4f5; }
.catat-email-alamat code { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: #18181b; overflow-wrap: anywhere; }
.catat-email-alamat button, .catat-email-aksi button { padding: 7px 12px; border-radius: 999px; background: #18181b; color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; }
.catat-email-verif { margin-top: 10px; padding: 12px; border-radius: 14px; background: #ecfdf5; border: 1px solid #a7f3d0; }
.catat-email-verif b { display: block; font-size: 12px; color: #065f46; }
.catat-email-verif code { display: block; margin: 4px 0; font-size: 22px; font-weight: 800; letter-spacing: 0.08em; color: #064e3b; }
.catat-email-konfirmasi { display: block; margin: 8px 0 6px; padding: 10px; border-radius: 12px; background: #047857; color: #fff; font-size: 13.5px; font-weight: 700; text-align: center; }
.catat-email-verif small { font-size: 12.5px; color: #047857; }
.catat-email-langkah { margin: 14px 0 0; padding-left: 18px; display: grid; gap: 8px; font-size: 12.5px; line-height: 1.5; color: #3f3f46; }
.catat-email-langkah code { font-size: 12px; background: #f4f4f5; padding: 1px 4px; border-radius: 4px; overflow-wrap: anywhere; }
.catat-email-aksi { display: flex; gap: 8px; margin-top: 12px; }
.catat-email-aksi .ganti { background: #fff; color: #71717a; border: 1px solid #e4e4e7; }
.catat-email-catatan { margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; color: #71717a; }
.catat-email-alamat { justify-content: center; text-align: center; padding: 14px 12px; }
.catat-email-salin { margin-top: 8px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: 14px; background: #9f1239; color: #fff; font-size: 14px; font-weight: 700; }
.catat-email-terakhir { margin: 10px 0 0; padding: 8px 10px; border-radius: 10px; background: #f4f4f5; font-size: 12.5px; line-height: 1.45; color: #52525b; }
.ce-tab { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 4px 0 14px; border-radius: 14px; background: #f4f4f5; }
.ce-tab button { padding: 9px 6px; border-radius: 11px; font-size: 13px; font-weight: 700; color: #71717a; }
.ce-tab button.aktif { background: #fff; color: #18181b; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.ce-sub { margin: 0 0 10px; font-size: 12.5px; color: #71717a; }
.ce-komputer { margin-bottom: 12px; padding: 10px 12px; border-radius: 12px; background: #fffbeb; border: 1px solid #fde68a; font-size: 12.5px; line-height: 1.5; color: #92400e; }
.ce-langkah { border: 1px solid #e4e4e7; border-radius: 16px; padding: 12px; margin-bottom: 8px; background: #fff; }
.ce-langkah.aktif { border-color: #fda4af; box-shadow: 0 6px 18px -12px rgba(159,18,57,.5); }
.ce-langkah.selesai { opacity: .65; }
.ce-langkah-kepala { display: flex; align-items: center; gap: 10px; }
.ce-langkah-kepala span { flex: none; width: 26px; height: 26px; border-radius: 999px; background: #f4f4f5; color: #71717a; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.ce-langkah.aktif .ce-langkah-kepala span { background: #9f1239; color: #fff; }
.ce-langkah.selesai .ce-langkah-kepala span { background: #d1fae5; color: #047857; }
.ce-langkah-kepala b { font-size: 13.5px; color: #18181b; }
.ce-langkah-isi { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: #3f3f46; }
.ce-langkah-isi p { margin: 0 0 8px; }
.ce-langkah-isi ol { margin: 8px 0; padding-left: 20px; list-style: decimal; display: grid; gap: 4px; }
.ce-utama { display: block; width: 100%; margin-top: 8px; padding: 11px; border-radius: 12px; background: #9f1239; color: #fff; font-size: 13.5px; font-weight: 700; text-align: center; }
.ce-utama.kedua { background: #18181b; }
.ce-lanjut { display: block; width: 100%; margin-top: 8px; padding: 10px; border-radius: 12px; border: 1px solid #e4e4e7; background: #fff; color: #18181b; font-size: 13px; font-weight: 700; }
.ce-cadangan { margin-top: 10px; padding: 8px 10px; border-radius: 12px; background: #fafafa; }
.ce-cadangan summary { cursor: pointer; font-size: 12px; font-weight: 700; color: #71717a; }
.ce-cadangan p { margin: 8px 0 0; font-size: 12.5px; color: #71717a; }
.ce-matikan { display: block; margin: 14px auto 0; font-size: 12px; color: #be123c; text-decoration: underline; }
.ce-mati { padding: 14px; border-radius: 16px; background: #f4f4f5; }
.ce-mati b { font-size: 14px; color: #18181b; }
.ce-mati p { margin: 6px 0 4px; font-size: 12.5px; line-height: 1.5; color: #52525b; overflow-wrap: anywhere; }
.ce-hapus { margin-top: 12px; padding: 12px; border-radius: 16px; border: 1px solid #e4e4e7; font-size: 12.5px; line-height: 1.5; color: #3f3f46; }
.ce-hapus b { color: #18181b; }
.ce-hapus ol { margin: 8px 0 0; padding-left: 20px; list-style: decimal; display: grid; gap: 4px; }
.ce-kembali { display: block; margin: 8px auto 0; font-size: 12px; color: #71717a; }
.ce-kode { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: #ecfdf5; border: 1px solid #a7f3d0; }
.ce-kode code { flex: 1; font-size: 22px; font-weight: 800; letter-spacing: .08em; color: #064e3b; }
.ce-kode button { padding: 7px 12px; border-radius: 999px; background: #047857; color: #fff; font-size: 12px; font-weight: 700; }
.ce-tunggu { display: flex; align-items: center; gap: 8px; color: #52525b; }
.ce-tunggu i { flex: none; width: 14px; height: 14px; border-radius: 999px; border: 2px solid #fecdd3; border-top-color: #9f1239; animation: ce-putar 0.8s linear infinite; }
@keyframes ce-putar { to { transform: rotate(360deg); } }
.ce-beres { padding: 14px; border-radius: 16px; background: #ecfdf5; border: 1px solid #a7f3d0; }
.ce-beres b { color: #065f46; font-size: 14px; }
.ce-beres p { margin: 6px 0 10px; font-size: 12.5px; color: #047857; }
.ce-beres button { font-size: 12px; color: #71717a; text-decoration: underline; }
.catat-email-judul { margin: 18px 0 8px; font-size: 13px; font-weight: 700; color: #18181b; }
.catat-email-mudah { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.catat-email-mudah li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.45; color: #3f3f46; }
.catat-email-mudah li span { flex: none; width: 24px; height: 24px; border-radius: 999px; background: #ffe4e6; color: #9f1239; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.catat-email-lanjut { margin-top: 16px; padding: 12px; border-radius: 14px; border: 1px solid #e4e4e7; }
.catat-email-lanjut summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: #52525b; }
.catat-email-lanjut > p { margin: 8px 0 0; font-size: 12px; color: #71717a; }
.catat-email-lanjut .catat-email-langkah { margin-top: 8px; }
.catat-email-aksi { flex-wrap: wrap; }
.draf-email { padding: 12px 0; border-top: 1px solid #f4f4f5; }
.draf-email:first-child { border-top: 0; }
.draf-email-atas { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.draf-email-atas span { min-width: 0; }
.draf-email-atas b { display: block; font-size: 14px; color: #18181b; }
.draf-email-atas small { display: block; font-size: 12.5px; color: #71717a; }
.draf-email-atas em { font-style: normal; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.draf-email-atas em.masuk { color: #047857; }
.draf-email-atas em.keluar { color: #be123c; }
.draf-email-aksi { display: flex; gap: 8px; margin-top: 8px; }
.draf-email-aksi button { flex: 1; padding: 9px; border-radius: 12px; background: #18181b; color: #fff; font-size: 13px; font-weight: 700; }
.draf-email-aksi .buang { background: #fff; color: #71717a; border: 1px solid #e4e4e7; }

/* =====================================================================
   HOME (1.78): satu kolom berurutan. Blok lama yang angkanya sudah ada di
   kartu Hari ini / Tagihan disembunyikan (tetap di DOM untuk kode lama).
   ===================================================================== */
.home-kolom { display: flex; flex-direction: column; gap: 14px; }
.home-kolom > * { margin-top: 0 !important; }
.home-kolom > .home-lama, .home-lama { display: none !important; }
#hariIniKartu { order: 1; } #sapaanKartu { order: 2; } #hariIniTugas { order: 3; } #pengujiKartu { order: 4; }
/* Bulan ini tepat di atas kartu penguji (bulanIniKartu ada setelah hariIniTugas di DOM). */
#bulanIniKartu { order: 3; }
#catatCepatKartu { order: 5; } #aksesCepatBlok { order: 6; } #pokokHome { order: 7; } #mulaiImporKartu { order: 7; } #aiAnalysisSection { order: 8; } #tagihanRingkas { order: 10; }
#riwayatKasCard { order: 11; }
.home-kolom > *:not([id="hariIniKartu"]):not([id="sapaanKartu"]):not([id="hariIniTugas"]):not([id="pengujiKartu"]):not([id="catatCepatKartu"]):not([id="mulaiImporKartu"]):not([id="pokokHome"]):not([id="bulanIniKartu"]):not([id="tagihanRingkas"]):not([id="riwayatKasCard"]):not([id="aiAnalysisSection"]):not([id="aksesCepatBlok"]) { order: 20; }
.hari-ini-rinci > button { display: block; min-width: 0; text-align: left; font-size: 12px; line-height: 1.3; color: inherit; opacity: 0.85; }
.hari-ini-rinci > button b { display: block; margin-top: 2px; font-size: 13px; opacity: 1; }
@media (max-width: 340px) { .hari-ini-rinci > button { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .hari-ini-rinci > button b { margin-top: 0; } }
.bulan-ini, .tagihan-ringkas { padding: 16px; border-radius: 22px; background: #fff; border: 1px solid #ececef; }
.tagihan-ringkas.hidden { display: none; }
.bulan-ini-kepala, .tagihan-ringkas-kepala { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.bulan-ini-kepala span, .tagihan-ringkas-kepala span { font-size: 14px; font-weight: 800; color: #18181b; }
.bulan-ini-kepala small { font-size: 12.5px; color: #71717a; }
.bulan-ini-angka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.bulan-ini-angka button { min-width: 0; text-align: left; padding: 10px 12px; border-radius: 14px; background: #fafaf8; border: 1px solid #f0ece6; }
.bulan-ini-angka small { display: block; font-size: 12.5px; color: #71717a; }
.bulan-ini-angka b { display: block; margin-top: 2px; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.bulan-ini .masuk { color: #047857; } .bulan-ini .keluar { color: #be123c; }
.bulan-ini-bawah { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; color: #71717a; }
.bulan-ini-bawah button { font-size: 12px; color: #71717a; }
.bulan-ini-bawah b { color: #18181b; }
.bulan-ini-catatan { margin: 8px 0 0; font-size: 12.5px; color: #71717a; }
.tagihan-ringkas-kepala button { font-size: 12.5px; font-weight: 700; color: #be123c; }
.tagihan-ringkas-label { display: block; margin-top: 8px; font-size: 12px; color: #71717a; }
.tagihan-ringkas-angka { display: block; font-size: 22px; font-weight: 800; color: #be123c; font-variant-numeric: tabular-nums; }
.tagihan-ringkas-angka.beres { color: #047857; font-size: 18px; }
.tagihan-ringkas-bar { height: 6px; margin-top: 10px; border-radius: 999px; background: #f4f4f5; overflow: hidden; }
.tagihan-ringkas-bar i { display: block; height: 100%; background: #10b981; border-radius: inherit; }
.tagihan-ringkas-sub { display: block; margin-top: 4px; font-size: 12.5px; color: #71717a; }
.tagihan-ringkas-kemajuan { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid #f4f4f5; font-size: 12.5px; color: #3f3f46; }
.tagihan-ringkas-kemajuan b { color: #047857; }
.tagihan-ringkas-ditagih { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: #9f1239; }
.home-kolom .hari-ini-tugas, .home-kolom .sapaan, .home-kolom .penguji-kartu { margin-top: 0; }

/* Riwayat Kas di Home: lebih ringkas, serasi dengan kartu lain. */
#homeKolom #riwayatKasCard { padding: 16px !important; border-radius: 22px; }
#homeKolom #riwayatKasCard > div:first-child { margin-bottom: 12px !important; }
#homeKolom #riwayatKasCard > div:first-child h3 { font-size: 14px !important; font-weight: 800; }
#homeKolom #riwayatKasCard > div:first-child p { display: none; }

/* Kartu Kebutuhan pokok di Home & penjelasan jatah per hari. */
.hari-ini-per { font-size: 15px; font-weight: 700; opacity: 0.8; margin-left: 4px; letter-spacing: 0; }
.hari-ini-peringatan { margin-top: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.14); font-size: 12px; line-height: 1.45; }
.hari-ini-peringatan button { display: block; margin-top: 8px; padding: 7px 12px; border-radius: 999px; background: #fff; color: #18181b; font-size: 12px; font-weight: 700; }
.pokok-home { padding: 16px; border-radius: 22px; background: #fff; border: 1.5px solid #a7f3d0; }
.pokok-home-kepala { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pokok-home-kepala span { font-size: 14px; font-weight: 800; color: #18181b; }
.pokok-home-kepala button { font-size: 12.5px; font-weight: 700; color: #047857; }
.pokok-home-angka { display: block; margin-top: 8px; font-size: 20px; font-weight: 800; color: #047857; font-variant-numeric: tabular-nums; }
.pokok-home-angka small { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; color: #71717a; }
.pokok-home-bar { height: 6px; margin-top: 8px; border-radius: 999px; background: #ecfdf5; overflow: hidden; }
.pokok-home-bar i { display: block; height: 100%; background: #10b981; border-radius: inherit; }
.pokok-home-belum { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.pokok-home-belum li { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: #3f3f46; }
.pokok-home-belum em { font-style: normal; font-weight: 700; color: #be123c; white-space: nowrap; }
.pokok-home-ajak { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: #52525b; }
.pokok-home-utama { width: 100%; margin-top: 12px; padding: 11px; border-radius: 14px; background: #047857; color: #fff; font-size: 13px; font-weight: 700; }
.pokok-home-beres { margin: 10px 0 0; font-size: 13px; color: #047857; font-weight: 600; }
/* Akses cepat: 2x3 per halaman; halaman yang isinya sedikit tidak meregang. */
#quickActionsScroll > div { grid-template-rows: none !important; grid-auto-rows: minmax(112px, auto); align-content: start; }

/* =====================================================================
   AKSES CEPAT (1.79.2): ubin ala widget, 3 kolom x 2 baris.
   ===================================================================== */
.akses-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
/* Desktop: tetap disembunyikan di HP oleh class "hidden lg:grid". */
@media (min-width: 1024px) { #quickActionsDesktop { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; } }
.akses-ubin {
  position: relative; overflow: hidden; min-width: 0; aspect-ratio: 1 / 0.92;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 8px; border-radius: 22px; text-align: center;
  background: var(--akses-latar); border: 1px solid #efedea; box-shadow: 0 6px 16px -12px rgba(24, 24, 27, 0.35);
  background: linear-gradient(160deg, #ffffff 0%, color-mix(in srgb, var(--akses-latar) 70%, #ffffff) 100%);
  border: 1px solid color-mix(in srgb, var(--akses-warna) 12%, #ffffff);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 8px 20px -14px color-mix(in srgb, var(--akses-warna) 55%, transparent);
  transition: transform 0.18s cubic-bezier(.2,.8,.2,1), box-shadow 0.18s;
}
.akses-ubin::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; border-radius: 0 0 22px 22px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--akses-warna) 14%, transparent), transparent); pointer-events: none; }
.akses-ubin:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 14px 28px -16px color-mix(in srgb, var(--akses-warna) 70%, transparent); }
.akses-ubin:active { transform: scale(0.95); }
.akses-ubin-ikon {
  position: relative; z-index: 1; width: 46px; height: 46px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center; color: #fff;
  background: var(--akses-warna); box-shadow: 0 6px 14px -8px rgba(24, 24, 27, 0.5);
  background: linear-gradient(145deg, color-mix(in srgb, var(--akses-warna) 78%, #ffffff), var(--akses-warna));
  box-shadow: 0 8px 16px -8px var(--akses-warna), 0 1px 0 rgba(255,255,255,.35) inset;
}
.akses-ubin-ikon svg { width: 22px; height: 22px; stroke-width: 2.2; }
.akses-ubin-label { position: relative; z-index: 1; display: block; width: 100%; font-size: 12.5px; font-weight: 700; color: #18181b; line-height: 1.2; letter-spacing: -0.01em; }
@media (min-width: 1024px) { .akses-ubin { aspect-ratio: auto; padding: 18px 10px; } }

/* Kartu Kisah Penyintas di Linimasa */
.kisah-kartu { flex: none; width: 176px; scroll-snap-align: start; display: flex; flex-direction: column; text-align: left; padding: 14px; border-radius: 20px; background: #fff; border: 1px solid #f4f4f5; transition: border-color .15s, box-shadow .15s; }
.kisah-kartu:hover { border-color: #fecdd3; box-shadow: 0 8px 20px -14px rgba(159,18,57,.45); }
.kisah-kartu-atas { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.kisah-avatar { width: 44px; height: 44px; border-radius: 999px; object-fit: cover; background: #ffe4e6; }
.buku-catatan-fiksi { display: block; margin-top: 4px; font-size: 12px; line-height: 1.4; color: #71717a; }
.kisah-baru { padding: 2px 8px; border-radius: 999px; background: #be123c; color: #fff; font-size: 12px; font-weight: 800; }
.kisah-judul { font-size: 13.5px; line-height: 1.3; color: #18181b; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.kisah-orang { margin-top: 4px; font-size: 12px; color: #71717a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kisah-baca { margin-top: 10px; display: flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: #be123c; }

/* Profil: data diri dilipat sebagai data opsional */
.profil-opsional summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; }
.profil-opsional summary::-webkit-details-marker { display: none; }
.profil-opsional summary b { display: block; font-size: 14px; color: #18181b; }
.profil-opsional summary small { display: block; margin-top: 2px; font-size: 12.5px; color: #71717a; }
.profil-opsional summary .panah { width: 18px; height: 18px; color: #71717a; transition: transform .2s; }
.profil-opsional[open] summary .panah { transform: rotate(180deg); }
.profil-opsional[open] .profil-data { margin-top: 12px; }
.profil-opsional-ket { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: #71717a; }

/* Catat kas: Foto struk & Impor mutasi jadi pilihan ringkas satu baris,
   supaya kolom Nominal (cara yang paling sering dipakai) terlihat lebih dulu. */
.kas-cepat-kartu { padding: 10px 12px; border-radius: 16px; gap: 8px; }
.kas-cepat-kartu small { display: none; }
.kas-cepat-ikon { width: 32px; height: 32px; border-radius: 11px; }
.kas-cepat-ikon svg { width: 16px; height: 16px; }
/* Kebutuhan Pokok: kartu "belum dibayar" jelas bisa diketuk. */
.cek-pokok-kepala b::after { content: "›"; margin-left: 8px; font-size: 18px; line-height: 1; color: #d4d4d8; font-weight: 600; }
.cek-pokok-item.buka .cek-pokok-kepala b::after { content: "⌄"; }


/* =====================================================================
   UKURAN MINIMUM UNTUK KELAS TAILWIND ARBITRER
   Teks di bawah 12px sulit dibaca pengguna 50+; kelas lama tetap dipakai
   di HTML/JS, ukurannya dinaikkan di sini.
   ===================================================================== */
.text-\[9px\], .text-\[10px\], .text-\[10\.5px\], .text-\[11px\], .text-\[12px\] { font-size: 12px !important; }
.text-\[11\.5px\] { font-size: 12.5px !important; }
.text-zinc-400 { color: #71717a; }

/* =====================================================================
   TEKS BESAR (Pengaturan -> Teks besar, class html.teks-besar)
   Kelas Tailwind berbasis rem ikut membesar lewat ukuran dasar html;
   aturan berbasis px di bawah ini DIBUAT OTOMATIS (x1,15) dari semua
   font-size di file ini. Kalau menambah font-size baru, tambahkan juga
   versinya di sini atau jalankan ulang skrip pembuatnya.
   ===================================================================== */
html.teks-besar { font-size: 112.5%; }
html.teks-besar .text-\[9px\], html.teks-besar .text-\[10px\], html.teks-besar .text-\[10\.5px\], html.teks-besar .text-\[11px\], html.teks-besar .text-\[12px\] { font-size: 14px !important; }
html.teks-besar .text-\[11\.5px\] { font-size: 14.5px !important; }
html.teks-besar .home-expense-label { font-size: 14px; }
html.teks-besar .home-expense-value { font-size: 28.5px; }
html.teks-besar .home-expense-caption { font-size: 14px; }
html.teks-besar .home-expense-scope { font-size: 14px; }
html.teks-besar .an-accordion-title > span { font-size: 16px; }
html.teks-besar .an-accordion-title > small { font-size: 14px; }
html.teks-besar .ui-nyaman .home-expense-label, html.teks-besar .ui-nyaman .an-accordion-title > span { font-size: 17px; }
html.teks-besar .ui-nyaman .home-expense-caption, html.teks-besar .ui-nyaman .home-expense-scope, html.teks-besar .ui-nyaman .an-accordion-title > small { font-size: 15px; }
html.teks-besar .stat-label { font-size: 14px; }
html.teks-besar .stat-sub { font-size: 14px; }
@media (max-width: 380px) {
  html.teks-besar #profileForm input, html.teks-besar #profileForm select, html.teks-besar #cashflowModal input, html.teks-besar #cashflowModal select, html.teks-besar #debtModal input, html.teks-besar #debtModal select, html.teks-besar #basicNeedForm input, html.teks-besar #basicNeedForm select { font-size: 18.5px; }
}
html.teks-besar .bn-need-status { font-size: 14px; }
html.teks-besar .bn-need-tutup { font-size: 14px; }
@media (max-width: 640px) {
  html.teks-besar #profileForm input, html.teks-besar #profileForm select { font-size: 18.5px; }
}
html.teks-besar .prio-chip { font-size: 14px; }
html.teks-besar .an-tab { font-size: 14.5px; }
html.teks-besar .an-kartu-lagi { font-size: 14px; }
html.teks-besar .cf-judul { font-size: 15.5px; }
html.teks-besar .cf-meta { font-size: 14px; }
html.teks-besar .cf-nominal { font-size: 15.5px; }
html.teks-besar .doc-verdict { font-size: 14px; }
@media (max-width: 519px) {
  html.teks-besar .an-tab-bar-geser .an-tab { font-size: 14px; }
}
html.teks-besar .berita-jumlah { font-size: 14px; }
html.teks-besar .berita-chip { font-size: 15px; }
html.teks-besar .berita-label { font-size: 14px; }
html.teks-besar .berita-judul { font-size: 16.5px; }
html.teks-besar .berita-ringkas { font-size: 14.5px; }
html.teks-besar .berita-meta { font-size: 14.5px; }
html.teks-besar .janji-baris-judul { font-size: 14.5px; }
html.teks-besar .janji-baris-isi { font-size: 14.5px; }
html.teks-besar .tur-hitung { font-size: 14px; }
html.teks-besar .tur-judul { font-size: 17px; }
html.teks-besar .tur-isi { font-size: 14.5px; }
html.teks-besar .tur-lewati { font-size: 14px; }
html.teks-besar .tur-mundur, html.teks-besar .tur-lanjut { font-size: 14.5px; }
html.teks-besar .cu-jujur { font-size: 14px; }
html.teks-besar .cu-chip { font-size: 14.5px; }
html.teks-besar .cu-chip-jml { font-size: 14px; }
html.teks-besar .cu-nama { font-size: 17px; }
html.teks-besar .cu-isi { font-size: 14.5px; }
html.teks-besar .cu-fakta-label { font-size: 11px; }
html.teks-besar .cu-fakta-nilai { font-size: 14.5px; }
html.teks-besar .cu-cocok { font-size: 14.5px; }
html.teks-besar .cu-tautan { font-size: 14.5px; }
html.teks-besar .cu-waspada-kepala { font-size: 14.5px; }
html.teks-besar .cu-waspada-isi li { font-size: 14px; }
html.teks-besar .cu-waspada-kaki { font-size: 14px; }
@media (min-width: 1024px) {
  html.teks-besar { font-size: 19.5px; }
}
html.teks-besar .pn-status-btn { font-size: 15px; }
html.teks-besar .pn-grup { font-size: 14px; }
html.teks-besar .pn-hint { font-size: 14px; }
html.teks-besar .pn-kosong { font-size: 15px; }
html.teks-besar .pn-hasil-label { font-size: 14px; }
html.teks-besar .pn-hasil-judul { font-size: 22px; }
html.teks-besar .pn-hasil-baris div { font-size: 15px; }
html.teks-besar .pn-hasil-saran { font-size: 15px; }
html.teks-besar .pn-hasil-asumsi { font-size: 14px; }
html.teks-besar .pn-arahan select, html.teks-besar .pn-arahan input { font-size: 18.5px; }
html.teks-besar .kerja-lencana { font-size: 14px; }
html.teks-besar .kerja-chip { font-size: 14.5px; }
html.teks-besar .kerja-daftar { font-size: 15px; }
html.teks-besar .kerja-catatan { font-size: 14px; }
html.teks-besar .kerja-status { font-size: 14px; }
html.teks-besar .kerja-label { font-size: 14px; }
html.teks-besar .kerja-opsi { font-size: 14px; }
html.teks-besar .pasangan-judul { font-size: 15px; }
html.teks-besar .pasangan-teks { font-size: 14px; }
html.teks-besar .pasangan-peringatan { font-size: 14.5px; }
html.teks-besar .pasangan-sub { font-size: 14px; }
html.teks-besar .pasangan-input { font-size: 15px; }
html.teks-besar .pasangan-tombol, html.teks-besar .pasangan-tombol-lemah { font-size: 14px; }
html.teks-besar .pasangan-opsi { font-size: 14.5px; }
html.teks-besar .lencana-pasangan { font-size: 14px; }
@media (max-width: 639px) {
  html.teks-besar #cashHistoryModal #chSearchInput { font-size: 18.5px; }
}
html.teks-besar .lapor-tautan { font-size: 14px; }
html.teks-besar .lapor-opsi { font-size: 15px; }
html.teks-besar .tren-chip { font-size: 14px; }
html.teks-besar .tren-wawasan { font-size: 15px; }
html.teks-besar .tren-beda { font-size: 14px; }
html.teks-besar .kas-cepat-kartu b { font-size: 15px; }
html.teks-besar .kas-cepat-kartu small { font-size: 14px; }
html.teks-besar .kas-tip { font-size: 14px; }
html.teks-besar .kas-label { font-size: 14px; }
html.teks-besar .kas-jenis button { font-size: 15px; }
html.teks-besar .kas-nominal-baris span { font-size: 25.5px; }
html.teks-besar .kas-nominal-baris input { font-size: 39px; }
html.teks-besar .kas-akun button, html.teks-besar .kas-chip-baris button { font-size: 14px; }
html.teks-besar .imp-ringkas small { font-size: 14px; }
html.teks-besar .imp-ringkas b { font-size: 15px; }
html.teks-besar .imp-ket { font-size: 15px; }
html.teks-besar .imp-meta { font-size: 14px; }
html.teks-besar .imp-meta select { font-size: 14px; }
html.teks-besar .imp-nominal { font-size: 15px; }
html.teks-besar .imp-ada { font-size: 14px; }
html.teks-besar .tren-hero-label { font-size: 14px; }
html.teks-besar .tren-hero-angka { font-size: 37px; }
html.teks-besar .tren-hero-beda { font-size: 14px; }
html.teks-besar .tren-hero-bawah small { font-size: 14px; }
html.teks-besar .tren-hero-bawah b { font-size: 16px; }
html.teks-besar .tren-kpi-kartu small { font-size: 14px; }
html.teks-besar .tren-kpi-kartu b { font-size: 19.5px; }
html.teks-besar .tren-kpi-kartu > span:last-child { font-size: 14px; }
html.teks-besar .tren-kpi-cincin span { font-size: 14px; }
html.teks-besar .tren-panel-kepala h2 { font-size: 17px; }
html.teks-besar .tren-panel-kepala p { font-size: 14px; }
html.teks-besar .tren-pil { font-size: 14px; }
html.teks-besar .tren-legenda { font-size: 14px; }
html.teks-besar .tren-donat-tengah small { font-size: 14px; }
html.teks-besar .tren-donat-tengah b { font-size: 16px; }
html.teks-besar .tren-donat-baris { font-size: 14px; }
html.teks-besar .profil-avatar #profileModalAvatar { font-size: 37px; }
html.teks-besar .profil-nama { font-size: 24px; }
html.teks-besar .profil-username { font-size: 15px; }
html.teks-besar .profil-kontak { font-size: 14px; }
html.teks-besar .profil-mode { font-size: 14px; }
html.teks-besar .profil-lengkap b { font-size: 16px; }
html.teks-besar .profil-lengkap p { font-size: 14.5px; }
html.teks-besar .profil-cincin span { font-size: 14px; }
html.teks-besar .profil-tombol-kecil { font-size: 14px; }
html.teks-besar .profil-judul-grup { font-size: 14px; }
html.teks-besar .profil-data dt { font-size: 15px; }
html.teks-besar .profil-data dd { font-size: 15px; }
html.teks-besar .profil-menu > button, html.teks-besar .profil-menu > a { font-size: 16px; }
html.teks-besar .profil-versi { font-size: 14px; }
html.teks-besar .kas-akun-tombol { font-size: 16px; }
html.teks-besar .kas-akun-tombol .ganti { font-size: 14px; }
html.teks-besar .akun-grup { font-size: 14px; }
html.teks-besar .akun-baris { font-size: 16px; }
html.teks-besar .cepat-baris input { font-size: 16px; }
html.teks-besar .cepat-pratinjau { font-size: 14px; }
html.teks-besar .cepat-pratinjau b { font-size: 16px; }
html.teks-besar .cepat-pratinjau .cepat-banyak small { font-size: 14px; }
html.teks-besar .cepat-favorit .label { font-size: 14px; }
html.teks-besar .cepat-favorit button { font-size: 14px; }
html.teks-besar .mulai-impor b { font-size: 16px; }
html.teks-besar .mulai-impor p { font-size: 14.5px; }
html.teks-besar .mulai-impor button { font-size: 14px; }
html.teks-besar .saldo-baris { font-size: 15px; }
html.teks-besar .saldo-isi { font-size: 14px; }
html.teks-besar .saldo-total small { font-size: 14px; }
html.teks-besar .saldo-total b { font-size: 25.5px; }
html.teks-besar .saldo-kosong { font-size: 14px; }
html.teks-besar .mcs-toast { font-size: 15px; }
html.teks-besar .blokir-info b { font-size: 15px; }
html.teks-besar .blokir-info ul { font-size: 14.5px; }
html.teks-besar .blokir-avatar { font-size: 20.5px; }
html.teks-besar .blokir-label { font-size: 14px; }
html.teks-besar .blokir-buka { font-size: 14px; }
html.teks-besar .blokir-kosong b { font-size: 16px; }
html.teks-besar .blokir-kosong p { font-size: 14px; }
html.teks-besar .tagihan-kategori b { font-size: 14.5px; }
html.teks-besar .tagihan-kategori small { font-size: 14px; }
html.teks-besar .tagihan-jadwal summary b { font-size: 15px; }
html.teks-besar .tagihan-jadwal summary small { font-size: 14px; }
html.teks-besar .buku-atas-judul { font-size: 14px; }
html.teks-besar .buku-status { font-size: 16px; }
html.teks-besar .buku-pil { font-size: 14px; }
html.teks-besar .buku-sampul-isi h2 { font-size: 25.5px; }
html.teks-besar .buku-meta { font-size: 14.5px; }
html.teks-besar .buku-ringkas { font-size: 17px; }
html.teks-besar .buku-petunjuk { font-size: 14px; }
html.teks-besar .buku-kepala-hal { font-size: 14px; }
html.teks-besar .buku-teks { font-size: 19px; }
html.teks-besar .buku-halaman.penutup b { font-size: 23px; }
html.teks-besar .buku-halaman.penutup p { font-size: 15px; }
html.teks-besar .buku-tombol { font-size: 15px; }
html.teks-besar .buku-nomor-kaki { font-size: 14px; }
@media (max-height: 640px) {
  html.teks-besar .buku-teks { font-size: 17px; }
}
html.teks-besar .cepat-jatah { font-size: 14px; }
html.teks-besar .kas-jatah { font-size: 14px; }
html.teks-besar .jatah-baris b { font-size: 15px; }
html.teks-besar .jatah-baris small { font-size: 14px; }
html.teks-besar .jatah-baris .tabular-nums { font-size: 14px; }
html.teks-besar .jatah-kode { font-size: 14px; }
html.teks-besar .jatah-dukung { font-size: 15px; }
html.teks-besar .saldo-kartu .saldo-catatan { font-size: 14px; }
html.teks-besar .saldo-baris .nama small { font-size: 14px; }
html.teks-besar .saldo-ringkas, html.teks-besar .cocok-rincian { font-size: 14px; }
html.teks-besar .cocok-selisih { font-size: 14px; }
html.teks-besar .cocok-selisih b { font-size: 16px; }
html.teks-besar .cocok-rincian .cocok-catatan { font-size: 14px; }
html.teks-besar .rk-bulan-label { font-size: 17px; }
html.teks-besar .rk-hero > span { font-size: 14px; }
html.teks-besar .rk-hero > b { font-size: 32px; }
html.teks-besar .rk-hero-dua small { font-size: 14px; }
html.teks-besar .rk-hero-dua strong { font-size: 16px; }
html.teks-besar .rk-judul h2 { font-size: 16px; }
html.teks-besar .rk-judul button { font-size: 14px; }
html.teks-besar .rk-saldo-nama { font-size: 14px; }
html.teks-besar .rk-saldo-kartu b { font-size: 17px; }
html.teks-besar .rk-saldo-kartu small { font-size: 14px; }
html.teks-besar .rk-saldo-kosong span { font-size: 14px; }
html.teks-besar .rk-saldo-kosong b { font-size: 15px; }
html.teks-besar .rk-segmen .ch-filter-btn { font-size: 15px; }
html.teks-besar .rk-chip { font-size: 14px; }
html.teks-besar .rk-cari input { font-size: 18.5px; }
html.teks-besar .rk-hari { font-size: 14px; }
html.teks-besar .rk-hari-total { font-size: 14px; }
html.teks-besar .rk-kosong p { font-size: 16px; }
html.teks-besar .rk-kosong small { font-size: 14px; }
@media (min-width: 1024px) {
  html.teks-besar .rk-hero > b { font-size: 39px; }
  html.teks-besar .rk-hari { font-size: 15px; }
  html.teks-besar .rk-hari-total { font-size: 14px; }
}
html.teks-besar .cf-bocor { font-size: 14px; }
html.teks-besar .cf-selisih { font-size: 14px; }
html.teks-besar .rk-bocor { font-size: 14.5px; }
html.teks-besar .cocok-ingat { font-size: 15px; }
html.teks-besar .bocor-pengingat b { font-size: 15px; }
html.teks-besar .bocor-pengingat p { font-size: 14px; }
html.teks-besar .bocor-aksi button { font-size: 14px; }
html.teks-besar .ci-hero > span { font-size: 14px; }
html.teks-besar .ci-hero > b { font-size: 34.5px; }
html.teks-besar .ci-hero > p { font-size: 14px; }
html.teks-besar .ci-banding { font-size: 14px; }
html.teks-besar .ci-banding b { font-size: 16px; }
html.teks-besar .ci-bagian-judul { font-size: 15px; }
html.teks-besar .ci-bagian-judul em { font-size: 14px; }
html.teks-besar .ci-tgl small { font-size: 14px; }
html.teks-besar .ci-tgl b { font-size: 27.5px; }
html.teks-besar .ci-atas b { font-size: 16px; }
html.teks-besar .ci-meta { font-size: 14.5px; }
html.teks-besar .ci-sebagian { font-size: 14px; }
html.teks-besar .ci-kanan strong { font-size: 17px; }
html.teks-besar .ci-kanan small { font-size: 14px; }
html.teks-besar .ci-bayar { font-size: 14px; }
@media (min-width: 1024px) {
  html.teks-besar .ci-hero > b { font-size: 41.5px; }
}
html.teks-besar .ci-gajian > span { font-size: 15px; }
html.teks-besar .ci-gajian select { font-size: 15px; }
html.teks-besar .ci-gajian small { font-size: 14px; }
html.teks-besar .tipe-tagihan button b { font-size: 15px; }
html.teks-besar .tipe-tagihan button small { font-size: 14px; }
html.teks-besar .ci-label { font-size: 14px; }
html.teks-besar .ci-tunda { font-size: 14.5px; }
html.teks-besar .tunda-opsi b { font-size: 15.5px; }
html.teks-besar .tunda-opsi small { font-size: 14.5px; }
html.teks-besar .rencana-judul { font-size: 14px; }
html.teks-besar .rencana-baris { font-size: 15px; }
html.teks-besar .rencana-catatan { font-size: 14px; }
html.teks-besar .rencana-aksi { font-size: 15px; }
html.teks-besar .tujuan-judul { font-size: 14px; }
html.teks-besar .tujuan-judul button { font-size: 14px; }
html.teks-besar .tujuan-atas { font-size: 15px; }
html.teks-besar .tujuan-bawah { font-size: 14px; }
html.teks-besar .tujuan-saran { font-size: 14px; }
html.teks-besar .tg-grup-kepala { font-size: 14px; }
html.teks-besar .tg-grup-jumlah { font-size: 14px; }
html.teks-besar .tg-grup-total { font-size: 14px; }
html.teks-besar .tg-nama { font-size: 16px; }
html.teks-besar .tg-meta { font-size: 14px; }
html.teks-besar .tg-sisa { font-size: 15.5px; }
html.teks-besar .tg-status { font-size: 14px; }
html.teks-besar .tg-aksi-kepala b { font-size: 18.5px; }
html.teks-besar .tg-aksi-kepala small { font-size: 14px; }
html.teks-besar .tg-aksi-info dt { font-size: 14px; }
html.teks-besar .tg-aksi-info dd { font-size: 15px; }
html.teks-besar .tg-aksi-utama { font-size: 16px; }
html.teks-besar .tg-aksi-label { font-size: 14px; }
html.teks-besar .tg-prio-pilih button { font-size: 14px; }
html.teks-besar .tg-aksi-baris button { font-size: 14px; }
html.teks-besar .tg-aksi-catatan { font-size: 14px; }
html.teks-besar .rencana-ubin small { font-size: 14px; }
html.teks-besar .rencana-ubin b { font-size: 18.5px; }
html.teks-besar .rencana-ubin span { font-size: 14px; }
html.teks-besar .rencana-saran summary { font-size: 14px; }
html.teks-besar .tg-detail-judul { font-size: 16px; }
html.teks-besar .tg-detail-judul::after { font-size: 20.5px; }
html.teks-besar .tg-ringkas-chip { font-size: 14px; }
html.teks-besar .an-ke-mapping { font-size: 14.5px; }
html.teks-besar .tg-lihat-semua { font-size: 15px; }
html.teks-besar .tg-panah { font-size: 23px; }
html.teks-besar .tg-status, html.teks-besar .tg-grup-total, html.teks-besar .tg-ringkas-chip, html.teks-besar .rencana-ubin small { font-size: 14px; }
html.teks-besar .rencana-ubin span { font-size: 14.5px; }
html.teks-besar .ui-nyaman .tg-nama { font-size: 18.5px; }
html.teks-besar .ui-nyaman .tg-meta { font-size: 16px; }
html.teks-besar .ui-nyaman .tg-sisa { font-size: 18.5px; }
html.teks-besar .ui-nyaman .tg-status { font-size: 15.5px; }
html.teks-besar .ui-nyaman .tg-grup-kepala { font-size: 16px; }
html.teks-besar .ui-nyaman .tg-grup-total, html.teks-besar .ui-nyaman .tg-ringkas-chip { font-size: 15.5px; }
html.teks-besar .ui-nyaman .tg-lihat-semua, html.teks-besar .ui-nyaman .tg-aksi-utama { font-size: 18.5px; }
html.teks-besar .ui-nyaman .tg-prio-pilih button, html.teks-besar .ui-nyaman .tg-aksi-baris button { font-size: 16px; }
html.teks-besar .ui-nyaman .tg-aksi-kepala b { font-size: 20.5px; }
html.teks-besar .ui-nyaman .tg-aksi-info dt { font-size: 15px; }
html.teks-besar .ui-nyaman .tg-aksi-info dd { font-size: 18px; }
html.teks-besar .ui-nyaman .rencana-ubin small { font-size: 16px; }
html.teks-besar .ui-nyaman .rencana-ubin b { font-size: 22px; }
html.teks-besar .ui-nyaman .rencana-ubin span { font-size: 16px; }
html.teks-besar .ui-nyaman .rencana-catatan { font-size: 16.5px; }
html.teks-besar .ui-nyaman .rencana-saran summary { font-size: 16.5px; }
html.teks-besar .ui-nyaman .an-ke-mapping { font-size: 17px; }
html.teks-besar .r53-judul { font-size: 15px; }
html.teks-besar .r53-judul small { font-size: 14px; }
html.teks-besar .r53-nama { font-size: 15px; }
html.teks-besar .r53-nama small { font-size: 14px; }
html.teks-besar .r53-angka b { font-size: 17px; }
html.teks-besar .r53-angka small { font-size: 14px; }
html.teks-besar .r53-catatan { font-size: 14px; }
html.teks-besar .ui-nyaman .r53-nama, html.teks-besar .ui-nyaman .r53-judul { font-size: 17px; }
html.teks-besar .ui-nyaman .r53-angka b { font-size: 20.5px; }
html.teks-besar .ui-nyaman .r53-nama small, html.teks-besar .ui-nyaman .r53-angka small, html.teks-besar .ui-nyaman .r53-catatan { font-size: 15.5px; }
html.teks-besar .tg-ringkas-baris .tg-ringkas-chip { font-size: 14.5px; }
html.teks-besar .ui-nyaman .tg-ringkas-baris .tg-ringkas-chip { font-size: 15.5px; }
html.teks-besar .wajib-update-isi h2 { font-size: 25.5px; }
html.teks-besar .wajib-update-isi p { font-size: 17px; }
html.teks-besar .wajib-update-isi button { font-size: 18.5px; }
html.teks-besar .wajib-update-isi small { font-size: 15px; }
html.teks-besar .hadiah-satuan { font-size: 15px; }
html.teks-besar .hadiah-kartu p { font-size: 16px; }
html.teks-besar .hadiah-pakai { font-size: 18.5px; }
html.teks-besar .hadiah-nanti { font-size: 15px; }
html.teks-besar .pokok-belum { font-size: 14px; }
html.teks-besar .pokok-belum button { font-size: 14px; }
html.teks-besar .cek-pokok-kepala span { font-size: 16px; }
html.teks-besar .cek-pokok-kepala small, html.teks-besar .cek-pokok-kandidat small { font-size: 14px; }
html.teks-besar .cek-pokok-kepala b { font-size: 14px; }
html.teks-besar .cek-pokok-tanya { font-size: 15px; }
html.teks-besar .cek-pokok-pilih { font-size: 15px; }
html.teks-besar .cek-pokok-kembali { font-size: 14px; }
html.teks-besar .cek-pokok-kandidat { font-size: 15px; }
html.teks-besar .cek-pokok-kosong, html.teks-besar .cek-pokok-catatan { font-size: 14px; }
html.teks-besar .cek-pokok-chip button { font-size: 15px; }
html.teks-besar .cek-pokok-jadwal select, html.teks-besar .cek-pokok-jadwal input { font-size: 15px; }
html.teks-besar .cek-pokok-jadwal label { font-size: 14px; }
html.teks-besar .cek-pokok-beres { font-size: 15px; }
html.teks-besar .saldo-total span { font-size: 14px; }
html.teks-besar .saldo-baris .nama small { font-size: 14px; }
html.teks-besar .saldo-lain summary { font-size: 14px; }
html.teks-besar .saldo-utang > b { font-size: 15px; }
html.teks-besar .saldo-utang p { font-size: 14px; }
html.teks-besar .saldo-utang-baris { font-size: 15px; }
html.teks-besar .saldo-utang-baris button { font-size: 14px; }
html.teks-besar .saldo-utang-baris small.ada { font-size: 14px; }
html.teks-besar .cocok-tanya { font-size: 14px; }
html.teks-besar .cocok-catatan-baris { font-size: 14px; }
html.teks-besar .cocok-catatan-baris small { font-size: 14px; }
html.teks-besar .rk-tampilan button { font-size: 15px; }
html.teks-besar .rk-harian-kepala { font-size: 14px; }
html.teks-besar .rk-harian-baris { font-size: 15px; }
html.teks-besar .rk-harian-baris .tgl small { font-size: 14px; }
html.teks-besar .rk-harian-kosong { font-size: 15px; }
html.teks-besar .hari-ini-label { font-size: 14px; }
html.teks-besar .hari-ini-angka { font-size: 41.5px; }
html.teks-besar .hari-ini-angka.kecil { font-size: 27.5px; }
html.teks-besar .hari-ini-sub { font-size: 15px; }
html.teks-besar .hari-ini > button { font-size: 15px; }
html.teks-besar .hari-ini-rinci span { font-size: 14px; }
html.teks-besar .hari-ini-rinci b { font-size: 15px; }
html.teks-besar .hari-ini-tugas h3 { font-size: 15px; }
html.teks-besar .hari-ini-tugas-baris span { font-size: 15px; }
html.teks-besar .hari-ini-tugas-baris small { font-size: 14px; }
html.teks-besar .penguji-kartu b { font-size: 15px; }
html.teks-besar .penguji-kartu span { font-size: 14px; }
html.teks-besar .penguji-kartu button { font-size: 14px; }
html.teks-besar .masukan-nilai button { font-size: 25.5px; }
html.teks-besar .masukan-nilai button small { font-size: 14px; }
html.teks-besar .hari-ini-aman { font-size: 14px; }
html.teks-besar .hari-ini-catatan { font-size: 14px; }
html.teks-besar .tunda-pengantar { font-size: 14px; }
@media (max-width: 340px) {
  html.teks-besar #catatCepatInput::placeholder { font-size: 15px; }
}
html.teks-besar .ditagih-tombol b { font-size: 16px; }
html.teks-besar .ditagih-tombol small { font-size: 14.5px; }
html.teks-besar .ditagih-isi h4 { font-size: 15px; }
html.teks-besar .ditagih-isi ul { font-size: 15px; }
html.teks-besar .ditagih-isi blockquote { font-size: 15px; }
html.teks-besar .ditagih-salin { font-size: 14px; }
html.teks-besar .ditagih-aksi a, html.teks-besar .ditagih-aksi button { font-size: 14.5px; }
html.teks-besar .ditagih-catatan { font-size: 14.5px; }
html.teks-besar .kemajuan-kepala { font-size: 14px; }
html.teks-besar .kemajuan-angka { font-size: 27.5px; }
html.teks-besar .kemajuan-sub { font-size: 14px; }
html.teks-besar .kemajuan-batang small { font-size: 14px; }
html.teks-besar .sapaan p { font-size: 15px; }
html.teks-besar .sapaan > div > button { font-size: 14px; }
html.teks-besar .masa-sulit-pilih b { font-size: 16px; }
html.teks-besar .masa-sulit-pilih small { font-size: 14px; }
html.teks-besar .masa-sulit-pilih .biasa { font-size: 15px; }
html.teks-besar .amplop-pengantar { font-size: 15px; }
html.teks-besar .amplop-baris b { font-size: 16px; }
html.teks-besar .amplop-baris small { font-size: 14.5px; }
html.teks-besar .amplop-catatan { font-size: 14.5px; }
html.teks-besar .amplop-ok { font-size: 16px; }
html.teks-besar .catat-email-pengantar { font-size: 15px; }
html.teks-besar .catat-email-alamat code { font-size: 15px; }
html.teks-besar .catat-email-alamat button, html.teks-besar .catat-email-aksi button { font-size: 14px; }
html.teks-besar .catat-email-verif b { font-size: 14px; }
html.teks-besar .catat-email-verif code { font-size: 25.5px; }
html.teks-besar .catat-email-konfirmasi { font-size: 15.5px; }
html.teks-besar .catat-email-verif small { font-size: 14.5px; }
html.teks-besar .catat-email-langkah { font-size: 14.5px; }
html.teks-besar .catat-email-langkah code { font-size: 14px; }
html.teks-besar .catat-email-catatan { font-size: 14.5px; }
html.teks-besar .catat-email-salin { font-size: 16px; }
html.teks-besar .catat-email-terakhir { font-size: 14.5px; }
html.teks-besar .ce-tab button { font-size: 15px; }
html.teks-besar .ce-sub { font-size: 14.5px; }
html.teks-besar .ce-komputer { font-size: 14.5px; }
html.teks-besar .ce-langkah-kepala span { font-size: 14px; }
html.teks-besar .ce-langkah-kepala b { font-size: 15.5px; }
html.teks-besar .ce-langkah-isi { font-size: 14.5px; }
html.teks-besar .ce-utama { font-size: 15.5px; }
html.teks-besar .ce-lanjut { font-size: 15px; }
html.teks-besar .ce-cadangan summary { font-size: 14px; }
html.teks-besar .ce-cadangan p { font-size: 14.5px; }
html.teks-besar .ce-matikan { font-size: 14px; }
html.teks-besar .ce-mati b { font-size: 16px; }
html.teks-besar .ce-mati p { font-size: 14.5px; }
html.teks-besar .ce-hapus { font-size: 14.5px; }
html.teks-besar .ce-kembali { font-size: 14px; }
html.teks-besar .ce-kode code { font-size: 25.5px; }
html.teks-besar .ce-kode button { font-size: 14px; }
html.teks-besar .ce-beres b { font-size: 16px; }
html.teks-besar .ce-beres p { font-size: 14.5px; }
html.teks-besar .ce-beres button { font-size: 14px; }
html.teks-besar .catat-email-judul { font-size: 15px; }
html.teks-besar .catat-email-mudah li { font-size: 15px; }
html.teks-besar .catat-email-mudah li span { font-size: 14px; }
html.teks-besar .catat-email-lanjut summary { font-size: 14.5px; }
html.teks-besar .catat-email-lanjut > p { font-size: 14px; }
html.teks-besar .draf-email-atas b { font-size: 16px; }
html.teks-besar .draf-email-atas small { font-size: 14.5px; }
html.teks-besar .draf-email-aksi button { font-size: 15px; }
html.teks-besar .hari-ini-rinci > button { font-size: 14px; }
html.teks-besar .hari-ini-rinci > button b { font-size: 15px; }
html.teks-besar .bulan-ini-kepala span, html.teks-besar .tagihan-ringkas-kepala span { font-size: 16px; }
html.teks-besar .bulan-ini-kepala small { font-size: 14.5px; }
html.teks-besar .bulan-ini-angka small { font-size: 14.5px; }
html.teks-besar .bulan-ini-angka b { font-size: 20.5px; }
html.teks-besar .bulan-ini-bawah { font-size: 14px; }
html.teks-besar .bulan-ini-bawah button { font-size: 14px; }
html.teks-besar .bulan-ini-catatan { font-size: 14.5px; }
html.teks-besar .tagihan-ringkas-kepala button { font-size: 14.5px; }
html.teks-besar .tagihan-ringkas-label { font-size: 14px; }
html.teks-besar .tagihan-ringkas-angka { font-size: 25.5px; }
html.teks-besar .tagihan-ringkas-angka.beres { font-size: 20.5px; }
html.teks-besar .tagihan-ringkas-sub { font-size: 14.5px; }
html.teks-besar .tagihan-ringkas-kemajuan { font-size: 14.5px; }
html.teks-besar .tagihan-ringkas-ditagih { font-size: 14.5px; }
html.teks-besar #homeKolom #riwayatKasCard > div:first-child h3 { font-size: 16px; }
html.teks-besar .hari-ini-per { font-size: 17px; }
html.teks-besar .hari-ini-peringatan { font-size: 14px; }
html.teks-besar .hari-ini-peringatan button { font-size: 14px; }
html.teks-besar .pokok-home-kepala span { font-size: 16px; }
html.teks-besar .pokok-home-kepala button { font-size: 14.5px; }
html.teks-besar .pokok-home-angka { font-size: 23px; }
html.teks-besar .pokok-home-angka small { font-size: 14px; }
html.teks-besar .pokok-home-belum li { font-size: 15px; }
html.teks-besar .pokok-home-ajak { font-size: 15px; }
html.teks-besar .pokok-home-utama { font-size: 15px; }
html.teks-besar .pokok-home-beres { font-size: 15px; }
html.teks-besar .akses-ubin-label { font-size: 14.5px; }
html.teks-besar .buku-catatan-fiksi { font-size: 14px; }
html.teks-besar .kisah-baru { font-size: 14px; }
html.teks-besar .kisah-judul { font-size: 15.5px; }
html.teks-besar .kisah-orang { font-size: 14px; }
html.teks-besar .kisah-baca { font-size: 14.5px; }
html.teks-besar .profil-opsional summary b { font-size: 16px; }
html.teks-besar .profil-opsional summary small { font-size: 14.5px; }
html.teks-besar .profil-opsional-ket { font-size: 14.5px; }
html.teks-besar .cek-pokok-kepala b::after { font-size: 20.5px; }

/* Ikon header berlabel (Kabar, Profil) */
.ikon-berlabel { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ikon-berlabel > small { font-size: 11px; font-weight: 600; line-height: 1; color: #52525b; }
.ikon-berlabel #userPhoto { display: block; }
.ikon-berlabel #userPhotoKosong { display: flex; }
.ikon-berlabel #userPhoto.hidden, .ikon-berlabel #userPhotoKosong.hidden { display: none; }
html.teks-besar .ikon-berlabel > small { font-size: 12.5px; }
/* Petunjuk geser di Akses Cepat */
.akses-geser { display: block; width: 100%; text-align: center; margin-top: 2px; font-size: 12px; font-weight: 600; color: #71717a; }
html.teks-besar .akses-geser { font-size: 14px; }
/* Teks besar di layar sangat sempit: tab jenis transaksi tanpa ikon
   supaya ketiga label tetap muat. */
@media (max-width: 380px) {
  html.teks-besar .kas-jenis button svg, html.teks-besar .kas-jenis button i { display: none; }
  html.teks-besar .kas-jenis button { padding-left: 4px; padding-right: 4px; }
}
/* Teks besar: rincian kartu Aman dipakai bersusun (label kiri, angka
   kanan) supaya angka tidak terpatah ke dua baris. */
html.teks-besar .hari-ini-rinci { grid-template-columns: 1fr; gap: 6px; }
html.teks-besar .hari-ini-rinci > button { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
html.teks-besar .hari-ini-rinci > button b, html.teks-besar .hari-ini-rinci b { margin-top: 0; white-space: nowrap; overflow-wrap: normal; }
html.teks-besar .hari-ini .hari-ini-label { padding-right: 124px; }
/* Teks besar: angka utama sudah besar, jadi tidak ikut membesar; badge
   Terenkripsi cukup ikon kunci supaya tidak menabrak judul. */
html.teks-besar .hari-ini-angka { font-size: 36px; }
html.teks-besar .hari-ini-aman { font-size: 0; gap: 0; padding: 6px; }
html.teks-besar .hari-ini-aman svg { width: 14px; height: 14px; }
html.teks-besar .hari-ini .hari-ini-label { padding-right: 40px; }
@media (max-width: 360px) { html.teks-besar .hari-ini-angka { font-size: 32px; } }
/* Judul & keterangan tugas boleh turun baris (tidak dikecilkan). */
html.teks-besar .hari-ini-tugas-baris b, html.teks-besar .hari-ini-tugas-baris small { white-space: normal; }
/* Label nav bawah tetap muat lima menu di layar 320px. */
html.teks-besar #mobileNavbar .text-\[10px\] { font-size: 12.5px !important; }
/* Ikon ubin tidak boleh gepeng; dengan Teks besar ubin mengikuti isinya. */
.akses-ubin-ikon { flex-shrink: 0; }
html.teks-besar .akses-ubin { aspect-ratio: auto; min-height: 108px; gap: 8px; }
html.teks-besar .pokok-home-kepala button { white-space: nowrap; }

/* Banner notifikasi mati di halaman Pesan */
.pesan-notif-banner { max-width: 42rem; margin: 10px auto 0; padding: 10px 12px; display: flex; align-items: center; gap: 10px; border-radius: 14px; background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; font-size: 13px; font-weight: 600; }
.pesan-notif-banner.hidden { display: none; }
.pesan-notif-banner span { flex: 1; min-width: 0; }
.pesan-notif-banner button { flex: none; padding: 7px 12px; border-radius: 999px; background: #9a3412; color: #fff; font-size: 12.5px; font-weight: 700; }
@media (max-width: 420px) { .pesan-notif-banner { margin-left: 16px; margin-right: 16px; } }

/* Catat email: daftar centang kemajuan penerusan Gmail */
.ce-status { list-style: none; margin: 0 0 12px; padding: 12px 14px; border-radius: 16px; background: #fafafa; border: 1px solid #ececef; display: grid; gap: 8px; }
.ce-status li { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: #71717a; }
.ce-status li span { flex: none; width: 22px; height: 22px; border-radius: 999px; border: 2px solid #d4d4d8; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
.ce-status li.ok { color: #065f46; }
.ce-status li.ok span { background: #059669; border-color: #059669; color: #fff; }

/* Penjelasan jatah harian (Home > Kenapa angkanya segini?) */
.jh { text-align: left; color: #3f3f46; font-size: 13px; }
.jh-baris { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; }
.jh-baris b { white-space: nowrap; color: #18181b; font-weight: 600; }
.jh-garis { border-top: 1px solid #e4e4e7; margin-top: 4px; padding-top: 8px; }
.jh-hasil { background: #ecfdf5; border-radius: 10px; padding: 8px 10px; margin-top: 4px; }
.jh-hasil span, .jh-hasil b { color: #047857; font-weight: 700; }
.jh-catatan { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: #fffbeb; color: #92400e; }
.jh-judul { margin-top: 12px; font-weight: 700; color: #18181b; }
.jh ul { margin-top: 4px; padding-left: 18px; list-style: disc; }
.jh li { margin: 3px 0; }
html.teks-besar .jh { font-size: 15px; }

/* Ngobrol pakai suara di chat MyCashShield AI */
#chatThreadModal:not([data-thread-kind="ai"]) #chatSuaraTombol, #chatThreadModal:not([data-thread-kind="ai"]) #chatSuaraBaca { display: none !important; }
.chat-suara-tombol.merekam { background: #e11d48; color: #fff; animation: chat-suara-denyut 1.2s ease-in-out infinite; }
@keyframes chat-suara-denyut { 0%, 100% { box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.45); } 50% { box-shadow: 0 0 0 8px rgba(225, 29, 72, 0); } }
.chat-suara-baca { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding: 8px 8px 8px 12px; border-radius: 14px; background: #ecfdf5; color: #047857; font-size: 12.5px; font-weight: 600; }
.chat-suara-baca.hidden { display: none; }
.chat-suara-baca span { flex: 1; min-width: 0; }
.chat-suara-baca button { padding: 6px 12px; border-radius: 999px; background: #fff; color: #047857; font-size: 12px; font-weight: 700; border: 1px solid #a7f3d0; }
@media (prefers-reduced-motion: reduce) { .chat-suara-tombol.merekam { animation: none; } }

/* Mulai 1 menit (bukaMulaiSatuMenit): tiga langkah pendek untuk pengguna baru. */
.mulai-langkah { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #e11d48; }
.mulai-judul { font-family: var(--font-display, inherit); font-weight: 700; font-size: 1.15rem; line-height: 1.3; color: #18181b; margin: 4px 0 4px; }
.mulai-sub { font-size: 13px; line-height: 1.5; color: #71717a; margin: 0 0 12px; }
.mulai-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.mulai-chip { padding: 9px 14px; border-radius: 999px; border: 1px solid #e4e4e7; background: #fff; font-size: 13px; font-weight: 600; color: #3f3f46; min-height: 40px; }
.mulai-chip.dipilih { border-color: #e11d48; background: #fff1f2; color: #be123c; box-shadow: 0 0 0 2px rgba(225, 29, 72, 0.15); }
.mulai-angka { width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid #e4e4e7; background: #fff; font-size: 1.35rem; font-weight: 800; margin: 4px 0 14px; }
.mulai-utama { width: 100%; padding: 14px; border-radius: 14px; background: #e11d48; color: #fff; font-weight: 700; font-size: 14px; }
.mulai-lewati { width: 100%; padding: 10px; margin-top: 4px; font-size: 13px; font-weight: 600; color: #71717a; }
.mulai-hasil { display: flex; flex-direction: column; gap: 2px; padding: 18px; border-radius: 20px; background: linear-gradient(135deg, #16a34a, #15803d); color: #fff; margin: 6px 0 12px; }
.mulai-hasil span { font-size: 12px; font-weight: 600; opacity: 0.9; }
.mulai-hasil b { font-size: 1.8rem; font-weight: 800; }
.mulai-hasil small { font-size: 0.9rem; font-weight: 600; opacity: 0.85; margin-left: 2px; }