/* =====================================================================
   MonaTrack — Stylesheet Utama
   Fondasi: design tokens, tipografi, tombol, form, alert, auth, landing.
   Warna: indigo sebagai warna utama; hijau=pemasukan, oranye=pengeluaran,
   ungu/indigo=tabungan.
   ===================================================================== */

/* ---------- Design Tokens ---------- */
:root {
    /* Warna utama (indigo) */
    --primary:        #6366f1;
    --primary-600:    #4f46e5;
    --primary-700:    #4338ca;
    --primary-soft:   #eef2ff;

    /* Warna semantik keuangan */
    --income:         #16a34a;
    --income-soft:    #dcfce7;
    --expense:        #f97316;
    --expense-soft:   #ffedd5;
    --danger:         #ef4444;
    --danger-soft:    #fee2e2;
    --saving:         #8b5cf6;
    --saving-soft:    #ede9fe;
    --warning:        #f59e0b;
    --warning-soft:   #fef3c7;

    /* Netral */
    --bg:             #f6f7fb;
    --surface:        #ffffff;
    --surface-2:      #f8fafc;
    --border:         #e5e7eb;
    --text:           #1e293b;
    --text-soft:      #64748b;
    --text-muted:     #94a3b8;

    /* Bentuk & bayangan */
    --radius:         16px;
    --radius-sm:      10px;
    --radius-lg:      22px;
    --shadow-sm:      0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);
    --shadow:         0 4px 6px -1px rgba(15, 23, 42, .06), 0 2px 4px -2px rgba(15, 23, 42, .05);
    --shadow-lg:      0 20px 40px -12px rgba(79, 70, 229, .18);

    --font-sans:      'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --header-h:       64px;
    --sidebar-w:      256px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--text);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 { margin: 0 0 .4em; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
a { color: var(--primary-600); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

/* Angka rapi & sejajar */
.tabular, .amount, .stat-value { font-variant-numeric: tabular-nums; }

/* ---------- Utilitas ---------- */
.text-income  { color: var(--income); }
.text-expense { color: var(--expense); }
.text-danger  { color: var(--danger); }
.text-saving  { color: var(--saving); }
.text-soft    { color: var(--text-soft); }
.text-center  { text-align: center; }
.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 1rem; }
.w-full { width: 100%; }
.hidden { display: none !important; }

/* ---------- Tombol ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .58rem .9rem;
    font: inherit;
    font-weight: 600;
    font-size: .88rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: transform .06s ease, background .15s ease, box-shadow .15s ease;
    text-decoration: none;
    white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--primary-soft); outline-offset: 2px; }

.btn-primary { background: var(--primary-600); color: #fff; }
.btn-primary:hover { background: var(--primary-700); text-decoration: none; box-shadow: var(--shadow-lg); }

.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn-ghost:hover { background: var(--surface-2); text-decoration: none; }

.btn-light { background: #fff; color: var(--primary-700); }
.btn-light:hover { background: var(--primary-soft); text-decoration: none; }

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #dc2626; text-decoration: none; }

.btn-block { width: 100%; }
.btn-lg { padding: .72rem 1.1rem; font-size: .94rem; }

/* ---------- Form ---------- */
.field { margin-bottom: 1.1rem; }
.field label {
    display: block;
    font-weight: 600;
    font-size: .88rem;
    margin-bottom: .4rem;
    color: var(--text);
}
.input, .form-control, select.input, textarea.input {
    width: 100%;
    padding: .72rem .9rem;
    font: inherit;
    font-size: .95rem;
    color: var(--text);
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus, .form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--primary-soft);
}
.input::placeholder { color: var(--text-muted); }
.input.is-invalid { border-color: var(--danger); }

.field-error { color: var(--danger); font-size: .82rem; margin-top: .35rem; }
.field-hint  { color: var(--text-soft); font-size: .82rem; margin-top: .35rem; }

/* Input dengan ikon di dalamnya */
.input-icon { position: relative; }
.input-icon > i {
    position: absolute; left: .85rem; top: 50%; transform: translateY(-50%);
    color: var(--text-muted); font-size: 1rem;
}
.input-icon .input { padding-left: 2.5rem; }
.input-icon .toggle-pass {
    position: absolute; right: .6rem; top: 50%; transform: translateY(-50%);
    background: none; border: 0; cursor: pointer; color: var(--text-muted);
    padding: .3rem; font-size: 1rem; line-height: 1;
}

/* ---------- Alert / Flash ---------- */
.alert {
    display: flex; align-items: flex-start; gap: .6rem;
    padding: .8rem 1rem;
    border-radius: var(--radius-sm);
    font-size: .9rem;
    margin-bottom: 1.1rem;
    border: 1px solid transparent;
}
.alert i { font-size: 1.05rem; margin-top: .1rem; }
.alert-success { background: var(--income-soft); color: #166534; border-color: #bbf7d0; }
.alert-error   { background: var(--danger-soft); color: #991b1b; border-color: #fecaca; }
.alert-info    { background: var(--primary-soft); color: var(--primary-700); border-color: #c7d2fe; }
.alert-warning { background: var(--warning-soft); color: #92400e; border-color: #fde68a; }

/* ---------- Indikator kekuatan password ---------- */
.pass-strength { margin-top: .5rem; }
.pass-bar { height: 6px; border-radius: 99px; background: var(--border); overflow: hidden; }
.pass-bar > span { display: block; height: 100%; width: 0; transition: width .25s ease, background .25s ease; }
.pass-label { font-size: .8rem; margin-top: .3rem; color: var(--text-soft); }

/* =====================================================================
   AUTH (login / register / otp) — layout dua kolom
   ===================================================================== */
.auth {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
}
.auth-aside {
    position: relative;
    background: linear-gradient(150deg, var(--primary-700), var(--primary) 65%, var(--saving));
    color: #fff;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}
.auth-aside::after {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(600px 300px at 80% 15%, rgba(255,255,255,.18), transparent 60%),
        radial-gradient(500px 300px at 10% 90%, rgba(255,255,255,.12), transparent 55%);
    pointer-events: none;
}
.auth-brand { display: flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.15rem; position: relative; z-index: 1; }
.auth-brand .logo-mark {
    width: 38px; height: 38px; border-radius: 11px;
    background: rgba(255,255,255,.18); backdrop-filter: blur(6px);
    display: grid; place-items: center; font-size: 1.15rem;
}
.auth-pitch { position: relative; z-index: 1; max-width: 420px; }
.auth-pitch h2 { font-size: 2rem; line-height: 1.2; margin-bottom: .6rem; }
.auth-pitch p { color: rgba(255,255,255,.82); margin-bottom: 1.5rem; }
.auth-points { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.auth-points li { display: flex; align-items: center; gap: .6rem; font-weight: 500; }
.auth-points i { background: rgba(255,255,255,.2); border-radius: 8px; padding: .3rem; font-size: .95rem; }
.auth-foot { position: relative; z-index: 1; color: rgba(255,255,255,.7); font-size: .85rem; }

.auth-main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    background: var(--surface);
}
.auth-card { width: 100%; max-width: 400px; }
.auth-card h1 { font-size: 1.6rem; }
.auth-card .sub { color: var(--text-soft); margin-bottom: 1.6rem; }
.auth-switch { text-align: center; margin-top: 1.4rem; color: var(--text-soft); font-size: .92rem; }
.auth-divider { display: flex; align-items: center; gap: 1rem; margin: 1.3rem 0; color: var(--text-muted); font-size: .8rem; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.forgot-link { display: block; text-align: right; font-size: .85rem; margin-top: -.4rem; margin-bottom: 1rem; }

/* Honeypot: tersembunyi dari pengguna, dibiarkan bisa diisi bot */
.hp-field { position: absolute !important; left: -9999px !important; top: -9999px !important;
    width: 1px; height: 1px; overflow: hidden; opacity: 0; }

/* OTP boxes (dipakai penuh di Tahap 7, gaya sudah disiapkan) */
.otp-inputs { display: flex; gap: .6rem; justify-content: center; margin: 1.2rem 0; }
.otp-inputs input {
    width: 52px; height: 60px; text-align: center;
    font-size: 1.5rem; font-weight: 700;
    border: 1.5px solid var(--border); border-radius: 12px;
    font-variant-numeric: tabular-nums;
}
.otp-inputs input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }

/* =====================================================================
   LANDING PAGE
   ===================================================================== */
.landing-nav {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem clamp(1rem, 5vw, 3.5rem);
    background: rgba(246, 247, 251, .8);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}
.landing-nav .brand { display: flex; align-items: center; gap: .55rem; font-weight: 800; font-size: 1.1rem; color: var(--text); }
.landing-nav .brand .logo-mark {
    width: 34px; height: 34px; border-radius: 10px;
    background: var(--primary-600); color: #fff; display: grid; place-items: center; font-size: 1.05rem;
}
.landing-nav .nav-actions { display: flex; align-items: center; gap: .7rem; }

.hero {
    padding: clamp(3rem, 8vw, 6rem) clamp(1rem, 5vw, 3.5rem) 2rem;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 3rem;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}
.hero-badge {
    display: inline-flex; align-items: center; gap: .45rem;
    background: var(--primary-soft); color: var(--primary-700);
    padding: .35rem .8rem; border-radius: 99px;
    font-size: .82rem; font-weight: 600; margin-bottom: 1.2rem;
}
.hero h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); letter-spacing: -.02em; }
.hero h1 .accent { color: var(--primary-600); }
.hero .lead { font-size: 1.1rem; color: var(--text-soft); max-width: 480px; margin-bottom: 1.8rem; }
.hero-cta { display: flex; gap: .8rem; flex-wrap: wrap; }
.hero-trust { margin-top: 1.6rem; color: var(--text-muted); font-size: .85rem; display: flex; align-items: center; gap: .5rem; }

/* Preview dashboard mock di hero */
.hero-preview {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 1.2rem;
    transform: rotate(1.2deg);
}
.hero-preview .pv-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.hero-preview .pv-title { font-weight: 700; font-size: .95rem; }
.hero-preview .pv-chip { font-size: .72rem; background: var(--surface-2); padding: .25rem .6rem; border-radius: 99px; color: var(--text-soft); }
.pv-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-bottom: 1rem; }
.pv-stat { background: var(--surface-2); border-radius: 12px; padding: .8rem; }
.pv-stat .lbl { font-size: .7rem; color: var(--text-soft); }
.pv-stat .val { font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.pv-bars { display: flex; align-items: flex-end; gap: .5rem; height: 90px; padding-top: .5rem; }
.pv-bars span { flex: 1; border-radius: 6px 6px 0 0; background: var(--primary-soft); }
.pv-bars span.hi { background: var(--primary); }
.pv-bars span.in { background: var(--income); }

.features {
    max-width: 1120px; margin: 0 auto;
    padding: 2rem clamp(1rem, 5vw, 3.5rem) 4rem;
}
.features h2 { text-align: center; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.features .section-sub { text-align: center; color: var(--text-soft); max-width: 520px; margin: 0 auto 2.5rem; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.feature-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: transform .15s ease, box-shadow .15s ease;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.feature-card .ic {
    width: 46px; height: 46px; border-radius: 12px;
    display: grid; place-items: center; font-size: 1.3rem;
    background: var(--primary-soft); color: var(--primary-600);
    margin-bottom: 1rem;
}
.feature-card h3 { font-size: 1.05rem; }
.feature-card p { color: var(--text-soft); font-size: .9rem; margin: 0; }

.landing-cta {
    max-width: 1120px; margin: 0 auto 4rem;
    padding: 0 clamp(1rem, 5vw, 3.5rem);
}
.landing-cta .box {
    background: linear-gradient(135deg, var(--primary-700), var(--primary));
    color: #fff; border-radius: var(--radius-lg);
    padding: clamp(2rem, 5vw, 3.5rem); text-align: center;
}
.landing-cta h2 { color: #fff; font-size: clamp(1.5rem, 3vw, 2rem); }
.landing-cta p { color: rgba(255,255,255,.85); max-width: 440px; margin: 0 auto 1.6rem; }

.landing-foot {
    text-align: center; padding: 2rem; color: var(--text-muted);
    font-size: .85rem; border-top: 1px solid var(--border);
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 900px) {
    .auth { grid-template-columns: 1fr; }
    .auth-aside { display: none; }
    .hero { grid-template-columns: 1fr; gap: 2rem; }
    .hero-preview { transform: none; order: -1; }
    .feature-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .form-row { grid-template-columns: 1fr; }
    .landing-nav .nav-actions .btn-ghost { display: none; }
    .otp-inputs input { width: 44px; height: 52px; font-size: 1.25rem; }
}

/* Aksesibilitas: hormati preferensi gerakan minimal */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* =====================================================================
   TEMA GELAP (dark mode)
   Aktif saat <html data-theme="dark">. Hanya menimpa warna netral;
   warna semantik (income/expense/saving) dijaga tetap terbaca.
   ===================================================================== */
:root[data-theme="dark"] {
    --bg:           #0f172a;
    --surface:      #1e293b;
    --surface-2:    #172033;
    --border:       #334155;
    --text:         #e2e8f0;
    --text-soft:    #94a3b8;
    --text-muted:   #64748b;
    --primary-soft: #312e5b;
    --income-soft:  #14331f;
    --expense-soft: #3a2410;
    --danger-soft:  #3a1a1a;
    --saving-soft:  #2a2150;
    --warning-soft: #3a2e0c;
    --shadow-sm:    0 1px 2px rgba(0,0,0,.3);
    --shadow:       0 4px 10px rgba(0,0,0,.35);
    --shadow-lg:    0 20px 40px -12px rgba(0,0,0,.5);
}
:root[data-theme="dark"] body { background: var(--bg); color: var(--text); }
:root[data-theme="dark"] .btn-ghost { background: transparent; }
:root[data-theme="dark"] .btn-light { background: var(--surface); color: var(--text); }

/* =====================================================================
   APP SHELL — kerangka aplikasi (sidebar + topbar + konten)
   ===================================================================== */
.app {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    min-height: 100vh;
}

/* ---- Sidebar ---- */
.sidebar {
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}
.sidebar-brand {
    display: flex; align-items: center; gap: .6rem;
    padding: 1.15rem 1.25rem;
    font-weight: 800; font-size: 1.05rem; color: var(--text);
    border-bottom: 1px solid var(--border);
}
.sidebar-brand .logo-mark {
    width: 34px; height: 34px; border-radius: 10px;
    background: var(--primary-600); color: #fff;
    display: grid; place-items: center; font-size: 1.05rem; flex-shrink: 0;
}
.sidebar-nav { padding: .8rem .7rem; flex: 1; }
.nav-section-label {
    font-size: .7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--text-muted);
    padding: .8rem .6rem .35rem;
}
.nav-item {
    display: flex; align-items: center; gap: .75rem;
    padding: .62rem .7rem; margin-bottom: .12rem;
    border-radius: 10px; color: var(--text-soft);
    font-weight: 500; font-size: .92rem; text-decoration: none;
    transition: background .13s ease, color .13s ease;
}
.nav-item i { font-size: 1.1rem; width: 1.3rem; text-align: center; }
.nav-item:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.nav-item.active { background: var(--primary-soft); color: var(--primary-600); font-weight: 600; }
:root[data-theme="dark"] .nav-item.active { color: #c7d2fe; }
.nav-item .badge {
    margin-left: auto; background: var(--danger); color: #fff;
    font-size: .68rem; font-weight: 700; padding: .1rem .4rem;
    border-radius: 99px; min-width: 18px; text-align: center;
}
.sidebar-foot { padding: .8rem; border-top: 1px solid var(--border); }
.sidebar-user {
    display: flex; align-items: center; gap: .6rem;
    padding: .5rem; border-radius: 10px;
    color: var(--text); text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.sidebar-user:hover {
    background: var(--surface-2);
    color: var(--text);
    text-decoration: none;
}
.sidebar-user:active { transform: translateY(1px); }
.sidebar-user:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--primary-soft);
}
.sidebar-user .avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--primary-soft); color: var(--primary-600);
    display: grid; place-items: center; font-weight: 700; flex-shrink: 0;
    overflow: hidden;
}
.sidebar-user .avatar img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-user .meta { min-width: 0; }
.sidebar-user .meta .nm { font-weight: 600; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user .meta .em { font-size: .76rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-arrow {
    margin-left: auto;
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: .78rem;
    transition: transform .15s ease, color .15s ease;
}
.sidebar-user:hover .sidebar-user-arrow {
    color: var(--primary-600);
    transform: translateX(2px);
}

/* ---- Area konten ---- */
.content { display: flex; flex-direction: column; min-width: 0; }

/* ---- Topbar ---- */
.topbar {
    height: var(--header-h);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 1rem;
    padding: 0 1.3rem;
    position: sticky; top: 0; z-index: 30;
}
.topbar .menu-toggle {
    display: none; background: none; border: 0; cursor: pointer;
    font-size: 1.4rem; color: var(--text); padding: .2rem;
}
.topbar .page-title { font-weight: 700; font-size: 1.1rem; }
.topbar .spacer { flex: 1; }
.icon-btn {
    position: relative;
    width: 40px; height: 40px; border-radius: 10px;
    border: 1px solid var(--border); background: var(--surface);
    color: var(--text-soft); cursor: pointer;
    display: grid; place-items: center; font-size: 1.15rem;
    transition: background .13s ease, color .13s ease;
    text-decoration: none;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.icon-btn .dot {
    position: absolute; top: 7px; right: 8px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--danger); border: 2px solid var(--surface);
}

.page { padding: 1.5rem 1.3rem 2.5rem; max-width: 1200px; width: 100%; }

/* =====================================================================
   KOMPONEN UMUM: kartu, panel
   ===================================================================== */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.card-pad { padding: 1.25rem; }
.card-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--border);
}
.card-head h3 { margin: 0; font-size: 1rem; }
.card-head .sub { font-size: .8rem; color: var(--text-muted); }

/* ---- Month navigator ---- */
.month-nav {
    display: inline-flex; align-items: center; gap: .3rem;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; padding: .25rem;
}
.month-nav a {
    width: 34px; height: 34px; border-radius: 8px;
    display: grid; place-items: center; color: var(--text-soft);
    text-decoration: none; font-size: 1.05rem;
}
.month-nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.month-nav .label { padding: 0 .7rem; font-weight: 700; font-size: .92rem; min-width: 130px; text-align: center; }

/* ---- Stat cards (ringkasan) ---- */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.3rem; }
.stat-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 1.2rem;
    box-shadow: var(--shadow-sm);
    position: relative; overflow: hidden;
}
.stat-card .ic {
    width: 42px; height: 42px; border-radius: 11px;
    display: grid; place-items: center; font-size: 1.2rem; margin-bottom: .9rem;
}
.stat-card.income .ic { background: var(--income-soft); color: var(--income); }
.stat-card.expense .ic { background: var(--expense-soft); color: var(--expense); }
.stat-card.balance .ic { background: var(--primary-soft); color: var(--primary-600); }
.stat-card.saving .ic { background: var(--saving-soft); color: var(--saving); }
.stat-card .lbl { font-size: .82rem; color: var(--text-soft); margin-bottom: .2rem; }
.stat-card .val { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.stat-card .delta { font-size: .78rem; margin-top: .35rem; display: flex; align-items: center; gap: .25rem; }
.stat-card .delta.up { color: var(--income); }
.stat-card .delta.down { color: var(--danger); }

/* ---- Grid grafik ---- */
.chart-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1rem; margin-bottom: 1.3rem; }
.chart-box { position: relative; height: 300px; padding: 1rem 1.25rem 1.25rem; }
.chart-box canvas { max-height: 100%; }
.chart-legend { display: flex; flex-wrap: wrap; gap: .8rem; padding: 0 1.25rem 1rem; }
.chart-legend .lg { display: flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--text-soft); }
.chart-legend .lg .sw { width: 11px; height: 11px; border-radius: 3px; }

/* ---- Daftar transaksi terbaru ---- */
.tx-list { display: flex; flex-direction: column; }
.tx-item {
    display: flex; align-items: center; gap: .85rem;
    padding: .8rem 1.25rem; border-bottom: 1px solid var(--border);
    text-decoration: none; color: inherit;
    transition: background .12s ease;
}
.tx-item:last-child { border-bottom: 0; }
.tx-item:hover { background: var(--surface-2); text-decoration: none; }
.tx-icon {
    width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0;
    display: grid; place-items: center; font-size: 1.15rem;
}
.tx-body { flex: 1; min-width: 0; }
.tx-title { font-weight: 600; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-meta { font-size: .78rem; color: var(--text-muted); }
.tx-amount { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- Empty state ---- */
.empty {
    text-align: center; padding: 2.5rem 1.5rem; color: var(--text-muted);
}
.empty > i { font-size: 2.35rem; opacity: .5; display: block; margin-bottom: .6rem; }
.empty p { margin: .2rem 0 1rem; }

/* ---- Dropdown (menu profil / notifikasi) ---- */
.dropdown { position: relative; }
.dropdown-menu {
    position: absolute; right: 0; top: calc(100% + .5rem);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; box-shadow: var(--shadow-lg);
    min-width: 220px; padding: .4rem; z-index: 50;
    display: none;
}
.dropdown-menu.open { display: block; }
.dropdown-menu a {
    display: flex; align-items: center; gap: .6rem;
    padding: .6rem .7rem; border-radius: 8px;
    color: var(--text); font-size: .9rem; text-decoration: none;
}
.dropdown-menu a:hover { background: var(--surface-2); text-decoration: none; }
.dropdown-menu .divider { height: 1px; background: var(--border); margin: .35rem 0; }

/* ---- Toast flash (mengambang) ---- */
.toast-wrap { position: fixed; top: 1rem; right: 1rem; z-index: 100; display: flex; flex-direction: column; gap: .6rem; }
.toast {
    display: flex; align-items: center; gap: .6rem;
    background: var(--surface); border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: 10px; padding: .8rem 1rem; box-shadow: var(--shadow-lg);
    min-width: 260px; max-width: 360px; font-size: .9rem;
}
.toast.success { border-left-color: var(--income); }
.toast.error { border-left-color: var(--danger); }
.toast.warning { border-left-color: var(--warning); }
.toast i { font-size: 1.1rem; }
.toast.success i { color: var(--income); }
.toast.error i { color: var(--danger); }

/* ---- Overlay sidebar mobile ---- */
.sidebar-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(15,23,42,.5); z-index: 40;
}

/* =====================================================================
   RESPONSIVE — app shell
   ===================================================================== */
@media (max-width: 1024px) {
    .chart-grid { grid-template-columns: 1fr; }
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
    .app { grid-template-columns: 1fr; }
    .sidebar {
        position: fixed; left: 0; top: 0; z-index: 45;
        width: var(--sidebar-w); transform: translateX(-100%);
        transition: transform .22s ease;
    }
    .app.sidebar-open .sidebar { transform: translateX(0); }
    .app.sidebar-open .sidebar-overlay { display: block; }
    .topbar .menu-toggle { display: block; }
}
@media (max-width: 560px) {
    .stat-grid { grid-template-columns: 1fr; }
    .page { padding: 1rem .9rem 2rem; }
    .month-nav .label { min-width: 100px; }
}

/* =====================================================================
   TAHAP 3 — Transaksi & Kategori
   ===================================================================== */

/* ---- Page header (judul + aksi) ---- */
.page-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    flex-wrap: wrap; gap: 1rem; margin-bottom: 1.3rem;
}
.page-head h1 { font-size: 1.4rem; margin-bottom: .15rem; }
.page-head .desc { color: var(--text-soft); font-size: .9rem; margin: 0; }
.page-head-actions { display: flex; gap: .6rem; flex-wrap: wrap; }

/* ---- Segmented control (pemilih tipe) ---- */
.segmented { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px; padding: .25rem; gap: .2rem; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .5rem .9rem; border-radius: 8px; cursor: pointer;
    font-weight: 600; font-size: .9rem; color: var(--text-soft);
    transition: all .13s ease; user-select: none;
}
.segmented label:hover { color: var(--text); }
.segmented input:checked + label.seg-income  { background: var(--income);  color: #fff; }
.segmented input:checked + label.seg-expense { background: var(--expense); color: #fff; }
.segmented input:checked + label.seg-saving  { background: var(--saving);  color: #fff; }
.segmented input:focus-visible + label { outline: 2px solid var(--primary); outline-offset: 1px; }

/* ---- Filter bar ---- */
.filter-bar {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 1rem; margin-bottom: 1.2rem;
}
/* Baris pencarian + tombol */
.filter-search-row { display: flex; gap: .6rem; align-items: stretch; margin-bottom: .9rem; }
.filter-search-row .search { flex: 1; min-width: 0; }
.filter-search-row .search .input { padding: .6rem .8rem .6rem 2.5rem; font-size: .92rem; }
.filter-search-row .btn { white-space: nowrap; }
/* Grid kontrol filter */
.filter-controls { display: grid; grid-template-columns: repeat(6, 1fr); gap: .7rem; }
.filter-controls .fc { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.filter-controls .fc label { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); }
.filter-controls .fc select { width: 100%; padding: .55rem .7rem; font-size: .88rem; }

/* ---- Toolbar tabel (info + per halaman) ---- */
.table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .9rem 1.25rem; border-bottom: 1px solid var(--border); }
.table-toolbar .tt-info { font-size: .86rem; color: var(--text-soft); }
.table-toolbar .tt-perpage { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--text-soft); }
.table-toolbar .tt-perpage select { width: auto; padding: .4rem 1.8rem .4rem .7rem; font-size: .85rem; }

@media (max-width: 900px) {
    .filter-controls { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
    .filter-controls { grid-template-columns: repeat(2, 1fr); }
    .filter-search-row { flex-wrap: wrap; }
    .filter-search-row .search { flex: 1 1 100%; }
}

/* ---- Badge tipe transaksi ---- */
.type-badge {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .2rem .55rem; border-radius: 99px;
    font-size: .74rem; font-weight: 700;
}
.type-badge.income  { background: var(--income-soft);  color: var(--income); }
.type-badge.expense { background: var(--expense-soft); color: var(--expense); }
.type-badge.saving  { background: var(--saving-soft);  color: var(--saving); }

/* ---- Tabel data ---- */
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.data-table th {
    text-align: left; font-weight: 700; font-size: .76rem;
    text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted);
    padding: .75rem 1rem; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.data-table td { padding: .8rem 1rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr { transition: background .12s ease; }
.data-table tbody tr:hover { background: var(--surface-2); }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.cell-cat { display: inline-flex; align-items: center; gap: .5rem; }
.cell-cat .ci { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-size: .9rem; flex-shrink: 0; }

/* ---- Action buttons dalam tabel ---- */
.row-actions { display: flex; gap: .3rem; justify-content: flex-end; }
.act-btn {
    width: 32px; height: 32px; border-radius: 8px;
    border: 1px solid var(--border); background: var(--surface);
    color: var(--text-soft); cursor: pointer; display: grid; place-items: center;
    font-size: .9rem; text-decoration: none; transition: all .12s ease;
}
.act-btn:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.act-btn.danger:hover { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }

/* ---- Pagination ---- */
.pagination { display: flex; gap: .3rem; justify-content: center; align-items: center; margin-top: 1.3rem; flex-wrap: wrap; }
.pagination a, .pagination span {
    min-width: 38px; height: 38px; padding: 0 .6rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9px; border: 1px solid var(--border);
    background: var(--surface); color: var(--text-soft);
    text-decoration: none; font-weight: 600; font-size: .88rem;
}
.pagination a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.pagination .current { background: var(--primary-600); color: #fff; border-color: var(--primary-600); }
.pagination .disabled { opacity: .4; pointer-events: none; }

/* ---- Form layout ---- */
.form-card { max-width: 960px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.1rem; }
.form-grid .full { grid-column: 1 / -1; }
.form-actions { display: flex; gap: .7rem; margin-top: .5rem; padding-top: 1.2rem; border-top: 1px solid var(--border); }

/* input dengan prefix Rp */
.input-prefix { position: relative; }
.input-prefix .pfx { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--text-soft); font-weight: 600; pointer-events: none; }
.input-prefix .input { padding-left: 2.4rem; font-variant-numeric: tabular-nums; font-weight: 600; }

/* ---- Icon picker ---- */
.icon-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: .4rem; max-height: 180px; overflow-y: auto; padding: .3rem; border: 1px solid var(--border); border-radius: 10px; }
.icon-opt { aspect-ratio: 1; border: 1.5px solid transparent; border-radius: 9px; background: var(--surface-2); display: grid; place-items: center; font-size: 1.15rem; cursor: pointer; color: var(--text-soft); transition: all .12s ease; }
.icon-opt:hover { color: var(--text); background: var(--border); }
.icon-opt.selected { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-600); }

/* ---- Color picker ---- */
.color-picker { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.color-opt { width: 34px; height: 34px; border-radius: 9px; cursor: pointer; border: 2px solid transparent; position: relative; }
.color-opt.selected { border-color: var(--text); box-shadow: 0 0 0 2px var(--surface) inset; }
.color-opt.selected::after { content: '\2713'; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: .9rem; }

/* ---- Preview kategori (di form) ---- */
.cat-preview { display: inline-flex; align-items: center; gap: .6rem; padding: .6rem .9rem; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--border); }
.cat-preview .cp-ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-size: 1.2rem; color: #fff; }

/* ---- Kategori list (dikelompokkan) ---- */
.cat-group { margin-bottom: 1.5rem; }
.cat-group-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .8rem; font-weight: 700; font-size: .95rem; }
.cat-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .8rem; }
.cat-card {
    display: flex; align-items: center; gap: .75rem;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; padding: .85rem 1rem; position: relative;
}
.cat-card.inactive { opacity: .55; }
.cat-card .cc-ic { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; font-size: 1.2rem; flex-shrink: 0; }
.cat-card .cc-body { flex: 1; min-width: 0; }
.cat-card .cc-name { font-weight: 600; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-card .cc-meta { font-size: .76rem; color: var(--text-muted); }
.cat-card .cc-actions { display: flex; gap: .25rem; }

/* ---- Detail transaksi ---- */
.detail-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.2rem; align-items: start; }
.detail-hero { text-align: center; padding: 2rem 1.5rem; }
.detail-hero .dh-ic { width: 70px; height: 70px; border-radius: 18px; display: grid; place-items: center; font-size: 2rem; margin: 0 auto 1rem; }
.detail-hero .dh-amount { font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.detail-list { list-style: none; margin: 0; padding: 0; }
.detail-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--border); font-size: .9rem; }
.detail-list li:last-child { border-bottom: 0; }
.detail-list .dl-label { color: var(--text-soft); }
.detail-list .dl-value { font-weight: 600; text-align: right; }
.attachment-view img { width: 100%; border-radius: 12px; border: 1px solid var(--border); }

@media (max-width: 720px) {
    .form-grid { grid-template-columns: 1fr; }
    .detail-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   TAHAP 4 — Anggaran & Target Tabungan
   ===================================================================== */

/* ---- Progress bar ---- */
.progress { height: 8px; background: var(--border); border-radius: 99px; overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: 99px; transition: width .5s ease; background: var(--primary); }
.progress.sm { height: 6px; }
.progress > span.safe    { background: var(--income); }
.progress > span.warning { background: var(--warning); }
.progress > span.over    { background: var(--danger); }

/* ---- Status badge ---- */
.status-pill { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .55rem; border-radius: 99px; font-size: .74rem; font-weight: 700; }
.status-pill.safe    { background: var(--income-soft);  color: var(--income); }
.status-pill.warning { background: var(--warning-soft); color: #b45309; }
.status-pill.over    { background: var(--danger-soft);  color: var(--danger); }

/* ---- Kartu anggaran ---- */
.budget-list { display: grid; gap: .9rem; }
.budget-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.25rem; }
.budget-top { display: flex; align-items: center; gap: .8rem; margin-bottom: .9rem; }
.budget-top .bc-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.25rem; flex-shrink: 0; }
.budget-top .bc-name { font-weight: 600; }
.budget-top .bc-sub { font-size: .8rem; color: var(--text-muted); }
.budget-top .bc-actions { margin-left: auto; display: flex; gap: .3rem; }
.budget-figures { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: .5rem; }
.budget-figures .spent { font-weight: 700; font-variant-numeric: tabular-nums; }
.budget-figures .limit { font-size: .85rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.budget-foot { display: flex; justify-content: space-between; margin-top: .55rem; font-size: .82rem; }

/* ---- Ringkasan besar (total anggaran) ---- */
.budget-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.3rem; }
.bs-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.2rem; }
.bs-card .bs-label { font-size: .82rem; color: var(--text-soft); }
.bs-card .bs-value { font-size: 1.4rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; margin-top: .15rem; }

/* ---- Kartu target tabungan ---- */
.goal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.goal-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.3rem; text-decoration: none; color: inherit; display: block; transition: transform .14s ease, box-shadow .14s ease; }
.goal-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); text-decoration: none; }
.goal-head { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.goal-head .gh-ic { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; font-size: 1.4rem; background: var(--saving-soft); color: var(--saving); flex-shrink: 0; }
.goal-head .gh-name { font-weight: 700; font-size: 1.02rem; }
.goal-head .gh-sub { font-size: .8rem; color: var(--text-muted); }
.goal-amounts { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .5rem; }
.goal-amounts .cur { font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.goal-amounts .tgt { font-size: .85rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.goal-foot { display: flex; justify-content: space-between; margin-top: .55rem; font-size: .82rem; color: var(--text-soft); }
.goal-badge-done { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .55rem; border-radius: 99px; font-size: .72rem; font-weight: 700; background: var(--income-soft); color: var(--income); }

/* ---- Riwayat tabungan ---- */
.history-item { display: flex; align-items: center; gap: .85rem; padding: .8rem 0; border-bottom: 1px solid var(--border); }
.history-item:last-child { border-bottom: 0; }
.history-item .hi-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: 1rem; flex-shrink: 0; }
.history-item .hi-ic.deposit { background: var(--income-soft); color: var(--income); }
.history-item .hi-ic.withdrawal { background: var(--danger-soft); color: var(--danger); }
.history-item .hi-body { flex: 1; min-width: 0; }
.history-item .hi-amount { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---- Deposit toggle (setor/tarik) ---- */
.dw-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: 1rem; }
.dw-toggle input { position: absolute; opacity: 0; }
.dw-toggle label { text-align: center; padding: .7rem; border: 1.5px solid var(--border); border-radius: 10px; cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--text-soft); transition: all .13s ease; }
.dw-toggle input:checked + label.dw-in  { border-color: var(--income); background: var(--income-soft); color: var(--income); }
.dw-toggle input:checked + label.dw-out { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }

@media (max-width: 640px) {
    .budget-summary { grid-template-columns: 1fr; }
}

/* =====================================================================
   TAHAP 5 — Transaksi Berulang, Kalender, Notifikasi
   ===================================================================== */

/* ---- Kartu transaksi berulang ---- */
.recur-list { display: grid; gap: .9rem; }
.recur-card { display: flex; align-items: center; gap: .9rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; }
.recur-card.inactive { opacity: .6; }
.recur-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 1.25rem; flex-shrink: 0; }
.recur-body { flex: 1; min-width: 0; }
.recur-title { font-weight: 600; }
.recur-meta { font-size: .8rem; color: var(--text-muted); margin-top: .1rem; }
.recur-amount { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.recur-actions { display: flex; gap: .3rem; }
.freq-badge { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .5rem; border-radius: 99px; font-size: .72rem; font-weight: 700; background: var(--primary-soft); color: var(--primary-600); }
.due-badge { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .5rem; border-radius: 99px; font-size: .72rem; font-weight: 700; background: var(--warning-soft); color: #b45309; }

/* ---- Kalender ---- */
.calendar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--border); }
.cal-weekdays div { padding: .7rem; text-align: center; font-size: .76rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-cell { min-height: 96px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: .5rem; position: relative; text-decoration: none; color: inherit; transition: background .12s ease; display: flex; flex-direction: column; gap: .25rem; }
.cal-cell:nth-child(7n) { border-right: 0; }
.cal-cell:hover { background: var(--surface-2); text-decoration: none; }
.cal-cell.empty { background: var(--surface-2); pointer-events: none; opacity: .5; }
.cal-cell.today .cal-date { background: var(--primary-600); color: #fff; }
.cal-cell.selected { background: var(--primary-soft); }
.cal-date { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font-size: .82rem; font-weight: 600; }
.cal-amt { font-size: .68rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.3; }
.cal-amt.in { color: var(--income); }
.cal-amt.out { color: var(--expense); }
.cal-dot { position: absolute; bottom: .5rem; right: .5rem; display: flex; gap: 2px; }
.cal-dot span { width: 6px; height: 6px; border-radius: 50%; }

/* ---- Panel hari terpilih ---- */
.day-panel { margin-top: 1.2rem; }

/* ---- Notifikasi ---- */
.notif-list { display: flex; flex-direction: column; }
.notif-item { display: flex; align-items: flex-start; gap: .85rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); transition: background .12s ease; }
.notif-item:last-child { border-bottom: 0; }
.notif-item.unread { background: var(--primary-soft); }
.notif-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-size: 1.1rem; flex-shrink: 0; background: var(--primary-soft); color: var(--primary-600); }
.notif-ic.budget { background: var(--warning-soft); color: #b45309; }
.notif-ic.saving { background: var(--saving-soft); color: var(--saving); }
.notif-ic.recurring { background: var(--income-soft); color: var(--income); }
.notif-body { flex: 1; min-width: 0; }
.notif-title { font-weight: 600; font-size: .92rem; }
.notif-msg { font-size: .85rem; color: var(--text-soft); margin-top: .1rem; }
.notif-time { font-size: .75rem; color: var(--text-muted); margin-top: .25rem; }
.notif-actions { display: flex; gap: .3rem; align-items: center; }
.unread-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--primary); flex-shrink: 0; margin-top: .4rem; }

@media (max-width: 640px) {
    .cal-cell { min-height: 70px; padding: .3rem; }
    .cal-amt { display: none; }
    .recur-card { flex-wrap: wrap; }
}

/* =====================================================================
   TAHAP 6 — Laporan & Profil
   ===================================================================== */

/* ---- Filter laporan ---- */
.report-filter { display: flex; flex-wrap: wrap; gap: .7rem; align-items: flex-end; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.1rem; margin-bottom: 1.3rem; }
.report-filter .field { margin-bottom: 0; }
.report-filter .field label { font-size: .78rem; margin-bottom: .25rem; }
.report-filter .input, .report-filter select { padding: .55rem .7rem; font-size: .9rem; }

/* ---- Tabel agregasi kategori ---- */
.agg-table { width: 100%; border-collapse: collapse; }
.agg-table th { text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 700; padding: .7rem 1rem; border-bottom: 1px solid var(--border); }
.agg-table td { padding: .8rem 1rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.agg-table tr:last-child td { border-bottom: 0; }
.agg-cat { display: inline-flex; align-items: center; gap: .55rem; font-weight: 600; }
.agg-cat .ci { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-size: .9rem; }
.agg-bar { height: 6px; background: var(--border); border-radius: 99px; overflow: hidden; min-width: 90px; }
.agg-bar > span { display: block; height: 100%; border-radius: 99px; }
.agg-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.agg-pct { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-soft); font-size: .85rem; white-space: nowrap; }
.agg-foot td { font-weight: 800; border-top: 2px solid var(--border); background: var(--surface-2); }

/* ---- Report grid dua kolom ---- */
.report-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.3rem; }
.report-chart-box { height: 300px; padding: 1rem 1.25rem 1.25rem; position: relative; }

/* ---- Profil ---- */
.profile-grid { display: grid; grid-template-columns: 280px 1fr; gap: 1.3rem; align-items: start; }
.profile-side { position: sticky; top: 80px; }
.avatar-big { width: 110px; height: 110px; border-radius: 50%; margin: 0 auto 1rem; background: var(--primary-soft); color: var(--primary-600); display: grid; place-items: center; font-size: 2.6rem; font-weight: 800; overflow: hidden; }
.avatar-big img { width: 100%; height: 100%; object-fit: cover; }
.profile-nav { display: flex; flex-direction: column; gap: .2rem; margin-top: 1rem; }
.profile-nav a { display: flex; align-items: center; gap: .7rem; padding: .65rem .8rem; border-radius: 10px; color: var(--text-soft); text-decoration: none; font-weight: 500; font-size: .92rem; }
.profile-nav a:hover, .profile-nav a.active { background: var(--surface-2); color: var(--text); text-decoration: none; }
.profile-section { margin-bottom: 1.3rem; scroll-margin-top: 80px; }
.profile-section h2 { font-size: 1.1rem; margin-bottom: 1rem; }

.avatar-upload { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; }
.avatar-upload .prev { width: 72px; height: 72px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-600); display: grid; place-items: center; font-size: 1.6rem; font-weight: 700; overflow: hidden; flex-shrink: 0; }
.avatar-upload .prev img { width: 100%; height: 100%; object-fit: cover; }

.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--border); }
.setting-row:last-child { border-bottom: 0; }
.setting-row .st-label { font-weight: 600; font-size: .92rem; }
.setting-row .st-desc { font-size: .82rem; color: var(--text-muted); }
.setting-row select { min-width: 160px; }

/* ---- Print ---- */
@media print {
    .sidebar, .topbar, .sidebar-overlay, .no-print, .toast-wrap { display: none !important; }
    .app { display: block; }
    .content { display: block; }
    .page { padding: 0; max-width: 100%; }
    .card, .stat-card, .bs-card { box-shadow: none !important; border-color: #ddd !important; break-inside: avoid; }
    body { background: #fff; }
    .print-title { display: block !important; margin-bottom: 1rem; }
    a { color: inherit !important; text-decoration: none !important; }
}
.print-title { display: none; }

@media (max-width: 860px) {
    .profile-grid { grid-template-columns: 1fr; }
    .profile-side { position: static; }
    .report-cols { grid-template-columns: 1fr; }
}

/* =====================================================================
   MONATRACK UI REFRESH — desktop, tablet, dan mobile
   ===================================================================== */
:root {
    --bg: #f5f7fb;
    --surface-2: #f8fafc;
    --border: #e3e8f0;
    --text: #172033;
    --text-soft: #64748b;
    --radius: 18px;
    --radius-sm: 11px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .035);
    --shadow: 0 14px 34px rgba(15, 23, 42, .08);
}

html, body { min-width: 0; }
body { overflow-x: hidden; }
button, input, select, textarea { min-width: 0; }

/* Branding */
.sidebar-brand { min-height: 72px; padding: 1rem 1.15rem; gap: .75rem; }
.sidebar-brand .logo-mark,
.landing-nav .brand .logo-mark {
    background: linear-gradient(135deg, #6557f5, #8b5cf6);
    box-shadow: 0 8px 20px rgba(99, 102, 241, .25);
}
.sidebar-brand .brand-copy { display: flex; min-width: 0; flex-direction: column; line-height: 1.15; }
.sidebar-brand .brand-copy strong { font-size: 1.02rem; letter-spacing: -.02em; }
.sidebar-brand .brand-copy small { margin-top: .22rem; color: var(--text-muted); font-size: .62rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }

/* App shell */
.sidebar { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.sidebar-nav { padding: .75rem .65rem 1rem; }
.nav-item { min-height: 44px; padding: .65rem .78rem; border-radius: 12px; }
.nav-item.active { box-shadow: inset 0 0 0 1px rgba(99, 102, 241, .06); }
.content { width: 100%; min-width: 0; }
.topbar {
    height: 68px;
    padding-inline: clamp(.9rem, 2vw, 1.65rem);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.topbar .page-title { font-size: 1.03rem; letter-spacing: -.015em; }
.page {
    max-width: 1440px;
    margin-inline: auto;
    padding: clamp(1rem, 2.2vw, 1.75rem) clamp(.9rem, 2vw, 1.65rem) 3rem;
}
.icon-btn { flex: 0 0 auto; border-radius: 12px; }

/* Kartu dan tombol */
.card,
.stat-card,
.filter-bar,
.report-filter,
.budget-card,
.goal-card,
.recur-card,
.calendar {
    border-color: var(--border);
    box-shadow: var(--shadow-sm);
}
.card { overflow: hidden; }
.card-head { min-height: 72px; gap: .9rem; }
.card-head > div { min-width: 0; }
.card-head .sub { display: block; margin-top: .15rem; }
.btn { min-height: 42px; border-radius: 11px; }
.btn-sm { min-height: 36px; padding: .42rem .8rem; font-size: .84rem; }
.btn-primary { box-shadow: 0 8px 18px rgba(79, 70, 229, .16); }
.btn-primary:hover { box-shadow: 0 10px 22px rgba(79, 70, 229, .24); }
.input, .form-control, select.input, textarea.input { min-height: 44px; }
textarea.input { min-height: 110px; }

/* Header halaman */
.page-head { align-items: center; margin-bottom: 1.15rem; }
.page-head h1 { font-size: clamp(1.3rem, 2vw, 1.55rem); }
.page-head .desc { max-width: 720px; }

/* Dashboard */
.dashboard-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.dashboard-greeting { min-width: 0; }
.dashboard-greeting .eyebrow {
    display: block;
    margin-bottom: .25rem;
    color: var(--primary-600);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .075em;
    text-transform: uppercase;
}
.dashboard-greeting h1 { margin-bottom: .18rem; font-size: clamp(1.35rem, 2.2vw, 1.65rem); }
.dashboard-greeting p { font-size: .9rem; }
.dashboard-actions { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; justify-content: flex-end; }
.month-nav { box-shadow: var(--shadow-sm); }
.month-nav .label { min-width: 136px; }
.stat-grid { gap: .9rem; margin-bottom: 1.15rem; }
.stat-card { min-height: 172px; padding: 1.1rem; transition: transform .16s ease, box-shadow .16s ease; }
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.stat-card .ic { width: 40px; height: 40px; margin-bottom: .75rem; }
.stat-card .val { overflow-wrap: anywhere; font-size: clamp(1.25rem, 2vw, 1.5rem); }
.chart-grid { gap: .9rem; margin-bottom: .9rem; }
.chart-grid-single { grid-template-columns: 1fr; }
.chart-box { height: 310px; padding: 1rem 1.15rem 1.2rem; }
.chart-box-trend { height: 275px; }
.chart-legend-inline { padding: 0; justify-content: flex-end; }
.chart-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
}
.chart-loading span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
    animation: monatrack-bounce .8s infinite alternate;
}
.chart-loading span:nth-child(2) { animation-delay: .15s; }
.chart-loading span:nth-child(3) { animation-delay: .3s; }
@keyframes monatrack-bounce { to { transform: translateY(-7px); opacity: .45; } }
.chart-state {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: 1.4rem;
    text-align: center;
    color: var(--text-soft);
}
.chart-state-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    margin-bottom: .35rem;
    border-radius: 15px;
    background: var(--primary-soft);
    color: var(--primary-600);
    font-size: 1.3rem;
}
.chart-state strong { color: var(--text); font-size: .95rem; }
.chart-state span:last-child { max-width: 340px; font-size: .8rem; }
.chart-state.is-error .chart-state-icon { background: var(--danger-soft); color: var(--danger); }

/* Halaman transaksi */
.transaction-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.transaction-stat-grid .stat-card { min-height: 142px; }
.transaction-stat-grid .stat-card .ic { margin-bottom: .55rem; }
.transaction-filter { padding: 1rem 1.05rem; }
.filter-search-row { align-items: center; margin-bottom: 1rem; }
.filter-search-row .search .input { min-height: 46px; }
.filter-actions { display: flex; flex: 0 0 auto; gap: .55rem; }
.filter-controls { grid-template-columns: repeat(6, minmax(125px, 1fr)); }
.filter-controls .fc select { min-height: 42px; }
.transaction-list-card { min-height: 230px; }
.empty-onboarding {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.25rem 1.25rem;
}
.empty-onboarding .empty-icon {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    margin-bottom: .9rem;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--primary-soft), var(--saving-soft));
    color: var(--primary-600);
    font-size: 1.65rem;
}
.empty-onboarding .empty-icon i { margin: 0; font-size: inherit; opacity: 1; }
.empty-onboarding h3 { margin-bottom: .35rem; color: var(--text); font-size: 1.05rem; }
.empty-onboarding p { max-width: 500px; margin: 0 0 1.1rem; font-size: .88rem; }
.empty-actions { display: flex; justify-content: center; gap: .6rem; flex-wrap: wrap; }
.transactions-table td:first-child a { text-decoration: none; }
.transactions-table td:first-child a:hover { color: var(--primary-600) !important; }

/* Bentuk umum lain */
.form-card { width: 100%; }
.form-actions { flex-wrap: wrap; }
.table-wrap { width: 100%; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.data-table th, .data-table td { padding-inline: 1rem; }
.goal-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.cat-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.report-filter .field { flex: 1 1 190px; }
.calendar { overflow-x: auto; }
.cal-weekdays, .cal-grid { min-width: 700px; }

@media (max-width: 1180px) {
    .filter-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
    .chart-box { height: 285px; }
    .transaction-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
    body.sidebar-visible { overflow: hidden; }
    .sidebar { box-shadow: 24px 0 50px rgba(15, 23, 42, .18); }
    .topbar { height: 62px; }
    .topbar .page-title { max-width: 45vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .dashboard-head { align-items: flex-start; flex-direction: column; }
    .dashboard-actions { width: 100%; justify-content: space-between; }
    .transaction-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .report-filter { align-items: stretch; }
}

@media (max-width: 720px) {
    .page-head { align-items: stretch; flex-direction: column; }
    .page-head-actions { width: 100%; }
    .page-head-actions .btn { flex: 1 1 auto; }
    .transaction-stat-grid { grid-template-columns: 1fr; }
    .transaction-stat-grid .stat-card { min-height: 118px; }
    .filter-search-row { align-items: stretch; flex-direction: column; }
    .filter-actions { width: 100%; }
    .filter-actions .btn { flex: 1; }
    .filter-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .card-head { align-items: flex-start; flex-wrap: wrap; }
    .chart-legend-inline { width: 100%; justify-content: flex-start; }

    /* Tabel transaksi berubah menjadi kartu agar tidak melebar di HP. */
    .transactions-table,
    .transactions-table tbody,
    .transactions-table tr,
    .transactions-table td { display: block; width: 100%; }
    .transactions-table thead { display: none; }
    .transactions-table tbody { padding: .65rem; }
    .transactions-table tr {
        margin-bottom: .7rem;
        padding: .75rem .85rem;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--surface);
        box-shadow: 0 4px 14px rgba(15, 23, 42, .035);
    }
    .transactions-table tr:last-child { margin-bottom: 0; }
    .transactions-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: .45rem 0;
        border: 0;
        text-align: right;
    }
    .transactions-table td::before {
        content: attr(data-label);
        flex: 0 0 76px;
        color: var(--text-muted);
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .03em;
        text-align: left;
        text-transform: uppercase;
    }
    .transactions-table td:first-child {
        align-items: flex-start;
        flex-direction: column;
        gap: .3rem;
        padding-bottom: .7rem;
        border-bottom: 1px solid var(--border);
        text-align: left;
    }
    .transactions-table td:first-child::before { display: none; }
    .transactions-table .cell-cat { justify-content: flex-end; }
    .transactions-table .row-actions { justify-content: flex-end; }
    .table-toolbar { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 560px) {
    :root { --radius: 15px; }
    body { font-size: 14px; }
    .page { padding: .9rem .75rem 2rem; }
    .topbar { gap: .55rem; padding-inline: .75rem; }
    .icon-btn { width: 38px; height: 38px; }
    .topbar .page-title { font-size: .95rem; }
    .dashboard-actions { align-items: stretch; flex-direction: column; }
    .dashboard-actions .month-nav,
    .dashboard-actions .btn { width: 100%; }
    .month-nav { justify-content: space-between; }
    .month-nav .label { flex: 1; min-width: 0; }
    .stat-grid { grid-template-columns: 1fr; }
    .stat-card { min-height: 126px; }
    .chart-box, .chart-box-trend, .report-chart-box { height: 250px; padding: .8rem; }
    .card-head { min-height: 64px; padding: .9rem 1rem; }
    .filter-controls { grid-template-columns: 1fr; }
    .filter-actions { flex-direction: column; }
    .empty-onboarding { min-height: 260px; }
    .empty-actions { width: 100%; flex-direction: column-reverse; }
    .empty-actions .btn { width: 100%; }
    .form-grid, .form-row { grid-template-columns: 1fr; }
    .form-grid .full { grid-column: auto; }
    .form-actions { flex-direction: column-reverse; }
    .form-actions .btn { width: 100%; }
    .budget-summary { grid-template-columns: 1fr; }
    .budget-top, .recur-card { align-items: flex-start; }
    .recur-card { flex-wrap: wrap; }
    .recur-amount { margin-left: 56px; text-align: left; }
    .recur-actions { margin-left: auto; }
    .notif-item { padding: .9rem; }
    .notif-actions { flex-direction: column; }
    .report-filter .field, .report-filter .btn { flex: 1 1 100%; width: 100%; }
    .setting-row { align-items: flex-start; flex-direction: column; }
    .setting-row select { width: 100%; min-width: 0; }
    .toast-wrap { left: .75rem; right: .75rem; }
    .toast { width: 100%; min-width: 0; max-width: none; }
}


/* =====================================================================
   MONATRACK UI POLISH — pemilih kategori, tombol ringkas, dan responsif
   ===================================================================== */

/* Tombol tetap ringkas di dalam empty state. Selector lama tidak boleh
   membesarkan ikon tombol menjadi ikon ilustrasi. */
.empty .btn i,
.empty-onboarding .btn i {
    display: inline-block;
    margin: 0;
    font-size: .95rem;
    opacity: 1;
}
.empty { padding: 2rem 1.25rem; }
.empty p { margin-bottom: .8rem; }

/* Header dan aksi halaman lebih proporsional. */
.page-head { gap: .85rem; margin-bottom: 1.1rem; }
.page-head-actions { align-items: center; gap: .5rem; }
.page-head-actions .btn { min-height: 38px; }
.month-nav { padding: .18rem; }
.month-nav a { width: 32px; height: 32px; }
.month-nav .label { min-width: 124px; font-size: .88rem; }

/* Form transaksi dibuat sedikit lebih lega tanpa memenuhi seluruh layar. */
.form-card { max-width: 960px; padding: 1.15rem; }
.form-grid { gap: 0 1rem; }
.form-actions { align-items: center; padding-top: 1rem; }
.form-actions .btn { min-width: 118px; }

/* Label bagian kategori. */
.field-label-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .65rem;
}
.field-label-row label { margin-bottom: .12rem; }
.field-subtitle {
    display: block;
    color: var(--text-soft);
    font-size: .78rem;
    font-weight: 400;
}
.field-link {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    flex: 0 0 auto;
    font-size: .8rem;
    font-weight: 600;
}

/* Pencarian kategori pada form transaksi dan transaksi berulang. */
.category-picker-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .55rem;
}
.category-search {
    position: relative;
    display: flex;
    align-items: center;
    width: min(100%, 380px);
    min-height: 42px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface);
    color: var(--text-muted);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.category-search:focus-within {
    border-color: var(--primary);
    background: var(--surface);
    box-shadow: 0 0 0 3px var(--primary-soft);
}
.category-search > .bi-search {
    position: absolute;
    left: .8rem;
    z-index: 1;
    pointer-events: none;
    font-size: .9rem;
}
.category-search input {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: .55rem 2.45rem .55rem 2.35rem;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: .84rem;
}
.category-search input::placeholder { color: var(--text-muted); }
.category-search input::-webkit-search-cancel-button { display: none; }
.category-search-clear {
    position: absolute;
    right: .42rem;
    display: grid;
    place-items: center;
    width: 29px;
    height: 29px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}
.category-search-clear:hover { background: var(--surface-2); color: var(--text); }
.category-search-clear[hidden] { display: none !important; }
.category-result-count {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: .74rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Pemilih kategori berbentuk kartu. */
.category-picker {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .65rem;
    padding: .2rem;
    border-radius: 13px;
}
.category-picker.is-invalid {
    padding: .55rem;
    border: 1px solid var(--danger);
    background: color-mix(in srgb, var(--danger-soft) 45%, transparent);
}
.category-option {
    display: block;
    min-width: 0;
    margin: 0;
    cursor: pointer;
}
.category-option[hidden] { display: none !important; }
.category-option > input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}
.category-option-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: .7rem;
    min-height: 72px;
    height: 100%;
    padding: .7rem 2rem .7rem .7rem;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .025);
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .12s ease;
}
.category-option:hover .category-option-card {
    border-color: color-mix(in srgb, var(--primary) 38%, var(--border));
    background: var(--surface-2);
    transform: translateY(-1px);
}
.category-option > input:focus-visible + .category-option-card {
    outline: 3px solid var(--primary-soft);
    border-color: var(--primary);
}
.category-option > input:checked + .category-option-card {
    border-color: var(--primary);
    background: var(--primary-soft);
    box-shadow: 0 0 0 1px var(--primary), 0 8px 18px rgba(79, 70, 229, .08);
}
.category-option-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 11px;
    font-size: 1.15rem;
}
.category-option-copy {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: .12rem;
}
.category-option-copy strong {
    overflow: hidden;
    color: var(--text);
    font-size: .84rem;
    font-weight: 700;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.category-option-copy small {
    display: -webkit-box;
    overflow: hidden;
    color: var(--text-muted);
    font-size: .68rem;
    font-weight: 500;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.category-option-check {
    position: absolute;
    top: .55rem;
    right: .55rem;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    color: transparent;
    font-size: .7rem;
    transition: all .15s ease;
}
.category-option > input:checked + .category-option-card .category-option-check {
    border-color: var(--primary-600);
    background: var(--primary-600);
    color: #fff;
}
.category-option.is-inactive { opacity: .65; }
.category-picker-empty {
    padding: .85rem 1rem;
    border: 1px dashed var(--border);
    border-radius: 12px;
    background: var(--surface-2);
    color: var(--text-soft);
    font-size: .84rem;
}
.category-picker-empty i { margin-right: .35rem; color: var(--primary); }

/* Kartu kategori pada halaman daftar: nama tidak lagi terpotong karena
   empat kolom yang terlalu sempit. */
.cat-cards { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .65rem; }
.cat-card { padding: .72rem .8rem; }
.cat-card .cc-ic { width: 40px; height: 40px; }
.cat-card .cc-name { white-space: normal; line-height: 1.25; }
.cat-card .cc-actions { flex: 0 0 auto; }
.act-btn { width: 30px; height: 30px; font-size: .82rem; }

/* Metode pembayaran pada form berulang tetap ringkas, lalu tanggal mulai
   dan berakhir tetap berada berpasangan pada baris berikutnya. */
.recurring-payment-field { width: calc(50% - .5rem); }

/* Saat tanggal kalender dipilih, panel rincian tidak tertutup topbar. */
.day-panel { scroll-margin-top: 86px; }

/* Input file konsisten dengan komponen lain. */
input[type="file"].input { padding: .38rem .45rem; color: var(--text-soft); }
input[type="file"].input::file-selector-button {
    margin-right: .7rem;
    padding: .48rem .72rem;
    border: 0;
    border-radius: 8px;
    background: var(--primary-soft);
    color: var(--primary-700);
    font: inherit;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
}

/* Empty state anggaran dan halaman lain tidak terlalu tinggi. */
.card > .empty { min-height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.card > .empty .btn { min-height: 38px; }

@media (max-width: 900px) {
    .category-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .form-card { max-width: none; }
}

@media (max-width: 620px) {
    .field-label-row { align-items: flex-start; flex-direction: column; gap: .35rem; }
    .category-picker-toolbar { align-items: stretch; flex-direction: column; gap: .35rem; }
    .category-search { width: 100%; }
    .category-result-count { padding-left: .1rem; }
    .recurring-payment-field { width: 100%; }
    .category-picker { grid-template-columns: 1fr; gap: .55rem; }
    .category-option-card { min-height: 66px; padding-block: .6rem; }
    .category-option-copy strong { font-size: .86rem; }
    .category-option-copy small { font-size: .7rem; }
    .form-card { padding: .9rem; }
    .form-actions .btn { min-width: 0; }
    .cat-cards { grid-template-columns: 1fr; }
    .card > .empty { min-height: 210px; }
}

@media (max-width: 420px) {
    .btn { padding: .55rem .75rem; font-size: .84rem; }
    .page-head-actions { flex-direction: column; align-items: stretch; }
    .page-head-actions .month-nav,
    .page-head-actions .btn { width: 100%; }
    .category-option-icon { width: 38px; height: 38px; flex-basis: 38px; }
}


/* =====================================================================
   METODE PEMBAYARAN — menu, kartu pemilih, dan ringkasan penggunaan
   ===================================================================== */
.payment-picker-field { min-width: 0; }
.payment-picker { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.payment-option-card { min-height: 76px; }
.payment-option .category-option-copy small { -webkit-line-clamp: 2; }

.payment-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .8rem;
    margin-bottom: 1rem;
}
.payment-summary-card {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
    padding: .9rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}
.payment-summary-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 11px;
    background: var(--primary-soft);
    color: var(--primary-600);
    font-size: 1.05rem;
}
.payment-summary-card div { min-width: 0; }
.payment-summary-card small {
    display: block;
    overflow: hidden;
    color: var(--text-muted);
    font-size: .7rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.payment-summary-card strong {
    display: block;
    margin-top: .08rem;
    color: var(--text);
    font-size: 1.15rem;
    line-height: 1.25;
}

.payment-method-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .85rem;
}
.payment-method-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.payment-method-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
    box-shadow: var(--shadow);
}
.payment-method-head {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    min-width: 0;
}
.payment-method-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 12px;
    font-size: 1.15rem;
}
.payment-method-copy { min-width: 0; }
.payment-method-copy h2 {
    margin: .05rem 0 .18rem;
    color: var(--text);
    font-size: .95rem;
}
.payment-method-copy p {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: var(--text-muted);
    font-size: .72rem;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.payment-method-stats {
    display: grid;
    grid-template-columns: .8fr 1.35fr .9fr;
    gap: .45rem;
    margin-top: .9rem;
    padding: .7rem;
    border-radius: 11px;
    background: var(--surface-2);
}
.payment-method-stats div { min-width: 0; }
.payment-method-stats small {
    display: block;
    overflow: hidden;
    color: var(--text-muted);
    font-size: .62rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.payment-method-stats strong {
    display: block;
    overflow: hidden;
    margin-top: .16rem;
    color: var(--text);
    font-size: .78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.payment-method-link {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: .35rem;
    margin-top: .75rem;
    color: var(--primary-600);
    font-size: .75rem;
    font-weight: 700;
}
.payment-method-note {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin-top: 1rem;
    padding: .8rem .9rem;
    border: 1px dashed var(--border);
    border-radius: 12px;
    background: var(--surface-2);
    color: var(--text-soft);
    font-size: .76rem;
    line-height: 1.5;
}
.payment-method-note i { flex: 0 0 auto; margin-top: .08rem; color: var(--primary); }

@media (max-width: 1100px) {
    .payment-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .payment-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .payment-method-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .payment-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .payment-method-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    .payment-picker { grid-template-columns: 1fr; }
    .payment-summary-grid { grid-template-columns: 1fr; }
    .payment-method-stats { grid-template-columns: .8fr 1.3fr .9fr; }
}

/* =====================================================================
   CRUD METODE PEMBAYARAN
   ===================================================================== */
.payment-manage-grid { align-items: stretch; }
.payment-method-card { position: relative; }
.payment-method-card.is-inactive { opacity: .68; }
.payment-method-card.is-inactive:hover { opacity: .88; }
.payment-card-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .75rem;
}
.payment-status {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: .18rem .55rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
}
.payment-status.is-active { background: var(--income-soft); color: var(--income); }
.payment-status.is-off { background: var(--surface-2); color: var(--text-muted); }
.payment-method-actions { display: flex; align-items: center; gap: .3rem; }
.payment-method-actions form { display: inline-flex; margin: 0; }
.payment-method-actions .act-btn { width: 31px; height: 31px; }
.payment-preview { max-width: 520px; }
.preview-name { font-weight: 700; }
.preview-description { margin-top: .16rem; font-size: .8rem; }
.color-picker .color-opt,
.icon-picker .icon-opt {
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    cursor: pointer;
}

@media (max-width: 560px) {
    .payment-card-toolbar { align-items: flex-start; }
    .payment-method-actions .act-btn { width: 34px; height: 34px; }
}

/* =====================================================================
   ANGGARAN BERLOGO + FOTO TARGET TABUNGAN
   ===================================================================== */

/* Kategori anggaran memakai komponen kartu yang sama dengan transaksi. */
#budgetCategoryPicker { margin-top: .1rem; }
#budgetCategoryPicker .category-option-card { min-height: 74px; }

/* Editor foto target tabungan dibuat ringkas agar tidak mendominasi form. */
.goal-image-editor {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}
.goal-image-preview {
    position: relative;
    width: 180px;
    height: 135px;
    min-height: 0;
    overflow: hidden;
    border: 1px dashed var(--border);
    border-radius: 12px;
    background: var(--surface-2);
}
.goal-image-preview.has-image { border-style: solid; background: var(--surface); }
.goal-image-preview img {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    display: block;
    object-fit: cover;
}
/* CSS display:block tidak boleh membatalkan atribut hidden pada pratinjau kosong. */
.goal-image-preview img[hidden],
.goal-image-placeholder[hidden] {
    display: none !important;
}
.goal-image-placeholder {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: .2rem;
    padding: .65rem;
    color: var(--text-soft);
    text-align: center;
}
.goal-image-placeholder i {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    margin-bottom: .1rem;
    border-radius: 12px;
    background: var(--saving-soft);
    color: var(--saving);
    font-size: 1.2rem;
}
.goal-image-placeholder span { color: var(--text); font-weight: 700; }
.goal-image-placeholder small { color: var(--text-muted); font-size: .78rem; }
.goal-image-controls { min-width: 0; }
.remove-image-option {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin-top: .8rem;
    padding: .65rem .75rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--text-soft);
    font-size: .82rem;
    cursor: pointer;
}
.remove-image-option input { width: 16px; height: 16px; accent-color: var(--danger); }
.remove-image-option span { display: inline-flex; align-items: center; gap: .4rem; }
.remove-image-option:hover { border-color: color-mix(in srgb, var(--danger) 38%, var(--border)); color: var(--danger); }

/* Foto pada daftar target. */
.goal-card { overflow: hidden; }
.goal-card.has-image { padding: 0; }
.goal-card-body { padding: 1.3rem; }
.goal-card:not(.has-image) .goal-card-body { padding: 0; }
.goal-card-image {
    height: 170px;
    overflow: hidden;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}
.goal-card-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .25s ease;
}
.goal-card.has-image:hover .goal-card-image img { transform: scale(1.025); }
.goal-card.has-image .goal-head { margin-bottom: .85rem; }
.goal-detail-image {
    height: clamp(190px, 28vw, 330px);
    margin: -1.3rem -1.3rem 1.15rem;
    overflow: hidden;
    border-radius: var(--radius) var(--radius) 0 0;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}
.goal-detail-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

@media (max-width: 760px) {
    .goal-image-editor {
        grid-template-columns: 150px minmax(0, 1fr);
        gap: .8rem;
    }
    .goal-image-preview {
        width: 150px;
        height: 112px;
    }
}

@media (max-width: 560px) {
    .goal-image-editor { grid-template-columns: 1fr; }
    .goal-image-preview {
        width: 140px;
        height: 105px;
    }
}

@media (max-width: 480px) {
    .goal-card-image { height: 145px; }
    .goal-card-body { padding: 1rem; }
    .goal-detail-image { margin: -1rem -1rem 1rem; }
}

/* ---------- Validasi langsung password aktif ---------- */
.input.is-valid {
    border-color: var(--income);
}
.input.is-valid:focus {
    border-color: var(--income);
    box-shadow: 0 0 0 4px var(--income-soft);
}
.field-success {
    color: var(--income);
    font-size: .82rem;
    margin-top: .35rem;
}
.field-checking {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: var(--text-soft);
    font-size: .82rem;
    margin-top: .35rem;
}
.field-checking::before {
    content: '';
    width: .75rem;
    height: .75rem;
    flex: 0 0 .75rem;
    border: 2px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: monatrack-spin .65s linear infinite;
}
@keyframes monatrack-spin {
    to { transform: rotate(360deg); }
}
.btn:disabled,
.btn[disabled] {
    opacity: .58;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
    transform: none;
}

/* =====================================================================
   Dashboard — kontrol periode grafik
   ===================================================================== */
.dashboard-chart-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .9rem;
    margin-bottom: .9rem;
    padding: .65rem .75rem .65rem .9rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}
.dashboard-chart-toolbar-copy {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 0;
    color: var(--text-soft);
}
.dashboard-chart-toolbar-copy > i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 10px;
    background: var(--primary-soft);
    color: var(--primary-600);
}
.dashboard-chart-toolbar-copy span {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.dashboard-chart-toolbar-copy strong {
    color: var(--text);
    font-size: .82rem;
}
.dashboard-chart-toolbar-copy small {
    color: var(--text-muted);
    font-size: .7rem;
}
.chart-card-head {
    align-items: flex-start;
    gap: .85rem;
}
.chart-heading {
    min-width: 0;
    flex: 1 1 auto;
}
.chart-heading .sub {
    display: block;
    margin-top: .16rem;
    line-height: 1.35;
}
.chart-head-actions {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: .55rem;
    flex: 0 0 auto;
}
.period-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    max-width: 100%;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
    overflow-x: auto;
    scrollbar-width: none;
}
.period-switch::-webkit-scrollbar { display: none; }
.period-switch button {
    min-width: 0;
    min-height: 30px;
    padding: .34rem .58rem;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-soft);
    font: inherit;
    font-size: .71rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background .14s ease, color .14s ease, box-shadow .14s ease;
}
.period-switch button:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--surface) 72%, transparent);
}
.period-switch button.active,
.period-switch button[aria-pressed="true"] {
    background: var(--surface);
    color: var(--primary-600);
    box-shadow: 0 1px 4px rgba(15, 23, 42, .09);
}
.period-switch button:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}
.period-switch-global button {
    min-height: 32px;
    padding-inline: .7rem;
}
.chart-card.is-loading .period-switch { opacity: .82; }
.chart-retry {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-height: 34px;
    margin-top: .4rem;
    padding: .42rem .72rem;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: .76rem;
    font-weight: 700;
    cursor: pointer;
}
.chart-retry:hover {
    border-color: var(--primary-300);
    color: var(--primary-600);
}

@media (max-width: 1180px) {
    .chart-card-head { flex-wrap: wrap; }
    .chart-head-actions {
        width: 100%;
        align-items: flex-start;
    }
}

@media (max-width: 720px) {
    .dashboard-chart-toolbar {
        align-items: stretch;
        flex-direction: column;
    }
    .period-switch-global { width: 100%; }
    .period-switch-global button { flex: 1 0 auto; }
    .chart-card-head .period-switch {
        width: 100%;
    }
    .chart-card-head .period-switch button {
        flex: 1 0 auto;
    }
}

@media (max-width: 560px) {
    .dashboard-chart-toolbar {
        margin-inline: 0;
        padding: .7rem;
    }
    .dashboard-chart-toolbar-copy small { display: none; }
    .chart-card-head {
        gap: .65rem;
        min-height: 0;
    }
    .chart-head-actions { gap: .45rem; }
    .period-switch button {
        min-height: 29px;
        padding-inline: .5rem;
        font-size: .68rem;
    }
    .chart-legend-inline { gap: .65rem; }
}

/* Total ringkas pada grafik arus kas dan tren. */
.chart-totals {
    display: flex;
    flex-wrap: wrap;
    gap: .38rem;
    margin-top: .48rem;
}
.chart-total-pill {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    min-height: 27px;
    padding: .28rem .52rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--text-soft);
    font-size: .68rem;
    line-height: 1;
}
.chart-total-pill::before {
    content: '';
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 999px;
}
.chart-total-pill.is-income::before { background: var(--income); }
.chart-total-pill.is-expense::before { background: var(--expense); }
.chart-total-pill strong {
    color: var(--text);
    font-size: .72rem;
    white-space: nowrap;
}
@media (max-width: 575px) {
    .chart-totals { gap: .3rem; }
    .chart-total-pill {
        flex: 1 1 145px;
        justify-content: space-between;
    }
}

/* =====================================================================
   MonaTrack — Fitur lanjutan 2026
   ===================================================================== */
.global-search{position:relative;display:flex;align-items:center;width:min(330px,27vw);height:38px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);padding:0 .65rem;gap:.45rem}.global-search i{color:var(--text-soft)}.global-search input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:var(--text);font:inherit;font-size:.78rem}.global-search kbd{font:inherit;font-size:.62rem;color:var(--text-soft);border:1px solid var(--border);border-radius:5px;padding:.1rem .28rem;background:var(--surface)}
.quick-add-fab{position:fixed;right:24px;bottom:24px;z-index:80;display:flex;align-items:center;gap:.45rem;border:0;border-radius:999px;padding:.78rem 1rem;background:var(--primary);color:#fff;box-shadow:0 12px 30px rgba(79,70,229,.28);font:inherit;font-weight:700;cursor:pointer}.quick-add-fab:hover{transform:translateY(-1px)}
.modal-backdrop{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;background:rgba(15,23,42,.52);backdrop-filter:blur(3px)}.modal-backdrop[hidden]{display:none}.modal-card{width:min(680px,100%);max-height:calc(100vh - 40px);overflow:auto;border:1px solid var(--border);border-radius:18px;background:var(--surface);box-shadow:0 25px 70px rgba(15,23,42,.28);padding:1.15rem}.modal-head{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;margin-bottom:1rem}.modal-head h2{font-size:1.05rem;margin:0 0 .2rem}.modal-head p{font-size:.78rem;color:var(--text-soft);margin:0}.modal-actions{display:flex;justify-content:flex-end;gap:.55rem;margin-top:1rem}.modal-open{overflow:hidden}.quick-type{margin-bottom:1rem}.chart-detail-modal{width:min(760px,100%)}.chart-detail-body{min-height:170px}.chart-detail-list{display:grid;gap:.4rem}
.entity-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.85rem}.entity-card{padding:1rem}.entity-card.is-muted{opacity:.68}.entity-card-head{display:flex;align-items:center;gap:.7rem}.entity-card-head>div{min-width:0;flex:1}.entity-card-head h3{margin:0;font-size:.91rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.entity-card-head p{margin:.15rem 0 0;color:var(--text-soft);font-size:.72rem}.entity-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;flex:0 0 44px}.entity-icon.small{width:34px;height:34px;flex-basis:34px;border-radius:9px;background:var(--primary-50);color:var(--primary)}.entity-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem;margin-top:.9rem}.entity-metrics>div{padding:.55rem;border-radius:9px;background:var(--surface-2);min-width:0}.entity-metrics span{display:block;color:var(--text-soft);font-size:.62rem;margin-bottom:.15rem}.entity-metrics strong{font-size:.78rem;display:block;overflow:hidden;text-overflow:ellipsis}.entity-actions{display:flex;align-items:center;flex-wrap:wrap;gap:.35rem;margin-top:.8rem}.entity-actions form{display:inline-flex}.entity-meta{display:flex;flex-wrap:wrap;gap:.7rem;color:var(--text-soft);font-size:.7rem;margin-top:.65rem}.status-pill{font-size:.61rem;font-weight:700;border-radius:999px;padding:.22rem .45rem;background:var(--surface-2);color:var(--text-soft)}.status-pill.active{background:#dcfce7;color:#15803d}.status-pill.warning{background:#ffedd5;color:#c2410c}.status-pill.inactive{background:#e2e8f0;color:#64748b}.progress-line{height:6px;background:var(--surface-2);border-radius:999px;overflow:hidden;margin-top:.8rem}.progress-line span{display:block;height:100%;background:var(--primary);border-radius:inherit}.progress-line.large{height:9px}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}.detail-amount span{display:block;color:var(--text-soft);font-size:.75rem}.detail-amount strong{font-size:1.65rem}.note-box{margin-top:1rem;padding:.8rem;border-radius:10px;background:var(--surface-2);font-size:.8rem}.simple-list,.activity-list{display:grid;gap:.35rem}.simple-list-item,.activity-item{display:flex;align-items:center;gap:.7rem;padding:.65rem;border-bottom:1px solid var(--border)}.simple-list-item:last-child,.activity-item:last-child{border-bottom:0}.simple-list-item>div,.activity-item>div{min-width:0;flex:1}.simple-list-item strong,.activity-item strong{display:block;font-size:.8rem}.simple-list-item small,.activity-item small{display:block;color:var(--text-soft);font-size:.68rem;margin-top:.12rem}.activity-item code{font-size:.6rem;color:var(--primary);background:var(--primary-50);padding:.2rem .35rem;border-radius:5px}.activity-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--surface-2);color:var(--primary)}
.form-preview{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem;padding:.75rem;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);width:max-content;max-width:100%}.form-preview strong,.form-preview small{display:block}.form-preview small{color:var(--text-soft);font-size:.7rem}.compact-icons{max-height:none!important;overflow:visible!important}.empty-action{text-align:center;padding:2.6rem 1rem}.empty-action>i{font-size:2rem;color:var(--text-soft)}.empty-action h3{margin:.65rem 0 .3rem}.empty-action p{color:var(--text-soft);font-size:.8rem;margin:0 auto .85rem;max-width:480px}.compact-stats{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px}.filter-pills{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.8rem}.filter-pills a{padding:.42rem .7rem;border:1px solid var(--border);border-radius:999px;color:var(--text-soft);font-size:.72rem;font-weight:700}.filter-pills a.active{background:var(--primary);border-color:var(--primary);color:#fff}.pending-list{display:grid;gap:.65rem}.pending-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.8rem;padding:.85rem}.pending-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center}.pending-copy h3{margin:0;font-size:.87rem}.pending-copy p{margin:.18rem 0 0;color:var(--text-soft);font-size:.69rem}.pending-form{display:flex;align-items:center;gap:.4rem}.pending-form .input-prefix{width:160px}.badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;border-radius:999px;background:var(--primary);color:#fff;font-size:.58rem;padding:0 .3rem}
.split-transaction-field{border:1px dashed var(--border);border-radius:12px;padding:.75rem}.switch-card{display:flex;align-items:center;justify-content:space-between;gap:1rem}.switch-card strong,.switch-card span{display:block}.switch-card span{color:var(--text-soft);font-size:.7rem;margin-top:.15rem}.switch{position:relative;display:inline-flex}.switch input{position:absolute;opacity:0}.switch span{display:block;width:42px;height:23px;border-radius:999px;background:#cbd5e1;position:relative;transition:.2s}.switch span:after{content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}.switch input:checked+span{background:var(--primary)}.switch input:checked+span:after{transform:translateX(19px)}.split-editor{margin-top:.75rem}.split-head,.split-row{display:grid;grid-template-columns:1.2fr .9fr 1fr auto;gap:.45rem;align-items:center}.split-head{font-size:.62rem;color:var(--text-soft);padding:0 .2rem .3rem}.split-row{margin-bottom:.4rem}.split-footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.55rem}.split-total{text-align:right;font-size:.68rem;color:var(--text-soft)}.split-total strong,.split-total small{display:block}.split-total strong{color:var(--text);font-size:.82rem}.split-total small.is-match{color:var(--success)}.split-total small.is-different{color:var(--danger)}
.dashboard-section{margin-bottom:1rem}.section-title-row{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:.65rem}.section-title-row h2{font-size:.95rem;margin:0}.section-title-row p{font-size:.7rem;color:var(--text-soft);margin:.15rem 0 0}.section-title-row>a{font-size:.7rem;font-weight:700;color:var(--primary)}.insight-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.65rem}.insight-card{display:flex;gap:.65rem;align-items:flex-start;padding:.8rem;border:1px solid var(--border);border-radius:13px;background:var(--surface)}.insight-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--primary-50);color:var(--primary);flex:0 0 36px}.insight-card strong{display:block;font-size:.76rem}.insight-card p{font-size:.66rem;color:var(--text-soft);margin:.2rem 0 0}.insight-card.success .insight-icon{background:#dcfce7;color:#16a34a}.insight-card.warning .insight-icon{background:#ffedd5;color:#ea580c}.insight-card.info .insight-icon{background:#e0f2fe;color:#0284c7}.wallet-mini-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.65rem}.wallet-mini{display:flex;align-items:center;gap:.65rem;padding:.75rem}.wallet-mini small,.wallet-mini strong{display:block}.wallet-mini small{font-size:.66rem;color:var(--text-soft)}.wallet-mini strong{font-size:.8rem;margin-top:.12rem}.widget-setting-list{display:grid;grid-template-columns:1fr 1fr;gap:.45rem;margin:.8rem 0}.widget-setting{display:flex;align-items:center;gap:.6rem;padding:.6rem;border:1px solid var(--border);border-radius:10px;font-size:.73rem}.widget-setting span:nth-child(2){flex:1}.confirm-check{display:flex;align-items:flex-start;gap:.45rem;font-size:.74rem;margin:.7rem 0}.danger-section{border-color:#fecaca!important}.feature-card-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}.feature-card h2{font-size:.95rem}.feature-card p{font-size:.74rem;color:var(--text-soft);line-height:1.6}.feature-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;background:var(--primary-50);color:var(--primary);font-size:1.1rem}.search-page-form{display:flex;align-items:center;gap:.55rem;margin-bottom:1rem}.search-page-form>i{margin-right:-2rem;margin-left:.8rem;z-index:1;color:var(--text-soft)}.search-page-form input{padding-left:2.3rem}.search-group{margin-bottom:1rem}.search-group h2{font-size:.85rem}.search-group h2 span{font-size:.62rem;color:var(--text-soft)}.search-results{display:grid;grid-template-columns:1fr 1fr;gap:.45rem}.search-result{display:flex;align-items:center;gap:.65rem;padding:.65rem;border:1px solid var(--border);border-radius:11px;background:var(--surface);color:var(--text)}.search-result>div{min-width:0;flex:1}.search-result strong,.search-result small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-result strong{font-size:.76rem}.search-result small{font-size:.64rem;color:var(--text-soft);margin-top:.12rem}.pagination{display:flex;align-items:center;justify-content:center;gap:.7rem;margin-top:1rem;font-size:.72rem}.btn-warning{background:#f59e0b;color:#fff;border-color:#f59e0b}.btn-danger{background:#dc2626;color:#fff;border-color:#dc2626}.btn-danger-ghost{color:#dc2626;background:transparent;border-color:transparent}.desktop-only{display:inline}.privacy-hidden [data-money],.privacy-hidden .money-value{letter-spacing:.03em}

@media(max-width:1180px){.entity-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.insight-grid,.wallet-mini-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.global-search{width:240px}.pending-card{grid-template-columns:auto 1fr}.pending-form{grid-column:1/-1;padding-left:52px}}
@media(max-width:860px){.global-search{display:none}.quick-add-fab span{display:none}.quick-add-fab{width:52px;height:52px;justify-content:center;padding:0;right:16px;bottom:16px}.detail-grid,.feature-card-grid{grid-template-columns:1fr}.desktop-only{display:none}}
@media(max-width:680px){.entity-grid,.insight-grid,.wallet-mini-grid,.search-results,.widget-setting-list,.compact-stats{grid-template-columns:1fr}.entity-metrics{grid-template-columns:1fr 1fr}.split-head{display:none}.split-row{grid-template-columns:1fr 1fr auto}.split-row>input[name="split_notes[]"]{grid-column:1/-1}.pending-card{grid-template-columns:auto 1fr}.pending-form{padding-left:0;display:grid;grid-template-columns:1fr 1fr}.pending-form .input-prefix{width:auto;grid-column:1/-1}.modal-backdrop{padding:8px}.modal-card{max-height:calc(100vh - 16px);border-radius:14px}.quick-type{width:100%}.quick-type label{flex:1;text-align:center}.split-footer{align-items:flex-start;flex-direction:column}.split-total{text-align:left}.entity-actions .btn{flex:1}.search-page-form{align-items:stretch}.search-page-form .btn{padding-inline:.8rem}}


/* Dashboard modular dan dapat diurutkan */
.dashboard-widget-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);grid-auto-flow:dense;gap:1rem;align-items:start}
.dashboard-widget-layout>.dashboard-span-full{grid-column:1/-1}
.dashboard-widget-layout>.dashboard-span-two{grid-column:1/2}
.dashboard-widget-layout>.dashboard-span-one{grid-column:2/3}
.dashboard-widget-layout>.dashboard-widget,.dashboard-widget-layout>.dashboard-chart-toolbar{margin:0}
.dashboard-widget-layout .dashboard-section{margin-bottom:0}
.widget-setting{display:grid!important;grid-template-columns:auto minmax(0,1fr) 72px auto!important;align-items:center;gap:.75rem}
.widget-order-select{min-width:64px;padding:.45rem .55rem!important;height:38px}
.topbar-mobile-search{display:none}
.type-badge.split{background:rgba(99,102,241,.12);color:var(--primary-600)}
.table-subline{display:block;margin-top:.2rem;color:var(--text-soft);font-size:.72rem}
.split-detail-card{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border)}
.split-detail-list{display:grid;gap:.55rem;margin-top:.65rem}
.split-detail-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.25rem .75rem;align-items:center;padding:.65rem .75rem;border:1px solid var(--border);border-radius:12px;background:var(--surface-soft)}
.split-detail-item small{grid-column:1/-1;color:var(--text-soft)}
@media(max-width:980px){.dashboard-widget-layout{grid-template-columns:1fr}.dashboard-widget-layout>.dashboard-span-two,.dashboard-widget-layout>.dashboard-span-one{grid-column:1/-1}.global-search{display:none}.topbar-mobile-search{display:inline-flex}}
@media(max-width:640px){.widget-setting{grid-template-columns:auto minmax(0,1fr) auto!important}.widget-order-select{grid-column:2/3;width:72px}.dashboard-widget-layout{gap:.8rem}}

.privacy-hidden .chart-box canvas,.privacy-hidden .report-chart-box canvas{filter:blur(7px);opacity:.55;pointer-events:none}
.privacy-hidden .chart-box,.privacy-hidden .report-chart-box{position:relative}
.privacy-hidden .chart-box::after,.privacy-hidden .report-chart-box::after{content:"Nominal disembunyikan";position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);z-index:3;padding:.5rem .8rem;border-radius:999px;background:var(--surface);border:1px solid var(--border);font-size:.78rem;font-weight:700;box-shadow:var(--shadow-sm)}

/* =====================================================================
   Perbaikan form Dompet & Rekening
   ===================================================================== */
.wallet-preview {
    min-width: 250px;
    max-width: 100%;
}
.wallet-preview .cp-ic {
    color: #fff;
}
.wallet-icon-picker {
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
    max-height: none;
    overflow: visible;
}
.wallet-icon-picker .icon-opt {
    min-height: 46px;
}
@media (max-width: 575px) {
    .wallet-preview { min-width: 0; width: 100%; }
    .wallet-icon-picker { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* =====================================================================
   Wallet & Backup UI refresh — 5 Agustus 2026
   ===================================================================== */
.eyebrow {
    display: block;
    color: var(--primary-600);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .075em;
    text-transform: uppercase;
}

/* Dompet & Rekening */
.wallets-page-head { margin-bottom: 1rem; }
.wallet-overview {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(460px, .9fr);
    gap: 1.2rem;
    align-items: stretch;
    padding: 1.15rem;
    margin-bottom: 1.05rem;
    background:
        radial-gradient(circle at 0 0, rgba(99,102,241,.12), transparent 35%),
        var(--surface);
    overflow: hidden;
}
.wallet-overview-main {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
    padding: .25rem;
}
.wallet-overview-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    border-radius: 17px;
    background: linear-gradient(145deg, var(--primary), var(--primary-700));
    color: #fff;
    box-shadow: 0 12px 26px rgba(79,70,229,.22);
    font-size: 1.35rem;
}
.wallet-total {
    display: block;
    margin: .12rem 0 .15rem;
    color: var(--text);
    font-size: clamp(1.7rem, 3vw, 2.35rem);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -.045em;
    font-variant-numeric: tabular-nums;
}
.wallet-overview-main p { margin: 0; color: var(--text-soft); font-size: .76rem; }
.wallet-overview-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid var(--border);
    border-radius: 15px;
    background: color-mix(in srgb, var(--surface-2) 82%, transparent);
    overflow: hidden;
}
.wallet-overview-stats > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: .9rem;
    border-right: 1px solid var(--border);
}
.wallet-overview-stats > div:last-child { border-right: 0; }
.wallet-overview-stats span { color: var(--text-soft); font-size: .64rem; }
.wallet-overview-stats strong {
    margin: .14rem 0;
    font-size: .95rem;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}
.wallet-overview-stats small { color: var(--text-muted); font-size: .6rem; }
.wallets-section-title { align-items: center; }
.wallets-section-title > span {
    padding: .28rem .55rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-soft);
    font-size: .65rem;
    font-weight: 700;
}
.wallet-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .9rem;
}
.wallet-card-v2 {
    position: relative;
    min-width: 0;
    padding: 1rem;
    overflow: visible;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.wallet-card-v2:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--wallet-color) 35%, var(--border));
    box-shadow: 0 14px 32px rgba(15,23,42,.08);
}
.wallet-card-v2.is-inactive { opacity: .68; filter: saturate(.72); }
.wallet-accent {
    position: absolute;
    top: 0;
    left: 18px;
    right: 18px;
    height: 3px;
    border-radius: 0 0 999px 999px;
    background: var(--wallet-color);
}
.wallet-card-header,
.wallet-identity,
.wallet-card-tools,
.wallet-card-footer {
    display: flex;
    align-items: center;
}
.wallet-card-header { justify-content: space-between; gap: .7rem; }
.wallet-identity { gap: .68rem; min-width: 0; }
.wallet-card-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--wallet-color) 12%, var(--surface));
    color: var(--wallet-color);
    font-size: 1.05rem;
}
.wallet-identity > div { min-width: 0; }
.wallet-identity h3 {
    margin: 0;
    font-size: .86rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wallet-identity p { margin: .12rem 0 0; color: var(--text-soft); font-size: .65rem; }
.wallet-card-tools { gap: .35rem; }
.wallet-status {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .25rem .45rem;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-soft);
    font-size: .58rem;
    font-weight: 800;
}
.wallet-status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.wallet-status.active { background: #dcfce7; color: #15803d; }
.wallet-status.inactive { background: #e2e8f0; color: #64748b; }
.wallet-action-menu { position: relative; }
.wallet-action-menu > summary {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    list-style: none;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface);
    color: var(--text-soft);
    cursor: pointer;
}
.wallet-action-menu > summary::-webkit-details-marker { display: none; }
.wallet-action-menu[open] > summary { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.wallet-action-popover {
    position: absolute;
    z-index: 30;
    top: calc(100% + 7px);
    right: 0;
    width: 170px;
    padding: .35rem;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface);
    box-shadow: 0 16px 38px rgba(15,23,42,.16);
}
.wallet-action-popover form { display: block; }
.wallet-action-popover button {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    padding: .52rem .6rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: .7rem;
    text-align: left;
    cursor: pointer;
}
.wallet-action-popover button:hover { background: var(--surface-2); }
.wallet-action-popover button.danger { color: var(--danger); }
.wallet-balance-block { padding: 1rem 0 .85rem; }
.wallet-balance-block span { display: block; margin-bottom: .12rem; color: var(--text-soft); font-size: .65rem; }
.wallet-balance-block strong {
    display: block;
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    line-height: 1.2;
    letter-spacing: -.035em;
    font-variant-numeric: tabular-nums;
}
.wallet-card-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    margin-bottom: .8rem;
}
.wallet-card-details > div {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .05rem .4rem;
    min-width: 0;
    padding: .58rem;
    border-radius: 10px;
    background: var(--surface-2);
}
.wallet-card-details i { grid-row: 1 / span 2; align-self: center; color: var(--wallet-color); font-size: .78rem; }
.wallet-card-details span { color: var(--text-soft); font-size: .58rem; }
.wallet-card-details strong { font-size: .7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wallet-card-footer { gap: .45rem; padding-top: .78rem; border-top: 1px solid var(--border); }
.wallet-card-footer .btn { min-height: 36px; padding: .42rem .65rem; font-size: .7rem; }
.wallet-card-footer .btn:first-child { flex: 1; }
.btn-primary-soft {
    border-color: color-mix(in srgb, var(--wallet-color, var(--primary)) 16%, var(--border));
    background: color-mix(in srgb, var(--wallet-color, var(--primary)) 10%, var(--surface));
    color: var(--wallet-color, var(--primary-600));
}
.btn-primary-soft:hover { background: color-mix(in srgb, var(--wallet-color, var(--primary)) 16%, var(--surface)); text-decoration: none; }
.wallet-empty-state { padding-block: 3rem; }
.empty-wallet-icon { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto; border-radius: 16px; background: var(--primary-soft); color: var(--primary); font-size: 1.35rem; }

/* Backup & Pemulihan */
.backup-page-head { align-items: center; }
.backup-format-badge {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    padding: .42rem .68rem;
    border: 1px solid #bbf7d0;
    border-radius: 999px;
    background: #f0fdf4;
    color: #15803d;
    font-size: .68rem;
    font-weight: 800;
}
.backup-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
    gap: 1rem;
    padding: 1rem;
    margin-bottom: 1rem;
    background:
        radial-gradient(circle at 0 0, rgba(99,102,241,.12), transparent 34%),
        var(--surface);
}
.backup-hero-main { display: flex; align-items: flex-start; gap: .9rem; padding: .35rem; }
.backup-hero-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 15px;
    background: linear-gradient(145deg, var(--primary), var(--primary-700));
    color: #fff;
    box-shadow: 0 10px 22px rgba(79,70,229,.2);
    font-size: 1.25rem;
}
.backup-hero h2 { margin: .18rem 0 .32rem; font-size: 1.08rem; }
.backup-hero-main p { max-width: 650px; margin: 0; color: var(--text-soft); font-size: .73rem; line-height: 1.65; }
.backup-hero-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin: .8rem 0 .55rem; }
.backup-hero-actions .btn { min-height: 38px; padding: .45rem .7rem; font-size: .74rem; }
.backup-hero-main small { display: flex; align-items: center; gap: .35rem; color: var(--text-soft); font-size: .63rem; }
.backup-hero-main small i { color: var(--income); }
.backup-included {
    padding: .85rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface-2);
}
.backup-included h3 { margin: 0 0 .65rem; font-size: .76rem; }
.backup-check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .42rem; }
.backup-check-grid > div { display: flex; align-items: center; gap: .45rem; min-width: 0; color: var(--text-soft); font-size: .64rem; }
.backup-check-grid i { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 26px; border-radius: 8px; background: var(--surface); color: var(--primary); }
.backup-workspace { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .5fr); gap: 1rem; margin-bottom: 1rem; }
.backup-restore-card,
.backup-guide-card { padding: 1rem; }
.backup-section-head { display: flex; align-items: flex-start; gap: .7rem; margin-bottom: .85rem; }
.backup-section-head.compact { margin-bottom: .6rem; }
.backup-section-head h2 { margin: 0; font-size: .95rem; }
.backup-section-head p { margin: .16rem 0 0; color: var(--text-soft); font-size: .68rem; }
.backup-section-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px; font-size: .95rem; }
.backup-section-icon.restore { background: var(--warning-soft); color: #b45309; }
.backup-section-icon.info { background: #e0f2fe; color: #0284c7; }
.backup-step-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .9rem;
    padding: .6rem .7rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-2);
}
.backup-step-row > div { display: flex; align-items: center; gap: .4rem; }
.backup-step-row > div > span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-size: .6rem; font-weight: 800; }
.backup-step-row p { margin: 0; color: var(--text-soft); font-size: .62rem; white-space: nowrap; }
.backup-step-row > i { color: var(--text-muted); font-size: .62rem; }
.backup-restore-form .form-grid { margin-bottom: .2rem; }
.backup-file-input { position: relative; }
.backup-file-input > i { position: absolute; left: .78rem; top: 50%; z-index: 1; transform: translateY(-50%); color: var(--primary); pointer-events: none; }
.backup-file-input .input { padding-left: 2.3rem; }
.input-icon-wrap { position: relative; }
.input-icon-wrap > i { position: absolute; left: .78rem; top: 50%; z-index: 1; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.input-icon-wrap .input { padding-left: 2.3rem; }
.restore-warning {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: .8rem 0;
    padding: .65rem .75rem;
    border: 1px solid #fde68a;
    border-radius: 11px;
    background: #fffbeb;
    color: #92400e;
}
.restore-warning > i { font-size: .95rem; }
.restore-warning strong,
.restore-warning span { display: block; }
.restore-warning strong { font-size: .68rem; }
.restore-warning span { margin-top: .08rem; font-size: .61rem; }
.backup-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .75rem; border-top: 1px solid var(--border); }
.backup-form-footer .confirm-check { margin: 0; max-width: 560px; }
.backup-form-footer .btn { min-height: 38px; padding: .44rem .72rem; font-size: .72rem; }
.backup-guide-list { display: grid; gap: .25rem; padding: 0; margin: 0; list-style: none; }
.backup-guide-list li { display: flex; gap: .55rem; padding: .62rem 0; border-bottom: 1px solid var(--border); }
.backup-guide-list li:last-child { border-bottom: 0; }
.backup-guide-list li > span { display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 24px; border-radius: 8px; background: var(--primary-soft); color: var(--primary); font-size: .6rem; font-weight: 800; }
.backup-guide-list strong { display: block; font-size: .68rem; }
.backup-guide-list p { margin: .12rem 0 0; color: var(--text-soft); font-size: .61rem; line-height: 1.5; }
.backup-readable-note { display: flex; align-items: center; gap: .5rem; margin-top: .7rem; padding: .6rem; border-radius: 10px; background: #f0fdf4; color: #15803d; font-size: .62rem; font-weight: 700; }
.backup-readable-note i { font-size: .9rem; }
.danger-zone-collapsible { padding: 0; overflow: hidden; border-color: #fecaca; }
.danger-zone-collapsible > summary { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .8rem; padding: .8rem 1rem; list-style: none; cursor: pointer; }
.danger-zone-collapsible > summary::-webkit-details-marker { display: none; }
.danger-zone-collapsible > summary > span:first-child { display: flex; align-items: center; gap: .5rem; color: #b91c1c; }
.danger-zone-collapsible > summary strong { font-size: .76rem; }
.danger-zone-collapsible .summary-copy { color: var(--text-soft); font-size: .64rem; }
.danger-zone-collapsible > summary > i { color: var(--text-muted); transition: transform .15s ease; }
.danger-zone-collapsible[open] > summary > i { transform: rotate(180deg); }
.danger-zone-body { display: grid; grid-template-columns: 1fr minmax(330px, .75fr); gap: 1rem; padding: 1rem; border-top: 1px solid #fecaca; background: color-mix(in srgb, var(--danger-soft) 28%, var(--surface)); }
.danger-zone-body h2 { margin: 0 0 .25rem; font-size: .9rem; }
.danger-zone-body p { margin: 0; color: var(--text-soft); font-size: .68rem; line-height: 1.6; }
.danger-zone-form .field { margin-bottom: .45rem; }
.danger-zone-form .confirm-check { margin: .4rem 0 .6rem; }
.danger-zone-form .btn { min-height: 38px; padding: .42rem .7rem; font-size: .7rem; }

:root[data-theme="dark"] .wallet-status.active { background: rgba(22,163,74,.16); color: #4ade80; }
:root[data-theme="dark"] .wallet-status.inactive { background: rgba(100,116,139,.18); color: #94a3b8; }
:root[data-theme="dark"] .backup-format-badge,
:root[data-theme="dark"] .backup-readable-note { background: rgba(22,163,74,.14); border-color: rgba(74,222,128,.22); color: #4ade80; }
:root[data-theme="dark"] .restore-warning { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.28); color: #fbbf24; }
:root[data-theme="dark"] .danger-zone-body { background: rgba(239,68,68,.06); }

@media (max-width: 1180px) {
    .wallet-overview { grid-template-columns: 1fr; }
    .wallet-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .backup-hero { grid-template-columns: 1fr; }
    .backup-workspace { grid-template-columns: minmax(0, 1fr) 300px; }
}
@media (max-width: 900px) {
    .backup-workspace { grid-template-columns: 1fr; }
    .backup-guide-card { order: -1; }
    .backup-guide-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .backup-guide-list li { border: 1px solid var(--border); border-radius: 11px; padding: .65rem; }
}
@media (max-width: 680px) {
    .wallets-page-head .btn,
    .backup-page-head .backup-format-badge { width: 100%; }
    .backup-page-head .backup-format-badge { justify-content: center; }
    .wallet-overview { padding: .85rem; }
    .wallet-overview-main { align-items: flex-start; }
    .wallet-overview-icon { width: 48px; height: 48px; flex-basis: 48px; border-radius: 14px; }
    .wallet-overview-stats { grid-template-columns: 1fr; }
    .wallet-overview-stats > div { border-right: 0; border-bottom: 1px solid var(--border); }
    .wallet-overview-stats > div:last-child { border-bottom: 0; }
    .wallet-card-grid { grid-template-columns: 1fr; }
    .wallet-card-v2:hover { transform: none; }
    .wallet-card-footer .btn { flex: 1; }
    .backup-hero-main { flex-direction: column; }
    .backup-hero-actions { display: grid; grid-template-columns: 1fr; }
    .backup-check-grid { grid-template-columns: 1fr; }
    .backup-step-row { justify-content: space-between; overflow-x: auto; }
    .backup-step-row p { display: none; }
    .backup-form-footer { align-items: stretch; flex-direction: column; }
    .backup-form-footer .btn { width: 100%; }
    .backup-guide-list { grid-template-columns: 1fr; }
    .danger-zone-collapsible > summary { grid-template-columns: 1fr auto; }
    .danger-zone-collapsible .summary-copy { display: none; }
    .danger-zone-body { grid-template-columns: 1fr; }
}

/* === Privasi nominal global === */
.privacy-money-fragment{display:inline;white-space:nowrap}
#privacyToggle[aria-pressed="true"]{color:var(--primary);background:var(--primary-50);border-color:color-mix(in srgb,var(--primary) 28%,var(--border))}
.privacy-hidden .chart-box canvas,
.privacy-hidden .report-chart-box canvas,
.privacy-hidden .dashboard-chart canvas,
.privacy-hidden .chart-wrap canvas,
.privacy-hidden canvas[data-money-chart]{filter:blur(7px);opacity:.52;pointer-events:none;user-select:none}
.privacy-hidden .chart-box,
.privacy-hidden .report-chart-box,
.privacy-hidden .dashboard-chart,
.privacy-hidden .chart-wrap{position:relative}
.privacy-hidden .chart-box::after,
.privacy-hidden .report-chart-box::after,
.privacy-hidden .dashboard-chart::after,
.privacy-hidden .chart-wrap::after{content:"Nominal disembunyikan";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;padding:.45rem .75rem;border-radius:999px;background:var(--surface);border:1px solid var(--border);color:var(--text);font-size:.72rem;font-weight:700;box-shadow:var(--shadow-sm);pointer-events:none;white-space:nowrap}

/* === Privasi per kartu ringkasan dashboard === */
.stat-privacy-toggle {
    position: absolute;
    top: .85rem;
    right: .85rem;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    color: var(--text-soft);
    font: inherit;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .05);
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.stat-privacy-toggle:hover {
    color: var(--primary-600);
    border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
    background: var(--primary-soft);
    transform: translateY(-1px);
}
.stat-privacy-toggle[aria-pressed="true"] {
    color: var(--primary-600);
    border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
    background: var(--primary-soft);
}
.stat-privacy-toggle:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.stat-privacy-toggle:disabled {
    opacity: .48;
    cursor: not-allowed;
    transform: none;
}
.stat-card.section-private [data-section-private-value] {
    position: relative;
    display: inline-block;
    min-width: 7.2ch;
    color: transparent !important;
    user-select: none;
}
.stat-card.section-private [data-section-private-value]::after {
    content: "Rp •••••••";
    position: absolute;
    inset: 0 auto auto 0;
    color: var(--text);
    white-space: nowrap;
    letter-spacing: .01em;
}

/* Kartu kategori grafik sempit: judul dan kontrol periode tidak saling menumpuk. */
.dashboard-span-one[data-chart-card="category"] .chart-card-head {
    align-items: stretch;
    flex-direction: column;
}
.dashboard-span-one[data-chart-card="category"] .period-switch {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    overflow: visible;
}
.dashboard-span-one[data-chart-card="category"] .period-switch button {
    width: 100%;
    padding-inline: .28rem;
    font-size: .66rem;
}

@media (max-width: 560px) {
    .stat-privacy-toggle {
        top: .7rem;
        right: .7rem;
        width: 30px;
        height: 30px;
    }
    .dashboard-span-one[data-chart-card="category"] .period-switch button {
        min-height: 30px;
        padding-inline: .18rem;
        font-size: .63rem;
    }
}


/* Alur form transaksi: kategori -> dompet/rekening -> metode pembayaran. */
.wallet-picker-field,
.payment-picker-field {
    scroll-margin-top: 88px;
    border-radius: 14px;
}

.flow-step-highlight {
    animation: monatrackFlowStep 1.05s ease;
}

@keyframes monatrackFlowStep {
    0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
    28% { box-shadow: 0 0 0 4px rgba(99, 102, 241, .18); }
    100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
}

@media (max-width: 768px) {
    .wallet-picker-field,
    .payment-picker-field { scroll-margin-top: 74px; }
}

/* =====================================================================
   DIALOG & VALIDASI KUSTOM + PERBAIKAN MOBILE FORM TRANSAKSI
   ===================================================================== */

/* Menu cepat khusus mobile. */
.mobile-tools-dropdown { display: none; }
.mobile-tools-menu button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .68rem .72rem;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: .88rem;
    text-align: left;
    cursor: pointer;
}
.mobile-tools-menu button:hover { background: var(--surface-2); }
.mobile-tools-menu a > span:not(.mobile-menu-badge),
.mobile-tools-menu button > span { flex: 1; }
.mobile-menu-badge {
    display: inline-grid;
    min-width: 20px;
    height: 20px;
    padding: 0 .35rem;
    place-items: center;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: .62rem;
    font-weight: 800;
}

/* Dialog konfirmasi MonaTrack. */
.confirm-backdrop { z-index: 420; }
.confirm-modal-card {
    position: relative;
    width: min(440px, 100%);
    overflow: visible;
    padding: 1.4rem;
    text-align: center;
}
.confirm-modal-close {
    position: absolute;
    top: .7rem;
    right: .7rem;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}
.confirm-modal-close:hover { background: var(--surface-2); color: var(--text); }
.confirm-modal-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin: .15rem auto .9rem;
    border-radius: 18px;
    background: var(--primary-soft);
    color: var(--primary-600);
    font-size: 1.55rem;
}
.confirm-modal-copy h2 { margin: 0 0 .4rem; font-size: 1.12rem; }
.confirm-modal-copy p {
    max-width: 350px;
    margin: 0 auto;
    color: var(--text-soft);
    font-size: .86rem;
    line-height: 1.65;
}
.confirm-modal-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .65rem;
    margin-top: 1.2rem;
}
.confirm-modal-actions .btn { width: 100%; justify-content: center; }
.confirm-backdrop[data-tone="danger"] .confirm-modal-icon { background: var(--danger-soft); color: var(--danger); }
.confirm-backdrop[data-tone="danger"] .confirm-accept { background: var(--danger); border-color: var(--danger); box-shadow: 0 8px 18px rgba(220, 38, 38, .18); }
.confirm-backdrop[data-tone="warning"] .confirm-modal-icon { background: #fff7ed; color: #f97316; }
.confirm-backdrop[data-tone="warning"] .confirm-accept { background: #f97316; border-color: #f97316; box-shadow: 0 8px 18px rgba(249, 115, 22, .18); }

/* Toast dinamis dan pesan validasi. */
.ui-toast { animation: monatrackToastIn .22s ease both; align-items: flex-start; }
.ui-toast.is-leaving { animation: monatrackToastOut .2s ease both; }
.ui-toast-copy { flex: 1; min-width: 0; }
.ui-toast-copy strong,
.ui-toast-copy span { display: block; }
.ui-toast-copy strong { margin-bottom: .12rem; color: var(--text); font-size: .82rem; }
.ui-toast-copy span { color: var(--text-soft); font-size: .76rem; line-height: 1.45; }
.ui-toast-close {
    width: 28px;
    height: 28px;
    display: grid;
    flex: 0 0 28px;
    place-items: center;
    margin: -.25rem -.35rem 0 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}
.ui-toast-close:hover { background: var(--surface-2); color: var(--text); }
@keyframes monatrackToastIn { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
@keyframes monatrackToastOut { to { opacity: 0; transform: translateY(-8px) scale(.98); } }

.client-field-error {
    display: flex;
    align-items: flex-start;
    gap: .35rem;
    margin-top: .42rem;
    font-weight: 600;
    line-height: 1.45;
}
.client-field-error i { flex: 0 0 auto; margin-top: .08rem; }
.input.client-invalid,
select.client-invalid,
textarea.client-invalid,
.input-prefix .input.client-invalid {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 13%, transparent) !important;
}
.category-picker.client-invalid,
.segmented.client-invalid {
    border-color: var(--danger) !important;
    background: color-mix(in srgb, var(--danger-soft) 45%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 10%, transparent);
}

/* Form transaksi dibuat lebih terarah. */
.transaction-page-head { max-width: 960px; }
.transaction-form-card { overflow: visible; }
.transaction-form-card .field { scroll-margin-top: 82px; }
body:has(.transaction-form-card) .quick-add-fab { display: none; }

@media (max-width: 640px) {
    .topbar {
        height: 58px;
        gap: .42rem;
        padding-inline: .62rem;
    }
    .topbar .menu-toggle {
        width: 38px;
        height: 38px;
        display: grid;
        flex: 0 0 38px;
        place-items: center;
        padding: 0;
        border-radius: 10px;
    }
    .topbar .page-title {
        flex: 1;
        max-width: none;
        overflow: hidden;
        font-size: .91rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .topbar .spacer,
    .topbar-mobile-search,
    .topbar-action,
    .topbar-profile { display: none !important; }
    .mobile-tools-dropdown { display: block; flex: 0 0 auto; }
    .mobile-tools-dropdown > .icon-btn { width: 38px; height: 38px; }
    .mobile-tools-menu {
        position: fixed;
        top: 64px;
        right: .65rem;
        left: auto;
        width: min(320px, calc(100vw - 1.3rem));
        max-height: calc(100dvh - 78px);
        overflow-y: auto;
        padding: .45rem;
    }

    .page { padding: .78rem .62rem 1.8rem; }
    .transaction-page-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 40px;
        align-items: center;
        gap: .7rem;
        margin-bottom: .75rem;
    }
    .transaction-page-head > div { min-width: 0; }
    .transaction-page-head h1 { margin: 0; font-size: 1.15rem; }
    .transaction-page-head .desc {
        overflow: hidden;
        margin-top: .18rem;
        font-size: .77rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .transaction-page-head > .btn {
        width: 40px !important;
        min-width: 40px;
        height: 40px;
        min-height: 40px;
        padding: 0;
        font-size: 0;
    }
    .transaction-page-head > .btn i { margin: 0; font-size: 1rem; }

    .transaction-form-card {
        padding: .78rem;
        border-radius: 15px;
    }
    .transaction-form-card .field { margin-bottom: .9rem; }
    .transaction-form-card .field > label { margin-bottom: .42rem; font-size: .82rem; }
    .transaction-form-card .segmented {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        gap: .16rem;
        padding: .22rem;
    }
    .transaction-form-card .segmented label {
        min-width: 0;
        justify-content: center;
        padding: .65rem .28rem;
        font-size: .8rem;
        text-align: center;
    }
    .transaction-form-card .form-grid { gap: 0; }
    .transaction-form-card .input,
    .transaction-form-card select.input { min-height: 46px; font-size: .9rem; }
    .transaction-form-card textarea.input { min-height: 88px; }
    .transaction-form-card .field-hint,
    .transaction-form-card .field-subtitle { font-size: .72rem; line-height: 1.45; }
    .transaction-form-card .field-label-row {
        flex-direction: row;
        align-items: flex-start;
        gap: .5rem;
    }
    .transaction-form-card .field-label-row > div { min-width: 0; }
    .transaction-form-card .field-link {
        padding-top: .08rem;
        font-size: .72rem;
        white-space: nowrap;
    }
    .transaction-form-card .category-picker-toolbar { gap: .45rem; }
    .transaction-form-card .category-result-count { font-size: .68rem; }
    .transaction-form-card .category-option-card {
        min-height: 62px;
        padding: .58rem 1.85rem .58rem .58rem;
        border-radius: 12px;
    }
    .transaction-form-card .category-option-icon {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
        font-size: 1rem;
    }
    .transaction-form-card .category-option-copy strong { font-size: .8rem; }
    .transaction-form-card .category-option-copy small { font-size: .65rem; }
    .transaction-form-card .form-actions {
        position: sticky;
        z-index: 8;
        bottom: 0;
        display: grid;
        grid-template-columns: 1fr;
        gap: .48rem;
        margin: 1rem -.78rem -.78rem;
        padding: .72rem .78rem calc(.72rem + env(safe-area-inset-bottom));
        border-top: 1px solid var(--border);
        background: color-mix(in srgb, var(--surface) 94%, transparent);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
    .transaction-form-card .form-actions .btn { width: 100%; min-width: 0; }
    .transaction-form-card .form-actions .btn-primary { order: -1; }

    .confirm-backdrop { padding: .75rem; align-items: end; }
    .confirm-modal-card {
        width: 100%;
        max-height: none;
        padding: 1.25rem 1rem calc(1rem + env(safe-area-inset-bottom));
        border-radius: 20px 20px 14px 14px;
    }
    .confirm-modal-actions { grid-template-columns: 1fr; }
    .confirm-modal-actions .confirm-accept { order: -1; }
    .confirm-modal-icon { width: 52px; height: 52px; border-radius: 16px; font-size: 1.35rem; }
    .confirm-modal-copy h2 { font-size: 1.05rem; }

    .toast-wrap { top: .65rem; left: .65rem; right: .65rem; }
    .toast { padding: .72rem .78rem; border-radius: 12px; }
}

@media (max-width: 380px) {
    .transaction-form-card { padding: .65rem; }
    .transaction-form-card .segmented label { font-size: .73rem; }
    .transaction-form-card .field-link span { display: none; }
    .transaction-page-head h1 { font-size: 1.08rem; }
}


/* Search page UI refresh */
.page-search .quick-add-fab{display:none}
.search-page-shell{max-width:980px;margin:0 auto;padding-bottom:2rem}
.search-hero{padding:1rem;border:1px solid var(--border);border-radius:18px;background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--surface) 88%,var(--primary) 12%))}
.search-page-form{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.75rem;margin-bottom:.8rem;padding:.2rem}
.search-page-form>i{position:absolute;left:1rem;top:50%;transform:translateY(-50%);margin:0;z-index:2;color:var(--text-soft);pointer-events:none}
.search-page-form .input{min-width:0;width:100%;padding-left:2.5rem;min-height:50px;border-radius:14px}
.search-page-form .btn{min-height:50px;padding-inline:1.15rem;border-radius:14px;white-space:nowrap;box-shadow:0 10px 22px rgba(79,70,229,.18)}
.search-hints{display:flex;flex-wrap:wrap;gap:.5rem}
.search-hints span{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .75rem;border:1px solid var(--border);border-radius:999px;background:var(--surface);font-size:.72rem;color:var(--text-soft)}
.search-feedback{margin-top:1rem}
.search-placeholder,.search-empty{display:flex;align-items:flex-start;gap:.9rem;padding:1rem 1.1rem;margin-top:1rem;border-radius:18px}
.search-placeholder h3,.search-empty h3{margin:0 0 .22rem;font-size:.95rem}
.search-placeholder p,.search-empty p{margin:0;color:var(--text-soft);font-size:.76rem;line-height:1.6}
.search-placeholder-icon,.search-empty>i{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--primary-50);color:var(--primary);font-size:1.15rem;flex:0 0 44px}
.search-group{margin-top:1rem;padding:1rem;border:1px solid var(--border);border-radius:18px;background:var(--surface)}
.search-group h2{display:flex;justify-content:space-between;align-items:center;gap:.75rem;margin:0 0 .8rem;font-size:.88rem}
.search-group h2 span:first-child{font-size:.88rem;font-weight:800;color:var(--text)}
.search-count{display:inline-flex;align-items:center;padding:.28rem .55rem;border-radius:999px;background:var(--primary-50);color:var(--primary);font-size:.66rem;font-weight:700}
.search-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}
.search-result{display:flex;align-items:center;gap:.7rem;padding:.8rem .85rem;border:1px solid var(--border);border-radius:14px;background:color-mix(in srgb,var(--surface) 86%,var(--primary) 14%);color:var(--text);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.search-result:hover{transform:translateY(-1px);border-color:var(--primary);box-shadow:0 10px 26px rgba(15,23,42,.08)}
.search-result>i.bi-chevron-right{color:var(--text-soft)}
.search-result strong,.search-result small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-result strong{font-size:.78rem;margin-bottom:.1rem}
.search-result small{font-size:.66rem;color:var(--text-soft)}
@media(max-width:860px){.search-results{grid-template-columns:1fr}}
@media(max-width:680px){
  .page-search .page{padding-bottom:1.5rem}
  .search-page-shell{padding-bottom:1rem}
  .search-hero{padding:.85rem;border-radius:16px}
  .search-page-form{grid-template-columns:1fr;gap:.65rem;padding:0}
  .search-page-form>i{top:1.45rem;left:.95rem}
  .search-page-form .input{min-height:48px;border-radius:14px}
  .search-page-form .btn{width:100%;min-height:48px;padding-inline:1rem}
  .search-hints{display:grid;grid-template-columns:1fr 1fr;gap:.45rem}
  .search-hints span{justify-content:flex-start;padding:.55rem .7rem;border-radius:12px;font-size:.68rem}
  .search-group{padding:.85rem;border-radius:16px}
  .search-group h2{align-items:flex-start;flex-direction:column;margin-bottom:.7rem}
  .search-count{font-size:.64rem}
  .search-result{padding:.78rem;border-radius:13px}
  .search-placeholder,.search-empty{padding:.9rem;border-radius:16px}
  .search-placeholder-icon,.search-empty>i{width:40px;height:40px;border-radius:12px;font-size:1.05rem}
}

/* =====================================================================
   Search page UI refresh (mobile + desktop)
   ===================================================================== */
body.page-search .quick-add-fab{display:none!important}
.search-page-shell{display:grid;gap:1rem}
.search-hero-card{padding:1.1rem 1.1rem 1rem;border-radius:20px;overflow:hidden;background:linear-gradient(135deg,var(--surface) 0%,var(--surface) 58%,var(--primary-50) 100%)}
.search-hero-copy h1{margin:.2rem 0 .35rem;font-size:1.55rem;line-height:1.15}
.search-hero-copy p{margin:0;color:var(--text-soft);max-width:720px;line-height:1.65}
.search-page-eyebrow{display:inline-flex;align-items:center;gap:.4rem;padding:.28rem .65rem;border-radius:999px;background:var(--primary-50);color:var(--primary);font-size:.73rem;font-weight:700;margin-bottom:.7rem}
.search-page-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.95rem}
.search-page-tags span{display:inline-flex;align-items:center;justify-content:center;padding:.45rem .75rem;border-radius:999px;background:var(--surface);border:1px solid var(--border);font-size:.72rem;font-weight:600;color:var(--text-soft)}
.search-page-form-enhanced{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.75rem;align-items:stretch;margin-top:1rem;margin-bottom:.75rem}
.search-page-form-enhanced>i{display:none}
.search-page-input{position:relative;display:flex;align-items:center;min-width:0;border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:var(--shadow-sm)}
.search-page-input:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(99,102,241,.14)}
.search-page-input>i{position:absolute;left:1rem;color:var(--text-soft);font-size:1rem;pointer-events:none}
.search-page-input .input{padding:1rem 1rem 1rem 2.8rem;border:none!important;background:transparent!important;box-shadow:none!important;min-height:58px}
.search-submit-btn{min-width:120px;border-radius:16px;padding:0 1rem;justify-content:center;box-shadow:0 14px 28px rgba(79,70,229,.22)}
.search-submit-btn i{font-size:.95rem}
.search-page-help{display:flex;align-items:flex-start;gap:.45rem;margin:0;color:var(--text-soft);font-size:.74rem;line-height:1.6}
.search-page-help i{color:#f59e0b;margin-top:.1rem}
.search-empty-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}
.search-empty-card{display:flex;gap:.8rem;align-items:flex-start;padding:1rem}
.search-empty-card .entity-icon.small{flex:0 0 40px;width:40px;height:40px;border-radius:12px}
.search-empty-card h3{margin:.05rem 0 .25rem;font-size:.92rem}
.search-empty-card p{margin:0;color:var(--text-soft);font-size:.76rem;line-height:1.65}
.search-group{display:grid;gap:.7rem}
.search-group-head{display:flex;justify-content:space-between;align-items:center;gap:.8rem}
.search-group-head h2{margin:0;font-size:.9rem}
.search-group-head span{display:inline-flex;align-items:center;padding:.32rem .62rem;border-radius:999px;background:var(--surface-2);color:var(--text-soft);font-size:.69rem;font-weight:700}
.search-results{gap:.7rem}
.search-result{padding:.85rem .9rem;border-radius:15px;transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;box-shadow:var(--shadow-sm)}
.search-result:hover{transform:translateY(-1px);border-color:rgba(99,102,241,.35);box-shadow:0 14px 26px rgba(15,23,42,.08)}
.search-result .bi-chevron-right{color:var(--text-soft)}
.search-result strong{font-size:.8rem}
.search-result small{font-size:.67rem;margin-top:.18rem}
.search-empty-state{padding:2.2rem 1rem;border-radius:20px}

@media(max-width:860px){
  .search-page-shell{gap:.85rem}
  .search-empty-grid{grid-template-columns:1fr}
}

@media(max-width:680px){
  body.page-search .page{padding-inline:.8rem}
  .search-hero-card{padding:1rem .9rem;border-radius:18px}
  .search-hero-copy h1{font-size:1.26rem}
  .search-page-form-enhanced{grid-template-columns:1fr;gap:.65rem}
  .search-page-input .input{min-height:54px;padding-top:.9rem;padding-bottom:.9rem}
  .search-submit-btn{width:100%;min-height:50px}
  .search-page-help{font-size:.72rem}
  .search-page-tags{gap:.4rem}
  .search-page-tags span{font-size:.68rem;padding:.4rem .65rem}
  .search-group-head{align-items:flex-start;flex-direction:column}
  .search-group-head span{padding:.28rem .56rem}
  .search-results{grid-template-columns:1fr}
}

/* =====================================================================
   MonaTrack — Pencarian global yang lebih rapi
   ===================================================================== */
.page-search .page {
    min-height: calc(100vh - var(--topbar-h, 68px));
}
.page-search .quick-add-fab {
    display: none !important;
}
.search-page-shell {
    width: min(980px, 100%);
    margin: 0 auto;
}
.search-hero-card {
    position: relative;
    overflow: hidden;
    padding: 1.25rem;
    margin-bottom: 1rem;
    border-radius: 20px;
}
.search-hero-card::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: -90px;
    top: -110px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--primary) 18%, transparent), transparent 68%);
    pointer-events: none;
}
.search-hero-copy {
    position: relative;
    z-index: 1;
    max-width: 680px;
}
.search-page-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: .4rem;
    color: var(--primary);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.search-hero-copy h1 {
    margin: 0;
    font-size: clamp(1.45rem, 3vw, 2rem);
    line-height: 1.2;
}
.search-hero-copy p {
    max-width: 660px;
    margin: .42rem 0 0;
    color: var(--text-soft);
    font-size: .8rem;
    line-height: 1.65;
}
.search-page-tags {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: .42rem;
    margin: .85rem 0 .9rem;
}
.search-page-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: .28rem .58rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-soft);
    font-size: .65rem;
    font-weight: 700;
}
.search-page-form-enhanced {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .55rem;
    align-items: stretch;
    margin: 0;
}
.search-page-input {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
}
.search-page-input > i {
    position: absolute;
    left: .9rem;
    z-index: 2;
    color: var(--text-soft);
    pointer-events: none;
}
.search-page-input .input {
    width: 100%;
    min-height: 50px;
    padding-left: 2.55rem;
    border-radius: 14px;
    background: var(--surface-2);
}
.search-page-input .input:focus {
    background: var(--surface);
}
.search-submit-btn {
    min-width: 112px;
    min-height: 50px;
    border-radius: 14px;
    justify-content: center;
}
.search-page-help {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: .38rem;
    margin: .7rem 0 0;
    color: var(--text-soft);
    font-size: .66rem;
    line-height: 1.55;
}
.search-page-help i {
    color: #f59e0b;
    margin-top: .05rem;
}
.search-empty-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}
.search-empty-card {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .9rem;
}
.search-empty-card h3 {
    margin: 0;
    font-size: .82rem;
}
.search-empty-card p {
    margin: .2rem 0 0;
    color: var(--text-soft);
    font-size: .68rem;
    line-height: 1.55;
}
.search-group {
    margin-top: 1rem;
}
.search-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    margin-bottom: .5rem;
}
.search-group-head h2 {
    margin: 0;
    font-size: .88rem;
}
.search-group-head span {
    padding: .22rem .45rem;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: .6rem;
    font-weight: 800;
}
.search-results {
    gap: .55rem;
}
.search-result {
    min-height: 62px;
    padding: .7rem .75rem;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.search-result:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--primary) 38%, var(--border));
    box-shadow: var(--shadow-sm);
}
.search-empty-state {
    margin-top: 1rem;
}

/* =====================================================================
   MonaTrack — Zona berbahaya profil
   ===================================================================== */
.profile-danger-zone {
    margin-bottom: 1.3rem;
    scroll-margin-top: 84px;
}
.profile-danger-zone > summary {
    min-height: 54px;
}
.profile-danger-body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}
.profile-danger-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: .9rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
}
.profile-danger-card.account-delete {
    border-color: #fecaca;
}
.profile-danger-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    margin-bottom: .65rem;
    background: #fff7ed;
    color: #c2410c;
    font-size: 1rem;
}
.profile-danger-card.account-delete .profile-danger-icon {
    background: #fef2f2;
    color: #dc2626;
}
.profile-danger-copy h2 {
    margin: 0 0 .25rem;
    font-size: .86rem;
}
.profile-danger-copy p {
    margin: 0;
    color: var(--text-soft);
    font-size: .67rem;
    line-height: 1.62;
}
.profile-danger-card > .btn {
    align-self: flex-start;
    margin-top: auto;
    min-height: 38px;
    padding: .45rem .7rem;
    font-size: .7rem;
}
.btn-danger-outline {
    border: 1px solid #fecaca;
    background: transparent;
    color: #dc2626;
}
.btn-danger-outline:hover {
    border-color: #dc2626;
    background: #fef2f2;
    color: #b91c1c;
}
.profile-delete-form {
    display: grid;
    gap: .55rem;
    margin-top: .75rem;
}
.profile-delete-form .field {
    margin: 0;
}
.profile-delete-form .btn {
    justify-self: start;
    min-height: 38px;
    padding: .45rem .7rem;
    font-size: .7rem;
}
:root[data-theme="dark"] .profile-danger-icon {
    background: rgba(249,115,22,.12);
    color: #fb923c;
}
:root[data-theme="dark"] .profile-danger-card.account-delete .profile-danger-icon,
:root[data-theme="dark"] .btn-danger-outline:hover {
    background: rgba(239,68,68,.10);
}

@media (max-width: 760px) {
    .search-page-shell {
        width: 100%;
    }
    .search-hero-card {
        padding: 1rem;
        border-radius: 16px;
    }
    .search-page-tags {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: .12rem;
        scrollbar-width: none;
    }
    .search-page-tags::-webkit-scrollbar {
        display: none;
    }
    .search-page-tags span {
        flex: 0 0 auto;
    }
    .search-page-form-enhanced {
        grid-template-columns: 1fr;
    }
    .search-submit-btn {
        width: 100%;
    }
    .search-empty-grid {
        grid-template-columns: 1fr;
    }
    .profile-danger-body {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .page-search .page {
        padding: .9rem .75rem 1.2rem;
    }
    .search-hero-card {
        padding: .9rem;
        margin-bottom: .75rem;
    }
    .search-page-eyebrow {
        font-size: .61rem;
    }
    .search-hero-copy h1 {
        font-size: 1.28rem;
    }
    .search-hero-copy p {
        font-size: .72rem;
    }
    .search-page-input .input,
    .search-submit-btn {
        min-height: 48px;
    }
    .search-empty-card {
        padding: .8rem;
    }
    .search-result {
        min-height: 58px;
        padding: .62rem;
    }
    .profile-danger-zone > summary {
        padding: .78rem .85rem;
    }
    .profile-danger-body {
        padding: .75rem;
    }
    .profile-danger-card {
        padding: .8rem;
    }
    .profile-delete-form .btn,
    .profile-danger-card > .btn {
        width: 100%;
        justify-content: center;
    }
}

/* =====================================================================
   MonaTrack — Identitas logo resmi
   ===================================================================== */
.brand-logo {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

.sidebar-brand {
    min-height: 76px;
    padding: .6rem 1rem;
    text-decoration: none;
    justify-content: flex-start;
}
.sidebar-brand:hover { text-decoration: none; }
.brand-logo-sidebar {
    width: 178px;
    max-height: 58px;
    padding: 3px 7px;
    border-radius: 12px;
    background: rgba(255,255,255,.96);
}

.landing-nav .brand {
    min-width: 0;
    text-decoration: none;
}
.brand-logo-landing {
    width: 184px;
    max-height: 56px;
    padding: 2px 5px;
    border-radius: 11px;
    background: rgba(255,255,255,.9);
}

.auth-brand {
    width: max-content;
    max-width: 100%;
    padding: .42rem .65rem;
    border-radius: 15px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 10px 30px rgba(15,23,42,.14);
}
.brand-logo-auth {
    width: 230px;
    max-height: 78px;
}

@media (max-width: 980px) {
    .brand-logo-sidebar { width: 168px; }
}

@media (max-width: 640px) {
    .landing-nav { padding-block: .65rem; }
    .brand-logo-landing { width: 148px; max-height: 46px; }
    .landing-nav .nav-actions { gap: .35rem; }
    .landing-nav .nav-actions .btn { padding: .55rem .7rem; font-size: .78rem; }
    .brand-logo-auth { width: 190px; }
}

.auth-mobile-brand {
    display: none;
    width: 184px;
    max-width: 72vw;
    margin: 0 auto 1.35rem;
    padding: .35rem .55rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}
.auth-mobile-brand img { width: 100%; }

@media (max-width: 760px) {
    .auth-main { flex-direction: column; align-items: stretch; justify-content: flex-start; padding-top: 1.35rem; }
    .auth-mobile-brand { display: block; }
}

/* =====================================================================
 |  SMOOTH STAGGERED PAGE REVEAL — SETIAP MENU / HALAMAN
 |  Reveal memakai transition compositor-friendly. Target dijadwalkan
 |  berdasarkan baris visual dengan tempo sedang, natural, dan tetap ringkas.
 * ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
    body.mt-page-reveal-pending main.page > * {
        opacity: 0;
        visibility: hidden;
        transform: translate3d(0, 8px, 0);
    }

    /* Wrapper kembali ke posisi normal setelah target rinci selesai dikenali. */
    body.mt-page-reveal-ready.mt-page-reveal-pending main.page > * {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    /* Keadaan awal target. Transition didefinisikan di sini agar browser
       sempat menyiapkan frame awal sebelum class running dipasang. */
    body.mt-page-reveal-ready .mt-page-reveal-target {
        opacity: 0;
        visibility: hidden;
        transform: translate3d(0, 8px, 0);
        transform-origin: center center;
        backface-visibility: hidden;
        transition-property: opacity, transform;
        transition-duration: var(--mt-reveal-duration, 620ms);
        transition-timing-function: cubic-bezier(.22, .65, .3, 1);
        transition-delay: var(--mt-page-reveal-delay, 0ms);
        will-change: opacity, transform;
        pointer-events: none;
    }

    body.mt-page-reveal-ready .mt-page-reveal-target[data-reveal-direction="left"] {
        transform: translate3d(-8px, 0, 0);
    }

    body.mt-page-reveal-ready .mt-page-reveal-target[data-reveal-direction="top"] {
        transform: translate3d(0, -7px, 0);
    }

    body.mt-page-reveal-running .mt-page-reveal-target {
        opacity: 1;
        visibility: visible;
        transform: translate3d(0, 0, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.mt-page-reveal-pending main.page > *,
    body.mt-page-reveal-ready .mt-page-reveal-target {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
        animation: none;
    }
}

/* =====================================================================
 |  PRELOADER / LAYAR LOADING (muncul sekali setelah login)
 * ===================================================================== */
#mt-preloader {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    opacity: 1; transition: opacity .58s cubic-bezier(.4, 0, .2, 1), visibility .58s linear;
}
#mt-preloader.mt-hide { opacity: 0; visibility: hidden; }
.mt-pre-inner { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.mt-pre-logo { background: #fff; padding: 14px 22px; border-radius: 16px; box-shadow: 0 12px 34px rgba(0, 0, 0, .22); animation: mtPop .5s ease both; }
.mt-pre-logo img { height: 46px; width: auto; display: block; }
.mt-spinner {
    width: 46px; height: 46px; border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, .28); border-top-color: #fff;
    animation: mtSpin .8s linear infinite;
}
.mt-pre-text { color: #fff; font-weight: 600; font-size: 1.02rem; margin: 0; }
.mt-dots span { animation: mtBlink 1.4s infinite both; }
.mt-dots span:nth-child(2) { animation-delay: .2s; }
.mt-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes mtSpin { to { transform: rotate(360deg); } }
@keyframes mtBlink { 0%, 80%, 100% { opacity: 0; } 40% { opacity: 1; } }
@keyframes mtPop { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }

/* =====================================================================
   MONATRACK MOBILE APP UI V2
   Tampilan HP dirancang ulang sebagai mobile app: app bar ringkas,
   bottom navigation, drawer penuh, kartu sentuh, form satu kolom,
   modal bottom-sheet, dan ruang aman untuk perangkat ber-notch.
   Desktop tidak diubah oleh blok ini.
   ===================================================================== */
.mobile-topbar-brand,
.mobile-topbar-kicker,
.mobile-bottom-nav,
.mobile-sidebar-close { display: none; }

@media (max-width: 760px) {
    :root {
        --mobile-gutter: 14px;
        --mobile-topbar-h: 66px;
        --mobile-bottom-nav-h: 76px;
        --mobile-card-radius: 19px;
        --mobile-control-h: 50px;
        --shadow-mobile: 0 8px 28px rgba(15, 23, 42, .07);
    }

    html { scroll-padding-top: calc(var(--mobile-topbar-h) + 12px); }
    html,
    body { max-width: 100%; overflow-x: clip; }
    body {
        min-width: 0;
        background:
            radial-gradient(90vw 34vw at 100% 0%, color-mix(in srgb, var(--primary-soft) 64%, transparent), transparent 68%),
            var(--bg);
        font-size: 14px;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        overscroll-behavior-y: none;
    }
    body.sidebar-visible { overflow: hidden; touch-action: none; }

    /* ---------------- Mobile app shell ---------------- */
    .app { display: block; min-height: 100dvh; }
    .content { min-height: 100dvh; width: 100%; }
    .page {
        width: 100%;
        max-width: none;
        padding: 16px var(--mobile-gutter) calc(var(--mobile-bottom-nav-h) + 34px + env(safe-area-inset-bottom, 0px));
    }

    /* App bar */
    .topbar {
        min-height: calc(var(--mobile-topbar-h) + env(safe-area-inset-top, 0px));
        height: calc(var(--mobile-topbar-h) + env(safe-area-inset-top, 0px));
        padding: env(safe-area-inset-top, 0px) 12px 0;
        gap: 9px;
        border-bottom-color: color-mix(in srgb, var(--border) 72%, transparent);
        background: color-mix(in srgb, var(--surface) 91%, transparent);
        box-shadow: 0 5px 20px rgba(15, 23, 42, .035);
        backdrop-filter: blur(18px) saturate(145%);
        -webkit-backdrop-filter: blur(18px) saturate(145%);
        z-index: 110;
    }
    .topbar .menu-toggle { display: none !important; }
    .mobile-topbar-brand {
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
        display: grid;
        place-items: center;
        overflow: hidden;
        border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 5px 14px rgba(79, 70, 229, .11);
    }
    .mobile-topbar-brand img { width: 34px; height: 34px; object-fit: contain; }
    .topbar-title-stack {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 1px;
    }
    .mobile-topbar-kicker {
        display: block;
        color: var(--primary-600);
        font-size: .62rem;
        font-weight: 800;
        letter-spacing: .055em;
        line-height: 1.1;
        text-transform: uppercase;
    }
    .topbar .page-title {
        flex: initial;
        max-width: 100%;
        overflow: hidden;
        color: var(--text);
        font-size: .98rem;
        font-weight: 800;
        line-height: 1.3;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .topbar .spacer,
    .global-search,
    .topbar-mobile-search,
    .topbar-privacy,
    .topbar-theme,
    .topbar-profile { display: none !important; }
    .topbar-notifications {
        display: grid !important;
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        border-radius: 13px;
        background: var(--surface-2);
    }
    .topbar-notifications .dot { top: 8px; right: 8px; }
    .mobile-tools-dropdown { display: block !important; flex: 0 0 auto; }
    .mobile-tools-dropdown > .icon-btn {
        width: 40px;
        height: 40px;
        border-radius: 13px;
        background: var(--surface-2);
    }
    .mobile-tools-menu {
        position: fixed;
        z-index: 135;
        top: auto;
        right: 12px;
        bottom: calc(var(--mobile-bottom-nav-h) + 12px + env(safe-area-inset-bottom, 0px));
        left: 12px;
        width: auto;
        max-height: min(62dvh, 470px);
        overflow-y: auto;
        margin: 0;
        padding: 9px;
        border-radius: 22px;
        box-shadow: 0 24px 70px rgba(15, 23, 42, .24);
        transform-origin: bottom right;
    }
    .mobile-tools-menu.open { animation: mtMobileSheetIn .22s cubic-bezier(.2,.75,.25,1) both; }
    .mobile-tools-menu a,
    .mobile-tools-menu button {
        width: 100%;
        min-height: 48px;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
        border: 0;
        border-radius: 14px;
        background: transparent;
        color: var(--text);
        font: inherit;
        font-weight: 650;
        text-align: left;
        text-decoration: none;
    }
    .mobile-tools-menu a i,
    .mobile-tools-menu button i {
        width: 32px;
        height: 32px;
        display: grid;
        flex: 0 0 32px;
        place-items: center;
        border-radius: 10px;
        background: var(--primary-soft);
        color: var(--primary-600);
        font-size: 1rem;
    }
    .mobile-tools-menu a:active,
    .mobile-tools-menu button:active { background: var(--surface-2); }

    /* Navigation drawer */
    .sidebar {
        position: fixed;
        z-index: 150;
        inset: 0 auto 0 0;
        width: min(88vw, 354px);
        max-width: 354px;
        height: 100dvh;
        padding-top: env(safe-area-inset-top, 0px);
        border: 0;
        border-radius: 0 28px 28px 0;
        box-shadow: 24px 0 70px rgba(15, 23, 42, .26);
        transform: translate3d(-105%, 0, 0);
        transition: transform .28s cubic-bezier(.22,.72,.25,1);
        overscroll-behavior: contain;
    }
    .app.sidebar-open .sidebar { transform: translate3d(0, 0, 0); }
    .mobile-sidebar-close {
        position: absolute;
        z-index: 3;
        top: calc(14px + env(safe-area-inset-top, 0px));
        right: 14px;
        width: 42px;
        height: 42px;
        display: grid;
        place-items: center;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--surface-2);
        color: var(--text);
        font-size: 1.05rem;
    }
    .sidebar-brand {
        min-height: 72px;
        padding: 10px 66px 10px 16px;
        border-bottom: 0;
    }
    .brand-logo-sidebar { width: 154px; max-height: 48px; padding: 2px 5px; }
    .sidebar-nav {
        padding: 4px 12px 16px;
        overflow-y: auto;
        scrollbar-width: none;
    }
    .sidebar-nav::-webkit-scrollbar { display: none; }
    .nav-section-label {
        padding: 15px 10px 7px;
        font-size: .64rem;
        letter-spacing: .075em;
    }
    .nav-item {
        min-height: 48px;
        gap: 12px;
        margin-bottom: 3px;
        padding: 10px 12px;
        border-radius: 14px;
        font-size: .88rem;
        font-weight: 600;
    }
    .nav-item i {
        width: 34px;
        height: 34px;
        display: grid;
        place-items: center;
        border-radius: 11px;
        background: var(--surface-2);
        font-size: 1rem;
    }
    .nav-item.active {
        background: linear-gradient(135deg, var(--primary-soft), color-mix(in srgb, var(--primary-soft) 48%, var(--surface)));
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 13%, transparent);
    }
    .nav-item.active i { background: var(--primary-600); color: #fff; }
    .sidebar-foot {
        padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px));
        background: color-mix(in srgb, var(--surface) 94%, transparent);
    }
    .sidebar-user { min-height: 58px; padding: 8px; border-radius: 15px; }
    .sidebar-user .avatar { width: 42px; height: 42px; }
    .sidebar-overlay {
        z-index: 145;
        background: rgba(15, 23, 42, .55);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }
    .app.sidebar-open .sidebar-overlay { display: block; animation: mtMobileFadeIn .2s ease both; }

    /* Bottom navigation */
    .mobile-bottom-nav {
        position: fixed;
        z-index: 120;
        right: 0;
        bottom: 0;
        left: 0;
        min-height: calc(var(--mobile-bottom-nav-h) + env(safe-area-inset-bottom, 0px));
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: start;
        padding: 7px 8px calc(6px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
        background: color-mix(in srgb, var(--surface) 92%, transparent);
        box-shadow: 0 -12px 36px rgba(15, 23, 42, .08);
        backdrop-filter: blur(20px) saturate(150%);
        -webkit-backdrop-filter: blur(20px) saturate(150%);
    }
    .mobile-bottom-item,
    .mobile-bottom-add {
        position: relative;
        min-width: 0;
        min-height: 58px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 4px 2px;
        border: 0;
        border-radius: 14px;
        background: transparent;
        color: var(--text-muted);
        font: inherit;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-bottom-item i { font-size: 1.18rem; line-height: 1; }
    .mobile-bottom-item span { max-width: 100%; overflow: hidden; font-size: .61rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
    .mobile-bottom-item.active { color: var(--primary-600); }
    .mobile-bottom-item.active::before {
        content: '';
        position: absolute;
        top: -7px;
        width: 30px;
        height: 3px;
        border-radius: 0 0 6px 6px;
        background: var(--primary-600);
    }
    .mobile-bottom-item.active i { transform: translateY(-1px); }
    .mobile-bottom-add {
        justify-content: flex-start;
        overflow: visible;
        color: var(--primary-600);
    }
    .mobile-bottom-add > span {
        width: 52px;
        height: 52px;
        display: grid;
        place-items: center;
        margin-top: -20px;
        border: 5px solid color-mix(in srgb, var(--surface) 95%, transparent);
        border-radius: 19px;
        background: linear-gradient(145deg, var(--primary), var(--primary-700));
        color: #fff;
        box-shadow: 0 12px 28px rgba(79, 70, 229, .35);
        font-size: 1.3rem;
        transform: rotate(0.001deg);
    }
    .mobile-bottom-add small { margin-top: 1px; font-size: .61rem; font-weight: 800; }
    .mobile-bottom-item:active,
    .mobile-bottom-add:active { transform: scale(.96); }
    .quick-add-fab { display: none !important; }

    /* ---------------- Typography and page heading ---------------- */
    .page-head,
    .dashboard-head {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-bottom: 16px;
    }
    .page-head > div:first-child,
    .dashboard-head > div:first-child { min-width: 0; }
    .page-head h1,
    .dashboard-head h1 {
        margin: 0 0 4px;
        font-size: clamp(1.35rem, 6vw, 1.62rem);
        line-height: 1.18;
        letter-spacing: -.035em;
    }
    .page-head .desc,
    .dashboard-head p,
    .dashboard-head .text-soft {
        max-width: 34rem;
        font-size: .78rem;
        line-height: 1.55;
    }
    .page-head-actions,
    .dashboard-actions {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        gap: 9px;
    }
    .page-head-actions > :only-child { grid-column: 1 / -1; }
    .page-head-actions .btn,
    .dashboard-actions .btn {
        width: 100%;
        min-height: 46px;
        padding: .65rem .75rem;
        border-radius: 14px;
        font-size: .78rem;
    }
    .dashboard-actions .month-nav {
        grid-column: 1 / -1;
        width: 100%;
        min-height: 48px;
        justify-content: space-between;
        border-radius: 15px;
        padding: 4px;
        box-shadow: var(--shadow-sm);
    }
    .month-nav a { width: 40px; height: 40px; border-radius: 12px; }
    .month-nav .label { flex: 1; min-width: 0; padding-inline: 6px; font-size: .84rem; }
    .eyebrow,
    .dashboard-eyebrow { font-size: .64rem; letter-spacing: .06em; }

    /* ---------------- Cards and touch controls ---------------- */
    .card,
    .stat-card,
    .cat-card,
    .budget-card,
    .goal-card,
    .recur-card,
    .entity-card,
    .profile-section,
    .search-hero-card,
    .filter-bar {
        border-radius: var(--mobile-card-radius);
        border-color: color-mix(in srgb, var(--border) 84%, transparent);
        box-shadow: var(--shadow-mobile);
    }
    .card-pad { padding: 15px; }
    .card-head {
        min-height: 58px;
        padding: 14px 15px;
        gap: 10px;
    }
    .card-head h3 { font-size: .94rem; }
    .btn {
        min-height: 44px;
        border-radius: 13px;
        padding: .62rem .82rem;
        font-size: .8rem;
        touch-action: manipulation;
    }
    .btn-lg { min-height: 50px; }
    .icon-btn,
    .act-btn {
        width: 40px;
        height: 40px;
        min-width: 40px;
        border-radius: 12px;
        touch-action: manipulation;
    }
    .act-btn { font-size: .88rem; }

    /* Compact financial statistics */
    .stat-grid,
    .transaction-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-bottom: 14px;
    }
    .stat-card {
        min-width: 0;
        min-height: 132px;
        padding: 14px;
        overflow: hidden;
    }
    .stat-card .ic {
        width: 36px;
        height: 36px;
        margin-bottom: 10px;
        border-radius: 11px;
        font-size: 1rem;
    }
    .stat-card .lbl { font-size: .68rem; line-height: 1.35; }
    .stat-card .val,
    .stat-card .val[style] {
        max-width: 100%;
        overflow: hidden;
        margin-top: 2px;
        font-size: clamp(.92rem, 4vw, 1.12rem) !important;
        line-height: 1.35;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .stat-card .delta {
        min-height: 28px;
        align-items: flex-start;
        margin-top: 5px;
        font-size: .62rem;
        line-height: 1.35;
    }
    .stat-privacy-toggle { top: 9px; right: 9px; width: 28px; height: 28px; }

    /* Dashboard */
    .dashboard-widget-layout { gap: 12px; }
    .dashboard-section { margin-bottom: 0; }
    .section-title-row {
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 10px;
    }
    .section-title-row h2 { font-size: .98rem; }
    .section-title-row p { font-size: .7rem; line-height: 1.5; }
    .section-title-row > a { flex: 0 0 auto; font-size: .7rem; }
    .insight-grid,
    .wallet-mini-grid,
    .dashboard-widget-layout,
    .chart-grid { grid-template-columns: 1fr; gap: 10px; }
    .insight-card {
        min-height: 86px;
        padding: 13px;
        border-radius: 17px;
    }
    .insight-card p { font-size: .7rem; line-height: 1.5; }
    .wallet-mini {
        min-height: 66px;
        padding: 11px 12px;
        border-radius: 16px;
    }
    .wallet-mini strong { font-size: .84rem; }
    .dashboard-chart-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 13px;
        border-radius: 18px;
    }
    .dashboard-chart-toolbar-copy small { font-size: .62rem; }
    .period-switch {
        width: 100%;
        max-width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
        padding: 4px;
        border-radius: 13px;
        scroll-snap-type: x proximity;
    }
    .period-switch button {
        min-height: 36px;
        flex: 1 0 auto;
        padding: .45rem .65rem;
        font-size: .68rem;
        scroll-snap-align: start;
    }
    .chart-card { overflow: hidden; }
    .chart-card-head {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 14px;
    }
    .chart-head-actions { width: 100%; align-items: stretch; }
    .chart-legend-inline { padding: 0; }
    .chart-box { height: 250px; padding: 8px 10px 14px; }
    .chart-card .chart-box { min-height: 245px; }

    /* Categories */
    .cat-group { margin-bottom: 22px; }
    .cat-group-head {
        position: sticky;
        top: calc(var(--mobile-topbar-h) + env(safe-area-inset-top, 0px));
        z-index: 4;
        min-height: 42px;
        margin: 0 -2px 9px;
        padding: 9px 4px;
        background: color-mix(in srgb, var(--bg) 92%, transparent);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        font-size: .86rem;
    }
    .cat-cards { grid-template-columns: 1fr; gap: 9px; }
    .cat-card {
        min-height: 72px;
        gap: 11px;
        padding: 11px 12px;
    }
    .cat-card .cc-ic {
        width: 44px;
        height: 44px;
        border-radius: 14px;
        font-size: 1.12rem;
    }
    .cat-card .cc-name { font-size: .84rem; }
    .cat-card .cc-meta { font-size: .66rem; }
    .cat-card .cc-actions { gap: 5px; }
    .cat-card .cc-actions form { display: inline-flex !important; }
    .cat-card .act-btn { width: 36px; height: 36px; min-width: 36px; border-radius: 11px; }

    /* Forms */
    .form-card {
        width: 100%;
        max-width: none;
        padding: 15px;
        border-radius: var(--mobile-card-radius);
    }
    .form-grid,
    .form-row { grid-template-columns: 1fr; gap: 0; }
    .form-grid .full { grid-column: auto; }
    .field { margin-bottom: 15px; }
    .field label { margin-bottom: 7px; font-size: .78rem; }
    .input,
    .form-control,
    select.input,
    textarea.input {
        min-height: var(--mobile-control-h);
        padding: .78rem .85rem;
        border-width: 1px;
        border-radius: 14px;
        font-size: 16px;
    }
    textarea.input { min-height: 112px; resize: vertical; }
    .input-prefix { border-radius: 14px; }
    .input-prefix .pfx { min-width: 44px; }
    .input-icon > i { left: .92rem; }
    .input-icon .input { padding-left: 2.65rem; }
    .segmented {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
        padding: 4px;
        border-radius: 14px;
    }
    .segmented label {
        min-width: 0;
        min-height: 42px;
        justify-content: center;
        padding: .5rem .35rem;
        border-radius: 11px;
        font-size: .7rem;
        text-align: center;
    }
    .form-actions {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
        margin-top: 3px;
        padding-top: 15px;
    }
    .form-actions .btn { width: 100%; min-width: 0; }
    .form-actions .btn:only-child { grid-column: 1 / -1; }
    .category-picker-toolbar { align-items: stretch; }
    .category-picker { max-height: 360px; }
    .category-option-card { min-height: 54px; }

    /* Filters and tables */
    .filter-bar { padding: 12px; margin-bottom: 12px; }
    .filter-search-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        margin-bottom: 10px;
    }
    .filter-search-row .search { width: 100%; }
    .filter-search-row .btn { width: 100%; }
    .filter-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    .filter-controls .fc label { font-size: .62rem; }
    .filter-controls .fc select { min-height: 44px; padding: .62rem .7rem; font-size: .76rem; border-radius: 12px; }
    .table-toolbar {
        align-items: stretch;
        padding: 12px;
        gap: 9px;
    }
    .table-toolbar .tt-info { width: 100%; font-size: .7rem; line-height: 1.45; }
    .table-toolbar .tt-perpage { width: 100%; justify-content: space-between; }
    .table-wrap {
        width: 100%;
        overflow-x: auto;
        border-radius: 0 0 var(--mobile-card-radius) var(--mobile-card-radius);
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }
    .data-table { min-width: 720px; font-size: .76rem; }
    .data-table th { padding: 11px 12px; font-size: .64rem; }
    .data-table td { padding: 11px 12px; }
    .cell-cat { min-width: 160px; }
    .pagination {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        margin: 14px -2px 0;
        padding: 2px 2px 6px;
        scrollbar-width: none;
    }
    .pagination::-webkit-scrollbar { display: none; }
    .pagination a,
    .pagination span { min-width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px; }

    /* Entity, wallet, budget, saving, recurring */
    .entity-grid,
    .wallet-card-grid,
    .goal-grid,
    .budget-summary,
    .report-cols,
    .detail-grid,
    .profile-grid,
    .backup-check-grid,
    .backup-workspace,
    .payment-summary-grid,
    .search-empty-grid { grid-template-columns: 1fr; gap: 10px; }
    .entity-card { padding: 14px; }
    .entity-card-head { gap: 10px; }
    .entity-icon { width: 42px; height: 42px; flex-basis: 42px; border-radius: 13px; }
    .entity-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
    .entity-metrics > div { min-height: 55px; padding: 9px; border-radius: 12px; }
    .entity-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    .entity-actions .btn,
    .entity-actions form,
    .entity-actions form .btn { width: 100%; }
    .wallet-card-v2 { border-radius: 20px; }
    .wallet-card-header,
    .wallet-card-footer { gap: 8px; }
    .wallet-card-details { grid-template-columns: 1fr; }
    .wallet-card-footer { display: grid; grid-template-columns: 1fr auto; }
    .goal-card,
    .budget-card { padding: 15px; }
    .goal-card-body { padding: 15px; }
    .goal-card-image { height: 165px; }
    .budget-top { align-items: flex-start; }
    .budget-top .bc-actions { gap: 5px; }
    .budget-figures { gap: 12px; }
    .recur-card {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 10px;
        padding: 13px;
    }
    .recur-card .rc-actions,
    .recur-actions { grid-column: 1 / -1; width: 100%; justify-content: flex-end; }
    .detail-hero { padding: 24px 15px; }
    .detail-hero .dh-amount { font-size: 1.55rem; }
    .detail-list li { align-items: flex-start; padding: 12px 0; font-size: .78rem; }
    .detail-list .dl-label { flex: 0 0 42%; }
    .detail-list .dl-value { min-width: 0; overflow-wrap: anywhere; }

    /* Lists */
    .tx-item,
    .simple-list-item,
    .activity-item {
        min-height: 66px;
        gap: 10px;
        padding: 11px 13px;
    }
    .tx-icon { width: 40px; height: 40px; border-radius: 13px; }
    .tx-title { font-size: .8rem; }
    .tx-meta { font-size: .65rem; }
    .tx-amount { max-width: 37%; overflow: hidden; font-size: .75rem; text-overflow: ellipsis; }

    /* Calendar and reports */
    .calendar { overflow-x: auto; border-radius: var(--mobile-card-radius); -webkit-overflow-scrolling: touch; }
    .calendar > * { min-width: 700px; }
    .report-cols { margin-bottom: 12px; }
    .profile-section { margin-bottom: 12px; padding: 15px; scroll-margin-top: calc(var(--mobile-topbar-h) + 14px); }
    .profile-grid { align-items: stretch; }
    .profile-side { position: static !important; }
    .setting-row { align-items: flex-start; gap: 12px; }

    /* Empty states */
    .empty { padding: 34px 18px; }
    .empty > i { font-size: 2rem; }
    .empty p { font-size: .75rem; line-height: 1.55; }
    .empty-action,
    .empty .btn { width: 100%; }

    /* Modal becomes bottom sheet */
    .modal-backdrop {
        z-index: 220;
        align-items: end;
        justify-items: stretch;
        padding: 0;
        background: rgba(15, 23, 42, .58);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }
    .modal-card {
        width: 100%;
        max-width: none;
        max-height: min(91dvh, 820px);
        margin: 0;
        padding: 17px var(--mobile-gutter) calc(16px + env(safe-area-inset-bottom, 0px));
        border: 0;
        border-top: 1px solid var(--border);
        border-radius: 26px 26px 0 0;
        box-shadow: 0 -24px 70px rgba(15, 23, 42, .24);
        animation: mtMobileSheetIn .28s cubic-bezier(.2,.75,.25,1) both;
        overscroll-behavior: contain;
    }
    .modal-card::before {
        content: '';
        display: block;
        width: 42px;
        height: 4px;
        margin: -7px auto 13px;
        border-radius: 99px;
        background: var(--border);
    }
    .modal-head { position: sticky; top: -17px; z-index: 2; margin: 0 -2px 14px; padding: 2px 2px 10px; background: var(--surface); }
    .modal-head h2 { font-size: 1rem; }
    .modal-head p { font-size: .68rem; }
    .modal-actions,
    .confirm-modal-actions {
        position: sticky;
        bottom: calc(-16px - env(safe-area-inset-bottom, 0px));
        z-index: 3;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
        margin: 12px calc(-1 * var(--mobile-gutter)) calc(-16px - env(safe-area-inset-bottom, 0px));
        padding: 12px var(--mobile-gutter) calc(14px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--border);
        background: color-mix(in srgb, var(--surface) 96%, transparent);
        backdrop-filter: blur(14px);
    }
    .modal-actions .btn,
    .confirm-modal-actions .btn { width: 100%; }
    .quick-add-modal .form-grid { grid-template-columns: 1fr; }
    .confirm-modal-card { text-align: center; }
    .confirm-modal-icon { margin-inline: auto; }
    .confirm-modal-close { top: 17px; right: 16px; }

    /* Toast */
    .toast-wrap {
        z-index: 260;
        top: calc(var(--mobile-topbar-h) + env(safe-area-inset-top, 0px) + 8px);
        right: 10px;
        left: 10px;
        width: auto;
    }
    .toast {
        width: 100%;
        min-width: 0;
        max-width: none;
        padding: 11px 12px;
        border-radius: 15px;
        font-size: .75rem;
    }

    /* Search */
    .search-page-shell { width: 100%; }
    .search-hero-card { padding: 15px; }
    .search-page-form-enhanced { grid-template-columns: 1fr; }
    .search-submit-btn { width: 100%; }
    .search-page-tags { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .search-page-tags::-webkit-scrollbar { display: none; }

    /* Prevent desktop hover motion on touch screens */
    .goal-card:hover,
    .wallet-card-v2:hover,
    .btn:hover,
    .quick-add-fab:hover { transform: none; }

    /* Mobile reveal: sedikit lebih stabil pada perangkat menengah. */
    body.mt-page-reveal-ready .mt-page-reveal-target {
        transform: translate3d(0, 6px, 0);
        transition-duration: max(var(--mt-reveal-duration, 560ms), 580ms);
    }

    @keyframes mtMobileSheetIn {
        from { opacity: 0; transform: translate3d(0, 24px, 0) scale(.985); }
        to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
    }
    @keyframes mtMobileFadeIn { from { opacity: 0; } to { opacity: 1; } }
}

@media (max-width: 480px) {
    :root { --mobile-gutter: 12px; }
    .page { padding-top: 13px; }
    .mobile-topbar-brand { width: 40px; height: 40px; flex-basis: 40px; border-radius: 13px; }
    .mobile-topbar-brand img { width: 32px; height: 32px; }
    .topbar-notifications,
    .mobile-tools-dropdown > .icon-btn { width: 38px; height: 38px; flex-basis: 38px; }
    .page-head h1,
    .dashboard-head h1 { font-size: 1.36rem; }
    .page-head-actions,
    .dashboard-actions { gap: 8px; }
    .page-head-actions .btn,
    .dashboard-actions .btn { min-height: 44px; font-size: .72rem; }
    .stat-grid,
    .transaction-stat-grid { gap: 8px; }
    .stat-card { min-height: 126px; padding: 12px; }
    .stat-card .val,
    .stat-card .val[style] { font-size: clamp(.84rem, 4.15vw, 1rem) !important; }
    .stat-card .delta { font-size: .58rem; }
    .filter-controls { grid-template-columns: 1fr 1fr; gap: 8px; }
    .cat-card { padding-inline: 10px; }
    .cat-card .cc-actions { gap: 3px; }
    .cat-card .act-btn { width: 34px; height: 34px; min-width: 34px; }
    .entity-actions { grid-template-columns: 1fr; }
    .form-actions { grid-template-columns: 1fr; }
    .form-actions .btn { grid-column: auto; }
    .modal-actions,
    .confirm-modal-actions { grid-template-columns: 1fr 1fr; }
    .mobile-bottom-nav { padding-inline: 4px; }
    .mobile-bottom-item span,
    .mobile-bottom-add small { font-size: .57rem; }
    .mobile-bottom-add > span { width: 50px; height: 50px; }
}

@media (max-width: 370px) {
    .topbar { padding-inline: 9px; gap: 6px; }
    .mobile-topbar-kicker { display: none; }
    .topbar .page-title { font-size: .9rem; }
    .stat-grid,
    .transaction-stat-grid { grid-template-columns: 1fr; }
    .stat-card { min-height: 112px; }
    .stat-card .delta { min-height: 0; }
    .filter-controls { grid-template-columns: 1fr; }
    .mobile-bottom-item span,
    .mobile-bottom-add small { font-size: .53rem; }
}

@media (hover: none) and (pointer: coarse) {
    .nav-item:hover,
    .icon-btn:hover,
    .act-btn:hover,
    .btn:hover,
    .tx-item:hover,
    .goal-card:hover,
    .wallet-card-v2:hover { box-shadow: inherit; }
}

/* Auth pages: kartu mobile yang lebih fokus dan aman terhadap keyboard. */
@media (max-width: 760px) {
    .auth {
        min-height: 100dvh;
        display: block;
        background:
            radial-gradient(85vw 50vw at 100% 0%, var(--primary-soft), transparent 72%),
            var(--bg);
    }
    .auth-aside { display: none; }
    .auth-main {
        min-height: 100dvh;
        align-items: flex-start;
        padding: calc(22px + env(safe-area-inset-top, 0px)) 16px calc(24px + env(safe-area-inset-bottom, 0px));
        background: transparent;
    }
    .auth-mobile-brand { width: 170px; margin-bottom: 18px; border-radius: 16px; }
    .auth-card {
        max-width: 440px;
        margin-inline: auto;
        padding: 20px 17px;
        border: 1px solid var(--border);
        border-radius: 24px;
        background: var(--surface);
        box-shadow: var(--shadow-mobile);
    }
    .auth-card h1 { font-size: 1.42rem; }
    .auth-card .sub { font-size: .78rem; }
    .otp-inputs { gap: 6px; }
    .otp-inputs input { width: 44px; height: 54px; border-radius: 13px; }
}


/* =====================================================================
   MOBILE UI V2.1 — perbaikan form transaksi dan app bar
   - Menu titik tiga dihapus dari markup; selector ini menjadi pengaman.
   - Daftar kategori/dompet tidak lagi memakai tinggi semu yang membuat
     kartu menimpa bagian form berikutnya.
   - Tombol simpan kembali ke alur normal agar tidak menutup konten.
   - Bottom navigation disembunyikan khusus editor transaksi karena aksi
     utama halaman sudah tersedia di bagian akhir form.
   ===================================================================== */
@media (max-width: 760px) {
    .mobile-tools-dropdown,
    .mobile-tools-menu { display: none !important; }

    .topbar {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }
    .topbar-notifications { margin-left: auto; }

    body.page-transaction-editor .mobile-bottom-nav,
    body.page-transaction-editor .quick-add-fab { display: none !important; }

    body.page-transaction-editor .page {
        padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
    }

    body.page-transaction-editor .transaction-form-card {
        overflow: hidden;
        padding: 14px;
        border-radius: 20px;
    }

    body.page-transaction-editor .transaction-form-card .form-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    body.page-transaction-editor .transaction-form-card .field,
    body.page-transaction-editor .transaction-form-card .field.full {
        position: relative;
        min-width: 0;
        width: 100%;
        margin: 0 0 18px;
        clear: both;
    }

    body.page-transaction-editor .transaction-form-card .category-picker,
    body.page-transaction-editor .transaction-form-card .wallet-picker,
    body.page-transaction-editor .transaction-form-card .payment-picker {
        width: 100%;
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
        contain: layout;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 9px;
        padding: 0;
    }

    body.page-transaction-editor .transaction-form-card .category-option,
    body.page-transaction-editor .transaction-form-card .category-option-card {
        width: 100%;
        min-width: 0;
    }

    body.page-transaction-editor .transaction-form-card .category-option-card {
        min-height: 66px;
        padding: 10px 42px 10px 10px;
        border-radius: 15px;
    }

    body.page-transaction-editor .transaction-form-card .category-option-copy strong,
    body.page-transaction-editor .transaction-form-card .category-option-copy small {
        max-width: 100%;
    }

    body.page-transaction-editor .transaction-form-card .category-option-copy strong {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    body.page-transaction-editor .transaction-form-card .category-option-copy small {
        -webkit-line-clamp: 2;
    }

    body.page-transaction-editor .transaction-form-card .split-transaction-field,
    body.page-transaction-editor .transaction-form-card .wallet-picker-field,
    body.page-transaction-editor .transaction-form-card .payment-picker-field {
        isolation: isolate;
        z-index: auto;
    }

    body.page-transaction-editor .transaction-form-card .form-actions {
        position: static !important;
        inset: auto !important;
        z-index: auto;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 9px;
        width: 100%;
        margin: 6px 0 0 !important;
        padding: 16px 0 0 !important;
        border-top: 1px solid var(--border);
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.page-transaction-editor .transaction-form-card .form-actions .btn {
        min-height: 50px;
        width: 100%;
        border-radius: 14px;
    }

    body.page-transaction-editor .transaction-form-card .form-actions .btn-primary {
        order: 0;
    }

    body.page-transaction-editor .transaction-form-card .form-actions .btn-ghost {
        order: 1;
    }
}

@media (max-width: 380px) {
    body.page-transaction-editor .transaction-form-card { padding: 12px; }
    body.page-transaction-editor .transaction-form-card .category-option-card {
        min-height: 64px;
        padding-left: 9px;
    }
}

/* =====================================================================
   TRANSAKSI BERULANG — REDESIGN RESPONSIVE V3
   Struktur kartu dibuat ulang agar ringkas di HP, mudah disentuh, dan
   tidak meninggalkan ruang kosong besar seperti layout desktop lama.
   ===================================================================== */
.recurring-page-head {
    align-items: flex-end;
    margin-bottom: 1rem;
}
.recurring-heading-copy { max-width: 650px; }
.recurring-kicker {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    margin-bottom: .42rem;
    color: var(--primary-600);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .045em;
    text-transform: uppercase;
}
.recurring-page-actions { flex-wrap: nowrap; }
.recurring-pending-btn .badge { margin-left: .1rem; }

.recurring-overview {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin-bottom: 1.2rem;
}
.recurring-overview-item {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1rem;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
}
a.recurring-overview-item:hover { text-decoration: none; border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); }
.recurring-overview-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--primary-soft);
    color: var(--primary-600);
    font-size: 1rem;
}
.recurring-overview-item.is-active .recurring-overview-icon { background: var(--income-soft); color: var(--income); }
.recurring-overview-item.is-pending .recurring-overview-icon { background: var(--warning-soft); color: #b45309; }
.recurring-overview-copy { min-width: 0; flex: 1; }
.recurring-overview-copy small,
.recurring-overview-copy strong { display: block; }
.recurring-overview-copy small { color: var(--text-soft); font-size: .71rem; }
.recurring-overview-copy strong { margin-top: .05rem; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.recurring-overview-arrow { color: var(--text-muted); }

.recurring-list-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin: 0 0 .65rem;
}
.recurring-list-head h2 { margin: 0; font-size: .95rem; }
.recurring-list-head p { margin: .12rem 0 0; color: var(--text-soft); font-size: .72rem; }

.recur-list { gap: .75rem; }
.recur-card {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "main value"
        "schedule actions";
    align-items: center;
    gap: .8rem 1.25rem;
    overflow: hidden;
    padding: 1rem 1rem 1rem 1.15rem;
    border: 1px solid var(--border);
    border-radius: 17px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}
.recur-card.inactive { opacity: .76; }
.recur-card.is-due { border-color: color-mix(in srgb, var(--warning) 42%, var(--border)); }
.recur-accent {
    position: absolute;
    z-index: -1;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--recur-color, var(--primary));
}
.recur-main {
    grid-area: main;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .8rem;
}
.recur-ic {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 13px;
    background: color-mix(in srgb, var(--recur-color, var(--primary)) 12%, var(--surface));
    color: var(--recur-color, var(--primary));
}
.recur-body { min-width: 0; }
.recur-title-row {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .55rem;
}
.recur-title {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    font-size: .9rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.recur-status {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .32rem;
    padding: .18rem .45rem;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-soft);
    font-size: .62rem;
    font-weight: 750;
}
.recur-status.active { background: var(--income-soft); color: #15803d; }
.recur-status.inactive { background: #e2e8f0; color: #64748b; }
.recur-status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.recur-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .38rem;
}
.recur-category {
    display: inline-flex;
    align-items: center;
    gap: .32rem;
    min-width: 0;
    max-width: 210px;
    padding: .18rem .45rem;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-soft);
    font-size: .68rem;
    font-weight: 650;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.recur-category-dot { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: var(--recur-color, var(--primary)); }
.freq-badge,
.due-badge { padding: .18rem .45rem; font-size: .66rem; }

.recur-value {
    grid-area: value;
    min-width: 145px;
    text-align: right;
}
.recur-value-label { display: block; color: var(--text-muted); font-size: .64rem; }
.recur-amount { display: block; margin-top: .08rem; font-size: .95rem; line-height: 1.3; }

.recur-schedule {
    grid-area: schedule;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .55rem;
    padding-top: .75rem;
    border-top: 1px solid var(--border);
}
.recur-schedule-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: var(--primary-soft);
    color: var(--primary-600);
    font-size: .78rem;
}
.recur-schedule.is-disabled .recur-schedule-icon { background: var(--surface-2); color: var(--text-muted); }
.recur-schedule-copy { min-width: 0; }
.recur-schedule-copy small,
.recur-schedule-copy strong { display: block; }
.recur-schedule-copy small { color: var(--text-muted); font-size: .63rem; }
.recur-schedule-copy strong { margin-top: .04rem; font-size: .72rem; font-weight: 700; }

.recur-actions {
    grid-area: actions;
    display: flex;
    justify-content: flex-end;
    gap: .38rem;
    padding-top: .75rem;
    border-top: 1px solid var(--border);
}
.recur-actions form { display: inline-flex !important; margin: 0; }
.recur-action {
    min-width: 38px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .38rem;
    padding: 0 .62rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text-soft);
    font: inherit;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
}
.recur-action:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.recur-action.delete { color: var(--danger); }
.recur-action.delete:hover { border-color: #fecaca; background: var(--danger-soft); color: #dc2626; }

.recurring-empty-card { overflow: hidden; }
.recurring-empty-card .empty h2 { margin: .8rem 0 .3rem; font-size: 1rem; }
.recurring-empty-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin-inline: auto;
    border-radius: 18px;
    background: var(--primary-soft);
    color: var(--primary-600);
    font-size: 1.35rem;
}

@media (max-width: 760px) {
    /* Pengaman lintas versi: menu titik tiga tidak ditampilkan di app bar HP. */
    .mobile-tools-dropdown,
    .mobile-tools-menu,
    .topbar [data-mobile-tools],
    .topbar .mobile-more-button { display: none !important; }

    body.mt-route-recurring .page {
        padding-top: 12px;
        background: linear-gradient(180deg, color-mix(in srgb, var(--primary-soft) 30%, transparent) 0, transparent 150px);
    }
    body.mt-route-recurring .recurring-page-head {
        display: block;
        margin: 0 0 12px;
        padding: 16px;
        border: 1px solid color-mix(in srgb, var(--primary) 13%, var(--border));
        border-radius: 22px;
        background:
            radial-gradient(140px 90px at 100% 0%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 72%),
            var(--surface);
        box-shadow: var(--shadow-mobile);
    }
    body.mt-route-recurring .recurring-kicker { margin-bottom: 5px; font-size: .61rem; }
    body.mt-route-recurring .recurring-heading-copy h1 { margin-bottom: 5px; font-size: 1.22rem; }
    body.mt-route-recurring .recurring-heading-copy .desc {
        margin: 0;
        max-width: 95%;
        color: var(--text-soft);
        font-size: .7rem;
        line-height: 1.55;
    }
    body.mt-route-recurring .recurring-page-actions {
        display: grid;
        grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
        gap: 8px;
        width: 100%;
        margin-top: 14px;
    }
    body.mt-route-recurring .recurring-page-actions .btn {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        padding-inline: 9px;
        border-radius: 14px;
        font-size: .69rem;
    }
    body.mt-route-recurring .recurring-pending-btn .badge { min-width: 21px; height: 21px; padding: 0 5px; }

    body.mt-route-recurring .recurring-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 15px;
    }
    body.mt-route-recurring .recurring-overview-item {
        min-height: 70px;
        gap: 8px;
        padding: 10px;
        border-radius: 17px;
        box-shadow: none;
    }
    body.mt-route-recurring .recurring-overview-icon {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
        border-radius: 11px;
        font-size: .88rem;
    }
    body.mt-route-recurring .recurring-overview-copy small {
        min-height: 2.4em;
        font-size: .59rem;
        line-height: 1.2;
    }
    body.mt-route-recurring .recurring-overview-copy strong { font-size: .94rem; }
    body.mt-route-recurring .recurring-overview-arrow { display: none; }

    body.mt-route-recurring .recurring-list-head { margin: 0 2px 8px; }
    body.mt-route-recurring .recurring-list-head h2 { font-size: .83rem; }
    body.mt-route-recurring .recurring-list-head p { font-size: .62rem; }
    body.mt-route-recurring .recur-list { gap: 10px; }

    body.mt-route-recurring .recur-card {
        display: block;
        padding: 14px;
        border-radius: 20px;
        box-shadow: 0 8px 24px rgba(15, 23, 42, .055);
    }
    body.mt-route-recurring .recur-accent {
        inset: 12px auto 12px 0;
        width: 3px;
        border-radius: 0 99px 99px 0;
    }
    body.mt-route-recurring .recur-main {
        display: grid;
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 10px;
        align-items: start;
    }
    body.mt-route-recurring .recur-ic {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
        border-radius: 14px;
        font-size: 1.05rem;
    }
    body.mt-route-recurring .recur-title-row { align-items: flex-start; gap: 6px; }
    body.mt-route-recurring .recur-title {
        padding-top: 1px;
        font-size: .82rem;
        line-height: 1.35;
        white-space: normal;
    }
    body.mt-route-recurring .recur-status { padding: 3px 6px; font-size: .53rem; }
    body.mt-route-recurring .recur-tags { gap: 5px; margin-top: 6px; }
    body.mt-route-recurring .freq-badge,
    body.mt-route-recurring .due-badge,
    body.mt-route-recurring .recur-category {
        max-width: 100%;
        padding: 3px 7px;
        font-size: .58rem;
    }

    body.mt-route-recurring .recur-value {
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin: 12px 0 0 56px;
        padding: 10px 11px;
        border-radius: 13px;
        background: var(--surface-2);
        text-align: left;
    }
    body.mt-route-recurring .recur-value-label { font-size: .61rem; }
    body.mt-route-recurring .recur-amount { margin: 0; font-size: .9rem; text-align: right; }

    body.mt-route-recurring .recur-schedule {
        margin-top: 9px;
        padding: 9px 2px 0;
    }
    body.mt-route-recurring .recur-schedule-icon {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
        border-radius: 10px;
    }
    body.mt-route-recurring .recur-schedule-copy small { font-size: .57rem; }
    body.mt-route-recurring .recur-schedule-copy strong { font-size: .67rem; }

    body.mt-route-recurring .recur-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
        width: 100%;
        margin-top: 10px;
        padding-top: 10px;
    }
    body.mt-route-recurring .recur-actions form { display: block !important; width: 100%; }
    body.mt-route-recurring .recur-action {
        width: 100%;
        min-width: 0;
        height: 40px;
        padding: 0 6px;
        border-radius: 12px;
        font-size: .62rem;
    }
    body.mt-route-recurring .recur-action i { font-size: .8rem; }
    body.mt-route-recurring .recur-action.edit { color: var(--primary-600); background: var(--primary-soft); border-color: transparent; }
    body.mt-route-recurring .recur-action.toggle { color: var(--text-soft); background: var(--surface-2); }
    body.mt-route-recurring .recur-action.delete { background: color-mix(in srgb, var(--danger-soft) 55%, var(--surface)); border-color: transparent; }

    body.mt-route-recurring .recurring-empty-card { border-radius: 22px; }
}

@media (max-width: 370px) {
    body.mt-route-recurring .recurring-page-actions { grid-template-columns: 1fr; }
    body.mt-route-recurring .recurring-overview { grid-template-columns: 1fr 1fr; }
    body.mt-route-recurring .recurring-overview-item { padding: 9px 8px; }
    body.mt-route-recurring .recur-value { margin-left: 0; }
    body.mt-route-recurring .recur-action span { display: none; }
    body.mt-route-recurring .recur-action { font-size: .8rem; }
}

/* =====================================================================
   MOBILE UI V4 — SAVINGS EDITOR + ACTIVITY TIMELINE
   Redesign khusus form Target Tabungan dan halaman Aktivitas Akun.
   ===================================================================== */

/* ---------- Editor target tabungan ---------- */
.savings-editor-hero {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
.savings-editor-back {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}
.savings-editor-back:hover { text-decoration: none; background: var(--surface-2); }
.savings-editor-kicker {
    display: block;
    margin-bottom: .2rem;
    color: var(--primary-600);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .055em;
    text-transform: uppercase;
}
.savings-editor-hero h1 { margin: 0; font-size: 1.42rem; }
.savings-editor-hero p { margin: .25rem 0 0; color: var(--text-soft); font-size: .78rem; }
.savings-editor-form { display: grid; gap: 1rem; }
.savings-editor-section { padding: 1.1rem; }
.savings-section-heading {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: 1rem;
}
.savings-section-number {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--primary);
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
}
.savings-section-heading h2 { margin: 0; font-size: .92rem; }
.savings-section-heading p { margin: .18rem 0 0; color: var(--text-soft); font-size: .7rem; line-height: 1.5; }
.goal-visual-editor {
    display: grid;
    grid-template-columns: minmax(230px, .85fr) minmax(270px, 1.15fr);
    gap: 1rem;
    align-items: stretch;
}
.savings-editor-form .goal-image-preview {
    position: relative;
    width: 100%;
    min-height: 210px;
    overflow: hidden;
    border: 1px dashed color-mix(in srgb, var(--primary) 25%, var(--border));
    border-radius: 18px;
    background:
        radial-gradient(130px 90px at 100% 0%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 72%),
        var(--surface-2);
}
.savings-editor-form .goal-image-preview.has-image { border-style: solid; }
.savings-editor-form .goal-image-preview img {
    width: 100%;
    height: 100%;
    min-height: 210px;
    display: block;
    object-fit: cover;
}
.savings-editor-form .goal-image-placeholder {
    min-height: 210px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: 1.2rem;
    text-align: center;
}
.goal-placeholder-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: var(--primary-soft);
    color: var(--primary-600);
    font-size: 1.45rem;
}
.savings-editor-form .goal-image-placeholder strong { font-size: .85rem; }
.savings-editor-form .goal-image-placeholder small { max-width: 220px; color: var(--text-soft); font-size: .67rem; line-height: 1.5; }
.goal-preview-label {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .55rem;
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 999px;
    background: rgba(15, 23, 42, .62);
    color: #fff;
    font-size: .61rem;
    font-weight: 700;
    backdrop-filter: blur(8px);
}
.goal-upload-panel {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface-2);
}
.goal-upload-copy strong,
.goal-upload-copy small { display: block; }
.goal-upload-copy strong { font-size: .82rem; }
.goal-upload-copy strong span {
    margin-left: .35rem;
    padding: .18rem .42rem;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary-600);
    font-size: .58rem;
}
.goal-upload-copy small { margin-top: .28rem; color: var(--text-soft); font-size: .66rem; line-height: 1.5; }
.goal-file-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
}
.goal-file-button {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-top: .85rem;
    padding: .65rem .9rem;
    border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border));
    border-radius: 13px;
    background: var(--surface);
    color: var(--primary-600);
    font-size: .74rem;
    font-weight: 750;
    cursor: pointer;
}
.goal-file-button:hover { background: var(--primary-soft); }
.goal-file-name {
    margin-top: .55rem;
    overflow: hidden;
    color: var(--text-soft);
    font-size: .65rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.goal-file-name.is-error { color: var(--danger); font-weight: 700; }
.goal-remove-image {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .75rem;
    color: var(--danger);
    font-size: .68rem;
    font-weight: 650;
    cursor: pointer;
}
.goal-remove-image input { width: 17px; height: 17px; accent-color: var(--danger); }
.goal-icon-section {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}
.goal-icon-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .7rem;
}
.goal-icon-heading strong,
.goal-icon-heading small { display: block; }
.goal-icon-heading strong { font-size: .78rem; }
.goal-icon-heading small { margin-top: .15rem; color: var(--text-soft); font-size: .64rem; }
.goal-icon-selected {
    width: 38px;
    height: 38px;
    display: grid;
    flex: 0 0 38px;
    place-items: center;
    border-radius: 12px;
    background: var(--primary-soft);
    color: var(--primary-600);
    font-size: 1rem;
}
.savings-editor-form .goal-icon-picker {
    grid-template-columns: repeat(10, minmax(0, 1fr));
    max-height: none;
    overflow: visible;
    gap: .45rem;
    padding: 0;
    border: 0;
}
.savings-editor-form .goal-icon-picker .icon-opt {
    width: 100%;
    min-width: 0;
    aspect-ratio: 1;
    border-radius: 12px;
}
.field-optional {
    margin-left: .3rem;
    color: var(--text-muted);
    font-size: .62rem;
    font-weight: 500;
}
.savings-target-grid { gap: .8rem; }
.savings-editor-actions {
    display: flex;
    justify-content: flex-end;
    gap: .65rem;
    padding: .2rem 0;
}
.savings-editor-actions .btn { min-width: 150px; }

/* ---------- Activity timeline ---------- */
.activity-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    margin-bottom: .85rem;
    padding: 1rem 1.1rem;
    border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
    border-radius: 18px;
    background:
        radial-gradient(180px 100px at 100% 0%, color-mix(in srgb, var(--primary) 13%, transparent), transparent 72%),
        var(--surface);
    box-shadow: var(--shadow-sm);
}
.activity-hero-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: var(--primary-soft);
    color: var(--primary-600);
    font-size: 1.18rem;
}
.activity-eyebrow {
    display: block;
    margin-bottom: .18rem;
    color: var(--primary-600);
    font-size: .63rem;
    font-weight: 800;
    letter-spacing: .055em;
    text-transform: uppercase;
}
.activity-hero h1 { margin: 0; font-size: 1.25rem; }
.activity-hero p { margin: .25rem 0 0; color: var(--text-soft); font-size: .72rem; line-height: 1.5; }
.activity-hero-count {
    min-width: 78px;
    padding: .65rem .75rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface-2);
    text-align: center;
}
.activity-hero-count strong,
.activity-hero-count span { display: block; }
.activity-hero-count strong { color: var(--primary-600); font-size: 1.15rem; }
.activity-hero-count span { margin-top: .08rem; color: var(--text-soft); font-size: .58rem; }
.activity-filters {
    display: flex;
    gap: .45rem;
    margin-bottom: 1rem;
    overflow-x: auto;
    padding: .1rem .05rem .35rem;
    scrollbar-width: none;
}
.activity-filters::-webkit-scrollbar { display: none; }
.activity-filter {
    min-height: 39px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    padding: .55rem .75rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-soft);
    font-size: .68rem;
    font-weight: 700;
    text-decoration: none;
}
.activity-filter:hover { text-decoration: none; background: var(--surface-2); }
.activity-filter.active {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
    box-shadow: 0 7px 17px color-mix(in srgb, var(--primary) 22%, transparent);
}
.activity-timeline { display: grid; gap: 1rem; }
.activity-day-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin: 0 .15rem .55rem;
}
.activity-day-head h2 { margin: 0; font-size: .79rem; }
.activity-day-head span { color: var(--text-muted); font-size: .62rem; }
.activity-cards { display: grid; gap: .55rem; }
.activity-card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
    padding: .85rem .9rem;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}
.activity-card::before {
    content: '';
    position: absolute;
    inset: 9px auto 9px 0;
    width: 3px;
    border-radius: 0 99px 99px 0;
    background: var(--activity-tone, var(--primary));
}
.activity-card-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: color-mix(in srgb, var(--activity-tone, var(--primary)) 11%, var(--surface));
    color: var(--activity-tone, var(--primary));
    font-size: 1rem;
}
.activity-tone-security { --activity-tone: #4f46e5; }
.activity-tone-transaction { --activity-tone: #0ea5e9; }
.activity-tone-wallet { --activity-tone: #10b981; }
.activity-tone-backup { --activity-tone: #8b5cf6; }
.activity-tone-category { --activity-tone: #f59e0b; }
.activity-tone-budget { --activity-tone: #f97316; }
.activity-tone-saving { --activity-tone: #7c3aed; }
.activity-tone-recurring { --activity-tone: #06b6d4; }
.activity-tone-debt { --activity-tone: #ef4444; }
.activity-tone-installment { --activity-tone: #ec4899; }
.activity-tone-profile { --activity-tone: #64748b; }
.activity-card-body { min-width: 0; }
.activity-card-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
    margin-bottom: .2rem;
}
.activity-type {
    color: var(--activity-tone, var(--primary));
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .025em;
    text-transform: uppercase;
}
.activity-card time { color: var(--text-muted); font-size: .62rem; font-variant-numeric: tabular-nums; }
.activity-card h3 {
    margin: 0;
    color: var(--text);
    font-size: .78rem;
    line-height: 1.45;
}
.activity-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem .8rem;
    margin-top: .38rem;
    color: var(--text-soft);
    font-size: .61rem;
}
.activity-card-meta span { display: inline-flex; align-items: center; gap: .28rem; min-width: 0; }
.activity-code {
    max-width: 150px;
    overflow: hidden;
    padding: .3rem .48rem;
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--text-soft);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .58rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.activity-empty {
    padding: 2.4rem 1.2rem;
    text-align: center;
}
.activity-empty-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin: 0 auto .75rem;
    border-radius: 18px;
    background: var(--primary-soft);
    color: var(--primary-600);
    font-size: 1.3rem;
}
.activity-empty h2 { margin: 0; font-size: .95rem; }
.activity-empty p { margin: .35rem auto .85rem; color: var(--text-soft); font-size: .7rem; }
.activity-pagination {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: .65rem;
    margin-top: 1rem;
}
.activity-pagination .btn:last-child { justify-self: end; }
.activity-page-number { color: var(--text-soft); font-size: .67rem; font-weight: 700; }

@media (max-width: 760px) {
    /* App bar HP hanya menampilkan logo, judul, dan notifikasi. */
    body.mt-mobile-shell-v2 .topbar .topbar-profile,
    body.mt-mobile-shell-v2 .topbar .mobile-tools-dropdown,
    body.mt-mobile-shell-v2 .topbar .mobile-tools-menu,
    body.mt-mobile-shell-v2 .topbar > *:has(.bi-three-dots) { display: none !important; }

    /* Editor target adalah layar tugas khusus, jadi bottom nav tidak ditampilkan. */
    body.page-savings-editor .mobile-bottom-nav,
    body.page-savings-editor .quick-add-fab { display: none !important; }
    body.page-savings-editor .page {
        padding: 13px var(--mobile-gutter) calc(28px + env(safe-area-inset-bottom, 0px));
        background: linear-gradient(180deg, color-mix(in srgb, var(--primary-soft) 28%, transparent) 0, transparent 170px);
    }
    .savings-editor-hero {
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 12px;
        padding: 14px;
        border: 1px solid color-mix(in srgb, var(--primary) 13%, var(--border));
        border-radius: 20px;
        background:
            radial-gradient(120px 80px at 100% 0%, color-mix(in srgb, var(--primary) 13%, transparent), transparent 72%),
            var(--surface);
        box-shadow: var(--shadow-mobile);
    }
    .savings-editor-back {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        border-radius: 12px;
        box-shadow: none;
    }
    .savings-editor-kicker { margin-top: 1px; font-size: .58rem; }
    .savings-editor-hero h1 { font-size: 1.14rem; line-height: 1.35; }
    .savings-editor-hero p { max-width: 96%; font-size: .67rem; line-height: 1.5; }
    .savings-editor-form { gap: 11px; }
    .savings-editor-section {
        overflow: hidden;
        padding: 14px;
        border-radius: 20px;
        box-shadow: 0 8px 25px rgba(15, 23, 42, .05);
    }
    .savings-section-heading { gap: 9px; margin-bottom: 13px; }
    .savings-section-number { width: 28px; height: 28px; flex-basis: 28px; border-radius: 9px; font-size: .66rem; }
    .savings-section-heading h2 { font-size: .82rem; }
    .savings-section-heading p { font-size: .62rem; }
    .goal-visual-editor { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .savings-editor-form .goal-image-preview,
    .savings-editor-form .goal-image-preview img,
    .savings-editor-form .goal-image-placeholder {
        min-height: 174px;
    }
    .savings-editor-form .goal-image-preview { aspect-ratio: 16 / 9; border-radius: 17px; }
    .savings-editor-form .goal-image-preview img { height: 100%; }
    .goal-placeholder-icon { width: 52px; height: 52px; border-radius: 16px; font-size: 1.25rem; }
    .savings-editor-form .goal-image-placeholder strong { font-size: .8rem; }
    .savings-editor-form .goal-image-placeholder small { font-size: .62rem; }
    .goal-upload-panel { padding: 12px; border-radius: 16px; }
    .goal-upload-copy strong { font-size: .75rem; }
    .goal-upload-copy small { font-size: .61rem; }
    .goal-file-button { width: 100%; min-height: 46px; margin-top: 10px; border-radius: 13px; }
    .goal-file-name { font-size: .61rem; }
    .goal-icon-section { margin-top: 13px; padding-top: 13px; }
    .goal-icon-heading { margin-bottom: 9px; }
    .goal-icon-heading strong { font-size: .73rem; }
    .goal-icon-heading small { font-size: .59rem; }
    .savings-editor-form .goal-icon-picker {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 7px;
    }
    .savings-editor-form .goal-icon-picker .icon-opt {
        min-height: 48px;
        aspect-ratio: auto;
        border-radius: 13px;
        font-size: 1rem;
    }
    .savings-target-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .savings-editor-form .field { margin-bottom: 14px; }
    .savings-editor-form .field:last-child { margin-bottom: 0; }
    .savings-editor-form label { font-size: .7rem; }
    .savings-editor-form .input,
    .savings-editor-form .input-prefix { min-height: 49px; border-radius: 14px; }
    .savings-editor-form textarea.input { min-height: 96px; }
    .savings-editor-actions {
        display: grid;
        grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
        gap: 9px;
        padding: 2px 0 0;
    }
    .savings-editor-actions .btn { min-width: 0; min-height: 50px; width: 100%; border-radius: 14px; }

    /* Aktivitas akun */
    body.mt-route-activity .page {
        padding-top: 12px;
        background: linear-gradient(180deg, color-mix(in srgb, var(--primary-soft) 27%, transparent) 0, transparent 155px);
    }
    .activity-hero {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 10px;
        margin-bottom: 10px;
        padding: 14px;
        border-radius: 20px;
        box-shadow: var(--shadow-mobile);
    }
    .activity-hero-icon { width: 44px; height: 44px; border-radius: 14px; font-size: 1.05rem; }
    .activity-eyebrow { font-size: .56rem; }
    .activity-hero h1 { font-size: 1.14rem; }
    .activity-hero p { max-width: 96%; font-size: .65rem; line-height: 1.55; }
    .activity-hero-count {
        grid-column: 1 / -1;
        min-width: 0;
        display: flex;
        align-items: baseline;
        justify-content: center;
        gap: .35rem;
        padding: 8px;
        border-radius: 12px;
    }
    .activity-hero-count strong,
    .activity-hero-count span { display: inline; }
    .activity-hero-count strong { font-size: .9rem; }
    .activity-hero-count span { font-size: .58rem; }
    .activity-filters {
        gap: 7px;
        margin: 0 calc(-1 * var(--mobile-gutter)) 12px;
        padding: 1px var(--mobile-gutter) 6px;
        scroll-padding-inline: var(--mobile-gutter);
    }
    .activity-filter { min-height: 40px; padding: 8px 11px; font-size: .64rem; }
    .activity-timeline { gap: 14px; }
    .activity-day-head { margin: 0 2px 7px; }
    .activity-day-head h2 { font-size: .74rem; }
    .activity-day-head span { font-size: .58rem; }
    .activity-cards { gap: 8px; }
    .activity-card {
        grid-template-columns: 42px minmax(0, 1fr);
        align-items: start;
        gap: 10px;
        padding: 12px;
        border-radius: 18px;
        box-shadow: 0 7px 22px rgba(15, 23, 42, .045);
    }
    .activity-card::before { inset-block: 12px; }
    .activity-card-icon { width: 42px; height: 42px; border-radius: 13px; }
    .activity-card-topline { margin-bottom: 3px; }
    .activity-type { font-size: .55rem; }
    .activity-card time { font-size: .58rem; }
    .activity-card h3 { font-size: .72rem; line-height: 1.48; }
    .activity-card-meta {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 3px;
        margin-top: 6px;
        font-size: .58rem;
    }
    .activity-card-meta span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .activity-code {
        grid-column: 1 / -1;
        max-width: 100%;
        margin-top: 1px;
        padding: 6px 8px;
        border-radius: 10px;
        font-size: .55rem;
    }
    .activity-empty { padding: 34px 16px; border-radius: 20px; }
    .activity-pagination {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .activity-pagination .btn { width: 100%; min-height: 44px; padding-inline: 8px; border-radius: 13px; font-size: .65rem; }
    .activity-page-number { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
    .activity-pagination .btn:first-child { grid-column: 1; grid-row: 2; }
    .activity-pagination .btn:last-child { grid-column: 2; grid-row: 2; }
}

@media (max-width: 370px) {
    .savings-editor-section { padding: 12px; }
    .savings-editor-form .goal-icon-picker { gap: 6px; }
    .savings-editor-form .goal-icon-picker .icon-opt { min-height: 44px; }
    .savings-editor-actions { grid-template-columns: 1fr; }
    .activity-hero { padding: 12px; }
    .activity-card { padding: 11px; }
}

/* Netralisasi gaya placeholder versi lama pada editor target V4. */
.savings-editor-form .goal-image-placeholder .goal-placeholder-icon {
    color: var(--primary-600);
    font-weight: 400;
}
.savings-editor-form .goal-image-placeholder .goal-placeholder-icon i {
    width: auto;
    height: auto;
    display: inline;
    margin: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-size: inherit;
}

/* =====================================================================
   MONATRACK MOBILE V5 — DOMPET, PENCARIAN GLOBAL, DAN AKSES TEMA
   - Ringkasan dompet lebih padat dan mudah dipindai di layar HP.
   - Pencarian global hadir sebagai bottom sheet.
   - Mode gelap kembali tersedia langsung dari app bar mobile.
   ===================================================================== */
.wallet-page-kicker,
.wallet-list-kicker {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    color: var(--primary-600);
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .055em;
    text-transform: uppercase;
}
.wallet-page-kicker { margin-bottom: .35rem; }
.wallet-list-kicker { margin-bottom: .18rem; }
.wallet-count-badge strong { color: var(--text); }
.wallet-overview-stats i {
    display: none;
    color: var(--primary-600);
}
.wallet-action-title {
    display: block;
    padding: .45rem .6rem .35rem;
    color: var(--text-soft);
    font-size: .62rem;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wallet-manage-menu > summary {
    width: auto;
    min-width: 76px;
    height: 36px;
    padding: 0 .65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .38rem;
    font-size: .68rem;
    font-weight: 700;
}
.wallet-manage-menu > summary span { display: inline; }
.mobile-search-backdrop { display: none; }

@media (max-width: 760px) {
    /* App bar mobile: logo + judul + cari + tema + notifikasi. */
    body.mt-mobile-shell-v2 .topbar {
        gap: 6px;
        padding-inline: 10px;
    }
    body.mt-mobile-shell-v2 .topbar .topbar-title-stack {
        min-width: 58px;
        margin-right: auto;
    }
    body.mt-mobile-shell-v2 .topbar .topbar-mobile-search,
    body.mt-mobile-shell-v2 .topbar .topbar-theme,
    body.mt-mobile-shell-v2 .topbar .topbar-notifications {
        display: grid !important;
        place-items: center;
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        padding: 0;
        border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
        border-radius: 13px;
        background: color-mix(in srgb, var(--surface-2) 92%, transparent);
        color: var(--text-soft);
        box-shadow: none;
    }
    body.mt-mobile-shell-v2 .topbar .topbar-mobile-search:active,
    body.mt-mobile-shell-v2 .topbar .topbar-theme:active,
    body.mt-mobile-shell-v2 .topbar .topbar-notifications:active {
        transform: scale(.94);
        background: var(--primary-soft);
        color: var(--primary-600);
    }
    body.mt-mobile-shell-v2 .topbar .topbar-theme i,
    body.mt-mobile-shell-v2 .topbar .topbar-mobile-search i,
    body.mt-mobile-shell-v2 .topbar .topbar-notifications i { font-size: 1rem; }
    body.mt-mobile-shell-v2 .topbar .topbar-privacy,
    body.mt-mobile-shell-v2 .topbar .topbar-profile { display: none !important; }

    /* Mobile global search bottom sheet. */
    body.mobile-search-open { overflow: hidden; touch-action: none; }
    .mobile-search-backdrop {
        position: fixed;
        z-index: 240;
        inset: 0;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        padding: 18px 12px calc(14px + env(safe-area-inset-bottom, 0px));
        background: rgba(15, 23, 42, .42);
        opacity: 0;
        visibility: hidden;
        transition: opacity .2s ease, visibility .2s ease;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }
    .mobile-search-backdrop[hidden] { display: none !important; }
    .mobile-search-backdrop.is-open { opacity: 1; visibility: visible; }
    .mobile-search-sheet {
        width: min(100%, 520px);
        padding: 16px;
        border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
        border-radius: 25px;
        background: var(--surface);
        box-shadow: 0 28px 80px rgba(15, 23, 42, .28);
        transform: translate3d(0, 24px, 0) scale(.985);
        transition: transform .22s cubic-bezier(.2,.72,.28,1);
    }
    .mobile-search-backdrop.is-open .mobile-search-sheet { transform: translate3d(0, 0, 0) scale(1); }
    .mobile-search-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 14px;
    }
    .mobile-search-kicker {
        display: block;
        margin-bottom: 2px;
        color: var(--primary-600);
        font-size: .59rem;
        font-weight: 800;
        letter-spacing: .065em;
        text-transform: uppercase;
    }
    .mobile-search-head h2 { margin: 0; font-size: 1.06rem; }
    .mobile-search-close {
        width: 38px;
        height: 38px;
        display: grid;
        flex: 0 0 38px;
        place-items: center;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--surface-2);
        color: var(--text-soft);
        font-size: .95rem;
    }
    .mobile-search-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 48px;
        gap: 8px;
    }
    .mobile-search-form label {
        position: relative;
        min-width: 0;
        display: flex;
        align-items: center;
    }
    .mobile-search-form label > i {
        position: absolute;
        left: 14px;
        z-index: 1;
        color: var(--text-muted);
    }
    .mobile-search-form input {
        width: 100%;
        min-width: 0;
        height: 50px;
        padding: 0 13px 0 42px;
        border: 1.5px solid var(--border);
        border-radius: 15px;
        outline: 0;
        background: var(--surface-2);
        color: var(--text);
        font: inherit;
        font-size: .76rem;
    }
    .mobile-search-form input:focus {
        border-color: var(--primary);
        background: var(--surface);
        box-shadow: 0 0 0 4px var(--primary-soft);
    }
    .mobile-search-form .btn {
        width: 48px;
        min-width: 48px;
        height: 50px;
        padding: 0;
        border-radius: 15px;
    }
    .mobile-search-form .btn span { display: none; }
    .mobile-search-shortcuts {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 7px;
        margin-top: 12px;
    }
    .mobile-search-shortcuts a {
        min-width: 0;
        min-height: 66px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 8px 5px;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--surface-2);
        color: var(--text-soft);
        text-align: center;
    }
    .mobile-search-shortcuts a:hover { text-decoration: none; }
    .mobile-search-shortcuts a i { color: var(--primary-600); font-size: 1rem; }
    .mobile-search-shortcuts a span {
        max-width: 100%;
        overflow: hidden;
        font-size: .58rem;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .mobile-search-help {
        display: flex;
        align-items: flex-start;
        gap: 6px;
        margin: 12px 2px 0;
        color: var(--text-muted);
        font-size: .59rem;
        line-height: 1.5;
    }
    .mobile-search-help i { margin-top: 1px; color: var(--warning); }

    /* ---------------- Dompet & Rekening mobile ---------------- */
    body.mt-route-wallets .page {
        padding-top: 12px;
        background: linear-gradient(180deg, color-mix(in srgb, var(--primary-soft) 32%, transparent) 0, transparent 230px);
    }
    body.mt-route-wallets .wallets-page-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 46px;
        align-items: center;
        gap: 10px;
        margin: 0 0 11px;
        padding: 14px;
        border: 1px solid color-mix(in srgb, var(--primary) 13%, var(--border));
        border-radius: 21px;
        background:
            radial-gradient(130px 80px at 100% 0%, color-mix(in srgb, var(--primary) 13%, transparent), transparent 72%),
            var(--surface);
        box-shadow: var(--shadow-mobile);
    }
    body.mt-route-wallets .wallet-heading-copy { min-width: 0; }
    body.mt-route-wallets .wallet-page-kicker { margin-bottom: 3px; font-size: .56rem; }
    body.mt-route-wallets .wallets-page-head h1 { margin: 0 0 3px; font-size: 1.12rem; line-height: 1.28; }
    body.mt-route-wallets .wallets-page-head .desc {
        display: -webkit-box;
        margin: 0;
        overflow: hidden;
        color: var(--text-soft);
        font-size: .63rem;
        line-height: 1.45;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
    body.mt-route-wallets .wallet-add-button {
        width: 46px !important;
        min-width: 46px;
        height: 46px;
        min-height: 46px;
        padding: 0;
        border-radius: 15px;
        box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 24%, transparent);
    }
    body.mt-route-wallets .wallet-add-button span { display: none; }

    body.mt-route-wallets .wallet-overview {
        display: block;
        margin: 0 0 15px;
        padding: 15px;
        border: 0;
        border-radius: 23px;
        background:
            radial-gradient(180px 120px at 100% -15%, rgba(255,255,255,.2), transparent 72%),
            linear-gradient(145deg, var(--primary-600), #6d5dfc 58%, #7c6cff);
        color: #fff;
        box-shadow: 0 18px 34px rgba(79, 70, 229, .22);
    }
    body.mt-route-wallets .wallet-overview-main {
        gap: 11px;
        padding: 0 1px 13px;
    }
    body.mt-route-wallets .wallet-overview-icon {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
        border: 1px solid rgba(255,255,255,.24);
        border-radius: 14px;
        background: rgba(255,255,255,.15);
        box-shadow: none;
        font-size: 1rem;
    }
    body.mt-route-wallets .wallet-overview-copy { min-width: 0; }
    body.mt-route-wallets .wallet-overview .eyebrow { color: rgba(255,255,255,.78); font-size: .57rem; }
    body.mt-route-wallets .wallet-total {
        margin: 1px 0 2px;
        color: #fff;
        font-size: 1.75rem;
        letter-spacing: -.045em;
    }
    body.mt-route-wallets .wallet-overview-main p { color: rgba(255,255,255,.74); font-size: .59rem; }
    body.mt-route-wallets .wallet-overview-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        border: 1px solid rgba(255,255,255,.16);
        border-radius: 16px;
        background: rgba(255,255,255,.1);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
    body.mt-route-wallets .wallet-overview-stats > div {
        min-width: 0;
        padding: 9px 7px;
        border-right-color: rgba(255,255,255,.14);
        border-bottom: 0;
        text-align: center;
    }
    body.mt-route-wallets .wallet-overview-stats i {
        display: block;
        margin-bottom: 3px;
        color: rgba(255,255,255,.88);
        font-size: .75rem;
    }
    body.mt-route-wallets .wallet-overview-stats span,
    body.mt-route-wallets .wallet-overview-stats small {
        display: block;
        overflow: hidden;
        color: rgba(255,255,255,.68);
        font-size: .5rem;
        line-height: 1.35;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    body.mt-route-wallets .wallet-overview-stats strong {
        display: block;
        margin: 1px 0;
        color: #fff;
        font-size: .72rem;
    }

    body.mt-route-wallets .wallets-section-title {
        align-items: center;
        gap: 10px;
        margin: 0 2px 9px;
    }
    body.mt-route-wallets .wallets-section-title > div { min-width: 0; }
    body.mt-route-wallets .wallet-list-kicker { font-size: .53rem; }
    body.mt-route-wallets .wallets-section-title h2 { margin: 0 0 2px; font-size: .94rem; }
    body.mt-route-wallets .wallets-section-title p {
        display: -webkit-box;
        margin: 0;
        overflow: hidden;
        color: var(--text-soft);
        font-size: .59rem;
        line-height: 1.4;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
    body.mt-route-wallets .wallet-count-badge {
        min-width: 52px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 7px 9px;
        border-radius: 14px;
        font-size: .52rem;
        line-height: 1.25;
    }
    body.mt-route-wallets .wallet-count-badge strong { font-size: .72rem; }

    body.mt-route-wallets .wallet-card-grid { gap: 10px; }
    body.mt-route-wallets .wallet-card-v2 {
        padding: 14px;
        border-radius: 21px;
        border-color: color-mix(in srgb, var(--wallet-color) 12%, var(--border));
        box-shadow: 0 8px 26px rgba(15, 23, 42, .055);
    }
    body.mt-route-wallets .wallet-card-v2.is-inactive { opacity: .78; filter: saturate(.76); }
    body.mt-route-wallets .wallet-accent {
        top: 0;
        left: 15px;
        right: 15px;
        height: 3px;
    }
    body.mt-route-wallets .wallet-card-header { align-items: center; gap: 8px; }
    body.mt-route-wallets .wallet-identity { gap: 10px; }
    body.mt-route-wallets .wallet-card-icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        border-radius: 13px;
        font-size: .98rem;
    }
    body.mt-route-wallets .wallet-identity h3 { font-size: .78rem; }
    body.mt-route-wallets .wallet-identity p { font-size: .57rem; }
    body.mt-route-wallets .wallet-status { padding: 5px 8px; font-size: .54rem; }

    body.mt-route-wallets .wallet-balance-block {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 12px;
        margin: 12px 0 8px;
        padding: 11px 12px;
        border: 1px solid color-mix(in srgb, var(--wallet-color) 10%, var(--border));
        border-radius: 15px;
        background: color-mix(in srgb, var(--wallet-color) 6%, var(--surface-2));
    }
    body.mt-route-wallets .wallet-balance-block span { margin: 0; font-size: .57rem; }
    body.mt-route-wallets .wallet-balance-block strong {
        min-width: 0;
        overflow: hidden;
        font-size: 1.1rem;
        text-align: right;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    body.mt-route-wallets .wallet-card-details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        margin-bottom: 9px;
    }
    body.mt-route-wallets .wallet-card-details > div {
        min-height: 52px;
        padding: 8px 9px;
        border: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
        border-radius: 13px;
        background: var(--surface-2);
    }
    body.mt-route-wallets .wallet-card-details i { font-size: .72rem; }
    body.mt-route-wallets .wallet-card-details span { font-size: .52rem; }
    body.mt-route-wallets .wallet-card-details strong { font-size: .64rem; }

    body.mt-route-wallets .wallet-card-footer {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, .82fr) minmax(0, .9fr);
        gap: 7px;
        padding-top: 10px;
    }
    body.mt-route-wallets .wallet-card-footer .btn,
    body.mt-route-wallets .wallet-manage-menu > summary {
        width: 100%;
        min-width: 0;
        min-height: 39px;
        height: 39px;
        padding: 0 7px;
        border-radius: 12px;
        font-size: .59rem;
    }
    body.mt-route-wallets .wallet-card-footer .btn { gap: 5px; }
    body.mt-route-wallets .wallet-manage-menu { min-width: 0; }
    body.mt-route-wallets .wallet-manage-menu > summary {
        display: flex;
        border-color: var(--border);
        background: var(--surface);
        color: var(--text-soft);
    }
    body.mt-route-wallets .wallet-action-popover {
        top: auto;
        right: 0;
        bottom: calc(100% + 8px);
        width: min(232px, calc(100vw - 48px));
        padding: 6px;
        border-radius: 15px;
        box-shadow: 0 18px 48px rgba(15,23,42,.2);
    }
    body.mt-route-wallets .wallet-action-popover button {
        min-height: 42px;
        padding: 9px 10px;
        border-radius: 11px;
        font-size: .65rem;
    }
    body.mt-route-wallets .wallet-empty-state { padding: 28px 16px; border-radius: 21px; }
}

@media (max-width: 410px) {
    body.mt-mobile-shell-v2 .topbar {
        gap: 5px;
        padding-inline: 8px;
    }
    body.mt-mobile-shell-v2 .mobile-topbar-brand {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
        border-radius: 12px;
    }
    body.mt-mobile-shell-v2 .mobile-topbar-brand img { width: 30px; height: 30px; }
    body.mt-mobile-shell-v2 .topbar .topbar-mobile-search,
    body.mt-mobile-shell-v2 .topbar .topbar-theme,
    body.mt-mobile-shell-v2 .topbar .topbar-notifications {
        width: 35px;
        height: 35px;
        flex-basis: 35px;
        border-radius: 11px;
    }
    body.mt-mobile-shell-v2 .topbar .page-title { font-size: .82rem; }
    body.mt-mobile-shell-v2 .mobile-topbar-kicker { display: none; }
    body.mt-route-wallets .wallet-overview-stats > div { padding-inline: 4px; }
    body.mt-route-wallets .wallet-card-footer { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    body.mt-route-wallets .wallet-card-footer .btn span,
    body.mt-route-wallets .wallet-manage-menu > summary span { font-size: .55rem; }
}

:root[data-theme="dark"] .mobile-search-backdrop { background: rgba(2, 6, 23, .68); }
:root[data-theme="dark"] .mobile-search-sheet { box-shadow: 0 28px 80px rgba(0,0,0,.55); }
:root[data-theme="dark"] body.mt-route-wallets .wallet-overview {
    background:
        radial-gradient(180px 120px at 100% -15%, rgba(255,255,255,.12), transparent 72%),
        linear-gradient(145deg, #3730a3, #4f46e5 58%, #5b55dc);
    box-shadow: 0 18px 36px rgba(0,0,0,.28);
}
:root[data-theme="dark"] body.mt-route-wallets .wallet-card-v2 {
    box-shadow: 0 10px 28px rgba(0,0,0,.19);
}

/* =====================================================================
   Mobile logout action
   Tombol logout diletakkan di bagian bawah drawer Menu agar mudah ditemukan
   tanpa memenuhi app bar dan tidak mudah terpencet saat navigasi biasa.
   ===================================================================== */
.sidebar-logout {
    display: none;
}

@media (max-width: 760px) {
    .sidebar-foot {
        display: grid;
        gap: 9px;
    }

    .sidebar-logout {
        min-height: 54px;
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 8px 10px;
        border: 1px solid color-mix(in srgb, var(--danger) 22%, var(--border));
        border-radius: 15px;
        background: color-mix(in srgb, var(--danger) 8%, var(--surface));
        color: var(--danger);
        text-decoration: none;
        transition: background .16s ease, border-color .16s ease, transform .16s ease;
    }

    .sidebar-logout:hover,
    .sidebar-logout:focus-visible {
        border-color: color-mix(in srgb, var(--danger) 38%, var(--border));
        background: color-mix(in srgb, var(--danger) 13%, var(--surface));
        color: var(--danger);
        text-decoration: none;
    }

    .sidebar-logout:active {
        transform: scale(.985);
    }

    .sidebar-logout-icon {
        width: 38px;
        height: 38px;
        display: grid;
        flex: 0 0 38px;
        place-items: center;
        border-radius: 12px;
        background: color-mix(in srgb, var(--danger) 13%, transparent);
        font-size: 1.02rem;
    }

    .sidebar-logout-copy {
        min-width: 0;
        display: grid;
        gap: 1px;
        line-height: 1.25;
    }

    .sidebar-logout-copy strong {
        font-size: .86rem;
        font-weight: 750;
    }

    .sidebar-logout-copy small {
        color: color-mix(in srgb, var(--danger) 68%, var(--text-muted));
        font-size: .69rem;
        font-weight: 500;
    }

    :root[data-theme="dark"] .sidebar-logout {
        background: color-mix(in srgb, var(--danger) 12%, var(--surface));
    }
}

/* =====================================================================
   Transactions mobile redesign V6
   Daftar HP menggunakan kartu native, bukan tabel desktop yang dipecah.
   ===================================================================== */
.transaction-mobile-list {
    display: none;
}

@media (max-width: 760px) {
    body.mt-route-transactions .page {
        padding-bottom: calc(var(--mobile-bottom-h, 72px) + env(safe-area-inset-bottom, 0px) + 24px);
    }

    body.mt-route-transactions .page-head {
        gap: 10px;
        margin-bottom: 12px;
    }

    body.mt-route-transactions .page-head h1 {
        font-size: 1.25rem;
    }

    body.mt-route-transactions .page-head .desc {
        font-size: .72rem;
        line-height: 1.5;
    }

    body.mt-route-transactions .page-head-actions .btn {
        min-height: 44px;
        border-radius: 14px;
        box-shadow: 0 9px 22px color-mix(in srgb, var(--primary) 24%, transparent);
    }

    /* Ringkasan dapat digeser agar tidak menjadi tiga kartu tinggi. */
    body.mt-route-transactions .transaction-stat-grid {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(142px, 43vw);
        grid-template-columns: none;
        gap: 9px;
        margin: 0 calc(var(--mobile-gutter, 14px) * -1) 13px;
        padding: 0 var(--mobile-gutter, 14px) 3px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: inline proximity;
        scrollbar-width: none;
    }

    body.mt-route-transactions .transaction-stat-grid::-webkit-scrollbar {
        display: none;
    }

    body.mt-route-transactions .transaction-stat-grid .stat-card {
        min-height: 104px;
        padding: 12px;
        scroll-snap-align: start;
        border-radius: 17px;
    }

    body.mt-route-transactions .transaction-stat-grid .stat-card .ic {
        width: 32px;
        height: 32px;
        margin-bottom: 7px;
        border-radius: 10px;
        font-size: .86rem;
    }

    body.mt-route-transactions .transaction-stat-grid .stat-card .lbl {
        font-size: .6rem;
    }

    body.mt-route-transactions .transaction-stat-grid .stat-card .val,
    body.mt-route-transactions .transaction-stat-grid .stat-card .val[style] {
        margin-top: 2px;
        font-size: .88rem !important;
    }

    /* Filter tetap lengkap tetapi lebih rapat dan mudah disentuh. */
    body.mt-route-transactions .transaction-filter {
        margin-bottom: 13px;
        padding: 12px;
        border-radius: 18px;
    }

    body.mt-route-transactions .transaction-filter .filter-search-row {
        gap: 8px;
        margin-bottom: 10px;
    }

    body.mt-route-transactions .transaction-filter .search .input {
        min-height: 44px;
        border-radius: 13px;
    }

    body.mt-route-transactions .transaction-filter .filter-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, .78fr);
        gap: 7px;
    }

    body.mt-route-transactions .transaction-filter .filter-actions .btn {
        min-width: 0;
        min-height: 41px;
        padding-inline: 8px;
        font-size: .68rem;
    }

    body.mt-route-transactions .transaction-filter .filter-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    body.mt-route-transactions .transaction-filter .fc label {
        margin-bottom: 4px;
        font-size: .58rem;
    }

    body.mt-route-transactions .transaction-filter .fc select {
        min-height: 40px;
        padding: .55rem 1.85rem .55rem .7rem;
        border-radius: 12px;
        font-size: .67rem;
    }

    body.mt-route-transactions .transaction-list-card.has-rows {
        min-height: 0;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    body.mt-route-transactions .transaction-desktop-list {
        display: none;
    }

    body.mt-route-transactions .transaction-mobile-list {
        display: grid;
        gap: 10px;
    }

    body.mt-route-transactions .transaction-mobile-toolbar {
        min-height: 58px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 12px;
        border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
        border-radius: 17px;
        background: var(--surface);
        box-shadow: 0 7px 22px rgba(15, 23, 42, .045);
    }

    body.mt-route-transactions .transaction-mobile-count {
        min-width: 0;
        display: grid;
        gap: 2px;
    }

    body.mt-route-transactions .transaction-mobile-count span,
    body.mt-route-transactions .transaction-mobile-perpage > span {
        color: var(--text-muted);
        font-size: .58rem;
        font-weight: 650;
        line-height: 1.2;
    }

    body.mt-route-transactions .transaction-mobile-count strong {
        color: var(--text);
        font-size: .76rem;
        font-weight: 800;
        line-height: 1.25;
    }

    body.mt-route-transactions .transaction-mobile-perpage {
        min-width: 92px;
        display: grid;
        grid-template-columns: auto 48px;
        align-items: center;
        gap: 7px;
    }

    body.mt-route-transactions .transaction-mobile-perpage > span {
        text-align: right;
    }

    body.mt-route-transactions .transaction-mobile-perpage .input {
        width: 48px;
        min-height: 37px;
        padding: 0 18px 0 8px;
        border-radius: 11px;
        font-size: .7rem;
        font-weight: 750;
        text-align: center;
    }

    body.mt-route-transactions .transaction-mobile-cards {
        display: grid;
        gap: 10px;
    }

    body.mt-route-transactions .transaction-mobile-card {
        position: relative;
        min-width: 0;
        overflow: hidden;
        padding: 13px;
        border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
        border-radius: 20px;
        background: var(--surface);
        box-shadow: 0 9px 28px rgba(15, 23, 42, .055);
    }

    body.mt-route-transactions .transaction-mobile-card::before {
        content: '';
        position: absolute;
        inset: 0 auto 0 0;
        width: 3px;
        border-radius: 0 5px 5px 0;
        background: var(--primary-500, var(--primary));
    }

    body.mt-route-transactions .transaction-mobile-card.is-income::before {
        background: var(--income, #16a34a);
    }

    body.mt-route-transactions .transaction-mobile-card.is-expense::before {
        background: var(--expense, #f97316);
    }

    body.mt-route-transactions .transaction-mobile-card.is-saving::before {
        background: var(--saving, #7c3aed);
    }

    body.mt-route-transactions .tmc-main {
        min-width: 0;
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        color: inherit;
        text-decoration: none;
    }

    body.mt-route-transactions .tmc-category-icon {
        --tmc-color: #64748b;
        width: 42px;
        height: 42px;
        display: grid;
        place-items: center;
        border: 1px solid color-mix(in srgb, var(--tmc-color) 12%, transparent);
        border-radius: 13px;
        background: color-mix(in srgb, var(--tmc-color) 12%, var(--surface));
        color: var(--tmc-color);
        font-size: .95rem;
    }

    body.mt-route-transactions .tmc-copy {
        min-width: 0;
        display: grid;
        gap: 3px;
    }

    body.mt-route-transactions .tmc-copy strong {
        min-width: 0;
        overflow: hidden;
        color: var(--text);
        font-size: .78rem;
        font-weight: 800;
        line-height: 1.35;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.mt-route-transactions .tmc-copy > span {
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 4px;
        overflow: hidden;
        color: var(--text-muted);
        font-size: .59rem;
        line-height: 1.35;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.mt-route-transactions .tmc-copy > span i {
        color: color-mix(in srgb, var(--text-muted) 72%, transparent);
        font-size: .52rem;
        font-style: normal;
    }

    body.mt-route-transactions .tmc-amount {
        min-width: 88px;
        display: grid;
        justify-items: end;
        gap: 3px;
        text-align: right;
    }

    body.mt-route-transactions .tmc-amount small {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        color: var(--text-muted);
        font-size: .52rem;
        font-weight: 700;
        white-space: nowrap;
    }

    body.mt-route-transactions .tmc-amount strong {
        max-width: 128px;
        overflow: hidden;
        font-size: .78rem;
        font-weight: 850;
        line-height: 1.3;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.mt-route-transactions .tmc-meta {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 11px;
        padding-top: 10px;
        overflow-x: auto;
        border-top: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
        scrollbar-width: none;
    }

    body.mt-route-transactions .tmc-meta::-webkit-scrollbar {
        display: none;
    }

    body.mt-route-transactions .tmc-meta > span {
        min-height: 28px;
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        gap: 5px;
        padding: 5px 8px;
        border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
        border-radius: 10px;
        background: var(--surface-2);
        color: var(--text-soft);
        font-size: .56rem;
        font-weight: 650;
        white-space: nowrap;
    }

    body.mt-route-transactions .tmc-meta > span i {
        color: var(--primary-600);
        font-size: .65rem;
    }

    body.mt-route-transactions .tmc-meta .tmc-split {
        color: var(--saving, #7c3aed);
    }

    body.mt-route-transactions .tmc-notes {
        display: -webkit-box;
        margin: 9px 0 0;
        overflow: hidden;
        color: var(--text-soft);
        font-size: .61rem;
        line-height: 1.5;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    body.mt-route-transactions .tmc-notes i {
        margin-right: 6px;
        color: var(--text-muted);
    }

    body.mt-route-transactions .tmc-actions {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, .9fr) minmax(0, .9fr);
        gap: 7px;
        margin-top: 11px;
    }

    body.mt-route-transactions .tmc-actions > form {
        min-width: 0;
        margin: 0;
    }

    body.mt-route-transactions .tmc-actions .btn {
        width: 100%;
        min-width: 0;
        min-height: 38px;
        justify-content: center;
        gap: 5px;
        padding: 0 7px;
        border-radius: 12px;
        font-size: .6rem;
        font-weight: 750;
        white-space: nowrap;
    }

    body.mt-route-transactions .tmc-detail-btn {
        border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
        background: color-mix(in srgb, var(--primary) 9%, var(--surface));
        color: var(--primary-600);
    }

    body.mt-route-transactions .tmc-delete-btn {
        border: 1px solid color-mix(in srgb, var(--danger) 18%, var(--border));
        background: color-mix(in srgb, var(--danger) 7%, var(--surface));
        color: var(--danger);
    }

    body.mt-route-transactions .pagination {
        margin-top: 14px;
        padding-bottom: 3px;
    }

    body.mt-route-transactions .pagination a,
    body.mt-route-transactions .pagination span {
        width: 38px;
        height: 38px;
        min-width: 38px;
        border-radius: 11px;
        font-size: .68rem;
    }
}

@media (max-width: 430px) {
    body.mt-route-transactions .transaction-filter .filter-controls {
        grid-template-columns: 1fr 1fr;
    }

    body.mt-route-transactions .tmc-main {
        grid-template-columns: 40px minmax(0, 1fr);
        align-items: start;
    }

    body.mt-route-transactions .tmc-category-icon {
        width: 40px;
        height: 40px;
    }

    body.mt-route-transactions .tmc-amount {
        grid-column: 2;
        min-width: 0;
        justify-items: start;
        margin-top: 4px;
        text-align: left;
    }

    body.mt-route-transactions .tmc-amount small {
        display: none;
    }

    body.mt-route-transactions .tmc-amount strong {
        max-width: 100%;
        font-size: .8rem;
    }
}

@media (max-width: 350px) {
    body.mt-route-transactions .transaction-filter .filter-controls {
        grid-template-columns: 1fr;
    }

    body.mt-route-transactions .transaction-mobile-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    body.mt-route-transactions .transaction-mobile-perpage {
        width: 100%;
        grid-template-columns: 1fr 52px;
    }

    body.mt-route-transactions .transaction-mobile-perpage > span {
        text-align: left;
    }

    body.mt-route-transactions .tmc-actions {
        grid-template-columns: 1fr 1fr;
    }

    body.mt-route-transactions .tmc-actions .tmc-detail-btn {
        grid-column: 1 / -1;
    }
}

:root[data-theme="dark"] body.mt-route-transactions .transaction-mobile-toolbar,
:root[data-theme="dark"] body.mt-route-transactions .transaction-mobile-card {
    box-shadow: 0 10px 28px rgba(0, 0, 0, .2);
}

/* =====================================================================
   Transactions mobile filter refinement V6.1
   Filter HP dibuat terpisah dari desktop: tipe berupa pilihan cepat,
   periode selalu terlihat, filter tambahan bisa dibuka saat diperlukan.
   ===================================================================== */
.transaction-filter-mobile {
    display: none;
}

@media (max-width: 760px) {
    body.mt-route-transactions .transaction-filter-desktop {
        display: none;
    }

    body.mt-route-transactions .transaction-filter-mobile {
        display: block;
        margin-bottom: 14px;
        padding: 14px;
        overflow: visible;
        border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
        border-radius: 20px;
        background:
            linear-gradient(180deg,
                color-mix(in srgb, var(--surface) 98%, var(--primary) 2%),
                var(--surface));
        box-shadow: 0 12px 30px color-mix(in srgb, var(--shadow-color, #17233f) 9%, transparent);
    }

    body.mt-route-transactions .mt-mobile-filter-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 11px;
    }

    body.mt-route-transactions .mt-mobile-filter-head > div {
        min-width: 0;
        display: grid;
        gap: 2px;
    }

    body.mt-route-transactions .mt-mobile-filter-head strong {
        color: var(--text);
        font-size: .9rem;
        font-weight: 800;
        letter-spacing: -.015em;
    }

    body.mt-route-transactions .mt-mobile-filter-head > div > span {
        overflow: hidden;
        color: var(--text-muted);
        font-size: .65rem;
        font-weight: 600;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.mt-route-transactions .mt-mobile-filter-active {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        min-height: 28px;
        padding: 0 9px;
        border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
        border-radius: 999px;
        background: color-mix(in srgb, var(--primary) 9%, var(--surface));
        color: var(--primary-600);
        font-size: .61rem;
        font-weight: 750;
    }

    body.mt-route-transactions .mt-mobile-filter-search {
        position: relative;
        margin-bottom: 13px;
    }

    body.mt-route-transactions .mt-mobile-filter-search > i {
        left: 14px;
        color: var(--text-muted);
        font-size: .9rem;
    }

    body.mt-route-transactions .mt-mobile-filter-search .input {
        width: 100%;
        min-height: 48px;
        padding-left: 42px;
        border-radius: 14px;
        background: color-mix(in srgb, var(--surface) 96%, var(--page-bg));
        font-size: .76rem;
    }

    body.mt-route-transactions .mt-mobile-filter-group {
        display: grid;
        gap: 7px;
        margin-top: 12px;
    }

    body.mt-route-transactions .mt-mobile-filter-label,
    body.mt-route-transactions .mt-mobile-filter-field > span {
        color: var(--text-muted);
        font-size: .59rem;
        font-weight: 800;
        letter-spacing: .045em;
        text-transform: uppercase;
    }

    body.mt-route-transactions .mt-mobile-type-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    body.mt-route-transactions .mt-mobile-type-option {
        min-width: 0;
        cursor: pointer;
    }

    body.mt-route-transactions .mt-mobile-type-option input {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
    }

    body.mt-route-transactions .mt-mobile-type-option > span {
        min-height: 43px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        padding: 0 11px;
        overflow: hidden;
        border: 1px solid var(--border);
        border-radius: 13px;
        background: color-mix(in srgb, var(--surface) 97%, var(--page-bg));
        color: var(--text-secondary);
        font-size: .68rem;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
        transition: border-color .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
    }

    body.mt-route-transactions .mt-mobile-type-option > span > i {
        flex: 0 0 auto;
        width: 25px;
        height: 25px;
        display: grid;
        place-items: center;
        border-radius: 8px;
        background: color-mix(in srgb, var(--text-muted) 9%, transparent);
        font-size: .75rem;
    }

    body.mt-route-transactions .mt-mobile-type-option input:focus-visible + span {
        outline: 3px solid color-mix(in srgb, var(--primary) 24%, transparent);
        outline-offset: 2px;
    }

    body.mt-route-transactions .mt-mobile-type-option input:checked + span {
        border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
        background: color-mix(in srgb, var(--primary) 10%, var(--surface));
        color: var(--primary-600);
        box-shadow: 0 7px 18px color-mix(in srgb, var(--primary) 11%, transparent);
    }

    body.mt-route-transactions .mt-mobile-type-option.is-income input:checked + span {
        border-color: color-mix(in srgb, var(--income) 48%, var(--border));
        background: color-mix(in srgb, var(--income) 10%, var(--surface));
        color: var(--income);
    }

    body.mt-route-transactions .mt-mobile-type-option.is-expense input:checked + span {
        border-color: color-mix(in srgb, var(--expense) 46%, var(--border));
        background: color-mix(in srgb, var(--expense) 10%, var(--surface));
        color: var(--expense);
    }

    body.mt-route-transactions .mt-mobile-type-option.is-saving input:checked + span {
        border-color: color-mix(in srgb, var(--saving) 48%, var(--border));
        background: color-mix(in srgb, var(--saving) 10%, var(--surface));
        color: var(--saving);
    }

    body.mt-route-transactions .mt-mobile-period-grid,
    body.mt-route-transactions .mt-mobile-more-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    body.mt-route-transactions .mt-mobile-filter-field {
        min-width: 0;
        display: grid;
        gap: 5px;
    }

    body.mt-route-transactions .mt-mobile-filter-field .input {
        width: 100%;
        min-height: 43px;
        padding: .55rem 1.9rem .55rem .72rem;
        border-radius: 12px;
        background-color: color-mix(in srgb, var(--surface) 97%, var(--page-bg));
        color: var(--text);
        font-size: .68rem;
        font-weight: 600;
    }

    body.mt-route-transactions .mt-filter-category-hint {
        min-height: 1em;
        color: var(--text-muted);
        font-size: .58rem;
        line-height: 1.35;
    }

    body.mt-route-transactions .mt-mobile-filter-more {
        margin-top: 12px;
        overflow: hidden;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: color-mix(in srgb, var(--surface) 97%, var(--page-bg));
    }

    body.mt-route-transactions .mt-mobile-filter-more > summary {
        min-height: 52px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 9px;
        padding: 9px 11px;
        cursor: pointer;
        list-style: none;
        user-select: none;
    }

    body.mt-route-transactions .mt-mobile-filter-more > summary::-webkit-details-marker {
        display: none;
    }

    body.mt-route-transactions .mt-mobile-filter-more > summary::after {
        content: "\F282";
        flex: 0 0 auto;
        margin-left: 2px;
        color: var(--text-muted);
        font-family: "bootstrap-icons";
        font-size: .72rem;
        transition: transform .2s ease;
    }

    body.mt-route-transactions .mt-mobile-filter-more[open] > summary::after {
        transform: rotate(180deg);
    }

    body.mt-route-transactions .mt-mobile-filter-more[open] > summary {
        border-bottom: 1px solid var(--border);
    }

    body.mt-route-transactions .mt-mobile-filter-more-copy {
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 9px;
    }

    body.mt-route-transactions .mt-mobile-filter-more-copy > i {
        flex: 0 0 auto;
        width: 30px;
        height: 30px;
        display: grid;
        place-items: center;
        border-radius: 9px;
        background: color-mix(in srgb, var(--primary) 9%, transparent);
        color: var(--primary-600);
        font-size: .82rem;
    }

    body.mt-route-transactions .mt-mobile-filter-more-copy > span {
        min-width: 0;
        display: grid;
        gap: 1px;
    }

    body.mt-route-transactions .mt-mobile-filter-more-copy strong {
        color: var(--text);
        font-size: .7rem;
        font-weight: 750;
    }

    body.mt-route-transactions .mt-mobile-filter-more-copy small {
        overflow: hidden;
        color: var(--text-muted);
        font-size: .58rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.mt-route-transactions .mt-mobile-filter-more summary em {
        flex: 0 0 auto;
        padding: 4px 7px;
        border-radius: 999px;
        background: color-mix(in srgb, var(--primary) 10%, transparent);
        color: var(--primary-600);
        font-size: .56rem;
        font-style: normal;
        font-weight: 800;
    }

    body.mt-route-transactions .mt-mobile-more-grid {
        padding: 11px;
    }

    body.mt-route-transactions .mt-mobile-filter-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 102px;
        gap: 8px;
        margin-top: 12px;
    }

    body.mt-route-transactions .mt-mobile-filter-actions .btn {
        min-width: 0;
        min-height: 44px;
        justify-content: center;
        border-radius: 13px;
        font-size: .68rem;
        font-weight: 750;
    }

    body.mt-route-transactions .mt-mobile-filter-actions .btn-primary {
        box-shadow: 0 9px 20px color-mix(in srgb, var(--primary) 20%, transparent);
    }

    :root[data-theme="dark"] body.mt-route-transactions .transaction-filter-mobile {
        background: linear-gradient(180deg,
            color-mix(in srgb, var(--surface) 96%, var(--primary) 4%),
            var(--surface));
    }
}

@media (max-width: 360px) {
    body.mt-route-transactions .mt-mobile-type-grid,
    body.mt-route-transactions .mt-mobile-more-grid {
        grid-template-columns: 1fr;
    }

    body.mt-route-transactions .mt-mobile-filter-actions {
        grid-template-columns: minmax(0, 1fr) 88px;
    }
}


/* =====================================================================
   Transactions mobile category card picker V6.3
   Dropdown kategori pada filter HP diganti kartu pilihan yang mengikuti
   tipe transaksi. Lima kategori ditampilkan lebih dulu agar tetap ringkas.
   ===================================================================== */
@media (max-width: 760px) {
    body.mt-route-transactions .mt-mobile-category-field {
        grid-column: 1 / -1;
        min-width: 0;
        display: grid;
        gap: 8px;
    }

    body.mt-route-transactions .mt-mobile-category-head {
        min-width: 0;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 10px;
    }

    body.mt-route-transactions .mt-mobile-category-head > span {
        color: var(--text-muted);
        font-size: .59rem;
        font-weight: 800;
        letter-spacing: .045em;
        text-transform: uppercase;
    }

    body.mt-route-transactions .mt-mobile-category-head .mt-filter-category-hint {
        min-height: 0;
        color: var(--text-muted);
        font-size: .57rem;
        font-weight: 650;
        line-height: 1.2;
        text-align: right;
    }

    body.mt-route-transactions .mt-mobile-category-picker {
        display: grid;
        gap: 7px;
    }

    body.mt-route-transactions .mt-mobile-category-option {
        --mt-category-color: var(--primary);
        position: relative;
        min-width: 0;
        min-height: 55px;
        display: grid;
        grid-template-columns: 38px minmax(0, 1fr) 26px;
        align-items: center;
        gap: 10px;
        padding: 8px 10px;
        overflow: hidden;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: color-mix(in srgb, var(--surface) 98%, var(--page-bg));
        cursor: pointer;
        transition:
            border-color .18s ease,
            background-color .18s ease,
            box-shadow .18s ease,
            transform .18s ease;
    }

    body.mt-route-transactions .mt-mobile-category-option[hidden],
    body.mt-route-transactions .mt-mobile-category-option.is-category-collapsed {
        display: none !important;
    }

    body.mt-route-transactions .mt-mobile-category-option:active {
        transform: scale(.992);
    }

    body.mt-route-transactions .mt-mobile-category-option > input {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
    }

    body.mt-route-transactions .mt-mobile-category-icon {
        width: 38px;
        height: 38px;
        display: grid;
        place-items: center;
        border-radius: 12px;
        background: color-mix(in srgb, var(--mt-category-color) 13%, var(--surface));
        color: var(--mt-category-color);
        font-size: .92rem;
    }

    body.mt-route-transactions .mt-mobile-category-option.is-all .mt-mobile-category-icon {
        background: color-mix(in srgb, var(--primary) 10%, var(--surface));
        color: var(--primary-600);
    }

    body.mt-route-transactions .mt-mobile-category-copy {
        min-width: 0;
        display: grid;
        gap: 2px;
    }

    body.mt-route-transactions .mt-mobile-category-copy strong,
    body.mt-route-transactions .mt-mobile-category-copy small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.mt-route-transactions .mt-mobile-category-copy strong {
        color: var(--text);
        font-size: .7rem;
        font-weight: 750;
        letter-spacing: -.012em;
    }

    body.mt-route-transactions .mt-mobile-category-copy small {
        color: var(--text-muted);
        font-size: .58rem;
        font-weight: 550;
    }

    body.mt-route-transactions .mt-mobile-category-check {
        width: 24px;
        height: 24px;
        display: grid;
        place-items: center;
        border: 1.5px solid var(--border);
        border-radius: 50%;
        color: transparent;
        font-size: .68rem;
        transition:
            border-color .18s ease,
            background-color .18s ease,
            color .18s ease,
            transform .18s ease;
    }

    body.mt-route-transactions .mt-mobile-category-option > input:focus-visible ~ .mt-mobile-category-check {
        outline: 3px solid color-mix(in srgb, var(--primary) 24%, transparent);
        outline-offset: 2px;
    }

    body.mt-route-transactions .mt-mobile-category-option:has(> input:checked) {
        border-color: color-mix(in srgb, var(--mt-category-color) 60%, var(--border));
        background: color-mix(in srgb, var(--mt-category-color) 8%, var(--surface));
        box-shadow: 0 8px 20px color-mix(in srgb, var(--mt-category-color) 11%, transparent);
    }

    body.mt-route-transactions .mt-mobile-category-option.is-all:has(> input:checked) {
        border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
        background: color-mix(in srgb, var(--primary) 8%, var(--surface));
        box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 11%, transparent);
    }

    body.mt-route-transactions .mt-mobile-category-option:has(> input:checked) .mt-mobile-category-check {
        border-color: var(--mt-category-color);
        background: var(--mt-category-color);
        color: #fff;
        transform: scale(1.02);
    }

    body.mt-route-transactions .mt-mobile-category-option.is-all:has(> input:checked) .mt-mobile-category-check {
        border-color: var(--primary);
        background: var(--primary);
    }

    body.mt-route-transactions .mt-mobile-category-toggle {
        width: 100%;
        min-height: 39px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        padding: 7px 10px;
        border: 1px dashed color-mix(in srgb, var(--primary) 34%, var(--border));
        border-radius: 12px;
        background: color-mix(in srgb, var(--primary) 5%, var(--surface));
        color: var(--primary-600);
        font: inherit;
        font-size: .63rem;
        font-weight: 750;
        cursor: pointer;
    }

    body.mt-route-transactions .mt-mobile-category-toggle[hidden] {
        display: none !important;
    }

    body.mt-route-transactions .mt-mobile-category-toggle i {
        font-size: .62rem;
        transition: transform .18s ease;
    }

    body.mt-route-transactions .mt-mobile-category-toggle.is-expanded i {
        transform: rotate(180deg);
    }

    :root[data-theme="dark"] body.mt-route-transactions .mt-mobile-category-option {
        background: color-mix(in srgb, var(--surface) 96%, var(--page-bg));
    }
}


/* ================================================================
   MonaTrack V6.4 — Privasi nominal mobile
   Kembalikan tombol mata global dan buat tombol per kartu lebih jelas.
   ================================================================ */
@media (max-width: 760px) {
    body.mt-mobile-shell-v2 .topbar .topbar-privacy {
        display: grid !important;
        place-items: center;
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        padding: 0;
        border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
        border-radius: 13px;
        background: color-mix(in srgb, var(--surface-2) 92%, transparent);
        color: var(--text-soft);
        box-shadow: none;
    }

    body.mt-mobile-shell-v2 .topbar .topbar-privacy:active {
        transform: scale(.94);
        background: var(--primary-soft);
        color: var(--primary-600);
    }

    body.mt-mobile-shell-v2 .topbar .topbar-privacy[aria-pressed="true"] {
        border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
        background: var(--primary-soft);
        color: var(--primary-600);
    }

    body.mt-mobile-shell-v2 .topbar .topbar-privacy i { font-size: 1rem; }

    /* Empat tombol header tetap muat pada HP kecil. */
    body.mt-mobile-shell-v2 .topbar .topbar-title-stack {
        min-width: 0;
        overflow: hidden;
    }

    body.mt-mobile-shell-v2 .topbar .stat-privacy-toggle,
    body.mt-mobile-shell-v2 .stat-privacy-toggle {
        width: 30px;
        height: 30px;
        border-color: color-mix(in srgb, var(--border) 88%, var(--text-soft) 12%);
        background: color-mix(in srgb, var(--surface) 95%, var(--primary-soft) 5%);
        color: color-mix(in srgb, var(--text-soft) 80%, var(--text) 20%);
        box-shadow: 0 3px 10px rgba(15, 23, 42, .07);
    }

    body.mt-mobile-shell-v2 .stat-privacy-toggle i { font-size: .9rem; }

    .privacy-default-row .st-desc {
        max-width: 31rem;
        line-height: 1.55;
    }
}

@media (max-width: 390px) {
    body.mt-mobile-shell-v2 .topbar {
        gap: 4px;
        padding-inline: 8px;
    }
    body.mt-mobile-shell-v2 .topbar .topbar-mobile-search,
    body.mt-mobile-shell-v2 .topbar .topbar-privacy,
    body.mt-mobile-shell-v2 .topbar .topbar-theme,
    body.mt-mobile-shell-v2 .topbar .topbar-notifications {
        width: 35px;
        height: 35px;
        flex-basis: 35px;
        border-radius: 12px;
    }
    body.mt-mobile-shell-v2 .mobile-topbar-kicker { display: none; }
    body.mt-mobile-shell-v2 .topbar .page-title { font-size: .88rem; }
}

/* =====================================================================
   Transactions mobile summary redesign V6.5
   Ringkasan transaksi HP menjadi satu panel yang mudah dipindai. Dua
   angka utama berada berdampingan, sedangkan tabungan mendapat baris penuh.
   ===================================================================== */
.transaction-summary-mobile-head {
    display: none;
}

@media (max-width: 760px) {
    body.mt-route-transactions .transaction-summary-panel {
        margin-bottom: 14px;
        padding: 13px;
        overflow: hidden;
        border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
        border-radius: 21px;
        background:
            radial-gradient(circle at 100% 0,
                color-mix(in srgb, var(--primary) 10%, transparent),
                transparent 42%),
            linear-gradient(180deg,
                color-mix(in srgb, var(--surface) 98%, var(--primary) 2%),
                var(--surface));
        box-shadow: 0 12px 32px color-mix(in srgb, var(--shadow-color, #17233f) 9%, transparent);
    }

    body.mt-route-transactions .transaction-summary-mobile-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 11px;
    }

    body.mt-route-transactions .transaction-summary-mobile-head > div {
        min-width: 0;
        display: grid;
        gap: 2px;
    }

    body.mt-route-transactions .transaction-summary-mobile-head > div > span {
        color: var(--primary-600);
        font-size: .57rem;
        font-weight: 800;
        letter-spacing: .065em;
        text-transform: uppercase;
    }

    body.mt-route-transactions .transaction-summary-mobile-head strong {
        overflow: hidden;
        color: var(--text);
        font-size: .88rem;
        font-weight: 800;
        letter-spacing: -.015em;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.mt-route-transactions .transaction-summary-count {
        flex: 0 0 auto;
        min-height: 29px;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 0 9px;
        border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
        border-radius: 999px;
        background: color-mix(in srgb, var(--primary) 8%, var(--surface));
        color: var(--text-secondary);
        font-size: .59rem;
        font-weight: 750;
        white-space: nowrap;
    }

    body.mt-route-transactions .transaction-summary-count i {
        color: var(--primary-600);
        font-size: .68rem;
    }

    body.mt-route-transactions .transaction-summary-panel .transaction-stat-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-flow: row;
        grid-auto-columns: auto;
        gap: 9px;
        margin: 0;
        padding: 0;
        overflow: visible;
        scroll-snap-type: none;
    }

    body.mt-route-transactions .transaction-summary-panel .transaction-stat-grid .stat-card {
        min-width: 0;
        min-height: 78px;
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr);
        grid-template-rows: auto auto;
        align-content: center;
        align-items: center;
        column-gap: 9px;
        row-gap: 1px;
        padding: 10px;
        border-radius: 15px;
        box-shadow: none;
        scroll-snap-align: none;
        transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
    }

    body.mt-route-transactions .transaction-summary-panel .transaction-stat-grid .stat-card:active {
        transform: scale(.992);
    }

    body.mt-route-transactions .transaction-summary-panel .transaction-stat-grid .stat-card.income {
        border-color: color-mix(in srgb, var(--income) 20%, var(--border));
        background: color-mix(in srgb, var(--income) 7%, var(--surface));
    }

    body.mt-route-transactions .transaction-summary-panel .transaction-stat-grid .stat-card.expense {
        border-color: color-mix(in srgb, var(--expense) 20%, var(--border));
        background: color-mix(in srgb, var(--expense) 7%, var(--surface));
    }

    body.mt-route-transactions .transaction-summary-panel .transaction-stat-grid .stat-card.saving {
        grid-column: 1 / -1;
        min-height: 72px;
        border-color: color-mix(in srgb, var(--saving) 22%, var(--border));
        background:
            linear-gradient(90deg,
                color-mix(in srgb, var(--saving) 9%, var(--surface)),
                color-mix(in srgb, var(--primary) 4%, var(--surface)));
    }

    body.mt-route-transactions .transaction-summary-panel .transaction-stat-grid .stat-card .ic {
        grid-column: 1;
        grid-row: 1 / 3;
        width: 34px;
        height: 34px;
        margin: 0;
        border-radius: 11px;
        font-size: .88rem;
    }

    body.mt-route-transactions .transaction-summary-panel .transaction-stat-grid .stat-card .lbl {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
        margin: 0;
        color: var(--text-muted);
        font-size: .58rem;
        font-weight: 650;
        line-height: 1.25;
    }

    body.mt-route-transactions .transaction-summary-panel .transaction-stat-grid .stat-card .val,
    body.mt-route-transactions .transaction-summary-panel .transaction-stat-grid .stat-card .val[style] {
        grid-column: 2;
        grid-row: 2;
        max-width: 100%;
        margin: 0;
        overflow: hidden;
        font-size: clamp(.82rem, 3.6vw, 1rem) !important;
        line-height: 1.25;
        letter-spacing: -.025em;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.mt-route-transactions .transaction-summary-panel .transaction-stat-grid .stat-card.saving .val,
    body.mt-route-transactions .transaction-summary-panel .transaction-stat-grid .stat-card.saving .val[style] {
        font-size: clamp(.9rem, 3.9vw, 1.08rem) !important;
    }

    :root[data-theme="dark"] body.mt-route-transactions .transaction-summary-panel {
        background:
            radial-gradient(circle at 100% 0,
                color-mix(in srgb, var(--primary) 15%, transparent),
                transparent 44%),
            linear-gradient(180deg,
                color-mix(in srgb, var(--surface) 96%, var(--primary) 4%),
                var(--surface));
        box-shadow: 0 14px 34px rgba(0, 0, 0, .22);
    }
}

@media (max-width: 360px) {
    body.mt-route-transactions .transaction-summary-panel {
        padding: 11px;
    }

    body.mt-route-transactions .transaction-summary-mobile-head {
        align-items: flex-start;
    }

    body.mt-route-transactions .transaction-summary-count {
        padding-inline: 7px;
        font-size: .55rem;
    }

    body.mt-route-transactions .transaction-summary-panel .transaction-stat-grid {
        grid-template-columns: 1fr;
    }

    body.mt-route-transactions .transaction-summary-panel .transaction-stat-grid .stat-card.saving {
        grid-column: auto;
    }
}

/* =====================================================================
   Dashboard V7 — pemilih bulan/tahun dan istilah periode grafik
   ===================================================================== */
.dashboard-period-nav {
    position: relative;
    isolation: isolate;
}

.month-nav .dashboard-period-trigger {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 34px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font: inherit;
    cursor: pointer;
    transition: background .16s ease, color .16s ease;
}

.month-nav .dashboard-period-trigger:hover,
.month-nav .dashboard-period-trigger[aria-expanded="true"] {
    background: var(--surface-2);
    color: var(--primary-600);
}

.month-nav .dashboard-period-trigger:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.dashboard-period-trigger > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-period-trigger > i {
    flex: 0 0 auto;
    font-size: .82rem;
    color: var(--text-muted);
}

.dashboard-period-picker[hidden] {
    display: none !important;
}

.dashboard-period-picker {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    z-index: 80;
    width: min(370px, calc(100vw - 28px));
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: 0 22px 55px rgba(15, 23, 42, .18);
    transform: translateX(-50%);
}

.dashboard-period-picker-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.dashboard-period-picker-head > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.dashboard-period-picker-head strong {
    color: var(--text);
    font-size: .9rem;
}

.dashboard-period-picker-head small {
    color: var(--text-muted);
    font-size: .7rem;
    line-height: 1.45;
}

.dashboard-period-picker-head .icon-btn {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
}

.dashboard-period-form {
    padding-top: 13px;
}

.dashboard-period-year {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    align-items: end;
    gap: 8px;
    margin-bottom: 12px;
}

.dashboard-period-year > button {
    width: 40px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface-2);
    color: var(--text-soft);
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.dashboard-period-year > button:hover {
    border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
    background: var(--primary-soft);
    color: var(--primary-600);
}

.dashboard-period-year label {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.dashboard-period-year label > span {
    color: var(--text-muted);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.dashboard-period-year input {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 11px;
    outline: 0;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-weight: 800;
    text-align: center;
}

.dashboard-period-year input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
}

.dashboard-period-months {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

.dashboard-period-months button {
    min-width: 0;
    min-height: 39px;
    padding: .5rem .35rem;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface-2);
    color: var(--text-soft);
    font: inherit;
    font-size: .72rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .14s ease, border-color .14s ease, background .14s ease, color .14s ease;
}

.dashboard-period-months button:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--primary) 38%, var(--border));
    color: var(--text);
}

.dashboard-period-months button.active,
.dashboard-period-months button[aria-pressed="true"] {
    border-color: color-mix(in srgb, var(--primary) 58%, var(--border));
    background: var(--primary-soft);
    color: var(--primary-600);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 16%, transparent);
}

.dashboard-period-picker-actions {
    display: grid;
    grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr);
    gap: 8px;
    margin-top: 13px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.dashboard-period-picker-actions .btn {
    width: 100%;
    min-height: 42px;
}

@media (max-width: 760px) {
    .month-nav .dashboard-period-trigger {
        flex: 1 1 auto;
        min-width: 0;
        min-height: 40px;
        padding-inline: 8px;
    }

    .dashboard-period-picker {
        position: fixed;
        top: calc(var(--mobile-topbar-h, 64px) + env(safe-area-inset-top, 0px) + 12px);
        right: 14px;
        left: 14px;
        width: auto;
        max-height: calc(100dvh - var(--mobile-topbar-h, 64px) - env(safe-area-inset-top, 0px) - 32px);
        overflow-y: auto;
        transform: none;
        border-radius: 20px;
        box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
    }

    .dashboard-period-months {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 380px) {
    .dashboard-period-picker {
        right: 9px;
        left: 9px;
        padding: 12px;
    }

    .dashboard-period-months button {
        min-height: 37px;
        font-size: .67rem;
    }
}
.dashboard-period-nav { z-index: 65; }

/* =====================================================================
   Quick Add Modal v7.7 - compact redesign for mobile
   ===================================================================== */
.quick-sheet-kicker{display:inline-flex;align-items:center;gap:.35rem;margin-bottom:.35rem;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--primary)}
.quick-sheet-kicker i{font-size:.72rem}
.quick-add-form-v2{display:grid;gap:1rem}
.quick-main-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);gap:.85rem}
.quick-money-input .input{font-size:1.2rem;font-weight:800}
.quick-picker-section{display:grid;gap:.65rem}
.quick-picker-head{display:flex;justify-content:space-between;gap:.85rem;align-items:flex-start}
.quick-picker-head p{margin:.12rem 0 0;font-size:.73rem;color:var(--text-soft)}
.quick-section-label{display:block;margin:0;font-size:.86rem;font-weight:700;color:var(--text)}
.picker-count{display:inline-flex;align-items:center;justify-content:center;min-width:72px;padding:.28rem .62rem;border:1px solid var(--border);border-radius:999px;background:var(--surface-soft);font-size:.72rem;font-weight:700;color:var(--text-soft);white-space:nowrap}
.quick-picker-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
.quick-picker-item,.quick-wallet-card{width:100%;display:flex;align-items:center;gap:.7rem;text-align:left;border:1px solid var(--border);background:var(--surface);border-radius:16px;padding:.82rem .88rem;color:var(--text);cursor:pointer;transition:border-color .18s ease, box-shadow .18s ease, background .18s ease}
.quick-picker-item:hover,.quick-wallet-card:hover{border-color:var(--primary-200)}
.quick-picker-icon,.quick-wallet-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--surface-soft);color:var(--primary);flex:0 0 40px;font-size:1.05rem}
.quick-picker-text,.quick-wallet-text{display:grid;gap:.12rem;min-width:0;flex:1}
.quick-picker-text strong,.quick-wallet-text strong{font-size:.92rem;line-height:1.25}
.quick-picker-text small,.quick-wallet-text small{font-size:.73rem;color:var(--text-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.quick-picker-check,.quick-wallet-check{display:grid;place-items:center;width:22px;height:22px;border-radius:999px;border:1.5px solid var(--border);color:transparent;flex:0 0 22px}
.quick-picker-item.active{border-color:#f59e0b;background:#fff9eb;box-shadow:0 0 0 1px rgba(245,158,11,.15) inset}
.quick-picker-item.active .quick-picker-icon{background:#fff1c2;color:#d97706}
.quick-picker-item.active .quick-picker-check{background:#f59e0b;border-color:#f59e0b;color:#fff}
.quick-wallet-list{display:grid;gap:.65rem}
.quick-wallet-card{padding:.86rem .9rem;min-height:76px}
.quick-wallet-card.active{border-color:#22c55e;background:#f3fbf6;box-shadow:0 0 0 1px rgba(34,197,94,.12) inset}
.quick-wallet-card.active .quick-wallet-icon{background:#dcfce7;color:#16a34a}
.quick-wallet-card.active .quick-wallet-check{background:#16a34a;border-color:#16a34a;color:#fff}
.quick-picker-more{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;width:100%;padding:.78rem 1rem;border:1px dashed var(--border-strong);background:transparent;border-radius:14px;color:var(--primary);font:inherit;font-weight:700;cursor:pointer}
.quick-picker-more i{transition:transform .18s ease}
.quick-picker-more.is-open i{transform:rotate(180deg)}
.quick-extra-details{border:1px solid var(--border);border-radius:16px;background:var(--surface-soft);overflow:hidden}
.quick-extra-details summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.88rem .95rem;cursor:pointer;font-weight:700}
.quick-extra-details summary::-webkit-details-marker{display:none}
.quick-extra-details summary span{font-size:.74rem;font-weight:600;color:var(--text-soft)}
.quick-extra-details summary::after{content:'\F282';font-family:'bootstrap-icons';font-size:.8rem;color:var(--text-soft);transition:transform .18s ease}
.quick-extra-details[open] summary::after{transform:rotate(180deg)}
.quick-extra-body{padding:0 .95rem .95rem}
.quick-add-modal .modal-actions .btn{min-height:50px}

@media (max-width: 680px){
  .quick-add-modal{padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px))}
  .quick-sheet-head{margin-bottom:10px}
  .quick-main-grid{grid-template-columns:1fr 118px;gap:.7rem;align-items:end}
  .quick-add-form-v2{gap:.88rem}
  .quick-picker-grid{grid-template-columns:1fr 1fr;gap:.6rem}
  .quick-picker-item,.quick-wallet-card{padding:.74rem .76rem;border-radius:14px}
  .quick-picker-icon,.quick-wallet-icon{width:34px;height:34px;border-radius:10px;flex-basis:34px;font-size:.95rem}
  .quick-picker-text strong,.quick-wallet-text strong{font-size:.86rem}
  .quick-picker-text small,.quick-wallet-text small{font-size:.68rem}
  .quick-wallet-card{min-height:66px}
  .quick-extra-details summary{padding:.82rem .86rem}
}

@media (max-width: 420px){
  .quick-main-grid{grid-template-columns:1fr}
  .quick-picker-grid{grid-template-columns:1fr 1fr}
}

/* =====================================================================
   Transaction Detail Redesign v7.8
   ===================================================================== */
.page-transaction-detail .tx-detail-head{margin-bottom:1rem}
.tx-detail-shell{display:grid;gap:1rem;padding-bottom:max(1rem, env(safe-area-inset-bottom, 0px))}
.tx-detail-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
.tx-detail-actions form{margin:0}
.tx-action-btn{width:100%;min-height:54px;justify-content:center;gap:.55rem;border-radius:16px;font-weight:800}
.tx-action-btn.btn-danger{box-shadow:0 10px 24px rgba(239,68,68,.18)}
.tx-detail-hero-card{padding:1.15rem;border-radius:22px;overflow:hidden}
.tx-detail-hero{display:grid;justify-items:center;text-align:center;gap:.7rem}
.tx-hero-icon{display:grid;place-items:center;width:72px;height:72px;border-radius:22px;font-size:2rem;box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}
.tx-hero-badge{margin-top:.15rem}
.tx-hero-amount{font-size:clamp(1.65rem, 5vw, 2.4rem);font-weight:800;line-height:1.15}
.tx-hero-title{font-size:1.02rem;font-weight:700;color:var(--text);max-width:32ch}
.tx-hero-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem;margin-top:.15rem}
.tx-meta-pill{display:inline-flex;align-items:center;gap:.42rem;padding:.46rem .76rem;border-radius:999px;background:var(--surface-soft);border:1px solid var(--border);font-size:.76rem;font-weight:600;color:var(--text-soft)}
.tx-meta-pill i{font-size:.8rem;color:var(--primary)}
.tx-info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem}
.tx-info-card{padding:1rem;border-radius:18px}
.tx-info-label{display:block;margin-bottom:.45rem;font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--text-soft)}
.tx-info-value{font-size:.96rem;font-weight:700;color:var(--text);line-height:1.45;word-break:break-word}
.tx-info-value .cell-cat{display:inline-flex;align-items:center;gap:.55rem;flex-wrap:wrap}
.tx-section-card{padding:1rem 1rem 1.05rem;border-radius:20px}
.tx-section-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:.8rem}
.tx-section-head h2{margin:0;font-size:1rem}
.tx-section-head span{font-size:.75rem;font-weight:700;color:var(--text-soft);padding:.3rem .58rem;border-radius:999px;background:var(--surface-soft);border:1px solid var(--border)}
.tx-note-body{font-size:.92rem;line-height:1.75;color:var(--text)}
.tx-split-list{gap:.6rem}
.tx-split-item{padding:.78rem .85rem;border-radius:14px;background:var(--surface-soft)}
.tx-attachment-view{margin-top:0}
.tx-attachment-view a{display:block;border-radius:18px;overflow:hidden}
.tx-attachment-view img{display:block;width:100%;height:auto}

@media (max-width: 900px){
  .tx-info-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 680px){
  .page-transaction-detail .page-head{margin-bottom:.8rem}
  .tx-detail-shell{gap:.85rem;padding-bottom:calc(72px + env(safe-area-inset-bottom, 0px))}
  .tx-detail-actions{gap:.7rem}
  .tx-action-btn{min-height:50px;border-radius:14px;font-size:.92rem}
  .tx-detail-hero-card{padding:1rem .95rem;border-radius:20px}
  .tx-hero-icon{width:64px;height:64px;border-radius:18px;font-size:1.7rem}
  .tx-hero-amount{font-size:1.95rem}
  .tx-hero-title{font-size:.98rem}
  .tx-hero-meta{display:grid;grid-template-columns:1fr;justify-content:stretch;width:100%}
  .tx-meta-pill{justify-content:center}
  .tx-info-grid{grid-template-columns:1fr;gap:.7rem}
  .tx-info-card{padding:.9rem .95rem;border-radius:16px}
  .tx-info-label{font-size:.7rem}
  .tx-info-value{font-size:.92rem}
  .tx-section-card{padding:.92rem;border-radius:18px}
  .tx-section-head h2{font-size:.95rem}
}

/* =====================================================================
   Quick Add bugfix polish v7.7.1
   ===================================================================== */
.quick-category-grid .quick-picker-item{--quick-cat-color: var(--primary)}
.quick-category-grid .quick-picker-item .quick-picker-icon{color:var(--quick-cat-color);background:color-mix(in srgb, var(--quick-cat-color) 12%, white)}
.quick-category-grid .quick-picker-item.active{border-color:var(--quick-cat-color);background:color-mix(in srgb, var(--quick-cat-color) 8%, white);box-shadow:0 0 0 1px color-mix(in srgb, var(--quick-cat-color) 22%, transparent) inset}
.quick-category-grid .quick-picker-item.active .quick-picker-icon{background:color-mix(in srgb, var(--quick-cat-color) 16%, white);color:var(--quick-cat-color)}
.quick-category-grid .quick-picker-item.active .quick-picker-check{background:var(--quick-cat-color);border-color:var(--quick-cat-color);color:#fff}
.quick-main-grid{grid-template-columns:minmax(0,1fr) 146px;align-items:end}
.quick-field-date .input{font-size:1rem;padding-right:2.45rem;min-width:0}
.quick-field-amount .input{min-width:0}
.quick-field-date input[type="date"]::-webkit-calendar-picker-indicator{opacity:.92;cursor:pointer}

@media (max-width: 680px){
  .quick-main-grid{grid-template-columns:minmax(0,1fr) 136px;gap:.72rem}
  .quick-field-date .input{font-size:.97rem;padding-right:2.2rem}
  .quick-money-input .input{font-size:1.12rem}
}
@media (max-width: 420px){
  .quick-main-grid{grid-template-columns:minmax(0,1fr) 124px}
}

/* =====================================================================
   Quick Add polish v7.7.1
   ===================================================================== */
.quick-main-grid{grid-template-columns:minmax(0,1.45fr) minmax(150px,.95fr);align-items:end}
.quick-field-date .input{min-width:0;padding-right:2.4rem}
.quick-picker-item{min-height:88px;align-items:flex-start}
.quick-picker-icon{background:var(--surface-soft);color:var(--primary);box-shadow:inset 0 0 0 1px rgba(99,102,241,.08)}
.quick-picker-text strong{display:block}
.quick-picker-text small{white-space:normal;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.quick-picker-item.active .quick-picker-check{background:#f59e0b;border-color:#f59e0b;color:#fff}
.quick-wallet-card{min-height:72px}

@media (max-width: 560px){
  .quick-main-grid{grid-template-columns:1fr}
  .quick-field-date .input{width:100%}
}

/* Target Tabungan di Tambah Cepat */
.quick-category-grid.is-saving-goals{grid-template-columns:1fr}
.quick-saving-goal-card{min-height:82px}
.quick-saving-goal-card .quick-picker-text small{white-space:normal;-webkit-line-clamp:2}
@media(max-width:680px){
  .quick-category-grid.is-saving-goals{grid-template-columns:1fr}
  .quick-saving-goal-card{min-height:76px}
}

/* =====================================================================
   Mobile form overhaul — Budget, Debt, Installments v8.0
   ===================================================================== */
.budget-editor-hero,.debt-editor-hero,.installment-editor-hero{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1rem}
.budget-editor-back,.debt-editor-back,.installment-editor-back{display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;border:1px solid var(--border);border-radius:14px;background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}
.budget-editor-kicker,.debt-editor-kicker,.installment-editor-kicker,.installment-detail-kicker{display:inline-flex;align-items:center;gap:.38rem;margin-bottom:.25rem;color:var(--primary);font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.045em}
.budget-editor-hero h1,.debt-editor-hero h1,.installment-editor-hero h1{margin:0;font-size:1.45rem}.budget-editor-hero p,.debt-editor-hero p,.installment-editor-hero p{margin:.28rem 0 0;color:var(--text-soft);font-size:.82rem}
.budget-editor-form,.debt-editor-form,.installment-editor-form{display:grid;gap:1rem;max-width:940px}
.budget-editor-section,.debt-editor-section,.installment-editor-section{padding:1rem;border-radius:20px}
.budget-section-head,.debt-section-head,.installment-section-head{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:1rem}.budget-section-head>span,.debt-section-head>span,.installment-section-head>span{display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px;border-radius:10px;background:var(--primary-soft);color:var(--primary);font-size:.75rem;font-weight:800}.budget-section-head h2,.debt-section-head h2,.installment-section-head h2{margin:0;font-size:.92rem}.budget-section-head p,.debt-section-head p,.installment-section-head p{margin:.16rem 0 0;color:var(--text-soft);font-size:.72rem}.budget-section-head-actions{align-items:center}.budget-section-head-actions>div{flex:1}.budget-new-category{display:inline-flex;align-items:center;gap:.3rem;padding:.42rem .65rem;border-radius:10px;background:var(--primary-soft);font-size:.74rem;font-weight:700}
.budget-period-grid{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}.budget-amount-field{grid-column:1/-1}.budget-amount-input .input{font-size:1.1rem;font-weight:800}.budget-category-picker{max-height:390px;overflow-y:auto;overscroll-behavior:contain;padding:.25rem .35rem .25rem .2rem;scrollbar-width:thin}.budget-editor-actions,.debt-editor-actions,.installment-editor-actions{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:.75rem}.budget-editor-actions .btn,.debt-editor-actions .btn,.installment-editor-actions .btn{width:100%;min-height:52px;border-radius:15px}.budget-editor-empty{display:grid;justify-items:center;text-align:center;gap:.65rem;padding:2rem}.budget-editor-empty>i{font-size:2rem;color:var(--success)}

.debt-kind-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.debt-kind-card,.debt-wallet-card,.installment-wallet-card,.installment-payment-wallet{position:relative;display:flex;align-items:center;gap:.72rem;min-width:0;padding:.85rem;border:1px solid var(--border);border-radius:16px;background:var(--surface);cursor:pointer}.debt-kind-card>input,.debt-wallet-card>input,.installment-wallet-card>input,.installment-payment-wallet>input{position:absolute;opacity:0;pointer-events:none}.debt-kind-card>span:nth-of-type(2),.debt-wallet-card>span:nth-of-type(2),.installment-wallet-card>span:nth-of-type(2),.installment-payment-wallet>span:nth-of-type(2){display:grid;gap:.12rem;min-width:0;flex:1}.debt-kind-card strong,.debt-wallet-card strong,.installment-wallet-card strong,.installment-payment-wallet strong{font-size:.84rem}.debt-kind-card small,.debt-wallet-card small,.installment-wallet-card small,.installment-payment-wallet small{color:var(--text-soft);font-size:.67rem;line-height:1.4}.debt-kind-icon,.debt-wallet-icon,.installment-wallet-icon{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border-radius:12px;background:var(--surface-soft);color:var(--primary)}.debt-kind-check,.debt-wallet-check,.installment-wallet-check{color:transparent}.debt-kind-card:has(input:checked),.debt-wallet-card:has(input:checked),.installment-wallet-card:has(input:checked),.installment-payment-wallet:has(input:checked){border-color:var(--primary);background:var(--primary-soft);box-shadow:0 0 0 1px var(--primary) inset}.debt-kind-expense:has(input:checked){border-color:#f97316;background:#fff7ed;box-shadow:0 0 0 1px #f97316 inset}.debt-kind-income:has(input:checked){border-color:#16a34a;background:#f0fdf4;box-shadow:0 0 0 1px #16a34a inset}.debt-kind-card:has(input:checked) .debt-kind-check,.debt-wallet-card:has(input:checked) .debt-wallet-check,.installment-wallet-card:has(input:checked) .installment-wallet-check,.installment-payment-wallet:has(input:checked) .installment-wallet-check{color:var(--primary)}.debt-main-grid,.debt-date-grid{grid-template-columns:1fr 1fr}.debt-wallet-grid,.installment-wallet-grid,.installment-payment-wallets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}.debt-reminder-note,.installment-reminder-preview{display:flex;align-items:flex-start;gap:.65rem;margin-top:.8rem;padding:.78rem .85rem;border:1px solid color-mix(in srgb,var(--primary) 20%,var(--border));border-radius:14px;background:color-mix(in srgb,var(--primary-soft) 50%,var(--surface));color:var(--text-soft);font-size:.72rem}.debt-reminder-note i,.installment-reminder-preview i{color:var(--primary);font-size:1rem}.debt-extra-details,.installment-extra-details{padding:0;overflow:hidden;border-radius:18px}.debt-extra-details summary,.installment-extra-details summary{display:flex;justify-content:space-between;align-items:center;padding:.9rem 1rem;font-weight:700;cursor:pointer;list-style:none}.debt-extra-details summary::-webkit-details-marker,.installment-extra-details summary::-webkit-details-marker{display:none}.debt-extra-details summary span,.installment-extra-details summary span{color:var(--text-soft);font-size:.72rem}.debt-extra-details>div,.installment-extra-details>div{padding:0 1rem 1rem}

.installment-flow-card{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:.7rem;max-width:940px;margin-bottom:1rem;padding:.85rem 1rem;border:1px solid var(--border);border-radius:18px;background:var(--surface)}.installment-flow-card>div{display:grid;grid-template-columns:auto 1fr;gap:.12rem .55rem;align-items:center}.installment-flow-card>div>span{grid-row:1/3;display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:var(--primary-soft);color:var(--primary);font-size:.72rem;font-weight:800}.installment-flow-card strong{font-size:.76rem}.installment-flow-card small{color:var(--text-soft);font-size:.63rem}.installment-flow-card>i{color:var(--text-soft)}.installment-calculation-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem}.installment-calculated{background:var(--surface-soft)}.installment-calculated .input{font-weight:800;color:var(--primary)}.input-suffix{display:flex;align-items:center;border:1px solid var(--border);border-radius:12px;background:var(--surface);overflow:hidden}.input-suffix .input{border:0;border-radius:0}.input-suffix span{padding:0 .8rem;color:var(--text-soft);font-size:.74rem}.installment-schedule-grid{grid-template-columns:1fr 1.35fr;align-items:end}.installment-reminder-preview{margin:0}.installment-reminder-preview div{display:grid;gap:.1rem}.installment-reminder-preview strong{font-size:.76rem;color:var(--text)}

.installment-detail-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1rem}.installment-detail-title h1{margin:0;font-size:1.5rem}.installment-detail-title p{margin:.25rem 0 0;color:var(--text-soft);font-size:.8rem}.installment-detail-actions{display:flex;align-items:center;gap:.5rem}.installment-detail-actions form{margin:0}.installment-overview-card,.installment-payment-card,.installment-history-card{padding:1rem;border-radius:20px;margin-bottom:1rem}.installment-overview-main{display:flex;align-items:center;gap:.8rem}.installment-overview-main>div:nth-child(2){display:grid;gap:.08rem;flex:1}.installment-overview-main span{color:var(--text-soft);font-size:.7rem}.installment-overview-main strong{font-size:1.5rem}.installment-overview-main small{color:var(--text-soft);font-size:.68rem}.installment-overview-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:#eef2ff;color:var(--primary);font-size:1.25rem}.installment-status-badge{padding:.35rem .65rem;border-radius:999px;font-size:.68rem;font-weight:800}.installment-status-badge.active{background:#dcfce7;color:#15803d}.installment-status-badge.paid{background:#e0f2fe;color:#0369a1}.installment-status-badge.cancelled{background:#f1f5f9;color:#64748b}.installment-overview-card .progress-line{margin:.9rem 0}.installment-overview-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.65rem}.installment-overview-stats>div{padding:.72rem;border-radius:14px;background:var(--surface-soft)}.installment-overview-stats span,.installment-overview-stats strong{display:block}.installment-overview-stats span{color:var(--text-soft);font-size:.66rem}.installment-overview-stats strong{margin-top:.2rem;font-size:.82rem}.installment-due-card{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;padding:.9rem 1rem;border:1px solid var(--border);border-radius:18px;background:var(--surface)}.installment-due-card.warning{border-color:#fed7aa;background:#fff7ed}.installment-due-card.danger{border-color:#fecaca;background:#fef2f2}.installment-due-card.success{border-color:#bbf7d0;background:#f0fdf4}.installment-due-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:var(--primary-soft);color:var(--primary)}.installment-due-card>div:last-child{display:grid;gap:.08rem}.installment-due-card span{color:var(--text-soft);font-size:.68rem}.installment-due-card strong{font-size:.9rem}.installment-due-card small{color:var(--text-soft);font-size:.66rem}.installment-payment-head,.installment-history-head{display:flex;justify-content:space-between;gap:.8rem;margin-bottom:1rem}.installment-payment-head h2,.installment-history-head h2{margin:0;font-size:1.05rem}.installment-payment-head p,.installment-history-head p{margin:.2rem 0 0;color:var(--text-soft);font-size:.7rem}.installment-payment-number,.installment-history-head>span{display:grid;place-items:center;min-width:48px;height:34px;padding:0 .6rem;border-radius:999px;background:var(--primary-soft);color:var(--primary);font-size:.72rem;font-weight:800}.installment-payment-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}.installment-pay-button{width:100%;min-height:50px;margin-top:.9rem}.installment-history-list{display:grid;gap:.55rem}.installment-history-list article{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.7rem;padding:.7rem .75rem;border:1px solid var(--border);border-radius:14px;background:var(--surface-soft)}.installment-history-number{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:#dcfce7;color:#15803d;font-size:.72rem;font-weight:800}.installment-history-list strong,.installment-history-list small{display:block}.installment-history-list strong{font-size:.78rem}.installment-history-list small{margin-top:.12rem;color:var(--text-soft);font-size:.65rem}.installment-history-list b{font-size:.78rem}

.installments-page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:1rem}.installments-page-head h1{margin:0;font-size:1.5rem}.installments-page-head p{margin:.25rem 0 0;color:var(--text-soft);font-size:.8rem}.installment-summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-bottom:1rem}.installment-summary-grid article{padding:1rem;border:1px solid var(--border);border-radius:18px;background:var(--surface)}.installment-summary-grid span,.installment-summary-grid strong,.installment-summary-grid small{display:block}.installment-summary-grid span{color:var(--text-soft);font-size:.68rem}.installment-summary-grid strong{margin:.28rem 0;font-size:1.25rem}.installment-summary-grid small{color:var(--text-soft);font-size:.64rem}.installment-summary-grid article.warning{border-color:#fed7aa;background:#fff7ed}.installment-how-card{display:flex;align-items:flex-start;gap:.7rem;margin-bottom:1rem;padding:.85rem 1rem;border:1px solid color-mix(in srgb,var(--primary) 22%,var(--border));border-radius:16px;background:var(--primary-soft)}.installment-how-card i{color:var(--primary)}.installment-how-card strong{font-size:.78rem}.installment-how-card p{margin:.15rem 0 0;color:var(--text-soft);font-size:.68rem;line-height:1.5}.installment-card-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem}.installment-list-card{padding:1rem;border-radius:20px}.installment-list-top{display:flex;align-items:center;gap:.7rem}.installment-list-top>div{min-width:0;flex:1}.installment-list-top h3{margin:0;font-size:.9rem}.installment-list-top p{margin:.15rem 0 0;color:var(--text-soft);font-size:.67rem}.installment-list-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:#ffe4e6;color:#e11d48}.installment-list-card .progress-line{margin:.8rem 0}.installment-list-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem}.installment-list-metrics>div{padding:.65rem;border-radius:12px;background:var(--surface-soft)}.installment-list-metrics span,.installment-list-metrics strong,.installment-list-metrics small{display:block}.installment-list-metrics span{color:var(--text-soft);font-size:.6rem}.installment-list-metrics strong{margin-top:.16rem;font-size:.72rem}.installment-list-metrics small{margin-top:.12rem;font-size:.58rem}.due-danger{color:#dc2626!important}.due-warning{color:#ea580c!important}.due-success{color:#16a34a!important}.installment-list-action{width:100%;margin-top:.75rem;justify-content:center}

@media(max-width:760px){
 body.page-budget-editor .mobile-bottom-nav,body.page-budget-editor .quick-add-fab,body.page-debt-editor .mobile-bottom-nav,body.page-debt-editor .quick-add-fab,body.page-installment-editor .mobile-bottom-nav,body.page-installment-editor .quick-add-fab,body.page-installment-detail .mobile-bottom-nav,body.page-installment-detail .quick-add-fab{display:none!important}
 body.page-budget-editor .page,body.page-debt-editor .page,body.page-installment-editor .page,body.page-installment-detail .page{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
 .budget-editor-hero,.debt-editor-hero,.installment-editor-hero{gap:.7rem}.budget-editor-back,.debt-editor-back,.installment-editor-back{width:40px;height:40px;flex-basis:40px}.budget-editor-hero h1,.debt-editor-hero h1,.installment-editor-hero h1{font-size:1.18rem}.budget-editor-hero p,.debt-editor-hero p,.installment-editor-hero p{font-size:.68rem;line-height:1.5}
 .budget-editor-section,.debt-editor-section,.installment-editor-section{padding:.85rem;border-radius:18px}.budget-period-grid,.debt-main-grid,.debt-date-grid,.installment-calculation-grid,.installment-schedule-grid{grid-template-columns:1fr}.budget-category-picker{grid-template-columns:1fr;max-height:310px;overflow-y:auto}.budget-category-picker .category-option-card{min-height:64px}.budget-editor-actions,.debt-editor-actions,.installment-editor-actions{position:sticky;bottom:calc(-13px - env(safe-area-inset-bottom,0px));z-index:10;margin:0 calc(-1 * var(--mobile-gutter)) calc(-13px - env(safe-area-inset-bottom,0px));padding:12px var(--mobile-gutter) calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--border);background:color-mix(in srgb,var(--surface) 96%,transparent);backdrop-filter:blur(14px)}
 .debt-kind-grid,.debt-wallet-grid,.installment-wallet-grid,.installment-payment-wallets{grid-template-columns:1fr}.debt-kind-card,.debt-wallet-card,.installment-wallet-card,.installment-payment-wallet{padding:.75rem}.installment-flow-card{grid-template-columns:1fr;gap:.5rem;padding:.75rem}.installment-flow-card>i{display:none}.installment-flow-card>div{grid-template-columns:auto 1fr}.installment-reminder-preview{margin-top:.1rem}
 .installment-detail-hero{display:grid;gap:.75rem}.installment-detail-title h1{font-size:1.2rem}.installment-detail-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.installment-detail-actions .btn{min-width:0;padding:.6rem .4rem;font-size:.7rem}.installment-overview-card,.installment-payment-card,.installment-history-card{padding:.85rem;border-radius:18px}.installment-overview-main strong{font-size:1.25rem}.installment-overview-stats{grid-template-columns:1fr 1fr}.installment-overview-stats>div:last-child{grid-column:1/-1}.installment-payment-grid{grid-template-columns:1fr}.installment-history-list article{grid-template-columns:auto 1fr}.installment-history-list b{grid-column:2/3}.installment-payment-head{align-items:flex-start}.installment-due-card{padding:.8rem}
 .installments-page-head{align-items:stretch;flex-direction:column}.installments-page-head .btn{width:100%}.installment-summary-grid{grid-template-columns:1fr 1fr}.installment-summary-grid article:first-child{grid-column:1/-1}.installment-card-list{grid-template-columns:1fr}.installment-list-metrics{grid-template-columns:1fr 1fr}.installment-list-metrics>div:last-child{grid-column:1/-1}.installment-how-card{padding:.75rem}
}

:root[data-theme="dark"] .debt-kind-expense:has(input:checked){background:rgba(249,115,22,.12)}
:root[data-theme="dark"] .debt-kind-income:has(input:checked){background:rgba(22,163,74,.12)}
:root[data-theme="dark"] .installment-due-card.warning,:root[data-theme="dark"] .installment-summary-grid article.warning{background:rgba(234,88,12,.1)}
:root[data-theme="dark"] .installment-due-card.danger{background:rgba(220,38,38,.1)}
:root[data-theme="dark"] .installment-due-card.success{background:rgba(22,163,74,.1)}

/* Permanent installment delete action */
.installment-delete-button{box-shadow:0 10px 24px rgba(220,38,38,.16)}
@media(max-width:680px){.installment-detail-actions{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* =====================================================================
   Detail Cicilan V8.2 — ringkas, konsisten, dan mobile-first
   ===================================================================== */
.installment-detail-v2-shell{
    width:min(920px,100%);
    display:grid;
    gap:1rem;
    padding-bottom:1rem;
}
.installment-detail-v2-head{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:.85rem;
}
.installment-detail-v2-back{
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--surface);
    color:var(--text);
    box-shadow:var(--shadow-sm);
}
.installment-detail-v2-title{min-width:0}
.installment-detail-v2-title h1{
    margin:0;
    font-size:1.45rem;
    line-height:1.2;
    overflow-wrap:anywhere;
}
.installment-detail-v2-title p{
    margin:.25rem 0 0;
    color:var(--text-soft);
    font-size:.8rem;
}
.installment-detail-v2-actions{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:.7rem;
}
.installment-detail-v2-actions form{margin:0}
.installment-detail-v2-actions .btn{
    width:100%;
    min-height:48px;
    justify-content:center;
    gap:.45rem;
    border-radius:14px;
    font-weight:750;
}
.installment-detail-v2-actions .btn-danger{
    box-shadow:0 10px 24px rgba(220,38,38,.15);
}

.installment-v2-summary{
    padding:1.05rem;
    border-radius:22px;
}
.installment-v2-summary-top{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:.8rem;
}
.installment-v2-summary-icon{
    display:grid;
    place-items:center;
    width:52px;
    height:52px;
    border-radius:16px;
    background:var(--primary-soft);
    color:var(--primary);
    font-size:1.3rem;
}
.installment-v2-summary-copy{
    min-width:0;
    display:grid;
    gap:.08rem;
}
.installment-v2-summary-copy>span{
    color:var(--text-soft);
    font-size:.72rem;
}
.installment-v2-summary-copy>strong{
    font-size:1.55rem;
    line-height:1.2;
}
.installment-v2-summary-copy>small{
    margin-top:.16rem;
    color:var(--text-soft);
    font-size:.68rem;
    line-height:1.45;
}
.installment-v2-progress-value{
    display:grid;
    place-items:center;
    min-width:48px;
    height:34px;
    padding:0 .6rem;
    border-radius:999px;
    background:var(--primary-soft);
    color:var(--primary);
    font-size:.72rem;
    font-weight:800;
}
.installment-v2-progress{margin:.95rem 0}
.installment-v2-stats{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:.65rem;
}
.installment-v2-stats article{
    min-width:0;
    padding:.72rem;
    border-radius:14px;
    background:var(--surface-soft);
}
.installment-v2-stats span,
.installment-v2-stats strong{display:block}
.installment-v2-stats span{
    color:var(--text-soft);
    font-size:.64rem;
}
.installment-v2-stats strong{
    margin-top:.22rem;
    font-size:.78rem;
    overflow-wrap:anywhere;
}

.installment-v2-due-card,
.installment-v2-complete-card{
    display:flex;
    align-items:center;
    gap:.8rem;
    padding:.95rem 1rem;
    border:1px solid var(--border);
    border-radius:18px;
    background:var(--surface);
}
.installment-v2-due-card.warning{border-color:#fed7aa;background:#fff7ed}
.installment-v2-due-card.danger{border-color:#fecaca;background:#fef2f2}
.installment-v2-due-card.success{border-color:#bbf7d0;background:#f0fdf4}
.installment-v2-due-icon,
.installment-v2-complete-icon{
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    flex:0 0 44px;
    border-radius:14px;
    background:var(--primary-soft);
    color:var(--primary);
    font-size:1.05rem;
}
.installment-v2-complete-card{
    border-color:#bbf7d0;
    background:#f0fdf4;
}
.installment-v2-complete-icon{
    background:#dcfce7;
    color:#16a34a;
}
.installment-v2-due-card>div,
.installment-v2-complete-card>div{display:grid;gap:.08rem;min-width:0}
.installment-v2-due-card span,
.installment-v2-complete-card span{color:var(--text-soft);font-size:.68rem}
.installment-v2-due-card strong,
.installment-v2-complete-card strong{font-size:.94rem}
.installment-v2-due-card small,
.installment-v2-complete-card small{color:var(--text-soft);font-size:.66rem;line-height:1.45}

.installment-v2-payment-card,
.installment-v2-history-card{
    padding:1rem;
    border-radius:20px;
}
.installment-v2-section-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:.8rem;
    margin-bottom:1rem;
}
.installment-v2-section-head h2{
    margin:0;
    font-size:1.05rem;
}
.installment-v2-section-head p{
    margin:.2rem 0 0;
    color:var(--text-soft);
    font-size:.7rem;
    line-height:1.5;
}
.installment-v2-payment-badge{
    display:grid;
    place-items:center;
    min-width:50px;
    height:34px;
    padding:0 .65rem;
    border-radius:999px;
    background:var(--primary-soft);
    color:var(--primary);
    font-size:.72rem;
    font-weight:800;
    white-space:nowrap;
}
.installment-v2-payment-form{display:grid;gap:.95rem}
.installment-v2-payment-fields{
    display:grid;
    grid-template-columns:minmax(0,1.25fr) minmax(180px,.75fr);
    gap:.8rem;
}
.installment-v2-wallets{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.65rem;
}
.installment-v2-wallet{
    position:relative;
    display:flex;
    align-items:center;
    gap:.65rem;
    padding:.75rem;
    border:1px solid var(--border);
    border-radius:15px;
    background:var(--surface);
    cursor:pointer;
}
.installment-v2-wallet>input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}
.installment-v2-wallet-icon{
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    flex:0 0 38px;
    border-radius:12px;
}
.installment-v2-wallet-copy{display:grid;gap:.08rem;min-width:0;flex:1}
.installment-v2-wallet-copy strong{font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.installment-v2-wallet-copy small{color:var(--text-soft);font-size:.65rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.installment-v2-wallet-check{
    display:grid;
    place-items:center;
    width:22px;
    height:22px;
    flex:0 0 22px;
    border:1.5px solid var(--border);
    border-radius:999px;
    color:transparent;
}
.installment-v2-wallet:has(input:checked){
    border-color:#22c55e;
    background:#f0fdf4;
    box-shadow:0 0 0 1px rgba(34,197,94,.12) inset;
}
.installment-v2-wallet:has(input:checked) .installment-v2-wallet-check{
    border-color:#16a34a;
    background:#16a34a;
    color:#fff;
}
.installment-v2-pay-button{
    width:100%;
    min-height:50px;
    justify-content:center;
}

.installment-v2-history-list{display:grid;gap:.55rem}
.installment-v2-history-list article{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:.7rem;
    padding:.72rem .76rem;
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--surface-soft);
}
.installment-v2-history-number{
    display:grid;
    place-items:center;
    width:32px;
    height:32px;
    border-radius:10px;
    background:#dcfce7;
    color:#15803d;
    font-size:.72rem;
    font-weight:800;
}
.installment-v2-history-list strong,
.installment-v2-history-list small{display:block}
.installment-v2-history-list strong{font-size:.78rem}
.installment-v2-history-list small{margin-top:.12rem;color:var(--text-soft);font-size:.65rem}
.installment-v2-history-list b{font-size:.78rem;white-space:nowrap}

@media(max-width:680px){
    .installment-detail-v2-shell{
        gap:.82rem;
        padding-bottom:calc(18px + env(safe-area-inset-bottom,0px));
    }
    .installment-detail-v2-head{
        grid-template-columns:auto minmax(0,1fr);
        gap:.7rem;
    }
    .installment-detail-v2-head>.installment-status-badge{
        grid-column:2/3;
        justify-self:start;
        margin-top:-.2rem;
    }
    .installment-detail-v2-back{
        width:40px;
        height:40px;
        border-radius:13px;
    }
    .installment-detail-v2-title h1{font-size:1.18rem}
    .installment-detail-v2-title p{font-size:.68rem}
    .installment-detail-v2-actions{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:.5rem;
    }
    .installment-detail-v2-actions .btn{
        min-height:44px;
        padding:.55rem .35rem;
        font-size:.69rem;
        border-radius:13px;
    }
    .installment-v2-summary{
        padding:.88rem;
        border-radius:18px;
    }
    .installment-v2-summary-top{
        grid-template-columns:auto minmax(0,1fr) auto;
        gap:.65rem;
    }
    .installment-v2-summary-icon{
        width:44px;
        height:44px;
        border-radius:14px;
        font-size:1.1rem;
    }
    .installment-v2-summary-copy>strong{font-size:1.24rem}
    .installment-v2-summary-copy>small{font-size:.63rem}
    .installment-v2-progress-value{min-width:42px;height:30px;font-size:.67rem}
    .installment-v2-stats{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:.55rem;
    }
    .installment-v2-stats article{padding:.65rem}
    .installment-v2-due-card,
    .installment-v2-complete-card{padding:.78rem .82rem;border-radius:16px}
    .installment-v2-due-icon,
    .installment-v2-complete-icon{width:40px;height:40px;flex-basis:40px;border-radius:12px}
    .installment-v2-payment-card,
    .installment-v2-history-card{padding:.88rem;border-radius:18px}
    .installment-v2-section-head{margin-bottom:.82rem}
    .installment-v2-section-head h2{font-size:.96rem}
    .installment-v2-section-head p{font-size:.65rem}
    .installment-v2-payment-fields{grid-template-columns:1fr}
    .installment-v2-wallets{grid-template-columns:1fr}
    .installment-v2-wallet{padding:.7rem}
    .installment-v2-history-list article{
        grid-template-columns:auto minmax(0,1fr);
        padding:.68rem;
    }
    .installment-v2-history-list b{
        grid-column:2/3;
        margin-top:.1rem;
    }
}

:root[data-theme="dark"] .installment-v2-complete-card,
:root[data-theme="dark"] .installment-v2-wallet:has(input:checked){background:rgba(22,163,74,.10)}
:root[data-theme="dark"] .installment-v2-due-card.warning{background:rgba(234,88,12,.10)}
:root[data-theme="dark"] .installment-v2-due-card.danger{background:rgba(220,38,38,.10)}
:root[data-theme="dark"] .installment-v2-due-card.success{background:rgba(22,163,74,.10)}

/* =====================================================================
   Reports redesign v8.3
   ===================================================================== */
.page-reports-v83 main.page{padding-bottom:96px}
.report-page-head{align-items:flex-end}
.report-page-kicker{display:inline-flex;align-items:center;gap:.4rem;margin-bottom:.38rem;color:var(--primary);font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.report-active-period{display:inline-flex;align-items:center;gap:.45rem;padding:.58rem .82rem;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text-soft);font-size:.78rem;font-weight:700;white-space:nowrap}
.report-export-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.85rem;margin-bottom:1rem}
.report-export-card{display:flex;align-items:center;gap:.8rem;min-height:86px;padding:.9rem 1rem;border:1px solid var(--border);border-radius:18px;background:var(--surface);color:var(--text);text-decoration:none;box-shadow:var(--shadow-sm);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.report-export-card:hover{transform:translateY(-2px);border-color:var(--primary-200);box-shadow:var(--shadow)}
.report-export-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--primary-soft);color:var(--primary);font-size:1.12rem;flex:0 0 44px}
.report-export-card.excel .report-export-icon{background:#dcfce7;color:#15803d}
.report-export-card.csv .report-export-icon{background:#e0f2fe;color:#0369a1}
.report-export-copy{min-width:0;flex:1}
.report-export-copy strong,.report-export-copy small{display:block}
.report-export-copy strong{font-size:.9rem}
.report-export-copy small{margin-top:.2rem;color:var(--text-soft);font-size:.7rem;line-height:1.45}
.report-export-arrow{color:var(--text-muted);font-size:.86rem}
.report-period-card{padding:1rem;margin-bottom:1rem;border-radius:20px}
.report-card-title{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.report-card-title>div{display:flex;align-items:center;gap:.72rem;min-width:0}
.report-card-title h2{margin:0;font-size:1rem}
.report-card-title p{margin:.18rem 0 0;color:var(--text-soft);font-size:.72rem;line-height:1.45}
.report-card-title.compact{margin-bottom:.75rem}
.report-card-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;background:var(--primary-soft);color:var(--primary);flex:0 0 40px}
.report-card-icon.income{background:var(--income-soft);color:var(--income)}
.report-card-icon.expense{background:var(--expense-soft);color:var(--expense)}
.report-card-icon.saving{background:var(--saving-soft);color:var(--saving)}
.report-day-count{display:inline-flex;align-items:center;justify-content:center;padding:.35rem .65rem;border:1px solid var(--border);border-radius:999px;background:var(--surface-2);color:var(--text-soft);font-size:.7rem;font-weight:700;white-space:nowrap}
.report-filter-v83{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.85rem;align-items:end}
.report-date-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.report-filter-v83 .field{margin:0}
.report-filter-v83 .field label{display:flex;align-items:center;gap:.4rem;font-size:.74rem}
.report-filter-v83 .input{min-height:48px}
.report-filter-actions{display:flex;gap:.55rem;align-items:center}
.report-filter-actions .btn{min-height:48px;white-space:nowrap}
.report-period-presets{display:flex;align-items:center;flex-wrap:wrap;gap:.45rem;margin-top:.85rem;padding-top:.85rem;border-top:1px solid var(--border)}
.report-period-presets>span{margin-right:.2rem;color:var(--text-muted);font-size:.7rem;font-weight:700}
.report-period-presets a{display:inline-flex;align-items:center;min-height:34px;padding:0 .72rem;border:1px solid var(--border);border-radius:999px;background:var(--surface-2);color:var(--text-soft);font-size:.7rem;font-weight:700;text-decoration:none}
.report-period-presets a:hover{border-color:var(--primary-200);color:var(--primary);background:var(--primary-soft)}
.report-scope-note{display:flex;align-items:flex-start;gap:.7rem;margin-bottom:1rem;padding:.8rem .9rem;border:1px solid #bfdbfe;border-radius:16px;background:#eff6ff;color:#1e40af}
.report-scope-note i{margin-top:.1rem}
.report-scope-note strong,.report-scope-note span{display:block}
.report-scope-note strong{font-size:.78rem}.report-scope-note span{margin-top:.15rem;font-size:.68rem;line-height:1.5;color:#3b5d92}
[data-theme="dark"] .report-scope-note{border-color:#1e3a5f;background:#10243e;color:#93c5fd}
[data-theme="dark"] .report-scope-note span{color:#94a3b8}
.report-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.85rem;margin-bottom:1rem}
.report-kpi-card{display:flex;align-items:center;gap:.75rem;min-height:104px;padding:.9rem;border:1px solid var(--border);border-radius:18px;background:var(--surface);box-shadow:var(--shadow-sm)}
.report-kpi-icon{display:grid!important;place-items:center;width:42px;height:42px;border-radius:13px;flex:0 0 42px;font-size:1.05rem;line-height:1}.report-kpi-icon i{display:block;line-height:1}
.report-kpi-card>div{min-width:0}.report-kpi-card>div>small,.report-kpi-card>div>strong,.report-kpi-card>div>span{display:block}
.report-kpi-card>div>small{color:var(--text-soft);font-size:.69rem}.report-kpi-card>div>strong{margin:.2rem 0;font-size:1.08rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.report-kpi-card>div>span{color:var(--text-muted);font-size:.64rem}
.report-kpi-card.income .report-kpi-icon{background:var(--income-soft);color:var(--income)}.report-kpi-card.income strong{color:var(--income)}
.report-kpi-card.expense .report-kpi-icon{background:var(--expense-soft);color:var(--expense)}.report-kpi-card.expense strong{color:var(--expense)}
.report-kpi-card.saving .report-kpi-icon{background:var(--saving-soft);color:var(--saving)}.report-kpi-card.saving strong{color:var(--saving)}
.report-kpi-card.balance .report-kpi-icon{background:var(--primary-soft);color:var(--primary)}.report-kpi-card.balance strong{color:var(--primary)}
.report-kpi-card.balance.negative .report-kpi-icon{background:var(--danger-soft);color:var(--danger)}.report-kpi-card.balance.negative strong{color:var(--danger)}
.report-chart-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-bottom:1rem}
.report-chart-card{padding:1rem;border-radius:20px}
.report-chart-card .report-chart-box{height:280px;padding:.4rem .25rem .25rem}
.report-empty{min-height:180px;display:grid;place-content:center;text-align:center}
.report-category-section{padding:1rem;margin-bottom:1rem;border-radius:20px}
.report-agg-table th.right{text-align:right}
.report-agg-table .agg-bar>span{background:linear-gradient(90deg,var(--primary),#8b5cf6)}
.report-category-mobile{display:none}
.report-preview-section{padding:1rem;border-radius:20px}
.report-preview-list{display:grid;gap:.55rem}
.report-preview-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.7rem;padding:.7rem .75rem;border:1px solid var(--border);border-radius:14px;background:var(--surface-2)}
.report-preview-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--primary-soft);color:var(--primary)}
.report-preview-icon.income{background:var(--income-soft);color:var(--income)}.report-preview-icon.expense{background:var(--expense-soft);color:var(--expense)}.report-preview-icon.saving{background:var(--saving-soft);color:var(--saving)}
.report-preview-copy{min-width:0}.report-preview-copy strong,.report-preview-copy small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.report-preview-copy strong{font-size:.78rem}.report-preview-copy small{margin-top:.18rem;color:var(--text-soft);font-size:.64rem}
.report-preview-value{font-size:.76rem;font-weight:800;white-space:nowrap}.report-preview-value.income{color:var(--income)}.report-preview-value.expense{color:var(--expense)}.report-preview-value.saving{color:var(--saving)}

@media(max-width:980px){
  .report-export-grid{grid-template-columns:1fr 1fr}.report-export-card:first-child{grid-column:1/-1}
  .report-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .report-filter-v83{grid-template-columns:1fr}.report-filter-actions{width:100%}.report-filter-actions .btn{flex:1}
}
@media(max-width:680px){
  .page-reports-v83 main.page{padding-bottom:104px}
  .report-page-head{align-items:flex-start}.report-page-head .report-active-period{width:100%;justify-content:center;margin-top:.65rem}
  .report-export-grid{grid-template-columns:1fr;gap:.65rem}.report-export-card:first-child{grid-column:auto}.report-export-card{min-height:72px;padding:.75rem .8rem;border-radius:16px}.report-export-icon{width:38px;height:38px;flex-basis:38px;border-radius:12px}.report-export-copy strong{font-size:.82rem}.report-export-copy small{font-size:.65rem}
  .report-period-card{padding:.85rem;border-radius:18px}.report-card-title{align-items:flex-start}.report-card-title h2{font-size:.9rem}.report-card-title p{font-size:.66rem}.report-card-icon{width:36px;height:36px;flex-basis:36px;border-radius:11px}
  .report-date-grid{grid-template-columns:1fr;gap:.65rem}.report-filter-actions{display:grid;grid-template-columns:minmax(0,1fr) auto}.report-filter-actions .btn{width:100%;padding-inline:.8rem}.report-period-presets{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.2rem;scrollbar-width:none}.report-period-presets::-webkit-scrollbar{display:none}.report-period-presets>*{flex:0 0 auto}
  .report-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}.report-kpi-card{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:.7rem;min-height:108px;padding:.78rem;border-radius:16px}.report-kpi-icon{width:42px;height:42px;margin:0;border-radius:13px;font-size:1.08rem}.report-kpi-card>div>strong{font-size:.96rem;line-height:1.25;white-space:normal;overflow:visible;text-overflow:clip;word-break:break-word}.report-kpi-card>div>small{font-size:.66rem}.report-kpi-card>div>span{font-size:.61rem;line-height:1.35}
  .report-chart-grid{grid-template-columns:1fr;gap:.75rem}.report-chart-card{padding:.85rem;border-radius:18px}.report-chart-card .report-chart-box{height:250px}
  .report-category-section{padding:.85rem;border-radius:18px}.report-category-desktop{display:none}.report-category-mobile{display:grid;gap:.55rem}
  .report-category-mobile-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.65rem;align-items:center;padding:.7rem;border:1px solid var(--border);border-radius:14px;background:var(--surface-2)}
  .report-category-mobile-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:12px}
  .report-category-mobile-copy{min-width:0}.report-category-mobile-copy strong,.report-category-mobile-copy small{display:block}.report-category-mobile-copy strong{font-size:.76rem}.report-category-mobile-copy small{margin-top:.15rem;color:var(--text-soft);font-size:.62rem}
  .report-mobile-bar{height:5px;margin-top:.45rem;border-radius:99px;background:var(--border);overflow:hidden}.report-mobile-bar span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--primary),#8b5cf6)}
  .report-category-mobile-value{grid-column:2/3;font-size:.73rem;font-weight:800;color:var(--text)}
  .report-preview-section{padding:.85rem;border-radius:18px}.report-preview-item{grid-template-columns:auto minmax(0,1fr);padding:.68rem}.report-preview-value{grid-column:2/3}.report-preview-copy small{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
}
@media(max-width:410px){
  .report-filter-actions{grid-template-columns:1fr}.report-kpi-grid{grid-template-columns:1fr 1fr}.report-day-count{font-size:.62rem;padding:.3rem .5rem}
}
@media(max-width:680px){.page-reports-v83 .report-filter-actions{display:block}.page-reports-v83 .report-filter-actions .btn{width:100%}}

/* =====================================================================
   Dashboard chart detail modal redesign v8.3.1
   ===================================================================== */
.chart-detail-modal{
    width:min(720px,100%);
    overflow-x:hidden;
}
.chart-detail-body{
    min-height:0;
    overflow-x:hidden;
}
.chart-detail-summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    margin-bottom:.9rem;
    padding:.9rem 1rem;
    border:1px solid var(--border);
    border-radius:16px;
}
.chart-detail-summary>div{
    display:grid;
    gap:.18rem;
    min-width:0;
}
.chart-detail-summary>div>span{
    font-size:.72rem;
    font-weight:700;
    color:var(--text-soft);
}
.chart-detail-summary>div>strong{
    font-size:1.2rem;
    font-weight:800;
    line-height:1.2;
    overflow-wrap:anywhere;
}
.chart-detail-summary-income{
    background:var(--income-soft);
    border-color:color-mix(in srgb,var(--income) 24%,var(--border));
}
.chart-detail-summary-income>div>strong{color:var(--income)}
.chart-detail-summary-expense{
    background:var(--expense-soft);
    border-color:color-mix(in srgb,var(--expense) 24%,var(--border));
}
.chart-detail-summary-expense>div>strong{color:var(--expense)}
.chart-detail-count{
    flex:0 0 auto;
    padding:.35rem .65rem;
    border:1px solid color-mix(in srgb,currentColor 12%,var(--border));
    border-radius:999px;
    background:color-mix(in srgb,var(--surface) 82%,transparent);
    color:var(--text-soft);
    font-size:.72rem;
    font-weight:700;
    white-space:nowrap;
}
.chart-detail-list{
    display:grid;
    gap:.65rem;
}
.chart-detail-card{
    display:grid;
    grid-template-columns:44px minmax(0,1fr) auto 16px;
    align-items:center;
    gap:.8rem;
    width:100%;
    min-width:0;
    padding:.85rem .9rem;
    border:1px solid var(--border);
    border-radius:16px;
    background:var(--surface);
    color:var(--text);
    text-decoration:none;
    box-shadow:0 4px 14px rgba(15,23,42,.035);
    transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.chart-detail-card:hover{
    border-color:color-mix(in srgb,var(--primary) 35%,var(--border));
    box-shadow:0 10px 24px rgba(15,23,42,.08);
    transform:translateY(-1px);
    text-decoration:none;
}
.chart-detail-icon{
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    border-radius:13px;
    font-size:1.05rem;
}
.chart-detail-content{
    display:grid;
    gap:.35rem;
    min-width:0;
}
.chart-detail-name{
    min-width:0;
    font-size:.88rem;
    line-height:1.4;
    font-weight:700;
    overflow-wrap:anywhere;
}
.chart-detail-tags{
    display:flex;
    flex-wrap:wrap;
    gap:.35rem;
    min-width:0;
}
.chart-detail-tags span{
    display:inline-flex;
    align-items:center;
    min-width:0;
    max-width:100%;
    padding:.22rem .48rem;
    border-radius:999px;
    background:var(--surface-soft);
    color:var(--text-soft);
    font-size:.65rem;
    line-height:1.25;
    overflow-wrap:anywhere;
}
.chart-detail-date{
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    color:var(--text-soft);
    font-size:.68rem;
}
.chart-detail-date i{color:var(--primary)}
.chart-detail-amount{
    min-width:0;
    font-size:.82rem;
    font-weight:800;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
}
.chart-detail-amount-income{color:var(--income)}
.chart-detail-amount-expense{color:var(--expense)}
.chart-detail-chevron{
    color:var(--text-soft);
    font-size:.78rem;
}
.chart-detail-empty{
    display:grid;
    justify-items:center;
    gap:.45rem;
    padding:2rem 1rem;
    text-align:center;
}
.chart-detail-empty>span{
    display:grid;
    place-items:center;
    width:52px;
    height:52px;
    border-radius:16px;
    background:var(--primary-50);
    color:var(--primary);
    font-size:1.25rem;
}
.chart-detail-empty strong{font-size:.95rem}
.chart-detail-empty p{
    max-width:34ch;
    margin:0;
    color:var(--text-soft);
    font-size:.76rem;
    line-height:1.6;
}

@media(max-width:680px){
    .chart-detail-modal{
        max-height:min(82dvh,720px);
        padding-inline:14px;
    }
    .chart-detail-modal .modal-head{
        margin-bottom:10px;
        padding-bottom:10px;
    }
    .chart-detail-modal .modal-head>div{
        min-width:0;
        padding-right:.35rem;
    }
    .chart-detail-modal .modal-head h2{
        font-size:.98rem;
        line-height:1.35;
        overflow-wrap:anywhere;
    }
    .chart-detail-modal .modal-head p{
        margin-top:.18rem;
        font-size:.67rem;
        line-height:1.45;
    }
    .chart-detail-summary{
        margin-bottom:.7rem;
        padding:.78rem .82rem;
        border-radius:14px;
    }
    .chart-detail-summary>div>strong{font-size:1.05rem}
    .chart-detail-count{font-size:.66rem;padding:.3rem .52rem}
    .chart-detail-list{gap:.55rem}
    .chart-detail-card{
        grid-template-columns:40px minmax(0,1fr) 14px;
        grid-template-rows:auto auto;
        gap:.55rem .68rem;
        padding:.75rem .78rem;
        border-radius:14px;
        box-shadow:none;
    }
    .chart-detail-icon{
        grid-column:1;
        grid-row:1 / span 2;
        width:40px;
        height:40px;
        border-radius:12px;
        align-self:start;
        font-size:.96rem;
    }
    .chart-detail-content{
        grid-column:2;
        grid-row:1;
        gap:.3rem;
    }
    .chart-detail-name{
        font-size:.8rem;
        line-height:1.38;
        display:-webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;
        overflow:hidden;
    }
    .chart-detail-tags{gap:.28rem}
    .chart-detail-tags span{
        font-size:.61rem;
        padding:.18rem .4rem;
    }
    .chart-detail-date{font-size:.63rem}
    .chart-detail-amount{
        grid-column:2;
        grid-row:2;
        justify-self:start;
        font-size:.76rem;
        white-space:normal;
        overflow-wrap:anywhere;
    }
    .chart-detail-chevron{
        grid-column:3;
        grid-row:1 / span 2;
        align-self:center;
    }
}

@media(max-width:390px){
    .chart-detail-summary{
        align-items:flex-start;
        flex-direction:column;
        gap:.55rem;
    }
}


/* Report KPI mobile icon alignment fix v8.3.2 */
@media(max-width:430px){
  .page-reports-v83 .report-kpi-card{grid-template-columns:38px minmax(0,1fr);gap:.58rem;min-height:102px;padding:.7rem}
  .page-reports-v83 .report-kpi-icon{width:38px;height:38px;border-radius:12px;font-size:1rem}
  .page-reports-v83 .report-kpi-card>div>strong{font-size:.88rem}
}

/* =====================================================================
   Protected demo account v8.3.3
   ===================================================================== */
.protected-account-card{
    border-color:color-mix(in srgb,var(--primary) 25%,var(--border));
    background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 7%,var(--surface)),var(--surface));
}
.profile-danger-icon.protected{
    background:color-mix(in srgb,var(--primary) 12%,var(--surface));
    color:var(--primary);
}
.protected-account-heading{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:.55rem .75rem;
    margin-bottom:.35rem;
}
.protected-account-heading h2{margin:0}
.protected-account-badge{
    display:inline-flex;
    align-items:center;
    gap:.32rem;
    padding:.3rem .58rem;
    border-radius:999px;
    background:color-mix(in srgb,var(--primary) 12%,var(--surface));
    color:var(--primary);
    font-size:.7rem;
    font-weight:800;
    white-space:nowrap;
}
.protected-account-note{
    display:flex;
    align-items:flex-start;
    gap:.55rem;
    margin-top:.75rem;
    padding:.7rem .78rem;
    border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border));
    border-radius:13px;
    background:color-mix(in srgb,var(--primary) 6%,var(--surface));
    color:var(--text-soft);
    font-size:.76rem;
    line-height:1.55;
}
.protected-account-note i{color:var(--primary);margin-top:.08rem}
.protected-account-button,
.protected-account-button:disabled{
    opacity:1;
    cursor:not-allowed;
    border-color:color-mix(in srgb,var(--primary) 28%,var(--border));
    background:color-mix(in srgb,var(--primary) 10%,var(--surface));
    color:var(--primary);
}
@media(max-width:680px){
    .protected-account-heading{align-items:flex-start;flex-direction:column}
    .protected-account-badge{font-size:.66rem}
    .protected-account-note{font-size:.72rem}
    .protected-account-button{width:100%;justify-content:center}
}

/* =====================================================================
   Profile password OTP security v8.3.5
   ===================================================================== */
.password-security-section{overflow:hidden}
.password-security-intro{display:flex;align-items:flex-start;gap:.85rem;padding:.9rem 1rem;margin-bottom:1rem;border:1px solid #c7d2fe;border-radius:16px;background:linear-gradient(135deg,#eef2ff,#f8faff)}
.password-security-icon{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;border-radius:13px;background:#fff;color:var(--primary);box-shadow:var(--shadow-sm)}
.password-security-intro strong{display:block;font-size:.92rem;margin-bottom:.18rem}
.password-security-intro p{margin:0;color:var(--text-soft);font-size:.78rem;line-height:1.55}
.password-step-card{display:grid;grid-template-columns:34px minmax(0,1fr);gap:.85rem;padding:1rem 0;border-top:1px solid var(--border)}
.password-step-card:first-of-type{border-top:0;padding-top:.2rem}
.password-step-card[hidden]{display:none!important}
.password-step-number{display:grid;place-items:center;width:30px;height:30px;border-radius:999px;background:var(--surface-soft);border:1px solid var(--border);color:var(--text-soft);font-size:.78rem;font-weight:800}
.password-step-card.active .password-step-number{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 7px 18px rgba(79,70,229,.2)}
.password-step-content{min-width:0}
.password-step-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;margin-bottom:.8rem}
.password-step-head strong,.password-step-head small{display:block}
.password-step-head strong{font-size:.9rem}
.password-step-head small{margin-top:.15rem;color:var(--text-soft);font-size:.72rem;line-height:1.45}
.password-otp-send-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.password-otp-send-row .btn{min-width:170px}
.password-otp-status{font-size:.75rem;color:var(--text-soft);line-height:1.45}
.password-otp-status.success{color:#15803d}.password-otp-status.error{color:#dc2626}.password-otp-status.loading{color:var(--primary)}
.otp-countdown-pill{display:inline-flex;align-items:center;gap:.35rem;padding:.34rem .56rem;border-radius:999px;background:var(--surface-soft);border:1px solid var(--border);font-size:.72rem;color:var(--text-soft);white-space:nowrap}
.otp-profile-input input{font-size:1.08rem;font-weight:800;letter-spacing:.28em}
.password-submit-actions{margin-top:.15rem}
.demo-password-protected{display:flex;align-items:flex-start;gap:1rem;padding:1rem;border:1px solid #c7d2fe;border-radius:18px;background:linear-gradient(135deg,#eef2ff,#fafaff)}
.demo-password-icon{display:grid;place-items:center;width:52px;height:52px;flex:0 0 52px;border-radius:16px;background:#fff;color:var(--primary);font-size:1.25rem;box-shadow:var(--shadow-sm)}
.demo-password-copy{min-width:0}.security-kicker{display:block;margin-bottom:.2rem;color:var(--primary);font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.demo-password-copy h3{margin:0 0 .35rem;font-size:1rem}.demo-password-copy p{margin:0;color:var(--text-soft);font-size:.78rem;line-height:1.55}
.security-note{display:flex;align-items:flex-start;gap:.45rem;margin-top:.75rem;padding:.65rem .75rem;border-radius:12px;background:rgba(255,255,255,.7);color:var(--text-soft);font-size:.72rem;line-height:1.5}

[data-theme="dark"] .password-security-intro,[data-theme="dark"] .demo-password-protected{background:linear-gradient(135deg,rgba(79,70,229,.15),rgba(30,41,59,.35));border-color:rgba(129,140,248,.35)}
[data-theme="dark"] .password-security-icon,[data-theme="dark"] .demo-password-icon,[data-theme="dark"] .security-note{background:rgba(15,23,42,.62)}

@media(max-width:680px){
  .password-security-intro{padding:.82rem .86rem;border-radius:15px}
  .password-step-card{grid-template-columns:28px minmax(0,1fr);gap:.65rem;padding:.9rem 0}
  .password-step-number{width:27px;height:27px}
  .password-step-head{gap:.5rem}
  .password-otp-send-row{display:grid;grid-template-columns:1fr}
  .password-otp-send-row .btn{width:100%;min-width:0}
  .password-new-grid{grid-template-columns:1fr!important}
  .password-submit-actions .btn{width:100%}
  .demo-password-protected{padding:.9rem;gap:.75rem}
  .demo-password-icon{width:44px;height:44px;flex-basis:44px;border-radius:14px}
}

/* =====================================================================
   Dashboard mobile charts polish v8.3.6
   ===================================================================== */
@media (max-width: 680px) {
    body.mt-route-dashboard .chart-card {
        border-radius: 20px;
        overflow: hidden;
    }
    body.mt-route-dashboard .chart-card-head {
        padding: 13px 13px 11px;
        gap: 9px;
    }
    body.mt-route-dashboard .chart-heading h3 {
        font-size: .96rem;
        line-height: 1.3;
    }
    body.mt-route-dashboard .chart-heading .sub {
        font-size: .69rem;
        line-height: 1.45;
    }
    body.mt-route-dashboard .chart-totals {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        width: 100%;
        margin-top: 8px;
    }
    body.mt-route-dashboard .chart-total-pill {
        min-width: 0;
        min-height: 30px;
        justify-content: flex-start;
        padding: .34rem .48rem;
        overflow: hidden;
    }
    body.mt-route-dashboard .chart-total-pill span,
    body.mt-route-dashboard .chart-total-pill strong {
        min-width: 0;
    }
    body.mt-route-dashboard .chart-total-pill strong {
        margin-left: auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    body.mt-route-dashboard .chart-head-actions {
        gap: 8px;
    }
    body.mt-route-dashboard .period-switch {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        width: 100%;
        overflow: visible;
    }
    body.mt-route-dashboard .period-switch button {
        width: 100%;
        min-width: 0;
        min-height: 35px;
        padding: .4rem .25rem;
        font-size: .64rem;
    }
    body.mt-route-dashboard .chart-legend-inline {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 13px;
        width: 100%;
        padding: 0 2px;
        color: var(--text-soft);
        font-size: .7rem;
    }
    body.mt-route-dashboard .chart-legend-inline .lg {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        white-space: nowrap;
    }
    body.mt-route-dashboard .chart-legend-inline .sw {
        width: 9px;
        height: 9px;
        flex: 0 0 9px;
        border-radius: 999px;
    }
    body.mt-route-dashboard .chart-box,
    body.mt-route-dashboard .chart-card .chart-box {
        width: 100%;
        height: 230px;
        min-height: 230px;
        padding: 6px 8px 12px;
        overflow: hidden;
        touch-action: pan-y;
    }
    body.mt-route-dashboard .chart-box-trend,
    body.mt-route-dashboard .chart-card .chart-box-trend {
        height: 235px;
        min-height: 235px;
    }
    body.mt-route-dashboard .chart-box canvas {
        max-width: 100% !important;
    }
}

@media (max-width: 390px) {
    body.mt-route-dashboard .chart-card-head {
        padding-inline: 11px;
    }
    body.mt-route-dashboard .period-switch button {
        font-size: .6rem;
    }
    body.mt-route-dashboard .chart-box,
    body.mt-route-dashboard .chart-card .chart-box {
        height: 220px;
        min-height: 220px;
        padding-inline: 5px;
    }
}