:root {
    --app-bg: #f4f7fb;
    --card-bg: rgba(255, 255, 255, 0.92);
    --card-border: rgba(148, 163, 184, 0.18);
    --shadow-soft: 0 12px 30px rgba(15, 23, 42, 0.08);
    --shadow-strong: 0 18px 42px rgba(37, 99, 235, 0.16);
    --radius-xl: 1.6rem;
    --text-main: #0f172a;
    --text-soft: #64748b;
    --brand: #2563eb;
    --brand-dark: #1d4ed8;
}
html { direction: rtl; }
body {
    min-width: 320px;
    background: linear-gradient(180deg, #eff4ff 0%, var(--app-bg) 40%, #f8fafc 100%);
    color: var(--text-main);
    font-family: Tahoma, Arial, sans-serif;
    position: relative;
    overflow-x: hidden;
}
.app-bg-glow { position: fixed; z-index: 0; border-radius: 999px; filter: blur(70px); opacity: .45; pointer-events: none; }
.app-bg-glow-1 { width: 18rem; height: 18rem; top: -4rem; right: -3rem; background: rgba(59, 130, 246, .28); }
.app-bg-glow-2 { width: 16rem; height: 16rem; top: 12rem; left: -4rem; background: rgba(16, 185, 129, .18); }
.app-topbar { position: relative; z-index: 10; background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(255, 255, 255, 0.45); }
.brand-link { text-decoration: none; color: inherit; display: inline-flex; align-items: center; gap: .8rem; }
.brand-mark { width: 2.75rem; height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 1rem; background: linear-gradient(135deg, var(--brand) 0%, #0ea5e9 100%); color: #fff; font-weight: 700; box-shadow: var(--shadow-strong); }
.text-muted-brand { color: var(--text-soft); font-size: .76rem; }
.nav-chip,.menu-card,.menu-trigger { border: 1px solid rgba(148, 163, 184, 0.22); background: rgba(255,255,255,.86); color: var(--text-main); border-radius: 999px; padding: .72rem 1rem; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; transition: .2s ease; }
.nav-chip:hover,.menu-card:hover,.menu-trigger:hover { transform: translateY(-1px); border-color: rgba(37, 99, 235, .2); background: rgba(255,255,255,1); }
.nav-chip-danger { color: #b91c1c; }
.menu-trigger { width: 48px; height: 48px; font-size: 1.15rem; border-radius: 1rem; }
.app-offcanvas { border-radius: 1.5rem 0 0 1.5rem; }
.app-main { position: relative; z-index: 2; padding-bottom: 9rem; }
.app-alert { border-radius: 1rem; box-shadow: var(--shadow-soft); }
.page-kicker { color: var(--brand); font-size: .86rem; font-weight: 700; margin-bottom: .35rem; }
.page-title { font-size: clamp(1.55rem, 2vw, 2rem); font-weight: 800; }
.section-title { font-size: 1.15rem; font-weight: 800; }
.content-card,.stat-card,.action-tile,.hero-balance-card,.txn-card { background: rgba(255,255,255,.92); border: 1px solid rgba(148, 163, 184, 0.18); box-shadow: var(--shadow-soft); border-radius: var(--radius-xl); }
.content-card,.hero-balance-card,.txn-card { padding: 1.2rem; }
.hero-balance-card { background: linear-gradient(135deg, #0f172a 0%, #1d4ed8 55%, #38bdf8 100%); color: #fff; box-shadow: 0 20px 45px rgba(37, 99, 235, 0.28); }
.hero-balance-head { display: flex; gap: 1rem; justify-content: space-between; align-items: start; }
.hero-label { color: rgba(255,255,255,.78); font-size: .92rem; margin-bottom: .4rem; }
.hero-balance-amount { font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; margin: 0; letter-spacing: -.02em; }
.hero-balance-amount span { font-size: .42em; font-weight: 700; opacity: .88; }
.hero-badge { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.18); padding: .45rem .75rem; border-radius: 999px; font-size: .78rem; }
.mini-balance-card { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.14); border-radius: 1.1rem; padding: .95rem 1rem; }
.mini-label { font-size: .82rem; color: rgba(255,255,255,.8); }
.mini-value { font-size: 1.15rem; font-weight: 800; margin-top: .3rem; color: #fff; }
.bank-progress { width: 100%; height: .72rem; background: rgba(255,255,255,.16); border-radius: 999px; overflow: hidden; }
.bank-progress span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #86efac 0%, #fef08a 55%, #fca5a5 100%); }
.stat-card { padding: 1.15rem; height: 100%; }
.stat-card-soft { background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(239,246,255,.92)); }
.stat-title { color: var(--text-soft); font-size: .9rem; font-weight: 700; }
.stat-value { font-weight: 900; font-size: 1.85rem; margin-top: .45rem; }
.stat-foot { color: var(--text-soft); font-size: .82rem; margin-top: .4rem; }
.stat-month { margin-top: .35rem; font-size: 1rem; font-weight: 700; }
.summary-row { display: flex; justify-content: space-between; gap: .75rem; align-items: center; }
.action-tile { padding: 1.05rem; text-decoration: none; color: inherit; display: block; transition: transform .18s ease, box-shadow .18s ease; }
.action-tile:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(15, 23, 42, .12); }
.action-kicker { color: var(--brand); font-size: .83rem; font-weight: 700; }
.action-title { font-size: 1.02rem; font-weight: 800; margin-top: .35rem; }
.list-stack { display: grid; gap: .9rem; }
.txn-row { display: flex; align-items: stretch; gap: .85rem; text-decoration: none; color: inherit; padding: .35rem; border-radius: 1rem; }
.txn-row:hover { background: rgba(37,99,235,.04); }
.txn-leading { width: .42rem; border-radius: 999px; }
.txn-leading-success { background: linear-gradient(180deg, #16a34a 0%, #86efac 100%); }
.txn-leading-danger { background: linear-gradient(180deg, #dc2626 0%, #fca5a5 100%); }
.txn-content { flex: 1; }
.txn-title-row,.txn-card-top { display: flex; justify-content: space-between; align-items: start; gap: 1rem; }
.txn-title { font-weight: 800; font-size: 1rem; }
.txn-meta { color: var(--text-soft); font-size: .84rem; }
.txn-amount { font-weight: 900; font-size: 1.02rem; text-align: left; }
.txn-note { margin-top: .65rem; color: #334155; background: rgba(248, 250, 252, .9); border-radius: .95rem; padding: .75rem .9rem; font-size: .92rem; }
.pill { display: inline-flex; align-items: center; padding: .5rem .8rem; border-radius: 999px; font-weight: 700; }
.pill-soft-success { background: rgba(34, 197, 94, .16); color: #166534; }
.pill-soft-danger { background: rgba(239, 68, 68, .14); color: #991b1b; }
.txn-card-muted { opacity: .88; }
.empty-state { text-align: center; padding: 2rem 1rem; color: var(--text-soft); background: rgba(248,250,252,.72); border-radius: 1rem; }
.detail-list dt { color: var(--text-soft); font-weight: 700; margin-bottom: .65rem; }
.detail-list dd { margin-bottom: .85rem; }
.quick-finance { position: fixed; inset-inline: 0; bottom: 4.8rem; z-index: 25; display: flex; justify-content: center; gap: .65rem; pointer-events: none; }
.quick-action { pointer-events: auto; min-height: 52px; min-width: 120px; padding: .85rem 1rem; border-radius: 999px; text-decoration: none; color: #fff; font-weight: 800; box-shadow: 0 16px 32px rgba(15, 23, 42, .18); }
.quick-action-success { background: linear-gradient(135deg, #16a34a, #22c55e); }
.quick-action-danger { background: linear-gradient(135deg, #dc2626, #f97316); }
.mobile-bottom-nav { position: fixed; inset-inline: 1rem; bottom: 1rem; z-index: 20; background: rgba(255,255,255,.92); border: 1px solid rgba(148,163,184,.22); backdrop-filter: blur(18px); box-shadow: var(--shadow-soft); border-radius: 1.25rem; display: grid; grid-template-columns: repeat(4, 1fr); padding: .45rem; gap: .4rem; }
.mobile-bottom-nav a { min-height: 50px; border-radius: 1rem; color: var(--text-soft); text-decoration: none; display: flex; align-items: center; justify-content: center; text-align: center; padding: .4rem; font-size: .84rem; font-weight: 700; }
.mobile-bottom-nav a.active { background: rgba(37,99,235,.12); color: var(--brand-dark); }
pre.audit-json { background: #0f172a; color: #e2e8f0; padding: .9rem; border-radius: 1rem; max-height: 18rem; overflow: auto; direction: ltr; text-align: left; }
@media (max-width: 575.98px) { .container,.container-fluid { padding-inline: .9rem; } .hero-balance-head,.txn-title-row,.txn-card-top { flex-direction: column; align-items: start; } .txn-amount { text-align: right; } }
@media (min-width: 992px) { .app-main { padding-bottom: 3rem; } }