[data-view="transactions"] .kpi-card{ border-radius:16px !important; border:1px solid var(--color-divider,#EAECF0) !important; background:var(--color-card,#fff) !important; box-shadow:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06) !important; padding:18px 20px !important; position:relative; overflow:hidden; transition:transform .2s cubic-bezier(.22,.61,.36,1), box-shadow .2s !important; animation:txRise .42s cubic-bezier(.22,.61,.36,1) both; }
[data-view="transactions"] .kpi-card:hover{ transform:translateY(-3px); box-shadow:0 12px 30px rgba(37,99,235,.10),0 3px 8px rgba(16,24,40,.05) !important; }
[data-view="transactions"] .kpi-card::before{ content:""; position:absolute; top:0; inset-inline-start:0; width:100%; height:3px; }
[data-view="transactions"] #txn-summary>*:nth-child(1)::before{ background:#2563eb; }
[data-view="transactions"] #txn-summary>*:nth-child(2)::before{ background:#16a34a; }
[data-view="transactions"] #txn-summary>*:nth-child(3)::before{ background:#7c3aed; }
[data-view="transactions"] #txn-summary>*:nth-child(4)::before{ background:#eab308; }
[data-view="transactions"] .kpi-value{ font-variant-numeric:tabular-nums; }
@keyframes txRise{ from{opacity:0;transform:translateY(12px);} to{opacity:1;transform:none;} }
[data-view="transactions"] .badge{ border-radius:999px !important; font-weight:700 !important; font-size:12px !important; padding:5px 12px !important; border:1px solid transparent !important; }
[data-view="transactions"] .badge-warning{ background:rgba(234,179,8,.16) !important; color:#a16207 !important; border-color:rgba(234,179,8,.28) !important; }
[data-view="transactions"] .badge-info{ background:rgba(37,99,235,.12) !important; color:#1d4ed8 !important; border-color:rgba(37,99,235,.22) !important; }
[data-view="transactions"] .badge-success{ background:rgba(22,163,74,.14) !important; color:#15803d !important; border-color:rgba(22,163,74,.26) !important; }
[data-view="transactions"] .badge-danger{ background:rgba(239,68,68,.12) !important; color:#b91c1c !important; border-color:rgba(239,68,68,.22) !important; }
[data-view="transactions"] .badge-primary{ background:rgba(124,58,237,.12) !important; color:#6d28d9 !important; border-color:rgba(124,58,237,.22) !important; }
[data-view="transactions"] .badge-muted{ background:rgba(100,116,139,.14) !important; color:#475569 !important; border-color:rgba(100,116,139,.24) !important; }
.txm-overlay{ position:fixed; inset:0; z-index:2147483600; background:rgba(16,24,40,.5); display:flex; align-items:center; justify-content:center; padding:16px; animation:txFade .18s ease; }
@keyframes txFade{ from{opacity:0;} to{opacity:1;} }
.txm-box{ background:var(--color-card,#fff); border:1px solid var(--color-divider,#EAECF0); border-radius:18px; width:100%; max-width:460px; box-shadow:0 24px 60px rgba(16,24,40,.28); animation:txPop .22s cubic-bezier(.2,.8,.2,1); overflow:hidden; }
@keyframes txPop{ from{opacity:0;transform:translateY(12px) scale(.98);} to{opacity:1;transform:none;} }
.txm{ padding:22px; direction:rtl; font-family:Cairo,sans-serif; }
.txm-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px; }
.txm-title{ font-size:18px; font-weight:800; color:var(--color-text,#111827); }
.txm-pill{ font-size:12.5px; font-weight:700; padding:5px 13px; border-radius:999px; white-space:nowrap; }
.txm-amounts{ display:flex; gap:12px; margin-bottom:16px; }
.txm-amt{ flex:1; background:var(--color-bg,#f7f9fc); border:1px solid var(--color-divider,#EAECF0); border-radius:12px; padding:14px; text-align:center; }
.txm-amt .l{ font-size:12.5px; color:var(--color-text-muted,#667085); margin-bottom:4px; }
.txm-amt .v{ font-size:22px; font-weight:800; font-variant-numeric:tabular-nums; }
.txm-amt .v small{ font-size:12px; font-weight:600; opacity:.8; }
.txm-rows{ display:flex; flex-direction:column; }
.txm-row{ display:flex; justify-content:space-between; gap:14px; padding:11px 2px; border-bottom:1px solid var(--color-divider,#eef1f4); font-size:14px; }
.txm-row:last-child{ border-bottom:none; }
.txm-row .k{ color:var(--color-text-muted,#667085); white-space:nowrap; }
.txm-row .v{ font-weight:700; color:var(--color-text,#111827); text-align:end; }
.txm-acts{ display:flex; gap:8px; align-items:center; margin-top:18px; }