/* ============================================================
   CSS Custom Properties
   ============================================================ */
:root {
    --blue:        #1e40af;
    --blue-light:  #3b82f6;
    --blue-hover:  #1d4ed8;
    --green:       #16a34a;
    --red:         #dc2626;
    --amber:       #d97706;
    --bg:          #f1f5f9;
    --surface:     #ffffff;
    --border:      #e2e8f0;
    --text:        #1e293b;
    --text-muted:  #64748b;
    --radius:      8px;
    --radius-lg:   12px;
    --shadow:      0 1px 4px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06);
    --header-h:    56px;
    --nav-h:       44px;
}

/* ============================================================
   Reset + Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
    min-height: 100vh;
}

.hidden { display: none !important; }

/* ============================================================
   Buttons
   ============================================================ */
button { cursor: pointer; font: inherit; border: none; background: none; }

.btn-primary {
    background: var(--blue);
    color: #fff;
    padding: 10px 20px;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 14px;
    transition: background .15s;
    display: inline-block;
    text-decoration: none;
    text-align: center;
}
.btn-primary:hover { background: var(--blue-hover); }

.btn-secondary {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    padding: 10px 20px;
    border-radius: var(--radius);
    font-weight: 500;
}
.btn-secondary:hover { background: var(--bg); }

.btn-sm { padding: 6px 12px; font-size: 13px; }

.btn-link {
    background: none;
    border: none;
    color: var(--blue);
    text-decoration: underline;
    font: inherit;
    cursor: pointer;
    padding: 0;
}

.btn-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--text-muted);
    transition: background .12s, color .12s;
    flex-shrink: 0;
}
.btn-icon:hover { background: var(--bg); color: var(--text); }

.icon-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--radius);
    font-size: 22px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .12s;
}
.icon-btn:hover { background: var(--bg); }

/* ============================================================
   Forms
   ============================================================ */
.form-group { margin-bottom: 16px; }

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

.label-hint { font-weight: 400; color: var(--text-muted); }
.field-hint { display: block; font-size: 11px; color: var(--text-muted); margin-top: 4px; }

input[type=text],
input[type=number],
input[type=date],
select,
.currency-search {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font: inherit;
    font-size: 14px;
    color: var(--text);
    background: var(--surface);
    transition: border-color .15s;
    appearance: none;
}
input:focus, select:focus { outline: none; border-color: var(--blue-light); box-shadow: 0 0 0 3px rgba(59,130,246,.12); }

.emoji-input { width: 80px; }

.hint { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.input-hint { font-size: 12px; color: var(--text-muted); margin-top: 5px; line-height: 1.4; }

.radio-group { display: flex; gap: 20px; padding: 4px 0; }
.radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; }

/* ============================================================
   Header
   ============================================================ */
#appHeader {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--header-h);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 12px;
}

.header-left { flex: 0 0 auto; }
.header-center { flex: 1; display: flex; justify-content: center; }
.header-right { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }

.brand {
    font-size: 20px;
    font-weight: 800;
    color: var(--blue);
    letter-spacing: -.5px;
}

/* ── Month Nav ── */
.month-nav { display: flex; align-items: center; gap: 8px; }

.month-btn {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    font-size: 20px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .12s;
}
.month-btn:hover:not(:disabled) { background: var(--bg); color: var(--text); }
.month-btn:disabled { opacity: .35; cursor: not-allowed; }

.month-label { font-weight: 600; font-size: 15px; min-width: 150px; text-align: center; }

/* ── RTA Badge ── */
.rta-badge {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
}
.rta-label { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); display: flex; align-items: center; gap: 3px; }
.rta-amount { font-size: 16px; font-weight: 700; }
.rta-amount.positive { color: var(--green); }
.rta-amount.negative { color: var(--red); }
.rta-amount.zero     { color: var(--text-muted); }

.rta-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 1px solid var(--text-muted);
    font-size: 9px;
    font-weight: 700;
    color: var(--text-muted);
    cursor: help;
    line-height: 1;
    flex-shrink: 0;
    transition: border-color .12s, color .12s, background .12s;
}
.rta-info:hover { border-color: var(--blue); color: var(--blue); background: rgba(59,130,246,.08); }

/* ── Menu Dropdown ── */
.menu-wrapper { position: relative; }

.dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    min-width: 200px;
    z-index: 200;
    overflow: hidden;
    padding: 4px 0;
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: 10px 16px;
    text-align: left;
    font-size: 14px;
    color: var(--text);
    background: none;
    border: none;
    cursor: pointer;
    transition: background .12s;
}
.dropdown-item:hover { background: var(--bg); }
.upgrade-item { color: var(--blue); font-weight: 600; }

.dropdown-divider { border: none; border-top: 1px solid var(--border); margin: 4px 0; }

.dev-toggle { cursor: pointer; display: flex; align-items: center; gap: 8px; }

.dropdown-setting { display: flex; align-items: center; justify-content: space-between; padding: 6px 14px; gap: 12px; }
.dropdown-setting-label { font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.dropdown-select { font-size: 12px; border: 1px solid var(--border); border-radius: 6px; padding: 3px 6px; background: var(--bg); color: var(--text); cursor: pointer; }

/* ============================================================
   Nav Tabs
   ============================================================ */
#appNav {
    display: flex;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 0 16px;
}

.nav-tab {
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
    margin-bottom: -1px;
}
.nav-tab:hover { color: var(--text); }
.nav-tab.active { color: var(--blue); border-bottom-color: var(--blue); font-weight: 600; }

/* ============================================================
   Main Content
   ============================================================ */
#mainContent {
    max-width: 860px;
    margin: 0 auto;
    padding: 20px 16px 80px;
}

.view { display: block; }

/* ============================================================
   Budget View
   ============================================================ */
.budget-columns-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 36px 8px 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.col-headers { display: flex; gap: 0; }
.col-headers span { width: 100px; text-align: right; }

/* ── Group ── */
.budget-group {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 12px;
    overflow: hidden;
}

.group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

.group-title { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); }

.group-header-right { display: flex; align-items: center; gap: 6px; }

.btn-add-cat {
    font-size: 12px;
    font-weight: 500;
    color: var(--blue);
    padding: 3px 9px;
    border-radius: 4px;
    border: 1px solid rgba(59,130,246,.3);
    background: rgba(59,130,246,.05);
    transition: background .12s, border-color .12s;
}
.btn-add-cat:hover { background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.5); }

.group-actions { display: flex; gap: 2px; opacity: 0; transition: opacity .15s; }
.budget-group:hover .group-actions { opacity: 1; }

/* ── Category Row ── */
.cat-row {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    gap: 8px;
    transition: background .12s;
}
.cat-row:last-child { border-bottom: none; }
.cat-row:hover { background: #fafbfd; }

.cat-name { flex: 1; font-size: 14px; display: flex; flex-direction: column; gap: 1px; }
.cat-carryover { font-size: 11px; font-weight: 400; }
.cat-carryover.positive { color: var(--text-muted); }
.cat-carryover.negative { color: var(--red); }

.cat-amounts { display: flex; gap: 0; }
.cat-col { width: 100px; text-align: right; font-size: 14px; font-variant-numeric: tabular-nums; }
.cat-col.budgeted { color: var(--text-muted); }
.cat-col.budgeted.editable {
    cursor: pointer;
    border-radius: 4px;
    padding: 2px 5px;
    margin: -2px -5px;
    transition: background .12s, color .12s;
}
.cat-col.budgeted.editable:hover { background: rgba(59,130,246,.09); color: var(--blue); }
.cat-col.available.positive { color: var(--green); font-weight: 500; }
.cat-col.available.negative { color: var(--red); font-weight: 600; }
.cat-col.available.zero     { color: var(--text-muted); }

.cat-actions { display: flex; gap: 2px; opacity: 0; transition: opacity .15s; }
.cat-row:hover .cat-actions { opacity: 1; }

.cat-empty { padding: 12px; font-size: 13px; color: var(--text-muted); font-style: italic; }

/* ── Column edit hint ── */
.col-edit-hint {
    display: block;
    font-size: 9px;
    color: var(--blue-light);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.4;
    opacity: .85;
}

/* ── Budget toolbar ── */
.budget-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

.btn-move-money {
    padding: 7px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    color: var(--blue);
    background: transparent;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.btn-move-money:hover { background: rgba(59,130,246,.06); border-color: var(--blue-light); }

/* ── Inline budget edit ── */
.budget-inline-input {
    width: 90px;
    padding: 3px 6px;
    border: 1px solid var(--blue-light);
    border-radius: 4px;
    font-size: 13px;
    text-align: right;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(59,130,246,.15);
}

/* ── Add Group ── */
.add-group-row { margin-top: 8px; }
.btn-add-group {
    width: 100%;
    padding: 12px;
    border: 2px dashed var(--border);
    border-radius: var(--radius-lg);
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
    background: transparent;
    transition: border-color .15s, color .15s, background .15s;
    cursor: pointer;
}
.btn-add-group:hover { border-color: var(--blue-light); color: var(--blue); background: rgba(59,130,246,.04); }

/* ============================================================
   Accounts View — two-column layout
   ============================================================ */
#accountsView {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.accounts-pane {
    flex: 0 0 260px;
    min-width: 0;
}

.transactions-pane {
    flex: 1;
    min-width: 0;
}

.pane-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.pane-header h2 { font-size: 16px; font-weight: 700; }

.account-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.account-card:hover { border-color: var(--blue-light); box-shadow: 0 0 0 3px rgba(59,130,246,.1); }
.account-card.selected { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(30,64,175,.12); }

.account-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.account-name { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-type { font-size: 12px; color: var(--text-muted); text-transform: capitalize; }

.account-right { display: flex; align-items: center; gap: 12px; }
.account-balance { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.account-balance.negative { color: var(--red); }

.account-actions { display: flex; gap: 2px; opacity: 0; transition: opacity .15s; flex-shrink: 0; width: 0; overflow: hidden; }
.account-card:hover .account-actions { opacity: 1; width: auto; overflow: visible; }

/* ── Transaction List ── */

.tx-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.tx-header h3 { font-size: 16px; font-weight: 700; }

.tx-list {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.tx-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.tx-row:last-child { border-bottom: none; }

.tx-date   { color: var(--text-muted); white-space: nowrap; min-width: 80px; flex-shrink: 0; }
.tx-payee  { flex: 1; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-cat    { color: var(--text-muted); font-size: 12px; min-width: 80px; flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-amount { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 90px; text-align: right; flex-shrink: 0; }
.tx-amount.positive { color: var(--green); }
.tx-amount.negative { color: var(--red); }

.tx-list-hint {
    font-size: 11px;
    color: var(--text-muted);
    text-align: right;
    margin-bottom: 4px;
    opacity: .7;
}

.tx-actions { display: flex; gap: 2px; flex-shrink: 0; opacity: 0.25; transition: opacity .15s; }
.tx-row { cursor: pointer; }
.tx-row:hover { background: #f0f4ff; }
.tx-row:hover .tx-actions { opacity: 1; }
.tx-row:focus-visible { outline: 2px solid var(--blue-light); outline-offset: -2px; }

/* ============================================================
   Empty State
   ============================================================ */
.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-muted);
}
.empty-icon { font-size: 48px; margin-bottom: 16px; }
.empty-state h3 { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.empty-state p  { font-size: 14px; max-width: 320px; margin: 0 auto 20px; }

.premium-gate .btn-primary { margin-top: 16px; }

/* ============================================================
   FAB
   ============================================================ */
.fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--blue);
    color: #fff;
    border-radius: 28px;
    padding: 14px 22px;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 4px 16px rgba(30,64,175,.4);
    z-index: 50;
    transition: background .15s, transform .12s;
}
.fab:hover { background: var(--blue-hover); transform: translateY(-1px); }

/* ============================================================
   Modals
   ============================================================ */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.45);
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    backdrop-filter: blur(2px);
}

.modal-content {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 24px;
    animation: modal-in .15s ease;
}

.modal-sm { max-width: 360px; }
.modal-lg { max-width: 620px; }

@keyframes modal-in {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.modal-header h2 { font-size: 18px; font-weight: 700; }
.modal-close {
    width: 30px; height: 30px;
    border-radius: 6px;
    font-size: 18px;
    color: var(--text-muted);
    display: flex; align-items: center; justify-content: center;
}
.modal-close:hover { background: var(--bg); }

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

/* ── CSV Import ── */
.csv-upload-zone {
    border: 2px dashed var(--border);
    border-radius: var(--radius-lg);
    padding: 32px 24px;
    text-align: center;
    transition: border-color .15s, background .15s;
}
.csv-upload-zone.drag-over { border-color: var(--blue); background: rgba(59,130,246,.05); }
.csv-upload-icon { font-size: 36px; margin-bottom: 10px; }
.csv-upload-zone p { color: var(--text-muted); margin-bottom: 12px; }
.csv-upload-zone .hint { margin-top: 10px; margin-bottom: 0; }

.csv-format-help {
    margin-top: 16px;
    text-align: left;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
}
.csv-help-line {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 6px;
    line-height: 1.5;
}
.csv-help-line:last-child { margin-bottom: 0; }
.csv-help-line strong { color: var(--text); font-weight: 600; }

.csv-section-title { font-size: 14px; font-weight: 700; margin: 20px 0 4px; }
.csv-section-desc  { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; }

.csv-mapping-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
    margin-bottom: 16px;
}
.csv-full-width { grid-column: 1 / -1; }

.csv-mini-preview {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    font-size: 12px;
    max-height: 110px;
    overflow: auto;
}
.preview-row { display: flex; gap: 12px; padding: 3px 0; }
.preview-row span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); }
.preview-row span:last-child { flex: 0 0 80px; text-align: right; }
.preview-header span { font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--text); }
.csv-raw-date { font-size: 10px; color: var(--text-muted); margin-left: 4px; }

.csv-preview-header { font-size: 13px; color: var(--text-muted); margin-bottom: 10px; }
.csv-preview-header strong { color: var(--text); }
.csv-preview-scroll { max-height: 300px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius); }

.csv-preview-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.csv-preview-table th {
    background: var(--bg);
    padding: 8px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 1;
}
.csv-preview-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); }
.csv-preview-table tr:last-child td { border-bottom: none; }
.csv-preview-table .skip-row td { opacity: .38; }
.csv-status { font-size: 11px; color: var(--text-muted); }
.csv-status.new { color: var(--green); font-weight: 500; }
.csv-cat-select { width: 100%; font-size: 13px; padding: 3px 4px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); color: var(--text); }
.csv-cat-payee { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-link { background: none; border: none; padding: 0; color: var(--blue); cursor: pointer; font-size: inherit; text-decoration: underline; }

.tx-header-right { display: flex; align-items: center; gap: 10px; }

/* ── Upgrade Modal ── */
.upgrade-modal { max-width: 420px; text-align: center; }
.upgrade-body { padding: 8px 0; }
.upgrade-nudge { font-size: 13px; color: var(--red); background: #fff0f0; border-radius: 6px; padding: 8px 12px; margin-bottom: 12px; }
.upgrade-price { font-size: 36px; font-weight: 800; color: var(--blue); margin-bottom: 4px; }
.upgrade-price-note { font-size: 14px; font-weight: 400; color: var(--text-muted); }
.upgrade-vs { font-size: 12px; color: var(--text-muted); margin-bottom: 16px; }

.upgrade-features {
    list-style: none;
    text-align: left;
    margin: 0 auto 20px;
    max-width: 240px;
    font-size: 14px;
    line-height: 2;
}
.upgrade-features li { color: var(--text); }

.upgrade-privacy { font-size: 12px; color: var(--text-muted); margin-bottom: 20px; }

.btn-upgrade {
    display: block;
    width: 100%;
    padding: 14px;
    font-size: 16px;
    margin-bottom: 16px;
}

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

.free-tier-hint {
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    padding: 10px 12px 4px;
}

/* ============================================================
   Recurring Transactions
   ============================================================ */
.recurring-options { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.recurring-options select { flex: 0 0 auto; }

.recurring-list { padding: 4px 0; max-height: 70vh; overflow-y: auto; }

.recurring-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}
.recurring-row:last-child { border-bottom: none; }
.recurring-row.recurring-paused { opacity: 0.55; }

.recurring-info { flex: 1; min-width: 0; }
.recurring-payee { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recurring-meta  { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.recurring-next  { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.recurring-amount { font-weight: 600; font-size: 14px; white-space: nowrap; }
.recurring-amount.income  { color: var(--green); }
.recurring-amount.expense { color: var(--red); }

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

.btn-danger { background: #fee2e2; color: #b91c1c; border: none; border-radius: 6px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
.btn-danger:hover { background: #fecaca; }

.empty-hint { color: var(--text-muted); font-size: 14px; text-align: center; padding: 32px 20px; line-height: 1.6; }

/* ============================================================
   Onboarding
   ============================================================ */
.onboarding-backdrop {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 50%, #1d4ed8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.onboarding-card {
    background: var(--surface);
    border-radius: 20px;
    padding: 40px 36px;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
}

.onboarding-logo {
    width: 56px;
    height: 56px;
    background: var(--blue);
    color: #fff;
    border-radius: 14px;
    font-size: 28px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.onboarding-title { font-size: 26px; font-weight: 800; margin-bottom: 4px; }
.onboarding-sub   { color: var(--text-muted); margin-bottom: 16px; }

.onboard-step-dots { display: flex; justify-content: center; gap: 8px; margin-bottom: 24px; }
.onboard-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border);
    transition: background .2s, transform .2s;
}
.onboard-dot.active { background: var(--blue); transform: scale(1.25); }

.onboard-step-title { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.onboard-step-desc { font-size: 13px; color: var(--text-muted); margin-bottom: 16px; line-height: 1.5; }

/* ── Currency Picker ── */
.currency-search { margin-bottom: 10px; }

.currency-list {
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 12px;
}

.currency-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: background .12s;
    border-bottom: 1px solid var(--border);
}
.currency-item:last-child { border-bottom: none; }
.currency-item:hover { background: var(--bg); }
.currency-item.selected { background: rgba(59,130,246,.1); }
.currency-item.selected .currency-code { color: #4b5563; }

.currency-symbol { font-size: 16px; font-weight: 700; min-width: 28px; color: var(--blue); }
.currency-name   { flex: 1; }
.currency-code   { font-size: 12px; color: var(--text-muted); font-weight: 600; }

.onboard-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 24px;
}

/* ============================================================
   Toast
   ============================================================ */
.toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    padding: 11px 20px;
    border-radius: 28px;
    font-size: 14px;
    font-weight: 500;
    z-index: 500;
    box-shadow: 0 4px 16px rgba(0,0,0,.18);
    white-space: nowrap;
    animation: toast-in .2s ease;
}
.toast-info    { background: var(--text);  color: #fff; }
.toast-success { background: var(--green); color: #fff; }
.toast-error   { background: var(--red);   color: #fff; }

@keyframes toast-in {
    from { opacity: 0; transform: translateX(-50%) translateY(8px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ============================================================
   Amount colours (shared)
   ============================================================ */
.positive { color: var(--green); }
.negative { color: var(--red); }

/* ============================================================
   Scrollbar
   ============================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #cbd5e1; }

/* ============================================================
   Auto-Backup Status
   ============================================================ */
.backup-status {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}

.backup-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.backup-dot.saved   { background: var(--green); }
.backup-dot.unsaved { background: var(--amber); animation: pulse-dot 1.5s ease-in-out infinite; }

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50%       { opacity: .35; }
}

.backup-label { color: var(--text-muted); }

.backup-status-btn {
    font-size: 11px;
    color: var(--blue);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    white-space: nowrap;
}
.backup-status-btn:hover { text-decoration: underline; }

.premium-item { color: var(--amber); }

/* ============================================================
   Reports
   ============================================================ */
.reports-section { margin-bottom: 32px; }

.report-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--text);
}
.report-month-label {
    font-weight: 400;
    color: var(--text-muted);
    margin-left: 6px;
    font-size: 13px;
}

.report-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.report-header-row .report-title { margin-bottom: 0; }

.report-select {
    font: inherit;
    font-size: 13px;
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
}

.report-cat-row {
    display: grid;
    grid-template-columns: 160px 1fr 120px;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
}
.report-cat-row:last-child { border-bottom: none; }

.report-cat-label { min-width: 0; }
.report-cat-name {
    display: block;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.report-cat-group {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
}

.report-bar-track {
    position: relative;
    height: 18px;
    background: var(--bg);
    border-radius: 4px;
    overflow: hidden;
}
.report-bar-budget {
    position: absolute;
    top: 0; left: 0; height: 100%;
    background: var(--border);
    border-radius: 4px;
    transition: width .4s ease;
}
.report-bar-spent {
    position: absolute;
    top: 0; left: 0; height: 100%;
    border-radius: 4px;
    opacity: .88;
    transition: width .4s ease, background .3s;
}

.report-cat-amts {
    text-align: right;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
.report-cat-of {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
}

.report-canvas-wrap {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 12px;
    box-sizing: border-box;
}
.report-canvas-wrap canvas { display: block; max-width: 100%; }

.report-empty {
    font-size: 13px;
    color: var(--text-muted);
    padding: 20px 0;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 600px) {
    #mainContent { padding: 12px 12px 88px; }
    .month-label { min-width: 120px; font-size: 14px; }
    .rta-badge { display: none; }
    .modal-content { padding: 20px 16px; }
    .onboarding-card { padding: 28px 20px; }

    /* Header: hide backup status widget — frees space for menu button */
    #backupStatus { display: none; }

    /* Budget: hide column header — amounts move to second line so header can't align */
    .budget-columns-header { display: none; }

    /* Budget: two-line category row — name + actions on line 1, amounts on line 2 */
    .cat-row { flex-wrap: wrap; gap: 0; padding: 8px 10px; align-items: flex-start; }
    .cat-name { flex: 1 1 auto; min-width: 0; padding-right: 4px; }
    .cat-actions { flex: 0 0 auto; opacity: 0.7; }
    .cat-amounts {
        flex: 0 0 100%;
        order: 3;
        display: flex;
        justify-content: flex-end;
        gap: 8px;
        margin-top: 4px;
    }
    .cat-col { width: auto; min-width: 80px; font-size: 12px; }
    .group-actions { opacity: 0.7; }

    /* Accounts: stack on mobile */
    #accountsView { flex-direction: column; }
    .accounts-pane { flex: none; width: 100%; }
    .transactions-pane { width: 100%; }

    /* Transaction rows: hide category column — too narrow at 375px */
    .tx-cat { display: none; }

    /* Actions: always show on mobile (no hover available) */
    .account-actions { opacity: 1; width: auto; overflow: visible; }
    .tx-actions { opacity: 1; }

    /* CSV import: single-column mapping on mobile */
    .csv-mapping-grid { grid-template-columns: 1fr; }

    /* Reports: narrower label column on mobile */
    .report-cat-row { grid-template-columns: 100px 1fr 80px; gap: 6px; }
    .report-header-row { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ── Transfer display in account view ─────────────────────────── */
.tx-transfer-dir {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: var(--blue);
    background: #dbeafe;
    border-radius: 3px;
    padding: 1px 5px;
    margin-right: 5px;
    white-space: nowrap;
    vertical-align: middle;
}

/* ── Split transaction modal ───────────────────────────────────── */
.split-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 6px;
}
.split-row select {
    flex: 1;
    min-width: 0;
    width: auto;
    padding: 7px 10px;
    font-size: 13px;
}
.split-row input[type=number] {
    width: 90px;
    flex-shrink: 0;
    padding: 7px 10px;
    font-size: 13px;
}
.split-total-hint { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.split-total-hint.success { color: var(--green); }
.split-total-hint.error   { color: var(--red); }

/* ── Split transaction display in account view ─────────────────── */
.split-badge {
    font-size: 10px;
    background: #dbeafe;
    color: var(--blue);
    border-radius: 4px;
    padding: 1px 5px;
    margin-left: 4px;
    font-weight: 500;
    vertical-align: middle;
    white-space: nowrap;
}
.tx-split-children {
    border-left: 3px solid var(--border);
    margin: -3px 0 4px 12px;
    background: var(--surface);
    border-radius: 0 0 4px 4px;
}
.tx-split-child {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 16px 5px 12px;
    font-size: 13px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}
.tx-split-child:last-child { border-bottom: none; }
.split-child-cat { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.split-child-amt { font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; margin-left: 8px; }