/* ===========================================================
   ActionSeen Panel — Design System
   موبایل‌محور: پایه برای صفحه‌ی کوچک نوشته شده و با media query
   بزرگ می‌شود، نه برعکس.
   =========================================================== */

@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn-Medium.woff2') format('woff2');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}

/* ============================ توکن‌ها ============================ */
:root {
  --brand-300: #a5b4fc; --brand-400: #818cf8; --brand-500: #6366f1;
  --brand-600: #4f46e5; --brand-700: #4338ca;
  --accent-400: #22d3ee; --accent-500: #06b6d4;
  --ok-500: #10b981; --warn-500: #f59e0b; --bad-500: #ef4444; --pink-500: #ec4899;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-full: 999px;

  --fs-xs: .75rem; --fs-sm: .8125rem; --fs-md: .9375rem;
  --fs-lg: 1.0625rem; --fs-xl: 1.25rem; --fs-2xl: 1.6rem;

  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur: .18s;

  --sidebar-w: 264px;
  --topbar-h: 60px;
  --bottomnav-h: 62px;

  /* حاشیه‌ی امن برای گوشی‌های دارای ناچ */
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  /* کوچک‌ترین اندازه‌ی قابل لمس راحت */
  --tap: 44px;
}

:root, [data-theme="dark"] {
  --bg: #0b0d1a; --bg-soft: #11142a;
  --surface: rgba(255,255,255,.045); --surface-2: rgba(255,255,255,.075);
  --border: rgba(255,255,255,.09); --border-2: rgba(255,255,255,.16);
  --text: #e8ebff; --text-soft: rgba(232,235,255,.66); --text-dim: rgba(232,235,255,.42);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 6px 20px rgba(0,0,0,.35);
  --shadow-lg: 0 20px 50px rgba(0,0,0,.5);
  --glow: 0 0 0 3px rgba(99,102,241,.28);
  color-scheme: dark;
}

[data-theme="light"] {
  --bg: #f6f7fb; --bg-soft: #ffffff;
  --surface: #ffffff; --surface-2: #f2f3f9;
  --border: rgba(17,20,45,.10); --border-2: rgba(17,20,45,.18);
  --text: #14162b; --text-soft: rgba(20,22,43,.68); --text-dim: rgba(20,22,43,.45);
  --shadow-sm: 0 1px 2px rgba(17,20,45,.06);
  --shadow-md: 0 6px 18px rgba(17,20,45,.08);
  --shadow-lg: 0 18px 44px rgba(17,20,45,.12);
  --glow: 0 0 0 3px rgba(99,102,241,.18);
  color-scheme: light;
}

/* ============================ پایه ============================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;            /* تور ایمنی: هیچ‌وقت اسکرول افقی نداشته باشیم */
}

body {
  min-height: 100dvh;
  overflow-x: hidden;
  font-family: 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  font-size: var(--fs-md); line-height: 1.7;
  color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 600px at 85% -10%, rgba(99,102,241,.16), transparent 60%),
    radial-gradient(700px 500px at 5% 100%, rgba(6,182,212,.10), transparent 60%);
}
[data-theme="light"] body::before { opacity: .55; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
:focus-visible { outline: none; box-shadow: var(--glow); border-radius: var(--r-sm); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: var(--r-full); }
::-webkit-scrollbar-track { background: transparent; }

/* اعداد داخل متن فارسی جهتشان قاطی نشود */
.num { unicode-bidi: plaintext; }
.ltr { direction: ltr; unicode-bidi: plaintext; text-align: left; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ============================ چیدمان ============================ */
.shell { display: flex; min-height: 100dvh; }

/* --- سایدبار: در موبایل کشویی، در دسکتاپ ثابت --- */
/* inset-inline-start در RTL یعنی لبه‌ی راست و در LTR لبه‌ی چپ — یعنی همان سمتی
   که سایدبار در دسکتاپ هم هست. translateX فیزیکی است، پس جهت پنهان‌کردن باید
   برای هر جهت جدا گفته شود؛ اگر برعکس باشد پنل به‌جای بیرون رفتن، نیمه‌باز روی
   محتوا می‌افتد. */
.sidebar {
  position: fixed; inset-block: 0; inset-inline-start: 0;
  width: min(300px, 86vw); z-index: 60;
  background: var(--bg-soft);
  border-inline-start: 1px solid var(--border);
  padding: calc(var(--sp-5) + var(--safe-t)) var(--sp-4) calc(var(--sp-5) + var(--safe-b));
  display: flex; flex-direction: column; gap: var(--sp-5);
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(100%);           /* RTL: به راست، بیرون از صفحه */
  transition: transform .26s var(--ease);
  box-shadow: var(--shadow-lg);
}
[dir="ltr"] .sidebar { transform: translateX(-100%); }   /* LTR: به چپ */
.sidebar.is-open { transform: translateX(0); }

.backdrop {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(0,0,0,.55); backdrop-filter: blur(2px);
  animation: fade .2s var(--ease);
}
@keyframes fade { from { opacity: 0; } }

.brand { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.brand__mark {
  width: 40px; height: 40px; border-radius: var(--r-md); flex-shrink: 0;
  display: grid; place-items: center; font-weight: 700;
  /* «AS» دو حرف است و با fs-lg در جعبه‌ی ۴۰ پیکسلی تنگ می‌شد.
     letter-spacing کمی منفی، دو حرف لاتین را به هم نزدیک و متعادل می‌کند. */
  font-size: var(--fs-md); letter-spacing: -.5px;
  background: linear-gradient(135deg, var(--brand-500), var(--accent-500));
  color: #fff; box-shadow: var(--shadow-md);
}
.brand__name { font-weight: 700; font-size: var(--fs-lg); line-height: 1.2; }
.brand__sub { font-size: var(--fs-xs); color: var(--text-dim); }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav__label {
  font-size: var(--fs-xs); color: var(--text-dim); font-weight: 500;
  padding: var(--sp-4) var(--sp-3) var(--sp-2);
}
.nav__item {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: var(--tap); padding: 10px var(--sp-3);
  border-radius: var(--r-md); color: var(--text-soft);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav__item:hover { background: var(--surface); color: var(--text); }
.nav__item.is-active {
  background: linear-gradient(90deg, rgba(99,102,241,.22), rgba(99,102,241,.06));
  color: var(--text); font-weight: 500;
  box-shadow: inset 0 0 0 1px rgba(99,102,241,.28);
}
.nav__item svg { width: 20px; height: 20px; flex-shrink: 0; }
.nav__item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* --- نوار بالا --- */
.topbar {
  height: calc(var(--topbar-h) + var(--safe-t));
  padding-top: var(--safe-t);
  flex-shrink: 0;
  display: flex; align-items: center; gap: var(--sp-2);
  padding-inline: var(--sp-4);
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(12px);
  position: sticky; top: 0; z-index: 30;
}
/* min-width:0 نبودن اینجا همان چیزی بود که در موبایل نوار را به‌هم می‌ریخت:
   عنوان کوتاه نمی‌شد و بقیه را از صفحه بیرون می‌زد. */
.topbar__title {
  font-weight: 700; font-size: var(--fs-md);
  min-width: 0; flex: 1 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar__actions { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }

.content {
  padding: var(--sp-4) var(--sp-4);
  padding-bottom: calc(var(--bottomnav-h) + var(--safe-b) + var(--sp-6));
}
.container { width: 100%; max-width: 1180px; margin-inline: auto; }

/* --- ناوبری پایین: فقط موبایل --- */
.bottomnav {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 50;
  height: calc(var(--bottomnav-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: color-mix(in srgb, var(--bg-soft) 94%, transparent);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
}
.bottomnav__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; font-size: 10px; color: var(--text-dim);
  transition: color var(--dur) var(--ease);
  position: relative;
}
.bottomnav__item svg { width: 22px; height: 22px; }
.bottomnav__item.is-active { color: var(--brand-400); }
.bottomnav__item.is-active::before {
  content: ''; position: absolute; inset-block-start: 0;
  width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--brand-500);
}

/* ============================ کارت ============================ */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-4);
}
[data-theme="light"] .card { box-shadow: var(--shadow-sm); }
.card--pad-lg { padding: var(--sp-5); }
.card__head {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  margin-bottom: var(--sp-4); padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.card__title { font-weight: 700; font-size: var(--fs-md); min-width: 0; }

.grid { display: grid; gap: var(--sp-3); }
.grid--stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: minmax(0, 1fr); }

/* ============================ کاشی آمار ============================ */
.stat {
  position: relative; overflow: hidden; min-width: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-1);
}
.stat::after {
  content: ''; position: absolute; inset-block-start: 0; inset-inline-end: 0;
  width: 88px; height: 88px; border-radius: 50%;
  background: radial-gradient(circle, var(--stat-tint, var(--brand-500)), transparent 70%);
  opacity: .16; transform: translate(35%, -35%); pointer-events: none;
}
.stat__icon {
  width: 34px; height: 34px; border-radius: var(--r-md); margin-bottom: var(--sp-1);
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--stat-tint, var(--brand-500)) 16%, transparent);
  color: var(--stat-tint, var(--brand-500));
}
.stat__icon svg { width: 18px; height: 18px; }
.stat__value {
  font-size: var(--fs-xl); font-weight: 700; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stat__label { font-size: var(--fs-xs); color: var(--text-soft); line-height: 1.4; }
.stat--coin { --stat-tint: var(--warn-500); }
.stat--view { --stat-tint: var(--accent-500); }
.stat--like { --stat-tint: var(--pink-500); }
.stat--ref  { --stat-tint: var(--ok-500); }

/* ============================ دکمه ============================ */
.btn {
  --btn-bg: var(--surface-2); --btn-fg: var(--text);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--tap); padding: 10px var(--sp-4);
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--btn-bg); color: var(--btn-fg);
  font-weight: 500; user-select: none; white-space: nowrap;
  transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.btn:hover:not(:disabled) { filter: brightness(1.08); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.btn--primary {
  --btn-bg: linear-gradient(135deg, var(--brand-500), var(--brand-600));
  --btn-fg: #fff; border-color: transparent; box-shadow: var(--shadow-md);
}
.btn--ghost { --btn-bg: transparent; }
.btn--danger { --btn-bg: color-mix(in srgb, var(--bad-500) 16%, transparent); --btn-fg: var(--bad-500); }
.btn--block { width: 100%; }
.btn--lg { min-height: 52px; font-size: var(--fs-lg); }
.btn--sm { min-height: 36px; padding: 6px var(--sp-3); font-size: var(--fs-sm); }
.btn--icon { padding: 0; width: var(--tap); min-width: var(--tap); }

.btn.is-loading { color: transparent !important; position: relative; pointer-events: none; }
.btn.is-loading::after {
  content: ''; position: absolute; width: 17px; height: 17px;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
  border-radius: 50%; animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================ فرم ============================ */
.field { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.label { font-size: var(--fs-sm); font-weight: 500; color: var(--text-soft); }
.input {
  width: 100%; min-width: 0; min-height: var(--tap);
  padding: 12px var(--sp-4);
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-md);
  font-size: 16px;   /* زیر ۱۶ پیکسل، سافاری iOS موقع فوکوس صفحه را زوم می‌کند */
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input::placeholder { color: var(--text-dim); font-size: var(--fs-md); }
.input:focus { border-color: var(--brand-400); box-shadow: var(--glow); outline: none; }
.input.is-invalid { border-color: var(--bad-500); }
.hint { font-size: var(--fs-xs); color: var(--text-dim); }
.error-text { font-size: var(--fs-sm); color: var(--bad-500); min-height: 1.4em; }

.otp { display: flex; gap: var(--sp-2); justify-content: center; direction: ltr; }
.otp input {
  width: clamp(44px, 16vw, 56px); height: clamp(52px, 18vw, 62px);
  text-align: center; font-size: var(--fs-xl); font-weight: 700;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-md);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.otp input:focus { border-color: var(--brand-400); box-shadow: var(--glow); outline: none; }
.otp input.is-filled { border-color: var(--brand-400); }

/* ============================ نشان و هشدار ============================ */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: 500;
  background: var(--surface-2); color: var(--text-soft); white-space: nowrap;
}
.badge--ok   { background: color-mix(in srgb, var(--ok-500) 15%, transparent); color: var(--ok-500); }
.badge--run  { background: color-mix(in srgb, var(--accent-500) 15%, transparent); color: var(--accent-500); }
.badge--warn { background: color-mix(in srgb, var(--warn-500) 15%, transparent); color: var(--warn-500); }
.badge--bad  { background: color-mix(in srgb, var(--bad-500) 15%, transparent); color: var(--bad-500); }
.badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

.alert {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-4); border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--surface);
  font-size: var(--fs-sm);
}
.alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 3px; }
.alert--bad  { border-color: color-mix(in srgb, var(--bad-500) 35%, transparent);
               background: color-mix(in srgb, var(--bad-500) 9%, transparent); }
.alert--ok   { border-color: color-mix(in srgb, var(--ok-500) 35%, transparent);
               background: color-mix(in srgb, var(--ok-500) 9%, transparent); }
.alert--warn { border-color: color-mix(in srgb, var(--warn-500) 35%, transparent);
               background: color-mix(in srgb, var(--warn-500) 9%, transparent); }

/* ============================ اعلان ============================ */
.toasts {
  position: fixed; z-index: 90;
  inset-block-end: calc(var(--bottomnav-h) + var(--safe-b) + var(--sp-3));
  inset-inline: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-2); align-items: center;
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-md);
  background: var(--bg-soft); border: 1px solid var(--border);
  box-shadow: var(--shadow-lg); font-size: var(--fs-sm);
  animation: toast-in .22s var(--ease);
  max-width: 100%; width: fit-content; pointer-events: auto;
}
.toast--ok  { border-inline-start: 3px solid var(--ok-500); }
.toast--bad { border-inline-start: 3px solid var(--bad-500); }
.toast.is-out { animation: toast-out .2s var(--ease) forwards; }
@keyframes toast-in  { from { opacity: 0; transform: translateY(10px); } }
@keyframes toast-out { to   { opacity: 0; transform: translateY(6px); } }

/* ============================ اسکلت و خالی ============================ */
.skeleton {
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 37%, var(--surface) 63%);
  background-size: 400% 100%; animation: shimmer 1.3s ease-in-out infinite;
  border-radius: var(--r-sm);
}
@keyframes shimmer { to { background-position: 0 0; } }

.empty { text-align: center; padding: var(--sp-8) var(--sp-4); color: var(--text-soft); }
.empty__icon {
  width: 60px; height: 60px; margin: 0 auto var(--sp-4);
  display: grid; place-items: center; border-radius: var(--r-xl);
  background: var(--surface-2); color: var(--text-dim);
}

/* ============================ صفحه‌ی ورود ============================ */
.auth {
  min-height: 100dvh; display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* بدون این، ردیف فقط به اندازه‌ی محتوا بالا می‌آید و ستون معرفی
     در دسکتاپ وسط صفحه معلق می‌ماند به‌جای اینکه تا پایین کشیده شود. */
  grid-template-rows: 1fr;
  padding-top: var(--safe-t); padding-bottom: var(--safe-b);
}

/* ستون معرفی — در موبایل فقط یک هدر فشرده، در دسکتاپ یک ستون کامل */
.auth__aside {
  display: none;
  position: relative; overflow: hidden;
  padding: var(--sp-12) var(--sp-10);
  background:
    radial-gradient(700px 500px at 20% 15%, rgba(99,102,241,.28), transparent 62%),
    radial-gradient(600px 500px at 85% 85%, rgba(6,182,212,.20), transparent 60%),
    var(--bg-soft);
  border-inline-start: 1px solid var(--border);
  flex-direction: column; justify-content: center; gap: var(--sp-8);
}
.auth__aside::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(currentColor 1px, transparent 1px);
  background-size: 26px 26px; color: var(--text); opacity: .04;
}
.auth__headline { font-size: 2rem; font-weight: 700; line-height: 1.45; position: relative; }
.auth__headline em { font-style: normal; color: var(--brand-400); }

.feature { display: flex; gap: var(--sp-3); align-items: flex-start; position: relative; }
.feature__icon {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--brand-500) 18%, transparent);
  color: var(--brand-300);
}
.feature__icon svg { width: 19px; height: 19px; }
.feature__title { font-weight: 500; }
.feature__text { font-size: var(--fs-sm); color: var(--text-soft); }

.trust { display: flex; gap: var(--sp-6); position: relative; flex-wrap: wrap; }
.trust__value { font-size: var(--fs-xl); font-weight: 700; }
.trust__label { font-size: var(--fs-xs); color: var(--text-soft); }

.auth__main {
  display: grid; place-items: center; padding: var(--sp-5) var(--sp-4);
  min-width: 0;
}
.auth__card { width: 100%; max-width: 420px; }
.auth__top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-6);
}
.auth__head { text-align: center; margin-bottom: var(--sp-5); }
.auth__title { font-size: var(--fs-xl); font-weight: 700; margin-bottom: var(--sp-1); }
.auth__sub { font-size: var(--fs-sm); color: var(--text-soft); }
.auth__steps { display: flex; gap: 6px; justify-content: center; margin-bottom: var(--sp-6); }
.auth__step { width: 30px; height: 3px; border-radius: var(--r-full); background: var(--border-2);
              transition: background var(--dur) var(--ease); }
.auth__step.is-on { background: var(--brand-500); }
.auth__foot { margin-top: var(--sp-6); text-align: center; font-size: var(--fs-xs); color: var(--text-dim); }

.step { display: none; flex-direction: column; gap: var(--sp-4); }
.step.is-active { display: flex; animation: step-in .25s var(--ease); }
@keyframes step-in { from { opacity: 0; transform: translateY(8px); } }

/* نوار مزیت‌های فشرده — فقط موبایل، زیر فرم */
.auth__perks {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2); margin-top: var(--sp-6);
}
.perk {
  text-align: center; padding: var(--sp-3) var(--sp-2);
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface);
}
.perk svg { width: 18px; height: 18px; margin: 0 auto var(--sp-1); color: var(--brand-400); }
.perk span { font-size: 11px; color: var(--text-soft); line-height: 1.35; display: block; }

/* ============================ تب ============================ */
/* دو نوع سفارش دو جدول جدا با ستون‌های متفاوت‌اند؛ تب یعنی کاربر یک‌بار
   انتخاب می‌کند و بعد همه‌ی ستون‌های همان نوع را کامل می‌بیند. */
.tabs {
  display: flex; gap: var(--sp-1); padding: var(--sp-1);
  background: var(--surface-2); border-radius: var(--r-full);
}
.tab {
  flex: 1; min-height: 40px; padding: 0 var(--sp-3);
  border: none; border-radius: var(--r-full); background: transparent;
  color: var(--text-soft); font-size: var(--fs-sm); white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tab.is-active { background: var(--surface-1); color: var(--text); font-weight: 500; }

/* ============================ انتخاب ری‌اکشن ============================ */
/* auto-fill به‌جای تعداد ستون ثابت: روی گوشی ۶ ستون و روی دسکتاپ بیشتر،
   بدون media query. اندازه‌ی خانه از --tap کمتر نمی‌شود تا با انگشت
   قابل زدن بماند. */
.reaction-grid {
  display: grid; gap: var(--sp-2);
  grid-template-columns: repeat(auto-fill, minmax(var(--tap), 1fr));
}
.reaction {
  aspect-ratio: 1; display: grid; place-items: center;
  font-size: 1.35rem; line-height: 1;
  border: 2px solid transparent; border-radius: var(--r-md);
  background: var(--surface-2); color: var(--text);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.reaction:hover { background: var(--surface-3, var(--surface-2)); }
.reaction.is-active { border-color: var(--brand-500); background: var(--surface-1); }

/* ==================== پرسش حساب ربات ==================== */
.auth__ask {
  font-size: var(--fs-lg); font-weight: 500;
  margin-block: var(--sp-4) var(--sp-2); text-align: center;
}

/* ==================== پلکان قیمت سکه ==================== */
.tiers { display: flex; flex-direction: column; gap: var(--sp-2); }
.tier {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3); border: 1px solid var(--border);
  border-radius: var(--r-md); background: var(--surface-2);
  font-size: var(--fs-sm);
}
.tier__range { flex: 1 1 150px; color: var(--text-soft); min-width: 0; }
.tier__price { white-space: nowrap; }
/* پله‌ای که همین حالا شامل حال کاربر است باید بدون خواندن اعداد پیدا باشد */
.tier.is-mine { border-color: var(--brand-500); background: var(--surface-1); }

/* ==================== نمودار آمار ==================== */
/* بدون کتابخانه: پنل build step ندارد و هیچ فایل بیرونی بار نمی‌کند. */
.bars {
  display: flex; align-items: flex-end; gap: var(--sp-2);
  height: 170px; overflow-x: auto; scrollbar-width: none;
}
.bars::-webkit-scrollbar { display: none; }
.bar-col {
  flex: 1 1 0; min-width: 26px; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; height: 100%; gap: 4px;
}
.bar-col__stack { width: 100%; min-height: 2px; display: flex; align-items: flex-end; }
.bar-col__guest {
  width: 100%; height: 100%; border-radius: var(--r-sm) var(--r-sm) 0 0;
  background: var(--surface-3, var(--border)); display: flex; align-items: flex-end;
}
.bar-col__logged {
  width: 100%; border-radius: var(--r-sm) var(--r-sm) 0 0;
  background: linear-gradient(180deg, var(--brand-400), var(--brand-500));
}
.bar-col__n { font-size: var(--fs-xs); color: var(--text-soft); }
.bar-col__x { font-size: 10px; color: var(--text-dim); white-space: nowrap; }

.chart-legend {
  display: flex; gap: var(--sp-4); justify-content: center;
  margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--text-soft);
}
.chart-legend .dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-inline-end: 5px; }
.dot--brand { background: var(--brand-500); }
.dot--soft  { background: var(--surface-3, var(--border)); }

.meter__head {
  display: flex; justify-content: space-between; gap: var(--sp-3);
  font-size: var(--fs-sm); margin-bottom: 6px;
}

/* ==================== زیرمجموعه‌گیری ==================== */
.reward-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin-top: var(--sp-4); }
.reward {
  padding: var(--sp-4) var(--sp-3); text-align: center;
  border: 1px dashed var(--border-2); border-radius: var(--r-md); background: var(--surface-2);
}
.reward__num   { font-size: var(--fs-xl); font-weight: 700; color: var(--brand-400); }
.reward__label { font-size: var(--fs-xs); color: var(--text-soft); margin-top: 2px; }

/* کد دعوت باید در یک نگاه خوانده و با یک لمس کپی شود */
.invite {
  width: 100%; min-height: 60px; display: flex; align-items: center; justify-content: center;
  gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  border: 1px dashed var(--brand-400); border-radius: var(--r-md);
  background: color-mix(in srgb, var(--brand-500) 8%, transparent); color: var(--text);
  transition: background var(--dur) var(--ease);
}
.invite:hover { background: color-mix(in srgb, var(--brand-500) 14%, transparent); }
.invite__code { font-size: var(--fs-xl); font-weight: 700; letter-spacing: .12em; }
.invite svg   { width: 18px; height: 18px; flex-shrink: 0; color: var(--text-dim); }

.ref-list { display: flex; flex-direction: column; }
.ref {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3) 0; border-top: 1px solid var(--border);
}
.ref:first-child { border-top: none; }
.ref__phone { font-weight: 500; }
.ref__when  { font-size: var(--fs-xs); color: var(--text-dim); margin-inline-start: auto; }

/* ==================== گزینه‌های لایک و رای ==================== */
/* گزینه‌ها با همان چیدمان خود پست ساخته می‌شوند: هر ردیف یک سطر، ستون‌ها
   کنار هم. نظرسنجی تک‌ستونه است و طبیعتا زیر هم می‌آید. wrap لازم است چون
   یک ردیف با پنج دکمه در گوشی جا نمی‌شود. */
.opt-grid { display: flex; flex-direction: column; gap: var(--sp-2); }
.opt-row  { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.opt {
  flex: 1 1 auto; min-width: 0; min-height: var(--tap);
  padding: 10px var(--sp-3);
  border: 2px solid transparent; border-radius: var(--r-md);
  background: var(--surface-2); color: var(--text);
  font-size: var(--fs-sm); text-align: center;
  overflow-wrap: anywhere;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.opt.is-active { border-color: var(--brand-500); background: var(--surface-1); font-weight: 500; }

/* ============================ شرایط سفارش ============================ */
.rules { display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-sm); }
.rules li { position: relative; padding-inline-start: var(--sp-4); color: var(--text-soft); }
.rules li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--brand-400);
}
.rules__warn { color: var(--warn-500); }
.rules__warn::before { background: var(--warn-500) !important; }

/* ============================ فیلتر و جستجو ============================ */
.filters {
  display: flex; flex-direction: column; gap: var(--sp-3);
  margin-top: var(--sp-4); padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}
.chips {
  display: flex; gap: var(--sp-2); overflow-x: auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  margin-inline: calc(var(--sp-4) * -1); padding-inline: var(--sp-4);
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex-shrink: 0; min-height: 36px; padding: 6px var(--sp-4);
  border: 1px solid var(--border); border-radius: var(--r-full);
  background: var(--surface-2); color: var(--text-soft);
  font-size: var(--fs-sm); white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.chip.is-active {
  background: var(--brand-500); border-color: transparent; color: #fff; font-weight: 500;
}
.search { position: relative; }
.search svg {
  position: absolute; inset-inline-start: var(--sp-3); inset-block-start: 50%;
  transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-dim);
  pointer-events: none;
}
.search .input { padding-inline-start: calc(var(--sp-3) * 2 + 18px); }

/* ============================ کارت سفارش ============================ */
.order { display: flex; flex-direction: column; gap: var(--sp-3); }
.order__link {
  display: block; font-size: var(--fs-sm); color: var(--brand-400);
  background: var(--surface-2); padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
}
/* سفارش‌هایی که با فوروارد پست به ربات ثبت شده‌اند: لینکشان به کانال داخلی
   مجموعه اشاره می‌کند و اصلاً از سرور بیرون نمی‌آید. */
.order__link--hidden {
  display: flex; align-items: center; gap: var(--sp-2);
  color: var(--text-dim); font-style: normal;
}
.order__link--hidden svg { width: 15px; height: 15px; flex-shrink: 0; }
.order__meta {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2) var(--sp-4); font-size: var(--fs-sm);
}
/* اطلاعات سفارش بریده نمی‌شود؛ برچسب سرعت می‌تواند بلند باشد و کاربر
   باید کاملش را بخواند. min-width:0 جلوی سرریز افقی را می‌گیرد. */
.order__meta > div { min-width: 0; overflow-wrap: anywhere; }
.copy-key { font-size: var(--fs-xs); padding: 4px var(--sp-2); min-height: 30px; }

.bar { height: 5px; border-radius: var(--r-full); background: var(--surface-2); overflow: hidden; }
.bar__fill {
  height: 100%; border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--brand-500), var(--accent-500));
  transition: width .4s var(--ease);
}
/* وضعیت «در حال انجام» درصد دقیق ندارد، پس نوار متحرک نشان می‌دهیم
   به‌جای اینکه عدد ساختگی به کاربر بدهیم */
.bar__fill--indet {
  width: 35%;
  animation: indet 1.4s var(--ease) infinite;
}
@keyframes indet {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}

.pager { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); }

/* ============================ فرم سفارش ============================ */
.order-form { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr); }

.post {
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-4); background: var(--surface-2);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.post__head { display: flex; align-items: center; justify-content: space-between; }
.post__num { font-weight: 500; font-size: var(--fs-sm); color: var(--text-soft); }

/* بازدید فعلی پست، زیر فیلد لینک */
.post__views-now { font-size: var(--fs-xs); min-height: 1.4em; }
.views-now {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--accent-500); font-weight: 500;
}
.views-now svg { width: 14px; height: 14px; }

.result-check {
  width: 62px; height: 62px; margin: 0 auto;
  display: grid; place-items: center; border-radius: 50%;
  background: color-mix(in srgb, var(--ok-500) 16%, transparent);
  color: var(--ok-500);
  animation: pop .35s var(--ease);
}
.result-check svg { width: 30px; height: 30px; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }

.speed-options { display: grid; gap: var(--sp-3); }
.speed-option {
  display: flex; gap: var(--sp-3); align-items: flex-start; cursor: pointer;
  padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface-2);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.speed-option:has(input:checked) {
  border-color: var(--brand-400);
  background: color-mix(in srgb, var(--brand-500) 10%, transparent);
}
.speed-option input { margin-top: 4px; accent-color: var(--brand-500); width: 18px; height: 18px; flex-shrink: 0; }
.speed-option__title { font-weight: 500; }
.speed-option__text { font-size: var(--fs-sm); color: var(--text-soft); }

.summary__row {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--sp-2) 0; font-size: var(--fs-sm);
}
.summary__row--total {
  margin-top: var(--sp-2); padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  font-size: var(--fs-lg); font-weight: 700;
}

/* ============================ کمکی ============================ */
.stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.row { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; flex-wrap: wrap; }
.row--nowrap { flex-wrap: nowrap; }
.row--between { justify-content: space-between; }
.grow { flex: 1 1 auto; min-width: 0; }
.muted { color: var(--text-soft); }
.dim { color: var(--text-dim); }
.small { font-size: var(--fs-sm); }
.center { text-align: center; }
.hidden { display: none !important; }
.link { color: var(--brand-400); }

.balance {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px var(--sp-3); border-radius: var(--r-full);
  background: color-mix(in srgb, var(--warn-500) 13%, transparent);
  color: var(--warn-500); font-weight: 700; font-size: var(--fs-sm);
  white-space: nowrap;
}
.balance svg { width: 15px; height: 15px; flex-shrink: 0; }

/* ============================ ≥ 600px ============================ */
@media (min-width: 600px) {
  :root { --fs-xl: 1.375rem; --fs-2xl: 1.875rem; }
  .content { padding: var(--sp-5); padding-bottom: calc(var(--bottomnav-h) + var(--safe-b) + var(--sp-8)); }
  .card { padding: var(--sp-5); }
  .card--pad-lg { padding: var(--sp-8); }
  .card__title { font-size: var(--fs-lg); }
  .grid { gap: var(--sp-4); }
  .grid--stats { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
  .grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  .filters { flex-direction: row; align-items: center; justify-content: space-between; }
  .chips { margin-inline: 0; padding-inline: 0; }
  .search { width: min(280px, 45%); }
  .order__meta { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .stat { padding: var(--sp-5); }
  .stat__value { font-size: var(--fs-2xl); }
  .stat__label { font-size: var(--fs-sm); }
  .topbar__title { font-size: var(--fs-lg); }
  .toasts { inset-inline-start: var(--sp-5); inset-inline-end: auto; align-items: flex-start; }
}

/* ============================ ≥ 900px (صفحه‌ی ورود دوستونه) ==== */
@media (min-width: 900px) {
  .auth { grid-template-columns: 1.05fr .95fr; }
  .auth__aside { display: flex; }
  .auth__perks { display: none; }
  .auth__main { padding: var(--sp-8); }
}

/* ============================ ≥ 1000px (دسکتاپ پنل) ============ */
@media (min-width: 1000px) {
  .sidebar {
    position: sticky; inset: auto; top: 0; height: 100dvh;
    width: var(--sidebar-w); flex-shrink: 0;
    transform: none; box-shadow: none;
    padding-block: var(--sp-5);
  }
  /* 🔴 پنل انگلیسی: قاعده‌ی پنهان‌کردن LTR بالا (`[dir="ltr"] .sidebar`) از `.sidebar` این‌جا قوی‌تر است
     و سایدبار را در دسکتاپ هم بیرون نگه می‌داشت. */
  [dir="ltr"] .sidebar { transform: none; }
  .sidebar__close, .menu-btn { display: none !important; }
  .bottomnav { display: none; }
  .content { padding: var(--sp-6) var(--sp-5) var(--sp-12); }
  .toasts { inset-block-end: var(--sp-5); }
  .topbar { padding-inline: var(--sp-5); }

  /* خلاصه‌ی سفارش کنار فرم می‌ماند و با اسکرول همراه می‌شود */
  .order-form { grid-template-columns: minmax(0, 1fr) 330px; align-items: start; }
  .summary { position: sticky; top: calc(var(--topbar-h) + var(--sp-5)); }
}

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

/* چاپ: سایدبار و ناوبری لازم نیست */
@media print {
  .sidebar, .bottomnav, .topbar__actions, .backdrop { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ---------------------- کلید وبسرویس ---------------------- */

/* کلید ۳۰ کاراکتری لاتین داخل صفحه‌ی RTL. بدون dir=ltr وارونه دیده می‌شود،
   و بدون overflow در موبایل کارت را پهن می‌کند. */
.keybox {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.keybox__value {
  direction: ltr; unicode-bidi: isolate;
  flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap;
  font-family: ui-monospace, Consolas, monospace;
  font-size: var(--fs-sm); color: var(--brand-300);
}

/* ------------------- لاگ درخواست‌های وبسرویس ------------------- */

.loglist { display: flex; flex-direction: column; }
.logrow {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) 0; font-size: var(--fs-sm);
  border-top: 1px solid var(--border);
}
.logrow:first-child { border-top: none; }
.logrow__dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.logrow__dot.is-ok  { background: var(--ok-500); }
.logrow__dot.is-bad { background: var(--bad-500); }
.logrow__action {
  direction: ltr; font-family: ui-monospace, Consolas, monospace;
  font-size: var(--fs-xs); color: var(--brand-300); flex-shrink: 0;
}
/* متن خطا می‌تواند بلند باشد و نباید ردیف را بشکند */
.logrow__note {
  flex: 1; min-width: 0; color: var(--text-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.logrow__time { color: var(--text-dim); font-size: var(--fs-xs); flex-shrink: 0; }