/*
 * پاسچی — شیوه‌نامهٔ مشترک لندینگ و اپ.
 *
 * سه تصمیم که بقیه از آن‌ها می‌آید:
 *
 * ۱. راست‌به‌چپ پایه است، نه استثنا. `dir="rtl"` روی <html> نشسته و همه‌جا
 *    از ویژگی‌های منطقی (`inline-start`, `margin-inline`) استفاده می‌شود نه
 *    `left/right` — وگرنه هر بار که چیزی اضافه شود باید دوباره وارونه‌اش کرد.
 *
 * ۲. تم روشن و تاریک هر دو کامل تعریف می‌شوند. مینی‌اپ داخل تلگرام و بله
 *    باز می‌شود و تم آن‌ها را کاربر انتخاب کرده، نه ما.
 *
 * ۳. عدد و زمان با `font-variant-numeric: tabular-nums` تا موقع به‌روزرسانی
 *    پیشرفت، عرضشان نپرد.
 */

:root {
  color-scheme: light dark;
  /* Direction C: blue pen + yellow highlighter on cream paper */
  --bg: #F7F3E8; --bg-soft: #EFEADC; --surface: #FFFDF8; --surface-2: #F3EEE1;
  --border: #E4DECF; --border-strong: #D5CFBF;
  --text: #151A2E; --text-soft: #4A5068; --text-dim: #646A80;
  --brand: #2438B8; --brand-hover: #1C2D96; --brand-soft: #E6E9FA; --brand-text: #2438B8; --ink-deep: #141C5C; --on-brand: #FFFFFF;
  --accent: #1E7A4F; --accent-soft: #E7F3EC;
  --marker: #F6D84C; --marker-soft: #FBEBA0; --rule: #DCE2F3; --margin: #EFB7B0;
  --danger: #B42318; --warn: #8A6410;
  --btn-shadow: 0 2px 0 var(--ink-deep);
  --shadow: 0 1px 2px rgba(20, 28, 92, .05), 0 8px 24px -14px rgba(20, 28, 92, .22);
  --shadow-lg: 0 2px 6px rgba(20, 28, 92, .06), 0 24px 60px -28px rgba(20, 28, 92, .35);

  --radius: 14px;
  --radius-sm: 9px;
  --radius-lg: 22px;

  --maxw: 1080px;
  --font: Vazirmatn, "Segoe UI", system-ui, -apple-system, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E1020; --bg-soft: #13162A; --surface: #171A2E; --surface-2: #1E2238;
    --border: #2A2E48; --border-strong: #3A4070;
    --text: #EEF0F8; --text-soft: #AEB3CC; --text-dim: #7F87A8;
    --brand: #8C9BFF; --brand-hover: #A5B1FF; --brand-soft: #1E2344; --brand-text: #A5B1FF; --ink-deep: #0E1020; --on-brand: #0E1020;
    --accent: #5FD3A3; --accent-soft: #15302A;
    --marker: #F6D84C; --marker-soft: #5A5020; --rule: #1A1E36; --margin: #4A2A34;
    --danger: #F07A6E; --warn: #E3B341;
    --btn-shadow: none;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -12px rgba(0, 0, 0, .6);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, .35), 0 24px 60px -28px rgba(0, 0, 0, .8);
  }
}

/* تمی که کاربر داخل اپ دستی انتخاب می‌کند بر تم سیستم می‌چربد. */
:root[data-theme="dark"] {
    --bg: #0E1020; --bg-soft: #13162A; --surface: #171A2E; --surface-2: #1E2238;
    --border: #2A2E48; --border-strong: #3A4070;
    --text: #EEF0F8; --text-soft: #AEB3CC; --text-dim: #7F87A8;
    --brand: #8C9BFF; --brand-hover: #A5B1FF; --brand-soft: #1E2344; --brand-text: #A5B1FF; --ink-deep: #0E1020; --on-brand: #0E1020;
    --accent: #5FD3A3; --accent-soft: #15302A;
    --marker: #F6D84C; --marker-soft: #5A5020; --rule: #1A1E36; --margin: #4A2A34;
    --danger: #F07A6E; --warn: #E3B341;
    --btn-shadow: none;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -12px rgba(0, 0, 0, .6);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, .35), 0 24px 60px -28px rgba(0, 0, 0, .8);
}
:root[data-theme="light"] {
  --bg: #F7F3E8; --bg-soft: #EFEADC; --surface: #FFFDF8; --surface-2: #F3EEE1;
  --border: #E4DECF; --border-strong: #D5CFBF;
  --text: #151A2E; --text-soft: #4A5068; --text-dim: #646A80;
  --brand: #2438B8; --brand-hover: #1C2D96; --brand-soft: #E6E9FA; --brand-text: #2438B8; --ink-deep: #141C5C; --on-brand: #FFFFFF;
  --accent: #1E7A4F; --accent-soft: #E7F3EC;
  --marker: #F6D84C; --marker-soft: #FBEBA0; --rule: #DCE2F3; --margin: #EFB7B0;
  --danger: #B42318; --warn: #8A6410;
  --btn-shadow: 0 2px 0 var(--ink-deep);
  --shadow: 0 1px 2px rgba(20, 28, 92, .05), 0 8px 24px -14px rgba(20, 28, 92, .22);
  --shadow-lg: 0 2px 6px rgba(20, 28, 92, .06), 0 24px 60px -28px rgba(20, 28, 92, .35);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  line-height: 1.35;
  margin: 0;
  font-weight: 700;
  letter-spacing: -.01em;
}

p { margin: 0; }

a { color: inherit; }

/* عددها هم‌عرض بمانند تا شمارنده‌ها نلرزند */
.num, time, .stat-value, .coin { font-variant-numeric: tabular-nums; }

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

/* ─── دکمه‌ها ──────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
  transition: transform .12s ease, background .15s ease, border-color .15s ease, opacity .15s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary { background: var(--brand); color: var(--on-brand); box-shadow: var(--btn-shadow); font-weight: 800; }
.btn-primary:hover:not(:disabled) { background: var(--brand-hover); }

.btn-ghost {
  background: var(--surface);
  color: var(--brand-text);
  border: 1.5px solid color-mix(in srgb, var(--brand) 55%, var(--border-strong));
  font-weight: 700;
}
.btn-ghost:hover:not(:disabled) { background: var(--surface-2); }

.btn-block { width: 100%; }
.btn-sm { padding: 8px 15px; font-size: 13.5px; border-radius: var(--radius-sm); }

/* ─── کارت ─────────────────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-text);
  font-size: 13px;
  font-weight: 600;
}

.muted { color: var(--text-soft); }
.dim { color: var(--text-dim); font-size: 14px; }

/* دسترس‌پذیری: حلقهٔ فوکوس هرگز حذف نمی‌شود، فقط خوش‌شکل می‌شود */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

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

/* ─── ماژیک: فقط روی عینِ حرفِ استاد ───────────────────────────────────── */
.hl {
  background-image: linear-gradient(100deg, transparent 0 .12em, var(--marker) .32em calc(100% - .3em), transparent calc(100% - .1em));
  background-repeat: no-repeat; background-size: 100% 72%; background-position: 0 72%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding-inline: .22em; margin-inline: -.1em; color: #151A2E;
}
/* نشان‌واره: نام با یک خط ماژیک زیرش (در تیره پایین‌تر، تا متن روشن روی زرد نیفتد) */
.wordmark { position: relative; z-index: 0; font-weight: 900; letter-spacing: -.01em; }
.wordmark::after {
  content: ""; position: absolute; z-index: -1; inset-inline: -3px; bottom: .22em; height: .42em;
  background: var(--marker); border-radius: 2px 5px 3px 6px; transform: rotate(-2deg);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wordmark::after { bottom: -.28em; height: .26em; } }
:root[data-theme="dark"] .wordmark::after { bottom: -.28em; height: .26em; }
.logo-img { display: block; flex: none; border-radius: 22%; }