/* =========================================================
   نقطه — سیستم طراحی
   استارتاپی، مینیمال، تخت | بدون سایه، بدون حاشیهٔ تزئینی
   ---------------------------------------------------------
   سبز برند  #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);
}

/* ANIM-DISABLED */
#nq-bg { display: none !important; }
/* END-ANIM-DISABLED */

/* ============================================================
   پس‌زمینهٔ انیمیشنیِ سراسری — اوربِ پراکندهٔ کوچک / پرانرژی (v2)
   تزریق‌شده با JS به‌صورتِ #nq-bg روی همهٔ صفحات
   ============================================================ */
#nq-bg{position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; contain:layout paint}
#nq-bg .nq-orb{position:absolute; border-radius:50%; opacity:.32; mix-blend-mode:normal; will-change:transform; transform:translate3d(0,0,0); backface-visibility:hidden; contain:layout paint; filter:blur(34px)}
html[data-theme="light"] #nq-bg .nq-orb{opacity:.20; filter:blur(40px)}
/* ۱۲ اورب کوچک — پراکنده در سراسر ویوپورت */
#nq-bg .o1 {width:16vmax; height:16vmax; top:4%;   left:8%;
  background:radial-gradient(circle, var(--accent) 0%, transparent 55%);
  animation:nq-orb1  18s ease-in-out infinite}
#nq-bg .o2 {width:18vmax; height:18vmax; top:18%;  right:6%;
  background:radial-gradient(circle, var(--accent-2) 0%, transparent 55%);
  animation:nq-orb2  22s ease-in-out infinite}
#nq-bg .o3 {width:14vmax; height:14vmax; top:52%;  left:18%;
  background:radial-gradient(circle, var(--accent-strong) 0%, transparent 55%);
  animation:nq-orb3  16s ease-in-out infinite}
#nq-bg .o4 {width:19vmax; height:19vmax; bottom:8%; right:22%;
  background:radial-gradient(circle, var(--accent) 0%, transparent 55%);
  animation:nq-orb4  26s ease-in-out infinite}
#nq-bg .o5 {width:15vmax; height:15vmax; top:38%;  right:4%;
  background:radial-gradient(circle, var(--accent-2) 0%, transparent 55%);
  animation:nq-orb5  20s ease-in-out infinite}
#nq-bg .o6 {width:17vmax; height:17vmax; top:72%;  left:4%;
  background:radial-gradient(circle, var(--accent) 0%, transparent 55%);
  animation:nq-orb6  24s ease-in-out infinite}
#nq-bg .o7 {width:13vmax; height:13vmax; top:12%;  left:44%;
  background:radial-gradient(circle, var(--accent-2) 0%, transparent 55%);
  animation:nq-orb7  14s ease-in-out infinite}
#nq-bg .o8 {width:20vmax; height:20vmax; bottom:22%; left:38%;
  background:radial-gradient(circle, var(--accent-strong) 0%, transparent 55%);
  animation:nq-orb8  28s ease-in-out infinite}
#nq-bg .o9 {width:15vmax; height:15vmax; top:62%;  right:12%;
  background:radial-gradient(circle, var(--accent) 0%, transparent 55%);
  animation:nq-orb9  18s ease-in-out infinite}
#nq-bg .o10{width:16vmax; height:16vmax; top:82%;  right:42%;
  background:radial-gradient(circle, var(--accent-2) 0%, transparent 55%);
  animation:nq-orb10 22s ease-in-out infinite}
#nq-bg .o11{width:14vmax; height:14vmax; top:28%;  left:62%;
  background:radial-gradient(circle, var(--accent) 0%, transparent 55%);
  animation:nq-orb11  16s ease-in-out infinite}
#nq-bg .o12{width:17vmax; height:17vmax; top:2%;   right:52%;
  background:radial-gradient(circle, var(--accent-strong) 0%, transparent 55%);
  animation:nq-orb12 30s ease-in-out infinite}
@keyframes nq-orb1{
  0%  {transform:translate3d(0,0,0)}
  20% {transform:translate3d(9vmax,14vmax,0)}
  50% {transform:translate3d(-7vmax,22vmax,0)}
  75% {transform:translate3d(15vmax,-9vmax,0)}
  100%{transform:translate3d(0,0,0)}}
@keyframes nq-orb2{
  0%  {transform:translate3d(0,0,0)}
  30% {transform:translate3d(-14vmax,11vmax,0)}
  60% {transform:translate3d(10vmax,-16vmax,0)}
  100%{transform:translate3d(0,0,0)}}
@keyframes nq-orb3{
  0%  {transform:translate3d(0,0,0)}
  20% {transform:translate3d(17vmax,-12vmax,0)}
  50% {transform:translate3d(-9vmax,14vmax,0)}
  75% {transform:translate3d(11vmax,20vmax,0)}
  100%{transform:translate3d(0,0,0)}}
@keyframes nq-orb4{
  0%  {transform:translate3d(0,0,0)}
  35% {transform:translate3d(-12vmax,-20vmax,0)}
  70% {transform:translate3d(16vmax,-10vmax,0)}
  100%{transform:translate3d(0,0,0)}}
@keyframes nq-orb5{
  0%  {transform:translate3d(0,0,0)}
  25% {transform:translate3d(-17vmax,13vmax,0)}
  55% {transform:translate3d(11vmax,22vmax,0)}
  80% {transform:translate3d(-9vmax,-13vmax,0)}
  100%{transform:translate3d(0,0,0)}}
@keyframes nq-orb6{
  0%  {transform:translate3d(0,0,0)}
  30% {transform:translate3d(20vmax,-14vmax,0)}
  65% {transform:translate3d(-7vmax,18vmax,0)}
  100%{transform:translate3d(0,0,0)}}
@keyframes nq-orb7{
  0%  {transform:translate3d(0,0,0)}
  40% {transform:translate3d(-13vmax,19vmax,0)}
  80% {transform:translate3d(18vmax,-11vmax,0)}
  100%{transform:translate3d(0,0,0)}}
@keyframes nq-orb8{
  0%  {transform:translate3d(0,0,0)}
  25% {transform:translate3d(11vmax,-22vmax,0)}
  50% {transform:translate3d(-18vmax,9vmax,0)}
  75% {transform:translate3d(9vmax,17vmax,0)}
  100%{transform:translate3d(0,0,0)}}
@keyframes nq-orb9{
  0%  {transform:translate3d(0,0,0)}
  33% {transform:translate3d(-16vmax,-15vmax,0)}
  66% {transform:translate3d(14vmax,11vmax,0)}
  100%{transform:translate3d(0,0,0)}}
@keyframes nq-orb10{
  0%  {transform:translate3d(0,0,0)}
  30% {transform:translate3d(18vmax,-11vmax,0)}
  60% {transform:translate3d(-12vmax,20vmax,0)}
  100%{transform:translate3d(0,0,0)}}
@keyframes nq-orb11{
  0%  {transform:translate3d(0,0,0)}
  45% {transform:translate3d(-20vmax,14vmax,0)}
  90% {transform:translate3d(12vmax,-18vmax,0)}
  100%{transform:translate3d(0,0,0)}}
@keyframes nq-orb12{
  0%  {transform:translate3d(0,0,0)}
  20% {transform:translate3d(13vmax,20vmax,0)}
  50% {transform:translate3d(-15vmax,-12vmax,0)}
  80% {transform:translate3d(9vmax,14vmax,0)}
  100%{transform:translate3d(0,0,0)}}
@media (prefers-reduced-motion:reduce){
  #nq-bg .nq-orb{animation:none !important}
}
/* فقط ۳ اوربِ بزرگ و پخش‌شده فعال است تا اسکرول روی همهٔ دستگاه‌ها روان بماند */
#nq-bg .o2,#nq-bg .o3,#nq-bg .o4,#nq-bg .o6,#nq-bg .o7,#nq-bg .o9,#nq-bg .o10,#nq-bg .o11,#nq-bg .o12{display:none}
#nq-bg .o1{width:36vmax; height:36vmax}
#nq-bg .o5{width:32vmax; height:32vmax}
#nq-bg .o8{width:42vmax; height:42vmax}
@media (max-width:760px){
  #nq-bg .nq-orb{filter:blur(30px)}
  #nq-bg .o1{width:60vmax; height:60vmax}
  #nq-bg .o5{width:54vmax; height:54vmax}
  #nq-bg .o8{width:66vmax; height:66vmax}
}

*{box-sizing:border-box; margin:0; padding:0}
/* ریشهٔ اسکرول باید «ویوپورت» باشد، نه یک عنصرِ با ارتفاعِ ثابت.
   ریشهٔ پرشِ موبایل: هر عنصری (body یا html) که همزمان height:100% و
   overflow (hidden/auto) داشته باشد، به یک کانتینرِ اسکرول با ارتفاعِ ثابتِ
   ویوپورت تبدیل می‌شود؛ در موبایل با باز/بسته‌شدنِ نوارِ آدرس ارتفاعِ ویوپورت
   عوض می‌شود، ارتفاعِ آن عنصر بازمحاسبه و موقعیتِ اسکرول به بالای صفحه «پرش» می‌کند.
   راهکارِ ریشه‌ای: روی html هیچ height:100% نگذاریم؛ overflow-x:hidden روی html
   به‌خودیِ‌خود به ویوپورت پراپاگیت می‌شود و کلیپِ افقی را بدونِ ساختنِ کانتینرِ
   اسکرولِ با ارتفاعِ ثابت انجام می‌دهد. اسکرول به‌صورتِ بومی روی ویوپورت می‌ماند
   (هم بدونِ پرش، هم روی مسیرِ سریعِ کامپوزیت → روان). جای‌گیریِ فوتر هم با
   min-height روی .wrap تأمین می‌شود، پس body نیازی به ارتفاع ندارد. */
html{overflow-x:hidden}
/* توجه: overscroll-behavior-y:none حذف شد.
   این خط pull-to-refreshِ کروم را خاموش می‌کرد و دقیقاً از همان زمان پرشِ موبایل
   شروع شده بود. با حذف آن، رفتارِ بومی و سالمِ اسکرول (بدونِ پرش به بالا) برمی‌گردد.
   عوارض: کشیدن به پایین در بالای صفحه دوباره صفحه را رفرش می‌کند. */
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;
}
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 به پایین هل می‌داد و «پرش»
   ایجاد می‌کرد. راهکار: تا آماده‌شدنِ کاملِ صفحه (هدر/فوتر/فونت) یک
   پری‌لودرِ ساده و سازگار با تم روی صفحه است و چیدمانِ زیرین را
   می‌پوشاند؛ سپس سریع محو می‌شود و صفحهٔ نهایی بدونِ هیچ پرشی
   نمایان می‌شود. پری‌لودر با pseudo-element روی <html> ساخته شده تا
   پیش از اولین رنگ‌آمیزی موجود باشد (بدون نیاز به دستکاریِ DOM).
   nq-boot را theme-init.js پیش از رنگ‌آمیزی می‌افزاید و app.js
   (revealApp) پس از آماده‌شدن ابتدا nq-ready را برای محو اضافه و
   سپس nq-boot را پاک می‌کند.
   ============================================================ */
html.nq-boot body{overflow:hidden}
/* پوششِ تمام‌صفحه با رنگِ پس‌زمینهٔ تم — بدون سایه */
html.nq-boot::before{content:""; position:fixed; inset:0; background:var(--bg);
  z-index:9999; opacity:1; transition:opacity .3s ease; pointer-events:none}
/* اسپینرِ سادهٔ وسطِ صفحه — سازگار با تم، بدون سایه */
html.nq-boot::after{content:""; position:fixed; top:calc(50% - 60px); left:50%;
  width:76px; height:76px; transform:translateX(-50%);
  background:url('/static/favicon.svg') center/contain no-repeat;
  animation:nq-pl-pulse 1.6s ease-in-out infinite;
  z-index:10000; opacity:1; transition:opacity .3s ease; pointer-events:none}
/* نام ویسیتو زیرِ لوگو */
html.nq-boot body::before{content:"ویسیتو";
  position:fixed; top:calc(50% + 26px); left:50%; transform:translateX(-50%);
  font-family:'YekanBakh',system-ui,sans-serif; font-size:23px; font-weight:800;
  color:var(--text); z-index:10001; opacity:1; transition:opacity .3s ease; pointer-events:none;
  animation:nq-pl-pulse 1.6s ease-in-out infinite; white-space:nowrap}
@keyframes nq-pl-pulse{0%,100%{opacity:1;transform:translateX(-50%) scale(1)}50%{opacity:0.65;transform:translateX(-50%) scale(0.96)}}
/* پس از آماده‌شدن: محوِ سریعِ پری‌لودر */
html.nq-boot.nq-ready::before,html.nq-boot.nq-ready::after,html.nq-boot.nq-ready body::before{opacity:0; visibility:hidden}
@media (prefers-reduced-motion:reduce){
  html.nq-boot::after,html.nq-boot body::before{animation:none}
  html.nq-boot::before,html.nq-boot::after,html.nq-boot body::before{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:820px; margin:0 auto; padding:30px 18px 70px; min-height:calc(100dvh - 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:clamp(26px,4.8vw,38px); font-weight:800; letter-spacing:-.7px; line-height:1.4; margin-bottom:11px; text-wrap:balance; min-height:3.2em}
.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:clamp(16px,5.2vw,22px); line-height:1.4; letter-spacing:-.3px} }

/* ---------- هدر ---------- */
.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)}
/* ---------- dropdown حساب کاربری (دسکتاپ) ---------- */
.acct-wrap{position:relative; display:inline-flex; align-items:center}
.acct-drop{position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%);
  min-width:176px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:8px; z-index:500;
  box-shadow:0 8px 28px rgba(0,0,0,.22);
  opacity:0; visibility:hidden; transform:translateX(-50%) translateY(-6px);
  transition:opacity .18s ease, visibility .18s ease, transform .18s ease;
  pointer-events:none; white-space:nowrap}
.acct-drop.open{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); pointer-events:auto}
.acct-drop-name{font-size:12px; font-weight:600; color:var(--muted); padding:6px 10px 8px;
  border-bottom:1px solid var(--line); margin-bottom:5px}
.acct-drop-link{display:block; padding:9px 10px; border-radius:var(--radius-xs);
  font-size:13px; font-weight:500; color:var(--ink); text-decoration:none;
  transition:background .15s}
.acct-drop-link:hover{background:var(--surface-2)}
.acct-drop-out{display:block; width:100%; padding:9px 10px; border-radius:var(--radius-xs);
  border:none; background:transparent; color:var(--ink); font-family:inherit;
  font-size:13px; font-weight:500; cursor:pointer; text-align:right;
  transition:background .15s}
.acct-drop-out:hover{background:var(--surface-2); color:var(--err)}
@media (max-width:680px){ .acct-drop{display:none !important} }


.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}
.agree-row{display:flex; align-items:flex-start; gap:8px; margin:2px 0 13px; cursor:pointer; user-select:none}
.agree-row input[type=checkbox]{flex-shrink:0; width:17px; height:17px; margin-top:2px; accent-color:var(--accent); cursor:pointer}
.agree-row span{font-size:12px; color:var(--muted); line-height:1.7}
.agree-row a{color:var(--accent); font-weight:700; text-decoration:none}
.agree-row a:hover{text-decoration:underline}

/* ---------- 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-contact{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.foot-contact-item{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:12.5px;font-weight:500;text-decoration:none;transition:color .15s;line-height:1.5}
.foot-contact-item svg{flex-shrink:0;color:var(--faint)}
a.foot-contact-item: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}

/* انتخابگر زبان داخل controls */
.lang-sel{font-family:inherit;font-size:12px;font-weight:500;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:5px 9px;cursor:pointer;transition:border-color .15s;direction:rtl;flex:1;min-width:0;text-align:center;text-align-last:center}
.lang-sel:focus{border-color:var(--accent-line);outline:none}
.lang-sel:hover{border-color:var(--accent-line)}
.fname-drop{margin-top:8px;font-size:12px;color:var(--accent);font-weight:600;display:none}
.fname-drop:not(:empty){display:block}

/* ===================== اطلاعیهٔ پاپ‌آپِ سایت ===================== */
.nq-ann-overlay{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;
  padding:20px;background:var(--modal-back);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease}
.nq-ann-overlay.open{opacity:1;visibility:visible}
.nq-ann-box{position:relative;width:100%;max-width:430px;max-height:calc(100vh - 40px);overflow:hidden;
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 24px 70px rgba(0,0,0,.45);transform:translateY(14px) scale(.98);transition:transform .25s ease}
.nq-ann-overlay.open .nq-ann-box{transform:translateY(0) scale(1)}
/* نوارِ بالایی: همان رنگِ نوارِ پایینی */
.nq-ann-head{display:flex;align-items:center;justify-content:flex-start;padding:4px 8px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.nq-ann-close{position:static;width:30px;height:30px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;
  border-radius:50%;background:var(--surface-3);color:var(--muted);padding:0;transition:background .15s,color .15s}
.nq-ann-close svg{width:15px;height:15px}
.nq-ann-close:hover{background:var(--err-soft,rgba(220,38,38,.12));color:var(--err,#dc2626)}
/* ناحیهٔ محتوا: رنگِ اصلیِ باکس */
.nq-ann-row{display:flex;align-items:flex-start;gap:14px;padding:18px;background:var(--surface);overflow:auto;max-height:calc(100vh - 160px)}
.nq-ann-img{flex:none;display:block;width:96px;height:96px;aspect-ratio:1/1;object-fit:cover;border-radius:12px}
.nq-ann-content{flex:1 1 auto;min-width:0;padding:0}
.nq-ann-body{color:var(--ink);font-size:13.5px;line-height:1.85;font-weight:400;white-space:normal;word-break:break-word}
.nq-ann-body a{color:var(--accent);font-weight:700;text-decoration:underline}
.nq-ann-cta{display:block;text-align:center;margin-top:14px;text-decoration:none;font-weight:700;
  font-size:14px;padding:11px 16px;border-radius:var(--radius-sm);color:#08131F;
  background:var(--grad-2);box-shadow:0 8px 22px var(--accent-soft)}
.nq-ann-cta:hover{filter:brightness(1.04)}
/* نوارِ پایینی: همان رنگِ نوارِ بالایی */
.nq-ann-timer{padding:6px 18px 7px;text-align:center;color:var(--muted);font-size:12px;font-weight:600;background:var(--surface-2);border-top:1px solid var(--line)}
.nq-ann-timer b{color:var(--accent);font-weight:800;font-size:13.5px}
@media(max-width:400px){.nq-ann-img{width:80px;height:80px}.nq-ann-row{gap:10px;padding:14px}}

/* ===================== دکمهٔ نصبِ اپ (PWA) ===================== */
.nq-pwa-install{position:fixed;inset-inline-start:16px;bottom:16px;z-index:1500;
  display:inline-flex;align-items:center;gap:8px;padding:10px 12px 10px 14px;
  border:none;cursor:pointer;border-radius:999px;font-family:inherit;font-size:13px;font-weight:700;
  color:#08131F;background:var(--grad-2);box-shadow:0 10px 28px var(--accent-soft);
  transform:translateY(24px);opacity:0;transition:transform .3s cubic-bezier(.22,.61,.36,1),opacity .3s}
.nq-pwa-install.show{transform:translateY(0);opacity:1}
.nq-pwa-install:hover{filter:brightness(1.05)}
.nq-pwa-install svg{flex-shrink:0}
.nq-pwa-install .nq-pwa-x{font-style:normal;font-size:17px;line-height:1;margin-inline-start:2px;
  width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:rgba(8,19,31,.14);transition:background .15s}
.nq-pwa-install .nq-pwa-x:hover{background:rgba(8,19,31,.28)}
@media(max-width:560px){.nq-pwa-install{inset-inline-start:12px;bottom:12px;font-size:12.5px}}

/* ---------- پنجرهٔ اشتراک‌گذاریِ لینکِ عمومی ---------- */
.nq-share-overlay{position:fixed;inset:0;z-index:2100;display:flex;align-items:center;justify-content:center;
  padding:20px;background:var(--modal-back);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s ease}
.nq-share-overlay.open{opacity:1;visibility:visible}
.nq-share-box{position:relative;width:100%;max-width:440px;background:var(--surface);
  border:1px solid var(--line);border-radius:18px;padding:24px 22px 22px;
  box-shadow:0 24px 70px rgba(0,0,0,.45);transform:translateY(14px) scale(.98);transition:transform .22s ease}
.nq-share-overlay.open .nq-share-box{transform:translateY(0) scale(1)}
.nq-share-close{position:absolute;inset-inline-end:14px;top:14px;width:30px;height:30px;border:none;
  background:transparent;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  border-radius:8px;padding:0;transition:background .15s,color .15s}
.nq-share-close:hover{background:var(--surface-2);color:var(--ink)}
.nq-share-close svg{width:18px;height:18px}
.nq-share-title{font-size:16px;font-weight:800;color:var(--ink);margin:0 0 8px;padding-inline-end:34px}
.nq-share-desc{font-size:12.5px;color:var(--muted);line-height:1.95;margin:0 0 16px}
.nq-share-linkrow{display:flex;gap:8px;margin:0 0 14px}
.nq-share-input{flex:1;min-width:0;font-size:13px;color:var(--ink);background:var(--surface-2);
  border:1px solid var(--line);border-radius:10px;padding:10px 12px;direction:ltr;text-align:left;font-family:inherit}
.nq-share-copy{flex-shrink:0;background:var(--accent);color:#fff;font-weight:800;font-size:13px;font-family:inherit;
  border:none;border-radius:10px;padding:0 18px;cursor:pointer;transition:opacity .15s}
.nq-share-copy:hover{opacity:.9}
.nq-share-acts{display:flex;gap:9px;flex-wrap:wrap}
.nq-share-chan{flex:1;min-width:96px;text-align:center;font-size:12.5px;font-weight:700;text-decoration:none;
  color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:10px 8px;
  transition:background .15s,border-color .15s}
.nq-share-chan:hover{background:var(--surface-3)}
.nq-share-chan.open{color:var(--accent)}