/* ============ Cukup — palet: Warm Ivory #FBF6EA · Soft Champagne #E1D2BD · Deep Forest Green #153029 (ikut HP: terang / gelap) ============ */
:root {
  --bg: #FBF6EA;
  --card: #fffdf8;
  --text: #153029;
  --muted: #6c7067;
  --line: #ebe1cf;
  --field: #f4ecdc;
  --brand: #153029;
  --brand-ink: #FBF6EA;
  --brand-soft: #efe4d2;
  --champagne: #E1D2BD;
  --in: #2e9e6a;
  --in-bg: #ddf3ea;
  --out: #d2544f;
  --out-bg: #fbe1e0;
  --move: #6a7480;
  --warn: #c98a12;
  --warn-bg: #fff1cc;
  --danger: #c8443f;
  --danger-bg: #fde2e1;
  --hero: linear-gradient(135deg, #f3e9d7 0%, #E1D2BD 100%);
  --hero-ink: #153029;
  --shadow: 0 1px 2px rgba(21, 48, 41, .05), 0 8px 24px rgba(21, 48, 41, .07);
  --shadow-lg: 0 10px 30px rgba(21, 48, 41, .14);
  --zone-hijau: #a8e4c0;
  --zone-kuning: #fde68f;
  --zone-oranye: #ffc79a;
  --zone-merah: #f8b0ad;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  /* Warna dompet: latar pastel & tinta */
  --w0-bg: #ddf3ea; --w0-ink: #1f7a5c;
  --w1-bg: #ffe5d6; --w1-ink: #b2552b;
  --w2-bg: #e8e2fa; --w2-ink: #5b48a8;
  --w3-bg: #dceefb; --w3-ink: #2369a0;
  --w4-bg: #fff2c6; --w4-ink: #866600;
  --w5-bg: #fbe1ea; --w5-ink: #a83a63;
  --w6-bg: #e5efd9; --w6-ink: #4f6e2c;
  --w7-bg: #d8f2f4; --w7-ink: #1d7480;
  --w8-bg: #e2e7fb; --w8-ink: #3d4fa6;
  --w9-bg: #ffe9c4; --w9-ink: #94580a;
  --w10-bg: #f2e0f5; --w10-ink: #87399a;
  --w11-bg: #e4eaef; --w11-ink: #46596a;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f211c;
    --card: #17302a;
    --text: #FBF6EA;
    --muted: #b6ab9a;
    --line: #26413a;
    --field: #1e3932;
    --brand: #E1D2BD;
    --brand-ink: #153029;
    --brand-soft: #2a4339;
    --champagne: #E1D2BD;
    --in: #7fdcae;
    --in-bg: #1f3a30;
    --out: #f2938f;
    --out-bg: #3d2423;
    --move: #a9b3bd;
    --warn: #f3c45a;
    --warn-bg: #3b3018;
    --danger: #f2938f;
    --danger-bg: #42211f;
    --hero: linear-gradient(135deg, #1d3d34 0%, #2f3a2e 100%);
    --hero-ink: #FBF6EA;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, .45);
    --zone-hijau: #2f6b4a;
    --zone-kuning: #6b5a1f;
    --zone-oranye: #6e4422;
    --zone-merah: #6e2f2c;

    --w0-bg: #1e3a31; --w0-ink: #8fe0c2;
    --w1-bg: #3d2b22; --w1-ink: #ffb894;
    --w2-bg: #2c2747; --w2-ink: #c3b6ff;
    --w3-bg: #1f3245; --w3-ink: #9fd0f7;
    --w4-bg: #3a3218; --w4-ink: #f5d675;
    --w5-bg: #3e2430; --w5-ink: #f6a9c4;
    --w6-bg: #29361f; --w6-ink: #bcdc98;
    --w7-bg: #1b3a3d; --w7-ink: #8fe3ea;
    --w8-bg: #252b48; --w8-ink: #aebaff;
    --w9-bg: #3d2f19; --w9-ink: #ffc983;
    --w10-bg: #3a2540; --w10-ink: #e2a8f0;
    --w11-bg: #262e35; --w11-ink: #b4c4d2;
  }
}
.wc-0 { --w-bg: var(--w0-bg); --w-ink: var(--w0-ink); }
.wc-1 { --w-bg: var(--w1-bg); --w-ink: var(--w1-ink); }
.wc-2 { --w-bg: var(--w2-bg); --w-ink: var(--w2-ink); }
.wc-3 { --w-bg: var(--w3-bg); --w-ink: var(--w3-ink); }
.wc-4 { --w-bg: var(--w4-bg); --w-ink: var(--w4-ink); }
.wc-5 { --w-bg: var(--w5-bg); --w-ink: var(--w5-ink); }
.wc-6 { --w-bg: var(--w6-bg); --w-ink: var(--w6-ink); }
.wc-7 { --w-bg: var(--w7-bg); --w-ink: var(--w7-ink); }
.wc-8 { --w-bg: var(--w8-bg); --w-ink: var(--w8-ink); }
.wc-9 { --w-bg: var(--w9-bg); --w-ink: var(--w9-ink); }
.wc-10 { --w-bg: var(--w10-bg); --w-ink: var(--w10-ink); }
.wc-11 { --w-bg: var(--w11-bg); --w-ink: var(--w11-ink); }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--page, var(--bg)); color: var(--text); }
body {
  font: 16px/1.45 "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:active { transform: scale(.98); }
h2 { font-size: 13px; font-weight: 700; margin: 24px 2px 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
h3 { font-weight: 700; }
[hidden] { display: none !important; }

/* ---------- Kerangka ---------- */
#app { max-width: 560px; margin: 0 auto; min-height: 100vh; padding-bottom: calc(190px + var(--safe-b)); }
main { padding: 0 16px; }

.hero {
  margin: calc(10px + var(--safe-t)) 16px 0; padding: 18px 20px 20px; border-radius: 28px;
  background: var(--hero); color: var(--hero-ink); box-shadow: var(--shadow);
}
.hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.hello { font-size: 15px; font-weight: 700; }
.hero-label { font-size: 13px; opacity: .7; margin-top: 10px; }
.hero-total { font-size: 32px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.icon-btn {
  background: rgba(255, 255, 255, .55); border: 0; width: 40px; height: 40px; border-radius: 14px;
  display: grid; place-items: center; color: inherit; font-size: 20px; flex: none;
}
@media (prefers-color-scheme: dark) { .icon-btn { background: rgba(255, 255, 255, .08); } }
.demo-banner {
  margin: 10px 16px 0; background: var(--warn-bg); color: var(--warn); font-size: 13px; font-weight: 600;
  padding: 8px 14px; border-radius: 14px; text-align: center;
}

.section-head { display: flex; justify-content: space-between; align-items: center; }
.section-head h2 { margin-bottom: 10px; }
.link-btn {
  background: var(--brand-soft); border: 0; color: var(--brand); font-weight: 700; font-size: 13px;
  padding: 7px 14px; border-radius: 999px; margin-top: 14px;
}

/* ---------- Ringkasan bulan ---------- */
.month-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.stat { background: var(--card); border-radius: 20px; padding: 12px 14px; box-shadow: var(--shadow); min-width: 0; }
.stat:nth-child(1) { background: var(--in-bg); }
.stat:nth-child(2) { background: var(--out-bg); }
.stat:nth-child(3) { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; padding: 10px 16px; }
.stat-label { font-size: 12px; color: var(--muted); font-weight: 600; }
.stat-value { font-weight: 800; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-tap { border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; width: 100%; }
.stat-tap:active { transform: scale(.97); }
.stat-tap .stat-label { display: flex; justify-content: space-between; gap: 6px; }
.stat-more { font-size: 11px; font-weight: 700; opacity: .8; white-space: nowrap; }
/* Lembar rincian uang masuk / keluar (Laporan) */
.flow-month { color: var(--muted); font-weight: 600; margin: -10px 0 12px; }
.flow-total { border-radius: 18px; padding: 12px 16px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.flow-total.flow-in { background: var(--in-bg); }
.flow-total.flow-out { background: var(--out-bg); }
.flow-total span { font-weight: 600; color: var(--muted); font-size: 13px; }
.flow-total b { font-size: 20px; font-weight: 800; flex: 1; text-align: right; }
.flow-total small { width: 100%; text-align: right; color: var(--muted); }
.flow-cats { background: var(--card); border-radius: 18px; margin-top: 10px; box-shadow: var(--shadow); }
.flow-cat { display: flex; justify-content: space-between; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 600; }
.flow-cat:last-child { border-bottom: 0; }
.flow-cat-amt { white-space: nowrap; font-weight: 800; }
.flow-cat-amt small { color: var(--muted); font-weight: 600; margin-left: 4px; }
.flow-list { margin-top: 4px; }
.c-in { color: var(--in); } .c-out { color: var(--out); } .c-move { color: var(--move); }

/* ---------- Kartu dompet ---------- */
.wallet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wallet {
  position: relative; text-align: left; border: 2px solid transparent; border-radius: 26px; padding: 14px 14px 16px;
  min-width: 0; background: var(--w-bg); color: var(--text); box-shadow: var(--shadow);
}
.wallet-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; min-height: 36px; }
.wallet-emoji {
  width: 36px; height: 36px; border-radius: 14px; display: grid; place-items: center; font-size: 18px;
  background: rgba(255, 255, 255, .7);
}
@media (prefers-color-scheme: dark) { .wallet-emoji { background: rgba(255, 255, 255, .08); } }
.badge { font-size: 10.5px; font-weight: 700; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.wallet-name { font-size: 13px; font-weight: 600; color: var(--w-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wallet-saldo { font-size: 19px; font-weight: 800; letter-spacing: -.02em; margin: 1px 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar { height: 8px; background: rgba(255, 255, 255, .7); border-radius: 999px; overflow: hidden; }
@media (prefers-color-scheme: dark) { .bar { background: rgba(255, 255, 255, .1); } }
.bar > i { display: block; height: 100%; background: var(--w-ink, var(--brand)); border-radius: 999px; transition: width .4s ease; }

.wallet[data-status="menipis"] { border-color: var(--warn); }
.wallet[data-status="menipis"] .badge { background: var(--warn-bg); color: var(--warn); }
.wallet[data-status="menipis"] .bar > i { background: var(--warn); }
.wallet[data-status="habis"] { background: var(--danger-bg); border-color: var(--danger); }
.wallet[data-status="habis"] .badge { background: var(--danger); color: #fff; }
.wallet[data-status="habis"] .wallet-saldo, .wallet[data-status="habis"] .wallet-name { color: var(--danger); }
.wallet[data-status="kosong"] .badge { background: rgba(255, 255, 255, .7); color: var(--muted); }
@media (prefers-color-scheme: dark) { .wallet[data-status="kosong"] .badge { background: rgba(255, 255, 255, .08); } }

/* ---------- Daftar transaksi ---------- */
.recent { display: flex; flex-direction: column; gap: 8px; }
.transcript { font-size: 13px; color: var(--muted); font-style: italic; margin: 0 4px 2px; }
.tx {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--card); border: 0; border-radius: 20px; padding: 11px 14px; box-shadow: var(--shadow);
}
.tx-icon {
  width: 42px; height: 42px; border-radius: 15px; display: grid; place-items: center; flex: none; font-size: 18px;
  background: var(--w-bg, var(--field));
}
.tx-main { flex: 1; min-width: 0; }
.tx-title { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-amt { font-weight: 800; font-size: 15px; white-space: nowrap; }
.tx.new { animation: flash 1.4s ease-out; }
@keyframes flash { from { box-shadow: 0 0 0 3px var(--brand); } to { box-shadow: var(--shadow); } }
.day-head { font-size: 12px; font-weight: 700; color: var(--muted); margin: 18px 6px 8px; display: flex; justify-content: space-between; text-transform: uppercase; letter-spacing: .04em; }
#history-list .tx { margin-bottom: 8px; }
.hint {
  color: var(--muted); font-size: 14px; text-align: center; margin: 22px 0; line-height: 1.7;
  background: var(--card); border-radius: 22px; padding: 16px; box-shadow: var(--shadow);
}
.empty { color: var(--muted); text-align: center; padding: 30px 10px; }

/* ---------- Filter & input ---------- */
.filters { position: sticky; top: var(--safe-t); background: var(--page, var(--bg)); padding: 12px 0 6px; z-index: 2; }
.filters input, .filter-row select, .field input, .field select {
  width: 100%; padding: 12px 14px; border: 1.5px solid transparent; border-radius: 16px; background: var(--field);
  outline: none; -webkit-appearance: none; appearance: none;
}
.filters input:focus, .field input:focus, .field select:focus { border-color: var(--brand); background: var(--card); }
.filter-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.filter-row select { padding: 9px 10px; font-size: 13px; font-weight: 600; min-width: 0; border-radius: 999px; }
.fab-secondary {
  display: block; margin: 18px auto; background: var(--brand-soft); border: 0; border-radius: 999px;
  padding: 11px 20px; color: var(--brand); font-weight: 700;
}

/* ---------- Laporan ---------- */
.report-month { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; }
.report-month .icon-btn { background: var(--card); box-shadow: var(--shadow); font-size: 22px; }
.report-month strong { font-size: 17px; }
.cat-row { background: var(--card); border-radius: 20px; padding: 12px 14px; margin-bottom: 8px; box-shadow: var(--shadow); }
.cat-top { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; font-weight: 600; }
.cat-top span:last-child { font-weight: 800; white-space: nowrap; }
.cat-row .bar { background: var(--field); }
.cat-pct { font-size: 12px; color: var(--muted); margin-top: 6px; }

/* ---------- Pengaturan ---------- */
.list { background: var(--card); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); }
.list-item {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%;
  padding: 14px 16px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left;
}
.list-item:last-child { border-bottom: 0; }
.list-item small { color: var(--muted); }
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--w-ink); margin-right: 8px; vertical-align: -1px; }
.danger-text { color: var(--danger); font-weight: 600; }

/* ---------- Tombol suara ---------- */
.voice-bar {
  position: fixed; left: 0; right: 0; bottom: calc(86px + var(--safe-b)); z-index: 5;
  display: flex; justify-content: center; align-items: center; pointer-events: none; height: 92px;
}
.voice-bar > * { pointer-events: auto; }
.mic-btn {
  width: 76px; height: 76px; border-radius: 50%; border: 4px solid var(--page, var(--bg));
  background: linear-gradient(145deg, color-mix(in srgb, var(--brand) 78%, #fff) 0%, var(--brand) 100%); color: var(--brand-ink);
  box-shadow: 0 10px 28px rgba(21, 48, 41, .32); display: grid; place-items: center;
}
.mic-btn.recording { background: linear-gradient(145deg, #f59a95 0%, #d2544f 100%); animation: pulse 1.2s infinite; }
.mic-btn.busy { opacity: .65; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(210, 84, 79, .45); } 100% { box-shadow: 0 0 0 24px rgba(210, 84, 79, 0); } }
.kbd-btn {
  position: absolute; left: calc(50% - 122px); width: 50px; height: 50px; border-radius: 18px;
  border: 0; background: var(--card); font-size: 20px; box-shadow: var(--shadow-lg);
}
.voice-status {
  position: absolute; left: calc(50% + 54px); font-size: 12px; font-weight: 600; color: var(--muted);
  max-width: calc(50% - 64px); pointer-events: none;
}

/* ---------- Tab bar mengambang ---------- */
.tabbar {
  position: fixed; left: 12px; right: 12px; bottom: calc(10px + var(--safe-b)); z-index: 6;
  max-width: 536px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--card); border-radius: 26px; padding: 6px; box-shadow: var(--shadow-lg);
}
.tabbar button {
  border: 0; background: none; padding: 8px 0 7px; font-size: 11px; font-weight: 600; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 3px; border-radius: 20px;
}
.tabbar svg { width: 22px; height: 22px; }
.tabbar button.active { color: var(--brand); background: var(--brand-soft); font-weight: 700; }

/* ---------- Lembar bawah ---------- */
.sheet-backdrop { position: fixed; inset: 0; background: rgba(20, 28, 25, .35); z-index: 20; display: flex; align-items: flex-end; justify-content: center; }
.sheet {
  background: var(--bg); width: 100%; max-width: 560px; max-height: 92vh; overflow: auto;
  border-radius: 30px 30px 0 0; padding: 12px 18px calc(20px + var(--safe-b));
}
.sheet::before { content: ""; display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto 14px; }
.sheet h3 { margin: 0 0 14px; font-size: 19px; }
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin: 0 0 5px 4px; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--field); border-radius: 999px; padding: 4px; gap: 4px; }
.seg button { border: 0; background: none; padding: 9px 0; border-radius: 999px; font-weight: 600; }
.seg button.on { background: var(--card); color: var(--brand); font-weight: 800; box-shadow: var(--shadow); }
.btn-row { display: flex; gap: 8px; margin-top: 18px; }
.btn { flex: 1; padding: 13px; border-radius: 999px; border: 0; background: var(--field); font-weight: 700; }
.btn.primary { background: var(--brand); color: var(--brand-ink); }
.btn.danger { color: var(--danger); background: var(--danger-bg); }
.split-row { display: grid; grid-template-columns: 1fr 140px; gap: 8px; align-items: center; margin-bottom: 8px; }
.split-row input { text-align: right; }
.split-total { display: flex; justify-content: space-between; font-size: 14px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(196px + var(--safe-b)); z-index: 30;
  background: var(--text); color: var(--bg); padding: 11px 18px; border-radius: 18px; font-size: 14px; font-weight: 600;
  max-width: calc(100% - 32px); text-align: center; box-shadow: var(--shadow-lg);
}
.toast, .voice-status { white-space: pre-line; }

/* ---------- Layar login ---------- */
.pin-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px 20px; background: var(--hero); }
.pin-box {
  text-align: center; width: 100%; max-width: 360px; background: var(--card); border-radius: 32px;
  padding: 32px 24px 26px; box-shadow: var(--shadow-lg);
}
.pin-logo { width: 76px; height: 76px; border-radius: 24px; }
.pin-box h1 { margin: 14px 0 4px; font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.pin-box p { color: var(--muted); margin: 4px 0; }
.pin-error { color: var(--danger) !important; min-height: 20px; font-size: 14px; }
.google-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  margin-top: 24px; padding: 14px 16px; border-radius: 999px; border: 1.5px solid var(--line);
  background: #fff; color: #1f1f1f; font-weight: 700; box-shadow: var(--shadow);
}
.google-btn:disabled { opacity: .6; }
.login-note { font-size: 12px; color: var(--muted); line-height: 1.55; margin-top: 18px !important; }

/* Tanda panah untuk kotak pilihan */
.filter-row select, .field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a8582' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 34px;
}

/* Pilihan warna dompet */
.swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; padding: 4px 2px; }
.swatch {
  aspect-ratio: 1; border-radius: 16px; border: 3px solid var(--w-bg); background: var(--w-bg);
  box-shadow: inset 0 0 0 2px var(--card), var(--shadow); position: relative;
}
.swatch::after { content: ""; position: absolute; inset: 30%; border-radius: 50%; background: var(--w-ink); opacity: .85; }
.swatch.on { border-color: var(--w-ink); }
.swatch.on::after { content: "✓"; display: grid; place-items: center; inset: 22%; color: var(--w-bg); font-weight: 800; font-size: 14px; opacity: 1; }

/* ---------- Grafik posisi kas ---------- */
.cash-card { position: relative; background: var(--card); border-radius: 24px; padding: 14px 12px 12px; box-shadow: var(--shadow); }
.cash-head { display: flex; align-items: center; gap: 12px; margin: 0 4px 10px; }
.cash-head:empty { display: none; }
.cash-zone { font-weight: 800; font-size: 17px; padding: 8px 12px; border-radius: 16px; white-space: nowrap; }
.cash-zone.zone-hijau { background: color-mix(in srgb, var(--zone-hijau) 60%, transparent); }
.cash-zone.zone-kuning { background: color-mix(in srgb, var(--zone-kuning) 60%, transparent); }
.cash-zone.zone-oranye { background: color-mix(in srgb, var(--zone-oranye) 60%, transparent); }
.cash-zone.zone-merah { background: color-mix(in srgb, var(--zone-merah) 60%, transparent); }
.cash-zone-text { font-size: 13px; line-height: 1.4; }
.cash-zone-text small { color: var(--muted); }
.cash-chart { width: 100%; overflow: hidden; touch-action: pan-y; }
.cash-chart svg { display: block; }
.cash-chart .axis { font-size: 10px; fill: var(--muted); }
.cash-line { fill: none; stroke: var(--text); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.cash-dot { fill: var(--text); stroke: var(--card); stroke-width: 2; }
.cross { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.cash-tip {
  position: absolute; top: 64px; background: var(--text); color: var(--bg); border-radius: 14px; padding: 8px 12px;
  font-size: 12px; line-height: 1.5; pointer-events: none; box-shadow: var(--shadow-lg); white-space: nowrap;
}
.cash-tip strong { font-size: 16px; }
.cash-tip .tip-date { opacity: .75; }
.cash-note { font-size: 11px; color: var(--muted); margin: 8px 4px 0; line-height: 1.5; }
.cash-tip .tip-zone { font-weight: 700; margin-bottom: 2px; }

/* ---------- Data & cadangan ---------- */
.backup-banner {
  margin: 10px 16px 0; background: var(--warn-bg); color: var(--text); font-size: 13px; padding: 10px 14px;
  border-radius: 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.backup-banner button { border: 0; background: var(--card); color: var(--brand); font-weight: 700; padding: 7px 12px; border-radius: 999px; white-space: nowrap; }
.export-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.export-row .btn { background: var(--card); box-shadow: var(--shadow); }

/* ---------- Masukan & statistik ---------- */
a.list-item { color: inherit; text-decoration: none; }
.login-note a { color: var(--brand); font-weight: 600; }
.field textarea {
  width: 100%; min-height: 120px; padding: 12px 14px; border: 1.5px solid transparent; border-radius: 16px;
  background: var(--field); font: inherit; color: inherit; resize: vertical; outline: none;
}
.field textarea:focus { border-color: var(--brand); background: var(--card); }
.stat-table { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--card); border-radius: 16px; overflow: hidden; }
.stat-table th, .stat-table td { padding: 8px 10px; text-align: right; border-bottom: 1px solid var(--line); }
.stat-table th:first-child, .stat-table td:first-child { text-align: left; }
.stat-table th { color: var(--muted); font-weight: 600; font-size: 12px; }
.fb-item { background: var(--card); border-radius: 14px; padding: 10px 12px; margin-bottom: 8px; font-size: 13px; }
.fb-item small { color: var(--muted); display: block; margin-bottom: 4px; }

/* ---------- Perbandingan bulan ---------- */
.seg-sm { display: inline-grid; grid-template-columns: repeat(3, auto); margin-top: 14px; }
.seg-sm button { padding: 5px 12px; font-size: 12px; }
.cmp-card { background: var(--card); border-radius: 24px; padding: 14px; box-shadow: var(--shadow); display: grid; gap: 10px; }
.cmp-verdict { margin: 0 4px; font-size: 14px; line-height: 1.5; }
.cmp-note { margin: -4px 4px 0; font-size: 12px; color: var(--muted); }
.cmp-chart { position: relative; display: flex; align-items: flex-end; gap: 10px; height: 190px; padding: 0 4px; }
.cmp-col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cmp-val { font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.cmp-col.cur .cmp-val { color: var(--text); }
.cmp-track { flex: 1; width: 100%; max-width: 56px; display: flex; align-items: flex-end; }
.cmp-track i { display: block; width: 100%; border-radius: 10px 10px 4px 4px; background: color-mix(in srgb, var(--brand) 35%, var(--field)); }
.cmp-col.cur .cmp-track i { background: var(--brand); }
.cmp-label { font-size: 12px; font-weight: 600; color: var(--muted); }
.cmp-col.cur .cmp-label { color: var(--text); font-weight: 800; }
.cmp-track { position: relative; }
.cmp-avg { position: absolute; left: -6px; right: -6px; border-top: 2px dashed var(--text); opacity: .45; pointer-events: none; }
.cmp-legend { margin: 0 4px; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.cmp-legend i { width: 18px; border-top: 2px dashed var(--text); opacity: .45; }
.cmp-table-wrap { overflow-x: auto; }
.cmp-table { box-shadow: none; }
.cmp-table td { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Tutorial ---------- */
.tutorial { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 20px; background: rgba(20, 28, 25, .45); }
.tut-card {
  position: relative; width: 100%; max-width: 380px; background: var(--card); border-radius: 30px; padding: 30px 22px 20px;
  text-align: center; box-shadow: var(--shadow-lg);
  background-image: linear-gradient(180deg, transparent 0, var(--card) 170px), var(--hero);
}
.tut-skip { position: absolute; top: 14px; right: 14px; border: 0; background: rgba(255, 255, 255, .6); color: var(--text); font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 999px; }
.tut-icon { font-size: 52px; line-height: 1; margin: 8px 0 14px; }
.tut-title { margin: 0 0 10px; font-size: 21px; letter-spacing: -.02em; }
.tut-text { margin: 0; font-size: 15px; line-height: 1.6; min-height: 120px; }
.tut-dots { display: flex; justify-content: center; gap: 6px; margin-top: 16px; }
.tut-dots i { width: 7px; height: 7px; border-radius: 999px; background: var(--line); transition: width .2s; }
.tut-dots i.on { width: 20px; background: var(--brand); }
.list-item a, #s-data-info a { color: var(--brand); font-weight: 700; }
.seg-sm button { white-space: nowrap; }
.cmp-col.nodata .cmp-label { opacity: .5; }
.cmp-table td:first-child { white-space: normal; }
.cmp-col.nodata .cmp-avg { display: none; }

/* ---------- Bagikan rekap ---------- */
.share-cta {
  width: 100%; margin-top: 12px; border: 0; border-radius: 20px; padding: 14px 16px; font-weight: 800; font-size: 15px;
  color: #fff; background: linear-gradient(120deg, #2f8a75 0%, #5a4fb0 60%, #c0603e 100%); box-shadow: var(--shadow);
  display: flex; justify-content: space-between; align-items: center;
}
.share-cta small { font-weight: 600; opacity: .85; }
.sh-preview {
  width: 62%; max-width: 240px; margin: 0 auto 14px; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden;
  background: linear-gradient(160deg, #4b6b62, #2e3a52 60%, #5a3d33);
}
.sh-preview.dark-ink { background: linear-gradient(160deg, #e9f3ee, #ece9f8 60%, #f8e9df); }
.sh-preview.has-photo { background: #000; }
.sh-preview img { width: 100%; height: 100%; display: block; object-fit: cover; }
.sh-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.sh-chip { border: 1.5px solid var(--line); background: var(--card); border-radius: 999px; padding: 7px 12px; font-size: 13px; font-weight: 600; }
.sh-chip small { color: var(--muted); font-weight: 600; }
.sh-chip.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.sh-opts { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.sh-toggle { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.sh-toggle input { width: 18px; height: 18px; accent-color: var(--brand); }
.sh-photo { display: flex; gap: 8px; }
.sh-photo .btn { padding: 10px; }
.congrats { text-align: center; }
.congrats-emoji { font-size: 56px; line-height: 1; margin: 4px 0 8px; }
.congrats h3 { margin-bottom: 8px; }

/* ============ Gasss: tujuan ============ */
.hero.compact { padding-bottom: 14px; }
.hero.compact .hero-total { font-size: 22px; }
.c-warn { color: var(--warn); font-weight: 700; }
.muted { color: var(--muted); }

.goal-card, .goal-empty {
  display: block; width: 100%; text-align: left; border: 0; margin-top: 16px; padding: 16px;
  border-radius: 26px; background: var(--card); box-shadow: var(--shadow); color: var(--text);
}
.goal-top { display: flex; align-items: center; gap: 12px; }
.goal-emoji { flex: 0 0 auto; width: 48px; height: 48px; display: grid; place-items: center; font-size: 28px; border-radius: 16px; background: var(--brand-soft); }
.goal-head { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.goal-label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.goal-name { font-size: 18px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.goal-chip { flex: 0 0 auto; font-size: 11px; font-weight: 700; padding: 5px 9px; border-radius: 999px; background: var(--in-bg); color: var(--in); white-space: nowrap; }
.st-sedikit .goal-chip { background: var(--warn-bg); color: var(--warn); }
.st-kejar .goal-chip, .st-lewat .goal-chip { background: var(--danger-bg); color: var(--danger); }
.goal-amount { display: flex; align-items: baseline; gap: 6px; margin: 14px 0 8px; flex-wrap: wrap; }
.goal-amount b { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.goal-amount span { color: var(--muted); font-size: 13px; font-weight: 600; }
.goal-amount em { margin-left: auto; font-style: normal; font-weight: 800; color: var(--brand); }
.goal-bar { position: relative; height: 14px; border-radius: 999px; background: var(--field); }
.goal-bar > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 45%, var(--champagne))); transition: width .5s ease; min-width: 14px; }
.goal-mark { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--text); opacity: .55; }
.goal-legend { display: flex; gap: 14px; font-size: 11px; color: var(--muted); margin-top: 6px; }
.goal-legend i { display: inline-block; vertical-align: -1px; margin-right: 5px; }
.lg-fill { width: 10px; height: 10px; border-radius: 3px; background: var(--brand); }
.lg-mark { width: 3px; height: 11px; border-radius: 2px; background: var(--text); opacity: .55; }
.goal-foot { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin-top: 10px; font-weight: 600; }
.goal-empty-top { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.goal-empty-top small { color: var(--muted); }
.goal-empty .btn { width: 100%; }
.goal-empty .link-btn { display: block; margin: 10px auto 0; }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.duo.single { grid-template-columns: 1fr; }
.mini { background: var(--card); border-radius: 22px; padding: 12px 14px; box-shadow: var(--shadow); min-width: 0; display: flex; flex-direction: column; }
.mini-save { background: var(--brand-soft); }
.mini-label { font-size: 12px; font-weight: 700; color: var(--muted); }
.mini-value { font-size: 20px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-value.muted { color: var(--muted); }
.mini .bar { height: 6px; background: rgba(255, 255, 255, .7); }
.mini-safe .bar { background: var(--field); }
.mini-sub { font-size: 11.5px; color: var(--muted); margin-top: 6px; line-height: 1.4; flex: 1; }
.mini-safe.over { background: var(--danger-bg); }
.mini-safe.over .mini-value { color: var(--danger); }
.mini-btn { margin-top: 8px; border: 0; border-radius: 999px; padding: 8px 10px; font-weight: 700; font-size: 13px; background: var(--brand); color: var(--brand-ink); }
.mini-btn.ghost { background: transparent; color: var(--muted); padding: 4px 0 0; text-align: left; font-size: 12px; text-decoration: underline; }

.say { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; padding: 12px 14px; border-radius: 22px; background: var(--card); box-shadow: var(--shadow); }
.say-face { flex: 0 0 auto; font-size: 26px; line-height: 1; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--field); }
.say-body { font-size: 14px; line-height: 1.45; }
.say-body b { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 2px; }
.say.zone-hijau .say-face { background: color-mix(in srgb, var(--zone-hijau) 70%, transparent); }
.say.zone-kuning .say-face { background: color-mix(in srgb, var(--zone-kuning) 70%, transparent); }
.say.zone-oranye { background: color-mix(in srgb, var(--zone-oranye) 22%, var(--card)); }
.say.zone-oranye .say-face { background: color-mix(in srgb, var(--zone-oranye) 80%, transparent); }
.say.zone-merah { background: color-mix(in srgb, var(--zone-merah) 30%, var(--card)); }
.say.zone-merah .say-face { background: color-mix(in srgb, var(--zone-merah) 90%, transparent); animation: shake .5s ease 2; }
.say.zone-merah .say-body { font-weight: 600; }
.say.pop { animation: pop .45s ease; }
@keyframes pop { 0% { transform: scale(.96); opacity: .4; } 60% { transform: scale(1.02); opacity: 1; } 100% { transform: none; } }
@keyframes shake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
.say-note { font-size: 13px; background: var(--warn-bg); border-radius: 14px; padding: 10px 12px; margin: 0 0 12px; }

/* Buat tujuan */
.gc-row { display: flex; gap: 8px; }
.gc-row input { flex: 1; min-width: 0; }
.gc-mic { flex: 0 0 auto; width: 48px; border: 0; border-radius: 16px; background: var(--brand); color: var(--brand-ink); display: grid; place-items: center; }
.gc-mic.recording { background: #d2544f; color: #fff; animation: pulse 1.2s infinite; }
.gc-status { min-height: 18px; font-size: 13px; color: var(--brand); font-weight: 600; margin: -4px 4px 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1.5px solid var(--line); background: var(--card); border-radius: 999px; padding: 8px 12px; font-size: 13.5px; font-weight: 600; }
.chip:disabled, .btn:disabled, .gc-mic:disabled { opacity: .5; }
.gr-name { display: flex; gap: 8px; }
.gr-name .gr-emoji { flex: 0 0 56px; text-align: center; font-size: 22px; padding-left: 4px; padding-right: 4px; }
.gr-name input:last-child { flex: 1; min-width: 0; }
.gr-row { display: grid; grid-template-columns: 1fr 120px 36px; gap: 6px; margin-bottom: 6px; }
.gr-row input { width: 100%; min-width: 0; }
.gr-row input[data-k="nominal"] { text-align: right; }
.gr-row button { border: 0; background: var(--field); border-radius: 12px; font-size: 18px; color: var(--muted); }
.gr-calc { font-size: 13px; font-weight: 700; color: var(--brand); margin: 0 4px; min-height: 18px; }
.gd-table { margin-bottom: 14px; }
.calc-table td:last-child, .calc-table th:last-child { white-space: nowrap; }

/* ============ Cukup: warna suasana keuangan (hanya setengah atas layar) ============ */
/* hijau = aman, kuning = mulai hati-hati, oranye = menipis, merah = bahaya (lihat moodZone di logic.js).
   --page = warna latar halaman, --on-page = warna teks yang langsung menempel di latar. Kartu tetap putih/gelap. */
/* Gradasi berlapis: --g1 (gelap, bawah kanan), --g2 (warna utama), --g3 (cahaya lembut kiri atas).
   Didaftarkan dengan @property supaya perpindahan zona (mis. hijau -> merah) beranimasi halus. */
@property --g1 { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --g2 { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --g3 { syntax: '<color>'; inherits: true; initial-value: transparent; }
:root { --page: var(--bg); --on-page: var(--muted); --g1: var(--bg); --g2: var(--bg); --g3: rgba(255, 255, 255, 0);
}
/* Perpindahan zona beranimasi halus, tapi tidak saat aplikasi baru dibuka (kelas mood-anim dipasang setelah tampilan pertama). */
:root.mood-anim { transition: --g1 1s ease, --g2 1s ease, --g3 1s ease; }
:root[data-mood="hijau"] { --g1: #153029; --g2: #2f6b55; --g3: rgba(225, 210, 189, .55); --page: #2f6b55; --on-page: #ffffff; }
:root[data-mood="kuning"] { --g1: #d39208; --g2: #fcd34d; --g3: rgba(255, 251, 215, .75); --page: #f5c53a; --on-page: #2b2100; }
:root[data-mood="oranye"] { --g1: #c9561c; --g2: #fb923c; --g3: rgba(254, 220, 180, .6); --page: #f2803a; --on-page: #ffffff; }
:root[data-mood="merah"] { --g1: #a8243c; --g2: #ef5a6f; --g3: rgba(255, 186, 196, .55); --page: #e8506a; --on-page: #ffffff; }
@media (prefers-color-scheme: dark) {
  :root[data-mood="hijau"] { --g1: #0b1a16; --g2: #234f42; --g3: rgba(225, 210, 189, .2); --page: #1d4237; }
  :root[data-mood="kuning"] { --g1: #2e1f04; --g2: #854d0e; --g3: rgba(250, 204, 21, .22); --page: #713f12; --on-page: #fff7d6; }
  :root[data-mood="oranye"] { --g1: #2f0d04; --g2: #9a3412; --g3: rgba(251, 146, 60, .24); --page: #7c2d12; }
  :root[data-mood="merah"] { --g1: #2d0507; --g2: #9f1239; --g3: rgba(251, 113, 133, .24); --page: #7f1d1d; }
}
/* Halaman tetap memakai warna dasar (terang/gelap ikut HP); warna suasana hanya pita di setengah atas yang memudar ke bawah. */
html, :root[data-mood] body { background: var(--bg); }
body { min-height: 100vh; }

/* Lapisan latar tetap (fixed) di belakang semua isi. Ukurannya dikunci ke layar supaya penutup bilah status di atas
   bisa memakai gambar yang sama persis (tanpa sambungan terlihat). */
.mood-bg, body::before {
  background:
    radial-gradient(120% 55% at 0% 0%, var(--g3) 0%, transparent 62%),
    radial-gradient(90% 45% at 100% 100%, var(--g1) 0%, transparent 75%),
    linear-gradient(160deg, var(--g2) 0%, color-mix(in srgb, var(--g2) 55%, var(--g1)) 55%, var(--g1) 100%);
  background-size: 100vw 100vh; background-position: 0 0; background-repeat: no-repeat;
}
/* Pita ikut tergulir bersama isi (bukan menempel), tinggi ±setengah layar, ujung bawah memudar ke warna dasar. */
.mood-bg { position: absolute; top: 0; left: 0; right: 0; height: calc(52vh + var(--safe-t)); min-height: 360px; z-index: 0; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%); }
#app { position: relative; z-index: 1; }
/* Cahaya lembut yang bergerak sangat pelan supaya latar terasa hidup. */
.mood-bg::before, .mood-bg::after {
  content: ""; position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; filter: blur(40px); opacity: .55;
  background: radial-gradient(circle, var(--g3) 0%, transparent 65%);
}
.mood-bg::before { top: -25vmax; right: -30vmax; animation: drift1 22s ease-in-out infinite alternate; }
.mood-bg::after { bottom: -35vmax; left: -30vmax; opacity: .35; animation: drift2 28s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(-18vmax, 14vmax) scale(1.15); } }
@keyframes drift2 { to { transform: translate(16vmax, -12vmax) scale(1.2); } }
:root[data-mood="netral"] .mood-bg { display: none; }
@media (prefers-reduced-motion: reduce) { .mood-bg::before, .mood-bg::after { animation: none; } }

/* Penutup area bilah status iPhone (bilahnya tembus pandang supaya warna latar penuh). */
body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: var(--safe-t); z-index: 10; }
:root[data-mood="netral"] body::before { background: var(--bg); }
/* Baris filter Riwayat yang menempel di atas: kaca buram supaya gradasi tetap terlihat. */
:root:not([data-mood="netral"]) .filters {
  background: color-mix(in srgb, var(--bg) 78%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  margin: 0 -16px; padding-left: 16px; padding-right: 16px;
}

/* Bagian atas: kaca transparan di atas warna latar */
:root:not([data-mood="netral"]) .hero {
  background: rgba(255, 255, 255, .16); color: var(--on-page); box-shadow: none;
  border: 1px solid rgba(255, 255, 255, .28); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
:root[data-mood="kuning"] .hero { background: rgba(255, 255, 255, .3); border-color: rgba(255, 255, 255, .45); }
:root:not([data-mood="netral"]) .hero .icon-btn { background: rgba(255, 255, 255, .22); color: inherit; }
.mood-label {
  display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .24); color: inherit;
}
:root[data-mood="netral"] .mood-label { background: var(--card); }
:root[data-mood="merah"] .mood-label { animation: throb 1.6s ease-in-out infinite; }
@keyframes throb { 50% { background: rgba(255, 255, 255, .42); } }

/* Teks yang langsung menempel di latar harus tetap terbaca */
#app .report-month { background: color-mix(in srgb, var(--card) 88%, transparent); border-radius: 999px; padding: 4px; margin-top: 14px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--shadow); }
#app .section-head .link-btn { background: var(--brand-soft); color: var(--brand); }

/* ============ Gasss: ilustrasi kartu tujuan (scenes.js) ============ */
:root {
  --sc-ink: #1e2a27; --sc-done: #16a34a;
  --sc-grass: #c9efc0; --sc-grass-2: #a9e29b; --sc-road: #e2ddcf; --sc-road-edge: #bdb6a6; --sc-lane: #ffffff; --sc-asphalt: #6b7280;
  --sc-sea: #bfe6f7; --sc-sea-2: #8fd0ee; --sc-land: #f2dfa8; --sc-land-2: #9fd38b;
  --sc-pink: #ffe4ef; --sc-pink-2: #ffc9dc; --sc-aisle: #ffffff; --sc-aisle-edge: #f5b8cf;
  --sc-sky: #d6efff; --sc-sky-2: #f3fbff; --sc-mount: #b9c7d6;
  --sc-soft: #eef4f2; --sc-phone: #1e2a27; --sc-screen: #f7faf9; --sc-cell: #e3ebe8;
  --sc-storm: #cfd8e3; --sc-storm-2: #eef2f6; --sc-rain: #6b9bd1;
}
:root[data-mood="kuning"] { --sc-done: #ca8a04; }
:root[data-mood="oranye"] { --sc-done: #ea580c; }
:root[data-mood="merah"] { --sc-done: #dc2626; }
@media (prefers-color-scheme: dark) {
  :root {
    --sc-ink: #e9efed;
    --sc-grass: #1f3a2a; --sc-grass-2: #2a4d36; --sc-road: #3a3f3d; --sc-road-edge: #2c302e; --sc-lane: #c9d2ce; --sc-asphalt: #4b5563;
    --sc-sea: #12324a; --sc-sea-2: #1b4767; --sc-land: #4a4128; --sc-land-2: #2e5233;
    --sc-pink: #3a1f2b; --sc-pink-2: #4d2638; --sc-aisle: #5c3346; --sc-aisle-edge: #7a4360;
    --sc-sky: #13263a; --sc-sky-2: #1d3550; --sc-mount: #34465a;
    --sc-soft: #222a27; --sc-phone: #0c100f; --sc-screen: #252c29; --sc-cell: #313a37;
    --sc-storm: #1c2633; --sc-storm-2: #283445; --sc-rain: #7fb2e8;
  }
  :root:not([data-mood]), :root[data-mood="hijau"], :root[data-mood="netral"] { --sc-done: #4ade80; }
}
.goal-scene { margin: 12px -4px 4px; border-radius: 18px; overflow: hidden; background: var(--sc-soft); }
.goal-scene svg { display: block; width: 100%; height: auto; }
.goal-cps { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.goal-cps span { font-size: 11.5px; font-weight: 700; padding: 4px 8px; border-radius: 999px; background: var(--field); color: var(--muted); white-space: nowrap; }
.goal-cps span.ok { background: color-mix(in srgb, var(--sc-done) 18%, transparent); color: var(--text); }
.goal-cps span.now { background: color-mix(in srgb, var(--sc-done) 10%, var(--field)); color: var(--text); box-shadow: inset 0 0 0 1.5px var(--sc-done); }
.goal-cps span.pop { animation: pop .6s ease; }
.sc-fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 30; }

.sc-bob { animation: sc-bob .42s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes sc-bob { to { transform: translateY(-3px); } }
.sc-lane { stroke-dasharray: 8 9; animation: sc-lane 1s linear infinite; }
@keyframes sc-lane { to { stroke-dashoffset: -17; } }
.sc-spin { animation: sc-spin 14s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes sc-spin { to { transform: rotate(360deg); } }
.sc-drift { animation: sc-drift linear infinite; }
@keyframes sc-drift { from { transform: translateX(-60px); } to { transform: translateX(410px); } }
.sc-cheer { animation: sc-cheer .5s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: bottom center; }
@keyframes sc-cheer { to { transform: translateY(-4px) rotate(-6deg); } }
.sc-wave { animation: sc-wave 3s linear infinite; }
@keyframes sc-wave { to { transform: translateX(-40px); } }
.sc-boat { animation: sc-boat 9s ease-in-out infinite alternate; }
@keyframes sc-boat { to { transform: translateX(46px); } }
.sc-liquid { animation: sc-liquid 2.2s linear infinite; }
@keyframes sc-liquid { to { transform: translateX(-60px); } }
.sc-bubble { animation: sc-bubble linear infinite; opacity: 0; }
@keyframes sc-bubble { 0% { transform: translateY(70px); opacity: 0; } 20% { opacity: .9; } 100% { transform: translateY(0); opacity: 0; } }
.sc-zap { animation: sc-zap 1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes sc-zap { 50% { transform: scale(1.2); opacity: .75; } }
.sc-twinkle { animation: sc-twinkle 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes sc-twinkle { 50% { transform: scale(.4); opacity: .2; } }
.sc-pulse { animation: sc-pulse 1.4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes sc-pulse { from { transform: scale(.6); } to { transform: scale(2.2); opacity: 0; } }
.sc-rise { animation: sc-rise 6s linear infinite; }
@keyframes sc-rise { from { transform: translateY(0); opacity: 0; } 15% { opacity: .9; } to { transform: translateY(-230px); opacity: 0; } }
.sc-rain { animation: sc-rain .8s linear infinite; }
@keyframes sc-rain { from { transform: translateY(0); opacity: .9; } to { transform: translateY(150px); opacity: 0; } }
.sc-bounce { animation: sc-bounce .8s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes sc-bounce { to { transform: translateY(-5px) rotate(12deg); } }
@media (prefers-reduced-motion: reduce) {
  [class^="sc-"], [class*=" sc-"] { animation: none !important; }
}
.chip.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }

/* ============ Amplop & pengingat cadangan ============ */
.mini-kind { font-size: 10.5px; font-weight: 700; color: var(--muted); margin-top: 1px; }
.bb-btns { display: flex; gap: 6px; flex: 0 0 auto; }
.backup-banner .bb-btns button[data-backup-later] { background: transparent; color: var(--muted); }
.ew-kat { border: 1.5px solid var(--line); background: var(--field); border-radius: 12px; padding: 7px 10px; font: inherit; font-size: 14px; color: inherit; max-width: 55%; }

/* Pensil ubah dompet di kartu dompet Beranda */
.wallet .wallet-top { justify-content: flex-start; gap: 6px; }
.wallet-edit { margin-left: auto; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px;
  background: rgba(255, 255, 255, .75); color: var(--w-ink); flex: 0 0 auto; }
@media (prefers-color-scheme: dark) { .wallet-edit { background: rgba(255, 255, 255, .1); } }
.wallet-edit:focus-visible { outline: 2px solid var(--w-ink); outline-offset: 1px; }
.head-btns { display: flex; gap: 6px; }

/* Rapikan: nama tujuan boleh 2 baris (tidak terpotong oleh label status) */
.goal-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; text-wrap: balance; }
.goal-top { align-items: flex-start; }
.goal-top .goal-chip { margin-top: 2px; }

/* ============ Laporan: grafik bergradasi ============ */
:root { --cmp-old: #b9c6c2; }
@media (prefers-color-scheme: dark) { :root { --cmp-old: #45524e; } }
.cash-head { align-items: center; gap: 12px; }
.cash-big { font-size: 30px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.cash-line-btn { border: 0; background: none; padding: 0; text-align: left; color: inherit; font: inherit; display: grid; gap: 1px; min-width: 0; cursor: pointer; }
.cash-line-btn b { font-size: 14px; line-height: 1.35; }
.cash-line-btn small { font-size: 11.5px; color: var(--muted); }
.cash-chart svg, .cmp-svg svg { display: block; width: 100%; height: auto; overflow: visible; }
.cash-grid { stroke: var(--line); stroke-width: 1; }
.cash-rest { stroke: var(--muted); stroke-opacity: .5; stroke-dasharray: 2 4; }
.cash-dot { stroke: var(--card); stroke-width: 2.5; }
.cash-tip { white-space: normal; width: max-content; max-width: 230px; z-index: 2; }
.cash-tip .tip-zone { font-weight: 700; }
.cmp-svg { position: relative; margin: 6px -2px 4px; touch-action: pan-y; }
.cash-card .share-cta, .cmp-card .share-cta { margin-top: 12px; }
@media (prefers-reduced-motion: no-preference) {
  .cash-curve { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: cash-draw 1.3s ease-out .15s forwards; }
  @keyframes cash-draw { to { stroke-dashoffset: 0; } }
  .cmp-bar { transform-box: fill-box; transform-origin: bottom; animation: cmp-grow .8s cubic-bezier(.2, .8, .2, 1) both; }
  @keyframes cmp-grow { from { transform: scaleY(0); } }
}
.cmp-svg .axis { font-size: 10px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.cmp-svg text { paint-order: stroke; stroke: var(--card); stroke-width: 3px; stroke-linejoin: round; }
.cash-chart .axis { fill: var(--muted); }
/* Judul DOMPET + tombol tambah kecil */
.head-title { display: flex; align-items: center; gap: 8px; }
.add-mini { width: 28px; height: 28px; border-radius: 50%; border: 0; display: grid; place-items: center; margin-bottom: 0;
  background: rgba(255, 255, 255, .9); color: #14201c; box-shadow: var(--shadow); }
.add-mini { background: var(--brand-soft) !important; color: var(--brand) !important; }
.head-title { margin: 24px 0 10px; }
.head-title h2 { margin: 0 2px; }

/* ---------- Kartu tujuan: tema baru (Ibadah, Event, Saving) ---------- */
:root {
  --sc-night: #2b2453; --sc-dusk: #f2b880; --sc-sand: #f1d39a; --sc-sand-2: #e3bd7c; --sc-sand-edge: #c99a5a; --sc-sand-path: #fbe8c2;
  --sc-stage: #1b1530; --sc-stage-2: #3b1f4a; --sc-stage-floor: #5b4475; --sc-stage-edge: #2a1f3d; --sc-stage-path: #6d5a8c;
  --sc-cream: #fff4dc; --sc-cream-2: #ffe7c4; --sc-lid: #c98b2f; --sc-glass: rgba(255, 255, 255, .55); --sc-glass-edge: #c9b28a;
}
@media (prefers-color-scheme: dark) {
  :root {
    --sc-night: #120f26; --sc-dusk: #5a3b2a; --sc-sand: #5b4a2c; --sc-sand-2: #4a3c24; --sc-sand-edge: #3a2f1c; --sc-sand-path: #7a6440;
    --sc-stage: #0d0a18; --sc-stage-2: #22122b; --sc-stage-floor: #3d2e52; --sc-stage-edge: #1a1427; --sc-stage-path: #4a3c62;
    --sc-cream: #2b2518; --sc-cream-2: #3a2f1c; --sc-lid: #8a6224; --sc-glass: rgba(255, 255, 255, .08); --sc-glass-edge: #6b5d45;
  }
}
.sc-glow { animation: sc-glow 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes sc-glow { 50% { filter: drop-shadow(0 0 6px #fff3b0); transform: scale(1.06); } }
.sc-camel { animation: sc-camel 26s linear infinite; }
@keyframes sc-camel { from { transform: translateX(-80px); } to { transform: translateX(260px); } }
.sc-sway { animation: sc-sway 4s ease-in-out infinite alternate; }
@keyframes sc-sway { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
.sc-fall { animation: sc-fall linear infinite; }
@keyframes sc-fall { from { transform: translateY(0) rotate(0); } to { transform: translateY(225px) rotate(540deg); } }
.sc-coin { animation: sc-coin 2.7s ease-in infinite; opacity: 0; }
@keyframes sc-coin { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 70% { opacity: 1; } 100% { transform: translateY(96px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sc-glow, .sc-camel, .sc-sway, .sc-fall, .sc-coin { animation: none !important; } .sc-coin { opacity: 0; } }

/* ============ Layar masuk: cerita 3 adegan, digulir (web/login.js) ============ */
.ls { position: fixed; inset: 0; z-index: 15; overflow-y: auto; background: var(--bg); color: var(--text); padding: calc(16px + var(--safe-t)) 0 0; -webkit-overflow-scrolling: touch; isolation: isolate; }
.ls::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(60% 40% at 0% 0%, color-mix(in srgb, var(--champagne) 55%, transparent), transparent 70%),
    radial-gradient(60% 40% at 100% 60%, color-mix(in srgb, var(--champagne) 35%, transparent), transparent 70%); }
.ls-top { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 20px 0; }
.ls-logo { height: 64px; width: auto; }
.ls-logo-gelap { display: none; }
@media (prefers-color-scheme: dark) { .ls-logo-terang { display: none; } .ls-logo-gelap { display: block; } }
.ls-tag { font-size: 13.5px; font-weight: 700; color: var(--muted); }
.ls-scene { min-height: 74vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 26px 20px; max-width: 560px; margin: 0 auto;
  opacity: 0; transform: translateY(24px); transition: opacity .7s, transform .7s cubic-bezier(.2, .8, .2, 1); }
.ls-scene.in { opacity: 1; transform: none; }
.ls-step { display: inline-block; font-size: 12.5px; font-weight: 700; color: var(--muted); background: var(--card); border: 1px solid var(--line); padding: 6px 14px; border-radius: 999px; margin: 6px 0 14px; }
.ls .ls-line { text-transform: none; color: var(--text); font-size: clamp(30px, 8.6vw, 44px); line-height: 1.1; letter-spacing: -.035em; font-weight: 800; margin: 0; max-width: 13em; }
.ls-line em { font-style: normal; color: var(--danger); }
.ls-line span { position: relative; white-space: nowrap; }
.ls-line span::after { content: ""; position: absolute; left: 0; right: 0; bottom: .06em; height: .24em; background: var(--champagne); border-radius: 999px; z-index: -1; }
@media (prefers-color-scheme: dark) { .ls-line span::after { opacity: .35; } }
.ls-hint { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 22px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.ls-hint i { width: 20px; height: 32px; border: 2px solid var(--muted); border-radius: 999px; position: relative; opacity: .7; }
.ls-hint i::after { content: ""; position: absolute; left: 50%; top: 6px; width: 4px; height: 7px; margin-left: -2px; border-radius: 4px; background: var(--muted); animation: ls-wheel 1.6s ease-in-out infinite; }
@keyframes ls-wheel { 60% { transform: translateY(10px); opacity: 0; } 100% { opacity: 0; } }

/* Ilustrasi */
.ls-ill { position: relative; width: 100%; display: grid; place-items: center; min-height: 390px; margin-bottom: 10px; }
.ls-blob { position: absolute; width: 300px; height: 300px; border-radius: 46% 54% 52% 48% / 50% 44% 56% 50%; background: var(--champagne); opacity: .55; animation: ls-morph 12s ease-in-out infinite alternate; }
@media (prefers-color-scheme: dark) { .ls-blob { opacity: .14; } }
@keyframes ls-morph { to { border-radius: 56% 44% 40% 60% / 44% 58% 42% 56%; transform: rotate(8deg); } }
.ls-mphone { position: relative; width: 196px; aspect-ratio: 9 / 18; background: #142520; border-radius: 32px; padding: 7px; box-shadow: 0 22px 46px rgba(21, 48, 41, .25); }
.ls-mscreen { position: relative; height: 100%; border-radius: 26px; overflow: hidden; background: #fffdf8; color: #153029; padding: 26px 10px 8px; display: flex; flex-direction: column; text-align: left; }
.ls-mscreen::before { content: ""; position: absolute; top: 7px; left: 50%; width: 54px; height: 14px; margin-left: -27px; border-radius: 999px; background: #142520; }
.ls-mtitle { font-weight: 800; font-size: 11.5px; margin-bottom: 8px; }
.ls-fld { margin-bottom: 6px; }
.ls-fld label { display: block; font-size: 8.5px; font-weight: 700; color: #6c7067; margin-bottom: 2px; }
.ls-inp { background: #FBF6EA; border: 1.5px solid #ebe1cf; border-radius: 9px; padding: 5px 8px; font-size: 10.5px; font-weight: 700; min-height: 25px; }
.ls-inp.on { border-color: #153029; }
.ls-inp.sel { color: #a29a8c; font-weight: 600; }
.ls-caret { display: inline-block; width: 1.5px; height: 11px; background: #153029; vertical-align: -2px; margin-left: 1px; animation: ls-blink 1s steps(1) infinite; }
@keyframes ls-blink { 50% { opacity: 0; } }
.ls-inp.err { border-color: #e8506a; animation: ls-shake .35s; }
@keyframes ls-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.ls-kbd { margin-top: auto; background: #ece4d4; border-radius: 10px; padding: 5px 3px; display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; }
.ls-kbd b { height: 15px; border-radius: 4px; background: #fffdf8; box-shadow: 0 1px 0 rgba(21, 48, 41, .2); transition: transform .08s, background .08s; }
.ls-kbd b.wide { grid-column: span 4; } .ls-kbd b.mid { grid-column: span 2; }
.ls-kbd b.tap { transform: translateY(1px) scale(.9); background: #E1D2BD; }
.ls-st { position: absolute; background: var(--card); color: var(--text); border-radius: 16px; padding: 8px 11px; box-shadow: var(--shadow); font-size: 12.5px; font-weight: 700;
  display: flex; align-items: center; gap: 6px; z-index: 2; white-space: nowrap; }
.ls-st .ik { width: 26px; height: 26px; vertical-align: 0; }
.ls-st.face { padding: 7px; border-radius: 50%; } .ls-st.face .ik { width: 44px; height: 44px; }
.ls-bob { animation: ls-bob 5s ease-in-out infinite; } .ls-bob2 { animation: ls-bob 6s -2s ease-in-out infinite; }
@keyframes ls-bob { 50% { transform: translateY(-8px); } }
.ls-typo { color: var(--danger); opacity: 0; transform: scale(.8); transition: opacity .25s, transform .3s cubic-bezier(.2, .9, .3, 1.4); }
.ls-typo.on { opacity: 1; transform: none; }
.ls-drop { position: absolute; width: 14px; height: 20px; background: #8ecbff; border: 2.5px solid #153029; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; border-top-left-radius: 0; transform: rotate(45deg); }
.ls-mscreen.cam { background: #1c2b26; }
.ls-receipt { position: relative; margin: 12px auto 0; width: 78%; background: #fffdf8; padding: 8px 8px 14px; font: 700 7.5px/1.6 ui-monospace, Menlo, monospace; color: #3d4a45; transform: rotate(-3deg); }
.ls-receipt::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 8px; background: linear-gradient(-45deg, transparent 4px, #fffdf8 0) 0 0 / 8px 8px, linear-gradient(45deg, transparent 4px, #fffdf8 0) 0 0 / 8px 8px; }
.ls-receipt b { display: block; text-align: center; font-size: 8.5px; margin-bottom: 3px; }
.ls-receipt i { display: block; height: 4px; background: #d9d1c2; border-radius: 2px; margin: 4px 0; }
.ls-receipt i:nth-of-type(2) { width: 70%; } .ls-receipt i:nth-of-type(3) { width: 85%; } .ls-receipt i:nth-of-type(4) { width: 60%; }
.ls-receipt .tot { display: flex; justify-content: space-between; border-top: 1px dashed #b6ab9a; padding-top: 3px; margin-top: 5px; }
.ls-vf { position: absolute; inset: 34px 12px 62px; pointer-events: none; }
.ls-vf::before, .ls-vf::after { content: ""; position: absolute; width: 18px; height: 18px; border: 3px solid #fffdf8; }
.ls-vf::before { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: 7px 0 0 0; } .ls-vf::after { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 7px 0; }
.ls-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.ls-flash.on { animation: ls-flash .45s ease-out; }
@keyframes ls-flash { 0% { opacity: .95; } 100% { opacity: 0; } }
.ls-shutter { position: absolute; bottom: 12px; left: 50%; width: 40px; height: 40px; margin-left: -20px; border-radius: 50%; background: #fffdf8; border: 4px solid #3a4a44; box-shadow: 0 0 0 3px #fffdf8; transition: transform .1s; }
.ls-shutter.tap { transform: scale(.88); }
.ls-gallery { position: absolute; left: calc(50% - 178px); top: 22px; width: 140px; background: var(--card); color: var(--text); border-radius: 16px; padding: 9px; box-shadow: var(--shadow); z-index: 2; text-align: left; }
.ls-gallery small, .ls-storage small { display: block; font-size: 10px; font-weight: 700; color: var(--muted); margin-bottom: 5px; }
.ls-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.ls-grid i { aspect-ratio: 1; border-radius: 4px; background: repeating-linear-gradient(180deg, #fffdf8 0 3px, #e7dcc9 3px 5px); border: 1.5px solid #d6cbb8; transform: scale(0); transition: transform .3s cubic-bezier(.2, .9, .3, 1.4); }
.ls-grid i.on { transform: none; }
.ls-storage { position: absolute; right: calc(50% - 180px); bottom: 40px; width: 158px; background: var(--card); color: var(--text); border-radius: 16px; padding: 10px; box-shadow: var(--shadow); z-index: 2; text-align: left; }
.ls-sbar { height: 9px; border-radius: 999px; background: var(--field); overflow: hidden; }
.ls-sbar i { display: block; height: 100%; width: 62%; border-radius: 999px; background: #f2b33d; transition: width .5s, background .5s; }
.ls-storage.full .ls-sbar i { background: #e8506a; }
.ls-storage .warn { margin-top: 6px; font-size: 11px; font-weight: 800; color: var(--danger); opacity: 0; transition: opacity .3s; }
.ls-storage.full .warn { opacity: 1; }
.ls-storage .pct { float: right; color: var(--text); }

/* Adegan 3: ponsel Cukup */
.ls-scene.akhir { min-height: auto; padding-bottom: 8px; }
.ls-scene.akhir .ls-line { margin-bottom: 22px; }
.ls-phone { width: 268px; max-width: 80vw; aspect-ratio: 9 / 18.6; background: #142520; border-radius: 40px; padding: 9px; box-shadow: 0 26px 60px rgba(21, 48, 41, .25); text-align: left; }
.ls-screen { position: relative; height: 100%; border-radius: 32px; overflow: hidden; background: #FBF6EA; color: #153029; }
@property --lb1 { syntax: '<color>'; inherits: true; initial-value: #2f6b55; }
@property --lb2 { syntax: '<color>'; inherits: true; initial-value: #153029; }
.ls-band { position: absolute; inset: 0 0 auto 0; height: 52%; background: linear-gradient(160deg, var(--lb1), var(--lb2)); transition: --lb1 .9s, --lb2 .9s;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
.ls-screen[data-z="merah"] .ls-band { --lb1: #ef5a6f; --lb2: #a8243c; }
.ls-notch { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 78px; height: 20px; background: #142520; border-radius: 999px; z-index: 5; }
.ls-in { position: relative; z-index: 1; padding: 38px 12px 0; height: 100%; display: flex; flex-direction: column; }
.ls-hero { color: #fff; background: rgba(255, 255, 255, .17); border: 1px solid rgba(255, 255, 255, .3); border-radius: 18px; padding: 10px 12px; }
.ls-hello { font-size: 11px; font-weight: 700; }
.ls-total { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin-top: 3px; }
.ls-pill { display: inline-block; margin-top: 5px; font-size: 9.5px; font-weight: 700; background: rgba(255, 255, 255, .25); padding: 3px 8px; border-radius: 999px; }
.ls-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; min-height: 120px; }
.ls-tx { display: flex; align-items: center; gap: 8px; background: #fffdf8; border-radius: 13px; padding: 7px 9px; box-shadow: 0 4px 12px rgba(21, 48, 41, .08); font-size: 11px; font-weight: 700;
  opacity: 0; transform: translateY(12px) scale(.96); transition: opacity .45s, transform .45s cubic-bezier(.2, .9, .3, 1.3); }
.ls-tx.on { opacity: 1; transform: none; }
.ls-tx .ico { width: 26px; height: 26px; border-radius: 9px; background: #f3ead9; display: grid; place-items: center; }
.ls-tx .ico .ik { width: 21px; height: 21px; vertical-align: 0; }
.ls-tx .nm { flex: 1; min-width: 0; } .ls-tx .nm small { display: block; font-weight: 500; color: #6c7067; font-size: 9.5px; }
.ls-tx .amt { color: #e8506a; } .ls-tx .amt.in { color: #2f7d5f; }
.ls-say { margin-top: 7px; display: flex; gap: 7px; align-items: flex-start; background: #fffdf8; border-radius: 14px; padding: 8px 10px; font-size: 10.5px; line-height: 1.45; box-shadow: 0 4px 12px rgba(21, 48, 41, .08);
  opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .5s; }
.ls-say.on { opacity: 1; transform: none; }
.ls-say .ik { width: 26px; height: 26px; flex: 0 0 auto; vertical-align: 0; }
.ls-say b { display: block; font-size: 8.5px; letter-spacing: .08em; color: #6c7067; }
.ls-say.zone-merah { background: #fff1f3; }
.ls-voice { margin-top: auto; padding: 8px 0 14px; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.ls-said { max-width: 94%; min-height: 34px; background: #fffdf8; border-radius: 14px 14px 14px 5px; padding: 8px 11px; font-size: 11px; font-weight: 600; box-shadow: 0 4px 12px rgba(21, 48, 41, .1); opacity: 0; transition: opacity .3s; }
.ls-said.on { opacity: 1; }
.ls-wave { display: flex; gap: 3px; height: 18px; align-items: center; opacity: 0; transition: opacity .3s; }
.ls-wave.on { opacity: 1; }
.ls-wave i { width: 3.5px; height: 100%; border-radius: 4px; background: #153029; transform: scaleY(.25); animation: ls-bar .9s ease-in-out infinite; }
.ls-wave i:nth-child(2n) { animation-delay: -.3s; } .ls-wave i:nth-child(3n) { animation-delay: -.55s; }
@keyframes ls-bar { 50% { transform: scaleY(1); } }
.ls-mic { position: relative; width: 52px; height: 52px; border-radius: 50%; background: #153029; color: #FBF6EA; display: grid; place-items: center; box-shadow: 0 8px 20px rgba(21, 48, 41, .3); }
.ls-mic svg { width: 24px; height: 24px; }
.ls-mic::before, .ls-mic::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #153029; opacity: 0; }
.ls-mic.rec::before { animation: ls-ring 1.4s ease-out infinite; } .ls-mic.rec::after { animation: ls-ring 1.4s .5s ease-out infinite; }
@keyframes ls-ring { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(1.9); opacity: 0; } }

/* Tombol masuk menempel di bawah */
.ls-cta { position: sticky; bottom: 0; z-index: 5; display: grid; gap: 8px; max-width: 560px; margin: 0 auto; padding: 26px 20px calc(16px + var(--safe-b));
  background: linear-gradient(180deg, transparent, var(--bg) 34%); }
.lg-google { display: flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 999px; padding: 15px; font-weight: 800; font-size: 16px;
  background: var(--brand); color: var(--brand-ink); box-shadow: 0 10px 26px rgba(21, 48, 41, .25); }
.lg-google svg { background: #fff; border-radius: 50%; padding: 3px; width: 26px; height: 26px; }
.lg-google:disabled { opacity: .7; }
.lg-google:focus-visible { outline: 3px solid var(--champagne); outline-offset: 3px; }
.lg-error { margin: 0; text-align: center; font-size: 13.5px; font-weight: 700; color: var(--danger); }
.lg-error:empty { display: none; }
.lg-note { margin: 0; text-align: center; font-size: 11.5px; line-height: 1.5; color: var(--muted); }
.lg-note a { color: var(--text); font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
  .ls-scene { opacity: 1; transform: none; transition: none; }
  .ls *, .ls *::before, .ls *::after { animation: none !important; }
  .ls-tx, .ls-say { opacity: 1; transform: none; transition: none; }
}
.lang-row { justify-content: space-between; gap: 10px; }
.lang-row .seg { width: auto; margin: 0; grid-template-columns: repeat(2, auto); }
.lang-row .seg button { padding: 7px 12px; }

/* ============ Gasss: kartu tujuan versi motion graphic (scenes-vektor.js) — dipakai bersama scenes-baru.css ============ */
:root {
  --v-sky: #bfe3ff; --v-sky-2: #eef8ff; --v-sun: #ffc93c; --v-cloud: #ffffff; --v-bird: #334155;
  --v-hill-far: #b7e3c0; --v-tree: #3f9b5a; --v-tree-2: #5bb872; --v-trunk: #8b5e3c; --v-pine: #2f7d4a; --v-track: #e9765b;
  --v-accent: #e11d48; --v-city: #7c8ea6; --v-city-2: #5f7390; --v-camel: #6b4a2b; --v-mosque: #2a2350;
  --v-pink-ground: #fbcfe0; --v-mount-far: #d3dde8; --v-soft-2: #dfeee9; --v-circuit: #c9d8d3; --v-storm-cloud: #8a98aa;
}
@media (prefers-color-scheme: dark) {
  :root {
    --v-sky: #10233a; --v-sky-2: #1c3653; --v-sun: #f5b942; --v-cloud: rgba(255, 255, 255, .22); --v-bird: #cbd5e1;
    --v-hill-far: #1d3b2e; --v-tree: #2f7a46; --v-tree-2: #3d8f57; --v-trunk: #6b4a2f; --v-pine: #24603a; --v-track: #9a4a39;
    --v-city: #3b4a60; --v-city-2: #2c3a4f; --v-camel: #1d140b; --v-mosque: #0d0a1f;
    --v-pink-ground: #5a2c40; --v-mount-far: #263548; --v-soft-2: #1a221f; --v-circuit: #34403c; --v-storm-cloud: #3c4859;
  }
}

/* ---- pembukaan ---- */
.v-scene .v-in { animation: v-in .7s cubic-bezier(.2, 1.3, .4, 1) both; animation-delay: var(--d, 0s); }
.v-scene .v-in-up { animation-name: v-in-up; }
.v-scene .v-in-down { animation-name: v-in-down; }
.v-scene .v-in-fade { animation-name: v-in-fade; animation-duration: .9s; }
.v-scene .v-in-pop { animation-name: v-in-pop; transform-box: fill-box; transform-origin: center bottom; }
@keyframes v-in { from { opacity: 0; } }
@keyframes v-in-up { from { opacity: 0; transform: translateY(26px); } }
@keyframes v-in-down { from { opacity: 0; transform: translateY(-26px); } }
@keyframes v-in-fade { from { opacity: 0; } }
@keyframes v-in-pop { from { opacity: 0; transform: scale(.3); } }
.v-scene .v-draw { stroke-dasharray: var(--len, 900); stroke-dashoffset: var(--len, 900); animation: v-draw 1.3s cubic-bezier(.6, 0, .2, 1) .35s forwards; }
@keyframes v-draw { to { stroke-dashoffset: 0; } }

/* ---- utilitas ---- */
.v-fb { transform-box: fill-box; transform-origin: center; }
.v-base { transform-box: fill-box; transform-origin: center bottom; }

/* ---- latar ---- */
.v-drift { animation: v-drift linear infinite; }
@keyframes v-drift { from { transform: translateX(-90px); } to { transform: translateX(430px); } }
.v-spin { animation: sc-spin 24s linear infinite; }
.v-glow { animation: v-glow 3s ease-in-out infinite; }
@keyframes v-glow { 50% { transform: scale(1.08); } }
.v-glow-soft { animation: v-glow-soft 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes v-glow-soft { 50% { opacity: .55; transform: scale(1.12); } }
.v-sway { animation: v-sway 3s ease-in-out infinite alternate; }
@keyframes v-sway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
.v-gust { animation: v-gust 2.2s ease-in-out infinite; }
@keyframes v-gust { 0%, 100% { transform: rotate(-4deg); } 40% { transform: rotate(-16deg); } 55% { transform: rotate(-10deg); } }
.v-flap { animation: v-flap .55s ease-in-out infinite alternate; }
@keyframes v-flap { to { transform: scaleY(-.5); } }
.v-twinkle { animation: v-twinkle 1.8s ease-in-out infinite; }
@keyframes v-twinkle { 50% { transform: scale(.35) rotate(45deg); opacity: .25; } }
.v-twinkle-soft { animation: v-twinkle-soft 2.4s ease-in-out infinite; }
@keyframes v-twinkle-soft { 50% { transform: scale(.7); opacity: .6; } }
.v-blink { animation: v-blink 5s steps(1) infinite; }
@keyframes v-blink { 0%, 60% { opacity: 1; } 61%, 80% { opacity: .25; } 81% { opacity: 1; } }
.v-shimmer { animation: v-shimmer 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes v-shimmer { 50% { transform: scaleX(.6); opacity: .25; } }
.v-rock { animation: v-rock 2.4s ease-in-out infinite alternate; }
@keyframes v-rock { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
.v-bokeh { animation: v-bokeh 6s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes v-bokeh { to { transform: translate(8px, -10px) scale(1.25); opacity: .05; } }
.v-rise { animation: v-rise 6s linear infinite; }
@keyframes v-rise { from { transform: translate(0, 0); opacity: 0; } 15% { opacity: .95; } 50% { transform: translate(8px, -110px); } to { transform: translate(-4px, -230px); opacity: 0; } }
.v-petal { animation: v-petal 6s linear infinite; }
@keyframes v-petal { from { transform: translate(0, 0) rotate(0); } 50% { transform: translate(14px, 110px) rotate(200deg); } to { transform: translate(-6px, 225px) rotate(420deg); } }
.v-beat { animation: v-beat 1.1s ease-in-out infinite; }
@keyframes v-beat { 15% { transform: scale(1.3); } 30% { transform: scale(1); } 45% { transform: scale(1.18); } 60% { transform: scale(1); } }
.v-shoot { animation: v-shoot 7s ease-in infinite; opacity: 0; }
@keyframes v-shoot { 0%, 80% { transform: translate(0, 0); opacity: 0; } 82% { opacity: 1; } 92% { transform: translate(-90px, 30px); opacity: 0; } 100% { opacity: 0; } }
.v-caravan { animation: v-caravan 40s linear infinite; }
@keyframes v-caravan { from { transform: translateX(-60px); } to { transform: translateX(400px); } }
.v-camel-leg { animation: v-step .7s ease-in-out infinite alternate; }
.v-camel-leg.v-legB { animation-direction: alternate-reverse; }
.v-beam { animation: v-beam 4s ease-in-out infinite alternate; }
@keyframes v-beam { from { transform: rotate(-18deg); } to { transform: rotate(18deg); } }
.v-eq { animation: v-eq .6s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center bottom; }
@keyframes v-eq { from { transform: scaleY(.2); } to { transform: scaleY(1); } }
.v-thump { animation: v-thump .45s ease-in-out infinite; }
@keyframes v-thump { 30% { transform: scale(1.25); } }
.v-jump { animation: v-jump .6s ease-in-out infinite alternate; }
@keyframes v-jump { to { transform: translateY(-4px); } }
.v-wave-stick { animation: v-wave-stick .9s ease-in-out infinite alternate; }
@keyframes v-wave-stick { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }
.v-neon { filter: drop-shadow(0 0 2px currentColor); }
.v-cheer { animation: v-cheer .5s ease-in-out infinite alternate; }
@keyframes v-cheer { to { transform: rotate(-25deg); } }
.v-cheer-2 { animation-name: v-cheer-2; }
@keyframes v-cheer-2 { to { transform: rotate(25deg); } }
.v-flagwave { animation: v-flagwave 1.2s ease-in-out infinite alternate; }
@keyframes v-flagwave { from { transform: skewY(-8deg) scaleX(.92); } to { transform: skewY(8deg) scaleX(1); } }
.v-flag-banner { animation: v-flag-banner 2.2s ease-in-out infinite alternate; }
@keyframes v-flag-banner { to { transform: translateY(1.5px) skewX(3deg); } }
.v-flow { animation: v-flow 2s linear infinite; }
@keyframes v-flow { from { stroke-dashoffset: 66; } to { stroke-dashoffset: 0; } }
.v-node { animation: v-node 1.6s ease-in-out infinite; }
@keyframes v-node { 50% { transform: scale(1.6); opacity: .5; } }
.v-notif { animation: v-notif 6.4s ease-out infinite; opacity: 0; }
@keyframes v-notif { 0% { transform: translateY(0) scale(.6); opacity: 0; } 8% { transform: translateY(-20px) scale(1); opacity: 1; } 40% { opacity: 1; } 60% { transform: translateY(-150px); opacity: 0; } 100% { opacity: 0; } }
.v-sheen { animation: v-sheen 4s ease-in-out infinite; }
@keyframes v-sheen { 0%, 60% { transform: translateX(-40px); opacity: 0; } 70% { opacity: .18; } 100% { transform: translateX(110px); opacity: 0; } }
.v-zap { animation: v-zap 1.1s ease-in-out infinite; }
@keyframes v-zap { 50% { transform: scale(1.18) rotate(-6deg); filter: drop-shadow(0 0 4px #facc15); } }
.v-bob-soft { animation: v-bob-soft 1.6s ease-in-out infinite alternate; }
@keyframes v-bob-soft { from { transform: translateY(2px) rotate(-4deg); } to { transform: translateY(-3px) rotate(4deg); } }
.v-coin { animation: v-coin 2.7s cubic-bezier(.5, 0, .9, .6) infinite; opacity: 0; }
@keyframes v-coin { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 55% { transform: translateY(32px); opacity: 1; } 62%, 100% { transform: translateY(36px); opacity: 0; } }
.v-flip { animation: v-flip .5s linear infinite; }
@keyframes v-flip { 50% { transform: scaleX(.15); } }
.v-hover { animation: v-hover 6s ease-in-out infinite alternate; }
@keyframes v-hover { to { transform: translateX(14px); } }
.v-flash { opacity: 0; animation: v-flash 5s linear infinite; pointer-events: none; }
@keyframes v-flash { 0%, 19% { opacity: 0; } 20% { opacity: .5; } 22% { opacity: 0; } 24% { opacity: .3; } 27%, 100% { opacity: 0; } }
.v-bolt { animation: v-bolt 5s linear infinite; opacity: 0; }
@keyframes v-bolt { 0%, 19% { opacity: 0; } 20%, 26% { opacity: 1; } 27%, 100% { opacity: 0; } }
.v-leaf { animation: v-leaf 3.4s ease-in infinite; }
@keyframes v-leaf { from { transform: translate(0, 0) rotate(0); opacity: 1; } to { transform: translate(-120px, 20px) rotate(540deg); opacity: 0; } }
.v-puff { animation: v-puff 1.2s ease-out infinite; }
@keyframes v-puff { from { transform: translateX(0) scale(.5); opacity: .8; } to { transform: translateX(-22px) scale(1.6); opacity: 0; } }

/* ---- tokoh ---- */
.v-person .v-body { animation: v-breathe 2.4s ease-in-out infinite; }
@keyframes v-breathe { 50% { transform: translateY(-.8px); } }
.v-person .v-armA { animation: v-wave 5s ease-in-out infinite; }
@keyframes v-wave { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(-150deg); } 80% { transform: rotate(-115deg); } 84% { transform: rotate(-150deg); } 88% { transform: rotate(-115deg); } 94% { transform: rotate(0); } }
.v-person .v-armUp { animation: v-armup .6s ease-in-out infinite alternate; }
@keyframes v-armup { from { transform: rotate(-150deg); } to { transform: rotate(-175deg); } }
.v-moving .v-person .v-body { animation: v-bounce .26s ease-in-out infinite alternate; }
@keyframes v-bounce { to { transform: translateY(-1.6px); } }
.v-moving .v-person .v-legA { animation: v-step .26s ease-in-out infinite alternate; }
.v-moving .v-person .v-legB { animation: v-step .26s ease-in-out infinite alternate-reverse; }
.v-moving .v-person .v-armA:not(.v-armUp) { animation: v-step .26s ease-in-out infinite alternate-reverse; }
.v-moving .v-person .v-armB { animation: v-step .26s ease-in-out infinite alternate; }
@keyframes v-step { from { transform: rotate(-30deg); } to { transform: rotate(30deg); } }
.v-moving .v-run .v-legA, .v-moving .v-run .v-legB { animation-name: v-run; animation-duration: .2s; }
.v-moving .v-run .v-armA, .v-moving .v-run .v-armB { animation-name: v-run-arm; animation-duration: .2s; }
@keyframes v-run { from { transform: rotate(-45deg); } to { transform: rotate(40deg); } }
@keyframes v-run-arm { from { transform: rotate(-60deg); } to { transform: rotate(50deg); } }

/* ---- checkpoint & isi wadah ---- */
.v-pulse { animation: v-pulse 1.6s ease-out infinite; }
@keyframes v-pulse { from { transform: scale(.6); opacity: 1; } to { transform: scale(2); opacity: 0; } }
.v-hit { opacity: 0; pointer-events: none; }
.v-hit.go { opacity: 1; }
.v-hit.go .v-hit-ring { animation: v-hit-ring .7s ease-out forwards; transform-box: fill-box; transform-origin: center; }
@keyframes v-hit-ring { from { transform: scale(.3); opacity: 1; } to { transform: scale(3.2); opacity: 0; stroke-width: .5; } }
.v-hit.go .v-hit-ray { animation: v-hit-ray .65s ease-out forwards; }
@keyframes v-hit-ray { from { transform: translateX(-6px); opacity: 1; } to { transform: translateX(8px); opacity: 0; } }
.v-hit:not(.go) .v-hit-ray line { opacity: 0; }
.v-label-pop { animation: v-label-pop .6s cubic-bezier(.2, 1.6, .4, 1); transform-box: fill-box; transform-origin: left center; }
@keyframes v-label-pop { 40% { transform: scale(1.35); } }
.v-boost { animation: v-boost .5s ease-out; transform-box: fill-box; transform-origin: center; }
@keyframes v-boost { 40% { transform: scale(1.25); } }

/* ---- jeda otomatis: kartu tidak terlihat / aplikasi di latar ---- */
.v-scene.v-paused *, .v-bg .v-scene * { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .v-scene *, .v-scene .v-in, .v-scene .v-draw { animation: none !important; }
  .v-scene .v-draw { stroke-dashoffset: 0; }
  .v-coin, .v-notif, .v-shoot, .v-bolt, .v-flash, .v-hit { opacity: 0 !important; }
}

/* Survei singkat fitur suara (masa uji) */
.survey-opts { display: grid; gap: 8px; margin: 14px 0 12px; }
.survey-opts .btn { text-align: left; padding: 13px 16px; }
.survey-opts .btn.on { background: var(--brand); color: var(--brand-ink); }

/* ============ Cukup: ikon 2D (web/ikon.js) ============ */
.ik { display: inline-block; width: 1.3em; height: 1.3em; vertical-align: -0.32em; flex: 0 0 auto; overflow: visible; }
i[data-ik] { font-style: normal; display: inline-flex; }
.wallet-emoji .ik { width: 28px; height: 28px; vertical-align: 0; }
.goal-emoji .ik { width: 38px; height: 38px; vertical-align: 0; }
.say-face { font-size: 0; background: transparent !important; width: 44px; height: 44px; }
.say-face .ik { width: 44px; height: 44px; vertical-align: 0; }
.say.zone-merah .say-face { animation: shake .5s ease 2; }
.tut-icon { display: grid; place-items: center; }
.tut-icon .ik { width: 84px; height: 84px; vertical-align: 0; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .12)); }
.list-item .ik, .share-cta .ik, .btn .ik { width: 1.5em; height: 1.5em; vertical-align: -0.42em; margin-right: 4px; }
.chip .ik { width: 1.45em; height: 1.45em; vertical-align: -0.4em; margin-right: 2px; }
.cat-top .ik, .flow-cat .ik { width: 1.5em; height: 1.5em; vertical-align: -0.42em; }
.cash-line-btn .ik { width: 1.5em; height: 1.5em; vertical-align: -0.4em; }
@media (prefers-color-scheme: dark) { .wallet-emoji { background: rgba(255, 255, 255, .12); } }
.tx-icon .ik { width: 26px; height: 26px; vertical-align: 0; }