/* ============================================================
   OverRobot — Night City Theme  (v25)
   پالت مستقیماً از تصویر هیرو استخراج شده:
     قرمز نئون #F9255A · سایان #25C4F9 · آبی برقی #258FF9
     پایه‌ی شب شهری #05070E / #0A0E18
   شیشه: Liquid Glass واقعی (شفاف، بلور بالا، بدون کدری)
   فونت: Inter + Vazirmatn — رابط کاربری، نه نمایشی
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* ── پایه ── */
  --bg-0:#05070E;
  --bg-1:#080C15;
  --bg-2:#0D131F;

  /* ── نئون‌های استخراج‌شده از عکس ── */
  --neon-red:#F9255A;      /* تابلوهای قرمز شهر */
  --neon-crimson:#F92525;
  --neon-magenta:#F9258F;
  --neon-cyan:#25C4F9;     /* نورهای آبی-فیروزه‌ای */
  --neon-blue:#258FF9;
  --neon-amber:#F98F25;
  --neon-green:#25F9A8;
  --steel:#3F5F7F;         /* آبی فولادی مه‌آلود عکس */

  /* ── متن ── */
  --txt:#EEF3FA;
  --txt-mid:#9FB0C7;
  --txt-dim:#5B6B82;

  /* ── خطوط ── */
  --line:rgba(159,176,199,.14);
  --line-hot:rgba(37,196,249,.36);
  --line-red:rgba(249,37,90,.36);

  /* ── گرادیان‌ها ── */
  --grad-main:linear-gradient(115deg,#25C4F9 0%,#258FF9 42%,#F9255A 100%);
  --grad-hot:linear-gradient(115deg,#F9255A 0%,#F9258F 55%,#F98F25 100%);
  --grad-cool:linear-gradient(115deg,#25C4F9 0%,#258FF9 100%);
  --grad-ok:linear-gradient(115deg,#25F9A8 0%,#25C4F9 100%);

  --glow-cyan:0 0 26px rgba(37,196,249,.42);
  --glow-red:0 0 26px rgba(249,37,90,.42);

  /* ── فونت ──
     یک خانواده برای کل سایت. Inter اول می‌آید تا حروف لاتین و اعداد را
     بردارد، فارسی خودکار به Vazirmatn می‌افتد. هر دو فونت رابط کاربری‌اند
     (نه تزئینی)، تناسب و ارتفاع x نزدیکی دارند، پس کنار هم یکدست دیده
     می‌شوند و در سایز کوچک هم خوانا می‌مانند.
     تمایز بصری از وزن و فاصله می‌آید، نه از فونت نمایشی. */
  --f-ui:'Inter','Vazirmatn',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-cy:var(--f-ui);   /* برای سازگاری با استایل‌های قدیمی */
  --f-btn:var(--f-ui);

  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:28px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}

body{
  font-family:var(--f-ui);
  background:var(--bg-0);
  color:var(--txt);
  direction:rtl;
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ── محیط: هاله‌های نئون شهر ── */
body::before{
  content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(880px 600px at 84% -6%, rgba(249,37,90,.16), transparent 62%),
    radial-gradient(760px 540px at 8% 6%,   rgba(37,196,249,.14), transparent 60%),
    radial-gradient(900px 660px at 50% 106%,rgba(37,143,249,.10), transparent 62%),
    linear-gradient(180deg,#05070E 0%,#080C15 48%,#05070E 100%);
}
/* بافت ظریف پس‌زمینه */
body::after{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.4;
  background:
    repeating-linear-gradient(0deg, rgba(159,176,199,.016) 0 1px, transparent 1px 3px),
    linear-gradient(rgba(63,95,127,.05) 1px, transparent 1px) 0 0/64px 64px,
    linear-gradient(90deg, rgba(63,95,127,.05) 1px, transparent 1px) 0 0/64px 64px;
  mask-image:radial-gradient(circle at 50% 26%, #000 0%, transparent 80%);
  -webkit-mask-image:radial-gradient(circle at 50% 26%, #000 0%, transparent 80%);
}

::selection{background:rgba(249,37,90,.32);color:#fff}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:rgba(255,255,255,.02)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(37,196,249,.5),rgba(249,37,90,.5));
  border-radius:20px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#25C4F9,#F9255A);background-clip:padding-box}

a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}

/* ── تایپوگرافی ──
   سلسله‌مراتب از وزن و اندازه ساخته می‌شود، نه از فونت متفاوت.
   فارسی letter-spacing نمی‌گیرد (حروف را از هم جدا می‌کند و بد می‌شود). */
.cy{letter-spacing:0}
.num,.mono{font-variant-numeric:tabular-nums;direction:ltr;text-align:right;
  font-feature-settings:'tnum' 1,'lnum' 1}

h1,h2,h3{font-weight:700;letter-spacing:-.01em;line-height:1.5}
h1{font-size:clamp(24px,3.4vw,38px)}
h2{font-size:clamp(20px,2.6vw,28px)}
h3{font-size:17px}

/* برچسب کوچک لاتین بالای عنوان‌ها — تنها جایی که فاصله‌ی حروف زیاد است */
.kicker{
  font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--neon-cyan);
}

/* ============================================================
   1) LIQUID GLASS — سبک آیفون: شفاف، بلور بالا، بدون کدری
   کلید کار: پس‌زمینه‌ی رنگی تیره حذف شد. فقط سفیدِ خیلی کم‌رنگ
   + backdrop-filter قوی. نور پشت شیشه عبور می‌کند.
   ============================================================ */

.lq{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 26px;
  border-radius:999px;
  font-weight:500;font-size:14px;line-height:1.9;
  color:var(--txt);
  cursor:pointer;
  isolation:isolate;
  white-space:nowrap;
  border:1px solid rgba(255,255,255,.18);
  /* شیشه‌ی واقعی: تقریباً بی‌رنگ */
  background:linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.06) 50%, rgba(255,255,255,.02) 100%);
  backdrop-filter:blur(28px) saturate(200%) brightness(1.14);
  -webkit-backdrop-filter:blur(28px) saturate(200%) brightness(1.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),          /* لبه‌ی نورانی بالا */
    inset 0 -1px 0 rgba(255,255,255,.10),
    inset 0 0 20px rgba(255,255,255,.06),
    0 8px 26px rgba(0,0,0,.34);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease),
             border-color .45s var(--ease), background .45s var(--ease);
  overflow:hidden;
}
/* بازتاب نور که با هاور می‌لغزد */
.lq::before{
  content:'';position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg, transparent 22%, rgba(255,255,255,.5) 46%,
             rgba(255,255,255,.08) 56%, transparent 74%);
  transform:translateX(-125%);
  transition:transform .9s var(--ease);
}
/* هاله‌ی رنگی بسیار رقیق — فقط ته‌رنگ می‌دهد، کدر نمی‌کند */
.lq::after{
  content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:var(--lq-tint, transparent);
  opacity:.5;
  transition:opacity .45s var(--ease);
}
.lq:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.34);
  background:linear-gradient(180deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,.10) 50%, rgba(255,255,255,.04) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -1px 0 rgba(255,255,255,.14),
    inset 0 0 26px rgba(255,255,255,.10),
    0 14px 38px rgba(0,0,0,.42),
    var(--lq-glow, 0 0 28px rgba(255,255,255,.14));
}
.lq:hover::before{transform:translateX(125%)}
.lq:hover::after{opacity:.85}
.lq:active{transform:translateY(0) scale(.985)}
.lq:disabled,.lq[disabled]{opacity:.4;pointer-events:none}
.lq:focus-visible{outline:2px solid var(--neon-cyan);outline-offset:3px}

/* ته‌رنگ‌ها — همه بسیار رقیق تا شیشه شفاف بماند */
.lq.primary{--lq-tint:linear-gradient(115deg, rgba(37,196,249,.20), rgba(37,143,249,.14));
            --lq-glow:0 0 30px rgba(37,196,249,.38); border-color:rgba(37,196,249,.34)}
.lq.hot    {--lq-tint:linear-gradient(115deg, rgba(249,37,90,.22), rgba(249,37,143,.14));
            --lq-glow:0 0 30px rgba(249,37,90,.40); border-color:rgba(249,37,90,.36)}
.lq.violet {--lq-tint:linear-gradient(115deg, rgba(249,37,143,.20), rgba(37,143,249,.14));
            --lq-glow:0 0 30px rgba(249,37,143,.36); border-color:rgba(249,37,143,.32)}
.lq.ok     {--lq-tint:linear-gradient(115deg, rgba(37,249,168,.18), rgba(37,196,249,.12));
            --lq-glow:0 0 30px rgba(37,249,168,.34); border-color:rgba(37,249,168,.30)}
.lq.warn   {--lq-tint:linear-gradient(115deg, rgba(249,143,37,.20), rgba(249,37,90,.12));
            --lq-glow:0 0 30px rgba(249,143,37,.34); border-color:rgba(249,143,37,.32)}
.lq.danger {--lq-tint:linear-gradient(115deg, rgba(249,37,37,.22), rgba(249,37,90,.14));
            --lq-glow:0 0 30px rgba(249,37,37,.38); border-color:rgba(249,37,37,.34)}
.lq.ghost  {--lq-tint:transparent; --lq-glow:0 0 22px rgba(255,255,255,.12)}

.lq.sm{padding:9px 17px;font-size:12.5px;gap:6px}
.lq.xs{padding:6px 13px;font-size:11.5px;gap:5px}
.lq.lg{padding:16px 34px;font-size:15px}
.lq.block{display:flex;width:100%}
.lq.sq{border-radius:var(--r-md)}

/* ============================================================
   2) پنل شیشه‌ای — همان منطق: شفاف، نه کدر
   ============================================================ */

.glass{
  position:relative;
  background:linear-gradient(160deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-lg);
  backdrop-filter:blur(34px) saturate(190%) brightness(1.06);
  -webkit-backdrop-filter:blur(34px) saturate(190%) brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 -1px 0 rgba(255,255,255,.05),
    0 18px 44px rgba(0,0,0,.38);
  overflow:hidden;
}
.glass::before{
  content:'';position:absolute;top:0;right:10%;left:10%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(37,196,249,.85),rgba(249,37,90,.85),transparent);
}
.glass.no-bar::before{display:none}

/* روی پس‌زمینه‌ی روشن‌تر (هیرو) کمی مات‌تر تا متن خوانا بماند */
.glass.solid{background:linear-gradient(160deg, rgba(13,19,31,.72), rgba(5,7,14,.66))}

.glass-h{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.05), transparent);
}
.glass-h h3{font-size:14.5px;font-weight:600;display:flex;align-items:center;gap:9px}
.glass-h h3 .dot{width:7px;height:7px;border-radius:50%;background:var(--neon-cyan);
  box-shadow:var(--glow-cyan);flex:none}
.glass-b{padding:18px 20px}

.clip{clip-path:polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px)}

.sec-title{
  display:flex;align-items:center;gap:11px;
  font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--neon-cyan);margin:26px 0 14px;
}
.sec-title::after{content:'';flex:1;height:1px;
  background:linear-gradient(90deg,rgba(37,196,249,.45),transparent)}
.sec-title .ic{width:24px;height:24px;display:grid;place-items:center;border-radius:7px;
  background:rgba(37,196,249,.10);border:1px solid rgba(37,196,249,.3);font-size:11px}

.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:999px;font-size:11.5px;font-weight:500;
  border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--txt-mid);
  backdrop-filter:blur(12px);
}
.chip.cyan   {color:var(--neon-cyan);   border-color:rgba(37,196,249,.38); background:rgba(37,196,249,.09)}
.chip.violet {color:var(--neon-magenta);border-color:rgba(249,37,143,.38); background:rgba(249,37,143,.09)}
.chip.magenta{color:var(--neon-magenta);border-color:rgba(249,37,143,.38); background:rgba(249,37,143,.09)}
.chip.green  {color:var(--neon-green);  border-color:rgba(37,249,168,.38); background:rgba(37,249,168,.09)}
.chip.amber  {color:var(--neon-amber);  border-color:rgba(249,143,37,.38); background:rgba(249,143,37,.09)}
.chip.red    {color:var(--neon-red);    border-color:rgba(249,37,90,.38);  background:rgba(249,37,90,.09)}

/* ============================================================
   3) فرم
   ============================================================ */

.inp{
  width:100%;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r-sm);
  padding:12px 14px;
  font-size:13.5px;color:var(--txt);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  transition:border-color .25s, box-shadow .25s, background .25s;
  outline:none;
}
.inp::placeholder{color:var(--txt-dim)}
.inp:focus{
  border-color:var(--line-hot);
  background:rgba(255,255,255,.08);
  box-shadow:0 0 0 3px rgba(37,196,249,.14), inset 0 0 18px rgba(37,196,249,.07);
}
select.inp{cursor:pointer;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--txt-mid) 50%),
                   linear-gradient(135deg,var(--txt-mid) 50%,transparent 50%);
  background-position:14px calc(50% - 2px),19px calc(50% - 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
select.inp option{background:#0D131F;color:var(--txt)}
textarea.inp{resize:vertical;min-height:100px;line-height:1.9}

.sw{
  position:relative;width:50px;height:27px;border-radius:999px;flex:none;cursor:pointer;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(14px);
  transition:background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.sw::after{
  content:'';position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%;
  background:linear-gradient(180deg,#fff,#D4E2F2);
  box-shadow:0 2px 8px rgba(0,0,0,.5);
  transition:transform .35s var(--ease);
}
.sw.on{
  background:var(--grad-cool);border-color:transparent;
  box-shadow:0 0 18px rgba(37,196,249,.5), inset 0 1px 0 rgba(255,255,255,.4);
}
.sw.on::after{transform:translateX(-23px)}
.sw.busy{opacity:.5;pointer-events:none}
.sw.locked{opacity:.42;cursor:not-allowed}

.row{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px 0;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:none}
.row .rt b{display:block;font-size:13.5px;font-weight:500;margin-bottom:3px}
.row .rt span{font-size:11.5px;color:var(--txt-dim);line-height:1.7}

/* ============================================================
   4) کارت قفل
   ============================================================ */

.locks{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:12px}
.lock{
  display:flex;align-items:center;gap:12px;
  padding:14px 15px;border-radius:var(--r-md);
  background:linear-gradient(150deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
  transition:border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.lock:hover{border-color:var(--line-hot);transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 12px 26px rgba(0,0,0,.34)}
.lock.active{border-color:rgba(37,196,249,.44);
  background:linear-gradient(150deg,rgba(37,196,249,.13),rgba(255,255,255,.02))}
.lock .li{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;
  font-size:11px;font-weight:600;
  background:rgba(37,196,249,.09);border:1px solid rgba(37,196,249,.26);color:var(--neon-cyan)}
.lock.active .li{background:rgba(37,196,249,.2);box-shadow:0 0 16px rgba(37,196,249,.32)}
.lock .lt{flex:1;min-width:0}
.lock .lt b{display:block;font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lock .lt span{font-size:10.5px;color:var(--txt-dim)}

/* ============================================================
   5) آمار
   ============================================================ */

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.stat{
  position:relative;padding:18px;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(150deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.11);
  backdrop-filter:blur(30px) saturate(180%);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
}
.stat::before{content:'';position:absolute;top:0;right:0;left:0;height:2px;background:var(--grad-cool)}
.stat .num{font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1.15;
  background:var(--grad-cool);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .lbl{font-size:11.5px;color:var(--txt-dim);margin-top:5px;font-weight:500}
.stat.v::before{background:var(--grad-hot)}
.stat.v .num{background:var(--grad-hot);-webkit-background-clip:text;background-clip:text}
.stat.g::before{background:var(--grad-ok)}
.stat.g .num{background:var(--grad-ok);-webkit-background-clip:text;background-clip:text}
.stat.a::before{background:linear-gradient(115deg,#F98F25,#F9255A)}
.stat.a .num{background:linear-gradient(115deg,#F98F25,#F9255A);-webkit-background-clip:text;background-clip:text}

/* ============================================================
   6) جدول
   ============================================================ */

.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{
  text-align:right;padding:12px 14px;
  font-size:11px;font-weight:600;letter-spacing:.06em;
  color:var(--txt-dim);border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.03);position:sticky;top:0;backdrop-filter:blur(16px);
}
.tbl td{padding:13px 14px;border-bottom:1px solid rgba(159,176,199,.07);vertical-align:middle}
.tbl tbody tr{transition:background .2s}
.tbl tbody tr:hover{background:rgba(37,196,249,.05)}
.tbl .av{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  font-size:11.5px;font-weight:600;color:#05070E;flex:none}
.u-cell{display:flex;align-items:center;gap:11px}
.u-cell b{display:block;font-size:13px;font-weight:600}
.u-cell span{display:block;font-size:11px;color:var(--txt-dim);direction:ltr;text-align:right}
.tbl-wrap{overflow:auto;max-height:560px}

/* ============================================================
   7) توست و مودال
   ============================================================ */

.toast{
  position:fixed;bottom:26px;left:50%;transform:translate(-50%,140%);
  padding:13px 24px;border-radius:999px;font-size:13.5px;font-weight:500;z-index:9999;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(34px) saturate(200%) brightness(1.1);
  -webkit-backdrop-filter:blur(34px) saturate(200%) brightness(1.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 16px 44px rgba(0,0,0,.5);
  transition:transform .5s var(--ease);max-width:min(90vw,460px);text-align:center;
}
.toast.show{transform:translate(-50%,0)}
.toast.err{border-color:rgba(249,37,90,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 16px 44px rgba(0,0,0,.5),0 0 26px rgba(249,37,90,.26)}
.toast.ok{border-color:rgba(37,249,168,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 16px 44px rgba(0,0,0,.5),0 0 26px rgba(37,249,168,.24)}

.modal-bg{position:fixed;inset:0;z-index:900;display:none;place-items:center;padding:20px;
  background:rgba(3,5,10,.7);backdrop-filter:blur(14px)}
.modal-bg.open{display:grid}
.modal{width:min(500px,100%);animation:pop .45s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(22px) scale(.96)}to{opacity:1;transform:none}}

/* ============================================================
   8) وضعیت‌ها
   ============================================================ */

.empty{padding:34px 20px;text-align:center;color:var(--txt-dim);font-size:13px;line-height:2}
.spinner{width:24px;height:24px;border-radius:50%;margin:0 auto 12px;
  border:2px solid rgba(37,196,249,.18);border-top-color:var(--neon-cyan);
  animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============================================================
   9) کمکی
   ============================================================ */

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.flex{display:flex;align-items:center;gap:10px}
.flex-wrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.between{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mt{margin-top:16px} .mt-lg{margin-top:26px} .mb{margin-bottom:16px}
.hidden{display:none !important}
.muted{color:var(--txt-dim);font-size:12px;line-height:1.9}

@media(max-width:900px){ .grid-2,.grid-3{grid-template-columns:1fr} }
@media(prefers-reduced-motion:reduce){ *{animation-duration:.01ms !important;transition-duration:.01ms !important} }

/* ════════════════════════════════════════════════════════════
   ریسپانسیو — همه‌ی قوانین داخل مدیاکوئری‌اند، پس دسکتاپ
   دقیقاً همان چیزی می‌ماند که بود و چیزی به هم نمی‌ریزد.
   ════════════════════════════════════════════════════════════ */

/* جلوگیری از بزرگ‌شدن خودکار فونت در iOS هنگام چرخاندن گوشی */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* هیچ عنصری از عرض والدش بیرون نزند — ریشه‌ی بیشترِ «به‌هم‌ریختگی» موبایل */
img,svg,video,canvas{max-width:100%;height:auto}
.grid-2>*,.grid-3>*,.flex-wrap>*{min-width:0}
.mono{overflow-wrap:anywhere}

@media(max-width:768px){
  /* اسکرول افقی فقط داخل جدول‌ها باشد، نه کل صفحه */
  html,body{overflow-x:hidden;max-width:100%}

  /* جدول‌ها: به‌جای فشرده‌شدن ستون‌ها، داخل قاب خودشان اسکرول شوند */
  .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-height:none}
  .tbl{min-width:620px;font-size:12px}
  .tbl th,.tbl td{padding:10px 9px;white-space:nowrap}
  .tbl .av{width:28px;height:28px}

  /* دکمه‌های داخل سلول‌ها زیر هم بروند نه اینکه سلول را بترکانند */
  .tbl td .flex-wrap{flex-wrap:wrap;gap:5px}
  .tbl td .inp{min-width:110px}

  /* ورودی‌ها: زیر ۱۶px باعث زوم خودکار iOS می‌شود */
  .inp{font-size:16px;padding:12px 14px}
  .inp.mono,input.code-in{font-size:16px}

  /* دکمه‌ها: هدف لمسی بزرگ‌تر و بدون سرریز */
  .lq{padding:12px 18px;font-size:13.5px}
  .lq.sm{padding:10px 14px;font-size:12.5px}
  .lq.xs{padding:8px 11px;font-size:11.5px}
  .lq.lg{padding:14px 22px;font-size:14.5px}

  /* سرِ کارت‌ها: عنوان و دکمه‌ها زیر هم */
  .glass-h{flex-wrap:wrap;gap:9px;padding:14px 15px}
  .glass-h h3{font-size:14px}
  .glass-b{padding:15px}

  /* ردیف‌های تنظیمات: متن و سوییچ زیر هم نچسبند */
  .row{flex-wrap:wrap;gap:9px;padding:12px 0}
  .row .rt{flex:1 1 190px;min-width:0}
  .row .inp{max-width:100% !important;width:100%}

  /* گرید و فاصله‌ها */
  .grid-2,.grid-3{grid-template-columns:1fr;gap:12px}
  .sec-title{font-size:13px;margin:16px 0 9px}
  .tabs{gap:6px}
  .tab{padding:8px 13px;font-size:12px}
  .chip{font-size:10.5px;padding:3px 8px}

  /* توست: چون با transform وسط‌چین شده، باید هم inset و هم transform را
     با هم بازنویسی کرد؛ وگرنه از لبه‌ی صفحه بیرون می‌زند. */
  .toast{inset-inline:14px;width:auto;max-width:none;font-size:12.5px;
    transform:translate(0,140%) !important}
  .toast.show{transform:translate(0,0) !important}
}

@media(max-width:480px){
  .tbl{min-width:560px}
  .glass-h h3{font-size:13.5px}
  .lq.block{padding:13px 16px}
  /* شماره‌ی طولانی گروه/کاربر خط بشکند */
  .muted.mono,.tbl .mono{overflow-wrap:anywhere;white-space:normal}
}

@media(max-width:520px){
  /* اینپوت‌هایی که با max-width ثابت کنار هم چیده شده‌اند، در موبایل کامل شوند */
  .flex-wrap>.inp,.search .inp{max-width:100% !important;flex:1 1 150px}
  .glass-h>.flex-wrap{width:100%}
  .glass-h>.flex-wrap>.lq{flex:1 1 auto}
  /* سازنده‌ی بسته: چیپ‌های تیک‌دار خوانا بمانند */
  label.chip{font-size:11px;padding:6px 9px}
}

/* ── نوارهای بالای صفحه: هیچ‌وقت از عرض بیرون نزنند ── */
@media(max-width:768px){
  .top{gap:8px;padding:10px 12px;flex-wrap:nowrap}
  .top h1{font-size:14.5px;min-width:0;flex:0 1 auto;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .top .sp{flex:1 1 0;min-width:4px}
  .top .chip{display:none}          /* برچسب وضعیت روی موبایل جا نمی‌شود */
  .top .lq{flex:none}
  .mob-burger{flex:none}

  /* بقیه‌ی نوارها زیر هم بروند */
  .topbar,.head,.nav-in,.nav-act,.nav-links,.tabs{flex-wrap:wrap}
  .topbar,.head{gap:9px}

  /* گریدهایی که ستون حداقلی‌شان (۲۵۰ تا ۳۰۰px) از عرض مفید گوشی بزرگ‌تر
     است و باعث سرریز افقی می‌شوند — با نام دقیق، نه انتخابگر فراگیر. */
  .feats,.plans,.cols,.locks{grid-template-columns:1fr}

  /* متن‌های nowrap که باید کوتاه شوند نه اینکه بیرون بزنند */
  .grp-pick,.g-title{overflow:hidden;text-overflow:ellipsis;max-width:100%}
}
@media(max-width:400px){
  .top{padding:9px 10px;gap:6px}
  .top h1{font-size:13.5px}
  .top .lq.sm{padding:8px 11px;font-size:11.5px}
}