#screen-finance-banks { --bank-blue: #06364d; --bank-green: #138454; --bank-red: #c84343; }
.bank-import-dialog { --bank-blue:#06364d; --bank-green:#138454; --bank-red:#c84343; }
.banking-head,.banking-head > div,.bank-notice,.bank-profile-card,.bank-profile-card > div:nth-child(2),.bank-connection,.bank-connection > div,.bank-connection span,.bank-ledger-head,.bank-filters,.bank-transaction-card { display:flex; }
.banking-head { align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:16px; }
.banking-head > div { align-items:flex-start; flex-direction:column; gap:3px; }
.banking-head span { color:#55717f; font-size:10px; font-weight:900; letter-spacing:.11em; }
.banking-head h2,.banking-head p { margin:0; }
.banking-head h2 { color:var(--bank-blue); font-size:27px; }
.banking-head p { color:var(--muted); }
.bank-notice { align-items:center; gap:13px; margin-bottom:16px; padding:14px 16px; border:1px solid #cbdde5; border-radius:14px; color:#315d70; background:#edf6f9; }
.bank-notice i { display:grid; place-items:center; flex:0 0 34px; height:34px; border-radius:50%; color:#fff; background:#487b91; font-style:normal; font-weight:900; }
.bank-notice div { display:grid; gap:2px; }
.bank-notice span { font-size:13px; }
.bank-notice.success { border-color:#b8ddcb; color:#176044; background:#ecf8f2; }
.bank-notice.success i { background:var(--bank-green); }
.bank-notice.error { border-color:#efc3bd; color:#8b3d35; background:#fff2f0; }
.bank-notice.error i { background:var(--bank-red); }
.bank-notice.working i { animation:bank-spin 1s linear infinite; }
@keyframes bank-spin { to { transform:rotate(360deg); } }
.bank-setup-help { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:16px; border-left:5px solid #c48624 !important; }
.bank-setup-help span { color:#97600c; font-size:10px; font-weight:900; letter-spacing:.11em; }
.bank-setup-help h2,.bank-setup-help p { margin:3px 0 0; }
.bank-setup-help p { color:var(--muted); }
.bank-setup-help code { padding:2px 5px; border-radius:5px; background:#eef2f4; }
.bank-profile-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.bank-profile-card { align-items:center; gap:13px; padding:16px; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 7px 22px rgba(12,50,68,.05); }
.bank-profile-card.connected { border-color:#a9d8c2; background:linear-gradient(140deg,#fff,#f0faf5); }
.bank-profile-avatar { display:grid; place-items:center; flex:0 0 44px; height:44px; border-radius:13px; color:#fff; background:var(--bank-blue); font-size:18px; font-weight:900; }
.bank-profile-card > div:nth-child(2) { align-items:flex-start; flex:1; flex-direction:column; min-width:0; }
.bank-profile-card span { color:#65818e; font-size:9px; font-weight:900; letter-spacing:.08em; }
.bank-profile-card h3,.bank-profile-card p { overflow:hidden; max-width:100%; margin:2px 0 0; text-overflow:ellipsis; white-space:nowrap; }
.bank-profile-card h3 { color:var(--bank-blue); }
.bank-profile-card p { color:var(--muted); font-size:12px; }
.bank-profile-card .button { flex:0 0 auto; }
.bank-connections-panel { margin-bottom:16px; padding:0 !important; overflow:hidden; }
.bank-connections-panel > .panel-title { padding:19px 21px 13px; }
.bank-connections { border-top:1px solid var(--line); }
.bank-connection { align-items:center; justify-content:space-between; gap:16px; padding:13px 20px; border-bottom:1px solid #edf1f3; }
.bank-connection:last-child { border-bottom:0; }
.bank-connection > div { align-items:center; gap:10px; }
.bank-connection > div:first-child i { display:grid; place-items:center; width:29px; height:29px; border-radius:9px; color:#fff; background:var(--bank-green); font-style:normal; }
.bank-connection span { align-items:flex-start; flex-direction:column; }
.bank-connection small { color:var(--muted); }
.bank-connection > div:last-child { flex-wrap:wrap; justify-content:flex-end; }
.bank-connection-status { display:inline-flex !important; padding:4px 7px; border-radius:999px; color:#176c4a; background:#e1f5e9; font-size:10px; font-weight:900; }
.bank-connection .danger { color:var(--bank-red); }
.banking-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:12px; }
.banking-summary article { display:grid; gap:5px; min-height:105px; padding:17px; border:1px solid var(--line); border-radius:15px; background:#fff; }
.banking-summary span { color:var(--muted); font-size:11px; font-weight:800; text-transform:uppercase; }
.banking-summary b { color:var(--bank-blue); font-size:24px; }
.banking-summary small { align-self:end; color:var(--muted); }
.bank-account-list { display:grid; border-top:1px solid var(--line); }
.bank-account-row { display:grid; grid-template-columns:42px minmax(175px,1.2fr) minmax(105px,.4fr) minmax(230px,1fr) auto; align-items:center; gap:13px; padding:13px 20px; border-bottom:1px solid #e8eef1; background:#fff; }
.bank-account-row:last-child { border-bottom:0; }
.bank-account-row.unmapped { background:#fffbf3; }
.bank-account-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; color:#fff; background:var(--bank-blue); font-size:12px; font-weight:900; }
.bank-account-icon.credit { background:#66528e; }
.bank-account-main { display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; }
.bank-account-main > div { min-width:0; }
.bank-account-main span { color:#627d89; font-size:9px; font-weight:900; letter-spacing:.08em; }
.bank-account-main h3,.bank-account-main p { overflow:hidden; margin:2px 0 0; text-overflow:ellipsis; white-space:nowrap; }
.bank-account-main h3 { color:var(--bank-blue); font-size:14px; }
.bank-account-main p,.bank-account-link small { color:var(--muted); font-size:11px; }
.bank-account-main p b { color:#345c6d; }
.bank-account-main > div > small { display:block; overflow:hidden; max-width:100%; margin-top:2px; color:var(--muted); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.bank-account-main strong { color:var(--bank-blue); white-space:nowrap; }
.bank-account-pending { display:grid; justify-items:start; }
.bank-account-pending b { color:var(--bank-blue); font-size:21px; line-height:1; }
.bank-account-pending span { font-size:11px; font-weight:900; }
.bank-account-pending small { color:var(--muted); font-size:9px; }
.bank-account-link { display:grid; gap:3px; min-width:0; }
.bank-account-link label { display:grid; gap:3px; color:#496b79; font-size:10px; font-weight:900; }
.bank-account-link select { width:100%; min-width:0; }
.bank-account-actions { display:grid; grid-template-columns:auto auto; gap:7px; }
.bank-account-actions .button { white-space:nowrap; }
.bank-ledger { padding:0 !important; overflow:hidden; }
.bank-ledger-head { align-items:center; justify-content:space-between; gap:14px; padding:20px 22px 14px; }
.bank-ledger-head h2,.bank-ledger-head p { margin:0; }
.bank-ledger-head p { margin-top:4px; color:var(--muted); }
.bank-filters { align-items:center; gap:8px; padding:0 22px 16px; }
.bank-filters select { min-width:175px; }
.bank-filters input { min-width:145px; }
.bank-value { white-space:nowrap; font-weight:900; }
.bank-value.revenue { color:var(--bank-green); }
.bank-value.expense { color:var(--bank-red); }
.bank-value.neutral { color:#6e6088; }
.bank-imported { color:var(--bank-green); font-size:11px; font-weight:900; white-space:nowrap; }
.bank-pending { color:#8a651e; font-size:11px; font-weight:800; white-space:nowrap; }
.bank-history { border-top:1px solid var(--line); }
.bank-history summary { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 22px; color:#31596b; cursor:pointer; font-weight:800; list-style:none; }
.bank-history summary::-webkit-details-marker { display:none; }
.bank-history summary::before { content:'›'; transform:rotate(0); font-size:21px; transition:transform .18s ease; }
.bank-history[open] summary::before { transform:rotate(90deg); }
.bank-history summary span { flex:1; }
.bank-history summary b { color:var(--muted); font-size:11px; }
.bank-transaction-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:0 22px 18px; }
.bank-transaction-card { align-items:stretch; flex-direction:column; gap:5px; min-width:0; padding:14px; border:1px solid var(--line); border-left:4px solid #7a6d91; border-radius:13px; background:#fff; }
.bank-transaction-card.revenue { border-left-color:var(--bank-green); }
.bank-transaction-card.expense { border-left-color:var(--bank-red); }
.bank-transaction-card header,.bank-transaction-card footer { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.bank-transaction-card header strong { color:#6e6088; }
.bank-transaction-card.revenue header strong { color:var(--bank-green); }
.bank-transaction-card.expense header strong { color:var(--bank-red); }
.bank-transaction-card h3,.bank-transaction-card p { overflow-wrap:anywhere; margin:0; }
.bank-transaction-card p,.bank-transaction-card small { color:var(--muted); }
.bank-transaction-card footer { margin-top:7px; padding-top:8px; border-top:1px solid var(--line); }
.bank-import-summary { display:grid; gap:12px; margin:18px 22px 0; padding:16px; border-radius:13px; color:#fff; background:var(--bank-blue); }
.bank-import-primary { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.bank-import-primary > div { display:grid; gap:3px; min-width:0; }
.bank-import-primary span { opacity:.72; font-size:10px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.bank-import-primary b { overflow-wrap:anywhere; font-size:16px; }
.bank-import-primary strong { flex:0 0 auto; font-size:23px; white-space:nowrap; }
.bank-import-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding-top:11px; border-top:1px solid rgba(255,255,255,.2); }
.bank-import-details > span { display:grid; gap:2px; min-width:0; }
.bank-import-details small { opacity:.65; font-size:9px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.bank-import-details b { overflow:hidden; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
#bankImportForm > .form-grid { padding:18px 22px 0; }
.bank-review-progress { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 22px 0; }
.bank-review-progress > div { display:flex; align-items:center; gap:8px; }
.bank-review-progress b { padding:5px 9px; border-radius:999px; color:#fff; background:var(--bank-blue); font-size:11px; }
.bank-review-progress span,.bank-review-progress small { color:var(--muted); font-size:11px; }
.bank-review-actions { display:grid !important; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:10px; }
.bank-review-resolution,.bank-review-navigation { display:flex; align-items:center; gap:7px; }
.bank-review-actions .hidden { display:none !important; }
.banking-head-actions,.bank-connection-actions,.bank-provider-actions,.bank-row-actions { display:flex; align-items:center; gap:8px; }
.bank-connection-actions { flex-wrap:wrap; justify-content:flex-end; }
.bank-mapping-panel { margin-bottom:16px; padding:0 !important; overflow:hidden; }
.bank-mapping-panel > .panel-title { padding:18px 20px 13px; }
.bank-mapping-panel > .panel-title p { margin:3px 0 0; color:var(--muted); font-size:12px; }
.bank-suggestion { display:inline-grid; gap:1px; max-width:180px; padding:6px 8px; border-radius:9px; color:#31596b; background:#eaf3f7; }
.bank-suggestion.gemini { color:#59418a; background:#f0ebfb; }
.bank-suggestion.rule { color:#176044; background:#e9f7ef; }
.bank-suggestion b,.bank-suggestion small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bank-suggestion small { font-size:9px !important; }
.bank-row-actions { align-items:flex-start; flex-direction:column; }
.bank-rules-panel { margin-top:16px; padding:0 !important; overflow:hidden; }
.bank-rules-panel > .panel-title { padding:18px 21px 13px; }
.bank-rules { border-top:1px solid var(--line); }
.bank-rule { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:12px 20px; border-bottom:1px solid #edf1f3; }
.bank-rule:last-child { border-bottom:0; }
.bank-rule span { display:grid; gap:3px; min-width:0; }
.bank-rule b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bank-rule small { color:var(--muted); }
.bank-import-summary small { opacity:.82; }
.bank-learn-rule { display:flex; align-items:flex-start; gap:10px; padding:12px; border:1px solid #cbdde5; border-radius:11px; background:#f2f8fa; }
.bank-learn-rule input { flex:0 0 auto; margin-top:3px; }
.bank-learn-rule span { display:grid; gap:2px; }
.bank-learn-rule small { color:var(--muted); }

#screen-settings-banking { --bank-blue:#06364d; --bank-green:#138454; --bank-red:#c84343; }
.bank-settings-head { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:16px; }
.bank-settings-head span { color:#55717f; font-size:10px; font-weight:900; letter-spacing:.11em; }
.bank-settings-head h2,.bank-settings-head p { margin:3px 0 0; }
.bank-settings-head h2 { color:var(--bank-blue); font-size:27px; }
.bank-settings-head p { color:var(--muted); }
.bank-provider-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; margin-bottom:16px; }
.bank-provider-card { display:grid; grid-template-columns:48px minmax(0,1fr); gap:13px; min-height:185px; padding:17px; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:var(--shadow); }
.bank-provider-card.connected { border-color:#acd8c3; background:linear-gradient(140deg,#fff,#f1faf6); }
.bank-provider-card.unavailable { opacity:.65; }
.bank-provider-logo { display:grid; place-items:center; width:48px; height:48px; border-radius:14px; color:#fff; background:var(--bank-blue); font-weight:900; }
.bank-provider-card > div:nth-child(2) { min-width:0; }
.bank-provider-card span { color:#62818f; font-size:9px; font-weight:900; letter-spacing:.09em; }
.bank-provider-card h3,.bank-provider-card p { margin:3px 0 0; }
.bank-provider-card h3 { color:var(--bank-blue); }
.bank-provider-card p { color:var(--muted); font-size:12px; }
.bank-provider-actions { align-self:end; grid-column:1/3; justify-content:flex-end; flex-wrap:wrap; }
.bank-provider-actions small { color:var(--muted); }
.bank-security-panel { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.bank-security-panel > div { display:flex; align-items:flex-start; gap:12px; }
.bank-security-panel i { font-style:normal; font-size:24px; }
.bank-security-panel span { display:grid; gap:3px; }
.bank-security-panel small { color:var(--muted); line-height:1.45; }
.bank-integration-dialog { max-width:590px; }

@media (max-width:1100px) {
  .bank-profile-grid { grid-template-columns:1fr 1fr; }
  .bank-account-row { grid-template-columns:42px minmax(160px,1fr) 100px minmax(210px,1fr); }
  .bank-account-actions { grid-column:2/5; justify-content:end; }
  .bank-provider-grid { grid-template-columns:1fr 1fr; }
  .bank-profile-card:last-child { grid-column:1/3; }
  .bank-filters { flex-wrap:wrap; }
}
@media (max-width:760px) {
  .banking-head,.bank-setup-help,.bank-connection,.bank-ledger-head,.bank-settings-head,.bank-security-panel { align-items:stretch; flex-direction:column; }
  .banking-head .button,.bank-setup-help .button { width:100%; }
  .banking-head-actions { display:grid; grid-template-columns:1fr; width:100%; }
  .bank-profile-grid,.banking-summary,.bank-provider-grid { grid-template-columns:1fr; }
  .bank-profile-card:last-child { grid-column:auto; }
  .bank-profile-card { display:grid; grid-template-columns:44px 1fr; }
  .bank-profile-card .button { grid-column:1/3; width:100%; }
  .bank-connection > div:last-child { justify-content:flex-start; }
  .bank-connection-actions { justify-content:flex-start; }
  .bank-filters { padding-inline:14px; }
  .bank-filters > * { flex:1 1 calc(50% - 8px); min-width:0 !important; }
  .bank-account-row { grid-template-columns:38px minmax(0,1fr) auto; align-items:start; padding:13px 14px; }
  .bank-account-icon { width:36px; height:36px; }
  .bank-account-main { align-items:flex-start; flex-direction:column; gap:5px; }
  .bank-account-pending { justify-items:end; }
  .bank-account-link,.bank-account-actions { grid-column:2/4; width:100%; }
  .bank-account-actions { grid-template-columns:1fr 1fr; }
  .bank-account-actions .button { width:100%; }
  .bank-history summary { padding-inline:14px; }
  .bank-transaction-cards { grid-template-columns:1fr; gap:9px; padding:0 14px 14px; }
  .bank-transaction-card footer,.bank-row-actions { align-items:stretch; }
  .bank-row-actions .text-button { min-height:38px; text-align:left; }
  .bank-rule { align-items:flex-start; }
  .bank-settings-head .button,.bank-security-panel a { width:100%; }
  .bank-security-panel a { text-align:center; }
  .bank-provider-card { min-height:0; }
  .bank-review-progress { align-items:flex-start; flex-direction:column; padding-inline:16px; }
  .bank-import-summary { margin-inline:16px; }
  .bank-import-primary { align-items:stretch; flex-direction:column; gap:8px; }
  .bank-import-primary strong { font-size:21px; }
  #bankImportForm > .form-grid { padding-inline:16px; }
  .bank-review-actions,.bank-integration-dialog .finance-dialog-actions { display:grid !important; grid-template-columns:1fr; }
  .bank-review-resolution,.bank-review-navigation { display:grid; grid-template-columns:1fr 1fr; }
  .bank-review-actions > .button { width:100%; }
}
@media (max-width:480px) {
  .bank-filters > * { flex-basis:100%; }
}
