/* ===== Design tokens ===== */
:root {
  --bg-black: #000;
  --text-white: #fff;
  --text-muted: rgba(255,255,255,.7);
  --accent-gold: #f9b233;
  --accent-gold-hover: #ffc44d;
  --text-dark: #333;
  --bg-light: #f4f4f4;
  --container-max: 1920px;
  /* 导航栏背景色 - 与 overrides.css 中定义一致，确保 landing 独立加载时变量仍可用 */
  --nav-bg: rgba(37, 38, 39, 0.3);
  /* 导航栏高度 */
  --nav-height: 96px;
}

/* ===== 全站 Bootstrap 主题覆盖：把 primary 从 #0d6efd 改成金色，避免子页主按钮和 landing 撞色 =====
   注意:用 :root, [data-bs-theme="light"] 双选择器,匹配 Bootstrap 5 自带特异度(否则覆盖失败) */
:root,
[data-bs-theme="light"] {
  --bs-primary: #f9b233;
  --bs-primary-rgb: 249, 178, 51;
  --bs-link-color: #c4791b;
  --bs-link-hover-color: #f9b233;
  --bs-link-color-rgb: 196, 121, 27;
  --bs-link-hover-color-rgb: 249, 178, 51;
}
.btn-primary { background-color: #f9b233 !important; border-color: #f9b233 !important; color: #fff !important; }
.btn-primary:hover { background-color: #ffc44d !important; border-color: #ffc44d !important; }
.btn-primary:focus, .btn-primary:active { box-shadow: 0 0 0 3px rgba(249,178,51,.3) !important; }
.text-primary { color: #f9b233 !important; }
.bg-primary { background-color: #f9b233 !important; }
.border-primary { border-color: #f9b233 !important; }

/* ===== Reset (仅 .landing 页面) =====
 * 注意: body.landing 的 background/color/a 规则已移除,因为实际 header 用 .menu
 * 而非 .landing-header,这些规则会影响 footer 文字可见性和链接颜色 */
body.landing img { display: block; max-width: 100%; }

/* ===== Header (透明浮在 banner 上) ===== */
.landing-header { position: absolute; top: 0; left: 0; width: 100%; min-width: 1366px; height: 96px; z-index: 10; background: transparent; }
body.subpage .landing-header {
  background-color: var(--nav-bg);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
/* 子页内容整体下移避开 fixed header — 实际值由 .menu header 高度决定,不在此设 */
.landing-header .inner { display: flex; align-items: center; height: 96px; padding: 0 clamp(100px, 8.3vw, 160px); width: 100%; box-sizing: border-box; gap: 0; flex-wrap: nowrap; overflow: visible; }
/* design 1920: logo 226×60px, a 元素包 img, 让 a 不被压 */
.landing-header .inner > a { flex: 0 0 auto; display: inline-flex; align-items: center; }
.landing-header .inner > a > .logo,
.landing-header .logo { width: clamp(160px, 11.8vw, 226px); height: clamp(42px, 3.1vw, 60px); margin-top: clamp(2px, 0.3vw, 6px); flex-shrink: 0; }
.landing-header .nav { margin-left: clamp(60px, 7vw, 134px); display: flex; align-items: center; height: 100%; flex: 0 0 auto; flex-wrap: nowrap; }
.landing-header .nav a { color: #fff; font-size: clamp(14px, 0.94vw, 18px); font-weight: 500; width: clamp(80px, 6vw, 110px); text-align: center; position: relative; padding: 6px 0; white-space: nowrap; flex-shrink: 0; }
.landing-header .nav a.active, .landing-header .nav a:hover { color: var(--accent-gold); }
.landing-header .nav a.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; background: var(--accent-gold); border-radius: 2px; }

/* 历史赛事 ▾ 按钮 */
.landing-header .history-btn {
  display: flex; align-items: center; justify-content: center;
  width: 86px; height: 35px;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 4px;
  color: #fff; font-size: 13px; gap: 4px;
  background: rgba(255,255,255,.05);
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
  flex-shrink: 0;
}
.landing-header .history-btn:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.8); color: #fff; }
.landing-header .history-btn .arr { font-size: 9px; opacity: .7; }

.landing-header .right { display: flex; align-items: center; gap: 18px; flex-shrink: 0; margin-left: auto; padding-right: 0; }
.landing-header .user-link { color: #fff; font-size: 13px; padding: 0 10px; height: 35px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.5); border-radius: 4px; background: rgba(255,255,255,.05); text-decoration: none; white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; transition: background .15s ease, border-color .15s ease; margin-left: 18px; flex-shrink: 0; }
.landing-header .user-link:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.8); color: #fff; }

/* 1920 视口：.right 元素恢复 design 数值；user-link 不截断 */
@media (min-width: 1920px) {
  .landing-header .right { gap: 18px; }
  .landing-header .user-link { max-width: 140px; font-size: 13px; padding: 0 10px; }
  .landing-header .lang-btn { width: 61px; height: 35px; font-size: 13px; }
  .landing-header .uci { width: 118px; height: 23px; }
  .landing-header .flag { width: 26px; height: 26px; }
  .landing-header .search { width: 22px; height: 22px; }
  .landing-header .search img { width: 22px; height: 22px; }
}

/* design 强制最小宽度 1366，< 1366 视口产生水平滚动条展示完整 design */
.landing-header .search { display: inline-flex; width: 22px; height: 22px; cursor: pointer; opacity: .9; transition: opacity .15s; }
.landing-header .search:hover { opacity: 1; }
.landing-header .search img { width: 22px; height: 22px; }
.landing-header .lang-btn {
  display: flex; align-items: center; justify-content: center;
  width: 61px; height: 35px;
  border: 1px solid rgba(255,255,255,.5); border-radius: 4px;
  font-size: 13px; color: #fff; gap: 4px;
  background: rgba(255,255,255,.05);
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
.landing-header .lang-btn:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.8); }
.landing-header .lang-btn .arr { font-size: 9px; opacity: .7; }
/* P0+P1+unify: 用户名/登录按钮，迁移自 _Navigation — 完整样式在 1920 媒体查询内 */
.landing-header .user-link:hover { background: rgba(255,255,255,.12); }
.landing-header .uci { width: clamp(60px, 6.25vw, 118px); height: clamp(13px, 1.2vw, 23px); }
.landing-header .flag {
  width: clamp(14px, 1.36vw, 26px);
  height: clamp(14px, 1.36vw, 26px);
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,.4);
  object-fit: cover;
}

/* ===== Footer ===== */
.landing-footer { width: 100%; min-width: 1366px; background: var(--bg-black); color: #999; padding: 50px 0 60px; text-align: center; }
.landing-footer .menu { font-size: clamp(14px, 0.94vw, 18px); color: #ddd; margin-bottom: 60px; display: flex; flex-wrap: wrap; justify-content: center; gap: 0; max-width: 100%; }
.landing-footer .menu a { margin: 0 12px; color: #ddd; text-decoration: none; white-space: nowrap; }
.landing-footer .menu a:hover { color: var(--accent-gold); }
.landing-footer .menu .sep { color: #555; margin: 0 4px; }
.landing-footer .logo-wrap img { width: 189px; height: 150px; object-fit: contain; margin: 0 auto 30px; }
.landing-footer .socials { display: flex; justify-content: center; gap: 26px; margin-bottom: 60px; flex-wrap: wrap; }
.landing-footer .socials .icon { width: 50px; height: 50px; border-radius: 50%; background: #2a2a2a; display: flex; align-items: center; justify-content: center; }
.landing-footer .socials .icon img { width: 22px; height: 22px; }
.landing-footer .copy { color: #888; font-size: 15px; line-height: 1.8; }

/* ===== Sub-page style system (Stage / Hero / Partner / Race / Team / News / City) ===== */
body.subpage { background: #f8fafc; color: #1B1C1C; }
/* body.subpage .landing-header 的 background 已在前面 (~第 39 行) 用 rgba+blur 定义,这里不再重写 */
/* 子页 hero 基础样式：高度和 padding 由 overrides.css 统一控制，
   确保从 y=0 开始与首页无缝衔接；内容居中通过 padding-top+flex 实现 */
.subpage-hero { position: relative; background: #000 center/cover no-repeat; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.subpage-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.3), rgba(0,0,0,.6)); z-index: 1; }
.subpage-hero .inner { position: relative; z-index: 2; text-align: center; color: #fff; }
.subpage-hero h1 { font-size: 48px; font-weight: 600; letter-spacing: 4px; margin: 0; color: #fff; }
.subpage-hero .sub-en { color: var(--accent-gold); font-style: italic; margin-top: 8px; }
.subpage-content { max-width: 1200px; margin: 2.5rem auto 60px; padding: 0 16px; position: relative; z-index: 5; }
.subpage-card { background: #fff; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.08); padding: 32px; }
.subpage-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--accent-gold); margin-bottom: 24px; flex-wrap: wrap; }
.subpage-tabs button, .subpage-tabs .tab-link { background: none; border: none; padding: 12px 24px; font-size: 16px; cursor: pointer; color: #333; text-decoration: none; display: inline-block; }
.subpage-tabs button.active, .subpage-tabs .tab-link.active { color: var(--accent-gold); font-weight: 600; border-bottom: 2px solid var(--accent-gold); margin-bottom: -2px; }



/* ============================================================
 * Tailwind utility fallback (项目 view 里散落了大量 Tailwind class
 * 但 _Layout 没引入 Tailwind 编译产物 → 这层补真 CSS 让残留类生效)
 * 只覆盖项目实际用到的、出现在 Views/**.cshtml 里的 class
 * ============================================================ */

/* Slate palette (text + bg) */
.text-slate-300 { color: #cbd5e1; }
.text-slate-400 { color: #94a3b8; }
.text-slate-500 { color: #64748b; }
.text-slate-700 { color: #334155; }
.text-slate-800 { color: #1e293b; }
.text-slate-900 { color: #0f172a; }
.bg-slate-900 { background-color: #0f172a; }
.divide-slate-100 > * + * { border-top: 1px solid #f1f5f9; }
.border-slate-100 { border-color: #f1f5f9; }
.border-slate-300 { border-color: #cbd5e1; }

/* 项目里到处出现的语义 token (admin-vue 那边的 Material Design 色板)
 * 这边给 fallback,免得页面是无背景 + 黑字裸文本 */
.bg-surface-container-low { background-color: #f1f5f9; }
.bg-surface-container-lowest { background-color: #fff; }
.text-secondary { color: #64748b; }
.text-primary { color: var(--accent-gold); }
.bg-primary { background-color: var(--accent-gold); }
.hover\:bg-blue-600:hover { background-color: var(--accent-gold-hover); }
.hover\:text-primary:hover { color: var(--accent-gold); }
.focus\:border-primary:focus { border-color: var(--accent-gold); }
.focus\:ring-primary:focus { box-shadow: 0 0 0 3px rgba(249,178,51,.2); }
.border-mobile-border { border-color: #e2e8f0; }
.text-error { color: #dc2626; }

/* Jersey 色 (Result/Index 用到) */
.bg-yellow-500 { background-color: #eab308; }
.bg-green-500 { background-color: #22c55e; }
.bg-red-500 { background-color: #ef4444; }
.bg-cyan-500 { background-color: #06b6d4; }
.bg-blue-50 { background-color: #eff6ff; }

/* Typography scale */
.text-xs { font-size: .75rem; line-height: 1rem; }
.text-sm { font-size: .875rem; line-height: 1.25rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.text-5xl { font-size: 3rem; line-height: 1; }
.font-medium { font-weight: 500; }
.font-bold { font-weight: 700; }
.font-black { font-weight: 900; }
.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.uppercase { text-transform: uppercase; }
.tracking-tight { letter-spacing: -.025em; }
.tracking-wider { letter-spacing: .05em; }
.leading-relaxed { line-height: 1.625; }
.whitespace-nowrap { white-space: nowrap; }
.whitespace-pre-line { white-space: pre-line; }

/* Spacing — margin / padding */
.m-0 { margin: 0; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: .75rem; }
.mt-4 { margin-top: 1rem; }
.mt-8 { margin-top: 2rem; }
.mb-1 { margin-bottom: .25rem; }
.mb-2 { margin-bottom: .5rem; }
.mb-3 { margin-bottom: .75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-12 { margin-bottom: 3rem; }
.ml-1 { margin-left: .25rem; }
.ms-auto { margin-left: auto; }
.p-3 { padding: .75rem; }
.p-6 { padding: 1.5rem; }
.py-2 { padding-top: .5rem; padding-bottom: .5rem; }
.py-3 { padding-top: .75rem; padding-bottom: .75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.px-1 { padding-left: .25rem; padding-right: .25rem; }
.px-2 { padding-left: .5rem; padding-right: .5rem; }
.px-3 { padding-left: .75rem; padding-right: .75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.pt-3 { padding-top: .75rem; }
.pt-4 { padding-top: 1rem; }
.pt-16 { padding-top: 4rem; }
.pb-4 { padding-bottom: 1rem; }
.gap-1 { gap: .25rem; }
.gap-2 { gap: .5rem; }
.gap-3 { gap: .75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.space-y-4 > * + * { margin-top: 1rem; }

/* Layout */
.block { display: block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.hidden { display: none; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-end { text-align: right; }
.text-right { text-align: right; }
.w-full { width: 100%; }
.w-8 { width: 2rem; }
.w-24 { width: 6rem; }
.h-8 { height: 2rem; }
.h-24 { height: 6rem; }
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-7xl { max-width: 80rem; }
.relative { position: relative; }
.absolute { position: absolute; }

/* Grid */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Desktop defaults — no responsive breakpoints (mobile has separate site) */
.md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.md\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.md\:text-5xl { font-size: 3rem; line-height: 1; }
.lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Border + radius + shadow */
.border { border: 1px solid #e2e8f0; }
.border-b { border-bottom: 1px solid #e2e8f0; }
.border-t { border-top: 1px solid #e2e8f0; }
.border-top { border-top: 1px solid #e2e8f0; }
.border-4 { border-width: 4px; }
.border-start { border-left: 1px solid #e2e8f0; }
.border-bottom { border-bottom: 1px solid #e2e8f0; }
.border-primary { border-color: var(--accent-gold); }
.rounded { border-radius: 4px; }
.rounded-md { border-radius: 6px; }
.rounded-lg { border-radius: 8px; }
.rounded-xl { border-radius: 12px; }
.rounded-full { border-radius: 9999px; }
.shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.shadow { box-shadow: 0 2px 6px rgba(0,0,0,.06); }
.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }

/* Transitions */
.transition-colors { transition: color .2s, background-color .2s, border-color .2s; }
.outline-none { outline: none; }
.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }
.opacity-40 { opacity: .4; }
.pointer-events-none { pointer-events: none; }
.align-middle { vertical-align: middle; }

/* Hover utility */
.hover\:underline:hover { text-decoration: underline; }
.hover\:bg-surface-container-low:hover { background-color: #f1f5f9; }
.hover\:border-primary:hover { border-color: var(--accent-gold); }

/* Container helper */
.container { width: 100%; margin-left: auto; margin-right: auto; max-width: 1200px; padding-left: 16px; padding-right: 16px; }

/* Material symbols 占位 (项目散用但没引字体) */
.material-symbols-outlined { font-family: 'Material Symbols Outlined', 'Material Icons', system-ui, sans-serif; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; }

/* ============================================================
 * .rq-* 自定义组件库 — 取代 Bootstrap 默认 + 蓝色症 + 三等分病
 * ============================================================ */

/* === RQ 卡片 === */
.rq-card {
  position: relative;
  display: block;
  background: #fff;
  border: 1px solid #eef2f6;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(15,23,42,.04);
  transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}
.rq-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--accent-gold) 50%, transparent 100%);
  opacity: 0;
  transition: opacity .25s ease;
}
.rq-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15,23,42,.08);
  border-color: rgba(249,178,51,.4);
}
.rq-card:hover::before { opacity: 1; }
.rq-card:active { transform: translateY(0); }
.rq-card-img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 6px; margin: -20px -20px 16px; max-width: calc(100% + 40px); }
.rq-card-title { font-size: 17px; font-weight: 600; color: #0f172a; margin: 0 0 8px; line-height: 1.4; }
.rq-card-meta { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #94a3b8; margin-bottom: 10px; }
.rq-card-text { font-size: 14px; color: #64748b; line-height: 1.6; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rq-card-footer { margin-top: 14px; padding-top: 12px; border-top: 1px solid #f1f5f9; display: flex; justify-content: space-between; align-items: center; }

/* === RQ 网格 (打破三等分 — 用 minmax + 自然填充) === */
.rq-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.rq-grid-tight { gap: 12px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.rq-grid-wide { gap: 24px; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }

/* === RQ 空态 (品牌化, 不再是裸 "暂无 XX") === */
.rq-empty { text-align: center; padding: 64px 20px; }
.rq-empty-icon { font-size: 56px; line-height: 1; margin-bottom: 16px; opacity: .25; filter: grayscale(.3); }
.rq-empty-title { font-size: 20px; font-weight: 600; color: #334155; margin: 0 0 8px; letter-spacing: .5px; }
.rq-empty-sub { font-size: 14px; color: #94a3b8; margin: 0 0 24px; }
.rq-empty-cta { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; background: var(--accent-gold); color: #fff; border-radius: 4px; font-size: 14px; font-weight: 500; text-decoration: none; transition: background .2s ease, transform .15s ease; }
.rq-empty-cta::after { content: '→'; transition: transform .2s ease; }
.rq-empty-cta:hover { background: var(--accent-gold-hover); color: #fff; transform: translateY(-1px); }
.rq-empty-cta:hover::after { transform: translateX(3px); }

/* === RQ 徽章 (方形, 不是 pill) === */
.rq-badge { display: inline-block; padding: 3px 10px; font-size: 12px; font-weight: 600; line-height: 1.6; border-radius: 3px; background: rgba(249,178,51,.12); color: #c4791b; letter-spacing: .5px; }
.rq-badge-solid { background: var(--accent-gold); color: #fff; }
.rq-badge-dark { background: rgba(15,23,42,.08); color: #334155; }

/* === RQ 分页 (金色下划线, 替代蓝圆按钮) === */
.rq-pagination { display: flex; justify-content: center; align-items: center; gap: 4px; margin-top: 32px; flex-wrap: wrap; }
.rq-pagination a, .rq-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 12px; font-size: 14px; font-weight: 500; color: #475569; text-decoration: none; border-radius: 4px; transition: all .15s ease; border: 1px solid transparent; }
.rq-pagination a:hover { color: var(--accent-gold); border-color: var(--accent-gold); background: rgba(249,178,51,.06); }
.rq-pagination .active, .rq-pagination span.active { color: var(--accent-gold); font-weight: 700; border-bottom: 2px solid var(--accent-gold); border-radius: 0; padding-bottom: 0; }
.rq-pagination .disabled { opacity: .35; pointer-events: none; }

/* === RQ Hero 黑底标题区 (取代 .bg-slate-900 大块标题) === */
.rq-hero-section { background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%); padding: 64px 24px; color: #fff; text-align: center; }
.rq-hero-section h1 { font-size: 40px; font-weight: 700; margin: 0 0 12px; letter-spacing: 2px; }
.rq-hero-section p { color: rgba(255,255,255,.7); margin: 0; font-size: 16px; letter-spacing: 1px; }

/* === RQ 表格 (Hero/Result 用) === */
.rq-table { width: 100%; border-collapse: collapse; }
.rq-table thead th { background: #f8fafc; padding: 14px 16px; text-align: left; font-size: 13px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: .5px; border-bottom: 2px solid #e2e8f0; }
.rq-table tbody td { padding: 14px 16px; border-bottom: 1px solid #f1f5f9; color: #334155; font-size: 14px; }
.rq-table tbody tr { transition: background .15s ease; }
.rq-table tbody tr:hover { background: rgba(249,178,51,.04); }
.rq-rank { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; background: rgba(249,178,51,.12); color: #c4791b; font-weight: 700; font-size: 13px; }
.rq-rank.top-1 { background: linear-gradient(135deg, #fde68a, #f9b233); color: #78350f; }
.rq-rank.top-2 { background: linear-gradient(135deg, #e2e8f0, #94a3b8); color: #1e293b; }
.rq-rank.top-3 { background: linear-gradient(135deg, #fed7aa, #fb923c); color: #7c2d12; }

/* === RQ Logo 卡 (Partner 用, 4 级带颜色) === */
.rq-logo-card { display: inline-flex; align-items: center; justify-content: center; width: 200px; height: 96px; padding: 12px; background: #fff; border: 1px solid #e2e8f0; border-radius: 6px; transition: all .2s ease; text-decoration: none; color: inherit; }
.rq-logo-card:hover { border-color: var(--accent-gold); box-shadow: 0 6px 18px rgba(249,178,51,.18); transform: translateY(-2px); }
.rq-logo-card img { max-width: 100%; max-height: 100%; object-fit: contain; }
.rq-logo-wall { display: flex; flex-wrap: wrap; gap: 16px; }
.rq-level-title { display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 600; color: #334155; margin: 32px 0 16px; letter-spacing: 1px; }
.rq-level-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, currentColor 0%, transparent 100%); opacity: .25; }
.rq-level-diamond .rq-level-title { color: #64748b; }
.rq-level-gold .rq-level-title { color: var(--accent-gold); }
.rq-level-silver .rq-level-title { color: #94a3b8; }
.rq-level-bronze .rq-level-title { color: #b45309; }

/* === 全局蓝色降级:把项目里残留的 #0077BE 蓝色 active/border 统一拉回金 === */
.tab-btn.active,
.stage-tab-btn.active,
.nav-link-active::after,
.nav-link::after { color: var(--accent-gold) !important; border-color: var(--accent-gold) !important; background-color: transparent !important; }
.stage-tab-btn.active { border-bottom: 2px solid var(--accent-gold) !important; }
.nav-link-active::after, .nav-link::after { background-color: var(--accent-gold) !important; }

/* Bootstrap badge 颜色覆盖到金色 (子页 badge bg-primary 不再蓝) */
.badge.bg-primary { background-color: var(--accent-gold) !important; color: #fff; }

/* Bootstrap btn-warning 在子页弱化为次要 (避免跟主 CTA 抢戏) */
.subpage-card .btn-warning { background-color: transparent; border-color: var(--accent-gold); color: var(--accent-gold); }
.subpage-card .btn-warning:hover { background-color: var(--accent-gold); color: #fff; }

/* Bootstrap form-select 圆角统一 4px 风格 */
.subpage-card .form-select { border-radius: 4px; border-color: #e2e8f0; }
.subpage-card .form-select:focus { border-color: var(--accent-gold); box-shadow: 0 0 0 3px rgba(249,178,51,.18); }

/* 子页全局返回链接 */
.rq-back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-gold); font-weight: 500; text-decoration: none; padding: 8px 0; transition: gap .2s ease; }
.rq-back-link::before { content: '←'; transition: transform .2s ease; }
.rq-back-link:hover { color: var(--accent-gold-hover); gap: 10px; }
.rq-back-link:hover::before { transform: translateX(-2px); }

/* ============================================================
 * 1920px 设计稿 Header/Footer 精确覆盖
 * 仅在 >=1920px 视口下生效，其他宽度保持现有流式布局
 * ============================================================ */
@media (min-width: 1920px) {

  /* Header：宽度锁定 1920px，与 1920px 内容区对齐 */
  .landing-header {
    width: 1920px;
    left: 50%;
    transform: translateX(-50%);
  }
  .landing-header .inner {
    max-width: 1920px;
    padding: 0 160px;
    gap: 0;
  }
  .landing-header .inner > a > .logo,
  .landing-header .logo {
    width: 226px;
    height: 60px;
    margin-top: 6px;
  }
  .landing-header .nav {
    margin-left: 134px;
  }
  .landing-header .nav a {
    font-size: 18px;
    margin-right: 56px;
  }
  .landing-header .history-btn {
    margin-left: 30px;
    width: 86px;
    height: 35px;
    font-size: 13px;
  }
  .landing-header .right {
    gap: 18px;
  }
  .landing-header .search,
  .landing-header .search img {
    width: 22px;
    height: 22px;
  }
  .landing-header .lang-btn {
    width: 61px;
    height: 35px;
    font-size: 13px;
  }
  .landing-header .uci {
    width: 118px;
    height: 23px;
  }
  .landing-header .flag {
    width: 26px;
    height: 26px;
  }
  .landing-header .user-link {
    max-width: 90px;
    font-size: 13px;
    padding: 0 10px;
  }

  /* Footer：宽度锁定 1920px */
  .landing-footer {
    width: 1920px;
    margin: 0 auto;
  }
}

/* ===== Subpage hero under fixed menu ===== */
/* 子页 hero 从 y=0 开始铺满，导航半透明浮于上方，与首页无缝衔接一致；
   内容区通过 padding-top:var(--nav-height) 避开导航遮挡（见 overrides.css） */
body.subpage .subpage-hero {
  margin-top: 0;
}

/* 子页菜单使用统一导航背景色，与首页保持视觉一致 */
body.subpage .menu {
  background-color: var(--nav-bg);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* ===== 微信二维码弹窗 ===== */
.rq-qr-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, .72);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.rq-qr-overlay.is-open {
  opacity: 1;
  visibility: visible;
}
.rq-qr-modal {
  position: relative;
  width: 100%;
  max-width: 360px;
  text-align: center;
  background: #fff;
  border-radius: 12px;
  padding: 32px 28px 28px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  transform: translateY(12px) scale(.98);
  transition: transform .25s ease;
}
.rq-qr-overlay.is-open .rq-qr-modal {
  transform: translateY(0) scale(1);
}
.rq-qr-modal .rq-qr-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: #94a3b8;
  font-size: 24px;
  line-height: 32px;
  cursor: pointer;
  border-radius: 50%;
  transition: color .2s ease, background .2s ease;
}
.rq-qr-modal .rq-qr-close:hover {
  color: #475569;
  background: #f1f5f9;
}
.rq-qr-modal .rq-qr-title {
  font-size: 18px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 6px;
}
.rq-qr-modal .rq-qr-subtitle {
  font-size: 13px;
  color: #64748b;
  margin: 0 0 20px;
}
.rq-qr-modal img {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  margin: 0 auto 18px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}
.rq-qr-modal .rq-qr-tip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--accent-gold);
  background: #fffbeb;
  border: 1px solid #fde68a;
  padding: 8px 14px;
  border-radius: 999px;
}

/* ===== Auth pages (Login / Register / Verify) — "Race Heritage" Warm Clean =====
 * Matches homepage design language: light bg, white cards, gold accents.
 * Scoped to <main class="rq-subpage-narrow"> via adjacent sibling selector.
 * Detail pages use <div class="rq-subpage-narrow"> so they are not affected. */

/* --- Compact hero for auth pages --- */
/* 紧凑 hero 也从 y=0 开始，高度补偿导航遮挡区域 */
main.rq-subpage-narrow + .subpage-hero {
  min-height: 250px;
  height: auto;
  padding-top: var(--nav-height);
  padding-bottom: 2rem;
}
main.rq-subpage-narrow + .subpage-hero h1 {
  font-size: 32px;
  letter-spacing: 4px;
  font-weight: 700;
}
main.rq-subpage-narrow + .subpage-hero::before {
  background: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.6));
}
main.rq-subpage-narrow + .subpage-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: var(--accent-gold);
  z-index: 3;
}

/* --- Body: subpage default light background --- */
body.subpage:has(main.rq-subpage-narrow) {
  background: #f8fafc;
  color: #334155;
}

/* --- Content area with subtle fade-in --- */
main.rq-subpage-narrow {
  color: #334155;
  animation: rqAuthFadeUp .45s ease both;
}
@keyframes rqAuthFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Card: clean white matching .subpage-card style --- */
main.rq-subpage-narrow > div:first-child {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-top: 3px solid var(--accent-gold) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.06) !important;
}

/* --- Brand gold accent bar (optional decorative element) --- */
.rq-auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 20px;
}
.rq-auth-brand::before,
.rq-auth-brand::after {
  content: '';
  height: 1px;
  width: 32px;
  background: var(--accent-gold);
  opacity: .4;
}
.rq-auth-brand-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-gold);
  flex-shrink: 0;
}

/* --- Typography --- */
main.rq-subpage-narrow h2 {
  color: #0f172a !important;
  letter-spacing: 1px;
  font-weight: 700 !important;
}
main.rq-subpage-narrow label {
  color: #334155 !important;
  font-size: .8rem !important;
  font-weight: 600 !important;
  letter-spacing: .3px;
}

/* --- Form fields: clean light inputs --- */
main.rq-subpage-narrow input[type="email"],
main.rq-subpage-narrow input[type="password"],
main.rq-subpage-narrow input[type="text"],
main.rq-subpage-narrow input[type="tel"],
main.rq-subpage-narrow select,
main.rq-subpage-narrow textarea {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  color: #334155 !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
}
main.rq-subpage-narrow input::placeholder,
main.rq-subpage-narrow textarea::placeholder {
  color: #94a3b8 !important;
}
main.rq-subpage-narrow input:focus,
main.rq-subpage-narrow select:focus,
main.rq-subpage-narrow textarea:focus {
  border-color: var(--accent-gold) !important;
  box-shadow: 0 0 0 3px rgba(249,178,51,.15) !important;
}
main.rq-subpage-narrow select option {
  background: #fff;
  color: #334155;
}

/* --- Material icons in fields --- */
main.rq-subpage-narrow .material-symbols-outlined {
  color: #94a3b8;
  font-size: 20px;
}
main.rq-subpage-narrow input:focus ~ .material-symbols-outlined,
main.rq-subpage-narrow select:focus ~ .material-symbols-outlined {
  color: var(--accent-gold);
}

/* --- Submit button: gold matching site accent --- */
main.rq-subpage-narrow button[type="submit"] {
  background: var(--accent-gold) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 15px;
  transition: all .2s ease !important;
  box-shadow: 0 2px 8px rgba(249,178,51,.2) !important;
}
main.rq-subpage-narrow button[type="submit"]:hover {
  background: var(--accent-gold-hover) !important;
  box-shadow: 0 4px 14px rgba(249,178,51,.3) !important;
  transform: translateY(-1px);
}
main.rq-subpage-narrow button[type="submit"]:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(249,178,51,.15) !important;
}

/* --- Checkbox: gold checked state --- */
main.rq-subpage-narrow input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
  position: relative;
  transition: all .15s ease;
  flex-shrink: 0;
}
main.rq-subpage-narrow input[type="checkbox"]:checked {
  background: var(--accent-gold) !important;
  border-color: var(--accent-gold) !important;
}
main.rq-subpage-narrow input[type="checkbox"]:checked::after {
  content: '\2713';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 11px;
  color: #fff;
  font-weight: 700;
}

/* --- Dividers --- */
main.rq-subpage-narrow .bg-slate-200 {
  background-color: #e2e8f0 !important;
}

/* --- Error alert --- */
main.rq-subpage-narrow .bg-red-50 {
  background: #fef2f2 !important;
  border-color: #fecaca !important;
}
main.rq-subpage-narrow .text-red-700 {
  color: #dc2626 !important;
}

/* --- Back-to-home link --- */
main.rq-subpage-narrow > .text-center a {
  color: #64748b;
  transition: color .2s ease;
}
main.rq-subpage-narrow > .text-center a:hover {
  color: var(--accent-gold);
}

/* --- Links inside card --- */
main.rq-subpage-narrow a.text-primary {
  color: var(--accent-gold) !important;
}
main.rq-subpage-narrow a.text-primary:hover {
  color: var(--accent-gold-hover) !important;
}

/* --- Small helper text --- */
main.rq-subpage-narrow .text-xs {
  color: #94a3b8 !important;
}
main.rq-subpage-narrow .text-secondary {
  color: #64748b !important;
}

/* === Media Center: 提取码复制 === */
.rq-code-copy {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  padding: 4px 10px; background: #f8fafc; border: 1px dashed #cbd5e1;
  border-radius: 6px; font-size: 12.5px; cursor: pointer;
  transition: all .2s; user-select: none;
  position: relative;
}
.rq-code-copy:hover { background: var(--accent-gold, #f9b233); color: #fff; border-color: var(--accent-gold, #f9b233); }
.rq-code-copy--copied { background: #10b981; color: #fff; border-color: #10b981; }