:root {
  --font-geist-sans: Arial;
  --ink: #20243a;
  --muted: #73798b;
  --line: #e8eaf0;
  --paper: #ffffff;
  --wash: #f5f6fa;
  --indigo: #013B5C;
  --indigo-dark: #002B44;
  --mint: #80BC00;
  --coral: #ec7b67;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; max-width: 100%; overflow-x: hidden; -webkit-text-size-adjust: 100%; }
body { margin: 0; max-width: 100%; overflow-x: hidden; background: var(--wash); color: var(--ink); font-family: var(--font-geist-sans), Arial, sans-serif; }
button, input, select { font: inherit; }
button { cursor: pointer; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 235px 1fr; }
.sidebar { position: sticky; top: 0; height: 100vh; background: #fbfbfd; border-right: 1px solid var(--line); padding: 29px 22px 23px; display: flex; flex-direction: column; z-index: 5; }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 10px 35px; font-size: 20px; font-weight: 760; letter-spacing: -0.6px; }
.brand-mark { position: relative; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: white; background: linear-gradient(145deg, var(--indigo), var(--indigo-dark)); font-size: 19px; font-weight: 850; box-shadow: 0 7px 16px #013B5C26; }
.brand-mark::after { content: ""; position: absolute; width: 8px; height: 8px; right: -2px; bottom: 3px; border-radius: 50%; background: var(--mint); border: 2px solid var(--paper); }
.brand-name { display: inline-flex; gap: 5px; align-items: baseline; }
.brand-name strong { color: var(--mint); font-weight: 820; }
.sidebar nav { display: grid; gap: 6px; }
.nav-item { color: #777d8f; text-decoration: none; display: flex; align-items: center; gap: 13px; border-radius: 10px; padding: 12px 13px; font-size: 13px; font-weight: 570; transition: .2s ease; }
.nav-item span { font-size: 18px; width: 20px; text-align: center; }
.nav-item:hover { color: var(--ink); background: #f1f2f7; }
.nav-item.active { color: var(--indigo); background: #eaf2f5; }
.sidebar-tip { margin-top: auto; background: #f3f8e7; border: 1px solid #e2edc5; border-radius: 14px; padding: 17px; }
.tip-icon { display: grid; place-items: center; width: 29px; height: 29px; background: white; color: var(--mint); border-radius: 9px; margin-bottom: 11px; }
.sidebar-tip strong { font-size: 12px; line-height: 1.4; display: block; }
.sidebar-tip p { color: #777d94; font-size: 11px; line-height: 1.5; margin: 6px 0 0; }
.profile { border: 0; background: none; display: flex; align-items: center; gap: 10px; padding: 20px 4px 0; text-align: left; color: var(--ink); text-decoration: none; }
.avatar { width: 33px; height: 33px; display: grid; place-items: center; background: #eaf2f5; color: var(--indigo-dark); border-radius: 50%; font-size: 10px; font-weight: 750; }
.profile > span:nth-child(2) { display: grid; gap: 2px; flex: 1; }
.profile strong { font-size: 11px; }.profile small { color: #9297a5; font-size: 9px; }.profile b { color: #a2a6b1; }

.content { min-width: 0; padding: 31px 42px 24px; max-width: 1550px; width: 100%; margin: 0 auto; }
.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.topbar-actions { display: flex; align-items: center; gap: 9px; }
.theme-toggle { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 10px; font-size: 18px; }
.theme-toggle:hover { border-color: var(--indigo); color: var(--indigo); }
.eyebrow, .section-kicker { margin: 0 0 5px; color: var(--indigo); font-size: 9px; font-weight: 780; letter-spacing: 1.4px; }
h1 { font-size: 23px; letter-spacing: -.7px; margin: 0; font-weight: 710; }
h2 { font-size: 15px; margin: 2px 0 0; letter-spacing: -.25px; }
.primary-button { border: 0; color: white; background: var(--indigo); border-radius: 10px; padding: 11px 17px; display: flex; gap: 7px; align-items: center; font-weight: 650; font-size: 12px; box-shadow: 0 7px 18px #013B5C2c; transition: .2s ease; }
.primary-button:hover, .save-button:hover { background: var(--indigo-dark); transform: translateY(-1px); }
.primary-button span { font-size: 17px; line-height: 0; }
.demo-banner, .error-banner { display: flex; gap: 12px; align-items: center; border: 1px solid #e1e4fb; background: #f0f2ff; border-radius: 11px; padding: 10px 14px; margin-bottom: 15px; font-size: 11px; }
.demo-banner > span { color: var(--indigo); font-size: 17px; }.demo-banner strong { display: block; font-size: 11px; }.demo-banner p { color: #777d94; margin: 2px 0 0; }
.error-banner { color: #9f4637; background: #fff1ee; border-color: #ffd8d0; }
.master-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: #252a43; color: white; border-radius: 11px; padding: 10px 13px; margin-bottom: 14px; }
.master-toolbar > div { display: flex; align-items: center; gap: 9px; color: #bdc1d1; font-size: 10px; }.master-badge { color: white; background: var(--indigo); border-radius: 6px; padding: 4px 6px; font-size: 7px; font-weight: 800; letter-spacing: .8px; }
.master-toolbar select { min-width: 270px; border: 1px solid #ffffff24; background: #ffffff12; color: white; border-radius: 8px; padding: 8px 10px; font-size: 10px; outline: none; }.master-toolbar option { color: #20243a; background: white; }

.dashboard-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.segmented { padding: 3px; background: #e9ebf1; border-radius: 9px; display: flex; }
.segmented button { border: 0; background: transparent; color: #7b8090; border-radius: 7px; padding: 7px 16px; font-size: 11px; font-weight: 630; }
.segmented button.selected { background: white; color: var(--ink); box-shadow: 0 2px 7px #25315b12; }
.period-picker { display: flex; align-items: center; gap: 12px; background: white; border: 1px solid var(--line); border-radius: 9px; padding: 4px; }
.period-picker button { border: 0; background: transparent; color: #8a8f9e; width: 25px; height: 25px; border-radius: 6px; font-size: 18px; }
.period-picker button:hover { background: var(--wash); }.period-picker strong { min-width: 112px; text-align: center; font-size: 11px; }

.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-bottom: 13px; }
.metric-card { position: relative; min-height: 130px; background: var(--paper); border: 1px solid var(--line); border-radius: 13px; padding: 17px; display: flex; flex-direction: column; overflow: hidden; }
.metric-card.featured::after { content: ""; position: absolute; width: 80px; height: 80px; border-radius: 50%; right: -28px; top: -31px; background: #edf0ff; }
.metric-icon { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; color: var(--mint); background: #e9f7f2; font-size: 15px; margin-bottom: 12px; }
.metric-icon.violet { color: var(--indigo); background: #eef0ff; }.metric-icon.coral { color: var(--coral); background: #fff0ed; }.metric-icon.amber { color: #b57912; background: #fff5df; }
.metric-card > span { font-size: 10px; color: #7f8494; margin-bottom: 5px; }
.metric-card > strong { font-size: 20px; letter-spacing: -.65px; margin-bottom: 5px; }
.metric-card small { font-size: 9px; color: #9297a4; }.metric-card small.negative { color: #d76b56; }.metric-card small.positive { color: var(--mint); }.metric-card small em { color: #9a9eaa; font-style: normal; }

.dashboard-grid { display: grid; grid-template-columns: 1.05fr 1.35fr; gap: 13px; margin-bottom: 13px; }
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: 13px; padding: 18px; }
.panel-heading { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }
.panel-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.subtle { color: #8c91a0; font-size: 10px; background: var(--wash); padding: 6px 9px; border-radius: 7px; }
.category-content { display: grid; grid-template-columns: 155px 1fr; align-items: center; gap: 22px; min-height: 192px; }
.donut { width: 142px; height: 142px; border-radius: 50%; position: relative; display: grid; place-items: center; transform: rotate(-35deg); }
.donut-hole { width: 88px; height: 88px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: white; border-radius: 50%; transform: rotate(35deg); box-shadow: 0 0 0 1px #f3f4f7; }
.donut-hole small { color: #9397a4; font-size: 9px; }.donut-hole strong { font-size: 13px; margin-top: 3px; }
.category-list { display: grid; gap: 8px; }
.category-row { display: grid; grid-template-columns: 27px 1fr auto; gap: 9px; align-items: center; }
.category-dot { width: 25px; height: 25px; display: grid; place-items: center; color: white; border-radius: 8px; font-size: 11px; }
.category-row > div { display: grid; gap: 2px; }.category-row strong { font-size: 10px; }.category-row small { color: #9a9eaa; font-size: 8px; }.category-row > b { font-size: 10px; }
.chart-panel { min-width: 0; }
.chart-area { height: 190px; display: flex; align-items: flex-end; gap: 8px; padding: 18px 5px 0; border-bottom: 1px solid #eceef3; background: repeating-linear-gradient(to top, transparent 0, transparent 47px, #f0f1f5 48px); }
.bar-column { height: 100%; flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; }
.bar { width: min(24px, 72%); min-height: 5px; background: #d7dcfa; border-radius: 5px 5px 2px 2px; transition: .3s ease; }
.bar:hover { background: #aeb8f5; }.bar.current { background: var(--indigo); box-shadow: 0 5px 10px #013B5C2b; }
.bar-column small { height: 24px; padding-top: 8px; color: #969aa6; font-size: 8px; }.bar-column:nth-child(2n) .bar-value { opacity: 0; }
.bar-value { color: #8e93a1; font-size: 7px; margin-bottom: 4px; }

.payment-dashboard { margin-bottom: 13px; }
.payment-layout { display: grid; grid-template-columns: 1fr 205px; gap: 18px; align-items: stretch; }
.credit-card-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.credit-card-summary { border: 1px solid #eceef3; border-radius: 12px; padding: 14px; min-width: 0; background: linear-gradient(145deg, #fff, #fafafd); }
.card-identity { display: flex; align-items: center; gap: 9px; margin-bottom: 17px; }
.card-identity > span { width: 29px; height: 29px; border-radius: 9px; display: grid; place-items: center; color: white; font-size: 8px; font-weight: 800; }
.card-identity > div { display: grid; gap: 1px; }.card-identity small, .credit-card-summary > small { color: #979ba8; font-size: 8px; }.card-identity strong { font-size: 10px; }
.card-amount { display: block; font-size: 16px; letter-spacing: -.35px; margin-bottom: 10px; }
.payment-progress { height: 5px; background: #eceef3; border-radius: 99px; overflow: hidden; margin-bottom: 6px; }.payment-progress i { display: block; height: 100%; border-radius: inherit; }
.payment-total-card { color: white; background: #252a43; border-radius: 13px; padding: 16px; display: flex; flex-direction: column; }
.payment-total-icon { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: #ffffff18; font-size: 12px; margin-bottom: 16px; }
.payment-total-card > small { color: #bdc1d1; font-size: 8px; }.payment-total-card > strong { font-size: 19px; margin: 3px 0 13px; }
.payment-total-card > div { border-top: 1px solid #ffffff18; padding-top: 10px; display: flex; justify-content: space-between; font-size: 9px; }.payment-total-card > div span { color: #bdc1d1; }
.payment-total-card p { color: #9fa5ba; font-size: 8px; line-height: 1.5; margin: auto 0 0; padding-top: 12px; }

.transactions { padding-bottom: 7px; }
.text-button { color: var(--indigo); background: #f1f2ff; border: 0; border-radius: 7px; padding: 7px 10px; font-size: 9px; font-weight: 680; }
.transaction-head, .transaction-row { display: grid; grid-template-columns: minmax(145px, 1.4fr) minmax(86px, .9fr) minmax(105px, 1fr) minmax(82px, .8fr) 54px minmax(72px, .65fr) 92px; gap: 10px; align-items: center; }
.transaction-head { color: #a1a5b1; font-size: 8px; text-transform: uppercase; letter-spacing: .5px; border-bottom: 1px solid #eef0f4; padding: 0 8px 9px; }
.transaction-row { min-height: 52px; border-bottom: 1px solid #f0f1f4; padding: 5px 8px; color: #777d8d; font-size: 9px; }
.transaction-row:last-child { border-bottom: 0; }.transaction-row > strong { color: var(--ink); text-align: right; font-size: 10px; }
.transaction-name { display: flex; align-items: center; gap: 10px; color: var(--ink); min-width: 0; }.transaction-name strong { font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.category-icon { width: 29px; height: 29px; border-radius: 8px; display: grid; place-items: center; font-size: 13px; flex: 0 0 auto; }
.category-label { display: flex; gap: 6px; align-items: center; }.category-label i { width: 6px; height: 6px; border-radius: 50%; }
.payment-label { display: flex; gap: 6px; align-items: center; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.payment-label i { width: 20px; height: 20px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 6px; color: white; font-size: 6px; font-style: normal; font-weight: 800; }
.kind-badge { width: max-content; border-radius: 99px; padding: 4px 7px; font-size: 8px; }.kind-badge.recurring { color: #5468d5; background: #eef0ff; }.kind-badge.daily { color: #66707f; background: #f0f2f5; }
.row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }.edit-button { border: 1px solid #dde1fb; background: #f1f2ff; color: var(--indigo); border-radius: 7px; font-size: 9px; font-weight: 700; padding: 6px 8px; white-space: nowrap; }.delete-button { width: 25px; height: 25px; border: 0; border-radius: 7px; background: transparent; color: #aeb2bf; font-size: 16px; padding: 0; }.edit-button:hover:not(:disabled) { background: #e7e9ff; }.delete-button:hover:not(:disabled) { color: #da6b59; background: #fff0ed; }.edit-button:disabled, .delete-button:disabled { opacity: .25; cursor: default; }
footer { text-align: center; color: #a0a4b0; font-size: 9px; padding: 18px 0 0; }

.users-panel { margin-bottom: 13px; }
.invite-form { display: grid; grid-template-columns: .8fr 1.2fr auto; gap: 10px; align-items: end; padding: 13px; margin-bottom: 12px; border-radius: 11px; background: var(--wash); }
.invite-form label { display: grid; gap: 5px; color: var(--muted); font-size: 8px; font-weight: 650; }.invite-form input { width: 100%; border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 8px; padding: 9px 10px; outline: none; font-size: 10px; }.invite-form input:focus { border-color: var(--indigo); }
.user-list { display: grid; }.user-row { display: grid; grid-template-columns: 31px 1.25fr auto 1fr auto auto; gap: 10px; align-items: center; min-height: 53px; padding: 7px 8px; border-bottom: 1px solid var(--line); }.user-row:last-child { border-bottom: 0; }
.user-avatar { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; color: var(--indigo); background: #eef0ff; font-size: 8px; font-weight: 750; }.user-row > div { display: grid; gap: 2px; }.user-row strong { font-size: 10px; }.user-row small, .login-status { color: var(--muted); font-size: 8px; }
.user-status { border-radius: 99px; padding: 4px 7px; color: #607083; background: #eef0f3; font-size: 8px; }.user-status.active { color: #238365; background: #e7f6f1; }.status-button { border: 0; background: transparent; color: #858b9a; font-size: 8px; }.status-button:hover { color: var(--coral); }

.auth-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 20% 10%, #e8ebff 0, transparent 35%), var(--wash); }
.auth-card { width: min(430px, 100%); text-align: center; background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 38px; box-shadow: 0 24px 70px #25315b17; }.auth-card .brand-mark { margin: 0 auto 22px; }.auth-card h1 { font-size: 24px; }.auth-card > p:not(.eyebrow) { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 12px 0 23px; }.auth-button { display: block; color: white; background: var(--indigo); border-radius: 10px; padding: 12px; text-decoration: none; font-size: 12px; font-weight: 680; }.auth-link { color: var(--indigo); font-size: 11px; }

.modal-backdrop { position: fixed; inset: 0; background: #171a2c8a; backdrop-filter: blur(4px); z-index: 20; display: grid; place-items: center; padding: 20px; }
.expense-modal { background: white; width: min(430px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; border-radius: 18px; padding: 24px; box-shadow: 0 25px 70px #12142545; animation: modal-in .2s ease-out; }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.modal-heading { display: flex; justify-content: space-between; gap: 18px; margin-bottom: 19px; }.modal-heading h2 { font-size: 20px; }.modal-heading p { margin: 6px 0 0; color: var(--muted); font-size: 10px; font-weight: 400; line-height: 1.5; }.modal-heading > button { flex: 0 0 auto; border: 0; background: #f1f2f5; color: #7e8392; width: 30px; height: 30px; border-radius: 9px; font-size: 18px; }
.expense-modal form { display: grid; gap: 13px; }.expense-modal label { display: grid; gap: 6px; font-size: 10px; font-weight: 650; color: #585e6e; }
.expense-modal input, .expense-modal select { width: 100%; border: 1px solid #dde0e7; background: white; border-radius: 9px; padding: 11px 12px; outline: none; color: var(--ink); font-size: 12px; }
.expense-modal input:focus, .expense-modal select:focus { border-color: var(--indigo); box-shadow: 0 0 0 3px #013B5C14; }
.form-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 10px; }
.switch-row { display: flex !important; justify-content: space-between; align-items: center; background: #f7f7fa; padding: 11px 12px; border-radius: 10px; }.switch-row span { display: grid; gap: 2px; }.switch-row small { color: #9297a4; font-weight: 400; }.switch-row input { width: 34px; height: 18px; accent-color: var(--indigo); }
.save-button { border: 0; background: var(--indigo); color: white; border-radius: 10px; padding: 12px; margin-top: 3px; font-size: 12px; font-weight: 680; transition: .2s ease; }.save-button:disabled { opacity: .6; cursor: wait; }

.payment-modal { width: min(720px, 100%); }
.payment-method-list { display: grid; gap: 8px; max-height: 330px; overflow-y: auto; padding-right: 3px; }
.payment-method-row { display: grid; grid-template-columns: 40px minmax(140px, 1fr) minmax(145px, .8fr) auto; gap: 8px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 10px; }
.payment-method-row input:not(.color-input), .payment-method-row select, .new-payment-fields input:not(.color-input), .new-payment-fields select { min-width: 0; width: 100%; border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 8px; padding: 9px 10px; outline: none; font-size: 10px; }
.payment-method-row input:focus, .payment-method-row select:focus, .new-payment-fields input:focus, .new-payment-fields select:focus { border-color: var(--indigo); }
.color-input { width: 36px; height: 36px; border: 0; padding: 2px; border-radius: 9px; background: transparent; }
.method-save { border: 0; color: var(--indigo); background: #f1f2ff; border-radius: 8px; padding: 9px 11px; font-size: 9px; font-weight: 700; }
.new-payment-form { margin-top: 16px; padding: 14px; border-radius: 12px; background: var(--wash); }
.new-payment-form > strong { display: block; margin-bottom: 10px; font-size: 11px; }
.new-payment-fields { display: grid; grid-template-columns: 40px minmax(140px, 1fr) minmax(145px, .8fr); gap: 8px; align-items: center; }
.new-payment-form .save-button { width: 100%; margin-top: 10px; }

@media (max-width: 1280px) {
  .app-shell { grid-template-columns: 76px 1fr; }.sidebar { padding: 25px 12px; }.brand { padding-inline: 11px; }.brand > span:last-child, .nav-item:not(.active)::after, .nav-item { font-size: 0; }.nav-item { justify-content: center; }.nav-item span { font-size: 18px; }.sidebar-tip, .profile > span:nth-child(2), .profile b { display: none; }.profile { justify-content: center; }
  .content { padding-inline: 28px; }.metrics { grid-template-columns: repeat(2, 1fr); }.dashboard-grid { grid-template-columns: 1fr; }.payment-layout { grid-template-columns: 1fr; }.payment-total-card { min-height: 150px; }
}
@media (max-width: 920px) {
  .content { padding-inline: 20px; }
  .credit-card-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .transaction-head { display: none; }
  .transaction-row { grid-template-columns: minmax(0, 1fr) auto 92px; grid-template-rows: auto auto; gap: 4px 10px; padding-block: 10px; }
  .transaction-name { grid-column: 1; grid-row: 1; }
  .payment-label { grid-column: 1; grid-row: 2; padding-left: 39px; font-size: 8px; }
  .transaction-amount { grid-column: 2; grid-row: 1 / span 2; }
  .row-actions { grid-column: 3; grid-row: 1 / span 2; }
  .transaction-row > .category-label, .transaction-row > .kind-badge, .transaction-date { display: none; }
}
@media (max-width: 720px) {
  .app-shell { display: block; }.sidebar { height: auto; position: fixed; bottom: 0; top: auto; left: 0; right: 0; border: 0; border-top: 1px solid var(--line); padding: 7px 10px; z-index: 10; }.brand, .sidebar-tip, .profile { display: none; }.sidebar nav { grid-template-columns: repeat(4, 1fr); gap: 2px; }.nav-item { padding: 8px; display: grid; gap: 2px; font-size: 8px !important; justify-items: center; }.nav-item span { font-size: 16px; }
  .content { padding: 22px 14px 78px; }.topbar { align-items: flex-start; }.topbar h1 { font-size: 19px; max-width: 260px; }.primary-button { padding: 10px 12px; }.topbar .primary-button { font-size: 0; }.primary-button span { font-size: 18px; }
  .metrics { grid-template-columns: 1fr 1fr; gap: 9px; }.metric-card { min-height: 126px; padding: 14px; }.metric-card > strong { font-size: 17px; }
  .category-content { grid-template-columns: 1fr; justify-items: center; }.category-list { width: 100%; }.chart-area { gap: 3px; }.bar-column small { font-size: 7px; }.bar-value { display: none; }
  .credit-card-list { grid-template-columns: 1fr; }.transaction-row { grid-template-columns: minmax(0, 1fr) auto 92px; }.transaction-row > strong { font-size: 11px; }
  .dashboard-toolbar { align-items: stretch; gap: 8px; }.period-picker { flex: 1; justify-content: space-between; }.segmented button { padding-inline: 11px; }
  .master-toolbar { align-items: stretch; flex-direction: column; }.master-toolbar select { min-width: 0; width: 100%; }.invite-form { grid-template-columns: 1fr; }.invite-form .primary-button { justify-content: center; font-size: 10px; }.user-row { grid-template-columns: 31px 1fr auto; }.user-row .login-status { display: none; }.user-row .text-button, .user-row .status-button { grid-column: span 1; }
  .payment-method-row { grid-template-columns: 38px 1fr auto; }.payment-method-row select { grid-column: 2 / span 2; }.new-payment-fields { grid-template-columns: 38px 1fr; }.new-payment-fields select { grid-column: 1 / -1; }
}
@media (max-width: 420px) { .metrics { grid-template-columns: 1fr; }.metric-card { min-height: 116px; }.topbar h1 { font-size: 17px; }.dashboard-toolbar { flex-direction: column; }.panel-actions { align-items: flex-end; flex-direction: column; }.transaction-row { grid-template-columns: minmax(0, 1fr) auto; }.row-actions { grid-column: 1 / -1; grid-row: 3; justify-content: flex-start; padding-left: 39px; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }

html[data-theme="dark"] {
  --ink: #f1f3fa;
  --muted: #a7adbd;
  --line: #35394a;
  --paper: #222532;
  --wash: #171923;
  --indigo: #7e8fff;
  --indigo-dark: #697cf0;
}
html[data-theme="dark"] body { color-scheme: dark; }
html[data-theme="dark"] .sidebar { background: #1c1f2b; }
html[data-theme="dark"] .nav-item { color: #a3a9ba; }
html[data-theme="dark"] .nav-item:hover { background: #292d3c; color: white; }
html[data-theme="dark"] .nav-item.active { color: #aeb8ff; background: #2d324d; }
html[data-theme="dark"] .sidebar-tip { background: #272c46; border-color: #353b5b; }
html[data-theme="dark"] .sidebar-tip p, html[data-theme="dark"] .demo-banner p { color: #a5abbd; }
html[data-theme="dark"] .segmented { background: #2c303e; }
html[data-theme="dark"] .segmented button { color: #aeb3c2; }
html[data-theme="dark"] .segmented button.selected { color: white; background: #3a3f50; }
html[data-theme="dark"] .period-picker, html[data-theme="dark"] .donut-hole, html[data-theme="dark"] .expense-modal { background: var(--paper); }
html[data-theme="dark"] .subtle, html[data-theme="dark"] .switch-row { background: #2b2f3d; color: #aeb3c2; }
html[data-theme="dark"] .metric-card.featured::after { background: #2a3048; }
html[data-theme="dark"] .credit-card-summary { background: linear-gradient(145deg, #252936, #20232f); border-color: var(--line); }
html[data-theme="dark"] .chart-area { border-color: #35394a; background: repeating-linear-gradient(to top, transparent 0, transparent 47px, #303442 48px); }
html[data-theme="dark"] .demo-banner { color: #dfe3f5; background: #282d48; border-color: #393f60; }
html[data-theme="dark"] .error-banner { color: #ffc0b5; background: #472d2d; border-color: #694039; }
html[data-theme="dark"] .expense-modal input, html[data-theme="dark"] .expense-modal select { color: var(--ink); background: #1b1e29; border-color: var(--line); }
html[data-theme="dark"] .modal-heading > button { color: #b3b8c6; background: #313544; }
html[data-theme="dark"] .edit-button, html[data-theme="dark"] .method-save { color: #aeb8ff; background: #2d324d; border-color: #3a4163; }
html[data-theme="dark"] .delete-button:hover:not(:disabled) { background: #442d2d; }
html[data-theme="dark"] .category-icon, html[data-theme="dark"] .user-avatar { filter: brightness(1.25); }
html[data-theme="dark"] .auth-screen { background: radial-gradient(circle at 20% 10%, #282e51 0, transparent 35%), var(--wash); }

/* Foco Flow v0.2 — receitas, contas e saldo */
.nav-button { width: 100%; border: 0; background: transparent; text-align: left; }
.secondary-button { border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 10px; padding: 10px 12px; font-size: 10px; font-weight: 680; display: inline-flex; align-items: center; gap: 5px; }
.secondary-button:hover { border-color: var(--indigo); color: var(--indigo); }
.metric-icon.income { color: var(--mint); background: #e9f7f2; }
.positive-value { color: var(--mint); }
.negative-value { color: var(--coral); }
.income-panel { margin-bottom: 13px; }
.empty-state { border: 1px dashed var(--line); border-radius: 12px; padding: 24px; text-align: center; color: var(--muted); }
.empty-state strong { display: block; color: var(--ink); font-size: 11px; margin-bottom: 5px; }
.empty-state p { margin: 0; font-size: 9px; }
.income-list { display: grid; }
.income-row { display: grid; grid-template-columns: minmax(160px, 1.35fr) minmax(110px, .9fr) minmax(90px, .8fr) minmax(90px, .7fr) 92px; gap: 10px; align-items: center; min-height: 54px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 9px; }
.income-row:last-child { border-bottom: 0; }
.income-origin { display: flex; align-items: center; gap: 10px; min-width: 0; }
.income-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.income-origin > div { min-width: 0; display: grid; gap: 2px; }
.income-origin strong { color: var(--ink); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.income-origin small { color: var(--muted); font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.income-amount { color: var(--mint); text-align: right; font-size: 10px; }
.account-row { display: grid !important; grid-template-columns: 40px minmax(150px, 1fr) auto; gap: 8px !important; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 10px; }
.account-row input:not(.color-input), .new-account-fields input:not(.color-input) { min-width: 0; width: 100%; border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 8px; padding: 9px 10px; outline: none; font-size: 10px; }
.new-account-fields { display: grid; grid-template-columns: 40px 1fr; gap: 8px; align-items: center; }
html[data-theme="dark"] .secondary-button { background: var(--paper); color: var(--ink); }

@media (max-width: 920px) {
  .income-row { grid-template-columns: minmax(0, 1fr) auto 92px; grid-template-rows: auto auto; padding: 9px 0; }
  .income-origin { grid-column: 1; grid-row: 1 / span 2; }
  .income-row > span:nth-child(2) { grid-column: 2; grid-row: 2; }
  .income-row > span:nth-child(3) { display: none; }
  .income-amount { grid-column: 2; grid-row: 1; }
  .income-row .row-actions { grid-column: 3; grid-row: 1 / span 2; }
}
@media (max-width: 720px) {
  .sidebar nav { grid-template-columns: repeat(5, 1fr); }
  .topbar-actions { flex-wrap: wrap; justify-content: flex-end; }
  .topbar .secondary-button { font-size: 0; }
  .topbar .secondary-button span { font-size: 18px; }
}

/* Foco Flow v0.3 — recorrências, parcelamentos e cartões */
.field-help { display: block; margin-top: 5px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.info-box { border: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 92%, var(--indigo) 8%); border-radius: 9px; padding: 10px 11px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.payment-method-row { grid-template-columns: 40px minmax(130px, 1fr) minmax(130px, .8fr) 72px 72px auto; }
.new-payment-fields { grid-template-columns: 40px minmax(140px, 1fr) minmax(130px, .8fr) 72px 72px; }
.day-input { text-align: center; }

@media (max-width: 760px) {
  .payment-method-row { grid-template-columns: 38px minmax(0, 1fr) auto; }
  .payment-method-row select { grid-column: 2 / span 2; }
  .payment-method-row .day-input { grid-column: auto; }
  .new-payment-fields { grid-template-columns: 38px 1fr; }
  .new-payment-fields select { grid-column: 1 / -1; }
  .new-payment-fields .day-input { grid-column: auto; }
}

/* Foco Flow v0.4 — planejamento, relatórios e exportações */
.panel-description { margin: 5px 0 0; color: var(--muted); font-size: 9px; line-height: 1.45; max-width: 520px; }
.forecast-panel { margin-bottom: 13px; }
.forecast-layout { display: grid; grid-template-columns: minmax(220px, .82fr) minmax(0, 2fr); gap: 12px; }
.forecast-highlight { border-radius: 13px; padding: 17px; background: linear-gradient(145deg, #252a43, #343b63); color: white; min-height: 190px; display: flex; flex-direction: column; }
.forecast-highlight > span { color: #c7cbe0; font-size: 9px; text-transform: uppercase; letter-spacing: .6px; }
.forecast-highlight > strong { font-size: 24px; letter-spacing: -.7px; margin: 8px 0 1px; }
.forecast-highlight > small { color: #aeb4d0; font-size: 9px; margin-bottom: auto; }
.forecast-highlight-row { border-top: 1px solid #ffffff1f; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 9px; margin-top: 9px; font-size: 9px; }
.forecast-highlight-row b { color: white; font-size: 10px; }
.forecast-highlight-row.result.positive-value b, .forecast-highlight-row.result.positive-value { color: #75d8b5; }
.forecast-highlight-row.result.negative-value b, .forecast-highlight-row.result.negative-value { color: #ff9f8d; }
.forecast-months { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.forecast-month-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: var(--paper); min-width: 0; }
.forecast-month-card > div:first-child { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.forecast-month-card > div:first-child strong { font-size: 11px; }
.forecast-month-card > div:first-child small { color: var(--muted); font-size: 8px; }
.forecast-month-card > b { display: block; font-size: 17px; margin: 12px 0 10px; letter-spacing: -.4px; }
.forecast-month-card dl { display: grid; gap: 7px; margin: 0; }
.forecast-month-card dl div { display: flex; justify-content: space-between; gap: 8px; font-size: 8px; color: var(--muted); }
.forecast-month-card dt, .forecast-month-card dd { margin: 0; }
.forecast-month-card dd { color: var(--ink); font-weight: 650; text-align: right; }
.forecast-month-card footer { border-top: 1px solid var(--line); margin-top: 11px; padding-top: 9px; font-size: 9px; font-weight: 700; }
.report-panel { margin-bottom: 13px; }
.report-filters { display: grid; grid-template-columns: minmax(180px, 1.4fr) repeat(5, minmax(110px, .8fr)) auto; gap: 8px; align-items: end; padding: 12px; border-radius: 11px; background: var(--wash); margin-bottom: 12px; }
.report-filters label { display: grid; gap: 5px; color: var(--muted); font-size: 8px; font-weight: 650; }
.report-filters input, .report-filters select { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 8px 9px; background: var(--paper); color: var(--ink); font-size: 9px; outline: none; }
.report-filters input:focus, .report-filters select:focus { border-color: var(--indigo); box-shadow: 0 0 0 2px color-mix(in srgb, var(--indigo) 12%, transparent); }
.clear-filter { min-height: 33px; white-space: nowrap; }
.report-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-bottom: 12px; }
.report-summary > div { border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; display: grid; gap: 5px; background: var(--paper); }
.report-summary span { color: var(--muted); font-size: 8px; }
.report-summary strong { font-size: 13px; }
.report-table { border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.report-head, .report-row { display: grid; grid-template-columns: 90px minmax(170px, 1.5fr) minmax(110px, .8fr) 100px 110px; gap: 10px; align-items: center; padding: 10px 12px; }
.report-head { background: var(--wash); color: var(--muted); font-size: 8px; font-weight: 750; text-transform: uppercase; letter-spacing: .35px; }
.report-row { border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; }
.report-row > div { min-width: 0; display: grid; gap: 2px; }
.report-row > div strong { color: var(--ink); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.report-row > div small { color: var(--muted); font-size: 8px; }
.report-row > strong { text-align: right; font-size: 10px; }
.report-limit { margin: 0; padding: 10px 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 8px; text-align: center; }
html[data-theme="dark"] .forecast-month-card, html[data-theme="dark"] .report-summary > div, html[data-theme="dark"] .report-filters input, html[data-theme="dark"] .report-filters select { background: var(--paper); }
html[data-theme="dark"] .forecast-highlight { background: linear-gradient(145deg, #2c324f, #343b63); }

@media (max-width: 1180px) {
  .forecast-layout { grid-template-columns: 1fr; }
  .forecast-highlight { min-height: 160px; }
  .report-filters { grid-template-columns: repeat(3, 1fr); }
  .report-search { grid-column: span 2; }
}
@media (max-width: 920px) {
  .forecast-months { grid-template-columns: 1fr; }
  .forecast-month-card { display: grid; grid-template-columns: minmax(100px, .7fr) minmax(100px, .7fr) 1.6fr; gap: 10px; align-items: center; }
  .forecast-month-card > b { margin: 0; }
  .forecast-month-card footer { grid-column: 1 / -1; margin-top: 0; }
  .report-head { display: none; }
  .report-row { grid-template-columns: 75px minmax(0, 1fr) auto; grid-template-rows: auto auto; }
  .report-row > span:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
  .report-row > div { grid-column: 2; grid-row: 1 / span 2; }
  .report-row > span:nth-child(3) { grid-column: 3; grid-row: 2; text-align: right; font-size: 8px; }
  .report-row > span:nth-child(4) { display: none; }
  .report-row > strong { grid-column: 3; grid-row: 1; }
}
@media (max-width: 720px) {
  .report-filters { grid-template-columns: 1fr 1fr; }
  .report-search { grid-column: 1 / -1; }
  .report-summary { grid-template-columns: 1fr 1fr; }
  .forecast-month-card { grid-template-columns: 1fr auto; }
  .forecast-month-card dl { grid-column: 1 / -1; }
  .sidebar nav { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 480px) {
  .report-filters { grid-template-columns: 1fr; }
  .report-search { grid-column: auto; }
  .report-summary { grid-template-columns: 1fr; }
  .report-row { grid-template-columns: 65px minmax(0, 1fr) auto; padding-inline: 8px; }
}
@media (max-width: 720px) {
  .sidebar nav { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(64px, 1fr); grid-template-columns: none; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; }
  .sidebar nav::-webkit-scrollbar { display: none; }
}

/* Foco Flow v0.5 — lançamento rápido e uso móvel */
.quick-entry-panel { display: grid; grid-template-columns: minmax(220px, .72fr) minmax(0, 1.7fr); gap: 14px; align-items: stretch; margin-bottom: 13px; border: 1px solid var(--line); border-radius: 14px; padding: 15px; background: linear-gradient(135deg, color-mix(in srgb, var(--paper) 94%, var(--indigo) 6%), var(--paper)); }
.quick-entry-copy { padding: 4px 3px; }
.quick-entry-copy h2 { margin: 4px 0 6px; font-size: 16px; }
.quick-entry-copy p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.quick-entry-box { min-width: 0; display: grid; gap: 8px; }
.quick-entry-input-row { display: grid; grid-template-columns: minmax(0, 1fr) 40px auto; gap: 7px; }
.quick-entry-input-row input { width: 100%; min-width: 0; border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 10px; padding: 11px 12px; outline: none; font-size: 10px; }
.quick-entry-input-row input:focus { border-color: var(--indigo); box-shadow: 0 0 0 3px color-mix(in srgb, var(--indigo) 12%, transparent); }
.dictation-button, .quick-interpret-button, .quick-review-button { border: 0; border-radius: 9px; font-weight: 700; cursor: pointer; }
.dictation-button { background: var(--wash); color: var(--ink); font-size: 15px; }
.quick-interpret-button { background: var(--indigo); color: white; padding: 0 14px; font-size: 10px; }
.quick-message { margin: 0; color: var(--muted); font-size: 8px; line-height: 1.45; }
.quick-preview { border: 1px solid var(--line); border-radius: 11px; padding: 11px; background: var(--paper); display: grid; gap: 8px; }
.quick-preview-main { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.quick-preview-main > strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.quick-preview-main > b { font-size: 11px; }
.quick-type { border-radius: 999px; padding: 5px 7px; font-size: 8px; font-weight: 750; }
.quick-type.expense { color: #c85b48; background: #fff0ec; }
.quick-type.income { color: #24795e; background: #eaf8f3; }
.quick-preview-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.quick-preview-tags span { border: 1px solid var(--line); background: var(--wash); color: var(--muted); border-radius: 999px; padding: 4px 7px; font-size: 8px; }
.quick-warnings { display: grid; gap: 3px; padding: 8px 9px; border-radius: 8px; background: #fff7e8; color: #8d631f; }
.quick-warnings p { margin: 0; font-size: 8px; line-height: 1.4; }
.quick-review-button { justify-self: start; background: transparent; color: var(--indigo); padding: 2px 0; font-size: 9px; }
.mobile-quick-actions { display: none; }
html[data-theme="dark"] .quick-entry-panel { background: linear-gradient(135deg, #252938, #222532); }
html[data-theme="dark"] .quick-type.expense { color: #ffab9c; background: #432d2a; }
html[data-theme="dark"] .quick-type.income { color: #7ee0bd; background: #213a33; }
html[data-theme="dark"] .quick-warnings { background: #41351f; color: #f0cb83; }

@media (max-width: 920px) {
  .quick-entry-panel { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .quick-entry-panel { padding: 12px; gap: 10px; }
  .quick-entry-copy h2 { font-size: 14px; }
  .quick-entry-input-row { grid-template-columns: minmax(0, 1fr) 40px; }
  .quick-interpret-button { grid-column: 1 / -1; min-height: 37px; }
  .quick-preview-main { grid-template-columns: auto minmax(0, 1fr); }
  .quick-preview-main > b { grid-column: 2; }
  .mobile-quick-actions { position: fixed; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; left: 12px; right: 12px; bottom: 63px; z-index: 9; pointer-events: none; }
  .mobile-quick-actions button { pointer-events: auto; border: 1px solid var(--line); box-shadow: 0 7px 20px #0000001f; background: var(--paper); color: var(--ink); border-radius: 11px; padding: 10px 12px; font-size: 9px; font-weight: 750; }
  .mobile-quick-actions button:last-child { background: var(--indigo); color: white; border-color: var(--indigo); }
  .content { padding-bottom: 122px; }
}

/* Foco Flow v0.6 — metas mensais e restauração segura */
.budget-panel { margin-bottom: 13px; }
.budget-layout { display: grid; grid-template-columns: minmax(210px, .72fr) minmax(0, 1.8fr); gap: 14px; }
.budget-form { display: grid; gap: 10px; align-content: start; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--wash); }
.budget-form > strong { font-size: 11px; }
.budget-form label { display: grid; gap: 5px; color: var(--muted); font-size: 8px; font-weight: 650; }
.budget-form input, .budget-form select { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; background: var(--paper); color: var(--ink); font-size: 9px; outline: none; }
.budget-form input:focus, .budget-form select:focus { border-color: var(--indigo); box-shadow: 0 0 0 2px color-mix(in srgb, var(--indigo) 12%, transparent); }
.budget-form > small { color: var(--muted); font-size: 8px; line-height: 1.45; }
.budget-content { min-width: 0; display: grid; gap: 10px; }
.budget-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.budget-summary > div { border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; background: var(--paper); display: grid; gap: 4px; }
.budget-summary span { color: var(--muted); font-size: 8px; }
.budget-summary strong { font-size: 13px; }
.budget-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.budget-row { border: 1px solid var(--line); border-radius: 11px; padding: 11px 12px; background: var(--paper); display: grid; gap: 8px; }
.budget-row.over { border-color: color-mix(in srgb, #ef7c65 42%, var(--line)); }
.budget-row-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.budget-row-head .category-dot { width: 28px; height: 28px; }
.budget-row-head > div { display: grid; gap: 2px; min-width: 0; }
.budget-row-head strong { font-size: 10px; }
.budget-row-head small { color: var(--muted); font-size: 8px; }
.budget-row-head > b { font-size: 10px; }
.budget-progress { height: 6px; border-radius: 999px; overflow: hidden; background: var(--wash); }
.budget-progress i { display: block; height: 100%; border-radius: inherit; transition: width .2s ease; }
.budget-row-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 8px; }
.budget-row-foot .delete-button { width: auto; height: auto; padding: 3px 6px; border-radius: 6px; }
.empty-state.compact { min-height: 115px; }
.file-button { cursor: pointer; }
.file-button input { display: none; }
.restore-card { display: grid; gap: 10px; margin-bottom: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--wash); }
.restore-card.validated { border-color: color-mix(in srgb, #80BC00 38%, var(--line)); }
.restore-card > div:first-child { display: grid; gap: 3px; }
.restore-card > div:first-child strong { font-size: 10px; }
.restore-card > div:first-child p { margin: 0; color: var(--muted); font-size: 8px; line-height: 1.45; }
.restore-counts { display: flex; flex-wrap: wrap; gap: 6px; }
.restore-counts span { border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--muted); padding: 5px 8px; font-size: 8px; }
.restore-counts b { color: var(--ink); }
.restore-confirm { display: grid; grid-template-columns: minmax(180px, 1fr) auto auto; gap: 8px; align-items: end; }
.restore-confirm label { display: grid; gap: 5px; color: var(--muted); font-size: 8px; }
.restore-confirm input { border: 1px solid var(--line); border-radius: 8px; padding: 8px 9px; background: var(--paper); color: var(--ink); font-size: 9px; outline: none; }
.danger-button { border: 0; border-radius: 9px; padding: 9px 11px; background: #c85b48; color: white; font-size: 9px; font-weight: 750; cursor: pointer; }
.danger-button:disabled { opacity: .45; cursor: not-allowed; }

@media (max-width: 920px) {
  .budget-layout { grid-template-columns: 1fr; }
  .budget-list { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .budget-summary { grid-template-columns: 1fr 1fr; }
  .budget-summary > div:last-child { grid-column: 1 / -1; }
  .restore-confirm { grid-template-columns: 1fr 1fr; }
  .restore-confirm label { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .budget-summary { grid-template-columns: 1fr; }
  .budget-summary > div:last-child { grid-column: auto; }
  .restore-confirm { grid-template-columns: 1fr; }
  .restore-confirm label { grid-column: auto; }
}

/* Foco Flow v0.7 — saldos e transferências */
.accounts-balance-panel { scroll-margin-top: 18px; }
.accounts-balance-summary { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; padding:18px 20px; border:1px solid var(--line); border-radius:16px; margin-bottom:16px; background:var(--surface-soft, rgba(127,127,127,.05)); }
.accounts-balance-summary span { color:var(--muted); font-size:.86rem; }
.accounts-balance-summary strong { font-size:1.6rem; }
.accounts-balance-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; }
.account-balance-card { border:1px solid var(--line); border-radius:16px; padding:16px; display:grid; gap:12px; background:var(--paper); }
.account-balance-card > b { font-size:1.25rem; }
.account-balance-card > small { color:var(--muted); }
.account-balance-head { display:flex; align-items:center; gap:10px; }
.account-balance-head div { display:grid; gap:2px; }
.account-balance-head small { color:var(--muted); }
.account-color { width:12px; height:12px; border-radius:50%; box-shadow:0 0 0 4px rgba(127,127,127,.08); flex:0 0 auto; }
.compact-button { padding:9px 13px; min-height:auto; }
.transfer-history { margin-top:18px; border-top:1px solid var(--line); padding-top:14px; display:grid; gap:8px; }
.transfer-history-title { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.transfer-history-title span { color:var(--muted); font-size:.82rem; }
.transfer-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); }
.transfer-row div { display:grid; gap:2px; min-width:0; }
.transfer-row small { color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.inline-balance-field { display:grid; gap:3px; margin:0; }
.inline-balance-field span { color:var(--muted); font-size:.72rem; }
.inline-balance-field input { min-width:120px; }
.account-row { grid-template-columns:auto minmax(150px,1fr) minmax(130px,.65fr) auto; }
.new-account-fields { grid-template-columns:auto minmax(160px,1fr) minmax(130px,.7fr); }
@media (max-width: 720px) {
  .accounts-balance-summary { align-items:flex-start; flex-direction:column; }
  .account-row, .new-account-fields { grid-template-columns:auto 1fr; }
  .inline-balance-field { grid-column:1 / -1; }
  .transfer-row { grid-template-columns:1fr auto; }
  .transfer-row .delete-button { grid-column:2; }
}

/* Foco Flow v0.8 — conciliação de saldos e posição financeira */
.account-card-foot { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.account-card-foot > small { color:var(--muted); }
.reconcile-link { border:0; background:transparent; color:var(--indigo); padding:0; font-size:.75rem; font-weight:750; cursor:pointer; }
.reconciliation-history { margin-top:18px; border-top:1px solid var(--line); padding-top:14px; display:grid; gap:8px; }
.reconciliation-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); }
.reconciliation-row > div:first-child { display:grid; gap:2px; min-width:0; }
.reconciliation-row small { color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.reconciliation-values { display:grid; justify-items:end; gap:2px; }
.reconciliation-values span { color:var(--muted); font-size:.72rem; }
.reconciliation-values b { font-size:.86rem; }
.reconciliation-preview-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.reconciliation-preview-grid > div, .reconciliation-preview-grid > label { border:1px solid var(--line); border-radius:12px; padding:12px; background:var(--wash); display:grid; gap:6px; }
.reconciliation-preview-grid span { color:var(--muted); font-size:.78rem; }
.reconciliation-preview-grid strong { font-size:1.18rem; }
.reconciliation-preview-grid input { width:100%; }
.reconciliation-difference { display:grid; gap:4px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--wash); }
.reconciliation-difference span, .reconciliation-difference small { color:var(--muted); font-size:.76rem; }
.reconciliation-difference strong { font-size:1.1rem; }
.reconciliation-difference.positive { border-color:color-mix(in srgb, #80BC00 42%, var(--line)); background:color-mix(in srgb, #80BC00 8%, var(--paper)); }
.reconciliation-difference.negative { border-color:color-mix(in srgb, #ef7c65 42%, var(--line)); background:color-mix(in srgb, #ef7c65 8%, var(--paper)); }
.patrimony-panel { margin-bottom:13px; }
.patrimony-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:16px; }
.patrimony-metrics article { border:1px solid var(--line); border-radius:14px; padding:14px; background:var(--paper); display:grid; gap:5px; }
.patrimony-metrics span, .patrimony-metrics small { color:var(--muted); font-size:.76rem; }
.patrimony-metrics strong { font-size:1.15rem; }
.patrimony-distribution { border-top:1px solid var(--line); padding-top:14px; display:grid; gap:10px; }
.patrimony-distribution-head { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.patrimony-distribution-head span { color:var(--muted); font-size:.76rem; }
.patrimony-row { display:grid; grid-template-columns:minmax(130px,.8fr) minmax(120px,1.5fr) 42px auto; gap:10px; align-items:center; }
.patrimony-row > div:first-child { display:flex; align-items:center; gap:8px; min-width:0; }
.patrimony-row > div:first-child strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.85rem; }
.patrimony-row > span { color:var(--muted); text-align:right; font-size:.75rem; }
.patrimony-row > b { min-width:90px; text-align:right; font-size:.85rem; }
.patrimony-bar { height:7px; border-radius:999px; overflow:hidden; background:var(--wash); }
.patrimony-bar i { display:block; height:100%; border-radius:inherit; }
@media (max-width: 920px) {
  .patrimony-metrics { grid-template-columns:1fr 1fr; }
}
@media (max-width: 720px) {
  .account-card-foot { align-items:flex-start; flex-direction:column; }
  .reconciliation-row { grid-template-columns:1fr auto; }
  .reconciliation-values { justify-items:start; grid-column:1; }
  .reconciliation-row .delete-button { grid-column:2; grid-row:1 / span 2; }
  .reconciliation-preview-grid { grid-template-columns:1fr; }
  .patrimony-distribution-head { align-items:flex-start; flex-direction:column; }
  .patrimony-row { grid-template-columns:minmax(0,1fr) auto; }
  .patrimony-row .patrimony-bar { grid-column:1 / -1; grid-row:2; }
  .patrimony-row > span { grid-column:1; grid-row:3; text-align:left; }
  .patrimony-row > b { grid-column:2; grid-row:3; }
}
@media (max-width: 480px) {
  .patrimony-metrics { grid-template-columns:1fr; }
}

/* Foco Flow v0.9 — teto por cartão e conciliação de fatura */
.card-alert-list { display:grid; gap:8px; margin:0 0 14px; }
.card-alert { display:grid; grid-template-columns:minmax(120px,.7fr) minmax(0,1.6fr) auto; gap:12px; align-items:center; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--wash); }
.card-alert span { color:var(--muted); font-size:.76rem; }
.card-alert b { font-size:.82rem; text-align:right; }
.card-alert.near { border-color:color-mix(in srgb, #e5ad42 48%, var(--line)); background:color-mix(in srgb, #e5ad42 8%, var(--paper)); }
.card-alert.reached, .card-alert.over { border-color:color-mix(in srgb, #ef7c65 55%, var(--line)); background:color-mix(in srgb, #ef7c65 8%, var(--paper)); }
.credit-card-summary.limit-near { border-color:color-mix(in srgb, #e5ad42 48%, var(--line)); }
.credit-card-summary.limit-reached, .credit-card-summary.limit-over { border-color:color-mix(in srgb, #ef7c65 55%, var(--line)); }
.limit-caption.near { color:#a66d00 !important; font-weight:750; }
.limit-caption.reached, .limit-caption.over { color:#c85b48 !important; font-weight:750; }
.limit-progress i { transition:width .2s ease; }
.payment-method-row { grid-template-columns:40px minmax(120px,1fr) minmax(120px,.75fr) 68px 68px minmax(90px,.6fr) 74px auto; }
.new-payment-fields { grid-template-columns:40px minmax(120px,1fr) minmax(120px,.75fr) 68px 68px minmax(100px,.65fr) 74px; }
.limit-input, .alert-input { min-width:0; }
.statement-reconciliation { margin-top:16px; padding-top:16px; border-top:1px solid var(--line); display:grid; gap:14px; }
.statement-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.statement-heading > div { display:grid; gap:4px; }
.statement-heading h3 { margin:0; }
.statement-heading p { margin:0; color:var(--muted); font-size:.78rem; max-width:720px; }
.statement-controls { display:grid; grid-template-columns:minmax(150px,1fr) minmax(140px,.7fr) auto auto; gap:9px; align-items:end; }
.statement-controls label:not(.statement-file), .statement-paste { display:grid; gap:5px; color:var(--muted); font-size:.75rem; }
.statement-controls select, .statement-controls input, .statement-paste textarea { border:1px solid var(--line); border-radius:9px; background:var(--paper); color:var(--ink); padding:9px 10px; outline:none; }
.statement-file { align-self:end; justify-content:center; }
.statement-paste textarea { min-height:88px; resize:vertical; font:inherit; }
.statement-status { display:flex; justify-content:space-between; gap:12px; padding:9px 11px; border-radius:10px; background:var(--wash); border:1px solid var(--line); }
.statement-status span { color:var(--muted); font-size:.75rem; text-align:right; }
.statement-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.statement-summary article { border:1px solid var(--line); border-radius:13px; padding:12px; display:grid; gap:4px; background:var(--paper); }
.statement-summary article span, .statement-summary article small { color:var(--muted); font-size:.73rem; }
.statement-summary article strong { font-size:1.05rem; }
.statement-summary article.ok { border-color:color-mix(in srgb, #80BC00 44%, var(--line)); }
.statement-summary article.attention { border-color:color-mix(in srgb, #e5ad42 50%, var(--line)); }
.statement-result-list { display:grid; gap:7px; }
.statement-result { display:grid; grid-template-columns:104px minmax(0,1fr) minmax(150px,.7fr) auto; gap:10px; align-items:center; border:1px solid var(--line); border-radius:11px; padding:9px 10px; background:var(--paper); }
.statement-result.matched { border-color:color-mix(in srgb, #80BC00 34%, var(--line)); }
.statement-result.statement_only, .statement-result.divergent { border-color:color-mix(in srgb, #ef7c65 40%, var(--line)); }
.statement-result.possible, .statement-result.duplicate, .statement-result.app_only { border-color:color-mix(in srgb, #e5ad42 38%, var(--line)); }
.statement-badge { font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.02em; color:var(--muted); }
.statement-result-main { display:grid; gap:2px; min-width:0; }
.statement-result-main strong, .statement-result-main small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.statement-result-main small, .statement-values { color:var(--muted); font-size:.72rem; }
.statement-values { display:grid; gap:2px; text-align:right; }
@media (max-width: 920px) {
  .payment-method-row { grid-template-columns:38px minmax(0,1fr) minmax(110px,.8fr) 64px 64px; }
  .payment-method-row .limit-input, .payment-method-row .alert-input, .payment-method-row .method-save { grid-row:2; }
  .payment-method-row .limit-input { grid-column:2 / span 2; }
  .payment-method-row .alert-input { grid-column:4; }
  .payment-method-row .method-save { grid-column:5; }
  .new-payment-fields { grid-template-columns:38px minmax(0,1fr) minmax(110px,.8fr); }
  .new-payment-fields .day-input, .new-payment-fields .limit-input, .new-payment-fields .alert-input { grid-row:2; }
  .new-payment-fields .limit-input { grid-column:1 / span 2; }
  .new-payment-fields .alert-input { grid-column:3; }
  .statement-controls { grid-template-columns:1fr 1fr; }
  .statement-summary { grid-template-columns:1fr 1fr 1fr; }
  .statement-result { grid-template-columns:90px minmax(0,1fr) auto; }
  .statement-values { grid-column:2; text-align:left; }
  .statement-result .compact-button { grid-column:3; grid-row:1 / span 2; }
}
@media (max-width: 640px) {
  .card-alert { grid-template-columns:1fr auto; }
  .card-alert span { grid-column:1 / -1; grid-row:2; }
  .statement-heading { flex-direction:column; }
  .statement-controls, .statement-summary { grid-template-columns:1fr; }
  .statement-status { flex-direction:column; }
  .statement-status span { text-align:left; }
  .statement-result { grid-template-columns:1fr auto; }
  .statement-badge { grid-column:1 / -1; }
  .statement-values { grid-column:1; }
  .statement-result .compact-button { grid-column:2; grid-row:2 / span 2; }
}


/* Foco Flow v1.0 — central de alertas e fechamento mensal */
.v1-command-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); gap: 20px; align-items: start; }
.alert-counts { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
.alert-counts span { padding: 6px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.alert-counts .critical { background: color-mix(in srgb, #ef7c65 16%, transparent); color: #d75f49; }
.alert-counts .warning { background: color-mix(in srgb, #e5ad42 18%, transparent); color: #a66f08; }
.alert-counts .info { background: color-mix(in srgb, #013B5C 14%, transparent); color: #013B5C; }
.finance-alert-list { display: grid; gap: 10px; }
.finance-alert { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--wash); }
.finance-alert-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; font-weight: 900; }
.finance-alert div { display: grid; gap: 3px; }
.finance-alert small { color: var(--muted); line-height: 1.35; }
.finance-alert b { white-space: nowrap; }
.finance-alert.critical { border-color: color-mix(in srgb, #ef7c65 42%, var(--line)); }
.finance-alert.critical .finance-alert-icon { background: color-mix(in srgb, #ef7c65 18%, transparent); color: #d75f49; }
.finance-alert.warning { border-color: color-mix(in srgb, #e5ad42 40%, var(--line)); }
.finance-alert.warning .finance-alert-icon { background: color-mix(in srgb, #e5ad42 20%, transparent); color: #a66f08; }
.finance-alert.info .finance-alert-icon { background: color-mix(in srgb, #013B5C 15%, transparent); color: #013B5C; }
.alert-empty { min-height: 150px; display: grid; place-content: center; gap: 6px; text-align: center; color: var(--muted); }
.alert-empty strong { color: var(--ink); font-size: 17px; }
.monthly-closing-panel { display: grid; gap: 16px; }
.closing-status { padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.closing-status.ok { color: #208267; background: color-mix(in srgb, #80BC00 15%, transparent); }
.closing-status.stale { color: #a66f08; background: color-mix(in srgb, #e5ad42 20%, transparent); }
.closing-status.open { color: #013B5C; background: color-mix(in srgb, #013B5C 14%, transparent); }
.closing-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.closing-metrics > div { padding: 12px; border-radius: 13px; background: var(--wash); display: grid; gap: 4px; }
.closing-metrics span, .closing-metrics small { color: var(--muted); font-size: 12px; }
.closing-metrics strong { font-size: 17px; }
.closing-actions { display: grid; gap: 12px; }
.closing-actions label { display: grid; gap: 6px; font-size: 12px; color: var(--muted); }
.closing-snapshot { padding: 13px; border: 1px solid color-mix(in srgb, #80BC00 35%, var(--line)); border-radius: 14px; display: grid; gap: 10px; }
.closing-snapshot.stale { border-color: color-mix(in srgb, #e5ad42 50%, var(--line)); }
.closing-snapshot div { display: grid; gap: 4px; }
.closing-snapshot small, .closing-snapshot p { color: var(--muted); margin: 0; line-height: 1.4; }
@media (max-width: 980px) { .v1-command-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .finance-alert { grid-template-columns: 32px minmax(0, 1fr); } .finance-alert > b { grid-column: 2; } .alert-counts { justify-content: flex-start; } .closing-metrics { grid-template-columns: 1fr; } }

.auth-field { display:grid; gap:7px; text-align:left; margin:0 0 14px; font-size:11px; font-weight:700; }
.auth-field input { width:100%; border:1px solid var(--line); background:var(--paper); color:var(--ink); border-radius:10px; padding:12px; outline:none; }
.auth-field input:focus { border-color:var(--indigo); box-shadow:0 0 0 3px #013B5C15; }
.auth-submit { width:100%; border:0; }

.auth-error { margin: 0 0 14px !important; padding: 10px 12px; border-radius: 10px; background: #fff0ed; color: #9e2f20 !important; font-size: 11px !important; line-height: 1.45 !important; text-align: left; }
.auth-submit:disabled, .auth-field input:disabled { opacity: .65; cursor: wait; }
html[data-theme="dark"] .auth-error { background: #3a2424; color: #ffc6bd !important; }