.bank-sync-workspace {
  --bank-blue: var(--cash, #7fb8ff);
  --bank-green: var(--save, #54c5a8);
  --bank-gold: var(--total, #f2c66d);
  --bank-red: var(--expense, #ff8e9c);
  overflow: hidden;
  border-color: color-mix(in srgb, var(--bank-blue) 22%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--bank-blue) 4%, var(--surface)), var(--surface) 38%),
    var(--surface);
}

.bank-sync-balance { display:flex; align-items:center; gap:32px; margin-top:18px; padding:20px 0; border-block:1px solid var(--line); }
.bank-sync-balance span { display:block; color:var(--muted); font-size:.8rem; }
.bank-sync-balance strong { display:block; margin-top:6px; color:var(--bank-blue); font-size:1.65rem; font-variant-numeric:tabular-nums; }
.bank-sync-balance p { max-width:60ch; margin:0; color:var(--muted); font-size:.8rem; line-height:1.6; }
.bank-sync-distribution { margin:22px 0; padding:18px; background:var(--surface-inset); border:1px solid var(--line); border-radius:10px; }
.bank-sync-distribution figcaption { font-size:.8rem; color:var(--muted); margin-bottom:14px; }
.bank-sync-distribution-row { display:grid; grid-template-columns:minmax(100px,180px) minmax(40px,1fr) 90px; gap:16px; align-items:center; margin:9px 0; font-size:.78rem; }
.bank-sync-distribution-row strong { text-align:right; font-variant-numeric:tabular-nums; }
.bank-sync-distribution-row meter { width:100%; height:10px; accent-color:var(--bank-blue); }
.bank-sync-distribution-row meter::-webkit-meter-bar { background:var(--line); border:0; }
.bank-sync-distribution-row meter::-webkit-meter-optimum-value { background:var(--bank-blue); }
.bank-sync-search { box-sizing:border-box; width:100%; min-height:44px; margin-top:14px; padding:10px 14px; color:var(--ink); background:var(--surface-inset); border:1px solid var(--line-strong); border-radius:8px; }
.bank-sync-feedback { margin:14px 0 0; padding:11px 13px; border:1px solid var(--line); border-radius:8px; font-size:.78rem; line-height:1.5; }
.bank-sync-feedback--ok { color:var(--bank-green); background:color-mix(in srgb,var(--bank-green) 7%,var(--surface-inset)); border-color:color-mix(in srgb,var(--bank-green) 28%,var(--line)); }
.bank-sync-feedback--error { color:var(--bank-red); background:color-mix(in srgb,var(--bank-red) 7%,var(--surface-inset)); border-color:color-mix(in srgb,var(--bank-red) 28%,var(--line)); }
.bank-sync-detail > summary { cursor:pointer; padding:0 18px 12px; font-size:.75rem; color:var(--bank-blue); }
.bank-sync-raw { overflow-wrap:anywhere; margin:8px 18px; font-size:.75rem; color:var(--muted); }
.bank-sync-review-control .bank-sync-remember { display:flex; align-items:center; gap:10px; margin:14px 0; line-height:1.5; }
.bank-sync-remember input { width:18px; height:18px; flex:none; accent-color:var(--bank-blue); }
.bank-sync-workspace :is(button, input, select, summary):focus-visible { outline:2px solid var(--bank-blue); outline-offset:3px; }
.bank-sync-pairing { display:grid; grid-template-columns:minmax(240px,1.35fr) minmax(210px,1fr) minmax(180px,.72fr) auto; gap:12px; align-items:end; margin-top:18px; padding:18px; border:1px solid color-mix(in srgb,var(--bank-blue) 22%,var(--line)); border-radius:10px; background:var(--surface-inset); }
.bank-sync-pairing-copy { align-self:center; }
.bank-sync-pairing-copy strong { display:block; margin-bottom:5px; color:var(--ink); font-size:.84rem; }
.bank-sync-pairing-copy p { margin:0; color:var(--muted); font-size:.73rem; line-height:1.5; }
.bank-sync-pairing > label { display:grid; gap:7px; color:var(--muted); font-size:.68rem; }
.bank-sync-pairing input,
.bank-sync-post-control select { box-sizing:border-box; width:100%; min-height:44px; padding:0 12px; border:1px solid var(--field-border); border-radius:7px; background:var(--surface); color:var(--ink); }
.bank-sync-control-label { display:block; margin-bottom:8px; color:var(--muted); font-size:.7rem; }
.bank-sync-post-control { display:grid; grid-template-columns:minmax(220px,1fr) minmax(260px,1.15fr) auto; gap:14px; align-items:center; padding:15px 17px 16px 19px; border-top:1px solid color-mix(in srgb,var(--bank-green) 24%,var(--line)); background:color-mix(in srgb,var(--bank-green) 4%,var(--surface)); }
.bank-sync-post-control strong { display:block; color:var(--bank-green); font-size:.76rem; }
.bank-sync-post-control p { margin:5px 0 0; color:var(--muted); font-size:.7rem; line-height:1.45; }
@media(max-width:680px) {
  .bank-sync-balance { align-items:flex-start; flex-direction:column; gap:10px; }
  .bank-sync-distribution { padding:12px; }
  .bank-sync-distribution-row { grid-template-columns:minmax(80px,1fr) minmax(25px,1fr) 78px; gap:8px; }
  .bank-sync-provider-controls { flex-wrap:wrap; }
  .bank-sync-pairing,
  .bank-sync-post-control { grid-template-columns:1fr; align-items:stretch; }
}

.bank-sync-head,
.bank-sync-provider-controls,
.bank-sync-transaction-main,
.bank-sync-review-actions,
.bank-sync-safety {
  display: flex;
  align-items: center;
}

.bank-sync-head {
  justify-content: space-between;
  gap: 24px;
}

.bank-sync-title {
  min-width: 0;
}

.bank-sync-title .panel-title {
  margin-bottom: 8px;
}

.bank-sync-title > p,
.bank-sync-empty p,
.bank-sync-decision p,
.bank-sync-pair-note,
.bank-sync-no-result {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.55;
}

.bank-sync-kicker {
  display: block;
  margin-bottom: 7px;
  color: var(--bank-blue);
  font: 600 0.68rem/1.3 var(--mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.bank-sync-provider-controls {
  flex: 0 0 auto;
  justify-content: flex-end;
  gap: 10px;
}

.bank-sync-provider-status,
.bank-sync-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  white-space: nowrap;
}

.bank-sync-provider-status {
  padding: 5px 10px;
  color: var(--bank-gold);
  background: color-mix(in srgb, var(--bank-gold) 8%, var(--surface-inset));
  font: 600 0.68rem/1 var(--mono);
}

.bank-sync-provider-status::before {
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.bank-sync-provider-status.is-ready {
  color: var(--bank-green);
}

.bank-sync-safety {
  gap: 12px;
  margin-top: 22px;
  padding: 13px 15px;
  border: 1px solid color-mix(in srgb, var(--bank-blue) 18%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--bank-blue) 4%, var(--surface-inset));
}

.bank-sync-safety::before {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border: 2px solid var(--bank-blue);
  border-radius: 50%;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bank-blue) 10%, transparent);
  content: "";
}

.bank-sync-safety strong {
  flex: 0 0 auto;
  color: var(--ink);
  font-size: 0.78rem;
}

.bank-sync-safety span {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.45;
}

.bank-sync-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--line);
}

.bank-sync-stat {
  min-width: 0;
  padding: 15px 16px;
  background: var(--surface-inset);
}

.bank-sync-stat span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 0.68rem;
}

.bank-sync-stat strong {
  color: var(--ink);
  font: 600 1.25rem/1.2 var(--font-display);
  font-variant-numeric: tabular-nums;
}

.bank-sync-stat--review strong { color: var(--bank-gold); }
.bank-sync-stat--transfer strong { color: var(--bank-blue); }
.bank-sync-stat--income strong { color: var(--bank-green); }

.bank-sync-filters {
  display: flex;
  gap: 6px;
  margin-top: 18px;
  overflow-x: auto;
  scrollbar-width: none;
}

.bank-sync-filters::-webkit-scrollbar { display: none; }

.bank-sync-filter {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-inset);
  color: var(--muted);
  cursor: pointer;
  font: 500 0.75rem var(--font);
}

.bank-sync-filter strong {
  min-width: 22px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--surface-hover);
  color: var(--ink);
  font: 600 0.65rem var(--mono);
}

.bank-sync-filter:hover,
.bank-sync-filter.is-active {
  border-color: color-mix(in srgb, var(--bank-blue) 50%, var(--line));
  color: var(--ink);
}

.bank-sync-filter.is-active {
  background: color-mix(in srgb, var(--bank-blue) 8%, var(--surface-inset));
  box-shadow: inset 0 -2px 0 var(--bank-blue);
}

.bank-sync-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.bank-sync-transaction {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-inset) 82%, transparent);
}

.bank-sync-transaction::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--transaction-tone, var(--line-strong));
  content: "";
}

.bank-sync-transaction--expense { --transaction-tone: var(--bank-red); }
.bank-sync-transaction--income { --transaction-tone: var(--bank-green); }
.bank-sync-transaction--transfer { --transaction-tone: var(--bank-blue); }
.bank-sync-transaction--review { --transaction-tone: var(--bank-gold); }
.bank-sync-transaction--pending { --transaction-tone: var(--muted); }

.bank-sync-transaction-main {
  display: grid;
  grid-template-columns: minmax(190px, 1.15fr) minmax(220px, 1fr) minmax(110px, auto);
  gap: 18px;
  padding: 16px 17px 16px 19px;
}

.bank-sync-transaction-identity,
.bank-sync-decision {
  min-width: 0;
}

.bank-sync-transaction-identity > strong {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bank-sync-transaction-identity > span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font: 500 0.68rem/1.35 var(--mono);
}

.bank-sync-decision p {
  margin-top: 6px;
}

.bank-sync-badge {
  min-height: 24px;
  padding: 3px 8px;
  font: 600 0.65rem/1 var(--font);
}

.bank-sync-badge--expense { border-color: color-mix(in srgb, var(--bank-red) 30%, var(--line)); color: var(--bank-red); background: color-mix(in srgb, var(--bank-red) 7%, transparent); }
.bank-sync-badge--income { border-color: color-mix(in srgb, var(--bank-green) 30%, var(--line)); color: var(--bank-green); background: color-mix(in srgb, var(--bank-green) 7%, transparent); }
.bank-sync-badge--transfer { border-color: color-mix(in srgb, var(--bank-blue) 30%, var(--line)); color: var(--bank-blue); background: color-mix(in srgb, var(--bank-blue) 7%, transparent); }
.bank-sync-badge--review { border-color: color-mix(in srgb, var(--bank-gold) 30%, var(--line)); color: var(--bank-gold); background: color-mix(in srgb, var(--bank-gold) 7%, transparent); }
.bank-sync-badge--pending { color: var(--muted); background: var(--surface-hover); }

.bank-sync-amount {
  align-self: center;
  justify-self: end;
  color: var(--ink);
  font: 600 0.9rem/1.2 var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bank-sync-amount.is-credit { color: var(--bank-green); }
.bank-sync-amount.is-debit { color: var(--bank-red); }

.bank-sync-review-control {
  padding: 13px 17px 15px 19px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--bank-gold) 3%, var(--surface));
}

.bank-sync-review-control > label {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 0.7rem;
}

.bank-sync-review-actions {
  align-items: stretch;
  gap: 8px;
}

.bank-sync-review-actions select {
  min-width: 0;
  min-height: 44px;
  flex: 1 1 240px;
  border: 1px solid var(--field-border);
  border-radius: 7px;
  background: var(--surface-inset);
  color: var(--ink);
  padding: 0 12px;
}

.bank-sync-review-actions .btn {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 110px;
}

.bank-sync-pair-note {
  padding: 0 17px 14px 19px;
  color: var(--bank-blue);
}

.bank-sync-empty {
  margin-top: 18px;
  padding: 28px;
  border: 1px dashed var(--line-strong);
  border-radius: 9px;
  background: var(--surface-inset);
  text-align: center;
}

.bank-sync-empty strong {
  display: block;
  margin-bottom: 7px;
  color: var(--ink);
}

.bank-sync-empty .btn {
  margin-top: 16px;
}

.bank-sync-no-result {
  padding: 22px;
  text-align: center;
}

@media (max-width: 900px) {
  .bank-sync-head { align-items: flex-start; }
  .bank-sync-provider-controls { flex-direction: column; align-items: stretch; }
  .bank-sync-transaction-main { grid-template-columns: minmax(0, 1fr) auto; }
  .bank-sync-decision { grid-column: 1 / -1; grid-row: 2; }
  .bank-sync-amount { grid-column: 2; grid-row: 1; }
  .bank-sync-pairing { grid-template-columns:1fr 1fr; }
  .bank-sync-pairing-copy { grid-column:1 / -1; }
  .bank-sync-post-control { grid-template-columns:1fr; align-items:stretch; }
}

@media (max-width: 680px) {
  .bank-sync-head,
  .bank-sync-safety {
    align-items: stretch;
    flex-direction: column;
  }
  .bank-sync-provider-controls { flex-direction: row; justify-content: space-between; }
  .bank-sync-safety { gap: 7px; }
  .bank-sync-safety::before { display: none; }
  .bank-sync-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bank-sync-transaction-main { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .bank-sync-decision,
  .bank-sync-amount { grid-column: 1; grid-row: auto; }
  .bank-sync-amount { justify-self: start; }
  .bank-sync-review-actions { align-items: stretch; flex-direction: column; }
  .bank-sync-review-actions select { flex: 0 0 44px; width: 100%; }
  .bank-sync-review-actions .btn { width: 100% !important; }
}

@media (prefers-reduced-motion: reduce) {
  .bank-sync-workspace *,
  .bank-sync-workspace *::before,
  .bank-sync-workspace *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}