/* =========================================================
   Ledger — visual identity
   Deep navy desk, parchment sheets, gold foil accent.
   Fraunces for figures and headings, Inter for interface text.
   ========================================================= */

:root {
    --ink-900: #0F1A2B;
    --ink-800: #17263D;
    --ink-700: #223454;
    --paper: #F1ECDD;
    --paper-dim: #E7DFC9;
    --paper-line: #D8CDAE;
    --gold: #C89B3C;
    --gold-dark: #A87F2E;
    --sage: #4F7A5A;
    --rust: #A9503F;
    --text-on-ink: #EFE9D8;
    --text-on-ink-dim: #A9B3C4;
    --text-on-paper: #24304A;
    --text-on-paper-dim: #6E6A5B;
    --radius: 6px;
    --shadow-soft: 0 1px 2px rgba(15, 26, 43, 0.06);
    font-size: 16px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--ink-900);
    background-image:
        radial-gradient(circle at 12% 8%, rgba(200, 155, 60, 0.16), transparent 42%),
        radial-gradient(circle at 88% 78%, rgba(79, 122, 90, 0.14), transparent 45%),
        radial-gradient(circle at 70% 5%, rgba(169, 80, 63, 0.10), transparent 40%);
    background-attachment: fixed;
    color: var(--text-on-paper);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: 'Fraunces', Georgia, serif;
    margin: 0;
    color: inherit;
}

a { color: var(--gold-dark); }

button, input, select, textarea {
    font-family: inherit;
    font-size: 1rem;
}

:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

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

/* ---------- Layout shell ---------- */

.app {
    max-width: 1180px;
    margin: 0 auto;
    padding: 28px 24px 64px;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 4px 4px 28px;
    flex-wrap: wrap;
}

.main-nav {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.nav-link {
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-on-ink-dim);
    text-decoration: none;
    transition: background-color 150ms ease, color 150ms ease;
}

.nav-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-on-ink);
}

.nav-link.is-active {
    background: var(--gold);
    color: var(--ink-900);
}

.nav-link-inline {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gold-dark);
    text-decoration: none;
    margin-left: 12px;
}

.nav-link-inline:first-child { margin-left: 0; }
.nav-link-inline:hover { text-decoration: underline; }

.wordmark {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Fraunces', serif;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--text-on-ink);
    letter-spacing: 0.01em;
}

.wordmark-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--gold);
    border-radius: 50%;
    color: var(--gold);
    font-size: 1rem;
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: 16px;
}

.topbar-name {
    color: var(--text-on-ink-dim);
    font-size: 0.92rem;
}

/* ---------- Quote of the day ---------- */

.quote-strip {
    padding: 4px 4px 26px;
    max-width: 620px;
}

.quote-text {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1.05rem;
    line-height: 1.5;
    color: var(--text-on-ink);
    margin: 0 0 6px;
}

.quote-author {
    font-size: 0.82rem;
    color: var(--gold);
    margin: 0;
    letter-spacing: 0.01em;
}

/* ---------- Hero strip ---------- */

.hero-strip {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 28px 8px 40px;
    border-bottom: 1px solid var(--ink-700);
    margin-bottom: 32px;
}

.hero-stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hero-label {
    font-size: 0.78rem;
    color: var(--text-on-ink-dim);
    letter-spacing: 0.02em;
}

.hero-number {
    font-family: 'Fraunces', serif;
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    font-weight: 500;
    color: var(--text-on-ink);
    font-variant-numeric: tabular-nums;
}

.hero-number.stat-income { color: #8FBF9C; }
.hero-number.stat-expense { color: #D48C7C; }
#stat-balance.stat-negative { color: #D48C7C; }

.hero-divider {
    width: 1px;
    height: 44px;
    background: var(--ink-700);
}

.hero-strip-compact {
    padding-bottom: 32px;
    margin-bottom: 24px;
}

#stat-net.stat-negative { color: #D48C7C; }

/* ---------- Wallets ---------- */

.wallets-strip-panel {
    margin-bottom: 24px;
}

.wallet-mini-list {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.wallet-mini {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 150px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid var(--paper-line);
    border-radius: 6px;
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.wallet-mini:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(15, 26, 43, 0.12);
}

.wallet-mini-name { font-weight: 600; font-size: 0.92rem; }
.wallet-mini-type { font-size: 0.74rem; color: var(--text-on-paper-dim); }
.wallet-mini-balance {
    font-family: 'Fraunces', serif;
    font-size: 1.1rem;
    margin-top: 4px;
}

.wallets-grid { align-items: start; }

.wallets-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wallet-card {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid var(--paper-line);
    border-radius: 6px;
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.wallet-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(15, 26, 43, 0.14);
}

.wallet-card-main { display: flex; flex-direction: column; gap: 2px; }
.wallet-card-name { font-weight: 600; }
.wallet-card-type { font-size: 0.78rem; color: var(--text-on-paper-dim); }
.wallet-card-balance {
    font-family: 'Fraunces', serif;
    font-size: 1.2rem;
    white-space: nowrap;
}

.wallet-card-actions { display: flex; gap: 6px; white-space: nowrap; }

/* ---------- Wallet split rows (in the add/edit form) ---------- */

.splits-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.split-row {
    display: grid;
    grid-template-columns: 1.3fr 1fr auto;
    gap: 8px;
    align-items: center;
}

.split-row select,
.split-row input {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--paper-line);
    border-radius: 4px;
    padding: 8px 9px;
    color: var(--text-on-paper);
    transition: border-color 150ms ease, background-color 150ms ease;
}

.split-row select:hover,
.split-row input:hover {
    border-color: var(--gold);
    background: rgba(255, 255, 255, 0.85);
}

.split-remove {
    background: none;
    border: 1px solid var(--paper-line);
    border-radius: 4px;
    width: 32px;
    height: 32px;
    color: var(--text-on-paper-dim);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    transition: border-color 150ms ease, color 150ms ease;
}

.split-remove:hover {
    border-color: var(--rust);
    color: var(--rust);
}

.splits-total-row {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 8px 2px 4px;
    border-top: 1px dashed var(--paper-line);
    margin-top: 2px;
}

.split-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.split-tag {
    font-size: 0.72rem;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(200, 155, 60, 0.14);
    color: var(--text-on-paper-dim);
}

/* ---------- Panels (parchment sheets) ---------- */

.panel {
    background: rgba(241, 236, 221, 0.72);
    border-top: 3px solid var(--gold);
    border-radius: var(--radius);
    box-shadow: 0 8px 32px rgba(9, 15, 26, 0.28);
    padding: 22px 24px 26px;
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-top: 3px solid var(--gold);
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.panel:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 40px rgba(9, 15, 26, 0.34);
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.panel-head h2 {
    font-size: 1.15rem;
    font-weight: 500;
}

.main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
    gap: 24px;
    align-items: start;
}

.side-column {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ---------- Ledger table ---------- */

.ledger-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.ledger-filters input,
.ledger-filters select {
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid var(--paper-line);
    border-radius: 4px;
    padding: 7px 10px;
    color: var(--text-on-paper);
    transition: border-color 150ms ease, background-color 150ms ease;
}

.ledger-filters input:hover,
.ledger-filters select:hover {
    border-color: var(--gold);
    background: rgba(255, 255, 255, 0.75);
}

.ledger-table-wrap { overflow-x: auto; }

.ledger-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.93rem;
}

.ledger-table thead th {
    text-align: left;
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--text-on-paper-dim);
    padding: 0 10px 10px;
    border-bottom: 1px solid var(--paper-line);
}

.ledger-table tbody tr {
    transition: background-color 150ms ease;
}

.ledger-table tbody tr:hover {
    background: rgba(200, 155, 60, 0.10);
}

.ledger-table tbody td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--paper-line);
    vertical-align: top;
}

.ledger-table tbody tr:last-child td { border-bottom: none; }

.align-right { text-align: right; }

.cell-date {
    white-space: nowrap;
    color: var(--text-on-paper-dim);
    font-size: 0.87rem;
}

.cell-title {
    display: block;
    font-weight: 500;
}

.cell-notes {
    display: block;
    font-size: 0.82rem;
    color: var(--text-on-paper-dim);
    margin-top: 2px;
}

.category-tag {
    display: inline-block;
    font-size: 0.78rem;
    padding: 3px 9px;
    border: 1px solid var(--paper-line);
    border-radius: 999px;
    color: var(--text-on-paper-dim);
    background: var(--paper-dim);
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.ledger-table tbody tr:hover .category-tag {
    border-color: var(--gold);
    color: var(--text-on-paper);
    background: rgba(200, 155, 60, 0.16);
}

.cell-amount {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-weight: 600;
}

.amount-income { color: var(--sage); }
.amount-expense { color: var(--rust); }

.cell-actions { white-space: nowrap; }

.icon-btn {
    background: none;
    border: none;
    color: var(--text-on-paper-dim);
    font-size: 0.82rem;
    cursor: pointer;
    padding: 4px 6px;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 150ms ease, transform 150ms ease;
}

.icon-btn:hover { color: var(--text-on-paper); transform: translateY(-1px); }
.icon-btn-danger:hover { color: var(--rust); }

.ledger-empty-row td {
    text-align: center;
    color: var(--text-on-paper-dim);
    padding: 32px 10px;
    font-style: italic;
}

/* ---------- Form panel ---------- */

.form-panel form { display: flex; flex-direction: column; gap: 12px; }

.form-panel label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-on-paper-dim);
    margin-bottom: -6px;
}

.label-optional { font-weight: 400; text-transform: none; }

.form-panel input,
.form-panel select,
.form-panel textarea {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid var(--paper-line);
    border-radius: 4px;
    padding: 9px 10px;
    color: var(--text-on-paper);
    width: 100%;
    transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.form-panel input:hover,
.form-panel select:hover,
.form-panel textarea:hover {
    border-color: var(--gold);
    background: rgba(255, 255, 255, 0.8);
}

.form-panel input:focus,
.form-panel select:focus,
.form-panel textarea:focus {
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 0 0 3px rgba(200, 155, 60, 0.18);
}

.form-panel textarea { resize: vertical; }

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.type-toggle {
    display: flex;
    border: 1px solid var(--paper-line);
    border-radius: 999px;
    padding: 3px;
    background: var(--paper-dim);
}

.type-btn {
    flex: 1;
    border: none;
    background: none;
    padding: 7px 0;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-on-paper-dim);
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}

.type-btn:hover:not(.is-active) {
    background: rgba(255, 255, 255, 0.5);
    color: var(--text-on-paper);
}

.type-btn.is-active {
    background: var(--ink-800);
    color: var(--text-on-ink);
}

.form-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
}

.form-error {
    color: var(--rust);
    font-size: 0.85rem;
    min-height: 1em;
    margin: 0;
}

/* ---------- Breakdown ---------- */

.breakdown-list { display: flex; flex-direction: column; gap: 14px; }

.breakdown-empty {
    color: var(--text-on-paper-dim);
    font-size: 0.9rem;
    font-style: italic;
}

.breakdown-row-top {
    display: flex;
    justify-content: space-between;
    font-size: 0.87rem;
    margin-bottom: 5px;
}

.breakdown-bar-track {
    height: 6px;
    background: var(--paper-dim);
    border-radius: 999px;
    overflow: hidden;
}

.breakdown-bar-fill {
    height: 100%;
    background: var(--gold);
    border-radius: 999px;
    transition: filter 150ms ease, box-shadow 150ms ease;
}

.breakdown-row:hover .breakdown-bar-fill {
    filter: brightness(1.15);
    box-shadow: 0 0 8px rgba(200, 155, 60, 0.5);
}

/* ---------- Buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border-radius: 4px;
    border: 1px solid transparent;
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.btn-primary {
    background: var(--ink-800);
    color: var(--text-on-ink);
}
.btn-primary:hover {
    background: var(--ink-700);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(15, 26, 43, 0.35);
}

.btn-ghost {
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-color: var(--paper-line);
    color: var(--text-on-paper);
}
.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.6);
    border-color: var(--gold);
    transform: translateY(-2px);
}

.btn-block { width: 100%; }
.btn-small { padding: 7px 14px; font-size: 0.85rem; }

/* Ghost button on the dark topbar needs light-on-dark treatment */
.topbar .btn-ghost {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--ink-700);
    color: var(--text-on-ink-dim);
}
.topbar .btn-ghost:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--gold);
    color: var(--text-on-ink);
}

/* ---------- Alerts & toast ---------- */

.alert {
    padding: 12px 16px;
    border-radius: 4px;
    font-size: 0.9rem;
    margin-bottom: 16px;
}

.alert ul { margin: 0; padding-left: 18px; }

.alert-error {
    background: #F6E2DD;
    color: #7A3527;
    border: 1px solid #E3B7AA;
}

.alert-success {
    background: #E4EEE6;
    color: #315A3D;
    border: 1px solid #BBD8C3;
}

.alert-floating { margin: 0 4px 20px; }

.toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translate(-50%, 16px);
    background: rgba(23, 38, 61, 0.75);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    color: var(--text-on-ink);
    padding: 11px 20px;
    border-radius: 999px;
    font-size: 0.88rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
    border-left: 3px solid var(--gold);
}

.toast.toast-visible { opacity: 1; transform: translate(-50%, 0); }
.toast.toast-error { border-left-color: var(--rust); }

/* ---------- Auth pages ---------- */

.auth-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.auth-shell {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}

.auth-mark {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Fraunces', serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-on-ink);
}

.auth-mark-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--gold);
    border-radius: 50%;
    color: var(--gold);
}

.auth-card {
    width: 100%;
    background: rgba(241, 236, 221, 0.75);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-top: 3px solid var(--gold);
    border-radius: var(--radius);
    padding: 32px 30px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.28);
}

.auth-card h1 {
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 6px;
}

.auth-sub {
    color: var(--text-on-paper-dim);
    font-size: 0.92rem;
    margin: 0 0 20px;
}

.auth-card form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.auth-card label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-on-paper-dim);
    margin-bottom: -6px;
}

.auth-card input {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(6px);
    border: 1px solid var(--paper-line);
    border-radius: 4px;
    padding: 10px 11px;
    color: var(--text-on-paper);
    width: 100%;
    transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.auth-card input:hover {
    border-color: var(--gold);
    background: rgba(255, 255, 255, 0.8);
}

.auth-card input:focus {
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 0 0 3px rgba(200, 155, 60, 0.18);
}

.auth-card .btn { margin-top: 8px; }

.auth-switch {
    text-align: center;
    font-size: 0.88rem;
    color: var(--text-on-paper-dim);
    margin: 18px 0 0;
}

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
    .main-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .app { padding: 20px 16px 48px; }
    .hero-strip { flex-wrap: wrap; row-gap: 20px; }
    .hero-divider { display: none; }
    .field-row { grid-template-columns: 1fr; }
    .ledger-filters { flex-direction: column; width: 100%; }
    .panel-head { flex-direction: column; align-items: flex-start; }
    .split-row { grid-template-columns: 1fr; }
    .wallet-card { grid-template-columns: 1fr; text-align: left; }
    .wallet-card-balance { font-size: 1rem; }
    .main-nav { width: 100%; justify-content: flex-start; }
}

/* Soft pink scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #fecdd3; border-radius: 10px; }
.dark ::-webkit-scrollbar-thumb { background: #475569; }
::-webkit-scrollbar-thumb:hover { background: #fb7185; }

/* Hide wallet list scrollbar */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* Fade in animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fadeIn 0.4s ease-out; }

/* Table row hover */
tbody tr { transition: background-color 0.15s; }
tbody tr:hover { background-color: rgba(255, 228, 230, 0.5); }
.dark tbody tr:hover,
.dark .ledger-table tbody tr:hover { background-color: rgba(51, 65, 85, 0.5); }

/* ---------- Dark-mode overrides for JS-rendered content ----------
   dashboard.js / transactions.js / wallets.js / reports.js inject rows,
   tags, wallet cards and breakdown bars using these classes. They were
   only ever styled for the light "parchment" palette, so toggling dark
   mode left them unreadable against the dark cards. */

.dark .cell-date,
.dark .cell-notes,
.dark .wallet-mini-type,
.dark .wallet-card-type,
.dark .breakdown-empty,
.dark .icon-btn {
    color: #94a3b8; /* slate-400 */
}

.dark .icon-btn:hover { color: #e2e8f0; /* slate-200 */ }
.dark .icon-btn-danger:hover { color: #fb7185; /* rose-400 */ }

.dark .cell-title { color: #f1f5f9; /* slate-100 */ }

.dark .category-tag,
.dark .split-tag {
    background: rgba(251, 113, 133, 0.14);
    border-color: rgba(251, 113, 133, 0.25);
    color: #fda4af; /* rose-300 */
}

.dark .ledger-table tbody tr:hover .category-tag {
    background: rgba(251, 113, 133, 0.22);
    border-color: rgba(251, 113, 133, 0.4);
    color: #fecdd3;
}

.dark .amount-income { color: #6ee7b7; /* emerald-300 */ }
.dark .amount-expense { color: #fda4af; /* rose-300 */ }

.dark .wallet-mini,
.dark .wallet-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: #334155; /* slate-700 */
}

.dark .wallet-mini-name,
.dark .wallet-card-name { color: #f1f5f9; }

.dark .breakdown-bar-track { background: #334155; }

.dark .split-row select,
.dark .split-row input {
    background: rgba(255, 255, 255, 0.05);
    border-color: #475569; /* slate-600 */
    color: #e2e8f0;
}

.dark .split-remove {
    border-color: #475569;
    color: #94a3b8;
}

.dark .ledger-empty-row td { color: #94a3b8; }