/* ═══════════════════════════════════════════════════════════
   BrandPix — زبان بصری مشترک وب‌اپ
   همان مادهٔ شیشه‌ای لندینگ، این‌بار برای یک اپلیکیشن.
   قاعده‌ها: شیشه فقط لایهٔ ناوبری و کنترل · هرگز شیشه روی شیشه ·
   محتوا روی سطح مات · تصویر همیشه مقدم بر گرادیان.
   ═══════════════════════════════════════════════════════════ */

/* ═══════════  فونت  ═══════════ */
@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}
@font-face{font-family:Vazirmatn;src:url("../fonts/Vazirmatn-Black.woff2") format("woff2");font-weight:900;font-display:swap}

/* ═══════════  توکن‌ها  ═══════════ */
:root{
  color-scheme:dark;
  --bg:#0a0910;
  --bg-2:#12111a;
  --bg-3:#171622;
  --ink:#f4f2f8;
  --ink-2:#a9a3b9;
  --ink-3:#726c85;
  --line:#ffffff14;
  --line-2:#ffffff26;
  --surface:#ffffff08;
  --surface-2:#ffffff0f;
  --tint:#7c5cff;
  --tint-2:#a68cff;
  --tint-soft:#7c5cff2b;
  --ok:#4ade80;
  --warn:#fbbf24;
  --bad:#fb7185;
  --ok-soft:#4ade8024;
  --warn-soft:#fbbf2424;
  --bad-soft:#fb718524;

  /* مادهٔ شیشه */
  --g-fill:#ffffff0d;
  --g-blur:12px;
  --g-sat:185%;
  --g-bright:1.05;
  --g-rim:#ffffff8f;
  --g-rim-2:#ffffff1a;
  --g-shadow:0 26px 54px -22px #000000c9, 0 3px 12px -5px #00000085;
  --g-inner:inset 0 1px 0 #ffffff2b, inset 0 -1px 0 #00000026;

  /* ریتم */
  --gutter:clamp(1rem,3.4vw,2rem);
  --rail:248px;
  --topbar:64px;
  --gap:clamp(.7rem,1.4vw,1.05rem);
  --fs-body:clamp(.9rem,.88rem + .15vw,.97rem);
  --fs-h1:clamp(1.45rem,1.2rem + 1.1vw,2.05rem);
  --fs-h2:clamp(1.12rem,1rem + .5vw,1.4rem);
  --fs-h3:clamp(.97rem,.94rem + .18vw,1.06rem);
  --r-pill:999px;
  --r-lg:clamp(18px,2vw,24px);
  --r-md:clamp(13px,1.5vw,17px);
  --r-sm:10px;
}
:root[data-theme=light]{
  color-scheme:light;
  --bg:#f4f2f8;
  --bg-2:#ffffff;
  --bg-3:#faf9fc;
  --ink:#141120;
  --ink-2:#4d4762;
  --ink-3:#7b7490;
  --line:#0e0a1a17;
  --line-2:#0e0a1a29;
  --surface:#0e0a1a08;
  --surface-2:#0e0a1a0f;
  --g-fill:#ffffff5c;
  --g-rim:#ffffffe0;
  --g-rim-2:#0e0a1a14;
  --g-bright:1.02;
  --g-shadow:0 26px 50px -24px #2a233d3d, 0 3px 10px -5px #2a233d29;
  --g-inner:inset 0 1px 0 #ffffffa8, inset 0 -1px 0 #0e0a1a0f;
  --tint-2:#5b39e0;
  --ok:#16a34a;--warn:#b45309;--bad:#e11d48;
  --ok-soft:#16a34a1f;--warn-soft:#b453091f;--bad-soft:#e11d481f;
}

*,*::before,*::after{box-sizing:border-box}
/* هر `display` که در شیوه‌نامه نوشته شود، بر `[hidden]`ِ مرورگر می‌چربد —
   و آن‌وقت `el.hidden = true` در جاوااسکریپت هیچ کاری نمی‌کند. «تعداد
   خروجی» روی ویدیو دقیقاً به همین دلیل پنهان نمی‌شد. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:400 var(--fs-body)/1.8 Vazirmatn,system-ui,Tahoma,sans-serif;
  text-rendering:optimizeLegibility;min-height:100dvh;
}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;line-height:1.3;letter-spacing:-.018em;font-weight:900;text-wrap:balance}
h1{font-size:var(--fs-h1)}h2{font-size:var(--fs-h2)}h3{font-size:var(--fs-h3);font-weight:700}
p{margin:0;text-wrap:pretty}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--tint-2);outline-offset:3px;border-radius:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-track{background:#0000}

/* اعداد فارسی فقط جایی که خوانده می‌شوند، نه در ورودی‌ها */
.fa-num{font-feature-settings:"ss01";font-variant-numeric:tabular-nums}
/* a latin run (phone, hex, uuid) inside a Persian sentence has to be isolated,
   otherwise bidi reordering drags its punctuation to the wrong end */
input,textarea,code{direction:ltr;text-align:start}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
input[type=text],input[type=tel],input[type=password]{unicode-bidi:plaintext}

/* ═══════════  محیط: چیزی که شیشه از آن رنگ می‌گیرد  ═══════════
   لایهٔ تصویری تار پشت همه‌چیز. اگر کاربر خروجی دارد، از خروجی‌های
   خودش ساخته می‌شود؛ وگرنه از پالت برند. هیچ‌وقت گرادیان خالی. */
.ambient{position:fixed;inset:-20vmax;z-index:-2;pointer-events:none;overflow:hidden}
.ambient .amb-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr}
.ambient img{width:100%;height:100%;object-fit:cover;filter:blur(90px) saturate(1.85);opacity:.4}
:root[data-theme=light] .ambient img{opacity:.26;filter:blur(100px) saturate(1.5) brightness(1.3)}
.ambient::after{content:"";position:absolute;inset:0;
  background:radial-gradient(130% 90% at 50% 0%,#0000 18%,var(--bg) 78%)}
.ambient .amb-tint{position:absolute;inset:0;opacity:.5;
  background:radial-gradient(60% 50% at 85% 0%,var(--amb-1,#7c5cff40),#0000 70%),
             radial-gradient(55% 45% at 10% 20%,var(--amb-2,#0a84c936),#0000 70%)}

/* ═══════════  مادهٔ شیشه  ═══════════ */
.glass{
  position:relative;isolation:isolate;
  background:var(--g-fill);
  -webkit-backdrop-filter:blur(calc(var(--g-blur) + 4px)) saturate(var(--g-sat)) brightness(var(--g-bright));
  backdrop-filter:blur(calc(var(--g-blur) + 4px)) saturate(var(--g-sat)) brightness(var(--g-bright));
  box-shadow:var(--g-shadow),var(--g-inner);
  transition:box-shadow .45s cubic-bezier(.32,.72,0,1),background .45s,color .35s,
             scale .28s cubic-bezier(.32,.72,0,1);
}
@supports (backdrop-filter:url(#lens)){
  .glass{backdrop-filter:url(#lens) blur(var(--g-blur)) saturate(var(--g-sat)) brightness(var(--g-bright))}
  .glass--thick{backdrop-filter:url(#lensThick) blur(calc(var(--g-blur) + 4px)) saturate(200%) brightness(var(--g-bright))}
}
.glass::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.4px;
  background:linear-gradient(var(--rim-a,145deg),var(--g-rim),var(--g-rim-2) 30%,#0000 50%,var(--g-rim-2) 70%,var(--g-rim));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;pointer-events:none;z-index:3;
}
.glass::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,-20%),#ffffff30,#0000 62%);
  opacity:var(--glow,.5);transition:opacity .4s;
}
.glass:hover{--glow:.9}
.glass>*{position:relative;z-index:4}

/* ═══════════  دکمه‌ها  ═══════════ */
.btn{
  border:0;font-weight:700;font-size:.87rem;cursor:pointer;border-radius:var(--r-pill);
  padding:.55rem 1.1rem;display:inline-flex;align-items:center;justify-content:center;gap:.42rem;
  white-space:nowrap;text-align:center;
  transition:scale .22s cubic-bezier(.32,.72,0,1),background .25s,box-shadow .3s,color .25s,opacity .25s;
}
.btn:active{scale:.96}
.btn[disabled],.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed}
.btn[disabled]:active{scale:1}
.btn-ghost{background:var(--surface-2);color:var(--ink)}
.btn-ghost:hover{background:var(--line-2)}
.btn-line{background:#0000;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.btn-line:hover{background:var(--surface-2)}
.btn-tint{background:linear-gradient(#8f70ff,#6b46ff);color:#fff;
  box-shadow:0 10px 24px -10px #7c5cffb8,inset 0 1px 0 #ffffff59}
.btn-tint:hover{box-shadow:0 14px 30px -10px #7c5cffdb,inset 0 1px 0 #ffffff70}
.btn-bad{background:var(--bad-soft);color:var(--bad)}
.btn-bad:hover{background:var(--bad);color:#fff}
.btn-sm{padding:.35rem .75rem;font-size:.78rem}
.btn-lg{padding:.75rem 1.5rem;font-size:.96rem}
.btn-block{width:100%}
.icon-btn{width:36px;height:36px;padding:0;flex:none}
.btn svg{width:15px;height:15px;flex:none}
/* بعد از .btn svg می‌آید وگرنه با همان ویژگی‌مندی بازنده است و آیکن
   دکمه‌های تک‌آیکنی کوچک‌تر از اندازهٔ طراحی‌شده در می‌آید */
.icon-btn svg{width:17px;height:17px}

/* ═══════════  پوستهٔ اپ  ═══════════ */
.shell{min-height:100dvh;padding-inline-start:var(--rail);padding-block:calc(var(--topbar) + 14px) 3rem}
.page{width:min(1280px,100% - var(--gutter)*2);margin-inline:auto}
.page-wide{width:calc(100% - var(--gutter)*2);margin-inline:auto;max-width:1680px}

/* ═══════════  منوی کناری  ═══════════
   نام هر بخش نوشته می‌شود، چون آیکن تنها فقط برای کسی خواناست که قبلاً
   جایش را بلد بوده. در حالت جمع‌شده برچسب شناور جای نوشته را می‌گیرد. */
.side{
  position:fixed;inset-block:12px;inset-inline-start:12px;width:calc(var(--rail) - 24px);z-index:70;
  border-radius:var(--r-lg);display:flex;flex-direction:column;gap:.5rem;padding:.85rem .6rem .7rem;
  transition:width .32s cubic-bezier(.32,.72,0,1);
}
.side-top{display:flex;align-items:center;gap:.55rem;padding-inline:.3rem;min-height:38px}
.side-logo{display:flex;align-items:center;gap:.55rem;font-weight:900;font-size:1rem;letter-spacing:-.02em;
  min-width:0;overflow:hidden}
/* The mark carries its own gradient, so the tile it used to sit in would
   only be a second one behind it. */
.mark{width:34px;height:34px;flex:none;object-fit:contain;display:block}
.side-logo .mark{filter:drop-shadow(0 6px 14px #7c5cff5c)}
.side-toggle{width:28px;height:28px;flex:none;border:0;border-radius:9px;background:#0000;cursor:pointer;
  color:var(--ink-3);display:grid;place-items:center;margin-inline-start:auto;transition:background .2s,color .2s}
.side-toggle:hover{background:var(--surface-2);color:var(--ink)}
.side-toggle svg{width:15px;height:15px;transition:rotate .3s cubic-bezier(.32,.72,0,1)}

.side-nav{display:flex;flex-direction:column;gap:.1rem;overflow-y:auto;overflow-x:hidden;
  scrollbar-width:none;margin-inline:-.1rem;padding-inline:.1rem}
.side-nav::-webkit-scrollbar{display:none}
.side-label{font-size:.68rem;font-weight:700;color:var(--ink-3);letter-spacing:.06em;
  padding:.75rem .7rem .3rem;white-space:nowrap}

.side-item{position:relative;display:flex;align-items:center;gap:.65rem;height:40px;padding-inline:.65rem;
  border-radius:12px;color:var(--ink-2);font-size:.87rem;font-weight:600;white-space:nowrap;
  transition:background .2s,color .2s}
.side-item svg{width:19px;height:19px;flex:none}
.side-item span{overflow:hidden;text-overflow:ellipsis}
.side-item:hover{background:var(--surface-2);color:var(--ink)}
.side-item[aria-current=page]{background:var(--tint-soft);color:var(--tint-2)}
.side-item[aria-current=page]::before{content:"";position:absolute;inset-inline-start:-6px;inset-block:11px;
  width:3px;border-radius:9px;background:var(--tint-2)}
/* برچسب شناور فقط وقتی نوشته پنهان است */
.side-item b{display:none;position:absolute;inset-inline-start:calc(100% + 14px);white-space:nowrap;
  font-size:.79rem;font-weight:600;padding:.32rem .62rem;border-radius:9px;background:var(--bg-2);color:var(--ink);
  box-shadow:0 8px 20px -8px #000000a8,inset 0 0 0 1px var(--line);
  opacity:0;translate:-6px 0;pointer-events:none;transition:opacity .2s,translate .2s;z-index:9}

/* ── حالت جمع‌شده: فقط آیکن ──
   هر سلکتور با `.side` شروع می‌شود. همین کلاس‌ها در شیت موبایل هم به کار
   می‌روند و بدون این قید، جمع‌شدنِ منوی کناری متن آیتم‌های شیت را هم
   پنهان می‌کرد — یعنی روی موبایل فهرستی از آیکن‌های بی‌نام. */
:root[data-side=mini]{--rail:84px}
:root[data-side=mini] .side .side-logo b,
:root[data-side=mini] .side .side-item span,
:root[data-side=mini] .side .side-label{display:none}
:root[data-side=mini] .side .side-top{justify-content:center}
:root[data-side=mini] .side .side-toggle{position:absolute;inset-block-start:.5rem;inset-inline-end:.4rem;
  width:22px;height:22px;opacity:0;transition:opacity .2s}
:root[data-side=mini] .side:hover .side-toggle{opacity:1}
:root[data-side=mini] .side .side-toggle svg{rotate:180deg}
:root[data-side=mini] .side .side-item{justify-content:center;padding-inline:0}
:root[data-side=mini] .side .side-item b{display:block}
:root[data-side=mini] .side .side-item:hover b{opacity:1;translate:0 0}
:root[data-side=mini] .side .side-nav{align-items:center}

/* ═══════════  نوار بالا  ═══════════
   عنوان صفحه، جست‌وجو و کنترل‌های زمینه. فضای میانی با کاری پر می‌شود
   که واقعاً لازم است، نه با هیچ. */
.topbar{
  position:fixed;inset-block-start:12px;inset-inline:var(--rail) 12px;z-index:65;
  height:calc(var(--topbar) - 12px);border-radius:var(--r-pill);
  display:flex;align-items:center;gap:.7rem;padding:0 .45rem 0 .9rem;
}
/* وقتی محتوا زیر نوار می‌رود، شیشه ضخیم می‌شود.
   یک نوار نیمه‌شفاف روی عکس محصولِ روشن، متنش را گم می‌کند؛ این تنها
   راهی است که بدون خواندن پیکسل‌ها همیشه خوانا می‌ماند. */
.topbar.scrolled{
  --g-fill:#100e1ce0;--g-blur:20px;
  box-shadow:0 18px 40px -22px #000000cc,var(--g-inner);
}
:root[data-theme=light] .topbar.scrolled{--g-fill:#fffffff0}
.tb-title{min-width:0;display:flex;flex-direction:column;justify-content:center;
  padding-inline-start:.55rem;flex:0 1 auto}
.tb-title b{font-weight:900;font-size:1.12rem;letter-spacing:-.02em;line-height:1.3;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root[data-theme=light] .tb-title b{color:#0b0813}
/* زیرعنوان باید خوانده شود، نه اینکه فقط آن‌جا باشد؛ ink-3 برای متنی که
   کنار یک تیتر سفید می‌نشیند بیش از حد کم‌رنگ بود */
.tb-title span{font-size:.76rem;font-weight:500;color:var(--ink-2);line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.tb-act{display:flex;align-items:center;gap:.4rem;margin-inline-start:auto;flex:none}
.tb-menu{flex:none;margin-inline-end:.1rem}

/* اعتبار و حساب، گوشهٔ نوار
   از پای منوی کناری به این‌جا آمدند تا روی دسکتاپ و موبایل یک جا داشته
   باشند. هر دو یک قالب دارند: کاشی گرد آیکن، دو خط نوشته، یک نشانه در انتها. */
.tb-credit,.tb-user>button{display:inline-flex;align-items:center;gap:.45rem;height:36px;padding-block:0;
  border:0;border-radius:var(--r-pill);background:var(--surface-2);color:var(--ink);font-family:inherit;
  white-space:nowrap;cursor:pointer;transition:background .2s}
.tb-credit{padding-inline:.25rem .45rem}
.tb-user>button{padding-inline:.25rem .5rem}
.tb-credit:hover,.tb-user>button:hover,.tb-user>button[aria-expanded=true]{background:var(--line-2)}
.tb-credit .tc-ico,.tb-user .tu-face{width:28px;height:28px;border-radius:50%;flex:none;
  display:grid;place-items:center}
.tb-credit .tc-ico{background:var(--tint-soft);color:var(--tint-2)}
.tb-user .tu-face{background:var(--line-2);color:var(--ink-2)}
.tb-credit .tc-ico svg,.tb-user .tu-face svg{width:15px;height:15px}
.tb-credit .tc-txt,.tb-user .tu-name{display:flex;flex-direction:column;justify-content:center;
  min-width:0;line-height:1.25;text-align:start}
.tb-credit .tc-txt span,.tb-user .tu-name span{font-size:.62rem;font-weight:500;color:var(--ink-3)}
.tb-credit .tc-txt b{font-size:.86rem;font-weight:900;letter-spacing:-.01em}
.tb-user .tu-name b{font-size:.78rem;font-weight:700;max-width:9rem;overflow:hidden;text-overflow:ellipsis}
.tb-credit .tc-go{width:20px;height:20px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--tint);color:#fff}
.tb-credit .tc-go svg{width:12px;height:12px}
.tb-credit.low .tc-ico{background:var(--warn-soft);color:var(--warn)}
.tb-credit.low .tc-txt b{color:var(--warn)}
.tb-user{position:relative}
.tb-user .tu-caret{display:grid;flex:none;color:var(--ink-3)}
.tb-user .tu-caret svg{width:14px;height:14px}
/* نام روی خود دکمه هست؛ داخل منو فقط وقتی دکمه به آواتار جمع شده */
.tb-user .tu-who{display:none}
.only-mobile{display:none}

.menu{position:absolute;inset-block-start:calc(100% + 8px);inset-inline-end:0;min-width:230px;
  border-radius:var(--r-md);padding:.35rem;display:none;flex-direction:column;gap:.1rem;z-index:80}
.menu.open{display:flex}
.menu a,.menu button{display:flex;align-items:center;gap:.55rem;padding:.5rem .65rem;border-radius:10px;
  font-size:.85rem;font-weight:500;color:var(--ink-2);border:0;background:#0000;cursor:pointer;
  width:100%;text-align:start;transition:background .18s,color .18s}
.menu a svg,.menu button svg{width:15px;height:15px;flex:none}
.menu a:hover,.menu button:hover{background:var(--surface-2);color:var(--ink)}
.menu hr{border:0;border-top:1px solid var(--line);margin:.3rem .2rem}
.menu .mi-note{font-size:.72rem;color:var(--ink-3);padding:.3rem .65rem}

/* A menu is a reading surface, and the glass default is 5% white. The top
   bar can afford refraction because nothing is read through it; a list of
   brand names cannot — dropped over a gallery of photographs, the lens and
   the transparency turned every label to mush. So the panel keeps the rim
   and loses the see-through. */
.menu.glass{--g-fill:#141221f7;--g-blur:22px;--g-sat:120%;--g-bright:1;
  -webkit-backdrop-filter:blur(22px) saturate(120%);backdrop-filter:blur(22px) saturate(120%)}
@supports (backdrop-filter:url(#lens)){
  .menu.glass{-webkit-backdrop-filter:blur(22px) saturate(120%);backdrop-filter:blur(22px) saturate(120%)}
}
:root[data-theme=light] .menu.glass{--g-fill:#fffffff7}
.menu a,.menu button{color:var(--ink)}
.menu .mi-note{color:var(--ink-2)}

/* داک موبایل */
/* centred with physical properties on purpose: inset-inline:50% would set
   both edges and collapse the bar to nothing, and a logical offset flips with
   the writing direction while a translate percentage does not */
.dock{display:none;position:fixed;inset-block-end:max(10px,env(safe-area-inset-bottom));
  left:50%;translate:-50% 0;z-index:70;border-radius:var(--r-pill);padding:.35rem;gap:.1rem;align-items:center;
  --g-fill:#100e1ce6;--g-blur:20px}
:root[data-theme=light] .dock{--g-fill:#fffffff2}
.dock a,.dock button{width:46px;height:44px;border-radius:14px;display:grid;place-items:center;gap:2px;
  color:var(--ink-3);font-size:.6rem;font-weight:600;border:0;background:#0000;cursor:pointer;
  font-family:inherit;transition:background .2s,color .2s}
.dock a svg,.dock button svg{width:19px;height:19px}
.dock a[aria-current=page]{background:var(--tint-soft);color:var(--tint-2)}
.dock a.dock-hot{background:linear-gradient(#8f70ff,#6b46ff);color:#fff;
  box-shadow:0 8px 20px -8px #7c5cffcc}

/* ═══════════  سطوح محتوا (مات — نه شیشه)  ═══════════ */
.card{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1rem,2vw,1.35rem)}
.card-flat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:1rem}
.card-pad-0{padding:0;overflow:hidden}
.card h2,.card h3{margin-bottom:.2rem}
.muted{color:var(--ink-2)}
.dim{color:var(--ink-3);font-size:.8rem}

/* ستون کناری که با اسکرول می‌ماند — چند صفحه از آن استفاده می‌کنند,
   پس جایش این‌جاست نه داخل استایل یک صفحه */
.st-sticky{position:sticky;top:calc(var(--topbar) + 16px);max-height:calc(100dvh - var(--topbar) - 40px);
  overflow-y:auto;scrollbar-width:thin;padding-inline-end:2px}
@media (max-width:900px){.st-sticky{position:static;max-height:none}}

.head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-bottom:clamp(.9rem,2vw,1.3rem)}
.head p{color:var(--ink-2);font-size:.87rem;margin-top:.25rem}
.kicker{font-size:.74rem;font-weight:700;color:var(--tint-2);letter-spacing:.04em;margin-bottom:.35rem}

.grid{display:grid;gap:var(--gap)}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-auto{grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr))}
.row{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}
.row-tight{gap:.3rem}
.spread{display:flex;align-items:center;justify-content:space-between;gap:.8rem}
.stack{display:grid;gap:var(--gap)}
.stack-sm{display:grid;gap:.5rem}

/* ═══════════  چیپ و برچسب  ═══════════ */
.chip{display:inline-flex;align-items:center;gap:.35rem;font-size:.76rem;font-weight:600;color:var(--ink-2);
  background:var(--surface-2);padding:.28rem .65rem;border-radius:var(--r-pill);white-space:nowrap}
.chip svg{width:13px;height:13px}
.chip-tint{background:var(--tint-soft);color:var(--tint-2)}
.chip-ok{background:var(--ok-soft);color:var(--ok)}
.chip-warn{background:var(--warn-soft);color:var(--warn)}
.chip-bad{background:var(--bad-soft);color:var(--bad)}
.chip i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.chip-live i{animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.3}}
.sw{width:13px;height:13px;border-radius:4px;flex:none;box-shadow:inset 0 0 0 1px #ffffff2b}

/* ═══════════  فرم  ═══════════ */
.field{display:grid;gap:.35rem}
.field>label{font-size:.8rem;font-weight:600;color:var(--ink-2)}
.field .hint{font-size:.74rem;color:var(--ink-3)}
.inp{
  width:100%;padding:.62rem .85rem;border-radius:var(--r-sm);background:var(--surface);
  border:1px solid var(--line-2);color:var(--ink);transition:border-color .2s,background .2s;
  font-size:.9rem;
}
.inp:focus{outline:0;border-color:var(--tint-2);background:var(--surface-2)}
.inp::placeholder{color:var(--ink-3)}
textarea.inp{resize:vertical;min-height:5rem;line-height:1.9}
/* یک شِوِرونِ کم‌رنگِ تنها، در نگاه اول از یک کادر متن قابل تشخیص نبود.
   حالا پیکان داخل یک مربعِ روشن می‌نشیند تا از دور هم پیدا باشد که این
   فهرست باز می‌شود. */
select.inp{cursor:pointer;appearance:none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cfc9e0' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"),
    linear-gradient(var(--surface-2),var(--surface-2));
  background-repeat:no-repeat;
  background-position:left .5rem center, left .28rem center;
  background-size:15px, 1.65rem calc(100% - .56rem);
  padding-inline-end:.85rem;padding-inline-start:2.3rem}
select.inp:hover{border-color:var(--line-2)}
:root[data-theme=light] select.inp{background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d5670' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"),
  linear-gradient(#efecf6,#efecf6)}

/* ── آکاردئون ──
   نشانگرِ پیش‌فرضِ مرورگر یک مثلث ریز است که در RTL گوشهٔ راست گم می‌شود؛
   کسی نمی‌فهمید زیر این خط چیزی هست. حالا هر «summary» یک شِوِرون گرد و
   قابل دیدن دارد که با باز شدن می‌چرخد. */
details>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.5rem}
details>summary::-webkit-details-marker{display:none}
details>summary::after{content:"";flex:none;margin-inline-start:auto;width:1.35rem;height:1.35rem;
  border-radius:8px;background:var(--surface-2);border:1px solid var(--line);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cfc9e0' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:12px;
  transition:rotate .25s,background-color .2s}
:root[data-theme=light] details>summary::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d5670' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
details>summary:hover::after{border-color:var(--line-2)}
details[open]>summary::after{rotate:180deg}
.err{color:var(--bad);font-size:.76rem;margin-top:.2rem}
.inp[aria-invalid=true]{border-color:var(--bad)}

/* لغزنده */
.slider{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:9px;
  background:var(--line-2);cursor:pointer}
.slider::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;border-radius:50%;
  background:#fff;box-shadow:0 2px 8px -2px #000000a8,0 0 0 1px #0003;cursor:grab}
.slider::-moz-range-thumb{width:17px;height:17px;border:0;border-radius:50%;background:#fff;
  box-shadow:0 2px 8px -2px #000000a8}

/* سگمنت (انتخاب بین چند حالت) */
.seg{display:inline-flex;gap:.2rem;padding:.25rem;border-radius:var(--r-pill);background:var(--surface);
  border:1px solid var(--line);overflow-x:auto;scrollbar-width:none;max-width:100%}
.seg::-webkit-scrollbar{display:none}
.seg button,.seg label{border:0;background:#0000;color:var(--ink-2);font-size:.8rem;font-weight:600;
  padding:.35rem .8rem;border-radius:var(--r-pill);cursor:pointer;white-space:nowrap;transition:background .2s,color .2s}
.seg button:hover,.seg label:hover{color:var(--ink)}
.seg button[aria-pressed=true],.seg input:checked+label{background:var(--surface-2);color:var(--ink)}
.seg input{position:absolute;opacity:0;pointer-events:none}
:root[data-theme=light] .seg button[aria-pressed=true],:root[data-theme=light] .seg input:checked+label{background:#fff;box-shadow:0 1px 4px -1px #2a233d29}

/* چک‌باکس */
.check{display:flex;gap:.6rem;align-items:flex-start;cursor:pointer;font-size:.84rem;color:var(--ink-2)}
.check input{appearance:none;width:19px;height:19px;flex:none;margin:.16rem 0 0;border-radius:6px;
  border:1.5px solid var(--line-2);background:var(--surface);cursor:pointer;transition:background .2s,border-color .2s}
.check input:checked{background:var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat;
  border-color:var(--tint)}

/* ═══════════  کارت خروجی  ═══════════
   همان نسبت و همان رفتارِ کاشیِ ابزار: ۳:۴، بلند شدن روی هاور، و هاله.

   عکس و ویدیوی خروجی داخل یک <a> می‌نشینند، پس قاعده نمی‌توانست `.tile>img`
   بماند — با آن هیچ خروجی‌ای cover نمی‌شد: عکسِ افقی می‌چسبید بالای کارت و
   زیرش یک نوارِ خالی می‌ماند، و عکسِ عمودی از پایین بریده می‌شد. */
.tile{position:relative;margin:0;border-radius:var(--r-md);overflow:hidden;background:var(--bg-3);
  aspect-ratio:3/4;border:1px solid var(--line);isolation:isolate;
  transition:translate .3s cubic-bezier(.32,.72,0,1),border-color .3s,box-shadow .3s}
.tile>a{display:block;width:100%;height:100%}
.tile img,.tile video{width:100%;height:100%;object-fit:cover;
  transition:scale .75s cubic-bezier(.32,.72,0,1)}
.tile:hover{translate:0 -4px;border-color:var(--tint);
  box-shadow:0 20px 40px -24px var(--tint),0 4px 14px -8px #000000a6}
.tile:hover img,.tile:hover video{scale:1.07}
.tile-acts{position:absolute;inset-block-start:.45rem;inset-inline-end:.45rem;display:flex;gap:.25rem;
  opacity:0;translate:0 -4px;transition:opacity .25s,translate .25s;z-index:5}
.tile:hover .tile-acts,.tile:focus-within .tile-acts{opacity:1;translate:0 0}
.tile-acts button,.tile-acts a{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;
  border:0;cursor:pointer;color:#fff;background:#0e0a1a8f;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background .2s,scale .2s}
.tile-acts button:hover,.tile-acts a:hover{background:#0e0a1ad9;scale:1.06}
.tile-acts svg{width:15px;height:15px}
.tile.is-fav .tile-acts{opacity:1;translate:0 0}
.tile-badge{position:absolute;inset-block-start:.45rem;inset-inline-start:.45rem;z-index:5;
  font-size:.68rem;font-weight:700;padding:.2rem .5rem;border-radius:var(--r-pill);
  background:#0e0a1ab3;color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* حالت در حال ساخت */
.tile-run{display:grid;place-items:center;gap:.5rem;padding:1rem;text-align:center;
  background:linear-gradient(150deg,var(--bg-3),var(--bg-2))}
/* چرخنده هرجای صفحه — دکمه‌های ajax و صفحهٔ ابزار هم از همین استفاده
   می‌کنند، پس قاعده نباید داخل .tile-run حبس بماند */
.spin{display:inline-block;width:26px;height:26px;border-radius:50%;border:2.5px solid var(--line-2);
  border-top-color:var(--tint-2);animation:spin .8s linear infinite;vertical-align:middle}
@keyframes spin{to{rotate:1turn}}
.tile-run p{font-size:.76rem;color:var(--ink-2)}
.tile-run .bar{width:70%;height:3px;border-radius:9px;background:var(--line-2);overflow:hidden}
.tile-run .bar i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,var(--tint),var(--tint-2));
  transition:width .6s cubic-bezier(.32,.72,0,1)}

/* اسکلت بارگذاری */
.skel{background:linear-gradient(100deg,var(--surface) 30%,var(--surface-2) 50%,var(--surface) 70%);
  background-size:220% 100%;animation:sweep 1.5s linear infinite;border-radius:var(--r-md)}
@keyframes sweep{to{background-position:-220% 0}}

/* ═══════════  حالت خالی  ═══════════ */
.empty{text-align:center;padding:clamp(2rem,6vw,3.4rem) 1.2rem;display:grid;gap:.55rem;justify-items:center}
.empty .ico{width:52px;height:52px;border-radius:17px;display:grid;place-items:center;
  background:var(--tint-soft);color:var(--tint-2);margin-bottom:.3rem}
.empty .ico svg{width:24px;height:24px}
.empty h3{font-size:1.02rem}
.empty p{color:var(--ink-2);font-size:.86rem;max-width:30rem}

/* ═══════════  اعلان‌ها  ═══════════ */
.note{display:flex;gap:.6rem;align-items:flex-start;padding:.75rem .95rem;border-radius:var(--r-md);
  font-size:.84rem;line-height:1.75}
.note svg{width:17px;height:17px;flex:none;margin-top:.22rem}
.note-ok{background:var(--ok-soft);color:var(--ok)}
.note-warn{background:var(--warn-soft);color:var(--warn)}
.note-bad{background:var(--bad-soft);color:var(--bad)}
.note-info{background:var(--tint-soft);color:var(--tint-2)}
.note b{font-weight:700}

/* توست شناور */
.toasts{position:fixed;inset-block-end:calc(env(safe-area-inset-bottom) + 1rem);inset-inline-start:1rem;
  z-index:200;display:grid;gap:.5rem;max-width:min(24rem,calc(100vw - 2rem))}
.toast{border-radius:var(--r-md);padding:.7rem 1rem;font-size:.85rem;font-weight:600;
  animation:toastIn .4s cubic-bezier(.32,.72,0,1)}
@keyframes toastIn{from{opacity:0;translate:0 12px}}

/* ═══════════  مودال  ═══════════ */
.scrim{position:fixed;inset:0;z-index:150;background:#00000080;opacity:0;pointer-events:none;
  transition:opacity .3s;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.scrim.on{opacity:1;pointer-events:auto}
:root[data-theme=light] .scrim{background:#2a233d4d}
/* مرکز کردن با خواص فیزیکی. `inset-inline-start:50%` در RTL یعنی right:50%
   و translateِ منفی مودال را باز هم به چپ می‌برد، یعنی بیرون صفحه. درصدِ
   translate فیزیکی است و با جهت نوشتار برنمی‌گردد، پس مبدأ هم باید فیزیکی باشد. */
.modal{position:fixed;z-index:160;top:50%;left:50%;translate:-50% -50%;
  width:min(30rem,calc(100vw - 2rem));max-height:min(85dvh,44rem);overflow:auto;border-radius:var(--r-lg);
  padding:clamp(1.2rem,3vw,1.7rem);display:none;background:var(--bg-2);border:1px solid var(--line);
  box-shadow:0 40px 90px -30px #000000c4}
.modal.open{display:block;animation:modalIn .35s cubic-bezier(.32,.72,0,1)}
@keyframes modalIn{from{opacity:0;translate:-50% -46%;scale:.97}}
.modal h2{margin-bottom:.4rem}
.modal-wide{width:min(52rem,calc(100vw - 2rem))}

/* ═══════════  انتخاب از «عکس‌های من»  ═══════════
   یک پنجره برای همهٔ جاهایی که عکس می‌خواهند. سر و پا ثابت‌اند و فقط
   شبکهٔ عکس‌ها اسکرول می‌شود، وگرنه دکمهٔ «انتخاب» زیر صدتا عکس گم می‌شد. */
.modal.imgpick{width:min(46rem,calc(100vw - 2rem));overflow:hidden}
.modal.imgpick.open{display:flex;flex-direction:column;gap:.9rem}
.imgpick-head{display:flex;align-items:center;gap:.5rem}
.imgpick-head>div{flex:1;min-width:0}
.imgpick-head h2{margin-bottom:.1rem}
.imgpick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,118px),1fr));gap:.5rem;
  overflow-y:auto;min-height:0;padding:.15rem;margin:-.15rem}
.imgpick-tile{position:relative;aspect-ratio:1;padding:0;border:2px solid transparent;border-radius:var(--r-sm);
  overflow:hidden;background:var(--bg-3);cursor:pointer;transition:border-color .2s,scale .2s cubic-bezier(.32,.72,0,1)}
.imgpick-tile img{width:100%;height:100%;object-fit:cover}
.imgpick-tile:hover{border-color:var(--line-2)}
.imgpick-tile:active{scale:.97}
.imgpick-tile.on{border-color:var(--tint-2)}
.imgpick-tile i{position:absolute;inset-block-start:.35rem;inset-inline-end:.35rem;width:22px;height:22px;
  border-radius:50%;border:2px solid #fff;background:#0a091066;box-shadow:0 2px 6px #00000059;display:none}
.imgpick.multi .imgpick-tile i{display:block}
.imgpick-tile.on i{background:var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.6' stroke-linecap='round'%3E%3Cpath d='m5 13 4 4 10-10'/%3E%3C/svg%3E") center/12px no-repeat}
.imgpick-foot{display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  padding-top:.8rem;border-top:1px solid var(--line)}
.imgpick .empty{padding:1.6rem 1rem}
@media (max-width:620px){.imgpick-head .btn-sm span{display:none}}

/* ═══════════  شیت پایینی موبایل  ═══════════
   داک جا برای پنج مقصد دارد و محصول ده‌تا دارد؛ بقیه این‌جا کامل و
   دسته‌بندی‌شده می‌آیند، نه در یک فهرست بی‌سر و ته. */
.modal.sheet{
  top:auto;bottom:0;left:0;right:0;translate:none;
  width:100%;max-width:none;max-height:86dvh;border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:.7rem 1rem calc(1.1rem + env(safe-area-inset-bottom));
}
.modal.sheet.open{animation:sheetIn .34s cubic-bezier(.32,.72,0,1)}
@keyframes sheetIn{from{translate:0 100%}}
.sheet-grab{width:40px;height:4px;border-radius:9px;background:var(--line-2);margin:0 auto .8rem}
.sheet-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem}
.sheet-grid .side-item{height:46px}
.sheet .side-label{padding:.9rem .2rem .35rem}
.sheet .side-item svg{flex:none}

/* ═══════════  جدول  ═══════════ */
.tbl{width:100%;border-collapse:collapse;font-size:.85rem}
.tbl th{text-align:start;font-weight:600;color:var(--ink-3);font-size:.76rem;padding:.5rem .7rem;
  border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:.7rem;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl .num{font-weight:700;font-variant-numeric:tabular-nums}
.tbl .pos{color:var(--ok)}.tbl .neg{color:var(--ink-2)}
.scroll-x{overflow-x:auto;scrollbar-width:thin}

/* ═══════════  تب  ═══════════ */
.tabs{display:flex;gap:.15rem;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;
  margin-bottom:var(--gap)}
.tabs::-webkit-scrollbar{display:none}
.tabs button,.tabs a{border:0;background:#0000;color:var(--ink-3);font-size:.86rem;font-weight:600;
  padding:.6rem .85rem;cursor:pointer;white-space:nowrap;border-bottom:2px solid #0000;
  transition:color .2s,border-color .2s;margin-bottom:-1px}
.tabs button:hover,.tabs a:hover{color:var(--ink)}
.tabs [aria-selected=true],.tabs [aria-current=page]{color:var(--ink);border-bottom-color:var(--tint-2)}

/* ═══════════  نوار پیشرفت  ═══════════ */
.meter{height:6px;border-radius:9px;background:var(--line-2);overflow:hidden}
.meter i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,var(--tint),var(--tint-2));
  transition:width .7s cubic-bezier(.32,.72,0,1)}
.meter.ok i{background:linear-gradient(90deg,#22c55e,#4ade80)}
.meter.warn i{background:linear-gradient(90deg,#d97706,#fbbf24)}

/* ═══════════  ناحیهٔ آپلود  ═══════════ */
.drop{border:1.5px dashed var(--line-2);border-radius:var(--r-md);padding:1.5rem 1rem;text-align:center;
  cursor:pointer;transition:border-color .25s,background .25s;display:grid;gap:.45rem;justify-items:center}
.drop:hover,.drop.over{border-color:var(--tint-2);background:var(--tint-soft)}
.drop svg{width:24px;height:24px;color:var(--ink-3)}
.drop b{font-size:.86rem}
.drop span{font-size:.76rem;color:var(--ink-3)}

/* ═══════════  ریسپانسیو  ═══════════ */
/* بین ۹۸۰ و ۱۲۴۰ منو خودش جمع می‌شود؛ زیر ۹۸۰ جایش را به داک می‌دهد */
@media (max-width:1240px){
  :root:not([data-side=full]){--rail:84px}
  :root[data-side=full]{--rail:248px}
  :root:not([data-side=full]) .side .side-logo b,
  :root:not([data-side=full]) .side .side-item span,
  :root:not([data-side=full]) .side .side-label{display:none}
  :root:not([data-side=full]) .side .side-top{justify-content:center}
  :root:not([data-side=full]) .side .side-item{justify-content:center;padding-inline:0}
  :root:not([data-side=full]) .side .side-item b{display:block}
  :root:not([data-side=full]) .side .side-item:hover b{opacity:1;translate:0 0}
  :root:not([data-side=full]) .side .side-toggle{position:absolute;inset-block-start:.5rem;
    inset-inline-end:.4rem;width:22px;height:22px;opacity:0}
  :root:not([data-side=full]) .side:hover .side-toggle{opacity:1}
  :root:not([data-side=full]) .side .side-toggle svg{rotate:180deg}
}
@media (max-width:980px){
  /* `:root:not([data-side=full])` در بریک‌پوینت ۱۲۴۰ از `:root` تنها
     ویژگی‌مندی بیشتری دارد، پس اگر این‌جا هم به همان شکل نوشته نشود،
     --rail روی موبایل ۸۴ می‌ماند و کل محتوا ۸۴ پیکسل از لبه فاصله
     می‌گیرد — چیزی که به‌شکل «تراز نبودن» دیده می‌شود. */
  :root,:root:not([data-side=full]),:root[data-side=mini],:root[data-side=full]{--rail:0px}
  .side{display:none}
  .topbar{inset-inline:10px;padding-inline:.4rem .4rem}
  /* شیت کلید تم را دارد؛ تکرارش در نوار بالا فقط جا می‌گیرد و عنوان صفحه
     را با سه‌نقطه خرد می‌کند */
  .tb-act>[data-theme-toggle]{display:none}
  /* حالت خالی روی موبایل نباید یک صفحهٔ کامل ارتفاع بگیرد */
  .empty{padding:clamp(1.4rem,5vw,2.2rem) 1rem;gap:.45rem}
  .only-mobile{display:inline-flex}
  /* اعتبار و حساب روی موبایل هم در نوار می‌مانند، فشرده: اعتبار بدون برچسب،
     حساب فقط آواتار — و نامش بالای منوی خودش می‌آید */
  .tb-credit .tc-txt span,.tb-user .tu-name,.tb-user .tu-caret{display:none}
  .tb-user>button{padding-inline:.25rem}
  .tb-user .tu-who{display:block}
  .dock{display:flex}
  .shell{padding-block-end:6.5rem}
  .g-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .g-2,.g-3,.g-4{grid-template-columns:minmax(0,1fr)}
  .g-auto{grid-template-columns:repeat(auto-fill,minmax(min(100%,140px),1fr))}
  /* عنوان دو خطی کنار یک دکمه، دکمه را وسط هوا رها می‌کند؛ روی صفحهٔ
     باریک زیر عنوان می‌نشیند و با آن هم‌تراز می‌شود */
  .head{flex-direction:column;align-items:stretch;gap:.7rem}
  .head>*:last-child{align-self:flex-start}
  /* روی صفحهٔ باریک عنوان صفحه حق تقدم دارد: هرچه کنارش است جمع می‌شود
     تا تیتر جا بماند، نه برعکس */
  .tb-title{flex:1 1 auto}
  .tb-title span{display:none}
  .tb-title b{font-size:.92rem}
  .tb-act{gap:.3rem}
  /* روی ۳۲۰ پیکسل کاشی و دکمهٔ «+» اعتبار عنوان را تا یک حرف خرد می‌کردند،
     پس کنار می‌روند */
  .tb-credit{gap:.3rem;padding-inline:.35rem .55rem}
  .tb-credit .tc-go{display:none}
  .tb-credit .tc-ico,.tb-credit.low .tc-ico{width:auto;height:auto;background:none}
  .tb-credit .tc-ico svg{width:16px;height:16px}
  .tb-credit .tc-txt b{font-size:.82rem}
}

/* ═══════════  دسترس‌پذیری  ═══════════ */
@media (prefers-reduced-transparency:reduce){
  .glass{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:#17151f}
  :root[data-theme=light] .glass{background:#fff}
  .glass::after{display:none}
}
@media (prefers-contrast:more){
  :root{--ink-2:#dad6e4;--ink-3:#b6b1c6;--line:#ffffff45;--line-2:#ffffff5c;--g-rim:#ffffffc4;--g-fill:#ffffff21}
  :root[data-theme=light]{--ink-2:#2a2540;--ink-3:#3d3754;--line:#0e0a1a52;--g-fill:#ffffffd6}
  .glass::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ═══════════  تأیید پیش از خرج‌شدن اعتبار  ═══════════
   هیچ ساختی بی‌خبر شروع نمی‌شود: چه چیزی، با چه تنظیماتی، به چه قیمتی،
   و بعدش چقدر اعتبار می‌ماند — همه پیش از دکمهٔ آخر. */
/* تأیید پیش از ساخت */
.confirm-grid{display:flex;gap:1rem;align-items:flex-start}
.confirm-art{flex:none;margin:0;width:11rem}
.confirm-art img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-sm);border:1px solid var(--line)}
.confirm-list{flex:1;min-width:0;margin:0;display:grid;grid-template-columns:auto 1fr;gap:.4rem .9rem;
  font-size:.84rem}
.confirm-list dt{color:var(--ink-3)}
.confirm-list dd{margin:0;font-weight:600;color:var(--ink)}
.confirm-price{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin-block-start:1rem;
  padding-block-start:.8rem;border-block-start:1px solid var(--line);font-size:.85rem;color:var(--ink-2)}
.confirm-price b{font-size:1.05rem;color:var(--ink)}
.confirm-price .dim{margin-inline-start:auto;font-size:.78rem}
@media (max-width:560px){.confirm-grid{flex-direction:column}.confirm-art{width:100%}}

/* ═══════════  نمونه‌ها  ═══════════
   کاشیِ نمونه، کارِ فروش را می‌کند: کسی سبک را از روی اسمش انتخاب نمی‌کند،
   از روی تصویرش انتخاب می‌کند. پس تصویر باید دیده شود — نه زیر یک رمپِ
   سیاهِ تمام‌قد — و باید بشود بزرگش کرد. */

/* ذره‌بینِ گوشهٔ کاشی: تا وقتی موس نیامده پیدا نیست، و روی لمس همیشه هست. */
.peek-btn{position:absolute;inset-block-start:.35rem;inset-inline-start:.35rem;z-index:3;
  width:26px;height:26px;flex:none;display:grid;place-items:center;padding:0;
  border:1px solid #ffffff2e;border-radius:9px;background:#0a0910a6;color:#fff;cursor:pointer;
  backdrop-filter:blur(6px);opacity:0;translate:0 -3px;transition:opacity .22s,translate .22s,background .2s}
.peek-btn svg{width:13px;height:13px}
.peek-btn:hover{background:#0a0910d9}
[data-peek]:hover .peek-btn,[data-peek]:focus-within .peek-btn{opacity:1;translate:0 0}
@media (hover:none){.peek-btn{opacity:1;translate:0 0}}
/* اگر ذره‌بین سمت شروع باشد، روی نشانِ اندازه می‌افتد؛ آن کاشی‌ها خودشان
   نشانِ خود را جابه‌جا می‌کنند. */
.style .peek-btn{inset-inline-start:auto;inset-inline-end:.35rem;inset-block-start:auto;inset-block-end:.35rem}
.style[aria-pressed=true] .peek-btn{background:#0a0910d9}

/* تصویرِ تمام‌قد */
.peek{position:fixed;inset:0;z-index:220;display:none;place-items:center;padding:clamp(1rem,4vw,2.5rem);
  background:#07060cd6;backdrop-filter:blur(14px) saturate(120%)}
.peek.on{display:grid;animation:peekIn .28s cubic-bezier(.32,.72,0,1)}
@keyframes peekIn{from{opacity:0}to{opacity:1}}
.peek figure{margin:0;display:grid;gap:.9rem;justify-items:center;max-width:min(60rem,100%);
  animation:peekUp .34s cubic-bezier(.32,.72,0,1)}
@keyframes peekUp{from{scale:.94;translate:0 10px}to{scale:1;translate:0 0}}
.peek img{max-width:100%;max-height:min(74dvh,46rem);width:auto;border-radius:var(--r-lg);
  box-shadow:0 30px 80px -30px #000,0 0 0 1px #ffffff1a;background:var(--bg-3)}
.peek figcaption{text-align:center;color:#fff;max-width:34rem}
.peek figcaption b{display:block;font-size:1.05rem;font-weight:800}
.peek figcaption span{display:block;margin-block-start:.3rem;font-size:.85rem;line-height:1.9;color:#ffffffb0}
.peek-x{position:absolute;inset-block-start:1rem;inset-inline-end:1rem;width:38px;height:38px;
  display:grid;place-items:center;border:1px solid #ffffff26;border-radius:12px;
  background:#ffffff14;color:#fff;cursor:pointer}
.peek-x svg{width:16px;height:16px}
.peek-x:hover{background:#ffffff24}

/* ═══ کاشیِ ابزار / افکت / دکمهٔ اکشن ═══
   یک کاشی، سه جا: ردیف نبض، شبکهٔ ابزارها، فید افکت‌ها. چون در سه صفحه
   دیده می‌شود، قاعده‌اش این‌جاست نه داخل یکی از آن صفحه‌ها.

   کارت یک چیز است، نه دو مستطیلِ روی هم. قبلاً عکسِ مربع بالا می‌نشست و زیرش
   یک نوارِ مات فقط نام و قیمت را نگه می‌داشت و وسطش خالی می‌ماند — همان نوار
   بود که کاشی را ارزان نشان می‌داد. حالا عنوان می‌رود روی خودِ تصویر، همان
   کاری که کاشی‌های نبض و نوار نمونه‌ها از اول می‌کردند. ۳:۴ اتفاقی نیست:
   همان ارتفاعی است که کارتِ قبلی با نوارش داشت، پس ردیف جابه‌جا نمی‌شود. */
/* ترتیبِ قیمت: کلیدِ سه‌حالتهٔ کنارِ تیترِ بخش. کارش در bp.js — sortCards.
   flex:none لازم است چون .head فلکسِ wrap است و بدون آن کلید روی موبایل
   فشرده می‌شد و سه کلمه روی هم می‌افتاد. */
.sortby{display:inline-flex;gap:.15rem;padding:.2rem;flex:none;
  border-radius:var(--r-pill);background:var(--surface-2);border:1px solid var(--line-2)}
.sortby button{font:inherit;font-size:.74rem;font-weight:700;color:var(--ink-3);
  background:none;border:0;cursor:pointer;white-space:nowrap;
  padding:.34rem .62rem;border-radius:var(--r-pill);
  transition:background .2s,color .2s}
.sortby button:hover{color:var(--ink)}
.sortby button.on{background:var(--bg-3);color:var(--ink);box-shadow:0 1px 5px -2px #00000099}

.tgrid{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(158px,1fr))}
.tcard{position:relative;display:block;border-radius:var(--r-md);overflow:hidden;
  background:var(--bg-3);border:1px solid var(--line);
  transition:translate .3s cubic-bezier(.32,.72,0,1),border-color .3s,box-shadow .3s}
.tcard .art{aspect-ratio:3/4;display:block;position:relative;overflow:hidden}
.tcard .art img{width:100%;height:100%;object-fit:cover;display:block;
  transition:scale .75s cubic-bezier(.32,.72,0,1)}
/* هاله و لبه رنگِ خودِ ابزار را می‌گیرند؛ ردیف آن‌وقت پانزده کاشیِ هم‌شکل نیست */
.tcard:hover{translate:0 -4px;border-color:var(--a,var(--tint));
  box-shadow:0 20px 40px -24px var(--a,var(--tint)),0 4px 14px -8px #000000a6}
.tcard:hover .art img{scale:1.07}
.tcard .art .ph{position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--a,#7c5cff),#0a84c9)}
.tcard .art .ph svg{width:34px;height:34px;color:#fff;opacity:.92}

/* عنوان روی تصویر. رمپ از سه‌پنجمِ پایین شروع می‌شود تا عکس را نخورد و
   دو خط عنوانِ فارسی هم رویش خوانده شود. */
.tcard .cap{position:absolute;inset-block-end:0;inset-inline:0;z-index:2;display:block;
  padding:2.3rem .62rem .58rem;
  background:linear-gradient(#0000,#0a091052 40%,#0a0910f2)}
.tcard .cap b{font-size:.82rem;font-weight:700;line-height:1.55;color:#fff;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  text-shadow:0 1px 7px #0a0910c4}

/* max-width لازم است: نشان‌ها عرضشان به اندازهٔ محتواست و با سه قرص
   (badgeِ ادمین + «ویدیو» + نشانِ موتور) می‌رفتند زیرِ قرصِ قیمت و بریده
   می‌شدند. با این حد، به‌جای بریده‌شدن سطر بعد می‌روند. */
.tcard .tags{position:absolute;z-index:3;inset-block-start:.42rem;inset-inline-start:.42rem;
  max-width:calc(100% - 4.6rem);display:flex;gap:.25rem;flex-wrap:wrap}
.tcard .tag{font-size:.66rem;font-weight:700;padding:.15rem .4rem;border-radius:6px;
  background:#000000a6;color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.tcard .tag.vid{background:#7c5cffcc}
/* نشانِ موتور: فقط لوگوی خودِ سازنده، چون نام هم که بنویسیم روی کاشیِ
   ۱۶۸ پیکسلی سه‌تایی می‌شکند و می‌افتد زیر هم. نام در title می‌ماند.
   موتوری که لوگو نداریم (Seedance) ناچار یک قرصِ نوشته می‌گیرد. */
.tcard .tag.eng{padding:0;background:none;border:0;line-height:0}
.tcard .tag.eng img{width:17px;height:17px;border-radius:50%;display:block;background:#fff;
  object-fit:contain;padding:1.5px;box-shadow:0 1px 5px -1px #000000b8,0 0 0 1px #ffffff2e}
.tcard .tag.eng.txt{padding:.15rem .38rem;line-height:1.5;font-size:.6rem;
  background:#0a0910cc;border:1px solid #ffffff2e;border-radius:var(--r-pill)}

/* قیمت: قرصِ گوشهٔ مقابلِ نشان‌ها، نه یک ردیفِ جدا با وسطِ خالی */
.tcard .price{position:absolute;z-index:3;inset-block-start:.42rem;inset-inline-end:.42rem;
  display:inline-flex;align-items:center;gap:.24rem;font-size:.7rem;font-weight:800;color:#fff;
  padding:.2rem .48rem;border-radius:var(--r-pill);
  background:#0a0910ad;border:1px solid #ffffff21;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.tcard .price svg{width:11px;height:11px;opacity:.7}

/* ردیف اکشن‌ها روان است، نه شبکه: تعدادشان کم و مهم است.
   overflow-x یک قابِ اسکرول می‌سازد که عمودی هم می‌برد: کاشی روی هاور چهار
   پیکسل بالا می‌رود و سرش از بالا قیچی می‌شد، و پایینش به نوار اسکرول
   می‌چسبید. پس ردیف از هر دو طرف نفس می‌کشد — و بالایش با حاشیهٔ منفی پس
   داده می‌شود تا فاصله‌اش با تیتر همان که بود بماند. */
.arow{display:flex;gap:.6rem;overflow-x:auto;scrollbar-width:thin;
  padding-block:.55rem 1rem;margin-block-start:-.55rem}
.arow .tcard{flex:0 0 168px}