#screen-finance-cards { --card-blue:#06364d; --card-cyan:#0d7896; --card-soft:#edf6f9; --card-red:#bd4545; }
.cards-head,.cards-head-actions,.cards-toolbar,.cards-month,.card-notice,.card-movements-head,.credit-card-selector,.credit-card-actions,.card-movement,.card-movement-actions,.card-category-row > div,.card-category-all { display:flex; }
.cards-head { align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:14px; }
.cards-head > div:first-child { display:grid; gap:3px; }
.cards-head > div > span { color:#587581; font-size:10px; font-weight:900; letter-spacing:.11em; }
.cards-head h2,.cards-head p { margin:0; }
.cards-head h2 { color:var(--card-blue); font-size:27px; }
.cards-head p { color:var(--muted); }
.cards-head-actions { gap:8px; }
.cards-toolbar { align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; padding:11px 13px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.cards-month { align-items:center; gap:8px; }
.cards-month label { display:grid; gap:2px; }
.cards-month small { color:var(--muted); font-size:9px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.cards-month input { min-width:155px; }
.card-notice { align-items:center; gap:11px; margin-bottom:14px; padding:12px 14px; border:1px solid #c9dce4; border-radius:13px; color:#2d6073; background:#eff7fa; }
.card-notice i { display:grid; place-items:center; flex:0 0 31px; height:31px; border-radius:9px; color:#fff; background:#4c8094; font-style:normal; font-weight:900; }
.card-notice span { display:grid; gap:1px; }
.card-notice small { color:inherit; opacity:.8; }
.card-notice.loading i { animation:card-spin 1s linear infinite; }
.card-notice.ready { border-color:#b8ddcb; color:#176044; background:#edf8f2; }
.card-notice.ready i { background:#138454; }
.card-notice.error { border-color:#efc3bd; color:#8b3d35; background:#fff2f0; }
.card-notice.error i { background:var(--card-red); }
@keyframes card-spin { to { transform:rotate(360deg); } }
.card-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; margin-bottom:14px; }
.card-metrics article { display:grid; gap:5px; min-height:105px; padding:17px; border:1px solid var(--line); border-radius:15px; background:#fff; box-shadow:0 6px 18px rgba(9,54,75,.04); }
.card-metrics span { color:#55717e; font-size:10px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.card-metrics b { overflow:hidden; color:var(--card-blue); font-size:23px; text-overflow:ellipsis; white-space:nowrap; }
.card-metrics small { align-self:end; color:var(--muted); }
.card-dashboard-grid { display:grid; grid-template-columns:minmax(330px,.88fr) minmax(390px,1.12fr); gap:14px; margin-bottom:14px; }
.card-list-panel,.card-category-panel,.card-movements-panel { padding:0 !important; overflow:hidden; }
.card-list-panel > .panel-title,.card-category-panel > .panel-title { padding:18px 20px 13px; }
.card-list-panel .panel-title p,.card-category-panel .panel-title p { margin-top:3px; color:var(--muted); font-size:12px; }
.credit-card-list { display:grid; border-top:1px solid var(--line); }
.credit-card-item { position:relative; border-bottom:1px solid #e9eef1; }
.credit-card-item:last-child { border-bottom:0; }
.credit-card-item.active { background:#eef7fa; }
.credit-card-selector { align-items:center; gap:11px; width:100%; min-width:0; padding:13px 18px; border:0; color:inherit; background:transparent; cursor:pointer; text-align:left; }
.credit-card-selector:hover,.credit-card-selector.active { background:#eff7fa; }
.credit-card-selector.all { justify-content:space-between; min-height:62px; border-bottom:1px solid #e9eef1; }
.credit-card-selector.all > span { display:grid; gap:2px; }
.credit-card-selector.all small { color:var(--muted); }
.credit-card-brand { display:grid; place-items:center; flex:0 0 39px; height:39px; border-radius:12px; color:#fff; background:linear-gradient(145deg,var(--card-blue),#0b6883); font-weight:900; }
.credit-card-copy { display:grid; flex:1; min-width:0; gap:1px; }
.credit-card-copy > small { color:#64818d; font-size:8px; font-weight:900; letter-spacing:.07em; }
.credit-card-copy > b,.credit-card-copy > span,.credit-card-copy > em { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.credit-card-copy > b { color:var(--card-blue); }
.credit-card-copy > span,.credit-card-copy > em { color:var(--muted); font-size:10px; font-style:normal; }
.credit-card-selector > strong { color:var(--card-blue); font-size:14px; white-space:nowrap; }
.credit-card-actions { align-items:center; gap:6px; padding:0 13px 11px 68px; }
.card-bill-button { display:grid; flex:1; gap:1px; min-width:0; padding:7px 10px; border:1px solid #bdd2db; border-radius:10px; color:#244f61; background:#fff; cursor:pointer; text-align:left; }
.card-bill-button:hover { border-color:#6d9bad; background:#f4fafc; }
.card-bill-button:disabled { cursor:not-allowed; opacity:.55; }
.card-bill-button span { font-size:10px; font-weight:900; }
.card-bill-button small { overflow:hidden; color:#68818b; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.card-bill-button.paid { border-color:#9fd1b7; color:#176044; background:#edf8f2; }
.card-delete { display:grid; place-items:center; width:28px; height:28px; padding:0; border:0; border-radius:50%; color:#9b4343; background:transparent; cursor:pointer; font-size:18px; }
.card-delete:hover { background:#fae9e8; }
.card-category-bars { display:grid; gap:8px; padding:10px 14px 16px; border-top:1px solid var(--line); }
.card-category-all { align-items:center; justify-content:space-between; gap:10px; width:100%; padding:9px 10px; border:1px solid transparent; border-radius:10px; color:#31596a; background:#f4f8fa; cursor:pointer; font-weight:800; }
.card-category-all:hover,.card-category-all.active { border-color:#b9d4df; background:#eaf5f8; }
.card-category-all strong { color:var(--card-blue); }
.card-category-row { display:grid; gap:6px; width:100%; padding:7px 9px; border:1px solid transparent; border-radius:10px; color:inherit; background:transparent; cursor:pointer; text-align:left; }
.card-category-row:hover,.card-category-row.active { border-color:#c7dce4; background:#f0f8fa; }
.card-category-row > div { align-items:center; gap:8px; }
.card-category-row b { flex:1; color:#294f60; }
.card-category-row strong { color:var(--card-blue); font-size:12px; }
.card-category-rank { display:grid; place-items:center; width:23px; height:23px; border-radius:8px; color:#3c687a; background:#e9f2f6; font-size:10px; font-weight:900; }
.card-category-row > i { display:block; height:7px; overflow:hidden; border-radius:99px; background:#e8eef1; }
.card-category-row > i > span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--card-blue),#1994b2); }
.card-movements-head { align-items:center; justify-content:space-between; gap:13px; padding:18px 20px 13px; }
.card-movements-head h2,.card-movements-head p { margin:0; }
.card-movements-head p { margin-top:3px; color:var(--muted); font-size:12px; }
.card-movements-head > b { padding:5px 9px; border-radius:999px; color:#31596a; background:#eaf3f7; font-size:11px; }
.card-movement-list { display:grid; border-top:1px solid var(--line); }
.card-movement { align-items:center; gap:13px; min-width:0; padding:12px 18px; border-bottom:1px solid #ebf0f2; }
.card-movement:last-child { border-bottom:0; }
.card-movement time { flex:0 0 78px; color:#587480; font-size:11px; font-weight:800; }
.card-movement-main { display:grid; flex:1; min-width:0; gap:2px; }
.card-movement-main b,.card-movement-main small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.card-movement-main b { color:#244d5f; }
.card-movement-main small { color:var(--muted); }
.card-category { display:grid; min-width:130px; padding:6px 9px; border:1px solid transparent; border-radius:10px; color:#345f71; background:#edf5f8; cursor:pointer; font-size:11px; font-weight:900; text-align:left; }
.card-category:hover { border-color:#9fc5d3; background:#e3f1f5; }
.card-category small { color:#6c8792; font-size:8px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.card-installment { padding:4px 7px; border-radius:8px; color:#725525; background:#fff4da; font-size:10px; font-weight:900; }
.card-installment.single { color:#58727d; background:#eef3f5; }
.card-movement > strong { min-width:92px; color:var(--card-blue); text-align:right; white-space:nowrap; }
.card-movement.projection { background:#fffdf5; }
.card-movement-actions { align-items:center; gap:5px; }
.card-projection-label { padding:5px 8px; border-radius:8px; color:#6d5a26; background:#fff2c9; font-size:9px; font-weight:900; text-transform:uppercase; }
.button.compact { min-height:29px; padding:5px 9px; font-size:10px; }
.card-installment-fields { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.card-payment-summary { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:15px; }
.card-payment-summary span { display:grid; gap:3px; padding:12px; border:1px solid var(--line); border-radius:11px; background:#f5f9fa; }
.card-payment-summary small { color:var(--muted); font-size:9px; font-weight:900; letter-spacing:.05em; text-transform:uppercase; }
.card-payment-summary b { overflow:hidden; color:var(--card-blue); text-overflow:ellipsis; white-space:nowrap; }
.card-form-hint { color:var(--muted); line-height:1.45; }
.card-dialog { max-width:620px; }

@media (max-width:980px) {
  .card-dashboard-grid { grid-template-columns:1fr; }
}
@media (max-width:760px) {
  .cards-head,.cards-toolbar,.card-movements-head { align-items:stretch; flex-direction:column; }
  .cards-head-actions { display:grid; grid-template-columns:1fr 1fr; }
  .card-metrics { grid-template-columns:1fr; }
  .card-metrics article { min-height:92px; }
  .cards-toolbar > .button { width:100%; }
  .cards-month { justify-content:space-between; }
  .cards-month label { flex:1; }
  .cards-month input { width:100%; min-width:0; }
  .card-movement { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px 10px; padding:13px 14px; }
  .card-movement time { grid-column:1; }
  .card-movement-main { grid-column:1/3; }
  .card-category { grid-column:1; min-width:0; justify-self:start; }
  .card-installment { grid-column:2; grid-row:3; }
  .card-movement > strong { grid-column:2; grid-row:1; min-width:0; }
  .card-movement-actions { grid-column:1/3; justify-content:flex-end; }
  .credit-card-actions { padding-left:13px; }
}
@media (max-width:480px) {
  .cards-head-actions { grid-template-columns:1fr; }
  .credit-card-selector { padding-inline:13px; }
  .credit-card-selector > strong { font-size:12px; }
  .card-payment-summary,.card-installment-fields { grid-template-columns:1fr; }
}