/* ===== یول آکادمی — تم روشن/تاریک + لایهٔ جذابیت سراسری ===== */

p, li, dd, blockquote, td, th,
.desc, .description, .card p, .article-body, .article-body p,
.hero p, .feature-card p, .course-body p, .service-item p{
  text-align:justify;
  text-justify:inter-word;
}
/* این چند مورد باید همیشه وسط‌چین بمونن (مثل عدد+برچسبِ آمار زیر 8+، یا توضیح زیر عنوان کارت‌های
   ورود هوشمند) — قبلاً همین‌جا با justify بازنویسی می‌شدن و باعث می‌شد وسط‌چینی که در استایل خود صفحه
   تنظیم شده بود عملاً هیچ‌وقت اعمال نشه، چون این فایل روی همه‌ی صفحات و بعد از استایل صفحه لود می‌شه. */
.entry-card p, .section-head p, .stat-item p{
  text-align:center;
}

html{transition:background-color .25s ease;}
body{transition:background-color .25s ease,color .25s ease;}
header,.card,.box,.panel,.tab-btn,footer,.welcome-card,.stat-box,.exam-card,.quick-link{
  transition:background-color .25s ease,border-color .25s ease,color .25s ease,box-shadow .25s ease,transform .2s ease;
}

:root{
  --yol-radius:16px;
  --yol-radius-sm:12px;
  --yol-shadow:0 8px 28px rgba(22,48,92,.07);
  --yol-shadow-hover:0 14px 36px rgba(22,48,92,.12);
  --yol-ring:0 0 0 3px rgba(22,48,92,.12);
  /* رنگ متن معادلِ board/board-dark — چون board/board-dark در تم تاریک خودشون تیره می‌شن
     و اگر مستقیم برای رنگ نوشته استفاده بشن، نوشته روی پس‌زمینه‌ی تیره ناخوانا می‌شه.
     در تم روشن دقیقاً همون board/board-dark هستن، در تم تاریک به یک رنگ روشنِ خوانا تغییر می‌کنن. */
  --board-text: var(--board);
  --board-dark-text: var(--board-dark);
}

/* ===== یکدست‌سازی شعاع گوشه و سایه‌ی کارت‌ها و دکمه‌ها در کل سایت =====
   قبلاً هر صفحه برای کارت‌های خودش (story-card، dash-card، pkg-card، form-card و...)
   مقدار border-radius/box-shadow جدا و متفاوتی تعریف کرده بود (بین ۹ تا ۲۰ پیکسل و
   بلور/شفافیت‌های مختلف برای سایه). چون این فایل بعد از استایل هر صفحه لود می‌شود،
   با !important همان الگوی طراحیِ یکپارچه‌ی موجود (--yol-radius/--yol-shadow) را
   روی همه‌ی نمونه‌های کارت و دکمه‌ی اصلی سایت اعمال می‌کنیم، بدون تغییر رنگ/پدینگ/محتوای آن‌ها. */
.card, .box, .feature-card, .course-card, .service-item, .entry-card,
.article-card, .exam-card, .stat-box, .quick-link, .tip-card, .welcome-card,
.story-card, .dash-card, .topic-card, .stat-card, .prob-card, .path-card,
.why-card, .role-card, .feat-card, .stage-card, .seo-card, .child-card,
.value-card, .test-card, .step-card, .project-card, .form-card, .day-card,
.ma-card, .kb-card, .app-card, .anim-plan-card, .success-card, .quiz-card,
.q-card, .pkg-card, .lp-card, .guide-card, .consultant-card, .book-card,
.answer-sheet-card, .anim-exam-card, .amart-card{
  border-radius:var(--yol-radius) !important;
}
.card, .box, .feature-card, .course-card, .article-card, .exam-card,
.story-card, .dash-card, .topic-card, .stat-card, .prob-card, .path-card,
.why-card, .role-card, .feat-card, .stage-card, .seo-card, .child-card,
.value-card, .test-card, .step-card, .project-card, .form-card, .day-card,
.ma-card, .kb-card, .app-card, .anim-plan-card, .success-card, .quiz-card,
.q-card, .pkg-card, .lp-card, .guide-card, .consultant-card, .book-card,
.answer-sheet-card, .anim-exam-card, .amart-card{
  box-shadow:var(--yol-shadow) !important;
}
.card:hover, .feature-card:hover, .course-card:hover, .article-card:hover, .exam-card:hover, .quick-link:hover,
.story-card:hover, .dash-card:hover, .topic-card:hover, .stat-card:hover, .prob-card:hover, .path-card:hover,
.why-card:hover, .role-card:hover, .feat-card:hover, .stage-card:hover, .seo-card:hover, .child-card:hover,
.value-card:hover, .test-card:hover, .step-card:hover, .project-card:hover, .form-card:hover, .day-card:hover,
.ma-card:hover, .kb-card:hover, .app-card:hover, .anim-plan-card:hover, .success-card:hover, .quiz-card:hover,
.q-card:hover, .pkg-card:hover, .lp-card:hover, .guide-card:hover, .consultant-card:hover, .book-card:hover,
.answer-sheet-card:hover, .anim-exam-card:hover, .amart-card:hover{
  box-shadow:var(--yol-shadow-hover) !important;
  transform:translateY(-2px);
}
.stat-box:hover{transform:translateY(-2px);box-shadow:var(--yol-shadow) !important;}

.btn-submit, .nav-cta, .btn-view, .btn-assign, .btn-primary, .btn-p,
.btn, .btn-secondary, .btn-ghost, .btn-main, .buy-btn, .btn-gold,
button.btn-submit, a.btn-submit, a.nav-cta{
  border-radius:10px !important;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, filter .15s ease !important;
}
.btn-submit:hover, .nav-cta:hover, .btn-view:hover, .btn-primary:hover, .btn-p:hover{
  transform:translateY(-1px);
  filter:brightness(1.05);
}

input[type="text"], input[type="tel"], input[type="password"], input[type="email"],
input[type="number"], input[type="datetime-local"], input[type="date"],
select, textarea{
  border-radius:10px !important;
  transition:border-color .2s ease, box-shadow .2s ease !important;
}
input:focus, select:focus, textarea:focus{
  outline:none;
  border-color:var(--board, #16305C) !important;
  box-shadow:var(--yol-ring);
}

header{
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.section-head h2, .section-title, .page-hero h1, .hero h1, .hero h2{
  letter-spacing:-0.02em;
}

.page-hero, .inner-hero, .subhero{position:relative;overflow:hidden;}
.page-hero::after, .inner-hero::after{
  content:"";
  position:absolute;
  width:420px;height:420px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(232,196,104,.18), transparent 70%);
  top:-120px; left:-80px;
  pointer-events:none;
}

table{border-collapse:separate;border-spacing:0;}
tr:hover td{background:rgba(22,48,92,.03);}

.tab-btn, .filter-btn, .chip{
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease !important;
}
.tab-btn:hover, .filter-btn:hover, .chip:hover{transform:translateY(-1px);}

.quick-links a, .quick-link{border-radius:var(--yol-radius-sm) !important;}
footer{border-top:1px solid var(--line, #DDE3EE);}
::selection{background:rgba(22,48,92,.18);color:var(--ink, #16223A);}
html{scroll-behavior:smooth;}

html[data-theme="dark"]{
  --board:#0B1830;
  --board-dark:#060F22;
  --chalk:#F2F5FA;
  --chalk-yellow:#F0D48A;
  --accent:#7FB8EA;
  --ink:#EDF1F7;
  --ink-soft:#B6C0D6;
  --paper:#0F1626;
  --paper-soft:#161F33;
  --pen-red:#E38A76;
  --line:#2A3550;
  --green:#63C08C;
  --yol-shadow:0 8px 28px rgba(0,0,0,.35);
  --yol-shadow-hover:0 14px 36px rgba(0,0,0,.45);
  --yol-ring:0 0 0 3px rgba(127,184,234,.2);
  --board-text: var(--accent);
  --board-dark-text: var(--accent);
}
html[data-theme="dark"] header{background:rgba(15,20,35,.9);}
html[data-theme="dark"] img{filter:brightness(.94) contrast(1.02);}
html[data-theme="dark"] tr:hover td{background:rgba(255,255,255,.03);}
html[data-theme="dark"] ::selection{background:rgba(127,184,234,.28);color:#fff;}

.theme-switch{
  --w:54px; --h:28px;
  position:relative;
  width:var(--w); height:var(--h);
  border:none; border-radius:100px; cursor:pointer; padding:0;
  background:linear-gradient(90deg,#E8C468,#16305C);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.25);
  flex-shrink:0;
  -webkit-tap-highlight-color:transparent;
}
.theme-switch::before,
.theme-switch::after{
  position:absolute; top:50%; transform:translateY(-50%);
  font-size:11px; line-height:1; pointer-events:none;
}
.theme-switch::before{content:"☀️"; inset-inline-start:6px;}
.theme-switch::after{content:"🌙"; inset-inline-end:6px;}
.theme-switch .knob{
  position:absolute; top:3px; inset-inline-start:3px;
  width:22px; height:22px; border-radius:50%;
  background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
  transition:inset-inline-start .28s ease, background .28s ease;
}
html[data-theme="dark"] .theme-switch{
  background:linear-gradient(90deg,#1B2740,#050B18);
}
html[data-theme="dark"] .theme-switch .knob{
  inset-inline-start:calc(var(--w) - 22px - 3px);
  background:#0F1626;
}
.theme-switch:focus-visible{outline:2px solid var(--accent,#7FB8EA);outline-offset:2px;}

.auth-card, .login-card, .form-card{
  box-shadow:var(--yol-shadow-hover);
  border-radius:20px !important;
}
.badge, .cat-badge, .exam-badge, .score-pill{
  border-radius:100px !important;
}
@media(max-width:700px){
  .card, .box, .feature-card, .course-card, .service-item, .entry-card,
  .article-card, .exam-card, .stat-box, .quick-link, .tip-card, .welcome-card,
  .story-card, .dash-card, .topic-card, .stat-card, .prob-card, .path-card,
  .why-card, .role-card, .feat-card, .stage-card, .seo-card, .child-card,
  .value-card, .test-card, .step-card, .project-card, .form-card, .day-card,
  .ma-card, .kb-card, .app-card, .anim-plan-card, .success-card, .quiz-card,
  .q-card, .pkg-card, .lp-card, .guide-card, .consultant-card, .book-card,
  .answer-sheet-card, .anim-exam-card, .amart-card{border-radius:14px !important;}
}

/* ===== فونت یکپارچه Vazirmatn برای همه‌ی عناصر فرم/انتخابی (select، option، دکمه‌ها و...) =====
   این قانون سراسری در همه‌ی صفحات (چون theme.css همه‌جا لود می‌شه) تضمین می‌کنه که
   لیست‌های کشویی (پنل دانش‌آموز، برنامه‌ریزی، انتخاب پایه و ...) دیگه با فونت پیش‌فرض
   سیستم (شبیه Arial/Tahoma) نمایش داده نشن. */
html, body,
input, select, textarea, button, option, optgroup,
.tab-btn, .filter-btn, .chip, .btn-submit, .nav-cta{
  font-family:'Vazirmatn', Tahoma, sans-serif !important;
}

/* ===== رنگ سلیقه‌ای/تولد کاربر =====
   با انتخاب یکی از رنگ‌های طلایی/آبی‌نفتی/سبز پاستیلی/بنفش/یاسی/گریژ یا انتخاب ماه تولد،
   یک لایه‌ی ظریف شخصی‌سازی روی عناصر انتخابی و تعاملی سایت اعمال می‌شه. */
:root{
  --accent-user: var(--board, #16305C);
  --accent-user-soft: rgba(22,48,92,.14);
}
html[data-theme="dark"]{
  --accent-user: var(--accent, #7FB8EA);
  --accent-user-soft: rgba(127,184,234,.18);
}

.yol-accent-widget{position:relative;display:inline-flex;align-items:center;}
.yol-accent-btn{
  width:28px;height:28px;border-radius:50%;border:2px solid rgba(255,255,255,.5);
  cursor:pointer;padding:0;margin-inline-start:8px;flex-shrink:0;
  background:conic-gradient(from 180deg,#C9A227,#1F4E5F,#8FAE7D,#6C4A9C,#B497D6,#A79A8B,#C9A227);
  box-shadow:0 2px 6px rgba(0,0,0,.25);
  transition:transform .15s ease;
}
.yol-accent-btn:hover{transform:scale(1.08);}
html[data-accent-key] .yol-accent-btn{background:var(--accent-user);}

.yol-accent-panel{
  display:none;position:absolute;top:calc(100% + 10px);inset-inline-end:0;
  min-width:230px;background:var(--paper,#fff);color:var(--ink,#16223A);
  border:1px solid var(--line,#DDE3EE);border-radius:14px;
  box-shadow:0 14px 36px rgba(0,0,0,.18);padding:14px;z-index:400;
  font-size:12.5px;
}
.yol-accent-panel.open{display:block;}
.yol-accent-panel .yol-accent-title{font-weight:800;font-size:12.5px;margin-bottom:8px;color:var(--ink,#16223A);}
.yol-accent-swatches{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;}
.yol-accent-swatch{
  width:26px;height:26px;border-radius:50%;border:2px solid rgba(0,0,0,.08);
  cursor:pointer;padding:0;position:relative;transition:transform .15s ease;
}
.yol-accent-swatch:hover{transform:scale(1.12);}
.yol-accent-swatch.active{border-color:var(--ink,#16223A);box-shadow:0 0 0 2px var(--paper,#fff),0 0 0 4px var(--ink,#16223A);}
.yol-accent-divider{height:1px;background:var(--line,#DDE3EE);margin:10px 0;}
.yol-accent-panel select{
  width:100%;padding:7px 8px;border-radius:8px;border:1.5px solid var(--line,#DDE3EE);
  background:var(--paper,#fff);color:var(--ink,#16223A);font-size:12.5px;
}
.yol-accent-reset{
  margin-top:10px;width:100%;padding:6px 8px;border-radius:8px;border:1.5px dashed var(--line,#DDE3EE);
  background:transparent;color:var(--ink-soft,#5B6B87);cursor:pointer;font-size:11.5px;
}
.yol-accent-reset:hover{border-color:var(--accent-user);color:var(--accent-user);}

/* اعمال ظریف رنگ منتخب روی عناصر انتخابی/تعاملی سایت */
html[data-accent-key] .theme-switch{background:linear-gradient(90deg,var(--accent-user),var(--board,#16305C));}
html[data-theme="dark"][data-accent-key] .theme-switch{background:linear-gradient(90deg,var(--accent-user),#050B18);}

html[data-accent-key] input:focus, html[data-accent-key] select:focus, html[data-accent-key] textarea:focus{
  border-color:var(--accent-user) !important;
  box-shadow:0 0 0 3px var(--accent-user-soft) !important;
}
html[data-accent-key] ::selection{background:var(--accent-user-soft);color:var(--ink,#16223A);}

html[data-accent-key] .tab-btn:hover, html[data-accent-key] .filter-btn:hover, html[data-accent-key] .chip:hover{
  border-color:var(--accent-user) !important;color:var(--accent-user) !important;
}
html[data-accent-key] .tab-btn.active{
  background:var(--accent-user) !important;border-color:var(--accent-user) !important;
}
html[data-accent-key] .chip input:checked + span{color:var(--accent-user);}

html[data-accent-key] .page-hero::after, html[data-accent-key] .inner-hero::after, html[data-accent-key] .subhero::after{
  background:radial-gradient(circle, var(--accent-user-soft), transparent 70%) !important;
}

.yol-accent-strip{position:fixed;top:0;inset-inline:0;height:3px;z-index:500;pointer-events:none;
  background:var(--accent-user);opacity:0;transition:opacity .3s ease;}
html[data-accent-key] .yol-accent-strip{opacity:1;}

/* ===== دکمه‌ی تغییر تم/رنگ داخل هدر، کنار دکمه‌ی «ورود/ثبت‌نام» =====
   این اسلات، بخش ثابت و همیشگی HTML خودِ صفحه است (نه یک المان شناور که با
   جاوااسکریپت به body اضافه می‌شود)، پس هیچ اسکریپت دیگری آن را حذف نمی‌کند. */
[data-theme-switch]{display:flex !important;align-items:center;gap:8px;flex-shrink:0;}
.yol-header-theme-slot .theme-switch{--w:46px;--h:24px;}
.yol-header-theme-slot .theme-switch .knob{width:18px;height:18px;}
html[data-theme="dark"] .yol-header-theme-slot .theme-switch .knob{
  inset-inline-start:calc(var(--w) - 18px - 3px);
}
.yol-header-theme-slot .yol-accent-btn{width:24px;height:24px;margin-inline-start:0;}
.yol-header-theme-slot .yol-accent-panel{
  top:calc(100% + 12px);
  inset-inline-end:0;
  left:auto;
  right:0;
}
@media(max-width:800px){
  [data-theme-switch]{margin-inline-start:4px !important;gap:6px;}
}
/* حلقه‌ی ظریف دور دکمه‌ی رنگ‌ها تا روی هدرهای خیلی روشن هم واضح دیده بشه، نه فقط یک بردر کم‌رنگ */
.yol-accent-btn{box-shadow:0 0 0 1px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.25) !important;}

/* ===== دکمه‌ی شناور و مستقل تغییر تم/رنگ (.yol-theme-fab) =====
   کاملاً خارج از هدر/منو، ثابت روی صفحه، همیشه در دسترس و مستقل از شلوغی نوار بالا.
   عمداً از top/left فیزیکی استفاده شده (نه inset-inline-start) تا صرف‌نظر از
   جهت RTL صفحه، همیشه دقیقاً «گوشه‌ی بالا-چپ» واقعی صفحه باشد.
   position/display/visibility/opacity/z-index با !important قفل شده‌اند تا هیچ
   استایل دیگری در سایت (حتی به‌اشتباه) نتواند این ویجت را پنهان کند. */
.yol-theme-fab{
  position:fixed !important;
  top:14px !important;
  left:14px !important;
  right:auto !important;
  bottom:auto !important;
  z-index:2147483000 !important;
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
  align-items:center;
  gap:8px;
  padding:6px 8px;
  border-radius:100px;
  background:var(--paper,#fff);
  box-shadow:0 6px 22px rgba(22,34,58,.18), 0 0 0 1px rgba(22,34,58,.06);
  transition:background-color .25s ease, box-shadow .25s ease;
}
html[data-theme="dark"] .yol-theme-fab{
  background:#0F1626;
  box-shadow:0 6px 22px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08);
}
.yol-theme-fab .theme-switch{margin:0;}
.yol-theme-fab .yol-accent-widget{margin:0;}
.yol-theme-fab .yol-accent-btn{margin-inline-start:0;}
/* دکمه حالا بالای صفحه است، پس پنل رنگ‌ها باید رو به پایین باز شود (نه بالا که از دید خارج می‌شد) */
.yol-theme-fab .yol-accent-panel{
  top:calc(100% + 10px);
  bottom:auto;
  inset-inline-end:auto;
  right:auto;
  left:0;
}
@media(max-width:480px){
  .yol-theme-fab{top:10px !important; left:10px !important; padding:5px 7px;}
}