/* Transaction query reference: 375u. System areas belong to the device. */
.on-transactions .page-scroll { background: #f4f4f4; }
.on-transactions button:focus-visible { outline-color: #0069fc; }
.on-transactions ::selection { background: #cfe3ff; color: #222; }
#transaction-view { min-height: 100%; padding-top: calc(44 * var(--u) + var(--safe-top)); background: #f4f4f4; color: #222; }
.transaction-summary { height: calc(40 * var(--u)); display: flex; align-items: center; justify-content: space-between; padding-left: calc(14 * var(--u)); background: #f4f4f4; color: #666; font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); }
.transaction-filter { display: flex; align-items: center; justify-content: flex-end; gap: calc(6 * var(--u)); height: 100%; padding: 0 calc(10 * var(--u)); color: #222; }
.transaction-filter svg { width: calc(16 * var(--u)); height: calc(18 * var(--u)); stroke-width: 1.5; }
.transaction-month { display: flex; align-items: center; height: calc(32 * var(--u)); margin: 0; padding-left: calc(7 * var(--u)); background: #f9f9f9; color: #666; font-family: Arial, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif; font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); font-weight: 400; }
.transaction-record { display: grid; grid-template-columns: calc(40 * var(--u)) minmax(0, 1fr); height: calc(80 * var(--u)); }
.transaction-date { position: relative; background: #f9f9f9; color: #666; text-align: center; }
.transaction-day { position: absolute; top: calc(22 * var(--u)); left: 0; width: 100%; font-family: Arial, sans-serif; font-size: calc(20 * var(--u)); line-height: calc(24 * var(--u)); font-weight: 700; }
.transaction-weekday { position: absolute; top: calc(44.667 * var(--u)); left: 0; width: 100%; font-size: calc(10 * var(--u)); line-height: calc(14 * var(--u)); }
.transaction-card { position: relative; min-width: 0; background: #fff; }
.transaction-kind { position: absolute; left: calc(16 * var(--u)); top: calc(14 * var(--u)); font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); }
.transaction-value { position: absolute; top: calc(43 * var(--u)); right: calc(16 * var(--u)); display: flex; align-items: baseline; gap: calc(5 * var(--u)); margin: 0; font-size: calc(16 * var(--u)); line-height: calc(22 * var(--u)); font-weight: 600; white-space: nowrap; }
.transaction-amount { font-family: Arial, sans-serif; font-weight: 700; font-variant-numeric: tabular-nums; }