@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.txn-account-card { align-items: center; background: transparent; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; display: flex; flex: 1; gap: var(--space-3); height: 100%; min-height: var(--size-2xl); padding: var(--space-2) var(--space-3); text-align: left; transition: var(--transition-interactive), box-shadow 0.2s ease; }
.txn-account-card:focus { border-color: var(--accent); box-shadow: var(--focus-ring); outline: none; }
.txn-account-card:hover { background: var(--surface-alt); border-color: var(--accent); }
.txn-account-card__balance { color: var(--text-muted); font-size: var(--text-xs); }
.txn-account-card__clear { align-items: center; background: var(--surface); border: none; border-radius: 50%; color: var(--text-muted); cursor: pointer; display: flex; flex-shrink: 0; height: var(--size-base); justify-content: center; margin-left: auto; transition: var(--transition-interactive); width: var(--size-base); }
.txn-account-card__clear:hover { background: var(--danger); color: var(--bg); }
.txn-account-card__icon { align-items: center; color: var(--text-muted); display: flex; flex-shrink: 0; justify-content: center; }
.txn-account-card__icon--selected { background: rgba(var(--accent-rgb), 0.1); border-radius: var(--radius); color: var(--accent); height: var(--size-lg); width: var(--size-lg); }
.txn-account-card__info { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.txn-account-card__label { color: var(--text-muted); font-size: var(--text-xs); font-weight: var(--font-medium); text-transform: uppercase; }
.txn-account-card__name { color: var(--text); font-size: var(--text-sm); font-weight: var(--font-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.txn-account-card--placeholder .txn-account-card__name { color: var(--text-muted); font-weight: var(--font-medium); }
.txn-account-row { align-items: stretch; display: flex; gap: var(--space-3); }
.txn-account-row > * { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.txn-amount { align-items: center; display: flex; flex-direction: column; padding: var(--space-4) 0; }
.txn-amount[class*="--"] .txn-amount__input, .txn-amount[class*="--"] .txn-amount__input::placeholder, .txn-amount[class*="--"] .txn-amount__symbol { color: var(--amt-color); }
.txn-amount[class*="--"] .txn-amount__input::placeholder { opacity: 1; }
.txn-amount[class*="--"] .txn-amount__row { filter: drop-shadow(0 4px 16px rgba(var(--amt-glow-rgb), 0.3)); }
.txn-amount__input { background: transparent; border: none; caret-color: transparent; font-family: var(--font-mono), monospace; font-size: clamp(2.5rem, 10vw, 4rem); font-weight: var(--font-bold); letter-spacing: -0.02em; line-height: 1; min-width: 1ch; outline: none; padding: 0; text-align: left; width: auto; }
.txn-amount__input:-webkit-autofill, .txn-amount__input:-webkit-autofill:focus, .txn-amount__input:-webkit-autofill:hover { -webkit-box-shadow: 0 0 0 1000px transparent inset; -webkit-text-fill-color: var(--text); background: transparent; transition: background-color 5000s ease-in-out 0s; }
.txn-amount__input::selection { background: rgba(var(--accent-rgb), 0.3); color: var(--text); }
.txn-amount__input:focus { outline: none; }
.txn-amount__input:not(:placeholder-shown) { caret-color: currentColor; }
.txn-amount__row { align-items: baseline; display: inline-flex; gap: 0; justify-content: center; }
.txn-amount__symbol { cursor: pointer; font-family: var(--font-mono), monospace; font-size: clamp(2.5rem, 10vw, 4rem); font-weight: var(--font-bold); line-height: 1; transition: opacity 0.2s ease; }
.txn-amount__symbol:hover { opacity: 0.8; }
.txn-amount--charging { --amt-color: var(--success-bright); --amt-glow-rgb: var(--success-bright-rgb); }
.txn-amount--expense { --amt-color: var(--danger); --amt-glow-rgb: var(--danger-rgb); }
.txn-amount--goal { --amt-color: var(--accent); --amt-glow-rgb: var(--accent-rgb); }
.txn-amount--income { --amt-color: var(--success); --amt-glow-rgb: var(--success-rgb); }
.txn-amount--refueling { --amt-color: var(--warning); --amt-glow-rgb: var(--warning-rgb); }
.txn-amount--transfer { --amt-color: var(--accent); --amt-glow-rgb: var(--accent-rgb); }
.txn-battery-bar { margin: var(--space-2) 0 var(--space-4); }
.txn-battery-bar__fill { background: linear-gradient(180deg, var(--success-bright) 0%, var(--success) 50%, var(--success) 100%); border-radius: var(--radius); box-shadow: var(--tub-shadow-inset); height: 100%; left: 0; position: absolute; top: 0; transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.txn-battery-bar__marker { color: var(--text-muted); font-size: var(--text-2xs); }
.txn-battery-bar__markers { display: flex; justify-content: space-between; margin-top: var(--space-1); padding: 0 2px; }
.txn-battery-bar__track { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--tub-shadow-inset); height: 14px; overflow: hidden; position: relative; width: 100%; }
.txn-battery-divider { color: var(--text-muted); font-size: var(--text-lg); font-weight: var(--font-semibold); }
.txn-battery-picker { align-items: center; display: flex; gap: var(--space-3); justify-content: center; padding: var(--space-2) 0; }
.txn-battery-spinner { align-items: center; display: flex; flex-direction: column; gap: var(--space-1); }
.txn-battery-spinner__btn { align-items: center; background: var(--surface); border: none; border-radius: var(--radius); color: var(--text-muted); cursor: pointer; display: flex; height: var(--size-btn-lg); justify-content: center; transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease; width: var(--size-btn); }
.txn-battery-spinner__btn:active { transform: scale(0.92); }
.txn-battery-spinner__btn:hover { background: var(--bg); color: var(--accent); }
.txn-battery-spinner__control { align-items: center; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: row; gap: 0; padding: var(--space-1); }
.txn-battery-spinner__label { color: var(--text-muted); font-size: var(--font-size-micro); font-weight: var(--font-semibold); letter-spacing: 0.08em; text-transform: uppercase; }
.txn-battery-spinner__unit { color: var(--text-muted); font-size: var(--text-sm); font-weight: var(--font-medium); }
.txn-battery-spinner__value { color: var(--text); font-family: var(--font-mono), monospace; font-size: 1.75rem; font-weight: var(--font-bold); line-height: 1; min-width: 56px; padding: 0 var(--space-1); text-align: center; }
.txn-compact-field { display: flex; flex-direction: column; gap: var(--space-1); }
.txn-compact-field__hint { color: var(--text-muted); font-size: var(--text-xs); margin-top: var(--space-1); }
.txn-compact-field__input { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: var(--text-sm); font-weight: var(--font-medium); min-height: var(--size-btn-lg); padding: var(--space-3) var(--space-4); transition: var(--transition-interactive), box-shadow 0.2s ease; width: 100%; }
.txn-compact-field__input::placeholder { color: var(--text-muted); opacity: 0.6; }
.txn-compact-field__input:focus { background: var(--bg); border-color: var(--accent); box-shadow: var(--focus-ring); outline: none; }
.txn-compact-field__input--textarea { min-height: 80px; resize: vertical; }
.txn-compact-field__label { color: var(--text-muted); font-size: var(--text-xs); font-weight: var(--font-semibold); letter-spacing: 0.05em; text-transform: uppercase; }
.txn-fuel-stats { background: var(--surface); border-radius: var(--radius); display: grid; gap: 1px; grid-template-columns: repeat(2, 1fr); overflow: hidden; }
.txn-fuel-stats__item { align-items: center; background: var(--surface-alt); display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); }
.txn-fuel-stats__label { color: var(--text-muted); font-size: var(--text-xs); text-align: center; }
.txn-fuel-stats__value { color: var(--text); font-size: var(--text-lg); font-weight: var(--font-bold); }
.txn-icon-card { align-items: center; background: transparent; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-muted); cursor: pointer; display: flex; flex-shrink: 0; height: var(--size-2xl); justify-content: center; transition: var(--transition-interactive); width: var(--size-2xl); }
.txn-icon-card:hover { background: var(--surface-alt); border-color: var(--accent); color: var(--accent); }
.txn-inline-grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
.txn-inline-grid--3 { grid-template-columns: 1fr; }
.txn-modal { background: transparent; display: flex; flex: 1; flex-direction: column; gap: var(--space-4); min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: var(--space-4); padding-top: var(--space-2); }
.txn-notes { border-top: 1px solid var(--border); margin-top: var(--space-2); padding-top: var(--space-3); }
.txn-notes__content { animation: slideDown 0.2s ease; }
.txn-notes__textarea { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-family: inherit; font-size: var(--text-sm); min-height: 80px; padding: var(--space-3); resize: vertical; transition: border-color 0.2s ease; width: 100%; }
.txn-notes__textarea::placeholder { color: var(--text-muted); }
.txn-notes__textarea:focus { border-color: var(--accent); outline: none; }
.txn-notes__toggle { align-items: center; background: transparent; border: none; color: var(--text-muted); cursor: pointer; display: flex; font-size: var(--text-sm); font-weight: var(--font-medium); gap: var(--space-2); padding: var(--space-2) 0; transition: color 0.2s ease; width: 100%; }
.txn-notes__toggle .icon-sm { transition: transform 0.2s ease; }
.txn-notes__toggle.expanded .icon-sm { transform: rotate(180deg); }
.txn-notes__toggle:hover { color: var(--text); }
.txn-quick-date { align-items: center; display: flex; gap: var(--space-2); justify-content: center; }
.txn-quick-date__chip { background: transparent; border: 1px solid transparent; border-radius: var(--radius); color: var(--text-muted); cursor: pointer; font-size: var(--text-sm); font-weight: var(--font-semibold); padding: var(--space-3) var(--space-4); transition: var(--transition-interactive); }
.txn-quick-date__chip.active { background: var(--surface); border-color: var(--border); color: var(--text); }
.txn-quick-date__chip:hover { background: var(--surface-alt); color: var(--text); }
.txn-section { display: flex; flex-direction: column; gap: var(--space-3); }
.txn-section__header { align-items: center; color: var(--text-muted); display: flex; font-size: var(--text-xs); font-weight: var(--font-semibold); gap: var(--space-2); letter-spacing: 0.05em; text-transform: uppercase; }
.txn-section__header::after { background: var(--border); content: ""; flex: 1; height: 1px; }
.txn-toggle { align-items: center; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; display: flex; gap: var(--space-3); min-height: var(--size-3xl); padding: var(--space-3); transition: var(--transition-interactive); width: 100%; }
.txn-toggle:hover { background: var(--surface); border-color: var(--accent); }
.txn-toggle__content { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.txn-toggle__desc { color: var(--text-muted); font-size: var(--text-xs); }
.txn-toggle__indicator { align-items: center; background: var(--surface); border-radius: var(--radius); color: var(--text-muted); display: flex; flex-shrink: 0; height: var(--size-xl); justify-content: center; transition: var(--transition-interactive); width: var(--size-xl); }
.txn-toggle__title { color: var(--text); font-size: var(--text-sm); font-weight: var(--font-semibold); }
.txn-toggle--active { border-color: var(--success); }
.txn-toggle--active .txn-toggle__indicator { background: rgba(var(--success-rgb), 0.15); color: var(--success); }
.txn-toggle--active .txn-toggle__title { color: var(--success); }
.txn-toggle--free.txn-toggle--active { border-color: var(--success-bright); }
.txn-toggle--free.txn-toggle--active .txn-toggle__indicator { background: rgba(var(--success-rgb), 0.15); color: var(--success-bright); }
.txn-toggle--free.txn-toggle--active .txn-toggle__title { color: var(--success-bright); }
.txn-toggle--fuel.txn-toggle--active { border-color: var(--warning); }
.txn-toggle--fuel.txn-toggle--active .txn-toggle__indicator { background: rgba(var(--warning-rgb), 0.15); color: var(--warning); }
.txn-toggle--fuel.txn-toggle--active .txn-toggle__title { color: var(--warning); }
.txn-transfer-flow { align-items: stretch; display: flex; flex-direction: column; gap: 0; position: relative; }
.txn-transfer-flow__arrow { align-items: center; align-self: center; background: var(--bg); border: 2px solid var(--border); border-radius: 50%; color: var(--text-muted); display: flex; height: var(--size-btn); justify-content: center; margin: -18px 0; position: relative; width: var(--size-btn); z-index: 2; }
.txn-transfer-flow__card { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); flex: 1; min-height: 70px; padding: var(--space-3); transition: var(--transition-interactive); }
.txn-transfer-flow__card:first-child { border-bottom: none; border-radius: var(--radius) var(--radius) 0 0; }
.txn-transfer-flow__card:focus-within { border-color: var(--accent); z-index: 1; }
.txn-transfer-flow__card:hover { background: var(--surface); }
.txn-transfer-flow__card:last-child { border-radius: 0 0 var(--radius) var(--radius); }
.txn-transfer-flow__label { color: var(--text-muted); font-size: var(--text-xs); font-weight: var(--font-semibold); margin-bottom: var(--space-2); text-transform: uppercase; }
.txn-type { display: flex; gap: var(--space-2); justify-content: center; padding: var(--space-1); }
.txn-type__btn { align-items: center; background: transparent; border: 1px solid transparent; border-radius: var(--radius); color: var(--text-muted); cursor: pointer; display: flex; flex: 1; font-size: var(--text-xs); font-weight: var(--font-semibold); gap: var(--space-2); justify-content: center; max-width: 100px; padding: var(--space-3) var(--space-4); transition: background-color 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
.txn-type__btn .icon-sm { flex-shrink: 0; }
.txn-type__btn span { display: none; }
.txn-type__btn:hover { background: var(--surface-alt); color: var(--text); }
.txn-type__btn.active { background: var(--surface); border-color: var(--border); box-shadow: var(--tub-shadow); color: var(--text); }
.txn-type__btn.active[data-type="charging"] { border-color: var(--success-bright); color: var(--success-bright); }
.txn-type__btn.active[data-type="critical"] { border-color: var(--danger); color: var(--danger); }
.txn-type__btn.active[data-type="expense"] { border-color: var(--danger); color: var(--danger); }
.txn-type__btn.active[data-type="high"] { border-color: var(--warning); color: var(--warning); }
.txn-type__btn.active[data-type="income"] { border-color: var(--success); color: var(--success); }
.txn-type__btn.active[data-type="low"] { border-color: var(--text-muted); color: var(--text-muted); }
.txn-type__btn.active[data-type="medium"] { border-color: var(--accent); color: var(--accent); }
.txn-type__btn.active[data-type="refueling"] { border-color: var(--warning); color: var(--warning); }
.txn-type__btn.active[data-type="transfer"] { border-color: var(--accent); color: var(--accent); }
.txn-vehicle-card { background: linear-gradient(135deg, var(--surface-alt) 0%, var(--surface) 100%); border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); position: relative; }
.txn-vehicle-card::before { background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.1) 0%, transparent 50%); border-radius: inherit; content: ""; height: 100%; left: 0; pointer-events: none; position: absolute; top: 0; width: 100%; }
.txn-vehicle-card__fields { display: grid; gap: var(--space-3); grid-template-columns: 1fr 1fr; position: relative; }
.txn-vehicle-card--charge { border-color: var(--success-bright); }
.txn-vehicle-card--refuel { border-color: var(--warning); }
@media (min-width: 1024px) {
.txn-battery-picker { gap: var(--space-4); }
.txn-battery-spinner__btn { height: var(--size-2xl); width: var(--size-xl); }
.txn-battery-spinner__value { font-size: 2.25rem; min-width: 70px; }
.txn-fuel-stats { grid-template-columns: repeat(4, 1fr); }
.txn-inline-grid { grid-template-columns: repeat(2, 1fr); }
.txn-inline-grid--3 { grid-template-columns: repeat(3, 1fr); }
.txn-transfer-flow { flex-direction: row; gap: 0; }
.txn-transfer-flow__arrow { margin: 0 -18px; }
.txn-transfer-flow__arrow .icon-sm { transform: rotate(-90deg); }
.txn-transfer-flow__card:first-child { border-bottom: 1px solid var(--border); border-radius: var(--radius) 0 0 var(--radius); border-right: none; padding-right: var(--space-5); }
.txn-transfer-flow__card:last-child { border-radius: 0 var(--radius) var(--radius) 0; padding-left: var(--space-5); }
.txn-type__btn span { display: inline; }
}