:root{
    /* Radius kartu/tombol/chip di seluruh app. Variabel ini dipanggil di 118 tempat
       tapi tidak pernah didefinisikan di :root manapun (harusnya datang dari
       css/cips-accessibility-foundation.css yang hilang dari build), sehingga
       browser fallback ke 0px (sudut tajam/lancip) di semua kartu. */
    --cips-radius-sm: 10px;
    --cips-radius-md: 14px;
    --cips-radius-lg: 20px;
    --bg: #020203;
    --surface-1: #181B24;
    --surface-2: #20242F;
    --hairline: #2B303C;
    --text-primary: #F1F3F9;
    --text-muted: #A3ACC0;
    --text-shadow-ambient: rgba(0,0,0,0.4);
    --habit: #96FFBE;
    --habit-dim: rgba(150,255,190,0.20);
    --ibadah: #FFD68C;
    --ibadah-dim: rgba(255,214,140,0.20);
    --kesehatan: #82CDFF;
    --kesehatan-dim: rgba(130,205,255,0.20);
    --financial: #FFAA78;
    --financial-dim: rgba(255,170,120,0.20);
    --settings: #C3A6FF;
    --settings-dim: rgba(195,166,255,0.20);
    --danger: #FF5C5C;
    --danger-dim: rgba(255,92,92,0.20);
    --warning: #E0A100;
    --warning-dim: rgba(224,161,0,0.08);
    /* Token warna TEKS terpisah dari warna aksen dasar (item #9 — audit kontras
       WCAG AA). Di tema gelap nilainya identik dengan warna aksen (tidak ada
       perubahan visual). Warna aksen dasar (--habit dkk) tetap dipakai apa
       adanya untuk background/border/glow/ikon dekoratif yang sudah punya
       kontras cukup terhadap surface gelap/terang; token -text ini KHUSUS
       dipakai di elemen yang warna aksennya jadi warna teks langsung, karena
       versi pastel aslinya gagal kontras 4.5:1 di atas surface terang. */
    --habit-text: var(--habit);
    --ibadah-text: var(--ibadah);
    --kesehatan-text: var(--kesehatan);
    --financial-text: var(--financial);
    --settings-text: var(--settings);
    --danger-text: var(--danger);
    --warning-text: var(--warning);
    --shadow-ambient: rgba(150,255,190,0.14);
    --ease-premium: cubic-bezier(.16,1,.3,1);
    --ease-spring: cubic-bezier(.34,1.56,.64,1);
    --glass-blur: blur(18px);
    --glass-border: rgba(255,255,255,0.08);
    --glass-surface: rgba(255,255,255,0.035);
  }
  html[data-theme="light"]{
    --bg: #F5F1E8;
    --surface-1: #FFFDF9;
    --surface-2: #F1ECE0;
    --hairline: #E4DDCE;
    --text-primary: #1B1D24;
    --text-muted: #545767;
    --text-shadow-ambient: rgba(0,0,0,0);
    --shadow-ambient: rgba(150,255,190,0.10);
    /* Warna aksen pastel asli (--habit dkk) kontrasnya cuma ~1.1–2.2:1 di atas
       surface terang — jauh di bawah minimum WCAG AA 4.5:1 untuk teks. Jadi
       khusus tema terang, token -text di-override ke versi lebih gelap dari
       hue yang sama (dicek manual, kontras ~6:1 terhadap semua level surface
       terang). Warna aksen dasarnya sendiri TIDAK diubah supaya background/
       border/glow yang sudah pas tetap sama. */
    --habit-text: #006A28;
    --ibadah-text: #7E5100;
    --kesehatan-text: #005E9D;
    --financial-text: #9F3B00;
    --settings-text: #6317FF;
    --danger-text: #BB0000;
    --warning-text: #775500;
  }

  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ height:100%; overflow:hidden; touch-action:manipulation; }
  body{
    height:100%;
    width:100%;
    position:fixed;
    inset:0;
    overflow:hidden;
    overscroll-behavior:none;
    background:
      radial-gradient(circle at 20% -10%, rgba(150,255,190,0.05) 0%, transparent 45%),
      radial-gradient(circle at 90% 10%, rgba(255,170,120,0.04) 0%, transparent 40%),
      var(--bg);
    display:flex; align-items:center; justify-content:center;
    font-family:'Inter', sans-serif;
    font-weight:500;
    padding:max(env(safe-area-inset-top),16px) 16px max(env(safe-area-inset-bottom),16px);
    transition: background .25s ease;
  }
  .eyebrow, .greeting, .date{
    text-shadow: 0 1px 3px var(--text-shadow-ambient);
  }

  /* Transisi ganti tema gelap<->terang: dipakai setTheme() (app-03-navigation-onboarding.js).
     ~18 kartu/panel utama (fdash-card, fan-card, list-item, tx-row, settings-block, dkk)
     dikasih transisi background-color/border-color .25s ease, DIGABUNG ke transisi yg
     sudah ada (bukan menimpa) supaya animasi transform/box-shadow lain tetap utuh.
     Sengaja TIDAK diterapkan ke semua ~118 pemakaian var(--cips-radius-*) sekaligus --
     sempat dicoba di semua elemen barengan, tapi di device user itu kebanyakan repaint
     bersamaan bikin compositor ke-overload sampai muncul frame flash hitam/putih. */

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
  }

  .phone{
    width: 380px;
    height: 800px;
    max-height: 92vh;
    background:
      radial-gradient(circle at 14% 8%, rgba(150,255,190,0.05) 0%, transparent 32%),
      radial-gradient(circle at 88% 18%, rgba(255,214,140,0.045) 0%, transparent 30%),
      radial-gradient(circle at 80% 78%, rgba(130,205,255,0.04) 0%, transparent 34%),
      var(--bg);
    border-radius: 46px;
    border: 10px solid #05060A;
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.04),
      0 40px 80px -20px rgba(0,0,0,0.55),
      0 0 60px -10px var(--shadow-ambient);
    overflow: hidden;
    position: relative;
    transform: translateZ(0); /* jadikan .phone containing block utk position:fixed (toast dsb), biar presisi di dalam frame */
    display:flex;
    flex-direction:column;
    opacity: 1;
    transition: background .25s ease;
  }

  .toast{
    position:absolute; left:50%; bottom:110px; z-index:50;
    background: linear-gradient(160deg, rgba(32,36,47,.94) 0%, rgba(24,27,36,.96) 100%);
    -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
    border:1px solid rgba(255,255,255,.09); color:var(--text-primary);
    padding:11px 18px; border-radius:var(--cips-radius-lg); font-size:12.5px; font-weight:500; max-width:280px; text-align:center;
    transform:translate(-50%, 8px) scale(0.94); opacity:0;
    transition: transform .22s cubic-bezier(.34,1.56,.64,1), opacity .22s ease, background-color .25s ease, border-color .25s ease;
    pointer-events:none;
    box-shadow: 0 14px 30px -10px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
  }
  [data-theme="light"] .toast{
    background: linear-gradient(160deg, rgba(255,253,249,.94) 0%, rgba(241,236,224,.96) 100%);
    border-color: rgba(20,20,20,.08);
  }
  .toast.show{ transform:translate(-50%, 0) scale(1); opacity:1; }

  /* Fix QA Audit F-02 (HIGH): banner update SW -- beda dari .toast di atas,
     ini SENGAJA tidak auto-hide (versi baru tetap tersedia sampai user
     benar-benar reload), dan punya tombol aksi nyata (bukan cuma teks
     pasif) -- lihat js/app-09-main-boot.js reloadForUpdate(). */
  .update-banner{
    position:absolute; left:12px; right:12px; top:calc(env(safe-area-inset-top, 0px) + 10px); z-index:60;
    background: linear-gradient(160deg, rgba(32,36,47,.96) 0%, rgba(24,27,36,.98) 100%);
    -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
    border:1px solid rgba(255,255,255,.1); color:var(--text-primary);
    padding:12px 14px; border-radius:var(--cips-radius-lg);
    display:flex; align-items:center; gap:10px;
    transform:translateY(-14px); opacity:0; pointer-events:none;
    transition: transform .25s cubic-bezier(.34,1.56,.64,1), opacity .25s ease;
    box-shadow: 0 14px 30px -10px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  }
  .update-banner.show{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .update-banner-text{ flex:1; font-size:12.5px; font-weight:500; line-height:1.35; }
  .update-banner-btn{
    flex-shrink:0; background:var(--habit); color:#04120a; border:none; border-radius:999px;
    padding:8px 14px; font-size:12px; font-weight:700; cursor:pointer;
  }
  [data-theme="light"] .update-banner{
    background: linear-gradient(160deg, rgba(255,253,249,.96) 0%, rgba(241,236,224,.98) 100%);
    border-color: rgba(20,20,20,.09);
  }

  /* Di device mobile asli: .phone mengisi persis ukuran layar (edge-to-edge),
     bukan lagi mockup terbingkai — presisi mengikuti device, tanpa celah goyang. */
  @media (max-width: 600px){
    body{ padding:0; }
    .phone{
      width: 100vw; width: 100dvw;
      height: 100vh; height: 100dvh;
      height: var(--app-vh, 100dvh); /* dipaksa JS (app-09-main-boot.js) -- lihat forceViewportRecalc */
      max-height: 100vh; max-height: 100dvh;
      max-height: var(--app-vh, 100dvh);
      border-radius: 0;
      border: 0;
      box-shadow: none;
    }
    .notch{ display:none; } /* device asli sudah punya notch/dynamic island sendiri */
    .dock-wrap{ padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
  }
  .notch{
    position:absolute; top:10px; left:50%; transform:translateX(-50%);
    width:90px; height:22px; background:#05060A; border-radius:var(--cips-radius-lg);
    z-index:5;
  }

  .screen{
    flex:1;
    overflow-y:auto;
    overflow-x:hidden;
    overflow-anchor: none; /* cegah browser "mengunci" scroll ke elemen lama saat DOM berubah drastis (reset data / reload) */
    overscroll-behavior-y: contain;
    overscroll-behavior-x: none;
    -webkit-overflow-scrolling: touch;
    padding: calc(18px + env(safe-area-inset-top)) 20px 0;
    scrollbar-width:none;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, black calc(env(safe-area-inset-top) + 10px), black 100%);
    mask-image: linear-gradient(to bottom, transparent 0, black calc(env(safe-area-inset-top) + 10px), black 100%);
  }
  .screen::-webkit-scrollbar{ display:none; }

  .view{ display:none; }
  .view.active{ display:block; }
  .view.anim-forward{ animation: viewInForward .32s cubic-bezier(.22,.61,.36,1) both; }
  .view.anim-back{ animation: viewInBack .32s cubic-bezier(.22,.61,.36,1) both; }
  @keyframes viewInForward{ from{ opacity:0; transform:translateX(22px);} to{ opacity:1; transform:translateX(0);} }
  @keyframes viewInBack{ from{ opacity:0; transform:translateX(-22px);} to{ opacity:1; transform:translateX(0);} }
  /* ==== Premium polish: shine sweep, breathing glow, cascade entrance ==== */
  @keyframes shineSweep{
    0%{ transform: translateX(-130%) skewX(-18deg); opacity:0; }
    8%{ opacity:.55; }
    45%{ opacity:.55; }
    60%{ transform: translateX(160%) skewX(-18deg); opacity:0; }
    100%{ transform: translateX(160%) skewX(-18deg); opacity:0; }
  }
  @keyframes glowBreathe{
    0%,100%{ opacity:0.55; transform:scale(1); }
    50%{ opacity:1; transform:scale(1.08); }
  }
  @keyframes cascadeIn{
    from{ opacity:0; transform:translateY(14px) scale(0.985); }
    to{ opacity:1; transform:translateY(0) scale(1); }
  }
  @keyframes badgePulse{
    0%,100%{ box-shadow:0 0 0 0 rgba(150,255,190,0.55); }
    50%{ box-shadow:0 0 0 6px rgba(150,255,190,0); }
  }
  .premium-shine{ position:relative; overflow:hidden; }
  .premium-shine::after{
    content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
    background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.16) 48%, rgba(255,255,255,0.28) 50%, rgba(255,255,255,0.16) 52%, transparent 70%);
    animation: shineSweep 5.5s var(--ease-premium) infinite;
    animation-delay: 1.2s;
  }

  .eyebrow{
    font-family:'JetBrains Mono', monospace;
    font-size:12px; letter-spacing:2px; text-transform:uppercase;
    color: var(--habit-text); opacity:0.9; margin-bottom:6px;
  }
  .greeting{
    font-family:'Space Grotesk', sans-serif;
    font-size:25px; font-weight:600; color:var(--text-primary);
    letter-spacing:-0.3px;
  }
  .date{ font-size:12.5px; color:var(--text-muted); margin-top:4px; }
  .icon-btn{
    position:relative; /* Perbaikan UI Review #1: dibutuhkan sebagai konteks posisi
      untuk ::before di bawah -- tidak mengubah tampilan sama sekali (relative
      tanpa top/left/dst tidak menggeser apa pun). */
    width:38px; height:38px; border-radius:var(--cips-radius-md); border:1px solid var(--hairline);
    background:var(--surface-1); color:var(--text-primary); font-size:16px;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    flex-shrink:0; transition: transform .15s var(--ease-spring), box-shadow .15s ease, border-color .15s ease;
    box-shadow: 0 4px 12px -8px rgba(0,0,0,0.4);
  }
  /* Perbaikan UI Review #1 (Accessibility): target sentuh 38px di bawah rekomendasi
     44px (Apple HIG/Material Design). Diperbaiki TANPA mengubah tampilan visual
     sama sekali -- teknik standar: elemen semu transparan yang memperluas area
     bisa-di-tap ke 44x44 (38px + 3px tiap sisi), sementara kotak yang TERLIHAT
     tetap 38px persis seperti sebelumnya. Nol risiko terhadap kerapihan desain
     karena tidak ada satu pun properti visual (warna/ukuran/border/shadow) yang
     berubah -- ini murni memperluas hit-area, bukan mengubah rupa tombol. */
  .icon-btn::before{
    content:'';
    position:absolute;
    inset:-3px;
  }
  .icon-btn:active{ transform:scale(0.88); box-shadow: 0 0 0 4px rgba(150,255,190,0.10); }
  .subheader-pill-btn{
    height:38px; padding:0 14px; border-radius:var(--cips-radius-lg); border:1px solid var(--hairline);
    background:var(--surface-1); color:var(--text-primary); font-size:13px; font-weight:600;
    display:flex; align-items:center; gap:5px; cursor:pointer; flex-shrink:0; white-space:nowrap;
    font-family:'Space Grotesk', sans-serif; transition: transform .15s ease;
  }
  .subheader-pill-btn:active{ transform:scale(0.94); }
  .icon-btn.active-gear{ background:var(--financial-dim); color:var(--financial-text); border-color:rgba(255,170,120,0.4); }

  .hero{
    position:relative;
    background: linear-gradient(155deg, var(--habit-dim) 0%, var(--surface-1) 65%);
    border: 1px solid rgba(150,255,190,0.28);
    border-radius: 26px;
    padding: 22px;
    margin-bottom: 16px;
    overflow:hidden;
    box-shadow: 0 18px 40px -24px rgba(150,255,190,0.3), 0 6px 16px -12px rgba(0,0,0,0.4);
  }
  /* ---- Health: hero header senada dgn ap-hero/fdash-hero/ibadah-header ----
     Padding-top 2px & margin-bottom 18px disamain persis ke 3 header dock
     lain, biar pas pindah dock, bagian atas layar nggak "loncat". */
  .health-hero{
    display:flex; align-items:flex-start; gap:12px; padding:16px; margin:2px 0 18px;
    background: linear-gradient(155deg, rgba(130,205,255,0.12) 0%, var(--surface-1) 65%);
    border: 1px solid rgba(130,205,255,0.28); border-radius: 22px;
    box-shadow: 0 18px 38px -24px rgba(130,205,255,0.4), inset 0 1px 0 rgba(255,255,255,0.04);
    position: relative;
  }
  .health-history-btn{ position:absolute; top:14px; right:14px; }
  .health-header-icon{
    width:42px; height:42px; border-radius:var(--cips-radius-md); flex-shrink:0;
    background: linear-gradient(145deg, #C3E8FF, var(--kesehatan) 55%, #3E8FD6);
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 8px 18px -6px rgba(130,205,255,0.6), inset 0 1px 0 rgba(255,255,255,0.35);
    position:relative;
  }
  .health-header-icon::after{
    content:""; position:absolute; inset:-5px; border-radius:16px;
    background: radial-gradient(circle, rgba(130,205,255,0.35), transparent 72%);
    z-index:-1;
  }
  .health-hero-eyebrow{ font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:2.5px; text-transform:uppercase; color:var(--kesehatan-text); margin-bottom:8px; opacity:.95; }
  .health-hero-title{ font-family:'Space Grotesk', sans-serif; font-size:24px; font-weight:600; color:var(--text-primary); letter-spacing:-.3px; line-height:1.15; }
  .health-hero-accent{ color:var(--kesehatan-text); }
  .health-hero-tagline{ font-size:12.5px; color:var(--text-muted); margin-top:8px; line-height:1.5; max-width:240px; }

  /* ---- Health dashboard: kartu Berat Badan (tren) ---- */
  .health-weight-card{
    position:relative; overflow:hidden; cursor:pointer;
    background: linear-gradient(160deg, rgba(130,205,255,0.10) 0%, var(--surface-1) 60%);
    border: 1px solid rgba(130,205,255,0.28); border-radius: var(--cips-radius-lg); padding: 18px;
    margin-bottom: 12px;
    box-shadow: 0 16px 34px -22px rgba(130,205,255,0.4), inset 0 1px 0 rgba(255,255,255,0.03);
    transition: transform .16s var(--ease-spring);
  }
  /* Blob glow pojok + hairline atas — pola sama persis dgn .religion-next-card,
     direplikasi ke kartu hero Health (item #10 polish visual). */
  .health-weight-card::before{
    content:""; position:absolute; top:-70px; right:-70px; width:200px; height:200px; border-radius:50%;
    background: radial-gradient(circle, rgba(130,205,255,0.20), transparent 70%);
  }
  .health-weight-card::after{
    content:''; position:absolute; top:0; left:16px; right:16px; height:1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
    pointer-events:none; z-index:1;
  }
  .health-weight-card:active{ transform: scale(.985); }
  .health-weight-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; position:relative; z-index:1; }
  .health-weight-label{ font-size:12px; color:var(--text-muted); }
  .health-weight-value{ font-family:'Space Grotesk', sans-serif; font-size:26px; font-weight:700; color:var(--text-primary); margin-top:4px; text-shadow:0 0 18px rgba(130,205,255,0.35); }
  .health-weight-add-btn{
    width:34px; height:34px; border-radius:50%; flex-shrink:0;
    background: linear-gradient(145deg, #C3E8FF, var(--kesehatan) 60%, #3E8FD6);
    display:flex; align-items:center; justify-content:center; color:#0A0C11; font-size:18px; font-weight:700;
    box-shadow: 0 6px 14px -4px rgba(130,205,255,0.55);
  }
  .health-weight-delta{ font-size:12px; font-weight:600; margin-top:8px; position:relative; z-index:1; }
  .health-weight-svg{ width:100%; height:64px; margin-top:10px; display:block; position:relative; z-index:1; }
  .health-weight-empty{ display:none; font-size:12px; color:var(--text-muted); margin-top:10px; text-align:center; padding:8px 0 2px; position:relative; z-index:1; }

  /* Tahap 1 (Body Measurement): grafik tren per-field, mengikuti pola persis
     grafik Berat Badan di atas (SVG murni, tanpa library chart) supaya konsisten. */
  .health-meas-chips{ display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; margin-top:12px; }
  .health-meas-chips::-webkit-scrollbar{ display:none; }
  /* Override scoped by ID, bukan ubah .toggle-btn.active global -- Health pakai
     warna --kesehatan, modul lain yang sudah pakai .toggle-btn (Settings dkk)
     tidak boleh ikut berubah. */
  #healthMeasChips .toggle-btn{ white-space:nowrap; padding:8px 14px; font-size:12.5px; }
  #healthMeasChips .toggle-btn.active{ background:var(--kesehatan-dim); border-color:var(--kesehatan); color:var(--kesehatan-text); box-shadow:none; }
  .health-meas-svg{ width:100%; height:64px; margin-top:10px; display:block; }
  .health-meas-empty{ display:none; font-size:12px; color:var(--text-muted); margin-top:10px; text-align:center; padding:8px 0 2px; }

  /* Tahap 5 (Workout Tracker): chip kecil per-set yang sudah dicatat. */
  .woset-chips{ display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }
  .woset-chip{ font-size:12px; padding:5px 9px; border-radius:999px; background:var(--kesehatan-dim); color:var(--kesehatan-text); display:inline-flex; align-items:center; gap:6px; }

  /* ---- Health dashboard: grid Langkah + BMI ---- */
  .health-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px; }
  .health-photo-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
  .health-photo-thumb{ position:relative; aspect-ratio:3/4; border-radius:var(--cips-radius-md); overflow:hidden; background:var(--surface-2); border:1px solid var(--hairline); cursor:pointer; }
  .health-photo-thumb.health-photo-missing{ display:flex; align-items:center; justify-content:center; }
  .health-photo-thumb.health-photo-missing::after{ content:'📷'; font-size:22px; opacity:.35; }
  .health-photo-thumb-tag{ position:absolute; left:0; right:0; bottom:0; padding:4px 6px; font-size:10.5px; font-weight:600; color:#fff; text-align:center; background:linear-gradient(to top, rgba(0,0,0,0.65), transparent); }
  .health-mini-card{
    background: linear-gradient(160deg, var(--surface-1) 0%, var(--surface-2) 130%);
    border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:14px;
    box-shadow: 0 12px 26px -20px rgba(0,0,0,0.5); transition: background-color .25s ease, border-color .25s ease;}
  .health-mini-title{ font-family:'Space Grotesk', sans-serif; font-size:12.5px; font-weight:700; color:var(--text-primary); margin-bottom:10px; }
  .health-steps-body{ display:flex; align-items:center; gap:10px; }
  .health-steps-numbers{ min-width:0; }
  .health-steps-value{ font-family:'Space Grotesk', sans-serif; font-size:19px; font-weight:700; color:var(--text-primary); line-height:1.1; }
  .health-steps-goal{ font-size:11px; color:var(--text-muted); margin-top:2px; }
  .health-steps-actions{ display:flex; gap:8px; margin-top:12px; justify-content:center; }
  .health-bmi-value{ font-family:'Space Grotesk', sans-serif; font-size:28px; font-weight:700; color:var(--kesehatan-text); text-shadow:0 0 16px rgba(130,205,255,0.35); }
  .health-bmi-category{ display:inline-block; font-size:11px; font-weight:600; padding:2px 8px; border-radius:var(--cips-radius-sm); margin-top:4px; }
  .bmi-gauge{ position:relative; height:8px; margin-top:14px; }
  .bmi-gauge-track{
    position:absolute; inset:0; border-radius:6px;
    background: linear-gradient(90deg, var(--kesehatan) 0%, var(--habit) 22%, var(--habit) 45%, var(--warning) 65%, var(--danger) 100%);
    opacity:0.85;
  }
  .bmi-gauge-marker{
    position:absolute; top:50%; width:3px; height:16px; border-radius:2px;
    background:#fff; transform:translate(-50%,-50%);
    box-shadow: 0 0 8px 1px rgba(255,255,255,0.6);
    transition: left .4s var(--ease-premium);
  }
  .bmi-gauge-labels{ display:flex; justify-content:space-between; font-size:9.5px; color:var(--text-muted); margin-top:5px; }
  .hero-ibadah{
    background: linear-gradient(155deg, var(--ibadah-dim) 0%, var(--surface-1) 65%);
    border-color: rgba(255,214,140,0.3);
    box-shadow: 0 18px 40px -24px rgba(255,214,140,0.32), 0 6px 16px -12px rgba(0,0,0,0.4);
  }
  .hero-ibadah::before{ background: radial-gradient(circle, rgba(255,214,140,0.28), transparent 70%); }
  .hero-ibadah .hero-label{ color:var(--ibadah-text); }
  .hero-ibadah .hero-arrow{ background:var(--ibadah-dim); color:var(--ibadah-text); }
  .hero::before{
    content:"";
    position:absolute; top:-60px; right:-60px;
    width:180px; height:180px; border-radius:50%;
    background: radial-gradient(circle, rgba(150,255,190,0.28), transparent 70%);
    filter: blur(4px);
  }
  .hero-top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:18px; }
  .hero-label{
    font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:2px;
    color:var(--habit-text); text-transform:uppercase; margin-bottom:4px;
  }
  .hero-title{ font-family:'Space Grotesk', sans-serif; font-size:22px; font-weight:700; color:var(--text-primary); }
  .hero-arrow{
    width:34px; height:34px; border-radius:50%; background:var(--habit-dim);
    display:flex; align-items:center; justify-content:center; color:var(--habit-text);
    font-size:16px;
  }
  .hero-body{ display:flex; align-items:center; gap:20px; position:relative; z-index:1; }
  .ring-wrap{ position:relative; width:88px; height:88px; flex-shrink:0; }
  .ring-wrap svg{ transform:rotate(-90deg); }
  .ring-bg{ fill:none; stroke:rgba(130,140,160,0.16); stroke-width:8; }
  .ring-fg{
    fill:none; stroke: var(--habit); stroke-width:8; stroke-linecap:round;
    stroke-dasharray: 226; stroke-dashoffset: 75;
    transition: stroke-dashoffset .5s ease;
  }
  .ring-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
  #religionRingFg{ filter: drop-shadow(0 0 6px rgba(255,214,140,.45)); }
  #quranRingFg{ filter: drop-shadow(0 0 6px rgba(255,214,140,.45)); }
  .ring-pct{ font-family:'JetBrains Mono', monospace; font-size:16px; font-weight:600; color:var(--text-primary); }
  .hero-stats{ display:flex; flex-direction:column; gap:8px; }
  .stat-row{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-primary); }
  .stat-sub{ font-size:12px; color:var(--text-muted); }
  .chip{ width:22px; height:22px; border-radius:var(--cips-radius-sm); background: var(--habit); opacity:0.9; }
  .chip.off{ background: rgba(130,140,160,0.18); }
  .hero-clickable{ cursor:pointer; transition: transform .15s ease; }
  .hero-clickable:active{ transform:scale(0.98); }

  /* Layer dashboard mengisi persis tinggi .screen (flex fill), overflow disembunyikan
     sebagai jaminan tambahan supaya tidak pernah perlu di-scroll. */

  .habit-hour-item .list-item-row{ align-items:flex-start; }
  .habit-hour-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:5px; }
  .habit-cat-badge{
    font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:0.3px;
    padding:3px 9px; border-radius:var(--cips-radius-sm); cursor:pointer; white-space:nowrap; flex-shrink:0;
  }
  .habit-target-sub{ font-size:12px; color:var(--text-muted); margin-top:2px; font-family:'JetBrains Mono', monospace; }

  /* ---- Blok "waktu luang" (gap): gabungan jam-jam kosong berurutan di
     Daily Checklist Habit jadi satu strip tipis non-interaktif, biar checklist
     gak berat 24 baris penuh. Ketuk buat expand & isi cepat lewat
     updateHabitHourLabel, sama seperti custom label per jam biasa. (v74:
     dulu jalur ini terkunci premium, sekarang terbuka untuk semua.) ---- */
  .habit-gap-block{
    border:1px dashed var(--hairline); border-radius:var(--cips-radius-lg); margin-bottom:10px; overflow:hidden;
    background: rgba(150,255,190,0.03); transition: background .15s ease;
  }
  .habit-gap-header{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:11px 14px; cursor:pointer; -webkit-tap-highlight-color:transparent;
  }
  .habit-gap-header:active{ background: rgba(150,255,190,0.06); }
  .habit-gap-range{ font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--text-muted); flex-shrink:0; }
  .habit-gap-status{
    display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--text-muted);
    font-family:'Space Grotesk', sans-serif;
  }
  .habit-gap-chevron{ font-size:11px; opacity:0.7; transition: transform .15s ease; flex-shrink:0; }
  .habit-gap-block.open .habit-gap-chevron{ transform: rotate(180deg); }
  .habit-gap-hours{ border-top:1px dashed var(--hairline); }
  .habit-gap-hour-row{
    display:flex; align-items:center; gap:10px; padding:9px 14px;
  }
  .habit-gap-hour-row + .habit-gap-hour-row{ border-top:1px solid var(--hairline); }
  .habit-gap-hour-time{ font-size:11.5px; color:var(--text-muted); font-family:'JetBrains Mono', monospace; width:40px; flex-shrink:0; }
  .habit-gap-hour-input{
    flex:1; min-width:0; background:transparent; border:none; outline:none;
    color:var(--text-primary); font-family:'Inter', sans-serif; font-size:13.5px; padding:4px 0;
  }
  .habit-gap-hour-input::placeholder{ color:var(--text-muted); opacity:0.7; }

  /* ================= AURA dashboard (dipindah identik dari app AURA) ================= */
  .ap-hero{ position:relative; padding:2px 0 16px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .ap-hero-glow{ position:absolute; top:50%; left:50%; width:170%; height:170%; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle, rgba(150,255,190,0.30) 0%, rgba(150,255,190,0.14) 38%, rgba(150,255,190,0.05) 62%, transparent 78%); filter:blur(16px); pointer-events:none; z-index:0; animation: glowBreathe 4.5s ease-in-out infinite; }
  .ap-hero-text{ position:relative; z-index:1; flex:1; min-width:0; }
  .ap-eyebrow{ font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:2.5px; text-transform:uppercase; color:var(--habit-text); margin-bottom:8px; opacity:.95; }
  .ap-greeting{ font-family:'Space Grotesk', sans-serif; font-size:24px; font-weight:600; color:var(--text-primary); letter-spacing:-.3px; line-height:1.15; }
  .ap-greeting .ap-accent{ color:var(--habit-text); }
  .ap-tagline{ font-size:12.5px; color:var(--text-muted); margin-top:8px; line-height:1.5; max-width:210px; }
  .ap-hero-orb{ position:relative; width:104px; height:104px; flex-shrink:0; z-index:1; }
  .ap-hero-orb svg{ position:relative; z-index:1; width:100%; height:100%; transform:rotate(-90deg); filter:drop-shadow(0 0 10px rgba(150,255,190,0.25)); }
  .ap-hero-orb .ap-arc{ fill:none; stroke-width:9; stroke-linecap:round; }
  .ap-orbit-dot{ position:absolute; width:7px; height:7px; border-radius:50%; background:#fff; box-shadow:0 0 8px 2px rgba(255,255,255,.7), 0 0 16px 4px rgba(150,255,190,.5); top:50%; left:50%; margin:-3.5px; animation:apOrbit 7s linear infinite; z-index:2; }
  @keyframes apOrbit{ from{ transform:rotate(0deg) translateX(52px) rotate(0deg);} to{ transform:rotate(360deg) translateX(52px) rotate(-360deg);} }
  .ap-orb-settings{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:78px; height:78px; border-radius:50%; z-index:2;
    display:flex; align-items:center; justify-content:center; font-size:28px;
    background:radial-gradient(circle, var(--surface-1) 0%, var(--surface-1) 62%, transparent 100%);
    border:1px solid var(--hairline); color:var(--text-muted); cursor:pointer;
    transition:transform .15s var(--ease-spring), color .15s ease, border-color .15s ease, box-shadow .15s ease;
    box-shadow: 0 6px 14px -6px rgba(0,0,0,0.4);
  }
  .ap-orb-settings:active{ transform:translate(-50%,-50%) scale(.88); }
  .ap-orb-settings:hover{ color:var(--habit-text); border-color:rgba(150,255,190,.4); box-shadow: 0 0 0 5px rgba(150,255,190,.1), 0 6px 14px -6px rgba(0,0,0,0.4); }

  .ap-stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:16px; }
  .ap-mini-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:16px; }
  .ap-mini-chip{
    display:flex; flex-direction:row; align-items:center; justify-content:center; gap:5px;
    padding:11px 10px; border-radius:var(--cips-radius-lg); min-width:0; overflow:hidden; box-sizing:border-box;
    background:var(--surface-1); border:1px solid var(--hairline);
    cursor:default; transition: transform .15s var(--ease-spring);
  }
  .ap-mini-chip[role="button"]{ cursor:pointer; }
  .ap-mini-chip[role="button"]:active{ transform: scale(0.95); }
  .ap-mini-icon{ font-size:16px; line-height:1; flex-shrink:0; }
  .ap-mini-body{ display:flex; flex-direction:column; align-items:flex-start; text-align:left; min-width:0; }
  .ap-mini-label{ font-size:9.5px; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-muted); white-space:nowrap; }
  .ap-mini-pct{
    display:block; width:100%; max-width:100%; font-family:'Space Grotesk', sans-serif; font-size:14px; font-weight:700;
    color:var(--text-primary); white-space:nowrap; overflow:hidden; line-height:1.15;
  }
  .ap-mc-focus{ border-color:rgba(255,214,140,0.35); } .ap-mc-focus .ap-mini-pct{ color:var(--ibadah-text); }
  .ap-mc-action{ border-color:rgba(130,205,255,0.35); } .ap-mc-action .ap-mini-pct{ color:var(--kesehatan-text); }
  .ap-mc-result{ border-color:rgba(150,255,190,0.35); } .ap-mc-result .ap-mini-pct{ color:var(--habit-text); }
  /* ===== Quick Input "kegiatan mendadak" di dashboard ===== */
  .ap-quick-input-wrap{ margin-bottom:16px; position:relative; }
  .ap-quick-input{
    width:100%; background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg);
    padding:13px 44px 13px 16px; font-family:'Inter', sans-serif; font-size:13px; font-weight:500;
    color:var(--text-primary); outline:none; cursor:pointer; box-sizing:border-box;
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .ap-quick-input::placeholder{ color:var(--text-muted); opacity:0.75; font-weight:500; }
  .ap-quick-input:focus{ border-color:rgba(150,255,190,0.45); box-shadow:0 0 0 3px rgba(150,255,190,0.10); }
  .ap-quick-input-icon{ position:absolute; right:14px; top:50%; transform:translateY(-50%); font-size:15px; color:var(--text-muted); pointer-events:none; }

  .ap-log-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:0; }
  .ap-log-list:not(:empty){ margin-bottom:16px; }
  .ap-log-item{ display:flex; align-items:center; gap:10px; background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--cips-radius-md); padding:10px 12px; }
  .ap-log-item-icon{ font-size:15px; flex-shrink:0; }
  .ap-log-item-text{ flex:1; font-size:12.5px; color:var(--text-primary); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .ap-log-item-meta{ font-size:10.5px; color:var(--text-muted); margin-top:2px; }
  .ap-log-item-badge{ font-size:9.5px; font-weight:600; color:var(--habit-text); background:rgba(150,255,190,0.12); padding:3px 7px; border-radius:var(--cips-radius-lg); white-space:nowrap; flex-shrink:0; }
  /* Fix QA M-4 (Batch 3 follow-up): badge permanen untuk item Quick Log yang
     jamnya bentrok dengan item lain dan sedang TIDAK tampil di checklist
     Habit -- sebelumnya user cuma dapat toast sekali-lihat saat submit. */
  .ap-log-item-conflict{ border-color:var(--warning-dim); }
  .ap-log-item-badge-conflict{ color:var(--warning-text); background:var(--warning-dim); }
  .ap-log-item-del{ background:none; border:none; color:var(--text-muted); font-size:13px; cursor:pointer; flex-shrink:0; padding:4px; }
  .ap-log-item-del:active{ transform:scale(0.9); }

  /* ===== Form popup "Catat Kegiatan Mendadak" ===== */
  .qlf-field-block{ margin-bottom:14px; }
  .qlf-field-label{ font-size:13px; color:var(--text-primary); margin-bottom:6px; display:block; }
  .qlf-input{ width:100%; background:var(--surface-2); border:1px solid var(--hairline); color:var(--text-primary); border-radius:var(--cips-radius-md); padding:11px 12px; font-family:'Inter', sans-serif; font-size:13.5px; box-sizing:border-box; }
  .qlf-input:focus{ outline:none; border-color:var(--ibadah); box-shadow: 0 0 0 3px rgba(255,214,140,0.16); }
  .qlf-row-2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
  .qlf-repeat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .qlf-repeat-btn{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:14px 10px;
    border-radius:var(--cips-radius-lg); border:1px solid var(--hairline); background:var(--surface-2); color:var(--text-primary);
    font-family:'Space Grotesk', sans-serif; font-size:13px; font-weight:600; cursor:pointer;
    transition: transform .15s var(--ease-spring), border-color .2s ease, box-shadow .2s ease;
  }
  .qlf-repeat-btn:active{ transform:scale(0.96); }
  .qlf-repeat-btn .qlf-repeat-ico{ font-size:18px; }
  .qlf-repeat-btn.active{ border-color:var(--habit); box-shadow: 0 0 0 3px rgba(150,255,190,0.16); }
  .qlf-repeat-sub{ font-size:10px; color:var(--text-muted); font-weight:500; }

  .habit-row-highlight{ animation: habitRowPulse 1.6s ease-out; border-radius:var(--cips-radius-lg); }
  @keyframes habitRowPulse{
    0%{ box-shadow:0 0 0 2px var(--habit), 0 0 18px rgba(150,255,190,0.45); }
    100%{ box-shadow:0 0 0 0 rgba(150,255,190,0); }
  }
  .ap-stat-card{
    background: linear-gradient(155deg, var(--surface-1) 0%, var(--surface-2) 100%);
    border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:12px 8px 11px;
    display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px;
    opacity:0; transform:translateY(10px); animation:apCardIn .5s cubic-bezier(.22,.61,.36,1) forwards;
    box-shadow: 0 10px 22px -14px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.03);
    transition: transform .18s var(--ease-spring), box-shadow .18s ease, border-color .18s ease, background-color .25s ease;
  }
  .ap-stat-card:nth-child(1){ animation-delay:.05s; } .ap-stat-card:nth-child(2){ animation-delay:.12s; }
  .ap-stat-card:nth-child(3){ animation-delay:.19s; } .ap-stat-card:nth-child(4){ animation-delay:.26s; }
  .ap-c-habit{ box-shadow: 0 10px 22px -14px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.03), 0 0 0 1px rgba(150,255,190,0.10); }
  .ap-c-ibadah{ box-shadow: 0 10px 22px -14px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.03), 0 0 0 1px rgba(255,214,140,0.10); }
  .ap-c-kesehatan{ box-shadow: 0 10px 22px -14px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.03), 0 0 0 1px rgba(130,205,255,0.10); }
  .ap-c-financial{ box-shadow: 0 10px 22px -14px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.03), 0 0 0 1px rgba(255,170,120,0.10); }
  @keyframes apCardIn{ to{ opacity:1; transform:translateY(0); } }
  .ap-stat-icon{ width:30px; height:30px; border-radius:var(--cips-radius-md); display:flex; align-items:center; justify-content:center; position:relative; overflow:visible; }
  .ap-stat-icon-tap{ cursor:pointer; }
  .ap-stat-icon-tap:active{ transform: scale(0.88); }
  .ap-stat-icon svg{ width:14px; height:14px; }
  .ap-stat-icon-anim{ position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
  .ap-stat-icon-anim .ap-ia-base, .ap-stat-icon-anim .ap-ia-accent{ position:absolute; line-height:1; filter:drop-shadow(0 0 2px currentColor) drop-shadow(0 0 6px currentColor); }
  .ap-stat-icon-anim .ap-ia-base{ font-size:16px; }
  .ap-stat-icon-anim .ap-ia-accent{ font-size:9px; }

  /* Sholat: kubah diam (di depan), bulan-bintang "adzan" kecil mengintip keluar-masuk dari balik kubah */
  .ap-ia-sholat .ap-ia-base{ position:relative; z-index:2; }
  .ap-ia-sholat .ap-ia-accent{ top:-2px; font-size:6px; opacity:0; z-index:1; animation:apAdzanPulse 2.6s ease-in-out infinite; }
  @keyframes apAdzanPulse{
    0%{ opacity:0; transform:translateY(6px) scale(.3); }
    18%{ opacity:1; transform:translateY(-1.5px) scale(.9); }
    38%{ opacity:1; transform:translateY(-3px) scale(.95); }
    58%{ opacity:1; transform:translateY(-1.5px) scale(.9); }
    78%{ opacity:1; transform:translateY(-2.5px) scale(.95); }
    100%{ opacity:0; transform:translateY(6px) scale(.3); }
  }

  /* Olahraga: gelembung (bubble) mengambang naik-turun dengan smooth, sebagai ganti figur lari */
  .ap-ia-olahraga{ position:relative; }
  .ap-ia-bubble-main{
    width:15px; height:15px; border-radius:50%;
    background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.95) 0%, var(--kesehatan) 45%, rgba(130,205,255,.35) 100%);
    filter: drop-shadow(0 0 5px rgba(130,205,255,.55));
    animation: apBubbleFloat 2.4s cubic-bezier(.45,0,.55,1) infinite;
  }
  .ap-ia-bubble-dot{
    position:absolute; top:2px; right:3px;
    width:6px; height:6px; border-radius:50%;
    background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.95) 0%, var(--kesehatan) 55%, transparent 100%);
    opacity:.8;
    animation: apBubbleFloat2 2.4s cubic-bezier(.45,0,.55,1) infinite .5s;
  }
  @keyframes apBubbleFloat{
    0%,100%{ transform:translateY(0) scale(1); }
    50%{ transform:translateY(-3.5px) scale(1.08); }
  }
  @keyframes apBubbleFloat2{
    0%,100%{ transform:translateY(0) scale(1); }
    50%{ transform:translateY(-2.5px) scale(.9); }
  }
  @keyframes apUtensilTap{
    0%,100%{ transform:translate(-3.5px,0) rotate(-10deg); }
    50%{ transform:translate(3.5px,0) rotate(10deg); }
  }

  /* Saldo: dompet diam (di depan), koin kecil mengintip keluar-masuk dari balik dompet sambil memudar */
  .ap-ia-saldo .ap-ia-base{ font-size:16px; position:relative; z-index:2; }
  .ap-ia-saldo .ap-ia-accent{ top:-1px; right:1px; font-size:7px; opacity:0; z-index:1; animation:apCoinFlow 2.2s cubic-bezier(.45,0,.55,1) infinite; }
  @keyframes apCoinFlow{
    0%{ opacity:0; transform:translateY(6px) scale(.3); }
    20%{ opacity:1; transform:translateY(0px) scale(.75); }
    40%{ opacity:1; transform:translateY(-2px) scale(.85); }
    60%{ opacity:1; transform:translateY(-1px) scale(.8); }
    80%{ opacity:1; transform:translateY(-2.5px) scale(.85); }
    100%{ opacity:0; transform:translateY(6px) scale(.3); }
  }

  /* Habit: clipboard diam (di depan), centang kecil muncul-tenggelam dari balik clipboard
     sambil memudar — merepresentasikan checklist harian yang "dicentang" */
  .ap-ia-habit .ap-ia-base{ position:relative; z-index:2; }
  .ap-ia-habit .ap-ia-accent{ top:-2px; right:-1px; font-size:7px; opacity:0; z-index:1; animation:apHabitCheck 2.4s ease-in-out infinite; }
  @keyframes apHabitCheck{
    0%{ opacity:0; transform:translateY(6px) scale(.3); }
    20%{ opacity:1; transform:translateY(0px) scale(.85); }
    40%{ opacity:1; transform:translateY(-2px) scale(.95); }
    60%{ opacity:1; transform:translateY(-1px) scale(.9); }
    80%{ opacity:1; transform:translateY(-2.5px) scale(.95); }
    100%{ opacity:0; transform:translateY(6px) scale(.3); }
  }

  @media (prefers-reduced-motion: reduce){
  .ap-ia-sholat .ap-ia-accent, .ap-ia-bubble-main, .ap-ia-bubble-dot, .ap-ia-saldo .ap-ia-accent, .ap-ia-habit .ap-ia-accent{ animation:none; }
  }
  .ap-stat-label{ font-size:9.5px; color:var(--text-muted); font-weight:600; }
  .ap-stat-value{ font-family:'JetBrains Mono', monospace; font-size:15px; font-weight:700; color:var(--text-primary); line-height:1.1; letter-spacing:-.2px; }
  .ap-c-habit .ap-stat-icon{ color:var(--habit-text); }
  .ap-c-ibadah .ap-stat-icon{ color:var(--ibadah-text); }
  .ap-c-kesehatan .ap-stat-icon{ color:var(--kesehatan-text); }
  .ap-c-financial .ap-stat-icon{ color:var(--financial-text); }
  .ap-wallet-row{ display:flex; align-items:center; justify-content:center; gap:6px; min-width:0; }
  .ap-wallet-value{ cursor:pointer; }
  .ap-wallet-value:active{ transform:scale(0.9); }

  .ap-card{
    background: linear-gradient(160deg, var(--surface-1) 0%, var(--surface-2) 120%);
    border:1px solid var(--hairline); border-radius:22px; padding:18px; margin-bottom:16px;
    box-shadow: 0 16px 32px -22px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.03);
    position:relative; overflow:hidden; transition: background-color .25s ease, border-color .25s ease;}
  .ap-card::before{
    content:''; position:absolute; top:0; left:14px; right:14px; height:1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
    pointer-events:none;
  }
  .ap-card-head{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:16px; }
  .ap-card-title{ font-family:'Space Grotesk', sans-serif; font-size:16px; font-weight:700; color:var(--text-primary); }
  .ap-card-sub{ font-size:11.5px; color:var(--text-muted); margin-top:3px; }

  /* ===== Header kartu "Habit Hari Ini": judul & tombol (+) sejajar satu baris.
     align-items:center (bukan flex-start bawaan .ap-card-head) supaya judul yang bisa
     wrap 2 baris tetap sejajar-tengah dengan tombol (+) yang tingginya tetap 30px. */
  .ap-card-head-habit{ align-items:center; margin-bottom:14px; }
  .ap-ring-title{
    width:132px; flex-shrink:0; text-align:center;
    font-family:'Space Grotesk', sans-serif; font-size:16px; font-weight:700;
    color:var(--text-primary); line-height:1.25;
  }
  .ap-plus-btn{
    width:30px; height:30px; padding:0; border-radius:var(--cips-radius-sm); flex-shrink:0;
    color:var(--habit-text); background:var(--habit-dim); border:1px solid rgba(150,255,190,.3);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    font-family:'Space Grotesk', sans-serif; font-size:18px; font-weight:700; line-height:1;
    transition: transform .15s var(--ease-spring), box-shadow .15s ease;
  }
  .ap-plus-btn:active{ transform:scale(.92); box-shadow: 0 0 0 4px rgba(150,255,190,0.12); }

  /* align-items:center di .ap-progress-body (di bawah) otomatis membuat ring naik &
     center secara vertikal terhadap panel Finance di sebelahnya, sekarang judul sudah
     dipindah keluar dari kolom ring. */
  .ap-progress-body{ display:flex; gap:16px; align-items:flex-start; }
  .ap-ring-wrap{ position:relative; width:132px; height:132px; flex-shrink:0; cursor:pointer; }
  .ap-ring-wrap svg{ width:100%; height:100%; transform:rotate(-90deg); shape-rendering:geometricPrecision; }
  .ap-ring-bg{ fill:none; stroke:rgba(130,140,160,0.14); stroke-width:11; }
  .ap-ring-fg{ fill:none; stroke:var(--habit); stroke-width:11; stroke-linecap:round; stroke-dasharray:346; stroke-dashoffset:346; transition:stroke-dashoffset 1.1s cubic-bezier(.22,.61,.36,1); }
  /* Glow dipisah dari garis progress: sebuah radial gradient tipis di BELAKANG ring,
     dibatasi persis di dalam area .ap-ring-wrap. Sebelumnya glow pakai filter:drop-shadow
     langsung di stroke SVG, yang bikin cahaya "bocor" tidak rata & merusak presisi tepi
     lingkaran saat arc-nya sebagian (dashoffset berubah). Pola ini konsisten & tetap presisi
     di semua persentase. */
  .ap-ring-glow{ position:absolute; inset:8px; border-radius:50%; background:radial-gradient(circle, rgba(150,255,190,0.16) 0%, transparent 70%); pointer-events:none; }
  .ap-ring-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
  .ap-ring-pct{ font-family:'Space Grotesk', sans-serif; font-size:26px; font-weight:700; color:var(--text-primary); }
  .ap-ring-label{ font-size:10.5px; color:var(--text-muted); margin-top:1px; }
  .ap-cat-track{ height:5px; border-radius:3px; background:rgba(130,140,160,0.14); overflow:hidden; }
  .ap-cat-fill{ height:100%; border-radius:3px; width:0%; transition:width 1s cubic-bezier(.22,.61,.36,1); }

  /* ===== Panel Finance (goal tabungan + tagihan hari ini) di kartu "Habit Hari Ini" =====
     Menggantikan daftar kategori habit (Religion/Health/Business) yang sudah terwakili
     lewat kartu-kartu ringkasan lain di dashboard. Semua nama (goal & tagihan) panjangnya
     bebas tergantung input user, jadi setiap baris pakai min-width:0 + text-overflow:ellipsis
     supaya otomatis menyesuaikan tanpa pernah merusak layout kartu. */
  .ap-fin-panel{ flex:1; min-width:0; display:flex; flex-direction:column; gap:14px; }
  .ap-fin-goal{ display:flex; flex-direction:column; cursor:pointer; }
  /* Judul "🎯 Target Keuangan" & rincian goal (dot + nama + persen) memakai persis
     font-family/ukuran/warna yang sama dengan judul "🧾 Tagihan Hari Ini" & baris
     tagihannya di bawah, supaya kedua blok terlihat presisi & konsisten satu sama lain. */
  .ap-fin-goal-title{ font-size:9.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--text-muted); margin-bottom:7px; }
  .ap-fin-goal-main{ min-width:0; }
  .ap-fin-goal-item{ display:flex; align-items:center; gap:6px; min-width:0; }
  .ap-fin-goal-dot{ width:4px; height:4px; border-radius:50%; background:var(--financial); flex-shrink:0; }
  .ap-fin-goal-name{ font-size:10.5px; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1; }
  .ap-fin-goal-pct{ font-family:'JetBrains Mono', monospace; font-size:10px; font-weight:600; color:var(--financial-text); flex-shrink:0; white-space:nowrap; margin-left:4px; }
  /* Bar dirapatkan sejajar dengan huruf pertama nama goal: indent kiri = lebar dot (4px)
     + gap baris (6px) = 10px, jadi track dimulai tepat di bawah huruf pertama "apFinGoalName". */
  .ap-fin-goal-bar-wrap{ margin-left:10px; margin-top:6px; }
  .ap-fin-bills{ border-top:1px solid var(--hairline); padding-top:14px; cursor:pointer; }
  .ap-fin-bills-title{ font-size:9.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--text-muted); margin-bottom:7px; }
  .ap-fin-bill-list{ display:flex; flex-direction:column; gap:6px; }
  .ap-fin-bill-item{ display:flex; align-items:center; gap:6px; min-width:0; }
  .ap-fin-bill-dot{ width:4px; height:4px; border-radius:50%; background:var(--financial); flex-shrink:0; }
  .ap-fin-bill-name{ font-size:10.5px; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1; }
  .ap-fin-bill-amount{ font-family:'JetBrains Mono', monospace; font-size:10px; font-weight:600; color:var(--text-muted); flex-shrink:0; white-space:nowrap; margin-left:4px; }
  .ap-fin-bill-more{ font-size:10px; color:var(--text-muted); padding-left:10px; }
  .ap-fin-bills-empty{ font-size:10.5px; color:var(--text-muted); opacity:.75; }

  .ap-dropdown{ font-family:'Space Grotesk', sans-serif; font-size:11px; font-weight:600; color:var(--text-primary); background:var(--surface-2); border:1px solid var(--hairline); padding:6px 10px; border-radius:var(--cips-radius-md); display:flex; align-items:center; gap:5px; white-space:nowrap; flex-shrink:0; }
  .ap-bars{ display:flex; align-items:flex-end; gap:8px; height:118px; margin-top:6px; }
  .ap-bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end; }
  .ap-bar-fill-wrap{ width:100%; height:78px; display:flex; align-items:flex-end; }
  .ap-bar-fill{ width:100%; border-radius:5px 5px 2px 2px; background:linear-gradient(180deg, var(--habit) 0%, rgba(150,255,190,.35) 100%); height:0%; transition:height 1s cubic-bezier(.22,.61,.36,1); position:relative; display:flex; align-items:center; justify-content:center; overflow:visible; }
  .ap-bar-fill.today{ background:linear-gradient(180deg, #fff 0%, var(--habit) 55%); box-shadow:0 0 10px 1px rgba(150,255,190,.4); }
  .ap-bar-pct{ font-family:'JetBrains Mono', monospace; font-size:8px; font-weight:800; color:#064a24; line-height:1; white-space:nowrap; opacity:0; transition:font-size 1s cubic-bezier(.22,.61,.36,1), opacity .4s ease; }
  .ap-bar-day{ font-size:9.5px; color:var(--text-muted); font-weight:600; }
  .ap-bar-col.today .ap-bar-day{ color:var(--text-primary); }

  /* ===== Finance dashboard (fdash-) — halaman utama dock Finance ===== */
  .fdash-hero{ display:flex; align-items:flex-start; justify-content:space-between; padding:2px 0 18px; gap:10px; }
  .fdash-hero-brand{ display:flex; align-items:center; gap:12px; min-width:0; }
  .fdash-header-icon{
    width:42px; height:42px; border-radius:var(--cips-radius-md); flex-shrink:0;
    background: linear-gradient(145deg, #FFC79A, var(--financial) 55%, #E0703A);
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 8px 18px -6px rgba(255,170,120,0.55), inset 0 1px 0 rgba(255,255,255,0.35);
    position:relative;
  }
  .fdash-header-icon::after{
    content:""; position:absolute; inset:-5px; border-radius:16px;
    background: radial-gradient(circle, rgba(255,170,120,0.35), transparent 72%);
    z-index:-1;
  }
  .fdash-greet{ font-family:'Space Grotesk', sans-serif; font-size:21px; font-weight:600; color:var(--text-primary); letter-spacing:-.2px; }
  .fdash-sub{ font-size:12.5px; color:var(--text-muted); margin-top:5px; }

  .fdash-card{ background: linear-gradient(160deg, var(--surface-1) 0%, var(--surface-2) 120%); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:18px; margin-bottom:12px; box-shadow: 0 16px 32px -22px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.03); transition: background-color .25s ease, border-color .25s ease;}
  .fdash-balance{ border-color: rgba(255,170,120,0.4); box-shadow: 0 18px 40px -18px rgba(255,170,120,0.45), inset 0 1px 0 rgba(255,255,255,0.04); background: linear-gradient(160deg, rgba(255,170,120,0.10) 0%, var(--surface-1) 55%, var(--surface-2) 130%); }
  /* Blob glow pojok + hairline atas — pola sama persis dgn .religion-next-card,
     direplikasi ke kartu hero Finance (item #10 polish visual). */
  .fdash-balance::before{
    content:""; position:absolute; top:-70px; right:-70px; width:200px; height:200px; border-radius:50%;
    background: radial-gradient(circle, rgba(255,170,120,0.20), transparent 70%);
  }
  .fdash-balance::after{
    content:''; position:absolute; top:0; left:16px; right:16px; height:1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
    pointer-events:none; z-index:1;
  }
  .fdash-card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
  .fdash-card-title{ font-family:'Space Grotesk', sans-serif; font-size:14.5px; font-weight:700; color:var(--text-primary); }
  .fdash-dropdown{ font-family:'Space Grotesk', sans-serif; font-size:11px; font-weight:600; color:var(--text-primary); background:var(--surface-2); border:1px solid var(--hairline); padding:6px 10px; border-radius:var(--cips-radius-md); white-space:nowrap; }
  .fdash-link{ font-family:'Space Grotesk', sans-serif; font-size:11.5px; font-weight:600; color:var(--financial-text); display:flex; align-items:center; gap:2px; cursor:pointer; white-space:nowrap; }

  .fdash-balance{ position:relative; overflow:hidden; }
  .fdash-balance.clickable{ cursor:pointer; }
  .fdash-balance.clickable:active{ transform:scale(.99); }
  .fdash-balance-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; position:relative; z-index:1; }
  .fdash-label{ font-size:12px; color:var(--text-muted); margin-bottom:8px; position:relative; z-index:1; }
  .fdash-balance-value{ font-family:'Space Grotesk', sans-serif; font-size:28px; font-weight:700; color:var(--financial-text); letter-spacing:-.3px; text-shadow:0 0 18px rgba(255,170,120,0.35); }
  .fdash-delta{ display:inline-flex; align-items:center; gap:5px; margin-top:12px; font-size:11.5px; font-weight:600; color:var(--habit-text); background:var(--habit-dim); padding:5px 10px; border-radius:var(--cips-radius-lg); position:relative; z-index:1; }
  .fdash-balance-actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
  .fdash-eye-btn{ width:38px; height:38px; border-radius:var(--cips-radius-lg); background:var(--financial-dim); border:1px solid rgba(255,170,120,0.25); color:var(--financial-text); display:flex; align-items:center; justify-content:center; font-size:16px; cursor:pointer; flex-shrink:0; line-height:1; }
  .fdash-eye-btn:active{ transform:scale(0.92); }

  /* ---- Analytics dropdown di dalam kartu Total Saldo (dipindah dari kartu
     Business di baris "Kelola Finance"). Default tertutup (max-height:0),
     baru melebar ke bawah pas di-tap -- tidak makan tempat kalau tidak dibuka. ---- */
  .fdash-an-toggle{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:12px; padding:9px 12px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,170,120,0.22); border-radius:var(--cips-radius-lg); cursor:pointer; font-family:'Space Grotesk', sans-serif; font-size:12.5px; font-weight:600; color:var(--text-primary); }
  .fdash-an-toggle:active{ transform:scale(.98); }
  .fdash-an-toggle-chevron{ font-size:11px; color:var(--text-muted); transition:transform .25s ease; }
  .fdash-an-toggle[aria-expanded="true"] .fdash-an-toggle-chevron{ transform:rotate(180deg); }
  .fdash-an-drop{ position:relative; z-index:1; max-height:0; overflow:hidden; transition:max-height .28s ease; }
  .fdash-an-drop.open{ max-height:260px; }
  .fdash-an-drop-inner{ padding-top:10px; }
  .fdash-an-row{ display:flex; align-items:center; justify-content:space-between; padding:8px 2px; font-size:12.5px; color:var(--text-muted); border-bottom:1px solid var(--hairline); }
  .fdash-an-row:last-of-type{ border-bottom:none; }
  .fdash-an-row b{ font-family:'Space Grotesk', sans-serif; font-size:13px; font-weight:700; color:var(--text-primary); }
  .fdash-an-link{ margin-top:10px; text-align:center; font-size:12px; font-weight:600; color:var(--financial-text); padding:9px; background:var(--financial-dim); border-radius:var(--cips-radius-lg); cursor:pointer; }
  .fdash-an-link:active{ transform:scale(.98); }

  .fdash-legend{ display:flex; gap:18px; margin-bottom:12px; }
  .fdash-legend > div{ font-size:11.5px; color:var(--text-muted); display:flex; flex-direction:column; gap:4px; }
  .fdash-legend b{ font-family:'Space Grotesk', sans-serif; font-size:14px; color:var(--text-primary); font-weight:700; }
  .fdash-legend .dot{ width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:6px; }
  .fdash-area-svg{ width:100%; height:110px; display:block; }
  .fdash-chart-xlabels{ display:flex; justify-content:space-between; margin-top:6px; font-size:10px; color:var(--text-muted); }

  .fdash-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
  .fdash-half{ padding:16px; margin-bottom:0; }
  .fdash-donut-wrap{ position:relative; width:112px; height:112px; margin:4px auto 14px; }
  .fdash-donut{ width:100%; height:100%; transform:rotate(-90deg); }
  .fdash-donut-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 8px; }
  .fdash-donut-total{ font-size:9px; color:var(--text-muted); line-height:1.3; }
  .fdash-donut-value{ font-family:'Space Grotesk', sans-serif; font-size:12.5px; font-weight:700; color:var(--text-primary); margin-top:2px; }
  .fdash-legend-list{ display:flex; flex-direction:column; gap:9px; margin-bottom:14px; }
  .fdash-legend-row{ display:flex; align-items:center; justify-content:space-between; font-size:12px; }
  .fdash-legend-row-left{ display:flex; align-items:center; gap:8px; color:var(--text-primary); min-width:0; }
  .fdash-legend-row-left span.sw{ width:9px; height:9px; border-radius:3px; flex-shrink:0; }
  .fdash-legend-row-left .lbl{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .fdash-legend-row-val{ font-family:'JetBrains Mono', monospace; font-size:11px; font-weight:700; color:var(--text-muted); flex-shrink:0; }
  .fdash-legend-row-wrap{ display:flex; flex-direction:column; gap:3px; }
  .fdash-legend-budget{ font-size:10.5px; color:var(--text-muted); padding-left:17px; font-family:'JetBrains Mono', monospace; }
  .fdash-legend-budget.over{ color:var(--financial-text); font-weight:700; }

  .fdash-summary-list{ display:flex; flex-direction:column; gap:14px; margin-top:14px; }
  .fdash-summary-row{ display:flex; align-items:center; gap:10px; cursor:pointer; }
  .fdash-summary-ico{ width:34px; height:34px; border-radius:var(--cips-radius-md); display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }
  .fdash-summary-main{ flex:1; min-width:0; }
  .fdash-summary-label{ font-size:10.5px; color:var(--text-muted); line-height:1.4; }
  .fdash-summary-value{ font-family:'Space Grotesk', sans-serif; font-size:13px; font-weight:700; color:var(--text-primary); margin-top:4px; }
  .fdash-summary-chevron{ color:var(--text-muted); font-size:15px; flex-shrink:0; }

  /* ===== Finance Analytics (fan-) — halaman Analytics di dalam dock Finance ===== */
  .fan-header-row{ display:flex; align-items:flex-start; justify-content:space-between; padding:2px 0 4px; gap:10px; }
  .fan-title{ font-family:'Space Grotesk', sans-serif; font-size:24px; font-weight:700; color:var(--text-primary); letter-spacing:-.3px; }
  .fan-export-btn{ display:flex; align-items:center; gap:6px; font-family:'Space Grotesk', sans-serif; font-size:12.5px; font-weight:700; color:var(--habit-text); background:var(--habit-dim); border:1px solid rgba(150,255,190,0.3); padding:9px 14px; border-radius:var(--cips-radius-lg); cursor:pointer; white-space:nowrap; flex-shrink:0; }
  .fan-export-btn:active{ transform:scale(.95); }
  .fan-sub{ font-size:12.5px; color:var(--text-muted); line-height:1.5; margin-bottom:14px; }

  .fan-filter-row{ display:flex; gap:10px; margin-bottom:16px; }
  .fan-filter-chip{ display:flex; align-items:center; gap:7px; font-family:'Space Grotesk', sans-serif; font-size:12.5px; font-weight:600; color:var(--text-primary); background:var(--surface-2); border:1px solid var(--hairline); padding:10px 13px; border-radius:var(--cips-radius-lg); cursor:pointer; white-space:nowrap; }
  .fan-filter-chip:active{ transform:scale(.97); }

  .fan-card{ background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:18px; margin-bottom:12px; transition: background-color .25s ease, border-color .25s ease;}
  .fan-greet{ font-family:'Space Grotesk', sans-serif; font-size:16.5px; font-weight:600; color:var(--text-primary); margin-bottom:14px; }
  .fan-flag{ display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:700; color:var(--text-muted); letter-spacing:.5px; text-transform:uppercase; margin-bottom:6px; }
  .fan-flag-dot{ width:7px; height:7px; border-radius:50%; background:var(--financial); flex-shrink:0; }
  .fan-flag-dot.pos{ background:var(--habit); }
  .fan-cashflow-value{ font-family:'Space Grotesk', sans-serif; font-size:30px; font-weight:700; color:var(--text-primary); letter-spacing:-.5px; margin-bottom:10px; }
  .fan-trend-badge{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; }
  .fan-trend-pill{ font-weight:700; padding:4px 9px; border-radius:var(--cips-radius-lg); }
  .fan-trend-pill.up{ color:var(--habit-text); background:var(--habit-dim); }
  .fan-trend-pill.down{ color:var(--financial-text); background:var(--financial-dim); }
  .fan-trend-text{ color:var(--text-muted); }

  .fan-metric-block{ background:var(--surface-2); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:14px 16px; margin-top:12px; }
  .fan-metric-label{ font-size:12.5px; color:var(--text-muted); margin-bottom:8px; }
  .fan-metric-value{ font-family:'Space Grotesk', sans-serif; font-size:22px; font-weight:700; color:var(--text-primary); margin-bottom:8px; }

  .fan-health-badge{ display:inline-flex; align-items:center; gap:7px; font-family:'Space Grotesk', sans-serif; font-size:13px; font-weight:700; padding:8px 14px; border-radius:var(--cips-radius-lg); margin-bottom:20px; }
  .fan-health-badge .dot{ width:8px; height:8px; border-radius:50%; }
  .fan-health-badge.healthy{ color:var(--habit-text); background:var(--habit-dim); }
  .fan-health-badge.healthy .dot{ background:var(--habit); }
  .fan-health-badge.ok{ color:var(--ibadah-text); background:rgba(255,214,140,0.18); }
  .fan-health-badge.ok .dot{ background:var(--ibadah); }
  .fan-health-badge.bad{ color:var(--financial-text); background:var(--financial-dim); }
  .fan-health-badge.bad .dot{ background:var(--financial); }

  .fan-ring-wrap{ position:relative; width:190px; height:190px; margin:0 auto 6px; }
  .fan-ring-wrap svg{ width:100%; height:100%; transform:rotate(-90deg); }
  .fan-ring-bg{ fill:none; stroke:var(--hairline); stroke-width:11; }
  .fan-ring-fg{ fill:none; stroke-width:11; stroke-linecap:round; transition:stroke-dasharray .5s ease; }
  .fan-ring-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
  .fan-ring-pct{ font-family:'Space Grotesk', sans-serif; font-size:32px; font-weight:700; color:var(--text-primary); letter-spacing:-.5px; }
  .fan-ring-label{ font-size:11.5px; color:var(--text-muted); margin-top:4px; }
  .fan-ring-desc{ text-align:center; font-size:13px; color:var(--text-muted); line-height:1.5; margin-top:16px; }

  .fan-sumrow{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--hairline); }
  .fan-sumrow:first-child{ padding-top:0; }
  .fan-sumrow:last-child{ border-bottom:none; padding-bottom:0; }
  .fan-sumrow-label{ font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--text-muted); }
  .fan-sumrow-arrow{ font-size:13px; }
  .fan-sumrow-arrow.up{ color:var(--habit-text); }
  .fan-sumrow-arrow.down{ color:var(--financial-text); }
  .fan-sumrow-main{ font-family:'Space Grotesk', sans-serif; font-size:19px; font-weight:700; color:var(--text-primary); margin:6px 0 3px; }
  .fan-sumrow-sub{ font-size:12px; color:var(--text-muted); }

  .fan-insight-card{ border-radius:var(--cips-radius-lg); padding:16px; margin-bottom:10px; }
  .fan-insight-card.warn{ background:var(--financial-dim); }
  .fan-insight-card.alert{ background:rgba(255,214,140,0.18); }
  .fan-insight-card.good{ background:var(--habit-dim); }
  .fan-insight-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:9px; }
  .fan-insight-tag{ display:flex; align-items:center; gap:7px; font-size:10.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; }
  .fan-insight-card.warn .fan-insight-tag{ color:var(--financial-text); }
  .fan-insight-card.alert .fan-insight-tag{ color:var(--warning-text); }
  .fan-insight-card.good .fan-insight-tag{ color:var(--habit-text); }
  .fan-insight-arrow{ color:var(--text-muted); font-size:14px; }
  .fan-insight-title{ font-family:'Space Grotesk', sans-serif; font-size:16px; font-weight:700; color:var(--text-primary); margin-bottom:6px; }
  .fan-insight-desc{ font-size:12.5px; color:var(--text-muted); line-height:1.55; }

  .fan-month-item{ display:flex; align-items:center; justify-content:space-between; padding:13px 4px; border-bottom:1px solid var(--hairline); cursor:pointer; font-family:'Space Grotesk', sans-serif; font-size:14.5px; font-weight:600; color:var(--text-primary); }
  .fan-month-item:last-child{ border-bottom:none; }
  .fan-month-item.active{ color:var(--financial-text); }
  .fan-month-item:active{ opacity:.7; }

  /* ---- Distribusi pengeluaran: bar ranking #1/#2/#3.. berwarna gradasi habit ---- */
  .fan-dist-bar{ border-radius:18px; padding:16px 18px; margin-bottom:10px; cursor:default; }
  .fan-dist-rank{ font-family:'JetBrains Mono', monospace; font-size:11.5px; font-weight:600; opacity:.82; margin-bottom:10px; }
  .fan-dist-amount{ font-family:'Space Grotesk', sans-serif; font-size:22px; font-weight:700; letter-spacing:-.3px; margin-bottom:4px; }
  .fan-dist-label{ font-size:13px; font-weight:600; opacity:.92; }
  .fan-dist-empty{ text-align:center; font-size:12.5px; color:var(--text-muted); padding:22px 0; }

  /* ---- Donut kategori ---- */
  .fan-donut-wrap{ position:relative; width:190px; height:190px; margin:6px auto 20px; }
  .fan-donut-wrap svg{ width:100%; height:100%; transform:rotate(-90deg); }
  .fan-donut-bg{ fill:none; stroke:var(--hairline); stroke-width:20; }
  .fan-donut-seg{ fill:none; stroke-width:20; transition:stroke-dasharray .5s ease; }
  .fan-donut-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
  .fan-donut-total{ font-family:'Space Grotesk', sans-serif; font-size:19px; font-weight:700; color:var(--text-primary); letter-spacing:-.3px; }
  .fan-donut-sub{ font-size:11px; color:var(--text-muted); margin-top:3px; }

  /* ---- Semua kategori: search + list expandable ---- */
  .fan-catlist-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
  .fan-catlist-title{ font-family:'Space Grotesk', sans-serif; font-size:14.5px; font-weight:700; color:var(--text-primary); flex-shrink:0; }
  .fan-catlist-search{ display:flex; align-items:center; gap:7px; background:var(--surface-2); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:8px 13px; flex:1; max-width:150px; transition: border-color .15s ease, box-shadow .15s ease; }
  /* Fix (QA Final Production Audit, accessibility): input di dalam wrapper ini
     pakai outline:none tanpa pengganti apa pun -- fokus keyboard jadi tidak
     kelihatan sama sekali. Disamakan dengan pola .tx-search yang sudah benar. */
  .fan-catlist-search:focus-within{ border-color:rgba(150,255,190,0.45); box-shadow: 0 0 0 3px rgba(150,255,190,0.14); }
  .fan-catlist-search span{ font-size:12px; color:var(--text-muted); flex-shrink:0; }
  .fan-catlist-search input{ background:none; border:none; outline:none; color:var(--text-primary); font-size:12.5px; font-family:inherit; width:100%; min-width:0; }
  .fan-catlist-search input::placeholder{ color:var(--text-muted); }
  .fan-catrow{ padding:12px 0 4px; border-bottom:1px solid var(--hairline); }
  .fan-catrow:last-of-type{ border-bottom:none; }
  .fan-catrow-top{ display:flex; align-items:center; gap:10px; }
  .fan-catrow-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
  .fan-catrow-label{ flex:1; min-width:0; font-family:'Space Grotesk', sans-serif; font-size:14px; font-weight:600; color:var(--text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .fan-catrow-pct{ font-size:12px; color:var(--text-muted); flex-shrink:0; }
  .fan-catrow-amt{ font-family:'Space Grotesk', sans-serif; font-size:13.5px; font-weight:700; color:var(--text-primary); flex-shrink:0; }
  .fan-catrow-bar-track{ height:4px; border-radius:2px; background:var(--hairline); margin:9px 0 8px; overflow:hidden; }
  .fan-catrow-bar-fill{ height:100%; border-radius:2px; }
  .fan-catrow-toggle{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-muted); cursor:pointer; padding:2px 0 10px; user-select:none; }
  .fan-catrow-toggle .chev{ display:inline-block; transition:transform .2s ease; font-size:11px; }
  .fan-catrow-toggle.open .chev{ transform:rotate(180deg); }
  .fan-catrow-sub{ display:none; padding:2px 0 10px 19px; }
  .fan-catrow-sub.open{ display:block; }
  .fan-catrow-sub-item{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 0; font-size:12px; color:var(--text-muted); border-bottom:1px dashed var(--hairline); }
  .fan-catrow-sub-item:last-child{ border-bottom:none; }
  .fan-catrow-sub-item b{ color:var(--text-primary); font-weight:600; }
  .fan-catlist-empty{ text-align:center; font-size:12.5px; color:var(--text-muted); padding:18px 0; }

  /* ---- Apa yang berubah? ---- */
  .fan-change-box{ background:var(--surface-2); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:14px 16px; margin-bottom:10px; }
  .fan-change-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
  .fan-change-label{ font-size:12.5px; color:var(--text-muted); }
  .fan-change-value{ font-family:'Space Grotesk', sans-serif; font-size:21px; font-weight:700; color:var(--text-primary); margin-bottom:4px; }
  .fan-change-sub{ font-size:11.5px; color:var(--text-muted); }
  .fan-change-section-title{ display:flex; align-items:center; gap:7px; font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; margin:16px 0 10px; }
  .fan-change-section-title.up{ color:var(--financial-text); }
  .fan-change-section-title.down{ color:var(--habit-text); }
  .fan-change-catrow{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid var(--hairline); }
  .fan-change-catrow:last-child{ border-bottom:none; }
  .fan-change-catrow-left{ display:flex; align-items:center; gap:9px; min-width:0; }
  .fan-change-catrow-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
  .fan-change-catrow-name{ font-family:'Space Grotesk', sans-serif; font-size:13.5px; font-weight:600; color:var(--text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .fan-change-catrow-diff{ font-family:'JetBrains Mono', monospace; font-size:12.5px; font-weight:600; flex-shrink:0; }
  .fan-change-catrow-diff.up{ color:var(--financial-text); }
  .fan-change-catrow-diff.down{ color:var(--habit-text); }
  .fan-change-empty{ font-size:12.5px; color:var(--text-muted); padding:2px 0 4px; }

  /* ---- Kapan kamu sering boros?: chip statistik + kalender heatmap pengeluaran harian ---- */
  .fan-stat-chip-row{ display:flex; gap:10px; margin:14px 0 18px; }
  .fan-stat-chip{ flex:1; min-width:0; background:var(--surface-2); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:12px 14px; }
  .fan-stat-chip-label{ font-size:10px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--text-muted); margin-bottom:7px; }
  .fan-stat-chip-value{ font-family:'Space Grotesk', sans-serif; font-size:16.5px; font-weight:700; color:var(--text-primary); }
  .fan-stat-chip-value.accent{ color:var(--habit-text); }

  .fan-cal-wrap{ background:var(--surface-2); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:16px 10px; }
  .fan-cal-weekday-row{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:10px; }
  .fan-cal-weekday{ text-align:center; font-size:9.5px; font-weight:700; letter-spacing:.4px; color:var(--text-muted); text-transform:uppercase; }
  .fan-cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
  .fan-cal-cell{ aspect-ratio:1; border-radius:var(--cips-radius-md); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; color:var(--text-primary); background:var(--surface-1); }
  .fan-cal-cell.empty{ visibility:hidden; }
  .fan-cal-lvl1{ background:rgba(255,170,120,0.28); }
  .fan-cal-lvl2{ background:rgba(255,170,120,0.48); }
  .fan-cal-lvl3{ background:rgba(255,150,100,0.68); color:#3A1F0E; }
  .fan-cal-lvl4{ background:rgba(255,110,60,0.85); color:#fff; }
  .fan-cal-lvl5{ background:#FF5A36; color:#fff; }
  .fan-cal-legend{ display:flex; align-items:center; justify-content:center; gap:6px; margin-top:16px; font-size:10.5px; color:var(--text-muted); }
  .fan-cal-legend-dot{ width:11px; height:11px; border-radius:50%; flex-shrink:0; }

  /* ---- Pola harian: hari kerja vs akhir pekan + streak no-spend & hari aktif ---- */
  .fan-pattern-row{ display:flex; gap:18px; margin-bottom:20px; }
  .fan-pattern-col{ flex:1; min-width:0; }
  .fan-pattern-label-row{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:7px; gap:6px; }
  .fan-pattern-label{ font-family:'Space Grotesk', sans-serif; font-size:13.5px; font-weight:700; color:var(--text-primary); }
  .fan-pattern-range{ font-size:10.5px; color:var(--text-muted); white-space:nowrap; }
  .fan-pattern-value{ font-family:'Space Grotesk', sans-serif; font-size:17px; font-weight:700; color:var(--text-primary); margin-bottom:9px; }
  .fan-pattern-bar-track{ height:5px; border-radius:3px; background:var(--hairline); overflow:hidden; }
  .fan-pattern-bar-fill{ height:100%; border-radius:3px; transition:width .4s ease; }
  .fan-pattern-stat-row{ display:flex; gap:18px; padding-top:16px; border-top:1px solid var(--hairline); }
  .fan-pattern-stat{ flex:1; min-width:0; }
  .fan-pattern-stat-label{ font-size:12.5px; color:var(--text-muted); margin-bottom:7px; }
  .fan-pattern-stat-value{ font-family:'Space Grotesk', sans-serif; font-size:17px; font-weight:700; color:var(--text-primary); }
  .fan-pattern-stat-value.accent{ color:var(--habit-text); }
  .fan-pattern-stat-sub{ font-size:11px; color:var(--text-muted); margin-top:3px; }

  /* ---- Pengeluaran/Pemasukan tertinggi: kartu ranking harian ---- */
  .fan-toplist-box{ background:var(--surface-2); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:16px; margin-bottom:12px; }
  .fan-toplist-box:last-child{ margin-bottom:0; }
  .fan-toplist-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
  .fan-toplist-title{ font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--text-muted); }
  .fan-toplist-badge{ font-size:11.5px; font-weight:700; }
  .fan-toplist-badge.down{ color:var(--financial-text); }
  .fan-toplist-badge.up{ color:var(--habit-text); }
  .fan-toplist-row{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--hairline); }
  .fan-toplist-row:first-child{ padding-top:0; }
  .fan-toplist-row:last-child{ border-bottom:none; padding-bottom:0; }
  .fan-toplist-rank{ width:26px; height:26px; border-radius:50%; background:var(--surface-1); border:1px solid var(--hairline); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:var(--text-muted); flex-shrink:0; }
  .fan-toplist-date{ flex:1; min-width:0; }
  .fan-toplist-daynum{ font-family:'Space Grotesk', sans-serif; font-size:14.5px; font-weight:700; color:var(--text-primary); }
  .fan-toplist-dayname{ font-size:11.5px; color:var(--text-muted); margin-top:1px; }
  .fan-toplist-amt{ font-family:'Space Grotesk', sans-serif; font-size:15px; font-weight:700; flex-shrink:0; }
  .fan-toplist-amt.down{ color:var(--financial-text); }
  .fan-toplist-amt.up{ color:var(--habit-text); }
  .fan-toplist-empty{ font-size:12.5px; color:var(--text-muted); text-align:center; padding:8px 0 2px; }

  /* ---- Cashflow per akun: dikelompokkan per tipe akun (Bank/E-Wallet/Cash/dll) ---- */
  .fan-cfacc-groupname{ font-family:'Space Grotesk', sans-serif; font-size:14px; font-weight:700; color:var(--text-primary); margin:18px 0 10px; }
  .fan-cfacc-groupname:first-child{ margin-top:2px; }
  .fan-cfacc-card{ display:flex; align-items:center; gap:12px; background:var(--surface-2); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:14px 16px; margin-bottom:10px; }
  .fan-cfacc-card:last-child{ margin-bottom:0; }
  .fan-cfacc-avatar{ width:42px; height:42px; border-radius:var(--cips-radius-lg); display:flex; align-items:center; justify-content:center; font-size:16.5px; flex-shrink:0; font-family:'Space Grotesk', sans-serif; font-weight:700; }
  .fan-cfacc-main{ flex:1; min-width:0; }
  .fan-cfacc-name{ font-family:'Space Grotesk', sans-serif; font-size:14.5px; font-weight:700; color:var(--text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .fan-cfacc-type{ font-size:10.5px; color:var(--text-muted); letter-spacing:.5px; margin-top:3px; }
  .fan-cfacc-right{ text-align:right; flex-shrink:0; }
  .fan-cfacc-cf-label{ font-size:10.5px; color:var(--text-muted); }
  .fan-cfacc-cf-value{ font-family:'Space Grotesk', sans-serif; font-size:15px; font-weight:700; margin:3px 0 7px; white-space:nowrap; }
  .fan-cfacc-cf-value.up{ color:var(--habit-text); }
  .fan-cfacc-cf-value.down{ color:var(--financial-text); }
  .fan-cfacc-pills{ display:flex; gap:5px; justify-content:flex-end; }
  .fan-cfacc-pill{ font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:var(--cips-radius-md); white-space:nowrap; }
  .fan-cfacc-pill.up{ color:var(--habit-text); background:var(--habit-dim); }
  .fan-cfacc-pill.down{ color:var(--financial-text); background:var(--financial-dim); }
  .fan-cfacc-empty{ text-align:center; font-size:12.5px; color:var(--text-muted); padding:18px 0; }

  /* ---- Quick action row: Pemasukan / Pengeluaran / menu cepat (di bawah Total Saldo) ---- */
  .fdash-quick-row{ display:flex; align-items:center; gap:10px; margin:-2px 0 12px; }
  .fdash-quick-btn{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px; background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:12px 10px; cursor:pointer; font-family:'Space Grotesk', sans-serif; font-size:13px; font-weight:600; color:var(--text-primary); }
  .fdash-quick-btn:active{ transform:scale(.97); }
  .fdash-quick-icon{ width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; line-height:1; flex-shrink:0; }
  .fdash-quick-icon-income{ background:var(--habit-dim); color:var(--habit-text); }
  .fdash-quick-icon-expense{ background:var(--financial-dim); color:var(--financial-text); }
  .fdash-quick-fab{ width:46px; height:46px; border-radius:50%; background:var(--habit); border:none; color:#0A0C11; font-size:20px; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; box-shadow:0 6px 16px -4px rgba(150,255,190,0.45); transition: transform .18s var(--ease-spring), box-shadow .18s ease; }
  .fdash-quick-fab:active{ transform:scale(.88) rotate(90deg); box-shadow:0 4px 10px -4px rgba(150,255,190,0.45); }

  /* ---- Quick menu sheet (dibuka lewat tombol hijau) — kartu "Menu" berpaginasi ---- */
  .quick-menu-card{ background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:16px; transition: background-color .25s ease, border-color .25s ease;}
  .quick-menu-card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
  .quick-menu-card-title{ font-family:'Space Grotesk', sans-serif; font-size:14px; font-weight:700; color:var(--text-primary); }
  .quick-menu-page-count{ font-size:12px; color:var(--text-muted); }
  .quick-menu-pages{ overflow:hidden; }
  .quick-menu-track{ display:flex; transition:transform .28s ease; }
  .quick-menu-page{ flex:0 0 100%; display:grid; grid-template-columns:repeat(5, 1fr); gap:12px 6px; }
  .quick-menu-item{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; cursor:pointer; padding:4px 2px; }
  .quick-menu-item:active{ transform:scale(.94); }
  .quick-menu-icon{ width:46px; height:46px; border-radius:var(--cips-radius-lg); background:var(--surface-2); border:1px solid var(--hairline); display:flex; align-items:center; justify-content:center; font-size:19px; }
  .quick-menu-label{ font-family:'Space Grotesk', sans-serif; font-size:10.5px; font-weight:600; color:var(--text-primary); line-height:1.2; }
  .quick-menu-dots{ display:flex; align-items:center; justify-content:center; gap:6px; margin-top:14px; }
  .quick-menu-dot{ width:6px; height:6px; border-radius:3px; background:var(--hairline); cursor:pointer; transition:width .2s ease, background .2s ease; }
  .quick-menu-dot.active{ width:18px; background:var(--habit); }
  @media (max-width:420px){ .fdash-row{ grid-template-columns:1fr; } .txf-row-2{ grid-template-columns:1fr; } .fdash-quick-btn{ min-width:0; } }

  /* ---- Halaman Transaksi (riwayat gabungan Pemasukan + Pengeluaran) ---- */
  .tx-hero{ padding:4px 0 16px; }
  .tx-hero-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .tx-hero-title{ font-family:'Space Grotesk', sans-serif; font-size:27px; font-weight:700; color:var(--text-primary); letter-spacing:-.4px; }
  .tx-hero-sub{ font-size:12.5px; color:var(--text-muted); margin-top:6px; line-height:1.5; max-width:200px; }
  .tx-add-btn{ height:40px; padding:0 16px; border-radius:var(--cips-radius-lg); border:1px solid rgba(150,255,190,0.35); background:var(--habit-dim); color:var(--habit-text); font-family:'Space Grotesk', sans-serif; font-size:12.5px; font-weight:700; display:flex; align-items:center; gap:6px; cursor:pointer; flex-shrink:0; white-space:nowrap; box-shadow: 0 6px 16px -10px rgba(150,255,190,0.4); transition: transform .15s var(--ease-spring), box-shadow .15s ease; }
  .tx-add-btn:active{ transform:scale(0.96); box-shadow: 0 0 0 4px rgba(150,255,190,0.14); }

  .tx-search{ display:flex; align-items:center; gap:10px; background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:12px 14px; margin:6px 0 14px; box-shadow: 0 8px 20px -16px rgba(0,0,0,0.45); transition: border-color .15s ease, box-shadow .15s ease; }
  .tx-search:focus-within{ border-color:rgba(255,170,120,0.45); box-shadow: 0 0 0 3px rgba(255,170,120,0.14); }
  .tx-search input{ flex:1; border:none; background:none; outline:none; color:var(--text-primary); font-size:13.5px; font-family:inherit; min-width:0; }
  .tx-search input::placeholder{ color:var(--text-muted); }
  .tx-search-ico{ color:var(--text-muted); font-size:14px; flex-shrink:0; }

  .tx-filter-row{ display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; margin-bottom:6px; }
  .tx-filter-row::-webkit-scrollbar{ display:none; }
  .tx-filter-chip{ display:flex; align-items:center; gap:6px; white-space:nowrap; padding:9px 13px; border-radius:var(--cips-radius-lg); border:1px solid var(--hairline); background:var(--surface-1); color:var(--text-primary); font-size:12px; font-weight:600; font-family:'Space Grotesk', sans-serif; cursor:pointer; flex-shrink:0; transition: transform .15s var(--ease-spring), background .2s ease, border-color .2s ease, box-shadow .2s ease; }
  .tx-filter-chip:active{ transform:scale(0.94); }
  .tx-filter-chip.active{ background:var(--habit-dim); border-color:rgba(150,255,190,0.4); color:var(--habit-text); box-shadow: 0 0 0 3px rgba(150,255,190,0.10); }
  .tx-filter-chip .car{ font-size:9px; opacity:.65; }

  .tx-day-group{ margin-bottom:16px; }
  .tx-day-head{ display:flex; align-items:center; justify-content:space-between; margin:0 2px 10px; }
  .tx-day-label{ font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:1.2px; color:var(--text-muted); text-transform:uppercase; }
  .tx-day-total{ font-family:'JetBrains Mono', monospace; font-size:11.5px; font-weight:700; padding:4px 11px; border-radius:var(--cips-radius-md); }
  .tx-day-total.pos{ background:var(--habit-dim); color:var(--habit-text); }
  .tx-day-total.neg{ background:var(--financial-dim); color:var(--financial-text); }
  .tx-day-total.zero{ background:var(--surface-2); color:var(--text-muted); }

  .tx-row{ position:relative; overflow:hidden; border-radius:var(--cips-radius-lg); margin-bottom:10px; }
  .tx-row-delete-action{ position:absolute; top:0; right:0; bottom:0; width:72px; display:flex; align-items:center; justify-content:center; background:#e5484d; color:#fff; font-size:19px; cursor:pointer; border-radius:0 var(--cips-radius-lg) var(--cips-radius-lg) 0; }
  .tx-row-content{ display:flex; align-items:center; gap:12px; background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:12px; position:relative; z-index:1; touch-action:pan-y; box-shadow: 0 8px 20px -16px rgba(0,0,0,0.5); transition: transform .18s var(--ease-spring), box-shadow .15s ease, border-color .15s ease, background-color .25s ease; }
  .tx-row-content::before{ content:''; position:absolute; top:0; left:12px; right:12px; height:1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent); pointer-events:none; }
  .tx-row-content:active{ transform:scale(0.985); box-shadow: 0 3px 10px -8px rgba(0,0,0,0.45); }
  .tx-row-content.tx-row-swiped{ transform:translateX(-72px); }
  .tx-row-content.tx-row-dragging{ transition:none; }
  @media (prefers-reduced-motion: reduce){ .tx-row-content{ transition:none; } }
  .tx-row-ico{ width:44px; height:44px; border-radius:50%; background:var(--surface-2); display:flex; align-items:center; justify-content:center; font-size:19px; flex-shrink:0; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); }
  .tx-row-main{ flex:1; min-width:0; cursor:pointer; }
  .tx-row-title{ font-family:'Space Grotesk', sans-serif; font-size:13.5px; font-weight:700; color:var(--text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .tx-row-sub{ display:flex; align-items:center; gap:6px; margin-top:5px; flex-wrap:wrap; }
  .tx-row-tag{ font-size:10px; font-weight:600; color:var(--text-muted); background:var(--surface-2); padding:3px 8px; border-radius:var(--cips-radius-md); white-space:nowrap; max-width:130px; overflow:hidden; text-overflow:ellipsis; }
  .tx-row-meta{ font-size:10.5px; color:var(--text-muted); white-space:nowrap; }
  .tx-row-amt{ text-align:right; flex-shrink:0; cursor:pointer; }
  .tx-row-amt-value{ font-family:'JetBrains Mono', monospace; font-size:13.5px; font-weight:700; }
  .tx-row-kebab{ width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--text-muted); font-size:16px; cursor:pointer; flex-shrink:0; margin-left:2px; transition: transform .15s var(--ease-spring), background .2s ease; }
  .tx-row-kebab:active{ background:var(--surface-2); transform:scale(0.88); }

  .tx-sheet-options{ display:flex; flex-direction:column; gap:6px; max-height:52vh; overflow-y:auto; }
  .tx-sheet-opt.active{ background:var(--habit-dim); color:var(--habit-text); box-shadow: 0 0 0 3px rgba(150,255,190,0.10); }
  .tx-sheet-opt-check{ color:var(--habit-text); font-size:14px; }

  .tx-menu-opt{ display:flex; align-items:center; gap:12px; padding:14px; border-radius:var(--cips-radius-lg); background:var(--surface-2); font-size:14px; font-weight:600; color:var(--text-primary); cursor:pointer; margin-bottom:8px; box-shadow: 0 6px 14px -12px rgba(0,0,0,0.5); transition: transform .15s var(--ease-spring), box-shadow .2s ease; }
  .tx-menu-opt:active{ transform:scale(0.98); box-shadow: 0 0 0 4px rgba(255,255,255,0.05); }
  .tx-menu-opt.danger{ color:var(--financial-text); }

  /* ---- Sheet "Transaksi baru" (tombol + Tambah Transaksi di halaman Transaksi) ---- */
  .txf-type-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
  .txf-type-btn{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:16px 10px; border-radius:var(--cips-radius-lg); border:1px solid var(--hairline); background:var(--surface-2); color:var(--text-primary); font-family:'Space Grotesk', sans-serif; font-size:14px; font-weight:600; cursor:pointer; box-shadow: 0 8px 18px -14px rgba(0,0,0,0.5); transition: transform .15s var(--ease-spring), background .2s ease, border-color .2s ease, box-shadow .2s ease; }
  .txf-type-btn:active{ transform:scale(0.96); }
  .txf-type-btn .txf-type-ico{ font-size:20px; line-height:1; }
  .txf-type-btn.active{ border-color:var(--financial); background:var(--surface-3, var(--surface-2)); box-shadow: 0 0 0 3px rgba(255,170,120,0.16), 0 8px 18px -12px rgba(255,170,120,0.35); }
  .txf-row-2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
  .txf-field-label{ font-size:13px; color:var(--text-secondary, var(--text-primary)); margin-bottom:6px; display:block; }
  .txf-field-block{ margin-bottom:14px; }
  .txf-field-block .field-input{ width:100%; text-align:left; box-sizing:border-box; }
  .txf-amount-input{ font-size:20px; padding:12px 14px; }

  .grid{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-bottom:14px; }

  .section-label{
    font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:2px;
    text-transform:uppercase; color:var(--habit-text); margin: 4px 2px 10px;
  }

  /* ---- Religion dashboard: header "Ibadah Hub" ---- */
  .ibadah-header{ display:flex; align-items:center; gap:10px; padding-top:2px; margin-bottom:18px; }
  .ibadah-header-brand{ display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
  .ibadah-header-logo{
    width:40px; height:40px; border-radius:var(--cips-radius-md); flex-shrink:0;
    background: conic-gradient(from 45deg, var(--ibadah), var(--habit), var(--ibadah));
    display:flex; align-items:center; justify-content:center; font-size:18px; color:#0A0C11;
    box-shadow: 0 6px 16px -6px rgba(255,214,140,0.55);
    position:relative;
  }
  .ibadah-header-logo::after{
    content:""; position:absolute; inset:-5px; border-radius:15px;
    background: radial-gradient(circle, rgba(255,214,140,0.3), transparent 72%);
    z-index:-1;
  }
  .ibadah-header-title{ font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:16.5px; color:var(--text-primary); }
  .ibadah-header-tagline{ font-size:11px; color:var(--ibadah-text); letter-spacing:0.2px; margin-top:1px; }
  .ibadah-bell{ position:relative; flex-shrink:0; }
  .ibadah-bell::after{ content:""; position:absolute; top:7px; right:7px; width:6px; height:6px; border-radius:50%; background:var(--habit); box-shadow:0 0 0 2px var(--surface-1); }

  /* ---- Religion dashboard: kartu Sholat Berikutnya (mengikuti mockup Ibadah Hub) ---- */
  .religion-next-card{
    position:relative; overflow:hidden;
    background: linear-gradient(160deg, rgba(255,214,140,0.12) 0%, var(--surface-1) 60%);
    border: 1px solid rgba(255,214,140,0.3);
    border-radius: 26px; padding: 22px; margin-bottom: 16px;
    box-shadow: 0 20px 44px -24px rgba(255,214,140,0.35), 0 6px 18px -12px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05); transition: background-color .25s ease, border-color .25s ease;}
  .religion-next-card::after{
    content:''; position:absolute; top:0; left:16px; right:16px; height:1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
    pointer-events:none; z-index:1;
  }
  .religion-next-card::before{
    content:""; position:absolute; top:-70px; right:-70px; width:200px; height:200px; border-radius:50%;
    background: radial-gradient(circle, rgba(150,255,190,0.20), transparent 70%);
  }
  .religion-next-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; position:relative; z-index:1; }
  .religion-next-eyebrow{
    font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:2.5px;
    color:var(--habit-text); text-transform:uppercase; margin-bottom:6px;
  }
  .religion-next-name{ font-family:'Space Grotesk', sans-serif; font-size:23px; font-weight:700; color:var(--text-primary); letter-spacing:-0.3px; }
  .religion-next-time{ font-family:'JetBrains Mono', monospace; font-size:32px; font-weight:700; color:var(--ibadah-text); letter-spacing:-0.5px; margin-top:2px; }
  .religion-next-ring{ width:76px; height:76px; flex-shrink:0; }
  .religion-next-ring svg{ width:76px; height:76px; }
  .religion-next-countdown{ font-size:13.5px; color:var(--text-muted); margin-top:16px; position:relative; z-index:1; }
  .religion-next-countdown b{ color:var(--habit-text); font-family:'JetBrains Mono', monospace; font-weight:600; }
  .religion-next-date{ font-size:12px; color:var(--text-muted); margin-top:4px; position:relative; z-index:1; opacity:0.85; }
  .religion-arch-deco{ position:absolute; top:0; right:0; pointer-events:none; }
  .religion-next-location{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,214,140,0.18);
    position:relative; z-index:1;
  }
  .religion-next-location-text{ font-size:12px; color:var(--text-muted); line-height:1.4; flex:1; min-width:0; }
  .religion-next-location-text b{ color:var(--text-primary); }
  .religion-check-btn{
    display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
    margin-top:12px; padding:12px 16px; border-radius:var(--cips-radius-lg); border:1px solid rgba(255,214,140,0.4);
    background:var(--ibadah); color:#20180A; font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:14px;
    cursor:pointer; transition: transform .15s var(--ease-spring), box-shadow .15s ease;
    box-shadow: 0 10px 22px -14px rgba(255,214,140,.5); position:relative; z-index:1;
  }
  .religion-check-btn:active{ transform:scale(0.97); box-shadow: 0 0 0 4px rgba(255,214,140,0.14); }
  .religion-check-btn:disabled{ background:var(--surface-2); color:var(--text-muted); border-color:rgba(255,255,255,0.08); box-shadow:none; cursor:not-allowed; opacity:0.6; }
  .religion-check-btn:disabled:active{ transform:none; box-shadow:none; }

  .dzikir-plus-btn{
    width:38px; height:38px; border-radius:var(--cips-radius-md); flex-shrink:0; cursor:pointer;
    background:var(--ibadah); color:#0A0C11; border:none; font-size:20px; font-weight:700;
    display:flex; align-items:center; justify-content:center; transition: transform .15s var(--ease-spring), box-shadow .15s ease;
    box-shadow: 0 8px 18px -8px rgba(255,214,140,.6);
  }
  .dzikir-plus-btn:active{ transform:scale(0.9); box-shadow: 0 3px 10px -6px rgba(255,214,140,.5); }

  .prayer-row{
    display:flex; align-items:center; gap:12px; background:var(--surface-1);
    border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:11px 14px; margin-bottom:8px;
    transition: box-shadow .2s ease, border-color .2s ease, background .2s ease;
    box-shadow: 0 6px 16px -12px rgba(0,0,0,0.4);
  }
  .prayer-row.current{ border-color: rgba(255,214,140,0.45); background: var(--ibadah-dim); box-shadow: 0 8px 20px -12px rgba(255,214,140,0.35), 0 6px 16px -12px rgba(0,0,0,0.35); }
  .prayer-row-icon{
    width:36px; height:36px; border-radius:var(--cips-radius-md); display:flex; align-items:center; justify-content:center;
    font-size:16px; background:var(--habit-dim); color:var(--habit-text); flex-shrink:0;
  }
  .prayer-row.current .prayer-row-icon{ background: rgba(255,214,140,0.20); color:var(--ibadah-text); }
  .prayer-row-name{ font-family:'Space Grotesk', sans-serif; font-size:14.5px; font-weight:600; color:var(--text-primary); }
  .prayer-row-time{
    font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--text-muted);
    margin-left:auto; margin-right:4px;
  }
  .prayer-row.current .prayer-row-time{ color:var(--ibadah-text); font-weight:600; }

  .mini-progress-card{
    display:flex; align-items:center; gap:14px; background:var(--surface-1);
    border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:14px 16px; margin-bottom:10px;
    cursor:pointer; transition: transform .15s var(--ease-spring), box-shadow .15s ease, background-color .25s ease, border-color .25s ease;
    box-shadow: 0 8px 20px -14px rgba(0,0,0,0.45);
  }
  .mini-progress-card:active{ transform:scale(0.98); box-shadow: 0 3px 10px -8px rgba(0,0,0,0.4); }
  .mini-progress-icon{
    width:44px; height:44px; border-radius:var(--cips-radius-md); display:flex; align-items:center; justify-content:center;
    font-size:19px; flex-shrink:0; background:var(--ibadah-dim); color:var(--ibadah-text);
  }
  .mini-progress-body{ flex:1; min-width:0; }
  .mini-progress-label{
    font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:1.5px;
    text-transform:uppercase; color:var(--text-muted); margin-bottom:3px;
  }
  .mini-progress-value-row{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
  .mini-progress-value{ font-family:'Space Grotesk', sans-serif; font-size:15.5px; font-weight:700; color:var(--text-primary); }
  .mini-progress-pct{ font-family:'JetBrains Mono', monospace; font-size:13px; font-weight:600; color:var(--ibadah-text); flex-shrink:0; }
  .mini-progress-bar-track{ height:6px; border-radius:3px; background:rgba(130,140,160,0.16); margin-top:8px; overflow:hidden; }
  .mini-progress-bar-fill{ height:100%; border-radius:3px; background:var(--ibadah); transition: width .4s ease; }
  .mini-progress-hint{ font-size:11.5px; color:var(--text-muted); margin-top:6px; }
  .mini-progress-chevron{ color:var(--text-muted); font-size:16px; flex-shrink:0; }

  .subheader{ display:flex; align-items:center; justify-content:space-between; padding:16px 2px 18px; position:relative; }
  .subheader-title{ font-family:'Space Grotesk', sans-serif; font-size:19px; font-weight:700; color:var(--text-primary); letter-spacing:-.2px; }
  .subheader-spacer{ width:38px; }

  .cat-card{
    background: var(--surface-1); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg);
    padding:18px; display:flex; align-items:center; gap:14px; margin-bottom:12px; cursor:pointer;
    transition: transform .15s var(--ease-spring), box-shadow .15s ease, background-color .25s ease, border-color .25s ease;
    box-shadow: 0 8px 20px -14px rgba(0,0,0,0.45);
  }
  .cat-card:active{ transform:scale(0.98); box-shadow: 0 3px 10px -8px rgba(0,0,0,0.4); }
  .cat-icon{ width:46px; height:46px; border-radius:var(--cips-radius-lg); display:flex; align-items:center; justify-content:center; font-size:21px; flex-shrink:0; }
  .cat-title{ font-family:'Space Grotesk', sans-serif; font-size:15px; font-weight:600; color:var(--text-primary); margin-bottom:2px; }
  .cat-desc{ font-size:12.5px; color:var(--text-muted); line-height:1.4; }
  .cat-chevron{ margin-left:auto; color:var(--text-muted); font-size:15px; }

  .stat-card{ background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:16px 18px; margin-bottom:10px; display:flex; justify-content:space-between; align-items:center; transition: background-color .25s ease, border-color .25s ease;}
  .stat-name{ font-size:13px; color:var(--text-muted); }
  .stat-value{ font-family:'JetBrains Mono', monospace; font-size:14.5px; font-weight:600; color:var(--text-primary); }

  .progress-block{ background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:18px; margin-bottom:16px; box-shadow: 0 10px 24px -18px rgba(0,0,0,0.5); }
  .progress-block.clickable{ cursor:pointer; }
  .progress-block-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
  .progress-block-header .progress-block-title{ margin-bottom:0; }
  .progress-block-chevron{ font-size:16px; color:var(--text-muted); transition:transform .3s var(--ease-spring); flex-shrink:0; }
  .progress-block-chevron.open{ transform:rotate(90deg); }
  .progress-block-title{ font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-muted); margin-bottom:14px; }
  .progress-row{ margin-bottom:12px; }
  .progress-row:last-child{ margin-bottom:0; }
  .progress-row-top{ display:flex; justify-content:space-between; font-size:12.5px; margin-bottom:6px; }
  .progress-row-top span:first-child{ color:var(--text-primary); font-weight:600; }
  .progress-row-top span:last-child{ font-family:'JetBrains Mono', monospace; color:var(--text-muted); }
  .progress-bar{ height:8px; border-radius:5px; background:rgba(130,140,160,0.16); overflow:hidden; }
  .progress-fill{ height:100%; border-radius:5px; transition: width .4s ease; }

  .list-item{ background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:14px 16px; margin-bottom:10px; box-shadow: 0 6px 16px -12px rgba(0,0,0,0.45); transition: transform .15s var(--ease-spring), box-shadow .15s ease, background-color .25s ease, border-color .25s ease; }
  .list-item-row{ display:flex; align-items:center; gap:12px; }
  .list-item input[type="checkbox"]:not(.switch input){ width:20px; height:20px; accent-color: var(--ibadah); flex-shrink:0; cursor:pointer; }
  .item-info{ flex:1; min-width:0; }
  .item-name{ font-family:'Space Grotesk', sans-serif; font-size:14.5px; font-weight:600; color:var(--text-primary); }
  .item-name.done{ text-decoration: line-through; opacity:0.55; }
  .item-time{ font-size:12px; color:var(--text-muted); margin-top:2px; font-family:'JetBrains Mono', monospace; }
  .section-caption{ font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-muted); margin: 18px 2px 10px; }
  .section-caption:first-child{ margin-top:0; }

  .switch{ position:relative; display:inline-block; width:36px; height:21px; flex-shrink:0; }
  .switch input{ opacity:0; width:0; height:0; }
  .slider{ position:absolute; cursor:pointer; inset:0; background:var(--hairline); transition:.2s; border-radius:22px; }
  .slider:before{ content:""; position:absolute; height:15px; width:15px; left:3px; bottom:3px; background:#fff; transition:.2s; border-radius:50%; }
  .switch input:checked + .slider{ background:var(--ibadah); }
  .switch input:checked + .slider:before{ transform:translateX(15px); }

  .settings-hero{
    display:flex; align-items:center; gap:12px; padding:16px; margin:2px 0 18px;
    background: linear-gradient(155deg, rgba(195,166,255,0.12) 0%, var(--surface-1) 65%);
    border: 1px solid rgba(195,166,255,0.28); border-radius: 22px;
    box-shadow: 0 18px 38px -24px rgba(195,166,255,0.4), inset 0 1px 0 rgba(255,255,255,0.04); transition: background-color .25s ease, border-color .25s ease;}
  .settings-header-icon{
    width:42px; height:42px; border-radius:var(--cips-radius-md); flex-shrink:0;
    background: linear-gradient(145deg, #E3D4FF, var(--settings) 55%, #7A54D6);
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 8px 18px -6px rgba(195,166,255,0.6), inset 0 1px 0 rgba(255,255,255,0.35);
    position:relative;
  }
  .settings-header-icon::after{
    content:""; position:absolute; inset:-5px; border-radius:16px;
    background: radial-gradient(circle, rgba(195,166,255,0.35), transparent 72%);
    z-index:-1;
  }
  .settings-hero-title{ font-family:'Space Grotesk', sans-serif; font-size:19px; font-weight:700; color:var(--text-primary); letter-spacing:-.2px; }
  .settings-hero-tagline{ font-size:12px; color:var(--text-muted); margin-top:4px; }

  .settings-block{
    background: linear-gradient(160deg, rgba(195,166,255,0.05) 0%, var(--surface-1) 40%, var(--surface-2) 130%);
    border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:16px 18px; margin-bottom:14px;
    box-shadow: 0 14px 30px -20px rgba(195,166,255,0.22), inset 0 1px 0 rgba(255,255,255,0.03); transition: background-color .25s ease, border-color .25s ease;}
  .settings-label{ font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-muted); margin-bottom:12px; }
  .toggle-group{ display:flex; gap:8px; }
  .toggle-btn{
    flex:1; padding:10px; text-align:center; border-radius:var(--cips-radius-md); border:1px solid var(--hairline);
    background:var(--surface-2); color:var(--text-muted); font-size:13px; font-weight:600; cursor:pointer;
    font-family:'Space Grotesk', sans-serif; transition: transform .15s var(--ease-spring), background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
  }
  .toggle-btn:active{ transform:scale(0.96); }
  .toggle-btn.active{ background:var(--settings-dim); border-color:var(--settings); color:var(--settings-text); box-shadow: 0 0 0 1px rgba(195,166,255,.15), 0 6px 16px -8px rgba(195,166,255,.4); }
  .settings-desc{ font-size:12.5px; color:var(--text-muted); margin-top:10px; line-height:1.5; }

  .empty-state{ display:flex; flex-direction:column; align-items:center; text-align:center; padding: 30px 16px 26px; }
  .empty-state-icon{
    width:52px; height:52px; border-radius:var(--cips-radius-lg); margin-bottom:14px;
    background:var(--surface-2); border:1px solid var(--hairline);
    display:flex; align-items:center; justify-content:center; font-size:24px;
    box-shadow: 0 10px 22px -14px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
  }
  .empty-state-text{ font-size:12.5px; color:var(--text-muted); line-height:1.55; max-width:230px; }

  /* ---- PWA: banner "instal ke layar utama" ---- */
  .install-banner{
    position:absolute; left:14px; right:14px; bottom:14px; z-index:40;
    background:var(--surface-1); border:1px solid rgba(150,255,190,0.32); border-radius:var(--cips-radius-lg);
    padding:14px 14px 14px 16px; display:flex; align-items:center; gap:12px;
    box-shadow: 0 16px 32px -12px rgba(0,0,0,0.5);
    transform:translateY(14px) scale(0.98); opacity:0; pointer-events:none;
    transition: transform .25s cubic-bezier(.34,1.56,.64,1), opacity .25s ease;
  }
  .install-banner.show{ transform:translateY(0) scale(1); opacity:1; pointer-events:auto; }
  .install-banner-icon{
    width:42px; height:42px; border-radius:var(--cips-radius-md); flex-shrink:0; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 4px 10px -4px rgba(0,0,0,0.4);
  }
  .install-banner-body{ flex:1; min-width:0; }
  .install-banner-title{ font-size:13px; font-weight:600; color:var(--text-primary); }
  .install-banner-sub{ font-size:11.5px; color:var(--text-muted); margin-top:2px; line-height:1.4; }
  .install-banner-actions{ display:flex; align-items:center; gap:6px; flex-shrink:0; }
  .install-banner-btn{
    background:var(--habit); color:#0A0C11; font-weight:600; font-size:12px;
    border:none; border-radius:var(--cips-radius-md); padding:9px 12px; cursor:pointer; white-space:nowrap;
  }
  .install-banner-close{
    background:none; border:none; color:var(--text-muted); font-size:15px; cursor:pointer;
    width:26px; height:26px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .install-steps{ margin-top:12px; }
  .install-step{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--hairline); }
  .install-step:last-child{ border-bottom:none; }
  .install-step-num{
    width:26px; height:26px; border-radius:50%; background:var(--habit-dim); color:var(--habit-text);
    font-family:'JetBrains Mono', monospace; font-size:12px; font-weight:600;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .install-step-text{ font-size:13px; color:var(--text-primary); line-height:1.4; }
  .install-status-badge{
    display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:var(--habit-text);
    background:var(--habit-dim); border-radius:var(--cips-radius-sm); padding:4px 9px; margin-top:8px;
  }

  .field-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
  .field-row:last-child{ margin-bottom:0; }
  /* Khusus form modul Finance (Akun, Budget, Tagihan, dst di sheet #financeModuleFields):
     label diletakkan di atas, input/select memanjang penuh ke kanan di bawahnya. Tidak
     memengaruhi .field-row di tempat lain (habit, health, dsb) karena discope ke selector ini saja. */
  #financeModuleFields .field-row{ flex-direction:column; align-items:stretch; gap:6px; }
  #financeModuleFields .field-row label{ flex:none; }
  #financeModuleFields .field-row .field-input{ width:100% !important; text-align:left; }
  .field-required-star{ color:var(--danger-text); font-size:11px; vertical-align:top; margin-left:3px; }
  .field-help-text{ font-size:11.5px; color:var(--text-muted); margin-top:-3px; line-height:1.4; }
  .field-row label{ font-size:13px; color:var(--text-primary); flex:1; }
  .field-input{ width:120px; text-align:right; background:var(--surface-2); border:1px solid var(--hairline); color:var(--text-primary); border-radius:var(--cips-radius-md); padding:8px 10px; font-family:'JetBrains Mono', monospace; font-size:16px; transition: border-color .15s ease, box-shadow .15s ease; }
  .field-input:focus{ outline:none; border-color:var(--ibadah); box-shadow: 0 0 0 3px rgba(255,214,140,0.16); }

  /* ==== Bank/E-Wallet Picker (Pilih Bank / Pilih E-Wallet di form Tambah Akun) ==== */
  .logo-picker-trigger{
    width:100%; display:flex; align-items:center; gap:10px; background:var(--surface-2);
    border:1px solid var(--hairline); color:var(--text-primary); border-radius:var(--cips-radius-md);
    padding:8px 10px; font-family:'Space Grotesk', sans-serif; font-size:14px; text-align:left;
    cursor:pointer; transition: border-color .15s ease;
  }
  .logo-picker-trigger:disabled{ opacity:0.45; cursor:default; }
  .logo-picker-trigger.placeholder .logo-picker-trigger-label{ color:var(--text-muted); }
  .logo-picker-trigger-label{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .logo-picker-trigger-caret{ color:var(--text-muted); font-size:11px; flex-shrink:0; }

  /* Selector digabung (.day-sheet.logo-picker-sheet, bukan cuma .logo-picker-sheet)
     supaya spesifisitasnya LEBIH TINGGI dari aturan generik .day-sheet{ z-index:31 }
     di bawah — sebelumnya z-index:161 di sini kalah oleh .day-sheet karena aturan
     generik itu letaknya belakangan di stylesheet (spesifisitas sama = urutan yg
     menang), jadi sheet ini kepakai z-index:31 juga dan ketutup layar onboarding. */
  .day-sheet.logo-picker-sheet{
    z-index:161; height:min(78dvh, 680px); max-height:78dvh;
    display:flex; flex-direction:column; overflow:hidden;
  }
  .day-sheet-backdrop.logo-picker-backdrop{ z-index:160; }
  .logo-picker-search-wrap{
    flex:0 0 auto; padding:4px 0 10px; position:relative;
    background:var(--surface-1); z-index:2;
  }
  .logo-picker-search{
    width:100%; box-sizing:border-box; min-height:44px; padding:11px 14px;
    border:1px solid var(--hairline); border-radius:14px;
    background:var(--surface-2); color:var(--text-primary);
    font:500 14px/1.2 Inter,sans-serif; outline:none;
  }
  .logo-picker-search:focus{ border-color:rgba(150,255,190,.55); box-shadow:0 0 0 2px rgba(150,255,190,.10); }
  .logo-picker-list{
    flex:1 1 auto; min-height:0; display:flex; flex-direction:column; gap:4px;
    margin-top:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch; scrollbar-width:thin; padding:2px 2px 18px;
  }
  .logo-picker-item{ flex:0 0 auto; min-height:44px; box-sizing:border-box; }
  .logo-picker-empty{ padding:24px 12px; text-align:center; color:var(--text-muted); font-size:13px; }
  .logo-picker-item{
    display:flex; align-items:center; gap:12px; padding:10px 8px; border-radius:var(--cips-radius-lg);
    cursor:pointer; transition: background .12s ease; border:1px solid transparent;
  }
  .logo-picker-item:active{ transform:scale(0.98); }
  .logo-picker-item.selected{ background:var(--surface-2); border-color:var(--hairline); }
  .logo-picker-item-name{ flex:1; min-width:0; font-size:14px; color:var(--text-primary); font-weight:600; }
  .logo-picker-item-check{ color:var(--habit-text); font-size:15px; flex-shrink:0; }
  .backup-textarea{
    width:100%; height:160px; resize:none; background:var(--surface-2); border:1px solid var(--hairline);
    color:var(--text-primary); border-radius:var(--cips-radius-md); padding:10px 12px; font-family:'JetBrains Mono', monospace;
    font-size:11px; line-height:1.5; margin-bottom:10px;
  }
  .settings-block.clickable{ cursor:pointer; }

  .cat-edit-row{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
  .cat-label-input{ flex:1; min-width:0; background:var(--surface-2); border:1px solid var(--hairline); color:var(--text-primary); border-radius:var(--cips-radius-md); padding:8px 10px; font-size:13px; font-family:'Inter', sans-serif; }
  .cat-del-btn{ width:30px; height:30px; border-radius:var(--cips-radius-md); border:1px solid var(--hairline); background:var(--surface-2); color:var(--text-muted); font-size:13px; cursor:pointer; flex-shrink:0; }
  .cat-del-btn:active{ transform:scale(0.92); }
  .add-cat-btn{ width:100%; padding:10px; border-radius:var(--cips-radius-md); border:1px dashed var(--hairline); background:transparent; color:var(--financial-text); font-family:'Space Grotesk', sans-serif; font-size:13px; font-weight:600; cursor:pointer; margin-top:2px; }
  .add-cat-btn:active{ transform:scale(0.98); }
  .entry-actions{ display:flex; align-items:center; gap:8px; margin-top:8px; }
  .entry-edit-btn, .entry-delete-btn{
    padding:10px 12px; border-radius:var(--cips-radius-md); border:1px solid var(--hairline);
    background:transparent; font-family:'Space Grotesk', sans-serif; font-size:12.5px; font-weight:600;
    cursor:pointer; transition: transform .15s ease; flex-shrink:0;
  }
  .entry-edit-btn{ color:var(--kesehatan-text); border-color:rgba(130,205,255,0.35); }
  .entry-delete-btn{ color:#FF6B6B; border-color:rgba(255,107,107,0.4); }
  .entry-edit-btn:active, .entry-delete-btn:active{ transform:scale(0.94); }
  .entry-status{
    flex:1; text-align:center; font-size:12px; color:var(--habit-text);
    font-family:'JetBrains Mono', monospace; opacity:0; transition:opacity .2s ease; white-space:nowrap;
  }
  .entry-status.show{ opacity:1; }

  /* ==== Finance: Akun Finansial (ditambahkan lewat Menu Cepat) ==== */
  .fin-acc-chips{ display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; }
  .fin-acc-chips::-webkit-scrollbar{ display:none; }
  .fin-acc-chip.active{ background:var(--habit); color:#0A0C11; border-color:var(--habit); box-shadow: 0 6px 16px -8px rgba(150,255,190,0.5); }
  .fin-acc-card{ background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:14px 16px; margin-bottom:10px; display:flex; align-items:center; gap:12px; cursor:pointer; position:relative; overflow:hidden; box-shadow: 0 10px 24px -18px rgba(255,170,120,0.28), 0 6px 16px -14px rgba(0,0,0,0.5); transition: transform .15s var(--ease-spring), box-shadow .15s ease, border-color .15s ease; }
  .fin-acc-card::before{ content:''; position:absolute; top:0; left:14px; right:14px; height:1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent); pointer-events:none; }
  .fin-acc-card:active{ transform:scale(0.98); box-shadow: 0 3px 10px -8px rgba(0,0,0,0.45); }
  .fin-acc-main{ flex:1; min-width:0; }
  .fin-acc-name{ font-family:'Space Grotesk', sans-serif; font-size:14px; font-weight:700; color:var(--text-primary); }
  .fin-acc-type{ font-size:10.5px; color:var(--text-muted); letter-spacing:0.5px; margin-top:3px; }
  .fin-acc-right{ text-align:right; flex-shrink:0; }
  .fin-acc-saldo-label{ font-size:10.5px; color:var(--text-muted); }
  .fin-acc-saldo-value{ font-family:'JetBrains Mono', monospace; font-size:13.5px; font-weight:700; color:var(--text-primary); margin-top:4px; }
  .fin-acc-kebab{ color:var(--text-muted); font-size:17px; padding:2px 4px; flex-shrink:0; }

  /* ==== Finance: Kalender (ditambahkan lewat Menu Cepat) ==== */
  .fin-cal-weekdays{ display:grid; grid-template-columns:repeat(7,1fr); text-align:center; font-size:11px; color:var(--text-muted); margin-bottom:6px; }
  .fin-cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
  .fin-cal-day{ position:relative; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; border-radius:var(--cips-radius-md); font-family:'JetBrains Mono', monospace; font-size:12.5px; color:var(--text-primary); cursor:pointer; background:var(--surface-2); transition: transform .15s var(--ease-spring), background .2s ease, box-shadow .2s ease; }
  .fin-cal-day:active{ transform:scale(0.88); }
  .fin-cal-day.empty{ visibility:hidden; cursor:default; }
  .fin-cal-day.selected{ background:var(--habit-dim); color:var(--habit-text); font-weight:700; box-shadow: 0 0 0 3px rgba(150,255,190,0.12); }
  .fin-cal-day.today{ border:1px solid var(--habit); }
  .fin-cal-dot{ position:absolute; bottom:5px; width:4px; height:4px; border-radius:50%; background:var(--financial); }
  .fin-mod-progress{ margin-top:10px; }

  /* ==== Religion module ==== */
  .cat-card.soon{ opacity:0.55; }

  /* ---- Doa (dua collection) ---- */
  .doa-search-wrap{ position:relative; margin-bottom:12px; }
  .doa-search-wrap .health-input{ padding-left:38px; }
  .doa-search-ic{ position:absolute; left:13px; top:50%; transform:translateY(-50%); font-size:14px; opacity:0.55; pointer-events:none; }
  .doa-chip-row{ display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px; margin-bottom:14px; scrollbar-width:none; }
  .doa-chip-row::-webkit-scrollbar{ display:none; }
  .doa-chip{
    flex-shrink:0; font-family:'Inter', sans-serif; font-size:12.5px; font-weight:600; color:var(--text-muted);
    background:var(--surface-1); border:1px solid var(--hairline); border-radius:999px; padding:8px 14px; cursor:pointer;
    transition: all .15s ease; white-space:nowrap; display:flex; align-items:center; gap:5px;
  }
  .doa-chip.active{ background:var(--ibadah); border-color:var(--ibadah); color:#20180A; }
  .doa-card{
    display:flex; align-items:center; gap:13px; background:var(--surface-1); border:1px solid var(--hairline);
    border-radius:var(--cips-radius-lg); padding:14px 15px; margin-bottom:10px; cursor:pointer;
    transition: transform .15s var(--ease-spring), box-shadow .15s ease; box-shadow: 0 8px 18px -14px rgba(0,0,0,0.45);
  }
  .doa-card:active{ transform:scale(0.98); }
  .doa-card-icon{ width:42px; height:42px; border-radius:var(--cips-radius-md); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; background:var(--ibadah-dim); color:var(--ibadah-text); }
  .doa-card-body{ flex:1; min-width:0; }
  .doa-card-title{ font-family:'Space Grotesk', sans-serif; font-size:14.5px; font-weight:600; color:var(--text-primary); }
  .doa-card-cat{ font-size:11.5px; color:var(--text-muted); margin-top:2px; }
  .doa-card-star{ font-size:17px; flex-shrink:0; color:var(--hairline); transition: transform .2s var(--ease-spring), color .2s ease; }
  .doa-card-star.fav{ color:var(--ibadah-text); text-shadow: 0 0 8px rgba(255,214,140,.5); }
  .doa-empty{ text-align:center; padding:40px 16px; color:var(--text-muted); font-size:13px; }
  .doa-empty-ic{ font-size:34px; margin-bottom:10px; opacity:0.6; }

  .doa-detail-hero{
    background: linear-gradient(160deg, var(--ibadah-dim) 0%, var(--surface-1) 130%);
    border:1px solid rgba(255,214,140,0.3); border-radius:22px; padding:20px; margin-bottom:16px; position:relative;
  }
  .doa-detail-cat{ font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ibadah-text); margin-bottom:6px; }
  .doa-detail-title{ font-family:'Space Grotesk', sans-serif; font-size:19px; font-weight:700; color:var(--text-primary); letter-spacing:-.2px; padding-right:40px; }
  .doa-detail-fav-btn{
    position:absolute; top:18px; right:16px; width:38px; height:38px; border-radius:50%; background:var(--surface-1);
    border:1px solid var(--hairline); display:flex; align-items:center; justify-content:center; font-size:18px;
    color:var(--hairline); cursor:pointer; transition: all .2s var(--ease-spring);
  }
  .doa-detail-fav-btn.fav{ color:var(--ibadah-text); border-color:var(--ibadah); box-shadow: 0 0 10px 1px rgba(255,214,140,.35); }
  .doa-arabic{ font-family:'Amiri', serif; font-size:26px; line-height:2.1; text-align:right; direction:rtl; color:var(--text-primary); margin-top:16px; }
  .doa-latin{ font-family:'Inter', sans-serif; font-size:13.5px; font-style:italic; color:var(--ibadah-text); line-height:1.6; margin-top:14px; }
  .doa-translation-block{ background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:16px 18px; margin-bottom:14px; }
  .doa-translation-label{ font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-muted); margin-bottom:8px; }
  .doa-translation-text{ font-size:14px; line-height:1.65; color:var(--text-primary); }
  .doa-source{ font-size:11.5px; color:var(--text-muted); margin-top:10px; }
  .doa-detail-actions{ display:flex; gap:10px; margin-top:4px; margin-bottom:16px; }
  .doa-action-btn{
    flex:1; display:flex; align-items:center; justify-content:center; gap:6px; padding:12px; border-radius:var(--cips-radius-lg);
    background:var(--surface-1); border:1px solid var(--hairline); color:var(--text-primary); font-size:13px; font-weight:600;
    font-family:'Inter', sans-serif; cursor:pointer; transition: transform .15s var(--ease-spring);
  }
  .doa-action-btn:active{ transform:scale(0.96); }
  .doa-today-card{ background: linear-gradient(160deg, var(--ibadah-dim) 0%, var(--surface-1) 130%); border:1px solid rgba(255,214,140,0.3); }
  .doa-today-arabic{ font-family:'Amiri', serif; font-size:17px; text-align:right; direction:rtl; color:var(--text-primary); margin-top:8px; line-height:1.8; }

  /* ---- Qur'an Reader (Fase 1) ---- */
  .quran-cta-card{
    display:flex; align-items:center; gap:14px; background: linear-gradient(160deg, var(--ibadah-dim) 0%, var(--surface-1) 130%);
    border:1px solid rgba(255,214,140,0.32); border-radius:var(--cips-radius-lg); padding:16px 17px; margin-bottom:16px; cursor:pointer;
    transition: transform .15s var(--ease-spring), background-color .25s ease, border-color .25s ease; box-shadow: 0 10px 22px -16px rgba(0,0,0,0.5);
  }
  .quran-cta-card:active{ transform:scale(0.98); }
  .quran-cta-ic{ width:46px; height:46px; border-radius:var(--cips-radius-md); display:flex; align-items:center; justify-content:center; font-size:21px; flex-shrink:0; background:var(--ibadah); color:#20180A; box-shadow: 0 0 14px 1px rgba(255,214,140,.4); }
  .quran-cta-body{ flex:1; min-width:0; }
  .quran-cta-title{ font-family:'Space Grotesk', sans-serif; font-size:15px; font-weight:700; color:var(--text-primary); }
  .quran-cta-sub{ font-size:12px; color:var(--text-muted); margin-top:2px; }
  .quran-cta-arrow{ font-size:18px; color:var(--ibadah-text); flex-shrink:0; }

  .surah-search-wrap{ position:relative; margin-bottom:12px; }
  .surah-search-wrap .health-input{ padding-left:38px; }
  .surah-continue-card{
    display:flex; align-items:center; gap:13px; background: linear-gradient(160deg, var(--ibadah-dim) 0%, var(--surface-1) 130%);
    border:1px solid rgba(255,214,140,0.3); border-radius:var(--cips-radius-lg); padding:14px 16px; margin-bottom:16px; cursor:pointer;
  }
  .surah-continue-label{ font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ibadah-text); }
  .surah-continue-name{ font-family:'Space Grotesk', sans-serif; font-size:15.5px; font-weight:700; color:var(--text-primary); margin-top:3px; }
  .surah-continue-sub{ font-size:12px; color:var(--text-muted); margin-top:2px; }
  .surah-card{
    display:flex; align-items:center; gap:13px; background:var(--surface-1); border:1px solid var(--hairline);
    border-radius:var(--cips-radius-lg); padding:13px 15px; margin-bottom:9px; cursor:pointer;
    transition: transform .15s var(--ease-spring); box-shadow: 0 8px 18px -14px rgba(0,0,0,0.45);
  }
  .surah-card:active{ transform:scale(0.98); }
  .surah-number-badge{
    width:38px; height:38px; border-radius:var(--cips-radius-md); flex-shrink:0; display:flex; align-items:center; justify-content:center;
    background:var(--ibadah-dim); color:var(--ibadah-text); font-family:'JetBrains Mono', monospace; font-size:13px; font-weight:700;
  }
  .surah-card-body{ flex:1; min-width:0; }
  .surah-card-title-row{ display:flex; align-items:baseline; gap:8px; }
  .surah-card-latin{ font-family:'Space Grotesk', sans-serif; font-size:14.5px; font-weight:700; color:var(--text-primary); }
  .surah-card-arabic{ font-family:'Amiri', serif; font-size:16px; color:var(--ibadah-text); margin-left:auto; }
  .surah-card-sub{ font-size:11.5px; color:var(--text-muted); margin-top:3px; }
  .surah-card-badge{ font-size:10px; padding:2px 7px; border-radius:999px; background:var(--surface-2); color:var(--text-muted); margin-left:6px; }

  .reader-surah-header{
    background: linear-gradient(160deg, var(--ibadah-dim) 0%, var(--surface-1) 130%);
    border:1px solid rgba(255,214,140,0.3); border-radius:22px; padding:22px 18px; margin-bottom:16px; text-align:center;
  }
  .reader-surah-latin{ font-family:'Space Grotesk', sans-serif; font-size:19px; font-weight:700; color:var(--text-primary); }
  .reader-surah-arabic{ font-family:'Amiri', serif; font-size:28px; color:var(--ibadah-text); margin-top:4px; }
  .reader-surah-meta{ font-size:12px; color:var(--text-muted); margin-top:8px; }
  .reader-bismillah{ font-family:'Amiri', serif; font-size:24px; color:var(--text-primary); margin-top:16px; padding-top:16px; border-top:1px solid rgba(255,214,140,0.25); }
  .reader-toolbar{ display:flex; gap:10px; margin-bottom:14px; }
  .reader-toolbar-btn{
    flex:1; display:flex; align-items:center; justify-content:center; gap:6px; padding:11px; border-radius:var(--cips-radius-lg);
    background:var(--surface-1); border:1px solid var(--hairline); color:var(--text-primary); font-size:12.5px; font-weight:600;
    font-family:'Inter', sans-serif; cursor:pointer;
  }
  .reader-toolbar-btn.active{ background:var(--ibadah); border-color:var(--ibadah); color:#20180A; }

  .ayah-card{ background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:16px 16px; margin-bottom:12px; transition: border-color .2s ease, box-shadow .2s ease; }
  .ayah-card.playing{ border-color:var(--ibadah); box-shadow: 0 0 0 1px var(--ibadah), 0 10px 22px -16px rgba(255,214,140,.5); }
  .ayah-card.ayah-read{ border-color:var(--habit); }
  .ayah-card.ayah-today-target{ border-color:var(--ibadah); box-shadow: 0 0 0 1px var(--ibadah); }
  .quran-today-banner{ background:var(--ibadah-dim); color:var(--ibadah-text); border-radius:var(--cips-radius-lg); padding:12px 14px; font-size:12.5px; font-weight:600; line-height:1.5; margin:0 0 14px; }
  .ayah-top-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
  .ayah-number-badge{
    width:30px; height:30px; border-radius:var(--cips-radius-md); display:flex; align-items:center; justify-content:center;
    background:var(--ibadah-dim); color:var(--ibadah-text); font-family:'JetBrains Mono', monospace; font-size:11.5px; font-weight:700;
  }
  .ayah-actions{ display:flex; gap:8px; }
  .ayah-action-btn{
    width:32px; height:32px; border-radius:50%; background:var(--surface-2); border:1px solid var(--hairline);
    display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--text-muted); cursor:pointer;
    transition: all .2s var(--ease-spring);
  }
  .ayah-action-btn.active{ background:var(--ibadah); border-color:var(--ibadah); color:#20180A; }
  .ayah-action-btn.read-active{ background:var(--habit); border-color:var(--habit); color:#0A2015; }
  .ayah-arabic{ font-family:'Amiri', serif; font-size:25px; line-height:2.15; text-align:right; direction:rtl; color:var(--text-primary); }
  .ayah-translation{ font-size:13.5px; line-height:1.65; color:var(--text-muted); margin-top:12px; padding-top:12px; border-top:1px solid var(--hairline); }
  .quran-loading{ text-align:center; padding:50px 16px; color:var(--text-muted); font-size:13px; }
  .quran-loading-spin{ width:30px; height:30px; border-radius:50%; border:3px solid var(--surface-2); border-top-color:var(--ibadah); margin:0 auto 14px; animation: quranSpin .8s linear infinite; }
  @keyframes quranSpin{ to{ transform: rotate(360deg); } }
  .quran-mini-player{
    position:sticky; bottom:8px; display:flex; align-items:center; gap:12px; background:var(--surface-1);
    border:1px solid rgba(255,214,140,0.35); border-radius:var(--cips-radius-lg); padding:10px 14px; margin-top:4px; margin-bottom:10px;
    box-shadow: 0 12px 26px -14px rgba(0,0,0,0.55); z-index:5;
  }
  .quran-mini-player-ic{ width:34px; height:34px; border-radius:50%; background:var(--ibadah); color:#20180A; display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; cursor:pointer; }
  .quran-mini-player-body{ flex:1; min-width:0; }
  .quran-mini-player-title{ font-size:12.5px; font-weight:600; color:var(--text-primary); }
  .quran-mini-player-sub{ font-size:11px; color:var(--text-muted); margin-top:1px; }
  .quran-mini-player-close{ font-size:16px; color:var(--text-muted); cursor:pointer; padding:4px; }

  /* ---- Amal & Akhlak ---- */
  .amal-hero{
    background: linear-gradient(155deg, var(--habit-dim) 0%, var(--surface-1) 65%);
    border:1px solid rgba(150,255,190,0.3); border-radius:22px; padding:20px; margin-bottom:16px;
    display:flex; align-items:center; gap:16px;
  }
  .amal-hero-ring{ flex-shrink:0; width:76px; height:76px; }
  .amal-hero-body{ flex:1; min-width:0; }
  .amal-hero-label{ font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-muted); margin-bottom:4px; }
  .amal-hero-value{ font-family:'Space Grotesk', sans-serif; font-size:22px; font-weight:700; color:var(--text-primary); }
  .amal-hero-hint{ font-size:12px; color:var(--text-muted); margin-top:4px; line-height:1.4; }
  .amal-cat-block{ background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:16px 18px; margin-bottom:14px; }
  .amal-cat-title{ font-family:'JetBrains Mono', monospace; font-size:11.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--habit-text); margin-bottom:12px; display:flex; align-items:center; gap:6px; }
  .amal-item{ display:flex; align-items:flex-start; gap:12px; padding:10px 0; border-bottom:1px dashed var(--hairline); }
  .amal-item:last-child{ border-bottom:none; padding-bottom:0; }
  .amal-item:first-child{ padding-top:0; }
  .amal-item-icon{ font-size:19px; flex-shrink:0; margin-top:1px; }
  .amal-item-body{ flex:1; min-width:0; }
  .amal-item-title{ font-family:'Space Grotesk', sans-serif; font-size:14px; font-weight:600; color:var(--text-primary); }
  .amal-item-title.done{ text-decoration: line-through; opacity:0.55; }
  .amal-item-desc{ font-size:12px; color:var(--text-muted); margin-top:2px; line-height:1.4; }
  .amal-item-del{ font-size:16px; color:var(--text-muted); flex-shrink:0; cursor:pointer; padding:2px 4px; }
  .amal-add-row{ display:flex; gap:8px; margin-top:2px; }
  .amal-add-row .health-input{ flex:1; }
  .amal-add-btn{ flex-shrink:0; width:44px; height:44px; border-radius:var(--cips-radius-md); background:var(--habit); color:#0A0C11; font-size:20px; font-weight:700; display:flex; align-items:center; justify-content:center; cursor:pointer; border:none; }
  .amal-history-row{ display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px dashed var(--hairline); font-size:12.5px; }
  .amal-history-row:last-child{ border-bottom:none; }
  .amal-history-date{ color:var(--text-primary); font-weight:600; }
  .amal-history-frac{ font-family:'JetBrains Mono', monospace; color:var(--habit-text); }

  /* ---- Health & Gym ---- */
  .macro-mini-grid{ display:flex; gap:8px; margin-top:12px; }
  .macro-mini{ flex:1; background:var(--kesehatan-dim); border-radius:var(--cips-radius-md); padding:10px 6px; text-align:center; }
  .macro-mini span{ display:block; font-size:10.5px; color:var(--text-muted); margin-bottom:4px; }
  .macro-mini b{ font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--kesehatan-text); }
  .health-input{ width:100%; padding:11px 14px; border-radius:var(--cips-radius-md); border:1px solid var(--hairline); background:var(--surface-2); color:var(--text-primary); font-family:'Inter', sans-serif; font-size:14px; transition: border-color .15s ease, box-shadow .15s ease; }
  .health-input:focus{ outline:none; border-color:var(--habit); box-shadow: 0 0 0 3px rgba(150,255,190,0.14); }
  .toggle-row{ display:flex; gap:8px; flex-wrap:wrap; }
  .toggle-row .toggle-btn{ flex:1; display:flex; align-items:center; justify-content:center; text-align:center; }
  /* Toggle kategori Finance (Cash/Bank/E-Wallet/Lainnya) di onboarding & Business
     settings: 4 opsi berdesakan di satu baris, "E-Wallet" adalah label terpanjang
     — perkecil font & padding horizontal supaya presisi pas di dalam kotaknya,
     tidak overflow/wrap ke baris kedua. */
  #onbFinanceCategoryRow.toggle-row .toggle-btn,
  #bizFinanceCategoryRow.toggle-row .toggle-btn{
    font-size:11.5px; padding:10px 3px; white-space:nowrap; letter-spacing:-0.1px;
  }
  .health-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); margin-bottom:14px; box-shadow: 0 10px 24px -18px rgba(0,0,0,0.5); }
  .health-table{ border-collapse:collapse; width:100%; min-width:300px; font-size:11.5px; }
  .health-table.tracking{ min-width:540px; }
  .health-table th, .health-table td{ border-bottom:1px solid var(--hairline); border-right:1px solid var(--hairline); padding:8px 9px; text-align:center; white-space:nowrap; color:var(--text-primary); }
  .health-table th{ background:var(--surface-2); font-weight:600; font-size:11px; }
  .health-table tr:last-child td{ border-bottom:none; }
  .health-table td:last-child, .health-table th:last-child{ border-right:none; }
  .week-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
  .week-cell{ background:var(--surface-2); border-radius:var(--cips-radius-md); padding:7px 2px; text-align:center; }
  .week-day{ font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:12px; color:var(--kesehatan-text); }
  .week-label{ font-size:8px; color:var(--text-muted); margin-top:3px; line-height:1.2; }
  .health-note{ display:flex; gap:8px; align-items:flex-start; background:var(--kesehatan-dim); border:1px solid rgba(130,205,255,0.35); border-radius:var(--cips-radius-lg); padding:12px 14px; font-size:12.5px; color:var(--text-primary); margin-bottom:14px; }
  .soon-badge{
    font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.5px; text-transform:uppercase;
    color:var(--text-muted); background:var(--surface-2); border:1px solid var(--hairline);
    border-radius:var(--cips-radius-sm); padding:3px 7px; flex-shrink:0; margin-left:6px;
  }
  .khilafiyah-note{
    display:flex; gap:8px; align-items:flex-start; background:var(--ibadah-dim); border:1px solid rgba(255,214,140,0.35);
    border-radius:var(--cips-radius-lg); padding:12px 14px; margin:10px 0 16px; font-size:12.5px; line-height:1.5; color:var(--text-primary);
  }
  .khilafiyah-note .ic{ flex-shrink:0; }
  .prayer-check{
    width:26px; height:26px; border-radius:50%; border:1.5px solid var(--hairline); background:var(--surface-2);
    color:transparent; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; cursor:pointer;
    transition: transform .2s var(--ease-spring), background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
  }
  .prayer-check:active{ transform:scale(0.85); }
  .prayer-check.done{ background:var(--ibadah); border-color:var(--ibadah); color:#20180A; box-shadow: 0 0 10px 1px rgba(255,214,140,.45); }
  .prayer-time-badge{ font-family:'JetBrains Mono', monospace; font-size:12.5px; color:var(--ibadah-text); margin-top:2px; }
  .prayer-desc-text{ font-size:11.5px; color:var(--text-muted); margin-top:2px; line-height:1.4; }
  .dhikr-item{ background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:14px 16px; margin-bottom:10px; box-shadow: 0 8px 20px -16px rgba(0,0,0,0.45); cursor:pointer; transition: transform .15s var(--ease-spring); }
  .dhikr-item:active{ transform:scale(0.98); }
  .dhikr-item.done{ border-color:rgba(150,255,190,0.4); }
  .dhikr-item-top{ display:flex; align-items:flex-start; gap:12px; }
  .dhikr-name{ font-family:'Space Grotesk', sans-serif; font-size:14px; font-weight:600; color:var(--text-primary); transition: opacity .2s ease; }
  .dhikr-name.done{ opacity:0.75; }
  .dhikr-count{ font-size:11.5px; color:var(--ibadah-text); margin-top:1px; font-family:'JetBrains Mono', monospace; }
  .dhikr-arabic{ direction:rtl; text-align:right; font-size:22px; line-height:1.9; color:var(--text-primary); margin-top:10px; }
  .dhikr-latin{ font-size:12px; font-style:italic; color:var(--text-muted); margin-top:6px; line-height:1.5; }
  .dhikr-meaning{ font-size:12px; color:var(--text-muted); margin-top:4px; line-height:1.5; }
  .dhikr-item-progress-track{ height:6px; border-radius:3px; background:rgba(130,140,160,0.16); margin-top:12px; overflow:hidden; }
  .dhikr-item-progress-fill{ height:100%; border-radius:3px; background:var(--ibadah); transition: width .3s ease; }
  .dhikr-item-progress-fill.done{ background:var(--habit); }

  /* ---- Tasbih Digital (Fase 2) ---- */
  .dhikr-counter-card{
    background: linear-gradient(160deg, var(--ibadah-dim) 0%, var(--surface-1) 130%);
    border:1px solid rgba(255,214,140,0.3); border-radius:var(--cips-radius-lg); padding:18px; margin-bottom:22px; text-align:center;
  }
  .dhikr-counter-arabic{ font-family:'Amiri', serif; font-size:26px; color:var(--text-primary); direction:rtl; }
  .dhikr-counter-latin{ font-size:13px; font-style:italic; color:var(--ibadah-text); margin-top:8px; }
  .dhikr-counter-meaning{ font-size:12.5px; color:var(--text-muted); margin-top:4px; }
  .dhikr-tap-zone{
    position:relative; width:188px; height:188px; margin:0 auto; display:flex; align-items:center; justify-content:center;
    cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent; transition: transform .1s var(--ease-spring);
  }
  .dhikr-tap-zone:active{ transform:scale(0.96); }
  .dhikr-tap-zone svg{ position:absolute; top:0; left:0; }
  .dhikr-tap-center{ position:relative; z-index:1; text-align:center; }
  .dhikr-tap-count{ font-family:'JetBrains Mono', monospace; font-size:46px; font-weight:700; color:var(--text-primary); line-height:1; }
  .dhikr-tap-target{ font-size:13px; color:var(--text-muted); margin-top:4px; font-family:'JetBrains Mono', monospace; }
  .dhikr-tap-zone.done .dhikr-tap-count{ color:var(--habit-text); }
  .dhikr-tap-hint{ text-align:center; font-size:12.5px; color:var(--text-muted); margin-top:16px; padding:0 20px; }
  .dhikr-counter-actions{ display:flex; gap:10px; margin-top:20px; }
  .dhikr-counter-action-btn{
    flex:1; display:flex; align-items:center; justify-content:center; gap:6px; padding:13px; border-radius:var(--cips-radius-lg);
    background:var(--surface-1); border:1px solid var(--hairline); color:var(--text-primary); font-size:13px; font-weight:600;
    font-family:'Inter', sans-serif; cursor:pointer; transition: transform .15s var(--ease-spring);
  }
  .dhikr-counter-action-btn:active{ transform:scale(0.96); }
  .dhikr-hero{
    display:flex; align-items:center; gap:16px; background: linear-gradient(155deg, var(--ibadah-dim) 0%, var(--surface-1) 65%);
    border:1px solid rgba(255,214,140,0.28); border-radius:22px; padding:18px; margin-bottom:18px;
  }
  .dhikr-hero-body{ flex:1; min-width:0; }
  .dhikr-hero-title{ font-family:'Space Grotesk', sans-serif; font-size:15px; font-weight:700; color:var(--text-primary); }
  .dhikr-hero-sub{ font-size:12px; color:var(--text-muted); margin-top:3px; }
  .quran-stepper{ display:flex; align-items:center; gap:12px; justify-content:center; }
  .quran-stepper-btn{ width:44px; height:44px; border-radius:var(--cips-radius-lg); border:1px solid var(--hairline); background:var(--surface-2); color:var(--text-primary); font-size:20px; font-weight:600; display:flex; align-items:center; justify-content:center; cursor:pointer; user-select:none; transition:transform .15s var(--ease-spring), background .2s ease, box-shadow .2s ease; box-shadow: 0 6px 14px -10px rgba(0,0,0,0.5); }
  .quran-stepper-btn:active{ transform:scale(0.9); background:var(--ibadah-dim); box-shadow: 0 0 0 4px rgba(255,214,140,0.14); }
  .quran-stepper-val{ font-family:'JetBrains Mono', monospace; font-size:22px; font-weight:600; color:var(--text-primary); min-width:64px; text-align:center; }
  .quran-quick-row{ display:flex; gap:8px; margin-top:12px; }
  .quran-quick-btn{ flex:1; padding:9px 6px; border-radius:var(--cips-radius-md); border:1px solid var(--hairline); background:var(--surface-2); color:var(--text-primary); font-size:12.5px; font-family:'Inter', sans-serif; text-align:center; cursor:pointer; transition:transform .15s var(--ease-spring), background .2s ease; }
  .quran-quick-btn:active{ transform:scale(0.94); background:var(--ibadah-dim); }
  .quran-bar-track{ height:10px; border-radius:8px; background:var(--surface-2); overflow:hidden; margin-top:10px; }
  .quran-bar-fill{ height:100%; border-radius:8px; background:var(--ibadah); transition:width .3s ease; box-shadow: 0 0 8px 0 rgba(255,214,140,.5); }
  .quran-target-option{ position:relative; background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:12px 14px; margin-bottom:8px; cursor:pointer; display:flex; align-items:center; justify-content:space-between; transition: transform .15s var(--ease-spring), border-color .2s ease, background .2s ease, box-shadow .2s ease; box-shadow: 0 6px 14px -12px rgba(0,0,0,0.4); }
  .quran-target-option:active{ transform:scale(0.98); }
  .quran-target-option.active{ border-color:var(--ibadah); background:var(--ibadah-dim); box-shadow: 0 8px 18px -12px rgba(255,214,140,0.35); }
  .quran-target-option-label{ font-size:13.5px; font-weight:600; color:var(--text-primary); font-family:'Space Grotesk', sans-serif; }
  .quran-target-option-desc{ font-size:11.5px; color:var(--text-muted); margin-top:2px; }
  .quran-target-option-edit-btn{ width:30px; height:30px; flex-shrink:0; border-radius:50%; background:var(--surface-2); border:1px solid var(--hairline); display:flex; align-items:center; justify-content:center; font-size:13px; line-height:1; color:var(--text-muted); cursor:pointer; transition: transform .15s var(--ease-spring), border-color .2s ease, color .2s ease; }
  .quran-target-option-right{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
  .quran-target-option-edit-btn:active{ transform:scale(0.88); }
  .quran-target-option-edit-btn:hover{ color:var(--ibadah-text); border-color:var(--ibadah); }
  .quran-hour-chip-grid{ display:flex; flex-wrap:wrap; gap:8px; }
  .quran-hour-chip{ border:1px solid var(--hairline); background:var(--surface-1); color:var(--text-primary); font-size:12.5px; font-weight:600; padding:8px 12px; border-radius:var(--cips-radius-md); cursor:pointer; transition: transform .15s var(--ease-spring), border-color .2s ease, background .2s ease; }
  .quran-hour-chip:active{ transform:scale(0.94); }
  .quran-hour-chip.active{ border-color:var(--ibadah); background:var(--ibadah-dim); color:var(--ibadah-text); }
  .quran-target-hour-badge:active{ transform:scale(0.94); }
  .quran-log-row{ display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--hairline); font-size:12.5px; }
  .quran-log-row:last-child{ border-bottom:none; }
  .water-widget{ display:flex; align-items:center; justify-content:space-between; }
  .water-drops{ display:flex; gap:4px; flex-wrap:wrap; max-width:150px; }
  .water-drop{ width:16px; height:16px; font-size:14px; line-height:16px; opacity:0.25; }
  .water-drop.filled{ opacity:1; }
  .location-btn{
    font-family:'Space Grotesk', sans-serif; font-size:12.5px; font-weight:600; padding:8px 12px; border-radius:var(--cips-radius-md);
    border:1px solid rgba(255,214,140,0.4); background:var(--ibadah-dim); color:var(--ibadah-text); cursor:pointer; flex-shrink:0;
    transition: transform .15s var(--ease-spring), box-shadow .15s ease;
  }
  .location-btn:active{ transform:scale(0.94); box-shadow: 0 0 0 4px rgba(255,214,140,0.14); }

  .wallet-card{ cursor:pointer; }
  .wallet-card:active{ transform:scale(0.98); }
  .eye-toggle-btn{
    width:38px; height:38px;
    background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--cips-radius-md);
    cursor:pointer; font-size:15px; color:var(--text-primary);
    display:flex; align-items:center; justify-content:center; line-height:1; flex-shrink:0;
  }
  .eye-toggle-btn:active{ transform:scale(0.92); }

  .run-btn{
    width:100%; padding:14px; border:none; border-radius:var(--cips-radius-lg); cursor:pointer;
    background: var(--financial); color:#1A0F08; font-family:'Space Grotesk', sans-serif;
    font-size:14.5px; font-weight:700; letter-spacing:0.2px;
    transition: transform .15s var(--ease-spring), box-shadow .15s ease, filter .15s ease;
    box-shadow: 0 10px 24px -10px rgba(255,170,120,0.5), inset 0 1px 0 rgba(255,255,255,.25);
  }
  .run-btn:active{ transform:scale(0.97); filter:brightness(0.96); box-shadow: 0 4px 14px -8px rgba(255,170,120,0.4), inset 0 1px 0 rgba(255,255,255,.2); }
  .save-btn{ margin-top:16px; transition: background .2s ease, color .2s ease, transform .15s var(--ease-spring), box-shadow .2s ease; }
  .save-btn:active{ transform:scale(0.97); }
  .save-btn.saved{ background: var(--habit); color:#0A0C11; box-shadow: 0 0 0 4px rgba(150,255,190,0.18), 0 10px 24px -10px rgba(150,255,190,0.55); animation: badgePulse 1.2s ease-out; }

  .summary-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .summary-item-label{ font-size:12px; color:var(--text-muted); margin-bottom:4px; }
  .summary-item-value{ font-family:'JetBrains Mono', monospace; font-size:14px; font-weight:600; color:var(--text-primary); }

  .chart-block{ background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:18px; margin-top:14px; margin-bottom:16px; }
  .bar-chart{ display:flex; align-items:flex-end; gap:3px; height:80px; }
  .bar-chart div{ flex:1; background: var(--financial); border-radius:3px 3px 0 0; opacity:0.85; min-height:2px; }
  .detail-line{ display:flex; justify-content:space-between; font-size:13px; padding:7px 0; border-bottom:1px solid var(--hairline); }
  .detail-line:last-child{ border-bottom:none; }
  .detail-line:last-child{ border-bottom:none; }
  .detail-line span:first-child{ color:var(--text-muted); }
  .detail-line span:last-child{ font-family:'JetBrains Mono', monospace; color:var(--text-primary); font-weight:600; }

  .day-sheet-backdrop{ position:absolute; inset:0; background:rgba(4,5,8,0.6); z-index:30; opacity:0; pointer-events:none; transition:opacity .2s ease; will-change:opacity; contain:strict; }
  .day-sheet-backdrop.open{ opacity:1; pointer-events:auto; }
  .day-sheet{
    position:absolute; left:0; right:0; bottom:0; z-index:31;
    background:var(--surface-1); border:1px solid var(--hairline); border-bottom:none;
    border-radius:28px 28px 0 0; padding:14px 22px calc(26px + env(safe-area-inset-bottom));
    width:100%; max-width:100%; max-height:min(72%, calc(100% - 28px)); overflow-y:auto; overflow-x:hidden; box-sizing:border-box;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    transform:translate3d(0,100%,0);
    /* Fix Audit F-11 (a11y): sebelumnya cuma transform, jadi sheet yang "tertutup"
       tetap visible=visible -- bisa kena Tab keyboard & terbaca screen reader
       walau sudah didorong keluar layar. visibility:hidden ditambah delay .25s
       PAS SAMA dengan durasi transisi transform, supaya animasi slide-down saat
       menutup tetap kelihatan (baru disembunyikan dari a11y tree SETELAH animasi
       selesai) -- transisi transform yang sudah ada sama sekali tidak diubah.  */
    visibility:hidden;
    transition:transform .25s ease-out, background-color .25s ease, border-color .25s ease, visibility 0s linear .25s;
    box-shadow: 0 -8px 24px -6px rgba(0,0,0,0.4);
    will-change:transform; contain:layout paint style; backface-visibility:hidden;
  }
  .day-sheet.open{
    transform:translate3d(0,0,0);
    visibility:visible;
    transition:transform .25s ease-out, background-color .25s ease, border-color .25s ease, visibility 0s linear 0s;
  }
  .day-sheet-handle{ width:36px; height:4px; background:var(--hairline); border-radius:2px; margin:0 auto 16px; }
  .day-sheet-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
  .day-sheet-title{ font-family:'Space Grotesk', sans-serif; font-size:17px; font-weight:700; color:var(--text-primary); }
  .day-sheet-nav{ display:flex; gap:8px; margin-top:16px; }
  .day-sheet-nav button{ flex:1; padding:11px; border-radius:var(--cips-radius-md); border:1px solid var(--hairline); background:var(--surface-2); color:var(--text-primary); font-family:'Space Grotesk', sans-serif; font-size:13px; font-weight:600; cursor:pointer; }
  .day-sheet-nav button:disabled{ opacity:0.35; cursor:default; }

  /* v74: seluruh blok .upg-* (styling sheet "Upgrade ke Premium") DIHAPUS --
     markup-nya sudah tidak ada lagi di index.html sejak paywall in-app dicabut. */

  /* ---- Boot overlay: splash skeleton saat app pertama kali dibuka ---- */
  #bootOverlay{
    position:absolute; inset:0; z-index:200;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
    background:
      radial-gradient(circle at 50% 42%, rgba(150,255,190,0.08) 0%, transparent 55%),
      var(--bg);
    opacity:1; transition: opacity .35s ease;
  }
  .phone.ready #bootOverlay{ opacity:0; pointer-events:none; }

  #onboardingOverlay{
    position:absolute; inset:0; z-index:150;
    display:none; flex-direction:column;
    background:var(--bg);
    padding: calc(20px + env(safe-area-inset-top)) 22px calc(16px + env(safe-area-inset-bottom));
  }

  /* Layer dekoratif penuh di belakang wizard onboarding (4 orb blur warna pilar
     habit/ibadah/kesehatan/financial) supaya layar nggak kelihatan kosong-polos,
     terutama di langkah yang field-nya dikit kayak "kenalan dulu". z-index:-1
     supaya selalu di belakang konten & tetap di atas background solid overlay. */
  .onb-bg-decor{ position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
  .onb-bg-decor::before, .onb-bg-decor::after{
    content:''; position:absolute; border-radius:50%; filter:blur(46px);
    animation: onbGlowBreathe 6s ease-in-out infinite;
  }
  .onb-bg-decor::before{
    width:260px; height:260px; top:-90px; left:-70px;
    background:radial-gradient(circle, var(--habit-dim) 0%, transparent 72%);
  }
  .onb-bg-decor::after{
    width:220px; height:220px; bottom:-60px; right:-60px;
    background:radial-gradient(circle, rgba(255,170,120,0.22) 0%, transparent 72%);
    animation-delay:1.4s;
  }
  .onb-bg-decor-mid{
    position:absolute; top:38%; right:-40px; width:190px; height:190px; border-radius:50%;
    background:radial-gradient(circle, rgba(255,214,140,0.16) 0%, transparent 72%);
    filter:blur(40px); animation: onbGlowBreathe 6s ease-in-out infinite; animation-delay:.7s;
  }
  .onb-bg-decor-mid2{
    position:absolute; top:58%; left:-50px; width:170px; height:170px; border-radius:50%;
    background:radial-gradient(circle, rgba(130,205,255,0.16) 0%, transparent 72%);
    filter:blur(40px); animation: onbGlowBreathe 6s ease-in-out infinite; animation-delay:2.1s;
  }
  @keyframes onbGlowBreathe{ 0%,100%{ opacity:.75; transform:scale(1); } 50%{ opacity:1; transform:scale(1.12); } }
  /* Dipasang oleh openOnbLogoPicker()/closeLogoPickerSheet() (app-03) selama
     picker Bank/E-Wallet onboarding terbuka -- lihat catatan root-cause di sana. */
  .onb-decor-paused .onb-bg-decor::before,
  .onb-decor-paused .onb-bg-decor::after,
  .onb-decor-paused .onb-bg-decor-mid,
  .onb-decor-paused .onb-bg-decor-mid2{ animation-play-state:paused; }

  .onb-vibe-quote{
    display:flex; align-items:flex-start; gap:9px;
    background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg);
    padding:11px 13px; margin-top:4px; margin-bottom:14px;
    font-size:12px; line-height:1.55; color:var(--text-muted);
  }
  .onb-vibe-quote-icon{ flex-shrink:0; font-size:14px; line-height:1.55; }

  .onb-skip-btn{
    position:absolute; top: calc(20px + env(safe-area-inset-top)); right:22px; z-index:5;
    background:none; border:none; padding:6px 4px;
    font-size:13.5px; font-weight:600; color:var(--text-muted);
  }
  .onb-skip-btn:active{ opacity:0.6; }

  /* Model wizard: satu kategori (langkah) tampil per layar, dengan progress bar +
     tombol Kembali/Lanjut di bawah. Tiap langkah masih bisa di-scroll sendiri kalau
     kepanjangan di layar kecil. Scrollbar disembunyikan (scroll tetap jalan, cuma
     garis di kanan tidak tampil) supaya tampilannya bersih di semua browser/engine. */
  .onb-progress{ flex-shrink:0; margin:0 0 16px; padding-right:56px; }
  .onb-progress-label{ font-size:12px; font-weight:600; color:var(--text-muted); margin-bottom:8px; }
  .onb-progress-track{ height:4px; border-radius:2px; background:var(--hairline); overflow:hidden; }
  .onb-progress-fill{ height:100%; border-radius:2px; background:var(--habit); width:25%; transition:width .3s ease; }

  .onb-steps{
    position:relative; flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding:2px 2px 6px;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .onb-steps::-webkit-scrollbar{ display:none; width:0; height:0; }
  /* Perbaikan tampilan Step 0 (Login/Daftar): kontennya pendek (ikon+judul+2
     field+tombol), jadi kalau dibiarkan seperti step 1-4 (mulai dari atas),
     ada ruang kosong besar di bawah -- persis yang terlihat di screenshot.
     Class ini di-toggle lewat JS KHUSUS saat Step 0 aktif (lihat updateOnbNavUI()
     di app-03-navigation-onboarding.js) -- step 1-4 TIDAK terpengaruh sama
     sekali, tetap rata atas & scroll seperti semula (kontennya lebih panjang,
     rata tengah justru bikin aneh kalau field-nya banyak). overflow-y:auto
     tetap aktif sebagai jaring pengaman di layar sangat kecil. */
  /* Fix (ditemukan dari rekaman video): justify-content:center di parent flex
     container punya kelemahan CSS yang sudah dikenal luas -- kalau konten
     meluber (persis yang terjadi saat keyboard on-screen muncul & mengecilkan
     ruang tersisa), bagian yang meluber di ATAS bisa jadi TIDAK BISA
     DI-SCROLL untuk dicapai (browser "mengunci" posisi center-nya). Ini yang
     bikin tombol Masuk & link Daftar hilang ketutup keyboard tanpa bisa
     dijangkau di rekaman. Diganti ke margin:auto pada elemen step aktifnya
     sendiri (bukan justify-content di parent) -- tetap center kalau ruang
     cukup, tapi begitu konten lebih tinggi dari ruang tersedia, otomatis
     jadi scroll biasa yang selalu bisa dijangkau penuh, tidak pernah
     "terjebak". */
  .onb-steps.onb-steps-center{ display:flex; flex-direction:column; }
  .onb-steps.onb-steps-center .onb-step.onb-step-active{ margin:auto 0; }

  .onb-step{ display:none; }
  .onb-step.onb-step-active{ display:block; animation: onbStepIn .28s ease; }
  @keyframes onbStepIn{ from{ opacity:0; transform:translateX(14px); } to{ opacity:1; transform:translateX(0); } }
  /* Dipasang sesaat oleh showOnboardingIfNeeded() (app-03) khusus di reveal
     PERTAMA onboarding setelah boot -- lihat catatan root-cause di sana. */
  .onb-first-reveal .onb-step.onb-step-active{ animation:none; }

  .onb-section{ margin-bottom:20px; }
  .onb-section:last-of-type{ margin-bottom:6px; }

  .onb-section-head{ display:flex; align-items:center; gap:12px; margin-bottom:8px; }
  .onb-section-icon{
    width:44px; height:44px; border-radius:var(--cips-radius-lg); flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:19px;
  }
  .onb-section-icon.c-identity{ background:var(--habit-dim); color:var(--habit-text); }
  .onb-section-icon.c-auth{ background:var(--settings-dim); color:var(--settings-text); }
  .onb-section-icon.c-gym{ background:var(--kesehatan-dim); color:var(--kesehatan-text); }
  .onb-section-icon.c-financial{ background:var(--financial-dim); color:var(--financial-text); }
  .onb-section-icon.c-religion{ background:var(--ibadah-dim); color:var(--ibadah-text); }

  .onb-title{ font-family:'Space Grotesk', sans-serif; font-size:19px; font-weight:700; color:var(--text-primary); margin-bottom:2px; }
  .onb-desc{ font-size:12.5px; color:var(--text-muted); line-height:1.5; margin-bottom:12px; }
  .onb-field{ margin-bottom:10px; }
  .onb-field-row{ display:flex; gap:10px; }
  .onb-field-row .onb-field-half{ flex:1; min-width:0; }
  .onb-field-label{ font-size:13px; color:var(--text-primary); margin:0 0 5px; font-weight:500; }
  .onb-required{ color:var(--danger-text); font-weight:700; margin-left:2px; font-size:13px; }

  .onb-field-error{ border-color:var(--danger) !important; animation: onbShake .35s ease; }
  .toggle-row.onb-field-error{ outline:1.5px solid var(--danger); outline-offset:5px; border-radius:var(--cips-radius-lg); animation: onbShake .35s ease; }
  @keyframes onbShake{ 0%,100%{ transform:translateX(0); } 20%{ transform:translateX(-6px); } 40%{ transform:translateX(5px); } 60%{ transform:translateX(-4px); } 80%{ transform:translateX(3px); } }

  .onb-loc-block{
    margin-top:10px; padding:12px 14px; border-radius:var(--cips-radius-lg);
    background:var(--ibadah-dim); border:1px solid rgba(255,214,140,0.35);
  }
  .onb-loc-block .settings-desc{ margin:0 0 10px; color:var(--text-primary); }

  .onb-nav{ display:flex; gap:10px; margin-top:10px; flex-shrink:0; }
  .onb-nav .run-btn{ flex:1; }
  .onb-back-btn{
    flex-shrink:0; visibility:hidden; pointer-events:none;
    background:none; border:1.5px solid var(--hairline); border-radius:var(--cips-radius-lg);
    padding:0 20px; font-size:14px; font-weight:600; color:var(--text-primary);
  }
  .onb-back-btn.onb-back-visible{ visibility:visible; pointer-events:auto; }
  .onb-back-btn:active{ opacity:0.6; }
  .boot-logo{
    width:72px; height:72px; border-radius:var(--cips-radius-lg);
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 12px 28px -10px rgba(0,0,0,0.5);
    animation: bootPulse 1.3s ease-in-out infinite;
    overflow:hidden;
  }
  .boot-logo img{ width:100%; height:100%; object-fit:cover; display:block; }
  .boot-label{ font-family:'Space Grotesk', sans-serif; font-size:13px; font-weight:600; color:var(--text-muted); letter-spacing:.02em; }
  @keyframes bootPulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(0.92); opacity:0.7; } }

  /* ---- Skeleton loading generik: dipakai saat menunggu data async (mis. jadwal shalat dari API) ---- */
  .skeleton-list{ display:flex; flex-direction:column; gap:10px; margin:4px 0 14px; }
  .skeleton-row{ display:flex; justify-content:space-between; align-items:center; background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--cips-radius-md); padding:14px 16px; }
  .skeleton-pill{ height:13px; border-radius:7px; background:linear-gradient(90deg, var(--surface-2) 25%, var(--hairline) 37%, var(--surface-2) 63%); background-size:400% 100%; animation:skeletonShimmer 1.4s ease infinite; }
  .skeleton-pill.w-40{ width:40%; } .skeleton-pill.w-20{ width:20%; }
  @keyframes skeletonShimmer{ 0%{ background-position:100% 50%; } 100%{ background-position:0 50%; } }

  .dock-wrap{ position:relative; display:none; }
  .dock-wrap::before{
    content:''; position:absolute; left:8%; right:8%; bottom:2px; height:34px;
    background: radial-gradient(ellipse at center, rgba(0,0,0,.35) 0%, transparent 72%);
    filter: blur(6px); pointer-events:none; z-index:0;
  }
  .dock{
    position:relative; isolation:isolate; overflow:hidden;
    background: linear-gradient(180deg, rgba(32,36,47,.86) 0%, rgba(24,27,36,.92) 100%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 26px;
    padding: 9px 10px;
    display:flex; justify-content:space-between; gap:2px; align-items:center;
    box-shadow: 0 14px 34px rgba(0,0,0,.38), 0 2px 6px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06);
  }
  [data-theme="light"] .dock{
    background: linear-gradient(180deg, rgba(255,253,249,.86) 0%, rgba(241,236,224,.92) 100%);
    border-color: rgba(20,20,20,.07);
    box-shadow: 0 14px 30px rgba(80,60,20,.14), 0 2px 6px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.5);
  }
  .dock-indicator{
    position:absolute; top:7px; left:0; width:48px; height:48px; border-radius:15px;
    background: var(--habit-dim); z-index:0; pointer-events:none;
    transform: translateX(6px);
    transition: transform .38s cubic-bezier(.22,.85,.32,1.28), background .25s ease, width .25s ease;
    opacity:0;
  }
  .dock-indicator.on{ opacity:1; }
  .dock-icon{
    position:relative; z-index:1;
    width:48px; height:48px; border-radius:var(--cips-radius-lg); display:flex; align-items:center; justify-content:center;
    color:var(--text-muted); cursor:pointer; transition: color .2s ease, transform .15s var(--ease-spring);
    flex-shrink:0;
  }
  .dock-icon svg{ width:21px; height:21px; transition: transform .25s var(--ease-spring); }
  .dock-icon:active{ transform:scale(0.86); }
  .dock-icon.active, .dock-icon.active-religion, .dock-icon.active-health, .dock-icon.active-finance{ transform:translateY(-1px); }
  .dock-icon.active svg, .dock-icon.active-religion svg, .dock-icon.active-health svg, .dock-icon.active-finance svg{ transform:scale(1.08); filter: drop-shadow(0 0 7px currentColor); }
  .dock-icon.active{ color: var(--habit-text); }
  .dock-icon.active-religion{ color: var(--ibadah-text); }
  .dock-icon.active-health{ color: var(--kesehatan-text); }
  .dock-icon.active-finance{ color: var(--financial-text); }
  .dock-icon-dot{
    position:absolute; bottom:5px; left:50%; width:4px; height:4px; border-radius:50%;
    background: currentColor; opacity:0; transform:translateX(-50%) scale(0);
    transition: all .25s var(--ease-spring);
  }
  .dock-icon.active .dock-icon-dot, .dock-icon.active-religion .dock-icon-dot, .dock-icon.active-health .dock-icon-dot, .dock-icon.active-finance .dock-icon-dot{
    opacity:1; transform:translateX(-50%) scale(1);
  }
  .dock-icon.add{ background: var(--habit); color:#0A0C11; font-weight:700; }


  /* Audit lanjutan (kebersihan CSS): rule "html,body{margin:0!important;...}
     .app,.screen{margin-top:0!important;transform:none;}" yang dulu ada di sini
     DIHAPUS setelah ditelusuri -- 100% mati/redundan, bukan fix aktif untuk apa
     pun: margin:0 sudah dijamin oleh *{margin:0} di baris ~75, body sudah
     position:fixed;inset:0 (baris ~80-81) yang sudah menetapkan top/left/right/
     bottom ke 0, dan class ".app" TIDAK PERNAH dipakai satu kali pun di
     index.html (0 kecocokan). Kalau di masa depan ada bug spesifik (mis. body
     bergeser saat keyboard virtual muncul/hilang di iOS PWA), perbaikannya
     sebaiknya ditulis ulang dengan komentar yang jelas tentang device/skenario
     apa yang dibenahi -- bukan rule !important tanpa penjelasan seperti ini.
  */


/* ============================================================
   CIPS — Dashboard First-Visit Guided Tour
   Native spotlight overlay; intentionally isolated from app UI.
   ============================================================ */

#cipsDashboardTour{
  position:fixed;
  inset:0;
  z-index:99990;
  display:none;
  pointer-events:none;
  font-family:'Inter',sans-serif;
}

#cipsDashboardTour.is-open{
  display:block;
  pointer-events:auto;
}

#cipsDashboardTour .cips-tour-backdrop{
  position:absolute;
  inset:0;
  background:transparent;
  opacity:0;
  transition:opacity .28s ease;
}

#cipsDashboardTour .cips-tour-spotlight{
  position:fixed;
  z-index:2;
  box-sizing:border-box;
  pointer-events:none;
  background:transparent;
  border:1.5px solid rgba(150,255,190,.78);
  /* The oversized shadow creates the real dark overlay while the target
     rectangle itself stays transparent/bright. This is the spotlight cut-out. */
  box-shadow:
    0 0 0 9999px rgba(0,0,0,.72),
    0 0 0 3px rgba(150,255,190,.08),
    0 0 20px rgba(150,255,190,.28),
    inset 0 0 18px rgba(150,255,190,.06);
  opacity:0;
  transition:
    left .34s cubic-bezier(.22,1,.36,1),
    top .34s cubic-bezier(.22,1,.36,1),
    width .34s cubic-bezier(.22,1,.36,1),
    height .34s cubic-bezier(.22,1,.36,1),
    opacity .22s ease;
}

#cipsDashboardTour .cips-tour-card{
  position:fixed;
  z-index:3;
  box-sizing:border-box;
  padding:17px 17px 15px;
  border:1px solid rgba(150,255,190,.28);
  border-radius:var(--cips-radius-lg);
  background:
    linear-gradient(155deg,rgba(31,35,48,.98),rgba(19,22,31,.98));
  box-shadow:
    0 22px 55px rgba(0,0,0,.48),
    0 0 0 1px rgba(255,255,255,.035) inset,
    0 0 28px rgba(150,255,190,.09);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  opacity:0;
  transform:translateY(8px);
  transition:
    left .34s cubic-bezier(.22,1,.36,1),
    top .34s cubic-bezier(.22,1,.36,1),
    opacity .24s ease,
    transform .24s cubic-bezier(.22,1,.36,1);
  color:var(--text-primary,#f4f6fb);
}

#cipsDashboardTour.is-visible .cips-tour-backdrop{
  opacity:1;
}

#cipsDashboardTour.is-visible .cips-tour-spotlight{
  opacity:1;
}

#cipsDashboardTour.is-visible .cips-tour-card{
  opacity:1;
  transform:translateY(0);
}

#cipsDashboardTour.is-closing .cips-tour-backdrop,
#cipsDashboardTour.is-closing .cips-tour-spotlight,
#cipsDashboardTour.is-closing .cips-tour-card{
  opacity:0;
}

.cips-tour-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.cips-tour-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:rgba(150,255,190,.09);
  border:1px solid rgba(150,255,190,.16);
  font-size:21px;
  box-shadow:0 0 18px rgba(150,255,190,.08);
}

.cips-tour-progress{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;
  letter-spacing:.8px;
  color:var(--text-muted,#9ba3b5);
}

.cips-tour-title{
  margin:0;
  font-family:'Space Grotesk',sans-serif;
  font-size:18px;
  line-height:1.2;
  font-weight:700;
  letter-spacing:-.25px;
}

.cips-tour-description{
  margin:8px 0 16px;
  color:var(--text-muted,#a9b0c0);
  font-size:12.5px;
  line-height:1.58;
}

.cips-tour-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.cips-tour-skip,
.cips-tour-next{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  font-family:'Inter',sans-serif;
  cursor:pointer;
  min-height:38px;
  border-radius:12px;
  font-weight:700;
  transition:transform .14s ease,filter .14s ease,box-shadow .14s ease;
}

.cips-tour-skip{
  padding:0 8px;
  background:transparent;
  color:var(--text-muted,#9ba3b5);
  font-size:10.5px;
}

.cips-tour-next{
  padding:0 15px;
  background:linear-gradient(135deg,rgba(150,255,190,.96),rgba(115,230,163,.96));
  color:#0b1510;
  font-size:11.5px;
  box-shadow:0 8px 20px rgba(100,220,150,.17);
}

.cips-tour-skip:active,
.cips-tour-next:active{
  transform:scale(.96);
}

.cips-tour-skip:focus-visible,
.cips-tour-next:focus-visible{
  outline:2px solid rgba(150,255,190,.95);
  outline-offset:2px;
}

@media (max-width:420px){
  #cipsDashboardTour .cips-tour-card{
    border-radius:18px;
    padding:15px 15px 13px;
  }

  .cips-tour-title{
    font-size:17px;
  }

  .cips-tour-description{
    font-size:12px;
    line-height:1.55;
  }

  .cips-tour-next{
    padding:0 13px;
  }
}

@media (prefers-reduced-motion:reduce){
  #cipsDashboardTour .cips-tour-backdrop,
  #cipsDashboardTour .cips-tour-spotlight,
  #cipsDashboardTour .cips-tour-card{
    transition:none!important;
  }
}

/* ==== Utility spacing (Audit Fase 2 — CSS Cleanup) ====
   Menggantikan 114 inline style="" berulang di index.html. Sengaja HANYA
   mencakup margin & text-align — dua properti ini diverifikasi TIDAK PERNAH
   dimanipulasi lewat el.style.X di runtime JS manapun (yang dimanipulasi live
   cuma display/width/color/background/height/fontSize/transform/dll), jadi
   memindahkannya ke class dijamin 0% mengubah tampilan atau perilaku app. */
.mt-0{ margin-top:0; }
.mt-6{ margin-top:6px; }
.mt-8{ margin-top:8px; }
.mt-10{ margin-top:10px; }
.mt-12{ margin-top:12px; }
.mt-14{ margin-top:14px; }
.mb-0{ margin-bottom:0; }
.mb-2{ margin:0 0 2px; }
.mb-4{ margin:0 0 4px; }
.mb-6{ margin-bottom:6px; }
.mb-8{ margin-bottom:8px; }
.mb-10{ margin-bottom:10px; }
.mb-12{ margin-bottom:12px; }
.mb-14{ margin-bottom:14px; }
.m-0{ margin:0; }
.text-left{ text-align:left; }



/* Fix (QA Final Production Audit, accessibility): fallback global untuk
   elemen interaktif yang BELUM punya styling :focus khusus di manapun di
   file ini -- supaya navigasi keyboard (Tab) tidak pernah kehilangan
   indikator fokus di elemen yang belum sempat diaudit satu-satu. Sengaja
   pakai :focus-visible (bukan :focus polos) supaya cuma nongol untuk
   navigasi keyboard/programmatic, TIDAK untuk klik mouse/tap biasa --
   tidak mengubah tampilan sehari-hari sama sekali. Specificity-nya rendah
   (selector tag polos) sehingga aturan :focus/:focus-visible yang sudah
   ada di atas (class spesifik seperti .qlf-input:focus, .tx-search:focus-within,
   dst) tetap menang dan tidak berubah perilakunya.
*/
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid rgba(150,255,190,.9);
  outline-offset:2px;
}


/* CIPS v77 — mobile viewport alignment hardening.
   The previous layout mixed fixed body sizing, 100vw phone sizing and animated
   onboarding transforms. On some Android Chrome viewport states this produced
   a persistent horizontal offset. */
html, body { box-sizing: border-box; width: 100%; max-width: 100%; overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }

@media (max-width: 600px){
  body { left:0; right:0; padding:0 !important; margin:0 !important; }
  .phone {
    position:relative;
    left:0;
    right:0;
    margin:0;
    width:100% !important;
    max-width:100% !important;
    min-width:0;
    transform:none !important;
  }
  #onboardingOverlay {
    left:0 !important;
    right:0 !important;
    width:100% !important;
    max-width:100% !important;
    transform:none !important;
  }
  .onb-steps { width:100%; max-width:100%; min-width:0; }
  .onb-step,
  .onb-step.onb-step-active { max-width:100%; min-width:0; }
}


/* ============================================================
   CIPS v78 — MOBILE VIEWPORT ALIGNMENT FIX
   Root cause: body had 16px horizontal padding while .phone used
   viewport units (100vw/100dvw). The flex centering could therefore
   produce a visible horizontal offset on Android Chrome.
   ============================================================ */
@media (max-width: 600px){
  html,
  body{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    left:0 !important;
    right:0 !important;
    overflow:hidden !important;
  }

  body{
    display:block !important;
    position:fixed !important;
    inset:0 !important;
  }

  .phone{
    position:absolute !important;
    inset:0 !important;
    left:0 !important;
    top:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:100% !important;
    max-height:none !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    transform:none !important;
    overflow:hidden !important;
  }

  #onboardingOverlay{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  .onb-steps{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  .onb-step,
  .onb-section,
  .onb-field,
  .onb-section-head{
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }
}


/* ============================================================
   CIPS v80 — ONBOARDING BANK/E-WALLET PICKER + IME HARDENING
   Android Chrome can retain an adjusted containing block after the numeric
   keyboard closes. The global logo picker is therefore fixed to the visual
   viewport on mobile instead of relying on .phone's absolute containing block.
   ============================================================ */
@media (max-width:600px){
  .day-sheet-backdrop.logo-picker-backdrop{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100dvh !important;
    height:100vh !important;
    z-index:160 !important;
  }

  .day-sheet.logo-picker-sheet{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    top:auto !important;
    width:100vw !important;
    max-width:100vw !important;
    max-height:76dvh !important;
    max-height:76vh !important;
    margin:0 !important;
    z-index:161 !important;
    transform:translate3d(0,100%,0) !important;
  }

  .day-sheet.logo-picker-sheet.open{
    transform:translate3d(0,0,0) !important;
  }

  .logo-picker-list{
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
}


/* ==========================================================================
   CIPS v81 — FINANCE UI PRECISION / RESPONSIVE HARDENING
   Scope: Finance views only. No business logic changes.
   Goals:
   - eliminate overflow / misalignment
   - normalize cards, buttons, chips, filters and forms
   - make Finance controls stable on narrow Android viewports
   - prevent long labels / amounts from pushing siblings off-screen
   ========================================================================== */

/* CIPS v85 — Finance visual stability hardening.
   This layer intentionally removes transform-based route animation from Finance
   on Android: nested scroll containers + transform layers are a known source of
   transient blank/shifted frames when a bottom sheet closes and a route changes. */
.view[data-view^="finance"]{
  width:100%;
  min-width:0;
  max-width:none;
  flex:0 0 auto;
  overflow-x:hidden;
  overflow-anchor:none;
  position:relative;
  top:auto;
  left:auto;
  right:auto;
  bottom:auto;
}
.view[data-view^="finance"].anim-forward,
.view[data-view^="finance"].anim-back{
  animation:none !important;
  transform:none !important;
  opacity:1 !important;
}
.view[data-view^="finance"] .field-input,
.view[data-view^="finance"] input,
.view[data-view^="finance"] select,
.view[data-view^="finance"] textarea,
.view[data-view^="finance"] button{
  max-width:100%;
}
.view[data-view^="finance"] .field-error{
  border-color:var(--danger) !important;
  box-shadow:0 0 0 3px rgba(255,91,91,.12) !important;
}
.finance-render-error{
  margin:16px 0; padding:18px; border:1px solid rgba(255,91,91,.28);
  border-radius:18px; background:rgba(255,91,91,.06); text-align:center;
}
.finance-render-error-title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px;color:var(--text-primary);}
.finance-render-error-text{font-size:12px;color:var(--text-muted);line-height:1.5;margin:6px 0 14px;}

/* Finance page geometry */
.view[data-view^="finance"]{
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
  overflow-x:clip;
}
.view[data-view^="finance"] *,
.view[data-view^="finance"] *::before,
.view[data-view^="finance"] *::after{
  box-sizing:border-box;
}
.view[data-view^="finance"] img,
.view[data-view^="finance"] svg{
  max-width:100%;
}

/* Headers: stable left / center / right alignment */
.view[data-view^="finance"] .subheader,
.view[data-view^="finance"] .fan-header-row,
.view[data-view^="finance"] .tx-hero-top{
  width:100%;
  min-width:0;
}
.view[data-view^="finance"] .subheader-title,
.view[data-view^="finance"] .fan-title,
.view[data-view^="finance"] .tx-hero-title{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}
.view[data-view^="finance"] .subheader-pill-btn,
.view[data-view^="finance"] .fan-export-btn,
.view[data-view^="finance"] .tx-add-btn{
  max-width:100%;
  flex:0 0 auto;
}

/* Finance dashboard cards */
.view[data-view="finance"] .fdash-card{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow:hidden;
}
.view[data-view="finance"] .fdash-card-head{
  min-width:0;
  gap:10px;
}
.view[data-view="finance"] .fdash-card-head > *{
  min-width:0;
}
.view[data-view="finance"] .fdash-card-head .fdash-link{
  flex:0 0 auto;
}
.view[data-view="finance"] .fdash-balance-value{
  min-width:0;
  max-width:calc(100% - 48px);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.view[data-view="finance"] .fdash-quick-row{
  width:100%;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.view[data-view="finance"] .fdash-quick-btn{
  width:100%;
  min-width:0;
  min-height:46px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  white-space:nowrap;
}
.view[data-view="finance"] .fdash-quick-btn > span:last-child{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}
.view[data-view="finance"] .fdash-quick-fab{
  flex:0 0 40px;
  width:40px;
  height:40px;
}

/* Dashboard two-column cards: never squeeze below usable width */
.view[data-view="finance"] .fdash-row{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}
.view[data-view="finance"] .fdash-half{
  min-width:0;
  overflow:hidden;
}
.view[data-view="finance"] .fdash-link{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}
.view[data-view="finance"] .fdash-legend-row{
  min-width:0;
  gap:8px;
}
.view[data-view="finance"] .fdash-legend-row-left{
  min-width:0;
  overflow:hidden;
}
.view[data-view="finance"] .fdash-legend-row-val{
  max-width:48%;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Analytics */
.view[data-view="finance-analytics"] .fan-filter-row{
  width:100%;
  min-width:0;
  overflow-x:auto;
  overflow-y:hidden;
  padding:1px 1px 5px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.view[data-view="finance-analytics"] .fan-filter-row::-webkit-scrollbar{display:none;}
.view[data-view="finance-analytics"] .fan-filter-chip{
  flex:0 0 auto;
}
.view[data-view="finance-analytics"] .fan-card{
  width:100%;
  min-width:0;
  overflow:hidden;
}
.view[data-view="finance-analytics"] .fan-card > *{
  min-width:0;
}

/* Transactions */
.view[data-view="finance-transactions"] .tx-hero-top{
  align-items:center;
}
.view[data-view="finance-transactions"] .tx-search{
  width:100%;
  min-width:0;
}
.view[data-view="finance-transactions"] .tx-filter-row{
  max-width:100%;
  padding-bottom:5px;
}
.view[data-view="finance-transactions"] .tx-row-content{
  min-width:0;
}
.view[data-view="finance-transactions"] .tx-row-main{
  min-width:0;
  overflow:hidden;
}
.view[data-view="finance-transactions"] .tx-row-title,
.view[data-view="finance-transactions"] .tx-row-sub{
  min-width:0;
}
.view[data-view="finance-transactions"] .tx-row-title{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.view[data-view="finance-transactions"] .tx-row-amt{
  max-width:42%;
  min-width:0;
}
.view[data-view="finance-transactions"] .tx-row-amt-value{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Financial accounts */
.view[data-view="finance-accounts"] .fin-acc-chips{
  width:100%;
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:2px 1px 6px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.view[data-view="finance-accounts"] .fin-acc-chips::-webkit-scrollbar{display:none;}
.view[data-view="finance-accounts"] .fin-acc-chip{
  flex:0 0 auto;
  min-height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 13px;
  border-radius:999px;
  border:1px solid var(--hairline);
  background:var(--surface-1);
  color:var(--text-muted);
  font-family:'Space Grotesk',sans-serif;
  font-size:11.5px;
  font-weight:600;
  line-height:1.15;
  white-space:nowrap;
  cursor:pointer;
}
.view[data-view="finance-accounts"] .fin-acc-card{
  width:100%;
  min-width:0;
  overflow:hidden;
}
.view[data-view="finance-accounts"] .fin-acc-main{
  min-width:0;
  overflow:hidden;
}
.view[data-view="finance-accounts"] .fin-acc-name,
.view[data-view="finance-accounts"] .fin-acc-type{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.view[data-view="finance-accounts"] .fin-acc-right{
  min-width:0;
  max-width:43%;
}
.view[data-view="finance-accounts"] .fin-acc-saldo-value{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Calendar */
.view[data-view="finance-calendar"] .progress-block{
  width:100%;
  min-width:0;
  overflow:hidden;
}
.view[data-view="finance-calendar"] .progress-block-header{
  gap:8px;
}
.view[data-view="finance-calendar"] .progress-block-title{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-align:center;
}
.view[data-view="finance-calendar"] .fin-cal-grid{
  width:100%;
  min-width:0;
  gap:5px;
}
.view[data-view="finance-calendar"] .fin-cal-day{
  width:100%;
  min-width:0;
  aspect-ratio:1;
}
.view[data-view="finance-calendar"] .fin-cal-day{
  font-size:clamp(10px,3.2vw,12.5px);
}

/* Generic Finance module pages */
.view[data-view="finance-module"] #financeModuleList{
  width:100%;
  min-width:0;
}
.view[data-view="finance-module"] #financeModuleList > *{
  min-width:0;
  max-width:100%;
}
.view[data-view="finance-module"] .cat-card{
  width:100%;
  min-width:0;
}
.view[data-view="finance-module"] .cat-card > div:nth-child(2){
  min-width:0;
  overflow:hidden;
}
.view[data-view="finance-module"] .cat-title,
.view[data-view="finance-module"] .cat-desc{
  overflow-wrap:anywhere;
}

/* Finance forms: consistent field rhythm */
#financeModuleFields{
  width:100%;
  min-width:0;
}
#financeModuleFields .field-row{
  width:100%;
  min-width:0;
  margin-bottom:14px;
}
#financeModuleFields .field-row:last-child{margin-bottom:0;}
#financeModuleFields .field-row label{
  width:100%;
  line-height:1.35;
  overflow-wrap:anywhere;
}
#financeModuleFields .field-row .field-input{
  min-width:0;
  min-height:44px;
  width:100% !important;
  max-width:100%;
  border-radius:14px;
}
#financeModuleFields .toggle-row{
  width:100%;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
#financeModuleFields .toggle-row .toggle-btn{
  min-width:0;
  min-height:42px;
  padding:9px 8px;
  line-height:1.2;
  white-space:normal;
  overflow-wrap:anywhere;
}
#financeModuleSheet .save-btn,
#financeModuleSheet .entry-delete-btn{
  width:100%;
  min-height:46px;
}
#financeModuleSheet .day-sheet-header{
  min-width:0;
}
#financeModuleSheet .day-sheet-title{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Prevent long currency strings and generated content from expanding cards */
.view[data-view^="finance"] .stat-card,
.view[data-view^="finance"] .progress-block,
.view[data-view^="finance"] .cat-card,
.view[data-view^="finance"] .settings-block{
  max-width:100%;
  min-width:0;
}
.view[data-view^="finance"] .stat-value{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Narrow Android viewport */
@media (max-width:430px){
  .view[data-view="finance"] .fdash-card{
    padding:15px;
    border-radius:18px;
  }
  .view[data-view="finance"] .fdash-row{
    grid-template-columns:1fr;
    gap:10px;
  }
  .view[data-view="finance"] .fdash-half{
    padding:15px;
  }
  .view[data-view="finance"] .fdash-card-head{
    align-items:flex-start;
  }
  .view[data-view="finance"] .fdash-balance-value{
    font-size:24px;
  }
  .view[data-view="finance"] .fdash-greet{
    font-size:19px;
  }
  .view[data-view="finance"] .fdash-sub{
    font-size:11.5px;
  }
  .view[data-view="finance-analytics"] .fan-header-row{
    align-items:center;
  }
  .view[data-view="finance-analytics"] .fan-title{
    font-size:21px;
  }
  .view[data-view="finance-analytics"] .fan-export-btn{
    padding:8px 10px;
    font-size:11px;
  }
  .view[data-view="finance-transactions"] .tx-hero-title{
    font-size:20px;
  }
  .view[data-view="finance-transactions"] .tx-add-btn{
    padding:0 11px;
    font-size:11.5px;
  }
  .view[data-view="finance-accounts"] .fin-acc-card{
    padding:13px 12px;
    gap:9px;
  }
  .view[data-view="finance-accounts"] .fin-acc-right{
    max-width:40%;
  }
  .view[data-view="finance-accounts"] .fin-acc-saldo-value{
    font-size:12px;
  }
  .view[data-view="finance-calendar"] .fin-cal-grid{
    gap:3px;
  }
  .view[data-view="finance-calendar"] .fin-cal-day{
    border-radius:10px;
  }
  #financeModuleFields .toggle-row{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* Extra narrow devices */
@media (max-width:360px){
  .view[data-view="finance"] .fdash-card{
    padding:13px;
  }
  .view[data-view="finance"] .fdash-quick-row{
    gap:7px;
  }
  .view[data-view="finance"] .fdash-quick-btn{
    padding-inline:8px;
    font-size:12px;
  }
  .view[data-view="finance"] .fdash-balance-value{
    font-size:22px;
  }
  .view[data-view="finance-accounts"] .fin-acc-right{
    max-width:38%;
  }
  #financeModuleFields .toggle-row{
    gap:6px;
  }
  #financeModuleFields .toggle-row .toggle-btn{
    padding-inline:5px;
    font-size:11.5px;
  }
}

/* Keyboard / dynamic viewport: do not let Finance sheets overflow horizontally */
#financeModuleSheet,
#financeModuleBackdrop{
  max-width:100vw;
}
body.finance-module-open{
  overflow-x:hidden;
}


/* ================================================================
   CIPS v82 — Finance Interaction/Layout Integrity Hardening
   Root-cause fixes for UI breakage triggered by Finance actions.
   ================================================================ */

/* Global Finance containment: no generated Finance content may expand the app shell. */
.view[data-view^="finance"] {
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
}
/* v84: Finance DOM updates are frequent. Disable scroll anchoring on the
   module itself so Android Chrome cannot move the viewport when a chart/list
   is replaced after a button action. */
.view[data-view^="finance"] { overflow-anchor: none; }
.view[data-view^="finance"] input,
.view[data-view^="finance"] select,
.view[data-view^="finance"] textarea { max-width:100%; min-width:0; }
.view[data-view^="finance"] *,
#financeModuleSheet *,
#txAddChooserSheet *,
#txFilterSheet *,
#txRowMenuSheet *,
#logoPickerSheet * {
  box-sizing: border-box;
}

/* CRITICAL: the previous v81 rule assigned BOTH label and input width:100%
   while .field-row is a horizontal flex row. That created 200%+ rows and
   pushed Finance forms off-screen. Finance forms are intentionally vertical. */
#financeModuleFields .field-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 7px;
  width: 100%;
  min-width: 0;
  margin: 0 0 14px;
}
#financeModuleFields .field-row:last-child { margin-bottom: 0; }
#financeModuleFields .field-row > label {
  display: block;
  width: 100%;
  min-width: 0;
  flex: none;
  line-height: 1.35;
}
#financeModuleFields .field-row > .field-input,
#financeModuleFields .field-row > select.field-input,
#financeModuleFields .field-row > input.field-input,
#financeModuleFields .field-row > .logo-picker-trigger {
  width: 100% !important;
  max-width: 100%;
  min-width: 0;
  flex: none;
}
#financeModuleFields .field-row > .field-help-text {
  width: 100%;
  min-width: 0;
}
#financeModuleFields .toggle-row {
  width: 100%;
  min-width: 0;
}

/* Finance sheet itself must never inherit a width larger than the phone shell. */
#financeModuleBackdrop,
#financeModuleSheet,
#logoPickerBackdrop,
#logoPickerSheet,
#txAddChooserBackdrop,
#txAddChooserSheet,
#txFilterBackdrop,
#txFilterSheet,
#txRowMenuBackdrop,
#txRowMenuSheet {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Long account/category labels cannot force a flex/grid parent wider. */
.view[data-view^="finance"] .subheader,
.view[data-view^="finance"] .subheader > *,
.view[data-view^="finance"] .stat-card > *,
.view[data-view^="finance"] .progress-block-header > *,
.view[data-view^="finance"] .cat-card > *,
.view[data-view^="finance"] .fdash-card-head > *,
.view[data-view^="finance"] .fdash-balance-top > *,
.view[data-view^="finance"] .tx-hero-top > * {
  min-width: 0;
}
.view[data-view^="finance"] .cat-card > div:nth-child(2),
.view[data-view^="finance"] .stat-card > div:first-child {
  overflow: hidden;
}

/* Transaction rows: amount/menu remain fixed while text gets the remaining width. */
.view[data-view="finance-transactions"] .tx-row-content {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.view[data-view="finance-transactions"] .tx-row-main {
  flex: 1 1 auto;
  width: 0;
  min-width: 0;
}
.view[data-view="finance-transactions"] .tx-row-amt {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 38%;
}
.view[data-view="finance-transactions"] .tx-row-kebab {
  flex: 0 0 26px;
}

/* Account cards: three columns must fit without forcing horizontal overflow. */
.view[data-view="finance-accounts"] .fin-acc-card {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.view[data-view="finance-accounts"] .fin-acc-main {
  flex: 1 1 auto;
  width: 0;
  min-width: 0;
}
.view[data-view="finance-accounts"] .fin-acc-right {
  flex: 0 1 38%;
  min-width: 0;
  max-width: 38%;
}
.view[data-view="finance-accounts"] .fin-acc-kebab {
  flex: 0 0 26px;
}

/* Dashboard actions: never allow a long label to enlarge a button. */
.view[data-view="finance"] .fdash-quick-row,
.view[data-view="finance"] .fdash-quick-btn,
.view[data-view="finance"] .fdash-balance-top,
.view[data-view="finance"] .fdash-balance-actions {
  min-width: 0;
  max-width: 100%;
}
.view[data-view="finance"] .fdash-quick-btn {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Avoid layout jumps caused by native select/number controls on Android. */
#financeModuleFields select.field-input,
#financeModuleFields input.field-input,
#financeModuleFields .logo-picker-trigger {
  min-height: 44px;
  line-height: 1.25;
}

/* Sheet content must scroll internally; opening/closing it must not widen the shell. */
.day-sheet {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.day-sheet > * { min-width: 0; max-width: 100%; }

@media (max-width: 360px) {
  #financeModuleFields .field-row { gap: 6px; }
  .view[data-view="finance-accounts"] .fin-acc-right { max-width: 36%; }
  .view[data-view="finance-transactions"] .tx-row-amt { max-width: 34%; }
}


/* CIPS v88 — Finance Android route-jump hardening.
   Route views must participate in normal document flow; only the app-level
   #screen is scrollable. This prevents child routes/buttons from becoming a
   competing scroll/focus target on narrow Android browsers. */
.view[data-view^="finance"] {
  contain: layout style;
  isolation: isolate;
  scroll-margin-top: 0;
  scroll-margin-bottom: 0;
}
.view[data-view^="finance"] button,
.view[data-view^="finance"] [role="button"] {
  -webkit-tap-highlight-color: transparent;
}


/* ============================================================
   CIPS v89 — FINANCE ANDROID VIEWPORT INTERACTION HARDENING
   Root cause targeted:
   - forced blur during route render
   - forced screen.scrollTop writes during Finance navigation/mutation
   - transform/compositor route transitions
   These three operations can race Android Chrome's visual viewport/IME
   adjustment and make the entire Finance UI appear to jump, shift, flash
   black, or lose its previous layout.
   ============================================================ */
@media (max-width: 600px){
  .view[data-view^="finance"],
  .view[data-view^="finance"].active,
  .view[data-view^="finance"].anim-forward,
  .view[data-view^="finance"].anim-back{
    animation:none !important;
    transform:none !important;
    translate:none !important;
    opacity:1 !important;
    will-change:auto !important;
  }

  .view[data-view^="finance"]{
    contain:layout style;
    overflow-x:clip !important;
  }

  .view[data-view^="finance"] .day-sheet,
  .view[data-view^="finance"] .sheet,
  .view[data-view^="finance"] .modal{
    transform:none;
  }
}


/* CIPS v90 — Finance navigation stability.
   No transform/animation/focus-driven viewport movement during Finance interaction. */
@media (max-width:600px){
  .view[data-view^="finance"],
  .view[data-view^="finance"] *{
    -webkit-tap-highlight-color: transparent;
  }
  .view[data-view^="finance"] .day-sheet{
    will-change:auto !important;
  }
  #screen{
    scroll-behavior:auto !important;
  }
}

/* v93 interaction stability */
#screen, .cips-screen { overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; }
.phone, .cips-sandbox { overscroll-behavior: none; }
html { scrollbar-gutter: stable; }