/*
  Minhas Finanças — Dark Edition
  Atualização somente visual: nenhum cálculo, evento ou dado é alterado.
*/
:root {
  color-scheme: dark;
  --page: #080b11;
  --surface: #111722;
  --surface-raised: #161d29;
  --surface-soft: #1b2533;
  --text: #f4f7ff;
  --text-strong: #ffffff;
  --muted: #a7b4c6;
  --muted-low: #8c9bae;
  --border: #293443;
  --border-strong: #344154;
  --green: #42dba5;
  --green-soft: rgba(66,219,165,.12);
  --blue: #7ab6ff;
  --blue-soft: rgba(89,156,255,.14);
  --red: #ff8192;
  --red-soft: rgba(255,110,136,.13);
  --amber: #ffc86c;
  --amber-soft: rgba(255,188,77,.13);
  --purple: #bea6ff;
  --shadow: 0 16px 44px rgba(0,0,0,.20);
  --radius: 19px;
  font-synthesis: none;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font: 14px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text);
  background:
    radial-gradient(ellipse 65% 400px at 50% -270px, rgba(87,135,218,.105), transparent 90%),
    linear-gradient(180deg, #0b0e15 0, var(--page) 420px);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .47; }
button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 3px;
}
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
[hidden] { display: none !important; }
::selection { background: rgba(93,172,255,.36); color: white; }

/* Barras de rolagem discretas e sempre visíveis ao passar o mouse. */
* { scrollbar-width: thin; scrollbar-color: #46556b transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #38475e; border-radius: 99px; border: 2px solid #121925; }
::-webkit-scrollbar-thumb:hover { background: #647793; }

.app { max-width: 1440px; padding: 0 32px 54px; margin: 0 auto; }
.topbar {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 23px 0 24px; border-bottom: 1px solid rgba(133,153,181,.16);
}
.brand { display: flex; align-items: center; gap: 13px; color: inherit; text-decoration: none; min-width: 0; }
.brand-icon {
  display: grid; place-items: center; width: 45px; height: 45px;
  border-radius: 13px; color: #c6ffec;
  background: linear-gradient(145deg, #175c4c, #123a36);
  border: 1px solid rgba(105,239,193,.28);
  box-shadow: 0 8px 23px rgba(14,158,105,.12), inset 0 1px 0 rgba(255,255,255,.09);
}
.brand-icon svg { width: 23px; height: 23px; }
.brand-copy b { display:block; font-size:18px; line-height:1.15; letter-spacing:-.55px; font-weight:780; color:#fff; }
.brand-copy small { display:block; margin-top:4px; font-size:12px; color:var(--muted); }
.top-actions { display:flex; align-items:center; gap:10px; }
.mobile-text { display:none; }
button, .button { border:0; transition: background .18s, transform .16s, border-color .18s, box-shadow .18s; }
button:not(:disabled):active { transform:translateY(1px); }
.btn {
  display:inline-flex; justify-content:center; align-items:center; gap:8px;
  padding:10px 15px; border-radius:11px; font-weight:680; line-height:1.4; white-space:nowrap;
}
.btn.primary {
  color:#05281d; background:linear-gradient(130deg,#65e5b9,#41d49d);
  box-shadow: 0 8px 20px rgba(41,190,133,.14), inset 0 1px 0 rgba(255,255,255,.2);
}
.btn.primary:hover { background:linear-gradient(130deg,#85f5ce,#51e2ad); box-shadow:0 9px 25px rgba(45,195,140,.20); }
.btn.secondary { color:#e2eaf4; border:1px solid var(--border-strong); background:#18212d; }
.btn.secondary:hover, .icon-btn:hover { background:#243144; border-color:#465a72; }
.btn.soft { color:#a3f5d2; background:rgba(54,190,140,.16); border:1px solid rgba(81,221,166,.15); }
.btn.soft:hover { background:rgba(54,190,140,.25); }
.btn.danger { background:var(--red-soft); color:var(--red); }
.btn.sm { padding:8px 12px; font-size:12px; border-radius:9px; }
.icon-btn {
  width:35px; height:35px; display:inline-grid; place-items:center; flex-shrink:0;
  color:#b4c1d3; border:1px solid var(--border); background:#19212d; border-radius:10px;
}
.icon-btn svg { width:17px; height:17px; }
.icon-btn.danger-hover:hover { background:var(--red-soft); color:var(--red); border-color:rgba(255,126,149,.35); }

/* Cabeçalho do dashboard */
.overview-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:18px; margin:34px 0 23px; }
h1,h2,h3,h4,p { margin-top:0; }
h1 { font-size:clamp(28px,3vw,35px); line-height:1.15; letter-spacing:-1.15px; margin:6px 0 7px; font-weight:800; color:#fff; }
.eyebrow { color:var(--green); text-transform:uppercase; font-size:11px; letter-spacing:1.55px; font-weight:800; }
.section-subtitle, .subtle { color:var(--muted); }
.overview-heading p { margin:0; font-size:13px; }
.month-nav {
  display:flex; gap:8px; align-items:center; padding:5px; flex-shrink:0;
  background:#171e29; border:1px solid var(--border-strong); border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.month-nav strong { min-width:148px; text-align:center; font-size:13px; text-transform:capitalize; color:#f4f7ff; font-weight:720; }
.month-nav .icon-btn { border:0; background:transparent; border-radius:8px; }
.month-nav .icon-btn:hover { background:#293548; }

/* Os quatro indicadores utilizam uma cor sutil por categoria, mas números claros. */
.metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; }
.metric {
  --accent:#9db7ff; --tint:rgba(113,129,238,.10);
  position:relative; isolation:isolate; overflow:hidden;
  min-width:0; min-height:158px; padding:21px 21px 19px;
  background:linear-gradient(145deg, var(--tint), rgba(255,255,255,.011) 67%), #131924;
  border:1px solid #303a50; border-radius:19px;
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.03);
}
.metric::before { content:""; position:absolute; inset:0 auto auto 0; width:100%; height:2px; background:linear-gradient(90deg,var(--accent),transparent 95%); opacity:.84; }
.metric::after { content:""; position:absolute; z-index:-1; right:-60px; top:-90px; width:175px; height:175px; border-radius:50%; background:var(--tint); filter:blur(16px); opacity:.9; pointer-events:none; }
.metric:nth-child(1) { --accent:#b5a1ff; --tint:rgba(134,103,238,.13); border-color:rgba(171,150,255,.24); }
.metric:nth-child(2) { --accent:#78b3ff; --tint:rgba(74,143,255,.13); border-color:rgba(120,174,255,.26); }
.metric:nth-child(3) { --accent:#59e9aa; --tint:rgba(52,205,145,.12); border-color:rgba(85,224,165,.25); }
.metric:nth-child(4) { --accent:#ffcb75; --tint:rgba(245,177,72,.12); border-color:rgba(255,194,102,.25); }
.metric-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.metric-title { font-size:12px; color:#dbe3ee; font-weight:710; letter-spacing:.06px; }
.metric-icon { width:36px; height:36px; display:grid; place-items:center; border-radius:11px; color:var(--accent); background:rgba(181,161,255,.13); border:1px solid rgba(181,161,255,.13); }
.metric-icon.green { background:var(--green-soft); color:var(--green); border-color:rgba(66,219,165,.2); }
.metric-icon.amber { background:var(--amber-soft); color:var(--amber); border-color:rgba(255,200,108,.19); }
.metric-icon.blue { background:var(--blue-soft); color:var(--blue); border-color:rgba(122,182,255,.2); }
.metric-icon svg { width:18px; height:18px; }
.metric-value {
  margin:14px 0 7px; font-size:clamp(22px,2.25vw,30px); line-height:1.16;
  font-weight:800; color:#fff; letter-spacing:-1px; font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere; text-shadow:0 1px 8px rgba(0,0,0,.12);
}
.metric-description { color:#aebdd0; font-size:11px; }

/* Painéis */
.grid-main { display:grid; grid-template-columns:minmax(0,1.75fr) minmax(310px,1fr); gap:18px; margin-top:22px; align-items:start; }
.lower-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px; align-items:start; }
.panel {
  min-width:0; overflow:hidden; background:#111721;
  border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:0 13px 36px rgba(0,0,0,.13), inset 0 1px 0 rgba(255,255,255,.025);
}
.panel-head { padding:22px 23px 18px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.panel-head h2 { margin:0; font-size:17px; color:#fff; font-weight:765; letter-spacing:-.45px; }
.panel-head p { margin:3px 0 0; color:var(--muted); font-size:12px; }
.panel-head > svg { color:#a5b7c9 !important; }
.panel-actions { display:flex; align-items:center; gap:8px; }
.filters { display:flex; gap:5px; padding:0 21px 12px; border-bottom:1px solid var(--border); }
.filter-btn { padding:7px 12px; color:#9cacbf; background:transparent; font-size:12px; font-weight:660; border-radius:9px; }
.filter-btn:hover { background:#202b3b; color:#ecf5ff; }
.filter-btn.selected { color:#b2ffdc; background:rgba(53,208,147,.15); }

/* Listas com altura controlada: crescem até o limite e depois rolam internamente. */
#expensesContent { max-height:500px; overflow-y:auto; overscroll-behavior:contain; }
#upcomingContent { max-height:500px; overflow-y:auto; overscroll-behavior:contain; }
.card-list, .loan-list {
  max-height:560px; overflow-y:auto; overscroll-behavior:contain;
  display:grid; align-content:start; gap:12px; padding:0 17px 18px;
}
.table-scroller { overflow-x:auto; }
table { width:100%; border-collapse:separate; border-spacing:0; text-align:left; }
th {
  position:sticky; top:0; z-index:2;
  padding:12px 17px; color:#9daec5; background:#1a2230;
  border-bottom:1px solid #334050; font-weight:730; font-size:11px; white-space:nowrap;
}
td { padding:15px 17px; vertical-align:middle; border-bottom:1px solid rgba(131,154,181,.12); }
tr:last-child td { border-bottom:0; }
tbody tr { transition:background .15s; }
tbody tr:hover { background:rgba(100,125,164,.075); }
.name-line { display:block; color:#f2f6fe; font-size:13px; font-weight:730; line-height:1.28; }
.detail-line { display:block; margin-top:5px; color:#9caec3; font-size:11px; }
.amount { color:#f5f8ff; font-weight:780; font-size:13px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.nowrap { white-space:nowrap; color:#c8d3e2; }
.status { display:inline-flex; gap:6px; align-items:center; padding:5px 10px; white-space:nowrap; border-radius:100px; font-size:11px; font-weight:745; }
.status::before { content:""; width:6px; height:6px; background:currentColor; border-radius:50%; box-shadow:0 0 6px currentColor; }
.status.paid { color:#83f2bf; background:rgba(59,205,143,.16); }
.status.pending { color:#d1daea; background:#252e3d; }
.status.overdue { color:#ff9aab; background:rgba(250,90,121,.16); }
.status.soon { color:#ffd48a; background:rgba(255,183,73,.14); }
.status.transferred { color:#99c8ff; background:rgba(72,141,249,.17); }
.table-actions { display:flex; align-items:center; justify-content:flex-end; gap:5px; }
.table-actions .icon-btn { width:29px; height:29px; border-color:transparent; background:transparent; }
.table-actions .icon-btn:hover { background:#263448; }
.table-actions .icon-btn svg { width:15px; height:15px; }
.empty { padding:46px 20px 48px; text-align:center; color:var(--muted); }
.empty .empty-icon { display:grid; place-items:center; width:48px; height:48px; margin:0 auto 13px; border-radius:15px; background:#213547; color:#88eac6; }
.empty .empty-icon svg { width:22px; height:22px; }
.empty b { display:block; color:#e1eaf5; font-size:14px; margin-bottom:5px; }
.empty p { margin:0 auto 15px; font-size:12px; max-width:300px; }

/* Próximos vencimentos */
.due-list { padding:0 16px 15px; }
.due-item { display:flex; align-items:center; gap:12px; padding:14px 7px; border-top:1px solid var(--border); }
.due-date {
  width:48px; height:49px; flex-shrink:0; border-radius:11px;
  display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;
  background:#222d3b; color:#a9bbcf; border:1px solid #303e50;
}
.due-date strong { color:#fff; font-size:18px; line-height:1.1; }
.due-date span { font-size:10px; text-transform:uppercase; line-height:1.4; }
.due-content { min-width:0; flex:1; }
.due-content strong { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:12px; color:#edf5ff; font-weight:720; }
.due-content small { color:#9baec4; font-size:11px; }
.due-money { text-align:right; flex-shrink:0; }
.due-money strong { display:block; font-size:12px; color:#fff; font-weight:780; font-variant-numeric:tabular-nums; }
.due-money small { color:var(--red); font-size:10px; }

/* Cartões e empréstimos: cartões internos com superfícies distintas. */
.credit-card, .loan-card {
  min-width:0; padding:18px 18px 16px;
  border:1px solid #354256; border-radius:15px;
  background:linear-gradient(150deg,#1a2332 0%,#151e2a 74%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.credit-card { border-top:2px solid rgba(116,174,255,.64); }
.loan-card { border-top:2px solid rgba(192,157,255,.61); background:linear-gradient(150deg,#1c2332 0%,#161d29 74%); }
.credit-head, .loan-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:18px; }
.card-identity { display:flex; align-items:center; gap:11px; min-width:0; }
.card-identity > span:last-child { min-width:0; }
.card-glyph { display:grid; place-items:center; width:40px; height:40px; flex-shrink:0; border-radius:12px; color:#fff; border:1px solid rgba(255,255,255,.2); box-shadow:inset 0 1px 0 rgba(255,255,255,.15); }
.card-identity strong, .loan-head strong { display:block; font-size:14px; color:#fff; font-weight:770; line-height:1.3; overflow-wrap:anywhere; }
.card-identity small, .loan-head small { display:block; font-size:11px; color:#afc0d4; margin-top:4px; }
.card-menu { display:flex; flex-shrink:0; gap:4px; }
.card-menu .icon-btn { background:#202b3c; }
.card-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 13px; margin-bottom:16px; }
.data-title { display:block; color:#a6b7cb; font-size:11px; }
.data-value { display:block; font-weight:800; color:#fff; font-size:16px; letter-spacing:-.4px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.card-details > div:nth-child(1) .data-value { color:#9bcaff; }
.card-details > div:nth-child(2) .data-value { color:#9ff2c9; }
.progress-track { width:100%; height:8px; margin-top:10px; border-radius:20px; overflow:hidden; background:#303b50; }
.progress-fill { height:100%; border-radius:20px; background:linear-gradient(90deg,#51dcae,#6bf0c1); transition:width .28s ease; }
.progress-fill.over { background:linear-gradient(90deg,#f59d6d,#ff758e); }
.progress-caption { display:flex; justify-content:space-between; gap:7px; margin-top:7px; color:#a7b6c8; font-size:10px; }
.card-footer { display:flex; justify-content:space-between; align-items:center; gap:9px; padding-top:14px; margin-top:17px; border-top:1px solid #334052; }
.footer-hint { color:#a9b9ce; font-size:11px; }
.loan-head { margin-bottom:14px; }
.loan-progress { margin-bottom:18px; }
.loan-progress .progress-fill { background:linear-gradient(90deg,#a48cf0,#c9b2ff); }
.loan-progress .progress-track { margin-top:6px; }
.loan-stat { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:13px 0 15px; }
.loan-stat strong { display:block; color:#f7f8ff; font-size:16px; font-weight:820; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.loan-stat small { display:block; color:#a6b7cb; font-size:10px; }
.loan-due {
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:13px; background:#222b3b; border:1px solid #303e53; border-radius:11px;
}
.loan-due > div:first-child { min-width:0; }
.loan-due b { display:block; font-size:12px; color:#f4f6ff; }
.loan-due span { display:block; color:#abbdd1; font-size:11px; }
.loan-actions { display:flex; gap:5px; flex-shrink:0; align-items:center; }
.panel-footnote { padding:0 23px 17px; color:var(--muted-low); font-size:11px; }
.hint-banner { margin-top:22px; color:#8fa1b8; text-align:center; font-size:11px; }

/* Modal e formulários: contraste elevado, inclusive nos campos date/number. */
.modal-backdrop { position:fixed; inset:0; z-index:20; display:grid; place-items:center; overflow-y:auto; padding:20px; background:rgba(1,4,9,.81); backdrop-filter:blur(8px); }
.modal { width:100%; max-width:520px; max-height:min(92vh,900px); overflow:auto; border-radius:19px; background:#141c28; border:1px solid #3a4860; box-shadow:0 30px 110px rgba(0,0,0,.65); }
.modal.wide { max-width:680px; }
.modal-head { display:flex; justify-content:space-between; align-items:center; padding:21px 24px; border-bottom:1px solid var(--border); }
.modal-head h2 { margin:0; color:#fff; font-size:18px; font-weight:790; letter-spacing:-.4px; }
.modal-body { padding:22px 24px 25px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.field { min-width:0; }
.field.full { grid-column:1/-1; }
.field label { display:block; margin-bottom:6px; color:#d7e3f0; font-size:12px; font-weight:700; }
.field input, .field select {
  width:100%; min-width:0; padding:11px 12px;
  color:#fff; background:#0e1520; border:1px solid #405066; border-radius:10px;
  outline:0; color-scheme:dark;
}
.field input:hover, .field select:hover { border-color:#60728b; }
.field input:focus, .field select:focus { border-color:#67dba9; box-shadow:0 0 0 3px rgba(69,218,154,.13); }
.field input::placeholder { color:#8296ac; }
.field select option { background:#162030; color:#fff; }
.form-help { margin:5px 0 0; color:#a3b2c6; font-size:11px; }
.form-note { padding:12px 13px; color:#bbcada; background:#202c3b; border:1px solid #354458; border-radius:10px; font-size:12px; line-height:1.55; }
.form-buttons { display:flex; justify-content:flex-end; gap:9px; margin-top:24px; }
.form-error { color:var(--red); font-size:12px; font-weight:700; margin:12px 0 0; }
.modal-summary { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; margin:0 0 18px; background:#202c3b; border:1px solid #334155; border-radius:12px; }
.modal-summary strong { color:#fff; font-size:20px; }
.modal-summary small { display:block; color:#a6b7c9; font-size:11px; }
.modal-summary > span { color:#bbcde0; }
.invoice-navigation { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:16px; }
.invoice-navigation strong { text-transform:capitalize; color:#fff; }
.invoice-totals { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-bottom:17px; }
.invoice-total { min-width:0; padding:13px 10px; background:#222f42; border:1px solid #34445a; border-radius:11px; }
.invoice-total:nth-child(2) { background:#173429; border-color:#2c5645; }
.invoice-total:nth-child(3) { background:#392a20; border-color:#59412b; }
.invoice-total small { display:block; color:#bfccdc; font-size:10px; }
.invoice-total b { display:block; color:#fff; font-size:15px; font-weight:795; letter-spacing:-.3px; overflow-wrap:anywhere; }
.invoice-section-title { display:block; margin:17px 0 7px; font-size:12px; color:#f1f5fc; font-weight:790; }
.invoice-row { display:flex; justify-content:space-between; gap:12px; padding:12px 0; border-top:1px solid var(--border); }
.invoice-row b { display:block; color:#eaf2fc; font-size:12px; }
.invoice-row small { color:#abbdd0; font-size:10px; }
.invoice-row .amount { font-size:12px; }
.invoice-bottom { display:flex; justify-content:flex-end; margin-top:19px; }
.toast { position:fixed; bottom:26px; right:26px; z-index:50; max-width:min(420px,calc(100vw - 40px)); padding:13px 17px; color:#ecfff7; background:#164c3d; border:1px solid #2b7f60; border-radius:11px; box-shadow:0 18px 48px rgba(0,0,0,.35); font-size:13px; }
.toast.error { color:#ffe0e5; background:#6b2835; border-color:#914352; }
.backup-menu { position:relative; }
.backup-dropdown { position:absolute; right:0; top:calc(100% + 8px); width:205px; z-index:10; padding:6px; background:#192331; border:1px solid var(--border-strong); border-radius:12px; box-shadow:0 18px 48px rgba(0,0,0,.42); }
.backup-dropdown button { display:flex; align-items:center; gap:9px; width:100%; padding:11px; color:#e1e9f6; background:transparent; text-align:left; font-size:12px; border:0; border-radius:8px; }
.backup-dropdown button:hover { background:#2a3950; }
.backup-dropdown svg { width:16px; height:16px; }
body.modal-open { overflow:hidden; }

@media (max-width:1120px) {
  .app { padding:0 21px 39px; }
  .metrics { gap:11px; }
  .metric { padding:19px 16px 17px; }
  .grid-main { grid-template-columns:minmax(0,1.4fr) minmax(270px,1fr); }
  th,td { padding-left:13px; padding-right:13px; }
  .panel-head { padding-left:18px; padding-right:18px; }
}
@media (max-width:890px) {
  .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid-main, .lower-grid { grid-template-columns:1fr; }
  .card-list, .loan-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:610px) {
  .app { padding:0 13px 30px; }
  .topbar { padding:16px 0 19px; }
  .brand { gap:9px; }
  .brand-icon { width:39px; height:39px; border-radius:11px; }
  .brand-copy b { font-size:15px; }
  .brand-copy small { display:none; }
  .top-actions { gap:6px; }
  .top-actions .btn.secondary { padding:9px 10px; }
  .top-actions .btn.primary { padding:9px 12px; font-size:12px; }
  .top-actions .btn.primary .wide-text { display:none; }
  .top-actions .btn.primary .mobile-text { display:inline; }
  .overview-heading { flex-direction:column; align-items:flex-start; gap:17px; margin:27px 0 18px; }
  h1 { font-size:27px; }
  .month-nav { align-self:stretch; justify-content:space-between; }
  .month-nav strong { min-width:0; }
  .metrics { gap:10px; }
  .metric { min-height:138px; padding:16px 14px; border-radius:15px; }
  .metric-value { font-size:clamp(18px,5vw,24px); letter-spacing:-.65px; margin-top:12px; }
  .metric-title { font-size:11px; }
  .metric-icon { width:29px; height:29px; border-radius:9px; }
  .metric-icon svg { width:16px; height:16px; }
  .metric-description { font-size:10px; line-height:1.4; }
  .grid-main, .lower-grid { gap:13px; margin-top:13px; }
  .panel { border-radius:15px; }
  .panel-head { padding:17px 15px 14px; }
  .panel-head h2 { font-size:16px; }
  .panel-head .btn.sm { font-size:11px; padding:8px 9px; }
  .filters { padding-left:10px; }
  #expensesContent { max-height:470px; }
  #upcomingContent { max-height:410px; }
  .card-list, .loan-list { grid-template-columns:1fr; max-height:520px; padding:0 12px 12px; }
  .due-list { padding:0 11px 12px; }
  .due-item { gap:9px; }
  .table-scroller { overflow:visible; }
  .table-scroller table, .table-scroller tbody, .table-scroller tr, .table-scroller td { display:block; min-width:0; }
  .table-scroller thead { display:none; }
  .table-scroller tr { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:10px; row-gap:8px; align-items:center; padding:14px; border-bottom:1px solid var(--border); }
  .table-scroller tr:last-child { border-bottom:0; }
  .table-scroller td { padding:0; border:0; }
  .table-scroller td:nth-child(1) { grid-column:1; grid-row:1; }
  .table-scroller td:nth-child(2) { grid-column:1; grid-row:2; font-size:11px; color:var(--muted); }
  .table-scroller td:nth-child(3) { grid-column:2; grid-row:1; text-align:right; }
  .table-scroller td:nth-child(4) { grid-column:1; grid-row:3; }
  .table-scroller td:nth-child(5) { grid-column:2; grid-row:2 / span 2; }
  .table-scroller .table-actions { gap:4px; }
  .modal-backdrop { padding:10px; align-items:end; }
  .modal { border-radius:17px 17px 10px 10px; max-height:94vh; }
  .modal-head { padding:17px 18px; }
  .modal-body { padding:19px 18px 24px; }
  .form-grid { gap:11px; }
  .invoice-totals { gap:6px; }
  .invoice-total { padding:10px 7px; }
  .invoice-total b { font-size:13px; }
  .toast { left:15px; right:15px; bottom:15px; max-width:none; }
}
@media (max-width:390px) {
  .form-grid { grid-template-columns:1fr; }
  .field.full { grid-column:1; }
  .brand-copy b { font-size:14px; }
  .metric-value { font-size:18px; }
  .metric { padding:14px 12px; }
  .card-footer { flex-wrap:wrap; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; transition-duration:0s !important; animation-duration:0s !important; }
}
/* Datas de parcelas sempre legíveis, sem quebra de ano em celulares. */
.loan-stat > div:last-child strong { font-size:13px; white-space:nowrap; overflow-wrap:normal; letter-spacing:-.35px; }
@media (max-width:390px) {
  .loan-stat > div:last-child strong { font-size:12px; }
}