: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;
  }
  /* Teks yang duduk di atas gradient/glow ambient (bukan permukaan solid) dikasih
     bayangan halus biar tetap tegas dibaca, tidak "samar" ketimbun background. */
  .eyebrow, .greeting, .date, .fd-row-name, .fd-row-sub, .fd-row-tagline{
    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; }

  /* 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{
    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);
  }
  .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: 20px; 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; }

  /* ---- 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); }

  /* ---- Kartu Habit khusus di Dashboard: futuristik, jadi satu-satunya CTA ---- */
  .hero-habit-main{
    padding: 26px 22px 24px;
    border: 1px solid rgba(150,255,190,0.30);
    box-shadow: 0 22px 46px -22px rgba(150,255,190,0.45), inset 0 1px 0 rgba(255,255,255,0.03);
  }
  .hero-habit-main .hero-title{ font-size:24px; letter-spacing:-0.4px; }
  .hero-habit-main .hero-arrow{
    width:38px; height:38px; font-size:17px;
    box-shadow: 0 0 0 5px rgba(150,255,190,0.07);
  }
  .hero-habit-main .ring-wrap{ width:96px; height:96px; }
  .hero-habit-main .ring-wrap svg{ width:96px; height:96px; }

  /* ==== Front Dashboard: Insight Rail ====
     Habit berdiri sendiri sebagai hero/CTA utama (satu-satunya yang bisa diklik).
     Religion/Health & Gym/Finance dikelompokkan terpisah di bawahnya sebagai
     "Ringkasan Checklist Habit", karena secara data ketiganya memang potongan
     dari checklist per-jam yang sama di menu Habit. Tiap kartu punya logo custom
     (bukan emoji dalam kotak kecil) + motif dekoratif + kalimat motivasi gaul
     yang relate ke temanya. Tetap presisi tinggi .screen, tanpa scroll. */
  .fd-stack{
    flex:1; min-height:0;
    display:flex; flex-direction:column;
    padding-bottom:10px;
  }

  /* ---- Habit: hero terpisah, satu-satunya CTA di dashboard ---- */
  .fd-row-habit{
    --fd-accent: var(--habit); --fd-accent-text: var(--habit-text); --fd-glow: rgba(150,255,190,0.20);
    border-width:1.5px; border-color:rgba(150,255,190,0.5); cursor:pointer;
    flex: 1.5 1 0; min-height:0; margin-bottom:12px;
    box-shadow: 0 14px 30px -18px rgba(150,255,190,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
  }

  /* ---- Logo tiap kategori: ikon custom mengambang dengan glow radial lembut,
     bukan lagi ditaruh di dalam kotak kecil ---- */
  .fd-row-icon-wrap{ position:relative; width:38px; height:38px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }

  /* 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 (premium-gated
     lewat updateHabitHourLabel, sama seperti custom label per jam biasa). ---- */
  .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; }
  .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); }
  }

  /* Pola Makan: piring diam, sendok-garpu bolak-balik "menyentuh" piring */
  .ap-ia-makan .ap-ia-base{ font-size:16px; opacity:.55; }
  .ap-ia-makan .ap-ia-accent{ font-size:12px; animation:apUtensilTap 1.3s ease-in-out infinite; transform-origin:50% 80%; }
  @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-makan .ap-ia-accent, .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-habit .ap-stat-delta{ color:var(--habit-text); }
  .ap-c-ibadah .ap-stat-icon{ color:var(--ibadah-text); } .ap-c-ibadah .ap-stat-delta{ color:var(--ibadah-text); }
  .ap-c-kesehatan .ap-stat-icon{ color:var(--kesehatan-text); } .ap-c-kesehatan .ap-stat-delta{ color:var(--kesehatan-text); }
  .ap-c-financial .ap-stat-icon{ color:var(--financial-text); } .ap-c-financial .ap-stat-delta{ 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; }
  .ap-card-link{ font-family:'Space Grotesk', sans-serif; font-size:11.5px; font-weight:600; color:var(--habit-text); background:var(--habit-dim); border:1px solid rgba(150,255,190,.3); padding:6px 10px; border-radius:var(--cips-radius-md); display:flex; align-items:center; gap:3px; cursor:pointer; flex-shrink:0; white-space:nowrap; transition: transform .15s var(--ease-spring), box-shadow .15s ease; }
  .ap-card-link:active{ transform:scale(.95); box-shadow: 0 0 0 4px rgba(150,255,190,0.12); }

  /* ===== 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-list{ flex:1; min-width:0; display:flex; flex-direction:column; gap:11px; }
  .ap-cat-row{ display:flex; align-items:center; gap:9px; }
  .ap-cat-icon{ width:24px; height:24px; border-radius:var(--cips-radius-sm); flex-shrink:0; display:flex; align-items:center; justify-content:center; }
  .ap-cat-icon svg{ width:11px; height:11px; }
  .ap-cat-main{ flex:1; min-width:0; }
  .ap-cat-top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:5px; }
  .ap-cat-name{ font-size:12px; font-weight:600; color:var(--text-primary); }
  .ap-cat-frac{ font-family:'JetBrains Mono', monospace; font-size:10.5px; font-weight:600; color:var(--text-muted); }
  .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); }
  .ap-cat-check{ transition: transform .3s var(--ease-spring), background .2s ease, border-color .2s ease; }
  .ap-cat-check.done{ box-shadow: 0 0 10px 1px rgba(150,255,190,.45); }
  .ap-cat-check{ width:18px; height:18px; border-radius:50%; border:1.5px solid var(--hairline); flex-shrink:0; display:flex; align-items:center; justify-content:center; }
  .ap-cat-check.done{ background:var(--habit); border-color:var(--habit); }
  .ap-cat-check svg{ width:9px; height:9px; color:#062012; }

  /* ===== 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; }

  .fdash-tx-row{ display:flex; align-items:center; gap:11px; padding:10px 0; border-bottom:1px solid var(--hairline); cursor:pointer; }
  .fdash-tx-row:last-child{ border-bottom:none; padding-bottom:0; }
  .fdash-tx-row:first-child{ padding-top:0; }
  .fdash-tx-ico{ width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
  .fdash-tx-main{ flex:1; min-width:0; }
  .fdash-tx-title{ font-size:13px; font-weight:600; color:var(--text-primary); }
  .fdash-tx-sub{ display:flex; align-items:center; gap:6px; margin-top:3px; }
  .fdash-tx-tag{ font-size:9.5px; font-weight:700; color:var(--financial-text); background:var(--financial-dim); padding:2px 7px; border-radius:var(--cips-radius-lg); }
  .fdash-tx-place{ font-size:10.5px; color:var(--text-muted); }
  .fdash-tx-amt{ text-align:right; flex-shrink:0; }
  .fdash-tx-amt-value{ font-family:'JetBrains Mono', monospace; font-size:12.5px; font-weight:700; }
  .fdash-tx-amt-date{ font-size:9.5px; color:var(--text-muted); margin-top:3px; }

  .fdash-manage-row{ display:flex; gap:10px; }
  .fdash-manage-btn{ flex:1; text-align:center; 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); border-radius:var(--cips-radius-lg); padding:12px 8px; cursor:pointer; }
  .fdash-manage-btn:active{ transform:scale(.97); }
  .fdash-manage-btn-full{ flex:1 1 100%; }

  /* ===== 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; }
  .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:340px){ .fdash-row{ grid-template-columns:1fr; } }

  /* ---- 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{ display:flex; align-items:center; gap:12px; background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:12px; margin-bottom:10px; position:relative; overflow:hidden; box-shadow: 0 8px 20px -16px rgba(0,0,0,0.5); transition: transform .15s var(--ease-spring), box-shadow .15s ease, border-color .15s ease, background-color .25s ease; }
  .tx-row::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:active{ transform:scale(0.985); box-shadow: 0 3px 10px -8px rgba(0,0,0,0.45); }
  .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; }
  .tile.ibadah .tile-icon{ background:var(--ibadah-dim); color:var(--ibadah-text); }
  .tile.ibadah{ border-color: rgba(255,214,140,0.22); }
  .tile.kesehatan .tile-icon{ background:var(--kesehatan-dim); color:var(--kesehatan-text); }
  .tile.kesehatan{ border-color: rgba(130,205,255,0.22); }
  .tile-wide.financial{ border-color: rgba(255,170,120,0.22); }

  .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; }
  .prayer-row-status.done{ background:var(--habit); border-color:var(--habit); color:#0A0C11; box-shadow: 0 0 10px 1px rgba(150,255,190,.45); }
  .prayer-row-status.current{ border-color:var(--ibadah); color:var(--ibadah-text); box-shadow: 0 0 8px 0 rgba(255,214,140,.4); }

  .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; max-height:76%; }
  .day-sheet-backdrop.logo-picker-backdrop{ z-index:160; }
  .logo-picker-list{ display:flex; flex-direction:column; gap:4px; margin-top:4px; }
  .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;
  }
  .readonly-value{ font-family:'JetBrains Mono', monospace; font-size:13px; font-weight:600; color:var(--text-primary); }
  .compound-row span{ font-family:'JetBrains Mono', monospace; font-size:13px; font-weight:600; color:var(--financial-text); }
  .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-pct-input{ width:60px; text-align:right; background:var(--surface-2); border:1px solid var(--hairline); color:var(--text-primary); border-radius:var(--cips-radius-md); padding:8px 6px; font-family:'JetBrains Mono', monospace; font-size:13px; flex-shrink:0; }
  .cat-pct-sign{ font-size:12px; color:var(--text-muted); flex-shrink:0; }
  .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); }
  .cat-edit-row-locked{ background:var(--surface-2); border:1px solid var(--hairline); border-radius:var(--cips-radius-md); padding:9px 10px; }
  .cat-edit-row-locked span:first-child{ flex:1; font-size:13px; color:var(--text-muted); display:flex; align-items:center; gap:6px; }
  .cat-edit-row-locked span:last-child{ font-family:'JetBrains Mono', monospace; font-size:13px; font-weight:600; color:var(--financial-text); flex-shrink:0; }
  .alloc-readonly-row.locked span:first-child{ color:var(--text-muted); display:flex; align-items:center; gap:5px; }
  .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; }
  .alloc-readonly-row{ display:flex; justify-content:space-between; font-size:13px; padding:6px 0; }
  .alloc-readonly-row span:first-child{ color:var(--text-primary); }
  .alloc-readonly-row span:last-child{ font-family:'JetBrains Mono', monospace; color:var(--text-muted); }
  .finance-alloc-list .alloc-readonly-row{ padding:9px 0; border-bottom:1px solid var(--hairline); }
  .finance-alloc-list .alloc-readonly-row:last-child{ border-bottom:none; }

  /* ==== 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); }
  .finance-alloc-list .alloc-readonly-row span:last-child{ color:var(--financial-text); font-weight:700; }

  .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; }

  .day-row{ background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--cips-radius-lg); padding:14px 16px; margin-bottom:8px; cursor:pointer; }
  .day-row-top{ display:flex; align-items:center; justify-content:space-between; }
  .day-num{ font-family:'Space Grotesk', sans-serif; font-size:13.5px; font-weight:600; color:var(--text-primary); }
  .day-figures{ text-align:right; }
  .day-modal{ font-family:'JetBrains Mono', monospace; font-size:12.5px; color:var(--text-primary); }
  .day-profit{ font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--habit-text); margin-top: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));
    max-height:72%; overflow-y:auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    transform:translate3d(0,100%,0); transition:transform .25s ease-out, background-color .25s ease, border-color .25s ease;
    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); }
  .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; }

  /* ===== Upgrade / paywall sheet ===== */
  .upg-reason{
    display:flex; align-items:center; gap:8px; background:var(--financial-dim);
    border:1px solid rgba(255,170,120,.3); border-radius:var(--cips-radius-md); padding:10px 12px;
    font-size:12.5px; color:var(--text-primary); margin-bottom:16px; line-height:1.4;
  }
  .upg-reason-icon{ font-size:15px; flex-shrink:0; }
  .upg-feature-list{ display:flex; flex-direction:column; gap:12px; margin-bottom:20px; }
  .upg-feature-row{ display:flex; align-items:flex-start; gap:10px; }
  .upg-feature-icon{
    width:30px; height:30px; border-radius:var(--cips-radius-md); flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:14px;
  }
  .upg-feature-text{ flex:1; min-width:0; }
  .upg-feature-title{ font-size:13px; font-weight:600; color:var(--text-primary); line-height:1.3; }
  .upg-feature-sub{ font-size:11.5px; color:var(--text-muted); margin-top:2px; line-height:1.4; }

  .upg-plan-toggle{
    display:flex; background:var(--surface-2); border:1px solid var(--hairline);
    border-radius:var(--cips-radius-lg); padding:4px; gap:4px; margin-bottom:14px;
  }
  .upg-plan-btn{
    flex:1; padding:10px 6px; border-radius:var(--cips-radius-md); border:none; background:transparent;
    color:var(--text-muted); font-family:'Space Grotesk', sans-serif; font-size:12.5px;
    font-weight:600; cursor:pointer; text-align:center; position:relative; transition:all .15s ease;
  }
  .upg-plan-btn.active{ background:var(--surface-1); color:var(--text-primary); box-shadow:0 1px 4px rgba(0,0,0,.2); }
  .upg-plan-badge{
    display:inline-block; margin-left:5px; font-size:9px; font-weight:700; letter-spacing:.2px;
    color:#0A0C11; background:var(--habit); border-radius:var(--cips-radius-sm); padding:2px 5px; vertical-align:middle;
  }
  .upg-price-block{ text-align:center; margin-bottom:18px; }
  .upg-price{ font-family:'JetBrains Mono', monospace; font-size:26px; font-weight:700; color:var(--text-primary); }
  .upg-price-unit{ font-size:12.5px; color:var(--text-muted); margin-left:3px; }
  .upg-price-note{ font-size:11.5px; color:var(--habit-text); margin-top:4px; }
  .upg-cta-btn{ margin-top:0; }
  .upg-secondary-btn{
    width:100%; padding:12px; margin-top:10px; border:none; background:transparent;
    color:var(--text-muted); font-family:'Space Grotesk', sans-serif; font-size:13px; font-weight:600; cursor:pointer;
  }
  .upg-secondary-btn:active{ opacity:.6; }
  .upg-trust-note{ font-size:10.5px; color:var(--text-muted); text-align:center; margin-top:10px; line-height:1.5; }

  /* ---- 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; }

  .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-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; }