/* =========================================================
   نقطه — سیستم طراحی
   استارتاپی، مینیمال، تخت | بدون سایه، بدون حاشیهٔ تزئینی
   ---------------------------------------------------------
   سبز برند  #01CC8B   |   سرمه‌ای تیره  #08131F
   پس‌زمینه  #0F172A   |   کارت  #162133
   گرادیان   135deg  #01CC8B → #00E29A
   ========================================================= */
:root{
  /* تم تیره — هویتِ اصلی برند */
  --bg:#0F172A;
  --bg-2:#0B1322;
  --surface:#162133;
  --surface-2:#1E2A3D;
  --surface-3:#243349;
  --line:#253247;
  --ink:#F8FAFC;
  --muted:#8B9BB4;
  --faint:#5C6E89;
  --accent:#01CC8B;
  --accent-2:#00E29A;
  --accent-strong:#00B77D;
  --accent-press:#009B6A;
  --accent-soft:rgba(1,204,139,.12);
  --accent-line:rgba(1,204,139,.30);
  --grad:linear-gradient(135deg,#01CC8B 0%,#00D4A8 50%,#30F0B7 100%);
  --grad-2:linear-gradient(135deg,#01CC8B 0%,#00E29A 100%);
  --ok:#01CC8B;
  --info:#3B82F6;
  --warn:#F59E0B;
  --err:#EF4444;
  --hdr-bg:rgba(11,19,34,.72);
  --modal-back:rgba(5,10,20,.66);
  --radius:16px;
  --radius-sm:11px;
  --radius-xs:9px;
}
html[data-theme="light"]{
  --bg:#F3F6FA;
  --bg-2:#EAF0F6;
  --surface:#FFFFFF;
  --surface-2:#EEF3F8;
  --surface-3:#E3EBF3;
  --line:#E2E9F1;
  --ink:#08131F;
  --muted:#566476;
  --faint:#94A2B5;
  --accent:#01B77D;
  --accent-2:#01CC8B;
  --accent-strong:#009B6A;
  --accent-press:#008159;
  --accent-soft:rgba(1,204,139,.10);
  --accent-line:rgba(1,204,139,.26);
  --ok:#01B77D;
  --info:#2563EB;
  --warn:#D97706;
  --err:#DC2626;
  --hdr-bg:rgba(243,246,250,.8);
  --modal-back:rgba(8,19,31,.42);
}

/* ============================================================
   پس‌زمینهٔ انیمیشنیِ سراسری — اوربِ شناورِ گرادیانی (مدرن/استارتاپی)
   تزریق‌شده با JS به‌صورتِ #nq-bg روی همهٔ صفحات
   ============================================================ */
#nq-bg{position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none}
#nq-bg .nq-orb{position:absolute; border-radius:50%; filter:blur(64px); opacity:.30; mix-blend-mode:normal; will-change:transform}
html[data-theme="light"] #nq-bg .nq-orb{opacity:.16; filter:blur(72px)}
#nq-bg .o1{width:48vmax; height:48vmax; top:-14vmax; right:-10vmax;
  background:radial-gradient(circle at 50% 50%, var(--accent) 0%, transparent 66%);
  animation:nq-orb1 24s ease-in-out infinite}
#nq-bg .o2{width:42vmax; height:42vmax; bottom:-16vmax; left:-12vmax;
  background:radial-gradient(circle at 50% 50%, var(--accent-2) 0%, transparent 66%);
  animation:nq-orb2 30s ease-in-out infinite}
#nq-bg .o3{width:36vmax; height:36vmax; top:34%; left:30%;
  background:radial-gradient(circle at 50% 50%, var(--accent-strong) 0%, transparent 66%);
  animation:nq-orb3 27s ease-in-out infinite}
@keyframes nq-orb1{
  0%{transform:translate(0,0) scale(1)}
  33%{transform:translate(-16vmax,12vmax) scale(1.15)}
  66%{transform:translate(8vmax,-8vmax) scale(.92)}
  100%{transform:translate(0,0) scale(1)}}
@keyframes nq-orb2{
  0%{transform:translate(0,0) scale(1)}
  33%{transform:translate(14vmax,-10vmax) scale(1.1)}
  66%{transform:translate(-10vmax,8vmax) scale(.95)}
  100%{transform:translate(0,0) scale(1)}}
@keyframes nq-orb3{
  0%{transform:translate(0,0) scale(1)}
  50%{transform:translate(12vmax,14vmax) scale(1.2)}
  100%{transform:translate(0,0) scale(1)}}
@media (prefers-reduced-motion:reduce){
  #nq-bg .nq-orb{animation:none !important}
}

*{box-sizing:border-box; margin:0; padding:0}
html,body{height:100%}
body{
  font-family:'YekanBakh',system-ui,-apple-system,sans-serif;
  background:var(--bg); color:var(--ink);
  font-weight:400; font-size:13.5px; line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background .25s ease, color .25s ease;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
::selection{background:var(--accent-soft); color:var(--accent)}

/* ---------- انیمیشن‌های پایه ---------- */
@keyframes nq-rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:translateY(0)}}
@keyframes nq-fade{from{opacity:0} to{opacity:1}}
@keyframes nq-pop{0%{opacity:0; transform:scale(.96)} 100%{opacity:1; transform:scale(1)}}
@keyframes nq-spin{to{transform:rotate(360deg)}}
@keyframes nq-shimmer{0%{background-position:-180% 0} 100%{background-position:180% 0}}
@keyframes nq-pulse{0%,100%{transform:scale(1); opacity:1} 50%{transform:scale(1.12); opacity:.7}}
@keyframes nq-flow{0%{background-position:0% 50%} 100%{background-position:200% 50%}}
@keyframes nq-bars{0%,100%{transform:scaleY(.45)} 50%{transform:scaleY(1)}}

.nq-in{}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
}

/* ============================================================
   ضدِّ پرشِ اولیه (anti-FOUC / no layout-shift)
   هدر به‌صورتِ پویا با JS و پس از پاسخِ احراز هویت به بالای صفحه
   تزریق می‌شود؛ این کار محتوا را ~۵۸px به پایین هل می‌داد و «پرش»
   ایجاد می‌کرد. راهکار: تا چیدمانِ کامل (هدر/فوتر/فونت) آماده شود
   فقط پس‌زمینهٔ تم دیده می‌شود، سپس همه‌چیز یک‌جا و نرم ظاهر می‌شود
   تا کاربر هیچ جابه‌جاییِ ناگهانی را نبیند.
   کلاسِ nq-boot پیش از اولین رنگ‌آمیزی توسط theme-init.js افزوده و
   پس از آماده‌شدنِ کامل توسط app.js (revealApp) برداشته می‌شود.
   ============================================================ */
html.nq-boot body{overflow:hidden}
html.nq-boot body > .wrap,
html.nq-boot #appHeader,
html.nq-boot #siteFooter{opacity:0}
body > .wrap,#appHeader,#siteFooter{opacity:1; transition:opacity .34s ease}
@media (prefers-reduced-motion:reduce){
  body > .wrap,#appHeader,#siteFooter{transition:none}
}

/* محتوای نیازمند ورود تا تأیید احراز هویت پنهان است */
.needauth{display:none}
body.authed .needauth{display:block}

/* کلاس‌های کمکی سازگار با CSP (به‌جای استایلِ اینلاینِ HTML که توسط CSP بلاک می‌شود) */
.nq-hide{display:none !important}
.nq-mt10{margin-top:10px}
.nq-mt12{margin-top:12px}
.nq-mt14{margin-top:14px}

.wrap{max-width:700px; margin:0 auto; padding:30px 18px 70px; min-height:calc(100vh - 168px)}
.page-title{font-size:19px; font-weight:800; letter-spacing:-.4px; margin-bottom:4px}
.page-sub{color:var(--muted); font-size:12.5px; font-weight:400; margin-bottom:24px}

/* ---------- هیرو ---------- */
.hero{text-align:center; padding:18px 0 26px}
.hero .kicker{
  display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700; color:var(--accent);
  background:var(--accent-soft); padding:6px 14px; border-radius:99px; margin-bottom:16px; letter-spacing:.2px;
}
.hero .kicker::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); animation:nq-pulse 2s ease-in-out infinite}
.hero h1{font-size:28px; font-weight:800; letter-spacing:-.7px; line-height:1.4; margin-bottom:11px}
.hero h1 b{font-weight:800; background:var(--grad-2); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.hero p{color:var(--muted); font-size:13.5px; font-weight:400; line-height:1.85; max-width:450px; margin:0 auto}
@media (max-width:560px){ .hero h1{font-size:23px} }

/* ---------- هدر ---------- */
.hdr{position:sticky; top:0; z-index:30; background:var(--hdr-bg);
  backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px)}
.hdr::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg,transparent,var(--line) 18%,var(--line) 82%,transparent)}
.hdr-in{max-width:960px; margin:0 auto; padding:0 18px; height:58px; display:flex; align-items:center; gap:14px; position:relative}
.brand{display:inline-flex; align-items:center; gap:10px; transition:transform .18s ease}
.brand:hover{transform:translateY(-1px)}
.brand-mark{width:32px; height:32px; flex-shrink:0; display:block}
.brand-name{font-size:20px; font-weight:800; letter-spacing:-.2px; color:var(--ink); line-height:1}
.brand-name i{font-style:normal; background:var(--grad-2); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.nav{display:flex; align-items:center; gap:3px; white-space:nowrap; position:absolute; left:50%; transform:translateX(-50%)}
.nav a{padding:8px 12px; border-radius:var(--radius-xs); font-size:13px; font-weight:500; color:var(--muted); transition:color .15s, background .15s}
.nav a:hover{background:var(--surface); color:var(--ink)}
.nav a.active{color:var(--accent); background:var(--accent-soft)}
.nav .who{font-size:12px; color:var(--faint); font-weight:400; padding:0 6px}
.nav .logout{padding:8px 12px; border-radius:var(--radius-xs); border:none; background:var(--surface);
  color:var(--ink); font-family:inherit; font-size:12.5px; font-weight:500; cursor:pointer; transition:background .15s}
.nav .logout:hover{background:var(--surface-2)}

.hdr-icons{display:flex; align-items:center; gap:5px; margin-inline-start:auto}
.hdr.guest .hdr-icons{margin-inline-start:auto}
.icon-btn{width:38px; height:38px; padding:0; border:none; background:none; color:var(--muted);
  display:inline-flex; align-items:center; justify-content:center; border-radius:var(--radius-xs); cursor:pointer; transition:background .15s, color .15s}
.icon-btn:hover{background:var(--surface); color:var(--ink)}
.icon-btn svg{width:19px; height:19px}
.login-btn{padding:9px 17px; border-radius:var(--radius-xs); border:none; background:var(--grad-2);
  color:#04221A; font-family:inherit; font-size:12.5px; font-weight:700; cursor:pointer; transition:transform .15s, filter .15s; white-space:nowrap}
.login-btn:hover{transform:translateY(-1px); filter:brightness(1.04)}
.login-btn:active{transform:translateY(0)}
.burger{display:none}
.admin-only{display:none}
body.is-admin .admin-only{display:inline-block}

@media (max-width:680px){
  .burger{display:inline-flex}
  .hdr-icons{margin-inline-start:auto}
  /* در موبایل، nav افقیِ دسکتاپ پنهان می‌شود؛ منو از drawer می‌آید */
  .nav{display:none}
}

/* ---------- منوی همبرگری موبایل: drawer راست‌به‌چپ ----------
   مستقیماً فرزندِ <body> است (نه داخل هدر) تا لایهٔ overlay
   نتواند روی آیتم‌ها بیفتد. روی دسکتاپ هرگز نمایش داده نمی‌شود. */
.drawer-overlay{position:fixed; inset:0; background:rgba(3,8,16,.55); z-index:1000;
  opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease;
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px)}
.drawer-overlay.show{opacity:1; visibility:visible}
.drawer{position:fixed; top:0; right:0; bottom:0; width:80vw; max-width:300px; z-index:1001;
  display:flex; flex-direction:column; background:var(--bg-2);
  border-left:1px solid var(--line);
  transform:translateX(100%); transition:transform .28s cubic-bezier(.22,.61,.36,1);
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch}
/* سایه فقط در حالتِ باز اعمال می‌شود تا وقتی منو بسته است
   حاله‌ای به لبهٔ راستِ صفحه نشت نکند */
.drawer.open{transform:translateX(0); box-shadow:-14px 0 44px rgba(0,0,0,.5)}
.drawer-head{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px; border-bottom:1px solid var(--line); flex-shrink:0}
.drawer-brand{display:inline-flex; align-items:center; gap:9px}
.drawer-brand .brand-mark{width:28px; height:28px; flex-shrink:0}
.drawer-brand .brand-name{font-size:18px; font-weight:800; letter-spacing:-.2px; color:var(--ink); line-height:1}
.drawer-user{font-size:12.5px; font-weight:600; color:var(--muted); line-height:1.4;
  padding:12px 16px 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.drawer-close{width:36px; height:36px; flex-shrink:0; border:none; background:var(--surface);
  color:var(--muted); border-radius:var(--radius-xs); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; transition:background .15s, color .15s}
.drawer-close svg{width:18px; height:18px}
.drawer-close:hover{background:var(--surface-2); color:var(--ink)}
.drawer-nav{display:flex; flex-direction:column; gap:3px; padding:14px 12px; flex:1; overflow-y:auto}
.drawer-nav a{display:flex; align-items:center; padding:13px 15px; border-radius:var(--radius-xs);
  font-size:14.5px; font-weight:500; color:var(--muted); transition:background .15s, color .15s}
.drawer-nav a:hover,.drawer-nav a:active{background:var(--surface); color:var(--ink)}
.drawer-nav a.active{background:var(--accent-soft); color:var(--accent); font-weight:700}
.drawer-foot{padding:14px 16px 22px; border-top:1px solid var(--line); flex-shrink:0}
.drawer-logout{width:100%; padding:13px; border:none; border-radius:var(--radius-xs);
  background:var(--surface); color:var(--ink); font-family:inherit; font-size:14px; font-weight:600;
  cursor:pointer; transition:background .15s}
.drawer-logout:hover{background:var(--surface-2)}
.drawer .admin-only{display:none}
body.is-admin .drawer .admin-only{display:flex}
body.drawer-open{overflow:hidden}
/* روی دسکتاپ drawer هیچ‌گاه دیده نمی‌شود */
@media (min-width:681px){
  .drawer,.drawer-overlay{display:none !important}
}

/* ---------- OTP ۶ جایگاه ---------- */
.otp-digits{display:flex; gap:9px; justify-content:center; margin-bottom:13px; direction:ltr}
.otp-digit{width:42px; height:50px; text-align:center; font-size:21px; font-weight:700; border:none;
  border-radius:var(--radius-sm); background:var(--surface-2); color:var(--ink);
  transition:outline .15s, transform .12s; caret-color:transparent; outline:2px solid transparent}
.otp-digit:focus{outline:2px solid var(--accent-line); transform:scale(1.06)}
.otp-digit.filled{outline:2px solid var(--accent-line)}
.otp-digit:disabled{opacity:.4; cursor:not-allowed}

/* ---------- دکمه‌ها / فرم ---------- */
select,button,input,textarea{font-family:inherit}
.btn{position:relative; padding:10px 18px; background:var(--grad-2); color:#04221A; border:none; border-radius:var(--radius-xs);
  font-size:13px; font-weight:700; cursor:pointer; transition:transform .15s ease, filter .15s, opacity .15s; overflow:hidden}
.btn:hover{transform:translateY(-1px); filter:brightness(1.05)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.4; cursor:not-allowed; transform:none; filter:none}
.btn.sub{background:var(--surface-2); color:var(--ink)}
.btn.sub:hover{background:var(--surface-3); filter:none}
.btn.rec.on{background:var(--err); color:#fff}
.btn.rec.on::after{content:""; position:absolute; inset:0; background:var(--err); border-radius:inherit; animation:nq-pulse 1.4s ease-in-out infinite; z-index:-1}
.btn.danger{background:var(--accent-soft); color:var(--err)}

/* ---------- کارت‌ها ---------- */
.card{background:var(--surface); border-radius:var(--radius); padding:20px 22px; margin-bottom:16px}
.card h2{font-size:13px; font-weight:700; color:var(--muted); margin-bottom:14px}

/* نوار مصرف */
.usage{margin-bottom:18px}
.usage:last-child{margin-bottom:0}
.usage .top{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px}
.usage .lbl{font-size:13px; font-weight:700}
.usage .val{font-size:12px; color:var(--muted); font-weight:400}
.meter{height:9px; background:var(--surface-2); border-radius:99px; overflow:hidden}
.meter > i{display:block; height:100%; width:0; background:var(--grad-2); border-radius:99px; transition:width .5s cubic-bezier(.22,.61,.36,1)}
.meter.warn > i{background:var(--warn)}
.meter.full > i{background:var(--err)}

.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:11px}
.stat{background:var(--surface-2); border-radius:var(--radius-sm); padding:15px 17px; transition:transform .18s ease}
.stat:hover{transform:translateY(-2px)}
.stat b{display:block; font-size:21px; font-weight:800; letter-spacing:-.3px}
.stat small{color:var(--faint); font-size:11.5px; font-weight:400}

/* ---------- تاریخچه ---------- */
.hist{list-style:none; display:flex; flex-direction:column; background:var(--surface); border-radius:var(--radius); padding:6px 18px}
.hist li{padding:15px 0; display:flex; align-items:center; justify-content:space-between; gap:14px; cursor:pointer; transition:opacity .15s; position:relative}
.hist li + li::before{content:""; position:absolute; top:0; left:0; right:0; height:1px; background:var(--line); opacity:.55}
.hist li:hover{opacity:.65}
.hist li.empty{cursor:default; color:var(--faint); font-weight:400; padding:22px 0; font-size:13px; justify-content:center}
.hist li.empty::before{display:none}
.hist .info{overflow:hidden; flex:1; min-width:0}
.hist .info b{font-size:13px; font-weight:700; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hist .info small{color:var(--faint); font-size:11.5px; font-weight:400}
.tag{font-size:11px; font-weight:700; padding:4px 10px; border-radius:99px; white-space:nowrap}
.tag.done{background:var(--accent-soft); color:var(--ok)}
.tag.err{background:rgba(239,68,68,.14); color:var(--err)}
.tag.proc{background:var(--surface-2); color:var(--muted)}
.seeall{display:inline-block; margin-top:16px; color:var(--accent); font-size:12.5px; font-weight:700; transition:opacity .15s}
.seeall:hover{opacity:.75}

/* دکمهٔ «مشاهدهٔ ادامه» */
.clamp{position:relative}
.clamp.collapsed{max-height:13.5em; overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,#000 68%,transparent);
  mask-image:linear-gradient(to bottom,#000 68%,transparent)}
.seemore{margin-top:11px; background:none; border:none; color:var(--accent); font-family:inherit;
  font-size:12.5px; font-weight:700; cursor:pointer; padding:4px 0}
.seemore:hover{text-decoration:underline}

/* ---------- جدول مدیریت ---------- */
.tbl-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--radius)}
table.admin{width:100%; border-collapse:separate; border-spacing:0 4px; font-size:12.5px; min-width:640px}
table.admin th,table.admin td{padding:11px 10px; text-align:start; white-space:nowrap}
table.admin thead th{color:var(--muted); font-weight:700; font-size:11.5px}
table.admin tbody tr{background:var(--surface-2)}
table.admin tbody td:first-child{border-radius:0 var(--radius-xs) var(--radius-xs) 0}
table.admin tbody td:last-child{border-radius:var(--radius-xs) 0 0 var(--radius-xs)}
table.admin input{width:74px; padding:7px 9px; border:none; border-radius:var(--radius-xs);
  font-size:12.5px; background:var(--surface-3); color:var(--ink); text-align:center}
table.admin input:focus{outline:2px solid var(--accent-line); outline-offset:0}
table.admin .uname{font-weight:700}
.pill{font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:99px; background:var(--accent-soft); color:var(--accent)}
.lim-form{display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.lim-form label{font-size:12.5px; color:var(--muted)}
.lim-form input{width:90px; padding:9px 11px; border:none; border-radius:var(--radius-xs); background:var(--surface-2); color:var(--ink); text-align:center}
.lim-form input:focus{outline:2px solid var(--accent-line); outline-offset:0}

/* ---------- مودال احراز هویت ---------- */
.modal-back{position:fixed; inset:0; background:var(--modal-back); display:none;
  align-items:center; justify-content:center; padding:18px; z-index:60;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px)}
.modal-back.show{display:flex; animation:nq-fade .2s ease both}
.modal{background:var(--surface); border-radius:20px; width:100%; max-width:374px; padding:30px 26px;
  animation:nq-pop .32s cubic-bezier(.22,.61,.36,1) both}
.modal .logo{display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:9px}
.modal .logo svg{width:36px; height:36px}
.modal .logo .brand-name{font-size:22px}
.modal .tag-line{text-align:center; color:var(--muted); font-size:12.5px; font-weight:400; margin-bottom:22px}
.tabs{display:flex; background:var(--surface-2); border-radius:var(--radius-sm); padding:4px; margin-bottom:16px}
.tabs button{flex:1; padding:10px; border:none; background:none; border-radius:var(--radius-xs); cursor:pointer; font-size:13px; font-weight:700; color:var(--muted); transition:.15s}
.tabs button.active{background:var(--surface); color:var(--ink)}
.field{margin-bottom:13px}
.field input{width:100%; padding:13px 14px; border:none; border-radius:var(--radius-sm); font-size:13.5px; background:var(--surface-2); color:var(--ink); transition:outline .15s}
.field input:focus{outline:2px solid var(--accent-line); outline-offset:0}
.field input::placeholder{color:var(--faint)}
.modal .btn{width:100%; padding:13px}
.modal .err{color:var(--err); font-size:12.5px; min-height:18px; margin-bottom:8px; font-weight:500}

/* ---------- OTP ---------- */
.otp-hint{text-align:center; font-size:12.5px; color:var(--muted); margin-bottom:15px; background:var(--surface-2); border-radius:var(--radius-xs); padding:10px 13px; line-height:1.6}
.otp-resend{text-align:center; margin-top:15px; font-size:12px; color:var(--muted)}
.link-btn{background:none; border:none; color:var(--accent); font-size:12px; cursor:pointer; padding:0 2px; font-weight:700; text-decoration:underline; font-family:inherit}
.link-btn:disabled{color:var(--faint); cursor:not-allowed; text-decoration:none}

/* ---------- فوتر ---------- */
.site-footer{background:var(--bg-2); padding:38px 18px 28px; margin-top:52px; position:relative}
.site-footer::before{content:""; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--line) 18%,var(--line) 82%,transparent)}
.foot-in{max-width:960px; margin:0 auto; display:flex; align-items:flex-start; justify-content:space-between; gap:30px; flex-wrap:wrap}
.foot-brand{max-width:310px}
.foot-brand .brand{margin-bottom:12px}
.foot-slogan{color:var(--muted); font-size:12.5px; font-weight:400; line-height:1.9}
.foot-nav{display:flex; gap:48px; flex-wrap:wrap}
.foot-col h4{font-size:11px; font-weight:800; color:var(--faint); letter-spacing:.4px; margin-bottom:12px}
.foot-col a{display:block; color:var(--muted); font-size:12.5px; font-weight:500; padding:5px 0; transition:color .15s}
.foot-col a:hover{color:var(--accent)}
.foot-bottom{max-width:960px; margin:28px auto 0; padding-top:20px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; color:var(--faint); font-size:11.5px; font-weight:400; position:relative}
.foot-bottom::before{content:""; position:absolute; top:0; left:0; right:0; height:1px; background:var(--line); opacity:.6}
.foot-enamad{display:flex;align-items:center}
.foot-enamad img{width:80px; height:auto; cursor:pointer; display:block}
.foot-bottom a{color:var(--muted); font-weight:700; transition:color .15s}
.foot-bottom a:hover{color:var(--accent)}
@media (max-width:560px){
  .foot-in{justify-content:center; gap:24px}
  .foot-nav{gap:36px}
  .foot-enamad{justify-content:center; width:100%}
  .foot-enamad img{width:72px}
  .foot-bottom{justify-content:center; text-align:center}
}

/* ---------- نوتیف / اسپینر ---------- */
.toast{position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(70px);
  background:var(--ink); color:var(--bg); padding:11px 19px; border-radius:var(--radius-xs);
  font-size:12.5px; font-weight:600; opacity:0; transition:.28s cubic-bezier(.22,.61,.36,1); z-index:80}
.toast.show{transform:translateX(-50%) translateY(0); opacity:1}
.spinner{width:13px; height:13px; border:2px solid var(--surface-3); border-top-color:var(--accent);
  border-radius:50%; animation:nq-spin .75s linear infinite; display:inline-block; vertical-align:-2px}
</content>