.form-transactions { margin: 0 0 20px; padding: 16px 18px; border: 1px solid var(--line, #deded7); border-radius: 12px; background: var(--surface, #fff); }
.form-transactions h2 { margin: 0 0 12px; font-size: 13px; font-weight: 650; color: var(--fg-soft, #586058); }
.form-transactions-row { display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 8px; }
.form-transaction { flex: 0 0 220px; display: flex; flex-direction: column; gap: 9px; padding: 12px 14px; border: 1px solid var(--line, #deded7); border-radius: 8px; background: transparent; text-align: left; color: inherit; font: inherit; cursor: pointer; }
.form-transaction:hover { background: var(--bg, #f4f6f1); border-color: var(--line-strong, #748a6c); }
.form-transaction:focus-visible { outline: 2px solid #47653d; outline-offset: 2px; }
.form-transaction-kind, .form-transaction-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; }
.form-transaction-kind { color: var(--fg-soft, #596657); }
.form-transaction strong { font-size: 15px; overflow-wrap: anywhere; }
.form-transaction-status { border-radius: 20px; padding: 3px 8px; background: color-mix(in srgb, var(--success, #4a5d3a) 12%, transparent); color: var(--success, #4a5d3a); font-size: 11px; }
.form-transaction.is-deleted .form-transaction-status { background: color-mix(in srgb, var(--danger, #883f32) 12%, transparent); color: var(--danger, #883f32); }
.form-transactions-empty, .form-transactions p { margin: 0; font-size: 13px; color: var(--mute, #677066); }
@media (max-width: 600px) { .form-transactions { padding: 12px; } .form-transaction { flex-basis: 190px; } }