@import '_content/Blazor.Bootstrap/Blazor.Bootstrap.olwso25aue.bundle.scp.css';
@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.84wtju4z0n.bundle.scp.css';

/* /Components/Account/Pages/Manage/AppSettings.razor.rz.scp.css */
/* ── Settings grid ── */
.settings-grid[b-nqa9azkz5o] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 24px;
}

/* ── Settings card ── */
.settings-card[b-nqa9azkz5o] {
    background: linear-gradient(145deg, var(--bg-card), rgba(17,24,39,.95));
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 24px;
    overflow: hidden;
    transition: all .25s ease;
}

.settings-card:hover[b-nqa9azkz5o] {
    transform: translateY(-3px);
    border-color: rgba(74,222,128,.22);
    box-shadow: 0 8px 32px rgba(0,0,0,.3), 0 0 24px rgba(74,222,128,.06);
}

.settings-card.full-width[b-nqa9azkz5o] {
    grid-column: 1 / -1;
}

.settings-card-header[b-nqa9azkz5o] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 24px 24px 0;
}

.settings-card-header > .bi[b-nqa9azkz5o] {
    font-size: 1.3rem;
    color: var(--accent);
    margin-top: 3px;
    flex-shrink: 0;
    opacity: .9;
}

.settings-card-header h2[b-nqa9azkz5o] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -.01em;
}

.settings-card-body[b-nqa9azkz5o] {
    padding: 18px 24px 24px;
}

.settings-desc[b-nqa9azkz5o] {
    color: var(--text-secondary);
    font-size: .86rem;
    margin: 0 0 20px;
    line-height: 1.55;
}

.settings-card-footer[b-nqa9azkz5o] {
    padding: 0 24px 24px;
    display: flex;
    justify-content: flex-end;
}

/* ── Toggle ── */
.settings-toggle[b-nqa9azkz5o] {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: .93rem;
    font-weight: 500;
    color: var(--text-primary);
    padding: 10px 0;
}

.settings-toggle input[type="checkbox"][b-nqa9azkz5o] {
    accent-color: var(--accent);
    width: 20px;
    height: 20px;
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
}

/* ── Form adjustments inside cards ── */
[b-nqa9azkz5o] .mb-3 {
    margin-bottom: .5rem !important;
}

[b-nqa9azkz5o] .form-floating {
    margin-bottom: 0;
}

[b-nqa9azkz5o] .form-floating > .form-control,
[b-nqa9azkz5o] .form-floating > .form-select {
    height: 56px;
    padding-top: 1.75rem;
    padding-bottom: .65rem;
    border-radius: 14px;
}

[b-nqa9azkz5o] .form-floating > label {
    padding: 1rem 1.2rem;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .settings-grid[b-nqa9azkz5o] {
        grid-template-columns: 1fr;
    }

    .settings-card-header[b-nqa9azkz5o] {
        padding: 20px 20px 0;
    }

    .settings-card-body[b-nqa9azkz5o] {
        padding: 14px 20px 20px;
    }

    .settings-card-footer[b-nqa9azkz5o] {
        padding: 0 20px 20px;
    }
}

@media (max-width: 480px) {
    .settings-grid[b-nqa9azkz5o] {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}
/* /Components/Account/Pages/Manage/Backup.razor.rz.scp.css */
/* ── Backup manage page ── */

/* ── Alert ── */
.bk-alert[b-3fwyn66czk] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--radius-sm, 6px);
    margin-bottom: 16px;
    font-size: .95rem;
    font-weight: 500;
    position: relative;
}

.bk-alert-success[b-3fwyn66czk] {
    background: rgba(63, 185, 80, .12);
    color: #3fb950;
    border: 1px solid rgba(63, 185, 80, .25);
}

.bk-alert-danger[b-3fwyn66czk] {
    background: rgba(248, 81, 73, .12);
    color: #f85149;
    border: 1px solid rgba(248, 81, 73, .25);
}

.bk-alert-close[b-3fwyn66czk] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: inherit;
    font-size: 1.2rem;
    cursor: pointer;
    opacity: .6;
    transition: opacity .15s;
}

.bk-alert-close:hover[b-3fwyn66czk] {
    opacity: 1;
}

/* ── Grid layout ── */
.backup-grid[b-3fwyn66czk] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.full-width[b-3fwyn66czk] {
    grid-column: 1 / -1;
}

/* ── Cards ── */
.backup-card[b-3fwyn66czk] {
    background: var(--bg-surface, rgba(128, 128, 128, .04));
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 6px);
    overflow: hidden;
}

.bk-card-header[b-3fwyn66czk] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(128, 128, 128, .06);
    border-bottom: 1px solid var(--border-color);
    padding: 12px 16px;
}

.bk-card-header h4[b-3fwyn66czk] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.bk-card-header .bi[b-3fwyn66czk] {
    font-size: 1.1rem;
    color: var(--accent);
}

.bk-card-body[b-3fwyn66czk] {
    padding: 16px;
}

.bk-card-desc[b-3fwyn66czk] {
    color: var(--text-secondary);
    font-size: .92rem;
    margin: 0 0 14px;
    line-height: 1.5;
}

/* ── Buttons ── */
.bk-btn[b-3fwyn66czk] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: var(--radius-sm, 6px);
    font-weight: 600;
    font-size: .93rem;
    cursor: pointer;
    transition: background .15s ease, transform .1s ease;
}

.bk-btn:hover:not(:disabled)[b-3fwyn66czk] {
    transform: translateY(-1px);
}

.bk-btn:disabled[b-3fwyn66czk] {
    opacity: .6;
    cursor: not-allowed;
}

.bk-btn.primary[b-3fwyn66czk] {
    background: var(--accent);
    color: #fff;
}

.bk-btn.primary:hover:not(:disabled)[b-3fwyn66czk] {
    background: var(--accent-hover);
}

.bk-btn.secondary[b-3fwyn66czk] {
    background: rgba(128, 128, 128, .15);
    color: var(--text-primary);
}

.bk-btn.secondary:hover:not(:disabled)[b-3fwyn66czk] {
    background: rgba(128, 128, 128, .25);
}

/* ── File upload ── */
.file-upload-area[b-3fwyn66czk] {
    position: relative;
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-sm, 6px);
    padding: 28px;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s, background .2s;
    margin-bottom: 14px;
}

.file-upload-area:hover[b-3fwyn66czk],
.file-upload-area.drag-active[b-3fwyn66czk] {
    border-color: var(--accent);
    background: rgba(88, 166, 255, .06);
}

.file-upload-area[b-3fwyn66czk]  input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.upload-content[b-3fwyn66czk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: .93rem;
    pointer-events: none;
}

.upload-content .bi[b-3fwyn66czk] {
    font-size: 2rem;
    color: var(--accent);
}

/* ── Import preview ── */
.import-preview[b-3fwyn66czk] {
    background: rgba(128, 128, 128, .06);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 6px);
    padding: 14px;
}

.preview-header[b-3fwyn66czk] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: .92rem;
    color: var(--accent);
}

.preview-stats[b-3fwyn66czk] {
    display: flex;
    gap: 18px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.stat-item[b-3fwyn66czk] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stat-label[b-3fwyn66czk] {
    font-size: .85rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.stat-value[b-3fwyn66czk] {
    font-size: 1rem;
    font-weight: 700;
}

.import-options[b-3fwyn66czk] {
    margin-bottom: 14px;
}

.toggle-option[b-3fwyn66czk] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: .93rem;
}

.toggle-option input[type="checkbox"][b-3fwyn66czk] {
    accent-color: var(--accent);
    width: 16px;
    height: 16px;
}

.toggle-label[b-3fwyn66czk] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #f85149;
}

.import-actions[b-3fwyn66czk] {
    display: flex;
    gap: 10px;
}

/* ── Backup list ── */
.backup-list[b-3fwyn66czk] {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 6px);
    overflow: hidden;
}

.backup-list-header[b-3fwyn66czk] {
    display: grid;
    grid-template-columns: 1fr 160px 100px 110px;
    gap: 12px;
    padding: 8px 14px;
    background: rgba(128, 128, 128, .08);
    border-bottom: 1px solid var(--border-color);
    font-size: .85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-secondary);
}

.backup-list-row[b-3fwyn66czk] {
    display: grid;
    grid-template-columns: 1fr 160px 100px 110px;
    gap: 12px;
    padding: 10px 14px;
    align-items: center;
    border-bottom: 1px solid rgba(128, 128, 128, .08);
    font-size: .92rem;
    transition: background .12s;
}

.backup-list-row:last-child[b-3fwyn66czk] {
    border-bottom: none;
}

.backup-list-row:hover[b-3fwyn66czk] {
    background: rgba(128, 128, 128, .06);
}

.backup-list-row .col-name[b-3fwyn66czk] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.backup-list-row .col-name .bi[b-3fwyn66czk] {
    color: var(--accent);
    flex-shrink: 0;
}

.backup-list-row .col-date[b-3fwyn66czk] {
    color: var(--text-secondary);
    font-size: .82rem;
}

.backup-list-row .col-size[b-3fwyn66czk] {
    color: var(--text-secondary);
    font-size: .82rem;
}

.backup-list-row .col-actions[b-3fwyn66czk] {
    display: flex;
    gap: 6px;
}

.bk-btn-icon[b-3fwyn66czk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all .15s;
    font-size: .88rem;
}

.bk-btn-icon:hover[b-3fwyn66czk] {
    background: rgba(88, 166, 255, .12);
    color: var(--accent);
    border-color: var(--accent);
}

.bk-btn-icon.restore:hover[b-3fwyn66czk] {
    background: rgba(240, 173, 78, .12);
    color: #f0ad4e;
    border-color: #f0ad4e;
}

/* ── Restore dialog ── */
.restore-overlay[b-3fwyn66czk] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.restore-dialog[b-3fwyn66czk] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 10px);
    padding: 20px 24px;
    max-width: 460px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .5);
}

.restore-dialog-header[b-3fwyn66czk] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 1rem;
}

.restore-dialog-text[b-3fwyn66czk] {
    color: var(--text-secondary);
    font-size: .9rem;
    margin: 0 0 14px;
    line-height: 1.5;
}

/* ── Empty state ── */
.empty-state[b-3fwyn66czk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 28px;
    color: var(--text-secondary);
}

.empty-state .bi[b-3fwyn66czk] {
    font-size: 2rem;
}

/* ── Spinner ── */
.bk-spinner[b-3fwyn66czk] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, .3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: bk-spin-b-3fwyn66czk .6s linear infinite;
}

@keyframes bk-spin-b-3fwyn66czk {
    to { transform: rotate(360deg); }
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .backup-grid[b-3fwyn66czk] {
        grid-template-columns: 1fr;
    }

    .backup-list-header[b-3fwyn66czk],
    .backup-list-row[b-3fwyn66czk] {
        grid-template-columns: 1fr 1fr;
    }

    .backup-list-header .col-date[b-3fwyn66czk],
    .backup-list-row .col-date[b-3fwyn66czk] {
        display: none;
    }
}
/* /Components/Account/Pages/Manage/Currencies.razor.rz.scp.css */
/* ── Currencies management page ── */
.currencies-page[b-bllp6qrws6] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Reuse settings-card from Index.razor.css ── */
.settings-card[b-bllp6qrws6] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 10px);
    overflow: hidden;
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, .35));
}

.settings-card-header[b-bllp6qrws6] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: rgba(128, 128, 128, .06);
    border-bottom: 1px solid var(--border-color);
}

.settings-card-header h2[b-bllp6qrws6] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.settings-card-header .bi[b-bllp6qrws6] {
    font-size: 1.15rem;
    color: var(--accent);
}

.settings-card-body[b-bllp6qrws6] {
    padding: 18px;
}

.settings-desc[b-bllp6qrws6] {
    color: var(--text-secondary);
    font-size: .93rem;
    margin: 0 0 14px;
    line-height: 1.5;
}

/* ── Currency list ── */
.currencies-list[b-bllp6qrws6] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.currency-row[b-bllp6qrws6] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: border-color .15s;
}

.currency-row:hover[b-bllp6qrws6] {
    border-color: var(--accent);
}

.currency-symbol[b-bllp6qrws6] {
    font-size: 1.2rem;
    font-weight: 700;
    min-width: 2rem;
    text-align: center;
    color: var(--accent);
}

.currency-code-label[b-bllp6qrws6] {
    font-weight: 600;
    font-family: monospace;
    font-size: .95rem;
    min-width: 3rem;
}

.currency-name[b-bllp6qrws6] {
    flex: 1;
    color: var(--text-secondary);
    font-size: .9rem;
}

.default-badge[b-bllp6qrws6] {
    font-size: .75rem;
    padding: .2rem .6rem;
    background: var(--accent-subtle);
    color: var(--accent);
    border-radius: 4px;
    font-weight: 600;
    letter-spacing: .02em;
}

.btn-action[b-bllp6qrws6] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: .8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
}

.btn-action.set-default:hover[b-bllp6qrws6] {
    background: var(--accent-subtle);
    color: var(--accent);
    border-color: var(--accent);
}

.btn-action.remove:hover[b-bllp6qrws6] {
    background: rgba(248, 81, 73, .08);
    color: #f85149;
    border-color: #f85149;
}

/* ── Add currency grid ── */
.add-currency-grid[b-bllp6qrws6] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
}

.add-currency-btn[b-bllp6qrws6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 12px 8px;
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all .15s;
}

.add-currency-btn:hover[b-bllp6qrws6] {
    background: var(--accent-subtle);
    color: var(--accent);
    border-color: var(--accent);
    transform: translateY(-1px);
}

.add-symbol[b-bllp6qrws6] {
    font-size: 1.1rem;
    font-weight: 700;
}

.add-code[b-bllp6qrws6] {
    font-size: .78rem;
    font-family: monospace;
    font-weight: 600;
}

/* ── Responsive ── */
@media (max-width: 600px) {
    .add-currency-grid[b-bllp6qrws6] {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    }

    .currency-name[b-bllp6qrws6] {
        display: none;
    }
}
/* /Components/Account/Pages/Manage/Index.razor.rz.scp.css */
/* ── Settings grid ── */
.settings-grid[b-9f05t5fyrk] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 24px;
}

/* ── Settings card ── */
.settings-card[b-9f05t5fyrk] {
    background: linear-gradient(145deg, rgba(17,24,39,.85), rgba(10,14,23,.9));
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 24px;
    overflow: hidden;
    transition: all .25s ease;
    display: flex;
    flex-direction: column;
}

.settings-card:hover[b-9f05t5fyrk] {
    transform: translateY(-3px);
    border-color: rgba(74,222,128,.2);
    box-shadow: 0 8px 32px rgba(0,0,0,.3), 0 0 24px rgba(74,222,128,.04);
}

.settings-card.full-width[b-9f05t5fyrk] {
    grid-column: 1 / -1;
}

.settings-card-header[b-9f05t5fyrk] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 24px 24px 0;
}

.settings-card-header > .bi[b-9f05t5fyrk] {
    font-size: 1.3rem;
    color: var(--accent);
    margin-top: 3px;
    flex-shrink: 0;
}

.settings-card-header h2[b-9f05t5fyrk] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -.01em;
}

.settings-card-body[b-9f05t5fyrk] {
    padding: 10px 24px 18px;
    flex: 1;
}

.settings-desc[b-9f05t5fyrk] {
    color: var(--text-secondary);
    font-size: .86rem;
    margin: 0 0 18px;
    line-height: 1.55;
}

.settings-card-footer[b-9f05t5fyrk] {
    padding: 0 24px 24px;
    display: flex;
    justify-content: flex-end;
}

/* ── Toggle ── */
.settings-toggle[b-9f05t5fyrk] {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: .93rem;
    font-weight: 500;
    color: var(--text-primary);
    padding: 10px 0;
}

.settings-toggle input[type="checkbox"][b-9f05t5fyrk] {
    accent-color: var(--accent);
    width: 20px;
    height: 20px;
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
}

/* ── Backup inner spacing ── */
.backup-settings-inner[b-9f05t5fyrk] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ── Backup status rows ── */
.backup-status-row[b-9f05t5fyrk] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .88rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.backup-status-row .bi[b-9f05t5fyrk] {
    color: var(--accent);
    font-size: .95rem;
}

.backup-status-row strong[b-9f05t5fyrk] {
    color: var(--text-primary);
}

/* ── Quick link ── */
.quick-link[b-9f05t5fyrk] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    margin-top: 18px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 500;
    transition: all .2s ease;
}

.quick-link:hover[b-9f05t5fyrk] {
    background: rgba(74,222,128,.06);
    color: var(--accent);
    border-color: rgba(74,222,128,.25);
    box-shadow: 0 0 16px rgba(74,222,128,.06);
}

.quick-link .bi[b-9f05t5fyrk] {
    flex-shrink: 0;
}

/* ── System info card ── */
.system-card[b-9f05t5fyrk] {
    margin-top: 32px;
    background: linear-gradient(145deg, rgba(17,24,39,.85), rgba(10,14,23,.9));
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 24px;
    padding: 28px;
    transition: all .25s ease;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.system-top[b-9f05t5fyrk] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.system-top button[b-9f05t5fyrk] {
    flex-shrink: 0;
}

.system-card:hover[b-9f05t5fyrk] {
    border-color: rgba(74,222,128,.1);
}

.system-header[b-9f05t5fyrk] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}

.system-header .bi[b-9f05t5fyrk] {
    font-size: 1.3rem;
    color: var(--accent);
}

.system-header h3[b-9f05t5fyrk] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.system-desc[b-9f05t5fyrk] {
    color: var(--text-secondary);
    font-size: .86rem;
    margin: 0;
}

.system-grid[b-9f05t5fyrk] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.system-item[b-9f05t5fyrk] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.system-item span[b-9f05t5fyrk] {
    font-size: .8rem;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.system-item strong[b-9f05t5fyrk] {
    font-size: .93rem;
    color: var(--text-primary);
    font-weight: 600;
}

/* ── Form adjustments inside cards ── */
[b-9f05t5fyrk] .mb-3 {
    margin-bottom: .5rem !important;
}

[b-9f05t5fyrk] .form-floating {
    margin-bottom: 0;
}

[b-9f05t5fyrk] .form-floating > .form-control,
[b-9f05t5fyrk] .form-floating > .form-select {
    height: 56px;
    padding-top: 1.75rem;
    padding-bottom: .65rem;
    border-radius: 14px;
}

[b-9f05t5fyrk] .form-floating > label {
    padding: 1rem 1.2rem;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .settings-grid[b-9f05t5fyrk] {
        grid-template-columns: 1fr;
    }

    .settings-card-header[b-9f05t5fyrk] {
        padding: 20px 20px 0;
    }

    .settings-card-body[b-9f05t5fyrk] {
        padding: 10px 20px 16px;
    }

    .settings-card-footer[b-9f05t5fyrk] {
        padding: 0 20px 20px;
    }

    .system-card[b-9f05t5fyrk] {
        padding: 20px;
    }

    .system-grid[b-9f05t5fyrk] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .settings-grid[b-9f05t5fyrk] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .system-grid[b-9f05t5fyrk] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Account/Shared/ManageLayout.razor.rz.scp.css */
/* ── Admin page shell ── */
.admin-page[b-hh0h9zwxe9] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 28px 3rem;
}

/* ── Header ── */
.admin-header[b-hh0h9zwxe9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px 0 20px;
}

.admin-header-left[b-hh0h9zwxe9] {
    display: flex;
    align-items: center;
    gap: 18px;
}

.admin-header-icon[b-hh0h9zwxe9] {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(63,185,80,.2), rgba(63,185,80,.35));
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    box-shadow: 0 0 28px rgba(63,185,80,.18);
}

.admin-header h1[b-hh0h9zwxe9] {
    margin: 0;
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -.02em;
}

.admin-header p[b-hh0h9zwxe9] {
    margin: 3px 0 0;
    font-size: .88rem;
    color: var(--text-secondary);
}

/* ── Tab navigation ── */
.admin-tabs[b-hh0h9zwxe9] {
    display: flex;
    gap: 8px;
    padding: 0 0 1px;
    margin-bottom: 28px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    position: sticky;
    top: 56px;
    z-index: 10;
    background: transparent;
}

.admin-tabs[b-hh0h9zwxe9]::-webkit-scrollbar {
    display: none;
}

[b-hh0h9zwxe9] .admin-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px 12px;
    margin-bottom: -1px;
    color: var(--text-muted) !important;
    text-decoration: none !important;
    font-size: .9rem;
    font-weight: 500;
    white-space: nowrap;
    transition: all .2s ease;
    cursor: pointer;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent !important;
    outline: none;
    position: relative;
}

[b-hh0h9zwxe9] .admin-tab:hover {
    color: var(--text-primary) !important;
    border-bottom-color: rgba(255,255,255,.1);
}

[b-hh0h9zwxe9] .admin-tab.active {
    color: var(--accent) !important;
    font-weight: 600;
    border-bottom-color: var(--accent);
    background: transparent !important;
}

[b-hh0h9zwxe9] .admin-tab.active .bi {
    color: var(--accent) !important;
}

[b-hh0h9zwxe9] .admin-tab .bi {
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* ── Content area ── */
.admin-content[b-hh0h9zwxe9] {
    min-width: 0;
}

/* ── Form controls ── */
[b-hh0h9zwxe9] .form-control,
[b-hh0h9zwxe9] .form-select {
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    color: var(--text-primary) !important;
    border-radius: 14px;
    padding: 14px 18px;
    font-size: .93rem;
    transition: border-color .2s ease, box-shadow .2s ease;
}

[b-hh0h9zwxe9] .form-control:focus,
[b-hh0h9zwxe9] .form-select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-subtle, rgba(63,185,80,.15)) !important;
}

[b-hh0h9zwxe9] .form-control:disabled,
[b-hh0h9zwxe9] .form-control[readonly] {
    background: rgba(255,255,255,.02) !important;
    opacity: .55;
}

[b-hh0h9zwxe9] .form-floating > label {
    color: var(--text-muted) !important;
    padding: 1rem 1.2rem;
    font-size: .88rem;
}

[b-hh0h9zwxe9] .form-floating > .form-control:focus ~ label,
[b-hh0h9zwxe9] .form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--text-secondary) !important;
}

[b-hh0h9zwxe9] .form-floating > .form-control,
[b-hh0h9zwxe9] .form-floating > .form-select {
    height: 56px;
    padding-top: 1.75rem;
    padding-bottom: .65rem;
    border-radius: 14px;
}

[b-hh0h9zwxe9] .text-danger {
    font-size: .82rem;
}

[b-hh0h9zwxe9] .validation-message {
    margin-bottom: 4px;
}

[b-hh0h9zwxe9] .validation-errors {
    margin-bottom: 8px;
}

/* ── Buttons ── */
[b-hh0h9zwxe9] .btn-primary {
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 14px;
    font-weight: 600;
    padding: 13px 24px;
    font-size: .93rem;
    transition: all .2s ease;
    box-shadow: 0 2px 12px rgba(34,197,94,.25);
}

[b-hh0h9zwxe9] .btn-primary:hover {
    background: linear-gradient(135deg, #4ade80, #22c55e) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(34,197,94,.35);
}

[b-hh0h9zwxe9] .btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 1px 6px rgba(34,197,94,.2);
}

[b-hh0h9zwxe9] .btn-outline-danger {
    border-radius: 14px;
    font-weight: 500;
}

[b-hh0h9zwxe9] .btn-outline-secondary {
    border-radius: 14px;
    font-weight: 500;
}

/* ── Status messages ── */
[b-hh0h9zwxe9] .alert {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 14px;
    font-size: .9rem;
}

[b-hh0h9zwxe9] .alert-success {
    border-left: 3px solid var(--success);
    background: linear-gradient(90deg, var(--success-subtle, rgba(63,185,80,.1)), var(--bg-surface));
}

[b-hh0h9zwxe9] .alert-danger {
    border-left: 3px solid var(--danger);
    background: linear-gradient(90deg, var(--danger-subtle, rgba(247,83,83,.1)), var(--bg-surface));
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .admin-page[b-hh0h9zwxe9] {
        padding: 0 14px 2rem;
    }

    .admin-header[b-hh0h9zwxe9] {
        padding: 18px 0 14px;
    }

    .admin-header h1[b-hh0h9zwxe9] {
        font-size: 1.35rem;
    }

    .admin-header-icon[b-hh0h9zwxe9] {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        font-size: 1.3rem;
    }

    .admin-tabs[b-hh0h9zwxe9] {
        top: 48px;
    }

    .admin-tab[b-hh0h9zwxe9] {
        padding: 10px 12px;
        font-size: .82rem;
    }

    .admin-tab span:last-child[b-hh0h9zwxe9] {
        display: none;
    }

    .admin-tab .bi[b-hh0h9zwxe9] {
        font-size: 1.15rem;
    }
}

@media (max-width: 480px) {
    .admin-header-left[b-hh0h9zwxe9] {
        gap: 12px;
    }
}
/* /Components/Account/Shared/ManageNavMenu.razor.rz.scp.css */
/* intentionally empty — nav is now in ManageLayout */
/* /Components/Layout/AccountLayout.razor.rz.scp.css */
/* ── Page background ── */
.account-page[b-31oe5p8hyr] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #0f0c29 0%, #302b63 40%, #544a7d 80%);
}

/* ── Stars ── */
.account-stars[b-31oe5p8hyr] {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.account-stars[b-31oe5p8hyr]::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 25% 35%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1.5px 1.5px at 40% 10%, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 55% 25%, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 70% 45%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1.5px 1.5px at 85% 20%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 15% 55%, rgba(255,255,255,0.4), transparent),
        radial-gradient(1px 1px at 35% 5%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1.5px 1.5px at 60% 40%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 80% 8%, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 95% 50%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 5% 40%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1.5px 1.5px at 48% 55%, rgba(255,255,255,0.4), transparent),
        radial-gradient(1px 1px at 72% 15%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 90% 35%, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 18% 70%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1.5px 1.5px at 62% 8%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 44% 30%, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 78% 58%, rgba(255,255,255,0.4), transparent),
        radial-gradient(1.5px 1.5px at 33% 48%, rgba(255,255,255,0.6), transparent);
}

/* ── Content container ── */
.account-content[b-31oe5p8hyr] {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 420px;
    padding: 1rem;
}

/* ── Mountain SVG ── */
.account-mountains[b-31oe5p8hyr] {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    z-index: 1;
    pointer-events: none;
}

/* ── Auth Card ── */
[b-31oe5p8hyr] .auth-card {
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    color: #fff;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

[b-31oe5p8hyr] .auth-title {
    text-align: center;
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 1.75rem;
    color: #fff;
}

[b-31oe5p8hyr] .auth-title .bi {
    margin-right: 0.5rem;
    color: #bc8cff;
}

/* ── Form fields ── */
[b-31oe5p8hyr] .auth-field {
    position: relative;
    margin-bottom: 0.5rem;
}

[b-31oe5p8hyr] .auth-field-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.45);
    font-size: 1rem;
    z-index: 1;
    pointer-events: none;
    margin-right: 0;
}

[b-31oe5p8hyr] .auth-input {
    width: 100%;
    padding: 0.75rem 0.75rem 0.75rem 2.75rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: #fff;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
    box-sizing: border-box;
}

[b-31oe5p8hyr] .auth-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

[b-31oe5p8hyr] .auth-input:focus {
    border-color: rgba(188, 140, 255, 0.6);
    background: rgba(255, 255, 255, 0.1);
}

/* ── Options row ── */
[b-31oe5p8hyr] .auth-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0.75rem 0 1.25rem;
    font-size: 0.85rem;
}

[b-31oe5p8hyr] .auth-remember {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
}

[b-31oe5p8hyr] .auth-remember .form-check-input {
    margin: 0;
}

[b-31oe5p8hyr] .auth-forgot {
    color: rgba(188, 140, 255, 0.9);
    text-decoration: none;
    transition: color 0.2s;
}

[b-31oe5p8hyr] .auth-forgot:hover {
    color: #bc8cff;
}

/* ── Submit button ── */
[b-31oe5p8hyr] .auth-btn {
    width: 100%;
    padding: 0.75rem;
    margin-top: 0.75rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
}

[b-31oe5p8hyr] .auth-btn:hover {
    opacity: 0.9;
}

[b-31oe5p8hyr] .auth-btn:active {
    transform: scale(0.98);
}

/* ── Divider ── */
[b-31oe5p8hyr] .auth-divider {
    display: flex;
    align-items: center;
    margin: 1.25rem 0;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
}

[b-31oe5p8hyr] .auth-divider::before,
[b-31oe5p8hyr] .auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.15);
}

[b-31oe5p8hyr] .auth-divider span {
    padding: 0 0.75rem;
}

/* ── External login buttons ── */
[b-31oe5p8hyr] .auth-external-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

[b-31oe5p8hyr] .auth-external-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.7rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

[b-31oe5p8hyr] .auth-external-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.25);
}

[b-31oe5p8hyr] .auth-external-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* ── Footer link ── */
[b-31oe5p8hyr] .auth-footer {
    text-align: center;
    margin: 1.25rem 0 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
}

[b-31oe5p8hyr] .auth-footer a {
    color: #bc8cff;
    font-weight: 600;
    text-decoration: none;
}

[b-31oe5p8hyr] .auth-footer a:hover {
    text-decoration: underline;
}

/* ── Validation ── */
[b-31oe5p8hyr] .text-danger {
    color: #f85149 !important;
    font-size: 0.82rem;
    margin-top: 0.15rem;
    display: block;
}

[b-31oe5p8hyr] .validation-message {
    margin-bottom: 0.25rem;
}

/* ── Status message ── */
[b-31oe5p8hyr] .alert {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: #fff;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

[b-31oe5p8hyr] .alert-danger {
    border-color: rgba(248, 81, 73, 0.4);
    background: rgba(248, 81, 73, 0.1);
}

/* ── Error UI ── */
#blazor-error-ui[b-31oe5p8hyr] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-31oe5p8hyr] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/CurrencySwitcher.razor.rz.scp.css */
/* ── Currency switcher ── */
.currency-switcher[b-rttme0g8ry] {
    position: relative;
}

.currency-toggle[b-rttme0g8ry] {
    background: var(--nav-hover-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    height: 36px;
    padding: 0 .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .5px;
    transition: all .2s ease;
    gap: .35rem;
}

.currency-toggle:hover[b-rttme0g8ry] {
    background: var(--accent-subtle);
    color: var(--accent);
    border-color: var(--accent);
}

.currency-code[b-rttme0g8ry] {
    font-family: monospace;
}

/* ── Dropdown ── */
.currency-dropdown[b-rttme0g8ry] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    min-width: 160px;
    padding: .35rem;
    z-index: 100;
    animation: fadeInDown-b-rttme0g8ry .15s ease;
}

@keyframes fadeInDown-b-rttme0g8ry {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.currency-option[b-rttme0g8ry] {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .5rem .75rem;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: .85rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s;
}

.currency-option:hover[b-rttme0g8ry] {
    background: var(--nav-hover-bg);
}

.currency-option.active[b-rttme0g8ry] {
    background: var(--accent-subtle);
    color: var(--accent);
    font-weight: 600;
}

.currency-symbol[b-rttme0g8ry] {
    font-weight: 700;
    min-width: 1.5rem;
    text-align: center;
}

.currency-divider[b-rttme0g8ry] {
    height: 1px;
    background: var(--border-color);
    margin: .25rem .5rem;
}

.manage-btn[b-rttme0g8ry] {
    color: var(--text-muted);
    font-size: .8rem;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ÔöÇÔöÇ Page shell ÔöÇÔöÇ */
.page[b-ftv5fa144r] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--bg-body);
    color: var(--text-primary);
}

/* ÔöÇÔöÇ Sidebar ÔöÇÔöÇ */
.sidebar[b-ftv5fa144r] {
    background: var(--bg-sidebar);
    box-shadow: var(--shadow-md);
    z-index: 10;
    display: flex;
    flex-direction: column;
    transition: width .25s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
}

/* ÔöÇÔöÇ Sidebar toggle button ÔöÇÔöÇ */
.sidebar-toggle[b-ftv5fa144r] {
    flex-shrink: 0;
    height: 42px;
    border: none;
    border-top: 1px solid var(--sidebar-border);
    background: transparent;
    color: var(--sidebar-text-muted);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    transition: all .15s ease;
}

.sidebar-toggle:hover[b-ftv5fa144r] {
    background: var(--sidebar-hover-bg);
    color: var(--text-primary);
}

/* ÔöÇÔöÇ Main area (header + content) ÔöÇÔöÇ */
.main-area[b-ftv5fa144r] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* ÔöÇÔöÇ Top bar ÔöÇÔöÇ */
.top-bar[b-ftv5fa144r] {
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-color);
    padding: 0 1.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 5;
    box-shadow: var(--shadow-sm);
}

.top-bar-left[b-ftv5fa144r] {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.breadcrumb-text[b-ftv5fa144r] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.top-bar-right[b-ftv5fa144r] {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* ÔöÇÔöÇ Theme toggle ÔöÇÔöÇ */
.theme-toggle[b-ftv5fa144r] {
    background: var(--nav-hover-bg);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 1.1rem;
    transition: all .2s ease;
}

.theme-toggle:hover[b-ftv5fa144r] {
    background: var(--accent-subtle);
    color: var(--accent);
    border-color: var(--accent);
}

/* ÔöÇÔöÇ Content ÔöÇÔöÇ */
main[b-ftv5fa144r] {
    flex: 1;
    overflow-y: auto;
}

/* ÔöÇÔöÇ Responsive ÔöÇÔöÇ */
@media (max-width: 640.98px) {
    .top-bar[b-ftv5fa144r] {
        padding: 0 1rem;
    }
}

@media (min-width: 641px) {
    .page[b-ftv5fa144r] {
        flex-direction: row;
    }

    .sidebar[b-ftv5fa144r] {
        width: 260px;
        height: 100vh;
        position: sticky;
        top: 0;
        flex-shrink: 0;
    }

    .sidebar-toggle[b-ftv5fa144r] {
        display: flex;
    }

    .top-bar[b-ftv5fa144r], article[b-ftv5fa144r] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }

    /* ÔöÇÔöÇ Collapsed sidebar ÔöÇÔöÇ */
    .page.sidebar-collapsed .sidebar[b-ftv5fa144r] {
        width: 64px;
    }

    .page.sidebar-collapsed[b-ftv5fa144r]  .brand-text,
    .page.sidebar-collapsed[b-ftv5fa144r]  .nav-section-label,
    .page.sidebar-collapsed[b-ftv5fa144r]  .nav-text {
        display: none;
    }

    .page.sidebar-collapsed[b-ftv5fa144r]  .sidebar-brand {
        justify-content: center;
        padding: 1.1rem .5rem;
    }

    .page.sidebar-collapsed[b-ftv5fa144r]  .nav-item {
        padding-left: .5rem !important;
        padding-right: .5rem !important;
    }

    .page.sidebar-collapsed[b-ftv5fa144r]  .nav-link {
        justify-content: center;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .page.sidebar-collapsed[b-ftv5fa144r]  .bi {
        margin-right: 0;
        font-size: 1.2rem;
    }

    .page.sidebar-collapsed[b-ftv5fa144r]  .nav-bottom {
        border-top-color: var(--sidebar-border);
    }
}

#blazor-error-ui[b-ftv5fa144r] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-ftv5fa144r] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* ── Nav icon color variants ── */
.nav-icon[b-5o8369yy89] { transition: color .15s ease, filter .15s ease; }

.nav-icon--green[b-5o8369yy89]  { color: #3fb950; }
.nav-icon--blue[b-5o8369yy89]   { color: #4d9fff; }
.nav-icon--teal[b-5o8369yy89]   { color: #22d3ee; }
.nav-icon--orange[b-5o8369yy89] { color: #f5a623; }
.nav-icon--purple[b-5o8369yy89] { color: #c084fc; }
.nav-icon--yellow[b-5o8369yy89] { color: #facc15; }
.nav-icon--pink[b-5o8369yy89]   { color: #f472b6; }
.nav-icon--muted[b-5o8369yy89]  { color: var(--sidebar-text-muted); }

/* Active state — icon keeps its color, no glow */
.nav-item[b-5o8369yy89]  a.active .nav-icon--green  { color: #3fb950; }
.nav-item[b-5o8369yy89]  a.active .nav-icon--blue   { color: #4d9fff; }
.nav-item[b-5o8369yy89]  a.active .nav-icon--teal   { color: #22d3ee; }
.nav-item[b-5o8369yy89]  a.active .nav-icon--orange { color: #f5a623; }
.nav-item[b-5o8369yy89]  a.active .nav-icon--purple { color: #c084fc; }
.nav-item[b-5o8369yy89]  a.active .nav-icon--yellow { color: #facc15; }
.nav-item[b-5o8369yy89]  a.active .nav-icon--pink   { color: #f472b6; }

/* Hover — icon brightens */
.nav-item[b-5o8369yy89]  .nav-link:hover .nav-icon { filter: brightness(1.25); }

/* ── Mobile toggle ── */
.navbar-toggler[b-5o8369yy89] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: var(--text-primary);
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid var(--sidebar-border);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='currentColor' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem var(--sidebar-hover-bg);
    border-radius: 6px;
}

.navbar-toggler:checked[b-5o8369yy89] {
    background-color: var(--sidebar-hover-bg);
}

/* ── Brand area ── */
.sidebar-brand[b-5o8369yy89] {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--sidebar-border);
}

.brand-icon[b-5o8369yy89] {
    font-size: 1.5rem;
    color: var(--accent);
}

.brand-text[b-5o8369yy89] {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: .5px;
}

/* ── Section labels ── */
.nav-section-label[b-5o8369yy89] {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--sidebar-text-muted);
    padding: 1.2rem 1.5rem .4rem;
    text-transform: uppercase;
}

/* ── Icons ── */
.bi[b-5o8369yy89] {
    display: inline-block;
    position: relative;
    font-size: 1.1rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

/* ── Nav items ── */
.nav-item[b-5o8369yy89] {
    font-size: 0.95rem;
    padding-bottom: 2px;
}

    .nav-item:first-of-type[b-5o8369yy89] {
        padding-top: 0;
    }

    .nav-item:last-of-type[b-5o8369yy89] {
        padding-bottom: 1rem;
    }

    .nav-item[b-5o8369yy89]  .nav-link {
        color: var(--sidebar-text);
        background: none;
        border: none;
        border-radius: 8px;
        height: 2.75rem;
        display: flex;
        align-items: center;
        line-height: 2.75rem;
        width: 100%;
        transition: all .15s ease;
        font-weight: 500;
    }

.nav-item[b-5o8369yy89]  a.active {
    color: var(--text-primary);
}

/* Per-color active backgrounds — tinted from the icon color */
.nav-item[b-5o8369yy89]  a.active:has(.nav-icon--green)  { background: rgba(63,185,80,.15);   border: 1px solid rgba(63,185,80,.5); }
.nav-item[b-5o8369yy89]  a.active:has(.nav-icon--blue)   { background: rgba(77,159,255,.15);  border: 1px solid rgba(77,159,255,.5); }
.nav-item[b-5o8369yy89]  a.active:has(.nav-icon--teal)   { background: rgba(34,211,238,.12);  border: 1px solid rgba(34,211,238,.45); }
.nav-item[b-5o8369yy89]  a.active:has(.nav-icon--orange) { background: rgba(245,166,35,.15);  border: 1px solid rgba(245,166,35,.5); }
.nav-item[b-5o8369yy89]  a.active:has(.nav-icon--purple) { background: rgba(192,132,252,.15); border: 1px solid rgba(192,132,252,.5); }
.nav-item[b-5o8369yy89]  a.active:has(.nav-icon--yellow) { background: rgba(250,204,21,.12);  border: 1px solid rgba(250,204,21,.45); }
.nav-item[b-5o8369yy89]  a.active:has(.nav-icon--pink)   { background: rgba(244,114,182,.15); border: 1px solid rgba(244,114,182,.5); }
.nav-item[b-5o8369yy89]  a.active:has(.nav-icon--muted)  { background: var(--nav-active-bg);  border: 1px solid rgba(128,128,128,.4); }

/* Do NOT override icon colors on active — each icon keeps its own color */
.nav-item[b-5o8369yy89]  a.active .bi:not(.nav-icon) {
    color: var(--accent);
}

.nav-item[b-5o8369yy89]  .nav-link:hover {
    background: var(--sidebar-hover-bg);
    color: var(--text-primary);
}

/* ── Scrollable area ── */
.nav-scrollable[b-5o8369yy89] {
    display: none;
    overflow: hidden;
}

@media (max-width: 640px) {
    .navbar-toggler:checked ~ .nav-scrollable[b-5o8369yy89] {
        display: block;
    }
}

/* ── Bottom account section ── */
.nav-bottom[b-5o8369yy89] {
    border-top: 1px solid var(--sidebar-border);
    padding-top: .5rem;
}

@media (min-width: 641px) {
    .navbar-toggler[b-5o8369yy89] {
        display: none;
    }

    .nav-scrollable[b-5o8369yy89] {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        overflow-y: auto;
    }

    .nav-main[b-5o8369yy89] {
        flex: 1;
    }

    .nav-bottom[b-5o8369yy89] {
        margin-top: auto;
    }
}
/* /Components/Pages/Backup.razor.rz.scp.css */
/* ── Backup page ── */
.backup-page[b-5ujjz8u4u9] {
    padding: 0 16px 2rem;
}

.page-header[b-5ujjz8u4u9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 12px;
}

.page-header h1[b-5ujjz8u4u9] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
}

/* ── Alert ── */
.alert[b-5ujjz8u4u9] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--radius-sm, 6px);
    margin-bottom: 16px;
    font-size: .95rem;
    font-weight: 500;
    position: relative;
}

.alert-success[b-5ujjz8u4u9] {
    background: rgba(63, 185, 80, .12);
    color: #3fb950;
    border: 1px solid rgba(63, 185, 80, .25);
}

.alert-danger[b-5ujjz8u4u9] {
    background: rgba(248, 81, 73, .12);
    color: #f85149;
    border: 1px solid rgba(248, 81, 73, .25);
}

.alert-close[b-5ujjz8u4u9] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: inherit;
    font-size: 1.2rem;
    cursor: pointer;
    opacity: .6;
    transition: opacity .15s;
}

.alert-close:hover[b-5ujjz8u4u9] {
    opacity: 1;
}

/* ── Grid layout ── */
.backup-grid[b-5ujjz8u4u9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.full-width[b-5ujjz8u4u9] {
    grid-column: 1 / -1;
}

/* ── Cards ── */
.backup-card[b-5ujjz8u4u9] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 10px);
    overflow: hidden;
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, .35));
}

.card-header[b-5ujjz8u4u9] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(128, 128, 128, .06);
    border-bottom: 1px solid var(--border-color);
    padding: 12px 16px;
}

.card-header h2[b-5ujjz8u4u9] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.card-header .bi[b-5ujjz8u4u9] {
    font-size: 1.15rem;
    color: var(--accent);
}

.card-body[b-5ujjz8u4u9] {
    padding: 16px;
}

.card-desc[b-5ujjz8u4u9] {
    color: var(--text-secondary);
    font-size: .93rem;
    margin: 0 0 14px;
    line-height: 1.5;
}

/* ── Buttons ── */
.btn-action[b-5ujjz8u4u9] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: var(--radius-sm, 6px);
    font-weight: 600;
    font-size: .95rem;
    cursor: pointer;
    transition: background .15s ease, transform .1s ease;
}

.btn-action:hover:not(:disabled)[b-5ujjz8u4u9] {
    transform: translateY(-1px);
}

.btn-action:disabled[b-5ujjz8u4u9] {
    opacity: .6;
    cursor: not-allowed;
}

.btn-action.primary[b-5ujjz8u4u9] {
    background: var(--accent);
    color: #fff;
}

.btn-action.primary:hover:not(:disabled)[b-5ujjz8u4u9] {
    background: var(--accent-hover);
}

.btn-action.secondary[b-5ujjz8u4u9] {
    background: rgba(128, 128, 128, .15);
    color: var(--text-primary);
}

.btn-action.secondary:hover:not(:disabled)[b-5ujjz8u4u9] {
    background: rgba(128, 128, 128, .25);
}

/* ── File upload ── */
.file-upload-area[b-5ujjz8u4u9] {
    position: relative;
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-sm, 6px);
    padding: 28px;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s, background .2s;
    margin-bottom: 14px;
}

.file-upload-area:hover[b-5ujjz8u4u9],
.file-upload-area.drag-active[b-5ujjz8u4u9] {
    border-color: var(--accent);
    background: rgba(88, 166, 255, .06);
}

.file-upload-area[b-5ujjz8u4u9]  input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.upload-content[b-5ujjz8u4u9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: .95rem;
    pointer-events: none;
}

.upload-content .bi[b-5ujjz8u4u9] {
    font-size: 2rem;
    color: var(--accent);
}

/* ── Import preview ── */
.import-preview[b-5ujjz8u4u9] {
    background: rgba(128, 128, 128, .06);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 6px);
    padding: 14px;
}

.preview-header[b-5ujjz8u4u9] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: .92rem;
    color: var(--accent);
}

.preview-stats[b-5ujjz8u4u9] {
    display: flex;
    gap: 18px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.stat-item[b-5ujjz8u4u9] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stat-label[b-5ujjz8u4u9] {
    font-size: .85rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.stat-value[b-5ujjz8u4u9] {
    font-size: 1rem;
    font-weight: 700;
}

.import-options[b-5ujjz8u4u9] {
    margin-bottom: 14px;
}

.toggle-option[b-5ujjz8u4u9] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: .93rem;
}

.toggle-option input[type="checkbox"][b-5ujjz8u4u9] {
    accent-color: var(--accent);
    width: 16px;
    height: 16px;
}

.toggle-label[b-5ujjz8u4u9] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #f85149;
}

.import-actions[b-5ujjz8u4u9] {
    display: flex;
    gap: 10px;
}

/* ── Backup list ── */
.backup-list[b-5ujjz8u4u9] {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 6px);
    overflow: hidden;
}

.backup-list-header[b-5ujjz8u4u9] {
    display: grid;
    grid-template-columns: 1fr 160px 100px 110px;
    gap: 12px;
    padding: 8px 14px;
    background: rgba(128, 128, 128, .08);
    border-bottom: 1px solid var(--border-color);
    font-size: .85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-secondary);
}

.backup-list-row[b-5ujjz8u4u9] {
    display: grid;
    grid-template-columns: 1fr 160px 100px 110px;
    gap: 12px;
    padding: 10px 14px;
    align-items: center;
    border-bottom: 1px solid rgba(128, 128, 128, .08);
    font-size: .93rem;
    transition: background .12s;
}

.backup-list-row:last-child[b-5ujjz8u4u9] {
    border-bottom: none;
}

.backup-list-row:hover[b-5ujjz8u4u9] {
    background: rgba(128, 128, 128, .06);
}

.backup-list-row .col-name[b-5ujjz8u4u9] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.backup-list-row .col-name .bi[b-5ujjz8u4u9] {
    color: var(--accent);
    flex-shrink: 0;
}

.backup-list-row .col-date[b-5ujjz8u4u9] {
    color: var(--text-secondary);
    font-size: .84rem;
}

.backup-list-row .col-size[b-5ujjz8u4u9] {
    color: var(--text-secondary);
    font-size: .84rem;
}

.backup-list-row .col-actions[b-5ujjz8u4u9] {
    display: flex;
    gap: 6px;
}

.btn-icon[b-5ujjz8u4u9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all .15s;
    font-size: .88rem;
}

.btn-icon:hover[b-5ujjz8u4u9] {
    background: rgba(88, 166, 255, .12);
    color: var(--accent);
    border-color: var(--accent);
}

.btn-icon.restore:hover[b-5ujjz8u4u9] {
    background: rgba(240, 173, 78, .12);
    color: #f0ad4e;
    border-color: #f0ad4e;
}

/* ── Restore dialog ── */
.restore-overlay[b-5ujjz8u4u9] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.restore-dialog[b-5ujjz8u4u9] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 10px);
    padding: 20px 24px;
    max-width: 460px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .5);
}

.restore-dialog-header[b-5ujjz8u4u9] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 1rem;
}

.restore-dialog-text[b-5ujjz8u4u9] {
    color: var(--text-secondary);
    font-size: .9rem;
    margin: 0 0 14px;
    line-height: 1.5;
}

/* ── Empty state ── */
.empty-state[b-5ujjz8u4u9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 28px;
    color: var(--text-secondary);
}

.empty-state .bi[b-5ujjz8u4u9] {
    font-size: 2rem;
}

/* ── Spinner ── */
.spinner[b-5ujjz8u4u9] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, .3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-5ujjz8u4u9 .6s linear infinite;
}

@keyframes spin-b-5ujjz8u4u9 {
    to { transform: rotate(360deg); }
}

/* ── Responsive ── */
/* ── Settings form ── */
.settings-form[b-5ujjz8u4u9] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.toggle-label-info[b-5ujjz8u4u9] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-primary);
    font-weight: 500;
}

.interval-setting[b-5ujjz8u4u9] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .9rem;
}

.interval-setting label[b-5ujjz8u4u9] {
    color: var(--text-secondary);
    white-space: nowrap;
}

.interval-setting select[b-5ujjz8u4u9] {
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 6px);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: .88rem;
    cursor: pointer;
}

.interval-setting select:focus[b-5ujjz8u4u9] {
    outline: none;
    border-color: var(--accent);
}

.backup-info-row[b-5ujjz8u4u9] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .88rem;
    color: var(--text-secondary);
}

.backup-info-row .info-icon[b-5ujjz8u4u9] {
    color: var(--accent);
    font-size: .92rem;
}

.backup-info-row .info-label[b-5ujjz8u4u9] {
    font-weight: 500;
}

.backup-info-row .info-value[b-5ujjz8u4u9] {
    color: var(--text-primary);
    font-weight: 600;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .backup-grid[b-5ujjz8u4u9] {
        grid-template-columns: 1fr;
    }

    .backup-list-header[b-5ujjz8u4u9],
    .backup-list-row[b-5ujjz8u4u9] {
        grid-template-columns: 1fr 1fr;
    }

    .backup-list-header .col-date[b-5ujjz8u4u9],
    .backup-list-row .col-date[b-5ujjz8u4u9] {
        display: none;
    }
}
/* /Components/Pages/Budgets.razor.rz.scp.css */
/* �� Budgets page �� */
.budgets-page[b-2iws2jtdaq] {
    padding: 0 16px 2rem;
}

.page-header[b-2iws2jtdaq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 16px;
}

.page-header h1[b-2iws2jtdaq] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
}

.btn-add[b-2iws2jtdaq] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border: none;
    border-radius: var(--radius-sm, 6px);
    background: var(--accent);
    color: #ffffff !important;
    font-weight: 600;
    font-size: .95rem;
    cursor: pointer;
    transition: background .15s ease, transform .1s ease;
}

.btn-add:hover[b-2iws2jtdaq] {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

/* �� Empty state �� */
.empty-state[b-2iws2jtdaq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 4rem 2rem;
    color: var(--text-muted);
}

.empty-state p[b-2iws2jtdaq] {
    margin: 0;
    font-size: 1rem;
}

/* �� Card grid �� */
.budget-cards[b-2iws2jtdaq] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

/* �� Budget card �� */
.budget-card[b-2iws2jtdaq] {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 12px);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease;
    min-height: 160px;
}

.budget-card:hover:not(.editing)[b-2iws2jtdaq] {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
}

.budget-card.editing[b-2iws2jtdaq] {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-subtle);
}

.budget-card.budget-exhausted[b-2iws2jtdaq] {
    border-color: rgba(248, 81, 73, .5);
    box-shadow: 0 0 0 1px rgba(248, 81, 73, .3), var(--shadow-sm);
}

/* �� Animated fill background �� */
.card-fill-bg[b-2iws2jtdaq] {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--fill-pct, 0%);
    background: color-mix(in srgb, var(--card-accent) 32%, transparent);
    transition: width .6s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
    z-index: 0;
}

/* Color bar on top edge */
.budget-card[b-2iws2jtdaq]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--card-accent);
    z-index: 2;
}

/* exhausted-overlay is defined globally in app.css */

/* ?? Card body ?? */
.card-body[b-2iws2jtdaq] {
    position: relative;
    z-index: 1;
    padding: 18px 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* �� Top row �� */
.card-top[b-2iws2jtdaq] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.card-icon-name[b-2iws2jtdaq] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-icon-wrap[b-2iws2jtdaq] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.card-title[b-2iws2jtdaq] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.card-desc[b-2iws2jtdaq] {
    margin: 2px 0 0;
    font-size: .8rem;
    color: var(--text-muted);
}

.card-top-right[b-2iws2jtdaq] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.card-pct-badge[b-2iws2jtdaq] {
    background: rgba(255,255,255,.12);
    color: #fff;
    font-size: .8rem;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 20px;
    letter-spacing: .02em;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,.15);
}

.card-pct-badge.pct-overspent[b-2iws2jtdaq] {
    background: rgba(248, 81, 73, .25);
    border-color: rgba(248, 81, 73, .5);
    color: #f88;
}

.override-pill[b-2iws2jtdaq] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: .72rem;
    font-weight: 700;
    padding: .2rem .45rem;
    border-radius: 20px;
    white-space: nowrap;
}

.override-pill-up[b-2iws2jtdaq] {
    background: rgba(63,185,80,.18);
    color: #3fb950;
    border: 1px solid rgba(63,185,80,.35);
}

.override-pill-down[b-2iws2jtdaq] {
    background: rgba(248,81,73,.18);
    color: #f85149;
    border: 1px solid rgba(248,81,73,.35);
}

/* �� Amounts row �� */
.card-amounts-row[b-2iws2jtdaq] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

.card-spent[b-2iws2jtdaq] {
    font-size: 1.55rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--card-accent, var(--accent));
    text-shadow: 0 1px 6px rgba(0,0,0,.4);
}

.card-spent.spent-over[b-2iws2jtdaq] {
    color: #f85149;
}

.card-limit-sep[b-2iws2jtdaq] {
    font-size: 1rem;
    color: var(--text-muted);
    font-weight: 500;
}

.card-limit-val[b-2iws2jtdaq] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.card-type-badge[b-2iws2jtdaq] {
    margin-left: auto;
    padding: 2px 9px;
    border-radius: 6px;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}

/* �� Remaining row �� */
.card-remaining-row[b-2iws2jtdaq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 10px;
    border-radius: 8px;
    background: rgba(0,0,0,.25);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,.07);
}

.remaining-label[b-2iws2jtdaq] {
    font-size: .8rem;
    color: var(--text-muted);
    font-weight: 500;
}

.remaining-value[b-2iws2jtdaq] {
    font-size: .95rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--card-accent, var(--savings));
    text-shadow: 0 1px 4px rgba(0,0,0,.4);
}

.remaining-value.remaining-over[b-2iws2jtdaq] {
    color: #f85149;
}

/* �� Card actions �� */
.card-actions[b-2iws2jtdaq] {
    display: flex;
    gap: 6px;
    margin-top: 2px;
}

.btn-card[b-2iws2jtdaq] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--radius-sm, 6px);
    background: rgba(0,0,0,.25);
    color: var(--text-secondary);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: all .12s ease;
}

.btn-card:hover[b-2iws2jtdaq] {
    background: rgba(255,255,255,.1);
    color: var(--text-primary);
}

.btn-card.save[b-2iws2jtdaq] {
    background: rgba(46,160,67,.2);
    color: var(--success);
    border-color: rgba(46,160,67,.4);
}
.btn-card.save:hover[b-2iws2jtdaq] { background: var(--success); color: #fff; }

.btn-card.cancel[b-2iws2jtdaq] {
    color: var(--danger);
    border-color: rgba(248,81,73,.4);
    background: rgba(248,81,73,.1);
}
.btn-card.cancel:hover[b-2iws2jtdaq] { background: rgba(248,81,73,.25); }

.btn-card.edit:hover[b-2iws2jtdaq] {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-subtle);
}

.btn-card.delete:hover[b-2iws2jtdaq] {
    color: #f85149;
    border-color: rgba(248,81,73,.4);
    background: rgba(248,81,73,.12);
}

/* �� Edit mode �� */
.edit-field[b-2iws2jtdaq] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.edit-field label[b-2iws2jtdaq] {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    font-weight: 600;
}

.edit-input[b-2iws2jtdaq] {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 4px;
    padding: 6px 10px;
    font-size: .9rem;
    width: 100%;
    box-sizing: border-box;
}

.edit-input:focus[b-2iws2jtdaq] {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-subtle);
}

.edit-row[b-2iws2jtdaq] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.color-row[b-2iws2jtdaq] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.color-row input[type="color"][b-2iws2jtdaq] {
    width: 36px;
    height: 36px;
    border: none;
    padding: 0;
    background: transparent;
    cursor: pointer;
    border-radius: 4px;
}

/* �� Icon picker �� */
.icon-picker[b-2iws2jtdaq] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-height: 160px;
    overflow-y: auto;
    padding: 4px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-surface);
}

.icon-option[b-2iws2jtdaq] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 1.1rem;
    cursor: pointer;
    transition: all .12s ease;
}

.icon-option:hover[b-2iws2jtdaq] {
    background: rgba(128,128,128,.1);
    color: var(--text-primary);
}

.icon-option.selected[b-2iws2jtdaq] {
    font-weight: 700;
}

/* �� Responsive �� */
@media (max-width: 700px) {
    .budget-cards[b-2iws2jtdaq] { grid-template-columns: 1fr; }
}

/* �� Amount history panel �� */
.amount-history-panel[b-2iws2jtdaq] { margin-top: .5rem; padding: 0.75rem; background: rgba(0,0,0,.3); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,.08); border-radius: 8px; }
.history-title[b-2iws2jtdaq] { font-size: 0.85rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--text-muted); }
.history-empty[b-2iws2jtdaq] { font-size: 0.82rem; color: var(--text-muted); margin: 0; }
.history-table[b-2iws2jtdaq] { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.history-table th[b-2iws2jtdaq], .history-table td[b-2iws2jtdaq] { padding: 4px 8px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.06); }
.history-add-row[b-2iws2jtdaq] { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.5rem; flex-wrap: wrap; }
.btn-sm[b-2iws2jtdaq] { padding: 4px 10px !important; font-size: 0.78rem !important; }
/* /Components/Pages/Calendar.razor.rz.scp.css */
.calendar-container[b-ctdfkqvmtx] {
    color: var(--text-primary);
    /* base min size for columns; can be overridden by media queries */
    --cell-min: 120px;
}

.calendar-scroll[b-ctdfkqvmtx] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.budget-section-title[b-ctdfkqvmtx] {
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 8px;
    font-size: .75rem;
}

.budget-bars[b-ctdfkqvmtx] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.budget-overview-wrap[b-ctdfkqvmtx] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 12px;
    margin-bottom: 12px;
}

.budget-overview-row[b-ctdfkqvmtx] {
    padding: 10px 14px;
}

.budget-overview-row .budget-section-title[b-ctdfkqvmtx] {
    margin-bottom: 8px;
}

.budget-bars-h[b-ctdfkqvmtx] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
}

/* -- Card-style budget rows -- */
.cal-budget-card[b-ctdfkqvmtx] {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.07);
    background: var(--bg-surface);
    transition: transform .15s ease;
}

.cal-budget-card:hover[b-ctdfkqvmtx] { transform: translateY(-1px); }
.cal-budget-exhausted[b-ctdfkqvmtx] { border-color: rgba(248, 81, 73, .5); box-shadow: 0 0 0 1px rgba(248,81,73,.25); }

/* exhausted-overlay is global — see app.css */

.val-overspent[b-ctdfkqvmtx] { color: #f85149 !important; font-weight: 700; }

.cal-card-fill[b-ctdfkqvmtx] {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: var(--fill-pct, 0%);
    background: color-mix(in srgb, var(--card-accent) 28%, transparent);
    transition: width .5s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
    z-index: 0;
}

.cal-card-content[b-ctdfkqvmtx] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: 9px 12px;
}

.cal-card-left[b-ctdfkqvmtx] {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex: 1;
    min-width: 0;
}

.cal-icon-wrap[b-ctdfkqvmtx] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    font-size: 1rem;
    flex-shrink: 0;
}

.cal-card-info[b-ctdfkqvmtx] { flex: 1; min-width: 0; }

.cal-card-name-row[b-ctdfkqvmtx] {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: .1rem;
}

.cal-budget-name[b-ctdfkqvmtx] {
    font-size: .85rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cal-override-pill[b-ctdfkqvmtx] { font-size: .8rem; }
.cal-override-up[b-ctdfkqvmtx] { color: #3fb950; }
.cal-override-down[b-ctdfkqvmtx] { color: #f85149; }

.cal-card-amounts[b-ctdfkqvmtx] {
    display: flex;
    align-items: baseline;
    gap: .3rem;
    font-size: .78rem;
}

.cal-spent[b-ctdfkqvmtx] { font-weight: 700; font-variant-numeric: tabular-nums; }
.cal-overspent[b-ctdfkqvmtx] { color: #f85149 !important; }
.cal-limit[b-ctdfkqvmtx] { color: var(--text-muted); font-variant-numeric: tabular-nums; }

.cal-pct-badge[b-ctdfkqvmtx] {
    font-size: .78rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 20px;
    border: 1px solid transparent;
    white-space: nowrap;
    flex-shrink: 0;
    backdrop-filter: blur(4px);
}

.cal-pct-over[b-ctdfkqvmtx] {
    background: rgba(248,81,73,.2) !important;
    color: #f88 !important;
    border-color: rgba(248,81,73,.4) !important;
}

.calendar-header-row[b-ctdfkqvmtx] {
    display: grid;
    grid-template-columns: repeat(7, minmax(var(--cell-min), 1fr));
    gap: 10px;
    margin: 0 10px 10px;
    text-align: center;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    width: max-content; /* allow horizontal overflow */
}

.calendar-header-cell[b-ctdfkqvmtx] { padding: 8px 0; border-bottom: 1px solid var(--border-color); }

.calendar-grid[b-ctdfkqvmtx] {
    display: grid;
    grid-template-columns: repeat(7, minmax(var(--cell-min), 1fr));
    gap: 10px;
    padding: 0 10px 20px;
    width: max-content; /* allow horizontal overflow */
}

.day-cell[b-ctdfkqvmtx] { min-height: 180px; background-color: var(--bg-card); border-radius: 8px; border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; overflow: hidden; }
.day-cell.weekend[b-ctdfkqvmtx] { background-color: var(--bg-surface) !important; }
.day-cell.today[b-ctdfkqvmtx] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset, 0 2px 10px rgba(37,99,235,.3); }
.day-cell.empty[b-ctdfkqvmtx] { background: transparent; border: none; box-shadow: none; }

.day-header[b-ctdfkqvmtx] { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; align-items: center; padding: 6px 8px; background: rgba(128,128,128,0.04); border-bottom: 1px solid var(--border-color); }
.add-btn[b-ctdfkqvmtx] { padding: 2px 8px; line-height: 1; border-radius: 4px; }
.day-number[b-ctdfkqvmtx] { font-weight: 700; color: var(--text-primary); }
.day-total[b-ctdfkqvmtx] { font-size: 0.9rem; color: var(--accent); font-weight: 600; text-align: right; }

.day-body[b-ctdfkqvmtx] { padding: 6px 6px 10px; overflow-y: auto; max-height: 300px; }

.transaction-item[b-ctdfkqvmtx] { background: rgba(128,128,128,0.04); border-radius: 6px; border: 1px solid var(--border-color); }

.transaction-chip[b-ctdfkqvmtx] { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--border-color); border-left-width: 4px; background: rgba(128,128,128,0.03); border-radius: 6px; cursor: pointer; color: var(--text-primary); transition: background .15s; }
.transaction-chip:hover[b-ctdfkqvmtx] { background: rgba(128,128,128,0.06); }
.transaction-chip .time[b-ctdfkqvmtx] { color: var(--text-secondary); font-variant-numeric: tabular-nums; font-size: .85rem; }
.transaction-chip .name[b-ctdfkqvmtx] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.transaction-chip .amount[b-ctdfkqvmtx] { font-weight: 600; font-variant-numeric: tabular-nums; }
.transaction-chip .amount.amount-positive[b-ctdfkqvmtx] { color: var(--success); }
.transaction-chip .amount.amount-negative[b-ctdfkqvmtx] { color: var(--danger); }

/* Virtual transaction chips */
.transaction-chip.virtual[b-ctdfkqvmtx] { opacity: .7; border-left-style: dashed; border-left-color: var(--teal); }

/* Drag and drop */
.transaction-chip[draggable="true"][b-ctdfkqvmtx] { cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; }
.transaction-chip[draggable="true"]:active[b-ctdfkqvmtx] { cursor: grabbing; }
.transaction-chip.dragging[b-ctdfkqvmtx] { opacity: .4; border-style: dashed; }
.day-cell.drag-over[b-ctdfkqvmtx] { outline: 2px dashed var(--accent); outline-offset: -2px; background-color: var(--accent-subtle) !important; }
.virtual-badge[b-ctdfkqvmtx] { font-size: .55rem; font-weight: 700; text-transform: uppercase; padding: 1px 5px; margin-left: 4px; border-radius: 3px; background: var(--teal-subtle); color: var(--teal); vertical-align: middle; letter-spacing: .04em; }

.budget-tag[b-ctdfkqvmtx] { font-size: .6rem; font-weight: 600; padding: 1px 5px; margin-left: 4px; border-radius: 3px; vertical-align: middle; }

.icon-btn.delete[b-ctdfkqvmtx] { background: transparent; border: 1px solid var(--danger-subtle); color: var(--danger); border-radius: 4px; width: 22px; height: 22px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; padding: 0; }

/* ── Modal ── */
.modal-backdrop[b-ctdfkqvmtx] { position: fixed; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal-card[b-ctdfkqvmtx] { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; width: 480px; max-width: 95vw; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg); animation: modalIn-b-ctdfkqvmtx .2s ease; }
@keyframes modalIn-b-ctdfkqvmtx { from { opacity: 0; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }

.modal-header[b-ctdfkqvmtx] { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border-color); }
.modal-header h3[b-ctdfkqvmtx] { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--text-primary); }
.modal-close[b-ctdfkqvmtx] { background: none; border: none; color: var(--text-secondary); font-size: 1.4rem; cursor: pointer; padding: 4px 8px; border-radius: 4px; transition: background .15s; }
.modal-close:hover[b-ctdfkqvmtx] { background: rgba(128,128,128,.15); color: var(--text-primary); }

.modal-body[b-ctdfkqvmtx] { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.form-group[b-ctdfkqvmtx] { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.form-group label[b-ctdfkqvmtx] { font-size: .75rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.form-group input[b-ctdfkqvmtx], .form-group select[b-ctdfkqvmtx] { background: var(--bg-surface); border: 1px solid var(--border-color); color: var(--text-primary); border-radius: 6px; padding: 8px 12px; font-size: .9rem; transition: border-color .15s; }
.form-group input:focus[b-ctdfkqvmtx], .form-group select:focus[b-ctdfkqvmtx] { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-subtle); }
.form-row[b-ctdfkqvmtx] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.modal-footer[b-ctdfkqvmtx] { display: flex; align-items: center; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border-color); }
.modal-spacer[b-ctdfkqvmtx] { flex: 1; }
.modal-footer .btn[b-ctdfkqvmtx] { padding: 8px 16px; border-radius: 6px; font-size: .85rem; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s, filter .15s; }
.modal-footer .btn-primary[b-ctdfkqvmtx] { background: var(--accent); border: 1px solid var(--accent); color: #fff; }
.modal-footer .btn-primary:hover[b-ctdfkqvmtx] { filter: brightness(1.15); }
.modal-footer .btn-outline-secondary[b-ctdfkqvmtx] { background: transparent; border: 1px solid var(--border-color); color: var(--text-primary); }
.modal-footer .btn-outline-secondary:hover[b-ctdfkqvmtx] { background: rgba(128,128,128,.1); }
.modal-footer .btn-outline-danger[b-ctdfkqvmtx] { background: transparent; border: 1px solid var(--danger); color: var(--danger); }
.modal-footer .btn-outline-danger:hover[b-ctdfkqvmtx] { background: var(--danger-subtle); }
.modal-card.confirm-card[b-ctdfkqvmtx] { width: 420px; max-width: 92vw; }

/* Desktop: restore full-width equal columns */
@media (min-width: 992px) {
    .calendar-header-row[b-ctdfkqvmtx], .calendar-grid[b-ctdfkqvmtx] { width: 100%; grid-template-columns: repeat(7, 1fr); }
    .calendar-scroll[b-ctdfkqvmtx] { overflow-x: visible; }
}

/* Small devices: bigger min cell width and tighter paddings/fonts */
@media (max-width: 576px) {
    .calendar-container[b-ctdfkqvmtx] { --cell-min: 220px; }
    .day-cell[b-ctdfkqvmtx] { min-height: 160px; }
    .day-header[b-ctdfkqvmtx] { padding: 6px; gap: 4px; }
    .day-total[b-ctdfkqvmtx] { font-size: 0.85rem; }
    .transaction-chip[b-ctdfkqvmtx] { gap: 6px; padding: 6px; }
    .transaction-chip .name[b-ctdfkqvmtx] { font-size: 0.95rem; }
    .transaction-chip .amount[b-ctdfkqvmtx] { font-size: 0.95rem; }
    .form-row[b-ctdfkqvmtx] { grid-template-columns: 1fr; }
    .date-switcher[b-ctdfkqvmtx] { flex-wrap: wrap; justify-content: center; }
}

/* ── Date switcher ── */
.date-switcher[b-ctdfkqvmtx] {
    display: inline-flex;
    align-items: center;
    gap: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 14px;
}

.switcher-btn[b-ctdfkqvmtx] {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1.15rem;
    font-weight: 700;
    padding: 6px 14px;
    cursor: pointer;
    transition: background .15s, color .15s;
    line-height: 1;
}

.switcher-btn:hover[b-ctdfkqvmtx] {
    background: var(--accent-subtle);
    color: var(--accent);
}

.switcher-btn.year-btn[b-ctdfkqvmtx] {
    font-size: .85rem;
    padding: 6px 10px;
    color: var(--text-muted);
}

.switcher-label[b-ctdfkqvmtx] {
    font-size: .95rem;
    font-weight: 700;
    color: var(--text-primary);
    padding: 6px 10px;
    min-width: 140px;
    text-align: center;
    user-select: none;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
}

.switcher-label.year-label[b-ctdfkqvmtx] {
    min-width: 60px;
    font-size: .85rem;
    color: var(--text-secondary);
}
/* /Components/Pages/CashHoldings.razor.rz.scp.css */
/* ── Theme variables ── */
.cash-holdings[b-npydi3b6ql] {
    --panel: var(--bg-card);
    --border: var(--border-color);
    --text: var(--text-primary);
    --muted: var(--text-secondary);
}

.cash-holdings .btn-primary[b-npydi3b6ql],
.cash-holdings .btn-primary:hover[b-npydi3b6ql],
.cash-holdings .btn-primary:focus[b-npydi3b6ql] {
    color: #ffffff !important;
}

/* ── Empty state ── */
.empty-state[b-npydi3b6ql] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 24px;
    color: var(--muted);
    text-align: center;
}

/* ── Grid ── */
.holdings-grid[b-npydi3b6ql] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 14px;
}

/* ── Currency card ── */
.currency-card[b-npydi3b6ql] {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 10px);
    overflow: hidden;
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, .35));
}

.currency-header[b-npydi3b6ql] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: rgba(128, 128, 128, .06);
    border-bottom: 1px solid var(--border);
}

.currency-code[b-npydi3b6ql] {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text);
    letter-spacing: .5px;
}

.currency-total[b-npydi3b6ql] {
    font-weight: 600;
    font-size: 1rem;
    color: #58a6ff;
}

.currency-items[b-npydi3b6ql] {
    padding: 4px 0;
}

/* ── Holding row ── */
.holding-row[b-npydi3b6ql] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background .15s;
    border-bottom: 1px solid rgba(128, 128, 128, .08);
}

.holding-row:last-child[b-npydi3b6ql] {
    border-bottom: none;
}

.holding-row:hover[b-npydi3b6ql] {
    background: rgba(88, 166, 255, .06);
}

.holding-info[b-npydi3b6ql] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.holding-name[b-npydi3b6ql] {
    font-weight: 600;
    font-size: .98rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.holding-desc[b-npydi3b6ql] {
    font-size: .86rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.holding-amount[b-npydi3b6ql] {
    font-weight: 700;
    font-size: .95rem;
    color: #3fb950;
    white-space: nowrap;
}

/* ── Modal (matching MonthlyMap style) ── */
.modal-backdrop[b-npydi3b6ql] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-card[b-npydi3b6ql] {
    background: var(--panel, #161b22);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 10px);
    width: 420px;
    max-width: 95vw;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .5);
}

.modal-header[b-npydi3b6ql] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}

    .modal-header h3[b-npydi3b6ql] {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 700;
    }

.modal-close[b-npydi3b6ql] {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 1.3rem;
    cursor: pointer;
    line-height: 1;
}

.modal-body[b-npydi3b6ql] {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.form-group[b-npydi3b6ql] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .form-group label[b-npydi3b6ql] {
        font-size: .86rem;
        font-weight: 600;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: .5px;
    }

    .form-group input[b-npydi3b6ql],
    .form-group select[b-npydi3b6ql] {
        padding: 8px 10px;
        border-radius: 6px;
        border: 1px solid var(--border);
        background: rgba(255, 255, 255, .04);
        color: var(--text);
        font-size: .95rem;
    }

.form-row[b-npydi3b6ql] {
    display: flex;
    gap: 12px;
}

    .form-row .form-group[b-npydi3b6ql] {
        flex: 1;
    }

.modal-footer[b-npydi3b6ql] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--border);
}

.modal-spacer[b-npydi3b6ql] {
    flex: 1;
}

.confirm-card[b-npydi3b6ql] {
    width: 380px;
}
/* /Components/Pages/MonthlyMap.razor.rz.scp.css */
/* ── Theme variables (scoped to component root) ── */
.monthly-map[b-15yg0jr2eq] {
    --panel: var(--bg-card);
    --border: var(--border-color);
    --text: var(--text-primary);
    --muted: var(--text-secondary);
    --income: #58a6ff;
    --outcome: #bc8cff;
    --savings: #3fb950;
    --backup: #f85149;
    --invest: #39d2c0;
    --remainder: #8b949e;
}

/* ── Collapse toggle button ── */
.collapse-toggle-btn[b-15yg0jr2eq] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--muted);
    font-size: .85rem;
    padding: 4px 10px;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    white-space: nowrap;
}

.collapse-toggle-btn:hover[b-15yg0jr2eq] {
    background: rgba(88, 166, 255, .08);
    color: var(--accent);
    border-color: var(--accent);
}

.collapse-toggle-btn .bi[b-15yg0jr2eq] {
    font-size: 1rem;
}

.collapse-toggle-label[b-15yg0jr2eq] {
    font-weight: 600;
}

/* ÔöÇÔöÇ Date switcher ÔöÇÔöÇ */
.date-switcher[b-15yg0jr2eq] {
    display: inline-flex;
    align-items: center;
    gap: 0;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 14px;
}

.switcher-btn[b-15yg0jr2eq] {
    background: transparent;
    border: none;
    color: var(--muted);
    font-size: 1.15rem;
    font-weight: 700;
    padding: 6px 14px;
    cursor: pointer;
    transition: background .15s, color .15s;
    line-height: 1;
}

.switcher-btn:hover[b-15yg0jr2eq] {
    background: rgba(88, 166, 255, .12);
    color: var(--income);
}

.switcher-label[b-15yg0jr2eq] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    padding: 6px 10px;
    min-width: 80px;
    text-align: center;
    user-select: none;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
}

/* ÔöÇÔöÇ Grid layout ÔöÇÔöÇ */
.map-container[b-15yg0jr2eq] {
    color: var(--text);
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 0.45fr) minmax(0, 0.95fr) minmax(0, 1.25fr);
    gap: 14px;
    padding: 0 12px;
}

/* ÔöÇÔöÇ Panels ÔöÇÔöÇ */
.panel[b-15yg0jr2eq] {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 10px);
    overflow: hidden;
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, .35));
}

.panel > header[b-15yg0jr2eq] {
    background: rgba(128, 128, 128, .06);
    border-bottom: 1px solid var(--border);
    padding: 11px 16px;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: .02em;
    color: var(--text);
}

.panel .sum[b-15yg0jr2eq] {
    color: var(--text);
    padding: 9px 16px;
    border-bottom: 1px dashed var(--border);
    font-size: .92rem;
    font-weight: 600;
}

/* Panel header accents */
.planned header[b-15yg0jr2eq]   { border-left: 3px solid var(--income); }
.purchased header[b-15yg0jr2eq] { border-left: 4px solid var(--outcome); font-size: 1.1rem; background: rgba(188,140,255,.06); }
.mid header[b-15yg0jr2eq]        { border-left: 3px solid var(--invest); }
.summary header[b-15yg0jr2eq]    { border-left: 3px solid var(--savings); }

/* ÔöÇÔöÇ Scrollable month list ÔöÇÔöÇ */
.month-list[b-15yg0jr2eq] {
    max-height: 100vh;
    overflow-y: auto;
}

/* ÔöÇÔöÇ Month blocks ÔöÇÔöÇ */
.month-block[b-15yg0jr2eq] {
    padding: 12px 14px;
    border-bottom: 1px dashed var(--border);
}

.month-title[b-15yg0jr2eq] {
    font-weight: 700;
    font-size: .95rem;
    color: var(--text);
    letter-spacing: .01em;
}

.month-sum[b-15yg0jr2eq] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 5px 0 8px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: .95rem;
    font-weight: 700;
    color: var(--text);
    background: rgba(128,128,128,.09);
    border: 1px solid var(--border);
}

/* Month sum colour by panel */
.planned .month-sum[b-15yg0jr2eq]    { background: rgba(88,166,255,.10); border-color: rgba(88,166,255,.25); color: var(--income); }
.purchased .month-sum[b-15yg0jr2eq]  { background: rgba(188,140,255,.10); border-color: rgba(188,140,255,.25); color: var(--outcome); }
.purchased .past-month .month-sum[b-15yg0jr2eq] { background: rgba(139,148,158,.10); border-color: rgba(139,148,158,.22); color: var(--text); }
.purchased .current-month .month-sum[b-15yg0jr2eq] { background: rgba(63,185,80,.12); border-color: rgba(63,185,80,.35); color: var(--savings); font-size: 1.05rem; }

.block-actions[b-15yg0jr2eq] {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
}

/* ÔöÇÔöÇ Transaction rows ÔöÇÔöÇ */
.row-item[b-15yg0jr2eq] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 4px;
    padding: 4px 6px;
    margin: 2px 0;
    border: 1px solid var(--border);
    border-left-width: 3px;
    border-left-color: var(--income);
    border-radius: var(--radius-sm, 6px);
    background: rgba(128, 128, 128, .04);
    cursor: pointer;
    transition: background .15s ease;
}

.row-item .name[b-15yg0jr2eq] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    font-size: 1rem;
    color: var(--text);
}

.bg-amounts[b-15yg0jr2eq] {
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-left: auto;
    color: var(--text);
    white-space: nowrap;
}

.bg-amounts.overspent[b-15yg0jr2eq] {
    color: #f85149;
}

.row-item:hover[b-15yg0jr2eq] {
    background: rgba(128, 128, 128, .08);
}

.row-item .amount[b-15yg0jr2eq] {
    font-weight: 700;
    font-size: 1rem;
}

.row-item .amount.amount-positive[b-15yg0jr2eq] {
    color: var(--savings);
}

.row-item .amount.amount-negative[b-15yg0jr2eq] {
    color: var(--backup);
}

.row-item .amount.has-foreign[b-15yg0jr2eq] {
    cursor: help;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

.cur-tag[b-15yg0jr2eq] {
    font-size: .73rem;
    font-weight: 700;
    padding: 1px 4px;
    margin-left: 2px;
    border-radius: 3px;
    background: rgba(188,140,255,.15);
    color: var(--outcome);
    vertical-align: middle;
}

.rec-icon[b-15yg0jr2eq] {
    font-size: .78rem;
    color: var(--invest);
    margin-left: 4px;
    vertical-align: middle;
}

.empty-info[b-15yg0jr2eq] {
    text-align: center;
    color: var(--muted);
    padding: 1rem;
}

/* ÔöÇÔöÇ Virtual transaction row ÔöÇÔöÇ */
.row-item.virtual[b-15yg0jr2eq] {
    opacity: .7;
    border-left-color: var(--invest);
    border-left-style: dashed;
}

/* ÔöÇÔöÇ Drag and drop ÔöÇÔöÇ */
.row-item[draggable="true"][b-15yg0jr2eq] {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

.row-item[draggable="true"]:active[b-15yg0jr2eq] {
    cursor: grabbing;
}

.row-item.dragging[b-15yg0jr2eq] {
    opacity: .4;
    border-style: dashed;
}

.month-block.drag-over[b-15yg0jr2eq] {
    background: rgba(88, 166, 255, .08);
    outline: 2px dashed var(--income);
    outline-offset: -2px;
    border-radius: var(--radius-sm, 6px);
}

.budget-group.drag-over[b-15yg0jr2eq] {
    background: rgba(88, 166, 255, .10);
    outline: 2px dashed var(--income);
    outline-offset: -2px;
    border-radius: var(--radius-sm, 6px);
}

.virtual-badge[b-15yg0jr2eq] {
    font-size: .63rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 1px 5px;
    margin-left: 4px;
    border-radius: 3px;
    background: rgba(57, 210, 192, .15);
    color: var(--invest);
    vertical-align: middle;
    letter-spacing: .04em;
}

.budget-tag[b-15yg0jr2eq] {
    font-size: .68rem;
    font-weight: 600;
    padding: 1px 5px;
    margin-left: 4px;
    border-radius: 3px;
    vertical-align: middle;
}

/* ÔöÇÔöÇ Budget overview in mid panel ÔöÇÔöÇ */
.budget-overview-header[b-15yg0jr2eq] {
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    padding: 8px 0 4px;
    border-top: 1px solid var(--border);
    margin-top: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}

.budget-overview-header:hover[b-15yg0jr2eq] {
    color: var(--text);
}

.budget-overview-header .bg-toggle[b-15yg0jr2eq] {
    font-size: .78rem;
}

/* ── Budget groups in month blocks ── */
.budget-group[b-15yg0jr2eq] {
    padding: 0;
    margin: 3px 0;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 8px;
    background: var(--bg-surface, rgba(128,128,128,.03));
    position: relative;
    transition: transform .12s ease;
}

.budget-group:hover[b-15yg0jr2eq] {
    transform: translateY(-1px);
}

.budget-group.budget-exhausted[b-15yg0jr2eq] {
    border-color: rgba(248, 81, 73, .5);
    box-shadow: 0 0 0 1px rgba(248,81,73,.2);
}

/* exhausted-overlay is global (app.css) */

.budget-group.no-budget-group[b-15yg0jr2eq] {
    border-left: 3px solid var(--muted);
}

.budget-group-header[b-15yg0jr2eq] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    user-select: none;
    padding: 7px 8px;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
    background: linear-gradient(
        to right,
        color-mix(in srgb, var(--card-accent, transparent) 22%, transparent) var(--fill-pct, 0%),
        transparent var(--fill-pct, 0%)
    );
    transition: background .5s cubic-bezier(.4,0,.2,1);
}

.budget-group-header:hover[b-15yg0jr2eq] {
    background: linear-gradient(
        to right,
        color-mix(in srgb, var(--card-accent, transparent) 30%, transparent) var(--fill-pct, 0%),
        rgba(255,255,255,.03) var(--fill-pct, 0%)
    );
}


.bg-toggle[b-15yg0jr2eq] {
    font-size: .8rem;
    color: var(--muted);
    width: 10px;
    text-align: center;
    flex-shrink: 0;
}

.bg-icon-wrap[b-15yg0jr2eq] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    font-size: .9rem;
    flex-shrink: 0;
}

.bg-main[b-15yg0jr2eq] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.bg-name-row[b-15yg0jr2eq] {
    display: flex;
    align-items: center;
    gap: 5px;
}

.bg-name[b-15yg0jr2eq] {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bg-amounts-row[b-15yg0jr2eq] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.bg-spent[b-15yg0jr2eq] {
    font-size: .85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
}

.bg-spent.overspent[b-15yg0jr2eq] { color: #f85149; }

.bg-sep[b-15yg0jr2eq] {
    font-size: .78rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.bg-right[b-15yg0jr2eq] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.bg-pct-badge[b-15yg0jr2eq] {
    font-size: .72rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 20px;
    border: 1px solid transparent;
    white-space: nowrap;
    backdrop-filter: blur(4px);
}

.bg-pct-over[b-15yg0jr2eq] {
    background: rgba(248,81,73,.2) !important;
    color: #f88 !important;
    border-color: rgba(248,81,73,.4) !important;
}

.override-icon[b-15yg0jr2eq] {
    font-size: .85rem;
    flex-shrink: 0;
    line-height: 1;
}

.override-icon.icon-up[b-15yg0jr2eq] {
    color: #3fb950;
}

.override-icon.icon-down[b-15yg0jr2eq] {
    color: #f85149;
}

.budget-sub-items[b-15yg0jr2eq] {
    padding: 0 4px 4px 10px;
    position: relative;
    z-index: 1;
}

.row-item.sub-item[b-15yg0jr2eq] {
    font-size: .88rem;
}

.empty-sub[b-15yg0jr2eq] {
    text-align: center;
    color: var(--muted);
    font-size: .82rem;
    padding: 4px 0;
    font-style: italic;
}

.budget-group.past-month[b-15yg0jr2eq] {
    opacity: .7;
}

.btn-add-budget[b-15yg0jr2eq] {
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 4px;
    font-size: .85rem;
    font-weight: 700;
    line-height: 1;
    padding: 1px 6px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s;
}

.btn-add-budget:hover[b-15yg0jr2eq] {
    background: rgba(128,128,128,.12);
}

.btn-override-budget[b-15yg0jr2eq] {
    background: transparent;
    border: none;
    border-radius: 4px;
    font-size: .78rem;
    line-height: 1;
    padding: 1px 4px;
    cursor: pointer;
    flex-shrink: 0;
    color: var(--text-muted, #888);
    transition: color .15s;
}

.btn-override-budget:hover[b-15yg0jr2eq] {
    color: var(--accent);
}

/* ── Middle KPI panel ── */
.mid[b-15yg0jr2eq] {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kpi[b-15yg0jr2eq] {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 8px);
    padding: 12px;
    text-align: center;
    transition: transform .15s ease;
}

.kpi:hover[b-15yg0jr2eq] {
    transform: translateY(-1px);
}

.kpi .kpi-icon[b-15yg0jr2eq] {
    font-size: 1.4rem;
    display: block;
    margin-bottom: 4px;
}

.kpi .kpi-title[b-15yg0jr2eq] {
    color: var(--muted);
    font-size: .87rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.kpi .kpi-value[b-15yg0jr2eq] {
    font-size: 1.25rem;
    font-weight: 700;
    margin-top: 2px;
}

.kpi.primary[b-15yg0jr2eq] { background: var(--accent-subtle, rgba(88,166,255,.1)); }
.kpi.primary .kpi-icon[b-15yg0jr2eq]  { color: var(--accent, #58a6ff); }
.kpi.primary .kpi-value[b-15yg0jr2eq] { color: var(--accent, #58a6ff); }

.kpi.danger[b-15yg0jr2eq]  { background: var(--danger-subtle, rgba(248,81,73,.1)); }
.kpi.danger .kpi-icon[b-15yg0jr2eq]  { color: var(--danger, #f85149); }
.kpi.danger .kpi-value[b-15yg0jr2eq] { color: var(--danger, #f85149); }

.kpi.success[b-15yg0jr2eq] { background: var(--success-subtle, rgba(63,185,80,.1)); }
.kpi.success .kpi-icon[b-15yg0jr2eq]  { color: var(--success, #3fb950); }
.kpi.success .kpi-value[b-15yg0jr2eq] { color: var(--success, #3fb950); }

.kpi.accent[b-15yg0jr2eq]  { background: var(--pink-subtle, rgba(247,120,186,.1)); }
.kpi.accent .kpi-icon[b-15yg0jr2eq]  { color: var(--pink, #f778ba); }
.kpi.accent .kpi-value[b-15yg0jr2eq] { color: var(--pink, #f778ba); }

.kpi.neutral[b-15yg0jr2eq] { background: var(--teal-subtle, rgba(57,210,192,.1)); }
.kpi.neutral .kpi-icon[b-15yg0jr2eq]  { color: var(--teal, #39d2c0); }
.kpi.neutral .kpi-value[b-15yg0jr2eq] { color: var(--teal, #39d2c0); }

/* ÔöÇÔöÇ Days counter ÔöÇÔöÇ */
.days-counter[b-15yg0jr2eq] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--radius-sm, 8px);
    background: rgba(139, 148, 158, .08);
    border: 1px solid var(--border);
    font-size: .82rem;
    font-weight: 600;
    color: var(--muted);
}

.days-counter .bi[b-15yg0jr2eq] {
    font-size: 1rem;
    color: var(--income);
}

/* ÔöÇÔöÇ Savings goals mini overview ÔöÇÔöÇ */
.goals-mini[b-15yg0jr2eq] {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 8px);
    overflow: hidden;
}

.goals-mini-header[b-15yg0jr2eq] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    background: rgba(63, 185, 80, .06);
    border-bottom: 1px solid var(--border);
}

.goals-mini-header .bi-piggy-bank[b-15yg0jr2eq] {
    color: var(--savings);
    font-size: .95rem;
}

.goals-mini-total[b-15yg0jr2eq] {
    margin-left: auto;
    color: var(--savings);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.goal-mini-item[b-15yg0jr2eq] {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
}

.goal-mini-item:last-child[b-15yg0jr2eq] {
    border-bottom: none;
}

.goal-mini-top[b-15yg0jr2eq] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.goal-mini-icon[b-15yg0jr2eq] {
    font-size: .85rem;
    color: var(--gc);
    flex-shrink: 0;
}

.goal-mini-name[b-15yg0jr2eq] {
    font-size: .85rem;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.goal-mini-amounts[b-15yg0jr2eq] {
    margin-left: auto;
    font-size: .75rem;
    color: var(--muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.goal-mini-bar-track[b-15yg0jr2eq] {
    height: 4px;
    background: rgba(128, 128, 128, .15);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 4px;
}

.goal-mini-bar-fill[b-15yg0jr2eq] {
    height: 100%;
    border-radius: 2px;
    transition: width .4s ease;
}

.goal-mini-bar-fill.bar-done[b-15yg0jr2eq] {
    background: var(--savings) !important;
}

.goal-mini-bottom[b-15yg0jr2eq] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .72rem;
}

.goal-mini-badge.done[b-15yg0jr2eq] {
    color: var(--savings);
    font-weight: 700;
}

.goal-mini-proj[b-15yg0jr2eq] {
    color: var(--muted);
    font-weight: 600;
}

.goal-mini-days[b-15yg0jr2eq] {
    margin-left: auto;
    color: var(--muted);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.goal-mini-days.urgent[b-15yg0jr2eq] {
    color: #d29922;
}

.goal-mini-days.overdue[b-15yg0jr2eq] {
    color: var(--backup);
}

.goal-mini-days.done[b-15yg0jr2eq] {
    color: #3fb950;
}

/* ÔöÇÔöÇ Account balance card ÔöÇÔöÇ */
.account-balance-card[b-15yg0jr2eq] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: var(--radius-sm, 8px);
    border: 2px solid;
    transition: transform .15s ease;
}

.account-balance-card:hover[b-15yg0jr2eq] {
    transform: translateY(-1px);
}

.account-balance-card.ab-positive[b-15yg0jr2eq] {
    background: var(--success-subtle, rgba(63,185,80,.08));
    border-color: var(--success, #3fb950);
}

.account-balance-card.ab-negative[b-15yg0jr2eq] {
    background: var(--danger-subtle, rgba(248,81,73,.08));
    border-color: var(--danger, #f85149);
}

.ab-icon[b-15yg0jr2eq] {
    font-size: 1.8rem;
    line-height: 1;
    flex-shrink: 0;
}

.ab-positive .ab-icon[b-15yg0jr2eq] { color: var(--success, #3fb950); }
.ab-negative .ab-icon[b-15yg0jr2eq] { color: var(--danger, #f85149); }

.ab-label[b-15yg0jr2eq] {
    font-size: .82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
}

.ab-value[b-15yg0jr2eq] {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.2;
}

.ab-positive .ab-value[b-15yg0jr2eq] { color: var(--success, #3fb950); }
.ab-negative .ab-value[b-15yg0jr2eq] { color: var(--danger, #f85149); }

.ab-detail[b-15yg0jr2eq] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: 4px;
    font-size: .78rem;
    color: var(--muted);
}

/* ÔöÇÔöÇ Summary panel ÔöÇÔöÇ */
.summary[b-15yg0jr2eq] {
    padding: 0;
}

.summary-scroll[b-15yg0jr2eq] {
    overflow-x: auto;
    padding: 6px;
}

.summary-table[b-15yg0jr2eq] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 4px;
    font-variant-numeric: tabular-nums;
}

.summary-table th[b-15yg0jr2eq] {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 6px 8px;
    text-align: right;
    color: var(--text);
    white-space: nowrap;
    opacity: .75;
}

.summary-table th:first-child[b-15yg0jr2eq] {
    text-align: left;
}

.th-income[b-15yg0jr2eq]    { color: var(--income) !important; }
.th-remainder[b-15yg0jr2eq] { color: var(--remainder) !important; }
.th-outcome[b-15yg0jr2eq]   { color: var(--outcome) !important; }
.th-savings[b-15yg0jr2eq]   { color: var(--savings) !important; }
.th-backup[b-15yg0jr2eq]    { color: var(--backup) !important; }
.th-invest[b-15yg0jr2eq]    { color: var(--invest) !important; }

.summary-table .mname[b-15yg0jr2eq] {
    text-align: left;
    color: var(--text);
    font-weight: 700;
    font-size: .92rem;
    padding: 6px 8px;
    white-space: nowrap;
}

.summary-table .cell[b-15yg0jr2eq] {
    text-align: right;
    padding: 6px 10px;
    border-radius: var(--radius-sm, 6px);
    font-size: .88rem;
    white-space: nowrap;
    min-width: 0;
    transition: background .15s ease;
    font-weight: 600;
}

.summary-table .cell:hover[b-15yg0jr2eq] {
    filter: brightness(1.3);
}

.summary-table .cell.income[b-15yg0jr2eq]    { background: rgba(88, 166, 255, .1); color: var(--income); }
.summary-table .cell.remainder[b-15yg0jr2eq] { background: rgba(139, 148, 158, .08); color: var(--remainder); }
.summary-table .cell.outcome[b-15yg0jr2eq]   { background: rgba(188, 140, 255, .1); color: var(--outcome); }
.summary-table .cell.savings[b-15yg0jr2eq]   { background: rgba(63, 185, 80, .1); color: var(--savings); }
.summary-table .cell.backup[b-15yg0jr2eq]    { background: rgba(248, 81, 73, .1); color: var(--backup); }
.summary-table .cell.invest[b-15yg0jr2eq]    { background: rgba(57, 210, 192, .1); color: var(--invest); }

.summary-table .cell.rem-positive[b-15yg0jr2eq] { color: var(--savings); }
.summary-table .cell.rem-negative[b-15yg0jr2eq] { color: var(--backup); }

.th-balance[b-15yg0jr2eq] { color: var(--income) !important; }
.th-balance-highlight[b-15yg0jr2eq] { font-size: 0.85rem; font-weight: 800; letter-spacing: .03em; border-bottom: 2px solid var(--savings); }
.summary-table .cell.balance[b-15yg0jr2eq] { background: rgba(88, 166, 255, .06); color: var(--income); font-weight: 700; }
.summary-table .cell.balance.bal-positive[b-15yg0jr2eq] { color: var(--savings); }
.summary-table .cell.balance.bal-negative[b-15yg0jr2eq] { color: var(--backup); }
.summary-table .cell.balance-highlight[b-15yg0jr2eq] { font-size: 1rem; font-weight: 800; border-left: 2px solid rgba(63, 185, 80, .35); border-right: 2px solid rgba(63, 185, 80, .35); background: rgba(63, 185, 80, .07); }
.summary-table .cell.balance-highlight.bal-negative[b-15yg0jr2eq] { border-left-color: rgba(248, 81, 73, .35); border-right-color: rgba(248, 81, 73, .35); background: rgba(248, 81, 73, .07); }

/* ÔöÇÔöÇ Chart ÔöÇÔöÇ */
.chart-wrap[b-15yg0jr2eq] {
    margin: 18px 12px 8px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 10px);
    padding: 18px;
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, .35));
}

.chart-header[b-15yg0jr2eq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.chart-header h3[b-15yg0jr2eq] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
}

.chart-legend[b-15yg0jr2eq] {
    display: flex;
    gap: 14px;
    font-size: .8rem;
    color: var(--muted);
    flex-wrap: wrap;
}

.legend-item[b-15yg0jr2eq] {
    display: flex;
    align-items: center;
    gap: 5px;
}

.legend-dot[b-15yg0jr2eq] {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
}

.legend-dot.income[b-15yg0jr2eq]  { background: var(--income); }
.legend-dot.outcome[b-15yg0jr2eq] { background: var(--outcome); }
.legend-dot.savings[b-15yg0jr2eq] { background: var(--savings); }
.legend-dot.backup[b-15yg0jr2eq]  { background: var(--backup); }
.legend-dot.invest[b-15yg0jr2eq]  { background: var(--invest); }

.chart-body[b-15yg0jr2eq] {
    padding-top: 24px;
    width: 100%;
}

.chart-cols-row[b-15yg0jr2eq] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 8px;
    width: 100%;
}

.chart-col[b-15yg0jr2eq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    position: relative;
}

.chart-svg-wrap[b-15yg0jr2eq] {
    position: relative;
    width: 100%;
}

.chart-canvas[b-15yg0jr2eq] {
    position: relative;
    width: 100%;
    height: 160px;
}

.chart-canvas .chart-cols-row[b-15yg0jr2eq] {
    position: absolute;
    inset: 0;
    align-items: flex-end;
}

.chart-outcome-svg[b-15yg0jr2eq] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 4;
    overflow: visible;
}

.chart-labels-row[b-15yg0jr2eq] {
    margin-top: 6px;
}



.outcome-marker[b-15yg0jr2eq] {
    position: absolute;
    bottom: calc(var(--outcome-y, 0) * 1px + 32px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    z-index: 3;
}

.outcome-dot[b-15yg0jr2eq] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--outcome);
    flex-shrink: 0;
}

.outcome-marker-val[b-15yg0jr2eq] {
    font-size: .55rem;
    font-weight: 700;
    color: var(--outcome);
    white-space: nowrap;
    line-height: 1;
}

.chart-bars[b-15yg0jr2eq] {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 160px;
    flex-shrink: 0;
}

.chart-bar-wrap[b-15yg0jr2eq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    min-width: 0;
}

.chart-bar[b-15yg0jr2eq] {
    width: 14px;
    border-radius: 3px 3px 0 0;
    min-height: 2px;
    transition: height .4s ease, opacity .15s;
    opacity: .85;
    flex-shrink: 0;
}

.chart-bar:hover[b-15yg0jr2eq] {
    opacity: 1;
    filter: brightness(1.15);
}

.chart-bar.income[b-15yg0jr2eq]  { background: var(--income); }
.chart-bar.outcome[b-15yg0jr2eq] { background: var(--outcome); }
.chart-bar.savings[b-15yg0jr2eq] { background: var(--savings); }
.chart-bar.backup[b-15yg0jr2eq]  { background: var(--backup); }
.chart-bar.invest[b-15yg0jr2eq]  { background: var(--invest); }

.bar-val[b-15yg0jr2eq] {
    font-size: .55rem;
    white-space: nowrap;
    font-weight: 600;
    pointer-events: none;
    line-height: 1;
}

.val-income[b-15yg0jr2eq]  { color: var(--income); }
.val-outcome[b-15yg0jr2eq] { color: var(--outcome); }
.val-savings[b-15yg0jr2eq] { color: var(--savings); }
.val-backup[b-15yg0jr2eq]  { color: var(--backup); }
.val-invest[b-15yg0jr2eq]  { color: var(--invest); }

.chart-month[b-15yg0jr2eq] {
    font-size: .7rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    margin-top: 4px;
}

.chart-rem[b-15yg0jr2eq] {
    font-size: .65rem;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 4px;
}

.chart-rem.positive[b-15yg0jr2eq] {
    color: var(--savings);
    background: rgba(63, 185, 80, .1);
}

.chart-rem.negative[b-15yg0jr2eq] {
    color: var(--backup);
    background: rgba(248, 81, 73, .1);
}

/* ÔöÇÔöÇ Modal ÔöÇÔöÇ */
.modal-backdrop[b-15yg0jr2eq] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-card[b-15yg0jr2eq] {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 12px);
    width: 480px;
    max-width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .5);
    animation: modalIn-b-15yg0jr2eq .2s ease;
}

@keyframes modalIn-b-15yg0jr2eq {
    from { opacity: 0; transform: scale(.96) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-header[b-15yg0jr2eq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.modal-header h3[b-15yg0jr2eq] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
}

.modal-close[b-15yg0jr2eq] {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 1.4rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background .15s;
}

.modal-close:hover[b-15yg0jr2eq] {
    background: rgba(128, 128, 128, .15);
    color: var(--text);
}

.modal-body[b-15yg0jr2eq] {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ÔöÇÔöÇ Savings goal deadline rows ÔöÇÔöÇ */
.goal-deadline-row[b-15yg0jr2eq] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    margin: 2px 0;
    border-radius: 6px;
    background: rgba(248, 81, 73, 0.08);
    border-left: 3px solid #f85149;
    font-size: 0.82rem;
}

.goal-deadline-icon[b-15yg0jr2eq] {
    font-size: 0.95rem;
    flex-shrink: 0;
}

.goal-deadline-name[b-15yg0jr2eq] {
    flex: 1;
    font-weight: 500;
    color: var(--text);
}

.goal-deadline-date[b-15yg0jr2eq] {
    font-size: 0.75rem;
    color: var(--muted);
    flex-shrink: 0;
}

.goal-deadline-amount[b-15yg0jr2eq] {
    font-weight: 700;
    color: #f85149;
    flex-shrink: 0;
    white-space: nowrap;
}

.form-group[b-15yg0jr2eq] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.form-group label[b-15yg0jr2eq] {
    font-size: .75rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.form-group input[b-15yg0jr2eq],
.form-group select[b-15yg0jr2eq] {
    background: var(--bg-surface, #161b22);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: .9rem;
    transition: border-color .15s;
}

.form-group input:focus[b-15yg0jr2eq],
.form-group select:focus[b-15yg0jr2eq] {
    outline: none;
    border-color: var(--accent, #58a6ff);
    box-shadow: 0 0 0 2px rgba(88, 166, 255, .15);
}

.form-row[b-15yg0jr2eq] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.modal-footer[b-15yg0jr2eq] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--border);
}

.modal-spacer[b-15yg0jr2eq] {
    flex: 1;
}

.modal-footer .btn[b-15yg0jr2eq] {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s, filter .15s;
}

.modal-footer .btn-primary[b-15yg0jr2eq] {
    background: var(--accent, #58a6ff);
    border: 1px solid var(--accent, #58a6ff);
    color: #fff;
}

.modal-footer .btn-primary:hover[b-15yg0jr2eq] {
    filter: brightness(1.15);
}

.modal-footer .btn-outline-secondary[b-15yg0jr2eq] {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
}

.modal-footer .btn-outline-secondary:hover[b-15yg0jr2eq] {
    background: rgba(128, 128, 128, .1);
}

.modal-footer .btn-outline-danger[b-15yg0jr2eq] {
    background: transparent;
    border: 1px solid var(--backup);
    color: var(--backup);
}

.modal-footer .btn-outline-danger:hover[b-15yg0jr2eq] {
    background: rgba(248, 81, 73, .1);
}

.modal-card.confirm-card[b-15yg0jr2eq] {
    width: 420px;
    max-width: 92vw;
}

/* ÔöÇÔöÇ Responsive ÔöÇÔöÇ */
@media (min-width: 1921px) {
    .map-container[b-15yg0jr2eq] {
        grid-template-columns: minmax(0, 0.7fr) minmax(0, 0.45fr) minmax(0, 0.7fr) minmax(0, 2fr);
    }
}

@media (max-width: 1600px) {
    .map-container[b-15yg0jr2eq] {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 0.5fr) minmax(0, 0.85fr) minmax(0, 1.4fr);
    }
}

@media (max-width: 1200px) {
    .map-container[b-15yg0jr2eq] {
        grid-template-columns: 1fr;
    }

    .month-list[b-15yg0jr2eq] {
        max-height: none;
    }

    .mid[b-15yg0jr2eq]       { order: 2; }
    .summary[b-15yg0jr2eq]   { order: 3; }
    .purchased[b-15yg0jr2eq] { order: 4; }

    .chart-cols-row[b-15yg0jr2eq] {
        grid-template-columns: repeat(6, 1fr);
        gap: 12px;
    }
}

@media (max-width: 768px) {
    .chart-cols-row[b-15yg0jr2eq] {
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
    }

    .chart-bars[b-15yg0jr2eq] {
        height: 120px;
    }

    .chart-bar[b-15yg0jr2eq] {
        width: 10px;
    }

    .form-row[b-15yg0jr2eq] {
        grid-template-columns: 1fr;
    }

    .bar-val[b-15yg0jr2eq] {
        font-size: .55rem;
    }
}

@media (max-width: 480px) {
    .chart-cols-row[b-15yg0jr2eq] {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ÔöÇÔöÇ Past-month blocks (read-only) ÔöÇÔöÇ */
.past-month[b-15yg0jr2eq] {
    opacity: .7;
}

.past-month .month-title[b-15yg0jr2eq] {
    color: var(--muted);
}

.row-item.readonly[b-15yg0jr2eq] {
    cursor: default;
    opacity: .85;
}

/* ÔöÇÔöÇ Current-month block highlight ÔöÇÔöÇ */
.current-month[b-15yg0jr2eq] {
    border-left: 3px solid var(--accent, #58a6ff);
    border-radius: 6px;
    background: rgba(88, 166, 255, .05);
}

.current-month .month-title[b-15yg0jr2eq] {
    color: var(--accent, #58a6ff);
    font-weight: 700;
}

.current-month .month-title[b-15yg0jr2eq]::after {
    content: " ÔŚĆ";
    font-size: .55rem;
    vertical-align: middle;
    opacity: .8;
}
/* /Components/Pages/SavingsGoals.razor.rz.scp.css */
/* ── Theme variables ── */
.savings-goals[b-2h2i0tapzx] {
    --panel: var(--bg-card);
    --border: var(--border-color);
    --text: var(--text-primary);
    --muted: var(--text-secondary);
}

.savings-goals .btn-primary[b-2h2i0tapzx],
.savings-goals .btn-primary:hover[b-2h2i0tapzx],
.savings-goals .btn-primary:focus[b-2h2i0tapzx] {
    color: #ffffff !important;
}

/* ── KPI row ── */
.savings-kpi[b-2h2i0tapzx] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.kpi-card[b-2h2i0tapzx] {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 10px);
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 160px;
    flex: 1;
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,.35));
}

.kpi-label[b-2h2i0tapzx] {
    font-size: .78rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.kpi-value[b-2h2i0tapzx] {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text);
}

.kpi-value.accent[b-2h2i0tapzx] {
    color: #3fb950;
}

.kpi-value.warning[b-2h2i0tapzx] {
    color: #d29922;
}

/* ── Empty state ── */
.empty-state[b-2h2i0tapzx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 24px;
    color: var(--muted);
    text-align: center;
}

/* ── Goals list ── */
.goals-list[b-2h2i0tapzx] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── Goal card ── */
.goal-card[b-2h2i0tapzx] {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 10px);
    overflow: hidden;
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,.35));
    transition: transform .15s, box-shadow .15s, border-color .15s;
}

.goal-card.drag-over[b-2h2i0tapzx] {
    border-color: var(--goal-color, #58a6ff);
    box-shadow: 0 0 0 2px var(--goal-color, #58a6ff);
}

.goal-card.dragging[b-2h2i0tapzx] {
    opacity: .5;
    transform: scale(.97);
}

.goal-accent[b-2h2i0tapzx] {
    height: 3px;
}

.goal-body[b-2h2i0tapzx] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    cursor: pointer;
    transition: background .15s;
}

.goal-body:hover[b-2h2i0tapzx] {
    background: rgba(88, 166, 255, .04);
}

/* ── Priority ── */
.goal-priority[b-2h2i0tapzx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 30px;
}

.prio-btn[b-2h2i0tapzx] {
    background: none;
    border: none;
    color: var(--muted);
    font-size: .7rem;
    cursor: pointer;
    padding: 1px 4px;
    line-height: 1;
    border-radius: 4px;
    transition: color .15s, background .15s;
}

.prio-btn:hover:not(:disabled)[b-2h2i0tapzx] {
    color: var(--text);
    background: rgba(128,128,128,.15);
}

.prio-btn:disabled[b-2h2i0tapzx] {
    opacity: .25;
    cursor: default;
}

.prio-number[b-2h2i0tapzx] {
    font-weight: 700;
    font-size: 1rem;
    color: var(--muted);
    line-height: 1;
}

/* ── Icon ── */
.goal-icon-wrap[b-2h2i0tapzx] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

/* ── Info ── */
.goal-info[b-2h2i0tapzx] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.goal-name[b-2h2i0tapzx] {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.goal-desc[b-2h2i0tapzx] {
    font-size: .84rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.goal-amounts[b-2h2i0tapzx] {
    font-size: .88rem;
    display: flex;
    align-items: center;
    gap: 4px;
}

.goal-amounts .saved[b-2h2i0tapzx] {
    font-weight: 700;
    color: #3fb950;
}

.goal-amounts .separator[b-2h2i0tapzx] {
    color: var(--muted);
}

.goal-amounts .target[b-2h2i0tapzx] {
    color: var(--muted);
    font-weight: 600;
}

/* ── Progress bar ── */
.goal-bar-track[b-2h2i0tapzx] {
    height: 6px;
    background: rgba(128,128,128,.15);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 2px;
}

.goal-bar-fill[b-2h2i0tapzx] {
    height: 100%;
    border-radius: 3px;
    transition: width .4s ease;
}

.goal-bar-fill.bar-complete[b-2h2i0tapzx] {
    filter: brightness(1.2);
}

.goal-bar-fill.bar-good[b-2h2i0tapzx] {
    filter: brightness(1.05);
}

/* ── Projection ── */
.goal-projection[b-2h2i0tapzx] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    min-width: 130px;
    flex-shrink: 0;
}

.proj-date[b-2h2i0tapzx] {
    font-weight: 700;
    font-size: .92rem;
    color: #58a6ff;
    text-transform: capitalize;
}

.proj-months[b-2h2i0tapzx] {
    font-size: .78rem;
    color: var(--muted);
}

.proj-deadline[b-2h2i0tapzx] {
    font-size: .76rem;
    color: var(--muted);
}

.proj-days[b-2h2i0tapzx] {
    font-size: .74rem;
    font-weight: 600;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.proj-days.urgent[b-2h2i0tapzx] {
    color: #d29922;
}

.proj-days.overdue[b-2h2i0tapzx] {
    color: #f85149;
}

.proj-days.done[b-2h2i0tapzx] {
    color: #3fb950;
}

.proj-postpone[b-2h2i0tapzx] {
    font-size: .74rem;
    font-weight: 700;
    color: #d29922;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.proj-badge[b-2h2i0tapzx] {
    font-size: .74rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.proj-badge.complete[b-2h2i0tapzx] {
    background: rgba(63, 185, 80, .15);
    color: #3fb950;
}

.proj-badge.ontime[b-2h2i0tapzx] {
    background: rgba(63, 185, 80, .12);
    color: #3fb950;
}

.proj-badge.late[b-2h2i0tapzx] {
    background: rgba(248, 81, 73, .12);
    color: #f85149;
}

.proj-badge.unknown[b-2h2i0tapzx] {
    background: rgba(210, 153, 34, .12);
    color: #d29922;
}

/* ── Delete button ── */
.goal-delete[b-2h2i0tapzx] {
    flex-shrink: 0;
    margin-left: 4px;
}

/* ── Modal (consistent with CashHoldings / MonthlyMap) ── */
.modal-backdrop[b-2h2i0tapzx] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-card[b-2h2i0tapzx] {
    background: var(--panel, #161b22);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 10px);
    width: 480px;
    max-width: 95vw;
    box-shadow: 0 8px 32px rgba(0,0,0,.5);
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header[b-2h2i0tapzx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}

.modal-header h3[b-2h2i0tapzx] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
}

.modal-close[b-2h2i0tapzx] {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 1.3rem;
    cursor: pointer;
    line-height: 1;
}

.modal-body[b-2h2i0tapzx] {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.form-group[b-2h2i0tapzx] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-group label[b-2h2i0tapzx] {
    font-size: .86rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.form-group input[b-2h2i0tapzx],
.form-group select[b-2h2i0tapzx] {
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.04);
    color: var(--text);
    font-size: .95rem;
}

.form-row[b-2h2i0tapzx] {
    display: flex;
    gap: 12px;
}

.form-row .form-group[b-2h2i0tapzx] {
    flex: 1;
}

.color-row[b-2h2i0tapzx] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.color-row input[type="color"][b-2h2i0tapzx] {
    width: 36px;
    height: 36px;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
}

/* ── Icon picker ── */
.icon-picker[b-2h2i0tapzx] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.icon-option[b-2h2i0tapzx] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    font-size: 1.1rem;
    cursor: pointer;
    transition: all .15s;
}

.icon-option:hover[b-2h2i0tapzx] {
    border-color: var(--text);
    color: var(--text);
}

.icon-option.selected[b-2h2i0tapzx] {
    border-width: 2px;
}

.modal-footer[b-2h2i0tapzx] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--border);
}

.modal-spacer[b-2h2i0tapzx] {
    flex: 1;
}

.confirm-card[b-2h2i0tapzx] {
    width: 380px;
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .savings-kpi[b-2h2i0tapzx] {
        flex-direction: column;
    }

    .goal-body[b-2h2i0tapzx] {
        flex-wrap: wrap;
        gap: 10px;
    }

    .goal-projection[b-2h2i0tapzx] {
        align-items: flex-start;
        min-width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
    }

    .form-row[b-2h2i0tapzx] {
        flex-direction: column;
    }
}
/* /Components/Pages/Transactions.razor.rz.scp.css */
/* ── Transactions page ── */
.transactions-page[b-jvo3q62p2j] {
    padding: 0 16px 2rem;
}

/* ── Two-column layout: main + sidebar ── */
.tx-layout[b-jvo3q62p2j] {
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 16px;
    align-items: start;
}

.tx-main[b-jvo3q62p2j] {
    min-width: 0;
}

.page-header[b-jvo3q62p2j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 12px;
}

.page-header h1[b-jvo3q62p2j] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
}

.btn-add[b-jvo3q62p2j] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border: none;
    border-radius: var(--radius-sm, 6px);
    background: var(--accent);
    color: #ffffff !important;
    font-weight: 600;
    font-size: .95rem;
    cursor: pointer;
    transition: background .15s ease, transform .1s ease;
}

.btn-add:hover[b-jvo3q62p2j] {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

/* ── Filter bar ── */
.filter-bar[b-jvo3q62p2j] {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px 16px;
    margin-bottom: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 10px);
    box-shadow: var(--shadow-sm);
}

.filter-group[b-jvo3q62p2j] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.filter-group label[b-jvo3q62p2j] {
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    font-weight: 600;
}

.filter-group select[b-jvo3q62p2j],
.filter-group input[type="text"][b-jvo3q62p2j] {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: var(--radius-sm, 6px);
    padding: 6px 10px;
    font-size: .9rem;
    min-width: 140px;
}

.filter-stats[b-jvo3q62p2j] {
    margin-left: auto;
    display: flex;
    gap: 16px;
}

.filter-stats .stat[b-jvo3q62p2j] {
    font-weight: 700;
    font-size: .95rem;
    display: flex;
    align-items: center;
    gap: 4px;
}

.income-stat[b-jvo3q62p2j] { color: var(--success); }
.outcome-stat[b-jvo3q62p2j] { color: var(--danger); }

/* ── Grid layout ── */
.tx-grid[b-jvo3q62p2j] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 10px);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.tx-grid-header[b-jvo3q62p2j] {
    display: grid;
    grid-template-columns: 32px 28px 50px 0.7fr 0.8fr 100px 1.5fr 1fr 90px;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(128,128,128,.06);
    border-bottom: 1px solid var(--border-color);
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
}

.tx-row[b-jvo3q62p2j] {
    display: grid;
    grid-template-columns: 32px 28px 50px 0.7fr 0.8fr 100px 1.5fr 1fr 90px;
    gap: 8px;
    padding: 10px 16px;
    align-items: center;
    border-bottom: 1px solid var(--border-subtle, var(--border-color));
    transition: background .12s ease;
}

/* Pending section uses fewer columns (no drag, recurrence, budget) */
.pending-section .tx-grid-header[b-jvo3q62p2j],
.pending-section .tx-row[b-jvo3q62p2j] {
    grid-template-columns: 50px 1.2fr 0.8fr 100px 120px;
}

.tx-row:last-child[b-jvo3q62p2j] {
    border-bottom: none;
}

.tx-row:hover[b-jvo3q62p2j] {
    background: rgba(128,128,128,.04);
}

/* ── Drag handle ── */
.col-drag[b-jvo3q62p2j] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.drag-handle[b-jvo3q62p2j] {
    font-size: 1rem;
    color: var(--text-muted, #8b949e);
    opacity: .35;
    transition: opacity .15s, color .15s;
    cursor: grab;
}

.tx-row:hover .drag-handle[b-jvo3q62p2j] {
    opacity: .7;
    color: var(--text-secondary, #c9d1d9);
}

.tx-row:active .drag-handle[b-jvo3q62p2j] {
    cursor: grabbing;
    opacity: 1;
}

/* ── Edit card (replaces cramped inline edit) ── */
.tx-edit-card[b-jvo3q62p2j] {
    border-bottom: 1px solid var(--border-subtle, var(--border-color));
    border-left: 3px solid var(--accent);
    background: var(--accent-subtle, rgba(88,166,255,.06));
    padding: 0;
    animation: editCardIn-b-jvo3q62p2j .2s ease;
}

@keyframes editCardIn-b-jvo3q62p2j {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.edit-card-header[b-jvo3q62p2j] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    background: rgba(128,128,128,.04);
}

.edit-card-title[b-jvo3q62p2j] {
    font-weight: 700;
    font-size: .9rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.edit-card-actions[b-jvo3q62p2j] {
    margin-left: auto;
    display: flex;
    gap: 8px;
}

.edit-card-body[b-jvo3q62p2j] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    padding: 14px 16px;
}

.edit-card-body + .edit-card-body[b-jvo3q62p2j] {
    padding-top: 0;
}

.edit-card-footer[b-jvo3q62p2j] {
    display: flex;
    gap: 12px;
    padding: 12px 16px 14px;
    border-top: 1px solid var(--border-color);
}

.edit-card-footer .txm-btn-cancel[b-jvo3q62p2j] { flex: 1; }
.edit-card-footer .txm-btn-save[b-jvo3q62p2j]   { flex: 2; }

.edit-field[b-jvo3q62p2j] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.edit-field label[b-jvo3q62p2j] {
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
}

.tx-empty[b-jvo3q62p2j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    gap: 8px;
    color: var(--text-muted);
}

/* ── Type badge ── */
.type-badge[b-jvo3q62p2j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: .9rem;
}

.type-badge.t-income[b-jvo3q62p2j]  { background: var(--success-subtle); color: var(--success); }
.type-badge.t-outcome[b-jvo3q62p2j] { background: var(--danger-subtle); color: var(--danger); }
.type-badge.t-savings[b-jvo3q62p2j] { background: var(--accent-subtle); color: var(--accent); }
.type-badge.t-backup[b-jvo3q62p2j]  { background: var(--warning-subtle); color: var(--warning); }
.type-badge.t-invest[b-jvo3q62p2j]  { background: var(--teal-subtle); color: var(--teal); }

/* ── Cell content ── */
.tx-name[b-jvo3q62p2j] {
    font-weight: 600;
    color: var(--text-primary);
}

.tx-desc[b-jvo3q62p2j] {
    color: var(--text-secondary);
    font-size: .9rem;
}

.tx-amount[b-jvo3q62p2j] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.tx-amount.amount-positive[b-jvo3q62p2j] { color: var(--success); }
.tx-amount.amount-negative[b-jvo3q62p2j] { color: var(--danger); }

.tx-amount.has-foreign[b-jvo3q62p2j] {
    cursor: help;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

.currency-badge[b-jvo3q62p2j] {
    display: inline-block;
    font-size: .73rem;
    font-weight: 700;
    padding: 1px 5px;
    margin-left: 4px;
    border-radius: 4px;
    background: var(--purple-subtle);
    color: var(--purple);
    vertical-align: middle;
    letter-spacing: .04em;
}

.tx-date[b-jvo3q62p2j] {
    font-size: .9rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

/* ── Recurrence badge ── */
.recurrence-badge[b-jvo3q62p2j] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--info-subtle);
    color: var(--info);
    font-size: .85rem;
    font-weight: 600;
}

.recurrence-badge .rec-end[b-jvo3q62p2j] {
    color: var(--text-muted);
    font-weight: 400;
    font-size: .79rem;
}

/* ── Budget tag ── */
.budget-tag[b-jvo3q62p2j] {
    display: inline-block;
    font-size: .82rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
    white-space: nowrap;
}

/* ── Edit inputs ── */
.edit-input[b-jvo3q62p2j] {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 6px;
    padding: 7px 10px;
    font-size: .9rem;
    width: 100%;
    box-sizing: border-box;
}

.edit-input:focus[b-jvo3q62p2j] {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-subtle);
}

.amount-edit-group[b-jvo3q62p2j] {
    display: flex;
    gap: 6px;
    align-items: center;
}

.edit-amount[b-jvo3q62p2j] {
    width: 100px !important;
    flex-shrink: 0;
}

.edit-currency[b-jvo3q62p2j] {
    width: 54px !important;
    flex-shrink: 0;
    text-transform: uppercase;
    text-align: center;
    font-weight: 700;
    font-size: .85rem !important;
}

.edit-original[b-jvo3q62p2j] {
    width: 90px !important;
    flex-shrink: 0;
}

/* ── Action buttons ── */
.action-btns[b-jvo3q62p2j] {
    display: flex;
    gap: 8px;
}

.btn-icon[b-jvo3q62p2j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(128,128,128,.3);
    border-radius: 6px;
    background: rgba(128,128,128,.08);
    color: var(--text-primary, #c9d1d9);
    cursor: pointer;
    transition: all .12s ease;
    font-size: .9rem;
}

.btn-icon:hover[b-jvo3q62p2j] {
    background: rgba(128,128,128,.18);
    color: #fff;
}

.btn-icon.save[b-jvo3q62p2j] { color: var(--success); border-color: var(--success); background: rgba(63,185,80,.1); }
.btn-icon.save:hover[b-jvo3q62p2j] { background: rgba(63,185,80,.25); }

.btn-icon.cancel[b-jvo3q62p2j] { color: var(--danger); border-color: var(--danger); background: rgba(248,81,73,.1); }
.btn-icon.cancel:hover[b-jvo3q62p2j] { background: rgba(248,81,73,.25); }

.tx-goal-lock[b-jvo3q62p2j] { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: var(--text-muted); opacity: 0.6; font-size: 0.85rem; }

.btn-icon.edit[b-jvo3q62p2j] { color: var(--accent, #58a6ff); border-color: rgba(88,166,255,.3); background: rgba(88,166,255,.08); }
.btn-icon.edit:hover[b-jvo3q62p2j] { color: var(--accent); border-color: var(--accent); background: rgba(88,166,255,.2); }

.btn-icon.delete[b-jvo3q62p2j] { color: var(--danger, #f85149); border-color: rgba(248,81,73,.3); background: rgba(248,81,73,.08); }
.btn-icon.delete:hover[b-jvo3q62p2j] { color: var(--danger); border-color: var(--danger); background: rgba(248,81,73,.2); }

/* ── Drag state on rows ── */
.tx-row[b-jvo3q62p2j] {
    cursor: grab;
}

.tx-row:active[b-jvo3q62p2j] {
    cursor: grabbing;
}

.tx-row.dragging[b-jvo3q62p2j] {
    opacity: .4;
    outline: 2px dashed var(--accent);
    outline-offset: -2px;
    background: var(--accent-subtle, rgba(88,166,255,.06));
}

/* ── Budget sidebar ── */
.budget-sidebar[b-jvo3q62p2j] {
    position: sticky;
    top: calc(3.5rem + 16px);
    max-height: calc(100vh - 3.5rem - 32px);
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 10px);
    box-shadow: var(--shadow-sm);
    transition: border-color .2s ease, box-shadow .2s ease;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

.budget-sidebar.sidebar-active[b-jvo3q62p2j] {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-subtle), var(--shadow-sm);
}

.sidebar-header[b-jvo3q62p2j] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    font-weight: 700;
    font-size: .95rem;
    color: var(--text-primary);
    background: rgba(128,128,128,.06);
    border-bottom: 1px solid var(--border-color);
}

.sidebar-header .bi[b-jvo3q62p2j] {
    color: var(--accent);
}

.sidebar-empty[b-jvo3q62p2j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 2rem 1rem;
    color: var(--text-muted);
    font-size: .9rem;
}

.sidebar-empty .bi[b-jvo3q62p2j] {
    font-size: 1.5rem;
}

/* ── Drop zones ── */
.budget-drop-zone[b-jvo3q62p2j] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 10px;
    padding: 9px 12px;
    border: 1px solid var(--border-subtle, var(--border-color));
    border-radius: var(--radius-sm, 6px);
    background: var(--bg-surface);
    transition: background .15s ease, transform .1s ease, border-color .15s ease;
    cursor: default;
    position: relative;
}

.budget-drop-zone:last-child[b-jvo3q62p2j] {
    margin-bottom: 10px;
}

.budget-drop-zone.drag-over[b-jvo3q62p2j] {
    background: rgba(99, 102, 241, .15);
    border-color: var(--accent);
    transform: scale(1.02);
}

.budget-drop-zone.zone-exhausted[b-jvo3q62p2j] {
    background: rgba(248, 81, 73, .07);
    border-color: #f85149;
}

.zone-exhausted-badge[b-jvo3q62p2j] {
    position: absolute;
    top: 2px;
    right: 0;
    background: #f85149;
    color: #fff;
    font-size: .58rem;
    font-weight: 700;
    padding: 1px 7px 1px 4px;
    border-radius: 3px 0 0 3px;
    display: flex;
    align-items: center;
    gap: 3px;
    pointer-events: none;
    z-index: 1;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.budget-drop-zone.remove-zone[b-jvo3q62p2j] {
    color: var(--text-muted);
    font-size: .9rem;
    gap: 8px;
    border-style: dashed;
}

.budget-drop-zone.remove-zone .bi[b-jvo3q62p2j] {
    font-size: 1rem;
}

.budget-drop-zone.remove-zone.drag-over[b-jvo3q62p2j] {
    background: rgba(248, 81, 73, .1);
    color: var(--danger);
}

.zone-color-dot[b-jvo3q62p2j] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--zone-color, var(--accent)) 30%, transparent);
}

.zone-info[b-jvo3q62p2j] {
    flex: 1;
    min-width: 0;
}

.zone-name[b-jvo3q62p2j] {
    font-size: .9rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 4px;
}

.zone-amount[b-jvo3q62p2j] {
    font-size: .82rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.zone-amount-override[b-jvo3q62p2j] {
    color: #d29922;
    font-weight: 700;
}

.zone-override-pill[b-jvo3q62p2j] {
    font-size: .82rem;
    flex-shrink: 0;
    line-height: 1;
}

.zone-pill-up[b-jvo3q62p2j] {
    color: #3fb950;
}

.zone-pill-down[b-jvo3q62p2j] {
    color: #f85149;
}

.zone-drop-hint[b-jvo3q62p2j] {
    color: var(--accent);
    font-size: .9rem;
    animation: hintPulse-b-jvo3q62p2j 1s ease infinite;
}

@keyframes hintPulse-b-jvo3q62p2j {
    0%, 100% { opacity: .4; }
    50% { opacity: 1; }
}

/* ── Responsive ── */
@media (max-width: 1100px) {
    .tx-layout[b-jvo3q62p2j] {
        grid-template-columns: 1fr 200px;
    }
}

@media (max-width: 900px) {
    .tx-layout[b-jvo3q62p2j] {
        grid-template-columns: 1fr;
    }

    .budget-sidebar[b-jvo3q62p2j] {
        position: static;
        order: -1;
    }

    .tx-grid-header[b-jvo3q62p2j] { display: none; }

    .tx-row[b-jvo3q62p2j] {
        grid-template-columns: 20px 36px 1fr;
        grid-template-rows: auto auto;
        gap: 4px 10px;
        padding: 12px;
    }

    .col-drag[b-jvo3q62p2j] { grid-row: 1 / 3; }
    .col-type[b-jvo3q62p2j] { grid-row: 1 / 3; }
    .col-name[b-jvo3q62p2j] { font-size: 1rem; }
    .col-date[b-jvo3q62p2j],
    .col-recurrence[b-jvo3q62p2j] { font-size: .87rem; }
    .col-actions[b-jvo3q62p2j] { grid-column: 3; justify-self: end; }

    .edit-card-body[b-jvo3q62p2j] {
        grid-template-columns: 1fr;
    }

    .filter-bar[b-jvo3q62p2j] { flex-direction: column; align-items: stretch; }
    .filter-stats[b-jvo3q62p2j] { margin-left: 0; justify-content: space-between; }
}

/* ── Pending section ── */
.pending-section[b-jvo3q62p2j] {
    margin-bottom: 1.5rem;
    border: 2px dashed var(--accent, #6366f1);
    border-radius: var(--radius, 8px);
    padding: 12px;
    background: rgba(99, 102, 241, .04);
}

.pending-header[b-jvo3q62p2j] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.pending-header h2[b-jvo3q62p2j] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
}

.pending-hint[b-jvo3q62p2j] {
    font-size: .8rem;
    color: var(--text-muted, #888);
    margin-left: auto;
}

.tx-row.pending[b-jvo3q62p2j] {
    border-left: 3px solid var(--accent, #6366f1);
}

/* ── Confirm-delete modal ── */
.modal-backdrop[b-jvo3q62p2j] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-card.confirm-card[b-jvo3q62p2j] {
    background: var(--panel, #161b22);
    border: 1px solid var(--border, #30363d);
    border-radius: var(--radius-md, 12px);
    width: 420px;
    max-width: 92vw;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .5);
    animation: confirmIn-b-jvo3q62p2j .2s ease;
}

@keyframes confirmIn-b-jvo3q62p2j {
    from { opacity: 0; transform: scale(.96) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-header[b-jvo3q62p2j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border, #30363d);
}

.modal-header h3[b-jvo3q62p2j] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-close[b-jvo3q62p2j] {
    background: none;
    border: none;
    color: var(--muted, #8b949e);
    font-size: 1.4rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background .15s;
}

.modal-close:hover[b-jvo3q62p2j] {
    background: rgba(128, 128, 128, .15);
}

.modal-body[b-jvo3q62p2j] {
    padding: 20px;
}

.modal-body p[b-jvo3q62p2j] {
    margin: 0;
    font-size: .95rem;
    line-height: 1.5;
}

.modal-footer[b-jvo3q62p2j] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--border, #30363d);
}

.modal-spacer[b-jvo3q62p2j] {
    flex: 1;
}

.modal-footer .btn[b-jvo3q62p2j] {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background .15s, border-color .15s;
}

.modal-footer .btn-cancel[b-jvo3q62p2j] {
    background: transparent;
    border-color: var(--border, #30363d);
    color: var(--text, #c9d1d9);
}

.modal-footer .btn-cancel:hover[b-jvo3q62p2j] {
    background: rgba(128, 128, 128, .1);
}

.modal-footer .btn-danger[b-jvo3q62p2j] {
    background: var(--danger, #f85149);
    color: #fff;
    border-color: var(--danger, #f85149);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.modal-footer .btn-danger:hover[b-jvo3q62p2j] {
    filter: brightness(1.1);
}

/* ── Trash toggle button ── */
.btn-trash-toggle[b-jvo3q62p2j] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border: none;
    border-radius: var(--radius-sm, 6px);
    background: rgba(248, 81, 73, .15);
    color: var(--danger, #f85149);
    font-weight: 600;
    font-size: .95rem;
    cursor: pointer;
    transition: background .15s ease, transform .1s ease;
    position: relative;
}

.btn-trash-toggle:hover[b-jvo3q62p2j] {
    background: rgba(248, 81, 73, .28);
    transform: translateY(-1px);
}

.btn-trash-toggle.active[b-jvo3q62p2j] {
    background: var(--danger, #f85149);
    color: #fff;
}

.btn-trash-toggle.active:hover[b-jvo3q62p2j] {
    filter: brightness(1.1);
}

.trash-badge[b-jvo3q62p2j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--danger, #f85149);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1;
}

.btn-trash-toggle.active .trash-badge[b-jvo3q62p2j] {
    background: rgba(255, 255, 255, .3);
}

/* ── Multi-select checkboxes ── */
.col-check[b-jvo3q62p2j] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tx-checkbox[b-jvo3q62p2j] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--accent);
}

.row-selected[b-jvo3q62p2j] {
    background: rgba(88,166,255,.07) !important;
    outline: 1px solid rgba(88,166,255,.25);
    outline-offset: -1px;
}

.btn-bulk-delete[b-jvo3q62p2j] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 5px;
    border: 1px solid var(--danger);
    background: rgba(248,81,73,.12);
    color: var(--danger);
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
}

.btn-bulk-delete:hover[b-jvo3q62p2j] {
    background: rgba(248,81,73,.25);
}

/* ── Transaction form modal ── */
.tx-form-modal[b-jvo3q62p2j] {
    background: var(--bg-card, #161b22);
    border: 1px solid var(--border-color, #30363d);
    border-radius: 16px;
    width: 580px;
    max-width: 96vw;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 16px 48px rgba(0,0,0,.6);
    animation: confirmIn-b-jvo3q62p2j .2s ease;
    display: flex;
    flex-direction: column;
}

.txm-header[b-jvo3q62p2j] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--border-color);
}

.txm-header-icon[b-jvo3q62p2j] {
    font-size: 1.4rem;
    color: var(--accent);
}

.txm-title[b-jvo3q62p2j] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.txm-subtitle[b-jvo3q62p2j] {
    font-size: .82rem;
    color: var(--text-muted);
}

.txm-header .modal-close[b-jvo3q62p2j] {
    margin-left: auto;
}

.txm-top-row[b-jvo3q62p2j] {
    padding: 16px 24px 0;
}

.txm-type-toggles[b-jvo3q62p2j] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.txm-type-btn[b-jvo3q62p2j] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 8px;
    border: 2px solid transparent;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    background: rgba(128,128,128,.08);
    color: var(--text-secondary);
}

.txm-type-btn.t-income.active[b-jvo3q62p2j]  { background: rgba(63,185,80,.18); border-color: var(--success); color: var(--success); }
.txm-type-btn.t-outcome.active[b-jvo3q62p2j] { background: rgba(248,81,73,.18); border-color: var(--danger); color: var(--danger); }
.txm-type-btn.t-savings.active[b-jvo3q62p2j] { background: rgba(88,166,255,.18); border-color: var(--accent); color: var(--accent); }
.txm-type-btn.t-backup.active[b-jvo3q62p2j]  { background: rgba(210,153,34,.18); border-color: var(--warning); color: var(--warning); }
.txm-type-btn.t-invest.active[b-jvo3q62p2j]  { background: rgba(45,212,191,.18); border-color: var(--teal); color: var(--teal); }

.txm-type-btn:not(.active):hover[b-jvo3q62p2j] {
    background: rgba(128,128,128,.16);
    color: var(--text-primary);
}

.txm-name-row[b-jvo3q62p2j] {
    padding: 14px 24px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.txm-label[b-jvo3q62p2j] {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
}

.txm-name-input[b-jvo3q62p2j] {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 1rem;
    font-weight: 600;
    width: 100%;
    box-sizing: border-box;
}

.txm-name-input:focus[b-jvo3q62p2j] {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-subtle);
}

.txm-amount-section[b-jvo3q62p2j] {
    padding: 14px 24px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.txm-amount-input[b-jvo3q62p2j] {
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--border-color);
    color: var(--text-primary);
    font-size: 2rem;
    font-weight: 800;
    width: 100%;
    box-sizing: border-box;
    padding: 4px 0;
    outline: none;
    transition: border-color .15s;
    font-variant-numeric: tabular-nums;
}

.txm-amount-input.amount-positive[b-jvo3q62p2j] { color: var(--success); border-bottom-color: var(--success); }
.txm-amount-input.amount-negative[b-jvo3q62p2j] { color: var(--danger); border-bottom-color: var(--danger); }
.txm-amount-input:focus[b-jvo3q62p2j] { border-bottom-color: var(--accent); }

.txm-date-row[b-jvo3q62p2j] {
    display: flex;
    gap: 12px;
    padding: 14px 24px 0;
}

.txm-date-row .edit-field[b-jvo3q62p2j] { flex: 1; }

.txm-more-toggle[b-jvo3q62p2j] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 14px 24px 0;
    padding: 7px 12px;
    border-radius: 7px;
    border: 1px solid var(--border-color);
    background: rgba(128,128,128,.06);
    color: var(--text-muted);
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    width: fit-content;
    transition: background .15s, color .15s;
}

.txm-more-toggle:hover[b-jvo3q62p2j] {
    background: rgba(128,128,128,.14);
    color: var(--text-primary);
}

.txm-more-grid[b-jvo3q62p2j] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    padding: 14px 24px 0;
}

.txm-footer[b-jvo3q62p2j] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 24px;
    margin-top: 16px;
    border-top: 1px solid var(--border-color);
}

.txm-btn-cancel[b-jvo3q62p2j] {
    flex: 1;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: rgba(128,128,128,.08);
    color: var(--text-secondary);
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}

.txm-btn-cancel:hover[b-jvo3q62p2j] { background: rgba(128,128,128,.18); }

.txm-btn-save[b-jvo3q62p2j] {
    flex: 2;
    padding: 12px;
    border-radius: 8px;
    border: none;
    background: var(--accent);
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: filter .15s, transform .1s;
}

.txm-btn-save:hover[b-jvo3q62p2j] { filter: brightness(1.1); transform: translateY(-1px); }

/* ── Trash modal ── */
.trash-modal[b-jvo3q62p2j] {
    background: var(--bg-card, #161b22);
    border: 1px solid var(--border-color, #30363d);
    border-radius: 16px;
    width: 820px;
    max-width: 96vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 16px 48px rgba(0,0,0,.6);
    animation: confirmIn-b-jvo3q62p2j .2s ease;
}

.trash-modal .modal-header[b-jvo3q62p2j] {
    border-radius: 16px 16px 0 0;
}

.trash-modal-body[b-jvo3q62p2j] {
    overflow-y: auto;
    flex: 1;
    padding: 12px;
}

.trash-hint-text[b-jvo3q62p2j] {
    color: var(--text-muted);
    font-size: .85rem;
    margin: 0 0 8px 0;
    padding: 0 4px;
}

.trash-grid .tx-grid-header[b-jvo3q62p2j],
.trash-grid .tx-row[b-jvo3q62p2j] {
    grid-template-columns: 32px 50px 1fr 0.8fr 100px 70px 80px;
}

.btn.btn-sm[b-jvo3q62p2j] {
    padding: 6px 12px;
    font-size: .83rem;
    border-radius: 6px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.btn.btn-danger[b-jvo3q62p2j] { background: var(--danger); color: #fff; }
.btn.btn-danger:hover[b-jvo3q62p2j] { filter: brightness(1.12); }

/* ── Pending section uses fewer columns ── */
.pending-section .tx-grid-header[b-jvo3q62p2j],
.pending-section .tx-row[b-jvo3q62p2j] {
    grid-template-columns: 50px 1.2fr 0.8fr 100px 120px;
}
/* /Components/Shared/IconPicker.razor.rz.scp.css */
/* ── Root container ── */
.ipk-root[b-8wzdimjvv7] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── Selected icon preview ── */
.ipk-preview[b-8wzdimjvv7] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid var(--border-color, #333);
    border-radius: 8px;
    background: var(--bg-surface, #1c1c2e);
    width: fit-content;
}

.ipk-preview-icon[b-8wzdimjvv7] {
    font-size: 1.2rem;
}

.ipk-preview-name[b-8wzdimjvv7] {
    font-size: .82rem;
    color: var(--text-secondary, #888);
    font-family: monospace;
}

/* ── Search row ── */
.ipk-search-row[b-8wzdimjvv7] {
    display: flex;
    gap: 8px;
}

.ipk-search-box[b-8wzdimjvv7] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-surface, #1c1c2e);
    border: 1px solid var(--border-color, #333);
    border-radius: 8px;
    padding: 6px 10px;
    transition: border-color .15s;
}

.ipk-search-box:focus-within[b-8wzdimjvv7] {
    border-color: var(--accent, #58a6ff);
}

.ipk-search-icon[b-8wzdimjvv7] {
    color: var(--text-secondary, #888);
    flex-shrink: 0;
    font-size: .9rem;
}

.ipk-search-input[b-8wzdimjvv7] {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    color: var(--text-primary, #e0e0e0);
    font-size: .9rem;
    min-width: 0;
}

.ipk-search-input[b-8wzdimjvv7]::placeholder {
    color: var(--text-secondary, #666);
}

.ipk-clear-btn[b-8wzdimjvv7] {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--text-secondary, #888);
    line-height: 1;
    display: flex;
    align-items: center;
}

.ipk-clear-btn:hover[b-8wzdimjvv7] { color: var(--danger, #f85149); }

/* ── Category pills ── */
.ipk-cats[b-8wzdimjvv7] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.ipk-cat[b-8wzdimjvv7] {
    padding: 3px 10px;
    font-size: .78rem;
    border-radius: 20px;
    border: 1px solid var(--border-color, #333);
    background: transparent;
    color: var(--text-secondary, #888);
    cursor: pointer;
    transition: all .12s;
    white-space: nowrap;
}

.ipk-cat:hover[b-8wzdimjvv7] {
    background: rgba(88,166,255,.1);
    color: var(--accent, #58a6ff);
    border-color: var(--accent, #58a6ff);
}

.ipk-cat.active[b-8wzdimjvv7] {
    background: var(--accent, #58a6ff);
    color: #fff;
    border-color: var(--accent, #58a6ff);
}

/* ── Icon grid ── */
.ipk-grid[b-8wzdimjvv7] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-height: 220px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--border-color, #333);
    border-radius: 8px;
    background: var(--bg-surface, #1c1c2e);
    scrollbar-width: thin;
    scrollbar-color: var(--border-color, #444) transparent;
}

.ipk-btn[b-8wzdimjvv7] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary, #888);
    font-size: 1.1rem;
    cursor: pointer;
    transition: background .1s, color .1s, border-color .1s;
    flex-shrink: 0;
}

.ipk-btn:hover[b-8wzdimjvv7] {
    background: rgba(128,128,128,.15);
    color: var(--text-primary, #e0e0e0);
}

.ipk-btn.sel[b-8wzdimjvv7] {
    font-weight: 700;
}

/* ── Empty / count hints ── */
.ipk-empty[b-8wzdimjvv7] {
    width: 100%;
    text-align: center;
    color: var(--text-secondary, #888);
    padding: 20px 0;
    font-size: .88rem;
    margin: 0;
}

.ipk-more[b-8wzdimjvv7] {
    font-size: .78rem;
    color: var(--text-secondary, #888);
    text-align: center;
    padding: 2px 0 4px;
}