/* Banking DS — estilos dos componentes. Depende de tokens.css. */
.bk { font-family: var(--font-sans); color: var(--text-primary); -webkit-font-smoothing: antialiased; }

/* Button */
.bk-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 48px; padding: 0 var(--space-6); border-radius: var(--radius-xs); border: 0; font: 500 14px/20px var(--font-sans); cursor: pointer; }
.bk-btn--primary { background: var(--action-primary); color: var(--on-action); }
.bk-btn--secondary { background: var(--surface-card); color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--border-subtle); }
.bk-btn--sm { height: 36px; padding: 0 var(--space-4); font-size: 12px; }
.bk-btn:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }
.bk-btn[disabled] { opacity: .4; cursor: not-allowed; }

/* QuickAction */
.bk-qa { display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-1); width: 64px; background: none; border: 0; padding: 0; color: var(--text-primary); font: 400 12px/16px var(--font-sans); cursor: pointer; }
.bk-qa__icon { width: 48px; height: 48px; border-radius: var(--radius-pill); display: grid; place-items: center; background: var(--surface-card); color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--border-subtle); }
.bk-qa--active .bk-qa__icon { background: var(--action-primary); color: var(--on-action); box-shadow: none; }
.bk-qa svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* SegmentedControl */
.bk-seg { display: inline-flex; gap: var(--space-1); padding: var(--space-1); border-radius: var(--radius-pill); background: var(--surface-raised); }
.bk-seg__item { height: 32px; padding: 0 var(--space-4); border-radius: var(--radius-pill); border: 0; background: transparent; color: var(--text-muted); font: 500 12px/16px var(--font-sans); cursor: pointer; }
.bk-seg__item[aria-pressed="true"] { background: var(--action-primary); color: var(--on-action); }

/* BalanceCard */
.bk-card { position: relative; width: 300px; height: 180px; border-radius: var(--radius-lg); padding: var(--space-6); box-sizing: border-box; color: var(--brand-white); overflow: hidden;
  background: var(--gradient-brand); }
.bk-card__label { font: 400 12px/16px var(--font-sans); opacity: .85; }
.bk-card__balance { position: absolute; left: var(--space-6); bottom: var(--space-6); font: 500 32px/36px var(--font-sans); letter-spacing: -0.01em; }
.bk-card__chip { position: absolute; top: var(--space-6); right: var(--space-6); width: 28px; height: 28px; border-radius: var(--radius-pill); background: var(--brand-mint); }

/* StatTile */
.bk-stat { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-card); min-width: 96px; }
.bk-stat__label { font: 400 12px/16px var(--font-sans); color: var(--text-muted); }
.bk-stat__value { font: 500 16px/22px var(--font-sans); }
.bk-pos { color: var(--positive); }
.bk-neg { color: var(--negative); }

/* TransactionRow */
.bk-list { background: var(--surface-card); border-radius: var(--radius-md); padding: 0 var(--space-4); }
.bk-tx { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; }
.bk-tx + .bk-tx { border-top: 1px solid var(--border-subtle); }
.bk-tx__icon { width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--surface-raised); display: grid; place-items: center; flex: none; }
.bk-tx__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bk-tx__main { flex: 1; min-width: 0; }
.bk-tx__title { font: 400 14px/20px var(--font-sans); }
.bk-tx__meta { font: 400 12px/16px var(--font-sans); color: var(--text-muted); }
.bk-tx__amount { font: 500 14px/20px var(--font-sans); white-space: nowrap; }

/* Tag */
.bk-tag { display: inline-flex; align-items: center; height: 28px; padding: 0 var(--space-3); border-radius: var(--radius-pill); background: var(--brand-white); color: var(--brand-ink); font: 400 12px/16px var(--font-sans); }
.bk-tag--outline { background: transparent; color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--border-subtle); }