.finance-page{max-width:1180px;margin:0 auto;padding:47px clamp(28px,4.4vw,72px)}.finance-grid{display:grid;grid-template-columns:minmax(280px,.8fr) 1.2fr;gap:18px}.finance-grid .panel{min-height:360px}.finance-grid form{display:grid;gap:5px}.finance-grid label{margin:10px 0 0}.finance-grid .ms-select-button{height:45px;padding:0 12px;border-radius:10px}.finance-list{margin-top:18px}.finance-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:14px 0;border-bottom:1px solid #edf0ec}.finance-row strong,.finance-row small{display:block}.finance-row small{margin-top:3px;color:#54706b}.row-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:145px;text-align:right}.dashboard-actions{flex-wrap:wrap}/* O botao do select tem largura automatica; sem encolher junto com a linha ele transbordava por cima de "Concluir Hoje". */.row-actions .ms-select{flex:0 1 auto;min-width:0}.row-actions .ms-select-compact .ms-select-button{width:100%;max-width:100%}.ms-select-button .ms-select-value{min-width:0}.dashboard-actions .ms-select{max-width:180px}.dashboard-actions .ms-select-button{min-height:34px}.category-swatch{display:inline-block;width:11px;height:11px;margin-right:8px;border-radius:4px;vertical-align:-1px}.flow-chart{display:grid;grid-template-rows:auto 1fr auto;gap:15px;min-height:225px;padding-top:18px}.flow-chart-legend{display:flex;gap:14px;color:#6d837f;font-size:11px}.flow-chart-legend span{display:inline-flex;align-items:center;gap:6px}.flow-chart-legend i{width:9px;height:9px;border-radius:3px}.income-dot,.income-bar{background:#6fb397}.expense-dot,.expense-bar{background:#d8806f}.flow-chart-bars{height:138px;display:grid;grid-template-columns:repeat(5,minmax(42px,1fr));gap:14px;align-items:end;padding:10px 12px 0;border-bottom:1px solid #e6ece8;background:linear-gradient(to top,#f6f9f7 1px,transparent 1px) 0 0/100% 34px}.flow-week{height:100%;display:grid;grid-template-rows:1fr auto;gap:8px;align-items:end;text-align:center}.flow-week-bars{height:100%;display:flex;align-items:end;justify-content:center;gap:6px}.flow-bar{display:block;width:15px;min-height:0;border-radius:6px 6px 2px 2px;transition:height .18s ease}.flow-week small{color:#7f918d;font-size:10px}.flow-chart-summary strong{display:block;color:#3d5651;font-size:13px}.flow-chart-summary p{margin:4px 0 0;color:#80938f;font-size:11px;line-height:1.6}.form-actions{display:flex;align-items:center;gap:12px;margin-top:10px}.danger-button{padding:8px 10px;border:1px solid #f0c6bf;border-radius:7px;color:#a34538;background:#fff;font-size:11px;font-weight:730}.primary-button,.ghost-button,.text-button{text-decoration:none}.income{color:#2d7964}.expense{color:#bd6053}.transfer{color:#5d6fbb}@media(max-width:800px){.finance-grid{grid-template-columns:1fr}.finance-page{padding:30px 18px}.finance-row{align-items:flex-start;flex-direction:column}.row-actions{width:100%;justify-content:space-between;text-align:left}.dashboard-actions{align-items:flex-start;justify-content:flex-start}.flow-chart-bars{gap:8px;padding-inline:6px}.flow-bar{width:12px}}
.category-summary-list{display:grid;gap:13px;margin-top:16px}.category-summary-row{display:grid;gap:7px}.category-summary-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.category-summary-head span{display:flex;align-items:center;min-width:0;color:#314c48;font-size:12px;font-weight:760}.category-summary-head strong{color:#173b37;font-size:12px}.category-summary-track{height:8px;overflow:hidden;border-radius:99px;background:#edf2ef}.category-summary-track span{display:block;height:100%;border-radius:99px}.category-summary-row small{color:#7d908b;font-size:10px}
.category-panel{grid-column:1/-1}.category-donut-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:20px}.category-donut-card{display:grid;grid-template-columns:142px 1fr;gap:18px;align-items:center;min-height:190px;padding:16px;border:1px solid #edf1ee;border-radius:12px;background:#fbfcfb}.category-donut-card>div:last-child>strong{display:block;margin-bottom:8px;color:#263f3b;font-size:14px}.category-donut{position:relative;display:grid;place-items:center;width:142px;height:142px;border-radius:50%;background:#edf2ef;box-shadow:inset 0 0 0 1px rgba(23,46,44,.04)}.category-donut:after{content:"";position:absolute;inset:28px;border-radius:50%;background:#fbfcfb;box-shadow:0 0 0 1px #eef2ef}.category-donut span{position:relative;z-index:1;max-width:82px;color:#173b37;font-size:13px;font-weight:800;text-align:center;line-height:1.18}.category-summary-list.compact{gap:9px;margin-top:0}.compact-row{gap:4px}.compact-row .category-summary-head strong{font-size:11px}.compact-row small{display:block}.compact-empty{min-height:90px}.compact-empty .empty-icon{width:28px;height:28px;font-size:15px}@media(max-width:980px){.category-donut-grid{grid-template-columns:1fr}.category-donut-card{grid-template-columns:130px 1fr}.category-donut{width:130px;height:130px}}@media(max-width:560px){.category-donut-card{grid-template-columns:1fr;justify-items:center;text-align:left}.category-donut-card>div:last-child{width:100%}}
.account-balance-panel{min-height:255px}.balance-totals{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0 12px}.balance-totals span{padding:10px 12px;border:1px solid #edf1ee;border-radius:10px;background:#fbfcfb;color:#718783;font-size:11px}.balance-totals strong{display:block;margin-top:4px;color:#173b37;font-size:15px}/* Mostra ~5 contas e rola o restante, para o card ficar da mesma altura do
   de "Proximas contas" em vez de crescer indefinidamente. */
/* A lista mostra ate 5 contas (5 x 88px = 440) e rola o resto.
   Com flex:1 ela encolhia junto com o card vizinho: se "Proximas contas"
   tivesse poucas linhas, apareciam 4 contas em vez de 5, e o numero
   visivel mudava conforme a tela. Com flex:0 0 auto o teto e sempre o
   mesmo, independente do card ao lado. */
.account-balance-panel{display:flex;flex-direction:column}
.account-balance-list{display:block;flex:0 0 auto;min-height:0;margin-top:8px;max-height:440px;overflow-y:auto;padding-right:4px}
.account-balance-list::-webkit-scrollbar{width:6px}
.account-balance-list::-webkit-scrollbar-thumb{border-radius:99px;background:rgba(35,65,59,.18)}
.account-balance-list::-webkit-scrollbar-track{background:transparent}
.account-balance-row{display:grid;gap:6px;padding:11px 0;border-bottom:1px solid #edf0ec}.account-balance-row:last-child{border-bottom:0}.account-balance-head,.account-balance-foot{display:flex;align-items:center;justify-content:space-between;gap:12px}.account-balance-title{display:flex;align-items:center;gap:9px;min-width:0}.account-balance-title .category-swatch{flex:0 0 auto;margin-right:0}.account-balance-head strong{color:#1b3733;font-size:13px}.account-balance-head small{display:block;margin-top:2px;color:#54706b;font-size:10px}.account-balance-foot{color:#54706b;font-size:10px}.account-balance-foot strong{color:#173b37}.account-balance-track{height:7px;overflow:hidden;border-radius:99px;background:#edf2ef}.account-balance-track span{display:block;height:100%;border-radius:99px;background:#6fb397}@media(max-width:560px){.balance-totals{grid-template-columns:1fr}.account-balance-head,.account-balance-foot{align-items:flex-start;flex-direction:column}}

/* MesClaro finance workspace */
.finance-page{padding-top:42px}.page-hero{align-items:center;margin-bottom:22px}.hero-action span{display:grid;place-items:center;width:23px;height:23px;border-radius:9px;color:#123e39;background:#d6ed73;font-size:18px;line-height:1}.history-layout{display:grid;grid-template-columns:1fr}.history-panel{min-height:520px}.finance-list{display:grid;gap:10px;margin-top:20px}.finance-row{position:relative;padding:15px 16px;border:1px solid rgba(35,65,59,.075);border-radius:16px;background:rgba(255,255,255,.72);box-shadow:0 8px 18px rgba(18,62,57,.035)}.finance-row:hover{border-color:rgba(111,168,149,.28);background:#fff}.finance-row strong{font-size:13px}.finance-row small{color:#788e89;font-size:11px;line-height:1.55}.row-actions strong{padding:7px 10px;border-radius:999px;background:#f4f8f4;font-size:12px}.row-actions strong.income{background:#e9f6ef}.row-actions strong.expense{background:#fff0ed}.row-actions strong.transfer{background:#eef1ff}.finance-grid .panel form,.modal-form,.form-section{display:grid;gap:8px}.form-section{grid-template-columns:repeat(2,minmax(0,1fr));padding-top:2px}.form-section label{margin-top:0}.form-section #category-field,.form-section label:has(input[name=description]),.form-section #status-field,.form-section #recurring-control,.form-section #months-field,.form-section #frequency-field{grid-column:auto}.modal-backdrop{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:28px;background:rgba(9,31,30,.42);backdrop-filter:blur(10px)}.modal-card{width:min(100%,880px);max-height:min(88vh,820px);overflow:auto;border:1px solid rgba(255,255,255,.55);border-radius:26px;background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(249,252,249,.95));box-shadow:0 34px 90px rgba(8,30,28,.28)}.transaction-modal-card{padding:24px}.modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:20px}.modal-header h2{margin:7px 0 6px;color:#173b37;font-size:24px;letter-spacing:-1px}.modal-header p{margin:0;color:#728884;font-size:13px}.modal-close{width:38px;height:38px;border-radius:13px;background:#f0f5f1;color:#40635e;font-size:16px}.value-calculator{display:grid;grid-template-columns:minmax(190px,.72fr) 1.28fr;gap:17px;margin-bottom:18px;padding:18px;border:1px solid rgba(35,65,59,.08);border-radius:20px;background:radial-gradient(circle at 0 0,rgba(214,237,115,.24),transparent 32%),#f7faf7}.calculator-copy{display:grid;align-content:center;gap:7px}.calculator-copy strong{color:#123e39;font-size:30px;letter-spacing:-1.2px}.calculator-copy small{color:#718783;font-size:11px;line-height:1.55}.calculator-grid{display:grid;grid-template-columns:1.1fr 1fr .85fr auto;align-items:end;gap:10px}.calculator-grid label{margin:0}.calculator-grid .small-outline-button{height:45px;margin-bottom:0}.modal-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:14px;padding-top:16px;border-top:1px solid rgba(35,65,59,.08)}body.modal-open{overflow:hidden}@media(max-width:900px){.value-calculator{grid-template-columns:1fr}.calculator-grid{grid-template-columns:1fr 1fr}.form-section{grid-template-columns:1fr}.modal-card{max-height:92vh}.transaction-modal-card{padding:18px}}@media(max-width:620px){.page-hero{display:block}.page-hero .hero-action{width:100%;margin-top:18px}.modal-backdrop{padding:10px}.calculator-grid{grid-template-columns:1fr}.modal-actions{align-items:stretch;flex-direction:column-reverse}.modal-actions .primary-button,.modal-actions .ghost-button{width:100%}.finance-row{align-items:flex-start;flex-direction:column}.row-actions{width:100%;justify-content:space-between}}
.beta-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.beta-grid.two-columns{grid-template-columns:1fr 1fr}.beta-grid>.panel:nth-child(3){grid-column:1/-1}.beta-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}.beta-form label{margin:0}.beta-form .primary-button,.beta-form .small-outline-button{align-self:end}.scenario-form{margin-top:18px;padding-top:18px;border-top:1px solid rgba(35,65,59,.08)}.projection-list{display:grid;gap:10px;margin-top:18px}.projection-row{display:grid;grid-template-columns:90px 1fr;gap:3px 14px;align-items:center;padding:14px 16px;border:1px solid rgba(35,65,59,.075);border-radius:16px;background:rgba(255,255,255,.72)}.projection-row span{color:#718783;font-size:11px;font-weight:800;text-transform:uppercase}.projection-row strong{color:#173b37;font-size:18px}.projection-row small{grid-column:2;color:#788e89;font-size:11px}.mini-track{display:block;width:min(240px,100%);height:8px;margin-top:9px;overflow:hidden;border-radius:99px;background:#edf2ef}.mini-track i{display:block;height:100%;border-radius:99px;background:#6fb397}.scenario-list{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}.scenario-list span{padding:6px 8px;border-radius:99px;color:#38514d;background:#eef6f1;font-size:10px;font-weight:760}.settings-card{display:grid;gap:5px;margin:18px 0;padding:17px;border:1px solid rgba(35,65,59,.08);border-radius:16px;background:#f7faf7}.settings-card strong{font-size:18px;color:#173b37}.settings-card small{color:#718783;line-height:1.55}@media(max-width:980px){.beta-grid,.beta-grid.two-columns{grid-template-columns:1fr}.beta-grid>.panel:nth-child(3){grid-column:auto}}@media(max-width:620px){.beta-form{grid-template-columns:1fr}.projection-row{grid-template-columns:1fr}.projection-row small{grid-column:1}}
/* Os 4 cards da visao geral, na ordem: entradas, saidas, resultado
   momentaneo (amarelo) e resultado projetado (cor calculada no JS). */
.income-card{border-color:rgba(76,158,120,.28);background:linear-gradient(150deg,#e6f6ec,#f6fcf8)}
.income-card strong{color:#1f6b52}
.expense-card{border-color:rgba(203,105,74,.26);background:linear-gradient(150deg,#fdece4,#fff8f4)}
.expense-card strong{color:#a04b36}
.moment-card{border-color:rgba(206,168,44,.34);background:linear-gradient(150deg,#fdf1c9,#fffbeb)}
.moment-card strong{color:#7a5a11}
.moment-card .trend{color:#7a5a11;background:rgba(206,168,44,.2)}
.dashboard-metrics-row{grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch}.dashboard-metrics-row .metric-card{min-height:132px;padding:18px 19px}.dashboard-metrics-row .metric-card strong{margin:10px 0 8px;font-size:clamp(20px,1.7vw,27px)}.dashboard-metrics-row .metric-card p{font-size:10px}.projection-metric-card{background:linear-gradient(150deg,#ffffff,#f1f8f2)}.flow-detail-grid{grid-template-columns:1fr}.flow-detail-grid .flow-panel{min-height:430px}.flow-controls{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.flow-controls .select-button{height:34px}.flow-detail-grid .flow-chart{min-height:285px}.flow-detail-grid .flow-chart-bars{height:185px;grid-template-columns:repeat(5,minmax(90px,1fr));gap:18px}.flow-category-stack{height:185px;display:flex;flex-direction:column;justify-content:flex-end;gap:7px;padding:6px 2px 0}.flow-category-stack>span{display:grid;grid-template-columns:1fr;gap:3px}.flow-category-stack i{display:block;height:9px;border-radius:99px;box-shadow:0 5px 10px rgba(18,62,57,.08)}.flow-category-stack small{overflow:hidden;color:#718783;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.empty-category-stack{align-items:center;justify-content:center;color:#8ea09c}.flow-detail-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:18px}.flow-detail-row{display:grid;gap:5px;padding:12px;border:1px solid rgba(35,65,59,.075);border-radius:15px;background:rgba(255,255,255,.72)}.flow-detail-row strong{color:#173b37;font-size:12px}.flow-detail-row span{color:#718783;font-size:10px}.flow-detail-categories{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}.flow-detail-categories span{display:inline-flex;align-items:center;gap:5px;padding:5px 7px;border-radius:99px;background:#f3f7f4;color:#536d68}.flow-detail-categories i{width:8px;height:8px;border-radius:3px}@media(max-width:1180px){.dashboard-metrics-row{grid-template-columns:repeat(2,minmax(0,1fr))}.flow-detail-list{grid-template-columns:repeat(2,minmax(0,1fr))}.flow-detail-grid .flow-chart-bars{grid-template-columns:repeat(5,minmax(64px,1fr));gap:10px}}@media(max-width:620px){.dashboard-metrics-row{grid-template-columns:1fr}.flow-controls{justify-content:flex-start}.flow-detail-list{grid-template-columns:1fr}.flow-detail-grid .flow-chart-bars{overflow-x:auto;grid-template-columns:repeat(5,88px)}}

/* Lancamentos do mes e modal rapido */
.panel-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}.panel-actions .text-button{min-height:34px;padding:8px 12px;border:1px solid rgba(35,65,59,.10);border-radius:12px;background:#fff;box-shadow:0 7px 14px rgba(31,70,63,.045);text-decoration:none}.panel-actions .text-button:hover{border-color:#b8d4c9;background:#f6fbf8}.transaction-date-group{display:grid;gap:9px;margin:0}.transaction-date-group+.transaction-date-group{margin-top:10px}.transaction-date-group h3{display:flex;align-items:center;gap:8px;margin:0 0 2px;color:#4d6661;font-size:11px;font-weight:820;letter-spacing:.85px;text-transform:uppercase}.transaction-date-group h3:before{content:"";display:block;width:7px;height:7px;border-radius:99px;background:#96b6aa}.transaction-list-row{border-color:rgba(35,65,59,.08);box-shadow:0 7px 16px rgba(18,62,57,.035)}.transaction-list-row strong:first-child{color:#1b3733}.transaction-income-paid{background:linear-gradient(135deg,#eef9f2,#f9fdf9)}.transaction-income-planned{background:linear-gradient(135deg,#edf8ff,#fbfdff)}.transaction-expense-paid{background:linear-gradient(135deg,#f3f4f3,#fcfcfb)}.transaction-expense-pending{background:linear-gradient(135deg,#fff5db,#fffdf7)}.transaction-transfer{background:linear-gradient(135deg,#f0efff,#fbfbff)}.transaction-income-paid:hover,.transaction-income-planned:hover,.transaction-expense-paid:hover,.transaction-expense-pending:hover,.transaction-transfer:hover{filter:saturate(1.03)}.quick-modal-card{width:min(100%,520px);padding:22px}.compact-modal-header{align-items:center;margin-bottom:14px}.compact-modal-header h2{font-size:21px}.quick-transaction-form{display:grid;grid-template-columns:1fr 1fr;gap:10px}.quick-transaction-form label{margin:0}.quick-transaction-form .ms-select-button{min-height:45px;padding:0 12px;border-radius:13px}.quick-transaction-form #quick-description-field,.quick-transaction-form .form-error,.quick-transaction-form .modal-actions{grid-column:1/-1}.quick-transaction-form .modal-actions{margin-top:4px}.quick-transaction-form .form-error{margin:0;color:#b6493c}@media(max-width:700px){.panel-actions{justify-content:flex-start}.quick-transaction-form{grid-template-columns:1fr}.quick-modal-card{padding:18px}.transaction-list-row .row-actions{align-items:flex-start;flex-direction:column}.transaction-list-row .row-actions .small-outline-button{margin-left:0}}

/* Blocos diarios da tela de lancamentos */
.transaction-date-group{gap:0;overflow:hidden;padding:0;border:1px solid rgba(35,65,59,.085);border-radius:20px;background:rgba(255,255,255,.58);box-shadow:0 12px 26px rgba(18,62,57,.045)}.transaction-date-group+.transaction-date-group{margin-top:14px}.transaction-date-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 17px;border-bottom:1px solid rgba(35,65,59,.075);background:linear-gradient(135deg,rgba(246,250,247,.96),rgba(238,247,240,.92))}.transaction-date-header strong{display:block;color:#123e39;font-size:17px;font-weight:820;letter-spacing:-.35px}.transaction-date-header span{display:block;margin-top:3px;color:#6d837f;font-size:11px;font-weight:760;text-transform:capitalize}.transaction-date-header small{flex:0 0 auto;padding:6px 9px;border-radius:99px;color:#49625d;background:#fff;font-size:10px;font-weight:800;box-shadow:0 5px 12px rgba(18,62,57,.04)}.transaction-day-list{display:grid;gap:8px;padding:11px;background:rgba(255,255,255,.38)}.transaction-day-list .transaction-list-row{margin:0;border-radius:14px}.transaction-day-list .transaction-list-row:last-child{border-bottom:1px solid rgba(35,65,59,.08)}@media(max-width:620px){.transaction-date-header{align-items:flex-start;flex-direction:column;gap:8px}.transaction-date-header small{align-self:flex-start}.transaction-day-list{padding:9px}}

/* Resumo de saldo por dia */
.transaction-day-summary{display:flex;align-items:stretch;justify-content:flex-end;gap:8px;flex-wrap:wrap}.transaction-day-summary span{display:grid;gap:3px;min-width:104px;padding:8px 10px;border:1px solid rgba(35,65,59,.075);border-radius:13px;background:rgba(255,255,255,.78);box-shadow:0 6px 14px rgba(18,62,57,.035)}.transaction-day-summary small{padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:#7a8f8a!important;font-size:9px!important;font-weight:850!important;letter-spacing:.55px;text-transform:uppercase}.transaction-day-summary strong{font-size:12px!important;letter-spacing:-.15px!important}.transaction-day-summary strong.positive,.transaction-day-footer strong.positive{color:#2d7964}.transaction-day-summary strong.negative,.transaction-day-footer strong.negative{color:#bd6053}.transaction-day-footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:13px 17px;border-top:1px solid rgba(35,65,59,.075);background:linear-gradient(135deg,rgba(250,252,249,.94),rgba(239,247,241,.90))}.transaction-day-footer span{color:#6d837f;font-size:10px;font-weight:850;letter-spacing:.75px;text-transform:uppercase}.transaction-day-footer strong{padding:7px 11px;border-radius:999px;background:#fff;box-shadow:0 6px 14px rgba(18,62,57,.04);font-size:14px;letter-spacing:-.25px}@media(max-width:760px){.transaction-date-header{align-items:flex-start;flex-direction:column}.transaction-day-summary{justify-content:flex-start;width:100%}.transaction-day-summary span{min-width:calc(50% - 4px)}.transaction-day-footer{justify-content:space-between}}@media(max-width:460px){.transaction-day-summary span{min-width:100%}.transaction-day-footer{align-items:flex-start;flex-direction:column}}

/* Contas e Categorias: lista em blocos, formulario empilhado abaixo.
   O formulario so aparece no modo "Gerenciar" (atributo hidden via JS). */
.stacked-grid{display:grid;grid-template-columns:1fr;gap:20px}
.stacked-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:6px}
.stacked-form label{margin:0}
.stacked-form .form-error,.stacked-form .form-actions{grid-column:1/-1}
.finance-blocks{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:12px;margin-top:20px}
.finance-block{display:grid;align-content:start;gap:9px;padding:15px 16px;border:1px solid rgba(35,65,59,.085);border-radius:16px;background:rgba(255,255,255,.72);box-shadow:0 8px 18px rgba(18,62,57,.035);transition:border-color .16s,box-shadow .16s,transform .16s}
.finance-block:hover{border-color:rgba(111,168,149,.28);background:#fff;transform:translateY(-1px);box-shadow:0 12px 24px rgba(18,62,57,.06)}
.finance-block-head{display:flex;align-items:center;gap:9px;min-width:0}
/* Icone da conta sobre a cor escolhida no cadastro. */
.account-icon{display:grid;place-items:center;flex:0 0 auto;width:30px;height:30px;border-radius:10px;color:#fff;box-shadow:0 5px 11px rgba(18,62,57,.16)}
.account-icon svg{width:17px;height:17px;stroke-width:2}
/* No card de saldos o icone e menor, para caber mais contas na mesma altura. */
.account-balance-title .account-icon{width:26px;height:26px;border-radius:9px}
.account-balance-title .account-icon svg{width:15px;height:15px}
.finance-block-head strong{overflow:hidden;color:#1b3733;font-size:13px;text-overflow:ellipsis;white-space:nowrap}
.finance-block-meta{display:flex;flex-wrap:wrap;gap:6px}
.finance-block-value{color:#54706b;font-size:11px;font-weight:700}
.finance-block .row-actions{justify-content:flex-start;min-width:0;margin-top:2px}
.finance-block.is-inactive{border-style:dashed;background:rgba(244,246,244,.72);opacity:.85}
.inactive-chip{color:#7a5a2a;background:#fdf0d8;border-color:#f0dcae}
.active-chip{color:#2c755f;background:#e5f5ec;border-color:#cfe9db}
.wallet-chip{color:#4d6661;background:#eef3ef;border-color:#dde6e0}
.wallet-chip.is-shared{color:#2f5aa8;background:#e6eefc;border-color:#cfdff8}
/* Filtro + acao no cabecalho do painel, sem empurrar o titulo. */
.panel-header-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px}
/* Subcategoria: barra lateral e referencia explicita ao pai, ja que o grid
   de blocos nao permite indentacao real. */
.finance-block.is-child{border-left:3px solid rgba(111,168,149,.6)}
.parent-chip{color:#3d6b5f;background:#eef5f1;border-color:#d5e7de}
.field-hint{grid-column:1/-1;margin:-4px 0 0;color:#68807b;font-size:11px;line-height:1.55}/* Nota curta dentro do proprio campo, sem ocupar uma celula do grid. */.field-note{display:block;margin-top:4px;color:#7b908b;font-size:10px;font-weight:600;line-height:1.4}
.field-hint strong{color:#3c5651;font-weight:750}
@media(max-width:520px){.finance-blocks{grid-template-columns:1fr}}

/* Filtro e edicao de lancamentos */
/* O carrossel de mes e o mesmo componente do dashboard, mas aqui ele vive
   dentro do cabecalho do painel, entao precisa de uma versao compacta. */
.transaction-filter-actions .month-carousel-track{min-width:0;grid-template-columns:minmax(0,auto) minmax(0,auto) minmax(0,auto)}
.transaction-filter-actions .month-side{padding:0 9px;font-size:10px}
.transaction-filter-actions .month-current{padding:0 12px;font-size:12px}
.transaction-filter-actions .month-carousel .icon-button{width:28px;height:28px;font-size:21px}
@media(max-width:620px){.transaction-filter-actions .month-carousel{width:100%}.transaction-filter-actions .month-carousel-track{flex:1}}
.transaction-filter-actions{align-items:flex-end}.month-filter{display:grid;gap:5px;margin:0;color:#6d837f;font-size:10px;font-weight:800;letter-spacing:.8px;text-transform:uppercase}.month-filter input{width:155px;height:36px;padding:0 10px;border:1px solid rgba(35,65,59,.11);border-radius:12px;background:#fff;color:#173b37;font-size:12px;font-weight:720;letter-spacing:0;text-transform:none;box-shadow:0 7px 14px rgba(31,70,63,.045)}.transaction-list-row{cursor:pointer;transition:border-color .16s,box-shadow .16s,transform .16s}.transaction-list-row:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(18,62,57,.06)}.transaction-list-row:focus-visible{outline:3px solid rgba(111,168,149,.25);outline-offset:2px}.transaction-list-row .small-outline-button{cursor:pointer}@media(max-width:620px){.transaction-filter-actions{align-items:flex-start;justify-content:flex-start;width:100%}.month-filter,.month-filter input{width:100%}}

/* Registros neutros com tabs de categoria e tipo */
.transaction-day-list .transaction-list-row,.transaction-day-list .transaction-list-row.transaction-income-paid,.transaction-day-list .transaction-list-row.transaction-income-planned,.transaction-day-list .transaction-list-row.transaction-expense-paid,.transaction-day-list .transaction-list-row.transaction-expense-pending,.transaction-day-list .transaction-list-row.transaction-transfer{background:linear-gradient(135deg,#f4f5f3,#fbfbfa);border-color:rgba(35,65,59,.08)}.transaction-day-list .transaction-list-row:hover{background:linear-gradient(135deg,#eff3ef,#fff);border-color:rgba(111,168,149,.28)}.transaction-meta{display:flex!important;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px}
/* Conta, categoria e status agora sao tres etiquetas do mesmo tamanho: a
   conta ganha um ponto na cor cadastrada dela, a categoria usa a propria cor
   de fundo e o status mantem o codigo de cor por situacao. */
.transaction-account-chip{display:inline-flex;align-items:center;gap:6px;color:#3f5a55;background:#fff;border-color:rgba(35,65,59,.12)}
.transaction-account-chip i{width:8px;height:8px;flex:0 0 auto;border-radius:99px;box-shadow:0 0 0 2px rgba(255,255,255,.85)}.transaction-chip{display:inline-flex;align-items:center;min-height:22px;padding:4px 9px;border:1px solid rgba(35,65,59,.07);border-radius:999px;background:#fff;color:#4d6661;font-size:10px;font-weight:800;line-height:1;text-transform:uppercase;letter-spacing:.4px;box-shadow:0 3px 7px rgba(18,62,57,.03)}.transaction-category-chip{color:#49635e;background:#eef3ef}.transaction-installment-chip{color:#66756f;background:#f1f2f0}.transaction-type-chip.income-paid{color:#2c755f;background:#e5f5ec;border-color:#cfe9db}.transaction-type-chip.income-planned{color:#306f90;background:#e5f4ff;border-color:#cbe7f6}.transaction-type-chip.expense-paid{color:#5d6663;background:#e9ece9;border-color:#d9dfdb}.transaction-type-chip.expense-pending{color:#986018;background:#fff0cc;border-color:#f3d99a}.transaction-type-chip.transfer{color:#5d5ea8;background:#efefff;border-color:#dadafb}@media(max-width:620px){.transaction-meta{gap:6px}.transaction-chip{font-size:9px}}

/* Destaque de despesa prevista e modal progressivo */
.transaction-day-list .transaction-list-row.transaction-expense-pending{background:linear-gradient(135deg,#fff2c8,#fffaf0);border-color:#f1d99d;box-shadow:0 10px 22px rgba(152,96,24,.075)}.transaction-day-list .transaction-list-row.transaction-expense-pending:hover{background:linear-gradient(135deg,#ffedb6,#fff8e7);border-color:#eecb77}.transaction-modal-card,.quick-modal-card{transition:background .18s ease,border-color .18s ease,box-shadow .18s ease}/* O modal inteiro assume a cor do tipo escolhido: laranja para despesa,
   verde para receita e azul para transferencia. */
.transaction-modal-card.kind-expense,.quick-modal-card.kind-expense{border-color:rgba(203,105,74,.42);background:linear-gradient(165deg,#ffcfab 0%,#ffe0c6 46%,#ffeedd 100%)}
.transaction-modal-card.kind-income,.quick-modal-card.kind-income{border-color:rgba(76,158,120,.44);background:linear-gradient(165deg,#b6e6c8 0%,#d2f0dd 46%,#e8f8ee 100%)}
.transaction-modal-card.kind-transfer,.quick-modal-card.kind-transfer{border-color:rgba(74,122,206,.42);background:linear-gradient(165deg,#b8d3f6 0%,#d3e4fb 46%,#e8f1fd 100%)}
/* A calculadora e os campos ficam translucidos para a cor do modal aparecer. */
.transaction-modal-card .value-calculator,.quick-modal-card .value-calculator{border-color:rgba(35,65,59,.12);background:rgba(255,255,255,.42)}
.transaction-modal-card .calculator-copy #calculator-result,.quick-modal-card .calculator-copy #quick-calculator-result{background:rgba(255,255,255,.9)}
.transaction-modal-card.kind-transfer .transaction-kind-button[data-transaction-kind=transfer].is-active span,.quick-modal-card.kind-transfer .transaction-kind-button[data-quick-kind=transfer].is-active span{color:#2f5aa8;background:#dbe8ff}
.transaction-modal-card.is-locked .modal-actions,.quick-modal-card.is-locked .modal-actions{opacity:.62}.transaction-kind-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:13px}.quick-kind-picker{grid-column:1/-1;margin-top:0}.transaction-kind-button{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:7px;min-height:42px;padding:7px 9px;border:1px solid rgba(35,65,59,.08);border-radius:14px;color:#49625d;background:rgba(255,255,255,.75);box-shadow:0 8px 16px rgba(18,62,57,.045);text-align:left;transition:transform .16s,border-color .16s,background .16s}.transaction-kind-button span{display:grid;place-items:center;width:24px;height:24px;border-radius:9px;background:#edf2ef;color:#123e39;font-weight:900}.transaction-kind-button strong{font-size:11px;letter-spacing:-.15px}.transaction-kind-button.is-active{border-color:rgba(18,62,57,.22);background:#fff;transform:translateY(-1px)}.transaction-kind-button[data-transaction-kind=expense].is-active span,.transaction-kind-button[data-quick-kind=expense].is-active span{color:#8f3e30;background:#ffe3d9}.transaction-kind-button[data-transaction-kind=income].is-active span,.transaction-kind-button[data-quick-kind=income].is-active span{color:#286d58;background:#dcf2e6}.transaction-kind-button[data-transaction-kind=transfer].is-active span,.transaction-kind-button[data-quick-kind=transfer].is-active span{color:#4d53a7;background:#e6e7ff}.transaction-kind-button:disabled{cursor:default;opacity:.72;transform:none}.transaction-details-section{animation:detailsReveal .18s ease-out}.primary-button:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}@keyframes detailsReveal{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}@media(max-width:720px){.transaction-kind-picker{grid-template-columns:1fr}.transaction-kind-button{grid-template-columns:auto 1fr}.transaction-modal-card .calculator-grid{grid-template-columns:1fr}}

/* Card de investimentos e metas da Visao geral, em largura cheia. */
.full-grid{grid-template-columns:1fr}
.investments-panel{min-height:0}
.investment-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:20px}
.investment-stat{display:grid;align-content:start;gap:4px;padding:14px 16px;border:1px solid rgba(35,65,59,.075);border-radius:16px;background:rgba(255,255,255,.72)}
.investment-stat>span{color:#718783;font-size:10px;font-weight:800;letter-spacing:.8px;text-transform:uppercase}
.investment-stat>strong{color:#173b37;font-size:21px;letter-spacing:-.8px}
.investment-stat>strong.income{color:#2c755f}
.investment-stat>small{overflow:hidden;color:#788e89;font-size:11px;line-height:1.45;text-overflow:ellipsis;white-space:nowrap}
.goal-progress-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-top:14px}
.goal-progress-row{display:grid;gap:7px;padding:14px 16px;border:1px solid rgba(35,65,59,.075);border-radius:16px;background:rgba(255,255,255,.72)}
.goal-progress-row.is-complete{border-color:rgba(61,143,107,.3);background:linear-gradient(135deg,#eef7f1,#fbfdfb)}
.goal-progress-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.goal-progress-head strong{overflow:hidden;color:#1b3733;font-size:13px;text-overflow:ellipsis;white-space:nowrap}
.goal-percent{flex:0 0 auto;color:#54706b;font-size:12px;font-weight:800}
.goal-done-chip{flex:0 0 auto;color:#2c755f;background:#e5f5ec;border-color:#cfe9db}
.goal-progress-row .mini-track{width:100%;margin-top:0}
.goal-progress-row small{color:#788e89;font-size:11px;line-height:1.45}
@media(max-width:980px){.investment-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.investment-stats,.goal-progress-list{grid-template-columns:1fr}}

/* Navegacao mobile: a barra lateral vira gaveta e ganha uma barra inferior.
   Antes disso, abaixo de 700px nao havia navegacao nenhuma. */
.topbar-brand,.topbar-wallet,.bottom-nav,.nav-backdrop{display:none}
@media(max-width:700px){
  /* A marca substitui o antigo botao de menu: a gaveta ja abre pelo "Mais"
     da barra inferior, e a logo leva para a visao geral. */
  .topbar-brand{display:grid;place-items:center;flex:0 0 auto;width:38px;height:38px;border-radius:12px;background:var(--pine-deep)}
  .topbar-brand .brand-mark{width:22px;height:22px;padding:3px}
  /* Atalho de carteira: trocar de carteira e acao frequente no celular. */
  .topbar-wallet{display:grid;place-items:center;flex:0 0 auto;width:38px;height:38px;border:1px solid rgba(35,65,59,.12);border-radius:12px;color:#38514d;background:#fff}
  .topbar-wallet svg{width:19px;height:19px}
  .sidebar{display:flex;z-index:20;width:min(84vw,290px);transform:translateX(-101%);transition:transform .22s ease-out;box-shadow:0 0 44px rgba(6,20,19,.4);padding-top:calc(31px + env(safe-area-inset-top));padding-bottom:calc(21px + env(safe-area-inset-bottom))}
  .app-shell.nav-open .sidebar{transform:none}
  .nav-backdrop{display:block;position:fixed;inset:0;z-index:19;background:rgba(9,31,30,.5);backdrop-filter:blur(2px)}
  .app-shell.nav-open .nav-backdrop{display:block}
  .main-content{margin-left:0;padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  .topbar{padding-top:env(safe-area-inset-top);height:calc(66px + env(safe-area-inset-top))}
  .bottom-nav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;inset:auto 0 0 0;z-index:18;gap:2px;padding:6px 4px calc(6px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:rgba(255,255,255,.97);backdrop-filter:blur(10px)}
  .bottom-nav-item{display:grid;justify-items:center;gap:3px;padding:5px 2px;border:0;border-radius:11px;color:#6d837f;background:transparent;font-size:9.5px;font-weight:750;text-align:center;text-decoration:none;line-height:1.15}
  .bottom-nav-item svg{width:21px;height:21px}
  .bottom-nav-item.is-active{color:var(--pine);background:rgba(214,237,115,.22)}
  /* O carrossel de mes exigia 112+164+112 = 404px de largura minima e
     estourava a tela inteira (cortava botoes e a barra inferior). No
     celular as pastilhas laterais saem: as setas ja fazem o mesmo papel. */
  /* Um unico bloco: menu, mes e acoes na mesma linha. O .month-carousel
     tinha width:100% e empurrava sino e avatar para fora da barra. */
  /* Menu, mes e acoes numa linha so. Seletor de filho direto (0,2,0) para
     nao depender da ordem dos arquivos, e altura automatica: com altura
     fixa qualquer sobra vazava por cima do conteudo da pagina. */
  .main-content>.topbar{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:8px;height:auto;min-height:calc(58px + env(safe-area-inset-top));padding:calc(6px + env(safe-area-inset-top)) 12px 6px}
  .main-content>.topbar>*{flex:0 0 auto;min-width:0}
  .main-content>.topbar>.month-carousel{flex:1 1 auto;width:auto}
  .main-content>.topbar>.topbar-actions{gap:10px}
  /* Nas 7 telas sem seletor de mes o titulo ocupa a coluna do meio. */
  .page-topbar>strong{grid-column:2;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topbar .month-carousel{flex:1;min-width:0;gap:6px}
  .topbar .month-carousel-track{min-width:0;grid-template-columns:minmax(0,1fr);padding:3px}
  .topbar .month-side{display:none}
  .dashboard,.finance-page{max-width:100%;overflow-x:clip}
}

/* ============================================================
   Densidade no celular e no app.
   O layout web foi desenhado para telas largas: rotulos espacados,
   respiros generosos e cabecalhos em duas colunas. Espremido em 411px
   isso vira quebra de linha, sobreposicao e muito scroll - uma tela que
   no desktop mostra 7 lancamentos mostrava 1. Tudo aqui vive dentro do
   @media, entao resolucoes maiores seguem intactas.
   ============================================================ */
@media(max-width:700px){
  /* -- Respiro geral -- */
  .dashboard,.finance-page{padding:14px 12px 18px}
  .panel{min-height:0;padding:14px}
  .content-grid,.stacked-grid,.metric-grid{gap:10px}
  .content-grid+.content-grid,.metric-grid{margin-top:10px}

  /* -- Hero: o subtitulo e apoio de leitura no desktop; no celular custa
        meia tela antes do primeiro numero. -- */
  .dashboard-heading{margin-bottom:12px}
  .dashboard-heading h1{margin:3px 0 2px;font-size:23px;letter-spacing:-1.1px}
  .dashboard-heading>div>p{display:none}
  .dashboard-heading .primary-button{min-height:46px;margin-top:10px}

  /* -- Rotulos: o letter-spacing largo era o que quebrava "PROXIMAS
        CONTAS" e "CONTAS E SALDOS" em duas linhas. -- */
  .card-label,.eyebrow,.wallet-label{letter-spacing:.5px}
  .panel h2{margin-top:2px;font-size:15px;letter-spacing:-.35px}

  /* -- Cabecalho do painel: titulo e acoes na mesma faixa -- */
  .panel-header{flex-wrap:wrap;gap:8px}
  .panel-header>div:first-child{flex:1 1 140px;min-width:0}
  .panel-actions{flex:0 0 auto;flex-wrap:wrap;gap:6px;align-items:center}
  .panel-header .text-button{margin-top:0}

  /* -- Filtro de mes: os tres chips se sobrepunham e ficavam ilegiveis.
        As setas ja navegam; as pastilhas laterais saem. -- */
  .transaction-filter-actions{width:100%}
  .transaction-filter-actions .month-carousel{width:100%;gap:6px}
  .transaction-filter-actions .month-carousel-track{min-width:0;grid-template-columns:minmax(0,1fr);padding:3px}
  .transaction-filter-actions .month-side{display:none}

  /* -- Cabecalho do dia: data a esquerda, resumo a direita -- */
  .transaction-date-header{gap:10px;padding:10px 12px}
  .transaction-date-header>div:first-child{min-width:0}
  .transaction-date-header strong{font-size:14px}
  .transaction-day-summary{justify-content:flex-end;width:auto;gap:6px}
  .transaction-day-summary span{padding:5px 8px;font-size:10px}
  .transaction-day-summary strong{font-size:12px}
  .transaction-day-list{gap:6px;padding:8px}
  .transaction-day-footer{align-items:center;flex-direction:row;padding:9px 12px}

  /* -- Linhas de lancamento mais densas -- */
  .transaction-list-row{padding:11px 12px}
  .transaction-list-row>div:first-child{min-width:0}
  .transaction-meta{gap:4px;margin-top:6px}
  .transaction-chip{min-height:19px;padding:3px 7px;font-size:9px;letter-spacing:.2px}
  .finance-row.transaction-list-row{gap:8px}
  .transaction-list-row .row-actions{align-items:center;flex-direction:row;flex-wrap:wrap;width:auto;gap:6px}

  /* -- Contas e saldos: os dois totais cabem lado a lado -- */
  .balance-totals{grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 8px}
  .balance-totals span{padding:8px 10px;font-size:10px}
  .balance-totals strong{margin-top:2px;font-size:14px}
  .account-balance-row{gap:4px;padding:9px 0}
  .account-balance-foot{align-items:center;flex-direction:row;justify-content:space-between;gap:8px;font-size:9.5px}
  .account-balance-list{max-height:none}

  /* -- Cards de metrica -- */
  .metric-card{min-height:0;padding:14px 15px}
  .metric-card strong{margin:7px 0 5px;font-size:22px}

  /* -- Investimentos e metas -- */
  .investment-stats{gap:8px;margin-top:12px}
  .investment-stat{padding:10px 12px}
  .investment-stat>strong{font-size:17px}
  .goal-progress-list{gap:8px;margin-top:10px}
  .goal-progress-row{padding:11px 12px}
}

/* Segunda passada: o que ainda empilhava sem precisar. */
@media(max-width:700px){
  /* O eyebrow repete o que a barra do topo ja diz. */
  .page-hero .eyebrow,.dashboard-heading .eyebrow{display:none}
  .dashboard-heading h1{margin-top:0}

  /* Resumo do dia: rotulo e valor lado a lado dentro da pastilha, e as duas
     pastilhas dividindo a linha - eram tres linhas empilhadas. */
  .transaction-date-header{flex-wrap:wrap;row-gap:8px}
  .transaction-day-summary{flex:1 1 100%;justify-content:flex-start;width:100%;gap:6px}
  .transaction-day-summary span{display:flex;align-items:baseline;flex:1 1 0;gap:5px;min-width:0;padding:5px 9px}
  .transaction-day-summary small{font-size:9px}
  .transaction-day-summary strong{font-size:12px}

  /* Linhas do card de proximas contas. */
  .upcoming-row{padding:10px 12px;gap:6px}
  .upcoming-name-text{font-size:13px}
  .upcoming-actions{gap:6px}
  .upcoming-due,.upcoming-account{font-size:10px}
}

/* ============================================================
   Terceira passada: unificar linhas e apertar formularios.
   Regra que se repete no app: o que no desktop e uma linha de duas
   colunas, no celular virava tres linhas empilhadas. Onde o dado cabe
   lado a lado, ele volta para a mesma linha.
   ============================================================ */
@media(max-width:700px){
  /* -- Campos: 50px de altura x N campos era o que fazia o formulario de
        orcamento sozinho ocupar uma tela inteira. -- */
  input:not([type=checkbox]){height:44px;border-radius:10px}
  label{margin:12px 0 6px;font-size:11px}
  .stacked-form,.beta-form{gap:8px}
  .stacked-form label,.beta-form label{margin:0}

  /* Campos curtos voltam a dividir a linha. */
  .beta-form{grid-template-columns:repeat(2,minmax(0,1fr))}
  .beta-form label:has(input[name=name]),
  .beta-form label:has(input[name=description]),
  .beta-form label:has(input[name=notes]),
  .beta-form .primary-button,
  .beta-form .small-outline-button{grid-column:1/-1}
  .beta-form .primary-button{min-height:44px}

  /* -- Comparativo e projecao: mes e valor na mesma linha, detalhe embaixo.
        Eram tres linhas por mes (6 meses = uma tela e meia de scroll). -- */
  .projection-row{grid-template-columns:1fr auto;gap:2px 10px;padding:10px 12px}
  .projection-row span{grid-row:1;align-self:center;font-size:10px}
  .projection-row strong{grid-row:1;grid-column:2;justify-self:end;font-size:16px}
  .projection-row small{grid-row:2;grid-column:1/-1;font-size:10px}
  .projection-list{gap:8px;margin-top:12px}

  /* -- Listas de orcamento, meta e projeto -- */
  .finance-row.beta-row{gap:8px;padding:11px 12px}
  .finance-row.beta-row .row-actions{align-items:center;flex-direction:row;justify-content:flex-end;width:auto}
  .beta-row small{font-size:10px;line-height:1.4}
  .mini-track{margin-top:6px}

  /* -- Modal: os tres tipos cabem lado a lado e o teclado nao precisa de
        teclas de 90px. -- */
  .transaction-modal-card{padding:14px}
  .modal-header{margin-bottom:12px}
  .modal-header h2{font-size:19px}
  .modal-header p{font-size:11px;line-height:1.45}
  .value-calculator{gap:10px;margin-bottom:12px;padding:12px}
  .calculator-copy strong{font-size:24px}
  .calculator-copy small{font-size:10px}
  .transaction-kind-picker{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:10px}
  .transaction-kind-button{grid-template-columns:1fr;justify-items:center;gap:3px;min-height:0;padding:7px 4px;text-align:center}
  .transaction-kind-button strong{font-size:11px}
  .calculator-pad{gap:6px}
  .calc-key{min-height:42px;font-size:15px}
  .modal-actions{gap:8px;margin-top:10px;padding-top:12px}

  /* -- Contas e categorias em blocos -- */
  .finance-blocks{gap:8px;margin-top:12px}
  .finance-block{gap:6px;padding:11px 12px}
  .row-actions{gap:6px}
}

/* ============================================================
   Escala tipografica do celular.
   O layout web usa saltos grandes (13px de corpo para 28px de valor),
   que numa tela estreita viram desproporcao: o numero domina o card e
   empurra o resto para fora. Aqui a escala tem so tres degraus:

     base 13px  corpo, nomes de linha
     +1   15px  titulo de painel, valor de linha
     +2   18px  titulo de tela, valor em destaque

   Abaixo do corpo ficam 11px (apoio) e 9.5px (etiquetas). O destaque
   passa a vir de peso e cor, nao de tamanho.
   ============================================================ */
@media(max-width:700px){
  /* +2: titulo de tela e valores principais */
  .dashboard-heading h1{font-size:18px;letter-spacing:-.6px}
  .modal-header h2{font-size:18px;letter-spacing:-.5px}
  .projection-value{margin:10px 0 6px;font-size:18px;letter-spacing:-.5px}
  .metric-card strong{margin:5px 0 4px;font-size:18px;letter-spacing:-.5px}

  /* Unica excecao: o valor sendo digitado na calculadora e o foco do modal. */
  .calculator-copy strong{font-size:20px;letter-spacing:-.6px}

  /* +1: titulos de painel e valores de linha */
  .panel h2{font-size:15px;letter-spacing:-.3px}
  .balance-totals strong{font-size:15px}
  .investment-stat>strong{font-size:15px;letter-spacing:-.2px}
  .projection-row strong{font-size:15px}

  /* base: corpo e nomes */
  .transaction-date-header strong{font-size:13px}
  .transaction-day-footer strong{padding:5px 9px;font-size:13px}
  .account-balance-head strong,.finance-block-head strong{font-size:13px}
  .goal-progress-head strong{font-size:13px}

  /* apoio e etiquetas */
  .transaction-day-summary strong{font-size:12px}
  .empty-chart strong,.empty-list strong{font-size:12px}
  .status-pill{font-size:8.5px}
  .empty-icon{width:28px;height:28px;font-size:15px}
  .goal-placeholder>span{font-size:18px}
  .round-add{width:26px;height:26px;font-size:15px}
}

/* ============================================================
   Proximas contas no celular.
   O desktop usa um grid 2x2 ("nome acoes" / "vencimento conta") que numa
   tela de 411px nao cabe: cada conta virava quatro linhas e ocupava 320px,
   deixando so tres visiveis. Aqui a mesma informacao entra em tres linhas
   compactas, com o valor subindo para a linha do nome.
   ============================================================ */
@media(max-width:700px){
  .panel .upcoming-row{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "name  value"
      "due   due"
      "conta acao";
    gap:5px 8px;
    padding:10px 12px;
  }
  .panel .upcoming-row .upcoming-name{grid-area:name}
  .panel .upcoming-row .upcoming-due{grid-area:due}
  .panel .upcoming-row .upcoming-account{grid-area:conta;min-width:0}
  /* O wrapper some do grid para o valor e o botao virarem celulas proprias. */
  .panel .upcoming-row .upcoming-actions{display:contents}
  .panel .upcoming-row .upcoming-actions strong{grid-area:value;justify-self:end;align-self:center}
  .panel .upcoming-row .upcoming-actions .small-outline-button{grid-area:acao;justify-self:end}
  /* "CONTA:" e redundante: o seletor ao lado ja mostra o nome da conta. */
  .panel .upcoming-row .upcoming-account>span{display:none}
  .panel .upcoming-row .upcoming-account{display:block}
  .upcoming-overdue-badge{font-size:8.5px;padding:2px 6px}
}

/* ============================================================
   Cabecalho do dia no historico (celular).
   Data, "Registros" e "Entrando" ocupavam tres blocos empilhados de
   ~200px por dia - mais alto que o proprio lancamento que vem abaixo.
   Aqui tudo cabe em duas linhas discretas: o cabecalho e contexto, nao
   o conteudo.
   ============================================================ */
@media(max-width:700px){
  .transaction-date-header{
    align-items:baseline;
    flex-wrap:wrap;
    row-gap:2px;
    padding:8px 12px;
  }
  /* Data e dia da semana na mesma linha. */
  .transaction-date-header>div:first-child{
    display:flex;
    align-items:baseline;
    gap:7px;
    min-width:0;
  }
  .transaction-date-header strong{font-size:12.5px}
  .transaction-date-header span{font-size:10px}

  /* Os dois numeros viram texto corrido, sem caixa: sao referencia rapida. */
  .transaction-day-summary{flex:1 1 100%;justify-content:flex-start;gap:12px;width:100%}
  .transaction-day-summary span{
    display:flex;
    align-items:baseline;
    flex:0 1 auto;
    gap:4px;
    min-width:0;
    padding:0;
    border:0;
    background:none;
    box-shadow:none;
  }
  .transaction-day-summary small{font-size:9px;letter-spacing:.3px}
  .transaction-day-summary strong{font-size:11px}
  .transaction-day-footer{padding:7px 12px}
  .transaction-day-footer span{font-size:9px}
  .transaction-day-footer strong{padding:4px 8px;font-size:12px}
}

/* Correcao: o resumo precisa cair para a propria linha. Com a data ao lado
   nao havia largura para "Registros" e "Entrando", e o segundo era cortado.
   Especificidade maior porque as regras anteriores empatavam em 0,1,0. */
@media(max-width:700px){
  /* Grid em vez de flex: existem regras antigas disputando flex-direction
     (row x column) neste cabecalho, e com grid as duas linhas sao explicitas
     - data em cima, os dois numeros embaixo. */
  .transaction-date-group .transaction-date-header{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    align-items:baseline;
    gap:3px;
    padding:8px 12px;
  }
  .transaction-date-group .transaction-date-header>div:first-child{
    display:flex;
    align-items:baseline;
    gap:7px;
    min-width:0;
  }
  .transaction-date-group .transaction-day-summary{
    display:flex;
    justify-content:flex-start;
    width:100%;
    gap:14px;
    min-width:0;
  }
  .transaction-date-group .transaction-day-summary span{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* Resultado projetado abaixo de 10% das entradas: alerta explicito, alem da
   cor, para nao depender so de matiz. */
.projection-metric-card.is-critical{box-shadow:0 0 0 1px rgba(190,60,45,.25),0 6px 18px rgba(190,60,45,.12)}
.projection-metric-card.is-critical #projection-hint{color:#a8402f;font-weight:800}

/* ---------------------------------------------------------------
 * Planos de assinatura.
 *
 * Os cartoes usam grid com linhas nomeadas em vez de flex simples:
 * assim titulo, preco, lista e botao ficam na MESMA altura entre
 * cartoes, mesmo quando um plano tem uma vantagem a mais que o outro.
 * Era o pedido de "planos alinhados".
 * --------------------------------------------------------------- */
.plan-panel{margin-bottom:20px}
.period-switch{display:inline-flex;gap:4px;padding:4px;border:1px solid rgba(35,65,59,.1);border-radius:99px;background:#f2f7f3}
.period-option{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border:0;border-radius:99px;background:transparent;color:#54706b;font-size:12px;font-weight:760;cursor:pointer;transition:background .15s,color .15s}
.period-option.is-active{background:#fff;color:#173b37;box-shadow:0 2px 6px rgba(18,62,57,.09)}
.period-badge{padding:3px 6px;border-radius:99px;background:#dff3e4;color:#2f7a55;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.03em}

.plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:4px}
.plan-card{display:grid;grid-template-rows:auto auto auto 1fr auto;gap:10px;padding:18px;border:1px solid rgba(35,65,59,.1);border-radius:18px;background:#fff}
.plan-card>header{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:24px}
.plan-card h3{margin:0;color:#173b37;font-size:16px}
.plan-tag{padding:4px 8px;border-radius:99px;background:#173b37;color:#eaf6ee;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.03em}
.plan-tag-alt{background:#dff3e4;color:#2f7a55}
.plan-tagline{margin:0;color:#718783;font-size:12px;line-height:1.5;min-height:36px}
.plan-price{display:grid;gap:2px;padding-bottom:10px;border-bottom:1px solid rgba(35,65,59,.075)}
.plan-price strong{color:#173b37;font-size:26px;line-height:1.1}
.plan-price span{color:#718783;font-size:11px}
.plan-save{color:#2f7a55;font-size:11px;font-weight:760}
.plan-soon{color:#8ea09c;font-size:20px}
.plan-features{display:grid;gap:7px;margin:0;padding:0;list-style:none}
.plan-features li{position:relative;padding-left:19px;color:#465f5a;font-size:12px;line-height:1.5}
.plan-features li::before{content:"";position:absolute;left:0;top:6px;width:11px;height:11px;border-radius:99px;background:#dff3e4;box-shadow:inset 0 0 0 2px #6fb397}
/* primary-button e ghost-button tem alturas diferentes (46 e 38). Dentro
   do cartao eles ficam lado a lado, entao a diferenca aparece como
   desalinho mesmo com a base na mesma linha. */
.plan-card>button{width:100%;min-height:44px;justify-content:center}

.plan-card.is-highlight{border-color:rgba(111,179,151,.5);box-shadow:0 8px 22px rgba(18,62,57,.07)}
.plan-card.is-current{border-color:#173b37;background:linear-gradient(160deg,#f4faf6,#fff)}
.plan-card.is-soon{opacity:.72}
.plan-warning{color:#a04b36}
.plan-footer{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.plan-footer .muted{margin:0;font-size:12px}

@media(max-width:980px){.plan-grid{grid-template-columns:1fr}.plan-tagline{min-height:0}.plan-card{gap:8px;padding:15px}.plan-price strong{font-size:22px}}
@media(max-width:620px){.period-switch{width:100%}.period-option{flex:1;justify-content:center;padding:7px 8px}.period-badge{display:none}}