/* ══════════════════════════════════════════════════════════════
   قلم‌ها — روی سرور خود سایت

   ⚠ نه از گوگل فونت. گوگل فونت از ایران اغلب مسدود یا بسیار کند
   است؛ یعنی برای خیلی از بازدیدکننده‌ها وزیر اصلاً بار نمی‌شد و
   سایت با قلم سیستم دیده می‌شد.

   هر دو قلم متغیرند: یک فایل، همه‌ی وزن‌ها. مجوز هر دو SIL OFL.
   ══════════════════════════════════════════════════════════════ */
@font-face{font-family:'Vazirmatn';src:url('../fonts/Vazirmatn-Variable.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Bricolage Grotesque';src:url('../fonts/BricolageGrotesque-Variable.woff2') format('woff2');
  font-weight:200 800;font-style:normal;font-display:swap}

/* ══════════════════════════════════════════════════════════════
   سیستم طراحی لومیر — نئومورفیک

   دو تم در یک فایل. متغیرها عوض می‌شوند، نه کلاس‌ها — پس همه‌ی
   صفحات بدون تغییر با هر دو تم کار می‌کنند.

   تم پیش‌فرض: روشن
   تم تاریک: وقتی [data-theme="dark"] روی <html> باشد

   انتخاب کاربر بر تنظیم سیستم اولویت دارد؛ اگر انتخابی نکرده
   باشد، تم سیستمش اعمال می‌شود.
   ══════════════════════════════════════════════════════════════ */

:root{
  /* ── سطوح ── */
  --bg:        #E8EAEE;
  --surface:   #EDEFF3;
  --sunken:    #E2E5EA;
  --raised:    #F2F4F7;

  /* ── متن ── */
  --tx:  #2A2F38;
  --tx2: rgba(42,47,56,.66);
  --tx3: rgba(42,47,56,.42);

  /* ── تأکید ── */
  --flame:  #F64B29;
  --flame2: #FF6A4D;
  --cream:  #8A6A45;
  --ok:     #2E9E6B;
  --warn:   #C8871A;
  --bad:    #D23F2C;

  /* ── سایه‌ی نئومورفیک ──
     دو سایه: روشن از بالا-چپ، تیره از پایین-راست.
     همین دو تا کل حس برجستگی را می‌سازند. */
  --up:  -6px -6px 14px rgba(255,255,255,.9),
          7px  7px 18px rgba(163,171,185,.55);
  --up2: -9px -9px 22px rgba(255,255,255,.95),
         11px 11px 30px rgba(163,171,185,.62);
  --in:  inset -4px -4px 10px rgba(255,255,255,.85),
         inset  5px  5px 12px rgba(163,171,185,.5);
  --in2: inset -2px -2px 6px rgba(255,255,255,.8),
         inset  3px  3px 8px rgba(163,171,185,.45);

  --ez: cubic-bezier(.32,.72,0,1);
  --maxw: 1200px;
  --pad: clamp(16px,4vw,40px);
  --r: 20px;
}

[data-theme="dark"]{
  --bg:      #171C24;
  --surface: #1B212C;
  --sunken:  #141A22;
  --raised:  #232B37;

  --tx:  #E9EDF3;
  --tx2: rgba(233,237,243,.62);
  --tx3: rgba(233,237,243,.38);

  --cream: #FFD6AE;
  --ok:    #57C79A;
  --warn:  #E0A93E;
  --bad:   #F0604C;

  --up:  -6px -6px 14px rgba(255,255,255,.035),
          7px  7px 20px rgba(0,0,0,.5);
  --up2: -9px -9px 22px rgba(255,255,255,.045),
         11px 11px 32px rgba(0,0,0,.6);
  --in:  inset -4px -4px 10px rgba(255,255,255,.03),
         inset  5px  5px 12px rgba(0,0,0,.5);
  --in2: inset -2px -2px 6px rgba(255,255,255,.025),
         inset  3px  3px 8px rgba(0,0,0,.45);
}

*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  background:var(--bg);
  color:var(--tx);
  font-family:Vazirmatn,system-ui,-apple-system,sans-serif;
  font-weight:400;
  line-height:1.85;
  min-height:100vh;
  padding-bottom:60px;
  transition:background .5s var(--ez),color .5s var(--ez);
}

a{color:inherit;text-decoration:none}
[hidden]{display:none !important}
button{font:inherit;border:none;background:none;cursor:pointer;color:inherit}
img{max-width:100%;display:block}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.wrap.narrow{max-width:820px}

/* ══════════ تایپوگرافی ══════════ */

.t{font-size:clamp(28px,5.5vw,52px);font-weight:900;letter-spacing:-.035em;line-height:1.35}
.t em{font-style:normal;color:var(--flame)}

.kicker{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:700;
  letter-spacing:.2em;color:var(--flame);text-transform:uppercase}
.kicker b{width:26px;height:2px;background:var(--flame);border-radius:2px;display:block}

.ld{font-size:15px;color:var(--tx2);font-weight:300;max-width:58ch;line-height:2.1}
.pn{font-size:12px;color:var(--tx3);margin-top:8px;line-height:1.9}
.hint{font-size:11.5px;color:var(--tx3);margin-top:5px}
.err{font-size:12px;color:var(--bad);margin-top:6px;font-weight:600}

/* ══════════ کارت ══════════ */

.card{
  background:var(--surface);
  border-radius:var(--r);
  padding:22px;
  box-shadow:var(--up);
  transition:box-shadow .5s var(--ez),transform .5s var(--ez);
}
.card.hov:hover{transform:translateY(-3px);box-shadow:var(--up2)}
.card.sunk{box-shadow:var(--in)}

.grid{display:grid;gap:16px}
.grid.g2{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid.g3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

/* ══════════ دکمه ══════════ */

.cta{
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 26px;border-radius:99px;
  font-size:14px;font-weight:700;
  color:#fff;
  background:linear-gradient(145deg,var(--flame2),var(--flame));
  box-shadow:-4px -4px 10px rgba(255,255,255,.5),
              6px  6px 16px rgba(196,60,30,.42);
  transition:transform .45s var(--ez),box-shadow .45s var(--ez);
}
.cta:hover{transform:translateY(-2px);
  box-shadow:-5px -5px 12px rgba(255,255,255,.55), 8px 8px 22px rgba(196,60,30,.5)}
.cta:active{transform:translateY(1px);
  box-shadow:inset 3px 3px 8px rgba(150,40,18,.5), inset -3px -3px 8px rgba(255,140,110,.35)}
.cta:disabled{opacity:.45;pointer-events:none;box-shadow:none}
.cta.sm{padding:9px 18px;font-size:12.5px}
.cta .k{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:rgba(255,255,255,.22);font-size:12px}

.gh{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 22px;border-radius:99px;
  font-size:13.5px;font-weight:600;color:var(--tx2);
  background:var(--surface);box-shadow:var(--up);
  transition:transform .45s var(--ez),box-shadow .45s var(--ez),color .45s var(--ez);
}
.gh:hover{color:var(--flame);transform:translateY(-2px);box-shadow:var(--up2)}
.gh:active{box-shadow:var(--in);transform:none}
.gh.sm{padding:7px 15px;font-size:12px}
.gh.danger{color:var(--bad)}
.gh:disabled{opacity:.45;pointer-events:none}

/* ══════════ ورودی ══════════ */

.field{margin-bottom:16px}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--tx2);margin-bottom:8px}

.inp{
  width:100%;padding:13px 16px;border-radius:14px;
  font:inherit;font-size:14px;color:var(--tx);
  background:var(--sunken);border:none;outline:none;
  box-shadow:var(--in);
  transition:box-shadow .4s var(--ez);
}
.inp::placeholder{color:var(--tx3)}
.inp:focus{box-shadow:var(--in), 0 0 0 2px rgba(246,75,41,.28)}
textarea.inp{resize:vertical;min-height:90px;line-height:2}
select.inp{cursor:pointer;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--tx3) 50%),
                   linear-gradient(135deg,var(--tx3) 50%,transparent 50%);
  background-position:calc(0% + 18px) calc(50% + 1px), calc(0% + 23px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}

/* کلید فعال/غیرفعال */
.switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none}
.switch input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.switch .track{
  position:relative;flex:0 0 auto;width:46px;height:26px;border-radius:99px;
  background:var(--sunken);box-shadow:var(--in2);
  transition:background .4s var(--ez);
}
/*
 * دایره‌ی کلید.
 *
 * با inset-inline-start موقعیت اولیه در ابتدای نوار است — در
 * چیدمان راست‌به‌چپ یعنی سمت راست. پس هنگام فعال شدن باید به
 * چپ برود، که با translateX منفی انجام می‌شود.
 *
 * قبلاً با inset-inline-end نوشته شده بود و دایره از نوار
 * بیرون می‌زد، چون مبدأ و جهت حرکت با هم نمی‌خواندند.
 */
.switch .track::after{
  content:"";position:absolute;top:3px;inset-inline-start:3px;
  width:20px;height:20px;border-radius:50%;
  background:var(--raised);box-shadow:var(--up);
  transition:transform .45s var(--ez),background .4s var(--ez);
}
.switch input:checked + .track{background:linear-gradient(145deg,var(--flame2),var(--flame))}
.switch input:checked + .track::after{transform:translateX(-20px);background:#fff}
[dir="ltr"] .switch input:checked + .track::after{transform:translateX(20px)}
.switch input:focus-visible + .track{box-shadow:var(--in2), 0 0 0 3px rgba(246,75,41,.3)}

/* تیک پذیرش — جعبه و متن کنار هم؛ قاعده‌ی عمومی برچسب فیلد رویش اثر نمی‌گذارد */
.field label.consent,.consent{display:flex;align-items:flex-start;gap:12px;margin:0;cursor:pointer;
  font-weight:400;position:relative;user-select:none}
.consent input{position:absolute;inset-inline-start:0;top:0;width:24px;height:24px;margin:0;opacity:0;pointer-events:none}
.consent-box{flex:0 0 24px;width:24px;height:24px;margin-top:3px;border-radius:8px;display:grid;place-items:center;
  background:var(--sunken);box-shadow:var(--in2);transition:background .3s var(--ez)}
.consent-box svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .35s var(--ez)}
.consent input:checked + .consent-box{background:linear-gradient(145deg,var(--flame2),var(--flame))}
.consent input:checked + .consent-box svg{stroke-dashoffset:0}
.consent input:focus-visible + .consent-box{box-shadow:var(--in2),0 0 0 3px rgba(246,75,41,.3)}
.consent-text{flex:1;min-width:0;font-size:13.5px;line-height:1.9;color:var(--tx2)}
.consent-text a{color:var(--flame);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* ══════════ چک‌باکس مدرن (۵۰) ══════════
 * همه‌ی چک‌باکس‌های سایت و پنل، هم‌خانواده‌ی «تیک پذیرش» بالا: جعبه‌ی فرورفته، با تیک خوردن
 * گرادیان شعله و تیکی که کشیده می‌شود. با :where() وزن این قاعده صفر است، پس هر قاعده‌ی
 * اختصاصی (کلیدهای .switch و .consent که چک‌باکس را پنهان می‌کنند، اندازه‌های خاص) همچنان برنده است.
 */
:root{--cb-ring:inset 0 0 0 1px rgba(42,47,56,.16)}
[data-theme="dark"]{--cb-ring:inset 0 0 0 1px rgba(255,255,255,.2)}
:where(input[type="checkbox"]){
  -webkit-appearance:none;appearance:none;flex:0 0 auto;box-sizing:border-box;
  width:20px;height:20px;margin:0;padding:0;border:0;border-radius:30%;
  display:inline-grid;place-items:center;vertical-align:-5px;cursor:pointer;
  background:var(--sunken);box-shadow:var(--in2),var(--cb-ring);color:#fff;
  transition:background .3s var(--ez),box-shadow .3s var(--ez),transform .18s var(--ez);
}
:where(input[type="checkbox"])::after{
  content:"";width:70%;height:70%;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  clip-path:inset(0 100% 0 0);transition:clip-path .34s var(--ez) .05s;
}
:where(input[type="checkbox"]:checked),
:where(input[type="checkbox"]:indeterminate){
  background:linear-gradient(145deg,var(--flame2),var(--flame));
  box-shadow:0 4px 12px -4px rgba(246,75,41,.6),inset 0 1px 0 rgba(255,255,255,.22);
}
:where(input[type="checkbox"]:checked)::after{clip-path:inset(0 0 0 0)}
:where(input[type="checkbox"]:indeterminate)::after{
  clip-path:inset(0 0 0 0);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12h11' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12h11' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E");
}
:where(input[type="checkbox"]:not(:checked):not(:indeterminate):not(:disabled):hover){box-shadow:var(--in2),inset 0 0 0 1.5px rgba(246,75,41,.55)}
:where(input[type="checkbox"]:not(:disabled):active){transform:scale(.86)}
:where(input[type="checkbox"]:focus-visible){outline:none;box-shadow:var(--in2),var(--cb-ring),0 0 0 3px rgba(246,75,41,.35)}
:where(input[type="checkbox"]:checked:focus-visible){box-shadow:0 0 0 3px rgba(246,75,41,.35)}
:where(input[type="checkbox"]:disabled){opacity:.45;cursor:not-allowed}
@media (prefers-reduced-motion:reduce){:where(input[type="checkbox"]),:where(input[type="checkbox"])::after{transition:none}}
@media (forced-colors:active){:where(input[type="checkbox"]){-webkit-appearance:auto;appearance:auto}:where(input[type="checkbox"])::after{display:none}}

/* ══════════ برچسب ══════════ */

.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 13px;border-radius:99px;
  font-size:11.5px;font-weight:700;background:var(--surface);box-shadow:var(--up);color:var(--tx2)}
.pill.ok{color:var(--ok)}
.pill.bad{color:var(--bad)}
.pill.warn{color:var(--warn)}
.pill.flame{color:#fff;background:linear-gradient(145deg,var(--flame2),var(--flame));
  box-shadow:0 4px 12px -4px rgba(246,75,41,.6)}
.pill.mute{color:var(--tx3)}

/* ══════════ تب ══════════ */

.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tab{padding:9px 18px;border-radius:99px;font-size:12.5px;font-weight:600;color:var(--tx2);
  background:var(--surface);box-shadow:var(--up);transition:all .4s var(--ez)}
.tab:hover{color:var(--flame)}
.tab.on{box-shadow:var(--in);color:var(--flame);background:var(--sunken)}

/* ══════════ جدول ══════════ */

.wrap-scroll{overflow-x:auto;border-radius:var(--r);box-shadow:var(--up);background:var(--surface)}
.wrap-scroll::-webkit-scrollbar{height:7px}
.wrap-scroll::-webkit-scrollbar-thumb{background:var(--tx3);border-radius:99px}

.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{padding:14px 16px;text-align:start;font-size:11.5px;font-weight:700;
  color:var(--tx3);letter-spacing:.08em;border-bottom:1px solid rgba(128,138,155,.18)}
.tbl td{padding:14px 16px;border-bottom:1px solid rgba(128,138,155,.1);vertical-align:middle}
.tbl tbody tr{transition:background .3s var(--ez)}
.tbl tbody tr:hover{background:rgba(128,138,155,.06)}
.tbl tbody tr:last-child td{border-bottom:none}

/* ══════════ آمار ══════════ */

.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.stat{background:var(--surface);border-radius:18px;padding:18px;box-shadow:var(--up);text-align:center}
.stat .v{font-size:26px;font-weight:900;color:var(--cream);letter-spacing:-.02em;line-height:1.3}
.stat .l{font-size:11.5px;color:var(--tx3);margin-top:5px}

/* ══════════ آیکون سه‌بعدی ══════════ */

.ic3{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;
  background:var(--surface);box-shadow:var(--up);color:var(--flame)}
.ic3 svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

/* ══════════ اعلان ══════════ */

.toast{position:fixed;inset-block-start:20px;inset-inline-end:20px;z-index:200;
  padding:14px 22px;border-radius:16px;font-size:13.5px;font-weight:600;
  background:var(--surface);box-shadow:var(--up2);
  animation:toastIn .6s var(--ez)}
.toast.ok{color:var(--ok)}
.toast.warn{color:var(--warn)}
@keyframes toastIn{from{opacity:0;transform:translateY(-14px)}}

/* ══════════ صفحه‌بندی ══════════ */

.pager{display:flex;align-items:center;gap:10px;justify-content:center;flex-wrap:wrap}
.pg{padding:9px 18px;border-radius:99px;font-size:13px;font-weight:600;color:var(--tx2);
  background:var(--surface);box-shadow:var(--up);transition:all .4s var(--ez)}
.pg:hover{transform:translateY(-2px);color:var(--flame)}
.pg.disabled{opacity:.4;pointer-events:none}
.pg-info{font-size:12.5px;color:var(--tx3)}
.pager svg{width:16px;height:16px}

/* ══════════ متفرقه ══════════ */

.panel-head{padding-top:clamp(105px,15vw,150px)}

code{font-family:ui-monospace,monospace;font-size:.9em;padding:2px 7px;border-radius:7px;
  background:var(--sunken);box-shadow:var(--in2)}

/* ══════════ صفحه‌ی ساخت سایت ══════════
 * ⚠ پیش از این هیچ فاصله‌ای از بالا نداشت و تیتر و مشخصات سایت زیر هدر ثابت می‌افتاد.
 */
.build{padding-top:clamp(105px,15vw,150px);padding-bottom:70px}
.build-title{font-size:clamp(22px,4vw,34px);font-weight:900;line-height:1.55;margin-top:12px;color:var(--tx)}
.build-title em{font-style:normal;color:var(--flame)}
.build-sub{margin-top:8px;font-size:14px;color:var(--tx2)}
.build .bar{height:12px;margin-top:24px;border-radius:99px;overflow:hidden;background:var(--sunken);box-shadow:var(--in2)}
.build .bar-fill{height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--flame2),var(--flame));
  transition:width .6s var(--ez)}
.build .bar-pct{margin:8px 0 18px;font-size:13px;font-weight:800;color:var(--tx2)}
.done-box,.fail-box{margin-top:24px;padding:clamp(20px,4vw,34px);border-radius:24px;text-align:center;
  background:var(--surface);box-shadow:var(--up2)}
.done-ic{width:58px;height:58px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;
  font-size:26px;font-weight:900;color:#fff;background:var(--ok)}
.done-box h2,.fail-box h2{font-size:clamp(19px,3vw,25px);font-weight:900}
.fail-box h2{color:var(--bad)}
.done-url{margin-top:8px;font-weight:700;color:var(--flame);word-break:break-all}
.done-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}

.steps-live{list-style:none;display:flex;flex-direction:column;gap:9px}
.steps-live li{display:flex;align-items:center;gap:11px;padding:11px 15px;border-radius:14px;
  font-size:13px;background:var(--sunken);box-shadow:var(--in2);color:var(--tx2)}
.steps-live li i{width:9px;height:9px;border-radius:50%;background:var(--tx3);flex:0 0 auto}
.steps-live li.st-running i{background:var(--flame);animation:blink 1s infinite}
.steps-live li.st-done i{background:var(--ok)}
.steps-live li.st-failed i{background:var(--bad)}
@keyframes blink{50%{opacity:.3}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}

/* ══════════════════════════════════════════════════════════════
   هدر با بریدگی منحنی

   شکل از سه بخش ساخته می‌شود: دو گوشه‌ی منحنی بیرونی و یک
   فرورفتگی وسط. با ماسک CSS ساخته شده نه تصویر، تا در هر
   اندازه‌ای تیز بماند و با تم عوض شود.
   ══════════════════════════════════════════════════════════════ */

.hdr{position:fixed;inset-block-start:0;inset-inline:0;z-index:100;padding:0 var(--pad);
  transition:transform .6s var(--ez)}
.hdr.hide{transform:translateY(-120%)}

.hdr-in{position:relative;max-width:var(--maxw);margin-inline:auto;height:66px;
  display:flex;align-items:center;gap:18px;padding:0 26px;
  background:var(--surface);
  border-radius:0 0 26px 26px;
  /* سایه‌ی نرم و کم‌رنگ — سایه‌ی تیره روی پس‌زمینه‌ی روشن
     مثل یک نوار جدا دیده می‌شد، نه سایه */
  box-shadow:0 6px 20px -12px rgba(120,130,148,.4);
  background:color-mix(in srgb, var(--surface) 72%, transparent);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(255,255,255,.14)}
[data-theme="dark"] .hdr-in{box-shadow:0 8px 26px -14px rgba(0,0,0,.6)}

.hdr-brand{display:flex;align-items:center;gap:9px;font-weight:900;font-size:17px;letter-spacing:-.02em}
.hdr-brand i{font-style:normal;color:var(--flame)}
.hdr-logo{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  background:var(--surface);box-shadow:var(--up);font-size:15px;color:var(--flame);font-weight:900}

.hdr-nav{display:flex;gap:4px;margin-inline-start:auto;align-items:center}
.hdr-nav a{padding:8px 15px;border-radius:99px;font-size:13px;font-weight:600;color:var(--tx2);
  transition:all .4s var(--ez)}
.hdr-nav a:hover{color:var(--flame);box-shadow:var(--up)}
.hdr-nav a.on{color:var(--flame);box-shadow:var(--in);background:var(--sunken)}

.hdr-side{display:flex;align-items:center;gap:8px}

.hdr-user{display:flex;align-items:center;gap:9px;padding:6px 14px 6px 6px;border-radius:99px;
  background:var(--sunken);box-shadow:var(--in2);font-size:12px}
.hdr-user .av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  font-weight:800;font-size:12px;color:#fff;
  background:linear-gradient(145deg,var(--flame2),var(--flame))}
.hdr-user b{font-size:12.5px;font-weight:700}
.hdr-user .code{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--tx3);
  padding-inline-start:9px;margin-inline-start:3px;border-inline-start:1px solid rgba(128,138,155,.25)}
.hdr-user .code b{color:var(--flame);letter-spacing:.1em;font-size:12px}
.hdr-user .cp{font-size:10px;padding:2px 7px;border-radius:7px;background:var(--surface);
  box-shadow:var(--up);color:var(--tx3)}
.hdr-user .cp:hover{color:var(--flame)}

.theme-btn{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;
  background:var(--surface);box-shadow:var(--up);color:var(--tx2);font-size:15px;
  transition:all .4s var(--ez)}
.theme-btn:hover{color:var(--flame);transform:translateY(-2px)}
.theme-btn:active{box-shadow:var(--in)}

.burger{display:none;width:36px;height:36px;border-radius:12px;place-items:center;
  background:var(--surface);box-shadow:var(--up);color:var(--tx2)}

@media(max-width:900px){
    .hdr-nav{display:none}
  .burger{display:grid}
  .hdr-user .code{display:none}
}

/*
 * از ۴۶ هدر دو گزینه‌ی بیشتر دارد (افزونه‌ها، ابزارها). روی صفحه‌های میانی (لپ‌تاپ کوچک، تبلت خوابیده)
 * گزینه‌ها دوخطی می‌شدند و از هدر بیرون می‌زدند — مخصوصاً وقتی کاربر وارد شده و نام و کد معرفش هم هست.
 * پس: گزینه‌ها هرگز نمی‌شکنند، در پهنای میانی فشرده‌تر می‌شوند، و جایی که دیگر جا نیست منوی همبرگری می‌آید.
 */
.hdr-nav a{white-space:nowrap}
/* نام بلند کاربر هدر را چندخطی نکند */
.hdr-user b{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* کاربر واردشده: نام و کد معرف هم در هدر است، پس گزینه‌ها همیشه فشرده‌اند (پهنای هدر سقف دارد) */
.hdr--auth .hdr-nav{gap:0}
.hdr--auth .hdr-nav a{padding:8px 10px;font-size:12.5px}
@media(max-width:1340px){
  .hdr-nav{gap:0}
  .hdr-nav a{padding:8px 10px;font-size:12.5px}
  .hdr--auth .hdr-code .lbl{display:none}
}
@media(max-width:1060px){
  .hdr-nav{display:none}
  .burger{display:grid}
}
@media(max-width:1200px){
  .hdr--auth .hdr-nav{display:none}
  .hdr--auth .burger{display:grid}
}

/* منوی موبایل */
/*
 * ⚠ منو وقتی بسته است، دقیقاً یک صفحه بالاتر می‌رود. روی گوشی کوتاه
 * (آیفون SE و مانند آن) فهرست گزینه‌ها از ارتفاع صفحه بلندتر بود و بخش
 * اضافه‌اش از پایین جعبه بیرون می‌زد — یعنی درست بالای صفحه دیده می‌شد.
 * حالا فهرست داخل جعبه می‌ماند (با اسکرول) و منوی بسته کاملاً پنهان است.
 */
.mnav{position:fixed;inset:0;z-index:110;background:var(--bg);
  padding:80px var(--pad) 40px;transform:translateY(-100%);
  overflow-y:auto;overscroll-behavior:contain;visibility:hidden;
  transition:transform .6s var(--ez),visibility 0s linear .6s}
.mnav.open{transform:none;visibility:visible;transition:transform .6s var(--ez),visibility 0s}
.mnav a{display:block;padding:16px 0;font-size:19px;font-weight:700;
  border-bottom:1px solid rgba(128,138,155,.14)}
.mnav-close{position:absolute;inset-block-start:20px;inset-inline-end:var(--pad);
  width:40px;height:40px;border-radius:13px;display:grid;place-items:center;
  background:var(--surface);box-shadow:var(--up);font-size:18px}

/* ══════════════════════════════════════════════════════════════
   فوتر
   ══════════════════════════════════════════════════════════════ */

.ftr{position:relative;z-index:5;
  margin-top:90px;padding:56px var(--pad) 34px;background:var(--surface);
  border-radius:36px 36px 0 0;box-shadow:0 -10px 34px -16px rgba(120,130,148,.5)}
[data-theme="dark"] .ftr{box-shadow:0 -12px 38px -16px rgba(0,0,0,.7)}

.ftr-in{max-width:var(--maxw);margin-inline:auto;
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:34px}
.ftr h4{font-size:13px;font-weight:800;margin-bottom:14px;color:var(--tx)}
.ftr p,.ftr a{font-size:13px;color:var(--tx2);line-height:2.2}
.ftr a{display:block;transition:color .3s var(--ez)}
.ftr a:hover{color:var(--flame)}

.ftr-brand{font-size:26px;font-weight:900;letter-spacing:-.03em;margin-bottom:10px}
.ftr-brand i{font-style:normal;color:var(--flame)}

.ftr-social{display:flex;gap:9px;margin-top:16px}
.ftr-social a{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;
  background:var(--surface);box-shadow:var(--up);color:var(--tx2)}
.ftr-social a:hover{color:var(--flame);transform:translateY(-2px)}

.ftr-bottom{max-width:var(--maxw);margin:34px auto 0;padding-top:22px;
  border-top:1px solid rgba(128,138,155,.18);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:12px;color:var(--tx3)}

@media(max-width:820px){.ftr-in{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.ftr-in{grid-template-columns:1fr}}

/* ══════════════════════════════════════════════════════════════
   لوگوی برجسته — «درباره LUMIÈRE»

   حروف با چند لایه‌ی سایه‌ی متوالی برجسته می‌شوند، نه با تصویر.
   ══════════════════════════════════════════════════════════════ */

.logo3d{direction:ltr;unicode-bidi:isolate;
  font-family:'Bricolage Grotesque',Impact,sans-serif;font-weight:800;
  font-size:clamp(38px,8vw,86px);letter-spacing:-.02em;line-height:1;
  display:inline-block;color:var(--surface);
  text-shadow:
    1px 1px 0 rgba(163,171,185,.55), 2px 2px 0 rgba(163,171,185,.5),
    3px 3px 0 rgba(163,171,185,.44), 4px 4px 0 rgba(163,171,185,.38),
    5px 5px 0 rgba(163,171,185,.3),  6px 6px 0 rgba(163,171,185,.22),
    7px 7px 0 rgba(163,171,185,.14), 8px 8px 14px rgba(120,130,148,.5),
    -1px -1px 0 rgba(255,255,255,.95);
}
[data-theme="dark"] .logo3d{color:var(--raised);
  text-shadow:
    1px 1px 0 #10151C, 2px 2px 0 #0F141A, 3px 3px 0 #0E1319,
    4px 4px 0 #0D1218, 5px 5px 0 #0C1117, 6px 6px 0 #0B1016,
    7px 7px 0 #0A0F15, 8px 8px 18px rgba(0,0,0,.8),
    -1px -1px 0 rgba(255,255,255,.07);
}
.logo3d i{font-style:normal;color:var(--flame)}

/* ══════════════════════════════════════════════════════════════
   نمودارها

   با SVG و CSS ساخته شده‌اند، نه کتابخانه‌ی بیرونی — چون یک
   کتابخانه‌ی نمودار چند صد کیلوبایت است و برای دو نمودار ساده
   صرفه ندارد، مخصوصاً روی اینترنت داخل ایران.
   ══════════════════════════════════════════════════════════════ */

.chart{display:flex;align-items:flex-end;gap:8px;height:190px;margin-top:22px;padding-bottom:26px}
.chart-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  height:100%;position:relative;gap:3px}
.chart-bar{width:100%;max-width:40px;border-radius:9px 9px 4px 4px;
  background:linear-gradient(180deg,var(--flame2),var(--flame));
  box-shadow:0 6px 16px -8px rgba(246,75,41,.75);
  transition:height 1s var(--ez)}
.chart-bar.alt{background:linear-gradient(180deg,#8FA6C4,#5C7A9E);opacity:.85}
.chart-label{position:absolute;bottom:-24px;font-size:10.5px;color:var(--tx3);white-space:nowrap}
.chart-val{font-size:10px;font-weight:700;color:var(--tx2);opacity:0;transition:opacity .3s}
.chart-col:hover .chart-val{opacity:1}

.chart-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:34px;font-size:12px;color:var(--tx3)}
.chart-legend span{display:flex;align-items:center;gap:7px}
.chart-legend i{width:12px;height:12px;border-radius:4px;display:block}

/* نمودار افقی — پراکندگی دسته‌ها */
.hbar{display:flex;flex-direction:column;gap:11px;margin-top:18px}
.hbar-row{display:flex;align-items:center;gap:12px;font-size:12.5px}
.hbar-row b{flex:0 0 110px;font-weight:600;color:var(--tx2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbar-track{flex:1;height:11px;border-radius:99px;background:var(--sunken);box-shadow:var(--in2);
  overflow:hidden}
.hbar-fill{height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--flame),var(--flame2));
  transition:width 1s var(--ez)}
.hbar-row span{flex:0 0 auto;color:var(--tx3);font-variant-numeric:tabular-nums}


/* ══════════ انتخابگر تاریخ شمسی ══════════ */

.jp{position:absolute;z-index:80;margin-top:6px;width:262px;padding:14px;border-radius:18px;
  background:var(--surface);box-shadow:var(--up2)}
.jp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.jp-head b{font-size:13.5px;font-weight:800}
.jp-head button{width:28px;height:28px;border-radius:9px;font-size:15px;color:var(--tx2);
  background:var(--surface);box-shadow:var(--up)}
.jp-head button:hover{color:var(--flame)}
.jp-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:5px}
.jp-dow span{text-align:center;font-size:10.5px;color:var(--tx3);font-weight:700}
.jp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.jp-grid i{aspect-ratio:1;display:grid;place-items:center;font-style:normal;font-size:12px;
  border-radius:9px;cursor:pointer;color:var(--tx2);transition:all .25s var(--ez)}
.jp-grid i[data-d]:hover{color:var(--flame);box-shadow:var(--up)}
.jp-grid i.on{color:#fff;background:linear-gradient(145deg,var(--flame2),var(--flame));font-weight:800}
.jp-time{display:flex;align-items:center;gap:6px;margin-top:11px;padding-top:11px;
  border-top:1px solid rgba(128,138,155,.18);font-size:12px;color:var(--tx3)}
.jp-time input{width:52px;padding:6px;border-radius:9px;border:none;text-align:center;
  font:inherit;font-size:12.5px;color:var(--tx);background:var(--sunken);box-shadow:var(--in2)}
.jp-foot{display:flex;gap:6px;margin-top:11px}
.jp-foot button{flex:1;padding:7px;border-radius:10px;font-size:11.5px;color:var(--tx2);
  background:var(--surface);box-shadow:var(--up)}
.jp-foot button:hover{color:var(--flame)}



/* ══════════ آپلود رسانه در فرم محتوا ══════════ */

.upbox{display:flex;gap:14px;align-items:flex-start}
.upbox-prev{width:96px;height:72px;flex:0 0 auto;border-radius:12px;overflow:hidden;
  background:var(--sunken);box-shadow:var(--in2);display:grid;place-items:center}
.upbox-prev img{width:100%;height:100%;object-fit:cover}
.upbox-prev span{font-size:10.5px;color:var(--tx3)}
@media(max-width:520px){.upbox{flex-direction:column}.upbox-prev{width:100%;height:120px}}

/* ── انتخاب رسانه: تصویر، ویدیو، جای دید (admin-media.js) ── */
.mpick{display:grid;grid-template-columns:minmax(150px,240px) 1fr;gap:16px;align-items:start}
.mpick-prev{position:relative;aspect-ratio:var(--mp-aspect,4 / 3);border-radius:14px;overflow:hidden;
  background:var(--sunken);box-shadow:var(--in2);display:grid;place-items:center;touch-action:none}
.mpick-prev > img,.mpick-prev > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  user-select:none;-webkit-user-drag:none}
.mpick.has-pos .mpick-prev{cursor:grab;outline:1px dashed rgba(246,75,41,.45);outline-offset:-1px}
.mpick.has-pos .mpick-prev.dragging{cursor:grabbing}
.mpick-empty{font-size:11px;color:var(--tx3)}
.mpick-side{display:flex;flex-direction:column;gap:8px;min-width:0}
.mpick-row{display:flex;align-items:center;gap:8px}
.mpick-row .inp{flex:1;min-width:0}
.mpick-row input[type=range]{flex:1}
.mpick-lbl{flex:0 0 74px;font-size:12px;color:var(--tx2)}
.mp-play-row.dim{opacity:.45}
@media(max-width:620px){
  .mpick{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════════════
   پنجره‌های شناور پنل مدیریت
   ══════════════════════════════════════════════════════════════ */

.fw-layer{position:fixed;inset:0;pointer-events:none;z-index:55}

.fw{position:absolute;pointer-events:auto;display:flex;flex-direction:column;
  border-radius:18px;overflow:hidden;background:var(--surface);box-shadow:var(--up2);
  animation:fwIn .45s var(--ez)}
@keyframes fwIn{from{opacity:0;transform:scale(.97) translateY(10px)}}
.fw.dragging{transition:none;user-select:none}
.fw.dragging iframe{pointer-events:none}
.fw.min{display:none}
.fw.max{inset:70px 20px 20px 20px !important;width:auto !important;height:auto !important}

.fw-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:grab;
  background:var(--sunken);box-shadow:var(--in2)}
.fw-bar:active{cursor:grabbing}
.fw-title{flex:1;font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.fw-acts{display:flex;gap:5px}
.fw-acts button{width:26px;height:26px;border-radius:8px;font-size:12px;color:var(--tx3);
  background:var(--surface);box-shadow:var(--up);display:grid;place-items:center}
.fw-acts button:hover{color:var(--flame)}
.fw-acts button[data-a="close"]:hover{color:var(--bad)}

.fw-body{flex:1;background:var(--bg)}
.fw-body iframe{width:100%;height:100%;border:0;display:block}

.fw-grip{display:none}

/* دستگیره‌های تغییر اندازه — چهار لبه و چهار گوشه */
.fw-h{position:absolute;z-index:3}
.fw-h-n,.fw-h-s{inset-inline:14px;height:7px}
.fw-h-e,.fw-h-w{inset-block:14px;width:7px}
.fw-h-n{top:-2px;cursor:ns-resize}.fw-h-s{bottom:-2px;cursor:ns-resize}
.fw-h-e{right:-2px;cursor:ew-resize}.fw-h-w{left:-2px;cursor:ew-resize}
.fw-h-ne,.fw-h-nw,.fw-h-se,.fw-h-sw{width:16px;height:16px}
.fw-h-ne{top:-2px;right:-2px;cursor:nesw-resize}.fw-h-sw{bottom:-2px;left:-2px;cursor:nesw-resize}
.fw-h-nw{top:-2px;left:-2px;cursor:nwse-resize}.fw-h-se{bottom:-2px;right:-2px;cursor:nwse-resize;
  background:linear-gradient(135deg,transparent 55%,var(--tx3) 55%);opacity:.4;border-bottom-right-radius:18px}
.fw.max .fw-h{display:none}

/* پیش‌نمایش نیمه‌صفحه / تمام‌صفحه هنگام کشیدن به لبه */
.fw-ghost{position:fixed;z-index:54;border-radius:18px;pointer-events:none;
  background:rgba(246,75,41,.10);border:2px dashed rgba(246,75,41,.55);transition:all .18s var(--ez)}

.fw-dock{position:fixed;inset-block-end:0;inset-inline:0;z-index:56;display:flex;gap:8px;
  padding:10px var(--pad);pointer-events:none}
.fw-dock button{pointer-events:auto;padding:8px 16px;border-radius:12px 12px 0 0;
  font-size:12px;font-weight:600;color:var(--tx2);background:var(--surface);
  box-shadow:0 -4px 14px -6px rgba(120,130,148,.5)}
.fw-dock button:hover{color:var(--flame)}

@media(max-width:900px){.fw-layer,.fw-dock{display:none}}

/* ── موقعیت متن روی ویدیو ── */
.scrollvid-cap.pos-center      {inset-block-start:auto;inset-inline:auto}
.scrollvid-cap.pos-top-start   {inset-block-start:14%;inset-inline-start:8%;text-align:start}
.scrollvid-cap.pos-top-end     {inset-block-start:14%;inset-inline-end:8%;text-align:end}
.scrollvid-cap.pos-bottom-start{inset-block-end:16%;inset-inline-start:8%;text-align:start}
.scrollvid-cap.pos-bottom-end  {inset-block-end:16%;inset-inline-end:8%;text-align:end}

/* ══════════ حروف لاتین در چیدمان راست‌به‌چپ ══════════
   بدون تعیین جهت، مرورگر ترتیب حروف را برعکس می‌چیند
   و «LUMIÈRE» به شکل «RE È LUMI» دیده می‌شود. */

.hdr-brand,
.ftr-brand,


/* ══════════════════════════════════════════════════════════════
   ویدیوی همگام با اسکرول

   ویدیو پخش نمی‌شود؛ زمانش با موقعیت اسکرول جابه‌جا می‌شود.
   نتیجه این است که کاربر با اسکرول، انگار خودش ویدیو را جلو
   می‌برد. متن‌ها در ثانیه‌های مشخص ظاهر و محو می‌شوند.
   ══════════════════════════════════════════════════════════════ */

.scrollvid{position:relative}
.scrollvid-track{height:400vh}
.scrollvid-sticky{position:sticky;inset-block-start:0;height:100vh;overflow:hidden;
  display:grid;place-items:center}
.scrollvid video{width:100%;height:100%;object-fit:cover}
.scrollvid-veil{position:absolute;inset:0;background:linear-gradient(180deg,
  rgba(15,20,27,.45),rgba(15,20,27,.15) 40%,rgba(15,20,27,.6))}

.scrollvid-caps{position:absolute;inset:0;display:grid;place-items:center;padding:var(--pad)}
.scrollvid-cap{position:absolute;text-align:center;max-width:640px;color:#fff;
  opacity:0;transform:translateY(24px);transition:opacity .7s var(--ez),transform .7s var(--ez)}
.scrollvid-cap.on{opacity:1;transform:none}
.scrollvid-cap b{display:block;font-size:clamp(24px,4.5vw,44px);font-weight:900;letter-spacing:-.03em}
.scrollvid-cap span{display:block;font-size:clamp(13px,1.8vw,16px);opacity:.85;margin-top:12px;line-height:2}

.scrollvid-bar{position:absolute;inset-block-end:0;inset-inline:0;height:3px;background:rgba(255,255,255,.15)}
.scrollvid-bar i{display:block;height:100%;width:0;background:var(--flame);transition:width .1s linear}

.scrollvid-fallback{display:none}
@media(prefers-reduced-motion:reduce){
  .scrollvid-track{height:auto}
  .scrollvid-sticky{position:static;height:auto}
}


/* ══════════════════════════════════════════════════════════════
   صفحه‌ی محصول

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

.prod-top{display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;align-items:center;
  padding-top:clamp(110px,15vw,160px)}

.prod-intro{min-width:0}

/* ══════════════════════════════════════════════════════════════
   کارت قالب

   عرض ستون ثابت است نه کشسان — وگرنه وقتی فقط یک قالب در یک
   دسته باشد، همان یک کارت تمام عرض صفحه را می‌گیرد.
   ══════════════════════════════════════════════════════════════ */

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,320px));
  gap:20px;justify-content:start}

@media(max-width:680px){
  .cards{grid-template-columns:1fr;justify-content:stretch}
}

.pcard{display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;
  background:var(--surface);box-shadow:var(--up);
  transition:transform .5s var(--ez),box-shadow .5s var(--ez)}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--up2)}

.pcard-media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;
  background:var(--sunken);box-shadow:var(--in)}
.pcard-media img,.pcard-media video{position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover}

/* ویدیو زیر پوستر می‌ماند تا با هاور ظاهر شود */
.pcard-media video{opacity:0;transition:opacity .7s var(--ez)}
.pcard-media img{opacity:1;transition:opacity .7s var(--ez)}
.pcard:hover .pcard-media video{opacity:1}
.pcard:hover .pcard-media img{opacity:0}

.pcard-empty{position:absolute;inset:0;display:grid;place-items:center;
  font-size:12px;color:var(--tx3)}

.pcard-body{padding:18px;display:flex;flex-direction:column;flex:1}
.pcard-body h3{font-size:17px;font-weight:800;letter-spacing:-.02em}
.pcard-body p{font-size:13px;color:var(--tx2);font-weight:300;margin-top:8px;
  line-height:1.9;min-height:50px}

.pcard-price{display:flex;align-items:baseline;gap:6px;margin-top:12px}
.pcard-price b{font-size:19px;font-weight:900;color:var(--cream)}
.pcard-price span{font-size:11px;color:var(--tx3)}

.pcard-acts{display:flex;gap:8px;margin-top:14px}



/* ══════════════════════════════════════════════════════════════
   ویدیوی معرفی و گالری تصاویر
   ══════════════════════════════════════════════════════════════ */

.introvid{border-radius:var(--r);overflow:hidden;background:var(--sunken);
  box-shadow:var(--up2)}
.introvid video{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;background:#000}

/* ── گالری: یک تصویر بزرگ و ردیف کوچک‌ها ── */
.shots{display:flex;flex-direction:column;gap:14px;
  max-width:620px;margin-inline:auto}

/* تصویر بزرگ — نصف اندازه‌ی قبلی */
.shots-main{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--r);
  overflow:hidden;background:var(--sunken);box-shadow:var(--up2);cursor:zoom-in;
  padding:0;border:none;display:block}
.shots-main img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s var(--ez),opacity .45s var(--ez)}
.shots-main:hover img{transform:scale(1.03)}
.shots-main.swap img{opacity:0}

.shots-zoom{position:absolute;inset-block-end:14px;inset-inline-end:14px;
  width:40px;height:40px;border-radius:13px;display:grid;place-items:center;
  background:var(--surface);box-shadow:var(--up);color:var(--tx2);
  opacity:0;transform:translateY(8px);transition:all .4s var(--ez)}
.shots-main:hover .shots-zoom{opacity:1;transform:none}
.shots-zoom svg{width:18px;height:18px}

.shots-thumbs{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px}
.shots-thumbs::-webkit-scrollbar{height:4px}
.shots-thumbs::-webkit-scrollbar-thumb{background:var(--tx3);border-radius:99px}

.shots-thumb{flex:0 0 auto;width:110px;aspect-ratio:16/10;border-radius:13px;
  overflow:hidden;border:none;padding:0;cursor:pointer;background:var(--sunken);
  box-shadow:var(--up);opacity:.6;
  transition:opacity .4s var(--ez),transform .4s var(--ez),box-shadow .4s var(--ez)}
.shots-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.shots-thumb:hover{opacity:.9;transform:translateY(-2px)}
.shots-thumb.on{opacity:1;box-shadow:var(--up),0 0 0 2px var(--flame)}

/* ── پنجره‌ی بزرگ ── */
.lightbox{position:fixed;inset:0;z-index:150;display:grid;place-items:center;
  grid-template-columns:auto 1fr auto;gap:18px;padding:5vh 4vw;
  background:rgba(18,24,32,.9);backdrop-filter:blur(14px);
  animation:lbIn .4s var(--ez)}
@keyframes lbIn{from{opacity:0}}
.lightbox[hidden]{display:none}

.lightbox img{grid-column:2;max-width:100%;max-height:90vh;border-radius:18px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9);
  animation:lbImg .45s var(--ez)}
@keyframes lbImg{from{opacity:0;transform:scale(.95)}}

.lb-nav{width:48px;height:48px;border-radius:50%;font-size:24px;color:#fff;
  background:rgba(255,255,255,.12);display:grid;place-items:center;
  transition:background .3s var(--ez),transform .3s var(--ez)}
.lb-nav:hover{background:rgba(255,255,255,.22);transform:scale(1.08)}
.lb-nav.prev{grid-column:1}
.lb-nav.next{grid-column:3}

.lb-close{position:absolute;inset-block-start:20px;inset-inline-end:24px;
  width:42px;height:42px;border-radius:13px;font-size:18px;color:#fff;
  background:rgba(255,255,255,.12)}
.lb-close:hover{background:rgba(255,255,255,.22)}

.lb-count{position:absolute;inset-block-end:22px;inset-inline:0;text-align:center;
  font-size:12px;color:rgba(255,255,255,.65)}

@media(max-width:600px){
  .lightbox{grid-template-columns:1fr;gap:10px}
  .lightbox img{grid-column:1}
  .lb-nav{position:absolute;inset-block-start:50%;transform:translateY(-50%)}
  .lb-nav.prev{inset-inline-start:10px}
  .lb-nav.next{inset-inline-end:10px}
}

/* ══════════════════════════════════════════════════════════════
   جدول مقایسه

   به‌جای جدول معمولی، ستون‌های کارت‌مانند — ستون لومیر برجسته
   و کمی بلندتر از بقیه، تا نگاه اول رویش بیفتد.
   ══════════════════════════════════════════════════════════════ */

.cmp-sec{margin-top:clamp(60px,9vw,110px)}
.cmp-head{text-align:center;margin-bottom:30px}

/*
 * ⚠ تعداد ستون‌ها از نما می‌آید، نه auto-fit.
 * ترکیب یک ستون ثابت با repeat(auto-fit) در عمل ستون‌ها را
 * زیر هم می‌ریزد — همان به‌هم‌ریختگی که دیده شد.
 */
.cmp-grid{display:grid;gap:10px;align-items:stretch;
  grid-template-columns:var(--cmp-cols,1fr)}

.cmp-col{border-radius:18px;overflow:hidden;background:var(--surface);box-shadow:var(--up)}
.cmp-col.labels{background:transparent;box-shadow:none}

/* ستون لومیر برجسته */
.cmp-col.us{box-shadow:var(--up2);
  background:linear-gradient(175deg,var(--raised),var(--surface));
  transform:translateY(-10px);
  position:relative;z-index:2}
.cmp-col.us::before{content:"";position:absolute;inset:0;border-radius:18px;
  box-shadow:inset 0 0 0 2px rgba(246,75,41,.35);pointer-events:none}

.cmp-cell{display:grid;place-items:center;min-height:54px;padding:12px 10px;
  font-size:13px;text-align:center;color:var(--tx2);
  border-bottom:1px solid rgba(128,138,155,.12)}
.cmp-cell:last-child{border-bottom:none}

.cmp-col.labels .cmp-cell{justify-items:start;text-align:start;font-weight:600;
  color:var(--tx);border-bottom-color:transparent}

.cmp-cell.head{min-height:64px;font-size:12.5px;font-weight:800;color:var(--tx3);
  background:var(--sunken);box-shadow:var(--in2)}
.cmp-col.us .cmp-cell.head{background:transparent;box-shadow:none}

.cmp-badge{display:inline-flex;align-items:center;padding:7px 18px;border-radius:99px;
  font-size:13px;font-weight:800;color:#fff;direction:ltr;
  background:linear-gradient(145deg,var(--flame2),var(--flame));
  box-shadow:0 6px 16px -7px rgba(246,75,41,.8)}

.cmp-cell svg{width:22px;height:22px;fill:none;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
.cmp-cell svg.yes{stroke:var(--ok)}
.cmp-cell svg.yes.dim{stroke:var(--tx3);opacity:.55}
.cmp-cell svg.no{stroke:var(--tx3);opacity:.4}
.cmp-col.us .cmp-cell b{font-size:14px;color:var(--flame);font-weight:800}

@media(max-width:760px){
  /*
   * روی موبایل، همه‌چیز در یک باکس جمع می‌شود.
   *
   * ستون‌های رقبا کنار هم جا نمی‌شوند و زیر هم افتادنشان
   * جدول را بی‌معنا می‌کند. پس فقط ستون لومیر می‌ماند و عنوان
   * هر ردیف کنار مقدارش می‌آید.
   */
  .cmp-grid{--cmp-cols:1fr !important;gap:0}

  .cmp-col.labels{display:none}
  .cmp-col:not(.us){display:none}          /* ستون‌های رقبا پنهان */

  .cmp-col.us{transform:none;border-radius:18px}
  .cmp-col.us .cmp-cell.head{min-height:60px}

  .cmp-col.us .cmp-cell{display:grid;grid-template-columns:1fr auto;
    align-items:center;width:100%;text-align:end;padding:13px 16px;min-height:0}

  .cmp-col.us .cmp-cell::before{content:attr(data-label);justify-self:start;
    font-size:12.5px;color:var(--tx2);font-weight:600;text-align:start}

  .cmp-col.us .cmp-cell.head::before{content:none}
}

/* بوم موبایل صفحه‌ی قالب روی تبلت (۷۶۱ تا ۹۰۰): همان جدول تک‌ستونی گوشی */
.prod-page.pz-m .cmp-grid{--cmp-cols:1fr !important;gap:0}
.prod-page.pz-m .cmp-col.labels,
.prod-page.pz-m .cmp-col:not(.us){display:none}
.prod-page.pz-m .cmp-col.us{transform:none;border-radius:18px}
.prod-page.pz-m .cmp-col.us .cmp-cell.head{min-height:60px}
.prod-page.pz-m .cmp-col.us .cmp-cell{display:grid;grid-template-columns:1fr auto;
  align-items:center;width:100%;text-align:end;padding:13px 16px;min-height:0}
.prod-page.pz-m .cmp-col.us .cmp-cell::before{content:attr(data-label);justify-self:start;
  font-size:12.5px;color:var(--tx2);font-weight:600;text-align:start}
.prod-page.pz-m .cmp-col.us .cmp-cell.head::before{content:none}

/* ══════════════════════════════════════════════════════════════
   هیروی چرخشی

   آیتم‌ها بزرگ و دقیقاً وسط صفحه. متن معرفی روی لایه‌ی بالاتر،
   چسبیده به لبه‌ی راست (در چیدمان راست‌به‌چپ یعنی inline-start).

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

.hero3d{position:relative;height:100vh;overflow:hidden}

/*
 * ── بوم ──
 * همه‌ی عنصرهای قابل چیدمان روی یک بوم ۱۹۲۰×۱۰۰۰ (موبایل ۳۹۰×۷۸۰) با
 * اندازه‌های ثابت چیده می‌شوند؛ canvas.js بوم را زیر هدر، وسط، و یکجا به
 * اندازه‌ی صفحه‌ی بازدیدکننده بزرگ یا کوچک می‌کند. داخل بوم هیچ اندازه‌ای
 * به عرض یا ارتفاع صفحه (vw/vh) وابسته نیست — وگرنه روی هر دستگاه چیدمان
 * فرق می‌کرد.
 */
.hero-canvas{position:absolute;top:0;left:0;width:1920px;height:1000px;box-sizing:border-box;
  transform-origin:0 0;
  transform:translate(var(--hc-x,0px),var(--hc-y,0px)) scale(var(--hk,1));
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  padding:40px 64px}

/* ── متن معرفی، لبه‌ی راست ── */
.hero3d-txt{position:absolute;inset-block-start:50%;transform:translateY(-50%);
  inset-inline-start:64px;          /* راست‌به‌چپ ← سمت راست */
  max-width:400px;z-index:5}
.hero3d-txt .t{font-size:52px}

/* ── راهنما، بالای آیتم‌ها ── */
.hero3d-hint{font-size:12px;color:var(--tx3);text-align:center;
  margin-bottom:6px;animation:hintFade 2.4s ease-in-out infinite}
@keyframes hintFade{50%{opacity:.35;transform:translateY(4px)}}

/* ── صحنه ── */
.hero3d-stage{position:relative;width:100%;height:540px;touch-action:pan-y}
.hero3d-ring{position:absolute;inset:0}

.hero3d-item{
  position:absolute;inset-block-start:50%;inset-inline-start:50%;
  width:520px;
  transform:translate(50%,-50%);
  transition:transform 1s var(--ez), opacity .8s var(--ez), filter .8s var(--ez);
  will-change:transform,opacity,filter;cursor:pointer;
}
[dir="ltr"] .hero3d-item{transform:translate(-50%,-50%)}

.hero3d-item img{width:100%;height:auto;display:block;pointer-events:none}

.hero3d-item.center{z-index:3;opacity:1;filter:none}
.hero3d-item.side{z-index:2;opacity:.4;filter:blur(6px) saturate(.6)}
.hero3d-item.far{z-index:1;opacity:0;pointer-events:none}

/* سایه‌ی جداگانه، زیر خودِ آیتم */
.hero3d-item::after{
  content:"";position:absolute;inset-block-end:1%;inset-inline-start:50%;
  width:56%;height:34px;margin-inline-start:-28%;
  border-radius:50%;background:rgba(96,106,126,.45);filter:blur(19px);
  transition:opacity .8s var(--ez),transform .8s var(--ez);
  opacity:0;transform:scale(.5);
}
[data-theme="dark"] .hero3d-item::after{background:rgba(0,0,0,.75)}
.hero3d-item.center::after{opacity:1;transform:scale(1)}
.hero3d-item.side::after{opacity:.25;transform:scale(.65)}

/*
 * شناور شدن تصویر وسط — همه‌ی تصاویر به یک اندازه (۱۵ پیکسل بوم).
 * (در نسخه‌ی ۴۰ محافظ چیدمان روی بعضی تصاویر جابه‌جایی می‌گذاشت و دامنه‌ی
 * حرکت آن‌ها بیشتر می‌شد؛ آن محافظ برداشته شده.)
 */
@keyframes bob{50%{translate:0 -15px}}
.hero3d-item.center > img{animation:bob 4s ease-in-out infinite}

/* ── عنوان آیتم، وسط صفحه زیر تصویر ── */
.hero3d-info{text-align:center;transition:opacity .5s var(--ez),transform .5s var(--ez)}
.hero3d-info.out{opacity:0;transform:translateY(12px)}
.hero3d-info b{display:block;font-size:28px;font-weight:800}
.hero3d-info span{display:block;font-size:14px;color:var(--tx2);margin-top:6px}

/* ── دکمه‌ها، دو طرف آیتم مرکزی ── */
.hero3d-arrow{position:absolute;inset-block-start:50%;transform:translateY(-50%);z-index:6;
  width:46px;height:46px;border-radius:50%;font-size:21px;color:var(--tx2);
  background:var(--surface);box-shadow:var(--up);
  transition:transform .4s var(--ez),color .4s var(--ez)}
.hero3d-arrow:hover{color:var(--flame);transform:translateY(-50%) scale(1.1)}
.hero3d-arrow:active{box-shadow:var(--in)}
/* فاصله‌ی فلش‌ها از پنل قابل تنظیم است */
.hero3d-arrow.prev{inset-inline-start:var(--hero-arrow-gap,28%)}
.hero3d-arrow.next{inset-inline-end:var(--hero-arrow-gap,28%)}

.hero3d-dots{display:flex;gap:7px;justify-content:center}
.hero3d-dots i{width:7px;height:7px;border-radius:50%;background:var(--tx3);
  transition:all .4s var(--ez);cursor:pointer}
.hero3d-dots i.on{width:24px;border-radius:99px;background:var(--flame)}




/* ══════════════════════════════════════════════════════════════
   هیروی ثابت و لایه‌ی روی آن

   هیرو با اسکرول سر جایش می‌ماند و بخش‌های بعدی از پایین روی آن
   می‌آیند — با سایه‌ای که روی هیرو می‌افتد، انگار واقعاً رویش
   نشسته‌اند.

   روش: هیرو چسبان با z-index پایین، لایه‌ی بعدی با z-index بالاتر
   و سایه‌ی رو به بالا.
   ══════════════════════════════════════════════════════════════ */

.hero-pin{position:sticky;inset-block-start:0;z-index:0;height:100vh;min-height:100vh}


/*
 * کادر روی هیرو.
 *
 * پس‌زمینه و سایه روی لایه‌ی ::before هستند نه خود کادر — چون
 * تصویر لبه بالای کادر می‌نشیند و با overflow:clip بریده می‌شد.
 *
 * padding و margin منفی پایین، لبه‌ی زیرین را به زیر فوتر می‌برد
 * تا خط افقی روی صفحه دیده نشود.
 */
.stack{position:relative;z-index:2;overflow:visible;
  padding-bottom:160px;margin-bottom:-160px}

.stack::before{content:"";position:absolute;inset:0;z-index:0;
  border-radius:clamp(24px,4vw,44px) clamp(24px,4vw,44px) 0 0;
  background:var(--bg);
  box-shadow:0 -26px 60px -22px rgba(80,90,110,.55),
             0 -2px 0 rgba(255,255,255,.5) inset}

[data-theme="dark"] .stack::before{box-shadow:0 -26px 60px -22px rgba(0,0,0,.8),
  0 -2px 0 rgba(255,255,255,.05) inset}

/* ── ویدیوی پس‌زمینه ── */
.stack-bg{position:sticky;inset-block-start:0;z-index:0;
  border-radius:clamp(24px,4vw,44px) clamp(24px,4vw,44px) 0 0;
  overflow:hidden;
  height:100vh;width:100%;overflow:hidden;
  margin-bottom:-100vh;
  border-radius:clamp(24px,4vw,44px) clamp(24px,4vw,44px) 0 0}          /* از جریان خارج می‌شود تا محتوا رویش بیاید */

.stack-bg video{width:100%;height:100%;object-fit:cover;display:block;
  pointer-events:none}

.stack-veil{position:absolute;inset:0;pointer-events:none}

.stack-inner{position:relative;z-index:2}

/* بدون ویدیو، پس‌زمینه‌ی ساده */
.stack.plain{background:var(--bg)}

@media(max-width:900px){
  .stack{border-radius:clamp(20px,5vw,30px) clamp(20px,5vw,30px) 0 0}
}

@media(prefers-reduced-motion:reduce){
  .hero-pin{position:relative}
  .stack-bg video{display:none}
}

/* ── خوانایی متن روی ویدیوی پس‌زمینه ──
   وقتی پشت محتوا ویدیو هست، کارت‌ها نیمه‌شفاف می‌شوند تا
   ویدیو دیده شود، ولی متن همچنان خوانا بماند. */

.stack-inner.on-video .card{
  background:color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2)}

.stack-inner.on-video .wrap-scroll,
.stack-inner.on-video .cmp-col{
  background:color-mix(in srgb, var(--surface) 84%, transparent);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px)}

/* عنوان‌ها کمی پررنگ‌تر، تا روی تصویر گم نشوند */
.stack-inner.on-video h2,
.stack-inner.on-video .t{text-shadow:0 2px 18px rgba(0,0,0,.18)}
[data-theme="dark"] .stack-inner.on-video h2,
[data-theme="dark"] .stack-inner.on-video .t{text-shadow:0 2px 20px rgba(0,0,0,.6)}

/* ══════════════════════════════════════════════════════════════
   اصلاحات نسخه‌ی موبایل
   ══════════════════════════════════════════════════════════════ */

@media(max-width:900px){

  /*
   * ── هدر ──
   * برند سمت راست، ابزارها سمت چپ.
   * در چیدمان راست‌به‌چپ، ترتیب طبیعی برند را راست می‌گذارد؛
   * با margin خودکار، بقیه به لبه‌ی چپ رانده می‌شوند.
   */
  .hdr-in{height:58px;padding:0 14px;gap:8px}
  .hdr-side{gap:6px;margin-inline-start:auto;margin-inline-end:0;order:2}
  .hdr-brand{order:1}
  .hdr-side .gh,
  .hdr-side .cta,
  .hdr-side form .gh{white-space:nowrap;padding:7px 13px;font-size:12px;
    min-height:34px;line-height:1}
  .hdr-side .cta .k{display:none}
  .hdr-user{padding:4px 10px 4px 4px}
  .hdr-user b{max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .theme-btn,.burger{width:32px;height:32px;border-radius:10px;font-size:14px}
  .hdr-brand{font-size:15px}
  .hdr-logo{width:29px;height:29px;font-size:13px}

  /*
   * ── هیرو موبایل: بوم ۳۹۰×۷۸۰ ──
   * اول آیتم‌ها، بعد متن. دو فاصله‌ی کشسان بالا و پایین محتوا را وسط بوم
   * می‌نشانند؛ همه‌ی اندازه‌ها ثابت (همان مقادیر صفحه‌ی ۳۹۰ پیکسلی).
   */
  /* 100svh: ارتفاع کوچک صفحه‌ی گوشی — با جمع و باز شدن نوار آدرس، بوم تکان نمی‌خورد */
  .hero-pin{position:sticky;inset-block-start:0;height:100vh;height:100svh;min-height:100vh;min-height:100svh}
  .hero3d{height:100vh;height:100svh}

  .hero-canvas{width:390px;height:780px;justify-content:flex-start;gap:18px;
    padding:18px 16px 28px}
  .hero-canvas::before,
  .hero-canvas::after{content:"";flex:1 1 0;min-height:0}
  /* فاصله‌ی gap کنار دو فاصله‌ی کشسان خنثی می‌شود */
  .hero-canvas::before{order:-1;margin-block-end:-18px}
  .hero-canvas::after{order:99;margin-block-start:-18px}

  .hero3d-hint{order:0}
  .hero3d-stage{order:1;height:300px}
  .hero3d-info{order:2}
  .hero3d-dots{order:3}
  .hero3d-txt{order:4;position:static;transform:none;max-width:none;
    text-align:center;margin-block-start:8px}

  .hero3d-item{width:242px}
  .hero3d-info b{font-size:18px}
  .hero3d-txt .t{font-size:27px}

  /* فلش‌ها روی موبایل نزدیک لبه (پیش‌فرض ۸٪؛ از ویرایشگر قابل تغییر) */
  .hero3d-arrow.prev{inset-inline-start:var(--hero-arrow-gap,8%)}
  .hero3d-arrow.next{inset-inline-end:var(--hero-arrow-gap,8%)}
}

/* روی صفحه‌های خیلی کوتاه، چسبندگی مزاحم است */
@media(max-height:560px){
  .hero-pin{position:relative;height:auto;min-height:auto}
}

/* ══════════════════════════════════════════════════════════════
   باکس با تصویر پس‌زمینه

   تصویر بالای کارت می‌نشیند و از پایین به رنگ کارت محو می‌شود،
   تا متن رویش خوانا بماند — بدون اینکه لازم باشد تصویر تیره شود.
   ══════════════════════════════════════════════════════════════ */

.picbox{position:relative;overflow:hidden;padding:0}

.picbox-img{position:absolute;inset-block-start:0;inset-inline:0;height:62%;
  background-size:cover;background-position:center;
  /* محو تدریجی به پایین */
  -webkit-mask-image:linear-gradient(180deg,#000 45%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 45%,transparent 100%);
  transition:transform .8s var(--ez)}
.picbox:hover .picbox-img{transform:scale(1.05)}

.picbox-body{position:relative;z-index:1;padding:22px}

/* وقتی تصویر هست، محتوا پایین‌تر می‌نشیند تا روی تصویر نیفتد */
.picbox.has-pic .picbox-body{padding-top:clamp(120px,22vw,190px)}

/* روکش هم‌رنگ کارت، تا انتهای تصویر کاملاً محو شود */
.picbox.has-pic::after{content:"";position:absolute;inset-block-start:0;inset-inline:0;
  height:62%;pointer-events:none;
  background:linear-gradient(180deg,transparent 40%,var(--surface) 100%)}

@media(max-width:600px){
  .picbox.has-pic .picbox-body{padding-top:clamp(100px,32vw,160px)}
}

/* ── ویدیوی پس‌زمینه‌ی هیرو ── */

.hero3d.has-bg{isolation:isolate}

.hero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-bg video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.hero-bg-veil{position:absolute;inset:0;pointer-events:none}

/* آیتم‌های هیرو: بدون قاب آبی هنگام لمس */
.hero3d-item,.hero3d-arrow,.hero3d-dots i,.pcard,.pcard-media{
  -webkit-tap-highlight-color:transparent;
  tap-highlight-color:transparent}
.hero3d-item:focus,.hero3d-item:focus-visible{outline:none}

/* ══════════ کارت قالب روی دستگاه لمسی ══════════ */

@media(hover:none){
  /* تصویر پوستر باید دیده شود؛ ویدیو فقط با لمس */
  .pcard-media img{opacity:1}
  .pcard-media video{opacity:0}

  /* لمس = همان اثر هاور: کارت بلند می‌شود و ویدیو پخش */
  .pcard.touched{transform:translateY(-4px);box-shadow:var(--up2)}
  .pcard.touched .pcard-media video{opacity:1}
  .pcard.touched .pcard-media img{opacity:0}
}

/* ══════════════════════════════════════════════════════════════
   قاب‌ها روی موبایل

   در ابتدا کوچک‌اند. با لمس، بزرگ می‌شوند و داخلشان قابل استفاده
   می‌شود. قاب لپ‌تاپ هنگام باز شدن ۹۰ درجه می‌چرخد تا در صفحه‌ی
   عمودی جا شود — کاربر گوشی را می‌چرخاند و نسخه‌ی دسکتاپ را
   درست می‌بیند. خودِ سایت داخل قاب نمی‌چرخد.
   ══════════════════════════════════════════════════════════════ */


/* هنگام باز بودن قاب، صفحه اسکرول نشود */
/*
 * ⚠ سرریز افقی همیشه بریده می‌شود.
 *
 * قاب چرخیده و بزرگ‌شده از لبه‌ی صفحه بیرون می‌زند و صفحه را
 * پهن‌تر می‌کند؛ بعد از بستنش، یک فضای خالی کنار صفحه می‌ماند.
 *
 * clip به‌جای hidden، چون hidden چسبندگی هدر را از کار می‌اندازد.
 */
html,body{overflow-x:clip}

body.frame-open{overflow:hidden}



/* ══════════════════════════════════════════════════════════════
   پرسش‌های متداول

   باز شدن نرم با شبکه‌ی صفر تا یک — این تنها راهی است که ارتفاع
   ناشناخته را بدون اندازه‌گیری دستی، روان باز می‌کند.

   ارتفاع ظرف برابر بلندترین پاسخ رزرو می‌شود (در جاوااسکریپت)،
   پس بخش‌های پایین‌تر با باز و بسته شدن جابه‌جا نمی‌شوند.
   ══════════════════════════════════════════════════════════════ */

.faq-list{display:flex;flex-direction:column;gap:10px;
  transition:padding-bottom .5s var(--ez)}

.faq-item{padding:0;overflow:hidden}

.faq-head{display:flex;align-items:center;gap:12px;width:100%;
  padding:16px 20px;text-align:start;font-size:14px;font-weight:700;
  color:var(--tx);cursor:pointer}

.faq-mark{position:relative;width:16px;height:16px;flex:0 0 auto;
  margin-inline-start:auto}
.faq-mark::before,.faq-mark::after{content:"";position:absolute;inset-block-start:50%;
  inset-inline-start:0;width:100%;height:2px;border-radius:2px;background:var(--flame);
  transform:translateY(-50%);transition:transform .45s var(--ez),opacity .35s var(--ez)}
.faq-mark::after{transform:translateY(-50%) rotate(90deg)}
.faq-item.on .faq-mark::after{transform:translateY(-50%) rotate(0);opacity:0}

.faq-body{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .5s var(--ez)}
.faq-body > p{overflow:hidden;margin:0;padding:0 20px;
  font-size:13px;color:var(--tx2);line-height:2.1;
  transition:padding .5s var(--ez)}

.faq-item.on .faq-body{grid-template-rows:1fr}
.faq-item.on .faq-body > p{padding:0 20px 18px}

/* هنگام اندازه‌گیری، پاسخ باز است ولی دیده نمی‌شود */
.faq-item.measuring .faq-body{grid-template-rows:1fr}
.faq-item.measuring{visibility:hidden;position:absolute;pointer-events:none}

/* ══════════ چیدمان صفحه‌ی محصول روی موبایل ══════════ */


/* باکس خرید وقتی به بعد از تصاویر منتقل شده */
.buybox.moved{max-width:520px;margin-inline:auto;margin-top:26px}

/* ══════════════════════════════════════════════════════════════
   لبه‌ی تصویری بالای کادر

   تصویر PNG روی لبه‌ی بالای کادر می‌نشیند — نیمی بیرون، نیمی
   داخل. سایه‌اش رو به بالا می‌افتد، یعنی روی هیرو، نه روی خود
   کادر — چون قرار است بخشی از لبه به‌نظر برسد، نه چیزی که رویش
   گذاشته شده.

   ⚠ کادر overflow:clip دارد، پس لبه نمی‌تواند بیرون بزند. برای
   همین با موقعیت مطلقِ بیرونی و z-index بالاتر کشیده می‌شود.
   ══════════════════════════════════════════════════════════════ */

/*
 * ⚠ کادر باید هم گوشه‌ی گرد داشته باشد و هم اجازه دهد لبه بیرون
 * بزند. این دو با overflow با هم جمع نمی‌شوند.
 *
 * راه‌حل: بریدن گوشه‌ها به خودِ پس‌زمینه سپرده می‌شود (یک لایه‌ی
 * جداگانه با گوشه‌ی گرد)، و کادر خودش بدون برش می‌ماند.
 */


[data-theme="dark"] .stack::before{
  box-shadow:0 -26px 60px -22px rgba(0,0,0,.8),
             0 -2px 0 rgba(255,255,255,.05) inset}

/* ویدیوی پس‌زمینه هم باید داخل گوشه‌های گرد بماند */



/* ══════════ رفع خط لبه‌ی پایین کادر ══════════
   کادر با فوتر تمام می‌شد و لبه‌اش به‌صورت یک خط افقی دیده
   می‌شد. با کشیدن پس‌زمینه تا زیر فوتر، آن خط پنهان می‌شود. */


/* ══════════════════════════════════════════════════════════════
   قاب‌های پیش‌نمایش

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

/* ستون قاب‌ها: عنوان بالا، قاب‌ها زیرش */
.frames-col{display:flex;flex-direction:column;gap:14px;min-width:0}

.frames-head{text-align:center;font-size:clamp(16px,2vw,20px);font-weight:800;
  letter-spacing:-.01em;color:var(--tx);margin:0}

.frames{position:relative;display:flex;align-items:flex-end;justify-content:center;
  gap:16px;flex-wrap:nowrap;max-width:520px;margin-inline:auto}

.frames .frame-hint{position:absolute;inset-block-end:-26px;inset-inline:0;
  text-align:center;font-size:11.5px;color:var(--tx3)}

/* ══════════════════════════════════════════════════════════════
   قاب‌های دستگاه — نزدیک به سخت‌افزار واقعی

   ⚠ اندازه‌ی جعبه‌ی صفحه‌ها همان قبلی است؛ اسکریپت ضریب iframe را از
   پهنای صفحه حساب می‌کند و نباید عوض شود.

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

.laptop,.phone{
  --metal-a:#E4E7EC; --metal-b:#B9BEC7; --metal-edge:#9EA4AE;
  --bezel:#0C0F14;}
[data-theme="dark"] .laptop,[data-theme="dark"] .phone{
  --metal-a:#5A606B; --metal-b:#2F333A; --metal-edge:#23262C;}

/* ── لپ‌تاپ ── */
.laptop{width:clamp(240px,34vw,360px);flex:0 0 auto;position:relative}

.laptop-lid{position:relative;border-radius:13px 13px 4px 4px;padding:9px 9px 13px;
  background:var(--bezel);
  box-shadow:
    0 0 0 1.5px var(--metal-b),              /* لبه‌ی فلزی درب */
    0 0 0 2.5px var(--metal-edge),
    0 22px 34px -18px rgba(0,0,0,.55)}

/* دوربین بالای صفحه */
.laptop-cam{position:absolute;inset-block-start:3.5px;left:50%;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;z-index:2;
  background:radial-gradient(circle at 35% 35%,#3A4658,#0A0D12 70%);
  box-shadow:0 0 0 1px rgba(255,255,255,.05)}

.laptop-screen{aspect-ratio:16/10;border-radius:3px;overflow:hidden;
  background:#10141A;position:relative}

/* بازتاب نور روی شیشه */
.laptop-screen::after,.phone-screen::after{content:"";position:absolute;inset:0;z-index:2;
  pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.02) 38%,transparent 40%)}

/* بدنه‌ی پایین: کمی پهن‌تر از درب، با لبه‌ی جلو و جای انگشت */
.laptop-base{position:relative;height:13px;margin-inline:-7%;
  border-radius:2px 2px 14px 14px;
  background:linear-gradient(180deg,var(--metal-a) 0%,var(--metal-b) 70%,var(--metal-edge) 100%);
  box-shadow:0 10px 18px -8px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.55)}

.laptop-notch{position:absolute;inset-block-start:0;left:50%;transform:translateX(-50%);
  width:17%;height:5px;border-radius:0 0 7px 7px;
  background:linear-gradient(180deg,var(--metal-edge),var(--metal-b));
  box-shadow:inset 0 1px 2px rgba(0,0,0,.25)}

/* ── موبایل ── */
.phone{width:clamp(78px,11vw,116px);flex:0 0 auto;aspect-ratio:9/19.5;
  position:relative;border-radius:19px;padding:4px;
  background:var(--bezel);
  box-shadow:
    0 0 0 1.5px var(--metal-a),             /* لبه‌ی فلزی */
    0 0 0 2.5px var(--metal-edge),
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 20px 30px -14px rgba(0,0,0,.55)}

.phone-screen{width:100%;height:100%;border-radius:15px;overflow:hidden;
  background:#10141A;position:relative}

/* دکمه‌های کناری — بیرون از بدنه */
.phone-btn{position:absolute;width:2.5px;border-radius:2px;
  background:linear-gradient(90deg,var(--metal-edge),var(--metal-a))}
.phone-btn--power{inset-inline-start:-3.5px;inset-block-start:26%;height:13%}
.phone-btn--vol1{inset-inline-end:-3.5px;inset-block-start:21%;height:8%}
.phone-btn--vol2{inset-inline-end:-3.5px;inset-block-start:31%;height:8%}

/* ── محتوای داخل قاب‌ها ──
   پهنای iframe به پیکسل است تا سایتِ داخلش با عرض درست رندر شود.
   ضریب کوچک‌نمایی را جاوااسکریپت از عرض واقعی قاب حساب می‌کند. */
.frame iframe{border:0;display:block;pointer-events:none;transform-origin:0 0}
[dir="rtl"] .frame iframe{transform-origin:100% 0}
/*
 * اندازه‌ی iframe را جاوااسکریپت تعیین می‌کند، نه اینجا.
 * ارتفاع باید از نسبت واقعی قاب بیاید، وگرنه پایین سایت بریده
 * می‌شود. مقدارهای زیر فقط تا وقتی اسکریپت برسد کار می‌کنند.
 */
.laptop iframe{width:1280px;height:800px}
.phone  iframe{width:390px;height:845px}

.frame img{width:100%;height:100%;object-fit:cover;object-position:top}

.frame-empty{position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  padding:14px;font-size:10.5px;color:var(--tx3);line-height:1.9}

/* ── بزرگ‌نمایی روی دسکتاپ ── */
/*
 * ⚠ لایه با تأخیر پایین می‌آید.
 *
 * بدون تأخیر، لحظه‌ای که کلاس zoom برداشته می‌شود لایه فوراً
 * پایین می‌رود در حالی که قاب هنوز در حال کوچک شدن است — و یک
 * آن، زیر قاب کناری می‌افتد.
 */
.frame{position:relative;z-index:1;
  transition:transform .55s var(--ez), z-index 0s linear .55s;
  will-change:transform}

.frame.zoom{z-index:70;
  transition:transform .55s var(--ez), z-index 0s}
.laptop.zoom{transform:scale(2.6)}
.phone.zoom{transform:scale(2.8)}
.frame.zoom iframe{pointer-events:auto}

.frames-veil{position:fixed;inset:0;z-index:60;background:rgba(20,26,34,.45);
  backdrop-filter:blur(6px);opacity:0;pointer-events:none;
  transition:opacity .45s var(--ez)}
.frames-veil.on{opacity:1}

@media(max-width:1000px){
  .prod-top{display:flex;flex-direction:column;gap:26px}
  .prod-top .frames{order:1;margin-bottom:30px}
  .prod-top .prod-intro{order:2}

  .laptop{width:min(58vw,300px)}
  .phone{width:min(18vw,86px)}
}

/* ══════════════════════════════════════════════════════════════
   قاب‌ها روی دستگاه لمسی

   قاب موبایل با لمس بزرگ می‌شود. ⚠ از جای خودش بیرون نمی‌رود —
   فقط transform. رفت و برگشت یک مسیرند، پس بستن هم نرم است.

   قاب لپ‌تاپ نمی‌چرخد؛ دکمه‌ی «حالت دسکتاپ» دارد که نسخه‌ی
   دسکتاپ را تمام‌صفحه و افقی باز می‌کند.
   ══════════════════════════════════════════════════════════════ */

@media(hover:none){
  .frame.zoom{transform:none}          /* بزرگ‌نمایی هاور خاموش */
  .frames .frame-hint{display:none}

  .phone{cursor:pointer}

  .frame.open{z-index:170;
    transition:transform .6s cubic-bezier(.22,.61,.36,1);
    will-change:transform;backface-visibility:hidden}

  .frame.open iframe{pointer-events:auto;touch-action:auto}

  .frames-veil.on{pointer-events:auto}
}

/* ── دکمه‌ی حالت دسکتاپ روی صفحه‌ی لپ‌تاپ — فقط لمسی ── */
.desk-open{display:none}

@media(hover:none){
  .desk-open{position:absolute;inset:0;z-index:3;display:grid;place-content:center;
    justify-items:center;gap:8px;border:0;cursor:pointer;
    font-size:12px;font-weight:800;color:#fff;
    background:rgba(12,17,24,.28);
    -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}

  .desk-open svg{width:26px;height:26px;padding:9px;box-sizing:content-box;
    border-radius:14px;background:linear-gradient(145deg,var(--flame2),var(--flame));
    box-shadow:0 8px 20px -8px rgba(246,75,41,.9)}

  .desk-open:active svg{transform:scale(.94)}
}

/* دکمه‌ی بستن قاب بزرگ‌شده — نارنجی تا دیده شود */
.frame-close{position:fixed;z-index:180;inset-block-start:18px;inset-inline-end:18px;
  width:46px;height:46px;border-radius:15px;border:0;font-size:20px;color:#fff;
  background:linear-gradient(145deg,var(--flame2),var(--flame));
  box-shadow:0 8px 22px -8px rgba(246,75,41,.9);
  display:none;place-items:center}
.frame-close:active{transform:scale(.93)}
body.frame-open .frame-close{display:grid}

/* ── صفحه‌ی حالت دسکتاپ ── */
.desk-mode{position:fixed;inset:0;z-index:200;background:#000;overflow:hidden}

.desk-mode iframe{position:absolute;top:0;left:0;border:0;display:block;
  transform-origin:0 0;touch-action:auto}

.desk-close{position:absolute;z-index:3;top:max(12px, env(safe-area-inset-top));
  inset-inline-end:max(12px, env(safe-area-inset-right));
  width:44px;height:44px;border-radius:14px;border:0;font-size:19px;color:#fff;
  background:linear-gradient(145deg,var(--flame2),var(--flame));
  box-shadow:0 8px 22px -8px rgba(246,75,41,.9)}

/* گوشی عمودی مانده (آیفون): راهنما روی سایت */
.desk-rotate{position:absolute;inset:0;z-index:2;display:none;place-content:center;
  justify-items:center;gap:12px;font-size:15px;font-weight:800;color:#fff;
  background:rgba(0,0,0,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.desk-rotate span{font-size:44px;animation:deskTurn 1.8s var(--ez) infinite}
.desk-mode.portrait .desk-rotate{display:grid}

@keyframes deskTurn{0%,30%{transform:rotate(0)} 60%,100%{transform:rotate(90deg)}}

body.desk-on{overflow:hidden}


/*
 * ⚠ سرریز افقی همیشه بریده می‌شود.
 *
 * قاب چرخیده و بزرگ‌شده از لبه‌ی صفحه بیرون می‌زند و صفحه را
 * پهن‌تر می‌کند؛ بعد از بستنش، یک فضای خالی کنار صفحه می‌ماند.
 *
 * clip به‌جای hidden، چون hidden چسبندگی هدر را از کار می‌اندازد.
 */
html,body{overflow-x:clip}

body.frame-open{overflow:hidden}

/* باکس خرید: روی دسکتاپ در ستون معرفی، روی موبایل بعد از تصاویر */
.buy-mobile{display:none}
@media(max-width:1000px){
  .buy-desktop{display:none}
  .buy-mobile{display:block}
}

/* ══════════════════════════════════════════════════════════════
   بوم صفحه‌ی قالب

   canvas.js کل صفحه‌ی قالب را با zoom یکجا بزرگ و کوچک می‌کند:
   دسکتاپ روی پهنای ثابت ۱۲۰۰ (بزرگ‌تر نمی‌شود)، موبایل روی ۳۹۰.
   پس داخل صفحه هیچ اندازه‌ای نباید به عرض صفحه (vw) وابسته باشد —
   مقادیر زیر همان اندازه‌هایی است که قبلاً روی صفحه‌ی ۱۲۰۰ و ۳۹۰
   پیکسلی دیده می‌شد، حالا ثابت.

   مرورگری که zoom ندارد، کلاس pz نمی‌گیرد و همان صفحه‌ی واکنش‌گرای
   قبلی را می‌بیند.
   ══════════════════════════════════════════════════════════════ */

.prod-page.pz{margin-inline:auto}
.prod-page.pz-d{width:1200px;--pad:40px}
.prod-page.pz-m{width:390px;--pad:16px}

.prod-page.pz-d .t{font-size:52px}
.prod-page.pz-m .t{font-size:28px}

.prod-page.pz-d .prod-top{padding-top:160px}
.prod-page.pz-m .prod-top{padding-top:110px}

.prod-page.pz-d > section[data-sec]{margin-top:80px !important}
.prod-page.pz-d > section.buy-mobile{margin-top:60px !important}
.prod-page.pz-d .cmp-sec{margin-top:110px}
.prod-page.pz-m > section[data-sec]{margin-top:50px !important}
.prod-page.pz-m > section.buy-mobile{margin-top:40px !important}
.prod-page.pz-m .cmp-sec{margin-top:60px}
/* عنوان جدول مقایسه اندازه‌ی درون‌خطی وابسته به عرض صفحه دارد (مشترک با صفحه‌ی اصلی) */
.prod-page.pz-d .cmp-head .t{font-size:38px !important}
.prod-page.pz-m .cmp-head .t{font-size:24px !important}
/* بخش بالا فاصله‌ی بالای خودش را دارد */
.prod-page.pz > section.prod-top{margin-top:0 !important}

.prod-page.pz-d .frames-head{font-size:20px}
.prod-page.pz-m .frames-head{font-size:16px}
.prod-page.pz-d .laptop{width:360px}
.prod-page.pz-d .phone{width:116px}
.prod-page.pz-m .laptop{width:226px}
.prod-page.pz-m .phone{width:70px}

/*
 * صفحه‌ی ۹۰۱ تا ۱۰۰۰ پیکسلی: قبلاً چیدمان تک‌ستونی می‌گرفت؛ حالا همان
 * چیدمان دسکتاپِ ویرایشگر است، فقط کوچک‌تر.
 */
@media(max-width:1000px){
  .prod-page.pz-d .prod-top{display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;align-items:center}
  .prod-page.pz-d .prod-top .frames{order:0;margin-bottom:0}
  .prod-page.pz-d .prod-top .prod-intro{order:0}
  .prod-page.pz-d .buy-desktop{display:block}
  .prod-page.pz-d .buy-mobile{display:none}
}

/* ══════════ تصویر لبه‌ی بالای کادر ══════════

   تصویر PNG روی لبه می‌نشیند و سایه‌اش روی هیرو می‌افتد — نه روی
   کادری که رویش است، چون بالاتر از آن قرار دارد.

   filter به‌جای box-shadow استفاده شده تا سایه شکل خودِ تصویر را
   بگیرد، نه شکل مستطیل عنصر. */

.stack-edge{position:absolute;inset-block-end:100%;inset-inline:0;
  display:block;pointer-events:none;z-index:1;
  background-repeat:repeat-x;
  background-position:bottom center;
  background-size:auto 100%;
  filter:drop-shadow(0 8px 18px rgba(60,70,90,.35))}

[data-theme="dark"] .stack-edge{filter:drop-shadow(0 8px 20px rgba(0,0,0,.7))}

@media(max-width:700px){
  .stack-edge{background-size:auto 70%}
}

/* ══════════════════════════════════════════════════════════════
   فوتر و پایان کادر

   دو مشکل با یک ریشه: کادر تا زیر فوتر کشیده می‌شود و ویدیوی
   چسبانش نزدیک انتها هنوز دیده می‌شود، پس هم روی فوتر می‌افتد
   و هم در شکاف بالای فوتر پیدا می‌شود.
   ══════════════════════════════════════════════════════════════ */

/* فوتر بالاتر از لایه‌ی کادر است — در تعریف اصلی‌اش بالا */

/*
 * محو شدن ویدیو پیش از رسیدن به فوتر.
 * بدون این، لبه‌ی ویدیو به‌صورت یک برش ناگهانی دیده می‌شود.
 */
.stack::after{content:"";position:absolute;inset-block-end:0;inset-inline:0;
  height:220px;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,transparent,var(--bg) 78%)}

/* روی موبایل، فاصله‌ی فوتر کمتر تا شکاف نماند */
@media(max-width:900px){
  .ftr{margin-top:40px}
  .stack::after{height:170px}
}

/* ══════════ پرده‌ی هماهنگ با تم ══════════
   با انتخاب «هماهنگ با تم»، رنگ پرده از همین متغیر می‌آید و
   با عوض شدن تم سایت، خودش عوض می‌شود. */

:root{--veil-rgb:232,234,238}
[data-theme="dark"]{--veil-rgb:12,17,24}

/*
 * کیفیت ویدیو.
 *
 * ⚠ تاری با filter اعمال می‌شود نه با کم کردن اندازه‌ی ویدیو،
 * پس فایل با کیفیت اصلی پخش می‌شود. مقیاس کوچکِ همراه تاری هم
 * فقط برای پوشاندن لبه‌های محوشده است، نه کم کردن کیفیت.
 */
.stack-bg video,.hero-bg video{
  image-rendering:auto;
  will-change:transform}

/* ══════════════════════════════════════════════════════════════
   لایه‌ی خوانایی هیرو

   بین ویدیوی پس‌زمینه و محتوا می‌نشیند. جای پیش‌فرضی ندارد —
   اندازه و موقعیتش را ویرایشگر چیدمان تعیین می‌کند و تا وقتی
   روشن نشود اصلاً دیده نمی‌شود.
   ══════════════════════════════════════════════════════════════ */

/*
 * ظرفِ هیرو باید position داشته باشد تا لایه نسبت به خودِ هیرو
 * جا بگیرد، و isolation تا لایه‌های منفی از هیرو بیرون نزنند.
 *
 * ⚠ به position هیچ عنصر دیگری دست نمی‌زنیم.
 * یک بار متن هیرو را که absolute بود به relative تبدیل کردم و
 * کل چیدمان پیش‌فرض به‌هم ریخت.
 */
.hero,.hero3d{position:relative;isolation:isolate}

/*
 * لایه بین پس‌زمینه و محتوا می‌نشیند: ویدیو در ۲- و لایه در ۱-.
 * چون محتوا در جریان عادی است، خودبه‌خود بالای هر دو می‌ماند
 * بدون اینکه لازم باشد position بگیرد.
 */
.hero-scrim{position:absolute;z-index:-1;display:none;pointer-events:none;
  border-radius:inherit}

/* ── حالت ویرایش ── */
.layout-editing .hero3d-item img,
.layout-editing .hero3d-arrow,
.layout-editing .hero3d-info,
.layout-editing .hero3d-dots,
.layout-editing .hero3d-hint,
.layout-editing .hero3d-txt .kicker,
.layout-editing .hero3d-txt h1,
.layout-editing .hero3d-txt .ld,
.layout-editing .hero3d-txt .cta{cursor:move}

/*
 * ویرایشگر چیدمان: مرز بوم.
 * هرچه داخل این قاب باشد، روی همه‌ی دستگاه‌ها دیده می‌شود (بوم یکجا بزرگ و
 * کوچک می‌شود). بیرون از آن ممکن است روی صفحه‌ای با نسبت دیگر بریده شود.
 */
.layout-editing [data-canvas="hero"]{outline:2px dashed rgba(246,75,41,.55);outline-offset:-2px}
.layout-canvas-tag{position:absolute;z-index:9998;pointer-events:none;font-size:11px;font-weight:700;
  padding:2px 8px;border-radius:0 0 8px 8px;color:#fff;background:var(--flame);display:none}
.layout-outline{position:fixed;inset-block-start:0;inset-inline-start:0;z-index:9999;
  display:none;pointer-events:none;border:2px dashed var(--flame);border-radius:8px;
  background:rgba(246,75,41,.07)}

/* ══════════════════════════════════════════════════════════════
   هدر — کد معرف و نسخه‌ی موبایل
   ══════════════════════════════════════════════════════════════ */

.hdr-code{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;
  border-radius:99px;font-size:11px;color:var(--tx3);
  background:var(--sunken);box-shadow:var(--in2);white-space:nowrap}
.hdr-code b{color:var(--flame);font-weight:800;font-size:11.5px}
.hdr-code .cp{font-size:10px;color:var(--tx3);padding:2px 6px;border-radius:7px;
  background:var(--surface);box-shadow:var(--up)}
.hdr-code .cp:hover{color:var(--flame)}

.mnav-theme{display:flex;align-items:center;gap:10px;width:100%;
  padding:13px 4px;font-size:14px;font-weight:600;color:var(--tx2);
  border-bottom:1px solid rgba(128,138,155,.14)}
.mnav-theme span{font-size:17px;color:var(--flame)}

@media(min-width:901px){
  .mnav-theme{display:none}
}

@media(max-width:900px){
  /* این‌ها روی موبایل در منوی همبرگری‌اند */
  .only-desktop{display:none}

  .hdr-code{padding:4px 8px;font-size:10px;gap:4px}
  .hdr-code .lbl{display:none}
  .hdr-code .cp{font-size:9px;padding:2px 5px}
}

/*
 * کد معرف روی همه‌ی اندازه‌ها می‌ماند.
 * روی صفحه‌ی خیلی باریک فقط خودِ کد دیده می‌شود، بدون برچسب
 * و بدون دکمه‌ی کپی — کپی از پنل کاربر در دسترس است.
 */
@media(max-width:400px){
  .hdr-code{padding:3px 7px;gap:3px}
  .hdr-code .cp{display:none}
  .hdr-user b{max-width:48px}
}

/* ══════════════════════════════════════════════════════════════
   ویرایشگر چیدمان — مشترک بین صفحه‌ی هیرو و صفحه‌ی قالب

   ⚠ اینجا نگه داشته می‌شود نه داخل نماها، وگرنه هر صفحه‌ای که
   استایل را نداشته باشد کاملاً بی‌شکل رندر می‌شود.
   ══════════════════════════════════════════════════════════════ */

.le{display:grid;grid-template-columns:330px 1fr;gap:18px;align-items:start}
@media(max-width:1000px){.le{grid-template-columns:1fr}}

/*
 * ستون تنظیمات: فهرست اسکرول‌شونده، دکمه‌ی ذخیره‌ی ثابت زیرش.
 *
 * ⚠ دکمه بیرون از ناحیه‌ی اسکرول است، نه چسبان روی آن.
 * با چسبان بودن، آخرین عنصرها زیرش گیر می‌کردند و با اسکرول هم
 * بیرون نمی‌آمدند — چون کل ستون با هم جابه‌جا می‌شد.
 */
.le-side{display:flex;flex-direction:column;
  height:calc(100vh - 150px);min-height:420px}

.le-list{flex:1 1 auto;min-height:0;overflow-y:auto;
  display:flex;flex-direction:column;gap:10px;
  padding:2px 4px 14px 2px}
.le-list::-webkit-scrollbar{width:4px}
.le-list::-webkit-scrollbar-thumb{background:var(--tx3);border-radius:99px}
.le-side::-webkit-scrollbar{width:4px}
.le-side::-webkit-scrollbar-thumb{background:var(--tx3);border-radius:99px}

.le-devices{display:flex;gap:6px;padding:5px;border-radius:14px;
  background:var(--sunken);box-shadow:var(--in2)}
.le-dev{flex:1;padding:9px;border-radius:10px;font-size:12.5px;font-weight:700;
  color:var(--tx3);transition:all .35s var(--ez)}
.le-dev.on{color:#fff;background:linear-gradient(145deg,var(--flame2),var(--flame));
  box-shadow:0 4px 12px -5px rgba(246,75,41,.7)}


.le-item[open] 
.le-pane{display:none}
.le-pane.on{display:block}

.le-group{font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--tx3);
  margin:14px 0 8px}

.le-row{display:grid;grid-template-columns:48px 1fr 46px;align-items:center;gap:10px;
  margin-bottom:9px}
.le-row span{font-size:11.5px;color:var(--tx2)}
.le-row b{font-size:11.5px;color:var(--cream);text-align:end;
  font-variant-numeric:tabular-nums}

.le-row input[type=range]{-webkit-appearance:none;appearance:none;height:5px;
  border-radius:99px;background:var(--sunken);box-shadow:var(--in2);outline:none}
.le-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;
  width:17px;height:17px;border-radius:50%;cursor:pointer;
  background:linear-gradient(145deg,var(--flame2),var(--flame));
  box-shadow:0 3px 8px -3px rgba(246,75,41,.8)}
.le-row input[type=range]::-moz-range-thumb{width:17px;height:17px;border:none;
  border-radius:50%;cursor:pointer;
  background:linear-gradient(145deg,var(--flame2),var(--flame))}

/* دکمه‌ی بازگشت یک عنصر به حالت اولیه */
.le-reset{margin-top:10px}

.le-save{flex:0 0 auto;padding:14px 2px 0;
  border-top:1px solid rgba(128,138,155,.16)}

.le-preview{position:sticky;inset-block-start:16px}

.le-frame{position:relative;border-radius:18px;overflow:hidden;
  background:var(--sunken);box-shadow:var(--up2);margin-inline:auto;
  transition:max-width .5s var(--ez),aspect-ratio .5s var(--ez);
  aspect-ratio:16/9}

/*
 * لایه‌ی مقیاس: صفحه با اندازه‌ی واقعی رندر و بعد کوچک می‌شود.
 *
 * ⚠ موقعیت فیزیکی است نه منطقی.
 * با inset-inline در صفحه‌ی راست‌به‌چپ، جعبه‌ی ۱۹۲۰ پیکسلی به
 * سمت اشتباه می‌رفت و محتوا از قاب بیرون می‌زد.
 */
.le-scale{position:absolute;top:0;left:0;transform-origin:0 0}

.le-scale iframe{border:0;display:block}

/* حالت موبایل: قاب باریک و بلند — نسبت دقیق را اسکریپت از اندازه‌ی انتخاب‌شده می‌گذارد */
.le-frame.mobile{max-width:330px;aspect-ratio:390/664}

.le-sizes{display:flex;flex-direction:column;gap:6px;margin:10px 0 4px}
.le-sizes label{font-size:12px;font-weight:600;color:var(--tx2)}
.le-size{padding-block:9px;font-size:12.5px}
/* ── فهرست مرتب‌سازی ── */
.sort-list{display:flex;flex-direction:column;gap:7px;list-style:none;padding:0;margin:0}

.sort-row{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:12px;
  background:var(--sunken);box-shadow:var(--in2);cursor:grab;
  transition:opacity .3s var(--ez),transform .3s var(--ez),box-shadow .3s var(--ez)}
.sort-row:active{cursor:grabbing}
.sort-row.drag{opacity:.4}
.sort-row.over{box-shadow:var(--in2),0 0 0 2px var(--flame)}
.sort-row.off{opacity:.45}
.sort-row.off .sort-name{text-decoration:line-through}

.sort-grip{color:var(--tx3);font-size:13px;line-height:1;cursor:grab}
.sort-name{flex:1;font-size:12.5px;font-weight:600;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.sort-acts{display:flex;gap:4px;flex:0 0 auto}
.sort-btn{width:26px;height:26px;border-radius:8px;font-size:13px;color:var(--tx3);
  background:var(--surface);box-shadow:var(--up);
  transition:color .3s var(--ez)}
.sort-btn:hover{color:var(--flame)}
.sort-btn.eye{font-size:11px}

/* روی موبایل، کشیدن سخت است — دکمه‌ها بزرگ‌تر می‌شوند */
@media(max-width:900px){
  .sort-grip{display:none}
  .sort-btn{width:32px;height:32px;font-size:15px}
}
/* ══════════════════════════════════════════════════════════════
   جعبه‌ی عنصر در ویرایشگر چیدمان

   باز شدن با شبکه‌ی صفر تا یک انجام می‌شود — تنها راهی که
   ارتفاع ناشناخته را نرم باز می‌کند بدون اندازه‌گیری دستی.

   ⚠ هر جعبه flex-shrink صفر دارد.
   بدون آن، باز شدن یک جعبه بقیه را فشرده می‌کرد و نامشان
   نصف یا ناپدید می‌شد.
   ══════════════════════════════════════════════════════════════ */

.le-item{flex:0 0 auto;border-radius:14px;overflow:hidden;
  background:var(--surface);box-shadow:var(--up)}

.le-head{display:flex;align-items:center;gap:4px;padding-inline-end:8px}

.le-toggle{flex:1;display:flex;align-items:center;gap:10px;min-width:0;
  padding:13px 16px;font-size:13px;font-weight:700;color:var(--tx);
  text-align:start;cursor:pointer}
.le-toggle span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.le-item.on .le-toggle{color:var(--flame)}

.le-mark{position:relative;width:13px;height:13px;flex:0 0 auto}
.le-mark::before,.le-mark::after{content:"";position:absolute;inset-block-start:50%;
  inset-inline-start:0;width:100%;height:2px;border-radius:2px;background:var(--tx3);
  transform:translateY(-50%);transition:transform .4s var(--ez),opacity .3s var(--ez)}
.le-mark::after{transform:translateY(-50%) rotate(90deg)}
.le-item.on .le-mark::after{transform:translateY(-50%);opacity:0}
.le-item.on .le-mark::before{background:var(--flame)}

/* دکمه‌ی بازگشت همین عنصر */
.le-undo{width:30px;height:30px;border-radius:9px;flex:0 0 auto;
  display:grid;place-items:center;color:var(--tx3);
  background:var(--sunken);box-shadow:var(--in2);
  transition:color .3s var(--ez),transform .3s var(--ez)}
.le-undo svg{width:15px;height:15px}
.le-undo:hover{color:var(--flame);transform:rotate(-20deg)}

/* باز شدن نرم */
.le-wrap{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .45s var(--ez)}
.le-item.on .le-wrap{grid-template-rows:1fr}

/*
 * بدنه: تا ده سانتی‌متر باز می‌شود. اگر محتوا بیشتر بود، خودِ
 * بدنه اسکرول می‌شود — نه اینکه جعبه بی‌نهایت بلند شود.
 */
.le-body{overflow:hidden;max-height:10cm;padding:0 16px}
.le-item.on .le-body{overflow-y:auto;padding:0 16px 16px}
.le-body::-webkit-scrollbar{width:4px}
.le-body::-webkit-scrollbar-thumb{background:var(--tx3);border-radius:99px}

/*
 * ⚠ دو بخش عنوان درون‌خطی می‌مانند.
 *
 * با inline-block هرکدام یک جعبه‌ی تقسیم‌ناپذیر می‌شوند و اگر
 * در یک خط جا نشوند، دومی کامل به خط بعد می‌رود — حتی وقتی
 * کاربر متن را یک‌خطی نوشته.
 *
 * وقتی کاربر در ویرایشگر چیدمان جابه‌جایشان کند، همان‌جا
 * display:inline-block هم اضافه می‌شود؛ تا آن موقع لازم نیست.
 */

/* ══════════ انتخابگر رنگ متن در پنل ══════════ */

.text-multi{resize:vertical;min-height:44px;line-height:1.9;font-family:inherit}

.colorpick{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:10px}
.colorpick-lbl{font-size:11.5px;color:var(--tx3);margin-inline-end:4px}

.swatch{width:26px;height:26px;border-radius:9px;cursor:pointer;
  box-shadow:var(--up);position:relative;
  transition:transform .3s var(--ez)}
.swatch:hover{transform:translateY(-2px)}
.swatch.on{box-shadow:var(--up),0 0 0 2px var(--flame)}
.swatch span{font-size:11px;color:var(--tx3)}

/*
 * رنگ دلخواه: آیکون بوم رنگ.
 * خودِ ورودی رنگ پنهان است تا رنگ ثابتش با رنگ‌های پیش‌فرض
 * اشتباه گرفته نشود.
 */
.swatch-custom{width:26px;height:26px;border-radius:9px;cursor:pointer;
  display:grid;place-items:center;color:var(--tx3);
  background:var(--surface);box-shadow:var(--up);position:relative;
  transition:color .3s var(--ez),transform .3s var(--ez)}
.swatch-custom:hover{color:var(--flame);transform:translateY(-2px)}
.swatch-custom.on{box-shadow:var(--up),0 0 0 2px var(--flame);color:var(--flame)}
.swatch-custom svg{width:15px;height:15px}
.swatch-custom input{position:absolute;inset:0;opacity:0;cursor:pointer;
  width:100%;height:100%;padding:0;border:none}

/*
 * شکست خط در متن‌های محتوا.
 *
 * ⚠ فقط روی خودِ عنصرِ متن، نه روی ظرفش.
 *
 * pre-line خط جدید را نگه می‌دارد — حتی خط جدیدی که فقط برای
 * خوانایی در کد HTML گذاشته شده. وقتی روی عنوان اعمال شد،
 * فاصله‌ی بین دو قطعه‌ی داخلش به یک شکست خط تبدیل شد و متن
 * یک‌خطی، دوخطی دیده می‌شد.
 */
.hero3d-txt .t-main,.hero3d-txt .t em,.hero3d-txt .ld,.hero3d-txt .kicker,
.hero-txt .t-main,.hero-txt .t em,.hero-txt .ld,.hero-txt .kicker,
.hero3d-info b,.hero3d-info span{white-space:pre-line}

/* ══════════ خاموش کردن یک عنصر در ویرایشگر ══════════ */

.le-eye{width:30px;height:30px;border-radius:9px;flex:0 0 auto;
  display:grid;place-items:center;color:var(--tx3);
  background:var(--sunken);box-shadow:var(--in2);
  transition:color .3s var(--ez)}
.le-eye svg{width:16px;height:16px;grid-area:1/1}
.le-eye:hover{color:var(--flame)}

.le-eye .eye-off{display:none}
.le-item.hidden-el .le-eye{color:var(--bad)}
.le-item.hidden-el .le-eye .eye-on{display:none}
.le-item.hidden-el .le-eye .eye-off{display:block}

/* عنوان عنصر خاموش، کم‌رنگ و خط‌خورده */
.le-item.hidden-el .le-toggle{opacity:.5}
.le-item.hidden-el .le-toggle span{text-decoration:line-through}

/* ══════════════════════════════════════════════════════════════
   هیرو همیشه تیره

   متغیرهای رنگ داخل هیرو بازنویسی می‌شوند، پس با روشن شدن تم
   سایت تغییر نمی‌کنند. اینطور تصویر و ویدیوی پس‌زمینه همیشه با
   متن‌های روشن دیده می‌شوند.

   ⚠ فقط متغیرها بازنویسی می‌شوند، نه خودِ قاعده‌ها — پس هر
   تنظیمی که در ویرایشگر چیدمان داده شود دست‌نخورده می‌ماند.
   ══════════════════════════════════════════════════════════════ */

.hero,.hero3d{
  --bg:      #171C24;
  --surface: #1B212C;
  --sunken:  #141A22;
  --raised:  #232B37;

  --tx:  #E9EDF3;
  --tx2: rgba(233,237,243,.62);
  --tx3: rgba(233,237,243,.38);

  --cream: #FFD6AE;
  --ok:    #57C79A;

  --veil-rgb: 12,17,24;

  --up:  6px 6px 14px rgba(0,0,0,.5), -6px -6px 14px rgba(255,255,255,.03);
  --up2: 10px 10px 26px rgba(0,0,0,.55), -8px -8px 20px rgba(255,255,255,.035);
  --in:  inset 5px 5px 12px rgba(0,0,0,.55), inset -5px -5px 12px rgba(255,255,255,.03);
  --in2: inset 3px 3px 7px rgba(0,0,0,.5), inset -3px -3px 7px rgba(255,255,255,.025);

  color:var(--tx);
}

/* ══════════════════════════════════════════════════════════════
   هدر شیشه‌ای

   پشت هدر تار می‌شود و رنگش نیمه‌شفاف است، ولی متن‌ها کنتراست
   کافی دارند چون لایه‌ی رنگی زیرشان می‌ماند.
   ══════════════════════════════════════════════════════════════ */

[data-theme="dark"] .hdr-in{
  background:color-mix(in srgb, var(--surface) 68%, transparent);
  border-color:rgba(255,255,255,.07)}

/* روی پس‌زمینه‌ی شیشه‌ای، متن کمی پررنگ‌تر می‌شود */
.hdr-in .nav a,.hdr-in .hdr-user b{text-shadow:0 1px 2px rgba(0,0,0,.12)}
[data-theme="dark"] .hdr-in .nav a,
[data-theme="dark"] .hdr-in .hdr-user b{text-shadow:0 1px 3px rgba(0,0,0,.5)}

/* ── نوار تنظیم با دکمه‌های کم و زیاد ── */

.le-ctl{display:flex;align-items:center;gap:5px;min-width:0}
.le-ctl input[type=range]{flex:1;min-width:0}

.le-step{width:20px;height:20px;border-radius:6px;flex:0 0 auto;cursor:pointer;
  display:grid;place-items:center;color:var(--tx3);
  background:var(--surface);box-shadow:var(--up);
  transition:color .25s var(--ez)}
.le-step svg{width:11px;height:11px}
.le-step:hover{color:var(--flame)}
.le-step:active{box-shadow:var(--in2)}

/* در چیدمان راست‌به‌چپ، کم و زیاد جای طبیعی خود را دارند */
[dir="rtl"] .le-step[data-step="-1"] svg{transform:scaleX(-1)}
[dir="rtl"] .le-step[data-step="1"] svg{transform:scaleX(-1)}


/* متن‌های دلخواه هیرو — ظاهر مستقل از متن توضیح */
.hero-text{font-size:15px;color:var(--tx2);font-weight:300;
  max-width:58ch;line-height:2.1;margin-top:14px;white-space:pre-line}

/* ══════════════════════════════════════════════════════════════
   افکت‌های تعاملی

   ⚠ فایل‌های CSS کامپوننت‌های اصلی در دسترس نبودند؛ این استایل‌ها
   از روی ساختار و رفتار کدشان بازسازی شده‌اند.
   ══════════════════════════════════════════════════════════════ */

/* ── ۱. تیتر مواج ──
   متن واقعی شفاف می‌شود ولی سر جایش می‌ماند: هم برای موتور جستجو
   و صفحه‌خوان، هم تا اندازه‌ی تیتر و چیدمان صفحه عوض نشود. */
.fx-warp{-webkit-text-fill-color:transparent;text-shadow:none}
.fx-warp::selection{-webkit-text-fill-color:currentColor}

/* ── ۳. گالری آکاردئونی ── */
.accordion-gallery{display:flex;width:100%;perspective:1400px;
  --ag-radius:16px;--ag-media:320px}

.ag-panel{position:relative;flex:1 1 0;min-width:0;overflow:hidden;cursor:pointer;
  border-radius:var(--ag-radius);outline:none;transform-style:preserve-3d;
  box-shadow:var(--up);-webkit-tap-highlight-color:transparent}
.ag-panel:focus-visible{box-shadow:var(--up),0 0 0 2px var(--flame)}

.ag-panel__frame{position:absolute;inset:0;overflow:hidden;border-radius:inherit}

.ag-panel__media{position:absolute;inset-block-start:50%;left:50%;
  width:var(--ag-media);height:100%;transform:translate(-50%,-50%)}
.ag-panel__media img{width:100%;height:100%;object-fit:cover;display:block;user-select:none}

.ag-panel__overlay{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(6,0,16,.78) 0%,rgba(6,0,16,.12) 46%,transparent 70%)}

.ag-panel__label{position:absolute;inset-inline:18px;inset-block-end:18px;
  display:flex;align-items:center;gap:10px;pointer-events:none;white-space:nowrap}
.ag-panel__bar{width:24px;height:2px;border-radius:2px;background:var(--flame);flex:0 0 auto}
.ag-panel__text{font-size:clamp(15px,1.6vw,20px);font-weight:800;color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.45)}

/* تا اسکریپت برسد، همه‌ی برچسب‌ها پنهان‌اند تا پرشی دیده نشود */
.accordion-gallery:not(.ag-ready) .ag-panel__bar,
.accordion-gallery:not(.ag-ready) .ag-panel__text{opacity:0}

@media(max-width:700px){
  .accordion-gallery{height:360px !important}
  .ag-panel__text{font-size:14px}
}

/* ── ۵. کادر کد ── */
.cs-wrap{position:relative;display:inline-block;direction:ltr}

.cs-row{display:flex;gap:var(--cs-gap,8px)}

.cs-slot{position:relative;width:var(--cs-size,48px);height:calc(var(--cs-size,48px) * 1.18);
  border-radius:var(--cs-radius,12px);display:grid;place-items:center;
  background:var(--sunken);box-shadow:var(--in2);
  transition:box-shadow .3s var(--ez),background .3s var(--ez)}

.cs-slot.active{box-shadow:var(--in2),0 0 0 2px var(--cs-accent)}
.cs-slot.filled{background:var(--surface);box-shadow:var(--up)}

.cs-digit{font-size:calc(var(--cs-size,48px) * .46);font-weight:800;color:var(--tx);
  font-variant-numeric:tabular-nums}

/* نشستن رقم: از کمی پایین‌تر بالا می‌آید، با جهش ملایم */
.cs-slot.land .cs-digit{animation:csLand .42s cubic-bezier(.23,1,.32,1) var(--cs-delay,0ms) both}
@keyframes csLand{
  from{opacity:0;transform:translateY(var(--cs-rise,8px)) scale(.8)}
  to{opacity:1;transform:none}
}

.cs-caret{position:absolute;width:2px;height:40%;border-radius:2px;
  background:var(--cs-accent);opacity:0}
.cs-slot.active .cs-caret{animation:csBlink 1s steps(1) infinite}
@keyframes csBlink{50%{opacity:1}}

/* همه‌ی خانه‌ها پر: رنگ تأکید دورشان می‌دود */
.cs-wrap.complete .cs-slot{box-shadow:var(--up),0 0 0 2px var(--cs-accent)}
.cs-wrap.complete .cs-slot:nth-child(n){transition-delay:calc(var(--i,0) * 30ms)}

.cs-wrap.shake .cs-row{animation:csShake .5s cubic-bezier(.36,.07,.19,.97)}
@keyframes csShake{
  15%,85%{transform:translateX(-2px)} 30%,70%{transform:translateX(4px)}
  45%,55%{transform:translateX(-6px)}
}

/*
 * ورودی واقعی روی خانه‌ها، کاملاً شفاف.
 * لمس و چسباندن و پر شدن خودکار از پیامک مستقیم به آن می‌رسد.
 */
.cs-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;
  font-size:16px;letter-spacing:0;border:0;padding:0;cursor:text;
  caret-color:transparent;color:transparent;background:transparent}

/* ── ۶. دکمه‌ی پسندیدن ── */
.pulse-heart{--ph-size:40px;--ph-liked:#FF4D6D;--ph-idle:#8B8B93;
  display:inline-flex;border:0;padding:0;background:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent}

.ph-pill{display:inline-flex;align-items:center;gap:10px;
  height:var(--ph-size);padding:0 calc(var(--ph-size) * .42) 0 calc(var(--ph-size) * .3);
  border-radius:99px;background:var(--surface);box-shadow:var(--up);
  transition:box-shadow .3s var(--ez)}
.pulse-heart:active .ph-pill{box-shadow:var(--in2)}

.ph-heart{width:calc(var(--ph-size) * .55);height:calc(var(--ph-size) * .55);
  fill:none;stroke:var(--ph-idle);stroke-width:1.9;stroke-linejoin:round;
  transition:fill .2s,stroke .2s}
.pulse-heart[data-state="liked"] .ph-heart{fill:var(--ph-liked);stroke:var(--ph-liked)}

.ph-count{display:inline-block;height:1.3em;line-height:1.3em;overflow:hidden;
  font-size:14px;font-weight:700;color:var(--tx);font-variant-numeric:tabular-nums;
  min-width:1ch}

/* غلتیدن عدد */
.ph-roll{display:flex;flex-direction:column;transition:transform .35s cubic-bezier(.23,1,.32,1)}
.ph-roll.up{animation:phUp .35s cubic-bezier(.23,1,.32,1) forwards}
.ph-roll.down{flex-direction:column-reverse;transform:translateY(-50%);
  animation:phDown .35s cubic-bezier(.23,1,.32,1) forwards}
@keyframes phUp{to{transform:translateY(-50%)}}
@keyframes phDown{to{transform:translateY(0)}}

/* ── ۷ و ۸. بوم‌های پس‌زمینه ──
   محتوای ظرف بالای بوم می‌ماند. */
.fx-silk-host > :not(.fx-canvas),
.fx-particles-host > :not(.fx-canvas){position:relative;z-index:1}

/* ══════════════════════════════════════════════════════════════
   ۱۰. کارت‌های روی‌هم — صحنه‌ی ثابت

   ── چرا صحنه، نه چسباندن تک‌تک کارت‌ها ──
   در نسخه‌ی قبل هر کارت جدا چسبیده بود. مرز چسبیدن هر کارت را
   حاشیه‌ی پایینش هم تعیین می‌کند؛ کارت‌های اول و دوم حاشیه‌ی بلندی
   داشتند (همان فاصله‌ی اسکرول) و پیش از رسیدن کارت سوم بالا رفتن
   را شروع می‌کردند. تیتر هم مرز خودش را داشت و جدا می‌رفت.

   حالا:
     .steps-pin    بلند است و فقط مسافت اسکرول می‌سازد
     .steps-stage  به اندازه‌ی صفحه چسبیده می‌ماند؛ تیتر و کارت‌ها داخلش
     کارت‌ها      با اسکرول از پایین وارد می‌شوند (اسکریپت، فقط transform)

   وقتی کارت آخر نشست و مکث تمام شد، صحنه با همه‌ی محتوایش یکجا
   بالا می‌رود.
   ══════════════════════════════════════════════════════════════ */

.fx-stack{
  --n:3;                /* تعداد کارت‌ها — از خود نما */
  --ss-top:92px;        /* فاصله‌ی تیتر از بالای صفحه، زیر هدر */
  --ss-h:62vh;          /* بلندای هر کارت */
  --ss-off:18px;        /* چقدر از لبه‌ی کارت قبلی پیدا بماند */
  --ss-gap:40vh;        /* مسافت اسکرول برای ورود هر کارت */

  /* یک صفحه + ورود کارت‌های دوم به بعد + یک مکث پس از کارت آخر */
  height:calc(100vh + (var(--n) - 1) * var(--ss-gap) + var(--ss-gap));
  position:relative}

.steps-stage{position:sticky;inset-block-start:0;height:100vh;
  display:flex;flex-direction:column;align-items:center;
  padding-top:var(--ss-top);box-sizing:border-box;overflow:hidden}

/* تمام‌عرض — در ستون وسط‌چین، تیتر به اندازه‌ی متنش جمع نشود */
.steps-head{margin:0 0 18px;text-align:center;font-size:clamp(24px,4vw,38px);flex:0 0 auto;
  width:100%;white-space:nowrap}

.steps-cards{position:relative;width:100%;flex:0 0 auto;counter-reset:step;
  height:calc(var(--ss-h) + (var(--n) - 1) * var(--ss-off))}

.step-card{position:absolute;inset-inline:0;counter-increment:step;
  inset-block-start:calc(var(--i, 0) * var(--ss-off));
  height:var(--ss-h);min-height:260px;
  border-radius:28px;overflow:hidden;
  background:var(--surface);box-shadow:var(--up2);
  will-change:transform}

/* تا اسکریپت برسد، کارت‌های دوم به بعد پایین صحنه منتظرند */
.fx-stack:not(.ss-ready) .step-card:not(:first-child){transform:translateY(110vh)}

/* تصویر کل کارت را پر می‌کند */
.step-card-img{position:absolute;inset:0;background-size:cover;background-position:center}

/*
 * متن روی تصویر، با لایه‌ی محو فقط زیر خودش.
 * رنگ لایه از سطح تم می‌آید، پس در شب و روز هر دو خوانا است.
 */
.step-card-body{position:absolute;inset-inline:0;inset-block-end:0;
  padding:clamp(26px,4vw,48px);padding-top:clamp(70px,10vw,120px)}

.step-card.has-img .step-card-body{
  background:linear-gradient(to top,
    color-mix(in srgb, var(--surface) 96%, transparent) 0%,
    color-mix(in srgb, var(--surface) 88%, transparent) 45%,
    transparent 100%)}

/* کارت بدون تصویر — به‌جای جعبه‌ی خالی تیره، شماره‌ی بزرگ کم‌رنگ و متن وسط */
.step-card:not(.has-img){background:
  radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--flame) 16%, transparent) 0%, transparent 55%),
  linear-gradient(160deg, var(--surface), var(--sunken))}
.step-card:not(.has-img)::before{content:counter(step, persian);position:absolute;
  inset-inline-start:clamp(18px,4vw,48px);inset-block-start:50%;transform:translateY(-50%);
  font-size:clamp(140px,22vw,280px);font-weight:900;line-height:1;color:var(--tx);opacity:.05;pointer-events:none}
.step-card:not(.has-img) .step-card-body{inset-block-start:0;display:flex;flex-direction:column;justify-content:center;padding-top:clamp(26px,4vw,48px)}
.step-card:not(.has-img) .step-card-body h3{font-size:clamp(24px,3.4vw,40px)}
.step-card:not(.has-img) .step-card-body .pn{font-size:clamp(14px,1.6vw,17px)}

.step-card-body h3{font-size:clamp(20px,2.6vw,30px);font-weight:900;margin-top:16px;color:var(--tx)}
.step-card-body .pn{font-size:clamp(13px,1.4vw,15.5px);margin-top:8px;max-width:56ch;color:var(--tx2)}

@media(max-width:700px){
  .fx-stack{--ss-top:78px;--ss-h:56vh;--ss-off:12px;--ss-gap:32vh}

  /* گوشی باریک: تیتر بلندی که در پنل نوشته شود، بریده نشود */
  .steps-head{white-space:normal}
  .step-card{border-radius:22px}
}

/* بدون حرکت: کارت‌ها ساده زیر هم، بدون صحنه */
@media(prefers-reduced-motion:reduce){
  .fx-stack{height:auto}
  .steps-stage{position:relative;height:auto;overflow:visible}
  .steps-cards{height:auto;display:flex;flex-direction:column;gap:18px}
  .step-card{position:relative;inset-block-start:auto;transform:none !important}
}

/* شبکه‌ای که با روشن بودن گالری جایگزین شده */
.fx-hidden{display:none}

/* ══════════════════════════════════════════════════════════════
   پنل افکت‌ها
   ══════════════════════════════════════════════════════════════ */

.fx-list{display:flex;flex-direction:column;gap:12px}

.fx-card{border-radius:18px;background:var(--surface);box-shadow:var(--up);overflow:hidden;
  transition:opacity .3s var(--ez)}
.fx-card.off .fx-title b{opacity:.5}

.fx-head{display:flex;align-items:center;gap:12px;padding-inline-end:16px}

.fx-open{flex:1;display:flex;align-items:center;gap:12px;min-width:0;
  padding:16px 20px;text-align:start;cursor:pointer}
.fx-title{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.fx-title b{font-size:14.5px;font-weight:800;color:var(--tx)}
.fx-title span{font-size:11.5px;color:var(--tx3)}
.fx-card.on .fx-title b{color:var(--flame)}
.fx-card.on .le-mark::after{transform:translateY(-50%);opacity:0}

.fx-switch{flex:0 0 auto;margin:0}

/* بدنه: باز شدن نرم */
.fx-body{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .45s var(--ez)}
.fx-card.on .fx-body{grid-template-rows:1fr}

/* پوشش تنها فرزند شبکه است؛ بسته که باشد هیچ‌چیزش دیده نمی‌شود */
.fx-inner{min-height:0;overflow:hidden;padding:0 20px;transition:padding .45s var(--ez)}
.fx-card.on .fx-inner{padding:0 20px 20px}

.fx-desc{margin:0 0 14px}

/* ── کنترل‌ها: شبکه‌ی سه‌ستونه مثل نمونه ── */
.fx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}

.fx-ctl{position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:10px;min-height:44px;padding:0 14px;border-radius:12px;overflow:hidden;
  background:var(--sunken);box-shadow:var(--in2);cursor:pointer}
.fx-lbl{font-size:12px;color:var(--tx2);white-space:nowrap;position:relative;z-index:1}
.fx-val{font-size:12px;color:var(--tx);font-variant-numeric:tabular-nums;position:relative;z-index:1}

/*
 * نوار تمام‌عرض زیر برچسب — همان سبک نمونه:
 * کل کادر قابل کشیدن است و پر شدنش مقدار را نشان می‌دهد.
 */
.fx-range input[type=range]{position:absolute;inset:0;width:100%;height:100%;margin:0;
  -webkit-appearance:none;appearance:none;background:transparent;cursor:ew-resize}
.fx-range input[type=range]::-webkit-slider-runnable-track{height:100%;background:transparent}
.fx-range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:4px;height:60%;
  margin-top:0;border-radius:2px;background:var(--tx3);transform:translateY(33%)}
.fx-range input[type=range]::-moz-range-thumb{width:4px;height:24px;border:0;border-radius:2px;
  background:var(--tx3)}
.fx-range:hover input[type=range]::-webkit-slider-thumb{background:var(--flame)}

.fx-color{display:flex;align-items:center;gap:8px}
.fx-color input[type=color]{width:24px;height:24px;border:0;border-radius:7px;padding:0;
  background:none;cursor:pointer}
.fx-color input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.fx-color input[type=color]::-webkit-color-swatch{border:0;border-radius:7px}
.fx-color code{font-size:11.5px;color:var(--tx);direction:ltr;min-width:62px}

.fx-select{height:32px;padding:0 10px;font-size:12px;min-width:110px}

/* ── پیش‌نمایش ── */
.fx-preview{margin-top:14px;border-radius:16px;overflow:hidden;
  background:var(--bg);box-shadow:var(--in)}
.fx-preview iframe{width:100%;height:340px;border:0;display:block}

.fx-foot{display:flex;justify-content:flex-end;margin-top:12px}

.fx-save{position:sticky;inset-block-end:16px;display:flex;justify-content:center;
  margin-top:18px;z-index:5}

@media(max-width:700px){
  .fx-grid{grid-template-columns:1fr}
  .fx-preview iframe{height:280px}
}

/* ══════════════════════════════════════════════════════════════
   بخش پیامک پنل
   ══════════════════════════════════════════════════════════════ */

.sms-tabs{margin-bottom:18px;flex-wrap:wrap}
.sms-count{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 6px;
  margin-inline-start:6px;border-radius:99px;font-size:10.5px;font-weight:800;color:#fff;
  background:var(--flame)}

.sms-alert{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;
  border-inline-start:3px solid var(--bad)}
.sms-alert b{color:var(--bad)}
.sms-alert span{flex:1;min-width:220px;font-size:12.5px;color:var(--tx2)}

.sms-kill{display:flex;align-items:center;gap:16px;justify-content:space-between;
  flex-wrap:wrap;margin-bottom:16px;border-inline-start:3px solid var(--ok)}
.sms-kill.off{border-inline-start-color:var(--bad)}
.sms-kill.off b{color:var(--bad)}

.sms-stats{margin-bottom:16px}
.sms-stats .card{display:flex;flex-direction:column;gap:4px;padding:16px}
.sms-stats .card .pn{margin:0}
.sms-stats .card b{font-size:22px;font-weight:900}

.sms-filter{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin-bottom:16px}

.sms-table td{vertical-align:top}
.sms-table .nowrap{white-space:nowrap}
.sms-text{max-width:280px;font-size:12px;line-height:1.9;color:var(--tx2)}
.sms-reason{max-width:220px;font-size:11.5px;color:var(--tx3)}

.sms-bulkbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px;
  position:sticky;inset-block-start:10px;z-index:4}
.sms-check{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:12.5px}
.sms-check input{width:17px;height:17px;accent-color:var(--flame);cursor:pointer}

.sms-queue{display:flex;flex-direction:column;gap:10px}
.sms-item{display:flex;align-items:flex-start;gap:14px}
.sms-item-main{flex:1;min-width:0}
.sms-item-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sms-body{margin:10px 0 0;padding:12px 14px;border-radius:12px;font-size:13px;line-height:2;
  background:var(--sunken);box-shadow:var(--in2);white-space:pre-line}
.sms-item-acts{display:flex;flex-direction:column;gap:6px;flex:0 0 auto}

.sms-fixed{display:flex;flex-direction:column;gap:6px;margin-top:6px;padding:14px 16px;
  border-radius:12px;background:var(--sunken);box-shadow:var(--in2)}
.sms-fixed b{font-size:12.5px}
.sms-fixed span{font-size:11.5px;color:var(--tx2);line-height:1.9}

.sms-blockform{display:flex;gap:8px;flex-wrap:wrap}
.sms-blockform .inp{flex:1;min-width:150px}

@media(max-width:700px){
  .sms-item{flex-wrap:wrap}
  .sms-item-acts{flex-direction:row;width:100%}
}

/* ══════════ صفحه‌ی ورود ══════════ */

.auth-card .auth-step{animation:authIn .4s var(--ez)}
@keyframes authIn{from{opacity:0;transform:translateY(8px)}}

.auth-go{width:100%;justify-content:center}
.auth-go.busy{opacity:.6;pointer-events:none}

.auth-who{font-size:13px;color:var(--tx2);margin:0 0 14px}
.auth-who b{color:var(--tx)}

.auth-links{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:14px}
.auth-link{font-size:12.5px;color:var(--cream);background:none;border:0;padding:4px 0;cursor:pointer}
.auth-link:hover{color:var(--flame)}
.auth-link:disabled{color:var(--tx3);cursor:default}
.auth-link #timer{font-variant-numeric:tabular-nums}

/* دسته‌ی بی‌تصویر: پس‌زمینه‌ی رنگی خودش، نه تصویر قالب‌ها */
.ag-panel__media--tone{background:linear-gradient(155deg,var(--ag-a),var(--ag-b))}
.ag-panel__media--tone[data-tone="0"]{--ag-a:#F64B29;--ag-b:#2A1712}
.ag-panel__media--tone[data-tone="1"]{--ag-a:#5C7A9E;--ag-b:#141A22}
.ag-panel__media--tone[data-tone="2"]{--ag-a:#C8871A;--ag-b:#2A1F10}
.ag-panel__media--tone[data-tone="3"]{--ag-a:#2E9E6B;--ag-b:#0F221A}
.ag-panel__media--tone[data-tone="4"]{--ag-a:#7B7481;--ag-b:#17141C}

.ag-panel__count{font-size:11.5px;font-weight:600;color:rgba(255,255,255,.72);
  margin-inline-start:4px;transition:opacity .4s var(--ez)}
/* شمارنده فقط روی پنل باز، همراه با نامش */
.ag-panel:not(.ag-panel--active) .ag-panel__count{opacity:0}

/* ══════════ گالری دایره‌ای — فقط موبایل ══════════ */

.circular-gallery{position:relative;width:100%;height:380px;display:none;
  outline:none;-webkit-tap-highlight-color:transparent}
.fx-circular-canvas{cursor:grab}
.fx-circular-canvas:active{cursor:grabbing}

@media(max-width:700px){
  .circular-gallery{display:block}

  /* جای آکاردئون را می‌گیرد */
  .accordion-gallery.has-circular{display:none}
  .fx-desktop-only{display:none}
}

/* ══════════ سایت‌ها در پنل: عملیات گروهی و روزها ══════════ */

.inst-bulk{display:flex;flex-direction:column;gap:12px;margin-bottom:14px}
.inst-bulk-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.inst-bulk-acts{margin-inline-start:auto;display:flex;gap:8px;flex-wrap:wrap}
.inst-bulk-all{padding-top:12px;border-top:1px solid rgba(128,138,155,.16)}

.inst-days{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--tx2)}
.inst-days .inp{width:130px}

.inst-days-cell{display:flex;flex-direction:column;gap:2px;font-size:12.5px}

.pill.cream{color:var(--cream);background:color-mix(in srgb, var(--cream) 14%, transparent)}

/* صفحه‌ی هر سایت: کادرهای تغییر روز */
.inst-adjust{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.inst-adjust form{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:14px;
  background:var(--sunken);box-shadow:var(--in2)}
.inst-adjust .inst-num{display:flex;align-items:baseline;gap:6px}
.inst-adjust .inst-num b{font-size:26px;font-weight:900}
.inst-adjust .inst-row{display:flex;gap:8px}
.inst-adjust .inst-row .inp{flex:1;min-width:0}

/* ══════════════════════════════════════════════════════════════
   پرتوهای کناری — پس‌زمینه‌ی بخش‌ها

   همان رفتار ویدیوی پس‌زمینه: چسبیده به بالای صفحه تا پایان محتوای
   بخش‌ها، بعد همراه آخرین بخش بالا می‌رود. حاشیه‌ی منفی آن را از
   جریان بیرون می‌برد تا بخش‌ها رویش بیایند.

   لایه‌ها: پس‌زمینه‌ی کادر (۰) ← ویدیو (۰) ← پرتوها (۱) ← محتوا (۲)
   ══════════════════════════════════════════════════════════════ */
.stack-rays{position:sticky;inset-block-start:0;z-index:1;
  height:100vh;width:100%;margin-bottom:-100vh;
  overflow:hidden;pointer-events:none;
  border-radius:clamp(24px,4vw,44px) clamp(24px,4vw,44px) 0 0}

/* ══════════════════════════════════════════════════════════════
   جعبه‌ی رسانه — تصویر، ویدیو یا هر دو (partials/media، js/media.js)

   تصویر (اگر باشد) اندازه‌ی جعبه را می‌سازد و ویدیو دقیقاً رویش
   می‌نشیند. بدون تصویر، خودِ ویدیو اندازه را می‌سازد.
     loop / hover — ویدیو به محض بار شدن دیده می‌شود
     poster       — ویدیو فقط هنگام پخش ظاهر می‌شود
   ══════════════════════════════════════════════════════════════ */

.lm{position:relative;display:block;overflow:hidden}
.lm > .lm-img,.lm > .lm-vid{display:block;width:100%;height:auto}
.lm > .lm-img{pointer-events:none;user-select:none}
.lm > .lm-vid{pointer-events:none;background:transparent}

.lm > .lm-img + .lm-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .45s var(--ez)}
.lm.ready:not(.lm-poster) > .lm-img + .lm-vid,
.lm.lm-poster.playing.ready > .lm-img + .lm-vid{opacity:1}

/* پوشاندن کل جعبه‌ی والد (قدم‌ها، دسته‌ها) */
.lm-fill{position:absolute;inset:0}
.lm-fill > .lm-img,.lm-fill > .lm-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* جای دید و بزرگ‌نمایی (MediaPos) */
.lm > .lm-img,.lm > .lm-vid{object-position:var(--lm-x,50%) var(--lm-y,50%);
  transform:scale(var(--lm-z,1));transform-origin:var(--lm-x,50%) var(--lm-y,50%)}

/* هیرو: جعبه جای خودِ تصویر را می‌گیرد */
.hero3d-item > .lm{width:100%}
.hero3d-item.center > .lm{animation:bob 4s ease-in-out infinite}

/* نوار مصرف فضا (پنل مدیریت و پنل کاربر) */
.stbar{height:8px;border-radius:99px;background:var(--sunken);box-shadow:var(--in2);overflow:hidden}
.stbar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--flame),#ff8a5c);
  transition:width .6s var(--ez)}

/* متنی که از جست‌وجوی پنل پیدا شد */
.search-hit{box-shadow:var(--in2),0 0 0 2px var(--flame) !important;animation:searchHit 1.6s var(--ez) 2}
@keyframes searchHit{50%{box-shadow:var(--in2),0 0 0 5px rgba(246,75,41,.35)}}

/* ══════════ پنل کاربر — افزونه‌های سایت (نسخه‌ی ۴۴) ══════════ */
.adn-top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.adn-site{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--tx3)}
.adn-site select{min-width:220px;max-width:100%}
.adn-note{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;margin-top:18px;padding:16px 18px;border-radius:18px;
  background:var(--sunken);box-shadow:var(--in2);border-inline-start:3px solid var(--warn)}
.adn-note b{font-size:14px}
.adn-note p{flex:1 1 320px;margin:0;font-size:13px;color:var(--tx2);line-height:1.9}
.adn-h{font-size:18px;font-weight:800;margin:34px 0 14px}
.adn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.adn{display:flex;flex-direction:column;gap:12px;transition:opacity .3s}
.adn.off,.adn.is-off .adn-head .adn-ic{opacity:.62}
.adn-head{display:flex;align-items:center;gap:12px}
.adn-ic{flex:0 0 auto;width:48px;height:48px;border-radius:15px;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(145deg,#2b2d35,#15161a);color:#fff;box-shadow:0 10px 22px -12px rgba(0,0,0,.6)}
.adn-ic svg{width:22px;height:22px;fill:currentColor}.adn-ic img{width:100%;height:100%;object-fit:cover}.adn-ic .emo{font-size:25px;line-height:1}
.adn-title{flex:1;min-width:0}
.adn-title h3{font-size:16px;font-weight:800;line-height:1.5}
.adn-tag{display:inline-block;margin-top:3px;font-size:11px;color:var(--tx3);padding:2px 9px;border-radius:99px;background:var(--sunken);box-shadow:var(--in2)}
.adn-switch{flex:0 0 auto}
.adn-switch .st{font-size:12px;color:var(--tx3);min-width:34px}
.adn-state{margin:0;font-size:12.5px;color:var(--tx2);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.adn-state .pill{padding:3px 10px;font-size:11.5px}
.adn-desc{margin:0;font-size:13px;color:var(--tx2);line-height:1.9}
.adn-desc.sm{font-size:11.5px;color:var(--tx3)}
.adn-price{display:flex;align-items:baseline;gap:6px;font-size:12px;color:var(--tx3);margin-top:auto}
.adn-price b{font-size:18px;font-weight:900;color:var(--tx)}
.adn-acts{display:flex;gap:8px;flex-wrap:wrap}
.adn-why{margin:0;font-size:12px}
.adn-buy{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:12px;border-top:1px dashed rgba(128,128,128,.25)}
.adn-buy .pn{margin:0;font-size:11.5px}
.adn-set summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--flame);list-style:none;display:inline-flex;align-items:center;gap:6px}
.adn-set summary::-webkit-details-marker{display:none}
.adn-set summary::after{content:"▾";font-size:12px;line-height:1;transition:transform .25s}
.adn-set[open] summary::after{transform:rotate(180deg)}
.adn-f .switch{display:inline-flex;margin:0;font-size:13px;font-weight:600;color:var(--tx)}
.adn-form .switch input:not(:checked) + .track{background:rgba(128,128,128,.22)}
.adn-form{display:grid;gap:4px;margin-top:12px;padding:14px;border-radius:16px;background:var(--sunken);box-shadow:var(--in2)}
.adn-form .field{margin-bottom:8px}
.adn-form .cta{justify-self:start;margin-top:4px}
.adn-range{display:flex;align-items:center;gap:12px}
.adn-range input{flex:1;accent-color:var(--flame)}
.adn-range output{min-width:36px;text-align:center;font-weight:800;font-size:13px;direction:ltr}
.adn-color{display:flex;align-items:center;gap:10px}
.adn-color input{width:46px;height:34px;border:0;padding:0;background:none;cursor:pointer}
.adn-color code{font-size:12px;color:var(--tx3)}
/* داشبورد: افزونه‌های هر سایت با کلید کوچک */
.adn-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.adn-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 11px 5px 9px;border-radius:99px;font-size:12px;cursor:pointer;
  background:var(--sunken);box-shadow:var(--in2);user-select:none;transition:opacity .25s}
.adn-chip input{position:absolute;opacity:0;width:0;height:0}
.adn-chip .k{position:relative;width:26px;height:15px;border-radius:99px;background:rgba(128,128,128,.35);transition:background .25s}
.adn-chip .k::after{content:"";position:absolute;top:2px;inset-inline-start:2px;width:11px;height:11px;border-radius:50%;background:#fff;transition:transform .25s}
.adn-chip input:checked + .k{background:var(--flame)}
.adn-chip input:checked + .k::after{transform:translateX(-11px)}
[dir="ltr"] .adn-chip input:checked + .k::after{transform:translateX(11px)}
.adn-chip input:focus-visible + .k{box-shadow:0 0 0 3px rgba(246,75,41,.3)}
.adn-chip small{color:var(--tx3);font-size:10.5px}
.adn-chip.is-off{opacity:.6}
@media(max-width:620px){
  .adn-site{width:100%}
  .adn-site select{flex:1;min-width:0}
}

/* ── پنل مدیریت: وضعیت فایل‌های افزونه ── */
.adf-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.adf-facts{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;font-size:12.5px;color:var(--tx3)}
.adf-facts b{color:var(--tx);font-weight:700}
.adf-diff{flex-basis:100%;color:var(--warn)}
.adf-err{margin:10px 0 0;padding-inline-start:18px;font-size:12.5px;color:var(--bad);line-height:1.9}
.adf-tree{margin:10px 0;padding:12px 14px;border-radius:12px;background:var(--sunken);box-shadow:var(--in2);font-size:12px;line-height:1.8;overflow:auto;white-space:pre}
.adm-addon{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 0;border-bottom:1px dashed rgba(128,128,128,.22)}
.adf-up{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px dashed rgba(128,128,128,.25)}
.adf-up .inp{max-width:320px}

/* ══ v45 — صفحه‌ی سایت در پنل مدیریت: ورود به پنل سایت و SQL قالب ══ */
.inst-creds-rows{margin-top:10px}
.inst-creds .creds-row{display:flex;align-items:center;gap:10px;padding:9px 0;font-size:13px;flex-wrap:wrap;border-top:1px dashed rgba(128,128,128,.22)}
.inst-creds .creds-row:first-child{border-top:0}
.inst-creds .creds-row > span{color:var(--tx3);min-width:84px}
.inst-creds .creds-row b,.inst-creds .creds-row a{flex:1;min-width:140px;font-weight:700;word-break:break-all;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px}
.inst-creds .creds-row a{color:var(--cream);font-weight:500}
.inst-creds .cp{font-size:11px;padding:5px 12px;border-radius:9px;color:var(--tx2);background:var(--raised);box-shadow:var(--up)}
.inst-creds .cp:hover:not(:disabled){color:var(--flame)}
.inst-creds .cp:disabled{opacity:.4;cursor:default}
.inst-creds-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.inst-creds-foot .pn{flex:1;min-width:220px;font-size:12px}
.sql-files{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.sql-files .pill{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px}

/* ══ v45 — دسته‌بندی‌ها در پنل مدیریت: هر دسته یک ردیف پهن ══ */
.catx-list{display:flex;flex-direction:column;gap:18px}
.catx{padding:0;overflow:hidden}
.catx.off{opacity:.82}
.catx-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:16px 22px;border-bottom:1px solid rgba(128,128,128,.14)}
.catx-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:1;min-width:0}
.catx-title b{font-size:16px;font-weight:800;margin-inline-end:4px}
.catx-on{margin:0}
.catx-on > span:last-child{font-size:12.5px;color:var(--tx2)}
.catx-body{display:grid;grid-template-columns:minmax(260px,5fr) minmax(0,7fr);gap:26px;padding:20px 22px;align-items:start}
.catx-fields{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;min-width:0}
.catx-fields .field{margin:0 0 10px;min-width:0}
.catx-wide{grid-column:1 / -1}
.catx-fields textarea.inp{resize:vertical;min-height:64px}
.catx-media{min-width:0;padding:14px;border-radius:16px;background:var(--sunken);box-shadow:var(--in2)}
.catx-lbl{display:block;font-size:12.5px;font-weight:700;color:var(--tx2);margin-bottom:10px}
.catx-media .mpick{grid-template-columns:minmax(150px,220px) minmax(0,1fr)}
.catx-media .mpick-row{flex-wrap:wrap}
.catx-media .mpick-row .inp{min-width:140px}
.catx-media .hint{margin:2px 0 0;font-size:11.5px;line-height:1.9}
.catx-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 22px;border-top:1px solid rgba(128,128,128,.14);background:rgba(128,128,128,.04)}
.catx-foot .pn{margin:0;font-size:12px}
@media (max-width:1100px){.catx-body{grid-template-columns:1fr}}
@media (max-width:620px){
  .catx-head,.catx-body,.catx-foot{padding-inline:14px}
  .catx-fields{grid-template-columns:1fr}
  .catx-media .mpick{grid-template-columns:1fr}
}
.catx-new{margin-bottom:20px;padding:0}
.catx-new > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:16px 22px;font-weight:800;font-size:14.5px}
.catx-new > summary::-webkit-details-marker{display:none}
.catx-plus{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--flame);color:#fff;font-size:18px;line-height:1;transition:transform .35s var(--ez)}
.catx-new[open] .catx-plus{transform:rotate(45deg)}
.catx-new > form{padding:4px 22px 20px;border-top:1px solid rgba(128,128,128,.14)}
.catx-newgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 14px;margin-top:14px}
.catx-newgrid .field{margin:0 0 10px;min-width:0}
@media (max-width:760px){.catx-newgrid{grid-template-columns:1fr}.catx-new > form{padding-inline:14px}.catx-new .catx-foot{margin:0 -14px -20px !important}}

/* ══════════════════════════════════════════════════════════════
   v45 — پنجره‌ی تنظیمات افزونه با پیش‌نمایش زنده
   (پنل کاربر و پنل مدیریت؛ partials/addon-settings + addon-field)
   ══════════════════════════════════════════════════════════════ */
.adn-cfg{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:9px 14px;border-radius:13px;font-size:13px;font-weight:700;
  color:var(--tx);background:var(--raised);box-shadow:var(--up);transition:transform .3s var(--ez),color .2s}
.adn-cfg svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.adn-cfg:hover{color:var(--flame);transform:translateY(-1px)}
.adm-addon .adn-ic{width:34px;height:34px;border-radius:11px}
.adm-addon .adn-ic .emo{font-size:18px}
.adm-addon-acts{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-inline-start:auto}
.adm-addon .adn-cfg{padding:7px 12px;font-size:12px}

html.aset-lock{overflow:hidden}
.aset{border:0;padding:0;margin:auto;width:min(1180px,calc(100vw - 32px));height:min(760px,calc(100vh - 32px));max-width:none;max-height:none;
  border-radius:26px;background:var(--surface);color:var(--tx);box-shadow:0 40px 120px -30px rgba(0,0,0,.55);overflow:hidden}
.aset::backdrop{background:rgba(10,12,16,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.aset[open]{animation:asetIn .35s var(--ez)}
@keyframes asetIn{from{opacity:0;transform:translateY(14px) scale(.985)}}
.aset-form{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100%}
.aset-head{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid rgba(128,128,128,.14)}
.aset-head .adn-ic{width:40px;height:40px;border-radius:13px}
.aset-head .adn-ic .emo{font-size:21px}
.aset-tt{flex:1;min-width:0}
.aset-tt b{display:block;font-size:16px;font-weight:800;line-height:1.5}
.aset-tt span{display:block;font-size:11.5px;color:var(--tx3)}
.aset-x{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--raised);box-shadow:var(--up);font-size:14px;color:var(--tx2)}
.aset-x:hover{color:var(--flame)}

.aset-body{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);min-height:0}
.aset-ctl{overflow:auto;padding:18px 20px 22px;border-inline-end:1px solid rgba(128,128,128,.14);display:flex;flex-direction:column;gap:12px;
  scrollbar-width:thin}
.aset-pv{display:flex;flex-direction:column;gap:10px;padding:16px 18px;min-width:0;min-height:0;background:var(--bg)}
.aset-foot{display:flex;align-items:center;gap:10px;padding:12px 20px;border-top:1px solid rgba(128,128,128,.14)}
.aset-status{flex:1;font-size:12px;color:var(--tx3);min-width:0}
.aset-status.is-ok{color:var(--ok)}
.aset-status.is-bad{color:var(--bad)}
.aset-reset{font-size:12px;color:var(--tx2);padding:7px 12px;border-radius:11px;background:var(--sunken);box-shadow:var(--in2)}
.aset-reset:hover{color:var(--flame)}

/* تب‌ها */
.aset-tabs{display:flex;gap:4px;padding:4px;border-radius:14px;background:var(--sunken);box-shadow:var(--in2);overflow-x:auto;scrollbar-width:none;margin-top:4px}
.aset-tabs::-webkit-scrollbar{display:none}
.aset-tab{flex:1 0 auto;padding:8px 14px;border-radius:11px;font-size:12.5px;font-weight:700;color:var(--tx2);white-space:nowrap;transition:background .25s,color .25s,box-shadow .25s}
.aset-tab.is-on{background:var(--raised);color:var(--tx);box-shadow:var(--up)}
.aset-pane{display:flex;flex-direction:column;gap:12px}
.aset-pane.is-hidden{display:none}

/* ── فیلدها ── */
.af{padding:12px 14px;border-radius:16px;background:var(--raised);box-shadow:var(--up);min-width:0}
.af-lbl{display:block;font-size:12.5px;font-weight:700;color:var(--tx)}
.af-hint{margin:6px 0 0;font-size:11.5px;line-height:1.8;color:var(--tx3)}
.af-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.af-val{min-width:44px;padding:2px 10px;border-radius:99px;text-align:center;font-size:12.5px;font-weight:800;color:#fff;
  background:linear-gradient(145deg,var(--flame2),var(--flame));box-shadow:0 6px 14px -6px rgba(246,75,41,.7);font-variant-numeric:tabular-nums}
.af-ends{display:flex;justify-content:space-between;font-size:10.5px;color:var(--tx3);margin-top:2px}

/* نوار لغزنده با بخش پرشده */
.af-slider{-webkit-appearance:none;appearance:none;width:100%;height:24px;margin:10px 0 0;background:transparent;cursor:pointer;direction:ltr}
.af-slider:focus{outline:none}
.af-slider::-webkit-slider-runnable-track{height:8px;border-radius:99px;box-shadow:var(--in2);
  background:linear-gradient(90deg,var(--flame2),var(--flame)) 0 / var(--p,0%) 100% no-repeat,var(--sunken)}
.af-slider::-moz-range-track{height:8px;border-radius:99px;background:var(--sunken);box-shadow:var(--in2)}
.af-slider::-moz-range-progress{height:8px;border-radius:99px;background:linear-gradient(90deg,var(--flame2),var(--flame))}
.af-slider::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-7px;border-radius:50%;background:#fff;
  border:3px solid var(--flame);box-shadow:0 4px 12px -2px rgba(0,0,0,.35);transition:transform .2s var(--ez)}
.af-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--flame);box-shadow:0 4px 12px -2px rgba(0,0,0,.35)}
.af-slider:active::-webkit-slider-thumb,.af-slider:focus-visible::-webkit-slider-thumb{transform:scale(1.15)}
.af-slider:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 5px rgba(246,75,41,.25)}

/* کلید */
.af-sw{display:flex;align-items:center;gap:12px;cursor:pointer;user-select:none}
.af-sw .af-lbl{flex:1}
.af-sw input{position:absolute;opacity:0;width:0;height:0}
.af-knob{position:relative;flex:0 0 auto;width:46px;height:26px;border-radius:99px;background:var(--sunken);box-shadow:var(--in2);transition:background .3s}
.af-knob::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:20px;height:20px;border-radius:50%;background:#fff;
  box-shadow:0 3px 8px -2px rgba(0,0,0,.4);transition:transform .3s var(--ez)}
.af-sw input:checked + .af-knob{background:linear-gradient(145deg,var(--flame2),var(--flame));box-shadow:none}
.af-sw input:checked + .af-knob::after{transform:translateX(-20px)}
[dir="ltr"] .af-sw input:checked + .af-knob::after{transform:translateX(20px)}
.af-sw input:focus-visible + .af-knob{box-shadow:0 0 0 3px rgba(246,75,41,.3)}

/* دکمه‌های گزینه‌ای (select کوتاه) */
.af-segs{display:flex;gap:4px;margin-top:9px;padding:4px;border-radius:13px;background:var(--sunken);box-shadow:var(--in2)}
.af-segi{flex:1;position:relative;cursor:pointer}
.af-segi input{position:absolute;opacity:0;width:0;height:0}
.af-segi span{display:block;padding:7px 8px;border-radius:10px;text-align:center;font-size:12.5px;font-weight:700;color:var(--tx2);transition:background .25s,color .25s,box-shadow .25s}
.af-segi input:checked + span{background:linear-gradient(145deg,var(--flame2),var(--flame));color:#fff;box-shadow:0 6px 14px -6px rgba(246,75,41,.7)}
.af-segi input:focus-visible + span{outline:2px solid rgba(246,75,41,.45);outline-offset:1px}

/* ورودی‌ها */
.af-inp{width:100%;margin-top:8px;padding:9px 12px;border:0;border-radius:12px;font:inherit;font-size:13px;color:var(--tx);background:var(--sunken);box-shadow:var(--in2)}
.af-inp:focus{outline:2px solid rgba(246,75,41,.4);outline-offset:0}
.af-sel{position:relative}
.af-sel select{-webkit-appearance:none;appearance:none;padding-inline-end:34px;cursor:pointer}
.af-sel::after{content:"▾";position:absolute;inset-inline-end:12px;bottom:10px;font-size:12px;color:var(--tx3);pointer-events:none}
.af-num{display:flex;align-items:center;gap:6px;margin-top:8px}
.af-num .af-inp{margin:0;text-align:center;font-weight:700;-moz-appearance:textfield}
.af-num .af-inp::-webkit-inner-spin-button,.af-num .af-inp::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.af-step{flex:0 0 auto;width:38px;height:38px;border-radius:12px;font-size:18px;font-weight:700;background:var(--surface);box-shadow:var(--up);color:var(--tx2)}
.af-step:hover{color:var(--flame)}
.af-step:active{box-shadow:var(--in2)}

/* رنگ */
.af-color{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:9px}
.af-chip{position:relative;flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:var(--c,#fff);
  box-shadow:0 0 0 3px var(--surface),0 0 0 4px rgba(128,128,128,.35),0 6px 14px -6px rgba(0,0,0,.45);cursor:pointer;overflow:hidden}
.af-chip input{position:absolute;inset:-8px;width:calc(100% + 16px);height:calc(100% + 16px);opacity:0;cursor:pointer;border:0;padding:0}
.af-color .af-hex{flex:0 0 96px;width:96px;margin:0;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;text-transform:lowercase}
.af-sw8{display:flex;gap:6px;flex-wrap:wrap;flex-basis:100%}
.af-pre{width:22px;height:22px;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px rgba(128,128,128,.4) inset;transition:transform .2s var(--ez)}
.af-pre:hover{transform:scale(1.15)}
.af-pre.is-on{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--flame)}

/* ── پیش‌نمایش ── */
.aset-pv-bar{display:flex;align-items:center;gap:10px}
.aset-live{display:inline-flex;align-items:center;gap:8px;flex:1;font-size:12.5px;font-weight:700;color:var(--tx2)}
.aset-live i{width:8px;height:8px;border-radius:50%;background:#2E9E6B;box-shadow:0 0 0 0 rgba(46,158,107,.6);animation:asetPing 2s infinite}
@keyframes asetPing{70%{box-shadow:0 0 0 8px rgba(46,158,107,0)}100%{box-shadow:0 0 0 0 rgba(46,158,107,0)}}
.aset-dev{display:flex;gap:3px;padding:3px;border-radius:11px;background:var(--sunken);box-shadow:var(--in2)}
.aset-dev button{width:34px;height:28px;border-radius:9px;display:grid;place-items:center;color:var(--tx3)}
.aset-dev button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.aset-dev button.is-on{background:var(--raised);color:var(--tx);box-shadow:var(--up)}
.aset-re{width:32px;height:32px;border-radius:10px;font-size:16px;color:var(--tx2);background:var(--raised);box-shadow:var(--up)}
.aset-re:hover{color:var(--flame)}
.aset-pv-box{position:relative;flex:1;min-height:0;border-radius:18px;overflow:hidden;background:#0f1216;
  box-shadow:0 0 0 1px rgba(128,128,128,.22),0 18px 40px -20px rgba(0,0,0,.6);transition:max-width .35s var(--ez)}
.aset-pv-box[data-dev="mobile"]{max-width:300px;width:100%;margin-inline:auto;border-radius:26px;box-shadow:0 0 0 7px #1b1f26,0 0 0 8px rgba(128,128,128,.3),0 18px 40px -20px rgba(0,0,0,.6)}
.aset-pv-box iframe{position:absolute;top:0;left:0;border:0;transform-origin:0 0;background:#fff}
.aset-pv-wait,.aset-pv-off{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:12px;padding:20px;text-align:center;
  font-size:13px;line-height:2;color:rgba(255,255,255,.72);background:#0f1216}
.aset-pv-wait i{width:30px;height:30px;border-radius:50%;border:3px solid rgba(255,255,255,.15);border-top-color:var(--flame);animation:asetSpin 1s linear infinite}
.aset-pv-wait[hidden]{display:none}
@keyframes asetSpin{to{transform:rotate(360deg)}}
.aset-pv-note{margin:0;font-size:11.5px;color:var(--tx3);line-height:1.8}

@media (max-width:860px){
  .aset{width:100vw;height:100dvh;max-height:none;border-radius:0}
  .aset-body{grid-template-columns:1fr;grid-template-rows:minmax(220px,38vh) minmax(0,1fr)}
  .aset-pv{order:-1;padding:10px 12px}
  .aset-ctl{border:0;border-top:1px solid rgba(128,128,128,.14);padding:14px}
  .aset-pv-box[data-dev="mobile"]{max-width:170px}
  .aset-head,.aset-foot{padding-inline:14px}
  .aset-reset{padding:7px 9px}
}
@media (prefers-reduced-motion:reduce){.aset[open],.aset-live i,.af-knob::after{animation:none;transition:none}}
.aset-ctl > *,.aset-pane > *{flex-shrink:0}

/* ══════════════════════════════════════════════════════════════
   v46 — ویترین افزونه‌ها، رمز دلخواه پنل سایت، نسخه‌ی تکی سایت
   ══════════════════════════════════════════════════════════════ */
.inst-setcreds{margin-top:14px;padding-top:12px;border-top:1px dashed rgba(128,128,128,.22)}
.inst-setcreds > summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--flame);list-style:none}
.inst-setcreds > summary::-webkit-details-marker{display:none}
.inst-setcreds > summary::before{content:"›";display:inline-block;margin-inline-end:8px;transition:transform .3s var(--ez)}
.inst-setcreds[open] > summary::before{transform:rotate(90deg)}
.inst-setcreds form{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start;margin-top:12px}
.inst-setcreds form .field{margin:0;flex:1;min-width:190px;max-width:300px}
.inst-setcreds form > .gh{margin-top:27px}
@media (max-width:640px){.inst-setcreds form .field{flex:1 1 100%;max-width:none}.inst-setcreds form > .gh{margin-top:0}}
.inst-ver{display:flex;align-items:center;gap:14px 22px;flex-wrap:wrap;margin-top:12px}
.inst-ver-pick{display:flex;gap:8px;flex-wrap:nowrap;align-items:center;margin-inline-start:auto}
.inst-ver-pick .inp{width:auto;flex:0 1 250px;min-width:0}
.inst-ver-pick .gh{flex:0 0 auto}
@media (max-width:640px){.inst-ver-pick{margin-inline-start:0;width:100%}.inst-ver-pick .inp{flex:1 1 auto}}

/* کارت افزونه در ویترین */
.acard .pcard-media{background:var(--sunken)}
.acard-ph{position:absolute;inset:0;display:grid;place-items:center;
  background:radial-gradient(120% 120% at 20% 0%,rgba(246,75,41,.16),transparent 60%),var(--sunken)}
.acard-ph .adn-ic{width:84px;height:84px;border-radius:26px}
.acard-ph .adn-ic .emo{font-size:44px}
.acard-ph .adn-ic svg{width:36px;height:36px}
.acard-kind{position:absolute;inset-block-start:10px;inset-inline-start:10px;z-index:2;padding:4px 11px;border-radius:99px;font-size:11px;font-weight:700;
  color:#fff;background:rgba(18,19,23,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.acard-head{display:flex;align-items:center;gap:10px}
.acard-head .adn-ic{width:36px;height:36px;border-radius:12px;flex:0 0 auto}
.acard-head .adn-ic .emo{font-size:19px}
.acard-head h3 small{display:block;font-size:11.5px;font-weight:400;color:var(--tx3);letter-spacing:.02em}

/* صفحه‌ی معرفی افزونه */
.addon-hero-ic .adn-ic{width:54px;height:54px;border-radius:17px}
.addon-hero-ic .adn-ic .emo{font-size:28px}
.addon-hero-ic .adn-ic svg{width:25px;height:25px}
.addon-en{margin-top:6px;font-size:13px;letter-spacing:.06em;color:var(--tx3);text-align:start}
[dir="rtl"] .addon-en{text-align:right}
.addon-tpl{display:flex;flex-direction:column;gap:4px;padding:16px}
.addon-tpl b{font-size:14.5px}
.addon-tpl .pn{margin:0;flex:1}
.addon-tpl-go{margin-top:8px;font-size:12.5px;font-weight:700;color:var(--flame)}
.addon-tpl-go i{font-style:normal}

/* ══════════════════════════════════════════════════════════════
   v47 — آپلود پس‌زمینه (public/js/uploader.js)
   ══════════════════════════════════════════════════════════════ */
.upl-tray{position:fixed;z-index:120;inset-block-end:16px;inset-inline-end:16px;width:min(380px,calc(100vw - 32px));
  border-radius:20px;background:var(--surface);box-shadow:var(--up2),0 18px 50px -20px rgba(0,0,0,.45);overflow:hidden}
.upl-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid rgba(128,128,128,.14)}
.upl-title{font-size:13.5px;font-weight:800}
.upl-sum{font-size:11.5px;color:var(--tx3);margin-inline-start:auto}
.upl-min,.upl-x{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;color:var(--tx2);
  background:var(--sunken);box-shadow:var(--in2);font-size:12px;cursor:pointer;flex:0 0 auto}
.upl-tray.mini .upl-list{display:none}
.upl-tray.mini .upl-min{transform:rotate(180deg)}
.upl-list{max-height:min(48vh,360px);overflow-y:auto;padding:6px 10px 10px}
.upl-item{padding:10px 4px;border-bottom:1px dashed rgba(128,128,128,.18)}
.upl-item:last-child{border-bottom:0}
.upl-row1{display:flex;align-items:center;gap:8px}
.upl-ic{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;font-size:11px;flex:0 0 auto;
  background:var(--sunken);color:var(--flame);font-weight:800}
.upl-item[data-state=done] .upl-ic{color:var(--ok)}
.upl-item[data-state=error] .upl-ic{color:var(--bad)}
.upl-name{flex:1;min-width:0;font-size:12.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:ltr;text-align:end}
.upl-cancel{width:24px;height:24px;border-radius:8px;color:var(--tx3);font-size:11px;cursor:pointer;flex:0 0 auto}
.upl-cancel:hover{color:var(--bad)}
.upl-bar{height:7px;border-radius:99px;background:var(--sunken);box-shadow:var(--in2);overflow:hidden;margin:8px 0 6px}
.upl-bar i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--flame),#ff8a5c);transition:width .25s linear}
.upl-item[data-state=done] .upl-bar i,.upl-inline[data-state=done] .upl-bar i{background:var(--ok)}
.upl-item[data-state=error] .upl-bar i,.upl-inline[data-state=error] .upl-bar i{background:var(--bad)}
.upl-item[data-state=up] .upl-bar i{background-size:200% 100%;animation:uplShine 1.4s linear infinite;
  background-image:linear-gradient(90deg,var(--flame),#ff9b73,var(--flame))}
@keyframes uplShine{to{background-position:-200% 0}}
.upl-row2{display:flex;gap:10px;flex-wrap:wrap;font-size:11px;color:var(--tx3)}
.upl-row2 .upl-speed{color:var(--tx2);font-weight:700}
.upl-msg{margin-top:6px;font-size:11.5px;line-height:1.8;color:var(--tx2)}
.upl-item[data-state=error] .upl-msg{color:var(--bad)}
.upl-open{color:var(--flame);font-weight:700;margin-inline-start:6px}
.upl-inline{flex-basis:100%;width:100%;margin-top:10px}
.upl-inline .upl-bar{margin:0 0 6px}
.upl-inline span{font-size:11.5px;color:var(--tx2)}
.upl-inline[data-state=error] span{color:var(--bad)}

/* قاب مرور وسط آپلود */
.upl-frame{display:none;position:fixed;z-index:110;inset-block:0;inset-inline-end:0;inset-inline-start:250px;
  flex-direction:column;background:var(--bg)}
.upl-frame.on{display:flex}
.upl-frame iframe{flex:1;width:100%;border:0;background:var(--bg)}
.upl-frame-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 16px;background:var(--surface);box-shadow:var(--up);font-size:12.5px;color:var(--tx2)}
.upl-frame-bar .gh{margin-inline-start:auto}
.upl-dot{width:9px;height:9px;border-radius:50%;background:var(--flame);box-shadow:0 0 0 0 rgba(246,75,41,.6);animation:uplPulse 1.6s infinite}
.upl-frame.idle .upl-dot{background:var(--ok);animation:none}
@keyframes uplPulse{70%{box-shadow:0 0 0 10px rgba(246,75,41,0)}100%{box-shadow:0 0 0 0 rgba(246,75,41,0)}}
@media(max-width:900px){.upl-frame{inset-inline-start:0;inset-block-start:64px}}
/* پنل کاربر: قاب زیر هدر سایت */
body:not(.adm-body) .upl-frame{inset-inline-start:0;inset-block-start:0;z-index:130}

/* صفحه‌ای که داخل قاب یا پنجره‌ی شناور باز شده — بدون نوار کناری، هدر و پانویس */
html.in-frame .aside,html.in-frame .adm-bar,html.in-frame .adm-veil,html.in-frame .clockbar,
html.in-frame .fw-dock,html.in-frame .adm-note,html.in-frame .hdr,html.in-frame .ftr,html.in-frame .mnav{display:none !important}
html.in-frame .adm{display:block;min-height:auto}
html.in-frame .amain{padding:16px 18px;max-width:none}


/* ══════════ کاهش حجم هنگام آپلود (۵۰) ══════════ */
.lmc{flex-basis:100%;width:100%;margin-top:8px;padding:10px 12px;border-radius:14px;background:var(--sunken);box-shadow:var(--in2);font-size:12.5px;color:var(--tx2)}
.lmc[data-on="1"]{box-shadow:var(--in2),inset 0 0 0 1px rgba(246,75,41,.28)}
.lmc .lmc-sw{display:inline-flex;align-items:center;gap:10px;margin:0;font-size:13px;font-weight:400;color:var(--tx)}
.lmc .lmc-sw input:not(:checked) + .track{background:rgba(128,128,128,.24)}
.lmc .lmc-sw .track{width:40px;height:22px}
.lmc .lmc-sw .track::after{width:16px;height:16px}
.lmc .lmc-sw input:checked + .track::after{transform:translateX(-18px)}
[dir="ltr"] .lmc .lmc-sw input:checked + .track::after{transform:translateX(18px)}
.lmc .lmc-t{font-weight:700}
.lmc-t small{font-weight:400;color:var(--tx3);margin-inline-start:6px;font-size:11.5px}
.lmc-opts{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end;margin-top:10px}
.lmc-opts[hidden]{display:none}
.lmc .lmc-f{display:flex;flex-direction:column;gap:4px;min-width:150px;flex:1 1 170px;margin:0;font-size:12px;color:var(--tx3);font-weight:600}
.lmc .lmc-f .inp{padding:8px 12px;font-size:12.5px}
.lmc .lmc-mute{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:12.5px;color:var(--tx2);cursor:pointer}
.lmc-hint{flex-basis:100%;margin:0;font-size:11.5px;line-height:1.9;color:var(--tx3)}
.lmc-res{margin-top:8px;padding-top:8px;border-top:1px dashed rgba(128,128,128,.28);font-size:12px;line-height:1.9;color:var(--tx2);overflow-wrap:anywhere}
.lmc-res[hidden]{display:none}
.upl-item[data-phase="vc"] .upl-bar i,.upl-inline[data-state="up"] .upl-bar i{transition:width .6s var(--ez)}

/* ══════════ توقف موقت خرید/تست (۵۱) ══════════ */
.emg-note{display:flex;gap:12px;align-items:flex-start;margin:16px 0 0;padding:12px 16px;border-radius:16px;
  background:var(--sunken);box-shadow:var(--in2),inset 0 0 0 1.5px rgba(200,135,26,.4);font-size:13px;line-height:1.9;color:var(--tx2)}
.emg-note p{margin:0}
.emg-note-ic{flex:none;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;gap:4px;
  background:var(--warn)}
.emg-note-ic::before,.emg-note-ic::after{content:"";width:3px;height:11px;border-radius:2px;background:#fff}

/* ══════════ فیلد لازم / اختیاری (۵۱) ══════════
 * فیلد لازم: نقطه‌ی کوچک رنگ برند کنار برچسب (بدون نوشتن «اجباری»)؛ اختیاری: «(اختیاری)» کم‌رنگ.
 * اگر لازم خالی بماند و کاربر از آن رد شود، قاب ورودی نرم قرمز می‌شود. */
label.req::after,.req-l::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:linear-gradient(145deg,var(--flame2),var(--flame));margin-inline-start:7px;vertical-align:middle;
  box-shadow:0 0 0 3px rgba(246,75,41,.14);transform:translateY(-1px)}
label .opt,.opt{font-weight:400;font-size:.92em;color:var(--tx3)}
.inp.touched[required]:invalid{box-shadow:var(--in2),inset 0 0 0 1.5px rgba(210,63,44,.45)}

/* ۵۲: دکمه‌های خرید/تست در زمان توقف اضطراری — کم‌رنگ و غیرفعال */
body[data-emg-buy] [data-cta="buy"],body[data-emg-trial] [data-cta="trial"],body[data-emg-renew] [data-cta="renew"]{
  opacity:.42;filter:grayscale(.85);pointer-events:none;cursor:not-allowed;box-shadow:none}
body[data-emg-buy] [data-cta="buy"] .k,body[data-emg-trial] [data-cta="trial"] .k,body[data-emg-renew] [data-cta="renew"] .k{display:none}
.emg-why{display:block;flex-basis:100%;margin-top:6px;font-size:11.5px;line-height:1.8;color:var(--warn)}

/* ══════════ قیمت با تخفیف خودکار (۵۲) ══════════ */
.price{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;line-height:1.3}
.price-new{font-weight:900;color:inherit}
.price-old{font-size:.78em;font-weight:600;color:var(--tx3);text-decoration:line-through;text-decoration-thickness:1.5px;
  text-decoration-color:rgba(210,63,44,.75);opacity:.8}
.price-unit{font-size:12px;font-weight:400;color:var(--tx3)}
.price-off{position:relative;display:inline-flex;align-items:center;gap:3px;padding:3px 10px;border-radius:99px;overflow:hidden;
  font-size:11.5px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--flame2),var(--flame));
  box-shadow:0 4px 12px -4px rgba(246,75,41,.65);animation:priceOffPop 2.6s var(--ez) infinite;transform-origin:center}
.price-off i{font-style:normal}
.price-off::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  transform:translateX(-120%);animation:priceOffShine 2.6s ease-in-out infinite}
@keyframes priceOffPop{0%,100%{transform:scale(1) rotate(0)}8%{transform:scale(1.12) rotate(-4deg)}16%{transform:scale(.97) rotate(2deg)}24%{transform:scale(1) rotate(0)}}
@keyframes priceOffShine{0%,40%{transform:translateX(-120%)}70%,100%{transform:translateX(120%)}}
@media (prefers-reduced-motion:reduce){.price-off,.price-off::after{animation:none}}
.price.big .price-new{font-size:34px;color:var(--cream)}
.price.big .price-old{font-size:17px}
.price.big{justify-content:center}
.price.sm .price-new{font-size:inherit}
.price.sm .price-off{font-size:10.5px;padding:2px 8px}

/* ۵۲: نشانه‌ی پاسخ تازه روی آیکون حساب */
.hdr-user .av{position:relative}
.hdr-badge{position:absolute;top:-5px;inset-inline-end:-6px;min-width:17px;height:17px;padding:0 4px;border-radius:99px;display:grid;place-items:center;
  font-size:10px;font-style:normal;font-weight:800;line-height:1;color:#fff;background:var(--bad);box-shadow:0 0 0 2px var(--surface);animation:hdrBadge 2s var(--ez) infinite}
@keyframes hdrBadge{0%,100%{transform:scale(1)}10%{transform:scale(1.22)}20%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.hdr-badge{animation:none}}

/* ══════════ منوی بزرگ «محصولات» (۵۲) ══════════ */
.mm{position:static}
.mm-btn{display:inline-flex;align-items:center;gap:5px;padding:8px 15px;border-radius:99px;font-size:13px;font-weight:600;color:var(--tx2);
  background:none;border:0;cursor:pointer;white-space:nowrap;font-family:inherit;transition:all .4s var(--ez)}
.mm-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ez)}
.mm-btn:hover,.mm-btn[aria-expanded="true"]{color:var(--flame);box-shadow:var(--up)}
.mm-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.mm-btn.on{color:var(--flame);box-shadow:var(--in);background:var(--sunken)}
.hdr--auth .mm-btn{padding:8px 10px;font-size:12.5px}
@media(max-width:1340px){.mm-btn{padding:8px 10px;font-size:12.5px}}
.mm-panel{position:absolute;inset-inline:12px;top:calc(100% + 10px);z-index:120;padding:18px;border-radius:26px;
  background:var(--surface);box-shadow:0 24px 60px -24px rgba(20,26,40,.35),var(--up);
  opacity:0;transform:translateY(-8px);transition:opacity .25s var(--ez),transform .3s var(--ez)}
.mm-panel.open{opacity:1;transform:none}
.mm-panel[hidden]{display:none}
[data-theme="dark"] .mm-panel{box-shadow:0 24px 60px -20px rgba(0,0,0,.75),var(--up)}
.mm-grid{display:grid;grid-template-columns:repeat(var(--mm-cols),minmax(0,1fr));gap:14px}
.mm-col{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:20px;background:var(--sunken);box-shadow:var(--in2);min-width:0}
.hdr-nav .mm-panel a{padding:0;border-radius:0;box-shadow:none;background:none;white-space:normal;font-weight:inherit;font-size:inherit;color:inherit}
.hdr-nav .mm-panel a:hover{box-shadow:none}
.mm-head{display:flex;gap:12px;align-items:center}
.mm-head>span:last-child{display:flex;flex-direction:column;min-width:0}
.mm-head b{font-size:15px;color:var(--tx)}
.mm-head.on b{color:var(--flame)}
.mm-head b small{font-size:11px;font-weight:700;color:var(--flame);margin-inline-start:4px}
.mm-head>span:last-child>small{font-size:11.5px;color:var(--tx3);line-height:1.7}
.hdr-nav .mm-panel .mm-head:hover b{color:var(--flame)}
.mm-ic{flex:none;width:40px;height:40px;border-radius:14px;background:linear-gradient(145deg,var(--flame2),var(--flame));box-shadow:0 6px 16px -6px rgba(246,75,41,.6);position:relative}
.mm-ic::before{content:"";position:absolute;inset:11px;background:#fff;-webkit-mask:var(--mm-i) center/contain no-repeat;mask:var(--mm-i) center/contain no-repeat}
.mm-ic-grid{--mm-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h8v8H3zM13 3h8v8h-8zM3 13h8v8H3zM13 13h8v8h-8z'/%3E%3C/svg%3E")}
.mm-ic-plus{--mm-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 3h4v7h7v4h-7v7h-4v-7H3v-4h7z'/%3E%3C/svg%3E")}
.mm-ic-tool{--mm-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 19l-9-9a6 6 0 0 0-7.6-7.6l3.9 3.9-2.8 2.8L2.6 5.2A6 6 0 0 0 10.2 13l9 9z'/%3E%3C/svg%3E")}
.mm-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.mm-list li{display:flex;flex-direction:column;gap:2px;padding:7px 10px;border-radius:12px;transition:background .25s var(--ez)}
.mm-list li:hover{background:var(--surface);box-shadow:var(--up)}
.mm-sub{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;font-weight:700;color:var(--tx)}
.hdr-nav .mm-panel .mm-sub{font-weight:700}
.hdr-nav .mm-panel .mm-sub:hover{color:var(--flame)}
.mm-sub em{font-style:normal;font-size:11px;font-weight:700;color:var(--tx3);background:var(--surface);border-radius:99px;padding:1px 8px}
.mm-items{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:11.5px;color:var(--tx3)}
.hdr-nav .mm-panel .mm-items a{color:var(--tx3);font-size:11.5px;font-weight:500}
.hdr-nav .mm-panel .mm-items a:hover{color:var(--flame)}
.hdr-nav .mm-panel .mm-all{margin-top:auto;font-size:12px;font-weight:700;color:var(--flame)}
@media (prefers-reduced-motion:reduce){.mm-panel,.mm-btn svg{transition:none}}