/* ==========================================================================
   MIZAN OKANE - Design Direction v2.0 (DESIGN.md)
   Dial Settings: ENERGY 1 (Calm) / RHYTHM 1 (Direct) / MOTION 1 (Utility)
   Tema: Gelap sebagai utama, Terang sebagai opsi
   ========================================================================== */

:root {
    /* Tipografi DESIGN.md (System font stack) */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    --font-size-saldo: 32px;
    --font-weight-saldo: 700;
    --font-size-summary: 18px;
    --font-weight-summary: 600;
    --font-size-card-title: 16px;
    --font-weight-card-title: 600;
    --font-size-body: 14px;
    --font-size-small: 12px;
    --font-size-header-title: 18px;

    /* Radius & Spasi DESIGN.md: 8px kartu, 6px input */
    --radius-card: 8px;
    --radius-input: 6px;
    --radius-full: 9999px;

    /* Bayangan: Tanpa bayangan sesuai DESIGN.md */
    --card-shadow: none;
    --elevated-shadow: none;
    --toast-shadow: none;

    /* Palet Gelap DESIGN.md (Default Utama) */
    --bg: #0F1117;
    --surface: #181A24;
    --surface-raised: #1F2232;
    --border: #2A2D3A;
    --text: #E4E4E8;
    --text-secondary: #9194A1;
    --accent: #2ECC8F;

    /* Warna Makna */
    --income: var(--accent);
    --expense: #FF453A;
    --transfer: #4A9EFF;
    --budget-safe: var(--accent);
    --budget-warn: #F5A623;
    --budget-over: #FF453A;

    /* Kompatibilitas Komponen */
    --primary: var(--accent);
    --primary-hover: #28b67f;
    --primary-subtle: rgba(46, 204, 143, 0.12);
    --primary-border: rgba(46, 204, 143, 0.32);
    --primary-ring: rgba(46, 204, 143, 0.32);

    --danger: var(--expense);
    --danger-hover: #e0382f;
    --danger-subtle: rgba(255, 69, 58, 0.12);
    --danger-border: rgba(255, 69, 58, 0.32);

    --transfer-color: var(--transfer);
    --transfer-subtle: rgba(74, 158, 255, 0.12);
    --transfer-border: rgba(74, 158, 255, 0.32);

    --card-bg: var(--surface);
    --card-bg-subtle: var(--surface-raised);
    --text-muted: var(--text-secondary);
    --text-subtle: var(--text-secondary);
    --border-subtle: var(--border);
    --border-strong: var(--border);

    --btn-primary-text: #0F1117;
    --btn-secondary-bg: var(--surface-raised);
    --btn-secondary-hover-bg: #282c40;
    --btn-secondary-text: var(--text);
    --btn-danger-bg: var(--expense);
    --btn-danger-hover-bg: #e0382f;
    --btn-danger-text: #FFFFFF;
    --btn-icon-bg: var(--surface-raised);
    --btn-icon-hover-bg: #282c40;

    --tone-ok: var(--income);
    --tone-ok-bg: rgba(46, 204, 143, 0.12);
    --tone-ok-border: rgba(46, 204, 143, 0.32);

    --tone-warn: var(--budget-warn);
    --tone-warn-bg: rgba(245, 166, 35, 0.12);
    --tone-warn-border: rgba(245, 166, 35, 0.32);

    --tone-error: var(--expense);
    --tone-error-bg: rgba(255, 69, 58, 0.12);
    --tone-error-border: rgba(255, 69, 58, 0.32);

    --chart-axis-label: var(--text-secondary);
    --chart-bar-value: var(--text);
    --chart-bar-expense-hover: #e0382f;
    --chart-bar-income-hover: #28b67f;

    --donut-legend-hover-bg: var(--surface-raised);
    --donut-legend-hover-border: var(--border);

    --progress-track-bg: var(--surface-raised);
    --progress-warn: var(--budget-warn);

    --nav-hover-bg: rgba(255, 255, 255, 0.05);
    --backdrop-bg: rgba(0, 0, 0, 0.72);

    --code-bg: var(--surface-raised);
    --code-color: var(--text);
    --quote-bg: rgba(46, 204, 143, 0.1);
    --quote-color: var(--accent);

    color-scheme: dark;
}

/* Palet Terang DESIGN.md saat dipilih */
[data-theme="light"] {
    --bg: #F5F5F7;
    --surface: #FFFFFF;
    --surface-raised: #F0F0F2;
    --border: #D8D8DC;
    --text: #1A1A1E;
    --text-secondary: #6B6D78;
    --accent: #24A574;

    --income: var(--accent);
    --expense: #FF453A;
    --transfer: #4A9EFF;
    --budget-safe: var(--accent);
    --budget-warn: #F5A623;
    --budget-over: #FF453A;

    --primary: var(--accent);
    --primary-hover: #1e875f;
    --primary-subtle: #e9f7f1;
    --primary-border: #a8dec9;
    --primary-ring: rgba(36, 165, 116, 0.24);

    --danger: var(--expense);
    --danger-hover: #e0382f;
    --danger-subtle: #fff1f0;
    --danger-border: #ffccc7;

    --transfer-color: var(--transfer);
    --transfer-subtle: #eff6ff;
    --transfer-border: #bfdbfe;

    --card-bg: var(--surface);
    --card-bg-subtle: var(--surface-raised);
    --text-muted: var(--text-secondary);
    --text-subtle: var(--text-secondary);
    --border-subtle: var(--border);
    --border-strong: var(--border);

    --btn-primary-text: #FFFFFF;
    --btn-secondary-bg: var(--surface-raised);
    --btn-secondary-hover-bg: #e4e4e8;
    --btn-secondary-text: var(--text);
    --btn-danger-bg: var(--expense);
    --btn-danger-hover-bg: #e0382f;
    --btn-danger-text: #FFFFFF;
    --btn-icon-bg: var(--surface-raised);
    --btn-icon-hover-bg: #e4e4e8;

    --tone-ok: var(--income);
    --tone-ok-bg: #e9f7f1;
    --tone-ok-border: #a8dec9;

    --tone-warn: var(--budget-warn);
    --tone-warn-bg: #fef7ec;
    --tone-warn-border: #fcdca8;

    --tone-error: var(--expense);
    --tone-error-bg: #fff1f0;
    --tone-error-border: #ffccc7;

    --chart-axis-label: var(--text-secondary);
    --chart-bar-value: var(--text);
    --chart-bar-expense-hover: #e0382f;
    --chart-bar-income-hover: #1e875f;

    --donut-legend-hover-bg: var(--surface-raised);
    --donut-legend-hover-border: var(--border);

    --progress-track-bg: var(--surface-raised);
    --progress-warn: var(--budget-warn);

    --nav-hover-bg: rgba(0, 0, 0, 0.04);
    --backdrop-bg: rgba(15, 17, 23, 0.48);

    --code-bg: var(--surface-raised);
    --code-color: var(--text);
    --quote-bg: #e9f7f1;
    --quote-color: #1e875f;

    color-scheme: light;
}

/* Palet Gelap DESIGN.md saat dipilih eksplisit */
[data-theme="dark"] {
    --bg: #0F1117;
    --surface: #181A24;
    --surface-raised: #1F2232;
    --border: #2A2D3A;
    --text: #E4E4E8;
    --text-secondary: #9194A1;
    --accent: #2ECC8F;

    --income: var(--accent);
    --expense: #FF453A;
    --transfer: #4A9EFF;
    --budget-safe: var(--accent);
    --budget-warn: #F5A623;
    --budget-over: #FF453A;

    --primary: var(--accent);
    --primary-hover: #28b67f;
    --primary-subtle: rgba(46, 204, 143, 0.12);
    --primary-border: rgba(46, 204, 143, 0.32);
    --primary-ring: rgba(46, 204, 143, 0.32);

    --danger: var(--expense);
    --danger-hover: #e0382f;
    --danger-subtle: rgba(255, 69, 58, 0.12);
    --danger-border: rgba(255, 69, 58, 0.32);

    --transfer-color: var(--transfer);
    --transfer-subtle: rgba(74, 158, 255, 0.12);
    --transfer-border: rgba(74, 158, 255, 0.32);

    --card-bg: var(--surface);
    --card-bg-subtle: var(--surface-raised);
    --text-muted: var(--text-secondary);
    --text-subtle: var(--text-secondary);
    --border-subtle: var(--border);
    --border-strong: var(--border);

    --btn-primary-text: #0F1117;
    --btn-secondary-bg: var(--surface-raised);
    --btn-secondary-hover-bg: #282c40;
    --btn-secondary-text: var(--text);
    --btn-danger-bg: var(--expense);
    --btn-danger-hover-bg: #e0382f;
    --btn-danger-text: #FFFFFF;
    --btn-icon-bg: var(--surface-raised);
    --btn-icon-hover-bg: #282c40;

    --tone-ok: var(--income);
    --tone-ok-bg: rgba(46, 204, 143, 0.12);
    --tone-ok-border: rgba(46, 204, 143, 0.32);

    --tone-warn: var(--budget-warn);
    --tone-warn-bg: rgba(245, 166, 35, 0.12);
    --tone-warn-border: rgba(245, 166, 35, 0.32);

    --tone-error: var(--expense);
    --tone-error-bg: rgba(255, 69, 58, 0.12);
    --tone-error-border: rgba(255, 69, 58, 0.32);

    --chart-axis-label: var(--text-secondary);
    --chart-bar-value: var(--text);
    --chart-bar-expense-hover: #e0382f;
    --chart-bar-income-hover: #28b67f;

    --donut-legend-hover-bg: var(--surface-raised);
    --donut-legend-hover-border: var(--border);

    --progress-track-bg: var(--surface-raised);
    --progress-warn: var(--budget-warn);

    --nav-hover-bg: rgba(255, 255, 255, 0.05);
    --backdrop-bg: rgba(0, 0, 0, 0.72);

    --code-bg: var(--surface-raised);
    --code-color: var(--text);
    --quote-bg: rgba(46, 204, 143, 0.1);
    --quote-color: var(--accent);

    color-scheme: dark;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --bg: #F5F5F7;
        --surface: #FFFFFF;
        --surface-raised: #F0F0F2;
        --border: #D8D8DC;
        --text: #1A1A1E;
        --text-secondary: #6B6D78;
        --accent: #24A574;

        --income: var(--accent);
        --expense: #FF453A;
        --transfer: #4A9EFF;
        --budget-safe: var(--accent);
        --budget-warn: #F5A623;
        --budget-over: #FF453A;

        --primary: var(--accent);
        --primary-hover: #1e875f;
        --primary-subtle: #e9f7f1;
        --primary-border: #a8dec9;
        --primary-ring: rgba(36, 165, 116, 0.24);

        --danger: var(--expense);
        --danger-hover: #e0382f;
        --danger-subtle: #fff1f0;
        --danger-border: #ffccc7;

        --transfer-color: var(--transfer);
        --transfer-subtle: #eff6ff;
        --transfer-border: #bfdbfe;

        --card-bg: var(--surface);
        --card-bg-subtle: var(--surface-raised);
        --text-muted: var(--text-secondary);
        --text-subtle: var(--text-secondary);
        --border-subtle: var(--border);
        --border-strong: var(--border);

        --btn-primary-text: #FFFFFF;
        --btn-secondary-bg: var(--surface-raised);
        --btn-secondary-hover-bg: #e4e4e8;
        --btn-secondary-text: var(--text);
        --btn-danger-bg: var(--expense);
        --btn-danger-hover-bg: #e0382f;
        --btn-danger-text: #FFFFFF;
        --btn-icon-bg: var(--surface-raised);
        --btn-icon-hover-bg: #e4e4e8;

        --tone-ok: var(--income);
        --tone-ok-bg: #e9f7f1;
        --tone-ok-border: #a8dec9;

        --tone-warn: var(--budget-warn);
        --tone-warn-bg: #fef7ec;
        --tone-warn-border: #fcdca8;

        --tone-error: var(--expense);
        --tone-error-bg: #fff1f0;
        --tone-error-border: #ffccc7;

        --chart-axis-label: var(--text-secondary);
        --chart-bar-value: var(--text);
        --chart-bar-expense-hover: #e0382f;
        --chart-bar-income-hover: #1e875f;

        --donut-legend-hover-bg: var(--surface-raised);
        --donut-legend-hover-border: var(--border);

        --progress-track-bg: var(--surface-raised);
        --progress-warn: var(--budget-warn);

        --nav-hover-bg: rgba(0, 0, 0, 0.04);
        --backdrop-bg: rgba(15, 17, 23, 0.48);

        --code-bg: var(--surface-raised);
        --code-color: var(--text);
        --quote-bg: #e9f7f1;
        --quote-color: #1e875f;

        color-scheme: light;
    }
}

/* ==========================================================================
   Reset & Elemen Dasar
   ========================================================================== */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    accent-color: var(--accent);
}

body {
    font-family: var(--font-sans);
    font-size: var(--font-size-body, 14px);
    background-color: var(--bg);
    color: var(--text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Angka tabular untuk angka keuangan agar lurus secara vertikal */
.tabular-nums,
.summary strong,
.summary-balance-amount,
.summary-item-amount,
.tx-amount,
.wallet-balance-amount,
.budget-spending,
.budget-status-text,
.budget-percent,
.budget-percent-badge,
.budget-detail-value,
.donut-legend-percent,
.donut-legend-amount,
.chart-bar-value,
.chart-detail-amount,
#tx-amount,
.daily-total {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.container {
    max-width: 640px;
    margin: 0 auto;
    padding-top: calc(8px + env(safe-area-inset-top, 0px));
    padding-left: calc(16px + env(safe-area-inset-left, 0px));
    padding-right: calc(16px + env(safe-area-inset-right, 0px));
    padding-bottom: calc(156px + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 768px) {
    .container {
        padding-top: calc(12px + env(safe-area-inset-top, 0px));
        padding-left: calc(20px + env(safe-area-inset-left, 0px));
        padding-right: calc(20px + env(safe-area-inset-right, 0px));
        padding-bottom: 100px;
    }
}

h1, h2, h3 {
    color: var(--text);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.25;
}

h1 {
    font-size: 22px;
}

h2 {
    font-size: var(--font-size-card-title, 16px);
    font-weight: var(--font-weight-card-title, 600);
    margin-bottom: 12px;
}

h3 {
    font-size: 15px;
    margin-bottom: 8px;
}

p {
    color: var(--text);
}

/* Aksesibilitas Fokus Keyboard (R-32) */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ==========================================================================
   Header Aplikasi Tipis (56px) & Navigasi Desktop
   ========================================================================== */

.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 56px;
    height: 56px;
    margin-bottom: 20px;
    padding: 0;
    border-bottom: 1px solid var(--border);
    position: relative;
    gap: 12px;
}

.app-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
}

.app-brand-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: var(--accent);
    display: block;
    pointer-events: none;
}

.app-title {
    font-size: var(--font-size-header-title, 18px);
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--text);
    white-space: nowrap;
    line-height: 1;
    margin: 0;
}

/* Navigasi Desktop (Layar PC >= 768px, Tab di Atas) */
.desktop-nav {
    display: none;
    gap: 4px;
    align-items: center;
    background: var(--surface-raised);
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 8px;
}

@media (min-width: 768px) {
    .desktop-nav {
        display: flex;
    }
}

.desktop-nav .nav-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    min-height: 44px;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    flex: none;
}

.desktop-nav .nav-tab-btn:hover {
    color: var(--text);
    background-color: var(--nav-hover-bg);
}

.desktop-nav .nav-tab-btn.is-active {
    background-color: var(--accent);
    color: var(--btn-primary-text);
    font-weight: 600;
    border-color: var(--accent);
    box-shadow: none;
}

.desktop-nav .nav-tab-btn.nav-tab-center-btn {
    background-color: var(--surface);
    border: 1px solid var(--border);
    font-weight: 600;
    padding: 8px 14px;
}

.desktop-nav .nav-tab-btn.nav-tab-center-btn:hover {
    color: var(--text);
    border-color: var(--accent);
}

.desktop-nav .nav-tab-btn.nav-tab-center-btn.is-active {
    background-color: var(--accent);
    color: var(--btn-primary-text);
    border-color: var(--accent);
}

.desktop-nav .nav-tab-btn .nav-icon {
    flex-shrink: 0;
}

/* Status Sinkronisasi Header (Ikon Kecil di Header) */
.header-sync-wrapper {
    position: relative;
    flex: none;
    display: flex;
    align-items: center;
}

.header-sync-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.header-sync-btn:hover {
    background-color: var(--surface-raised);
    border-color: var(--border);
}

.header-sync-btn[data-state="unlinked"] {
    color: var(--text-secondary);
}

.header-sync-btn[data-state="synced"] {
    color: var(--accent);
}

.header-sync-btn[data-state="warning"],
.header-sync-btn[data-state="error"] {
    color: var(--budget-warn);
}

.header-sync-btn[data-state="syncing"] {
    color: var(--text-secondary);
}

.header-sync-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.icon-spin {
    animation: icon-rotate 1.2s linear infinite;
}

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

.header-sync-popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card, 8px);
    padding: 10px 14px;
    min-width: 220px;
    max-width: 280px;
    z-index: 60;
    box-shadow: none;
}

.sync-status-popover {
    font-size: 13px;
    line-height: 1.45;
    color: var(--text);
    margin: 0;
    overflow-wrap: anywhere;
}

.sync-status-popover[data-tone="ok"] {
    color: var(--income);
}

.sync-status-popover[data-tone="warn"] {
    color: var(--budget-warn);
}

.sync-status-popover[data-tone="error"] {
    color: var(--expense);
}

/* ==========================================================================
   Penanda Mode Data Contoh
   ========================================================================== */

.demo-mode-indicator {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 10px;
    background: rgba(245, 166, 35, 0.12);
    border: 1px solid rgba(245, 166, 35, 0.32);
    border-radius: var(--radius-card, 8px);
    margin: -4px 0 12px;
    min-height: 32px;
    box-sizing: border-box;
}

.demo-mode-indicator.hidden {
    display: none;
}

.demo-mode-indicator-content {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1;
    overflow: hidden;
}

.demo-mode-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--budget-warn);
    white-space: nowrap;
    flex-shrink: 0;
}

.demo-mode-badge svg {
    flex-shrink: 0;
}

.demo-mode-desc {
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 380px) {
    .demo-mode-desc {
        display: none;
    }
}

.btn-demo-banner-exit {
    padding: 2px 8px;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-input, 6px);
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
}

.btn-demo-banner-exit::after {
    content: '';
    position: absolute;
    top: -10px;
    bottom: -10px;
    left: -8px;
    right: -8px;
}

.btn-demo-banner-exit:hover {
    background: var(--surface-raised);
}

/* ==========================================================================
   Status Sinkronisasi Pengaturan
   ========================================================================== */

.sync-bar {
    background: var(--card-bg);
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid var(--border);
    margin-bottom: 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
}

.sync-status {
    flex: 1 1 200px;
    font-size: 13.5px;
    color: var(--text-muted);
    min-width: 0;
    overflow-wrap: anywhere;
}

.sync-status[data-tone="ok"] {
    color: var(--tone-ok);
    font-weight: 500;
}

.sync-status[data-tone="warn"] {
    color: var(--tone-warn);
    font-weight: 500;
}

.sync-status[data-tone="error"] {
    color: var(--tone-error);
    font-weight: 500;
}

.sync-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sync-conflict {
    flex: 1 1 100%;
    border-top: 1px solid var(--border-subtle);
    padding-top: 10px;
    font-size: 13.5px;
}

.sync-conflict p {
    margin-bottom: 8px;
}

/* ==========================================================================
   Kartu Ringkasan Saldo (Hero Beranda)
   ========================================================================== */

.summary {
    background: var(--surface);
    padding: 20px 18px 16px;
    border-radius: var(--radius-card, 8px);
    border: 1px solid var(--border);
    box-shadow: none;
    margin-bottom: 16px;
}

.summary-balance,
.summary-item.balance {
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.summary-month-controls {
    justify-content: center;
    margin-bottom: 12px;
}

.summary-month-label {
    min-width: 140px;
}

.summary-balance-label,
.summary-item.balance span {
    font-size: var(--font-size-small, 12px);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.summary-balance-amount,
.summary-item.balance strong {
    font-size: var(--font-size-saldo, 32px);
    font-weight: var(--font-weight-saldo, 700);
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

@media (min-width: 480px) {
    .summary-balance-amount,
    .summary-item.balance strong {
        font-size: var(--font-size-saldo, 32px);
    }
}

.summary-balance-line,
.summary-balance .summary-balance-line,
.summary-item.balance .summary-balance-line,
#total-balance .summary-balance-line {
    display: block;
    line-height: 1.2;
    color: var(--text);
}

.summary-item-line {
    display: block;
    line-height: 1.25;
}

.summary-item-income .summary-item-line,
.summary-row .summary-item.income .summary-item-line,
.summary-income-line,
#total-income .summary-item-line {
    color: var(--income);
}

.summary-item-expense .summary-item-line,
.summary-row .summary-item.expense .summary-item-line,
.summary-expense-line,
#total-expense .summary-item-line {
    color: var(--expense);
}

.summary-row {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.summary-row .summary-item {
    padding: 4px 8px;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2px;
    border: none;
    background: transparent;
}

.summary-divider {
    width: 1px;
    height: 32px;
    background-color: var(--border);
    justify-self: center;
}

.summary-item-label,
.summary-row .summary-item span {
    font-size: var(--font-size-small, 12px);
    font-weight: 500;
    color: var(--text-secondary);
}

.summary-item-amount,
.summary-row .summary-item strong {
    font-size: var(--font-size-summary, 18px);
    font-weight: var(--font-weight-summary, 600);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.summary-item-income strong,
.summary-row .summary-item.income strong {
    color: var(--income);
}

.summary-item-expense strong,
.summary-row .summary-item.expense strong {
    color: var(--expense);
}

.summary-timbangan-action {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: center;
}

.btn-timbangan-entry {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: none;
    border: none;
    color: var(--accent);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: var(--radius-input, 6px);
    min-height: 44px;
    transition: background-color 0.15s ease;
}

.btn-timbangan-entry:hover {
    background-color: var(--surface-raised);
    color: var(--accent);
}

.btn-timbangan-entry:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.timbangan-entry-icon {
    flex-shrink: 0;
}

/* ==========================================================================
   Dompet (Baris Geser ke Samping)
   ========================================================================== */

.wallets-section {
    margin-bottom: 16px;
}

.wallet-balances {
    display: flex;
    flex-direction: row;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 2px 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.wallet-balances::-webkit-scrollbar {
    display: none;
}

.wallet-balance-item {
    flex: 0 0 auto;
    min-width: 120px;
    max-width: 180px;
    background: var(--surface);
    padding: 10px 14px;
    border-radius: var(--radius-card, 8px);
    border: 1px solid var(--border);
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.wallet-balance-item:hover {
    border-color: var(--accent);
}

.wallet-balance-item:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.wallet-balance-item.is-selected {
    border-color: var(--accent);
    background: var(--surface-raised);
}

.wallet-balance-item.is-zero {
    border-color: var(--surface-raised);
}

.wallet-balance-item.is-zero:hover {
    border-color: var(--accent);
}

.wallet-balance-item.is-zero.is-selected {
    border-color: var(--accent);
}

.wallet-balance-item.is-zero .wallet-balance-amount {
    color: var(--text-secondary);
    opacity: 0.7;
}

.wallet-balance-item.is-zero.is-selected .wallet-balance-amount {
    opacity: 1;
}

.wallet-balance-name {
    font-size: var(--font-size-small, 12px);
    color: var(--text-secondary);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wallet-balance-amount {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================================================
   Budget Ringkas per Kategori (Beranda)
   ========================================================================== */

.budget-section {
    background: var(--surface);
    padding: 16px;
    border-radius: var(--radius-card, 8px);
    border: 1px solid var(--border);
    box-shadow: none;
    margin-bottom: 16px;
}

.budget-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}

.budget-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.budget-header h2,
.budget-header-top h2,
.card-title {
    margin: 0;
    font-size: var(--font-size-card-title, 16px);
    font-weight: var(--font-weight-card-title, 600);
    color: var(--text);
}

.budget-currency-control {
    display: inline-flex;
    background-color: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-input, 6px);
    padding: 3px;
    gap: 3px;
}

.budget-currency-control .chart-toggle-btn {
    padding: 4px 10px;
    font-size: 12px;
    min-height: 38px;
}

.budget-month-controls {
    display: flex;
    align-items: center;
    gap: 4px;
}

.budget-section .budget-month-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    width: 100%;
}

.btn-month-nav {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-input, 6px);
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    padding: 0;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn-month-nav:hover {
    background: var(--surface-raised);
    border-color: var(--border);
}

.btn-month-nav:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.budget-month-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    padding: 0 4px;
    min-width: 76px;
    text-align: center;
    user-select: none;
}

.budget-summary-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    background: transparent;
    border-radius: 0;
}

.budget-summary-banner-item {
    display: inline-flex;
    gap: 5px;
    align-items: baseline;
    white-space: nowrap;
    flex-shrink: 0;
}

.budget-summary-banner-item span {
    color: var(--text-secondary);
    white-space: nowrap;
}

.budget-summary-banner-item strong {
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.budget-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.budget-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.budget-item.budget-item-subcategory {
    margin-left: 14px;
    padding-left: 10px;
    border-left: 2px solid var(--border);
}

.budget-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.budget-item:first-child {
    padding-top: 0;
}

.budget-item-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.budget-category-name {
    font-size: var(--font-size-body, 14px);
    font-weight: 500;
    color: var(--text);
    word-break: break-word;
}

.budget-spending {
    font-size: 13px;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.budget-spending-divider {
    font-size: 12px;
    color: var(--text-secondary);
}

.budget-progress-track {
    width: 100%;
    height: 6px;
    background-color: var(--surface-raised);
    border-radius: 999px;
    overflow: hidden;
}

.budget-progress-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.25s ease, background-color 0.25s ease;
}

.budget-progress-fill.tone-normal {
    background-color: var(--budget-safe);
}

.budget-progress-fill.tone-warn {
    background-color: var(--budget-warn);
}

.budget-progress-fill.tone-danger {
    background-color: var(--budget-over);
}

.budget-item-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-small, 12px);
}

.budget-status-text {
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.budget-status-text.tone-normal {
    color: var(--text-secondary);
}

.budget-status-text.tone-warn {
    color: var(--budget-warn);
}

.budget-status-text.tone-danger {
    color: var(--budget-over);
}

.budget-percent {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.budget-percent.tone-normal {
    color: var(--text-secondary);
}

.budget-percent.tone-warn {
    color: var(--budget-warn);
}

.budget-percent.tone-danger {
    color: var(--budget-over);
}

/* ==========================================================================
   Transaksi Terakhir (Beranda)
   ========================================================================== */

.recent-tx-section {
    background: var(--surface);
    padding: 16px;
    border-radius: var(--radius-card, 8px);
    border: 1px solid var(--border);
    box-shadow: none;
    margin-bottom: 20px;
}

.recent-tx-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.recent-tx-header h2 {
    margin: 0;
    font-size: var(--font-size-card-title, 16px);
    font-weight: var(--font-weight-card-title, 600);
    color: var(--text);
}

.btn-link-action {
    background: none;
    border: none;
    color: var(--accent);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    transition: color 0.15s ease, background-color 0.15s ease;
    flex: none;
}

.btn-link-action:hover {
    color: var(--accent);
    background-color: var(--surface-raised);
}

.btn-link-action:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.recent-tx-section .tx-item {
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    padding: 12px 0;
    box-shadow: none;
}

.recent-tx-section .tx-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.recent-tx-section .tx-item:first-child {
    padding-top: 2px;
}

.recent-tx-section .tx-item:hover {
    background: transparent;
    border-color: var(--border);
}

/* ==========================================================================
   Keadaan Kosong (Empty State)
   ========================================================================== */

.empty-state {
    padding: 24px 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
}

.empty-state-text {
    font-size: var(--font-size-body, 14px);
    color: var(--text-secondary);
    margin: 0;
}

.btn-action-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-input, 6px);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-action-outline:hover {
    background: var(--surface-raised);
    border-color: var(--accent);
}

.btn-action-outline:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.list-section {
    background: var(--surface);
    padding: 16px;
    border-radius: var(--radius-card, 8px);
    border: 1px solid var(--border);
    box-shadow: none;
    margin-bottom: 24px;
}

.list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.list-header-title-wrap {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.list-header h2 {
    margin: 0;
    font-size: var(--font-size-card-title, 16px);
    font-weight: var(--font-weight-card-title, 600);
    color: var(--text);
}

.riwayat-summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
}

.riwayat-summary.is-multiline {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.riwayat-summary-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.riwayat-summary-income {
    color: var(--income);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.riwayat-summary-expense {
    color: var(--expense);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.list-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-select {
    padding: 8px 12px;
    font-size: 13.5px;
    border: 1px solid var(--border);
    border-radius: var(--radius-input, 6px);
    background-color: var(--surface-raised);
    color: var(--text);
    min-height: 44px;
    width: auto;
    max-width: 100%;
}

.btn-search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: var(--radius-input, 6px);
    border: 1px solid var(--border);
    background-color: var(--surface-raised);
    color: var(--text-secondary);
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    box-shadow: none;
}

.btn-search-toggle:hover {
    border-color: var(--accent);
    color: var(--text);
}

.btn-search-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.btn-search-toggle.is-active,
.btn-search-toggle[aria-expanded="true"] {
    border-color: var(--accent);
    color: var(--accent);
}

.history-search-bar {
    margin-bottom: 14px;
}

.history-search-bar.hidden {
    display: none;
}

.history-search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.history-search-icon {
    position: absolute;
    left: 14px;
    color: var(--text-secondary);
    pointer-events: none;
    flex-shrink: 0;
}

.history-search-input {
    width: 100%;
    min-height: 44px;
    padding: 8px 42px 8px 38px;
    font-size: 13.5px;
    font-family: inherit;
    color: var(--text);
    background-color: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-input, 6px);
    outline: none;
    transition: border-color 0.15s ease;
    box-shadow: none;
}

.history-search-input:focus {
    border-color: var(--accent);
}

.history-search-input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.history-search-input::placeholder {
    color: var(--text-secondary);
}

.btn-search-clear {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-input, 6px);
    transition: color 0.15s ease;
    box-shadow: none;
}

.btn-search-clear:hover {
    color: var(--text);
}

.btn-search-clear:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.btn-search-clear.hidden {
    display: none;
}

.tx-list {
    display: flex;
    flex-direction: column;
}

/* Pengelompokan Tanggal Riwayat */
.tx-date-group {
    margin-bottom: 8px;
}

.tx-date-group:last-child {
    margin-bottom: 0;
}

.tx-date-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0 6px;
    border-bottom: 1px solid var(--border);
}

.tx-date-group:first-child .tx-date-group-header {
    padding-top: 0;
}

.tx-date-group-title {
    font-size: var(--font-size-small, 12px);
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}

.tx-date-group-total {
    font-size: var(--font-size-small, 12px);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.tx-date-group-total.income {
    color: var(--income);
}

.tx-date-group-total.expense {
    color: var(--expense);
}

.tx-date-group-total.neutral {
    color: var(--text-secondary);
}

.tx-date-group-items {
    display: flex;
    flex-direction: column;
}

/* Tiap Baris Transaksi */
.tx-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border: none;
    border-bottom: 1px solid var(--border);
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.tx-date-group-items .tx-item:last-child {
    border-bottom: none;
}

.tx-item:hover {
    background-color: transparent;
    border-color: var(--border);
}

.tx-item.is-readonly {
    cursor: default;
}

.tx-item:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Ikon Kategori Garis */
.tx-item-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border-radius: var(--radius-card, 8px);
    background-color: var(--surface-raised);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.tx-item-icon.income {
    color: var(--income);
}

.tx-item-icon.expense {
    color: var(--expense);
}

.tx-item-icon.transfer {
    color: var(--transfer);
}

.tx-item-icon.penyesuaian {
    color: var(--accent);
}

.tx-item-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tx-item-main {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.tx-item-category {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex-shrink: 1;
}

.tx-transfer-badge {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--transfer);
    background-color: var(--surface-raised);
    padding: 1px 5px;
    border-radius: 4px;
    border: 1px solid var(--border);
    letter-spacing: 0.04em;
    vertical-align: middle;
}

.tx-item-note-row {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.tx-item-note {
    display: inline-block;
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.tx-item-note.is-scrolling {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    animation: txNoteScroll var(--tx-note-duration, 8s) ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes txNoteScroll {
    0%, 15% {
        transform: translateX(0);
    }
    85%, 100% {
        transform: translateX(calc(-1 * var(--tx-note-scroll-dist, 0px)));
    }
}

@media (prefers-reduced-motion: reduce) {
    .tx-item-note,
    .tx-item-note.is-scrolling {
        animation: none !important;
        transform: none !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}

.tx-item-sub {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-small, 12px);
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tx-item-wallet {
    overflow: hidden;
    text-overflow: ellipsis;
}

.tx-item-time {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    flex-shrink: 0;
}

.tx-item-amount-col {
    text-align: right;
    flex-shrink: 0;
    margin-left: auto;
}

.tx-amount {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.tx-amount.income {
    color: var(--income);
}

.tx-amount.expense {
    color: var(--expense);
}

.tx-amount.transfer {
    color: var(--transfer);
}

.tx-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.btn-icon {
    padding: 0;
    width: 44px;
    height: 44px;
    min-height: 44px;
    min-width: 44px;
    border-radius: var(--radius-input, 6px);
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    flex: none;
}

.btn-icon:hover {
    background: var(--surface-raised);
    border-color: var(--border);
    color: var(--text);
}

.btn-icon.btn-delete:hover {
    border-color: var(--expense);
    background: transparent;
    color: var(--expense);
}

.tx-empty {
    text-align: center;
    padding: 32px 16px;
    color: var(--text-secondary);
    font-size: 14px;
}

/* ==========================================================================
   Grafik Bulanan & Diagram Donut (Statistik)
   ========================================================================== */

/* Tab Skala Waktu Statistik (Harian, Bulanan, Tahunan) */
.stats-scale-bar {
    margin-bottom: 16px;
}

.stats-scale-tabs {
    display: flex;
    background-color: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-card, 8px);
    padding: 3px;
    gap: 3px;
}

.stats-scale-tab {
    flex: 1;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-secondary);
    background-color: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.stats-scale-tab:hover {
    color: var(--text);
}

.stats-scale-tab.is-active {
    background-color: var(--surface);
    color: var(--text);
    font-weight: 600;
    border-color: var(--border);
}

.stats-scale-tab:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.stats-month-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card, 8px);
    padding: 10px 14px;
    margin-bottom: 16px;
}

.stats-month-bar .summary-month-controls {
    margin-bottom: 0;
}

.stats-currency-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card, 8px);
    padding: 10px 14px;
    margin-bottom: 16px;
    gap: 12px;
}

.stats-currency-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.stats-currency-control {
    display: inline-flex;
    background-color: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-input, 6px);
    padding: 3px;
    gap: 3px;
}

.chart-section,
.donut-section {
    background: var(--card-bg);
    padding: 18px 16px;
    border-radius: var(--radius-card, 8px);
    border: 1px solid var(--border);
    box-shadow: var(--card-shadow);
    margin-bottom: 24px;
}

.chart-header,
.donut-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-bottom: 14px;
}

.chart-header-title,
.donut-header-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.chart-header h2,
.donut-header h2 {
    margin-bottom: 0;
}

.chart-summary-text,
.donut-month-label {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
}

/* Segmented Toggle Control (Pilihan Pengeluaran / Pemasukan) */
.chart-toggle-group {
    display: inline-flex;
    background-color: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-input, 6px);
    padding: 3px;
    gap: 3px;
}

.chart-toggle-btn {
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13.5px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    min-height: 44px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    user-select: none;
    flex: none;
}

.chart-toggle-btn:hover {
    color: var(--text);
}

.chart-toggle-btn.is-active {
    background-color: var(--surface);
    border-color: var(--border);
    color: var(--text);
    font-weight: 600;
    box-shadow: none;
}

.chart-toggle-btn.is-active[data-type="expense"] {
    color: var(--expense);
}

.chart-toggle-btn.is-active[data-type="income"] {
    color: var(--income);
}

.chart-detail {
    font-size: 13.5px;
    background: var(--card-bg-subtle);
    border: 1px solid var(--border);
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 14px;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.chart-detail-month {
    font-weight: 600;
}

.chart-detail-amount {
    color: var(--tone-error);
    font-weight: 700;
}

.chart-detail-amount.income {
    color: var(--tone-ok);
}

.chart-detail-count {
    color: var(--text-muted);
    font-size: 12.5px;
}

.donut-subcat-section {
    width: 100%;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.donut-subcat-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 2px;
}

.donut-subcat-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.donut-subcat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    padding: 3px 0;
    gap: 8px;
}

.donut-subcat-name {
    color: var(--text);
    font-weight: 500;
    word-break: break-word;
}

.donut-subcat-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.donut-subcat-pct {
    color: var(--text-secondary);
    font-size: 12px;
}

.donut-subcat-amount {
    color: var(--text);
    font-weight: 600;
}

.chart-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.chart-empty {
    text-align: center;
    padding: 32px 16px;
    color: var(--text-muted);
    font-size: 14px;
}

.expense-chart,
.monthly-chart {
    display: block;
    user-select: none;
}

.chart-grid-line {
    stroke: var(--border-subtle);
    stroke-width: 1;
    stroke-dasharray: 4, 4;
}

.chart-axis-line {
    stroke: var(--border);
    stroke-width: 1.5;
}

.chart-axis-label {
    fill: var(--chart-axis-label);
    font-size: 11px;
    font-family: inherit;
}

.chart-bar-group {
    cursor: default;
}

.chart-bar {
    fill: var(--danger);
    opacity: 0.35;
    transition: fill 0.15s ease, opacity 0.15s ease;
}

.chart-bar-group.is-selected .chart-bar {
    fill: var(--danger);
    opacity: 1;
}

.monthly-chart.is-income .chart-bar,
.yearly-chart.is-income .chart-bar {
    fill: var(--tone-ok);
    opacity: 0.35;
}

.monthly-chart.is-income .chart-bar-group.is-selected .chart-bar,
.yearly-chart.is-income .chart-bar-group.is-selected .chart-bar {
    fill: var(--tone-ok);
    opacity: 1;
}

/* Grafik Harian: semua batang bernilai tampil penuh */
.daily-chart .chart-bar {
    fill: var(--danger);
    opacity: 1;
}

.daily-chart.is-income .chart-bar {
    fill: var(--tone-ok);
    opacity: 1;
}

.daily-chart .chart-bar-value {
    fill: var(--text);
    font-weight: 600;
}

.daily-chart .chart-month-label {
    fill: var(--text-secondary);
    font-size: 11px;
}

.yearly-chart .chart-month-label {
    fill: var(--text-secondary);
    font-size: 12px;
    font-family: inherit;
    font-weight: 500;
}

.yearly-chart .chart-bar-group.is-selected .chart-month-label {
    fill: var(--text);
    font-weight: 700;
}

.chart-bar-value {
    fill: var(--text-secondary);
    font-size: 10px;
    font-weight: 500;
    font-family: inherit;
}

.chart-bar-group.is-selected .chart-bar-value {
    fill: var(--text);
    font-weight: 700;
}

.chart-month-label {
    fill: var(--text-secondary);
    font-size: 12px;
    font-family: inherit;
    font-weight: 500;
}

.chart-bar-group.is-selected .chart-month-label {
    fill: var(--text);
    font-weight: 700;
}

/* Kontrol Donut */
.donut-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    width: 100%;
}

.donut-month-controls {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.donut-container {
    width: 100%;
}

.donut-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

@media (min-width: 540px) {
    .donut-content {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 24px;
    }
}

.donut-svg-wrapper {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 220px;
    height: 220px;
    margin: 0 auto;
}

.donut-chart-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.donut-bg-ring {
    stroke: var(--border);
    opacity: 0.35;
}

.donut-segment {
    cursor: pointer;
    transition: stroke-width 0.18s ease, opacity 0.18s ease;
}

.donut-segment:hover,
.donut-segment.is-active {
    stroke-width: 40;
}

.donut-segment:focus-visible {
    outline: none;
    stroke-width: 40;
}

.donut-chart-svg.has-active .donut-segment:not(.is-active) {
    opacity: 0.45;
}

.donut-center-title {
    fill: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
}

.donut-center-value {
    fill: var(--text);
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
}

.donut-center-sub {
    fill: var(--text-muted);
    font-size: 11px;
    font-weight: 500;
    font-family: inherit;
}

.donut-legend {
    width: 100%;
    flex: 1;
    min-width: 0;
}

.donut-legend-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.donut-legend-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card-bg-subtle);
    cursor: pointer;
    min-height: 44px;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.donut-legend-item:hover,
.donut-legend-item.is-active {
    background: var(--donut-legend-hover-bg);
    border-color: var(--donut-legend-hover-border);
}

.donut-legend-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.donut-legend-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

.donut-legend-name {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.donut-legend-side {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-shrink: 0;
}

.donut-legend-percent {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    min-width: 38px;
    text-align: right;
}

.donut-legend-amount {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text);
    text-align: right;
}

/* ==========================================================================
   Halaman Timbangan (Mizan) & Kalkulator "Timbang Sebelum Beli"
   ========================================================================== */

.timbangan-header-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.btn-timbangan-back {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--btn-icon-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-input, 6px);
    color: var(--text);
    cursor: pointer;
    flex-shrink: 0;
}

.btn-timbangan-back:hover {
    background-color: var(--btn-secondary-hover-bg);
}

.btn-timbangan-back:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.timbangan-title-wrap {
    display: flex;
    flex-direction: column;
}

.timbangan-main-title {
    margin: 0;
    font-size: var(--font-size-header-title, 18px);
    font-weight: 600;
    color: var(--text);
    line-height: 1.25;
}

.timbangan-sub-title {
    font-size: var(--font-size-small, 12px);
    color: var(--text-secondary);
    margin-top: 2px;
}

.timbangan-section,
.timbangan-calc-section {
    background: var(--surface);
    padding: 18px 16px;
    border-radius: var(--radius-card, 8px);
    border: 1px solid var(--border);
    box-shadow: none;
    margin-bottom: 20px;
}

.timbangan-scale-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.timbangan-svg-wrap {
    width: 100%;
    max-width: 320px;
    margin: 6px auto 10px;
    display: flex;
    justify-content: center;
}

.timbangan-svg {
    width: 100%;
    height: auto;
    max-height: 180px;
    display: block;
    color: var(--text);
}

.timbangan-pan-amounts {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 320px;
    margin: 4px 0 12px;
}

.timbangan-pan-box {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.timbangan-pan-box.pan-left {
    align-items: flex-start;
    text-align: left;
}

.timbangan-pan-box.pan-right {
    align-items: flex-end;
    text-align: right;
}

.timbangan-pan-box .pan-title {
    font-size: var(--font-size-small, 12px);
    color: var(--text-secondary);
    font-weight: 500;
}

.timbangan-pan-box .pan-amount {
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.timbangan-pan-box.pan-left .pan-amount {
    color: var(--income);
}

.timbangan-pan-box.pan-right .pan-amount {
    color: var(--expense);
}

.timbangan-verdict-box {
    width: 100%;
    max-width: 320px;
    padding: 12px 14px;
    border-radius: var(--radius-input, 6px);
    background: var(--surface-raised);
    border: 1px solid var(--border);
    text-align: center;
    box-sizing: border-box;
}

.timbangan-verdict-box.is-surplus {
    border-color: rgba(46, 204, 143, 0.35);
    background: rgba(46, 204, 143, 0.08);
}

.timbangan-verdict-box.is-defisit {
    border-color: rgba(255, 69, 58, 0.35);
    background: rgba(255, 69, 58, 0.08);
}

.timbangan-verdict-text {
    font-size: var(--font-size-summary, 18px);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin: 0;
}

.timbangan-verdict-box.is-surplus .timbangan-verdict-text {
    color: var(--income);
}

.timbangan-verdict-box.is-defisit .timbangan-verdict-text {
    color: var(--expense);
}

.timbangan-calc-form {
    margin-top: 14px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.calc-select {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-input, 6px);
    color: var(--text);
    font-size: 14px;
    font-family: var(--font-sans);
    outline: none;
    transition: border-color 0.15s ease;
}

.calc-select:focus {
    border-color: var(--accent);
}

.timbangan-calc-results {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.calc-status-banner {
    border-radius: var(--radius-input, 6px);
    padding: 12px 14px;
    margin-bottom: 14px;
    border: 1px solid transparent;
}

.calc-status-banner.status-aman {
    background: rgba(46, 204, 143, 0.12);
    border-color: rgba(46, 204, 143, 0.32);
}

.calc-status-banner.status-aman .calc-status-badge {
    color: var(--accent);
    background: rgba(46, 204, 143, 0.2);
}

.calc-status-banner.status-pas {
    background: rgba(245, 166, 35, 0.12);
    border-color: rgba(245, 166, 35, 0.32);
}

.calc-status-banner.status-pas .calc-status-badge {
    color: var(--budget-warn);
    background: rgba(245, 166, 35, 0.2);
}

.calc-status-banner.status-berat {
    background: rgba(255, 69, 58, 0.12);
    border-color: rgba(255, 69, 58, 0.32);
}

.calc-status-banner.status-berat .calc-status-badge {
    color: var(--expense);
    background: rgba(255, 69, 58, 0.2);
}

.calc-status-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.calc-status-label-prefix {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}

.calc-status-badge {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: 4px;
}

.calc-status-desc {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
}

.calc-results-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.calc-result-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    padding: 6px 0;
    border-bottom: 1px dashed var(--border);
}

.calc-result-row:last-child {
    border-bottom: none;
}

.calc-result-label {
    color: var(--text-secondary);
}

.calc-result-val {
    color: var(--text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.calc-result-val.is-negative {
    color: var(--expense);
}

/* Baris Equilibrium di Bawah Timbangan Bulan Ini */
.timbangan-equilibrium-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 12px 14px;
    margin-top: 14px;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-card, 8px);
    box-sizing: border-box;
}

.timbangan-equilibrium-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.timbangan-equilibrium-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
}

.timbangan-equilibrium-subtext {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.35;
}

.timbangan-equilibrium-values {
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.timbangan-equilibrium-val.is-plus {
    color: var(--income);
}

.timbangan-equilibrium-val.is-minus {
    color: var(--expense);
}

.timbangan-equilibrium-val.is-zero {
    color: var(--text-secondary);
}

.equilibrium-sep {
    color: var(--text-secondary);
    font-weight: normal;
}

/* Bagian Sesuaikan Saldo di Halaman Timbangan */
.timbangan-adjust-section {
    margin-top: 16px;
}

.timbangan-adjust-wallet-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.timbangan-adjust-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-input, 6px);
    min-height: 44px;
    box-sizing: border-box;
}

.timbangan-adjust-wallet-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.timbangan-adjust-wallet-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.timbangan-adjust-wallet-balance {
    font-size: 12px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.btn-adjust-wallet {
    flex-shrink: 0;
}

/* ==========================================================================
   Halaman Pengaturan (Menu Kelompok & Submenu)
   ========================================================================== */

.settings-menu-group {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card, 8px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.settings-menu-group + .settings-menu-group,
.settings-menu-danger-group {
    margin-top: 20px;
}

.settings-menu-danger-group {
    border-color: rgba(255, 69, 58, 0.35);
}

.settings-menu-row {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 56px;
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition: background-color 0.15s ease;
}

.settings-menu-row:last-child {
    border-bottom: none;
}

.settings-menu-row:hover {
    background-color: var(--surface-raised);
}

.settings-menu-row:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.settings-menu-row-danger:hover {
    background-color: rgba(255, 69, 58, 0.08);
}

.settings-menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.settings-menu-icon.danger-icon {
    color: var(--expense);
}

.settings-menu-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.settings-menu-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
}

.settings-menu-title.danger-text {
    color: var(--expense);
}

.settings-menu-desc {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.settings-menu-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    flex-shrink: 0;
}

/* Submenu View & Header */
.settings-submenu-view {
    display: flex;
    flex-direction: column;
}

.settings-submenu-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.btn-submenu-back {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-input, 6px);
    color: var(--text);
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn-submenu-back:hover {
    background-color: var(--surface-raised);
}

.btn-submenu-back:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.settings-submenu-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}

/* Links di Submenu Tentang */
.settings-about-links {
    display: flex;
    flex-direction: column;
}

.settings-about-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    padding: 12px 0;
    color: var(--text);
    text-decoration: none;
    font-size: 14px;
    border-bottom: 1px solid var(--border);
    transition: color 0.15s ease;
}

.settings-about-link:last-child {
    border-bottom: none;
}

.settings-about-link:hover {
    color: var(--accent);
}

.settings-about-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.settings-about-link svg {
    color: var(--text-secondary);
}

.settings-card {
    background: var(--surface);
    padding: 18px 16px;
    border-radius: var(--radius-card, 8px);
    border: 1px solid var(--border);
    box-shadow: none;
    margin-bottom: 20px;
}

.settings-card-header {
    margin-bottom: 14px;
}

.settings-card-header .card-title {
    margin: 0 0 4px 0;
    font-size: var(--font-size-card-title, 16px);
    font-weight: var(--font-weight-card-title, 600);
    color: var(--text);
}

.settings-card-desc {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.45;
}

.settings-group {
    display: flex;
    flex-direction: column;
}

.settings-divider {
    height: 1px;
    background-color: var(--border);
    margin: 16px 0;
    border: none;
}

.category-group-title {
    font-size: 13.5px;
    font-weight: 600;
    margin-bottom: 10px;
    padding-bottom: 0;
    border-bottom: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.category-group-title.income {
    color: var(--income);
}

.category-group-title.expense {
    color: var(--expense);
}

.category-items {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 14px 0;
    padding: 0;
}

.category-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-input, 6px);
    background: var(--surface-raised);
    min-height: 44px;
    gap: 8px;
}

.category-item.editing {
    background: var(--surface);
    padding: 6px 8px;
}

.category-name {
    font-weight: 500;
    font-size: 14px;
    word-break: break-word;
    color: var(--text);
}

.category-empty-item {
    font-size: 13px;
    color: var(--text-secondary);
    padding: 12px 0;
    text-align: center;
    font-style: italic;
}

.category-item-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.btn-edit-cat,
.btn-edit-wallet,
.btn-edit-budget,
.btn-edit-sub-budget {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-input, 6px);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    min-height: 44px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-edit-cat:hover,
.btn-edit-wallet:hover,
.btn-edit-budget:hover,
.btn-edit-sub-budget:hover {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border-strong);
}

.btn-delete-cat,
.btn-delete-wallet,
.btn-delete-budget,
.btn-delete-sub-budget,
.btn-item-danger {
    background: transparent;
    color: var(--expense);
    border: 1px solid rgba(255, 69, 58, 0.32);
    border-radius: var(--radius-input, 6px);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    min-height: 44px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-delete-cat:hover,
.btn-delete-wallet:hover,
.btn-delete-budget:hover,
.btn-delete-sub-budget:hover,
.btn-item-danger:hover {
    background: rgba(255, 69, 58, 0.12);
    border-color: var(--expense);
    color: var(--expense);
}

.btn-save-cat {
    background-color: var(--accent);
    color: var(--btn-primary-text);
    border: none;
    border-radius: var(--radius-input, 6px);
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px;
    min-height: 44px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.btn-save-cat:hover {
    background-color: var(--primary-hover);
}

.btn-cancel-cat {
    background-color: var(--surface-raised);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-input, 6px);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 14px;
    min-height: 44px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.btn-cancel-cat:hover {
    background-color: var(--surface);
}

.category-item-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.btn-add-subcat {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--border);
    border-radius: var(--radius-input, 6px);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 10px;
    min-height: 44px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-add-subcat:hover {
    background: var(--surface);
    border-color: var(--accent);
}

.subcategory-items {
    list-style: none;
    margin: 2px 0 6px 14px;
    padding: 2px 0 2px 10px;
    border-left: 2px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.subcategory-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-input, 6px);
    background: var(--surface);
    min-height: 44px;
    gap: 8px;
}

.subcategory-item.editing {
    background: var(--surface);
    padding: 4px 6px;
}

.subcategory-item-main {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.subcategory-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    flex-shrink: 0;
}

.subcategory-item-icon svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
}

.subcategory-name {
    font-size: 13px;
    color: var(--text);
    font-weight: 500;
    word-break: break-word;
}

.subcategory-item-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.btn-edit-subcat {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-input, 6px);
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
    min-height: 44px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-edit-subcat:hover {
    background: var(--surface-raised);
    color: var(--text);
    border-color: var(--border-strong);
}

.btn-delete-subcat {
    background: transparent;
    color: var(--expense);
    border: 1px solid rgba(255, 69, 58, 0.32);
    border-radius: var(--radius-input, 6px);
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
    min-height: 44px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-delete-subcat:hover {
    background: rgba(255, 69, 58, 0.12);
    border-color: var(--expense);
}

.subcategory-inline-form {
    display: flex;
    gap: 6px;
    align-items: center;
    margin: 4px 0 6px 14px;
    padding: 2px 0 2px 10px;
    border-left: 2px solid var(--accent);
}

.subcategory-inline-form input {
    flex: 1;
    min-width: 0;
    padding: 6px 10px;
    font-size: 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius-input, 6px);
    background: var(--surface);
    color: var(--text);
    min-height: 44px;
}

.subcategory-inline-form .btn-save-cat,
.subcategory-inline-form .btn-cancel-cat {
    min-height: 44px;
    padding: 6px 12px;
    font-size: 12.5px;
}

/* Geser urutan dompet dan kategori */
.btn-drag-handle {
    background: transparent;
    color: var(--text-secondary);
    border: none;
    border-radius: var(--radius-input, 6px);
    padding: 0 8px;
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    flex-shrink: 0;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.btn-drag-handle:hover {
    color: var(--text);
    background: var(--surface);
}

.btn-drag-handle:active,
.btn-drag-handle.is-active {
    cursor: grabbing;
    color: var(--text);
    background: var(--surface);
}

.category-item.is-dragging,
.subcategory-item.is-dragging,
.category-item-wrapper.is-dragging {
    background: var(--surface-raised);
    border-color: var(--accent);
    opacity: 0.85;
}

.category-item-wrapper.is-dragging > .category-item {
    background: var(--surface-raised);
    border-color: var(--accent);
}

.drag-placeholder {
    border: 1px dashed var(--accent);
    background: var(--surface);
    border-radius: var(--radius-input, 6px);
    box-sizing: border-box;
    list-style: none;
    pointer-events: none;
}

.drag-placeholder-sub {
    margin: 2px 0;
}

.category-add-form {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.category-add-form input {
    flex: 1;
    min-width: 0;
    padding: 8px 12px;
    font-size: 14px;
}

.wallet-add-form {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.wallet-add-form input {
    flex: 1 1 180px;
}

.wallet-currency-select {
    padding: 8px 12px;
    border-radius: var(--radius-input, 6px);
    border: 1px solid var(--border);
    background-color: var(--surface-raised);
    color: var(--text);
    font-size: 13.5px;
    font-family: inherit;
    min-height: 44px;
}

.wallet-currency-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--surface-raised);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    margin-left: 6px;
    vertical-align: middle;
}

.category-inline-edit-form {
    display: flex;
    width: 100%;
    gap: 8px;
    align-items: center;
}

.category-edit-input {
    flex: 1;
    min-width: 0;
    padding: 8px 12px;
    font-size: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-input, 6px);
    background-color: var(--card-bg);
    color: var(--text);
}

.budget-add-form {
    margin-top: 4px;
}

.budget-form-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@media (min-width: 500px) {
    .budget-form-row {
        flex-direction: row;
        align-items: center;
    }
    .budget-form-row select {
        flex: 1.2;
        min-width: 0;
    }
    .budget-form-row input {
        flex: 1;
        min-width: 0;
    }
}

.budget-item-amount {
    font-size: 13px;
    color: var(--text-secondary);
    margin-left: 4px;
    white-space: nowrap;
}

.budget-orphan-badge {
    font-size: 11px;
    color: var(--text-secondary);
    font-style: italic;
    margin-left: 4px;
}

/* Radio Option Groups (Tampilan & Format Jam) */
.radio-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@media (min-width: 440px) {
    .radio-group {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

.radio-group label {
    flex: 1 1 auto;
    font-weight: 500;
    font-size: 13.5px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-input, 6px);
    background: var(--surface-raised);
    color: var(--text);
    min-height: 44px;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.radio-group label:hover {
    border-color: var(--border-strong);
}

.radio-group label:has(input:checked) {
    border-color: var(--accent);
    background: var(--primary-subtle);
    color: var(--text);
    font-weight: 600;
}

.radio-group input[type="radio"] {
    accent-color: var(--accent);
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
}

/* Data dan Akun */
.data-account-content .sync-status {
    font-size: 13px;
    margin-bottom: 14px;
    padding: 10px 14px;
    background: var(--surface-raised);
    border-radius: var(--radius-input, 6px);
    border: 1px solid var(--border);
    color: var(--text);
}

.data-account-actions,
.danger-zone-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.data-account-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 13px;
}

.footer-link {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.15s ease;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 4px;
}

.footer-link:hover,
.footer-link:focus-visible {
    color: var(--primary-hover);
}

.footer-separator {
    color: var(--text-secondary);
}

/* ==========================================================================
   Formulir & Input Umum
   ========================================================================== */

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 13.5px;
    color: var(--text);
}

input[type="text"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="month"],
select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 15px;
    background-color: var(--card-bg);
    color: var(--text);
    min-height: 44px;
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:focus,
select:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 3px var(--primary-ring);
}

::placeholder {
    color: var(--text-subtle);
    opacity: 1;
}

/* Input Waktu 12 Jam */
.time-input-12 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.time-input-12 select {
    flex: 1;
    min-width: 0;
}

.time-separator {
    font-weight: 700;
    font-size: 18px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.form-error-message {
    color: var(--tone-error);
    font-size: 12.5px;
    margin-top: 6px;
    font-weight: 500;
}

/* Tombol-tombol */
button {
    padding: 10px 16px;
    font-size: 14px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    min-height: 44px;
    font-family: inherit;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}

button:active {
    transform: scale(0.98);
}

.btn-primary {
    background-color: var(--primary);
    color: var(--btn-primary-text);
}

.btn-primary:hover {
    background-color: var(--primary-hover);
}

.btn-secondary {
    background-color: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    border: 1px solid var(--border);
}

.btn-secondary:hover {
    background-color: var(--btn-secondary-hover-bg);
    border-color: var(--border-strong);
}

.btn-danger {
    background-color: var(--btn-danger-bg);
    color: var(--btn-danger-text);
}

.btn-danger:hover {
    background-color: var(--btn-danger-hover-bg);
}

.btn-small {
    flex: none;
    font-size: 13.5px;
    padding: 8px 14px;
    min-height: 44px;
}

button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* ==========================================================================
   Layar Formulir Tambah / Edit Transaksi (Layar Penuh di Mobile, Dialog 2 Kolom di PC)
   ========================================================================== */

.form-screen {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    background-color: var(--bg);
    pointer-events: auto;
    width: 100%;
    height: 100%;
    height: 100dvh;
    padding: 0;
}

.form-screen.hidden {
    display: none !important;
}

.form-screen-backdrop {
    display: none;
}

.form-screen-container {
    position: relative;
    z-index: 102;
    background-color: var(--bg);
    border: none;
    border-radius: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    padding: 0;
    box-shadow: none;
    overflow: hidden;
}

.form-screen-sheet-handle {
    display: none !important;
}

.form-screen-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    min-height: calc(56px + env(safe-area-inset-top, 0px));
    height: calc(56px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 16px 0 16px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0;
    flex-shrink: 0;
    background-color: var(--bg);
    box-sizing: border-box;
}

.form-screen-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
    order: 2;
}

#btn-form-back {
    order: 1;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-input, 6px);
    background: var(--surface);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

#btn-form-back:hover {
    background: var(--surface-raised);
    color: var(--text);
    border-color: var(--border);
}

#btn-form-back:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

#btn-form-back .form-back-arrow {
    display: block;
}

#btn-form-back .form-close-x {
    display: none;
}

.form-screen-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.tx-form {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    flex: 1 1 auto;
}

.form-body-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 16px 20px 16px;
    scroll-padding-top: 10px;
    scroll-padding-bottom: 20px;
}

/* Urutan Komponen Form */

/* 1. Tipe Transaksi di Atas Form (Pemasukan, Pengeluaran, Transfer) */
.form-group-type {
    margin-bottom: 12px;
}

.type-segmented-control {
    display: flex;
    background-color: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-input, 6px);
    padding: 3px;
    gap: 3px;
}

.type-segment-item {
    flex: 1;
    margin: 0 !important;
    cursor: pointer;
    display: flex;
}

.type-segment-btn {
    width: 100%;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-secondary);
    background-color: transparent;
    transition: background-color 0.15s ease, color 0.15s ease;
    user-select: none;
    border: 1px solid transparent;
}

.type-segment-item input:checked + .type-segment-btn {
    background-color: var(--surface);
    color: var(--text);
    font-weight: 600;
    border-color: var(--border);
}

.type-segment-item input[value="expense"]:checked + .type-segment-btn {
    color: var(--expense);
}

.type-segment-item input[value="income"]:checked + .type-segment-btn {
    color: var(--income);
}

.type-segment-item input[value="transfer"]:checked + .type-segment-btn {
    color: var(--text);
}

.type-segment-item input:focus-visible + .type-segment-btn,
.type-segment-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* 2. Baris-Baris Ringkas Form (Label di kiri, nilai/input di kanan, garis pemisah) */
.form-rows-list {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
}

.form-row {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 4px 0;
    border-bottom: 1px solid var(--border);
    gap: 12px;
}

.form-row.hidden {
    display: none !important;
}

.form-row-label {
    flex: 0 0 115px;
    width: 115px;
    font-size: 14px;
    color: var(--text-secondary);
    user-select: none;
    margin: 0;
    font-weight: 500;
}

.form-row-value {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: var(--text);
}

/* Urutan Baris Normal (Pemasukan / Pengeluaran): Tanggal dan Waktu, Total, Kategori, Dompet, Catatan */
#form-row-datetime { order: 1; }
#form-row-amount { order: 2; }
#form-row-category { order: 3; }
#form-row-wallet { order: 4; }
#form-row-to-wallet { order: 5; }
#form-row-note { order: 6; }

/* Urutan Baris Transfer: Tanggal dan Waktu, Dari, Ke, Total, Catatan */
.tx-form.is-transfer #form-row-datetime { order: 1; }
.tx-form.is-transfer #form-row-wallet { order: 2; }
.tx-form.is-transfer #form-row-to-wallet { order: 3; }
.tx-form.is-transfer #form-row-amount { order: 4; }
.tx-form.is-transfer #form-row-note { order: 5; }

/* Komponen Nilai: Tanggal & Waktu */
.form-row-datetime-val {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.compact-date-inputs {
    display: flex;
    align-items: center;
    gap: 4px;
}

.compact-time-inputs {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
}

.compact-date-inputs .date-select,
.compact-time-inputs .time-select {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text);
    font-size: 14px;
    padding: 4px 4px;
    border-radius: var(--radius-input, 6px);
    cursor: pointer;
    height: 44px;
    min-height: 44px;
    outline: none;
}

.compact-date-inputs .date-select:hover,
.compact-time-inputs .time-select:hover {
    background-color: var(--surface-raised);
}

.compact-date-inputs .date-select:focus,
.compact-time-inputs .time-select:focus {
    background-color: var(--surface-raised);
    border-color: var(--accent);
}

.compact-date-inputs .date-select-day {
    flex: 0 0 54px;
}

.compact-date-inputs .date-select-month {
    flex: 0 0 115px;
    width: 115px;
}

.compact-date-inputs .date-select-year {
    flex: 0 0 68px;
}

.compact-time-inputs .time-select {
    flex: 0 0 54px;
}

.compact-time-inputs .time-select-ampm {
    flex: 0 0 64px;
}

.form-row-datetime-val .form-error-message {
    flex-basis: 100%;
    margin-top: 2px;
    margin-bottom: 2px;
    font-size: 12px;
}

/* Komponen Nilai: Total */
.form-row-amount-val {
    display: flex;
    align-items: center;
}

.compact-prefix {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-right: 6px;
    user-select: none;
}

.compact-amount-input {
    border: none !important;
    background: transparent !important;
    padding: 4px 0 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    min-height: 40px !important;
    outline: none !important;
    box-shadow: none !important;
    width: 100% !important;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* Komponen Nilai: Kategori & Dompet */
.category-row-btn,
.compact-select,
.category-dropdown-btn {
    width: 100%;
    height: 44px;
    min-height: 44px;
    padding: 0 10px;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-input, 6px);
    color: var(--text);
    font-size: 14px;
    font-weight: 400;
    font-family: inherit;
    box-sizing: border-box;
    cursor: pointer;
    outline: none;
}

.category-row-btn,
.category-dropdown-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
}

.category-row-btn:hover,
.compact-select:hover,
.category-dropdown-btn:hover {
    background-color: var(--surface-raised);
}

.category-row-btn:focus-visible,
.compact-select:focus-visible,
.category-dropdown-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-color: var(--accent);
}

/* Dropdown Bertingkat Kategori & Dompet (tampil di mobile dan PC) */
#btn-open-category-picker {
    display: none !important;
}

.category-dropdown-pc {
    display: block;
    position: relative;
    width: 100%;
}

#wallet-dropdown-pc,
#to-wallet-dropdown-pc {
    display: block !important;
}

#form-row-wallet .form-row-wallet-val,
#form-row-to-wallet .form-row-wallet-val {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

#form-row-wallet #tx-wallet,
#form-row-to-wallet #tx-to-wallet {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.category-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    left: auto;
    min-width: 100%;
    max-width: calc(100vw - 32px);
    z-index: 1050;
    display: flex;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-input, 6px);
    box-shadow: none;
    box-sizing: border-box;
}

.category-dropdown-menu.hidden {
    display: none !important;
}

.category-dropdown-primary-col {
    min-width: 150px;
    max-width: 165px;
    max-height: 280px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.category-dropdown-sub-col {
    min-width: 140px;
    max-width: 155px;
    max-height: 280px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px;
    border-left: 1px solid var(--border);
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.category-dropdown-sub-col.hidden {
    display: none !important;
}

/* Dropdown Dompet */
.wallet-dropdown-menu {
    left: 0;
    right: 0;
    width: 100%;
    min-width: 100%;
}

.wallet-dropdown-col {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.category-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    padding: 6px 10px;
    background: transparent;
    border: none;
    border-radius: var(--radius-input, 6px);
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
    font-weight: 400;
    cursor: pointer;
    text-align: left;
    box-sizing: border-box;
    outline: none;
    gap: 8px;
}

.category-dropdown-item:hover,
.category-dropdown-item.is-highlighted {
    background-color: var(--surface-raised);
}

.category-dropdown-item:focus-visible {
    background-color: var(--surface-raised);
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.category-dropdown-item.is-selected {
    background-color: var(--surface-raised);
    color: var(--accent);
}

.category-dropdown-item-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.category-dropdown-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: inherit;
}

.category-dropdown-item-icon svg {
    width: 16px;
    height: 16px;
}

.category-dropdown-item-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    color: inherit;
}

.category-dropdown-item-arrow {
    flex-shrink: 0;
    color: var(--text-secondary);
    margin-left: 6px;
}

/* Panah Dompet (disembunyikan di mobile, aktif di PC) */
.wallet-row-chevron {
    display: none !important;
}

.category-row-btn-content {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.category-display-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--text);
}

.category-display-icon svg {
    width: 18px;
    height: 18px;
}

.category-display-text {
    font-size: 14px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.category-display-text.is-placeholder,
.compact-select:has(option[value=""]:checked),
.compact-select:invalid {
    color: var(--text-secondary);
}

.category-row-chevron {
    color: var(--text-secondary);
    flex-shrink: 0;
    margin-left: 8px;
}

.compact-select option {
    background-color: var(--surface);
    color: var(--text);
}

/* Komponen Nilai: Catatan */
#form-row-note {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 10px 0;
    gap: 6px;
    border-bottom: 1px solid var(--border);
}

#form-row-note .form-row-label {
    width: 100%;
    flex: none;
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 500;
}

#form-row-note .form-row-note-val {
    width: 100%;
    position: relative;
}

.compact-text-input {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 14px;
    outline: none;
    padding: 4px 0;
}

#form-row-note textarea.compact-text-input {
    width: 100%;
    min-height: 80px;
    height: 80px;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-input, 6px);
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    outline: none;
    padding: 8px 10px;
    box-sizing: border-box;
    resize: vertical;
}

#form-row-note textarea.compact-text-input::placeholder {
    color: var(--text-secondary);
}

#form-row-note textarea.compact-text-input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-color: var(--accent);
}

/* Saran Catatan Lama */
.tx-note-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    width: 100%;
    max-height: 220px;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-input, 6px);
    z-index: 1060;
    box-shadow: none;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.tx-note-suggestions.hidden {
    display: none !important;
}

.tx-note-suggestions.is-open-upward {
    top: auto;
    bottom: calc(100% + 4px);
}

.tx-note-suggestion-item {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: 0;
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
    font-weight: 400;
    cursor: pointer;
    text-align: left;
    box-sizing: border-box;
    outline: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;
}

.tx-note-suggestion-item:not(:last-child) {
    border-bottom: 1px solid var(--border);
}

.tx-note-suggestion-item:hover,
.tx-note-suggestion-item.is-highlighted {
    background-color: var(--surface-raised);
}

.tx-note-suggestion-match {
    color: var(--accent);
    font-weight: 600;
}

/* Panel Pilihan Kategori Dua Kolom */
.category-picker-dialog {
    border: 1px solid var(--border);
    border-radius: var(--radius-card, 8px);
    background-color: var(--surface);
    padding: 0;
    max-width: 500px;
    width: 92%;
    box-shadow: none;
    color: var(--text);
    overflow: hidden;
}

.category-picker-content {
    display: flex;
    flex-direction: column;
    max-height: 80vh;
}

.category-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}

.category-picker-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
}

.btn-cat-picker-close {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-input, 6px);
    background: transparent;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.btn-cat-picker-close:hover {
    background-color: var(--surface-raised);
    color: var(--text);
}

.category-picker-body {
    display: flex;
    min-height: 300px;
    max-height: 380px;
}

.category-picker-col {
    flex: 1;
    overflow-y: auto;
    padding: 6px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.category-picker-col-left {
    border-right: 1px solid var(--border);
}

.category-picker-col-right {
    background-color: var(--surface);
}

.cat-picker-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    padding: 8px 10px;
    border: none;
    background: transparent;
    color: var(--text);
    border-radius: var(--radius-input, 6px);
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    user-select: none;
    margin-bottom: 2px;
}

.cat-picker-item:hover,
.cat-picker-item.is-highlighted {
    background-color: var(--surface-raised);
}

.cat-picker-item.is-selected {
    background-color: var(--surface-raised);
    font-weight: 600;
}

.cat-picker-item-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.cat-picker-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.cat-picker-item-icon svg {
    width: 18px;
    height: 18px;
}

.cat-picker-item-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.cat-picker-item-arrow {
    color: var(--text-secondary);
    flex-shrink: 0;
    margin-left: 6px;
}

.cat-picker-sub-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.cat-picker-sub-item.is-selected {
    color: var(--accent);
}

.cat-picker-empty-hint {
    padding: 32px 16px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
}

/* 7. Tombol Aksi */
.form-actions {
    flex-shrink: 0;
    background-color: var(--bg);
    border-top: 1px solid var(--border);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) 16px;
    margin-top: 0;
    box-sizing: border-box;
}

.btn-save-full {
    width: 100%;
    min-height: 48px;
    height: 48px;
    font-size: 15px;
    font-weight: 600;
    background-color: var(--accent);
    color: var(--btn-primary-text);
    border-radius: var(--radius-input, 6px);
    cursor: pointer;
    border: none;
    transition: background-color 0.15s ease;
}

.btn-save-full:hover:not(:disabled) {
    background-color: var(--primary-hover);
}

.form-actions-secondary {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    margin-bottom: 16px;
}

.form-actions-secondary button {
    flex: 1;
    min-height: 44px;
    height: 44px;
}

.btn-danger-outline {
    background: transparent;
    border: 1px solid var(--expense);
    color: var(--expense);
    border-radius: var(--radius-input, 6px);
    font-weight: 500;
    cursor: pointer;
    font-size: 13.5px;
    transition: background-color 0.15s ease;
}

.btn-danger-outline:hover {
    background: rgba(255, 69, 58, 0.1);
}

/* ==========================================================================
   Tombol Melayang Tambah Transaksi (FAB '+')
   ========================================================================== */

.fab-btn {
    position: fixed;
    right: calc(20px + env(safe-area-inset-right, 0px));
    bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 16px);
    width: 56px;
    height: 56px;
    min-width: 56px;
    min-height: 56px;
    border-radius: 50%;
    background-color: var(--accent);
    color: var(--btn-primary-text);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    z-index: 50;
    transition: background-color 0.15s ease;
    padding: 0;
    flex: none;
}

@media (min-width: 768px) {
    .fab-btn {
        right: max(24px, calc(50% - 320px + 20px));
        bottom: 28px;
    }
}

.fab-btn:hover {
    background-color: var(--primary-hover);
}

.fab-btn:active {
    background-color: var(--primary-hover);
}

/* ==========================================================================
   Navigasi Bawah Layar HP (4 Tab)
   ========================================================================== */

.bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: none;
    z-index: 40;
    height: calc(60px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    align-items: stretch;
    justify-content: space-around;
}

@media (min-width: 768px) {
    .bottom-nav {
        display: none;
    }
}

.bottom-nav .nav-tab-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: none;
    border: none;
    padding: 6px 4px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.15s ease;
    min-height: 48px;
    min-width: 44px;
}

.bottom-nav .nav-tab-btn:hover {
    color: var(--text);
}

.bottom-nav .nav-tab-btn.is-active {
    color: var(--accent);
    font-weight: 700;
}

.bottom-nav .nav-tab-btn .nav-icon {
    flex-shrink: 0;
}

.bottom-nav .nav-label {
    font-size: 11px;
    line-height: 1.1;
}

/* Tombol Timbangan Menonjol di Tengah Bar Navigasi Bawah */
.bottom-nav .nav-tab-btn.nav-tab-center-btn {
    position: relative;
    padding: 2px 2px 6px 2px;
}

.bottom-nav .nav-tab-btn.nav-tab-center-btn .nav-center-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--surface-raised);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -14px;
    margin-bottom: 2px;
    flex-shrink: 0;
    color: var(--text-secondary);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.bottom-nav .nav-tab-btn.nav-tab-center-btn:hover .nav-center-icon-wrap {
    color: var(--text);
    border-color: var(--text-secondary);
}

.bottom-nav .nav-tab-btn.nav-tab-center-btn.is-active .nav-center-icon-wrap {
    background-color: var(--accent);
    color: var(--btn-primary-text);
    border-color: var(--accent);
}

.bottom-nav .nav-tab-btn.nav-tab-center-btn.is-active .nav-label {
    color: var(--accent);
    font-weight: 700;
}

/* ==========================================================================
   Dialog Konfirmasi Hapus
   ========================================================================== */

.confirm-dialog {
    border: 1px solid var(--border);
    border-radius: var(--radius-card, 8px);
    background: var(--card-bg);
    color: var(--text);
    padding: 24px 20px;
    max-width: 360px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    width: calc(100% - 32px);
    margin: auto;
    box-shadow: var(--elevated-shadow);
}

.confirm-dialog:not([open]) {
    display: none;
}

.confirm-dialog::backdrop {
    background-color: var(--backdrop-bg);
}

.confirm-dialog-message {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
    color: var(--text);
}

.confirm-dialog-actions {
    display: flex;
    gap: 10px;
}

.confirm-dialog-actions button {
    flex: 1;
    min-height: 44px;
}

.delete-all-dialog {
    max-width: 440px;
    text-align: left;
}

.confirm-dialog-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 10px 0;
    color: var(--text);
}

.delete-all-dialog-desc {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0 0 16px 0;
}

.delete-all-backup-box {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-input, 6px);
    padding: 12px 14px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.delete-all-backup-text {
    font-size: 13px;
    color: var(--text);
    margin: 0;
    font-weight: 500;
}

.delete-all-confirm-step {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.delete-all-input-label {
    font-size: 13px;
    color: var(--text);
}

.delete-all-input {
    width: 100%;
}

/* Dialog Sesuaikan Saldo di Timbangan */
.adjust-balance-dialog {
    max-width: 400px;
    text-align: left;
}

.adjust-dialog-compare-box {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-input, 6px);
    padding: 10px 14px;
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-sizing: border-box;
}

.adjust-dialog-wallet-name {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

.adjust-dialog-app-bal-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

.adjust-dialog-app-bal-label {
    color: var(--text);
}

.adjust-dialog-app-bal-val {
    color: var(--text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.adjust-dialog-amount-group {
    margin-bottom: 12px;
}

.adjust-diff-box {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-input, 6px);
    padding: 10px 14px;
    margin-top: 10px;
    margin-bottom: 12px;
    box-sizing: border-box;
}

.adjust-diff-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

.adjust-diff-label {
    color: var(--text-secondary);
}

.adjust-diff-val {
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.adjust-diff-val.is-plus {
    color: var(--income);
}

.adjust-diff-val.is-minus {
    color: var(--expense);
}

.adjust-same-message {
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    margin: 0;
    text-align: center;
}

.adjust-category-group {
    margin-top: 12px;
    margin-bottom: 16px;
}

.adjust-category-chips {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.adjust-cat-chip {
    flex: 1;
    min-height: 44px;
    padding: 8px 10px;
    border-radius: var(--radius-input, 6px);
    border: 1px solid var(--border);
    background: var(--surface-raised);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.adjust-cat-chip:hover {
    border-color: var(--accent);
}

.adjust-cat-chip.is-active {
    background: var(--accent);
    color: var(--btn-primary-text);
    font-weight: 600;
    border-color: var(--accent);
}

/* ==========================================================================
   Ikon Kategori Kustom & Dialog Pemilih Ikon
   ========================================================================== */

.category-item-main {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.category-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    flex-shrink: 0;
}

.category-item-icon svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
}

.btn-category-icon-picker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-input, 6px);
    background: var(--surface-raised);
    color: var(--text);
    cursor: pointer;
    flex-shrink: 0;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}

.btn-category-icon-picker:hover,
.btn-category-icon-picker:focus-visible {
    border-color: var(--accent);
    outline: none;
}

.btn-category-icon-picker svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    pointer-events: none;
}

.category-chip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.category-chip-icon svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

.stats-category-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.stats-category-icon svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

.budget-category-title-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.budget-category-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.budget-category-icon svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

.budget-settings-cat-main {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
}

.tx-subcategory-name {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    vertical-align: middle;
}

.tx-subcategory-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-secondary);
}

.tx-subcategory-icon svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
}

.donut-subcat-main {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.icon-picker-dialog {
    max-width: 440px;
    width: calc(100% - 32px);
    max-height: 85vh;
    padding: 20px;
    box-sizing: border-box;
}

.icon-picker-dialog:not([open]) {
    display: none;
}

.icon-picker-dialog[open] {
    display: flex;
    flex-direction: column;
}

.icon-picker-dialog-content {
    display: flex;
    flex-direction: column;
    max-height: calc(85vh - 40px);
    overflow: hidden;
}

.icon-picker-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.icon-picker-dialog-header .confirm-dialog-title {
    margin: 0;
}

.btn-icon-picker-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: var(--radius-input, 6px);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
}

.btn-icon-picker-close:hover,
.btn-icon-picker-close:focus-visible {
    color: var(--text);
    background: var(--surface-raised);
    outline: none;
}

.icon-picker-dialog-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    padding-right: 4px;
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.icon-picker-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.icon-picker-group-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

.icon-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
    gap: 8px;
}

.icon-picker-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    width: 100%;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: var(--radius-input, 6px);
    background: var(--surface-raised);
    color: var(--text);
    cursor: pointer;
    padding: 0;
    box-sizing: border-box;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.icon-picker-item:hover {
    border-color: var(--accent);
    background: var(--surface);
}

.icon-picker-item:focus-visible {
    border-color: var(--accent);
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.icon-picker-item.is-selected {
    border-color: var(--accent);
    background: var(--surface);
    color: var(--accent);
}

.icon-picker-item svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    pointer-events: none;
}


/* ==========================================================================
   Notifikasi Toast UI
   ========================================================================== */

.toast-notification {
    position: fixed;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    background-color: var(--card-bg);
    color: var(--text);
    border: 1px solid var(--border);
    box-shadow: var(--toast-shadow);
    padding: 10px 20px;
    border-radius: 9999px;
    font-size: 13.5px;
    font-weight: 500;
    z-index: 9999;
    max-width: calc(100vw - 32px);
    width: max-content;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast-notification.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

@media (min-width: 768px) {
    .toast-notification {
        bottom: 28px;
    }
}

.toast-notification.toast-success {
    border-color: var(--tone-ok-border);
    color: var(--tone-ok);
    background-color: var(--tone-ok-bg);
}

.toast-notification.toast-error {
    border-color: var(--tone-error-border);
    color: var(--tone-error);
    background-color: var(--tone-error-bg);
}

.toast-notification.toast-warn {
    border-color: var(--tone-warn-border);
    color: var(--tone-warn);
    background-color: var(--tone-warn-bg);
}

/* ==========================================================================
   Halaman Kebijakan Privasi & Syarat Ketentuan
   ========================================================================== */

.privacy-nav-top {
    margin-bottom: 16px;
}

.btn-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    padding: 8px 12px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    min-height: 44px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-back-link:hover,
.btn-back-link:focus-visible {
    background: var(--btn-icon-hover-bg);
    color: var(--primary-hover);
}

.privacy-card {
    background: var(--card-bg);
    padding: 28px 22px;
    border-radius: var(--radius-card, 8px);
    border: 1px solid var(--border);
    box-shadow: var(--card-shadow);
    margin-bottom: 24px;
}

@media (min-width: 600px) {
    .privacy-card {
        padding: 36px 32px;
    }
}

.privacy-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-subtle);
}

.privacy-header h1 {
    font-size: 24px;
    color: var(--text);
    margin-bottom: 6px;
}

.privacy-updated {
    font-size: 13px;
    color: var(--text-muted);
}

.privacy-section {
    margin-bottom: 24px;
}

.privacy-section:last-child {
    margin-bottom: 0;
}

.privacy-section h2 {
    font-size: 17px;
    color: var(--text);
    margin-bottom: 10px;
}

.privacy-section p {
    font-size: 15px;
    line-height: 1.65;
    color: var(--text);
    margin-bottom: 12px;
}

.privacy-section ul,
.privacy-section ol {
    margin-left: 20px;
    margin-bottom: 14px;
}

.privacy-section li {
    font-size: 15px;
    line-height: 1.65;
    margin-bottom: 8px;
    color: var(--text);
}

.privacy-section a {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.privacy-section a:hover,
.privacy-section a:focus-visible {
    color: var(--primary-hover);
}

.privacy-section code {
    background: var(--code-bg);
    color: var(--code-color);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 13px;
    font-family: var(--font-mono);
    word-break: break-all;
}

.privacy-quote {
    background: var(--quote-bg);
    border-left: 3px solid var(--primary);
    padding: 12px 16px;
    border-radius: 0 6px 6px 0;
    margin: 14px 0;
    font-style: italic;
    font-size: 14px;
    line-height: 1.6;
    color: var(--quote-color);
}

.app-footer {
    text-align: center;
    padding: 20px 0 12px;
    margin-top: 12px;
    border-top: 1px solid var(--border-subtle);
}

/* ==========================================================================
   Utilitas & State
   ========================================================================== */

.hidden {
    display: none !important;
}

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

body.modal-open {
    overflow: hidden;
}

/* ==========================================================================
   Helper Wrapper Layout untuk Mobile (< 1024px)
   display: contents agar struktur DOM tidak mengubah tata letak mobile sama sekali
   ========================================================================== */
.beranda-dashboard-grid,
.beranda-col,
.list-controls-row,
.stats-controls-row,
.stats-charts-grid,
.timbangan-top-controls,
.timbangan-dashboard-grid,
.timbangan-col {
    display: contents;
}

.list-header .history-search-bar:not(.hidden) {
    width: 100%;
    order: 3;
    margin-top: 10px;
}

/* ==========================================================================
   Revisi UI PC (DESIGN.md & PLANSPEC.md)
   Aktif hanya pada layar lebar (@media (min-width: 1024px))
   ========================================================================== */
@media (min-width: 1024px) {
    /* 1. Titik Pindah & Lebar Kontainer */
    html, body {
        height: 100%;
    }

    body {
        overflow-y: hidden;
    }

    .container {
        max-width: 1600px;
        height: 100vh;
        height: 100dvh;
        margin: 0 auto;
        padding: 16px;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        overflow: hidden;
    }

    /* 2. Header & Navigasi: tetap seperti sekarang, tinggi dihitung pas sisa layar */
    .app-header {
        flex: 0 0 56px;
        min-height: 56px;
        height: 56px;
        margin-bottom: 16px;
        padding-bottom: 0;
    }

    /* Banner Data Contoh: tetap di atas, selebar penuh di luar 3 kolom */
    .demo-mode-indicator {
        flex: 0 0 auto;
        margin-bottom: 16px;
        width: 100%;
    }

    /* Container Halaman (Page View) */
    .page-view {
        flex: 1 1 0%;
        min-height: 0;
        overflow-y: auto;
        box-sizing: border-box;
        scrollbar-width: thin;
        scrollbar-color: var(--border) transparent;
    }

    /* 3. Beranda: 3 Kolom Dashboard */
    #page-beranda {
        overflow: hidden;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    #page-beranda.hidden {
        display: none !important;
    }

    .beranda-dashboard-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
        height: 100%;
        min-height: 0;
        flex: 1 1 0%;
        align-items: stretch;
    }

    .beranda-col {
        display: flex;
        flex-direction: column;
        gap: 16px;
        height: 100%;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: thin;
        scrollbar-color: var(--border) transparent;
        padding-bottom: 88px;
        box-sizing: border-box;
    }

    .beranda-col-center {
        grid-column: 1;
        grid-row: 1;
    }

    .beranda-col-left {
        grid-column: 2;
        grid-row: 1;
    }

    .beranda-col-right {
        grid-column: 3;
        grid-row: 1;
    }

    #page-beranda .summary {
        margin-bottom: 0;
        flex: 0 0 auto;
    }

    #page-beranda .wallets-section {
        margin-bottom: 0;
        flex: 0 0 auto;
    }

    #page-beranda .wallet-balances {
        display: flex;
        flex-direction: column;
        gap: 8px;
        overflow-x: visible;
        padding: 0;
    }

    #page-beranda .wallet-balance-item {
        max-width: 100%;
        width: 100%;
        min-height: 44px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 12px 14px;
    }

    #page-beranda .budget-section {
        margin-bottom: 0;
        min-height: auto;
        height: auto;
        overflow: visible;
        flex: 0 0 auto;
        box-sizing: border-box;
    }

    #page-beranda .recent-tx-section {
        margin-bottom: 0;
        min-height: auto;
        height: auto;
        overflow: visible;
        flex: 0 0 auto;
        box-sizing: border-box;
    }

    /* Tombol tambah (+) tetap melayang di pojok kanan bawah */
    .fab-btn {
        right: max(24px, calc(50% - 800px + 24px));
        bottom: 28px;
    }

    /* 4. Riwayat: Pencarian & Filter Bulan di Satu Baris Atas, Tabel Lebar */
    #page-riwayat .list-section {
        background: var(--surface);
        padding: 20px;
        margin-bottom: 0;
    }

    #page-riwayat .list-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
        gap: 16px;
        margin-bottom: 16px;
        padding-bottom: 16px;
    }

    #page-riwayat .list-header-title-wrap {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    #page-riwayat .riwayat-summary {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }

    #page-riwayat .riwayat-summary.is-multiline {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    #page-riwayat .riwayat-summary-row {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    #page-riwayat .list-controls-row {
        display: flex;
        align-items: center;
        gap: 12px;
        flex: 0 0 auto;
    }

    #page-riwayat #history-search-bar {
        display: block !important;
        margin: 0;
        width: 320px;
    }

    #page-riwayat .history-search-input {
        padding-left: 44px;
    }

    #page-riwayat #btn-toggle-search {
        display: none;
    }

    #page-riwayat .list-filter {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: nowrap;
    }

    /* Baris Tabel Lebar Riwayat */
    #page-riwayat .tx-date-group {
        margin-bottom: 20px;
    }

    #page-riwayat .tx-date-group:last-child {
        margin-bottom: 0;
    }

    #page-riwayat .tx-date-group-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 12px 8px;
        border-bottom: 1px solid var(--border);
    }

    #page-riwayat .tx-date-group-items {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    #page-riwayat .tx-item {
        display: grid;
        grid-template-columns: 36px 160px 220px 130px 70px 140px 96px;
        align-items: center;
        column-gap: 12px;
        row-gap: 0;
        min-height: 52px;
        height: 52px;
        padding: 0 12px;
        border: none;
        border-bottom: 1px solid var(--border);
        border-left: 3px solid var(--text-secondary);
        background: transparent;
        border-radius: 0;
        margin-bottom: 0;
        box-sizing: border-box;
        transition: none !important;
    }

    #page-riwayat .tx-item:has(.tx-item-icon.income) {
        border-left-color: var(--income);
    }

    #page-riwayat .tx-item:has(.tx-item-icon.expense) {
        border-left-color: var(--expense);
    }

    #page-riwayat .tx-item:has(.tx-item-icon.transfer),
    #page-riwayat .tx-item:has(.tx-item-icon.penyesuaian),
    #page-riwayat .tx-item.is-readonly {
        border-left-color: var(--text-secondary);
    }

    #page-riwayat .tx-item:hover {
        background-color: var(--surface-raised) !important;
        transition: none !important;
    }

    #page-riwayat .tx-item-content,
    #page-riwayat .tx-item-main {
        display: contents;
    }

    #page-riwayat .tx-item-icon {
        grid-column: 1;
        grid-row: 1;
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
    }

    #page-riwayat .tx-item-category {
        grid-column: 2;
        grid-row: 1;
        font-size: 14px;
        font-weight: 500;
        color: var(--text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }

    #page-riwayat .tx-item-note-row {
        grid-column: 3;
        grid-row: 1;
        margin: 0;
        color: var(--text-secondary);
        font-size: 13.5px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }

    #page-riwayat .tx-item-note {
        animation: none !important;
        transform: none !important;
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #page-riwayat .tx-item-sub {
        display: contents;
    }

    #page-riwayat .tx-item-wallet {
        grid-column: 4;
        grid-row: 1;
        display: inline-flex;
        align-items: center;
        background-color: var(--surface-raised);
        color: var(--text-secondary);
        font-size: 12px;
        font-weight: 500;
        padding: 2px 8px;
        border-radius: var(--radius-input, 6px);
        border: 1px solid var(--border);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
        justify-self: start;
    }

    #page-riwayat .tx-item-time {
        grid-column: 5;
        grid-row: 1;
        color: var(--text-secondary);
        font-size: 13px;
        white-space: nowrap;
        margin: 0;
        min-width: 0;
    }

    #page-riwayat .tx-item-amount-col {
        grid-column: 6;
        grid-row: 1;
        text-align: right;
        white-space: nowrap;
    }

    #page-riwayat .tx-item-amount-col .tx-amount {
        font-size: 15px;
        font-weight: 600;
    }

    #page-riwayat .tx-actions {
        grid-column: 7;
        grid-row: 1;
        margin-left: 0;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 8px;
        width: 96px;
        flex: 0 0 96px;
    }

    #page-riwayat .tx-actions .btn-icon {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        opacity: 0;
        transition: none !important;
    }

    #page-riwayat .tx-item:hover .tx-actions .btn-icon,
    #page-riwayat .tx-item:focus-within .tx-actions .btn-icon,
    #page-riwayat .tx-actions .btn-icon:focus,
    #page-riwayat .tx-actions .btn-icon:focus-visible {
        opacity: 1;
    }

    /* 5. Statistik: Grafik Disusun 2 Kolom, Tab Waktu Tetap di Atas */
    #page-statistik {
        padding-bottom: 88px;
        box-sizing: border-box;
    }

    #page-statistik .stats-scale-bar {
        margin-bottom: 16px;
    }

    .stats-controls-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-bottom: 16px;
    }

    .stats-controls-row .stats-month-bar,
    .stats-controls-row .stats-currency-bar {
        margin-bottom: 0;
    }

    .stats-charts-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        align-items: start;
    }

    .stats-charts-grid .chart-section,
    .stats-charts-grid .donut-section {
        margin-bottom: 0;
    }

    #page-statistik:has(.donut-section.hidden) .chart-section {
        grid-column: 1 / -1;
    }

    /* 6. Pengaturan: Daftar Bagian di Kiri, Isi di Kanan */
    #page-pengaturan {
        display: grid;
        grid-template-columns: 280px 1fr;
        gap: 24px;
        align-items: start;
    }

    #settings-main-view {
        display: block !important;
        grid-column: 1;
        position: sticky;
        top: 0;
    }

    .settings-submenu-view {
        grid-column: 2;
    }

    .settings-submenu-view.hidden {
        display: none !important;
    }

    #page-pengaturan:not(:has(.settings-submenu-view:not(.hidden))) #submenu-tampilan {
        display: block !important;
    }

    .settings-submenu-header .btn-submenu-back {
        display: none;
    }

    /* Penanda menu pengaturan aktif di kolom kiri */
    #page-pengaturan:has(#submenu-tampilan:not(.hidden)) .settings-menu-row[data-submenu="tampilan"],
    #page-pengaturan:has(#submenu-kategori:not(.hidden)) .settings-menu-row[data-submenu="kategori"],
    #page-pengaturan:has(#submenu-dompet:not(.hidden)) .settings-menu-row[data-submenu="dompet"],
    #page-pengaturan:has(#submenu-budget:not(.hidden)) .settings-menu-row[data-submenu="budget"],
    #page-pengaturan:has(#submenu-data:not(.hidden)) .settings-menu-row[data-submenu="data"],
    #page-pengaturan:has(#submenu-akun:not(.hidden)) .settings-menu-row[data-submenu="akun"],
    #page-pengaturan:has(#submenu-tentang:not(.hidden)) .settings-menu-row[data-submenu="tentang"],
    #page-pengaturan:has(#submenu-bahaya:not(.hidden)) .settings-menu-row[data-submenu="bahaya"],
    #page-pengaturan:not(:has(.settings-submenu-view:not(.hidden))) .settings-menu-row[data-submenu="tampilan"] {
        background-color: var(--surface-raised);
        border-color: var(--accent);
    }

    /* 7. Timbangan: 3 Kolom Dashboard (1 : 1.2 : 1), Pas Sisa Layar */
    #page-timbangan {
        max-width: 1600px;
        margin: 0 auto;
        width: 100%;
        height: 100%;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    #page-timbangan.hidden {
        display: none !important;
    }

    .timbangan-top-controls {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
        flex: 0 0 auto;
        gap: 16px;
        width: 100%;
        box-sizing: border-box;
    }

    #page-timbangan .timbangan-header-bar {
        display: flex;
        align-items: center;
        margin-bottom: 0;
        gap: 0;
    }

    #page-timbangan .btn-timbangan-back {
        display: none !important;
    }

    #page-timbangan .timbangan-main-title {
        font-size: 18px;
        font-weight: 600;
        color: var(--text);
        line-height: 1.25;
        margin: 0;
    }

    #page-timbangan .timbangan-sub-title {
        font-size: 12px;
        color: var(--text-secondary);
        margin-top: 2px;
    }

    #page-timbangan #timbangan-currency-bar {
        margin-bottom: 0;
        padding: 4px 10px;
    }

    .timbangan-dashboard-grid {
        display: grid;
        grid-template-columns: 1fr 1.2fr 1fr;
        gap: 16px;
        height: 100%;
        min-height: 0;
        flex: 1 1 0%;
        align-items: stretch;
    }

    .timbangan-col {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
        overflow: hidden;
        padding-bottom: 0;
        box-sizing: border-box;
    }

    .timbangan-col-left {
        grid-column: 1;
        grid-row: 1;
    }

    .timbangan-col-center {
        grid-column: 2;
        grid-row: 1;
    }

    .timbangan-col-right {
        grid-column: 3;
        grid-row: 1;
    }

    #page-timbangan .timbangan-section,
    #page-timbangan .timbangan-calc-section,
    #page-timbangan .timbangan-adjust-section {
        margin-top: 0;
        margin-bottom: 0;
        padding: 12px 14px;
        height: 100%;
        min-height: 0;
        display: flex;
        flex-direction: column;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-card, 8px);
        box-sizing: border-box;
    }

    #page-timbangan .card-title {
        font-size: 16px;
        font-weight: 600;
        color: var(--text);
        line-height: 1.25;
        margin: 0;
    }

    #page-timbangan .settings-card-header,
    #page-timbangan .chart-header {
        margin-bottom: 8px;
        flex: 0 0 auto;
    }

    #page-timbangan .chart-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: 38px;
    }

    #page-timbangan .settings-card-header {
        min-height: 38px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    #page-timbangan .settings-card-desc {
        font-size: 12px;
        color: var(--text-secondary);
        margin: 2px 0 0 0;
        line-height: 1.35;
    }

    /* Kolom kiri: Timbang Sebelum Beli */
    #page-timbangan .timbangan-calc-section {
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: thin;
        scrollbar-color: var(--border) transparent;
    }

    #page-timbangan .timbangan-calc-form {
        margin-top: 2px;
        margin-bottom: 6px;
        gap: 6px;
        display: flex;
        flex-direction: column;
        flex: 0 0 auto;
    }

    #page-timbangan .timbangan-calc-form .form-group {
        margin-bottom: 0;
    }

    #page-timbangan .timbangan-calc-form .form-label {
        margin-bottom: 2px;
        font-size: 12px;
        font-weight: 500;
        color: var(--text-secondary);
        line-height: 1.2;
    }

    #page-timbangan .timbangan-calc-form .amount-input-wrapper {
        min-height: 40px;
        height: 40px;
        padding: 0 10px;
        box-sizing: border-box;
    }

    #page-timbangan .timbangan-calc-form .amount-currency-prefix {
        font-size: 18px;
        margin-right: 6px;
    }

    #page-timbangan .timbangan-calc-form .tx-amount-large {
        font-size: 22px !important;
        line-height: 1.2 !important;
    }

    #page-timbangan .calc-select {
        height: 40px;
        min-height: 40px;
        padding: 0 10px;
        font-size: 13px;
        box-sizing: border-box;
    }

    #page-timbangan .timbangan-calc-results {
        margin-top: 6px;
        padding-top: 6px;
        border-top: 1px solid var(--border);
        flex: 0 0 auto;
    }

    #page-timbangan .calc-status-banner {
        padding: 6px 10px;
        margin-bottom: 6px;
        border-radius: var(--radius-input, 6px);
    }

    #page-timbangan .calc-status-head {
        margin-bottom: 2px;
        gap: 6px;
        display: flex;
        align-items: center;
    }

    #page-timbangan .calc-status-desc {
        font-size: 12px;
        line-height: 1.3;
        margin: 0;
    }

    #page-timbangan .calc-results-list {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    #page-timbangan .calc-result-row {
        padding: 2px 0;
        font-size: 13px;
        line-height: 1.3;
    }

    /* Kolom tengah: Timbangan Bulan Ini */
    #page-timbangan .timbangan-col-center .timbangan-section {
        overflow: hidden;
    }

    #page-timbangan .timbangan-scale-container {
        width: 100%;
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
    }

    #page-timbangan .timbangan-svg-wrap {
        max-width: 100%;
        width: 100%;
        margin: 4px auto 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 0 1 auto;
    }

    #page-timbangan .timbangan-svg {
        height: clamp(80px, 15vh, 130px);
        width: auto;
        max-width: 100%;
        max-height: none;
        display: block;
    }

    #page-timbangan .timbangan-pan-amounts {
        max-width: 340px;
        width: 100%;
        margin: 0 0 6px;
        display: flex;
        gap: 8px;
    }

    #page-timbangan .timbangan-verdict-box {
        max-width: 340px;
        width: 100%;
        padding: 6px 12px;
    }

    #page-timbangan .timbangan-equilibrium-row {
        margin-top: auto;
        flex: 0 0 auto;
        padding: 8px 12px;
        gap: 6px 10px;
    }

    /* Kolom kanan: Sesuaikan Saldo */
    #page-timbangan .timbangan-adjust-section {
        overflow: hidden;
    }

    #page-timbangan .timbangan-adjust-wallet-list {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: thin;
        scrollbar-color: var(--border) transparent;
        margin-top: 4px;
        padding-right: 2px;
        padding-bottom: 24px;
        gap: 6px;
        display: flex;
        flex-direction: column;
    }

    #page-timbangan .timbangan-adjust-row {
        padding: 6px 10px;
        min-height: 44px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: var(--surface-raised);
        border: 1px solid var(--border);
        border-radius: var(--radius-input, 6px);
        box-sizing: border-box;
    }

    #page-timbangan .timbangan-adjust-row:hover {
        background-color: var(--surface-raised);
    }

    /* Kebijakan Privasi, Syarat dan Ketentuan: max-width 800px di Tengah */

    .privacy-card,
    .privacy-nav-top {
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }

    .privacy-card {
        overflow-y: auto;
        max-height: calc(100vh - 90px);
        scrollbar-width: thin;
        scrollbar-color: var(--border) transparent;
    }

    /* 8. Form Dialog di Tengah Layar: persegi panjang horizontal 2 kolom tanpa scroll */
    .form-screen {
        align-items: center;
        justify-content: center;
        padding: 24px;
        background: transparent;
        height: 100%;
    }

    .form-screen-backdrop {
        display: block !important;
        position: fixed;
        inset: 0;
        background-color: rgba(15, 17, 23, 0.75);
        z-index: 101;
    }

    dialog::backdrop,
    .confirm-dialog::backdrop {
        background-color: rgba(15, 17, 23, 0.75);
    }

    .form-screen-container {
        position: relative;
        z-index: 102;
        background-color: var(--surface);
        max-width: 820px;
        width: 100%;
        height: auto;
        max-height: 90vh;
        border-radius: var(--radius-card, 8px);
        border: 1px solid var(--border);
        box-shadow: none;
        padding: 20px 24px 20px;
        overflow: visible;
    }

    .form-screen-sheet-handle {
        display: none !important;
    }

    .form-screen-header {
        justify-content: space-between;
        min-height: auto;
        height: auto;
        padding: 0 0 10px 0;
        margin-bottom: 16px;
        border-bottom: 1px solid var(--border);
        background: transparent;
    }

    .form-screen-header h2 {
        order: 1;
        font-size: 17px;
    }

    #btn-form-back {
        order: 2;
        margin-left: auto;
        background: transparent;
        color: var(--text-secondary);
    }

    #btn-form-back:hover {
        background: var(--surface-raised);
        color: var(--text);
    }

    #btn-form-back .form-back-arrow {
        display: none !important;
    }

    #btn-form-back .form-close-x {
        display: block !important;
    }

    .form-screen-body {
        overflow: visible;
        flex: none;
    }

    .tx-form {
        height: auto;
        flex: none;
    }

    .form-body-scroll {
        display: contents;
    }

    .type-segment-btn {
        min-height: 40px;
    }

    .compact-date-inputs .date-select,
    .compact-time-inputs .time-select {
        height: 34px;
        min-height: 34px;
    }

    .category-row-btn,
    .compact-select,
    .category-dropdown-btn {
        height: 40px;
        min-height: 40px;
    }

    .compact-amount-input {
        min-height: 40px !important;
    }

    .form-rows-list {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        column-gap: 28px;
        row-gap: 0;
        margin-bottom: 14px;
    }

    .form-row-label {
        flex: 0 0 110px;
        width: 110px;
    }

    .form-row-datetime-val {
        gap: 6px;
    }

    .compact-date-inputs {
        gap: 3px;
        flex-shrink: 0;
    }

    .compact-date-inputs .date-select-day {
        flex: 0 0 46px;
    }

    .compact-date-inputs .date-select-month {
        flex: 0 0 115px;
        width: 115px;
    }

    .compact-date-inputs .date-select-year {
        flex: 0 0 60px;
    }

    .compact-time-inputs {
        gap: 2px;
        flex-shrink: 0;
    }

    .compact-time-inputs .time-select {
        flex: 0 0 46px;
    }

    .compact-time-inputs .time-select-ampm {
        flex: 0 0 58px;
    }

    /* Posisi Grid di Layar PC: Pengeluaran / Pemasukan */
    #form-row-datetime {
        grid-column: 1;
        grid-row: 1;
    }

    #form-row-amount {
        grid-column: 1;
        grid-row: 2;
    }

    #form-row-category {
        grid-column: 2;
        grid-row: 1;
    }

    #form-row-wallet {
        grid-column: 2;
        grid-row: 2;
    }

    /* Perbaikan UI PC 11 & 12: Dropdown Bertingkat Kategori & Dropdown Dompet PC */
    #btn-open-category-picker {
        display: none !important;
    }

    #category-dropdown-pc {
        display: block !important;
    }

    #form-row-wallet .form-row-wallet-val,
    #form-row-to-wallet .form-row-wallet-val {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
    }

    /* Perbaikan UI PC 12 & 13: Dropdown Dompet PC (Pengeluaran, Pemasukan, & Transfer) */
    #wallet-dropdown-pc,
    #to-wallet-dropdown-pc {
        display: block !important;
    }

    #form-row-wallet #tx-wallet,
    #form-row-to-wallet #tx-to-wallet {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    #form-row-wallet .wallet-row-chevron,
    #form-row-to-wallet .wallet-row-chevron {
        display: none !important;
    }

    .category-dropdown-menu {
        left: 0;
        right: auto;
        min-width: 0;
        max-width: none;
    }

    .category-dropdown-primary-col {
        min-width: 190px;
        max-width: 240px;
        flex: none;
    }

    .category-dropdown-sub-col {
        min-width: 180px;
        max-width: 240px;
        flex: none;
    }

    .category-dropdown-item {
        min-height: 36px;
    }

    #form-row-note {
        grid-column: 1 / -1;
        grid-row: 3;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 4px 0;
        gap: 12px;
        border-bottom: 1px solid var(--border);
    }

    #form-row-note .form-row-label {
        flex: 0 0 110px;
        width: 110px;
    }

    #form-row-note .form-row-note-val {
        flex: 1;
        min-width: 0;
        position: relative;
    }

    .tx-note-suggestion-item {
        min-height: 36px;
        padding: 6px 10px;
        font-size: 13px;
    }

    #form-row-note textarea.compact-text-input {
        width: 100%;
        height: 36px;
        min-height: 36px;
        background: transparent;
        border: none;
        border-radius: 0;
        color: var(--text);
        font-family: inherit;
        font-size: 14px;
        line-height: 36px;
        outline: none;
        padding: 0;
        resize: none;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        box-sizing: border-box;
    }

    #form-row-note textarea.compact-text-input:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
        border-radius: var(--radius-input, 6px);
    }

    /* Posisi Grid di Layar PC: Transfer */
    .tx-form.is-transfer #form-row-datetime {
        grid-column: 1;
        grid-row: 1;
    }

    .tx-form.is-transfer #form-row-amount {
        grid-column: 1;
        grid-row: 2;
    }

    .tx-form.is-transfer #form-row-wallet {
        grid-column: 2;
        grid-row: 1;
    }

    .tx-form.is-transfer #form-row-to-wallet {
        grid-column: 2;
        grid-row: 2;
    }

    .tx-form.is-transfer #form-row-note {
        grid-column: 1 / -1;
        grid-row: 3;
    }

    .form-actions {
        order: 3;
        flex-shrink: 0;
        background: transparent;
        border-top: none;
        padding: 0;
        margin-top: 8px;
    }

    .form-actions-secondary {
        order: 4;
        display: flex;
        gap: 8px;
        margin-top: 8px;
        margin-bottom: 0;
    }

    .form-actions-secondary button {
        flex: 1;
        min-height: 44px;
    }

    /* 9. Efek Hover: hanya ganti warna latar ke token surface-raised, tanpa animasi */
    button,
    .btn-secondary,
    .btn-icon,
    .btn-link-action,
    .btn-action-outline,
    .chart-toggle-btn,
    .stats-scale-tab,
    .desktop-nav .nav-tab-btn,
    .tx-item,
    .settings-menu-row,
    .wallet-balance-item,
    .settings-about-link {
        transition: none !important;
    }

    .btn-secondary:hover:not(:disabled),
    .btn-icon:hover:not(:disabled),
    .btn-link-action:hover:not(:disabled),
    .btn-action-outline:hover:not(:disabled),
    .btn-demo-banner-exit:hover,
    .chart-toggle-btn:hover:not(.is-active),
    .stats-scale-tab:hover:not(.is-active),
    .desktop-nav .nav-tab-btn:hover:not(.is-active),
    .tx-item:hover,
    .settings-menu-row:hover,
    .wallet-balance-item:hover:not(.is-selected),
    .settings-about-link:hover,
    .category-item:hover,
    .subcategory-item:hover,
    .cat-picker-item:hover,
    .btn-cat-picker-close:hover,
    .category-dropdown-btn:hover,
    .category-dropdown-item:hover {
        background-color: var(--surface-raised) !important;
    }
}