* {
    box-sizing: border-box;
}

body {
    font-family: system-ui, Arial, sans-serif;
    margin: 0;
    padding: 1rem 2rem;
    background: var(--bg);
    color: var(--text);
    transition: background .3s, color .3s;
}

/* Design tokens */
:root {
    /* Base (Light) Theme */
    --bg: #f5f7fa;
    --surface: #ffffff;
    --surface-alt: #f1f5f9;
    --border: #dbe2ea;
    --border-strong: #c3ccd5;
    --text: #222;
    --text-muted: #475569;
    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --danger: #ef4444;
    --danger-hover: #dc2626;
    --danger-active: #b91c1c;
    --focus: 2px solid #2563eb;
    --grad-primary: linear-gradient(135deg,#2563eb,#4f46e5);
    --table-head: #eef2f7;
    --table-row-hover: #f0f7ff;
    --summary-chip: #f1f5f9;
    --footer-bg: #1e293b;
    --footer-text: #fff;
}

/* Dark Theme */
body.theme-dark {
    --bg: #0f172a;
    --surface: #1e293b;
    --surface-alt: #223044;
    --border: #324256;
    --border-strong: #465a72;
    --text: #e2e8f0;
    --text-muted: #94a3b8;
    --accent: #3b82f6;
    --accent-hover: #2563eb;
    --danger: #f87171;
    --danger-hover: #ef4444;
    --danger-active: #dc2626;
    --grad-primary: linear-gradient(135deg,#3b82f6,#6366f1);
    --table-head: #24344a;
    --table-row-hover: #27354b;
    --summary-chip: #27364d;
    --footer-bg: #334155;
    --footer-text: #f1f5f9;
}

/* Dracula Theme */
body.theme-dracula {
    --bg: #282a36;
    --surface: #343746;
    --surface-alt: #3d4152;
    --border: #44475a;
    --border-strong: #5a5f73;
    --text: #f8f8f2;
    --text-muted: #bdc2d1;
    --accent: #bd93f9;
    --accent-hover: #a978f4;
    --danger: #ff5555;
    --danger-hover: #ff4444;
    --danger-active: #ff2222;
    --grad-primary: linear-gradient(135deg,#bd93f9,#ff79c6);
    --table-head: #383b4a;
    --table-row-hover: #404455;
    --summary-chip: #3d4152;
    --footer-bg: #44475a;
    --footer-text: #f8f8f2;
}

/* VSCode Theme */
body.theme-vscode {
    --bg: #1e1e1e;
    --surface: #252526;
    --surface-alt: #2d2d2d;
    --border: #3c3c3c;
    --border-strong: #4d4d4d;
    --text: #d4d4d4;
    --text-muted: #9ca3af;
    --accent: #0a84ff;
    --accent-hover: #0074e8;
    --danger: #f14c4c;
    --danger-hover: #e03a3a;
    --danger-active: #c92424;
    --grad-primary: linear-gradient(135deg,#0a84ff,#0074e8);
    --table-head: #303031;
    --table-row-hover: #2f2f30;
    --summary-chip: #2a2a2b;
    --footer-bg: #333333;
    --footer-text: #d4d4d4;
}

body.theme-pink {
    --bg: #fff5f8;
    --surface: #ffe9f1;
    --surface-alt: #ffd4e4;
    --border: #f5b6cb;
    --border-strong: #ec9fb9;
    --text: #4a2b35;
    --text-muted: #8a5c6b;
    --accent: #ff4f9c;
    --accent-hover: #e43e86;
    --danger: #d7266e;
    --danger-hover: #b71c57;
    --danger-active: #8f123f;
    --grad-primary: linear-gradient(135deg,#ff4f9c,#ff85c9);
    --table-head: #ffc4dc;
    --table-row-hover: #ffdbe9;
    --summary-chip: #ffd4e4;
    --footer-bg: #ff85c9;
    --footer-text: #4a2b35;
    --focus: 2px solid #ff4f9c;
}

header {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:1rem;
    flex-wrap:wrap;
    margin-bottom: 1.5rem;
}
header h1 { flex:1 1 auto; margin:0; font-size:1.4rem; line-height:1.2; }
#importExportBar { display:flex; gap:.55rem; align-items:center; flex-wrap:wrap; }
#themeSelect { padding:.45rem .55rem; border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:6px; font-size:.8rem; }
#themeSelect:focus { outline:var(--focus); outline-offset:2px; }

#cycle-selectors-wrapper { margin-bottom:1.75rem; }

#cycle-selectors {
    display:flex;
    gap:1.1rem;
    flex-wrap:wrap;
    background:var(--surface);
    padding:.9rem 1.1rem 1rem;
    border-radius:var(--radius-md);
    box-shadow:0 2px 6px rgba(0,0,0,.07);
    align-items:flex-end;
}

#cycle-selectors h2 { margin:0 1rem 0 0; font-size:1rem; font-weight:600; letter-spacing:.5px; background:var(--grad-primary); -webkit-background-clip:text; background-clip:text; color:transparent; display:flex; align-items:center; gap:.5rem; }
.cycle-shift-controls { display:inline-flex; gap:.35rem; margin-left:.25rem; }
.cycle-shift-controls button { background:#e2e8f0; color:#334155; padding:.25rem .45rem; border-radius:var(--radius-sm); font-size:.65rem; line-height:1; box-shadow:0 1px 2px rgba(0,0,0,.08); }
.cycle-shift-controls button:hover { background:#cbd5e1; }
.cycle-shift-controls button:active { background:#94a3b8; color:#fff; }
.cycle-shift-controls button:focus { outline:var(--focus); outline-offset:2px; }

#cycle-selectors .cycle-field { display:flex; flex-direction:column; gap:.35rem; min-width:160px; }
#cycle-selectors .cycle-field label { font-size:.65rem; font-weight:600; text-transform:uppercase; letter-spacing:.8px; color:var(--text-muted); }
#cycle-selectors .cycle-field input[type="date"] {
    padding:.55rem .6rem;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    background:var(--surface-alt);
    font-size:.8rem;
    line-height:1.1;
    transition: background .25s, border-color .25s, box-shadow .25s;
    color:var(--text);
}
#cycle-selectors .cycle-field input[type="date"]:focus {
    outline:var(--focus);
    outline-offset:2px;
    background:#fff;
    border-color:#2563eb;
}
#cycle-selectors .cycle-field input[type="date"]::-webkit-calendar-picker-indicator { opacity:.65; cursor:pointer; transition:opacity .25s; }
#cycle-selectors .cycle-field input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity:1; }

@media (max-width:540px){
  #cycle-selectors { flex-direction:column; align-items:stretch; }
  #cycle-selectors h2 { margin:0 0 .25rem; }
  #cycle-selectors .cycle-field { width:100%; }
}

section {
    margin-bottom: 2rem;
}

/* Charts Section */
#expense-charts h2 { margin-top:0; font-size:1.1rem; }
.charts-grid { display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.chart-block { background:var(--surface); padding:.85rem 1rem 1rem; border-radius:8px; box-shadow:0 1px 4px rgba(0,0,0,.08); display:flex; flex-direction:column; align-items:center; }
.chart-block figcaption { font-weight:600; margin:0 0 .5rem; font-size:.9rem; }
canvas { max-width:100%; height:auto; }
.chart-legend { list-style:none; margin:.75rem 0 0; padding:0; width:100%; display:flex; flex-direction:column; gap:.35rem; font-size:.7rem; }
.chart-legend li { display:flex; align-items:center; gap:.5rem; }
.chart-legend .swatch { width:14px; height:14px; border-radius:4px; flex-shrink:0; border:1px solid var(--border-strong); }
.chart-legend .label { flex:1 1 auto; color:var(--text); }
.chart-legend .value { font-variant-numeric:tabular-nums; font-weight:600; }
.chart-legend .percent { font-variant-numeric:tabular-nums; color:var(--text-muted); }

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

/* Configuration Section */
#config-section h2 { margin-top:0; }
.config-grid { display:grid; gap:1.25rem; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); }
.config-block { background:var(--surface); padding:.75rem .9rem; border-radius:8px; box-shadow:0 1px 4px rgba(0,0,0,.08); }
.config-block h3 { margin:.2rem 0 .6rem; font-size:.95rem; }
.config-list { list-style:none; margin:0 0 .5rem; padding:0; max-height:200px; overflow:auto; }
.config-list li { display:flex; justify-content:space-between; align-items:center; font-size:.75rem; background:var(--surface-alt); margin-bottom:.35rem; padding:.3rem .45rem; border-radius:4px; }
.config-list button { background:var(--danger); font-size:.6rem; padding:.25rem .45rem; }
.config-list button:hover { background:var(--danger-hover); }
.config-add-row { display:flex; gap:.4rem; }
.config-add-row input { flex:1 1 auto; font-size:.75rem; padding:.35rem .45rem; }
.config-add-row button { font-size:.7rem; padding:.4rem .65rem; }
.config-note { font-size:.65rem; color:#555; margin-top:.6rem; }
.legacy-option { color:#b45309; font-style:italic; }

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

button {
    cursor: pointer;
    background: var(--accent);
    color: #fff;
    border: none;
    padding: .55rem .9rem;
    border-radius: 6px;
    font-size: .9rem;
    transition: background .2s;
}
button:hover { background: var(--accent-hover); }

.table-wrapper {
    overflow-x: auto;
}

.table-add-row { margin-top:.6rem; }
.table-add-row button { font-size:.75rem; padding:.45rem .8rem; }

.jump-bottom { font-size:.6rem; margin-left:.5rem; text-decoration:none; background:var(--surface-alt); padding:.15rem .4rem; border-radius:4px; color:var(--text); border:1px solid var(--border); }
.jump-bottom:hover { background:var(--accent); color:#fff; border-color:var(--accent); }

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}

th,
td {
    padding: .55rem .6rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    font-size: .85rem;
    color: var(--text);
}

thead th {
    background: var(--table-head);
    font-weight: 600;
    color: var(--text);
}

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

tbody tr:hover { background: var(--table-row-hover); }

input[type="text"],
input[type="number"],
select {
    width: 100%;
    padding: .4rem .45rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: .8rem;
    background: var(--surface);
    color: var(--text);
}

input[type="number"] {
    text-align: right;
}

#summaries {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.summary-block h3 {
    margin-top: 0;
    font-size: 1rem;
}

.summary-table td,
.summary-table th {
    font-size: .75rem;
}

.summary-table tbody tr td:last-child {
    text-align: right;
}

#installments-section tfoot th,
#expense-section tfoot th,
#fixedcosts-section tfoot th,
#cash-section tfoot th { background: var(--footer-bg); color: var(--footer-text); font-weight:600; }

#expense-section tfoot th#expenseAmountTotal,
#fixedcosts-section tfoot th#fixedCostsTotal,
#installments-section tfoot th#instAmountTotal,
#installments-section tfoot th#instTotalRemainingTotal,
#cash-section tfoot th#cashExpensesTotal,
#expense-section tfoot th[colspan],
#fixedcosts-section tfoot th[colspan],
#cash-section tfoot th[colspan] {
    text-align: right;
}

#financial-summary { background: var(--surface); padding: 1rem 1.25rem; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,.08); }

#financial-summary h2 {
    margin-top: 0;
    font-size: 1.15rem;
}

.summary-grid {
    display: grid;
    gap: .65rem .9rem;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.summary-item { display:flex; justify-content:space-between; align-items:center; gap:.75rem; background: var(--summary-chip); padding:.45rem .6rem; border-radius:6px; font-size:.8rem; }

.summary-item .label {
    font-weight: 600;
    flex: 1 1 auto;
}

.summary-item .value { font-variant-numeric:tabular-nums; font-weight:600; color: var(--text); min-width:70px; text-align:right; }

#expectedIncome {
    max-width: 130px;
}

/* Negative financial indicator */
.summary-item .value.negative {
    color: var(--danger);
}

/* Row action styles */
.row-actions button {
    font-size: .65rem;
    padding: .35rem .55rem;
    margin-right: .35rem;
}
.row-actions button:last-child { margin-right: 0; }

/* Icon buttons */
.row-actions .icon-btn { padding:.35rem; display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; background:var(--danger); }
.row-actions .icon-btn svg { pointer-events:none; }
.row-actions .icon-btn:hover { background:var(--danger-hover); }
.row-actions .icon-btn:focus { outline:var(--focus); outline-offset:2px; }

.editing-row {
    background: #fff8d4 !important;
    transition: background .25s;
}

/* Confirmation Modal */
.modal.hidden { display: none; }
.modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal-backdrop { position: absolute; inset:0; background: rgba(0,0,0,.35); backdrop-filter: blur(2px); }
.modal-content { position: relative; background:#fff; padding:1.1rem 1.25rem 1rem; border-radius:10px; width: min(420px, 90%); box-shadow:0 6px 24px -2px rgba(0,0,0,.3); animation: modalIn .25s ease; z-index:2; pointer-events:auto; }
.modal { pointer-events:none; }
.modal:not(.hidden) .modal-content { pointer-events:auto; }
.modal-backdrop { pointer-events:auto; }
.modal-backdrop { z-index:1; }
.modal-content h3 { margin:.2rem 0 .7rem; font-size:1.05rem; }
.modal-content p { margin:.25rem 0 1rem; font-size:.85rem; line-height:1.3; }
.modal-actions { display:flex; justify-content:flex-end; gap:.6rem; }
.modal-actions button { min-width:90px; }
.modal-actions .secondary { background:#64748b; }
.modal-actions .secondary:hover { background:#475569; }
.modal-actions .primary { background:#dc2626; }
.modal-actions .primary:hover { background:#b91c1c; }
@keyframes modalIn { from { opacity:0; transform:translateY(10px);} to { opacity:1; transform:translateY(0);} }

/* Undo bar */
#undoBar button { background:#f59e0b; }
#undoBar button:hover { background:#d97706; }
/* (Removed modal, undo bar, editing highlight styles as feature simplified) */