/* styles.css — تمام دیزاین و ظاهر این پروژه در همین فایل است */

/* تنظیمات پایه صفحه */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: #1B2A3A;
  background-color: #EAF4FB;
  background-image: radial-gradient(rgba(0,145,213,0.09) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* ══════════════════════════════
   نوار خبری بالای صفحه — اطلاعیه بسته شدن ثبت‌نام و اعلام نتایج
══════════════════════════════ */
.news-ticker {
  display: flex;
  align-items: stretch;
  background: linear-gradient(90deg, #005F8E, #0091D5);
  overflow: hidden;
  position: relative;
  z-index: 40;
}
.news-ticker-label {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 7px;
  padding: 9px 16px;
  background: #E0A62E; color: #1B2A3A;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  white-space: nowrap;
}
.news-ticker-track {
  flex: 1; overflow: hidden;
  display: flex; align-items: center;
}
.news-ticker-track:hover .news-ticker-list { animation-play-state: paused; }
.news-ticker-list {
  display: flex; align-items: center; gap: 36px;
  padding-left: 36px;
  white-space: nowrap;
  animation: newsTickerScroll 40s linear infinite;
}
.news-ticker-item {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12.5px; font-weight: 500;
  color: #fff;
}
.news-ticker-item i { color: #F5D98B; font-size: 12px; }
.news-ticker-item a { color: #F5D98B; text-decoration: underline; text-underline-offset: 2px; }
.news-ticker-item a:hover { color: #fff; }
.news-ticker-sep { color: rgba(255,255,255,0.4); }
@keyframes newsTickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (max-width: 560px) {
  .news-ticker-label span:last-child { display: none; }
}

/* ══════════════════════════════
   پنجره فرم تماس (Web3Forms) — ارسال مستقیم از مرورگر
══════════════════════════════ */
.contact-overlay {
  display: none; position: fixed; inset: 0; z-index: 110;
  background: rgba(15,23,32,0.55); backdrop-filter: blur(4px);
  align-items: center; justify-content: center; padding: 20px;
}
.contact-overlay.open { display: flex; }
.contact-card {
  position: relative;
  background: #fff; border-radius: 20px; border: 1px solid rgba(27,42,58,0.08);
  padding: 32px; width: 100%; max-width: 420px; text-align: left;
  box-shadow: 0 30px 80px -20px rgba(10,20,35,0.35);
  max-height: 90vh; overflow-y: auto;
}
.contact-close-btn {
  position: absolute; top: 16px; right: 16px;
  width: 30px; height: 30px; border-radius: 50%;
  border: none; background: #EAF4FB; color: #5C6B7A;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 13px; transition: background 0.15s, color 0.15s;
}
.contact-close-btn:hover { background: #dbe9f5; color: #1B2A3A; }
.contact-icon {
  width: 50px; height: 50px; border-radius: 50%; margin-bottom: 14px;
  background: linear-gradient(135deg, #0091D5, #005F8E);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; color: #fff;
}
.contact-title { font-family: 'Space Grotesk', sans-serif; font-size: 19px; font-weight: 700; color: #1B2A3A; margin-bottom: 6px; }
.contact-subtitle { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12.5px; color: #5C6B7A; line-height: 1.6; margin-bottom: 22px; }

.contact-field { margin-bottom: 14px; }
.contact-label {
  display: block; font-family: 'Space Mono', monospace; font-size: 10px; color: #5C6B7A;
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px;
}
.contact-input {
  width: 100%; padding: 10px 13px; border-radius: 10px;
  border: 1px solid rgba(27,42,58,0.14); background: #F7FAFD; color: #1B2A3A;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; outline: none;
  transition: border-color 0.15s, background 0.15s; box-sizing: border-box;
}
.contact-input:focus { border-color: #0091D5; background: #fff; }
.contact-textarea { resize: vertical; min-height: 84px; font-family: inherit; }
.contact-honeypot { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

.contact-submit-btn {
  width: 100%; padding: 13px; border-radius: 12px; margin-top: 4px;
  background: #0091D5; color: #fff; border: none;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: background 0.15s, opacity 0.15s;
}
.contact-submit-btn:hover { background: #0078B2; }
.contact-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.contact-status {
  margin-top: 12px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12.5px;
  text-align: center; min-height: 16px;
}
.contact-status.success { color: #16a34a; }
.contact-status.error { color: #dc2626; }

/* ══════════════════════════════
   پنجره لودینگ قبل از صفحه‌ی نتایج — ۲ ثانیه، با آیکون و نوار پیشرفت
══════════════════════════════ */
.results-loading-overlay {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: linear-gradient(160deg, #0A0E14 0%, #10233a 55%, #0091D5 130%);
  align-items: center; justify-content: center;
}
.results-loading-overlay.open { display: flex; }
.results-loading-card { text-align: center; padding: 20px; animation: resultsLoadingIn 0.4s ease both; }
@keyframes resultsLoadingIn { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }
.results-loading-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(224,166,46,0.15); border: 2px solid #E0A62E;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  animation: resultsLoadingPulse 1.1s ease-in-out infinite;
}
.results-loading-icon i { color: #E0A62E; font-size: 22px; }
@keyframes resultsLoadingPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
.results-loading-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 18px; color: #fff; margin-bottom: 6px; }
.results-loading-sub { font-family: 'Space Mono', monospace; font-size: 10.5px; color: rgba(255,255,255,0.55); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 24px; }
.results-loading-bar-track {
  width: 220px; height: 4px; border-radius: 4px; background: rgba(255,255,255,0.15);
  margin: 0 auto; overflow: hidden;
}
.results-loading-bar-fill { height: 100%; width: 0%; border-radius: 4px; background: linear-gradient(90deg, #E0A62E, #0091D5); }

/* ══════════════════════════════
   حالت بارگذاری جستجوی نتایج — اسپینر و انیمیشن ورود نتیجه
══════════════════════════════ */
.results-spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(0,145,213,0.15); border-top-color: #0091D5;
  animation: resultsSpin 0.8s linear infinite;
  margin: 0 auto 16px;
}
@keyframes resultsSpin { to { transform: rotate(360deg); } }
.results-reveal { animation: resultsReveal 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes resultsReveal {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ══════════════════════════════
   صفحه درباره سازنده — عکس و بج شناور روی هیرو
══════════════════════════════ */
.about-photo {
  width: 220px; height: 220px; object-fit: cover;
  border-radius: 28px;
  border: 3px solid #E0A62E;
  box-shadow: 0 24px 60px -18px rgba(27,42,58,0.35);
}
.hero-about-badge {
  position: absolute; bottom: -18px; left: -14px; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  background: #fff; border-radius: 14px; padding: 7px 14px 7px 7px;
  box-shadow: 0 14px 34px -10px rgba(27,42,58,0.28);
  text-decoration: none; cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.hero-about-badge:hover { transform: translateY(-3px); box-shadow: 0 20px 44px -12px rgba(27,42,58,0.34); }
.hero-about-badge-photo {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
  border: 2px solid #E0A62E; flex-shrink: 0;
}
.hero-about-badge-text { display: flex; flex-direction: column; line-height: 1.25; }
.hero-about-badge-eyebrow { font-family: 'Space Mono', monospace; font-size: 8.5px; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em; }
.hero-about-badge-name { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 11.5px; color: #1B2A3A; }
.hero-about-badge-arrow { color: #E0A62E; font-size: 11px; margin-left: 1px; transition: transform 0.18s ease; }
.hero-about-badge:hover .hero-about-badge-arrow { transform: translateX(3px); }
@media (max-width: 979px) {
  .hero-about-badge { position: static; margin: 16px auto 0; }
}

/* ══════════════════════════════
   نوار بالای صفحه اصلی — لوگو و لینک‌ها
══════════════════════════════ */
.site-nav {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #E3EBF2;
}
.site-nav-inner {
  max-width: 1180px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between;
}
.site-nav-brand { display: flex; align-items: center; gap: 10px; }
.site-nav-logo { width: 28px; height: 28px; border-radius: 8px; object-fit: cover; }
.site-nav-name { font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 700; color: #1B2A3A; letter-spacing: -0.2px; }

.site-nav-links { display: flex; align-items: center; gap: 6px; }
.site-nav-icon {
  width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  color: #5C6B7A; font-size: 14px; text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.site-nav-icon:hover { background: rgba(0,145,213,0.08); color: #0091D5; }
.site-nav-cta {
  margin-left: 8px; padding: 9px 18px; border-radius: 10px;
  background: #0091D5; color: #fff; text-decoration: none;
  font-family: 'Space Grotesk', sans-serif; font-size: 12.5px; font-weight: 600;
  transition: background 0.15s ease;
}
.site-nav-cta:hover { background: #0078B2; }
.site-nav-cta-results {
  margin-left: 0; background: #E0A62E; color: #1B2A3A;
  display: flex; align-items: center; gap: 6px;
  animation: navResultsPulse 2.4s ease-in-out infinite;
}
@keyframes navResultsPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224,166,46,0.5); }
  50% { box-shadow: 0 0 0 6px rgba(224,166,46,0); }
}
.site-nav-cta-results:hover { background: #c9932a; }
.site-nav-cta-results i { font-size: 11px; }
@media (max-width: 720px) {
  .site-nav-cta-results span.results-label-full { display: none; }
}
@media (max-width: 560px) {
  .site-nav-name { display: none; }
  .site-nav-icon:nth-child(2), .site-nav-icon:nth-child(3) { display: none; }
}

/* نقوش خط‌های طلایی پشت عنوان صفحه اول (شبیه پرتو آفتاب) */
.sun-rays { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.sun-rays svg { position: absolute; top: -60px; right: -60px; width: 520px; height: 520px; opacity: 0.12; }

/* انیمیشن ظاهر شدن نرم عناصر هنگام لود صفحه */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp 0.5s ease both; }
.delay-1 { animation-delay: 80ms; }
.delay-2 { animation-delay: 160ms; }
.delay-3 { animation-delay: 240ms; }
.delay-4 { animation-delay: 320ms; }
.delay-5 { animation-delay: 400ms; }

/* بلند شدن کارت‌ها هنگام هاور کردن موس، با سایه رنگی به‌جای سایه خاکستری معمولی */
.lift { position: relative; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; cursor: pointer; }
.lift:hover { transform: translateY(-3px); box-shadow: 0 14px 32px -10px rgba(0,145,213,0.28); }

/* کارت‌های دانشگاه و رشته — پس‌زمینه کمی درجه‌دار به‌جای سفید خالص */
.uni-card, .major-card, .soft-card {
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFDFF 100%);
}

/* نشان کوچک تیک، گوشه بالا-راست کارت انتخاب‌شده */
.select-check {
  position: absolute; top: -8px; right: -8px; z-index: 2;
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg, #0091D5, #005F8E);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; box-shadow: 0 4px 10px -1px rgba(0,145,213,0.5);
  opacity: 0; transform: scale(0.4);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.card-selected .select-check { opacity: 1; transform: scale(1); }

/* برچسب کوچک شهر روی کارت دانشگاه */
.city-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'Space Mono', monospace; font-size: 10.5px; color: #5C6B7A;
  background: #EAF4FB; border: 1px solid #D8E3EA; border-radius: 20px;
  padding: 3px 9px; margin-top: 9px;
}

/* جعبه رنگی دور آیکون هر رشته */
.major-icon-box {
  width: 34px; height: 34px; border-radius: 10px;
  background: rgba(0,145,213,0.08);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px; transition: background 0.18s ease;
}
.card-selected .major-icon-box { background: rgba(0,145,213,0.18); }

/* شماره دایره‌ای کنار عنوان هر قدم (به‌جای برچسب ساده STEP) */
.step-head { display: flex; align-items: center; gap: 13px; margin-bottom: 20px; }
.step-num {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #0091D5, #005F8E);
  color: #fff; font-family: 'Space Mono', monospace; font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px -2px rgba(0,145,213,0.4);
}

/* نوار آمار کوچک زیر توضیح صفحه اول */
.hero-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.hero-stat-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'Space Mono', monospace; font-size: 11px; color: #0078B2;
  background: rgba(0,145,213,0.07); border: 1px solid rgba(0,145,213,0.18);
  border-radius: 8px; padding: 6px 12px;
}
.hero-stat-chip strong { color: #0091D5; font-weight: 700; }
.hero-stat-chip i { font-size: 10px; opacity: 0.7; }
.hero-stat-chip { transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; }
.hero-stat-chip:hover { background: rgba(0,145,213,0.16); border-color: rgba(0,145,213,0.4); transform: translateY(-2px); }

/* پیکان روی دکمه "شروع تمرین" کمی جابجا می‌شود هنگام هاور */
.btn-arrow { display: inline-block; transition: transform 0.18s ease; }
#btn-start:not(:disabled):hover .btn-arrow { transform: translateX(3px); }

/* ══════════════════════════════
   هیرو صفحه اول — دو ستونه: متن + نمونه کوچک صفحه انترویو
══════════════════════════════ */
.hero-v2 { position: relative; overflow: hidden; background: #FFFFFF; border-bottom: 1px solid #E3EBF2; }
.hero-v2-inner {
  max-width: 1180px; margin: 0 auto; padding: 64px 24px 80px;
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr; gap: 46px;
}
@media (min-width: 980px) {
  .hero-v2-inner { grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 36px; padding: 76px 24px 96px; }
}

/* کارت نمونه — یک نسخه کوچک از صفحه انترویو زنده، فقط برای نمایش */
.hero-mock-wrap { position: relative; display: flex; justify-content: center; }
.hero-mock {
  width: 100%; max-width: 400px;
  background: #0A0E14; border-radius: 20px; padding: 14px;
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 44px 90px -28px rgba(15,32,48,0.42), 0 14px 34px -16px rgba(0,145,213,0.22);
  transform: rotate(1.4deg);
  transition: transform 0.35s ease;
}
.hero-mock-wrap:hover .hero-mock { transform: rotate(0deg) translateY(-3px); }

.hero-mock-topbar { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 12px; }
.hero-mock-dots { display: flex; gap: 5px; }
.hero-mock-dots span { width: 6px; height: 6px; border-radius: 50%; background: #2D3748; }
.hero-mock-rec { display: flex; align-items: center; gap: 5px; font-family: 'Space Mono', monospace; font-size: 9px; color: #6b7d92; letter-spacing: 0.05em; }
.hero-mock-rec .dot { width: 5px; height: 5px; border-radius: 50%; background: #ef4444; }

.hero-mock-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hero-mock-tile { position: relative; border-radius: 13px; overflow: hidden; aspect-ratio: 3.2 / 4; background: #161B22; border: 1px solid rgba(255,255,255,0.06); }
.hero-mock-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-mock-tile.user-tile {
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse 200px 180px at 30% 20%, rgba(224,166,46,0.15), transparent),
              linear-gradient(160deg, #171c26, #0c0f16);
}
.hero-mock-user-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #E0A62E, #B07C1A);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 12px;
}
.hero-mock-caption { position: absolute; left: 8px; right: 8px; bottom: 32px; }
.hero-mock-cap-tag {
  display: inline-block; font-family: 'Space Mono', monospace; font-size: 7px; font-weight: 700;
  color: #5EC4F5; background: rgba(0,145,213,0.18); border: 1px solid rgba(0,145,213,0.3);
  padding: 2px 5px; border-radius: 4px; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.05em;
}
.hero-mock-cap-text { font-family: 'Space Grotesk', sans-serif; font-size: 9.5px; font-weight: 600; color: #f1f5f9; line-height: 1.35; }
.hero-mock-nametag {
  position: absolute; left: 8px; bottom: 8px; font-family: 'Space Grotesk', sans-serif; font-size: 8px; color: #fff;
  background: rgba(10,14,20,0.6); padding: 3px 7px; border-radius: 6px; display: flex; align-items: center; gap: 4px;
}
.hero-mock-nametag .dot { width: 5px; height: 5px; border-radius: 50%; background: #22c55e; }

.hero-mock-controls { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 12px; }
.hero-mock-ctrl { width: 28px; height: 28px; border-radius: 9px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; color: #8b98a9; font-size: 10.5px; }
.hero-mock-ctrl.end { background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.3); color: #f87171; }

/* نشان شناور بالای کارت نمونه */
.hero-mock-float {
  position: absolute; top: -14px; right: 6px; z-index: 2;
  background: #fff; border-radius: 12px; padding: 8px 13px;
  box-shadow: 0 14px 34px -10px rgba(27,42,58,0.28);
  display: flex; align-items: center; gap: 8px;
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 11.5px; color: #1B2A3A;
}
.hero-mock-float i { color: #0091D5; font-size: 11px; }

/* ══════════════════════════════
   بنر «نتایج اعلام شد» — بالای هیرو، خیلی واضح و قابل کلیک
══════════════════════════════ */
.results-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
  width: calc(100% - 48px); max-width: 1180px; margin: 28px auto 0;
  background: linear-gradient(90deg, #10233a, #0091D5);
  border-radius: 16px; padding: 14px 20px;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 14px 34px -14px rgba(0,145,213,0.45);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.results-banner:hover { transform: translateY(-2px); box-shadow: 0 20px 44px -14px rgba(0,145,213,0.55); }
.results-banner-badge {
  flex-shrink: 0; display: flex; align-items: center; gap: 7px;
  background: #E0A62E; color: #1B2A3A; padding: 6px 13px; border-radius: 999px;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 12px;
  animation: resultsBannerPulse 2.2s ease-in-out infinite;
}
@keyframes resultsBannerPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224,166,46,0.55); }
  50% { box-shadow: 0 0 0 9px rgba(224,166,46,0); }
}
.results-banner-text {
  flex: 1; min-width: 220px;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; color: #fff;
}
.results-banner-cta {
  flex-shrink: 0; display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.12);
  padding: 8px 14px; border-radius: 10px;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 12.5px; color: #fff;
}
.results-banner-cta i { font-size: 11px; transition: transform 0.18s ease; }
.results-banner:hover .results-banner-cta i { transform: translateX(3px); }
@media (max-width: 640px) {
  .results-banner { padding: 12px 16px; margin-top: 20px; }
  .results-banner-text { font-size: 12px; }
}

/* ══════════════════════════════
   پنل شناور شامل قدم‌های انتخاب — روی نوار آیه قرار می‌گیرد
══════════════════════════════ */
.tool-section { position: relative; padding: 0 24px 60px; }
.tool-panel {
  position: relative; z-index: 2;
  max-width: 980px; margin: -64px auto 0;
  background: #FFFFFF; border-radius: 26px; border: 1px solid #E3EBF2;
  box-shadow: 0 44px 100px -32px rgba(15,42,61,0.2);
  padding: 44px 40px 40px;
}
@media (max-width: 640px) {
  .tool-panel { margin-top: -40px; padding: 30px 20px 26px; border-radius: 20px; }
}
.tool-panel-divider { height: 1px; background: #E3EBF2; margin: 30px 0 26px; }

/* انیمیشن چرخش فلش‌کارت */
.flip-container { perspective: 1000px; }
.flip-inner { position: relative; transform-style: preserve-3d; transition: transform 0.5s ease; }
.flip-inner.flipped { transform: rotateY(180deg); }
.flip-front, .flip-back { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip-back { transform: rotateY(180deg); position: absolute; inset: 0; }

/* حالت فوکوس برای کیبورد (دسترسی‌پذیری) */
:focus-visible { outline: 2px solid #0091D5; outline-offset: 3px; border-radius: 6px; }

/* هر صفحه پنهان است مگر اینکه کلاس active داشته باشد */
.screen { display: none; }
.screen.active { display: block; }

.progress-bar-inner { transition: width 0.4s ease; }


/* کارت انتخاب‌شده (دانشگاه یا رشته) */
.card-selected { border-color: #0091D5 !important; background: #EAF4FB !important; }
.card-selected .card-icon { color: #0091D5 !important; }

/* رنگ نشان‌های وضعیت سوال (جدید / در حال یادگیری / آشنا / یادگرفته) */
.badge-new      { background:#EAF4FB; color:#5C6B7A; border:1px solid #D8E3EA; }
.badge-learning { background:#FFF4D6; color:#B07C1A; border:1px solid #F5D98B; }
.badge-familiar { background:#E0F0FF; color:#0078B2; border:1px solid #B3D9F5; }
.badge-mastered { background:#E2F5E9; color:#1A7A3C; border:1px solid #A3D9B5; }

/* آیه قرآن در صفحه اول */
.ayah-section {
  background: linear-gradient(160deg, #0F2A3D 0%, #0A1E2E 100%);
  position: relative;
  overflow: hidden;
  padding: 56px 24px 130px;
}
@media (max-width: 640px) {
  .ayah-section { padding: 44px 24px 90px; }
}
.ayah-pattern {
  position: absolute; inset: 0; opacity: 0.06; pointer-events: none;
}
.ayah-inner {
  max-width: 720px; margin: 0 auto; position: relative; z-index: 1; text-align: center;
}
.ayah-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.12em;
  color: #F5D98B; text-transform: uppercase;
  background: rgba(224,166,46,0.12); border: 1px solid rgba(224,166,46,0.3);
  padding: 6px 14px; border-radius: 20px; margin-bottom: 24px;
}
.ayah-arabic {
  font-family: 'Amiri Quran', 'Amiri', serif;
  font-size: clamp(24px, 4.2vw, 36px);
  line-height: 2.2;
  color: #F5D98B;
  direction: rtl;
  margin-bottom: 20px;
}
.ayah-english {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(14px, 2vw, 17px);
  line-height: 1.8;
  color: #cfe0ee;
  font-style: italic;
  max-width: 560px;
  margin: 0 auto 18px;
}
.ayah-citation {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  color: #6b93ab;
  letter-spacing: 0.05em;
}
.ayah-divider {
  width: 40px; height: 2px; background: #E0A62E;
  margin: 20px auto; border-radius: 2px; opacity: 0.7;
}

/* صفحه انترویو زنده — شبیه Zoom */
#screen-mock {
  display: none;
  flex-direction: column;
  height: 100vh;
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(0,145,213,0.10), transparent),
    radial-gradient(ellipse 700px 500px at 100% 110%, rgba(224,166,46,0.06), transparent),
    #0A0E14;
  overflow: hidden;
}
#screen-mock.active { display: flex; }

/* نوار بالای صفحه انترویو */
.call-topbar {
  background: rgba(10,14,20,0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 13px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.call-leave-btn {
  color: #8b98a9; background: none; border: none; cursor: pointer;
  font-size: 13px; display: flex; align-items: center; gap: 7px;
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 500;
  transition: color 0.15s; padding: 6px 10px; border-radius: 8px;
}
.call-leave-btn:hover { color: #e8eef5; background: rgba(255,255,255,0.05); }

/* نشانگر ضبط قرمز کنار تایمر */
.rec-indicator {
  display: flex; align-items: center; gap: 6px;
  font-family: 'Space Mono', monospace; font-size: 11px; color: #ef4444;
  background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.25);
  padding: 4px 10px; border-radius: 20px;
}
.rec-dot { width: 6px; height: 6px; border-radius: 50%; background: #ef4444; animation: recBlink 1.6s ease-in-out infinite; }
@keyframes recBlink { 0%,100%{opacity:1;} 50%{opacity:0.25;} }

.call-progress-track { height: 3px; background: rgba(255,255,255,0.05); flex-shrink: 0; }
.call-progress-fill { height: 100%; background: linear-gradient(to right, #0091D5, #E0A62E); transition: width 0.4s ease; }

/* دو کارت ویدیو (انترویوگیرنده و کاربر) هم‌اندازه و بزرگ */
.call-stage-v2 {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 16px;
}
@media (max-width: 780px) {
  .call-stage-v2 { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; overflow-y: auto; }
}

.call-tile-v2 {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: #12161F;
  min-height: 240px;
  box-shadow: 0 20px 60px -20px rgba(0,0,0,0.5);
  transition: border-color 0.25s, box-shadow 0.25s;
}
/* وقتی انترویوگیرنده در حال صحبت است، دور کارتش روشن می‌شود */
.call-tile-v2.speaking {
  border-color: rgba(0,145,213,0.7);
  box-shadow: 0 0 0 3px rgba(0,145,213,0.25), 0 20px 60px -20px rgba(0,0,0,0.6);
}

/* عکس انترویوگیرنده کل کارت را می‌پوشاند، مثل یک ویدیوی واقعی */
.interviewer-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
  background: linear-gradient(160deg, #1a2332, #0d1219);
}
.tile-scrim-top {
  position: absolute; top: 0; left: 0; right: 0; height: 90px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.55), transparent);
  pointer-events: none;
}
.tile-scrim-bottom {
  position: absolute; bottom: 0; left: 0; right: 0; height: 62%;
  background: linear-gradient(to top, rgba(6,9,14,0.94) 10%, rgba(6,9,14,0.65) 45%, transparent 100%);
  pointer-events: none;
}

/* دکمه کوچک "خواندن سوال" بالای کارت انترویوگیرنده */
.tile-icon-btn {
  position: absolute; top: 14px; right: 14px; z-index: 5;
  width: 38px; height: 38px; border-radius: 12px;
  background: rgba(18,22,31,0.6); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.12);
  color: #cbd5e1; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.15s; font-size: 14px;
}
.tile-icon-btn:hover { background: rgba(0,145,213,0.35); border-color: rgba(0,145,213,0.5); color: #fff; }

/* نشان "در حال صحبت" بالای کارت */
.tile-live-badge {
  position: absolute; top: 14px; left: 14px; z-index: 5;
  display: flex; align-items: center; gap: 6px;
  background: rgba(18,22,31,0.6); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px; padding: 5px 11px 5px 9px;
  font-family: 'Space Mono', monospace; font-size: 10px; color: #94a3b8;
  letter-spacing: 0.05em;
}
.tile-live-badge .mini-dot { width: 6px; height: 6px; border-radius: 50%; background: #64748b; }
.tile-live-badge .mini-dot.speaking { background: #22c55e; animation: recBlink 1s ease-in-out infinite; }

/* متن سوال، پایین کارت انترویوگیرنده */
.tile-caption { position: absolute; left: 22px; right: 22px; bottom: 62px; z-index: 4; }
.tile-caption-eyebrow {
  display: inline-block;
  font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700;
  color: #5EC4F5; letter-spacing: 0.1em; text-transform: uppercase;
  background: rgba(0,145,213,0.15); border: 1px solid rgba(0,145,213,0.3);
  padding: 3px 9px; border-radius: 6px; margin-bottom: 10px;
}
.tile-caption-text {
  font-family: 'Space Grotesk', sans-serif; font-size: clamp(17px, 2.1vw, 23px);
  font-weight: 600; color: #f1f5f9; line-height: 1.4;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}

/* برچسب اسم پایین هر کارت (انترویوگیرنده و کاربر) */
.tile-nametag {
  position: absolute; left: 16px; bottom: 14px; z-index: 5;
  display: flex; align-items: center; gap: 8px;
  background: rgba(10,14,20,0.55); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px; padding: 7px 12px;
  max-width: calc(100% - 32px);
}
.tile-nametag .live-dot { width: 7px; height: 7px; border-radius: 50%; background: #64748b; flex-shrink: 0; }
.tile-nametag .live-dot.active { background: #22c55e; animation: recBlink 1.4s ease-in-out infinite; }
.tile-nametag-name { font-family: 'Space Grotesk', sans-serif; font-size: 12.5px; font-weight: 600; color: #f1f5f9; line-height: 1.3; }
.tile-nametag-role { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 10px; color: #94a3b8; line-height: 1.3; }

/* نوار صدای کوچک، وقتی انترویوگیرنده صحبت می‌کند */
.mini-wave { display: flex; align-items: center; gap: 2px; height: 12px; margin-left: 2px; }
.mini-wave-bar { width: 2.5px; background: #22c55e; border-radius: 1px; height: 100%; transform: scaleY(0.3); transform-origin: bottom; }
.mini-wave.active .mini-wave-bar:nth-child(1) { animation: waveB 0.7s ease-in-out infinite 0.0s; }
.mini-wave.active .mini-wave-bar:nth-child(2) { animation: waveB 0.7s ease-in-out infinite 0.15s; }
.mini-wave.active .mini-wave-bar:nth-child(3) { animation: waveB 0.7s ease-in-out infinite 0.3s; }
@keyframes waveB { 0%,100%{transform:scaleY(0.25);} 50%{transform:scaleY(1);} }

/* کارت دوربین کاربر */
.user-tile-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 500px 400px at 30% 20%, rgba(224,166,46,0.16), transparent),
    radial-gradient(ellipse 500px 400px at 80% 90%, rgba(0,145,213,0.14), transparent),
    linear-gradient(160deg, #171c26, #0c0f16);
}
/* ویدیوی وب‌کم — مثل آینه برعکس نشان داده می‌شود */
#webcam-feed {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: none; transform: scaleX(-1);
}
/* وقتی کمره خاموش است این آواتار نشان داده می‌شود */
.user-placeholder {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; z-index: 2;
}
.user-avatar-big {
  width: 96px; height: 96px; border-radius: 50%;
  background: linear-gradient(135deg, #E0A62E 0%, #B07C1A 100%);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Space Grotesk', sans-serif; font-size: 34px; font-weight: 700;
  color: #fff; box-shadow: 0 12px 40px -8px rgba(224,166,46,0.4);
}
.camera-off-hint {
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12.5px; color: #64748b;
  display: flex; align-items: center; gap: 7px;
}

/* جواب مدل روی ویدیوی کاربر نمایش داده می‌شود (مثل زیرنویس) */
.answer-overlay {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  background: linear-gradient(to top, rgba(5,8,13,0.97) 0%, rgba(5,8,13,0.93) 55%, rgba(5,8,13,0.75) 85%, transparent 100%);
  padding: 20px 20px 16px;
  max-height: 78%;
  display: flex; flex-direction: column;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.32s cubic-bezier(0.22,1,0.36,1), opacity 0.25s ease;
  pointer-events: none;
}
.answer-overlay.visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.overlay-eyebrow {
  font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700;
  color: #F5D98B; letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 8px; display: flex; align-items: center; gap: 7px;
}
.overlay-text-scroll { overflow-y: auto; flex: 1; min-height: 0; margin-bottom: 12px; padding-right: 4px; }
.overlay-text-scroll::-webkit-scrollbar { width: 5px; }
.overlay-text-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }
.overlay-text-scroll p { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13.5px; color: #dbe3ee; line-height: 1.7; }
.overlay-rating { display: flex; gap: 8px; flex-shrink: 0; }
.overlay-rating button {
  flex: 1; padding: 9px 12px; border-radius: 10px;
  font-family: 'Space Grotesk', sans-serif; font-size: 12.5px; font-weight: 600;
  cursor: pointer; transition: all 0.15s; border: 1px solid;
}
#btn-knew-it { background: rgba(34,197,94,0.12); color: #4ade80; border-color: rgba(34,197,94,0.3); }
#btn-knew-it:hover { background: rgba(34,197,94,0.22); }
#btn-needs-practice { background: rgba(251,191,36,0.12); color: #fbbf24; border-color: rgba(251,191,36,0.3); }
#btn-needs-practice:hover { background: rgba(251,191,36,0.22); }

/* نوار دکمه‌های پایین صفحه انترویو */
.call-controls-v2 {
  background: rgba(10,14,20,0.9);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 14px 20px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.controls-group { display: flex; gap: 8px; align-items: center; }
.controls-group.center { justify-content: center; }
.controls-group.right { justify-content: flex-end; }

.call-btn-v2 {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.04);
  color: #a8b3c2; cursor: pointer; transition: all 0.15s;
  font-family: 'Space Grotesk', sans-serif; font-size: 12.5px; font-weight: 600;
  white-space: nowrap;
}
.call-btn-v2:hover { background: rgba(255,255,255,0.09); color: #e8eef5; }
.call-btn-v2.on { background: rgba(0,145,213,0.18); border-color: rgba(0,145,213,0.4); color: #5EC4F5; }
.call-btn-v2.answers-on { background: rgba(224,166,46,0.18); border-color: rgba(224,166,46,0.45); color: #F5D98B; }
.call-btn-v2.danger { background: rgba(239,68,68,0.14); border-color: rgba(239,68,68,0.35); color: #f87171; }
.call-btn-v2.danger:hover { background: rgba(239,68,68,0.28); color: #fff; }
.call-btn-v2 i { font-size: 14px; }

/* حالت موبایل — تنگ‌تر می‌شود */
@media (max-width: 640px) {
  .sun-rays svg { width: 280px; height: 280px; }
  .call-controls-v2 { grid-template-columns: 1fr; }
  .controls-group { justify-content: center; flex-wrap: wrap; }
  .controls-group.right { justify-content: center; }
  .call-btn-v2 span.btn-label-full { display: none; }
}

/* فوتر پایین هر صفحه — ساختار ستونی ساده و حرفه‌ای، بدون جعبه هشدار و بدون انیمیشن اضافی */
.site-footer {
  background: #17222E;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 64px 24px 0;
}

.footer-grid {
  max-width: 1080px; margin: 0 auto;
  display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 48px;
  padding-bottom: 44px;
}
@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
}

.footer-brand-row { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.footer-logo-img { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; flex-shrink: 0; }
.footer-brand-name { font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 700; color: #f1f5f9; letter-spacing: -0.2px; }
.footer-brand-desc { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12.5px; color: #7c8ba0; line-height: 1.75; max-width: 280px; }

.footer-heading {
  font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700; color: #4e6075;
  text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 16px;
}

.footer-link-list { display: flex; flex-direction: column; gap: 11px; }
.footer-link {
  display: flex; align-items: center; gap: 9px;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; color: #94a3b8;
  text-decoration: none; transition: color 0.15s ease; width: fit-content;
}
.footer-link i { width: 14px; font-size: 12px; color: #55677d; transition: color 0.15s ease; }
.footer-link:hover { color: #e8eef5; }
.footer-link:hover i { color: #5EC4F5; }

.footer-note { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12px; color: #7c8ba0; line-height: 1.75; }
.footer-note strong { color: #c3d0de; font-weight: 600; }
.footer-note-privacy { display: flex; gap: 8px; align-items: flex-start; margin-top: 13px; }
.footer-note-privacy i { color: #55677d; font-size: 11px; margin-top: 3px; flex-shrink: 0; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.06);
  max-width: 1080px; margin: 0 auto;
  padding: 20px 0 26px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
}
.footer-bottom-text { font-family: 'Space Mono', monospace; font-size: 10.5px; color: #4e6075; }
.footer-bottom-flag { display: flex; align-items: center; gap: 7px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 11px; color: #4e6075; }
.flag-kz { width: 20px; height: 13px; background: #00AFCA; border-radius: 2px; position: relative; overflow: hidden; flex-shrink: 0; }
.flag-kz::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, #F9C912 4px, transparent 4px); }

/* بنر "پل آینده" بالای فوتر — لینک به صفحه جدا برای ثبت‌نام رایگان صنوف */
.footer-fb-banner {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 16px;
  background: linear-gradient(135deg, rgba(224,166,46,0.14), rgba(0,145,213,0.08));
  border: 1px solid rgba(224,166,46,0.28);
  border-radius: 16px; padding: 18px 22px; margin-bottom: 40px;
  text-decoration: none; transition: border-color 0.18s ease, transform 0.18s ease;
}
.footer-fb-banner:hover { border-color: rgba(224,166,46,0.55); transform: translateY(-2px); }
.footer-fb-icon {
  width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0;
  background: #fff; padding: 6px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px -2px rgba(0,0,0,0.18);
}
.footer-fb-icon img { width: 100%; height: 100%; object-fit: contain; }
.footer-fb-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 14px; color: #f1f5f9; margin-bottom: 3px; }
.footer-fb-sub { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12px; color: #94a3b8; line-height: 1.5; }
.footer-fb-arrow { margin-left: auto; color: #F5D98B; font-size: 13px; flex-shrink: 0; transition: transform 0.18s ease; }
.footer-fb-banner:hover .footer-fb-arrow { transform: translateX(3px); }
@media (max-width: 520px) { .footer-fb-sub { display: none; } }

/* ══════════════════════════════
   صفحه جدا: پل آینده (Future Bridge)
══════════════════════════════ */
.fb-hero { background: linear-gradient(160deg, #0F2A3D 0%, #0A1E2E 100%); padding: 60px 24px 66px; text-align: center; }
.fb-hero-inner { max-width: 720px; margin: 0 auto; }
.fb-logo-badge {
  width: 112px; height: 112px; border-radius: 50%; margin: 0 auto 22px;
  background: #fff; display: flex; align-items: center; justify-content: center;
  padding: 12px; box-shadow: 0 24px 55px -14px rgba(0,0,0,0.4);
}
.fb-logo-badge img { width: 100%; height: 100%; object-fit: contain; }
.fb-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.12em;
  color: #F5D98B; text-transform: uppercase;
  background: rgba(224,166,46,0.12); border: 1px solid rgba(224,166,46,0.3);
  padding: 6px 14px; border-radius: 20px; margin-bottom: 22px;
}
.fb-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(28px, 5vw, 42px); color: #fff; line-height: 1.15; }
.fb-title-dari { display: block; font-family: 'Amiri', serif; font-size: 0.6em; color: #F5D98B; margin-top: 8px; direction: rtl; }
.fb-desc-en { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 15px; color: #cfe0ee; line-height: 1.8; max-width: 600px; margin: 26px auto 16px; }
.fb-desc-fa { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14.5px; color: #a9c2d6; line-height: 2.1; max-width: 600px; margin: 0 auto; direction: rtl; }

.fb-main { max-width: 880px; margin: 0 auto; padding: 56px 24px 20px; }
.fb-section-title { font-family: 'Space Grotesk', sans-serif; font-size: 22px; font-weight: 700; color: #1B2A3A; text-align: center; margin-bottom: 8px; }
.fb-section-sub { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13.5px; color: #5C6B7A; text-align: center; margin-bottom: 36px; }

.fb-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 700px) { .fb-grid { grid-template-columns: 1fr 1fr; } }

.fb-card {
  display: flex; align-items: center; gap: 16px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFDFF 100%);
  border: 1px solid #D8E3EA; border-radius: 16px; padding: 18px 20px;
  text-decoration: none; transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.fb-card:hover { border-color: #0091D5; transform: translateY(-2px); box-shadow: 0 14px 32px -10px rgba(0,145,213,0.22); }
.fb-card-icon {
  width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,145,213,0.08); color: #0091D5; font-size: 18px;
}
.fb-card-title { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 14px; color: #1B2A3A; margin-bottom: 3px; }
.fb-card-desc { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12px; color: #5C6B7A; line-height: 1.5; }
.fb-card-arrow { margin-left: auto; color: #94a3b8; font-size: 12px; flex-shrink: 0; transition: transform 0.18s ease, color 0.18s ease; }
.fb-card:hover .fb-card-arrow { color: #0091D5; transform: translate(2px, -2px); }

/* ══════════════════════════════
   پنجره تنظیمات پیش از شروع تمرین (اسم، حالت سوالات، تعداد)
══════════════════════════════ */
.setup-overlay {
  display: none; position: fixed; inset: 0; z-index: 100;
  background: rgba(10,14,20,0.88); backdrop-filter: blur(4px);
  align-items: center; justify-content: center; padding: 20px;
}
.setup-overlay.open { display: flex; }
.setup-card {
  background: #12161F; border: 1px solid rgba(255,255,255,0.1); border-radius: 20px;
  padding: 30px; width: 100%; max-width: 400px; text-align: center;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6);
  max-height: 90vh; overflow-y: auto;
}
.setup-icon {
  width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 14px;
  background: linear-gradient(135deg, #0091D5, #005F8E);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #fff;
}
.setup-title { font-family: 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 700; color: #e8eef5; margin-bottom: 6px; }
.setup-subtitle { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12px; color: #64748b; margin-bottom: 22px; line-height: 1.5; }

.setup-field { text-align: left; margin-bottom: 18px; }
.setup-label {
  display: block; font-family: 'Space Mono', monospace; font-size: 10px; color: #5b6b80;
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px;
}
.setup-input {
  width: 100%; padding: 10px 14px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1); background: #0A0E14; color: #e8eef5;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; outline: none;
  transition: border-color 0.15s;
}
.setup-input:focus { border-color: #0091D5; }

.setup-mode-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.setup-mode-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 10px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.1); background: #0A0E14; color: #94a3b8;
  cursor: pointer; transition: all 0.15s; font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 600;
}
.setup-mode-btn i { font-size: 16px; }
.setup-mode-btn:hover { border-color: rgba(0,145,213,0.4); }
.setup-mode-btn.active { border-color: #0091D5; background: rgba(0,145,213,0.12); color: #5EC4F5; }
.setup-mode-btn small { font-family: 'Space Mono', monospace; font-size: 9.5px; color: #5b6b80; font-weight: 400; }

.setup-hint { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 10.5px; color: #5b6b80; margin-top: 8px; line-height: 1.5; }

.setup-confirm-btn {
  width: 100%; padding: 13px; border-radius: 12px;
  background: #0091D5; color: #fff; border: none;
  font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: background 0.15s;
}
.setup-confirm-btn:hover { background: #0078B2; }

/* پیام گرم هنگام خروج از انترویو */
.exit-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: #12161F; border: 1px solid rgba(0,145,213,0.35); border-radius: 14px;
  padding: 14px 20px; display: flex; align-items: center; gap: 12px;
  box-shadow: 0 20px 50px -12px rgba(0,0,0,0.5); z-index: 200;
  opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none;
  max-width: 90vw;
}
.exit-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.exit-toast i { color: #F5D98B; font-size: 18px; flex-shrink: 0; }
.exit-toast p { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12.5px; color: #dbe3ee; line-height: 1.5; text-align: left; }
.exit-toast strong { color: #fff; }