/* =====================================================================
   بوستینو — ظاهرِ جدیدِ اپ (نقشه، درس، آزمون، پروفایل، قیمت، فروشگاه، پشتیبانی، ورود)
   بعد از لایه‌ی lg-theme لود می‌شه و فقط ظاهر رو عوض می‌کنه؛ هیچ کلاس/ساختاری عوض نشده.
   اصلِ طراحی (مثلِ صفحه‌ی اصلیِ جدید): مینیمال و نرم، کارت‌های خیلی گرد با سایه‌ی ملایم،
   شیشه‌ی مات فقط برای نوارهای ناوبری، دکمه‌ی اصلیِ قرصی که لایه‌ی نئون از پایین روش بالا میاد.
   ===================================================================== */

/* ---------- خاموش‌کردنِ براقیِ شیشه‌ی قبلی؛ جایگزین با توکن‌های جدید ---------- */
html[data-theme] {
  --lg-sheen: linear-gradient(transparent, transparent);
  --lg-sheen-soft: linear-gradient(transparent, transparent);
  --lg-spec: 0 0 #0000;
  --lg-spec-soft: 0 0 #0000;
  --lg-drop: var(--bn-shadow-lift);
  --lg-drop-soft: var(--bn-shadow-soft);
  --lg-tint: var(--bn-glass);
  --lg-tint-strong: var(--bn-glass);
  --lg-stroke: var(--bn-line);
  --lg-stroke-hi: var(--bn-line-strong);
  --lg-blur: var(--bn-blur);
  --lg-blur-lite: blur(14px) saturate(160%);
}

html, body { background-color: var(--bg-void); }
body { color: var(--text-hi); }
html[data-theme="light"] body::after { opacity: .55; }
/* بافتِ نویزِ خیلی کم‌رنگ روی کلِ پس‌زمینه */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: var(--bn-grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::-webkit-scrollbar-thumb { background: var(--bn-line-strong); }

/* ---------- نوارِ بالا: کپسولِ شیشه‌ایِ شناور ---------- */
.topbar { background: none; }
.topbar::before, .landing-nav::before {
  background: var(--bn-glass);
  -webkit-backdrop-filter: var(--bn-blur); backdrop-filter: var(--bn-blur);
  border: 1px solid var(--bn-glass-line);
  border-radius: 999px;
  box-shadow: var(--bn-shadow-soft);
}
@media (max-width: 600px) { .topbar::before { border-radius: 26px; } }

.brand-mark, .auth-icon-badge {
  background: linear-gradient(135deg, var(--fill-teal), var(--fill-blue));
  color: var(--on-fill);
  box-shadow: var(--bn-glow);
}
.brand-name span { color: var(--bn-accent-text); }

/* چیپ‌های آمار (جم، جون، استریک) */
.stat-chip {
  background: var(--bn-surface); border: 1px solid var(--bn-line);
  box-shadow: none; border-radius: 999px;
}
.stat-chip.streak { color: var(--bn-gold-text); }
.stat-chip.gem { color: var(--bn-accent-text); }
.stat-chip.heart { color: var(--bn-danger); }
.stat-tooltip {
  background: var(--bn-surface); color: var(--text-hi);
  border: 1px solid var(--bn-line); border-radius: 18px;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: var(--bn-shadow-lift);
}
.stat-tooltip::before { border-bottom-color: var(--bn-surface); }
.avatar-btn { box-shadow: 0 0 0 2px var(--bn-line-strong); }
.topbar-support-btn { background: var(--bn-surface) !important; border: 1px solid var(--bn-line) !important; box-shadow: none; }

/* ---------- دکمه‌ها: قرصی، با لایه‌ی رنگی که موقعِ هاور از پایین بالا میاد ---------- */
.btn {
  font-weight: 800;
  transition: transform .5s var(--bn-spring), color .35s var(--bn-smooth), box-shadow .35s var(--bn-smooth),
              background-size .55s var(--bn-smooth), border-color .25s, filter .2s;
}
.btn:active:not(:disabled) { transform: scale(.96); transition: transform .12s var(--bn-out); }
.btn-primary {
  color: var(--bn-ink-fg);
  background: linear-gradient(0deg, var(--fill-teal), #74ffdf) center bottom / 100% 0% no-repeat, var(--bn-ink);
  box-shadow: var(--bn-shadow-soft);
}
.btn-primary:active:not(:disabled) { box-shadow: var(--bn-shadow-soft); transform: scale(.96); }
.btn-secondary, .btn-ghost {
  color: var(--text-hi);
  background: linear-gradient(0deg, var(--fill-teal), #74ffdf) center bottom / 100% 0% no-repeat, var(--bn-surface);
  border: 1px solid var(--bn-line-strong);
  box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.btn-gold {
  color: #3a2700;
  background: linear-gradient(0deg, #ffe08a, #ffe08a) center bottom / 100% 0% no-repeat, linear-gradient(135deg, var(--fill-gold), #e8a91f);
  box-shadow: var(--bn-glow-gold);
}
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover:not(:disabled), .btn-secondary:hover:not(:disabled), .btn-ghost:hover:not(:disabled) {
    background-size: 100% 100%, auto; color: var(--on-fill); filter: none; border-color: transparent; box-shadow: var(--bn-glow);
  }
  .btn-gold:hover:not(:disabled) { background-size: 100% 100%, auto; filter: none; }
}
.btn:focus-visible { background-size: 100% 100%, auto; color: var(--on-fill); }
.btn:disabled { opacity: .45; filter: grayscale(.4); }
@keyframes ctaPulse {
  0%, 100% { box-shadow: var(--bn-shadow-soft), 0 0 0 0 rgba(43, 255, 198, 0); }
  50% { box-shadow: var(--bn-glow), 0 0 0 6px rgba(43, 255, 198, 0.18); }
}
/* نورِ لمسِ قبلی روی دکمه‌های تیره/روشن نرم‌تر */
.btn::after { background: radial-gradient(130px circle at var(--lg-x,50%) var(--lg-y,50%), rgba(43, 255, 198, 0.28), transparent 62%); }

/* ---------- کارت‌ها: گردِ بزرگ، سطحِ ساده، سایه‌ی نرم ---------- */
.feature-card, .price-card, .sidebar, .lesson-instructions, .teach-card, .daily-strip, .support-entry {
  background: var(--bg-card);
  border: 1px solid var(--bn-line);
  border-radius: var(--bn-radius-lg);
  box-shadow: var(--bn-shadow-soft);
}
.teach-card, .sidebar, .lesson-instructions { background: var(--bg-panel); }
.price-card.featured {
  background: var(--bg-card);
  border: 1.5px solid var(--fill-teal);
  box-shadow: var(--bn-glow), var(--bn-shadow-soft);
}
.price-badge, .node-premium-badge { background: var(--fill-teal); color: var(--on-fill); }
.feature-card:nth-child(1) .feature-ic { color: var(--bn-accent-text); }
.feature-card:nth-child(2) .feature-ic { color: var(--bn-pink-text); }
.feature-card:nth-child(3) .feature-ic { color: var(--bn-gold-text); }
div[style*="background:var(--bg-panel)"], div[style*="background: var(--bg-panel)"],
div[style*="background:var(--bg-card)"], div[style*="background: var(--bg-card)"] {
  box-shadow: var(--bn-shadow-soft);
}
.teach-speech { background: var(--bg-panel-raised); border-radius: var(--bn-radius-md); border-top-right-radius: 6px; box-shadow: none; }
.teach-mascot { background: linear-gradient(135deg, var(--fill-pink), var(--fill-blue)); }
.modal-reward-chip { background: var(--bn-surface-2); border-color: var(--bn-line); }

/* چیپ‌ها و نشان‌ها */
.hero-eyebrow, .world-badge, .li-badge {
  background-image: none; box-shadow: none; border-radius: 999px;
}
.world-badge { background-color: var(--bn-surface-2); border-color: var(--bn-line); }

/* ---------- نوارهای پیشرفت ---------- */
.xp-track, .lesson-progress { background: var(--bn-surface-2); border-color: var(--bn-line); box-shadow: none; }
.xp-fill { background: linear-gradient(90deg, var(--fill-teal), var(--fill-blue)); box-shadow: 0 0 12px rgba(43, 255, 198, 0.3); }
.lesson-progress-fill { background: linear-gradient(90deg, var(--fill-pink), var(--fill-teal)); box-shadow: 0 0 12px rgba(43, 255, 198, 0.25); }

/* ---------- نقشه ---------- */
.node.done .node-circle {
  background: linear-gradient(135deg, var(--fill-teal), #18c99f);
  border-color: var(--fill-teal); color: #052a21;
  box-shadow: 0 0 0 6px rgba(43, 255, 198, 0.14), var(--bn-glow);
}
.node.current .node-circle {
  background: linear-gradient(135deg, var(--fill-pink), #c92fae);
  border-color: var(--fill-pink); color: #3a0030;
  box-shadow: 0 0 0 8px rgba(255, 79, 216, 0.16), var(--bn-glow-pink);
}
@keyframes pulse-node {
  0%, 100% { box-shadow: 0 0 0 8px rgba(255, 79, 216, 0.16), var(--bn-glow-pink); }
  50% { box-shadow: 0 0 0 15px rgba(255, 79, 216, 0.05), var(--bn-glow-pink); }
}
.node.locked .node-circle, .node.premium-locked .node-circle {
  background: var(--bn-surface-2); border-color: var(--bn-line-strong);
  color: var(--bn-fg-soft); box-shadow: var(--bn-shadow-soft);
}
.node.boss .node-circle { box-shadow: 0 0 0 8px rgba(255, 201, 74, 0.16), var(--bn-glow-gold); }
.node.boss.done .node-circle, .node.boss.current .node-circle { border-color: var(--fill-gold); }
.node-label .t { color: var(--text-hi); }
.sb-world-item.active { background: var(--bn-surface-2); border-color: var(--bn-line-strong); box-shadow: none; }

/* ---------- درس ---------- */
.lesson-close { background: var(--bn-surface); border: 1px solid var(--bn-line); box-shadow: var(--bn-shadow-soft); }
.stage-badge { border-radius: 999px; background: var(--bn-surface); border-color: var(--bn-line); }
.stage-badge.active { color: var(--bn-accent-text); border-color: var(--fill-teal); background: rgba(43, 255, 198, 0.1); box-shadow: 0 0 0 4px rgba(43, 255, 198, 0.1); }
.stage-badge.active .num { background: var(--fill-teal); color: #052a21; }
.stage-badge.done .num { background: var(--bn-accent-text); color: var(--bn-bg); }
.click-build-area, .dd-target-row { background: var(--bn-surface-2); border-color: var(--bn-line); border-radius: var(--bn-radius-md); }
.tap-btn, .dd-piece {
  background: var(--bn-surface); border: 1px solid var(--bn-line-strong);
  border-radius: 18px; box-shadow: var(--bn-shadow-soft); color: var(--text-hi);
}
.tap-btn.done { border-color: var(--fill-teal); background: rgba(43, 255, 198, 0.12); color: var(--bn-accent-text); box-shadow: 0 0 0 4px rgba(43, 255, 198, 0.12); }
.dd-piece { border-color: rgba(255, 79, 216, 0.35); }
.dd-slot { border-color: var(--bn-line-strong); }
/* داخلِ ادیتورِ تیره، دکمه‌ی اجرا همیشه نئونِ روشنه (دکمه‌ی تیره روی زمینه‌ی تیره دیده نمی‌شد) */
.editor-pane .btn-primary, .run-row .btn-primary, .js-console .btn-primary {
  color: var(--on-fill);
  background: linear-gradient(0deg, #ffffff, #ffffff) center bottom / 100% 0% no-repeat, linear-gradient(135deg, var(--fill-teal), #18c99f);
  box-shadow: 0 8px 22px -8px rgba(43, 255, 198, 0.55);
}
/* رنگِ درست/غلط رو خودِ آزمون inline می‌ده؛ اینجا فقط سایه (بدونِ !important) */
.exam-opt { box-shadow: var(--bn-shadow-soft); }

/* ---------- ورودی‌ها ---------- */
.phone-input:not(.error), .code-input:not(.error), .screen .sup-input, .screen .sup-textarea, #coupon-input {
  background: var(--bn-surface-2) !important;
  border: 1px solid var(--bn-line-strong) !important;
  color: var(--text-hi) !important;
  border-radius: 18px;
  box-shadow: none;
}
.phone-input:not(.error):focus, .code-input:not(.error):focus, .screen .sup-input:focus, .screen .sup-textarea:focus, #coupon-input:focus {
  border-color: var(--fill-teal) !important; box-shadow: 0 0 0 4px rgba(43, 255, 198, 0.16) !important; outline: none;
}

/* ---------- ورود ---------- */
.auth-card {
  background: var(--bn-surface);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid var(--bn-line);
  border-radius: var(--bn-radius-xl);
  box-shadow: var(--bn-shadow-lift);
}

/* ---------- قیمت ---------- */
.screen .plan-option { border-radius: var(--bn-radius-md) !important; box-shadow: var(--bn-shadow-soft); }
.screen .plan-option.selected { box-shadow: 0 0 0 4px rgba(43, 255, 198, 0.14), var(--bn-glow); }

/* ---------- پشتیبانی ---------- */
.screen .sup-card, .screen .sup-dept-opt { background: var(--bg-card); border-radius: var(--bn-radius-md); box-shadow: var(--bn-shadow-soft); }
.screen .sup-msg { box-shadow: none; }

/* ---------- مودال و نوتیف ---------- */
.modal-backdrop {
  background: rgba(11, 8, 21, 0.45);
  -webkit-backdrop-filter: blur(12px) saturate(130%); backdrop-filter: blur(12px) saturate(130%);
}
.modal-card {
  background: var(--bn-surface);
  border: 1px solid var(--bn-line);
  border-radius: var(--bn-radius-xl);
  box-shadow: var(--bn-shadow-lift);
  transform: translateY(24px) scale(.96);
  filter: blur(6px);
  transition: transform .6s var(--bn-spring), filter .45s var(--bn-smooth);
}
.modal-backdrop.show .modal-card { transform: none; filter: none; }
.app-toast {
  background: var(--bn-glass); color: var(--text-hi);
  -webkit-backdrop-filter: var(--bn-blur); backdrop-filter: var(--bn-blur);
  border: 1px solid var(--bn-glass-line); border-radius: 999px;
  box-shadow: var(--bn-shadow-lift);
}
.app-toast.ok { border-color: rgba(43, 255, 198, 0.55); }
.app-toast.err { border-color: rgba(255, 92, 122, 0.55); }

/* ---------- تب‌بارِ پایین: کپسولِ شیشه‌ای ---------- */
.bottom-nav {
  background: var(--bn-glass);
  -webkit-backdrop-filter: var(--bn-blur); backdrop-filter: var(--bn-blur);
  border: 1px solid var(--bn-glass-line);
  box-shadow: var(--bn-shadow-lift);
}
.bnav-item { color: var(--text-low); }
.bnav-item.active { color: var(--bn-accent-text); }
.bnav-item::before {
  background: rgba(43, 255, 198, 0.14);
  box-shadow: 0 0 0 1px rgba(43, 255, 198, 0.22);
}
.bnav-plus .bn-badge { box-shadow: var(--bn-glow-gold), 0 0 0 4px var(--bn-bg); }
.bnav-plus.is-premium .bn-badge { box-shadow: var(--bn-glow), 0 0 0 4px var(--bn-bg); }
.support-fab { background: linear-gradient(135deg, var(--fill-teal), #16d2a3); color: var(--on-fill); box-shadow: var(--bn-glow); }
.support-fab .fab-label { background: var(--bn-surface); color: var(--text-hi); border-color: var(--bn-line); box-shadow: var(--bn-shadow-soft); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* کارتِ برنامه‌نویس یه «عکسِ قابلِ اشتراک»‌ه (مثلِ خروجیِ دانلودش) → در هر دو تم تیره می‌مونه */
#coder-card {
  --bg-void: #0B0815; --bg-deep: #140F26; --bg-panel: #1B1535; --bg-panel-raised: #221B42; --bg-card: #1E1838; --bg-plum: #2A1B3F;
  --border-soft: rgba(255,255,255,0.08); --border-mid: rgba(255,255,255,0.14);
  --tint-1: rgba(255,255,255,0.05); --tint-2: rgba(255,255,255,0.08);
  --neon-teal: #2BFFC6; --neon-pink: #FF4FD8; --gold: #FFC94A; --blue-soft: #6C8CFF;
  --text-hi: #F5F3FF; --text-mid: #B8B0D9; --text-low: #756C99;
  color: var(--text-hi);
}

/* دکمه‌ی تم کنارِ آمارِ بالای اپ */
.topbar-stats .bn-theme-toggle { width: 38px; height: 38px; }
@media (max-width: 600px) { .topbar-stats .bn-theme-toggle { width: 34px; height: 34px; } .topbar-stats .bn-theme-toggle svg { width: 16px; height: 16px; } }

/* =====================================================================
   تجربه‌ی نسخه‌ی ۲ (رفتارها در /assets/ui/ux.js)
   ===================================================================== */

/* نوارِ بالای اپ: با اسکرول به پایین مخفی، با اسکرول به بالا برمی‌گرده */
.screen > .topbar { transition: transform .6s var(--bn-spring); }
.screen > .topbar.bn-nav-away { transform: translateY(-130%); }

/* ورودِ صفحه‌ها: از تاری و پایین (به‌جای فقط محوشدن) */
@keyframes lgRise { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } }

/* نشانگرِ فعالِ فنری (مثلِ layoutId) */
.bn-ind {
  position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none; opacity: 0;
  border-radius: 999px; background: var(--bn-surface); box-shadow: var(--bn-shadow-soft);
  transition: transform .55s var(--bn-spring), width .55s var(--bn-spring), height .55s var(--bn-spring), opacity .25s;
}
.v2-links .bn-ind { background: var(--bn-surface); border: 1px solid var(--bn-line); }
.v2-filter .bn-ind { background: var(--bn-ink); box-shadow: var(--bn-shadow-soft); }
.v2-tabs .bn-ind { background: #2BFFC6; box-shadow: 0 10px 26px -10px rgba(43, 255, 198, .7); }
.bottom-nav .bn-ind { background: rgba(43, 255, 198, 0.16); box-shadow: 0 0 0 1px rgba(43, 255, 198, 0.24); border-radius: 22px; }
.bottom-nav .bnav-item::before { display: none; }
.bottom-nav .bnav-item { position: relative; z-index: 1; }

/* تیترِ کلمه‌به‌کلمه از پشتِ ماسک + خطِ منحنی */
.bn-words .bn-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .2em 0; margin: -.2em 0; }
.bn-words .bn-wi { display: inline-block; transform: translateY(115%) rotate(4deg); transform-origin: bottom right; transition: transform .95s var(--bn-spring); transition-delay: calc(var(--i, 0) * 70ms + 60ms); }
.bn-words.is-in .bn-wi { transform: none; }
.bn-wu { position: relative; display: inline-block; }
.bn-ul { position: absolute; left: -4%; width: 108%; bottom: -.46em; height: .4em; overflow: visible; pointer-events: none; }
.bn-ul path { fill: none; stroke: currentColor; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--bn-smooth); transition-delay: calc(var(--n, 4) * 70ms + 250ms); }
.bn-words.is-in .bn-ul path { stroke-dashoffset: 0; }

/* پاپ‌آپِ مشترک: کارتِ وسط روی دسکتاپ، باتم‌شیت روی موبایل */
.bn-dlg { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: 24px; }
.bn-dlg-top { align-items: flex-start; padding-top: 12vh; }
.bn-dlg-bd { position: absolute; inset: 0; background: rgba(11, 8, 21, .45); -webkit-backdrop-filter: blur(12px) saturate(130%); backdrop-filter: blur(12px) saturate(130%); opacity: 0; transition: opacity .35s var(--bn-smooth); }
.bn-dlg-panel {
  position: relative; width: 100%; max-width: 560px; max-height: 80vh; display: flex; flex-direction: column; outline: none; color: var(--text-hi);
  background: var(--bn-surface); border: 1px solid var(--bn-line); border-radius: 36px; box-shadow: var(--bn-shadow-lift);
  opacity: 0; transform: translateY(24px) scale(.96); filter: blur(8px);
  transition: opacity .4s var(--bn-smooth), transform .6s var(--bn-spring), filter .4s var(--bn-smooth);
}
.bn-dlg.is-open .bn-dlg-bd { opacity: 1; }
.bn-dlg.is-open .bn-dlg-panel { opacity: 1; transform: none; filter: none; }
.bn-dlg-grab { display: none; padding: 12px 0 0; justify-content: center; touch-action: none; }
.bn-dlg-grab span { width: 48px; height: 6px; border-radius: 99px; background: var(--bn-line-strong); }
.bn-dlg-head { display: flex; align-items: flex-start; gap: 12px; padding: 26px 28px 8px; }
.bn-dlg-head > div { flex: 1; min-width: 0; }
.bn-dlg-title { font-size: 19px; font-weight: 900; line-height: 1.7; margin: 0; }
.bn-dlg-desc { font-size: 13.5px; color: var(--text-mid); margin: 2px 0 0; }
.bn-dlg-x { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--bn-surface-2); color: var(--text-mid); cursor: pointer; transition: transform .5s var(--bn-spring), color .2s; }
.bn-dlg-x:hover { color: var(--text-hi); }
.bn-dlg-x:active { transform: scale(.88); }
.bn-dlg-x svg { width: 20px; height: 20px; }
.bn-dlg-body { overflow-y: auto; overscroll-behavior: contain; padding: 12px 28px 28px; }
@media (max-width: 640px) {
  .bn-dlg, .bn-dlg-top { align-items: flex-end; padding: 0; }
  .bn-dlg-panel { max-width: none; max-height: 88dvh; border-radius: 36px 36px 0 0; padding-bottom: env(safe-area-inset-bottom); transform: translateY(100%); filter: none; opacity: 1; transition: transform .55s cubic-bezier(.32, .72, 0, 1); }
  .bn-dlg-grab { display: flex; }
  .bn-dlg-head { padding: 12px 22px 6px; touch-action: none; }
  .bn-dlg-body { padding: 10px 22px 24px; }
}

/* مودال‌های فعلیِ اپ روی موبایل = باتم‌شیت */
@media (max-width: 480px) {
  .modal-backdrop { align-items: flex-end; padding: 0; }
  .modal-card { width: 100%; max-width: none; margin: auto 0 0; border-radius: 36px 36px 0 0; padding: 30px 22px calc(26px + env(safe-area-inset-bottom)); transform: translateY(100%); filter: none; transition: transform .55s cubic-bezier(.32, .72, 0, 1); }
  .modal-card::before { content: ""; display: block; width: 48px; height: 6px; margin: -14px auto 16px; border-radius: 99px; background: var(--bn-line-strong); }
  .modal-backdrop.show .modal-card { transform: none; }
}

/* جستجو */
.bn-search-field { position: relative; }
.bn-search-field svg { position: absolute; right: 16px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--text-low); pointer-events: none; }
.bn-search-field input { width: 100%; height: 56px; padding: 0 48px 0 16px; font: inherit; font-size: 15px; color: var(--text-hi); background: var(--bn-surface-2); border: 1px solid var(--bn-line-strong); border-radius: 18px; outline: none; transition: border-color .2s, box-shadow .3s; }
.bn-search-field input:focus { border-color: var(--fill-teal); box-shadow: 0 0 0 4px rgba(43, 255, 198, .16); }
.bn-sr { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 2px; }
.bn-sr li[data-i] { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 18px; cursor: pointer; transition: background-color .25s var(--bn-smooth), box-shadow .25s; }
.bn-sr li[aria-selected="true"] { background: rgba(43, 255, 198, .12); box-shadow: inset 0 0 0 1px rgba(43, 255, 198, .25); }
.bn-sr .ic { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: 14px; background: var(--bn-surface-2); font-size: 18px; }
.bn-sr .tx { flex: 1; min-width: 0; }
.bn-sr b { display: block; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bn-sr small { display: block; font-size: 12px; color: var(--text-mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bn-tag { font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: var(--bn-surface-2); color: var(--text-low); flex-shrink: 0; }
.bn-tag.free { background: rgba(43, 255, 198, .15); color: var(--bn-accent-text); }
.bn-sr-empty { padding: 36px 0; text-align: center; color: var(--text-mid); font-size: 14px; }
.topbar-stats .bn-search-btn { width: 38px; height: 38px; }
@media (max-width: 600px) { .topbar-stats .bn-search-btn { display: none; } }

/* جزئیاتِ ایستگاه */
.bn-lesson-hero { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 28px; background: linear-gradient(to left, rgba(43, 255, 198, .16), rgba(43, 255, 198, .03)); }
.bn-lesson-hero > span { width: 56px; height: 56px; flex-shrink: 0; display: grid; place-items: center; font-size: 28px; border-radius: 18px; background: var(--bn-surface); box-shadow: var(--bn-shadow-soft); }
.bn-lesson-hero b { display: block; font-size: 14px; }
.bn-lesson-hero small { color: var(--text-mid); font-size: 13px; }
.bn-lesson-p { color: var(--text-mid); line-height: 2; font-size: 14.5px; margin: 18px 0 20px; }
.bn-lesson-cta { display: grid; gap: 10px; }

/* منوی کشویی (از راست) */
.bn-drawer { position: fixed; inset: 0; z-index: 400; }
.bn-drawer-bd { position: absolute; inset: 0; background: rgba(11, 8, 21, .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .35s; }
.bn-drawer-panel {
  position: absolute; top: 0; bottom: 0; right: 0; width: min(86vw, 360px); display: flex; flex-direction: column; padding: 22px;
  background: var(--bn-surface); color: var(--text-hi); border-left: 1px solid var(--bn-line); border-radius: 36px 0 0 36px; box-shadow: var(--bn-shadow-lift);
  transform: translateX(100%); transition: transform .6s cubic-bezier(.32, .72, 0, 1);
}
.bn-drawer.is-open .bn-drawer-bd { opacity: 1; }
.bn-drawer.is-open .bn-drawer-panel { transform: none; }
.bn-drawer-head { display: flex; align-items: center; justify-content: space-between; }
.bn-drawer-links { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 2px; }
.bn-drawer-links a { display: block; padding: 14px 16px; border-radius: 20px; font-size: 18px; font-weight: 800; }
.bn-drawer-links a:active { background: var(--bn-surface-2); }
.bn-drawer-links li { opacity: 0; transform: translateX(36px); filter: blur(6px); transition: opacity .5s var(--bn-smooth), transform .7s var(--bn-spring), filter .5s; transition-delay: calc(var(--i, 0) * 50ms + 80ms); }
.bn-drawer.is-open .bn-drawer-links li { opacity: 1; transform: none; filter: none; }
.bn-drawer-foot { margin-top: auto; display: grid; gap: 12px; }
.bn-drawer-theme { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; border-radius: 20px; background: var(--bn-surface-2); color: var(--text-mid); font-weight: 700; font-size: 14px; }

/* نوتیف‌ها پایینِ صفحه (بالای تب‌بار) */
.app-toast { top: auto; bottom: calc(22px + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(24px) scale(.94); }
.app-toast.show { transform: translateX(-50%) translateY(0) scale(1); }
body.has-bottom-nav .app-toast { bottom: calc(100px + env(safe-area-inset-bottom)); }

/* ایستگاهی که از جستجو پیدا شد */
.node.bn-spot .node-circle { animation: bnSpot 1.2s var(--bn-smooth) 2; }
@keyframes bnSpot { 0%, 100% { box-shadow: 0 0 0 0 rgba(43, 255, 198, 0); } 50% { box-shadow: 0 0 0 14px rgba(43, 255, 198, .35); } }

@media (prefers-reduced-motion: reduce) {
  .bn-words .bn-wi { transform: none !important; transition: none !important; }
  .bn-ul path { stroke-dashoffset: 0 !important; transition: none !important; }
  .bn-dlg-panel, .bn-drawer-panel, .bn-drawer-links li, .bn-ind, .screen > .topbar { transition: none !important; }
  .bn-drawer-links li { opacity: 1; transform: none; filter: none; }
}
.sb-world-item.bn-spot-world { animation: bnSpot 1.2s var(--bn-smooth) 2; border-radius: 18px; }

/* ---------- ورود/ثبت‌نام — نسخه‌ی ۲ ---------- */
.screen[data-screen="auth"] .auth-shell { flex-direction: column; gap: 14px; padding: 20px 0 40px; }
.bn-auth-top {
  width: 100%; max-width: 420px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  animation: lgRise .5s var(--bn-smooth) backwards;
}
.bn-auth-back {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px 0 16px;
  border-radius: 999px; border: 1px solid var(--bn-line); background: var(--bn-surface);
  color: var(--bn-fg); font: 700 13px/1 var(--font-fa, 'Vazirmatn'), sans-serif; cursor: pointer;
  box-shadow: var(--bn-shadow-soft);
  transition: transform .35s var(--bn-spring), border-color .2s, background-color .2s;
}
.bn-auth-back:hover { border-color: var(--bn-line-strong); transform: translateX(3px); }
.bn-auth-back:active { transform: scale(.94); transition-duration: .12s; }
.bn-auth-back:focus-visible { outline: 2px solid var(--fill-teal); outline-offset: 3px; }
.bn-auth-slot { display: inline-flex; }
.screen[data-screen="auth"] #auth-title { font-size: clamp(22px, 5.6vw, 27px); font-weight: 800; letter-spacing: -.01em; }
.bn-auth-perks { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: -6px 0 22px; }
.bn-auth-perks span {
  font-size: 11.5px; font-weight: 700; color: var(--bn-fg-muted); white-space: nowrap;
  padding: 6px 11px; border-radius: 999px; background: var(--tint-1); border: 1px solid var(--bn-line);
  animation: lgRise .6s var(--bn-smooth) backwards;
}
.bn-auth-perks span:nth-child(2) { animation-delay: .06s; }
.bn-auth-perks span:nth-child(3) { animation-delay: .12s; }
#auth-sub[style*="none"] + .bn-auth-perks { display: none; }
.screen[data-screen="auth"] .phone-input { direction: ltr; text-align: center; font-size: 18px; font-weight: 700; letter-spacing: 1px; height: 58px; border-radius: 18px; }
.screen[data-screen="auth"] #otp-input { font-family: var(--font-code, 'JetBrains Mono'), monospace; font-size: 26px; letter-spacing: 14px; text-indent: 14px; }
.screen[data-screen="auth"] .btn-lg { height: 56px; }
.screen[data-screen="auth"] .auth-note { border-radius: 18px; }
@media (max-width: 480px) {
  .screen[data-screen="auth"] .auth-shell { justify-content: flex-start; padding-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .bn-auth-top, .bn-auth-perks span { animation: none; }
}
/* دکمه‌ی در حالِ بارگذاری: خاکستری نشه و چرخنده روی رنگِ دکمه دیده بشه */
.btn .auth-loading-spinner { border-color: rgba(127, 127, 127, 0.35); border-top-color: currentColor; }
.btn:disabled:has(.auth-loading-spinner) { opacity: .9; filter: none; cursor: progress; }

/* ---------- یادآورِ شناورِ تخفیف (به‌جای انتقالِ اجباری به صفحه‌ی قیمت) ---------- */
.recovery-pill {
  position: fixed; right: 18px; bottom: 24px; z-index: 79;
  display: inline-flex; align-items: center; gap: 10px; max-width: calc(100vw - 110px);
  padding: 8px 12px 8px 14px; border-radius: 999px; cursor: pointer;
  background: #14111f; color: #fff; border: 1px solid rgba(255, 201, 74, .35);
  box-shadow: 0 12px 30px rgba(11, 8, 21, .28), 0 0 0 4px rgba(255, 201, 74, .12);
  font-family: inherit; text-align: right;
  opacity: 0; transform: translateY(18px) scale(.92); pointer-events: none;
  transition: opacity .35s var(--bn-smooth), transform .55s var(--bn-spring);
}
.recovery-pill.is-on { opacity: 1; transform: none; pointer-events: auto; }
.recovery-pill:active { transform: scale(.95); transition-duration: .12s; }
.recovery-pill .rp-ic { font-size: 20px; animation: rpWiggle 2.8s ease-in-out infinite; }
.recovery-pill .rp-txt { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.recovery-pill b { font-size: 12.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recovery-pill small { font-size: 11px; color: #ffc94a; font-weight: 700; font-variant-numeric: tabular-nums; }
.recovery-pill .rp-go { font-size: 20px; opacity: .7; }
body.has-bottom-nav .recovery-pill { bottom: calc(96px + env(safe-area-inset-bottom)); }
@keyframes rpWiggle { 0%, 80%, 100% { transform: none; } 85% { transform: rotate(-12deg) scale(1.1); } 90% { transform: rotate(10deg) scale(1.1); } 95% { transform: rotate(-6deg); } }
@media (prefers-reduced-motion: reduce) { .recovery-pill, .recovery-pill .rp-ic { animation: none; transition: opacity .2s; } }

/* ---------- اسپلشِ بوت (کاربرِ واردشده، تا app.js صفحه‌ش رو بیاره) ---------- */
.boot-splash { min-height: 100vh; min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: 22px; }
.boot-mark {
  width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--fill-teal), var(--fill-blue)); color: #0b0815;
  font: 800 22px/1 'JetBrains Mono', monospace; box-shadow: 0 0 40px rgba(43, 255, 198, .35);
  animation: bootPulse 1.4s var(--bn-smooth, ease) infinite;
}
.boot-bar { width: 120px; height: 4px; border-radius: 99px; background: var(--tint-2, rgba(127,127,127,.2)); overflow: hidden; }
.boot-bar i { display: block; width: 40%; height: 100%; border-radius: inherit; background: var(--fill-teal); animation: bootSlide 1.1s ease-in-out infinite; }
@keyframes bootPulse { 50% { transform: scale(.92); box-shadow: 0 0 18px rgba(43, 255, 198, .2); } }
@keyframes bootSlide { from { transform: translateX(160%); } to { transform: translateX(-260%); } }
@media (prefers-reduced-motion: reduce) { .boot-mark, .boot-bar i { animation: none; } }

/* =====================================================================
   حسِ بازی (game-fx.js): پرش، لرزش، جاافتادن، درخشش، بنرِ مرحله
   ===================================================================== */
.bn-sfx-toggle.is-muted { opacity: .6; }
@media (max-width: 620px) { .v2-nav .bn-sfx-toggle { display: none; } }

@keyframes bnPop { 0% { transform: scale(1); } 35% { transform: scale(1.14); } 65% { transform: scale(.96); } 100% { transform: scale(1); } }
.bn-pop { animation: bnPop .5s cubic-bezier(.34, 1.56, .64, 1); }

@keyframes bnLitPop { 0% { transform: translateY(0) scale(1); filter: brightness(1); } 40% { transform: translateY(-3px) scale(1.12); filter: brightness(1.5); } 100% { transform: none; filter: none; } }
.bn-lit-pop { display: inline-block; animation: bnLitPop .6s cubic-bezier(.34, 1.56, .64, 1); }

@keyframes bnShake { 0%, 100% { transform: translateX(0); } 15% { transform: translateX(-9px); } 30% { transform: translateX(8px); } 45% { transform: translateX(-6px); } 60% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
.bn-shake { animation: bnShake .45s cubic-bezier(.36, .07, .19, .97); }
.bn-shake.run-status, .run-status.err { color: var(--danger, #ff5c7a); }

@keyframes bnSnap { 0% { transform: scale(.82); box-shadow: 0 0 0 0 rgba(43, 255, 198, .7); } 50% { transform: scale(1.1); } 100% { transform: scale(1); box-shadow: 0 0 0 14px rgba(43, 255, 198, 0); } }
.bn-snap { animation: bnSnap .6s cubic-bezier(.34, 1.56, .64, 1); }

@keyframes bnGlowPulse { 0% { filter: brightness(1); box-shadow: 0 0 0 rgba(43, 255, 198, 0); } 40% { filter: brightness(1.6); box-shadow: 0 0 22px rgba(43, 255, 198, .8); } 100% { filter: brightness(1); } }
.bn-glow-pulse { animation: bnGlowPulse .9s ease-out; }
.lesson-progress-fill { transition: width .8s cubic-bezier(.34, 1.56, .64, 1); }

.bn-stage-banner {
  position: fixed; top: 18px; left: 50%; z-index: 10002; pointer-events: none;
  padding: 12px 22px; border-radius: 999px; font-weight: 900; font-size: 15px; white-space: nowrap;
  color: #052a21; background: linear-gradient(135deg, #2BFFC6, #7dfbe0);
  box-shadow: 0 16px 40px rgba(43, 255, 198, .45), 0 0 0 4px rgba(43, 255, 198, .18);
  transform: translate(-50%, -140%) scale(.9); opacity: 0;
  transition: transform .55s cubic-bezier(.34, 1.56, .64, 1), opacity .3s;
}
.bn-stage-banner.is-on { transform: translate(-50%, 0) scale(1); opacity: 1; }
@media (max-width: 480px) { .bn-stage-banner { font-size: 13.5px; padding: 10px 18px; top: 12px; } }

/* پاداش‌های پنجره‌ی موفقیت: ورودِ فنری */
#success-modal.show .modal-reward-chip { animation: bnPop .6s cubic-bezier(.34, 1.56, .64, 1) backwards; }
#success-modal.show .modal-reward-chip:nth-child(2) { animation-delay: .15s; }

/* دکمه‌های تپی و تیکه‌های کشیدنی: حسِ لمسیِ فنری */
.tap-btn, [data-piece] { transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s, opacity .2s; }
.tap-btn:not(:disabled):active, [data-piece]:active { transform: scale(.93); }
@media (hover: hover) { .tap-btn:not(:disabled):hover, [data-piece]:not(.placed):hover { transform: translateY(-2px); } }
[data-accept].over { transform: scale(1.04); box-shadow: 0 0 0 3px rgba(43, 255, 198, .45); transition: transform .2s, box-shadow .2s; }

@media (prefers-reduced-motion: reduce) {
  .bn-pop, .bn-lit-pop, .bn-shake, .bn-snap, .bn-glow-pulse, #success-modal.show .modal-reward-chip { animation: none !important; }
  .bn-stage-banner { transition: opacity .2s; }
}
.lesson-top .bn-sfx-lesson { flex: none; width: 38px; height: 38px; }
.fx-xp.fx-combo { background: linear-gradient(135deg, #ff9a3c, #ff4fd8); color: #fff; box-shadow: 0 10px 24px rgba(255, 79, 216, .45); }

/* =========================================================
   دنیای ۵ — پروژه‌ی مینی‌سایت (site-project.js)
   ادیتور و کد همیشه تیره می‌مونن (مثل بقیه‌ی ادیتورها)؛ بقیه با توکن‌ها روشن/تیره می‌شن.
   ========================================================= */
.bn-pj { overflow: hidden; }

/* نوارِ مراحلِ ساختِ سایت */
.bn-pj-strip { display: flex; align-items: center; gap: 0; list-style: none; margin: 0 0 20px; padding: 0; direction: rtl; }
.bn-pj-strip li { flex: 1; display: flex; align-items: center; min-width: 0; }
.bn-pj-strip li::after { content: ""; flex: 1; height: 2px; background: var(--bn-line-strong); margin: 0 4px; border-radius: 2px; }
.bn-pj-strip li:last-child { flex: 0 0 auto; }
.bn-pj-strip li:last-child::after { display: none; }
.bn-pj-strip span {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%;
  display: grid; place-items: center; font-size: 11.5px; font-weight: 800;
  background: var(--bn-surface-2); color: var(--bn-fg-soft); border: 1.5px solid var(--bn-line-strong);
}
.bn-pj-strip li.done span { background: var(--fill-teal); color: #052a21; border-color: transparent; }
.bn-pj-strip li.done::after { background: var(--fill-teal); }
.bn-pj-strip li.cur span { background: var(--bn-surface); color: var(--bn-accent-text); border-color: var(--bn-accent-text); box-shadow: 0 0 0 4px rgba(43,255,198,.14); }

/* کد + پیش‌نمایشِ مرحله‌ی ۱ */
.bn-pj-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-bottom: 20px; }
.bn-pj-codebox { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bn-pj-file { background: #1e1e1e; border: 1px solid #101010; border-radius: 12px; overflow: hidden; }
.bn-pj-fname {
  display: inline-flex; align-items: center; gap: 7px; direction: ltr;
  font-family: var(--font-code); font-size: 12px; font-weight: 700; color: #cfcfcf;
  padding: 7px 12px; background: #252526; width: 100%; border-bottom: 1px solid #101010;
}
.bn-pj-fname::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: linear-gradient(135deg,#e37933,#f0a35e); }
.bn-pj-fname.css::before { background: linear-gradient(135deg,#2e7cf6,#63a4ff); }
.bn-pj-fname.js::before { background: linear-gradient(135deg,#e6c200,#ffe45c); }
.bn-pj-code {
  margin: 0; padding: 14px 16px; direction: ltr; text-align: left; overflow-x: auto;
  font-family: var(--font-code); font-size: 13.5px; line-height: 1.8; color: #d4d4d4; white-space: pre;
}
.bn-pj-line { display: inline-block; min-width: 100%; opacity: .16; filter: blur(1.5px); transition: opacity .35s, filter .35s, background .6s; border-radius: 4px; }
.bn-pj-line.lit { opacity: 1; filter: none; animation: bnPjLine .9s ease-out; }
@keyframes bnPjLine { 0% { background: rgba(43,255,198,.28); } 100% { background: transparent; } }
.bn-pj-code .t, .bn-pj-dd .t { color: #569cd6; }
.bn-pj-code .k, .bn-pj-dd .k { color: #9cdcfe; }
.bn-pj-code .s, .bn-pj-dd .s { color: #ce9178; }

/* پنجره‌ی مرورگرِ کوچیک */
.bn-pj-view { min-width: 0; display: flex; flex-direction: column; }
.bn-pj-browser {
  border-radius: 12px; overflow: hidden; background: #fff;
  border: 1px solid var(--bn-line-strong); box-shadow: 0 14px 40px rgba(0,0,0,.28);
  display: flex; flex-direction: column; min-width: 0;
}
.bn-pj-bar, .bn-pj-full-bar {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  background: var(--bn-surface-2); border-bottom: 1px solid var(--bn-line);
}
.bn-pj-dots { display: inline-flex; gap: 5px; flex-shrink: 0; }
.bn-pj-dots i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f56; }
.bn-pj-dots i:nth-child(2) { background: #ffbd2e; }
.bn-pj-dots i:nth-child(3) { background: #27c93f; }
.bn-pj-url {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-code); font-size: 11.5px; color: var(--bn-fg-soft);
  background: var(--bn-surface); border-radius: 999px; padding: 3px 12px; text-align: center;
}
.bn-pj-ic {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--bn-line);
  background: var(--bn-surface); color: var(--bn-fg); font-size: 14px; line-height: 1;
  display: grid; place-items: center; cursor: pointer; transition: transform .15s, border-color .15s;
}
.bn-pj-ic:hover { border-color: var(--bn-accent-text); transform: translateY(-1px); }
.bn-pj-ic:active { transform: scale(.94); }
.bn-pj-ic:focus-visible { outline: 2px solid var(--bn-accent-text); outline-offset: 2px; }
.bn-pj-frame { display: block; width: 100%; height: 280px; border: 0; background: #fff; }
.bn-pj-cap { margin: 10px 0 0; font-size: 12.5px; color: var(--bn-fg-soft); text-align: center; }
.bn-pj-taps .tap-btn { font-size: 15px; padding: 13px 18px; }

/* مرحله‌ی ۲ */
.bn-pj-dd {
  direction: ltr; text-align: left; background: #1e1e1e; border: 1px solid #101010;
  border-radius: 12px; overflow: hidden; margin-bottom: 20px; padding-bottom: 8px;
  transition: box-shadow .4s, border-color .4s;
}
.bn-pj-dd.is-done { border-color: rgba(43,255,198,.55); box-shadow: 0 0 0 4px rgba(43,255,198,.12); }
.bn-pj-dd .bn-pj-fname { margin-bottom: 6px; }
.bn-pj-ddrow { padding: 3px 14px; min-width: 0; }
.bn-pj-ddrow code { font-family: var(--font-code); font-size: 13.5px; color: #d4d4d4; white-space: pre-wrap; word-break: break-word; }
.bn-pj-static code { opacity: .75; }
.bn-pj-slot {
  width: 100%; min-width: 0; height: auto; min-height: 40px; justify-content: flex-start;
  padding: 6px 12px; border-color: #3c3c3c; color: #8a8a8a; text-align: left;
}
.bn-pj-slot .bn-pj-q { font-family: var(--font-fa); opacity: .6; }
.bn-pj-slot.over { border-color: var(--fill-teal); background: rgba(43,255,198,.08); }
.bn-pj-slot.filled { border-color: rgba(43,255,198,.45); background: rgba(43,255,198,.06); }
.bn-pj-slot.bn-pj-hintslot { border-color: var(--fill-pink, #ff4fd8); background: rgba(255,79,216,.08); }
.bn-pj-tray { gap: 10px; }
.bn-pj-piece {
  font-size: 13px; padding: 10px 14px; max-width: 100%;
  white-space: pre-wrap; word-break: break-word; text-align: left; line-height: 1.6;
}

/* مرحله‌ی ۳ */
.bn-pj-skel {
  margin-bottom: 14px; border: 1px solid var(--bn-line); border-radius: 12px;
  background: var(--bn-surface-2); overflow: hidden;
}
.bn-pj-skel summary { cursor: pointer; padding: 11px 14px; font-size: 13px; font-weight: 700; color: var(--bn-fg-muted); list-style: none; }
.bn-pj-skel summary::-webkit-details-marker { display: none; }
.bn-pj-skel summary::after { content: "▾"; float: left; transition: transform .2s; }
.bn-pj-skel[open] summary::after { transform: rotate(180deg); }
.bn-pj-skel-file { padding: 0 14px 12px; }
.bn-pj-skel-file b { display: block; direction: ltr; text-align: left; font-family: var(--font-code); font-size: 11.5px; color: var(--bn-fg-soft); margin-bottom: 4px; }
.bn-pj-skel pre {
  margin: 0; direction: ltr; text-align: left; overflow-x: auto; white-space: pre;
  font-family: var(--font-code); font-size: 12.5px; line-height: 1.75; color: var(--bn-fg-muted);
  background: var(--bn-surface); border-radius: 8px; padding: 10px 12px;
}
.bn-pj-skel .gap { color: var(--bn-pink-text); border-bottom: 2px dotted currentColor; padding: 0 6px; }

.bn-pj-work { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.bn-pj-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; position: sticky; top: 12px; }
.bn-pj-side .bn-pj-frame { height: 360px; }
.bn-pj-editor { min-width: 0; }
.bn-pj-tabs { overflow-x: auto; scrollbar-width: none; }
.bn-pj-tabs::-webkit-scrollbar { display: none; }
.bn-pj-tabs::before { margin-right: 44px !important; }
.bn-pj-tab {
  font: inherit; font-family: var(--font-code); font-size: 12.5px; font-weight: 600; cursor: pointer;
  border-left: 0; border-bottom: 0; white-space: nowrap; flex-shrink: 0; position: relative;
}
.bn-pj-tab:hover:not(.active) { color: #e6e6e6; }
.bn-pj-tab:focus-visible { outline: 2px solid var(--fill-teal); outline-offset: -2px; }
.bn-pj-tab.css::before { background: linear-gradient(135deg,#2e7cf6,#63a4ff); }
.bn-pj-tab.js::before { background: linear-gradient(135deg,#e6c200,#ffe45c); }
.bn-pj-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fill-pink, #ff4fd8); box-shadow: 0 0 8px rgba(255,79,216,.8); }
.bn-pj-area { height: 360px; min-height: 360px; overflow: auto; white-space: pre; overflow-wrap: normal; }
.bn-pj-editor .vscode-gutter { max-height: 360px; }
.bn-pj-console .js-console-body { max-height: 140px; overflow: auto; }
.bn-pj-console .bn-pj-err { color: #f48771; }
.bn-pj-actions { flex-wrap: wrap; margin-top: 18px; }
.bn-pj-actions #bn-pj-reset { margin-inline-end: auto; }
.bn-pj-checker {
  position: fixed; left: -10000px; top: 0; width: 900px; height: 700px;
  border: 0; visibility: hidden; pointer-events: none;
}

/* تمام‌صفحه */
.bn-pj-full {
  position: fixed; inset: 0; z-index: 10050; display: flex; flex-direction: column;
  background: rgba(8, 6, 16, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  opacity: 0; transition: opacity .2s;
}
.bn-pj-full.is-on { opacity: 1; }
.bn-pj-full-bar { border-radius: 14px 14px 0 0; border: 1px solid var(--bn-line-strong); border-bottom: 0; }
.bn-pj-full-actions { display: flex; gap: 6px; flex-shrink: 0; }
.bn-pj-x { font-size: 13px; }
.bn-pj-full-stage {
  flex: 1; min-height: 0; display: flex; justify-content: center; background: #d9d6e6;
  border-radius: 0 0 14px 14px; overflow: hidden; border: 1px solid var(--bn-line-strong); border-top: 0;
}
.bn-pj-full-frame { width: 100%; height: 100%; border: 0; background: #fff; transition: width .3s cubic-bezier(.2,.8,.2,1); }
.bn-pj-full-stage.is-phone { padding: 14px 0; }
.bn-pj-full-stage.is-phone .bn-pj-full-frame { width: 390px; max-width: 100%; border-radius: 22px; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
html.bn-pj-lock, html.bn-pj-lock body { overflow: hidden; }

/* کارتِ «سایتِ من» روی نقشه */
.bn-site-card {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
  margin-top: 14px; padding: 12px 14px; border-radius: 14px;
  background: var(--bn-surface-2); border: 1px solid var(--bn-line-strong);
}
.bn-site-meter { flex: 1 0 100%; height: 6px; border-radius: 99px; background: var(--bn-surface-3); overflow: hidden; }
.bn-site-meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--fill-teal), var(--fill-pink, #ff4fd8)); transition: width .6s; }
.bn-site-txt { font-size: 13px; font-weight: 700; color: var(--bn-fg-muted); flex: 1; min-width: 180px; }
.bn-site-btns { display: flex; gap: 8px; }
.bn-site-btns .btn { padding: 8px 14px; font-size: 12.5px; }

@media (max-width: 900px) {
  .bn-pj-work { grid-template-columns: minmax(0, 1fr); }
  .bn-pj-side { position: static; }
  .bn-pj-side .bn-pj-frame { height: 300px; }
  .bn-pj-area { height: 300px; min-height: 300px; }
  .bn-pj-editor .vscode-gutter { max-height: 300px; }
}
@media (max-width: 720px) {
  .bn-pj-split { grid-template-columns: minmax(0, 1fr); }
  .bn-pj-frame { height: 230px; }
  .bn-pj-code { font-size: 12.5px; padding: 12px; }
  .bn-pj-taps { gap: 8px; }
  .bn-pj-taps .tap-btn { flex: 1 1 calc(50% - 8px); padding: 11px 10px; font-size: 13.5px; }
  .bn-pj-strip span { width: 22px; height: 22px; font-size: 10.5px; }
  .bn-pj-tab { padding: 0 11px; font-size: 12px; }
  .bn-pj-actions .btn { flex: 1 1 auto; }
  .bn-pj-actions #bn-pj-reset { flex: 0 0 auto; }
  .bn-pj-full { padding-inline: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .bn-pj-line, .bn-pj-line.lit { transition: none; animation: none; filter: none; }
  .bn-pj-full, .bn-pj-full-frame { transition: none; }
}
.bn-pj-bar, .bn-pj-full-bar { direction: ltr; }
.bn-pj-code .fa, .bn-pj-dd .fa { font-family: var(--font-fa); unicode-bidi: isolate; direction: rtl; }
.bn-pj .teach-speech { min-width: 0; }
.bn-pj .teach-speech .tag-name { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .bn-pj-tabs::before { display: none; }
  .bn-pj-tab { flex: 1 1 auto; min-width: 0; justify-content: center; padding: 0 8px; gap: 5px; font-size: 11.5px; }
  .bn-pj-tab::before { width: 9px; height: 9px; }
}
/* ادیتورِ پروژه: هر خط چپ‌به‌راست (مثل VS Code) و حروفِ فارسی با وزیرمتن تا چسبیده و خوانا بمونن */
.bn-pj-area { unicode-bidi: normal; direction: ltr; }
.bn-pj-area, .bn-pj-code, .bn-pj-dd code, .bn-pj-piece, .bn-pj-skel pre { font-family: 'JetBrains Mono', 'Vazirmatn', ui-monospace, monospace; }
.bn-pj-dot { flex-shrink: 0; }
.bn-pj-area, .bn-pj-code, .bn-pj-dd code, .bn-pj-piece, .bn-pj-skel pre { font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }
.bn-pj .run-status { font-family: var(--font-fa); }

/* =========================================================
   دوره‌ی پایتون (py-course.js) — کد و ترمینال همیشه تیره‌ان
   ========================================================= */
.bn-py { --py-blue: #4B8BBE; --py-yellow: #FFD43B; --py-bg: #0f1320; --py-panel: #151a2b; --py-line: #232a40; --py-ink: #d7dcf0; --py-dim: #7d86a8; overflow: hidden; }
.bn-py-logo { display: inline-block; width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; vertical-align: -2px;
  background: linear-gradient(135deg, #3776AB 0 50%, #FFD43B 50% 100%); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.25); }
.bn-py-logo.big { width: 44px; height: 44px; border-radius: 12px; }
.bn-py-chip { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 800;
  color: var(--bn-fg-muted); background: var(--bn-surface-2); border: 1px solid var(--bn-line-strong); }
.bn-py-mascot { background: linear-gradient(135deg, #3776AB, #FFD43B) !important; }
.bn-py-sub { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 22px 0 10px; font-size: 14.5px; font-weight: 800; color: var(--bn-fg); }
.bn-py-sub small { font-size: 12px; font-weight: 600; color: var(--bn-fg-soft); }
.bn-py-loading { display: grid; place-items: center; gap: 12px; padding: 60px 20px; text-align: center; color: var(--bn-fg-muted); }
.bn-py-loading i { width: 160px; height: 4px; border-radius: 99px; background: var(--bn-surface-3); overflow: hidden; position: relative; }
.bn-py-loading i::after { content: ""; position: absolute; inset: 0; width: 40%; border-radius: inherit; background: linear-gradient(90deg, #3776AB, #FFD43B); animation: bnPyLoad 1s ease-in-out infinite; }
@keyframes bnPyLoad { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } }

/* کد: رنگ‌ها (مشترک بینِ ادیتور، قدم‌به‌قدم، پازل) */
.bn-py code, .bn-py pre, .bn-pyed-hl, .bn-pyed-ta, .bn-pyed-gutter { font-family: 'JetBrains Mono', 'Vazirmatn', ui-monospace, monospace; font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }
.bn-py .k, .bn-pyed-hl .k { color: #c792ea; font-weight: 600; }
.bn-py .s, .bn-pyed-hl .s { color: #c3e88d; }
.bn-py .fx, .bn-pyed-hl .fx { color: #ffcb6b; }
.bn-py .n, .bn-pyed-hl .n { color: #f78c6c; }
.bn-py .c, .bn-pyed-hl .c { color: #6b7394; font-style: italic; }
.bn-py .b, .bn-pyed-hl .b { color: #82aaff; }
.bn-py .fn, .bn-pyed-hl .fn { color: #ffd43b; }
.bn-py .fa { font-family: 'Vazirmatn', sans-serif; unicode-bidi: isolate; direction: rtl; }

/* کالبدشکافی */
.bn-py-anat-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 18px 12px; border-radius: 16px; background: var(--py-bg); border: 1px solid var(--py-line); }
.bn-py-anat-part { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.bn-py-anat-part code { font-size: 20px; color: var(--py-ink); padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.05); border-bottom: 3px solid var(--c); white-space: pre; }
.bn-py-anat-part span { font-family: var(--font-fa); font-size: 11.5px; font-weight: 700; color: var(--c); text-align: center; max-width: 130px; line-height: 1.6; }
.bn-py-anat-part.p0 { --c: #82aaff; } .bn-py-anat-part.p1 { --c: #ffcb6b; } .bn-py-anat-part.p2 { --c: #c3e88d; } .bn-py-anat-part.p3 { --c: #f78c6c; } .bn-py-anat-part.p4 { --c: #c792ea; }
.bn-py-stdin-note { font-size: 12.5px; color: var(--bn-fg-muted); margin: -2px 0 10px; }
.bn-py-stdin-note code { background: var(--bn-surface-2); padding: 1px 8px; border-radius: 6px; }

/* ---------- اجرای قدم‌به‌قدم ---------- */
.bn-tr { border-radius: 18px; background: var(--py-bg); border: 1px solid var(--py-line); overflow: hidden; box-shadow: 0 18px 50px rgba(0,0,0,.28); }
.bn-tr-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.bn-tr-code { border-left: 1px solid var(--py-line); min-width: 0; display: flex; flex-direction: column; }
.bn-tr-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 14px; background: var(--py-panel); border-bottom: 1px solid var(--py-line); font-size: 11.5px; color: var(--py-dim); }
.bn-py-file { display: inline-flex; align-items: center; gap: 6px; color: var(--py-ink); font-weight: 700; font-family: 'JetBrains Mono', monospace; }
.bn-py-file::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: linear-gradient(135deg, #3776AB 50%, #FFD43B 50%); }
.bn-tr-legend { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-fa); direction: rtl; }
.bn-tr-legend i { width: 9px; height: 9px; border-radius: 3px; margin-inline-start: 6px; }
.bn-tr-legend i.done { background: #2bd98a; } .bn-tr-legend i.next { background: var(--py-yellow); }
.bn-tr-lines { list-style: none; margin: 0; padding: 10px 0; max-height: 360px; overflow: auto; position: relative; scroll-behavior: smooth; }
.bn-tr-lines li { display: flex; align-items: center; gap: 6px; padding: 2px 12px 2px 6px; font-size: 14px; line-height: 1.75; color: var(--py-ink); border-left: 3px solid transparent; transition: background .25s, border-color .25s; }
.bn-tr-lines .ln { width: 22px; text-align: right; color: #4c5577; font-size: 12px; flex-shrink: 0; }
.bn-tr-lines .mk { width: 18px; flex-shrink: 0; text-align: center; font-size: 13px; }
.bn-tr-lines code { white-space: pre; }
.bn-tr-lines li.is-done { background: rgba(43, 217, 138, .08); border-left-color: #2bd98a; }
.bn-tr-lines li.is-done .mk::before { content: "✓"; color: #2bd98a; }
.bn-tr-lines li.is-next { background: rgba(255, 212, 59, .12); border-left-color: var(--py-yellow); }
.bn-tr-lines li.is-next .mk::before { content: "➜"; color: var(--py-yellow); display: inline-block; animation: bnTrArrow .9s ease-in-out infinite alternate; }
.bn-tr-lines li.is-err { background: rgba(255, 92, 122, .14); border-left-color: #ff5c7a; }
.bn-tr-lines li.is-err .mk::before { content: "✕"; color: #ff5c7a; }
@keyframes bnTrArrow { from { transform: translateX(-2px); } to { transform: translateX(2px); } }
.bn-tr-side { display: flex; flex-direction: column; min-width: 0; }
.bn-tr-h { display: flex; align-items: baseline; gap: 8px; padding: 9px 14px; font-size: 12.5px; font-weight: 800; color: var(--py-ink); background: var(--py-panel); border-bottom: 1px solid var(--py-line); }
.bn-tr-h small { font-weight: 600; font-size: 11px; color: var(--py-dim); }
.bn-tr-mem { flex: 1; min-height: 150px; }
.bn-tr-frames { padding: 10px; display: flex; flex-direction: column; gap: 8px; max-height: 300px; overflow: auto; }
.bn-tr-frame { border-radius: 12px; padding: 8px; background: rgba(255,255,255,.03); border: 1px solid var(--py-line); }
.bn-tr-frame.is-fn { border-color: rgba(255, 212, 59, .45); background: rgba(255, 212, 59, .05); animation: bnTrIn .35s ease-out; }
.bn-tr-fname { font-size: 11px; font-weight: 700; color: var(--py-dim); margin-bottom: 6px; }
.bn-tr-fname b { color: var(--py-yellow); font-family: 'JetBrains Mono', monospace; }
.bn-tr-var { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 8px; margin-top: 4px; border-radius: 9px; background: rgba(255,255,255,.04); direction: ltr; }
.bn-tr-var .nm { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; color: var(--py-ink); }
.bn-tr-var .vl { font-family: 'JetBrains Mono', 'Vazirmatn', monospace; font-size: 13px; color: #f78c6c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bn-tr-var .ty { font-family: var(--font-fa); font-size: 10px; font-weight: 800; padding: 1px 7px; border-radius: 99px; background: rgba(255,255,255,.08); color: var(--py-dim); }
.bn-tr-var.t-str .vl { color: #c3e88d; } .bn-tr-var.t-bool .vl, .bn-tr-var.t-NoneType .vl { color: #c792ea; }
.bn-tr-var.t-list .vl, .bn-tr-var.t-dict .vl, .bn-tr-var.t-tuple .vl { color: #89ddff; } .bn-tr-var.t-function .vl { color: var(--py-yellow); }
.bn-tr-var.is-new { animation: bnTrIn .45s ease-out; box-shadow: inset 0 0 0 1.5px rgba(43, 217, 138, .7); }
.bn-tr-var.is-chg { animation: bnTrChg .8s ease-out; box-shadow: inset 0 0 0 1.5px rgba(255, 212, 59, .8); }
@keyframes bnTrIn { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes bnTrChg { 0% { background: rgba(255, 212, 59, .35); } 100% { background: rgba(255,255,255,.04); } }
.bn-tr-empty { font-size: 12px; color: var(--py-dim); padding: 6px; }
.bn-tr-term { border-top: 1px solid var(--py-line); }
.bn-tr-out, .bn-py-term { margin: 0; padding: 12px 14px; min-height: 64px; max-height: 200px; overflow: auto; background: #0a0d16; color: #e6edf3; font-size: 13.5px; line-height: 1.75; white-space: pre-wrap; word-break: break-word; unicode-bidi: plaintext; text-align: start; }
.bn-tr-out .in, .bn-py-term .in { color: #2bffc6; font-weight: 700; }
.bn-tr-out .in::after, .bn-py-term .in::after { content: " ⏎"; opacity: .45; font-size: 11px; }
.bn-tr-out .cur { display: inline-block; width: 8px; height: 15px; vertical-align: -2px; background: #2bffc6; animation: bnBlink 1s steps(1) infinite; }
@keyframes bnBlink { 50% { opacity: 0; } }
.bn-py-term .dim { color: #5c6585; font-family: var(--font-fa); }
.bn-tr-say { padding: 12px 16px; font-size: 13.5px; line-height: 2; color: var(--py-ink); background: linear-gradient(90deg, rgba(55,118,171,.18), rgba(255,212,59,.08)); border-top: 1px solid var(--py-line); min-height: 50px; }
.bn-tr-say code { background: rgba(255,255,255,.08); padding: 1px 6px; border-radius: 6px; font-size: 12.5px; }
.bn-tr-say b[dir="ltr"] { font-family: 'JetBrains Mono', monospace; }
.bn-tr-ln { display: inline-block; font-size: 11px; font-weight: 800; padding: 0 8px; border-radius: 99px; background: rgba(255, 212, 59, .18); color: var(--py-yellow); margin-inline-end: 4px; }
.bn-tr-ctl { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: var(--py-panel); border-top: 1px solid var(--py-line); flex-wrap: wrap; }
.bn-tr-btn { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--py-line); background: rgba(255,255,255,.04); color: var(--py-ink); font-size: 14px; cursor: pointer; transition: transform .15s, background .15s; }
.bn-tr-btn:hover:not(:disabled) { background: rgba(255,255,255,.1); }
.bn-tr-btn:active:not(:disabled) { transform: scale(.94); }
.bn-tr-btn:disabled { opacity: .35; cursor: not-allowed; }
.bn-tr-btn.is-on { background: var(--py-yellow); color: #1a1a2e; }
.bn-tr-next { padding: 10px 22px; }
.bn-tr-prog { flex: 1; min-width: 80px; height: 8px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; cursor: pointer; }
.bn-tr-prog i { display: block; height: 100%; width: 0; margin-inline-start: 0; border-radius: inherit; background: linear-gradient(270deg, #3776AB, #FFD43B); transition: width .3s; }
.bn-tr-count { font-size: 12px; font-weight: 700; color: var(--py-dim); white-space: nowrap; }

/* پیش‌بینی کن */
.bn-py-q { font-size: 14.5px; line-height: 2; color: var(--bn-fg); margin-bottom: 12px; }
.bn-py-q code { background: var(--bn-surface-2); padding: 2px 8px; border-radius: 6px; font-size: 13px; }
.bn-py-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.bn-py-opt { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 14px; border: 2px solid var(--bn-line-strong); background: var(--bn-surface-2); color: var(--bn-fg); cursor: pointer; text-align: start; font: inherit; transition: transform .15s, border-color .15s, background .15s; min-width: 0; }
.bn-py-opt code { font-size: 14px; overflow-wrap: anywhere; }
.bn-py-opt .ix { width: 26px; height: 26px; flex-shrink: 0; border-radius: 8px; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--bn-surface); color: var(--bn-fg-muted); }
.bn-py-opt:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--py-blue); }
.bn-py-opt.ok { border-color: #2bd98a; background: rgba(43, 217, 138, .12); }
.bn-py-opt.ok .ix { background: #2bd98a; color: #052a21; }
.bn-py-opt.bad { border-color: #ff5c7a; background: rgba(255, 92, 122, .08); opacity: .7; }
.bn-py-opt:disabled { cursor: default; }
.bn-py-why { margin-top: 12px; padding: 12px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.9; animation: bnTrIn .35s ease-out; }
.bn-py-why.ok { background: rgba(43, 217, 138, .1); border: 1px solid rgba(43, 217, 138, .35); color: var(--bn-fg); }
.bn-py-why.bad { background: rgba(255, 92, 122, .08); border: 1px solid rgba(255, 92, 122, .3); color: var(--bn-fg); }

/* ---------- پازل ---------- */
.bn-py-pz { background: var(--py-bg); border: 1px solid var(--py-line); border-radius: 16px; padding: 12px 10px; margin-bottom: 12px; transition: box-shadow .4s, border-color .4s; }
.bn-py-pz.is-done { border-color: rgba(43, 217, 138, .6); box-shadow: 0 0 0 4px rgba(43, 217, 138, .12); }
.bn-py-pz-row { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.bn-py-pz-row .ln { width: 20px; text-align: right; font-size: 12px; color: #4c5577; flex-shrink: 0; font-family: 'JetBrains Mono', monospace; }
.bn-py-slot { flex: 1; min-width: 0; height: auto; min-height: 38px; justify-content: flex-start; padding: 6px 12px; border-color: #2c3553; color: var(--py-dim); text-align: left; }
.bn-py-slot code { font-size: 13.5px; color: var(--py-ink); white-space: pre-wrap; word-break: break-word; }
.bn-py-slot .q { font-family: var(--font-fa); opacity: .6; }
.bn-py-slot.over { border-color: var(--py-yellow); background: rgba(255, 212, 59, .08); }
.bn-py-slot.filled { border-color: rgba(43, 217, 138, .5); background: rgba(43, 217, 138, .06); border-style: solid; animation: bnTrIn .3s ease-out; }
.bn-py-pz-msg { min-height: 24px; font-size: 13px; line-height: 1.9; margin-bottom: 8px; }
.bn-py-pz-msg.bad { color: var(--bn-fg); background: rgba(255, 92, 122, .08); border: 1px solid rgba(255, 92, 122, .25); border-radius: 12px; padding: 8px 12px; }
.bn-py-tray { gap: 8px; }
.bn-py-piece { font-size: 13px; padding: 9px 14px; max-width: 100%; background: var(--py-bg) !important; border-color: var(--py-blue) !important; color: var(--py-ink) !important; text-align: left; }
.bn-py-piece code { white-space: pre-wrap; word-break: break-word; }
.bn-py-piece.hint { border-color: var(--py-yellow) !important; box-shadow: 0 0 0 4px rgba(255, 212, 59, .25), 0 0 24px rgba(255, 212, 59, .35); animation: bnGlowPulse 1.2s ease-in-out infinite; }
@keyframes bnGlowPulse { 50% { box-shadow: 0 0 0 7px rgba(255, 212, 59, .12), 0 0 34px rgba(255, 212, 59, .5); } }
.bn-py-pz-run { animation: bnTrIn .4s ease-out; }
.bn-py-pz-run .bn-py-term { border-radius: 12px; }

/* ---------- مرحله‌ی ۳ ---------- */
.bn-py-expect .bn-py-term.small { border-radius: 12px; max-height: 150px; min-height: 0; font-size: 13px; border: 1px dashed rgba(43, 255, 198, .35); }
.bn-py-work { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; margin-top: 16px; align-items: start; }
.bn-py-right { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bn-py-stdin { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 800; color: var(--bn-fg); }
.bn-py-stdin small { font-weight: 600; color: var(--bn-fg-soft); font-size: 11.5px; }
.bn-py-stdin textarea { width: 100%; resize: vertical; min-height: 64px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--py-line); background: #0a0d16; color: #2bffc6; font: 600 13.5px/1.7 'JetBrains Mono', 'Vazirmatn', monospace; }
.bn-py-stdin textarea:focus { outline: 2px solid var(--py-blue); outline-offset: 1px; }
.bn-py-termbox { border-radius: 14px; overflow: hidden; border: 1px solid var(--py-line); background: #0a0d16; }
.bn-py-termbox .bn-py-term { max-height: 260px; min-height: 90px; }
.bn-py-runstat { margin-inline-start: auto; font-size: 11px !important; }
.bn-py-runstat.ok { color: #2bd98a !important; } .bn-py-runstat.bad { color: #ff5c7a !important; }
.bn-py-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.bn-py-actions .btn { padding: 10px 18px; font-size: 13.5px; }
.bn-py-hintbox { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 201, 74, .08); border: 1px solid rgba(255, 201, 74, .3); display: flex; flex-direction: column; gap: 8px; animation: bnTrIn .3s ease-out; }
.bn-py-hintline { font-size: 13.5px; line-height: 1.9; }
.bn-py-hintline span { font-family: 'JetBrains Mono', 'Vazirmatn', monospace; font-size: 12.5px; background: rgba(0,0,0,.18); padding: 2px 8px; border-radius: 6px; unicode-bidi: plaintext; }
.bn-py-showsol { align-self: flex-start; font-size: 12.5px !important; padding: 6px 14px !important; }
.bn-py-dbg { margin-top: 12px; }
.bn-py-dbg .bn-py-sub { justify-content: space-between; }
.bn-py-x { margin-inline-start: auto; width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--bn-line-strong); background: var(--bn-surface-2); color: var(--bn-fg); cursor: pointer; }
.bn-py-flags .live-flag { font-size: 12px; }
.bn-py-detail { margin-top: 12px; animation: bnTrIn .3s ease-out; }
.bn-py-det { padding: 12px 14px; border-radius: 14px; margin-bottom: 8px; background: rgba(255, 92, 122, .06); border: 1px solid rgba(255, 92, 122, .28); font-size: 13.5px; line-height: 1.9; }
.bn-py-det > b { display: block; color: #ff7a93; margin-bottom: 4px; }
.bn-py-det code { background: var(--bn-surface-2); padding: 1px 6px; border-radius: 6px; font-size: 12.5px; }
.bn-py-diff { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 8px; }
.bn-py-diff b { display: block; font-size: 12px; margin-bottom: 4px; color: var(--bn-fg-muted); }
.bn-py-diff pre, .bn-py-got { margin: 0; padding: 8px 10px; border-radius: 10px; background: #0a0d16; color: #e6edf3; font-size: 12.5px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; max-height: 180px; overflow: auto; unicode-bidi: plaintext; }
.bn-py-diff .d { background: rgba(255, 92, 122, .25); border-radius: 4px; }
.bn-py-got { margin-top: 6px; }
.bn-py-inputs code { color: #2bffc6; }

/* خطا */
.bn-pyerr { margin: 0; padding: 12px 14px; border-top: 1px solid rgba(255, 92, 122, .35); background: linear-gradient(180deg, rgba(255, 92, 122, .12), rgba(255, 92, 122, .04)); color: #f1d6dc; animation: bnTrIn .3s ease-out; }
.bn-tr-say .bn-pyerr { margin: 10px -16px -12px; }
.bn-pyerr-h { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.bn-pyerr-h b { font-family: 'JetBrains Mono', monospace; color: #ff8fa3; font-size: 14px; }
.bn-pyerr-h span:last-child { margin-inline-start: auto; font-size: 11.5px; font-weight: 800; padding: 1px 9px; border-radius: 99px; background: rgba(255, 92, 122, .2); color: #ff8fa3; }
.bn-pyerr-ic { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; background: #ff5c7a; color: #fff; font-size: 11px; font-weight: 900; }
.bn-pyerr-src { margin: 8px 0; padding: 6px 10px; border-radius: 8px; background: rgba(0,0,0,.35); color: #e6edf3; font-size: 13px; white-space: pre-wrap; border-left: 3px solid #ff5c7a; }
.bn-pyerr-src i { font-style: normal; color: #ff8fa3; margin-right: 10px; opacity: .8; }
.bn-pyerr-en { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #ffb3c1; opacity: .9; overflow-wrap: anywhere; }
.bn-pyerr-fa { margin-top: 8px; font-size: 13.5px; line-height: 1.95; color: #fff; }
.bn-pyerr-tb { margin-top: 6px; font-size: 12.5px; color: #ffd6de; }

/* ---------- ادیتور ---------- */
.bn-pyed { border-radius: 16px; overflow: hidden; background: #0f1320; border: 1px solid #232a40; box-shadow: 0 18px 50px rgba(0,0,0,.3); min-width: 0; }
.bn-pyed-top { display: flex; align-items: center; gap: 10px; padding: 0 12px; height: 40px; background: #151a2b; border-bottom: 1px solid #232a40; }
.bn-pyed-dots { display: inline-flex; gap: 6px; } .bn-pyed-dots i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f56; } .bn-pyed-dots i:nth-child(2) { background: #ffbd2e; } .bn-pyed-dots i:nth-child(3) { background: #27c93f; }
.bn-pyed-tab { display: inline-flex; align-items: center; gap: 7px; height: 100%; padding: 0 14px; color: #fff; font: 700 12.5px 'JetBrains Mono', monospace; background: #0f1320; border-top: 2px solid #FFD43B; margin-bottom: -1px; }
.bn-pyed-kbd { margin-left: auto; font: 600 10.5px var(--font-fa); color: #5c6585; }
.bn-pyed-body { position: relative; display: flex; height: 340px; overflow: hidden; }
.bn-pyed-gutter { flex-shrink: 0; width: 42px; padding: 14px 8px 14px 0; text-align: right; color: #4c5577; font-size: 14px; line-height: 22px; user-select: none; will-change: transform; }
.bn-pyed-gutter span { display: block; }
.bn-pyed-gutter span.err { color: #ff5c7a; font-weight: 800; }
.bn-pyed-code { position: relative; flex: 1; min-width: 0; overflow: hidden; }
.bn-pyed-hl, .bn-pyed-ta { margin: 0; padding: 14px 16px 14px 6px; font-size: 14px; line-height: 22px; tab-size: 4; -moz-tab-size: 4; white-space: pre; letter-spacing: 0; word-spacing: 0; direction: ltr; text-align: left; unicode-bidi: normal; border: 0; box-sizing: border-box; }
.bn-pyed-hl { position: absolute; top: 0; left: 0; min-width: 100%; color: #d7dcf0; pointer-events: none; will-change: transform; }
.bn-pyed-hl code { font: inherit; }
.bn-pyed-ta { position: absolute; inset: 0; width: 100%; height: 100%; resize: none; overflow: auto; background: transparent; color: transparent; caret-color: #FFD43B; -webkit-text-fill-color: transparent; outline: none; z-index: 1; }
.bn-pyed-ta::selection { background: rgba(130, 170, 255, .35); -webkit-text-fill-color: transparent; }
.bn-pyed-err { position: absolute; left: 0; right: 0; display: none; background: rgba(255, 92, 122, .16); border-left: 3px solid #ff5c7a; pointer-events: none; will-change: transform; }
.bn-pyed-keys { display: flex; gap: 6px; padding: 8px 10px; background: #151a2b; border-top: 1px solid #232a40; overflow-x: auto; scrollbar-width: none; }
.bn-pyed-keys::-webkit-scrollbar { display: none; }
.bn-pyed-keys button { flex-shrink: 0; min-width: 38px; height: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid #2c3553; background: #1b2136; color: #e6edf3; font: 700 15px 'JetBrains Mono', monospace; cursor: pointer; touch-action: manipulation; }
.bn-pyed-keys button:active { background: #3776AB; transform: scale(.94); }
.bn-pyed-status { display: flex; gap: 16px; padding: 3px 12px; background: #3776AB; color: #fff; font: 11px 'JetBrains Mono', monospace; }
.bn-pyed-status .pos { margin-right: auto; }
@media (hover: hover) and (pointer: fine) { .bn-pyed-keys { display: none; } }

/* نوارِ کناریِ نقشه */
.sb-track-label { display: flex; align-items: center; gap: 8px; margin: 14px 4px 6px; padding-top: 12px; border-top: 1px dashed var(--bn-line-strong); font-size: 12px; font-weight: 800; color: var(--bn-fg-muted); }
.sb-world-item.track-python .dot { background: linear-gradient(135deg, #3776AB 50%, #FFD43B 50%); }

@media (max-width: 900px) {
  .bn-py-work { grid-template-columns: minmax(0, 1fr); }
  .bn-tr-grid { grid-template-columns: minmax(0, 1fr); }
  .bn-tr-code { border-left: 0; border-bottom: 1px solid var(--py-line); }
  .bn-tr-lines { max-height: 260px; }
  .bn-pyed-body { height: 300px; }
}
@media (max-width: 620px) {
  .bn-py-opts { grid-template-columns: minmax(0, 1fr); }
  .bn-py-diff { grid-template-columns: minmax(0, 1fr); }
  .bn-py-anat-part code { font-size: 16px; }
  .bn-tr-lines li { font-size: 13px; }
  .bn-tr-next { flex: 1; }
  .bn-tr-prog { order: 5; flex-basis: 100%; }
  .bn-tr-count { order: 6; }
  .bn-py-actions .btn { flex: 1 1 calc(50% - 8px); }
  .bn-pyed-body { height: 280px; }
  .bn-pyed-hl, .bn-pyed-ta, .bn-pyed-gutter { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .bn-tr-lines li.is-next .mk::before, .bn-tr-var, .bn-tr-frame, .bn-py-piece.hint, .bn-tr-out .cur { animation: none !important; }
}
/* توی ادیتور، رنگ‌آمیزی نباید عرضِ حروف رو عوض کنه (وگرنه مکان‌نما با متن جور درنمیاد) */
.bn-pyed-hl .k, .bn-pyed-hl .c, .bn-pyed-hl span { font-weight: inherit !important; font-style: normal !important; }
.bn-py [hidden], .bn-pj [hidden] { display: none !important; }

/* سوییچرِ مسیر بالای نقشه */
.bn-track-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 5px; margin: 0 0 18px; border-radius: 18px; background: var(--bn-surface-2); border: 1px solid var(--bn-line-strong); }
.bn-track-tabs button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 8px; border: 0; border-radius: 14px; background: transparent; color: var(--bn-fg-muted); font: inherit; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; min-width: 0; }
.bn-track-tabs button b { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 800; }
.bn-track-tabs button small { font-size: 11px; font-weight: 600; opacity: .75; }
.bn-track-tabs button i { position: absolute; top: 6px; left: 8px; font-style: normal; font-size: 10px; font-weight: 800; padding: 1px 7px; border-radius: 99px; background: linear-gradient(135deg, #3776AB, #FFD43B); color: #0b0815; }
.bn-track-tabs button.is-on { background: var(--bn-surface); color: var(--bn-fg); box-shadow: 0 6px 18px rgba(0,0,0,.18), inset 0 0 0 1px var(--bn-line-strong); }
.bn-track-tabs button:not(.is-on):hover { color: var(--bn-fg); }
.bn-track-tabs button:focus-visible { outline: 2px solid var(--bn-accent-text); outline-offset: 2px; }

/* ادیتورِ پایتون روی گوشی (v2.9)
   قانونِ سراسریِ ضدِ زوم (index.html: textarea{font-size:16px!important} زیرِ 767px) فقط روی textarea
   می‌نشست و متنِ رنگیِ زیرش ۱۳px می‌موند ← جای مکان‌نما/انتخاب با حرف‌هایی که دیده می‌شد یکی نبود.
   حالا هر سه لایه (متنِ واقعی، متنِ رنگی، شماره‌خط) دقیقاً یک اندازه‌ان. */
@media (max-width: 767px), (pointer: coarse) {
  .bn-pyed-hl, .bn-pyed-ta, .bn-pyed-gutter { font-size: 16px !important; line-height: 26px !important; }
  .bn-pyed-hl, .bn-pyed-ta { padding: 12px 14px 12px 6px !important; }
  .bn-pyed-gutter { width: 36px; padding: 12px 6px 12px 0; }
  .bn-pyed-body { height: 300px; }
  .bn-pyed-keys { gap: 7px; padding: 9px 10px; }
  .bn-pyed-keys button { min-width: 44px; height: 44px; font-size: 17px; border-radius: 12px; }
}
.bn-pyed-code { touch-action: manipulation; }
.bn-pyed-keys button.nav { background: #243054; border-color: #34426e; color: #FFD43B; }
.bn-pyed-keys button.down { background: #3776AB; transform: scale(.94); }

/* =====================================================================
   دوره‌ی «طراحیِ سایت با هوشِ مصنوعی» (world-10) — v3.0
   ===================================================================== */
.bn-ai { --ai1: #8b5cf6; --ai2: #ec4899; --ai3: #fb923c; }
.bn-ai [hidden], .bn-ai-soon [hidden] { display: none !important; }
.bn-ai-chip { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #8b5cf6, #ec4899); box-shadow: 0 8px 22px -10px rgba(139, 92, 246, .8); }
.bn-ai-mascot { background: linear-gradient(135deg, #8b5cf6, #ec4899 60%, #fb923c) !important; }
.bn-ai-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 22px 0 10px; font-size: 15px; font-weight: 900; color: var(--bn-fg); }
.bn-ai-sub small { font-size: 12px; font-weight: 600; color: var(--bn-fg-soft); }
.bn-ai-sub.small { font-size: 13.5px; margin-top: 14px; }

/* مفهوم: کارت‌های رنگیِ اجزای پرامپت */
.bn-ai-concept { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.bn-ai-part { --c: 139, 92, 246; padding: 14px 16px; border-radius: 18px; background: rgba(var(--c), .08); border: 1px solid rgba(var(--c), .3); min-width: 0; }
.bn-ai-part b { display: block; font-size: 14px; font-weight: 900; color: rgb(var(--c)); margin-bottom: 4px; }
.bn-ai-part p { margin: 0; font-size: 13.5px; line-height: 1.95; color: var(--bn-fg-muted); }
.bn-ai-part code { display: block; margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: var(--bn-surface); font: 600 12.5px/1.8 'Vazirmatn', sans-serif; color: var(--bn-fg); overflow-wrap: anywhere; }
.k-role, .bn-ai-seg-role { --c: 139, 92, 246; } .k-goal, .k-what { --c: 20, 184, 166; } .k-context, .k-who { --c: 59, 130, 246; }
.k-constraints, .k-problem { --c: 239, 68, 68; } .k-format, .k-extra, .k-scope { --c: 234, 179, 8; } .k-content, .k-sections { --c: 236, 72, 153; }
.k-lang, .k-mobile { --c: 14, 165, 233; } .k-style, .k-design { --c: 217, 70, 239; } .k-colors { --c: 249, 115, 22; } .k-font, .k-touch { --c: 99, 102, 241; }
.k-anim, .k-expected { --c: 34, 197, 94; } .k-target, .k-where { --c: 6, 182, 212; } .k-change, .k-evidence { --c: 168, 85, 247; } .k-keep, .k-contrast, .k-alt { --c: 16, 185, 129; }
html[data-theme="light"] .bn-ai-part b { filter: brightness(.8); }
.bn-ai-note { margin-top: 12px; padding: 12px 14px; border-radius: 14px; font-size: 13.5px; line-height: 2; background: rgba(251, 146, 60, .1); border: 1px dashed rgba(251, 146, 60, .5); color: var(--bn-fg-muted); }

/* مقایسه */
.bn-ai-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--bn-surface-2); border: 1px solid var(--bn-line); }
.bn-ai-seg button { border: 0; background: none; font: inherit; font-size: 13px; font-weight: 800; padding: 8px 12px; border-radius: 10px; color: var(--bn-fg-muted); cursor: pointer; transition: background .2s, color .2s; -webkit-tap-highlight-color: transparent; }
.bn-ai-seg button.on { background: var(--bn-surface); color: var(--bn-fg); box-shadow: 0 4px 14px -6px rgba(0,0,0,.4); }
.bn-ai-vs-tabs { display: flex; width: 100%; margin-bottom: 10px; }
.bn-ai-vs-tabs button { flex: 1; }
.bn-ai-bubble { position: relative; padding: 12px 16px 12px 14px; border-radius: 18px 18px 4px 18px; background: var(--bn-surface-2); border: 1px solid var(--bn-line); margin-bottom: 10px; }
.bn-ai-bubble.good { background: linear-gradient(135deg, rgba(139, 92, 246, .14), rgba(236, 72, 153, .08)); border-color: rgba(139, 92, 246, .4); }
.bn-ai-bubble .who { display: block; font-size: 11.5px; font-weight: 800; color: var(--bn-fg-soft); margin-bottom: 2px; }
.bn-ai-bubble p { margin: 0; font-size: 14px; line-height: 2; unicode-bidi: plaintext; overflow-wrap: anywhere; }
.bn-ai-vs-meter { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; font-size: 12.5px; }
.bn-ai-vs-meter .lbl { color: var(--bn-fg-soft); font-weight: 700; flex-shrink: 0; }
.bn-ai-vs-meter .bar { flex: 1; height: 8px; border-radius: 99px; background: var(--bn-surface-2); overflow: hidden; }
.bn-ai-vs-meter .bar i { display: block; height: 100%; border-radius: inherit; transition: width .6s var(--bn-spring, ease); }
.bn-ai-vs-meter b { flex-shrink: 0; font-weight: 900; }
i.vague, .bn-ai-ring.vague .fg { background: #ef4444; stroke: #ef4444; } i.ok, .bn-ai-ring.ok .fg { background: #f59e0b; stroke: #f59e0b; }
i.good, .bn-ai-ring.good .fg { background: #22c55e; stroke: #22c55e; } i.pro, .bn-ai-ring.pro .fg { background: linear-gradient(90deg, #8b5cf6, #ec4899); stroke: #a855f7; }
.bn-ai-why { margin-top: 10px; padding: 12px 14px; border-radius: 14px; background: rgba(34, 197, 94, .08); border: 1px solid rgba(34, 197, 94, .3); font-size: 13.5px; line-height: 2; }
.gap-demo, .bn-ai-why .gap-demo { padding: 0 6px; border-radius: 4px; background: rgba(245, 158, 11, .18); outline: 2px dashed #f59e0b; outline-offset: 1px; }

/* پیش‌نمایش */
.bn-ai-prev { border-radius: 18px; overflow: hidden; border: 1px solid var(--bn-line-strong); background: var(--bn-surface-2); min-width: 0; }
.bn-ai-prev-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px; border-bottom: 1px solid var(--bn-line); flex-wrap: wrap; }
.bn-ai-prev-bar .bn-ai-seg button { padding: 6px 10px; font-size: 12.5px; }
.bn-ai-screen { display: flex; justify-content: center; align-items: flex-start; padding: 14px; overflow: hidden; background: repeating-linear-gradient(45deg, transparent 0 12px, rgba(127,127,127,.05) 12px 24px); }
.bn-ai-screen[data-dev="desk"] { padding: 0; }
.bn-ai-device { position: relative; overflow: hidden; background: #fff; flex-shrink: 0; }
.bn-ai-screen[data-dev="mob"] .bn-ai-device { border-radius: 26px; box-shadow: 0 0 0 8px #111, 0 18px 40px rgba(0,0,0,.35); }
.bn-ai-device iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; background: #fff; max-width: none !important; max-height: none !important; }
.bn-ai-code { margin: 0; max-height: 420px; overflow: auto; padding: 14px; background: #0f1320; color: #d7dcf0; font: 12.5px/1.8 'JetBrains Mono', ui-monospace, monospace; text-align: left; white-space: pre; }
.bn-ai-code .t { color: #f78c6c; } .bn-ai-code .a { color: #ffcb6b; } .bn-ai-code .s { color: #c3e88d; }
.bn-ai-prev-note { padding: 8px 12px; font-size: 12px; line-height: 1.9; color: var(--bn-fg-soft); border-top: 1px solid var(--bn-line); }

/* سؤال */
.bn-ai-q { font-size: 14.5px; line-height: 2; margin-bottom: 10px; }
.bn-ai-q code { font-family: 'JetBrains Mono', monospace; background: var(--bn-surface-2); padding: 1px 6px; border-radius: 6px; }
.bn-ai-opts { display: grid; gap: 8px; }
.bn-ai-opt { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: right; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--bn-line-strong); background: var(--bn-surface); color: var(--bn-fg); font: inherit; font-size: 14px; line-height: 1.9; cursor: pointer; transition: border-color .2s, transform .4s var(--bn-spring, ease), background .2s; -webkit-tap-highlight-color: transparent; }
.bn-ai-opt .ix { flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-weight: 900; font-size: 12px; background: var(--bn-surface-2); }
.bn-ai-opt:not(:disabled):hover { border-color: #8b5cf6; }
.bn-ai-opt.ok { border-color: #22c55e; background: rgba(34, 197, 94, .1); }
.bn-ai-opt.bad { border-color: #ef4444; background: rgba(239, 68, 68, .08); opacity: .7; }
.bn-ai-why2 { margin-top: 10px; padding: 12px 14px; border-radius: 14px; font-size: 13.5px; line-height: 2; }
.bn-ai-why2.ok { background: rgba(34, 197, 94, .1); border: 1px solid rgba(34, 197, 94, .35); }
.bn-ai-why2.bad { background: rgba(239, 68, 68, .08); border: 1px solid rgba(239, 68, 68, .3); }

/* پازل */
.bn-ai-build { display: grid; gap: 8px; }
.bn-ai-slot { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; border-radius: 14px; border: 2px dashed var(--bn-line-strong); background: var(--bn-surface-2); min-height: 58px; transition: border-color .25s, background .25s; }
.bn-ai-slot .lab { --c: 139, 92, 246; align-self: flex-start; font-size: 11.5px; font-weight: 900; padding: 2px 10px; border-radius: 99px; color: rgb(var(--c)); background: rgba(var(--c), .12); }
.bn-ai-slot .q { font-size: 13.5px; color: var(--bn-fg-soft); line-height: 1.9; }
.bn-ai-slot.filled { border-style: solid; border-color: rgba(34, 197, 94, .55); background: rgba(34, 197, 94, .07); }
.bn-ai-slot.filled .q { color: var(--bn-fg); font-weight: 600; }
.bn-ai-slot:not(.filled):first-of-type, .bn-ai-slot.filled + .bn-ai-slot:not(.filled) { border-color: #8b5cf6; box-shadow: 0 0 0 4px rgba(139, 92, 246, .12); }
.bn-ai-tray { display: flex; flex-wrap: wrap; gap: 8px; }
.bn-ai-piece { flex: 1 1 260px; text-align: right; padding: 11px 14px; border-radius: 14px; border: 1.5px solid var(--bn-line-strong); background: var(--bn-surface); color: var(--bn-fg); font: inherit; font-size: 13.5px; line-height: 1.9; cursor: pointer; transition: transform .4s var(--bn-spring, ease), border-color .2s, opacity .25s; -webkit-tap-highlight-color: transparent; }
.bn-ai-piece:not(:disabled):hover { border-color: #8b5cf6; transform: translateY(-2px); }
.bn-ai-piece:not(:disabled):active { transform: scale(.97); }
.bn-ai-piece.placed { display: none; }
.bn-ai-piece.trap { border-color: #ef4444; background: rgba(239, 68, 68, .08); text-decoration: line-through; opacity: .6; }
.bn-ai-piece.dim { opacity: .35; }
.bn-ai-piece.hint { border-color: #f59e0b; box-shadow: 0 0 0 4px rgba(245, 158, 11, .25); animation: bnAiPulse 1s ease-in-out infinite; }
@keyframes bnAiPulse { 50% { box-shadow: 0 0 0 8px rgba(245, 158, 11, .1); } }
.bn-ai-pz-msg { min-height: 0; margin: 10px 0; font-size: 13.5px; line-height: 2; }
.bn-ai-pz-msg.bad { padding: 10px 14px; border-radius: 14px; background: rgba(239, 68, 68, .08); border: 1px solid rgba(239, 68, 68, .3); }
.bn-ai-pz-msg small { color: var(--bn-fg-soft); }
.bn-ai-pz-out { margin-top: 14px; }

/* کارگاه */
.bn-ai-brief { margin: 4px 0 6px; padding: 14px 16px; border-radius: 16px; font-size: 14px; line-height: 2.05; background: linear-gradient(135deg, rgba(139, 92, 246, .1), rgba(251, 146, 60, .06)); border: 1px solid rgba(139, 92, 246, .3); }
.bn-ai-lab { display: grid; gap: 16px; margin-top: 14px; }
@media (min-width: 980px) { .bn-ai-lab { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; } .bn-ai-right { position: sticky; top: 90px; } }
.bn-ai-left, .bn-ai-right { min-width: 0; }
.bn-ai-compose { border-radius: 18px; border: 1.5px solid var(--bn-line-strong); background: var(--bn-surface); overflow: hidden; transition: border-color .2s, box-shadow .3s; }
.bn-ai-compose:focus-within { border-color: #8b5cf6; box-shadow: 0 0 0 4px rgba(139, 92, 246, .15); }
.bn-ai-compose-h { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; font-size: 13px; font-weight: 800; border-bottom: 1px solid var(--bn-line); }
.bn-ai-compose-h small { color: var(--bn-fg-soft); font-weight: 600; }
.bn-ai-ta { display: block; width: 100%; min-height: 170px; resize: vertical; border: 0; outline: none; background: transparent; color: var(--bn-fg); font: 500 15px/2 'Vazirmatn', sans-serif; padding: 12px 14px; unicode-bidi: plaintext; }
@media (max-width: 767px) { .bn-ai-ta { font-size: 16px !important; } }
.bn-ai-chips { display: flex; gap: 6px; padding: 8px; overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--bn-line); background: var(--bn-surface-2); }
.bn-ai-chips::-webkit-scrollbar { display: none; }
.bn-ai-chips button { flex-shrink: 0; border: 1px solid var(--bn-line-strong); background: var(--bn-surface); color: var(--bn-fg); font: inherit; font-size: 12.5px; font-weight: 800; padding: 7px 12px; border-radius: 999px; cursor: pointer; }
.bn-ai-chips button:active { transform: scale(.95); }
.bn-ai-score { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 12px 14px; border-radius: 18px; background: var(--bn-surface-2); }
.bn-ai-ring { position: relative; width: 62px; height: 62px; flex-shrink: 0; }
.bn-ai-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.bn-ai-ring circle { fill: none; stroke-width: 3.4; }
.bn-ai-ring .bg { stroke: var(--bn-line-strong); }
.bn-ai-ring .fg { stroke-linecap: round; stroke-dasharray: 0 100; transition: stroke-dasharray .6s var(--bn-spring, ease), stroke .3s; }
.bn-ai-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 17px; font-weight: 900; }
.bn-ai-score span { display: block; font-size: 12px; color: var(--bn-fg-soft); font-weight: 700; }
.bn-ai-score strong { font-size: 17px; font-weight: 900; }
.bn-ai-rub { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bn-ai-rub li { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--bn-surface-2); border: 1px solid transparent; transition: background .25s, border-color .25s; }
.bn-ai-rub li i { flex-shrink: 0; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; border: 2px solid var(--bn-line-strong); display: grid; place-items: center; font-style: normal; font-size: 12px; transition: all .3s var(--bn-spring, ease); }
.bn-ai-rub li b { display: block; font-size: 13.5px; }
.bn-ai-rub li.must b::after { content: " *"; color: #ef4444; }
.bn-ai-rub li small { display: block; font-size: 12px; color: var(--bn-fg-soft); line-height: 1.8; }
.bn-ai-rub li.ok { background: rgba(34, 197, 94, .08); border-color: rgba(34, 197, 94, .3); }
.bn-ai-rub li.ok i { background: #22c55e; border-color: #22c55e; transform: scale(1.08); }
.bn-ai-rub li.ok i::after { content: "✓"; color: #fff; font-weight: 900; }
.bn-ai-rub li.ok.must b::after { color: #22c55e; }
.bn-ai-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.bn-ai-hintbox { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(245, 158, 11, .08); border: 1px solid rgba(245, 158, 11, .35); }
.bn-ai-hintline { font-size: 13.5px; line-height: 2; margin-bottom: 4px; }
.bn-ai-sample { margin-top: 10px; padding: 12px 14px; border-radius: 14px; background: var(--bn-surface); border: 1px solid var(--bn-line-strong); }
.bn-ai-sample p { font-size: 13.5px; line-height: 2.05; margin: 6px 0 10px; unicode-bidi: plaintext; }
.bn-ai-detail { margin-top: 14px; }
.bn-ai-det { padding: 10px 14px; border-radius: 12px; margin-bottom: 8px; background: rgba(239, 68, 68, .07); border: 1px solid rgba(239, 68, 68, .28); font-size: 13.5px; line-height: 1.95; }
.bn-ai-det b { color: #ef4444; }

/* بارگذاری / قفل */
.bn-ai-loading { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 38px 10px; text-align: center; }
.bn-ai-loading p { margin: 0; color: var(--bn-fg-muted); font-size: 14px; line-height: 2; max-width: 420px; }
.bn-ai-loading > i { width: 140px; height: 4px; border-radius: 99px; background: linear-gradient(90deg, #8b5cf6, #ec4899, #fb923c, #8b5cf6); background-size: 300% 100%; animation: bnAiLoad 1.4s linear infinite; }
@keyframes bnAiLoad { to { background-position: 300% 0; } }
.bn-ai-orb { width: 64px; height: 64px; border-radius: 22px; display: grid; place-items: center; font-size: 32px; background: linear-gradient(135deg, #8b5cf6, #ec4899 60%, #fb923c); box-shadow: 0 16px 36px -12px rgba(139, 92, 246, .9); animation: bnAiBob 3s ease-in-out infinite; flex-shrink: 0; }
@keyframes bnAiBob { 50% { transform: translateY(-5px) rotate(-5deg); } }

/* نقشه: دنیای «به‌زودی» */
.sb-world-item .soon-ic { margin-inline-start: auto; font-size: 10.5px; font-weight: 900; padding: 2px 8px; border-radius: 99px; color: #fff; background: linear-gradient(135deg, #8b5cf6, #ec4899); white-space: nowrap; }
.sb-track-label.track-ai { color: #a855f7; }
.node.soon .node-circle { background: linear-gradient(135deg, rgba(139, 92, 246, .25), rgba(236, 72, 153, .2)) !important; border-color: rgba(168, 85, 247, .55) !important; filter: none !important; opacity: 1 !important; }
.node.soon .node-label { opacity: .85; }
.node-soon-badge { background: linear-gradient(135deg, #8b5cf6, #ec4899) !important; color: #fff !important; }
.bn-ai-card { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 0 4px; padding: 12px 14px; border-radius: 18px; background: linear-gradient(135deg, rgba(139, 92, 246, .14), rgba(236, 72, 153, .08)); border: 1px solid rgba(168, 85, 247, .4); }
.bn-ai-card-ic { font-size: 26px; }
.bn-ai-card > div { flex: 1; min-width: 180px; }
.bn-ai-card b { display: block; font-size: 14.5px; font-weight: 900; }
.bn-ai-card small { display: block; font-size: 12.5px; color: var(--bn-fg-muted); line-height: 1.9; }
.bn-track-tabs { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)) !important; }
.bn-track-tabs button[data-track="ai"] i { background: linear-gradient(135deg, #8b5cf6, #ec4899) !important; color: #fff !important; }
@media (max-width: 520px) { .bn-track-tabs button { padding: 10px 4px; } .bn-track-tabs button b { font-size: 13px; gap: 4px; } .bn-track-tabs button small { font-size: 10px; } .bn-track-tabs button i { top: -7px; left: 4px; } }

/* پیامِ «به‌زودی» */
.bn-ai-soon-hero { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 20px; background: linear-gradient(135deg, rgba(139, 92, 246, .16), rgba(236, 72, 153, .08)); border: 1px solid rgba(168, 85, 247, .35); }
.bn-ai-soon-hero .bn-ai-orb { width: 56px; height: 56px; font-size: 28px; border-radius: 18px; }
.bn-ai-soon-hero b { display: block; font-size: 15.5px; font-weight: 900; line-height: 1.7; }
.bn-ai-soon-hero small { display: block; font-size: 13px; color: var(--bn-fg-muted); line-height: 1.9; }
.bn-ai-soon-p { margin: 14px 2px; font-size: 14px; line-height: 2.05; color: var(--bn-fg-muted); }
.bn-ai-soon-list { padding: 12px 14px; border-radius: 16px; background: var(--bn-surface-2); }
.bn-ai-soon-list > b { font-size: 13px; }
.bn-ai-soon-list ol { margin: 8px 0 0; padding: 0; list-style: none; counter-reset: ai; display: grid; gap: 4px; }
.bn-ai-soon-list li { counter-increment: ai; display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; padding: 4px 6px; border-radius: 10px; }
.bn-ai-soon-list li::before { content: counter(ai, persian); flex-shrink: 0; width: 22px; height: 22px; border-radius: 7px; display: inline-grid; place-items: center; font-size: 11.5px; font-weight: 900; background: var(--bn-surface); }
.bn-ai-soon-list li small { color: var(--bn-fg-soft); font-size: 11.5px; }
.bn-ai-soon-list li.on { background: rgba(139, 92, 246, .14); font-weight: 800; }
.bn-ai-soon-cta { display: grid; gap: 8px; margin-top: 16px; }
.bn-ai-soon-cta .is-done { opacity: .85; }
@media (prefers-reduced-motion: reduce) { .bn-ai-orb, .bn-ai-loading > i, .bn-ai-piece.hint { animation: none !important; } }
.bn-ai-full { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; background: rgba(8, 6, 18, .92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: env(safe-area-inset-top) 0 0; }
.bn-ai-full-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; color: #fff; flex-wrap: wrap; }
.bn-ai-full-bar b { font-size: 14px; margin-inline-end: auto; }
.bn-ai-full-bar .bn-ai-seg { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.15); }
.bn-ai-full-bar .bn-ai-seg button { color: #ddd; } .bn-ai-full-bar .bn-ai-seg button.on { background: #fff; color: #111; }
.bn-ai-full-x { width: 38px; height: 38px; border-radius: 12px; border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 18px; cursor: pointer; }
.bn-ai-full-body { flex: 1; display: flex; justify-content: center; padding: 0 10px 10px; min-height: 0; }
.bn-ai-full-body iframe { width: 100%; max-width: none !important; height: 100%; border: 0; border-radius: 14px; background: #fff; }
.bn-ai-full-body[data-dev="mob"] iframe { width: 390px; max-width: 100% !important; border-radius: 24px; box-shadow: 0 0 0 6px #222; }
.bn-ai-mobnote { padding: 8px 12px; font-size: 12.5px; line-height: 1.9; background: rgba(245, 158, 11, .12); border-top: 1px solid rgba(245, 158, 11, .35); color: var(--bn-fg); }

/* =====================================================================
   دوره‌ی AI — v3.1: آموزشی‌تر و راحت روی گوشی
   ===================================================================== */
.k-tags { --c: 202, 138, 4; } .k-why { --c: 245, 158, 11; } .k-example { --c: 101, 163, 13; } .k-ask { --c: 244, 63, 94; }
.bn-ai-bubble p { white-space: pre-line; }

/* نصب */
.bn-ai-inst { padding: 10px; border-radius: 18px; background: var(--bn-surface-2); border: 1px solid var(--bn-line); }
.bn-ai-inst-tabs { display: flex; width: 100%; overflow-x: auto; scrollbar-width: none; background: var(--bn-surface); }
.bn-ai-inst-tabs::-webkit-scrollbar { display: none; }
.bn-ai-inst-tabs button { flex: 1 0 auto; white-space: nowrap; }
.bn-ai-inst-p { padding: 12px 4px 2px; }
.bn-ai-inst-p > p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.95; color: var(--bn-fg-muted); }
.bn-ai-inst-p ol { margin: 0 0 12px; padding: 0; list-style: none; counter-reset: st; display: grid; gap: 8px; }
.bn-ai-inst-p li { counter-increment: st; display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.9; }
.bn-ai-inst-p li::before { content: counter(st, persian); flex-shrink: 0; width: 26px; height: 26px; margin-top: 1px; border-radius: 9px; display: grid; place-items: center; font-weight: 900; font-size: 12.5px; color: #fff; background: linear-gradient(135deg, #8b5cf6, #ec4899); }
.bn-ai-inst-p li span { min-width: 0; overflow-wrap: anywhere; }

/* تورِ محیطِ Claude */
.bn-ai-tour { display: grid; gap: 12px; }
@media (min-width: 760px) { .bn-ai-tour { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; } }
.bn-ai-mock { border-radius: 22px; background: #faf9f5; color: #3d3929; border: 1px solid rgba(0, 0, 0, .12); box-shadow: 0 16px 40px -18px rgba(0, 0, 0, .5); font-size: 13px; line-height: 1.8; }
.mk-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.mk-chat { padding: 14px 12px; display: grid; gap: 12px; }
.mk-me { justify-self: start; max-width: 88%; padding: 8px 12px; border-radius: 14px; background: #ece9df; }
.mk-ai { display: flex; gap: 8px; align-items: flex-start; }
.mk-av { color: #d97757; font-size: 18px; line-height: 1.3; }
.mk-art { display: flex !important; flex-direction: column; margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid rgba(0, 0, 0, .12); }
.mk-art small { color: #8a8574; font-size: 11.5px; }
.mk-in { display: flex; align-items: center; gap: 8px; margin: 0 10px 12px; padding: 7px; border-radius: 16px; background: #fff; border: 1px solid rgba(0, 0, 0, .14); }
.mk-field { flex: 1; min-width: 0; color: #8a8574; padding: 4px 6px; border-radius: 8px; }
.mk-ic { width: 32px; height: 32px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center; background: rgba(0, 0, 0, .05); font-weight: 900; font-size: 15px; }
.mk-send { background: #d97757; color: #fff; }
.mk-model { font-weight: 800; padding: 4px 10px; border-radius: 10px; }
.mk-s[data-s] { position: relative; cursor: pointer; outline: 2px dashed transparent; outline-offset: 2px; transition: outline-color .2s, box-shadow .2s; -webkit-tap-highlight-color: transparent; }
.mk-s[data-s]::after { content: attr(data-n); position: absolute; top: -10px; left: -10px; width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; font: 900 11px/1 'Vazirmatn', sans-serif; color: #fff; background: #8b5cf6; box-shadow: 0 0 0 2px #fff; animation: bnAiPing 1.6s ease-in-out infinite; }
.mk-s[data-s].seen::after { background: #22c55e; animation: none; }
.mk-s[data-s].on { outline-color: #8b5cf6; box-shadow: 0 0 0 6px rgba(139, 92, 246, .18); }
.mk-s[data-s].on::after { background: #ec4899; animation: none; transform: scale(1.15); }
@keyframes bnAiPing { 50% { transform: scale(1.2); } }
.bn-ai-tour-info { padding: 14px; border-radius: 18px; background: var(--bn-surface-2); border: 1px solid rgba(139, 92, 246, .35); }
.bn-ai-tour-info > b { display: block; font-size: 15px; font-weight: 900; margin-bottom: 4px; }
.bn-ai-tour-info > p { margin: 0 0 10px; font-size: 13.5px; line-height: 2; color: var(--bn-fg-muted); }
.bn-ai-tour-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bn-ai-tour-nav small { font-size: 12px; color: var(--bn-fg-soft); font-weight: 700; }

/* قانون‌ها (آکاردئون) */
.bn-ai-tips { display: grid; gap: 8px; }
.bn-ai-tip { border-radius: 16px; background: var(--bn-surface-2); border: 1px solid var(--bn-line); overflow: hidden; transition: border-color .2s; }
.bn-ai-tip[open] { border-color: rgba(139, 92, 246, .45); }
.bn-ai-tip summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; list-style: none; font-size: 14.5px; line-height: 1.8; -webkit-tap-highlight-color: transparent; }
.bn-ai-tip summary::-webkit-details-marker { display: none; }
.bn-ai-tip summary::after { content: "⌄"; margin-inline-start: auto; color: var(--bn-fg-soft); transition: transform .25s; }
.bn-ai-tip[open] summary::after { transform: rotate(180deg); }
.bn-ai-tip .n { flex-shrink: 0; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font-weight: 900; font-size: 13px; color: #fff; background: linear-gradient(135deg, #8b5cf6, #ec4899); }
.bn-ai-tip-b { padding: 0 14px 14px; }
.bn-ai-tip-b > p { margin: 0 0 10px; font-size: 13.5px; line-height: 2; color: var(--bn-fg-muted); }
.bn-ai-tip-b code { font-family: 'JetBrains Mono', monospace; font-size: 12px; background: var(--bn-surface); padding: 1px 5px; border-radius: 6px; }
.bn-ai-ex { padding: 8px 12px; border-radius: 12px; margin-top: 6px; }
.bn-ai-ex span { display: block; font-size: 11.5px; font-weight: 900; }
.bn-ai-ex p { margin: 2px 0 0; font-size: 13.5px; line-height: 1.95; white-space: pre-line; unicode-bidi: plaintext; overflow-wrap: anywhere; }
.bn-ai-ex.bad { background: rgba(239, 68, 68, .07); border: 1px solid rgba(239, 68, 68, .25); } .bn-ai-ex.bad span { color: #ef4444; }
.bn-ai-ex.good { background: rgba(34, 197, 94, .08); border: 1px solid rgba(34, 197, 94, .3); } .bn-ai-ex.good span { color: #16a34a; }

/* نکته‌های کلیدی */
.bn-ai-keys { margin-top: 18px; padding: 14px 16px; border-radius: 18px; background: linear-gradient(135deg, rgba(34, 197, 94, .1), rgba(20, 184, 166, .06)); border: 1px solid rgba(34, 197, 94, .35); }
.bn-ai-keys b { font-size: 14.5px; font-weight: 900; }
.bn-ai-keys ul { margin: 8px 0 0; padding: 0 20px 0 0; display: grid; gap: 4px; }
.bn-ai-keys li { font-size: 13.5px; line-height: 1.95; unicode-bidi: plaintext; }

/* پازلِ قدم‌به‌قدم */
.bn-ai-built { padding: 12px 14px; border-radius: 18px; background: var(--bn-surface-2); border: 1.5px dashed var(--bn-line-strong); min-height: 58px; }
.bn-ai-built .who { display: block; font-size: 11.5px; font-weight: 800; color: var(--bn-fg-soft); margin-bottom: 2px; }
.bn-ai-built > p { margin: 0; font-size: 14px; line-height: 2.2; unicode-bidi: plaintext; overflow-wrap: anywhere; }
.bn-ai-built .ph { color: var(--bn-fg-soft); font-size: 13.5px; }
.bn-ai-built .seg { background: rgba(var(--c, 139, 92, 246), .13); border-bottom: 2px solid rgba(var(--c, 139, 92, 246), .6); border-radius: 6px; padding: 1px 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.bn-ai-built ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.bn-ai-built ol li { display: flex; flex-direction: column; padding: 8px 12px; border-radius: 12px; background: rgba(var(--c, 139, 92, 246), .1); border-inline-start: 3px solid rgba(var(--c, 139, 92, 246), .7); font-size: 13.5px; line-height: 1.9; animation: bnAiNew .45s var(--bn-spring, ease); }
.bn-ai-built ol li b { font-size: 12px; color: rgb(var(--c, 139, 92, 246)); }
.bn-ai-now { margin: 12px 0 8px; padding: 12px 14px; border-radius: 16px; background: linear-gradient(135deg, rgba(139, 92, 246, .12), rgba(236, 72, 153, .06)); border: 1px solid rgba(139, 92, 246, .4); }
.bn-ai-now:empty { display: none; }
.bn-ai-now .lab { display: inline-block; font-size: 12.5px; font-weight: 900; padding: 3px 12px; border-radius: 99px; color: rgb(var(--c, 139, 92, 246)); background: rgba(var(--c, 139, 92, 246), .14); }
html[data-theme="light"] .bn-ai-now .lab, html[data-theme="light"] .bn-ai-built ol li b { filter: brightness(.8); }
.bn-ai-now p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.95; color: var(--bn-fg-muted); }
.bn-ai-now p b { color: var(--bn-fg); }
.bn-ai-dots { display: flex; gap: 5px; margin-bottom: 10px; }
.bn-ai-dots i { flex: 1; height: 5px; border-radius: 99px; background: var(--bn-line-strong); transition: background .3s; }
.bn-ai-dots i.done { background: #22c55e; } .bn-ai-dots i.cur { background: #8b5cf6; }
.bn-ai-pz-tools { display: flex; margin-top: 10px; }
.bn-ai-pz-tools .btn { padding: 8px 14px; font-size: 13px; }
.bn-ai-pz-tools .btn:disabled { opacity: .45; }
@keyframes bnAiNew { from { transform: scale(.7); opacity: 0; } }

/* کارگاه: «AI چی فهمید» */
.bn-ai-under { margin-top: 4px; }
.bn-ai-und { display: flex; flex-wrap: wrap; gap: 6px; }
.bn-ai-und span { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 5px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: var(--bn-surface-2); border: 1px solid var(--bn-line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bn-ai-und span.new { border-color: #8b5cf6; background: rgba(139, 92, 246, .16); animation: bnAiNew .6s var(--bn-spring, ease); }
.bn-ai-und span i { width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(127, 127, 127, .4); }
.bn-ai-und em { font-size: 12.5px; color: var(--bn-fg-soft); font-style: normal; line-height: 1.9; }
.bn-ai-ta.flash { animation: bnAiFlash .7s ease; }
@keyframes bnAiFlash { 30% { background: rgba(139, 92, 246, .12); } }

/* کارگاه: چک‌لیستِ باز‌شونده با جمله‌های پیشنهادی */
.bn-ai-rub > li { display: block; padding: 0; }
.bn-ai-rub .rb-h { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 10px 12px; border: 0; background: none; color: inherit; font: inherit; text-align: right; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bn-ai-rub .rb-h > span { flex: 1; min-width: 0; }
.bn-ai-rub .rb-h em { font-style: normal; color: var(--bn-fg-soft); transition: transform .25s; line-height: 1.6; }
.bn-ai-rub li.open .rb-h em { transform: rotate(180deg); }
.bn-ai-rub .rb-p { padding: 0 12px 12px; }
.bn-ai-rub .rb-p > p { margin: 0 0 8px; font-size: 13px; line-height: 1.9; color: var(--bn-fg-muted); }
.rb-adds { display: grid; gap: 6px; }
.rb-adds button { display: flex; gap: 8px; align-items: flex-start; width: 100%; text-align: right; padding: 10px 12px; border-radius: 12px; border: 1.5px dashed rgba(139, 92, 246, .6); background: rgba(139, 92, 246, .07); color: var(--bn-fg); font: inherit; font-size: 13.5px; line-height: 1.85; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .3s var(--bn-spring, ease), opacity .2s; }
.rb-adds button span:last-child { min-width: 0; white-space: pre-line; unicode-bidi: plaintext; overflow-wrap: anywhere; }
.rb-adds button:active { transform: scale(.97); }
.rb-adds button.used { border-style: solid; opacity: .65; }
.rb-adds small { font-size: 11.5px; color: var(--bn-fg-soft); }

/* کارگاه: نوارِ چسبانِ امتیاز و بررسی */
.bn-ai-ws .bn-ai-score { display: none; }
.bn-ai-dock { position: sticky; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 6; display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 8px 8px 8px 12px; border-radius: 20px; background: var(--bn-glass, var(--bn-surface)); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--bn-line-strong); box-shadow: 0 14px 36px -14px rgba(0, 0, 0, .55); }
.bn-ai-dock .bn-ai-ring { width: 46px; height: 46px; }
.bn-ai-dock .bn-ai-ring b { font-size: 13px; }
.bn-ai-dock .dk-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.5; }
.bn-ai-dock .dk-t span { font-size: 11.5px; color: var(--bn-fg-soft); font-weight: 700; }
.bn-ai-dock .dk-t strong { font-size: 13.5px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bn-ai-dock .btn { flex-shrink: 0; padding: 11px 14px; font-size: 14px; }
.bn-ai-dock.ready { border-color: rgba(34, 197, 94, .6); box-shadow: 0 0 0 4px rgba(34, 197, 94, .14), 0 14px 36px -14px rgba(0, 0, 0, .55); }
@media (min-width: 980px) { .bn-ai-dock .dk-view { display: none; } }
@media (max-width: 420px) { .bn-ai-dock { gap: 7px; padding: 7px; } .bn-ai-dock .btn { padding: 10px 11px; font-size: 13px; } .bn-ai-dock .dk-t span { display: none; } }
@media (max-width: 760px) {
  .bn-ai-actions .btn { flex: 1 1 calc(50% - 8px); padding: 10px 8px; font-size: 13px; }
  .bn-ai-brief { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) { .mk-s[data-s]::after, .bn-ai-und span.new, .bn-ai-built ol li { animation: none !important; } }
@media (max-width: 560px) {
  .bn-ai-inst-tabs { overflow: visible; }
  .bn-ai-inst-tabs button { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 0; padding: 6px 2px; font-size: 11.5px; line-height: 1.6; white-space: normal; }
}
.bn-ai-built > p { unicode-bidi: normal; }
.bn-ai-built .seg { unicode-bidi: isolate; }
.bn-ai-sample p { white-space: pre-line; }
.bn-ai-piece { unicode-bidi: plaintext; white-space: pre-line; }
/* html/body اسکرولِ افقی رو می‌بُرن و sticky کار نمی‌کنه ← نوارِ کارگاه ثابت (fixed) پایینِ صفحه */
.bn-ai-dock { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 60; max-width: 760px; margin: 0 auto; }
.bn-ai-ws { padding-bottom: 96px !important; }
@media (max-width: 760px) { .bn-ai-dock.kb { opacity: 0; pointer-events: none; transform: translateY(20px); } }
.bn-ai-dock { transition: opacity .2s, transform .3s var(--bn-spring, ease), border-color .3s, box-shadow .3s; }

/* =====================================================================
   رشد v3.3 — «ادامه از جایی که موندی» + لحظه‌ی طلایی
   ===================================================================== */
.bn-continue { display: flex; align-items: center; gap: 14px; width: 100%; margin: 0 0 16px; padding: 14px 16px; border-radius: 22px; text-align: right; font: inherit; color: var(--bn-fg); cursor: pointer;
  background: linear-gradient(135deg, rgba(43, 255, 198, .16), rgba(124, 92, 255, .12)); border: 1.5px solid rgba(43, 255, 198, .45);
  box-shadow: 0 14px 34px -18px rgba(43, 255, 198, .7); transition: transform .35s var(--bn-spring, ease), box-shadow .3s; -webkit-tap-highlight-color: transparent; }
.bn-continue:hover { transform: translateY(-2px); }
.bn-continue:active { transform: scale(.98); }
.bn-continue.is-premium { background: linear-gradient(135deg, rgba(255, 201, 74, .2), rgba(255, 79, 216, .12)); border-color: rgba(255, 201, 74, .55); box-shadow: 0 14px 34px -18px rgba(255, 201, 74, .8); }
.bn-continue-ic { width: 52px; height: 52px; flex-shrink: 0; border-radius: 16px; display: grid; place-items: center; font-size: 24px; background: var(--fill-teal, #2BFFC6); color: #052a21; box-shadow: 0 8px 20px -8px rgba(43, 255, 198, .9); }
.bn-continue.is-premium .bn-continue-ic { background: linear-gradient(135deg, #FFC94A, #ff9f43); }
.bn-continue-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.6; }
.bn-continue-t small { font-size: 12px; font-weight: 800; color: var(--bn-fg-muted); }
.bn-continue-t b { font-size: 16.5px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bn-continue-t em { font-style: normal; font-size: 11.5px; color: var(--bn-fg-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bn-continue-bar { display: block; height: 6px; margin: 4px 0 2px; border-radius: 99px; background: var(--bn-line-strong); overflow: hidden; }
.bn-continue-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2BFFC6, #7c5cff); }
.bn-continue.is-premium .bn-continue-bar i { background: linear-gradient(90deg, #FFC94A, #ff4fd8); }
.bn-continue-go { flex-shrink: 0; padding: 10px 14px; border-radius: 14px; font-size: 14px; font-weight: 900; background: var(--bn-ink, #F5F3FF); color: var(--bn-ink-fg, #0b0815); white-space: nowrap; }
@media (max-width: 480px) {
  .bn-continue { gap: 10px; padding: 12px; }
  .bn-continue-ic { width: 44px; height: 44px; font-size: 20px; border-radius: 14px; }
  .bn-continue-t b { font-size: 15px; }
  .bn-continue-go { padding: 9px 11px; font-size: 13px; }
}

.bn-golden-cert { position: relative; text-align: center; padding: 22px 16px 18px; border-radius: 22px; overflow: hidden;
  background: radial-gradient(240px 140px at 50% 0%, rgba(255, 201, 74, .32), transparent 70%), linear-gradient(160deg, rgba(124, 92, 255, .18), rgba(43, 255, 198, .1));
  border: 1.5px solid rgba(255, 201, 74, .5); }
.bn-golden-medal { font-size: 46px; line-height: 1; animation: bnGoldPop .8s var(--bn-spring, ease) both; }
@keyframes bnGoldPop { from { transform: scale(.3) rotate(-20deg); opacity: 0; } }
.bn-golden-cert small { display: block; margin-top: 8px; font-size: 12px; font-weight: 800; color: var(--bn-fg-muted); }
.bn-golden-cert > b { display: block; font-size: 22px; font-weight: 900; margin: 2px 0; }
.bn-golden-cert p { margin: 0; font-size: 13px; color: var(--bn-fg-muted); }
.bn-golden-rank { display: inline-block; margin-top: 10px; padding: 5px 12px; border-radius: 99px; font-size: 12px; font-weight: 800; background: rgba(255, 201, 74, .18); color: var(--bn-gold-text, #FFC94A); }
.bn-golden-sub { margin: 16px 2px 8px; font-size: 14px; }
.bn-golden-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bn-golden-list li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 14px; background: var(--bn-surface-2); }
.bn-golden-list li span { font-size: 20px; }
.bn-golden-list li b { flex: 1; min-width: 0; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bn-golden-list li em { font-style: normal; font-size: 12px; font-weight: 800; color: var(--bn-fg-soft); white-space: nowrap; }
.bn-golden-perks { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; font-weight: 800; color: var(--bn-accent-text, #2BFFC6); }
.bn-golden-cta { display: grid; gap: 8px; margin-top: 16px; }
.bn-golden-later { border: 0; background: none; font: inherit; font-size: 13px; color: var(--bn-fg-soft); padding: 6px; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .bn-golden-medal { animation: none; } }

/* ---------- اطلاعیه‌ی داخلِ سایت (بالای نقشه) ---------- */
.bn-ann { position: relative; display: flex; align-items: flex-start; gap: 12px; margin: 0 0 14px; padding: 14px 14px 14px 44px; border-radius: 22px;
  background: linear-gradient(135deg, rgba(124, 92, 255, .2), rgba(255, 79, 216, .1)); border: 1.5px solid rgba(124, 92, 255, .5);
  box-shadow: 0 14px 34px -20px rgba(124, 92, 255, .9); animation: bnAnnIn .5s var(--bn-spring, ease) both; }
@keyframes bnAnnIn { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
.bn-ann-ic { width: 46px; height: 46px; flex-shrink: 0; border-radius: 15px; display: grid; place-items: center; font-size: 23px; background: var(--bn-surface-2); }
.bn-ann-t { flex: 1; min-width: 0; }
.bn-ann-t > b { display: block; font-size: 15.5px; font-weight: 900; line-height: 1.6; }
.bn-ann-t > p { margin: 2px 0 0; font-size: 13.5px; line-height: 1.9; color: var(--bn-fg-muted); white-space: pre-line; overflow-wrap: anywhere; }
.bn-ann-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.bn-ann-row:empty { display: none; }
.bn-ann-cp { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; border: 1.5px dashed var(--bn-gold-text, #FFC94A); background: rgba(255, 201, 74, .1);
  color: var(--bn-gold-text, #FFC94A); font: inherit; font-size: 13px; font-weight: 900; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bn-ann-cp bdi { font-family: ui-monospace, Menlo, monospace; letter-spacing: .5px; }
.bn-ann-cp small { font-size: 10.5px; opacity: .8; }
.bn-ann-go { padding: 8px 16px; border-radius: 99px; border: 0; background: var(--bn-ink, #F5F3FF); color: var(--bn-ink-fg, #0b0815); font: inherit; font-size: 13.5px; font-weight: 900; cursor: pointer; }
.bn-ann-go:active, .bn-ann-cp:active { transform: scale(.96); }
.bn-ann-n { font-size: 11.5px; font-weight: 800; color: var(--bn-fg-soft); }
.bn-ann-x { position: absolute; top: 10px; left: 10px; width: 30px; height: 30px; border-radius: 10px; border: 0; background: var(--bn-surface-2); color: var(--bn-fg-muted); font-size: 14px; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .bn-ann { animation: none; } }

/* نقشه‌ی گوشی و دسکتاپ (مسیر، نوارِ دنیا، کاشی‌ها، کارتِ امروز) از v3.27 توی assets/ui/map.css ـه */

/* انتخاب‌گرِ دنیا (برگه‌ی پایین) */
.bn-wpick-g { margin: 14px 4px 6px; font-size: 12.5px; font-weight: 900; color: var(--bn-fg-soft); }
.bn-wpick-g:first-child { margin-top: 0; }
.bn-wpick { display: flex; flex-direction: column; gap: 6px; }
.bn-wpick-i { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 18px; text-align: right; font: inherit; color: var(--bn-fg); cursor: pointer;
  background: var(--bn-surface-2); border: 1.5px solid transparent; -webkit-tap-highlight-color: transparent; transition: transform .3s var(--bn-spring, ease), border-color .2s; }
.bn-wpick-i:active { transform: scale(.98); }
.bn-wpick-i.is-cur { border-color: rgba(43, 255, 198, .6); background: linear-gradient(135deg, rgba(43, 255, 198, .12), var(--bn-surface-2)); }
.bn-wpick-i.is-locked { opacity: .62; }
.bn-wpick-i .ic { width: 42px; height: 42px; flex-shrink: 0; border-radius: 13px; display: grid; place-items: center; font-size: 21px; background: var(--bn-surface); }
.bn-wpick-i .t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.55; }
.bn-wpick-i .t b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bn-wpick-i .t small { font-size: 11.5px; color: var(--bn-fg-soft); }
.bn-wpick-i .bar { display: block; height: 4px; margin: 4px 0 2px; border-radius: 99px; background: var(--bn-line-strong); overflow: hidden; }
.bn-wpick-i .bar i { display: block; height: 100%; background: linear-gradient(90deg, #2BFFC6, #7c5cff); border-radius: inherit; }
.bn-wpick-i em { flex-shrink: 0; font-style: normal; font-size: 11px; font-weight: 900; padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
.bn-wpick-i em.ok { background: rgba(43, 255, 198, .14); color: var(--bn-accent-text, #2BFFC6); }
.bn-wpick-i em.lock { background: var(--bn-surface); color: var(--bn-fg-soft); }
.bn-wpick-i em.plus { background: rgba(255, 201, 74, .16); color: var(--bn-gold-text, #FFC94A); }
.bn-wpick-i em.soon { background: linear-gradient(135deg, #8b5cf6, #ec4899); color: #fff; }
.bn-wpick-i em.cur { background: var(--fill-pink, #FF4FD8); color: #3A0030; }
@media (prefers-reduced-motion: reduce) { .node.current::before, .bn-quick .is-hot::after { animation: none !important; } }

/* =====================================================================
   طرح‌های اشتراک: پلاس / پرو / پرومکس — صفحه‌ی خرید، انتخابِ دوره، کارتِ اشتراک،
   برگه‌ی «به محدودیت خوردی» و نوارِ وضعیتِ بالای نقشه
   ===================================================================== */
[hidden].bn-cur-plan, .bn-course-pick[hidden] { display: none !important; }

/* سه طرح */
.bn-tiers { max-width: 880px; margin: 0 auto 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0 2px; }
.bn-tier { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 22px 16px 16px; border-radius: 24px; text-align: right;
  font: inherit; color: var(--bn-fg); cursor: pointer; background: var(--bn-surface); border: 2px solid var(--bn-line-strong); box-shadow: var(--bn-shadow-soft);
  transition: transform .4s var(--bn-spring, ease), border-color .2s, box-shadow .3s, background-color .2s; -webkit-tap-highlight-color: transparent; }
.bn-tier:hover { transform: translateY(-2px); }
.bn-tier:active { transform: scale(.98); }
.bn-tier.is-skel { min-height: 210px; cursor: default; background: linear-gradient(90deg, var(--bn-surface) 0%, var(--bn-surface-2) 50%, var(--bn-surface) 100%); background-size: 200% 100%; animation: bnSkel 1.2s linear infinite; }
@keyframes bnSkel { to { background-position: -200% 0; } }
.bn-tier.is-sel { border-color: var(--fill-teal, #2BFFC6); background: linear-gradient(160deg, rgba(43, 255, 198, .12), rgba(124, 92, 255, .06)), var(--bn-surface); box-shadow: 0 0 0 4px rgba(43, 255, 198, .12), 0 18px 40px -22px rgba(43, 255, 198, .9); }
.bn-tier.is-pro.is-sel { border-color: #7c8cff; background: linear-gradient(160deg, rgba(108, 140, 255, .16), rgba(43, 255, 198, .05)), var(--bn-surface); box-shadow: 0 0 0 4px rgba(108, 140, 255, .14), 0 18px 40px -22px rgba(108, 140, 255, .9); }
.bn-tier.is-promax.is-sel { border-color: #FF4FD8; background: linear-gradient(160deg, rgba(255, 79, 216, .14), rgba(255, 201, 74, .08)), var(--bn-surface); box-shadow: 0 0 0 4px rgba(255, 79, 216, .13), 0 18px 40px -22px rgba(255, 79, 216, .9); }
.bn-tier.is-dis { opacity: .45; cursor: not-allowed; }
.bn-tier.is-dis:hover, .bn-tier.is-dis:active { transform: none; }
.bn-tier-badge { position: absolute; top: -11px; right: 50%; transform: translateX(50%); white-space: nowrap; padding: 3px 12px; border-radius: 99px; font-size: 11px; font-weight: 900;
  background: var(--bn-ink, #F5F3FF); color: var(--bn-ink-fg, #0b0815); }
.bn-tier.is-promax .bn-tier-badge { background: linear-gradient(90deg, #FF4FD8, #FFC94A); color: #1a0b16; }
.bn-tier.is-pro .bn-tier-badge { background: #7c8cff; color: #0b0815; }
.bn-tier-name { font-size: 17px; font-weight: 900; }
.bn-tier-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; font-size: 13px; font-weight: 700; color: var(--bn-fg-muted); }
.bn-tier-price b { font-size: 30px; font-weight: 900; color: var(--bn-fg); line-height: 1.15; font-variant-numeric: tabular-nums; }
.bn-tier-price small { font-size: 12px; color: var(--bn-fg-soft); }
.bn-tier-price s { font-size: 14px; color: var(--bn-fg-soft); }
.bn-tier-sub { font-size: 12px; font-weight: 800; color: var(--bn-accent-text, #2BFFC6); }
.bn-tier-sub b { font-weight: 900; }
.bn-tier-feats { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13px; color: var(--bn-fg-muted); line-height: 1.7; }
.bn-tier-feats b { color: var(--bn-fg); }
.bn-tier-radio { position: absolute; top: 16px; left: 14px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--bn-line-strong); transition: border-color .2s, background-color .2s; }
.bn-tier.is-sel .bn-tier-radio { border-color: transparent; background: var(--fill-teal, #2BFFC6); box-shadow: inset 0 0 0 4px var(--bn-surface); }
.bn-tier.is-pro.is-sel .bn-tier-radio { background: #7c8cff; }
.bn-tier.is-promax.is-sel .bn-tier-radio { background: #FF4FD8; }

/* انتخابِ دوره */
.bn-course-pick { max-width: 640px; margin: 0 auto 20px; padding: 16px; border-radius: 24px; background: var(--bn-surface); border: 1.5px solid var(--bn-line-strong); box-shadow: var(--bn-shadow-soft); }
.bn-cp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin-bottom: 12px; }
.bn-cp-head b { font-size: 16px; font-weight: 900; }
.bn-cp-head small { flex-basis: 100%; order: 3; font-size: 12.5px; color: var(--bn-fg-muted); }
.bn-cp-count { margin-inline-start: auto; padding: 3px 11px; border-radius: 99px; font-size: 12px; font-weight: 900; background: var(--bn-surface-2); color: var(--bn-fg-muted); }
.bn-cp-count.is-full { background: rgba(43, 255, 198, .16); color: var(--bn-accent-text, #2BFFC6); }
.bn-cp-list { display: grid; gap: 8px; }
.bn-cp-i { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border-radius: 18px; text-align: right; font: inherit; color: var(--bn-fg); cursor: pointer;
  background: var(--bn-surface-2); border: 2px solid transparent; transition: border-color .2s, background-color .2s, transform .35s var(--bn-spring, ease); -webkit-tap-highlight-color: transparent; }
.bn-cp-i:active:not(:disabled) { transform: scale(.98); }
.bn-cp-i .ic { width: 44px; height: 44px; flex-shrink: 0; border-radius: 14px; display: grid; place-items: center; font-size: 22px; background: var(--bn-surface); }
.bn-cp-i .t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.6; }
.bn-cp-i .t b { font-size: 14.5px; font-weight: 900; }
.bn-cp-i .t small { font-size: 12px; color: var(--bn-fg-muted); }
.bn-cp-i .chk { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 900; border: 2px solid var(--bn-line-strong); color: var(--bn-ink-fg, #0b0815); }
.bn-cp-i em { flex-shrink: 0; font-style: normal; font-size: 11.5px; font-weight: 900; padding: 3px 10px; border-radius: 99px; background: var(--bn-surface); color: var(--bn-fg-muted); }
.bn-cp-i.is-on { border-color: var(--fill-teal, #2BFFC6); background: rgba(43, 255, 198, .1); }
.bn-cp-i.is-on .chk { background: var(--fill-teal, #2BFFC6); border-color: transparent; }
.bn-cp-i.is-locked { cursor: default; }
.bn-cp-i.is-locked em { background: rgba(43, 255, 198, .16); color: var(--bn-accent-text, #2BFFC6); }
.bn-cp-i.is-off { opacity: .5; cursor: not-allowed; }
.bn-shake { animation: bnShake .45s; }
@keyframes bnShake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

.bn-checkout .bn-co-perks { margin-top: 8px; font-size: 13px; font-weight: 800; color: var(--gold, #FFC94A); }
.bn-checkout .bn-co-perks:empty { display: none; }
#bn-coupon-box[hidden] { display: none !important; }
#pricing-subscribe-btn:disabled { opacity: .5; cursor: not-allowed; animation: none; }

/* کارتِ «اشتراکِ من» (پروفایل + بالای صفحه‌ی خرید) */
.bn-plan-card { max-width: 640px; margin: 0 auto 22px; padding: 18px; border-radius: 26px; background: linear-gradient(150deg, rgba(43, 255, 198, .12), rgba(124, 92, 255, .08)), var(--bn-surface);
  border: 1.5px solid rgba(43, 255, 198, .35); box-shadow: var(--bn-shadow-soft); display: grid; gap: 8px; text-align: right; }
.bn-plan-card.tier-pro { background: linear-gradient(150deg, rgba(108, 140, 255, .16), rgba(43, 255, 198, .05)), var(--bn-surface); border-color: rgba(108, 140, 255, .45); }
.bn-plan-card.tier-promax, .bn-plan-card.tier-legacy { background: linear-gradient(150deg, rgba(255, 79, 216, .13), rgba(255, 201, 74, .08)), var(--bn-surface); border-color: rgba(255, 79, 216, .4); }
.bn-plan-card.is-free { background: var(--bn-surface); border-color: var(--bn-line-strong); }
#bn-profile-plan { margin: -18px 0 30px; max-width: none; }
.bn-pc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bn-pc-badge { padding: 4px 13px; border-radius: 99px; font-size: 13px; font-weight: 900; background: var(--bn-ink, #F5F3FF); color: var(--bn-ink-fg, #0b0815); }
.bn-pc-days { font-size: 12.5px; font-weight: 900; color: var(--bn-fg-muted); }
.bn-pc-title { font-size: 16px; font-weight: 900; line-height: 1.7; }
.bn-pc-title span { color: var(--bn-accent-text, #2BFFC6); }
.bn-pc-bar { display: block; height: 7px; border-radius: 99px; background: var(--bn-line-strong); overflow: hidden; }
.bn-pc-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2BFFC6, #7c5cff); }
.bn-pc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bn-pc-chips:empty { display: none; }
.bn-pc-chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px; border-radius: 99px; font: inherit; font-size: 12.5px; font-weight: 800; background: var(--bn-surface-2); color: var(--bn-fg); border: 0; }
.bn-pc-chip.all { background: linear-gradient(90deg, rgba(255, 79, 216, .2), rgba(255, 201, 74, .2)); }
.bn-pc-chip.add { cursor: pointer; border: 1.5px dashed var(--fill-teal, #2BFFC6); background: none; color: var(--bn-accent-text, #2BFFC6); }
.bn-pc-daily { font-size: 13px; color: var(--bn-fg-muted); }
.bn-pc-daily b { color: var(--bn-fg); }
.bn-pc-p { margin: 0; font-size: 13px; line-height: 1.9; color: var(--bn-fg-muted); }
.bn-pc-p b { color: var(--bn-fg); }
.bn-pc-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.bn-pc-btns .btn { flex: 1 1 140px; width: auto; }

/* برگه‌ی «به محدودیتِ طرحت خوردی» */
.bn-pb-hero { text-align: center; padding: 20px 14px 16px; border-radius: 22px; display: grid; gap: 6px; justify-items: center;
  background: radial-gradient(220px 120px at 50% 0%, rgba(255, 201, 74, .28), transparent 70%), linear-gradient(160deg, rgba(255, 79, 216, .12), rgba(124, 92, 255, .1));
  border: 1.5px solid rgba(255, 201, 74, .45); }
.bn-pb-hero.is-course { background: radial-gradient(220px 120px at 50% 0%, rgba(108, 140, 255, .3), transparent 70%), linear-gradient(160deg, rgba(124, 92, 255, .14), rgba(43, 255, 198, .08)); border-color: rgba(108, 140, 255, .5); }
.bn-pb-hero b { font-size: 16px; font-weight: 900; line-height: 1.7; }
.bn-pb-hero small { font-size: 12.5px; line-height: 1.9; color: var(--bn-fg-muted); }
.bn-pb-ic { font-size: 40px; line-height: 1; }
.bn-pb-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 4px; }
.bn-pb-dots i, .bn-plan-strip .dots i { width: 14px; height: 14px; border-radius: 50%; background: var(--bn-line-strong); }
.bn-pb-dots i.on { background: linear-gradient(135deg, #FFC94A, #FF4FD8); box-shadow: 0 0 10px rgba(255, 201, 74, .6); animation: bnGoldPop .5s var(--bn-spring, ease) both; }
.bn-pb-dots i:nth-child(2) { animation-delay: .05s; } .bn-pb-dots i:nth-child(3) { animation-delay: .1s; } .bn-pb-dots i:nth-child(4) { animation-delay: .15s; }
.bn-pb-dots i:nth-child(5) { animation-delay: .2s; } .bn-pb-dots i:nth-child(6) { animation-delay: .25s; } .bn-pb-dots i:nth-child(n+7) { animation-delay: .3s; }
.bn-pb-p { margin: 14px 2px 0; font-size: 13.5px; line-height: 1.9; color: var(--bn-fg-muted); }
.bn-pb-cta { display: grid; gap: 8px; margin-top: 14px; }
.bn-pb-cta .btn { display: flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.5; }
.bn-pb-cta .btn small { font-size: 11.5px; font-weight: 700; opacity: .85; }
.bn-pb-until { margin-top: 12px; padding: 10px 12px; border-radius: 14px; font-size: 12.5px; text-align: center; background: var(--bn-surface-2); color: var(--bn-fg-muted); }
.bn-pb-until b { color: var(--bn-fg); }
.bn-pb .bn-cp-list { margin-top: 12px; }

/* نوارِ وضعیتِ طرح بالای نقشه */
.bn-plan-strip { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 12px; padding: 10px 14px; border-radius: 18px; text-align: right; font: inherit; color: var(--bn-fg); cursor: pointer;
  background: var(--bn-surface); border: 1.5px solid var(--bn-line-strong); box-shadow: var(--bn-shadow-soft); -webkit-tap-highlight-color: transparent; transition: transform .35s var(--bn-spring, ease); }
.bn-plan-strip:active { transform: scale(.98); }
.bn-plan-strip.is-warn { border-color: rgba(255, 201, 74, .6); background: linear-gradient(135deg, rgba(255, 201, 74, .14), rgba(255, 79, 216, .06)), var(--bn-surface); }
.bn-plan-strip .ic { font-size: 22px; flex-shrink: 0; }
.bn-plan-strip .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; line-height: 1.5; }
.bn-plan-strip .t b { font-size: 13.5px; font-weight: 900; }
.bn-plan-strip .t small { font-size: 11.5px; color: var(--bn-fg-muted); }
.bn-plan-strip .dots { display: flex; gap: 4px; }
.bn-plan-strip .dots i { width: 10px; height: 10px; }
.bn-plan-strip .dots i.on { background: var(--fill-teal, #2BFFC6); }
.bn-plan-strip .go { flex-shrink: 0; padding: 7px 12px; border-radius: 12px; font-size: 12.5px; font-weight: 900; background: var(--bn-ink, #F5F3FF); color: var(--bn-ink-fg, #0b0815); white-space: nowrap; }

/* ایستگاهِ خارج از طرح */
.node.course-locked .node-circle { filter: saturate(.6); }
.node.course-locked .node-premium-badge { background: #7c8cff; color: #0b0815; }

@media (max-width: 860px) {
  #bn-plan-strip { order: 1; }
}
@media (max-width: 720px) {
  .bn-tiers { grid-template-columns: 1fr; gap: 14px; padding: 0; }
  .bn-tier { padding: 18px 16px 14px; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name price" "sub sub" "feats feats"; align-items: center; gap: 4px 10px; }
  .bn-tier-name { grid-area: name; }
  .bn-tier-price { grid-area: price; justify-content: flex-end; }
  .bn-tier-price b { font-size: 24px; }
  .bn-tier-sub { grid-area: sub; }
  .bn-tier-feats { grid-area: feats; grid-template-columns: 1fr; gap: 3px; font-size: 12.5px; }
  .bn-tier-radio { display: none; }
  .bn-tier-badge { right: 16px; transform: none; }
  .bn-course-pick, .bn-plan-card { margin-left: 0; margin-right: 0; }
}
@media (prefers-reduced-motion: reduce) { .bn-tier.is-skel, .bn-pb-dots i.on, .bn-shake { animation: none; } }

/* ===== v3.7 — دوره‌ی «اولین درآمدت از کدنویسی» (به‌زودی) ===== */
.bn-track-tabs button[data-money] i { background: linear-gradient(135deg, #10b981, #f59e0b) !important; color: #fff !important; }
.bn-wpick-money .ic { background: linear-gradient(135deg, rgba(16, 185, 129, .22), rgba(245, 158, 11, .18)); }
.bn-mc [hidden] { display: none !important; }
.bn-mc-hero { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 20px; background: linear-gradient(135deg, rgba(16, 185, 129, .16), rgba(245, 158, 11, .1)); border: 1px solid rgba(16, 185, 129, .38); }
.bn-mc-orb { flex-shrink: 0; width: 56px; height: 56px; display: grid; place-items: center; font-size: 28px; border-radius: 18px; background: linear-gradient(135deg, #10b981, #f59e0b); box-shadow: 0 10px 26px -10px rgba(16, 185, 129, .8); }
.bn-mc-hero b { display: block; font-size: 15.5px; font-weight: 900; line-height: 1.7; }
.bn-mc-hero small { display: block; font-size: 13px; color: var(--bn-fg-muted); line-height: 1.9; }
.bn-mc-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; }
.bn-mc-pills span { display: inline-flex; align-items: baseline; gap: 5px; padding: 5px 11px; border-radius: 99px; font-size: 12px; font-weight: 700; color: var(--bn-fg-muted); background: var(--bn-surface-2); border: 1px solid var(--bn-line-strong); }
.bn-mc-pills span b { font-size: 14px; font-weight: 900; color: var(--bn-fg); }
.bn-mc-pills .wait { color: #fff; border-color: transparent; background: linear-gradient(135deg, #10b981, #f59e0b); }
.bn-mc-pills .wait b { color: #fff; }
.bn-mc-why { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 8px; }
.bn-mc-why li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 2; color: var(--bn-fg-muted); }
.bn-mc-why li i { font-style: normal; font-size: 17px; line-height: 1.7; flex-shrink: 0; }
.bn-mc-why li b { color: var(--bn-fg); }
.bn-mc-h { display: block; margin: 16px 2px 8px; font-size: 13.5px; font-weight: 900; }
.bn-mc-ch { border-radius: 16px; background: var(--bn-surface-2); border: 1px solid var(--bn-line-strong); margin-bottom: 8px; overflow: hidden; }
.bn-mc-ch summary { display: flex; align-items: center; gap: 10px; padding: 11px 12px; cursor: pointer; list-style: none; }
.bn-mc-ch summary::-webkit-details-marker { display: none; }
.bn-mc-ch summary::after { content: '⌄'; font-size: 16px; color: var(--bn-fg-soft); transition: transform .25s; }
.bn-mc-ch[open] summary::after { transform: rotate(180deg); }
.bn-mc-ch summary .ic { font-size: 22px; flex-shrink: 0; }
.bn-mc-ch summary .t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bn-mc-ch summary .t small { font-size: 11px; font-weight: 800; color: #10b981; }
.bn-mc-ch summary .t b { font-size: 14.5px; font-weight: 900; line-height: 1.7; }
.bn-mc-ch summary .t em { font-style: normal; font-size: 12px; color: var(--bn-fg-soft); }
.bn-mc-ch summary .n { flex-shrink: 0; font-size: 11.5px; font-weight: 800; padding: 3px 9px; border-radius: 99px; background: var(--bn-surface); color: var(--bn-fg-muted); }
.bn-mc-ch summary:focus-visible { outline: 2px solid var(--bn-accent-text); outline-offset: -2px; border-radius: 16px; }
.bn-mc-ch ol { list-style: none; margin: 0; padding: 0 10px 10px; display: grid; gap: 6px; }
.bn-mc-ch li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px; border-radius: 12px; background: var(--bn-surface); }
.bn-mc-ch li.on { box-shadow: inset 0 0 0 2px rgba(16, 185, 129, .7); }
.bn-mc-ch li .num { flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; font-weight: 900; background: var(--bn-surface-2); }
.bn-mc-ch li[data-boss] .num { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
.bn-mc-ch li div { min-width: 0; }
.bn-mc-ch li b { display: block; font-size: 13.5px; font-weight: 900; line-height: 1.8; }
.bn-mc-ch li small { display: block; font-size: 11.5px; color: var(--bn-fg-soft); }
.bn-mc-ch li p { margin: 5px 0 0; font-size: 12.5px; line-height: 1.95; color: var(--bn-fg-muted); }
.bn-mc-ch li p i { font-style: normal; }
.bn-mc-ready { padding: 2px 0 0; }
.bn-mc-ready > p { margin: 0 2px 8px; font-size: 12.5px; line-height: 1.95; color: var(--bn-fg-muted); }
.bn-mc-ready .row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: var(--bn-surface-2); margin-bottom: 6px; }
.bn-mc-ready .row .ic { font-size: 20px; flex-shrink: 0; }
.bn-mc-ready .row .t { flex: 1; min-width: 0; }
.bn-mc-ready .row b { display: block; font-size: 13px; font-weight: 900; }
.bn-mc-ready .row b em { font-style: normal; font-size: 10.5px; font-weight: 800; padding: 1px 7px; border-radius: 99px; color: #fff; background: linear-gradient(135deg, #8b5cf6, #ec4899); }
.bn-mc-ready .row small { display: block; font-size: 11.5px; color: var(--bn-fg-soft); }
.bn-mc-ready .bar { display: block; height: 6px; margin-top: 5px; border-radius: 99px; background: var(--bn-surface); overflow: hidden; }
.bn-mc-ready .bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #10b981, #f59e0b); }
.bn-mc-ready .pc { flex-shrink: 0; font-size: 13px; font-weight: 900; min-width: 38px; text-align: left; }
.bn-mc-p { margin: 14px 2px; font-size: 14px; line-height: 2.05; color: var(--bn-fg-muted); }
.bn-mc-deal { margin: 12px 0 4px; padding: 12px 14px; border-radius: 18px; border: 1.5px dashed rgba(255, 201, 74, .6); background: rgba(255, 201, 74, .1); font-size: 13.5px; line-height: 1.9; color: var(--bn-fg); }
.bn-mc-deal p { margin: 0 0 10px; }
.bn-mc-deal b { color: var(--bn-gold-text); }
.bn-mc-deal span { display: inline-block; font-weight: 800; font-size: 12.5px; color: var(--bn-fg-muted); }
.bn-mc-cta { display: grid; gap: 8px; }
.bn-mc-cta .is-done { opacity: .85; }
.bn-mc-note { margin: 14px 2px 2px; font-size: 11.5px; line-height: 2; color: var(--bn-fg-soft); }

/* ===== v3.8 — صفحه‌ی دوره‌ی «اولین درآمدت از کدنویسی» (موبایل‌اول) ===== */
.bn-money { --mc: #10b981; --mc2: #f59e0b; --mc-txt: #34d399; display: block; max-width: 720px; margin: 0 auto; padding: 12px 16px 120px; box-sizing: border-box; }
html[data-theme="light"] .bn-money { --mc-txt: #047857; }
.bn-money *, .bn-money *::before, .bn-money *::after { box-sizing: border-box; }
.bn-money [hidden] { display: none !important; }
.mc-loading, .mc-empty { display: grid; justify-items: center; gap: 12px; text-align: center; padding: 60px 10px; color: var(--bn-fg-muted); font-size: 14px; }
.mc-empty .ic { font-size: 48px; }
.mc-empty b { font-size: 17px; color: var(--bn-fg); }
.mc-empty p { margin: 0 0 6px; line-height: 2; }
.mc-spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--bn-line-strong); border-top-color: var(--mc); animation: mcSpin .8s linear infinite; }
@keyframes mcSpin { to { transform: rotate(360deg); } }

/* خونه‌ی دوره */
.mc-hero { padding: 16px; border-radius: 24px; background: linear-gradient(135deg, rgba(16, 185, 129, .18), rgba(245, 158, 11, .1)), var(--bn-surface); border: 1px solid rgba(16, 185, 129, .4); box-shadow: var(--bn-shadow-soft); }
.mc-hero-top { display: flex; align-items: center; gap: 14px; }
.mc-orb { flex-shrink: 0; width: 60px; height: 60px; display: grid; place-items: center; font-size: 30px; border-radius: 20px; background: linear-gradient(135deg, var(--mc), var(--mc2)); box-shadow: 0 10px 26px -10px rgba(16, 185, 129, .8); }
.mc-hero small { font-size: 12px; font-weight: 800; color: var(--mc-txt); }
.mc-hero h1 { margin: 2px 0; font-size: 20px; font-weight: 900; line-height: 1.6; }
.mc-hero p { margin: 0; font-size: 12.5px; color: var(--bn-fg-muted); }
.mc-prog { display: flex; align-items: center; gap: 10px; margin: 14px 0 12px; }
.mc-prog .bar { flex: 1; height: 9px; border-radius: 99px; background: var(--bn-surface-2); overflow: hidden; box-shadow: inset 0 0 0 1px var(--bn-line-strong); }
.mc-prog .bar i { display: block; height: 100%; min-width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--mc), var(--mc2)); transition: width .6s; }
.mc-prog .num { flex-shrink: 0; font-size: 12.5px; color: var(--bn-fg-muted); }
.mc-prog .num b { font-size: 15px; color: var(--bn-fg); }
.mc-go { display: flex !important; flex-direction: column; align-items: center; gap: 2px; line-height: 1.5; }
.mc-go small { font-size: 12px; font-weight: 700; opacity: .85; }
.mc-allDone { padding: 12px; border-radius: 16px; text-align: center; font-weight: 800; background: rgba(245, 158, 11, .14); }
.mc-preview { margin: 12px 0 0; padding: 10px 14px; border-radius: 16px; font-size: 12.5px; line-height: 1.95; color: var(--bn-fg-muted); background: rgba(139, 92, 246, .1); border: 1px dashed rgba(139, 92, 246, .5); }
.mc-preview b { color: var(--bn-fg); margin-left: 4px; }
.mc-how { margin: 14px 0 0; padding: 12px 14px; border-radius: 18px; background: var(--bn-surface); border: 1px solid var(--bn-line-strong); }
.mc-how > b { display: block; font-size: 13px; margin-bottom: 8px; }
.mc-how ol { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.mc-how li { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1; font-size: 12px; font-weight: 800; text-align: center; }
.mc-how li i { font-style: normal; font-size: 22px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: var(--bn-surface-2); }
.mc-how li.arr { flex: 0 0 auto; font-size: 16px; color: var(--bn-fg-soft); padding-bottom: 18px; }
.mc-h2 { margin: 22px 2px 10px; font-size: 16px; font-weight: 900; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.mc-h2 small { font-size: 12px; font-weight: 700; color: var(--bn-fg-soft); }
.mc-ch { margin-bottom: 14px; border-radius: 22px; background: var(--bn-surface); border: 1px solid var(--bn-line-strong); overflow: hidden; }
.mc-ch > header { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--bn-surface-2); }
.mc-ch > header .ic { font-size: 24px; flex-shrink: 0; }
.mc-ch > header div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mc-ch > header small { font-size: 11.5px; font-weight: 800; color: var(--mc-txt); }
.mc-ch > header b { font-size: 15.5px; font-weight: 900; line-height: 1.6; }
.mc-ch > header .cnt { flex-shrink: 0; font-size: 12px; font-weight: 900; padding: 4px 10px; border-radius: 99px; background: var(--bn-surface); color: var(--bn-fg-muted); }
.mc-ch > header .cnt.full { background: linear-gradient(135deg, var(--mc), var(--mc2)); color: #fff; }
.mc-ch ol { list-style: none; margin: 0; padding: 6px; display: grid; gap: 4px; }
.mc-l { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 10px; border: 0; border-radius: 16px; background: transparent; color: var(--bn-fg); font: inherit; text-align: right; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .15s, transform .2s; }
.mc-l:hover { background: var(--bn-surface-2); }
.mc-l:active { transform: scale(.985); }
.mc-l:focus-visible { outline: 2px solid var(--bn-accent-text); outline-offset: -2px; }
.mc-l .n { flex-shrink: 0; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-size: 13.5px; font-weight: 900; background: var(--bn-surface-2); box-shadow: inset 0 0 0 1px var(--bn-line-strong); }
.mc-l .t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.6; }
.mc-l .t b { font-size: 14.5px; font-weight: 800; }
.mc-l .t small { font-size: 12px; color: var(--bn-fg-soft); }
.mc-l .st { flex-shrink: 0; font-size: 12px; font-weight: 800; color: var(--bn-fg-soft); }
.mc-l .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.mc-l.is-done .n { background: linear-gradient(135deg, var(--mc), #059669); color: #fff; box-shadow: none; }
.mc-l.is-done .st { color: var(--mc-txt); }
.mc-l.is-next { background: rgba(16, 185, 129, .1); box-shadow: inset 0 0 0 1.5px rgba(16, 185, 129, .55); }
.mc-l.is-next .n { background: var(--mc); color: #fff; box-shadow: 0 0 0 4px rgba(16, 185, 129, .2); }
.mc-l.is-next .st { color: var(--mc-txt); }
.mc-l.is-boss .n { background: linear-gradient(135deg, var(--mc2), #fbbf24); box-shadow: none; }
.mc-l.is-focus { animation: mcFocus 1.4s ease-out 1; }
@keyframes mcFocus { 0%, 40% { background: rgba(245, 158, 11, .22); } }
.mc-foot { margin: 18px 4px 0; font-size: 11.5px; line-height: 2; color: var(--bn-fg-soft); }

/* صفحه‌ی درس */
.ml-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ml-back { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 8px 14px; border-radius: 99px; border: 1px solid var(--bn-line-strong); background: var(--bn-surface); color: var(--bn-fg); font: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ml-back:active { transform: scale(.97); }
.ml-pos { font-size: 12.5px; font-weight: 800; color: var(--bn-fg-soft); }
.ml-head { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.ml-head .ic { flex-shrink: 0; width: 52px; height: 52px; display: grid; place-items: center; font-size: 26px; border-radius: 17px; background: linear-gradient(135deg, rgba(16, 185, 129, .22), rgba(245, 158, 11, .16)); border: 1px solid rgba(16, 185, 129, .35); }
.ml-head div { flex: 1; min-width: 0; }
.ml-head small { font-size: 12px; font-weight: 800; color: var(--mc-txt); }
.ml-head h1 { margin: 0; font-size: 19px; font-weight: 900; line-height: 1.6; }
.ml-done { flex-shrink: 0; font-size: 11.5px; font-weight: 900; padding: 4px 10px; border-radius: 99px; color: #fff; background: var(--mc); }
.ml-steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; margin-bottom: 14px; border-radius: 18px; background: var(--bn-surface-2); border: 1px solid var(--bn-line-strong); }
.ml-steps button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 6px 4px; border: 0; border-radius: 14px; background: transparent; color: var(--bn-fg-muted); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .2s, color .2s; }
.ml-steps button i { font-style: normal; font-size: 18px; }
.ml-steps button span { display: flex; flex-direction: column; line-height: 1.35; font-size: 13.5px; font-weight: 900; text-align: right; }
.ml-steps button small { font-size: 10.5px; font-weight: 700; opacity: .75; }
.ml-steps button.is-on { background: var(--bn-surface); color: var(--bn-fg); box-shadow: 0 6px 16px rgba(0, 0, 0, .16), inset 0 0 0 1.5px rgba(16, 185, 129, .6); }
.ml-steps button:focus-visible { outline: 2px solid var(--bn-accent-text); outline-offset: 1px; }
.ml-lead { margin: 0 2px 14px; font-size: 15px; line-height: 2.1; font-weight: 600; }
.ml-card { margin-bottom: 12px; padding: 14px 16px; border-radius: 20px; background: var(--bn-surface); border: 1px solid var(--bn-line-strong); }
.ml-card h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 16px; font-weight: 900; line-height: 1.7; }
.ml-card h3 i { font-style: normal; font-size: 22px; flex-shrink: 0; }
.ml-card p { margin: 6px 0; font-size: 14.5px; line-height: 2.1; color: var(--bn-fg-muted); }
.ml-card ul { margin: 8px 0; padding: 0 18px 0 0; display: grid; gap: 4px; }
.ml-card li { font-size: 14px; line-height: 2; color: var(--bn-fg-muted); }
.ml-card li::marker { color: var(--mc); }
.ml-cmp { display: grid; gap: 8px; margin-top: 10px; }
.ml-cmp > div, .ml-tip, .ml-warn, .ml-ex { padding: 10px 12px; border-radius: 14px; }
.ml-cmp b, .ml-tip b, .ml-warn b, .ml-ex b { display: block; font-size: 12.5px; font-weight: 900; margin-bottom: 2px; }
.ml-cmp p, .ml-tip p, .ml-warn p { margin: 0; font-size: 13.5px; line-height: 2; }
.ml-cmp .bad { background: rgba(239, 68, 68, .1); border: 1px solid rgba(239, 68, 68, .3); }
.ml-cmp .good { background: rgba(16, 185, 129, .1); border: 1px solid rgba(16, 185, 129, .35); }
.ml-tip { margin-top: 10px; background: rgba(245, 158, 11, .1); border: 1px solid rgba(245, 158, 11, .35); }
.ml-warn { margin-top: 10px; background: rgba(239, 68, 68, .08); border: 1px solid rgba(239, 68, 68, .35); }
.ml-ex { margin-top: 10px; background: var(--bn-surface-2); font-size: 13.5px; line-height: 2; }
.ml-code { margin-top: 10px; border-radius: 14px; overflow: hidden; border: 1px solid var(--bn-line-strong); background: #0d0b18; }
.ml-code-bar { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; font-size: 12px; font-weight: 800; color: #b8b0d9; background: rgba(255, 255, 255, .05); }
.ml-code pre, .ml-tpl.is-code pre { margin: 0; padding: 12px; max-height: 320px; overflow: auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.7; color: #e8e4ff; text-align: left; white-space: pre; -webkit-overflow-scrolling: touch; }
.ml-copy { flex-shrink: 0; min-height: 34px; padding: 5px 12px; border-radius: 99px; border: 1px solid var(--bn-line-strong); background: var(--bn-surface); color: var(--bn-fg); font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; }
.ml-code .ml-copy { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .15); }
.ml-copy.is-ok { background: var(--mc) !important; color: #fff !important; border-color: transparent !important; }
.ml-next { display: grid; gap: 8px; margin: 18px 0 6px; text-align: center; }
.ml-next small { font-size: 12px; color: var(--bn-fg-soft); }
.ml-hint { text-align: center; font-size: 12.5px; color: var(--bn-fg-soft); margin: 14px 0 0; }

.ml-quiz { padding: 16px; border-radius: 22px; background: var(--bn-surface); border: 1px solid var(--bn-line-strong); }
.ml-qhead { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; font-weight: 800; color: var(--bn-fg-soft); }
.ml-qhead .dots { display: flex; gap: 5px; }
.ml-qhead .dots i { width: 22px; height: 6px; border-radius: 99px; background: var(--bn-line-strong); }
.ml-qhead .dots i.d { background: var(--mc); }
.ml-qhead .dots i.c { background: var(--mc2); }
.ml-quiz h3 { margin: 12px 0 14px; font-size: 16.5px; font-weight: 900; line-height: 1.9; }
.ml-opts { display: grid; gap: 8px; }
.ml-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 56px; padding: 12px 14px; border-radius: 16px; border: 1.5px solid var(--bn-line-strong); background: var(--bn-surface-2); color: var(--bn-fg); font: inherit; font-size: 14.5px; font-weight: 700; line-height: 1.8; text-align: right; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .15s, border-color .15s; }
.ml-opt:not([disabled]):active { transform: scale(.98); border-color: var(--mc); }
.ml-opt i { font-style: normal; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; color: #fff; }
.ml-opt.is-right { border-color: var(--mc); background: rgba(16, 185, 129, .14); }
.ml-opt.is-right i { background: var(--mc); }
.ml-opt.is-wrong { border-color: #ef4444; background: rgba(239, 68, 68, .1); }
.ml-opt.is-wrong i { background: #ef4444; }
.ml-opt.is-dim { opacity: .55; }
.ml-opt[disabled] { cursor: default; color: var(--bn-fg); }
.ml-why { margin-top: 12px; padding: 12px 14px; border-radius: 16px; }
.ml-why.ok { background: rgba(16, 185, 129, .12); border: 1px solid rgba(16, 185, 129, .4); }
.ml-why.no { background: rgba(245, 158, 11, .12); border: 1px solid rgba(245, 158, 11, .4); }
.ml-why b { font-size: 14px; }
.ml-why p { margin: 4px 0 0; font-size: 14px; line-height: 2; color: var(--bn-fg-muted); }
.ml-qdone, .ml-win { display: grid; justify-items: center; gap: 6px; padding: 22px 16px; border-radius: 22px; text-align: center; background: var(--bn-surface); border: 1px solid var(--bn-line-strong); }
.ml-qdone .ic, .ml-win .ic { font-size: 48px; }
.ml-qdone b, .ml-win > b { font-size: 18px; font-weight: 900; }
.ml-qdone p, .ml-win p { margin: 0; font-size: 14px; line-height: 2; color: var(--bn-fg-muted); }
.ml-win { gap: 10px; background: linear-gradient(135deg, rgba(16, 185, 129, .16), rgba(245, 158, 11, .1)), var(--bn-surface); border-color: rgba(16, 185, 129, .45); }
.ml-win .btn { width: 100%; }
.ml-rew { display: flex; gap: 8px; }
.ml-rew span { padding: 5px 14px; border-radius: 99px; font-weight: 900; font-size: 14px; background: var(--bn-surface-2); border: 1px solid var(--bn-line-strong); }

.ml-mission { padding: 16px; border-radius: 22px; background: linear-gradient(135deg, rgba(16, 185, 129, .16), rgba(245, 158, 11, .08)), var(--bn-surface); border: 1px solid rgba(16, 185, 129, .45); }
.ml-mhead { display: flex; align-items: center; gap: 12px; }
.ml-mhead > i { font-style: normal; font-size: 30px; }
.ml-mhead small { font-size: 12px; font-weight: 800; color: var(--mc-txt); }
.ml-mhead h3 { margin: 0; font-size: 17px; font-weight: 900; line-height: 1.7; }
.ml-mission > p { margin: 8px 0 0; font-size: 14px; line-height: 2; color: var(--bn-fg-muted); }
.ml-tool { margin-top: 12px; padding: 14px; border-radius: 20px; background: var(--bn-surface); border: 1px solid var(--bn-line-strong); }
.ml-checks, .ml-tpls { margin-top: 12px; padding: 14px; border-radius: 20px; background: var(--bn-surface); border: 1px solid var(--bn-line-strong); }
.ml-checks-h { display: flex; align-items: center; justify-content: space-between; font-size: 15px; }
.ml-checks-h span { font-size: 12.5px; font-weight: 900; padding: 3px 10px; border-radius: 99px; background: var(--bn-surface-2); }
.ml-sub { display: block; margin: 4px 0 8px; font-size: 12px; line-height: 1.9; color: var(--bn-fg-soft); }
.ml-checks ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ml-chk { display: flex; align-items: flex-start; gap: 12px; width: 100%; min-height: 52px; padding: 12px; border-radius: 14px; border: 1.5px solid var(--bn-line-strong); background: var(--bn-surface-2); color: var(--bn-fg); font: inherit; font-size: 14px; font-weight: 600; line-height: 1.9; text-align: right; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ml-chk .box { flex-shrink: 0; width: 26px; height: 26px; margin-top: 1px; border-radius: 8px; display: grid; place-items: center; font-weight: 900; color: #fff; border: 2px solid var(--bn-fg-soft); }
.ml-chk.is-on { border-color: rgba(16, 185, 129, .6); background: rgba(16, 185, 129, .1); }
.ml-chk.is-on .box { background: var(--mc); border-color: var(--mc); }
.ml-chk.is-on > span:last-child { color: var(--bn-fg-muted); text-decoration: line-through; text-decoration-color: rgba(16, 185, 129, .7); }
.ml-chk:focus-visible { outline: 2px solid var(--bn-accent-text); outline-offset: 1px; }
.ml-tpls-h { display: block; font-size: 15px; margin-bottom: 8px; }
.ml-tpls-h small { display: block; font-size: 12px; font-weight: 600; color: var(--bn-fg-soft); }
.ml-tpl { margin-top: 8px; border-radius: 14px; border: 1px solid var(--bn-line-strong); overflow: hidden; }
.ml-tpl-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; background: var(--bn-surface-2); }
.ml-tpl-h b { font-size: 13.5px; }
.ml-tpl pre { margin: 0; padding: 12px; font: inherit; font-size: 13.5px; line-height: 2; white-space: pre-wrap; word-break: break-word; color: var(--bn-fg-muted); max-height: 280px; overflow: auto; }
.ml-tpl.is-code pre { background: #0d0b18; }
.ml-fin { display: grid; gap: 8px; margin: 18px 0 6px; text-align: center; }
.ml-fin small { font-size: 12.5px; line-height: 2; color: var(--bn-fg-soft); }
.ml-fin.is-done > b { font-size: 15px; color: var(--mc-txt); }

/* ابزارها */
.mt-head { display: flex; flex-direction: column; margin-bottom: 10px; }
.mt-head b { font-size: 15px; }
.mt-head small { font-size: 12px; color: var(--bn-fg-soft); }
.mt-q { margin-top: 10px; }
.mt-q > b { display: block; font-size: 13.5px; margin-bottom: 6px; }
.mt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mt-chip { min-height: 42px; padding: 8px 14px; border-radius: 99px; border: 1.5px solid var(--bn-line-strong); background: var(--bn-surface-2); color: var(--bn-fg); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mt-chip.is-on { border-color: var(--mc); background: rgba(16, 185, 129, .16); font-weight: 900; }
.mt-res { display: flex; gap: 12px; margin-top: 14px; padding: 14px; border-radius: 16px; background: linear-gradient(135deg, rgba(16, 185, 129, .16), rgba(245, 158, 11, .1)); border: 1px solid rgba(16, 185, 129, .45); }
.mt-res .ic { font-size: 30px; }
.mt-res small { font-size: 11.5px; font-weight: 800; color: var(--mc-txt); }
.mt-res b { display: block; font-size: 15px; line-height: 1.7; }
.mt-res em { display: block; font-style: normal; font-size: 12.5px; font-weight: 800; color: var(--bn-fg-muted); }
.mt-res p { margin: 4px 0 0; font-size: 13.5px; line-height: 2; color: var(--bn-fg-muted); }
.mt-form { display: grid; gap: 10px; }
.mt-form label { display: grid; gap: 4px; font-size: 13px; font-weight: 800; }
.mt-form input { width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 14px; border: 1.5px solid var(--bn-line-strong); background: var(--bn-surface-2); color: var(--bn-fg); font: inherit; font-size: 16px; text-align: right; }
.mt-form input:focus { outline: none; border-color: var(--mc); }
.mt-out { margin-top: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.mt-out > .btn, .mt-out > p { grid-column: 1 / -1; }
.mt-pk { display: grid; justify-items: center; gap: 2px; padding: 10px 4px; border-radius: 14px; background: var(--bn-surface-2); border: 1px solid var(--bn-line-strong); text-align: center; min-width: 0; }
.mt-pk span { font-size: 12px; font-weight: 800; }
.mt-pk b { font-size: 15px; font-weight: 900; word-break: break-all; }
.mt-pk small { font-size: 10.5px; color: var(--bn-fg-soft); }
.mt-pk.mid { border-color: var(--mc); background: rgba(16, 185, 129, .12); }
.mt-note, .mt-empty { margin: 4px 0 0; font-size: 12px; line-height: 1.9; color: var(--bn-fg-soft); text-align: center; }

/* برگه‌ی «همه‌ی دوره‌ها»: فهرستِ دوره‌ها بالای لیست */
.bn-wpick-idx { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 12px; margin: 0 0 4px; border-bottom: 1px solid var(--bn-line-strong); }
.bn-wpick-idx::-webkit-scrollbar { display: none; }
.bn-wpick-idx button { flex: 1 1 auto; justify-content: center; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 7px 12px; border-radius: 99px; border: 1px solid var(--bn-line-strong); background: var(--bn-surface-2); color: var(--bn-fg); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.bn-wpick-idx button i { font-style: normal; }
.bn-wpick-idx button.is-money { border-color: rgba(16, 185, 129, .55); background: rgba(16, 185, 129, .12); }
.bn-wpick-g { scroll-margin-top: 8px; }
.bn-wpick-money:not(.is-locked) { border: 1.5px solid rgba(16, 185, 129, .55) !important; background: rgba(16, 185, 129, .08) !important; }

/* نوارِ «دوره‌ی درآمد» زیرِ انتخاب‌گرِ دنیا (از v3.27 روی دسکتاپ هم؛ تب‌های مسیر دیگه نیستن) */
@media screen {
  .bn-money-strip { order: 5; display: flex; align-items: stretch; gap: 6px; margin: 4px 0 6px; }
  .bn-money-strip .ms-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 18px; border: 1px solid rgba(16, 185, 129, .4); background: linear-gradient(135deg, rgba(16, 185, 129, .14), rgba(245, 158, 11, .08)), var(--bn-surface); color: var(--bn-fg); font: inherit; text-align: right; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .bn-money-strip .ms-main:active { transform: scale(.98); }
  .bn-money-strip .ic { font-size: 22px; flex-shrink: 0; }
  .bn-money-strip .t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.5; }
  .bn-money-strip .t small { font-size: 11px; font-weight: 800; color: #34d399; }
  html[data-theme="light"] .bn-money-strip .t small { color: #047857; }
  .bn-money-strip .t b { font-size: 13.5px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bn-money-strip .go { flex-shrink: 0; font-size: 12px; font-weight: 900; padding: 6px 10px; border-radius: 99px; background: var(--bn-surface-2); }
  .bn-money-strip.is-open .go { background: #10b981; color: #fff; }
  .bn-money-strip .ms-x { flex-shrink: 0; width: 40px; border-radius: 14px; border: 1px solid var(--bn-line-strong); background: var(--bn-surface); color: var(--bn-fg-soft); font: inherit; font-size: 14px; cursor: pointer; }
}
@media (min-width: 640px) {
  .bn-money { padding-top: 24px; }
  .mc-hero { padding: 22px; }
  .mc-hero h1 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) { .mc-spin, .mc-l.is-focus { animation: none !important; } }
.mt-val { font-style: normal; font-size: 12px; font-weight: 800; color: var(--mc-txt); min-height: 0; }
.mt-val:empty { display: none; }
/* حروفِ فارسی داخلِ کد با وزیرمتن (فونتِ مونواسپیس حروفِ فارسی رو جدا‌جدا و با فاصله نشون می‌ده) */
@font-face { font-family: 'BnCodeFa'; src: url('/assets/fonts/Vazirmatn-Variable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+200C-200F, U+FB50-FDFF, U+FE70-FEFF; }
.ml-code pre, .ml-code code, .ml-tpl.is-code pre { font-family: 'BnCodeFa', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ===== v3.9 — تیکتِ پشتیبانی بدونِ ورود (مهمان) ===== */
.auth-help { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin: 14px 0 0; padding: 12px 14px; min-height: 48px; border-radius: 16px; border: 1px dashed var(--bn-line-strong, rgba(255,255,255,.18)); background: transparent; color: var(--bn-fg-muted, var(--text-mid)); font: inherit; font-size: 13px; line-height: 1.8; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.auth-help b { color: var(--bn-accent-text, var(--neon-teal)); }
.auth-help:hover { border-style: solid; }
.sup-track { margin: 18px 0 10px; padding: 14px; border-radius: 16px; background: var(--bn-surface-2, rgba(255,255,255,.04)); border: 1px solid var(--bn-line-strong, var(--border-soft)); }
.sup-track > b { display: block; font-size: 14px; margin-bottom: 2px; }
.sup-track > small { display: block; font-size: 12px; line-height: 1.9; color: var(--bn-fg-soft, var(--text-low)); margin-bottom: 10px; }
.sup-track-row { display: flex; gap: 8px; align-items: stretch; }
.sup-track-row .sup-input { margin: 0; flex: 1; min-width: 0; text-align: left; font-size: 16px; letter-spacing: .5px; }
.sup-track-row .btn { flex-shrink: 0; }
.sup-guest-login { margin-top: 14px; font-size: 13px; line-height: 2; color: var(--bn-fg-muted, var(--text-mid)); text-align: center; }
.sup-linkbtn { background: none; border: 0; padding: 0 2px; font: inherit; font-weight: 800; color: var(--bn-accent-text, var(--neon-teal)); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.sup-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }
.sup-bad { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239, 68, 68, .18); }
.sup-privacy { margin: 10px 2px 0; font-size: 12px; color: var(--bn-fg-soft, var(--text-low)); text-align: center; }
.sup-code { display: inline-block; font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-weight: 800; letter-spacing: .6px; padding: 2px 10px; border-radius: 8px; background: var(--bn-surface-2, rgba(255,255,255,.06)); border: 1px solid var(--bn-line-strong, var(--border-soft)); color: var(--bn-fg, var(--text-hi)); user-select: all; -webkit-user-select: all; }
.sup-done { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 26px 4px 8px; }
.sup-done .ic { font-size: 52px; }
.sup-done h2 { font-size: 21px; font-weight: 900; margin: 0; }
.sup-done p { margin: 0; font-size: 14px; line-height: 2; color: var(--bn-fg-muted, var(--text-mid)); }
.sup-done-code { display: grid; justify-items: center; gap: 8px; width: 100%; margin: 8px 0 6px; padding: 16px; border-radius: 18px; background: rgba(43, 255, 198, .08); border: 1px solid rgba(43, 255, 198, .35); }
.sup-done-code small { font-size: 12.5px; color: var(--bn-fg-muted, var(--text-mid)); }
.sup-done-code .sup-code { font-size: 20px; padding: 8px 16px; }
.sup-done .btn-block { width: 100%; }
.sup-wait { margin: -4px 0 14px; padding: 10px 14px; border-radius: 14px; font-size: 13px; line-height: 1.9; background: rgba(255, 201, 74, .1); border: 1px solid rgba(255, 201, 74, .3); color: var(--bn-fg-muted, var(--text-mid)); }
.sup-thread-head .sup-meta { margin-top: 8px; }
/* کارت‌های دپارتمان: عنوان و توضیح زیرِ هم، و توی گوشی دوتایی و جمع‌وجور (برای تیکتِ مهمان و کاربر) */
[data-screen="support"] .sup-dept-opt .t, [data-screen="support"] .sup-dept-opt .d { display: block; }
[data-screen="support"] .sup-dept-opt .t { line-height: 1.6; }
@media (max-width: 520px) {
  [data-screen="support"] .sup-dept-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  [data-screen="support"] .sup-dept-opt { padding: 12px 8px; min-height: 104px; }
  [data-screen="support"] .sup-dept-opt .ic { font-size: 22px; margin-bottom: 4px; }
  [data-screen="support"] .sup-dept-opt .t { font-size: 13px; }
  [data-screen="support"] .sup-dept-opt .d { font-size: 11px; }
}
[data-screen="support"] .sup-input, [data-screen="support"] .sup-textarea { font-size: 16px; } /* جلوی زوم شدنِ خودکارِ آیفون موقعِ تایپ */

/* ===== v3.10 — قوانین و مقررات ===== */
.terms { display: block; max-width: 760px; margin: 0 auto; padding: 14px 16px 120px; box-sizing: border-box; }
.terms * { box-sizing: border-box; }
.terms-hero { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: 24px; background: var(--bn-surface); border: 1px solid var(--bn-line-strong); box-shadow: var(--bn-shadow-soft); }
.terms-hero-ic { flex-shrink: 0; width: 54px; height: 54px; display: grid; place-items: center; font-size: 28px; border-radius: 18px; background: var(--bn-surface-2); }
.terms-hero h1 { margin: 0 0 6px; font-size: 21px; font-weight: 900; line-height: 1.6; }
.terms-hero p { margin: 0; font-size: 13.5px; line-height: 2; color: var(--bn-fg-muted); }
.terms-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.terms-meta span { font-size: 12px; font-weight: 800; padding: 4px 11px; border-radius: 99px; background: var(--bn-surface-2); border: 1px solid var(--bn-line-strong); color: var(--bn-fg-muted); }
.terms-toc { margin: 14px 0; padding: 14px; border-radius: 20px; background: var(--bn-surface); border: 1px solid var(--bn-line-strong); }
.terms-toc > b { display: block; font-size: 14px; margin-bottom: 8px; }
.terms-toc > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.terms-toc a { display: flex; align-items: center; min-height: 42px; padding: 8px 12px; border-radius: 12px; background: var(--bn-surface-2); color: var(--bn-fg); font-size: 13px; font-weight: 700; line-height: 1.6; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.terms-toc a:hover { background: var(--bn-line-strong); }
.terms-sec { scroll-margin-top: 84px; margin-bottom: 12px; padding: 16px 18px; border-radius: 20px; background: var(--bn-surface); border: 1px solid var(--bn-line-strong); transition: box-shadow .4s; }
.terms-sec.is-flash { box-shadow: 0 0 0 3px var(--bn-accent-text, #2BFFC6); }
.terms-sec h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 16.5px; font-weight: 900; line-height: 1.7; }
.terms-sec h2 i { font-style: normal; flex-shrink: 0; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; font-size: 14px; background: var(--bn-surface-2); border: 1px solid var(--bn-line-strong); }
.terms-sec p { margin: 6px 0; font-size: 14px; line-height: 2.1; color: var(--bn-fg-muted); }
.terms-sec b { color: var(--bn-fg); }
.terms-sec ul, .terms-sec ol { margin: 6px 0; padding: 0 20px 0 0; display: grid; gap: 6px; }
.terms-sec li { font-size: 14px; line-height: 2.05; color: var(--bn-fg-muted); }
.terms-sec a { color: var(--bn-accent-text, #2BFFC6); font-weight: 700; }
.terms-note { margin: 10px 0 4px; padding: 11px 14px; border-radius: 14px; font-size: 13.5px; line-height: 2; color: var(--bn-fg-muted); }
.terms-note b { display: block; margin-bottom: 2px; }
.terms-note.ok { background: rgba(16, 185, 129, .1); border: 1px solid rgba(16, 185, 129, .35); }
.terms-note.warn { background: rgba(245, 158, 11, .1); border: 1px solid rgba(245, 158, 11, .4); }
.terms-refund { border-color: rgba(245, 158, 11, .45); }
.terms-bug { border-color: rgba(255, 79, 216, .4); background: linear-gradient(135deg, rgba(255, 79, 216, .08), rgba(43, 255, 198, .05)), var(--bn-surface); }
.terms-foot { text-align: center; margin-top: 16px; }
.bn-terms-note { text-align: center; font-size: 11.5px; color: var(--text-low, var(--bn-fg-soft)); margin-top: 6px; }
.bn-terms-note a, .auth-terms a, .footer-bottom .copy a { color: var(--bn-accent-text, #2BFFC6); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 420px) { .terms-toc > div { grid-template-columns: minmax(0, 1fr); } .terms-hero { flex-direction: column; } }
[data-screen="support"] .sup-dept-grid .sup-dept-opt:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 0; }
.terms-sec ol { list-style: persian; }
/* بازگشتِ وجه کنارِ دکمه‌ی پرداخت (فقط صفحه‌ی خرید) */
.bn-refund-note { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border-radius: 14px; font-size: 12.5px; line-height: 1.95; text-align: right; color: var(--text-mid, var(--bn-fg-muted)); background: rgba(255, 201, 74, .08); border: 1px solid rgba(255, 201, 74, .3); }
.bn-refund-note > span:first-child { flex-shrink: 0; font-size: 15px; line-height: 1.7; }
.bn-refund-note b { color: var(--text-hi, var(--bn-fg)); }
.bn-refund-note a { color: var(--bn-accent-text, #2BFFC6); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }