@font-face{font-family:Vazirmatn;src:url(/fonts/Vazirmatn-Regular.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Vazirmatn;src:url(/fonts/Vazirmatn-Medium.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Vazirmatn;src:url(/fonts/Vazirmatn-Bold.woff2) format('woff2');font-weight:700;font-display:swap}

:root{
  --navy:#0e2340; --navy-2:#16324f; --steel:#8a97a6; --steel-l:#e8ecf1;
  --red:#c8102e; --white:#fff; --bg:#f4f6f9; --ink:#132133; --ink-2:#5b6b7d;
  --ok:#127a4a; --ok-bg:#e6f5ee; --warn:#8a5b00; --warn-bg:#fdf3e0;
  --err:#a3122b; --err-bg:#fdeced; --radius:16px;
  --shadow:0 1px 2px rgba(16,35,56,.06),0 8px 24px rgba(16,35,56,.08);
  --safe:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Vazirmatn,system-ui,-apple-system,sans-serif;
  background:var(--bg); color:var(--ink); font-size:16px; line-height:1.75;
  -webkit-font-smoothing:antialiased; padding-bottom:calc(76px + var(--safe));
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;font-weight:700;line-height:1.5}
h1{font-size:1.25rem} h2{font-size:1.06rem} h3{font-size:.98rem}
p{margin:.4rem 0}
small{font-size:.8rem}

/* ---- سرویس‌بار ---- */
.appbar{
  position:sticky;top:0;z-index:40;background:linear-gradient(180deg,var(--navy),var(--navy-2));
  color:#fff;padding:12px 16px;display:flex;align-items:center;gap:12px;
  box-shadow:0 2px 12px rgba(9,25,44,.25);
}
.appbar img{width:38px;height:38px;border-radius:50%;background:#fff;object-fit:cover;flex:none}
.appbar .t{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.appbar .t b{font-size:.98rem;font-weight:700}
.appbar .t span{font-size:.72rem;color:#b9c7d8}
.appbar .end{margin-inline-start:auto;display:flex;gap:8px;align-items:center}
.chip{background:rgba(255,255,255,.14);border-radius:999px;padding:5px 11px;font-size:.75rem;white-space:nowrap}

.wrap{max-width:640px;margin:0 auto;padding:16px 14px 28px}
.wrap.wide{max-width:960px}

/* ---- کارت ---- */
.card{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;margin-bottom:14px}
.card.tight{padding:12px}
.card-h{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.card-h h2{flex:1}
.sect-title{font-size:.85rem;color:var(--ink-2);font-weight:500;margin:18px 4px 8px}

/* ---- موجودی ---- */
.balances{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bal{border-radius:14px;padding:14px;color:#fff;position:relative;overflow:hidden}
.bal.toman{background:linear-gradient(135deg,#12304f,#1d4f74)}
.bal.usd{background:linear-gradient(135deg,#7a1024,#b31b33)}
.bal .lbl{font-size:.76rem;opacity:.82;display:flex;align-items:center;gap:6px}
.bal .val{font-size:1.16rem;font-weight:700;margin-top:4px;letter-spacing:-.2px}
.bal .sub{font-size:.72rem;opacity:.8;margin-top:2px}

/* ---- دکمه ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;border-radius:12px;padding:14px 18px;font:inherit;font-weight:500;
  background:var(--navy);color:#fff;cursor:pointer;min-height:52px;
  transition:transform .06s,filter .15s;text-align:center;
}
.btn:active{transform:scale(.985)}
.btn.block{width:100%}
.btn.red{background:var(--red)}
.btn.ghost{background:var(--steel-l);color:var(--navy)}
.btn.outline{background:#fff;color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--steel-l)}
.btn.ok{background:var(--ok)}
.btn.sm{padding:9px 14px;min-height:40px;font-size:.86rem;border-radius:10px}
.btn:disabled{opacity:.55;cursor:not-allowed}

/* ---- فرم ---- */
.field{margin-bottom:14px}
label{display:block;font-size:.86rem;color:var(--ink-2);margin-bottom:6px;font-weight:500}
input[type=text],input[type=tel],input[type=password],input[type=number],select,textarea{
  width:100%;font:inherit;padding:14px;border:1.5px solid #d9e0e8;border-radius:12px;
  background:#fff;color:var(--ink);min-height:52px;outline:none;transition:border-color .15s;
}
input:focus,select:focus,textarea:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(14,35,64,.08)}
input[dir=ltr]{text-align:left;letter-spacing:.4px}
textarea{min-height:88px;resize:vertical}
.hint{font-size:.76rem;color:var(--ink-2);margin-top:5px}
.err{background:var(--err-bg);color:var(--err);border-radius:12px;padding:11px 14px;font-size:.87rem;margin-bottom:12px}
.okmsg{background:var(--ok-bg);color:var(--ok);border-radius:12px;padding:11px 14px;font-size:.87rem;margin-bottom:12px}

/* ---- نوار پایین ---- */
.tabbar{
  position:fixed;inset-inline:0;bottom:0;z-index:50;background:rgba(255,255,255,.97);
  backdrop-filter:blur(12px);border-top:1px solid #e3e8ef;
  display:grid;grid-template-columns:repeat(4,1fr);
  padding:6px 4px calc(6px + var(--safe));
}
.tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px;color:#7b8798;font-size:.7rem;border-radius:12px}
.tabbar a.on{color:var(--navy);background:#eef2f7}
.tabbar svg{width:23px;height:23px;stroke-width:1.9}

/* ---- محصول ---- */
.prod{display:flex;gap:12px;align-items:stretch;background:#fff;border-radius:14px;padding:10px;box-shadow:var(--shadow);margin-bottom:10px}
.prod img{width:104px;height:88px;border-radius:10px;object-fit:cover;flex:none;background:#eef1f5}
.prod .body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.prod .nm{font-weight:500;font-size:.95rem;line-height:1.5}
.prod .ds{font-size:.76rem;color:var(--ink-2);margin-top:2px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.prod .pr{color:var(--red);font-weight:700;font-size:.95rem;margin-top:6px;white-space:nowrap}
.prod .pr small{color:var(--ink-2);font-weight:400}
.stamp{font-size:.72rem;color:var(--ink-2);text-align:center;margin:2px 0 14px}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.row{display:flex;gap:10px;align-items:center}
.row.between{justify-content:space-between}
.stack>*+*{margin-top:10px}

/* ---- جدول/لیست ---- */
.list{background:#fff;border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.li{display:flex;gap:10px;padding:13px 14px;border-bottom:1px solid #eef1f5;align-items:center}
.li:last-child{border-bottom:0}
.li .grow{flex:1;min-width:0}
.li .t1{font-size:.9rem;font-weight:500}
.li .t2{font-size:.76rem;color:var(--ink-2);margin-top:2px}
.amt{font-weight:700;font-size:.9rem;white-space:nowrap;direction:rtl}
.amt.pos{color:var(--ok)} .amt.neg{color:var(--err)}
.badge{font-size:.72rem;padding:3px 9px;border-radius:999px;white-space:nowrap;font-weight:500}
.badge.p{background:var(--warn-bg);color:var(--warn)}
.badge.s{background:var(--ok-bg);color:var(--ok)}
.badge.x{background:var(--err-bg);color:var(--err)}

.empty{text-align:center;padding:30px 16px;color:var(--ink-2);font-size:.88rem}
.empty svg{width:44px;height:44px;opacity:.35;margin-bottom:8px}

/* ---- ماشین‌حساب ---- */
.calc-card{background:linear-gradient(140deg,#0e2340,#1a4467);color:#fff;border-radius:18px;padding:18px;margin-bottom:14px}
.calc-card .big{font-size:1.6rem;font-weight:700;margin-top:6px}
.calc-card .lbl{font-size:.8rem;opacity:.8}

/* ---- پاورقی ---- */
.footer{text-align:center;font-size:.76rem;color:#8494a6;padding:22px 16px 8px;line-height:2}
.footer a{color:var(--navy);font-weight:500;border-bottom:1px solid #c9d3de}

/* ---- ورود ---- */
.login-wrap{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:24px 18px;padding-bottom:24px;background:
  radial-gradient(1200px 500px at 50% -10%,#1b3f60 0%,#0e2340 55%,#0a1a30 100%);}
.login-card{max-width:400px;margin:0 auto;width:100%;background:#fff;border-radius:22px;padding:26px 22px;box-shadow:0 20px 50px rgba(4,14,26,.4)}
.login-card .brand{text-align:center;margin-bottom:20px}
.login-card .brand img{width:92px;height:92px;margin:0 auto 10px;border-radius:50%;box-shadow:0 4px 16px rgba(14,35,64,.18)}
.login-card .brand b{display:block;font-size:1.05rem}
.login-card .brand span{font-size:.78rem;color:var(--ink-2)}

.toast{position:fixed;inset-inline:14px;bottom:calc(84px + var(--safe));background:var(--navy);color:#fff;padding:13px 16px;border-radius:12px;
  font-size:.87rem;z-index:60;box-shadow:0 8px 24px rgba(9,25,44,.3);animation:fade .25s}
@keyframes fade{from{opacity:0;transform:translateY(8px)}}

details.edit{background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:14px;margin-bottom:10px}
details.edit summary{cursor:pointer;font-weight:500;font-size:.92rem;list-style:none;display:flex;gap:10px;align-items:center}
details.edit summary::-webkit-details-marker{display:none}
details.edit summary::after{content:"ویرایش";margin-inline-start:auto;font-size:.75rem;color:var(--ink-2);background:var(--steel-l);padding:4px 10px;border-radius:8px}
details.edit[open] summary::after{content:"بستن"}

@media(max-width:380px){
  .prod img{width:88px;height:80px}
  .balances{grid-template-columns:1fr}
}
@media(min-width:720px){
  .wrap{padding:22px 20px 40px}
}