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

:root{
  --bg:#f3f6f4;
  --surface:#ffffff;
  --line:#e6ecea;
  --line-2:#d2ded9;
  --text:#14231e;
  --text-2:#57685f;
  --text-3:#8a9a93;
  --brand:#207a55;
  --brand-d:#17603f;
  --brand-t:#eaf4ef;
  --brand-t2:#f4faf7;
  --amber:#e08c0b;
  --amber-t:#fdf4e4;
  --red:#c33a2c;
  --red-t:#fceeec;
  --ok:#1c8557;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --r-s:8px; --r:12px; --r-l:16px;
  --sh-1:0 1px 2px rgba(20,35,30,.06);
  --sh-2:0 2px 6px rgba(20,35,30,.07),0 10px 24px -10px rgba(20,35,30,.14);
  --sh-3:0 6px 14px rgba(20,35,30,.09),0 22px 48px -18px rgba(20,35,30,.22);
  --e:cubic-bezier(.2,.7,.3,1);
  --hdr:64px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Vazirmatn,Tahoma,sans-serif;background:var(--bg);color:var(--text);
  font-size:14px;line-height:1.85;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
h1{font-size:21px;font-weight:700;margin:0 0 18px;letter-spacing:-.3px}
h2{font-size:17px;font-weight:700;margin:0 0 16px;letter-spacing:-.2px}
h3{font-size:15px;font-weight:700;margin:0 0 13px}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
.num,table,.price{font-variant-numeric:tabular-nums}

@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes slide{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes shine{100%{transform:translateX(-100%)}}
@keyframes pop{50%{transform:scale(1.18)}}

/* ============ ظرف‌ها ============ */
.panel,.box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);
  padding:22px;box-shadow:var(--sh-1);margin-bottom:16px;animation:rise .4s var(--e) backwards}
.sec-t{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.sec-t::after{content:"";flex:1;height:1px;background:var(--line)}
.sec-t h2,.sec-t h3{margin:0}
.eyebrow{font-size:11px;letter-spacing:1.5px;color:var(--text-3);font-weight:500}

/* ============ چیپ کد فنی — امضای طراحی ============ */
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.4px;background:var(--brand-t2);color:var(--brand-d);border:1px solid var(--line);
  padding:3px 9px;border-radius:6px;direction:ltr;unicode-bidi:isolate}
.chip::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--amber);flex:none}

/* ============ نشان‌ها ============ */
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11.5px;font-weight:500}
.badge-ok{background:var(--brand-t);color:var(--brand-d)}
.badge-out{background:var(--red-t);color:var(--red)}
.badge-warn{background:var(--amber-t);color:#9a6100}

/* ============ دکمه ============ */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:0 22px;min-height:48px;background:var(--brand);color:#fff;border:0;border-radius:var(--r);
  font-family:inherit;font-size:14.5px;font-weight:500;cursor:pointer;box-shadow:var(--sh-1);
  transition:background .18s,transform .12s var(--e),box-shadow .18s}
.btn:hover{background:var(--brand-d);box-shadow:var(--sh-2);transform:translateY(-1px)}
.btn:active{transform:translateY(1px) scale(.985);box-shadow:none}
.btn-g{background:var(--surface);color:var(--text-2);border:1.5px solid var(--line-2);box-shadow:none}
.btn-g:hover{background:var(--brand-t2);color:var(--brand-d);border-color:var(--brand-t)}
.btn-o{background:var(--amber);color:#301f00;font-weight:700}
.btn-o:hover{background:#c37806}
.btn-r{background:var(--red)}.btn-r:hover{background:#a32c20}
.btn-sm{min-height:38px;padding:0 15px;font-size:13px}
.btn-block{width:100%}

/* ============ فرم ============ */
label{display:block;font-size:12.5px;color:var(--text-2);margin-bottom:7px;font-weight:500}
input,select,textarea,input.f,select.f{width:100%;padding:13px 14px;border:1.5px solid var(--line-2);
  border-radius:var(--r);font-family:inherit;font-size:15px;background:var(--surface);color:var(--text);
  transition:border-color .16s,box-shadow .16s}
input:hover,select:hover,textarea:hover{border-color:var(--text-3)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-t)}
input[type=checkbox],input[type=radio]{width:19px;height:19px;min-height:auto;accent-color:var(--brand)}
.field{margin-bottom:15px}
.grid,.fl{display:grid;grid-template-columns:repeat(auto-fit,minmax(195px,1fr));gap:15px}
.fl{align-items:end}
.bar{display:flex;gap:11px;align-items:center;margin-bottom:20px;flex-wrap:wrap}
.bar input{max-width:320px}

/* ============ جدول ============ */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{padding:13px 11px;text-align:right;border-bottom:1px solid var(--line)}
th{background:var(--brand-t2);color:var(--text-2);font-weight:500;font-size:12px;
  position:sticky;top:0;z-index:2}
tr:last-child td{border-bottom:0}
tr{transition:background .14s}
tr:hover td{background:var(--brand-t2)}
.low{color:var(--red);font-weight:700}
.tbl-wrap{overflow-x:auto;border-radius:var(--r);border:1px solid var(--line)}

/* ============ پیام و حالت خالی ============ */
.msg{padding:14px 17px;border-radius:var(--r);font-size:13.5px;margin-bottom:18px;
  border-right:4px solid;animation:slide .3s var(--e)}
.ok{background:var(--brand-t);color:var(--brand-d);border-color:var(--brand)}
.err{background:var(--red-t);color:var(--red);border-color:var(--red)}
.empty{text-align:center;color:var(--text-3);padding:54px 18px;font-size:14.5px}
.empty .ic{font-size:46px;display:block;margin-bottom:14px;opacity:.5}
.skel{position:relative;overflow:hidden;background:var(--line);border-radius:6px;height:16px}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent);animation:shine 1.1s infinite}

/* ============ هدر سایت ============ */
.hdr{position:sticky;top:0;z-index:60;background:var(--surface);border-bottom:1px solid var(--line);
  transition:box-shadow .25s}
.hdr.stuck{box-shadow:var(--sh-2)}
.hdr .row{max-width:1220px;margin:auto;height:var(--hdr);display:flex;align-items:center;gap:18px;padding:0 16px}
.logo{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:700;flex:none}
.logo .m{width:38px;height:38px;border-radius:11px;background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:19px;box-shadow:var(--sh-2)}
.search{flex:1;max-width:620px;position:relative}
.search input{padding-right:44px;background:var(--bg);border-color:transparent;min-height:46px}
.search input:focus{background:var(--surface)}
.search .i{position:absolute;right:15px;top:50%;transform:translateY(-50%);color:var(--text-3);font-size:16px}
.hdr .acts{display:flex;align-items:center;gap:9px;margin-right:auto;flex:none}
.icon-btn{display:flex;align-items:center;gap:7px;padding:10px 15px;border-radius:var(--r);
  font-size:13.5px;color:var(--text-2);border:1.5px solid var(--line);transition:.16s;font-weight:500}
.icon-btn:hover{border-color:var(--brand-t);background:var(--brand-t2);color:var(--brand-d)}
.icon-btn .n{background:var(--amber);color:#301f00;border-radius:20px;padding:0 7px;
  font-size:11.5px;font-weight:700;animation:pop .4s var(--e)}
nav.cats{background:var(--surface);border-bottom:1px solid var(--line);overflow-x:auto;
  scrollbar-width:none}
nav.cats::-webkit-scrollbar{display:none}
nav.cats .row{max-width:1220px;margin:auto;display:flex;gap:2px;padding:0 10px}
nav.cats a{padding:14px 17px;font-size:14px;white-space:nowrap;color:var(--text-2);font-weight:500;
  border-bottom:3px solid transparent;transition:color .15s,border-color .2s}
nav.cats a:hover,nav.cats a.on{color:var(--brand-d);border-color:var(--amber)}
.wrap{max-width:1220px;margin:auto;padding:20px 16px 90px}
.bc{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--text-3);margin-bottom:16px;flex-wrap:wrap}
.bc a:hover{color:var(--brand)}
.bc span{color:var(--line-2)}

/* ============ کارت محصول ============ */
.grid4{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:16px}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;
  box-shadow:var(--sh-1);display:flex;flex-direction:column;position:relative;
  transition:box-shadow .22s,transform .22s var(--e),border-color .22s;animation:rise .4s var(--e) backwards}
.pcard:hover{box-shadow:var(--sh-3);transform:translateY(-4px);border-color:var(--brand-t)}
.pcard .img{height:152px;display:flex;align-items:center;justify-content:center;font-size:42px;
  background:repeating-linear-gradient(135deg,var(--brand-t2) 0 14px,var(--brand-t) 14px 28px);
  transition:transform .4s var(--e)}
.pcard:hover .img{transform:scale(1.06)}
.pcard .b{padding:14px;flex:1;display:flex;flex-direction:column;gap:9px}
.pcard .nm{font-size:13.5px;line-height:1.75;height:47px;overflow:hidden;font-weight:500}
.pcard .cd{font-family:var(--mono);font-size:11px;color:var(--text-3);letter-spacing:.3px;
  direction:ltr;unicode-bidi:isolate;text-align:right}
.pcard .pr{margin-top:auto;font-size:16.5px;font-weight:700;letter-spacing:-.3px;
  display:flex;align-items:baseline;gap:5px}
.pcard .pr u{font-size:11.5px;font-weight:400;color:var(--text-3);text-decoration:none}
.pcard .pr.out{color:var(--red);font-size:13.5px;font-weight:500}
.pcard .tag{position:absolute;top:11px;right:11px;z-index:2}

/* ============ نوار پایینی موبایل ============ */
.tabbar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:70;background:var(--surface);
  border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -3px 16px rgba(20,35,30,.07)}
.tabbar .row{display:flex}
.tabbar a{flex:1;padding:9px 4px 8px;text-align:center;font-size:11px;color:var(--text-3);
  transition:color .15s;font-weight:500}
.tabbar a .ic{display:block;font-size:22px;margin-bottom:2px;transition:transform .2s var(--e)}
.tabbar a.on{color:var(--brand)}
.tabbar a:active .ic{transform:scale(.88)}

/* ============ پنل مدیریت ============ */
.adm{display:flex;min-height:100vh}
.side{width:248px;background:var(--surface);border-left:1px solid var(--line);position:fixed;
  top:0;right:0;bottom:0;overflow-y:auto;z-index:80;transition:transform .28s var(--e)}
.side .brand{padding:20px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:11px}
.side .brand .lg{width:42px;height:42px;border-radius:13px;background:var(--brand);color:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:var(--sh-2)}
.side .brand b{font-size:14.5px;font-weight:700;line-height:1.5}
.side .brand small{display:block;color:var(--text-3);font-size:11.5px;letter-spacing:.5px}
.side nav{padding:12px 11px}
.side .grp{font-size:11px;color:var(--text-3);letter-spacing:1.2px;padding:14px 15px 7px;font-weight:500}
.side nav a{position:relative;display:flex;align-items:center;gap:13px;padding:13px 15px;
  border-radius:var(--r);color:var(--text-2);font-size:14.5px;margin-bottom:3px;
  transition:background .16s,color .16s,padding .18s var(--e)}
.side nav a .ic{font-size:19px;width:25px;text-align:center;flex:none;transition:transform .22s var(--e)}
.side nav a:hover{background:var(--brand-t2);color:var(--brand-d);padding-right:19px}
.side nav a:hover .ic{transform:scale(1.15)}
.side nav a.on{background:var(--brand);color:#fff;font-weight:500;box-shadow:var(--sh-2)}
.side nav a.on::after{content:"";position:absolute;left:14px;width:5px;height:5px;border-radius:50%;
  background:var(--amber);animation:pop .5s var(--e)}
.side .out{margin:12px 11px 24px}
.main{flex:1;margin-right:248px;display:flex;flex-direction:column;min-width:0}
.topbar{background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
  padding:14px 24px;display:flex;align-items:center;gap:15px;position:sticky;top:0;z-index:50}
.topbar .ttl{font-size:16.5px;font-weight:700}
.topbar .sp{flex:1}
.topbar .who{font-size:13px;color:var(--text-2)}
.topbar .who b{color:var(--text);font-weight:500}
.burger{display:none;background:none;border:0;font-size:23px;cursor:pointer;padding:0;min-height:auto;width:auto}
.content{padding:24px;max-width:1280px;width:100%}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(162px,1fr));gap:15px;margin-bottom:22px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:20px 18px;
  box-shadow:var(--sh-1);position:relative;overflow:hidden;animation:rise .4s var(--e) backwards;
  transition:box-shadow .2s,transform .2s var(--e)}
.stat::before{content:"";position:absolute;top:0;right:0;width:3px;height:100%;background:var(--brand);
  transform:scaleY(0);transform-origin:top;transition:transform .35s var(--e)}
.stat:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
.stat:hover::before{transform:scaleY(1)}
.stat .n{font-size:25px;font-weight:700;letter-spacing:-.5px}
.stat .t{font-size:12.5px;color:var(--text-3);margin-top:5px}
.stats .stat:nth-child(2){animation-delay:.05s}.stats .stat:nth-child(3){animation-delay:.1s}
.stats .stat:nth-child(4){animation-delay:.15s}.stats .stat:nth-child(5){animation-delay:.2s}
.menu{display:grid;grid-template-columns:repeat(auto-fit,minmax(174px,1fr));gap:15px}
.menu a{background:var(--surface);border:1px solid var(--line);padding:26px 16px;border-radius:var(--r-l);
  box-shadow:var(--sh-1);text-align:center;font-size:14.5px;font-weight:500;
  animation:rise .4s var(--e) backwards;transition:box-shadow .2s,transform .2s var(--e),border-color .2s}
.menu a:hover{box-shadow:var(--sh-3);transform:translateY(-3px);border-color:var(--brand-t);color:var(--brand-d)}
.menu a .ic{display:block;font-size:31px;margin-bottom:11px;transition:transform .25s var(--e)}
.menu a:hover .ic{transform:scale(1.12) rotate(-5deg)}
.menu a:nth-child(2){animation-delay:.04s}.menu a:nth-child(3){animation-delay:.08s}
.menu a:nth-child(4){animation-delay:.12s}.menu a:nth-child(5){animation-delay:.16s}
.menu a:nth-child(6){animation-delay:.2s}.menu a:nth-child(7){animation-delay:.24s}

footer{background:var(--brand-d);color:#a8ccb9;padding:30px 16px;margin-top:36px;
  font-size:13px;text-align:center;line-height:2.1}
footer b{color:#fff}

/* ============ واکنش‌گرا ============ */
@media(max-width:900px){
  .side{transform:translateX(100%);box-shadow:-6px 0 28px rgba(20,35,30,.18)}
  .side.open{transform:translateX(0)}
  .main{margin-right:0}
  .burger{display:block}
  .content{padding:16px}
  .ovl{position:fixed;inset:0;background:rgba(20,35,30,.45);z-index:75;opacity:0;
    pointer-events:none;transition:opacity .25s}
  .ovl.open{opacity:1;pointer-events:auto}
  .tabbar{display:block}
  .hdr .acts .lbl{display:none}
  nav.cats{display:none}
}
@media(max-width:600px){
  .grid4{grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:12px}
  .panel,.box{padding:16px;border-radius:13px}
  .hdr .row{gap:11px;height:auto;padding:11px 14px;flex-wrap:wrap}
  .search{order:3;flex-basis:100%;max-width:none}
  h1{font-size:18px}
  th,td{padding:11px 8px}
  table{font-size:12.5px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}
@media print{.side,.topbar,.hdr,.tabbar,nav.cats,footer,.no-print{display:none!important}
  .main{margin:0}.panel,.box{box-shadow:none;border:0}}

/* ===== آیکون‌ها ===== */
.i{flex:none;vertical-align:-.22em}
.logo .m{background:var(--brand);color:#fff}
.icon-btn .i{color:var(--text-3);transition:color .16s}
.icon-btn:hover .i{color:var(--brand)}
.side nav a .ic,.tabbar a .ic,.menu a .ic{display:inline-flex;align-items:center;justify-content:center}
.menu a .ic{width:52px;height:52px;margin:0 auto 12px;border-radius:16px;
  background:var(--brand-t);color:var(--brand);transition:.22s var(--e)}
.menu a:hover .ic{background:var(--brand);color:#fff;transform:translateY(-2px) scale(1.04)}
.stat .ic{position:absolute;left:16px;top:16px;color:var(--brand);opacity:.16}
.pcard .img svg{opacity:.32;color:var(--brand-d)}
.empty .ic{color:var(--line-2);opacity:1}
.badge .i{vertical-align:-.18em;margin-left:3px}