[hidden]{display:none!important}
:root{
  --bg:#F3F4F8; --surface:#FFFFFF; --surface-2:#F8F9FB; --ink:#1C2233; --muted:#667085; --line:#E2E5EC;
  --indigo:#253063; --indigo-2:#313D7A; --on-indigo:#FFFFFF; --indigo-soft:#E9EBF5;
  --primary:#253063; --on-primary:#FFFFFF;
  --ochre:#C8891E; --ochre-soft:#FBF1DF;
  --in:#1D7A53; --in-soft:#E2F2EA; --out:#B3372E; --out-soft:#FBE8E6; --warn:#9A5C0C; --warn-soft:#FCEFD9;
  --r-s:6px; --r:10px; --r-l:14px;
  --shadow:0 1px 2px rgba(28,34,51,.05), 0 4px 14px rgba(28,34,51,.08);
  --shadow-lg:0 2px 6px rgba(28,34,51,.07), 0 14px 34px rgba(28,34,51,.12);
  --font:"IBM Plex Sans Arabic","Segoe UI",Tahoma,Arial,sans-serif;
  --brand:"Cairo","IBM Plex Sans Arabic",Tahoma,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --shadow:0 1px 2px rgba(0,0,0,.35), 0 4px 14px rgba(0,0,0,.3);
    --shadow-lg:0 2px 8px rgba(0,0,0,.4), 0 16px 36px rgba(0,0,0,.45);
    --bg:#11141C; --surface:#191E2A; --surface-2:#1E2432; --ink:#E7E9F0; --muted:#98A1B3; --line:#2A3142;
    --indigo:#1C2350; --indigo-2:#283270; --on-indigo:#F1F2F8; --indigo-soft:#232A47;
    --primary:#8E9AEB; --on-primary:#11141C;
    --ochre:#E1A43E; --ochre-soft:#382C16;
    --in:#52C48F; --in-soft:#15302A; --out:#F07A70; --out-soft:#3A1E1C; --warn:#E9AA50; --warn-soft:#382A14;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
    --shadow:0 1px 2px rgba(0,0,0,.35), 0 4px 14px rgba(0,0,0,.3);
    --shadow-lg:0 2px 8px rgba(0,0,0,.4), 0 16px 36px rgba(0,0,0,.45);
  --bg:#11141C; --surface:#191E2A; --surface-2:#1E2432; --ink:#E7E9F0; --muted:#98A1B3; --line:#2A3142;
  --indigo:#1C2350; --indigo-2:#283270; --on-indigo:#F1F2F8; --indigo-soft:#232A47;
  --primary:#8E9AEB; --on-primary:#11141C;
  --ochre:#E1A43E; --ochre-soft:#382C16;
  --in:#52C48F; --in-soft:#15302A; --out:#F07A70; --out-soft:#3A1E1C; --warn:#E9AA50; --warn-soft:#382A14;
  color-scheme:dark;
}
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:inherit}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
img,svg{max-width:100%}
.num{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums;white-space:nowrap}
.muted{color:var(--muted)}
:focus-visible{outline:2px solid var(--ochre);outline-offset:2px}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

/* ---------- shell ---------- */
.app{display:grid;grid-template-columns:minmax(0,1fr);min-height:100%}
.side,.main{min-width:0}
.side{background:var(--indigo);color:var(--on-indigo);position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:baseline;gap:10px;padding:12px 16px 8px}
.brand b{font-family:var(--brand);font-weight:700;font-size:26px;letter-spacing:0;line-height:1.1}
.brand span{font-size:13px;opacity:.75}
.band{display:none}
.nav{display:flex;gap:2px;overflow-x:auto;padding:6px 10px 8px;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav button{flex:none;background:none;border:0;color:var(--on-indigo);opacity:.78;padding:7px 12px;border-radius:var(--r-s);cursor:pointer;font-weight:500;font-size:14.5px}
.nav button:hover{opacity:1;background:rgba(255,255,255,.07)}
.nav button[aria-current="page"]{opacity:1;background:rgba(255,255,255,.12);box-shadow:inset 0 -2px 0 var(--ochre)}
.main{padding:18px 16px 110px;max-width:1120px;width:100%;margin:0 auto}
@media (min-width:900px){
  .app{grid-template-columns:236px minmax(0,1fr)}
  .side{height:100vh;height:100dvh;display:flex;flex-direction:column}
  .brand{padding:22px 20px 12px;flex-direction:column;gap:2px}
  .brand b{font-size:32px}
  .nav{flex-direction:column;padding:14px 12px;overflow:visible}
  .nav button{text-align:right;padding:9px 12px}
  .nav button[aria-current="page"]{box-shadow:inset -3px 0 0 var(--ochre)}
  .side-foot{margin-top:auto;padding:14px 20px;font-size:12.5px;opacity:.6}
  .main{padding:28px 32px 110px}
}
@media (max-width:899px){.side-foot{display:none}.app{grid-template-rows:auto 1fr}}

/* ---------- type ---------- */
h1{font-size:23px;font-weight:700;margin:0 0 4px;line-height:1.35}
h2{font-size:16.5px;font-weight:700;margin:0 0 10px}
.lede{color:var(--muted);margin:0 0 18px;max-width:62ch}
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:16px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);background:var(--surface);padding:8px 14px;border-radius:var(--r-s);cursor:pointer;font-weight:500;min-height:38px}
.btn:hover{border-color:var(--muted)}
.btn.primary{background:var(--primary);color:var(--on-primary);border-color:var(--primary);font-weight:600}
.btn.primary:hover{filter:brightness(1.08)}
.btn.danger{color:var(--out);border-color:color-mix(in srgb,var(--out) 40%,var(--line))}
.btn.ghost{border-color:transparent;background:transparent}
.btn.sm{min-height:30px;padding:4px 10px;font-size:13.5px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.icon-btn{border:0;background:none;padding:6px 8px;border-radius:var(--r-s);cursor:pointer;color:var(--muted);font-size:13.5px}
.icon-btn:hover{background:var(--surface-2);color:var(--ink)}
.fab{position:fixed;left:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:30;background:var(--ochre);color:#1B1405;border:0;border-radius:999px;padding:0 22px;height:52px;font-weight:700;font-size:16px;cursor:pointer;box-shadow:0 6px 18px rgba(37,48,99,.28)}
.fab:hover{filter:brightness(1.05)}

/* ---------- segmented / chips ---------- */
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-s);padding:2px;gap:2px;flex-wrap:wrap}
.seg button{border:0;background:none;padding:6px 12px;border-radius:5px;cursor:pointer;color:var(--muted);font-weight:500;font-size:14px}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.chip{display:inline-block;font-size:12.5px;font-weight:600;padding:1px 9px;border-radius:999px;white-space:nowrap}
.t-c{background:var(--indigo-soft);color:var(--primary)}
.t-s{background:var(--ochre-soft);color:var(--warn)}
.t-x{background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
.opno{font-size:12.5px;color:var(--muted);font-weight:600}
.status{font-size:12.5px;font-weight:600;padding:1px 9px;border-radius:999px;white-space:nowrap}
.st-ok{background:var(--in-soft);color:var(--in)}
.st-warn{background:var(--warn-soft);color:var(--warn)}
.st-off{background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}

/* ---------- panels & tables ---------- */
.panel{background:var(--surface);border:0;border-radius:var(--r);padding:16px;box-shadow:var(--shadow)}
.grid2{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
.grid2>*,.stack>*{min-width:0}
@media (min-width:980px){.grid2{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}}
.stack{display:grid;gap:16px}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%}
th,td{padding:9px 10px;text-align:right;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-size:13px;color:var(--muted);font-weight:600;white-space:nowrap}
td.n,th.n{text-align:left}
tbody tr:last-child td{border-bottom:0}
tr.total td{font-weight:700;border-top:2px solid var(--line)}
tr.click{cursor:pointer}
tr.click:hover td{background:var(--surface-2)}
.pos{color:var(--ink)} .neg{color:var(--out)}

.treasury{background:var(--indigo);color:var(--on-indigo);border-radius:var(--r-l);padding:18px 18px 14px;margin-bottom:16px}
.treasury h2{font-size:15px;opacity:.85;font-weight:600}
.tre-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.tre-cell{padding:4px 14px 6px;border-inline-start:1px solid rgba(255,255,255,.14)}
.tre-cell:first-child{border-inline-start:0;padding-inline-start:0}
.tre-cell .lbl{font-size:13px;opacity:.75}
.tre-cell .big{font-size:24px;font-weight:700;line-height:1.3}
.tre-cell .sub{font-size:12.5px;opacity:.7}
.tre-foot{margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.14);font-size:13.5px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px}
@media (max-width:560px){.tre-cell .big{font-size:18px}.tre-cell{padding:4px 8px}}

.kv{display:grid;grid-template-columns:1fr auto;gap:4px 16px}
.kv .k{color:var(--muted)} .kv .v{text-align:left;font-weight:600}
.kv .strong{color:var(--ink);font-weight:700;padding-top:6px;border-top:1px solid var(--line)}
.kv .strong+.strong{border-top:1px solid var(--line)}

/* ---------- tx list ---------- */
.tx-list{background:var(--surface);border:0;border-radius:var(--r);box-shadow:var(--shadow)}
.tx-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:11px 14px;border-bottom:1px solid var(--line)}
.tx-row:last-child{border-bottom:0}
.tx-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.tx-top strong{font-weight:600}
.tx-sub{font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:2px}
.tx-amt{font-weight:700;text-align:left}
.tx-amt.in{color:var(--in)} .tx-amt.out{color:var(--out)}
.tx-actions{display:flex;gap:2px}
@media (max-width:560px){.tx-row{grid-template-columns:minmax(0,1fr) auto}.tx-actions{grid-column:1 / -1;justify-content:flex-start;margin-top:-4px}}
.toolbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;align-items:center}
.toolbar input,.toolbar select{min-height:38px}
.empty{padding:36px 16px;text-align:center;color:var(--muted)}
.empty p{margin:0 0 12px}

/* ---------- forms ---------- */
.f{display:grid;gap:4px;font-size:13.5px;font-weight:600;color:var(--muted)}
input[type=text],input[type=number],input[type=date],input[type=tel],input[type=search],select,textarea{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-s);padding:8px 10px;min-height:40px;width:100%;color:var(--ink);font-weight:400}
textarea{min-height:120px;resize:vertical;line-height:1.7}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent)}
.toolbar input[type=search]{width:auto;min-width:200px;flex:1 1 200px}
.toolbar select{width:auto}
.fgrid{display:grid;gap:12px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.fgrid>*{min-width:0}
.fgrid .full{grid-column:1 / -1}
@media (max-width:520px){.fgrid{grid-template-columns:minmax(0,1fr)}}
.err{color:var(--out);font-size:12.5px;font-weight:600}
.err:empty{display:none}
.warnbox{background:var(--warn-soft);color:var(--warn);border-radius:var(--r-s);padding:8px 12px;font-size:13.5px;font-weight:500}
.hint{font-size:12.5px;color:var(--muted);font-weight:400}
.has-err input,.has-err select{border-color:var(--out)}
.inline-add{display:flex;gap:6px;margin-top:6px}

.types{display:grid;gap:10px}
.tgroup .glbl{font-size:12.5px;color:var(--muted);font-weight:600;margin-bottom:4px}
.tbtns{display:flex;flex-wrap:wrap;gap:6px}
.tbtn{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-s);padding:7px 12px;cursor:pointer;font-weight:500;font-size:14px;display:inline-flex;align-items:center;gap:6px}
.tbtn .dir{font-size:11.5px;font-weight:700;border-radius:4px;padding:0 5px}
.tbtn .dir.in{background:var(--in-soft);color:var(--in)} .tbtn .dir.out{background:var(--out-soft);color:var(--out)}
.tbtn[aria-pressed="true"]{border-color:var(--primary);background:var(--indigo-soft);color:var(--primary);font-weight:700}

/* ---------- modal ---------- */
.overlay{position:fixed;inset:0;background:rgba(10,14,30,.45);z-index:50;display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--surface);width:100%;max-width:640px;box-shadow:var(--shadow-lg);max-height:92vh;max-height:92dvh;overflow:auto;border-radius:var(--r-l) var(--r-l) 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom,0px));animation:up .18s ease-out}
@media (min-width:700px){.overlay{align-items:center}.sheet{border-radius:var(--r-l);padding:22px}}
@keyframes up{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}}
.sheet-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.sheet-head h2{margin:0;font-size:18px}
.sheet-foot{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.sheet-foot .spacer{flex:1}
.confirm{max-width:420px}

.toast{position:fixed;right:50%;transform:translateX(50%);bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:70;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:var(--r-s);font-weight:500;font-size:14px;max-width:90vw}
.toast.bad{background:var(--out);color:#fff}
.banner{background:var(--warn-soft);color:var(--warn);padding:10px 14px;border-radius:var(--r-s);margin-bottom:14px;font-weight:500}
.loading{padding:60px 0;text-align:center;color:var(--muted)}
.stmt-sum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0}
.stmt-sum div{background:var(--surface);border:0;border-radius:var(--r-s);padding:10px 12px;box-shadow:var(--shadow)}
.stmt-sum .lbl{font-size:12.5px;color:var(--muted)}
.stmt-sum .v{font-weight:700;font-size:17px}
.stmt-sum .final{background:var(--indigo-soft)}
@media (max-width:620px){.stmt-sum{grid-template-columns:1fr 1fr}}
.linklike{background:none;border:0;padding:0;color:var(--primary);cursor:pointer;font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---------- auth ---------- */
.auth{min-height:100%;display:grid;grid-template-rows:auto 1fr}
.auth-top{background:var(--indigo);color:var(--on-indigo);padding:18px 20px 12px}
.auth-top b{font-family:var(--brand);font-size:30px;font-weight:700}
.auth-body{display:flex;justify-content:center;align-items:flex-start;padding:40px 16px}
.auth-card{background:var(--surface);border:0;border-radius:var(--r-l);padding:24px;width:100%;max-width:400px;box-shadow:var(--shadow-lg)}
.auth-card h1{font-size:21px}
.auth-card form{display:grid;gap:12px;margin-top:14px}
.auth-card .btn.primary{width:100%;min-height:44px}
.auth-switch{margin-top:16px;font-size:14px;color:var(--muted);text-align:center}
.okbox{background:var(--in-soft);color:var(--in);border-radius:var(--r-s);padding:10px 12px;font-weight:500}
.errbox{background:var(--out-soft);color:var(--out);border-radius:var(--r-s);padding:10px 12px;font-weight:500}
.who{font-size:12px;color:var(--muted)}
.role{font-size:12px;font-weight:600;padding:1px 8px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);white-space:nowrap}
.role.pending{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.role.admin{background:var(--indigo-soft);color:var(--primary);border-color:transparent}
.side-foot .acct{background:none;border:0;color:var(--on-indigo);cursor:pointer;padding:0;text-align:right;font:inherit}
.side-foot .acct b{display:block;font-size:14px}
.acct-mobile{margin-inline-start:auto;background:rgba(255,255,255,.1);border:0;color:var(--on-indigo);border-radius:999px;padding:4px 12px;font:inherit;font-size:13px;cursor:pointer}
@media (min-width:900px){.acct-mobile{display:none}.side-foot{opacity:.9!important}}
.act-list .row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:10px 14px;border-bottom:1px solid var(--line)}
.act-list .row:last-child{border-bottom:0}
.sync{font-size:12px;color:var(--muted)}

.tx-row.click:hover{background:var(--surface-2)}
.auth-top{display:flex;align-items:center;gap:10px}
.auth-top b{font-family:var(--brand);font-size:26px;font-weight:700}
.auth-card form .f{margin-bottom:0}
#msgForm input,#replyForm input{flex:1}

.install-bar,.offline-bar{position:fixed;inset-inline:10px;z-index:80;border-radius:12px;padding:10px 14px;font-size:14px;
  display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;box-shadow:0 6px 20px rgba(28,34,51,.2)}
.install-bar{bottom:calc(86px + env(safe-area-inset-bottom,0px));background:var(--indigo);color:var(--on-indigo)}
.offline-bar{top:calc(8px + env(safe-area-inset-top,0px));background:var(--warn-soft);color:var(--warn);font-weight:600;justify-content:center;text-align:center}
.install-bar .ib-actions{display:flex;gap:6px;align-items:center;margin-inline-start:auto}
.install-bar .icon-btn{color:var(--on-indigo);opacity:.8}
@media (min-width:900px){.install-bar,.offline-bar{inset-inline:auto;inset-inline-end:18px;max-width:440px}}

.dmy-wrap{position:relative;display:block}
.dmy-wrap .dmy{padding-inline-start:38px;direction:ltr;text-align:right;unicode-bidi:plaintext}
.dmy-btn{position:absolute;inset-inline-start:5px;top:50%;transform:translateY(-50%);border:0;background:transparent;
  color:var(--muted);cursor:pointer;padding:4px;border-radius:6px;line-height:0}
.dmy-btn:hover{color:var(--primary);background:var(--surface-2)}