@font-face{font-family:"Mahak";src:url(/MAHAKNUM.TTF) format("truetype");font-weight:100 900;font-display:swap}
:root{
  --bg:#1F2D35; --card:#2A3B46; --gray:#9AA0A4; --line:#4A565E; --text:#fff; --muted:#9AA0A4;
  --teal:#00695C; --magenta:#AA1052; --gold:#B07A0A; --dark:#3A3A3A; --blue1:#0078C4; --blue2:#1565C0; --orange:#D84315;
  --debtor:#FF8A65; --creditor:#81C784;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family:"Mahak",Vazirmatn,"Noto Sans Arabic","Noto Naskh Arabic",system-ui,Tahoma,sans-serif;-webkit-text-size-adjust:100%}
body{min-height:100vh;min-height:100dvh;overflow-x:hidden}
#app{max-width:520px;margin:0 auto;min-height:100vh;min-height:100dvh;
  padding:max(14px,env(safe-area-inset-top)) 0 max(18px,env(safe-area-inset-bottom)) 0}
button{font-family:inherit;color:inherit}
.hidden{display:none!important}

/* ---------- title with lines ---------- */
.hdr{margin:0 4%}
.hdr .ln{height:4px;border-radius:2px;background:linear-gradient(90deg,transparent,#59666d 15%,#59666d 85%,transparent)}
.hdr h1{margin:0;text-align:center;color:var(--gray);font-weight:900;letter-spacing:0;
  font-size:min(10.4vw,58px);line-height:1.5;padding:2px 0 0;white-space:nowrap;text-shadow:0 2px 0 rgba(0,0,0,.35)}
.hdr.sm h1{font-size:min(7.4vw,38px);line-height:1.5}
.hdr.sm{margin:0 8%}

/* ---------- home tiles (proportions of the design image) ---------- */
.home{margin-top:5%}
.tile{display:flex;align-items:center;gap:3.2%;border:0;cursor:pointer;color:#fff;text-align:start;
  padding:0 3% ;font-size:clamp(15px,4.7vw,22px);font-weight:600;position:relative;overflow:hidden;
  transition:filter .12s,transform .12s}
.tile:active{filter:brightness(1.2);transform:scale(.985)}
.tile svg{flex:0 0 auto;width:clamp(26px,7.4vw,40px);height:clamp(26px,7.4vw,40px);fill:#fff}
.tile span{flex:1;min-width:0}
.big{display:flex;width:60%;aspect-ratio:5.07/1;min-height:54px;margin-top:5%}
.big.t1{margin-inline-start:5.8%;margin-top:0}
.big.t2{width:59%;margin-inline-start:35%;margin-top:1.3%}
.big.t3{margin-inline-start:20%}
.big.t4{margin-inline-start:6.2%}
.big.t5{width:60%;margin-inline-start:33.8%;margin-top:.8%}
.big.t6{margin-inline-start:20%}
.c-teal{background:var(--teal)}.c-magenta{background:var(--magenta)}.c-gold{background:var(--gold)}
.c-dark{background:var(--dark)}.c-blue1{background:var(--blue1)}.c-blue2{background:var(--blue2)}.c-orange{background:var(--orange)}
.small-grid{display:flex;gap:5%;margin:6.5% 0 0 0;padding-inline-start:6.2%}
.small-col{width:41%;display:flex;flex-direction:column;gap:.9%}
.small{aspect-ratio:5.1/1;min-height:50px;font-size:clamp(11.5px,3.45vw,15px);padding:0 4%;gap:5%;margin-bottom:6px;font-weight:600;line-height:1.35}
.small svg{width:clamp(20px,5.6vw,30px);height:clamp(20px,5.6vw,30px)}
.settings-wrap{text-align:center;margin-top:9%}
.settings-btn{background:var(--dark);border:0;color:var(--gray);font-weight:900;font-size:min(9vw,44px);padding:.1em .5em;
  cursor:pointer;margin:5% 0;text-shadow:0 2px 0 rgba(0,0,0,.35)}
.settings-btn:active{filter:brightness(1.3)}
.hint{margin:4% 8% 0;color:var(--debtor);font-size:13px;text-align:center}
.install{display:block;margin:6% auto 0;background:transparent;border:1px dashed var(--line);color:var(--gray);
  padding:10px 16px;border-radius:10px;font-size:13px;cursor:pointer}

/* ---------- forms / auth ---------- */
.page{padding:0 16px}
.stack{display:flex;flex-direction:column;gap:12px}
.sub{color:#C5CCD0;text-align:center;font-size:15px;margin:26px 0 18px;line-height:1.8}
label.f{display:block;color:#C5CCD0;font-size:13px;margin:0 0 6px}
input.in{width:100%;background:var(--card);border:1px solid transparent;color:#fff;border-radius:10px;
  padding:13px 14px;font-size:16px;font-family:inherit;outline:none}
input.in:focus{border-color:var(--teal)}
input.ltr{direction:ltr;text-align:left}
.chk{display:flex;align-items:center;gap:10px;color:#fff;font-size:15px;padding:4px 2px}
.chk input{width:20px;height:20px;accent-color:var(--teal)}
.btn{display:block;width:100%;border:0;border-radius:10px;padding:14px 16px;font-size:16px;font-weight:700;
  color:#fff;background:var(--teal);cursor:pointer}
.btn:active{filter:brightness(1.2)}
.btn.blue{background:var(--blue2)}.btn.mag{background:var(--magenta)}.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--gray)}
.btn[disabled]{opacity:.5}
.note{color:var(--muted);font-size:12.5px;line-height:1.9}
.link{background:none;border:0;color:var(--gray);text-decoration:underline;font-size:13px;cursor:pointer;padding:8px;align-self:center}

/* ---------- lists ---------- */
.bar{display:flex;align-items:center;gap:8px;margin:10px 16px 0}
.back{flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:var(--card);border:0;cursor:pointer;display:grid;place-items:center}
.back svg{width:24px;height:24px;fill:#fff}
.search{flex:1}
.status{text-align:center;color:var(--muted);font-size:13px;margin:10px 16px 4px;min-height:18px}
.status.err{color:var(--debtor)}
.list{padding:6px 16px 20px;display:flex;flex-direction:column;gap:8px}
.row{display:flex;align-items:center;gap:10px;background:var(--card);border-radius:10px;padding:12px 14px;cursor:pointer;
  border:0;width:100%;text-align:start;color:#fff}
.row:active{filter:brightness(1.2)}
.row .main{flex:1;min-width:0}
.row .t{font-weight:700;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .s{color:var(--muted);font-size:12.5px;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .s.wrap{white-space:normal}
.row .v{text-align:end;flex:0 0 auto}
.row .v b{display:block;font-size:15px}
.row .v small{color:var(--muted);font-size:11.5px}
.deb{color:var(--debtor)}.cre{color:var(--creditor)}
.more{margin:4px 16px 16px}

/* ---------- detail ---------- */
.bal{background:var(--card);border-radius:12px;padding:14px 16px;margin:12px 16px}
.bal small{color:var(--muted);display:block;font-size:13px}
.bal b{font-size:24px;display:block;margin-top:4px}
.kv{margin:0 16px;border-top:1px solid #34444e}
.kv div{padding:10px 2px;border-bottom:1px solid #34444e}
.kv small{display:block;color:var(--muted);font-size:12px}
.kv span{font-size:16px;word-break:break-word}
.name{margin:14px 16px 0;font-size:22px;font-weight:800}
.code{margin:2px 16px 0;color:var(--muted);font-size:13px}
.actions{margin:18px 16px 0;display:flex;flex-direction:column;gap:10px}
.sum{margin:10px 16px 0;background:var(--card);border-radius:10px;padding:10px 14px;font-size:13.5px;line-height:2;text-align:center}

/* ---------- dialog / toast ---------- */
.ov{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:flex-end;justify-content:center;z-index:50}
.dlg{background:#24343e;width:100%;max-width:520px;border-radius:16px 16px 0 0;padding:18px 18px max(18px,env(safe-area-inset-bottom));
  max-height:82vh;overflow:auto}
.dlg h3{margin:0 0 10px;font-size:18px}
.dlg p,.dlg pre{margin:0 0 14px;white-space:pre-wrap;line-height:1.9;font-size:14.5px;font-family:inherit;color:#dfe5e8}
#toast{position:fixed;left:50%;bottom:max(22px,env(safe-area-inset-bottom));transform:translateX(-50%) translateY(30px);
  background:#101a20;color:#fff;padding:11px 18px;border-radius:24px;font-size:14px;opacity:0;pointer-events:none;
  transition:.25s;max-width:90vw;text-align:center;z-index:60;border:1px solid #33444f}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- new documents (sale / purchase / receipt / payment) ---------- */
.docs{margin:8% 0 0}
.dtitle{margin:0 6.2%;color:var(--gray);font-weight:800;font-size:15px}
.dgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 6.2% 0}
.dbtn{min-height:58px;padding:0 10px;font-size:clamp(13px,4vw,17px)}
.banner{margin:8px 16px 0;background:#3a2f12;border:1px solid #6b5412;color:#ffd98a;border-radius:10px;padding:10px 12px;font-size:12.5px;line-height:1.9}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:transparent;color:var(--gray);border-radius:20px;padding:9px 16px;font-size:14px;cursor:pointer}
.chip.on{background:var(--teal);border-color:var(--teal);color:#fff}
.tot{background:var(--card);border-radius:12px;padding:10px 14px;line-height:2.1;font-size:14px}
.tot>div{display:flex;justify-content:space-between;gap:10px}
.tot .grand{border-top:1px solid #3d4d57;margin-top:4px;padding-top:4px;font-size:17px;font-weight:800}
.btn.danger{background:#B3261E;margin-top:8px}

/* ---------- simplified home ---------- */
.home2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:5% 6.2% 0}
.h2{min-height:64px;padding:0 10px;font-size:clamp(13px,4vw,17px)}