/* مصروفاتي - Luxury UI (RTL • Light/Dark • Responsive)
   يعتمد على: --brand, --brand2 من القالب.
*/

:root{
  --bg:#F5F7FB;
  --bg2:#EEF2FF;
  --panel:rgba(255,255,255,.86);
  --panel2:rgba(255,255,255,.62);
  --stroke:rgba(15,23,42,.10);
  --stroke2:rgba(15,23,42,.14);
  --text:#0B1226;
  --muted:#5B667F;
  --shadow:0 22px 80px rgba(2,6,23,.10);
  --shadow2:0 12px 35px rgba(2,6,23,.10);
  --r:24px;
  --r2:18px;
  --t:180ms;
  --card-light:#FFFFFF;
  --card-dark:#1E293B;
}

[data-theme="dark"]{
  --bg:#0F172A;
  --bg2:#0B1220;
  --panel:rgba(30,41,59,.78);
  --panel2:rgba(30,41,59,.52);
  --stroke:rgba(148,163,184,.18);
  --stroke2:rgba(148,163,184,.24);
  --text:#F8FAFC;
  --muted:#A6B2C9;
  --shadow:0 22px 80px rgba(0,0,0,.38);
  --shadow2:0 12px 35px rgba(0,0,0,.30);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui,-apple-system,"Segoe UI",Tahoma,Arial;
  font-size:15px;
  color:var(--text);
  background:
    radial-gradient(900px 520px at 12% -10%, color-mix(in srgb, var(--brand) 18%, transparent), transparent 60%),
    radial-gradient(900px 520px at 88% -10%, color-mix(in srgb, var(--brand2) 14%, transparent), transparent 60%),
    linear-gradient(180deg,var(--bg),var(--bg2));
}

a{color:inherit;text-decoration:none}
.container{max-width:none;width:100%;margin:0;padding:16px 20px}
.small{font-size:12px;color:var(--muted);line-height:1.7}
.hr{height:1px;background:var(--stroke);margin:14px 0}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom:1px solid var(--stroke);
  backdrop-filter: blur(18px);
}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:12px}
.logo{
  width:46px;height:46px;border-radius:18px;
  background: linear-gradient(135deg,var(--brand),var(--brand2),var(--brand3));
  box-shadow: var(--shadow2);
  display:flex;align-items:center;justify-content:center;
  font-weight:1000;color:#fff;letter-spacing:.5px;
}

/* Desktop quick actions */
.chips{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;max-width:100%}
.chip{
  border:1px solid var(--stroke);
  background:var(--panel2);
  padding:10px 14px;border-radius:999px;
  font-weight:1000; cursor:pointer;
  transition: transform var(--t), box-shadow var(--t), background var(--t);
  white-space:nowrap;
}
.chip:hover{transform:translateY(-1px);box-shadow:0 0 0 4px color-mix(in srgb, var(--brand) 12%, transparent)}
.menuBtn{
  display:none;
  border:1px solid var(--stroke);
  background:var(--panel2);
  color:var(--text);
  width:44px;height:44px;border-radius:16px;
  font-size:18px;font-weight:1000;
}

/* Cards & layout */
.card{
  background: var(--panel);
  border:1px solid var(--stroke);
  border-radius: var(--r);
  padding:14px;
  box-shadow: var(--shadow);
  margin:14px 0;
}
.card.soft{background:var(--panel2);box-shadow:none}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gridKpi{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:1200px){.gridKpi{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.gridKpi{grid-template-columns:1fr}}
@media (max-width:980px){.grid3{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.grid2,.grid3{grid-template-columns:1fr}}

/* Inputs */
.input,select,textarea{
  width:100%; padding:12px 14px;
  border-radius:18px;
  border:1px solid var(--stroke);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  color:var(--text);
  outline:none;
  transition: box-shadow var(--t), border-color var(--t), background var(--t);
}
.input:focus,select:focus,textarea:focus{
  border-color: color-mix(in srgb, var(--brand) 60%, transparent);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent);
}

/* Buttons */
.btn{
  width:100%;
  padding:12px 14px;
  border-radius:999px;
  border:0;
  cursor:pointer;
  font-weight:1000;
  background: linear-gradient(135deg,var(--brand),var(--brand2),var(--brand3));
  color:#fff;
  box-shadow: var(--shadow2);
  transition: transform var(--t), filter var(--t);
}
.btn:hover{transform:translateY(-1px);filter:saturate(1.05)}
.btn2{
  width:100%;
  padding:12px 14px;
  border-radius:999px;
  border:1px solid var(--stroke);
  cursor:pointer;
  font-weight:1000;
  background:var(--panel2);
  color:var(--text);
  transition: transform var(--t), box-shadow var(--t), background var(--t);
}
.btn2:hover{transform:translateY(-1px);box-shadow:0 0 0 4px color-mix(in srgb, var(--brand) 12%, transparent)}

/* List */
.list .item{
  display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  padding:14px;border-radius:18px;
  border:1px solid var(--stroke);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  margin-top:10px;
}
.item .t{font-weight:1000}
.item .s{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.6}

/* Notices */
.notice{
  padding:12px 14px;
  border-radius:18px;
  border:1px solid var(--stroke);
  background:rgba(239,68,68,.12);
  font-weight:1000;
}
.notice.ok{background:rgba(34,197,94,.12)}

/* Desktop sidebar */
.desk{display:block}
.side{display:none}
@media (min-width:980px){
  .desk{display:grid;grid-template-columns:270px 1fr;gap:14px}
  .side{display:block;position:sticky;top:84px;height:calc(100vh - 100px);overflow:auto;padding-bottom:10px}
  .side .card{margin-top:0}
  .side a{
    display:flex;gap:10px;align-items:center;
    padding:12px;border-radius:18px;
    border:1px solid var(--stroke);
    background:var(--panel2);
    margin-top:10px;
    font-weight:1000;
    transition: box-shadow var(--t), transform var(--t);
  }
  .side a:hover{transform:translateY(-1px)}
  .side a.active{box-shadow:0 0 0 4px color-mix(in srgb, var(--brand) 14%, transparent)}
}

/* Mobile bottom nav */
.footerNav{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  padding:10px 12px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid var(--stroke);
  backdrop-filter: blur(18px);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
}
.navGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.tab{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:56px;
  border-radius:20px;
  border:1px solid var(--stroke);
  background:var(--panel2);
  font-weight:1000;
  font-size:12px;
  transition: box-shadow var(--t), transform var(--t);
}
.tab i{font-style:normal;font-size:18px;line-height:1}
.tab span{margin-top:6px;opacity:.9}
.tab.active{box-shadow:0 0 0 4px color-mix(in srgb, var(--brand) 16%, transparent)}
.tab:active{transform:translateY(1px)}
@media (min-width:981px){.footerNav{display:none}}

/* Mobile drawer */
.mDrawerOverlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.35);
  backdrop-filter: blur(2px);
  z-index:70;
  opacity:0; pointer-events:none;
  transition: opacity var(--t);
}
.mDrawer{
  position:fixed; top:0; bottom:0; right:0;
  width:min(92vw, 360px);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  backdrop-filter: blur(18px);
  border-left:1px solid var(--stroke);
  z-index:80;
  transform:translateX(105%);
  transition: transform var(--t);
  padding:14px;
}
.mDrawer.open{transform:translateX(0)}
.mDrawerOverlay.open{opacity:1; pointer-events:auto}
.mDrawerHead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.iconBtn{
  border:1px solid var(--stroke);
  background:var(--panel2);
  color:var(--text);
  width:40px;height:40px;border-radius:16px;
  font-weight:1000; cursor:pointer;
}
.mDrawerBody{overflow:auto;max-height:calc(100vh - 90px);padding-bottom:18px}
.mItem{
  display:flex;align-items:center;gap:10px;
  padding:12px;border-radius:18px;
  border:1px solid var(--stroke);
  background:var(--panel2);
  margin-top:10px;
  font-weight:1000;
}
.mItem.danger{border-color:rgba(239,68,68,.25)}
@media (max-width:980px){
  .container{padding-bottom:110px}
  .chips{display:none}
  .menuBtn{display:inline-flex;align-items:center;justify-content:center}
  .side{display:none}
  /* Dashboard: make lists and charts fit smaller screens */
  .dashCard canvas{height:220px !important}
  .dashCard canvas.donut{height:220px !important; max-width:100%}
  .txRow{grid-template-columns:1fr !important; align-items:flex-start}
  .txAmount{justify-content:flex-end}
  .txActions{justify-content:flex-start; flex-wrap:wrap}
}

/*
  TX Add page actions (Mobile)
  Fix: bottom navigation was covering the Save/Cancel buttons on phones.
  We provide an always-visible action bar above the bottom nav.
*/
:root{
  --bottom-nav-h: 84px; /* approx footerNav total height */
  --safe-b: env(safe-area-inset-bottom, 0px);
}

@media (max-width:980px){
  .txAddPage{
    padding-bottom: calc(var(--bottom-nav-h) + var(--safe-b) + 24px) !important;
  }
  .sticky-actions{
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(var(--bottom-nav-h) + var(--safe-b) + 10px);
    z-index: 90;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 10px;
    border-radius: 18px;
    background: rgba(255,255,255,.78);
    backdrop-filter: blur(14px);
    box-shadow: 0 10px 30px rgba(15,23,42,.12);
    border: 1px solid rgba(148,163,184,.22);
  }
  [data-theme="dark"] .sticky-actions{
    background: rgba(15,23,42,.55);
    border-color: rgba(148,163,184,.16);
  }
}

@media (min-width:981px){
  .sticky-actions{
    position: static;
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
  }
}

/* Floating theme button (mobile) */
.theme-fab{
  position:fixed;
  left:14px;
  bottom:86px;
  width:52px;height:52px;
  border-radius:18px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--stroke);
  background:var(--panel);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(14px);
  z-index:65;
  cursor:pointer;
  user-select:none;
}
@media (min-width:981px){.theme-fab{display:none}}

/* Reports helpers */
.kpi{
  display:flex;flex-direction:column;gap:6px;
  padding:14px;border-radius:20px;
  border:1px solid var(--stroke);
  background:var(--panel2);
}
.kpi .v{font-size:clamp(16px,1.6vw,20px);font-weight:1000;letter-spacing:.2px;line-height:1.2;word-break:break-word}
.kpi .l{font-size:12px;color:var(--muted)}

/* Dashboard KPI cards (match reference sizing) */
.kpiCard{padding:14px}
.kpiHead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.kpiTitle{font-weight:1000;font-size:13px;letter-spacing:.1px}
.kpiIcon{font-size:18px;opacity:.95}
.kpiValue{
  margin-top:8px;
  font-size:clamp(16px,1.9vw,22px);
  font-weight:1000;
  line-height:1.15;
  letter-spacing:.2px;
  word-break:break-word;
}
.kpiDelta{font-weight:900}
@media (max-width:560px){
  .kpiCard{padding:12px}
  .kpiTitle{font-size:12px}
  .kpiIcon{font-size:17px}
  .kpiValue{font-size:clamp(16px,5.2vw,20px)}
}
.bar{
  height:12px;border-radius:999px;
  background: color-mix(in srgb, var(--bg) 50%, transparent);
  border:1px solid var(--stroke);
  overflow:hidden;
}
.bar > span{
  display:block;height:100%;
  background: linear-gradient(135deg,var(--brand),var(--brand2),var(--brand3));
  width:0%;
}
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0 10px;
}
.table th{
  text-align:right;
  font-size:12px;color:var(--muted);font-weight:1000;
  padding:0 10px;
}
.table td{
  padding:12px 10px;
  border:1px solid var(--stroke);
  background:var(--panel);
}
.table tr td:first-child{border-top-right-radius:16px;border-bottom-right-radius:16px}
.table tr td:last-child{border-top-left-radius:16px;border-bottom-left-radius:16px}

/* --- Design Match (Reference UI) --- */
:root{--r:28px;--r2:22px}
body{
  background:
    radial-gradient(1200px 700px at 20% -10%, rgba(108,92,231,.20), transparent 60%),
    radial-gradient(1000px 600px at 80% -10%, rgba(76,111,255,.18), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}
[data-theme="dark"] body{
  background:
    radial-gradient(1200px 700px at 20% -10%, rgba(108,92,231,.22), transparent 60%),
    radial-gradient(1000px 600px at 80% -10%, rgba(76,111,255,.18), transparent 60%),
    linear-gradient(180deg, #0B1220, #0F172A);
}

/* Softer cards like mockups */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
}
[data-theme="dark"] .card{
  background: linear-gradient(180deg, rgba(30,41,59,.88), rgba(30,41,59,.70));
}

/* Sidebar like mockups (dark glass even in light) */
@media (min-width:980px){
  .side .card{
    background: linear-gradient(180deg, rgba(17,24,39,.92), rgba(17,24,39,.70));
    border: 1px solid rgba(255,255,255,.08);
  }
  [data-theme="dark"] .side .card{
    background: linear-gradient(180deg, rgba(17,24,39,.72), rgba(17,24,39,.52));
    border: 1px solid rgba(255,255,255,.10);
  }
  .side .card > div{color:#F8FAFC}
  .side a{
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    color:#F8FAFC;
  }
  .side a .muted{color:rgba(248,250,252,.70)}
  .side a.active{box-shadow:0 0 0 4px rgba(108,92,231,.22)}
}

/* Topbar pills like mockups */
.topbar{border-bottom:0;background:transparent}
.topbar .container{padding:12px 16px}
.topbar .row{
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  border:1px solid var(--stroke);
  border-radius: var(--r);
  padding:12px 14px;
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow2);
}

/* Mobile bottom nav - tighter, more "pill" */
.footerNav{border-top:0;background:transparent}
.footerNav .navGrid{
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  border:1px solid var(--stroke);
  border-radius: 26px;
  padding:10px;
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow2);
}
.tab{background: transparent}
.tab.active{background: rgba(108,92,231,.14)}

/* Page spacing similar */
.container{padding:16px 18px}
@media(max-width:560px){.container{padding:12px 12px}}

/* =====================
   v6 UI overrides
   ===================== */

/* Dashboard: show 4 KPI cards like mock */
.gridKpi{grid-template-columns: repeat(4, minmax(0,1fr));gap:14px}
@media(max-width:1100px){.gridKpi{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.gridKpi{grid-template-columns:1fr}}
.gridKpi .kpiCard{padding:14px 16px;border-radius:20px}
.gridKpi .kpiCard .kpiValue{font-size:18px;line-height:1.2}
.gridKpi .kpiCard .kpiTitle{font-size:13px;opacity:.85}
.gridKpi .kpiCard:nth-child(n+5){display:none} /* hide extra KPIs on dashboard */

/* Dashboard charts spacing like mock */
.grid2{grid-template-columns:1.2fr .8fr;gap:16px}
@media(max-width:980px){.grid2{grid-template-columns:1fr}}

/* Dashboard head tabs (missing styles caused raw text/huge blank area) */
.dashShell{display:flex;flex-direction:column;gap:14px}
.dashHead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.dashTitle{font-size:16px;font-weight:950;letter-spacing:.2px}
.dashTabs{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dashTab{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;border:1px solid var(--stroke);background:var(--panel);color:var(--text);text-decoration:none;font-weight:900}
.dashTab:hover{filter:brightness(.98)}
.dashTab.active{background:linear-gradient(90deg,var(--g1),var(--g2),var(--g3));color:#fff;border-color:transparent}

/* Prevent charts from blowing up on wide screens / zoom */
.dashCard canvas{width:100% !important;max-width:100% !important;height:220px !important}
@media(max-width:520px){.dashCard canvas{height:200px !important}}

/* Donut card: prevent giant canvas + match mock layout */
.dashDonutWrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:center}
@media(max-width:980px){.dashDonutWrap{grid-template-columns:1fr}}
.dashDonutWrap canvas{max-width:420px !important;max-height:240px !important;margin:0 auto}
.dashCats{max-height:240px;overflow:auto;padding-inline:4px}

/* Recent list card tighten */
.list .item{padding:12px 12px}

/* Tx Add: make form compact and aligned */
.segbar{gap:8px;flex-wrap:wrap}
.segbar .seg{padding:10px 14px;border-radius:999px}
.txForm .grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:900px){.txForm .grid2{grid-template-columns:1fr}}
.txForm .input{height:44px;border-radius:14px}
.txForm textarea.input{height:auto;min-height:100px}

/* Debts list compact */
.debtsGrid{grid-template-columns:1fr;gap:12px}



/* =========================
   AI Banking Elite Theme
   Light-first + Gold Accent
   ========================= */
:root{
  --bg:#F8FAFC;
  --bg2:#EEF2FF;
  --panel:rgba(255,255,255,.92);
  --panel2:rgba(255,255,255,.78);
  --stroke:rgba(15,23,42,.08);
  --stroke2:rgba(15,23,42,.12);
  --text:#0B1226;
  --muted:#52607A;

  --brand:#5B6CFF;
  --brand2:#4C6FFF;
  --brand3:#00B894;

  --gold:#C6A85E;
  --gold2:#E6D3A3;

  --container:1280px;
  --shadow:0 18px 60px rgba(2,6,23,.10);
  --shadow2:0 10px 26px rgba(2,6,23,.08);
}

/* Premium Arabic fonts */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=Noto+Kufi+Arabic:wght@400;600;700&display=swap');
html,body{
  font-family:"IBM Plex Sans Arabic","Noto Kufi Arabic",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;
}

/* Organized width */
.container{max-width:var(--container) !important;}
/* slightly larger desktop padding */
@media (min-width: 1100px){
  .container{padding-left:18px !important; padding-right:18px !important;}
}

/* Topbar: banking clean */
.topbar{
  background:rgba(255,255,255,.88) !important;
  backdrop-filter: blur(14px);
  border-bottom:1px solid var(--stroke);
}
.brand .logo{border-radius:14px !important; box-shadow:0 10px 22px rgba(2,6,23,.08);}
.chip{
  border-radius:999px !important;
  border:1px solid rgba(15,23,42,.10) !important;
  background:rgba(255,255,255,.75) !important;
}
.chip:hover{border-color: rgba(198,168,94,.55) !important;}
.chip.active, .chip[aria-current="page"]{
  border-color: rgba(198,168,94,.65) !important;
  box-shadow:0 10px 22px rgba(198,168,94,.15);
}

/* Cards: premium */
.card{
  border-radius:18px !important;
  border:1px solid rgba(148,163,184,.18) !important;
  box-shadow:var(--shadow2) !important;
}
.cardHead{align-items:center;}
.cardTitle{letter-spacing:.1px;}
.kpiCard .kpiValue{font-size:clamp(18px,2.1vw,24px) !important;}
.kpiCard{position:relative; overflow:hidden;}
.kpiCard::after{
  content:"";
  position:absolute; inset:auto -60px -60px auto;
  width:160px; height:160px;
  background: radial-gradient(circle at 30% 30%, rgba(198,168,94,.28), rgba(198,168,94,0) 70%);
  transform: rotate(18deg);
  pointer-events:none;
}

/* Buttons: gold highlight */
.btn-brand{
  background: linear-gradient(135deg, var(--brand), var(--brand2)) !important;
}
.btn-brand:focus, .btn-brand:hover{
  box-shadow:0 14px 34px rgba(91,108,255,.22), 0 0 0 3px rgba(198,168,94,.18) !important;
}
.pillBtn, .btn-ghost{
  border-radius:999px !important;
}
a, .link{color: var(--brand2);}

/* Dashboard layout polish */
.dashShell{display:block;}
.dashHead{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin: 6px 0 14px 0;
}
.dashTitle{font-weight:900; font-size:18px;}
.dashTabs{
  display:flex; gap:8px; padding:6px;
  background:rgba(255,255,255,.78);
  border:1px solid var(--stroke);
  border-radius:999px;
}
.dashTab{
  border-radius:999px;
  padding:8px 12px;
  font-weight:800;
  color:var(--muted);
  border:1px solid transparent;
}
.dashTab.active{
  color:var(--text);
  background:rgba(198,168,94,.16);
  border-color:rgba(198,168,94,.35);
}

/* Charts: prevent blow-up */
.dashDonutWrap, .chartBox{
  height: 280px;
}
.dashDonutWrap canvas, .chartBox canvas{
  width:100% !important;
  height:100% !important;
  max-height: 280px !important;
}
@media (max-width: 860px){
  .dashDonutWrap, .chartBox{height:240px;}
  .dashDonutWrap canvas, .chartBox canvas{max-height:240px !important;}
}

/* Bottom sections: clean on mobile */
.txList{margin-top:10px;}
.txRow{
  border:1px solid rgba(15,23,42,.08) !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.82) !important;
}
.txActions .miniAct{border-radius:12px !important;}

/* Footer nav safe area */
:root{ --bottom-nav-h: 74px; --safe-b: env(safe-area-inset-bottom, 0px); }
.page, .page-content, main, .container{
  scroll-margin-bottom: calc(var(--bottom-nav-h) + var(--safe-b) + 18px);
}
body{ padding-bottom: calc(var(--bottom-nav-h) + var(--safe-b) + 10px); }
.footerNav{
  height: var(--bottom-nav-h) !important;
  padding-bottom: var(--safe-b) !important;
  border-top:1px solid rgba(15,23,42,.08) !important;
  background: rgba(255,255,255,.86) !important;
  backdrop-filter: blur(14px);
}

/* TX_ADD actions visible on mobile */
.sticky-actions{
  position: fixed !important;
  left: 12px !important;
  right: 12px !important;
  bottom: calc(var(--bottom-nav-h) + var(--safe-b) + 10px) !important;
  z-index: 9999 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  padding: 10px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.86) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  box-shadow: 0 14px 34px rgba(2,6,23,.12) !important;
}
@media (min-width: 900px){
  .sticky-actions{
    position: static !important;
    grid-template-columns: auto auto !important;
    justify-content: end !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  body{ padding-bottom: 0; }
}


/* Budgets + recurring */
.grid2{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:980px){.grid2{grid-template-columns:1fr 1fr}}
.list{display:flex;flex-direction:column;gap:12px}
.item{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px;border:1px solid var(--border);border-radius:16px;background:var(--card)}
.item .actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.bar{height:10px;background:rgba(0,0,0,.06);border-radius:999px;overflow:hidden;margin-top:8px}
:root.dark .bar{background:rgba(255,255,255,.10)}
.bar>span{display:block;height:100%}
.bar>span.ok{background:var(--good)}
.bar>span.warn{background:var(--gold)}
.bar>span.bad{background:var(--bad)}
.empty{padding:18px;color:var(--muted)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;border:1px solid var(--border);font-size:12px;color:var(--muted)}