.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
}

/* View transitions */
#app { opacity: 1; transition: opacity 0.15s ease; }
#app.fading { opacity: 0; }

/* Active nav item */
.nav-item.active { color: #010202; }
.nav-item.active .nav-icon { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* Editorial border utility */
.editorial-border { border: 1px solid #E2E4E1; }

/* Chart SVG */
.chart-line {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    animation: dash 1.2s ease-out forwards;
}
@keyframes dash { to { stroke-dashoffset: 0; } }

/* Ledger dividers */
.ledger-row { border-bottom: 1px solid #E2E4E1; transition: transform 0.2s cubic-bezier(0.16,1,0.3,1); }
.ledger-row:hover { transform: translateX(4px); }
.ledger-row:last-child { border-bottom: none; }

/* Budget progress */
.progress-bar { height: 4px; border-radius: 2px; background: #eeeeec; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 2px; transition: width 0.6s cubic-bezier(0.16,1,0.3,1); }
.progress-ok     { background: #506354; }
.progress-warn   { background: #b8860b; }
.progress-danger { background: #ba1a1a; }

/* FAB button */
.fab {
    position: fixed; bottom: 88px; right: 24px;
    width: 56px; height: 56px;
    background: #010202; color: #fff;
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    cursor: pointer; z-index: 40;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.fab:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(0,0,0,0.25); }
.fab:active { transform: scale(0.95); }

/* Toast */
#toast-container {
    position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%);
    z-index: 100; display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.toast {
    padding: 10px 20px; border-radius: 4px;
    font-family: 'Manrope', sans-serif; font-size: 14px; font-weight: 600;
    color: #fff; opacity: 0;
    animation: toastIn 0.25s ease forwards;
}
.toast-success { background: #506354; }
.toast-error   { background: #ba1a1a; }
@keyframes toastIn { to { opacity: 1; } }

/* Modal */
#modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.4);
    z-index: 60; display: flex; align-items: flex-end; justify-content: center;
    opacity: 0; transition: opacity 0.2s ease;
    pointer-events: none;
}
#modal-overlay.open { opacity: 1; pointer-events: all; }
#modal-box {
    background: #f9f9f7; width: 100%; max-width: 480px;
    border-radius: 12px 12px 0 0; padding: 24px;
    transform: translateY(100%); transition: transform 0.25s cubic-bezier(0.16,1,0.3,1);
}
#modal-overlay.open #modal-box { transform: translateY(0); }

/* Input style */
.flux-input {
    width: 100%; background: transparent;
    border: none; border-bottom: 1px solid #c4c7c8;
    padding: 8px 0; font-family: 'Manrope', sans-serif; font-size: 16px;
    color: #010202; outline: none; transition: border-color 0.2s;
}
.flux-input:focus { border-bottom-color: #010202; }
.flux-label {
    display: block; font-size: 12px; font-weight: 600;
    color: #444749; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px;
}

/* Chip */
.chip {
    display: inline-flex; align-items: center;
    padding: 2px 6px; font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    background: #d0e5d2; color: #546758;
}

/* Status colors */
.amount-positive { color: #506354; }
.amount-negative { color: #010202; }

/* Scrollbar hide */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }