/* ==================================================================
   طراحی صفحهٔ عمومی — برگرفته از زبان بصری SET Online (sportdata.org)
   همهٔ مقادیر با اندازه‌گیری DOM واقعی استخراج شده‌اند
   (اندازه‌گیری: 1440px — مرجع: references/sportdata-visual-language.md)
   ================================================================== */
.public-page {
  --bg: #141623;
  background-color: #141623;
  --panel: rgba(255, 255, 255, .06);
  --panel2: rgba(255, 255, 255, .04);
  --border: rgba(255, 255, 255, .10);
  --brand: #5d66a2;
  --brand-line: rgba(93, 102, 162, .5);
  --hero-tint: rgba(16, 20, 53, .8);
  --text: rgba(255, 255, 255, .92);
  --muted: rgba(255, 255, 255, .72);
  --link: #9cc5ff;
  --radius: 10px;
  --card2-bg: #1c1d26;
  background: var(--bg);
}

/* ---------- زمینه: پنل‌های شیشه‌ای + هالهٔ برند ---------- */
/* ---------- پس‌زمینهٔ صفحه ----------
   تصویر کاربر: #141623 خالص (rgb 20,22,35).
   قبلاً این گرادیان‌ها پس‌زمینه را به #12152a (آبی‌تر) می‌بردند → تضعیف شدند
   تا رنگ دقیقاً همان #141623 بماند. */
.public-page .bg-glow {
  background:
    radial-gradient(900px 480px at 88% -8%, rgba(93, 102, 162, .10), transparent 62%),
    radial-gradient(760px 460px at 6% 104%, rgba(20, 22, 35, .55), transparent 60%);
}

/* ---------- هدر سایت: نوار تیرهٔ چسبان (مرجع: #000 / 52px) ---------- */
.public-page .site-header {
  background: rgba(0, 0, 0, .92);
  border-bottom: 1px solid var(--border);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 18px rgba(0, 0, 0, .45);
}
.public-page .header-inner { padding: 10px 16px; }
.public-page #site-title {
  font-size: 1.02rem; font-weight: 700; letter-spacing: .2px;
}
.public-page #site-subtitle { font-size: .76rem; color: var(--muted); }
.public-page .brand-logo {
  width: 40px; height: 40px; border-radius: var(--radius); object-fit: cover;
  border: 1px solid var(--border);
}
.public-page .brand-badge {
  border-radius: var(--radius);
  background: var(--brand);
}

/* ---------- کارت‌ها: پنل شفاف با حاشیهٔ بنفش (مرجع: --panel + rgba(93,102,162,.5)) ---------- */
.public-page .card {
  background: var(--panel);
  border: 1px solid var(--brand-line);
  border-radius: var(--radius);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: border-color .18s ease;
}
.public-page .card:hover { border-color: rgba(93, 102, 162, .85); }
.public-page .card h3 { color: #fff; font-size: 1.06rem; letter-spacing: .2px; }

/* ---------- عنوان معرفی صفحه (مرجع: h1 clamp + خط زیرین) ---------- */
.page-intro { margin: 6px 2px 18px; text-transform: none; }
.page-intro h1 {
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 700; letter-spacing: .3px; line-height: 1.25;
  display: inline-block; padding-bottom: 8px; margin: 0 0 8px;
  border-bottom: 3px solid var(--brand);
}
.page-intro p { color: var(--muted); font-size: .9rem; max-width: 70ch; }

/* ---------- هیرو مسابقه: الگوی اسلایدر مرجع (بازگشت‌پذیر و بدون شکستن) ---------- */
.public-page .tour-hero {
  background: var(--card2-bg);
  border: 1px solid var(--brand-line);
  border-radius: var(--radius);
  padding: 0;
  overflow: hidden;
  position: relative;
  margin-bottom: 18px;
  box-shadow: 0 18px 55px rgba(0, 0, 0, .35);
}
/* لایهٔ تصویر + گرادیان تیرگی مثل مرجع: rgba(16,20,53,.8) */
.public-page .tour-hero.has-poster::before {
  content: '';
  position: absolute; inset: 0;
  background-image: linear-gradient(0deg, var(--hero-tint) 0%, var(--hero-tint) 55%),
                    var(--hero-img);
  background-size: cover;
  background-position: center;
  filter: blur(1px);
  transform: scale(1.04);
  z-index: 0;
}
.public-page .tour-hero.has-poster::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(16, 20, 53, .95) 0%, rgba(16, 20, 53, .35) 70%, transparent 100%);
  z-index: 1;
}
.public-page .tour-hero-main {
  position: relative; z-index: 2;
  padding: 26px 24px 18px;
  gap: 24px;
  align-items: center;
}
.public-page .hero-media { flex: 0 0 auto; }
.public-page .tour-poster {
  width: 190px; max-height: 250px; object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .5);
  transition: transform .25s ease;
}
.public-page .tour-poster:hover { transform: translateY(-3px); }
.public-page .tour-hero-text { flex: 1 1 320px; min-width: 260px; }
.public-page .tour-hero-logo {
  width: 58px; height: 58px; border-radius: var(--radius);
  border: 1px solid var(--border); background: rgba(255, 255, 255, .05);
  object-fit: cover; margin-bottom: 10px;
}

/* تیتر هیرو — مثل h1 مرجع: وزن 700 + سایه متن */
.public-page .hero-title {
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  font-weight: 700; line-height: 1.25; letter-spacing: .3px;
  color: #fff; margin: 0 0 6px;
  text-shadow: 0 4px 10px rgba(0, 0, 0, .75);
}
.public-page .hero-subtitle {
  color: var(--muted); font-size: .92rem; margin: 0 0 12px;
}

/* قرص‌های اطلاعات (مرجع: جدول/برچسب‌های تیره با گوشهٔ ۱۰px) */
.public-page .tour-meta-line { gap: 8px; margin: 0 0 4px; }
.public-page .meta-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(0, 0, 0, .35);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 12px; font-size: .82rem; color: var(--text);
}
.public-page .meta-pill b { color: #fff; }

/* روزشمار — کارت شیشه‌ای با لهجهٔ برند (نه طلایی) */
.public-page .countdown-box {
  background: rgba(93, 102, 162, .22);
  border: 1px solid var(--brand-line);
  border-radius: var(--radius);
  padding: 10px 16px; min-width: 148px;
}
.public-page .countdown-box .cd-label { color: var(--muted); }
.public-page .countdown-box .cd-value { color: #fff; }

/* دکمه‌های هیرو — مثل دکمهٔ مرجع: تیره با حاشیهٔ روشن‌تر، hover سفید/متن مشکی */
.public-page .hero-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 14px 0 10px; }
.public-page .btn-hero-primary,
.public-page .btn-hero-ghost {
  border-radius: var(--radius);
  border: 1px solid rgba(93, 102, 162, .85);
  padding: 10px 20px;
  font-size: .88rem; font-weight: 700;
  text-decoration: none; display: inline-flex; align-items: center; gap: 7px;
  transition: transform .12s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}
.public-page .btn-hero-primary { background: #262a44; color: #fff; }
.public-page .btn-hero-ghost { background: rgba(0, 0, 0, .35); color: var(--text); }
.public-page .btn-hero-primary:hover,
.public-page .btn-hero-ghost:hover {
  background: #fff; color: #000; border-color: #fff;
  transform: translateY(-1px); filter: none;
}

/* ---------- لینک‌های سریع: تب‌های مرجع (خط زیرین ۳px برند) ---------- */
.public-page .tour-links {
  border-top: 1px solid var(--border);
  padding-top: 12px; margin-top: 14px; gap: 6px;
}
.public-page .tour-link {
  background: var(--panel);
  border: 1px solid var(--border);
  border-bottom: 3px solid transparent;
  border-radius: var(--radius);
  color: var(--text);
  padding: 9px 16px; font-size: .84rem; font-weight: 700;
}
.public-page .tour-link:hover {
  background: var(--brand); color: #fff;
  border-color: rgba(93, 102, 162, .9);
  border-bottom-color: rgba(255, 255, 255, .45);
}
.public-page .tour-link.active {
  background: var(--brand); color: #fff;
  border-bottom: 3px solid rgba(255, 255, 255, .5);
}

/* ---------- فرم‌ها — مثل ورودی‌های مرجع ---------- */
.public-page input, .public-page select, .public-page textarea {
  background: rgba(0, 0, 0, .22);
  border: 1px solid var(--brand-line);
  border-radius: var(--radius);
  min-height: 44px;
  color: var(--text);
  font-size: .9rem;
}
.public-page input:focus, .public-page select:focus, .public-page textarea:focus {
  border-color: rgba(93, 102, 162, .95);
  box-shadow: 0 0 0 3px rgba(93, 102, 162, .22);
}
.public-page select option { background: #141623; color: var(--text); }

/* ---------- دکمه‌های عمومی صفحه ---------- */
.public-page .btn-primary, .public-page .btn-gold {
  background: #262a44; color: #fff;
  border: 1px solid rgba(93, 102, 162, .85);
  border-radius: var(--radius);
}
.public-page .btn-primary:hover, .public-page .btn-gold:hover {
  background: #fff; color: #000; border-color: #fff; filter: none;
}
.public-page .btn-ghost {
  background: var(--panel); border: 1px solid var(--border);
  color: var(--text); border-radius: var(--radius);
}
.public-page .btn-ghost:hover { background: var(--brand); color: #fff; filter: none; }

/* ---------- تب‌ها و چیپ‌ها ---------- */
.public-page .tabs { border-bottom: 2px solid var(--border); }
.public-page .tabs .tab {
  border-radius: var(--radius) var(--radius) 0 0; color: var(--muted);
}
.public-page .tabs .tab.active {
  background: var(--brand); color: #fff;
  border-bottom: 3px solid rgba(255, 255, 255, .45);
}
.public-page .chip { background: var(--panel); border: 1px solid var(--border); color: var(--muted); }
.public-page .chip.active { background: var(--brand); border-color: rgba(255, 255, 255, .3); color: #fff; }

/* ---------- جدول‌ها و حالت‌های خالی ---------- */
.public-page .empty-note {
  background: var(--panel); border: 1px dashed var(--border); border-radius: var(--radius);
}
.public-page table { border-radius: var(--radius); overflow: hidden; }
.public-page table th { background: rgba(0, 0, 0, .28); font-weight: 700; }

/* ---------- فوتر ---------- */
.public-page .site-footer {
  border-top: 1px solid var(--border);
  background: rgba(0, 0, 0, .25);
  color: var(--muted);
}
.public-page .site-footer a { color: var(--link); }

/* ---------- موبایل ---------- */
@media (max-width: 720px) {
  .public-page .tour-hero-main { padding: 18px 14px 14px; gap: 16px; }
  .public-page .hero-media { width: 100%; }
  .public-page .tour-poster { width: 100%; max-height: 320px; }
  .public-page .hero-actions .btn-hero-primary,
  .public-page .hero-actions .btn-hero-ghost { flex: 1 1 100%; justify-content: center; }
  .public-page .meta-pill { font-size: .78rem; padding: 5px 10px; }
  .page-intro h1 { font-size: 1.5rem; }
}

/* ================= صفحهٔ ورودی (لودر + اسپلش) به رنگ برند ================= */
.public-page .page-loader {
  background:
    radial-gradient(1000px 560px at 50% -10%, rgba(93, 102, 162, .35), transparent 62%),
    var(--bg);
}
.public-page .page-loader-spinner {
  border: 3px solid rgba(93, 102, 162, .30);
  border-top-color: #fff;
}
.public-page .page-loader-logo,
.public-page .welcome-logo {
  border: 1px solid var(--border);
  box-shadow: 0 18px 55px rgba(0, 0, 0, .5);
}
.public-page .welcome-screen {
  background:
    radial-gradient(900px 520px at 50% -5%, rgba(93, 102, 162, .40), transparent 62%),
    var(--bg);
}
.public-page .welcome-title { color: #fff; text-shadow: 0 4px 14px rgba(0, 0, 0, .6); }

/* ================= هدر مسابقه در حالت «صفحهٔ جدا» (embedded) ================= */
.public-page .tour-hero-simple { padding: 18px 24px 16px; }
.public-page .tour-hero-simple h2 {
  font-size: clamp(1.2rem, 2.6vw, 1.7rem); font-weight: 700; color: #fff;
}
.public-page .tour-hero-simple .muted { color: var(--muted); }

/* ================= یکدست کردن رنگ لهجه در کل صفحهٔ عمومی ================= */
.public-page .wc-title,
.public-page .meta-date,
.public-page .meta-deadline,
.public-page .tour-contacts a,
.public-page .phone-link,
.public-page .admin-link {
  color: var(--link);
}
.public-page .wc-title {
  background: var(--panel); border: 1px solid var(--brand-line);
  color: #fff; border-radius: var(--radius);
}
.public-page .champion-banner {
  background: linear-gradient(135deg, rgba(93, 102, 162, .28), rgba(93, 102, 162, .10));
  border: 1px solid var(--brand-line); border-radius: var(--radius);
}
.public-page .reg-item, .public-page .comp-item {
  background: rgba(0, 0, 0, .22); border: 1px solid var(--border); border-radius: var(--radius);
}
.public-page .upload-box {
  background: rgba(0, 0, 0, .22); border: 1px dashed var(--brand-line); border-radius: var(--radius);
}
.public-page .upload-box:hover { border-color: rgba(93, 102, 162, .95); background: rgba(93, 102, 162, .12); }
.public-page .upload-box.up-done { border-style: solid; border-color: rgba(62, 207, 142, .6); }
.public-page .form-card { background: var(--panel); }
.public-page .modal.card {
  background: #1c1d26; border: 1px solid var(--brand-line); border-radius: var(--radius);
  box-shadow: 0 18px 55px rgba(0, 0, 0, .55);
}
.public-page .auth-tabs .auth-tab { border-radius: var(--radius) var(--radius) 0 0; }
.public-page .auth-tab.active { background: var(--brand); color: #fff; border-color: rgba(93, 102, 162, .95); }
.public-page .preview-banner { border-radius: var(--radius); }