/* =========================================================
   ربات‌ساز روبیکا — سیستم طراحی
   ایده: شب‌هنگامِ یک اپ پیام‌رسان؛ زمینه‌ی روشنِ سرد برای محتوا،
   نوارهای بنفش‌سرمه‌ای تیره برای تاکید، و درخشش کهربایی فقط
   روی حباب‌های گفتگو. تیتر‌ها با قلم دست‌نویس ZahraRoosta،
   متن با Vazirmatn. تم روشن/تاریک/خودکار با data-theme.
   ========================================================= */

@font-face {
  font-family: "ZahraRoosta";
  src: url("fonts/ZahraRoosta.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}

:root {
  --ink: #201c3a;
  --ink-soft: #2a2450;
  --ink-line: #3d3566;
  --paper: #f5f3fb;
  --card: #ffffff;
  --surface-alt: #faf9fe;
  --line: #e2ddf1;
  --line-danger: #f2c9c5;
  --text: #1b1830;
  --text-soft: #6a6488;
  --text-invert: #efeaf9;
  --text-invert-soft: #a9a2c9;

  --accent: #6c4cf1;
  --accent-dark: #5636d6;
  --accent-soft: #ece6fd;
  --teal: #12ad88;
  --teal-soft: #d8f4ec;
  --teal-text: #0a7a5e;
  --amber: #ffb648;
  --bad: #e2483b;
  --bad-soft: #fce8e6;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 24px;
  --shadow-card: 0 1px 2px rgba(23, 20, 42, .04);
  --shadow-pop: 0 24px 48px -24px rgba(23, 20, 42, .28);
  --drawer-bg: rgba(255, 255, 255, .6);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #0e0c1a;
    --ink-soft: #1a1730;
    --ink-line: #332d55;
    --paper: #14111f;
    --card: #1e1a35;
    --surface-alt: #211d3c;
    --line: #322c54;
    --line-danger: #5a2f2c;
    --text: #efeaf9;
    --text-soft: #a9a2c9;
    --accent: #8873ff;
    --accent-dark: #a996ff;
    --accent-soft: rgba(136, 115, 255, .18);
    --teal: #23d4a8;
    --teal-soft: rgba(35, 212, 168, .16);
    --teal-text: #23d4a8;
    --amber: #ffc266;
    --bad: #ff6b5e;
    --bad-soft: rgba(255, 107, 94, .16);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-pop: 0 24px 48px -24px rgba(0, 0, 0, .6);
    --drawer-bg: rgba(24, 21, 40, .58);
  }
}
:root[data-theme="dark"] {
  --ink: #0e0c1a;
  --ink-soft: #1a1730;
  --ink-line: #332d55;
  --paper: #14111f;
  --card: #1e1a35;
  --surface-alt: #211d3c;
  --line: #322c54;
  --line-danger: #5a2f2c;
  --text: #efeaf9;
  --text-soft: #a9a2c9;
  --accent: #8873ff;
  --accent-dark: #a996ff;
  --accent-soft: rgba(136, 115, 255, .18);
  --teal: #23d4a8;
  --teal-soft: rgba(35, 212, 168, .16);
  --teal-text: #23d4a8;
  --amber: #ffc266;
  --bad: #ff6b5e;
  --bad-soft: rgba(255, 107, 94, .16);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-pop: 0 24px 48px -24px rgba(0, 0, 0, .6);
  --drawer-bg: rgba(24, 21, 40, .58);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: "Vazirmatn", Tahoma, "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.75;
  transition: background-color .15s ease, color .15s ease;
}

a { color: var(--accent-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

h1, h2, h3, .brand {
  font-family: "ZahraRoosta", "Vazirmatn", Tahoma, sans-serif;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text);
}
h1 { font-size: clamp(2rem, 1.6rem + 1.8vw, 3.1rem); line-height: 1.4; margin: 0 0 .9rem; }
h2 { font-size: 1.5rem; line-height: 1.5; margin: 0 0 .9rem; }
p { margin: 0 0 1rem; }
.muted { color: var(--text-soft); font-size: .92rem; }
.hint { color: var(--text-soft); font-size: .88rem; margin-top: .9rem; }
.err { color: var(--bad); font-weight: 600; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 1.25rem; }

/* ---------------------------------------------------------- هدر */
.top {
  background: var(--ink);
  border-bottom: 1px solid var(--ink-line);
}
.top-in { display: flex; align-items: center; justify-content: space-between; min-height: 66px; }
.brand {
  display: flex; align-items: center; gap: .55rem;
  font-size: 1.35rem; color: var(--text-invert);
}
.brand:hover { text-decoration: none; }
.brand svg, .brand img { flex: none; }
.brand img { border-radius: 6px; }
.top nav { display: flex; align-items: center; gap: 1.1rem; }
.top nav a { color: var(--text-invert-soft); font-weight: 600; font-size: .95rem; }
.top nav a:hover { color: var(--text-invert); text-decoration: none; }
.top nav a.btn { color: #fff; }
.top nav button.link { color: var(--text-invert-soft); font-weight: 600; }
.top nav button.link:hover { color: var(--text-invert); }

/* ---------------------------------------------------------- منوی موبایل (کشویی) */
.hamburger {
  display: none; flex: none;
  width: 40px; height: 40px; align-items: center; justify-content: center;
  border: 0; border-radius: 10px; background: transparent;
  color: var(--text-invert-soft); cursor: pointer;
}
.hamburger:hover { background: var(--ink-soft); color: var(--text-invert); }
.hamburger-box { position: relative; width: 20px; height: 14px; display: block; }
.hamburger-bar {
  position: absolute; inset-inline-start: 0; width: 100%; height: 2px; border-radius: 2px;
  background: currentColor; transition: top .25s ease .1s, transform .25s ease, opacity .15s ease;
}
.hamburger-bar:nth-child(1) { top: 0; }
.hamburger-bar:nth-child(2) { top: 6px; }
.hamburger-bar:nth-child(3) { top: 12px; }
.hamburger[aria-expanded="true"] .hamburger-bar { transition: top .15s ease, transform .25s ease .1s, opacity .15s ease; }
.hamburger[aria-expanded="true"] .hamburger-bar:nth-child(1) { top: 6px; transform: rotate(45deg); }
.hamburger[aria-expanded="true"] .hamburger-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger[aria-expanded="true"] .hamburger-bar:nth-child(3) { top: 6px; transform: rotate(-45deg); }

.nav-links { display: flex; align-items: center; gap: 1.1rem; }
.nav-links .nav-icon { display: none; }
.drawer-backdrop { display: none; }

@media (max-width: 760px) {
  .top-in { padding-inline-end: 3.4rem; }
  /* در راست‌به‌چپ همبرگر سمت راست است و لوگو/نام هم سمت راست؛ لوگو را کنار دکمه‌ی منو می‌آوریم تا زیرش نرود */
  html[dir="rtl"] .top-in { padding-inline-start: 4.9rem; padding-inline-end: 1.25rem; }

  .hamburger {
    display: inline-flex; position: fixed; top: 13px; right: 1rem; z-index: 61;
    color: var(--text-invert); background: var(--ink); box-shadow: var(--shadow-pop);
  }
  .hamburger:hover { background: var(--ink-soft); }

  .nav-links {
    position: fixed; top: 0; bottom: 0; right: 0; width: min(78vw, 300px);
    background: var(--drawer-bg);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    flex-direction: column; align-items: stretch;
    gap: 0; padding: 5.5rem 1.4rem 2rem; overflow-y: auto;
    border-left: 1px solid var(--line);
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    box-shadow: var(--shadow-pop);
    transition: transform .32s cubic-bezier(.2, .85, .35, 1); z-index: 60;
    transform: translateX(100%);
  }
  .nav-links.open { transform: translateX(0); }

  .nav-links a, .nav-links button.link, .nav-links form.inline { width: 100%; }
  .top nav .nav-links a, .top nav .nav-links button.link {
    display: flex; align-items: center; gap: .6rem; padding: 1rem .1rem;
    border-bottom: 1px solid var(--line); font-size: 1rem; color: var(--text);
  }
  .top nav .nav-links a:hover, .top nav .nav-links button.link:hover { color: var(--accent-dark); }
  .nav-links a.btn { margin-top: 1rem; justify-content: center; border-bottom: 0; }
  .nav-links .nav-shop { justify-content: space-between; }
  .nav-link-main { display: flex; align-items: center; gap: .6rem; }
  .nav-links .nav-icon { display: inline-flex; flex: none; color: var(--accent-dark); }

  .drawer-backdrop.open {
    display: block; position: fixed; inset: 0;
    background: rgba(10, 8, 20, .35);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    z-index: 55;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-links, .hamburger-bar { transition: none; }
}

/* ---------------------------------------------------------- پوششِ بارگذاری سراسری */
.page-loader {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  background: rgba(14, 12, 26, .6);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .25s ease, visibility 0s linear .25s;
}
.page-loader.show {
  opacity: 1; visibility: visible; pointer-events: all;
  transition: opacity .2s ease, visibility 0s linear 0s;
}
.loader-box { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1rem; }
.loader-spin {
  position: relative; width: 68px; height: 68px; margin-bottom: 1.2rem;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.loader-spin i { position: absolute; inset: 0; border-radius: 50%; border: 4px solid transparent; }
.loader-spin i:nth-child(1) {
  border-top-color: var(--teal); border-inline-end-color: var(--teal);
  animation: loader-spin 1s linear infinite;
}
.loader-spin i:nth-child(2) {
  inset: 10px; border-bottom-color: var(--accent); border-inline-start-color: var(--accent);
  opacity: .85; animation: loader-spin 1.3s linear infinite reverse;
}
.loader-bot { position: relative; z-index: 1; filter: drop-shadow(0 4px 10px rgba(0,0,0,.35)); animation: loader-pulse 1.6s ease-in-out infinite; }
.loader-bar { width: 168px; height: 6px; border-radius: 999px; background: rgba(255,255,255,.14); overflow: hidden; }
.loader-bar span {
  display: block; height: 100%; width: 38%; border-radius: 999px;
  background: linear-gradient(90deg, var(--teal), var(--accent));
  animation: loader-fill 1.35s ease-in-out infinite;
}
.loader-text { margin: 1rem 0 0; color: #fff; font-weight: 700; font-size: .92rem; }
.loader-hint {
  margin: .4rem 0 0; color: var(--text-invert-soft); font-size: .8rem; max-width: 18rem;
  opacity: 0; transition: opacity .3s ease;
}
.page-loader.slow .loader-hint { opacity: 1; }

@keyframes loader-spin { to { transform: rotate(360deg); } }
@keyframes loader-fill {
  0%   { transform: translateX(-120%); width: 40%; }
  50%  { width: 70%; }
  100% { transform: translateX(260%); width: 40%; }
}
@keyframes loader-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: .85; } }

@media (prefers-reduced-motion: reduce) {
  .page-loader { transition: opacity .01s linear; }
  .page-loader.show { transition: opacity .01s linear; }
  .loader-spin i, .loader-bar span, .loader-bot { animation: none; }
  .loader-bar span { width: 60%; }
}

/* ---------------------------------------------------------- کلید‌های ترکیبی (تم / زبان) */
.seg {
  position: relative; display: inline-flex; align-items: stretch; gap: 0;
  background: var(--ink-soft); border: 1px solid var(--ink-line); border-radius: 999px;
  padding: 3px; isolation: isolate;
  direction: ltr; /* ترتیب گزینه‌ها همیشه از چپ به راست، تا محاسبه‌ی موقعیت کشویی ساده بماند */
}
.seg-thumb {
  position: absolute; inset: 3px auto 3px 3px; z-index: 0;
  width: calc((100% - 6px) / var(--n, 3));
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  box-shadow: 0 2px 10px -2px rgba(108, 76, 241, .55);
  transition: transform .32s cubic-bezier(.34, 1.56, .64, 1);
  transform: translateX(calc(var(--pos, 0) * 100%));
}
.seg-lang { --n: 2; }
.seg-theme { --n: 2; }

.floating-controls {
  position: fixed; z-index: 50; right: 1rem; bottom: 1rem;
  display: flex; flex-direction: column; align-items: flex-end; gap: .55rem;
}
.floating-controls .seg { box-shadow: var(--shadow-pop); }
.seg-opt {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: .3rem;
  border: 0; background: transparent; cursor: pointer; font: inherit;
  color: var(--text-invert-soft); font-weight: 700; font-size: .78rem;
  padding: .32rem .65rem; border-radius: 999px; white-space: nowrap;
  transition: color .2s ease, transform .12s ease;
}
.seg-opt:hover { color: var(--text-invert); }
.seg-opt:active { transform: scale(.94); }
.seg-opt.on { color: #fff; }
.seg-opt svg { flex: none; transition: transform .35s ease; }
.seg-opt.on svg { transform: rotate(-8deg) scale(1.05); }
.seg-theme .seg-label { display: none; }
@media (min-width: 640px) { .seg-theme .seg-label { display: inline; } }

/* دکمه‌های دایره‌ای تم و زبان: شیشه‌ای تیره با حلقه‌ی گرادیانی؛ هر کدام فقط گزینه‌ی مقابل را
   نشان می‌دهند (حالت فعلی پنهان است)، پس کلیک روی دایره همیشه به حالت دیگر می‌رود.
   مارک‌آپ و app.js دست‌نخورده‌اند. */
.floating-controls { align-items: center; gap: .75rem; }
.floating-controls .seg {
  --ring-a: var(--accent); --ring-b: var(--teal); --glow: 108, 76, 241;
  width: 50px; height: 50px; padding: 0; border-radius: 50%;
  border: 2px solid transparent;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .16), transparent 55%) padding-box,
    linear-gradient(var(--ink-soft), var(--ink)) padding-box,
    linear-gradient(135deg, var(--ring-a), var(--ring-b)) border-box;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 10px 24px -8px rgba(var(--glow), .7), 0 0 0 4px rgba(var(--glow), .12);
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease;
}
.floating-controls .seg:hover { transform: translateY(-3px) scale(1.08); box-shadow: 0 14px 30px -8px rgba(var(--glow), .9), 0 0 0 6px rgba(var(--glow), .18); }
.floating-controls .seg:active { transform: scale(.92); }
.floating-controls .seg-theme { --ring-a: #ffb648; --ring-b: #ff7a59; --glow: 255, 150, 72; }
.floating-controls .seg-thumb { display: none; }
.floating-controls .seg-opt {
  position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border-radius: 50%;
  flex-direction: column; gap: 1px;
  color: #fff; font-size: .68rem; line-height: 1; letter-spacing: .02em; text-decoration: none;
  animation: seg-pop .4s cubic-bezier(.34, 1.56, .64, 1);
}
.floating-controls .seg-opt.on { display: none; }
.floating-controls .seg-opt:hover { color: #fff; }
.floating-controls .seg-opt svg { width: 17px; height: 17px; transform: none; color: var(--teal); transition: transform .35s ease; }
.floating-controls .seg-opt:hover svg { transform: rotate(20deg) scale(1.1); }
.floating-controls .seg-theme .seg-opt svg { width: 23px; height: 23px; color: #ffc266; }
.floating-controls .seg-theme .seg-label { display: none; }
@keyframes seg-pop { from { transform: rotate(-90deg) scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .floating-controls .seg-opt { animation: none; } }

main { animation: fadeInUp .45s ease both; }

main { min-height: 70vh; }
.foot { padding: 2.2rem 1.25rem 3rem; color: var(--text-soft); font-size: .86rem; }
.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.2rem; }

/* نشان نسخه‌ی سایت در فوتر */
.ver {
  position: relative; display: inline-flex; align-items: center; gap: .5rem; overflow: hidden;
  padding: .3rem .85rem; border-radius: 999px; direction: ltr;
  background: var(--card); border: 1px solid var(--line); color: var(--text);
  font-size: .8rem; letter-spacing: .02em; box-shadow: var(--shadow-card);
  animation: ver-in .7s cubic-bezier(.2, .8, .2, 1) both .3s;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.ver:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow-pop); }
.ver b {
  font-weight: 800; background: linear-gradient(100deg, var(--accent-dark) 20%, var(--teal) 50%, var(--accent-dark) 80%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: ver-shine 4.5s linear infinite;
}
.ver::after {   /* برق گذرای روی نشان */
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%; inset-inline-start: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: skewX(-20deg); animation: ver-glint 6s ease-in-out infinite 1.5s; pointer-events: none;
}
.ver-dot { position: relative; width: .5rem; height: .5rem; border-radius: 50%; background: var(--teal); flex: none; }
.ver-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--teal);
  animation: ver-ping 2.2s ease-out infinite;
}
@keyframes ver-in { from { opacity: 0; transform: translateY(10px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes ver-shine { to { background-position: -220% 0; } }
@keyframes ver-glint { 0%, 55% { inset-inline-start: -60%; } 80%, 100% { inset-inline-start: 130%; } }
@keyframes ver-ping { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ver, .ver b, .ver::after, .ver-dot::after { animation: none; }
  .ver::after, .ver-dot::after { display: none; }
  .ver b { background: none; color: var(--accent-dark); }
}

/* ---------------------------------------------------------- دکمه‌ها و فرم‌ها */
.btn {
  display: inline-flex; align-items: center; gap: .4rem;
  border: 1px solid transparent; border-radius: 10px;
  padding: .65rem 1.25rem; font: inherit; font-weight: 700; cursor: pointer;
  line-height: 1.5; transition: transform .12s ease, background-color .12s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-sm { padding: .3rem .85rem; font-size: .88rem; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--text); }
.btn-ghost:hover { background: var(--accent-soft); border-color: var(--accent-soft); }
.btn-danger { background: var(--bad); color: #fff; }
.btn-danger:hover { filter: brightness(.9); }

button.link {
  background: none; border: 0; padding: 0; font: inherit; font-weight: 600;
  color: var(--accent-dark); cursor: pointer;
}
button.link:hover { text-decoration: underline; }
button.link.bad { color: var(--bad); }
form.inline { display: inline; margin: 0; }
td.actions form.inline:not(:last-child)::after { content: "·"; margin: 0 .4rem; color: var(--line); }

label { display: block; margin-bottom: 1.1rem; font-weight: 700; font-size: .93rem; }
label small { font-weight: 400; color: var(--text-soft); }
label.check { display: flex; gap: .6rem; align-items: center; font-weight: 500; }
input, textarea, select {
  display: block; width: 100%; margin-top: .4rem; padding: .62rem .8rem;
  font: inherit; font-weight: 400; color: var(--text);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  transition: border-color .12s ease, box-shadow .12s ease;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none;
}
input[type=checkbox] { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--accent); }
textarea { resize: vertical; }

/* ---------------------------------------------------------- کارت‌ها و پیام‌ها */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.35rem; margin-bottom: 1.1rem;
  box-shadow: var(--shadow-card);
}
.card h2 { font-size: 1.2rem; }
.card.empty { color: var(--text-soft); text-align: center; padding: 2rem 1.35rem; }
.card.danger { border-color: var(--line-danger); }
.card.admin-link-card { border-color: var(--accent-soft); background: var(--surface-alt); }
.secret-link {
  font-family: "SFMono-Regular", Consolas, monospace; font-size: .85rem;
  background: var(--card); border: 1px dashed var(--line); border-radius: var(--radius-sm);
  padding: .5rem .7rem; overflow-x: auto; white-space: nowrap;
}
.auth { max-width: 420px; margin: 3rem auto; }
.auth h1 { text-align: center; }

/* ---------------------------------------------------------- ورود / ثبت‌نام */
.auth-wrap {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 2.2rem; align-items: center;
  min-height: calc(70vh - 2rem); padding: 2.5rem 0;
}
.auth-aside {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(90% 60% at 50% 30%, #1d1748 0%, transparent 70%),
    linear-gradient(160deg, #0f0c26 0%, #0a0919 100%);
  color: var(--text-invert);
  border-radius: var(--radius-lg); padding: 2.6rem 2.2rem;
  box-shadow: var(--shadow-pop); min-height: 26rem;
  display: flex; flex-direction: column; justify-content: flex-end;
}
/* پس‌زمینه‌ی متحرک کدنویسی‌شده (canvas + آیکون‌های شناور) */
.auth-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.auth-bg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.auth-bg-sq {
  position: absolute; width: 12px; height: 12px; border-radius: 3px;
  background: rgba(124,92,255,.55); box-shadow: 0 0 14px rgba(124,92,255,.6);
  animation: auth-float 7s ease-in-out infinite;
}
.auth-bg-sq.sq1 { top: 7%; left: 44%; }
.auth-bg-sq.sq2 { top: 22%; right: 6%; width: 9px; height: 9px; background: rgba(34,211,197,.6); box-shadow: 0 0 14px rgba(34,211,197,.6); animation-delay: -2.5s; }
.auth-bg-sq.sq3 { top: 30%; left: 30%; width: 8px; height: 8px; animation-delay: -4.5s; }
.auth-bg-icon {
  position: absolute; width: 46px; height: 46px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; color: #cfc8ff;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(6px); box-shadow: 0 10px 30px rgba(8,6,24,.45), inset 0 0 18px rgba(124,92,255,.15);
  animation: auth-float 6s ease-in-out infinite;
}
.auth-bg-icon.ic1 { top: 8%; right: 10%; }
.auth-bg-icon.ic2 { top: 10%; left: 12%; color: #ffb648; animation-delay: -1.5s; animation-duration: 7s; }
.auth-bg-icon.ic3 { top: 38%; left: 5%; color: #22d3c5; animation-delay: -3s; animation-duration: 8s; }
.auth-bg-icon.ic4 { top: 62%; left: 9%; animation-delay: -4.5s; animation-duration: 6.5s; }
@keyframes auth-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
.auth-aside-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(10,9,25,.9) 8%, rgba(10,9,25,.5) 48%, rgba(10,9,25,.04));
}
.auth-aside::before {
  content: ""; position: absolute; z-index: 1; inset: -30% -10% auto auto; width: 60%; padding-bottom: 60%;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(255,182,72,.22), transparent 72%);
  filter: blur(4px); mix-blend-mode: screen;
}
.auth-aside::after {
  content: ""; position: absolute; z-index: 1; inset: auto auto -25% -15%; width: 55%; padding-bottom: 55%;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(108,76,241,.3), transparent 72%);
  filter: blur(4px); mix-blend-mode: screen;
}
.auth-aside-badge {
  position: relative; z-index: 2;
  width: 3.4rem; height: 3.4rem; border-radius: 50%;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; margin-bottom: 1.4rem;
}
.auth-aside h2 { position: relative; z-index: 2; color: #fff; font-size: 1.7rem; margin-bottom: .6rem; }
.auth-aside p { position: relative; z-index: 2; color: var(--text-invert-soft); max-width: 26rem; }
.auth-points { position: relative; z-index: 2; list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .8rem; }
.auth-points li { display: flex; align-items: center; gap: .65rem; color: var(--text-invert-soft); font-weight: 600; font-size: .92rem; }
.auth-points svg { flex: none; color: var(--teal); }

@media (prefers-reduced-motion: reduce) {
  .auth-bg-sq, .auth-bg-icon { animation: none; }
  .pw-suggest-panel { animation: none; }
}

.auth-badge {
  width: 3.4rem; height: 3.4rem; border-radius: 50%; background: var(--ink);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.1rem; box-shadow: var(--shadow-pop);
}

.field { position: relative; }
.field-icon {
  position: absolute; inset-inline-start: .75rem; top: 50%; transform: translateY(-50%);
  color: var(--text-soft); display: flex; pointer-events: none;
}
.field input.has-icon-s { padding-inline-start: 2.35rem; }
.field input.has-icon-e { padding-inline-end: 2.35rem; }
.field-toggle {
  position: absolute; inset-inline-end: .5rem; top: 50%; transform: translateY(-50%);
  background: none; border: 0; padding: .3rem; cursor: pointer; color: var(--text-soft);
  display: flex; border-radius: 6px;
}
.field-toggle:hover { color: var(--text); background: var(--surface-alt); }
.field-toggle .eye-off { display: none; }
.field-toggle.shown .eye-on { display: none; }
.field-toggle.shown .eye-off { display: block; }

/* ---------------------------------------------------------- کپچای تصویری ورود/ثبت‌نام */
.captcha-block { margin-bottom: 1rem; }
.captcha-row { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.captcha-img {
  width: 160px; height: 56px; border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: #f3f1fb; flex: none;
}
.captcha-refresh { flex: none; }
.captcha-input { text-transform: uppercase; letter-spacing: .12em; }

/* ---------------------------------------------------------- قدرت‌سنج و پیشنهاد رمز عبور */
.pw-strength { margin: -.6rem 0 1rem; }
.pw-strength-bars { display: flex; gap: .3rem; margin-bottom: .35rem; }
.pw-bar { flex: 1; height: 5px; border-radius: 999px; background: var(--line); transition: background-color .2s ease; }
.pw-strength[data-level="1"] .pw-bar:nth-child(1) { background: var(--bad); }
.pw-strength[data-level="2"] .pw-bar:nth-child(-n+2) { background: var(--amber); }
.pw-strength[data-level="3"] .pw-bar:nth-child(-n+3) { background: var(--teal); }
.pw-strength[data-level="4"] .pw-bar:nth-child(-n+4) { background: var(--accent); }
.pw-strength-text { font-size: .8rem; font-weight: 700; color: var(--text-soft); }
.pw-strength[data-level="1"] .pw-strength-text { color: var(--bad); }
.pw-strength[data-level="2"] .pw-strength-text { color: var(--amber); }
.pw-strength[data-level="3"] .pw-strength-text { color: var(--teal-text); }
.pw-strength[data-level="4"] .pw-strength-text { color: var(--accent-dark); }

.pw-suggest { margin: -.5rem 0 1.2rem; }
.pw-suggest-toggle { display: inline-flex; align-items: center; gap: .4rem; }
.pw-suggest-toggle svg { flex: none; }
.pw-suggest-panel {
  margin-top: .6rem; background: var(--surface-alt); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: .7rem .8rem;
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  animation: pw-panel-in .18s ease;
}
.pw-suggest-panel[hidden] { display: none; }
@keyframes pw-panel-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
.pw-suggest-value {
  flex: 1 1 auto; min-width: 0; font-family: "SFMono-Regular", Consolas, monospace;
  font-size: .92rem; color: var(--text); background: none; padding: 0; overflow-x: auto;
  white-space: nowrap;
}
.pw-suggest-actions { display: flex; align-items: center; gap: .3rem; flex: none; }
.pw-icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 8px; border: 1px solid var(--line);
  background: var(--card); color: var(--text-soft); cursor: pointer; flex: none; padding: 0;
  transition: color .12s ease, background-color .12s ease, border-color .12s ease;
}
.pw-icon-btn:hover { color: var(--text); background: var(--accent-soft); border-color: var(--accent-soft); }
.pw-icon-btn:active { transform: scale(.94); }
.pw-icon-btn .icon-check { display: none; }
.pw-icon-btn.done { color: var(--teal-text); background: var(--teal-soft); border-color: var(--teal); }
.pw-icon-btn.done .icon-copy { display: none; }
.pw-icon-btn.done .icon-check { display: block; }
@media (max-width: 420px) {
  .pw-suggest-panel { flex-direction: column; align-items: stretch; }
  .pw-suggest-value { white-space: normal; word-break: break-all; }
  .pw-suggest-actions { justify-content: flex-end; }
}

.auth-alt { text-align: center; margin-top: 1.2rem; }

.callout {
  display: flex; gap: .7rem; align-items: flex-start;
  background: var(--surface-alt); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .85rem 1rem; margin-bottom: 1.2rem; font-size: .92rem;
}
.callout svg { flex: none; margin-top: .15rem; color: var(--accent-dark); }
.callout.callout-lock svg { color: var(--text-soft); }
.callout p { margin: 0; }

.auth-wrap .auth { margin: 0 auto; }

@media (max-width: 860px) {
  .auth-wrap { grid-template-columns: 1fr; padding: 1.4rem 0; min-height: 0; }
  /* قبلا در موبایل کل پنل کناری (و پس‌زمینه‌ی متحرکش) مخفی می‌شد. حالا
     به‌جای مخفی‌کردن کامل، همان پس‌زمینه‌ی متحرک (کره‌ی سیم‌کشی‌شده +
     حلقه‌های مداری + آیکون‌های شناور) به‌صورت یک نوار تزئینی کوتاه بالای
     فرم نگه داشته می‌شود؛ فقط متن/تیتر تبلیغاتی که جای کافی برای آن نیست
     مخفی می‌شود. کد canvas/آیکون‌ها (_auth_bg.html و auth-bg.js) هیچ
     تغییری نکرده؛ همان چیزی که در دسکتاپ کار می‌کرد اینجا هم اجرا می‌شود. */
  .auth-aside { min-height: 13rem; padding: 0; margin-bottom: 1.2rem; }
  .auth-aside-badge, .auth-aside h2, .auth-aside p, .auth-points { display: none; }
}

.flash { padding: .75rem 1rem; border-radius: var(--radius-sm); margin: 1.2rem 0 0; font-weight: 600; font-size: .93rem; }
.flash-ok { background: var(--teal-soft); color: var(--teal-text); }
.flash-error { background: var(--bad-soft); color: var(--bad); }

.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: 0 .6rem; height: 1.5rem; border-radius: 999px; font-size: .76rem; font-weight: 700;
  background: var(--line); color: var(--text-soft); vertical-align: middle;
}
.badge::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; }
.badge-ok { background: var(--teal-soft); color: var(--teal-text); }
.badge-bad { background: var(--bad-soft); color: var(--bad); }
.badge-wait { background: rgba(255, 182, 72, .18); color: var(--amber); }

/* ---------------------------------------------------------- داشبورد */
.split { display: grid; grid-template-columns: 1fr 340px; gap: 1.3rem; align-items: start; }

.list { display: flex; flex-direction: column; gap: .6rem; }
.bot-row {
  display: flex; align-items: center; gap: .9rem;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .85rem 1.1rem; color: var(--text);
}
.bot-row:hover { border-color: var(--accent); text-decoration: none; box-shadow: var(--shadow-card); }
.bot-row .avatar { flex: none; }
.bot-row .main { flex: 1; min-width: 0; }
.bot-row .main strong { display: block; }
.bot-row .preview { color: var(--text-soft); font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-meta { display: flex; align-items: center; gap: .8rem; color: var(--text-soft); font-size: .87rem; white-space: nowrap; }

.avatar {
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-dark);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1rem; flex: none;
}

/* ---------------------------------------------------------- صفحه‌ی ربات: چیدمان کناره‌ای */
.bot-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.3rem; }
.bot-head .id-line { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.bot-head h1 { margin: .25rem 0 0; display: flex; align-items: center; gap: .6rem; }

.bot-layout { display: grid; grid-template-columns: 220px 1fr; gap: 1.6rem; align-items: start; }

.side-tabs { display: flex; flex-direction: column; gap: .2rem; position: sticky; top: 1rem; }
.side-tabs a {
  display: flex; align-items: center; gap: .65rem;
  padding: .6rem .8rem; border-radius: var(--radius-sm);
  color: var(--text-soft); font-weight: 600; font-size: .93rem;
}
.side-tabs a svg { flex: none; opacity: .8; }
.side-tabs a:hover { background: var(--accent-soft); color: var(--accent-dark); text-decoration: none; }
.side-tabs a.on { background: var(--ink); color: #fff; }
.side-tabs a.on svg { opacity: 1; }

.bot-content { min-width: 0; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin-bottom: 1.1rem; }
.stats div { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: var(--shadow-card); }
.stats b { display: block; font-size: 1.7rem; line-height: 1.3; font-weight: 800; }
.stats span { color: var(--text-soft); font-size: .87rem; }

ul.plain { margin: 0; padding-inline-start: 1.2rem; }
ul.plain li { margin-bottom: .6rem; }
ul.plain code, .hint code { background: var(--accent-soft); color: var(--accent-dark); padding: .05rem .35rem; border-radius: 5px; font-family: inherit; }

.table-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 1.1rem; box-shadow: var(--shadow-card); }
table { width: 100%; border-collapse: collapse; font-size: .93rem; }
th, td { padding: .7rem .95rem; text-align: start; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--text-soft); font-weight: 700; font-size: .82rem; background: var(--surface-alt); }
tr:last-child td { border-bottom: 0; }
td.wrap-text { max-width: 320px; white-space: pre-wrap; word-break: break-word; }
td.actions { white-space: nowrap; }

.thread { display: flex; flex-direction: column; gap: .8rem; margin-bottom: 1.4rem; }
/* حباب‌ها: عرض بر اساس خواندنی بودن متن (نه درصد صفحه)، فاصله‌ی داخلی بیشتر، زمان پایین حباب.
   پیام خودم = بنفش پررنگ (سفید روی #5a3fe0 در هر دو تم خوانا)، پیام طرف مقابل = کارت،
   پیام پشتیبان (وقتی کاربر می‌بیند) = کارت با نوار فیروزه‌ای برای تشخیص سریع */
.msg {
  max-width: min(36rem, 88%); padding: .8rem 1.05rem .65rem; border-radius: 18px;
  word-break: break-word; line-height: 1.85;
  box-shadow: 0 1px 2px rgba(23, 20, 42, .06);
}
/* pre-wrap فقط روی خود متن پیام؛ روی کل حباب فاصله‌های خالیِ قالب HTML هم خط خالی می‌شدند */
.msg > div[dir="auto"] { white-space: pre-wrap; }
.msg small { display: block; color: var(--text-soft); font-size: .76rem; margin-top: .45rem; line-height: 1.4; }
.msg.in { background: var(--card); border: 1px solid var(--line); align-self: flex-start; border-start-start-radius: 5px; }
.msg.in.staff { border-color: color-mix(in srgb, var(--teal) 45%, var(--line)); border-inline-start: 4px solid var(--teal); background: color-mix(in srgb, var(--teal) 7%, var(--card)); }
.msg.in.staff small { color: var(--teal-text); font-weight: 600; }
.msg.out {
  background: linear-gradient(135deg, #6448ee, #4d33cf); color: #fff; align-self: flex-end;
  border-start-end-radius: 5px; box-shadow: 0 6px 16px -8px rgba(77, 51, 207, .7);
}
.msg.out small { color: rgba(255,255,255,.78); }
.msg-attach { margin-top: .6rem; }
.msg-attach img { max-width: min(280px, 100%); max-height: 260px; border-radius: 12px; display: block; }
.msg-attach a { font-size: .88rem; }
.msg.out .msg-attach a { color: #fff; text-decoration: underline; }
@media (max-width: 560px) { .msg { max-width: 94%; padding: .7rem .9rem .6rem; } }

/* ---------------------------------------------------------- لندینگ */
.hero {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 3rem; align-items: center; padding: 3.6rem 0 3rem;
  position: relative; overflow: hidden; isolation: isolate;
}
.hero-text { position: relative; z-index: 1; }
.hero h1 { margin-bottom: 1rem; }
.lead { font-size: 1.12rem; color: var(--text-soft); max-width: 32rem; }
.row { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.5rem; }
.trust { display: flex; gap: 1.4rem; margin-top: 1.8rem; flex-wrap: wrap; }
.trust div { display: flex; align-items: center; gap: .5rem; color: var(--text-soft); font-size: .87rem; font-weight: 600; }
.trust svg { flex: none; color: var(--teal); }

/* ---------------------------------------------------------- بک‌گراند صفحه‌ی اصلی (شبکه‌ی ثابت + دایره‌ای که بالا می‌آید) */
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero-bg-grid {
  position: absolute; inset: -5%;
  background-image:
    repeating-linear-gradient(0deg, var(--line) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 42px);
  opacity: .55;
}
.hero-bg-orb {
  position: absolute; left: 50%; bottom: -12%; width: 260px; height: 260px;
  margin-inline-start: -130px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(35,212,168,.38), transparent 72%);
  filter: blur(4px);
  animation: hero-orb-rise 9s ease-in-out infinite;
}
@keyframes hero-orb-rise {
  0%   { transform: translateY(10%) scale(.9); opacity: 0; }
  15%  { opacity: .85; }
  60%  { opacity: .45; }
  100% { transform: translateY(-125%) scale(1.05); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg-orb { animation: none; opacity: .35; transform: translateY(-35%); }
}

/* ---------------------------------------------------------- بک‌گراند کل صفحه‌ی اصلی (شبکه‌ی کم‌رنگ + درخشش بالا + ذرات شناور) */
.home-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.home-bg-grid {
  position: absolute; inset: 0; opacity: .4;
  background-image:
    repeating-linear-gradient(0deg, var(--line) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 64px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.5) 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.5) 70%, transparent 100%);
}
.home-bg-glow {
  position: absolute; top: -110px; left: 50%; width: min(520px, 80vw); height: 240px;
  transform: translateX(-50%); border-radius: 50%; filter: blur(10px);
  background: radial-gradient(closest-side, rgba(34,211,238,.26), transparent);
}
.home-bg-dots { position: absolute; inset: 0; background-repeat: repeat; animation: home-dots-drift 60s linear infinite; }
.home-bg-dots.d1 {
  --t: 211px; background-size: var(--t) var(--t);
  background-image: radial-gradient(circle at 30% 40%, rgba(34,211,238,.5) 0 2.5px, transparent 3.5px),
                    radial-gradient(circle at 78% 82%, rgba(129,140,248,.45) 0 4px, transparent 5px);
}
.home-bg-dots.d2 {
  --t: 307px; background-size: var(--t) var(--t); animation-duration: 90s;
  background-image: radial-gradient(circle at 62% 24%, rgba(129,140,248,.4) 0 3px, transparent 4px),
                    radial-gradient(circle at 15% 75%, rgba(34,211,238,.4) 0 1.5px, transparent 2.5px);
}
.home-bg-dots.d3 {
  --t: 421px; background-size: var(--t) var(--t); animation-duration: 120s;
  background-image: radial-gradient(circle at 45% 60%, rgba(34,211,238,.35) 0 5px, transparent 6px),
                    radial-gradient(circle at 88% 18%, rgba(129,140,248,.35) 0 2px, transparent 3px);
}
@keyframes home-dots-drift { to { background-position: 0 calc(var(--t) * -1); } }
@media (prefers-reduced-motion: reduce) { .home-bg-dots { animation: none; } }
/* شبکه‌ی خود هرو با شبکه‌ی کل صفحه یکی می‌شود تا دوبار دیده نشود (دایره‌ی بالارونده می‌ماند) */
.hero-bg-grid { display: none; }

/* ---------------------------------------------------------- شبکه‌ی متحرک (برای نوارهای تیره: چرا گاتهام، فروشگاه) */
.moving-grid { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; perspective: 240px; perspective-origin: 50% 100%; }
.moving-grid::before {
  content: "";
  position: absolute; left: -50%; right: -50%; bottom: -20%; height: 220%;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.14) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 1px, transparent 1px 46px);
  transform: rotateX(78deg); transform-origin: 50% 100%;
  animation: moving-grid-scroll 4s linear infinite;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.5) 55%, transparent 90%);
  mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.5) 55%, transparent 90%);
}
@keyframes moving-grid-scroll {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 46px, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .moving-grid::before { animation: none; }
}

.phone-stage { display: flex; justify-content: center; position: relative; z-index: 1; }
.phone-stage::before {
  content: ""; position: absolute; inset: 8% 14%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,182,72,.35), transparent 70%);
  filter: blur(6px); z-index: 0;
}
.phone {
  position: relative; z-index: 1;
  background: var(--ink); border: 1px solid var(--ink-line); border-radius: 28px;
  max-width: 320px; width: 100%; overflow: hidden; box-shadow: var(--shadow-pop);
}
.phone-head {
  display: flex; align-items: center; gap: .6rem;
  color: var(--text-invert); padding: .9rem 1.1rem; border-bottom: 1px solid var(--ink-line);
  font-weight: 700; font-size: .95rem;
}
.phone-head .dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--teal); flex: none; }
.chat { display: flex; flex-direction: column; gap: .55rem; padding: 1.1rem; min-height: 230px; }
.bubble { max-width: 84%; padding: .55rem .85rem; border-radius: 14px; font-size: .9rem; line-height: 1.7; }
.bubble.me { align-self: flex-start; background: var(--ink-soft); color: var(--text-invert); border-start-start-radius: 4px; }
.bubble.bot {
  align-self: flex-end; background: var(--amber); color: #3a2400; font-weight: 600;
  border-start-end-radius: 4px; box-shadow: 0 0 22px -4px rgba(255,182,72,.7);
}
.keys { display: flex; gap: .45rem; padding: .8rem 1.1rem 1.1rem; }
.keys span {
  flex: 1; text-align: center; font-size: .82rem; padding: .45rem .3rem;
  background: var(--ink-soft); color: var(--text-invert); border-radius: var(--radius-sm); font-weight: 700;
}

.bot-orb { position: relative; z-index: 1; width: min(320px, 78vw); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.bot-orb-glow {
  position: absolute; inset: 8%; border-radius: 50%; z-index: 0;
  background: radial-gradient(closest-side, var(--accent-soft) 0%, transparent 72%);
  animation: bot-orb-pulse 5s ease-in-out infinite;
}
.bot-orb-ring {
  position: absolute; inset: 0; border-radius: 50%; z-index: 0;
  border: 1px dashed var(--ink-line);
  animation: bot-orb-spin 42s linear infinite;
}
.bot-orb-bot { position: relative; z-index: 1; animation: bot-orb-float 6s ease-in-out infinite; filter: drop-shadow(0 16px 26px rgba(0,0,0,.22)); }

@keyframes bot-orb-pulse { 0%, 100% { opacity: .65; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes bot-orb-spin { to { transform: rotate(360deg); } }
@keyframes bot-orb-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ربات: ساده و آرام؛ فقط شناور شدن ملایم، درخشش نرم و تپش کند سینه */
.bot-orb-bot { overflow: visible; }
.bot-eyes { filter: drop-shadow(0 0 3px var(--teal)); }
.bot-chest { transform-box: fill-box; transform-origin: center; animation: bot-chest 3.6s ease-in-out infinite; }
.bot-shadow { transform-box: fill-box; transform-origin: center; animation: bot-shadow 6s ease-in-out infinite; }

@keyframes bot-chest { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.85); opacity: .75; } }
@keyframes bot-shadow { 0%, 100% { transform: scale(1); opacity: .35; } 50% { transform: scale(.88); opacity: .25; } }

@media (prefers-reduced-motion: reduce) {
  .bot-orb-glow, .bot-orb-ring, .bot-orb-bot, .bot-chest, .bot-shadow { animation: none; }
}

.band { background: var(--ink); color: var(--text-invert); padding: 3rem 0; margin: 0 0 3rem; }
.band h2 { color: #fff; font-size: 1.9rem; }
.band .lead { color: var(--text-invert-soft); }
.features { padding: 3rem 0; margin: 0 0 3rem; }
.features h2 { font-size: 1.9rem; }
.features dl { margin: 1.6rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.6rem; }
.features dl > div {
  display: flex; gap: .8rem; padding: 1rem 0; border-top: 1px solid var(--line);
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s ease, transform .5s ease;
  transition-delay: calc(var(--i, 0) * 70ms);
}
.features dl > div.in-view { opacity: 1; transform: translateY(0); }
.features dl > div::before {
  content: ""; flex: none; width: .55rem; height: .55rem; margin-top: .55rem;
  border-radius: 50%; background: var(--amber);
}
.features dt { font-weight: 700; color: var(--text); }
.features dd { margin: .2rem 0 0; color: var(--text-soft); }

/* ---------------------------------------------------------- آمار زنده */
.live-stats { padding: 1rem 0 3rem; }
.live-head { text-align: center; max-width: 30rem; margin: 0 auto 1.8rem; }
.live-head .lead { margin: 0; }

.live-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.live-card {
  position: relative; overflow: hidden; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  padding: 2.1rem 1.4rem 1.8rem; border-radius: var(--radius-lg);
  background: var(--ink); color: var(--text-invert);
  /* رنگ تیره‌ی پایه بالاست؛ این خط فقط درخشش ملایمِ رنگ کارت را از بالا اضافه می‌کند */
  background: radial-gradient(120% 85% at 50% 0%, color-mix(in srgb, var(--live-c) 13%, transparent), transparent 62%), var(--ink);
  border: 1px solid var(--ink-line); box-shadow: var(--shadow-pop);
  opacity: 0; transform: translateY(14px);
  transition: opacity .55s ease, transform .35s ease, border-color .35s ease, box-shadow .35s ease;
  -webkit-tap-highlight-color: transparent;
  --live-c: var(--teal); --live-delay: 0s;
}
.live-card--bots { --live-c: var(--accent); --live-delay: .7s; }
.live-card.in-view { opacity: 1; transform: translateY(0); }
.live-grid .live-card:nth-child(2) { transition-delay: .12s; }
/* نوار نور لبه‌ی بالا: از وسط باز می‌شود، می‌ماند، به وسط جمع می‌شود و تکرار می‌شود */
.live-card::before {
  content: ""; position: absolute; top: 0; inset-inline: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--live-c) 18%, var(--live-c) 82%, transparent);
  box-shadow: 0 0 14px 1px var(--live-c);
  transform: scaleX(0); opacity: 0;
}
/* پرتوی نرم زیر نوار، هم‌زمان با آن روشن و خاموش می‌شود */
.live-card::after {
  content: ""; position: absolute; z-index: -1; top: 0; inset-inline: 0; height: 72%;
  background: radial-gradient(60% 100% at 50% 0%, color-mix(in srgb, var(--live-c) 30%, transparent), transparent 72%);
  opacity: 0; pointer-events: none;
}
/* انیمیشن‌ها بعد از ظاهر شدن کارت (in-view) شروع می‌شوند تا دور اول پنهان هدر نرود */
.live-card.in-view::before { animation: live-line 2.6s ease-in-out var(--live-delay) infinite; }
.live-card.in-view::after  { animation: live-beam 2.6s ease-in-out var(--live-delay) infinite; }
.live-card.in-view { animation: live-glow 2.6s ease-in-out var(--live-delay) infinite; }
/* لمس / نگه‌داشتن / هاور: کارت بالا می‌آید، لبه‌اش کامل روشن می‌شود و آیکون و عدد می‌درخشند */
.live-card.in-view:hover, .live-card.in-view:active {
  animation: none; transform: translateY(-5px); border-color: var(--live-c);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--live-c) 55%, transparent), 0 0 34px -6px var(--live-c), var(--shadow-pop);
}
.live-card.in-view:hover::before, .live-card.in-view:active::before { animation: none; transform: scaleX(1); opacity: 1; }
.live-card.in-view:hover::after,  .live-card.in-view:active::after  { animation: none; opacity: 1; }
.live-card:hover .live-icon, .live-card:active .live-icon { transform: scale(1.12) rotate(-6deg); }
.live-card:hover .live-number, .live-card:active .live-number { text-shadow: 0 0 22px color-mix(in srgb, var(--live-c) 70%, transparent); }
.live-dot { position: absolute; z-index: 0; top: 1rem; inset-inline-end: 1.2rem; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); opacity: .5; }
.live-card--bots .live-dot { background: var(--accent); }
.live-card.in-view .live-dot { opacity: 1; animation: live-dot-ping 1.9s ease-out infinite; }
.live-icon {
  width: 58px; height: 58px; border-radius: 18px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--teal-soft); color: var(--teal);
  animation: live-icon-pulse-teal 2.6s ease-in-out infinite;
  transition: transform .35s ease;
}
.live-card--bots .live-icon { background: var(--accent-soft); color: var(--accent-dark); animation-name: live-icon-pulse-accent; }
.live-label { color: var(--text-invert-soft); font-size: .92rem; }
.live-number {
  font-family: "ZahraRoosta", "Vazirmatn", Tahoma, sans-serif; font-weight: 400; direction: ltr;
  font-size: clamp(1.8rem, 1.5rem + 1.6vw, 2.6rem); line-height: 1.3; color: var(--teal);
  text-shadow: 0 0 20px color-mix(in srgb, var(--live-c) 32%, transparent);
  transition: text-shadow .35s ease;
}
.live-card--bots .live-number { color: var(--accent-dark); }

@keyframes live-sweep {
  0% { background-position: -60% 0; }
  100% { background-position: 160% 0; }
}
@keyframes live-line {
  0%   { transform: scaleX(0); opacity: 0; }
  10%  { opacity: 1; }
  16%, 56% { transform: scaleX(1); opacity: 1; }
  78%, 100% { transform: scaleX(0); opacity: 0; }
}
@keyframes live-beam {
  0%, 100% { opacity: 0; }
  16%, 56% { opacity: 1; }
  78% { opacity: 0; }
}
@keyframes live-glow {
  16%, 56% {
    border-color: color-mix(in srgb, var(--live-c) 60%, var(--ink-line));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--live-c) 30%, transparent), 0 0 30px -8px var(--live-c), var(--shadow-pop);
  }
}
@keyframes live-dot-ping {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--live-c) 60%, transparent); }
  80%, 100% { box-shadow: 0 0 0 9px transparent; }
}
@keyframes live-icon-pulse-teal {
  0%, 100% { box-shadow: 0 0 0 0 rgba(35, 212, 168, .35); }
  50% { box-shadow: 0 0 0 10px rgba(35, 212, 168, 0); }
}
@keyframes live-icon-pulse-accent {
  0%, 100% { box-shadow: 0 0 0 0 rgba(108, 76, 241, .35); }
  50% { box-shadow: 0 0 0 10px rgba(108, 76, 241, 0); }
}

@media (max-width: 620px) { .live-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .live-card::before, .live-card::after, .live-icon, .live-dot, .live-card.in-view,
  .live-card.in-view::before, .live-card.in-view::after, .live-card.in-view .live-dot { animation: none; }
  .live-card::before { transform: scaleX(1); opacity: 1; }
  .live-card::after { opacity: .6; }
}

.steps { padding: 3rem 0; }
.steps ol { list-style: none; margin: 0; padding: 0; max-width: 34rem; }
.steps li {
  display: flex; gap: 1.1rem; padding-bottom: 1.8rem; position: relative;
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s ease, transform .5s ease;
  transition-delay: calc(var(--i, 0) * 70ms);
}
.steps li.in-view { opacity: 1; transform: translateY(0); }
.steps li::before {
  content: counter(s); counter-increment: s;
  flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-dark); font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.steps ol { counter-reset: s; }
.steps li:not(:last-child)::after {
  content: ""; position: absolute; top: 2.1rem; bottom: 0; inset-inline-start: 1.05rem;
  width: 1px; background: var(--line);
}
.steps li p { margin: .2rem 0 0; }
.steps li b { display: block; margin-top: .35rem; }

/* ---------------------------------------------------------- خوبی‌های سایت
   بخش «چرا ربات‌ساز روبیکا»: بدون کادر تیره‌ی تمام‌عرض؛ مستقیم روی زمینه‌ی صفحه با کارت‌های روشن
   (رنگ‌ها از متغیرهای تم‌اند، پس در تم تاریک هم درست دیده می‌شوند) */
.why-band { position: relative; padding: 1.5rem 0 .5rem; margin: 0 0 3.2rem; }

.why-head { text-align: center; max-width: 34rem; margin: 0 auto 2.4rem; }
.why-head h2 { color: var(--text); font-size: 1.9rem; margin-bottom: .7rem; }
.why-head h2::after {
  content: ""; display: block; width: 3.4rem; height: 4px; border-radius: 4px; margin: .7rem auto 0;
  background: linear-gradient(90deg, var(--accent), var(--teal));
}
.why-head .lead { margin: 0; color: var(--text-soft); }

.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.why-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: .7rem;
  padding: 1.55rem 1.4rem 1.4rem; border-radius: var(--radius-lg);
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-card);
  opacity: 0; transform: translateY(14px);
  transition: opacity .55s ease var(--d, 0ms), transform .55s ease var(--d, 0ms),
    border-color .25s ease, box-shadow .25s ease;
}
/* نوار رنگی بالای کارت که با hover باز می‌شود */
.why-card::before {
  content: ""; position: absolute; top: 0; inset-inline: 1.4rem; height: 3px; border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, var(--teal), var(--accent)); transform: scaleX(0); transform-origin: center;
  transition: transform .3s ease;
}
.why-card.in-view { opacity: 1; transform: translateY(0); }
.why-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: var(--shadow-pop); }
.why-card:hover::before { transform: scaleX(1); }
.why-icon {
  align-self: flex-start; width: 46px; height: 46px; border-radius: 14px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--teal-soft); color: var(--teal-text);
  transition: transform .3s ease;
}
.why-card:hover .why-icon { transform: rotate(-6deg) scale(1.06); }
.why-card:nth-child(3n+2) .why-icon { background: var(--accent-soft); color: var(--accent-dark); }
.why-card:nth-child(3n) .why-icon { background: rgba(255,182,72,.2); color: #c47a05; }
.why-card h3 { margin: 0; font-size: 1.05rem; color: var(--text); }
.why-card p { margin: 0; color: var(--text-soft); font-size: .9rem; line-height: 1.85; }
.why-dot {
  position: absolute; z-index: 0; width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal); opacity: .55;
}
.why-card:nth-child(1) .why-dot { top: .9rem; inset-inline-end: 1.1rem; }
.why-card:nth-child(4) .why-dot { bottom: .9rem; inset-inline-end: 1.1rem; background: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .why-card, .why-card::before, .why-icon { transition: none; }
  .why-card:hover, .why-card:hover .why-icon { transform: none; }
}

@media (max-width: 860px) { .why-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .why-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------- موبایل */
@media (max-width: 860px) {
  .split, .hero { grid-template-columns: 1fr; }
  .hero { padding-top: 1.8rem; gap: 1.8rem; }
  .phone-stage { order: -1; }
  .phone { max-width: 280px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .features dl { grid-template-columns: 1fr; }
  .bot-layout { grid-template-columns: 1fr; }
  .side-tabs {
    position: static; flex-direction: row; overflow-x: auto;
    border-bottom: 1px solid var(--line); padding-bottom: .3rem; margin-bottom: .3rem;
  }
  .side-tabs a { white-space: nowrap; }
  .side-tabs a.on { background: var(--accent); }
  .top nav { gap: .7rem; }
}

/* ---------------------------------------------------------- انیمیشن‌ها و جزئیات گرافیکی */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  70% { box-shadow: 0 0 0 5px transparent; opacity: .6; }
}
@keyframes flashIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.flash { animation: flashIn .28s ease both; }

.avatar {
  background: linear-gradient(135deg, var(--accent-soft), var(--teal-soft));
}

.card, .bot-row, .stats > div {
  opacity: 0; transform: translateY(8px);
  transition: opacity .4s ease, transform .4s ease;
  transition-delay: calc(var(--i, 0) * 40ms);
}
.card.in-view, .bot-row.in-view, .stats > div.in-view {
  opacity: 1; transform: translateY(0);
}
/* transition هر عنصر باید opacity/transform ورود هنگام اسکرول (.in-view) را هم شامل شود؛ وگرنه
   این قاعده‌های بعدی آن را بازنویسی می‌کردند و کارت‌ها بدون محو/تاخیر ناگهانی ظاهر می‌شدند */
.card {
  transition: opacity .4s ease, transform .4s ease, box-shadow .18s ease, border-color .18s ease;
  transition-delay: calc(var(--i, 0) * 40ms), calc(var(--i, 0) * 40ms), 0s, 0s;
}
.card:hover { box-shadow: var(--shadow-pop); }
.stats > div {
  transition: opacity .4s ease, transform .4s ease, box-shadow .15s ease;
  transition-delay: calc(var(--i, 0) * 40ms), calc(var(--i, 0) * 40ms), 0s;
}
.stats > div:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.bot-row {
  transition: opacity .4s ease, transform .3s ease, border-color .15s ease, box-shadow .15s ease;
  transition-delay: calc(var(--i, 0) * 40ms), calc(var(--i, 0) * 40ms), 0s, 0s;
}
.bot-row:hover { transform: translateY(-1px); }
/* با hover تاخیرِ استایگر نباید حس کندی بدهد */
.stats > div.in-view:hover, .bot-row.in-view:hover { transition-delay: 0s; }

.badge-ok::before { color: var(--teal-text); position: relative; animation: pulseDot 1.8s ease-in-out infinite; border-radius: 50%; }

.side-tabs a { transition: background-color .15s ease, color .15s ease, transform .1s ease; }
.side-tabs a:active { transform: scale(.98); }
.side-tabs a.on svg { transform: scale(1.05); }

.btn-primary, .btn-danger { transition: transform .12s ease, background-color .12s ease, box-shadow .12s ease; }
.btn-primary:hover { box-shadow: 0 6px 16px -6px rgba(108, 76, 241, .55); }
.btn-danger:hover { box-shadow: 0 6px 16px -6px rgba(226, 72, 59, .5); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------------------------------------------------------- فروشگاه (به‌زودی) */
.nav-shop { display: inline-flex; align-items: center; gap: .4rem; }
.soon-pill {
  font-size: .68rem; font-weight: 700; line-height: 1; padding: .25rem .5rem; border-radius: 999px;
  background: rgba(255,182,72,.16); color: var(--amber); border: 1px solid rgba(255,182,72,.35);
}
@media (max-width: 520px) { .soon-pill { display: none; } }

.shop-hero {
  position: relative; overflow: hidden; isolation: isolate; text-align: center;
  margin: 2.2rem 0 2.6rem; padding: 4rem 1.5rem 3.6rem; border-radius: var(--radius-lg);
  color: var(--text-invert); box-shadow: var(--shadow-pop);
  background:
    radial-gradient(80% 70% at 50% 0%, #2b2266 0%, transparent 70%),
    linear-gradient(160deg, #15113a 0%, #0b0a1c 100%);
}
.shop-hero-in { position: relative; z-index: 2; max-width: 40rem; margin: 0 auto; }
.shop-hero h1 { color: #fff; font-size: clamp(2rem, 5vw, 3rem); margin: .9rem 0 .8rem; }
.shop-lead { color: var(--text-invert-soft); font-size: 1.05rem; line-height: 1.9; margin: 0 auto 1.6rem; }
.shop-cta { justify-content: center; }
.shop-ghost { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); color: #fff; }
.shop-ghost:hover { background: rgba(255,255,255,.16); text-decoration: none; }

.shop-glow { position: absolute; z-index: 0; border-radius: 50%; filter: blur(40px); pointer-events: none; }
.shop-glow.g1 { width: 22rem; height: 22rem; top: -9rem; right: -6rem; background: radial-gradient(closest-side, rgba(108,76,241,.55), transparent); animation: shop-drift 12s ease-in-out infinite; }
.shop-glow.g2 { width: 18rem; height: 18rem; bottom: -8rem; left: -5rem; background: radial-gradient(closest-side, rgba(34,211,197,.35), transparent); animation: shop-drift 14s ease-in-out infinite reverse; }
.shop-spark { position: absolute; z-index: 1; width: 6px; height: 6px; border-radius: 50%; background: #d7cfff; box-shadow: 0 0 12px 2px rgba(180,160,255,.8); animation: shop-twinkle 3.2s ease-in-out infinite; }
.shop-spark.s1 { top: 18%; left: 16%; }
.shop-spark.s2 { top: 30%; right: 14%; background: #7ff0e2; box-shadow: 0 0 12px 2px rgba(34,211,197,.8); animation-delay: -1.2s; }
.shop-spark.s3 { bottom: 20%; left: 26%; animation-delay: -2.2s; width: 4px; height: 4px; }

.shop-bag {
  width: 92px; height: 92px; margin: 0 auto; border-radius: 28px; color: var(--amber);
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(8px);
  box-shadow: 0 18px 40px -12px rgba(0,0,0,.55), inset 0 0 26px rgba(124,92,255,.25);
  animation: shop-bob 5s ease-in-out infinite;
}
.shop-badge {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.3rem;
  padding: .4rem .95rem; border-radius: 999px; font-weight: 700; font-size: .85rem;
  color: var(--amber); background: rgba(255,182,72,.12); border: 1px solid rgba(255,182,72,.4);
}
.shop-badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); animation: shop-pulse 1.8s ease-out infinite; }

.shop-teaser { margin-bottom: 3rem; }
.shop-teaser > h2 { text-align: center; margin-bottom: 1.6rem; }
.shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.shop-card {
  position: relative; overflow: hidden; padding: 1.5rem 1.35rem 1.3rem;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-card); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  animation: fadeInUp .55s ease both; animation-delay: var(--d, 0ms);
}
.shop-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-pop); border-color: var(--accent); }
.shop-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(124,92,255,.10) 50%, transparent 65%);
  transform: translateX(-100%); animation: shop-shine 5.5s ease-in-out infinite; animation-delay: var(--d, 0ms);
}
.shop-icon {
  width: 52px; height: 52px; border-radius: 16px; margin-bottom: 1rem;
  display: flex; align-items: center; justify-content: center; color: var(--accent);
  background: var(--accent-soft);
}
.shop-card h3 { font-size: 1.05rem; margin: 0 0 .35rem; }
.shop-card p { margin: 0 0 1.1rem; color: var(--text-soft); font-size: .92rem; line-height: 1.8; }
.shop-lock {
  position: absolute; top: 1rem; inset-inline-end: 1rem; display: inline-flex; align-items: center; gap: .3rem;
  font-size: .72rem; font-weight: 700; padding: .28rem .6rem; border-radius: 999px;
  color: var(--text-soft); background: var(--surface-alt); border: 1px solid var(--line);
}
.shop-skel { display: flex; gap: .5rem; }
.shop-skel i { height: 10px; border-radius: 6px; background: var(--line); opacity: .8; }
.shop-skel i:first-child { width: 42%; }
.shop-skel i:last-child { width: 22%; }
.shop-note { text-align: center; color: var(--text-soft); margin: 1.8rem 0 0; }

@keyframes shop-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(2deg); } }
@keyframes shop-drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(24px, 18px); } }
@keyframes shop-twinkle { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.25); } }
@keyframes shop-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,182,72,.6); } 100% { box-shadow: 0 0 0 10px rgba(255,182,72,0); } }
@keyframes shop-shine { 0%, 55% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

@media (max-width: 860px) { .shop-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .shop-grid { grid-template-columns: 1fr; }
  .shop-hero { padding: 3rem 1.1rem 2.8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .shop-bag, .shop-glow, .shop-spark, .shop-badge i, .shop-card, .shop-card::after { animation: none; }
}

/* ---------------------------------------------------------- تگ‌های متن پاسخ (صفحه‌ی /tags) */
.tags-hero { text-align: center; padding: 2.2rem 0 2.4rem; display: flex; flex-direction: column; align-items: center; }
.tags-hero-icon {
  width: 96px; height: 96px; border-radius: 30px; margin-bottom: 1.6rem;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(90% 90% at 50% 0%, color-mix(in srgb, #22d3ee 22%, transparent), transparent 70%), var(--ink);
  border: 1px solid color-mix(in srgb, #22d3ee 35%, var(--ink-line)); color: #fff;
  box-shadow: 0 0 34px -8px rgba(34, 211, 238, .55), var(--shadow-pop);
  animation: tags-hero-glow 3.4s ease-in-out infinite;
}
.tags-hero-icon svg { animation: tags-hero-tilt 5s ease-in-out infinite; transform-origin: 50% 50%; }
.tags-hero h1 {
  margin: 0 0 .9rem; font-size: clamp(2rem, 1.5rem + 2.4vw, 2.9rem); font-weight: 800; line-height: 1.5;
  background: linear-gradient(90deg, var(--accent), #22d3ee); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.tags-hero p { margin: 0 0 1.8rem; max-width: 30rem; color: var(--text-soft); font-size: 1.1rem; line-height: 2; }
.tags-back {
  display: inline-flex; align-items: center; gap: .55rem; padding: .8rem 2rem; border-radius: 999px;
  border: 1px solid color-mix(in srgb, #22d3ee 40%, var(--line)); color: var(--accent-dark); font-weight: 700;
  text-decoration: none; transition: background .2s ease, border-color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.tags-back:hover { background: color-mix(in srgb, #22d3ee 12%, transparent); border-color: #22d3ee; box-shadow: 0 0 22px -8px #22d3ee; }
.tags-back:active { transform: scale(.97); }
@keyframes tags-hero-glow {
  0%, 100% { box-shadow: 0 0 26px -10px rgba(34, 211, 238, .4), var(--shadow-pop); }
  50% { box-shadow: 0 0 44px -6px rgba(34, 211, 238, .7), var(--shadow-pop); }
}
@keyframes tags-hero-tilt { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@media (prefers-reduced-motion: reduce) { .tags-hero-icon, .tags-hero-icon svg { animation: none; } }
.tags-wrap .hint { margin: 1.1rem .2rem 0; }

.tag-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.tag-chip {
  display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .65rem; cursor: pointer;
  background: var(--surface-alt); border: 1px solid var(--line); border-radius: 999px; color: var(--text);
  font: inherit; font-size: .82rem; transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.tag-chip:hover { background: var(--accent-soft); border-color: var(--accent); transform: translateY(-1px); }
.tag-chip code { color: var(--accent-dark); font-weight: 700; background: none; padding: 0; }
.tag-chip span { color: var(--text-soft); }
.tag-chip.done { background: var(--teal-soft); border-color: var(--teal); }

.tags-list { display: flex; flex-direction: column; gap: 1.2rem; }
.tag-item {
  background: var(--surface-alt); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.4rem 1.4rem 1.5rem; transition: border-color .15s ease, box-shadow .15s ease;
}
.tag-item:hover { border-color: var(--accent); box-shadow: var(--shadow-card); }

/* جعبه‌ی تیره‌ی تگ: نوار رنگی سمت چپ + دکمه‌ی کپی مربعی + خود تگ */
.tag-card {
  position: relative; overflow: hidden; direction: ltr; width: 100%;
  display: flex; align-items: center; gap: 1rem; cursor: pointer; text-align: left;
  padding: .8rem 1rem .8rem 1.3rem; margin: 0 0 1.4rem;
  background: var(--ink); border: 1px solid var(--ink-line); border-radius: var(--radius);
  font: inherit; color: var(--text-invert);
  transition: border-color .15s ease, transform .15s ease;
}
.tag-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: linear-gradient(180deg, #22d3ee, #3b82f6);
}
.tag-card:hover { border-color: #22d3ee; }
.tag-card:active { transform: scale(.985); }
.tag-card code { color: #22d3ee; font-weight: 700; background: none; padding: 0; font-size: 1.15rem; }

.tag-card-copy {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 2.7rem; height: 2.7rem; border-radius: 12px;
  background: rgba(34, 211, 238, .1); border: 1px solid rgba(34, 211, 238, .35); color: #22d3ee;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.tag-card-copy .ic-check { display: none; }
.tag-card.done .tag-card-copy { background: rgba(35, 212, 168, .16); border-color: rgba(35, 212, 168, .55); color: #23d4a8; }
.tag-card.done .tag-card-copy .ic-copy { display: none; }
.tag-card.done .tag-card-copy .ic-check { display: block; animation: tag-check-pop .3s ease-out; }
@keyframes tag-check-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.tag-item-label { display: block; font-size: .95rem; font-weight: 600; color: var(--text-soft); margin-bottom: .55rem; }
.tag-card-desc { color: var(--text); font-size: 1.15rem; line-height: 1.9; margin: 0; }
.tag-card-desc b { color: var(--text); font-weight: 600; }
.tag-item-hr { border: 0; border-top: 1px solid var(--line); margin: 1.3rem 0 1.2rem; }

.tag-scopes { display: flex; flex-wrap: wrap; gap: .7rem; }
.tag-scope {
  display: inline-flex; align-items: center; gap: .55rem; padding: .55rem 1.1rem; border-radius: 999px;
  font-size: 1rem; font-weight: 600; border: 1px solid transparent;
}
.tag-scope::after { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: currentColor; }
.tag-scope.s-pv     { color: #23d4a8; background: rgba(35, 212, 168, .12); border-color: rgba(35, 212, 168, .35); }
.tag-scope.s-channel { color: #ffb648; background: rgba(255, 182, 72, .12); border-color: rgba(255, 182, 72, .35); }
.tag-scope.s-group  { color: #a78bfa; background: rgba(167, 139, 250, .14); border-color: rgba(167, 139, 250, .35); }
.tag-scope.s-inline { color: #22d3ee; background: rgba(34, 211, 238, .12); border-color: rgba(34, 211, 238, .35); }

/* ---------------------------------------------------------- ساعت کاری */
.day-checks { display: flex; flex-wrap: wrap; gap: .5rem .9rem; margin-top: .4rem; }
.check.inline { display: inline-flex; align-items: center; gap: .35rem; font-weight: 400; }

/* ---------------------------------------------------------- صفحه‌ی خطا (404 و ...)
   ایده: خطا هم یک پیام در گفتگوست؛ کدِ خطا داخل همان حباب لوگو می‌آید و
   سه نقطه‌ی «در حال تایپ» تنها حرکتِ صفحه است. رنگ حباب از نوع خطا می‌آید. */
.err {
  --err-bg: var(--amber); --err-fg: var(--ink);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 3.2rem 0 2rem;
}
.err[data-tone="accent"] { --err-bg: var(--accent); --err-fg: #fff; }
.err[data-tone="bad"] { --err-bg: var(--bad); --err-fg: #fff; }

.err-bubble {
  position: relative; width: clamp(13rem, 62vw, 19rem); aspect-ratio: 22 / 21;
  margin-bottom: 1.6rem; animation: err-pop .55s cubic-bezier(.2, .8, .3, 1) both;
}
.err-bubble::before {
  content: ""; position: absolute; inset: -22% -30%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--err-bg) 26%, transparent), transparent);
}
.err-bubble-shape {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
  fill: var(--err-bg); filter: drop-shadow(0 18px 22px rgba(23, 20, 42, .18));
}
.err-bubble-body {
  position: absolute; z-index: 2; inset: 5% 10% 24%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
  color: var(--err-fg);
}
.err-code {
  font-family: "ZahraRoosta", "Vazirmatn", Tahoma, sans-serif; font-weight: 400;
  font-size: clamp(4.6rem, 24vw, 7.4rem); line-height: 1; direction: ltr;
}
/* قلم دست‌نویس عددهای لاتین را هم به شکل فارسی (۴) می‌کشد؛ در حالت انگلیسی قلم متن را بگیر */
html[lang="en"] .err-code {
  font-family: "Vazirmatn", "Segoe UI", system-ui, sans-serif; font-weight: 800;
  font-size: clamp(3.6rem, 19vw, 5.6rem);
}
.err-dots { display: flex; gap: .4rem; opacity: .75; direction: ltr; }
.err-dots i {
  width: .55rem; height: .55rem; border-radius: 50%; background: currentColor;
  animation: err-typing 1.3s ease-in-out infinite;
}
.err-dots i:nth-child(2) { animation-delay: .18s; }
.err-dots i:nth-child(3) { animation-delay: .36s; }

.err-title { margin-bottom: .5rem; }
.err-text { max-width: 30rem; margin: 0 0 1.1rem; color: var(--text-soft); line-height: 1.95; }
.err-path {
  display: block; max-width: min(100%, 30rem); margin-bottom: 1.4rem; padding: .35rem .8rem;
  font-family: "SFMono-Regular", Consolas, monospace; font-size: .82rem; color: var(--text-soft);
  background: var(--card); border: 1px dashed var(--line); border-radius: var(--radius-sm);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.err-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-top: .4rem; }

@keyframes err-pop {
  from { opacity: 0; transform: translateY(12px) scale(.95); }
  to { opacity: 1; transform: none; }
}
@keyframes err-typing {
  0%, 70%, 100% { transform: translateY(0); opacity: .45; }
  35% { transform: translateY(-.32rem); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .err-bubble, .err-dots i { animation: none; }
}

/* ---------------------------------------------------------- پنل لینکی */
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.panel-title { display: flex; align-items: center; gap: .85rem; }
.panel-title h1 { margin: 0; font-size: 1.5rem; }
.panel-mark {
  width: 3rem; height: 3rem; border-radius: 14px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent); box-shadow: var(--shadow-card);
}
.panel-tabs { display: flex; gap: .4rem; margin-bottom: 1.2rem; border-bottom: 1px solid var(--line); overflow-x: auto; }
.panel-tabs a {
  padding: .6rem 1.1rem; font-weight: 700; color: var(--text-soft); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.panel-tabs a:hover { color: var(--text); }
.panel-tabs a.on { color: var(--accent); border-bottom-color: var(--accent); }
.panel-maker { max-width: 640px; margin: 2rem auto; }
.panel-maker-card h1 { text-align: center; }
.panel-item-top { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .6rem; }
.panel-item-top .muted { margin-inline-start: auto; font-size: .85rem; }
.panel-item-actions { display: flex; align-items: center; gap: .8rem; margin-top: .7rem; }
.panel-item.is-new { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft), var(--shadow-card); }

/* سئو: بخش سوالات متداول صفحه‌ی اصلی (متن ساده و همیشه نمایان) */
.seo-faq { max-width: 46rem; margin: 0 auto 3rem; padding: 0 .2rem; }
.seo-faq h2 { font-size: 1.6rem; margin-bottom: 1rem; }
.seo-faq h3 { font-size: 1.05rem; margin: 1.3rem 0 .3rem; color: var(--text); }
.seo-faq p { margin: 0; color: var(--text-soft); line-height: 1.9; }

/* صفحه‌ی مدیریت ربات (body.no-reveal): کارت‌ها از اول کامل دیده می‌شوند؛ ظاهرشدن با اسکرول ندارند */
:where(.no-reveal) .card, :where(.no-reveal) .bot-row, :where(.no-reveal) .stats > div { opacity: 1; transform: none; }

/* ---------------------------------------------------------- پشتیبانی (تیکت‌ها)
   فقط کلاس‌های تازه با پیشوند tk-/msg-؛ استایل‌های قبلی (.msg, .thread, .bot-row, ...) دست‌نخورده‌اند */
.tk-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .8rem; }
.tk-chip {
  display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .85rem; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line); color: var(--text-soft);
  font-size: .88rem; font-weight: 600;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.tk-chip b { font-weight: 800; font-size: .8rem; background: var(--accent-soft); color: var(--accent-dark); border-radius: 999px; padding: 0 .45rem; }
.tk-chip:hover { border-color: var(--accent); color: var(--text); text-decoration: none; }
.tk-chip.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.tk-chip.on b { background: rgba(255, 255, 255, .18); color: #fff; }

.tk-search { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.tk-search input, .tk-search select { margin-top: 0; width: auto; }
.tk-search input[type=search] { flex: 1 1 12rem; }

.tk-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: var(--accent); margin-inline-end: .4rem; vertical-align: middle; box-shadow: 0 0 0 3px var(--accent-soft); }
.tk-tag { display: inline-flex; align-items: center; height: 1.5rem; padding: 0 .6rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent-dark); font-size: .76rem; font-weight: 700; white-space: nowrap; }
.tk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .45rem; color: var(--text-soft); font-size: .88rem; }
.tk-two { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.tk-row.tk-unread { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.tk-row.tk-unread .main strong { color: var(--accent-dark); }
tr.tk-unread td { background: color-mix(in srgb, var(--accent) 5%, var(--card)); }
.tk-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 .35rem; border-radius: 999px; background: var(--bad); color: #fff; font-size: .72rem; font-weight: 800; line-height: 1; }
.tk-star-inline { color: var(--amber); font-size: 1.1rem; }

/* حباب‌ها با آواتار */
.msg-row { display: flex; align-items: flex-end; gap: .55rem; max-width: 100%; }
.msg-row.out { align-self: flex-end; flex-direction: row-reverse; }
.msg-row.in { align-self: flex-start; }
.msg-row .msg { max-width: min(36rem, calc(100% - 3rem)); align-self: auto; }
.msg-av { width: 2rem; height: 2rem; font-size: .85rem; }
.msg-av.staff { background: var(--teal-soft); color: var(--teal-text); }
.msg-who { font-size: .78rem; font-weight: 700; margin-bottom: .2rem; opacity: .85; }
.msg.in.staff .msg-who { color: var(--teal-text); }
.msg.out.note, .msg.in.note {
  background: color-mix(in srgb, var(--amber) 16%, var(--card)); color: var(--text);
  border: 1px dashed var(--amber); box-shadow: none;
}
.msg.out.note small, .msg.in.note small { color: var(--text-soft); }
.msg.out.note .msg-attach a { color: var(--accent-dark); }
@media (max-width: 560px) { .msg-row .msg { max-width: calc(100% - 2.6rem); } }

/* امتیاز رضایت */
.tk-rate-form { display: flex; gap: .15rem; direction: ltr; justify-content: flex-start; }
.tk-star { background: none; border: 0; padding: 0 .1rem; font-size: 2rem; line-height: 1.2; color: var(--line); cursor: pointer; transition: color .12s ease, transform .12s ease; }
.tk-star.on { color: var(--amber); }
.tk-rate-form:hover .tk-star { color: var(--amber); }
.tk-rate-form .tk-star:hover ~ .tk-star { color: var(--line); }
.tk-star:hover { transform: scale(1.12); }
.tk-star:focus-visible { outline: 2px solid var(--accent); border-radius: 6px; }
.tk-stars i { font-style: normal; color: var(--line); font-size: .95rem; }
.tk-stars i.on { color: var(--amber); }

/* پنل مدیر: اطلاعات تیکت و فرم پاسخ */
.tk-info dl { display: grid; grid-template-columns: auto 1fr; gap: .5rem .9rem; margin: 0 0 1rem; align-items: center; }
.tk-info dt { color: var(--text-soft); font-size: .85rem; }
.tk-info dd { margin: 0; font-weight: 600; }
.tk-check { display: flex; align-items: center; gap: .5rem; margin-bottom: .9rem; font-weight: 500; }
.tk-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
@media (max-width: 560px) {
  .tk-two { grid-template-columns: 1fr; }
  .tk-row { flex-wrap: wrap; }
  .tk-row .row-meta { white-space: normal; flex-wrap: wrap; }
}