/* ============================================================
 * mobile-unified.css
 * 移动端样式统一覆盖层
 * 原则：仅增量修改样式，不改动 DOM 结构与交互逻辑
 * ============================================================ */

/* ===== 设计 Token 覆盖（对齐 tdql.cn 桌面首页 #f7ad00 橙金） ===== */
:root {
  /* 主色：橙金（严格对齐桌面 common.css / home-v2.css） */
  --mobile-primary: #f7ad00;
  --mobile-primary-dark: #dd701e;
  --mobile-primary-light: rgba(247, 173, 0, 0.12);

  /* 子页辅助金 */
  --mobile-accent-gold: #f9b233;
  --mobile-accent-gold-hover: #ffc44d;
  --mobile-accent-gold-deep: #c4791b;

  /* 倒计时特色色（复刻桌面 .counter_con，0.7 透明度） */
  --mobile-countdown-bg: rgba(183, 210, 83, 0.7);
  --mobile-countdown-border: #ffffff;
  --mobile-countdown-ended-bg: rgba(220, 53, 69, 0.85);

  /* 遮罩 */
  --mobile-hero-overlay: linear-gradient(to right,
      rgba(0,0,0,0.6) 0%,
      rgba(0,0,0,0.4) 30%,
      rgba(0,0,0,0.3) 60%,
      rgba(0,0,0,0) 100%);
  --mobile-gallery-overlay: rgba(0, 0, 0, 0.4);
  --mobile-video-overlay: rgba(0, 0, 0, 0.35);

  /* 背景色 */
  --mobile-bg: #f5f5f5;
  --mobile-card-bg: #ffffff;
  --mobile-surface-hover: #fafafa;

  /* 文字色 */
  --mobile-text-primary: #1a1a1a;
  --mobile-text-secondary: #666666;
  --mobile-text-muted: #999999;
  --mobile-text-on-primary: #ffffff;

  /* 边框 */
  --mobile-border: #e5e5e5;
  --mobile-border-light: #f0f0f0;

  /* 圆角阶梯（对齐桌面：偏小、克制） */
  --mobile-radius-xs: 4px;
  --mobile-radius-sm: 6px;
  --mobile-radius-md: 8px;
  --mobile-radius-lg: 12px;
  --mobile-radius-xl: 18px;
  --mobile-radius-full: 9999px;

  /* 阴影统一为低透明度黑色 */
  --mobile-shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --mobile-shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --mobile-shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --mobile-shadow-lg: 0 8px 24px rgba(0,0,0,0.10);

  /* 功能色去饱和 */
  --mobile-success: #10B981;
  --mobile-warning: #F59E0B;
  --mobile-danger: #EF4444;
  --mobile-info: #0EA5E9;
  --mobile-error-bg: rgba(239, 68, 68, 0.1);
  --mobile-error-border: rgba(239, 68, 68, 0.3);
  --mobile-error: #EF4444;

  /* 间距阶梯 */
  --mobile-spacing-xs: 6px;
  --mobile-spacing-sm: 10px;
  --mobile-spacing-md: 16px;
  --mobile-spacing-lg: 20px;
  --mobile-spacing-xl: 28px;

  /* TabBar */
  --mobile-tab-bg: #FFFFFF;
  --mobile-tab-height: 56px;
}

/* ===== 全局排版（对齐桌面首页字体） ===== */
body {
  font-size: 16px;
  line-height: 1.5;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

/* 正文/辅助文字最小 13px */
body * {
  font-size: inherit;
}

/* ===== 底部 TabBar ===== */
.mobile-tab-bar {
  height: calc(var(--mobile-tab-height) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
}

.mobile-tab-bar-inner {
  height: var(--mobile-tab-height);
}

.mobile-tab-bar-item {
  min-height: 48px;
  padding: 8px 0;
  gap: 4px;
}

.mobile-tab-bar-item .material-symbols-outlined {
  font-size: 22px;
}

.mobile-tab-bar-item span:last-child {
  font-size: 11px;
  font-weight: 500;
}

/* ===== 顶部 Header ===== */
.mobile-header {
  padding: 16px;
  border-bottom: 1px solid var(--mobile-border);
}

.mobile-header-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}

/* 返回链接增大触控区 */
.mobile-header a.flex.items-center.gap-1 {
  min-height: 44px;
  padding: 8px 0;
  display: inline-flex !important;
  align-items: center;
}

/* 语言切换按钮 */
.mobile-header .rounded-full.text-xs.font-medium {
  min-height: 32px;
  padding: 6px 12px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
}

.mobile-back-link {
  min-height: 44px;
  padding: 8px 0;
  display: inline-flex !important;
  align-items: center;
}

.mobile-lang-switch {
  min-height: 32px !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  display: inline-flex !important;
  align-items: center;
}

/* ===== Section Header ===== */
.section-header {
  padding: 18px 16px 14px;
}

.section-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.section-more {
  font-size: 14px;
  font-weight: 500;
  padding: 6px 0;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}

/* 标题前的图标：裸图标（无容器底），尺寸占位保留 */
.section-header > div > span:first-child,
.section-header > div > div:first-child {
  width: 36px !important;
  height: 36px !important;
}

.section-header > div > span:first-child .material-symbols-outlined,
.section-header > div > div:first-child .material-symbols-outlined {
  font-size: 24px !important;
  color: var(--mobile-primary) !important;
}

/* ===== Quick Entry Grid ===== */
.quick-entry-grid {
  padding: 18px 16px !important;
  gap: 14px !important;
  margin-bottom: 12px !important;
}

.quick-entry-item {
  padding: 14px 8px !important;
  gap: 10px !important;
  border-radius: var(--mobile-radius-md) !important;
}

.quick-entry-item:active {
  background: var(--mobile-surface-hover);
}

.quick-entry-icon {
  width: 40px !important;
  height: 40px !important;
}

.quick-entry-icon .material-symbols-outlined {
  font-size: 22px !important;
  color: var(--mobile-primary) !important;
}

.quick-entry-item > span:last-child {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--mobile-text-primary) !important;
}

/* ===== Card 组件 ===== */
.mobile-card,
.store-product-card,
.race-card,
.enrollment-card,
.product-card {
  border-radius: var(--mobile-radius-md) !important;
  box-shadow: var(--mobile-shadow-sm) !important;
  overflow: hidden;
}

.mobile-card-image,
.store-product-image-wrap,
.race-card .mobile-card-image,
.product-card > div:first-child {
  aspect-ratio: 16/9;
  background: var(--mobile-bg) !important;
}

.mobile-card-body,
.store-product-body {
  padding: 16px !important;
}

.mobile-card-title,
.store-product-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  margin-bottom: 8px !important;
}

.mobile-card-subtitle,
.store-product-body p {
  font-size: 13px !important;
  color: var(--mobile-text-muted) !important;
}

.mobile-card-badge {
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: var(--mobile-radius-full) !important;
  margin-bottom: 10px !important;
  background: var(--mobile-primary-light) !important;
  color: var(--mobile-primary) !important;
}

.mobile-card-footer {
  padding: 12px 16px !important;
}

/* ===== List Item ===== */
.mobile-list-item,
.news-item,
.stage-item,
.order-item,
.store-cart-item,
.store-checkout-item {
  padding: 16px !important;
  gap: 14px !important;
}

.mobile-list-item-image,
.news-item img,
.order-item img {
  width: 56px !important;
  height: 56px !important;
  border-radius: var(--mobile-radius-sm) !important;
  object-fit: cover;
  flex-shrink: 0;
}

.news-item img {
  width: 80px !important;
  height: 60px !important;
}

.store-cart-item-image {
  width: 76px !important;
  height: 76px !important;
}

.store-checkout-item-image {
  width: 64px !important;
  height: 64px !important;
}

.mobile-list-item-title,
.store-cart-item-name,
.store-checkout-item-name {
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

.mobile-list-item-subtitle,
.store-cart-item-price,
.store-checkout-item-price {
  font-size: 13px !important;
  color: var(--mobile-text-muted) !important;
  margin-top: 4px !important;
}

.mobile-list-item-arrow {
  font-size: 22px !important;
  color: var(--mobile-text-muted) !important;
  min-width: 24px;
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== 按钮 ===== */
.btn-primary-mobile,
.btn-secondary-mobile,
.store-btn-primary,
.store-btn-secondary,
.store-btn-primary-inline,
.btn-login,
.btn-register,
.btn-logout,
.btn-hero-primary,
.btn-hero-secondary {
  min-height: 48px !important;
  padding: 12px 24px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--mobile-radius-full) !important;
}

.btn-hero-primary,
.btn-hero-secondary {
  padding: 12px 20px !important;
}

.btn-secondary-mobile {
  border: 1.5px solid rgba(255,255,255,0.35) !important;
}

.store-btn-primary-inline {
  padding: 10px 20px !important;
}

.btn-logout {
  border-radius: var(--mobile-radius-md) !important;
}

/* ===== 表单 ===== */
.form-input,
.form-select,
.store-form-input,
.store-form-input[type="text"],
.store-form-input[type="tel"],
input.store-form-input,
textarea.store-form-input {
  font-size: 16px !important;
  min-height: 48px !important;
  padding: 14px 16px !important;
  border-radius: var(--mobile-radius-sm) !important;
  border: 1.5px solid var(--mobile-border) !important;
  background: var(--mobile-bg) !important;
  color: var(--mobile-text-primary) !important;
}

.form-input:focus,
.form-select:focus,
.store-form-input:focus {
  border-color: var(--mobile-primary) !important;
  box-shadow: 0 0 0 3px rgba(255,107,53,0.12) !important;
}

.form-label,
.store-form-label {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--mobile-text-secondary) !important;
  margin-bottom: 8px !important;
}

.form-textarea {
  font-size: 16px !important;
  padding: 14px !important;
  min-height: 96px !important;
}

.input-icon {
  left: 16px !important;
  font-size: 20px !important;
}

.form-input,
.form-select {
  padding-left: 48px !important;
}

/* ===== 商城专用 ===== */
.store-detail {
  padding-bottom: calc(var(--mobile-tab-height) + env(safe-area-inset-bottom, 0px) + 90px) !important;
}

.store-detail-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

.store-detail-price {
  font-size: 26px !important;
  font-weight: 800 !important;
}

.store-detail-footer {
  bottom: calc(var(--mobile-tab-height) + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 1100 !important;
  padding: 12px 16px !important;
  border-top: 1px solid var(--mobile-border);
  background: var(--mobile-card-bg) !important;
}

.store-product-card {
  border-radius: var(--mobile-radius-md) !important;
}

.store-product-body {
  padding: 12px !important;
}

.store-product-title {
  font-size: 14px !important;
  margin-bottom: 8px !important;
  height: 2.8em;
}

.store-product-price {
  font-size: 16px !important;
  font-weight: 700 !important;
}

.price-symbol {
  font-size: 13px !important;
}

.price-value {
  font-size: inherit;
  font-weight: 700;
}

.store-cart-list {
  padding-bottom: calc(100px + var(--mobile-tab-height) + env(safe-area-inset-bottom, 0px)) !important;
}

.store-cart-footer {
  bottom: calc(var(--mobile-tab-height) + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 1100 !important;
  padding: 12px 16px !important;
}

.store-checkout-list {
  padding-bottom: calc(var(--mobile-tab-height) + env(safe-area-inset-bottom, 0px)) !important;
}

.store-checkout-form {
  padding-bottom: calc(var(--mobile-tab-height) + env(safe-area-inset-bottom, 0px) + 20px) !important;
}

.store-checkout-item {
  border-radius: var(--mobile-radius-md) !important;
  margin-bottom: 12px !important;
}

.store-form-section {
  padding: 18px !important;
  border-radius: var(--mobile-radius-lg) !important;
  margin-bottom: 18px !important;
}

.store-form-group {
  margin-bottom: 16px !important;
}

.store-checkout-summary {
  padding: 18px !important;
  border-radius: var(--mobile-radius-lg) !important;
}

/* ===== 结算页地址簿选择 ===== */
.store-address-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.store-address-card {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border: 1px solid var(--mobile-border, #e2e8f0);
  border-radius: var(--mobile-radius-md, 10px);
  background: var(--mobile-bg, #fff);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.store-address-card:active {
  background: var(--mobile-bg-secondary, #f8fafc);
}

.store-address-card--active {
  border-color: var(--mobile-primary, #2563eb);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.store-address-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.store-address-name {
  font-weight: 700;
  color: var(--mobile-text, #0f172a);
}

.store-address-phone {
  font-size: 13px;
  color: var(--mobile-text-secondary, #64748b);
}

.store-address-tag {
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--mobile-primary, #2563eb);
  border-radius: 999px;
}

.store-address-detail {
  font-size: 13px;
  line-height: 1.5;
  color: var(--mobile-text-secondary, #64748b);
}

.store-success {
  min-height: 100vh;
  padding-bottom: calc(var(--mobile-tab-height) + env(safe-area-inset-bottom, 0px) + 32px) !important;
}

.store-success-actions {
  gap: 14px !important;
}

/* ===== 用户中心菜单 ===== */
.menu-item {
  padding: 16px !important;
  gap: 14px !important;
}

.menu-icon {
  width: 40px !important;
  height: 40px !important;
}

.menu-icon .material-symbols-outlined {
  font-size: 22px !important;
  color: var(--mobile-primary) !important;
}

.menu-title {
  font-size: 16px !important;
  font-weight: 500 !important;
}

.menu-arrow {
  font-size: 22px !important;
  min-width: 24px;
  min-height: 24px;
}

.menu-badge {
  font-size: 12px !important;
  padding: 3px 10px !important;
}

/* ===== Empty State ===== */
.store-empty,
.store-empty.p-8 {
  padding: 64px 24px !important;
}

.store-empty-icon {
  font-size: 64px !important;
  color: var(--mobile-text-muted) !important;
}

.store-empty-text {
  font-size: 15px !important;
  color: var(--mobile-text-secondary) !important;
  margin-top: 16px !important;
  margin-bottom: 20px !important;
}

/* 通用空状态 */
section > div[style*="padding: 48px 16px"],
section > div[style*="padding: 64px 16px"],
section > div[style*="padding: 32px 16px"] {
  padding: 48px 24px !important;
}

section > div > span.material-symbols-outlined[style*="font-size: 56px"],
section > div > span.material-symbols-outlined[style*="font-size: 48px"],
section > div > span.material-symbols-outlined.text-6xl {
  font-size: 64px !important;
  color: var(--mobile-text-muted) !important;
}

/* ===== 登录/注册页 ===== */
.login-page,
.register-page {
  padding-bottom: calc(var(--mobile-tab-height) + env(safe-area-inset-bottom, 0px)) !important;
}

.login-form-wrap,
.register-form-wrap {
  padding: 44px 20px 32px !important;
}

.login-title,
.register-title {
  font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
  font-size: 28px !important;
}

.login-logo,
.register-logo {
  font-size: 12px !important;
  letter-spacing: 0.15em !important;
}

.login-card,
.register-card {
  padding: 28px 20px !important;
  border-radius: var(--mobile-radius-lg) !important;
}

.error-msg,
.bind-error-banner {
  font-size: 14px !important;
  padding: 14px !important;
  border-radius: var(--mobile-radius-sm) !important;
}

/* 全局基础视觉（错误变体）：补齐 ForgotPassword/ResetPassword/ResendVerificationRequest
   等未在页面内定义 .error-msg 样式的新页面横幅背景；页面内作用域规则加载在后，可覆盖。 */
.error-msg {
  background: var(--mobile-error-bg);
  border: 1px solid var(--mobile-error-border);
  color: var(--mobile-error);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.error-msg.error-msg--success {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: var(--mobile-success, #10B981);
}

/* 空横幅隐藏：site.css(tailwind) 的 .hidden{display:none} 与 .error-msg 同为单类优先级，
   但本样式表加载在后 → display:flex 覆盖 display:none，无消息时仍显示空的粉色横幅。
   用双类选择器(0,2,0)+!important 固定隐藏规则，且仅作用 error-msg 不影响其它用户。 */
.error-msg.hidden {
  display: none !important;
}

.password-hint,
.bio-hint {
  font-size: 12px !important;
}

/* ===== 报名 ===== */
.enrollment-card {
  padding: 18px !important;
  gap: 16px !important;
  border-radius: var(--mobile-radius-lg) !important;
}

.enrollment-card > div:first-child {
  width: 56px !important;
  height: 56px !important;
}

.enrollment-card > div:first-child .material-symbols-outlined {
  font-size: 28px !important;
  color: var(--mobile-primary) !important;
}

.enrollment-card h3 {
  font-size: 16px !important;
  font-weight: 700 !important;
}

.enrollment-card p {
  font-size: 13px !important;
}

/* ===== 赛事卡片 ===== */
.race-card > div:last-child {
  padding: 18px !important;
}

.race-card h3 {
  font-size: 18px !important;
  font-weight: 700 !important;
}

.race-card p {
  font-size: 14px !important;
}

.race-card span[style*="border-radius: 100px"] {
  font-size: 12px !important;
  padding: 5px 12px !important;
}

/* ===== 赛段详情 ===== */
.stage-item {
  padding: 16px !important;
}

.stage-item > div:first-child {
  width: 44px !important;
  height: 44px !important;
}

.stage-item h4 {
  font-size: 16px !important;
  font-weight: 600 !important;
}

/* ===== 城市 Chip ===== */
.race-detail-city-chip,
section a[href*="/cities"] span,
section span[style*="border-radius: var(--mobile-radius-full)"] {
  padding: 10px 16px !important;
  font-size: 14px !important;
  background: var(--mobile-bg) !important;
  color: var(--mobile-text-secondary) !important;
  border-radius: var(--mobile-radius-full) !important;
}

/* ===== 底部 Sheet / 弹窗 ===== */
.address-sheet,
.bottom-sheet,
[role="dialog"],
[aria-modal="true"] {
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

.address-sheet .close-btn,
.bottom-sheet .close-btn,
[role="dialog"] button[aria-label="关闭"],
[role="dialog"] .close {
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== 通用弹窗安全区域 ===== */
.rq-qr-overlay,
[role="dialog"][aria-modal="true"] {
  padding: 16px;
  align-items: flex-end;
}

.rq-qr-modal,
[role="dialog"] > div {
  max-width: calc(100vw - 32px);
  width: 100%;
  margin: 0 auto 16px;
  border-radius: var(--mobile-radius-lg);
}

/* ===== 地址管理按钮 ===== */
.mobile-add-btn,
.mobile-delete-btn {
  min-height: 44px !important;
  min-width: 44px !important;
  padding: 8px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ===== 桌面切换按钮 ===== */
.desktop-switch {
  width: 44px;
  height: 44px;
}

/* ===== Hero Section 首页 ===== */
.hero-section {
  min-height: 280px !important;
}

.hero-section h1 {
  font-size: 30px !important;
  line-height: 1.2 !important;
}

.hero-section p {
  font-size: 15px !important;
}

.hero-section > div > div:first-child {
  font-size: 12px !important;
  padding: 7px 14px !important;
}

/* 赛事 Banner Card */
.race-banner-card {
  border-radius: var(--mobile-radius-lg) !important;
}

.race-banner-card > div {
  padding: 22px !important;
}

.race-banner-card h3 {
  font-size: 19px !important;
}

.race-banner-card p {
  font-size: 14px !important;
}

/* 新闻列表 */
.news-item {
  padding: 16px !important;
}

.news-item h4 {
  font-size: 15px !important;
}

.news-item p {
  font-size: 13px !important;
  margin-top: 6px !important;
}

/* 推荐商品卡片 */
.product-card h4 {
  font-size: 14px !important;
}

.product-card .price-value {
  font-size: 18px !important;
}

/* ===== 订单列表 ===== */
.order-item {
  padding: 18px 16px !important;
}

.order-item span[font-family="monospace"] {
  font-size: 13px !important;
}

.order-item span[style*="border-radius: 100px"] {
  font-size: 12px !important;
  padding: 4px 10px !important;
}

.order-item img {
  width: 56px !important;
  height: 56px !important;
}

.order-item .price-value {
  font-size: 18px !important;
}

/* ===== 志愿者表单小按钮 ===== */
.volunteer-file-remove,
button[onclick*="removeFile"],
.btn-remove-file {
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 10px !important;
}

/* ===== 赞助商 ===== */
.sponsors-grid .mobile-card-body {
  padding: 14px !important;
}

.sponsors-grid .mobile-card-title {
  font-size: 14px !important;
}

/* ===== 可访问性：焦点环 ===== */
*:focus-visible {
  outline: 2px solid var(--mobile-primary);
  outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--mobile-primary);
  outline-offset: 2px;
}

/* ===== 减少动画（尊重用户偏好） ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
 * v3 重构样式（对齐 tools/mobile-redesign-demo.html）
 * 主色 #f7ad00 · 倒计时 #b7d253(0.7) · 黑卡 #1a1a1a · 圆角 8px
 * ============================================================ */

/* ===== 首页 Hero：多图轮播 + 底部标题（方向A 2026-09-24：倒计时/落幕信息移至下方状态卡） ===== */
.hero-v3 {
  position: relative;
  height: 320px;
  overflow: hidden;
  background: #000;
}
.hero-v3-slides {
  position: absolute;
  inset: 0;
  display: flex;
  transition: transform 0.5s ease;
}
.hero-v3-slide {
  min-width: 100%;
  height: 100%;
  position: relative;
  background-size: cover;
  background-position: center;
}
.hero-v3-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  /* 底部标题对齐：下深上浅的遮罩（原左深右浅遮罩用于左侧布局，已随布局调整） */
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 55%);
  pointer-events: none;
}
.hero-v3-dots {
  position: absolute;
  bottom: 22px;
  left: 0; right: 16px;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  z-index: 30;
}
.hero-v3-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.hero-v3-dot.active {
  background: var(--mobile-primary);
  transform: scale(1.3);
}
.hero-v3-overlay {
  position: absolute;
  bottom: 20px;
  left: 16px;
  right: 16px;
  z-index: 20;
  color: #fff;
}
.hero-v3-tag {
  display: inline-block;
  border: 1px solid rgba(255,255,255,0.5);
  background: rgba(0,0,0,0.45);
  padding: 4px 10px;
  border-radius: var(--mobile-radius-xs);
  font-size: 11px;
  color: #fff;
  font-weight: 500;
  margin-bottom: 10px;
  letter-spacing: 0.5px;
}
.hero-v3-title {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}

/* ===== 倒计时模块（赛前/赛中，位于状态卡内） ===== */
.countdown {
  display: flex;
  gap: 6px;
}
.countdown-unit {
  width: 56px;
  height: 70px;
  background: var(--mobile-countdown-bg);
  border: 1px solid var(--mobile-countdown-border);
  border-radius: var(--mobile-radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.countdown-num {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.countdown-unit-label {
  font-size: 10px;
  margin-top: 3px;
  opacity: 0.95;
}
/* ===== 赛事状态卡（方向A 2026-09-24）：Hero 下方独立白卡，承载三态 =====
   赛前/赛中：状态行 + 倒计时 + CTA；赛后：状态行 + 三连统计 + 赛果链接。
   替代原 race-finished-card（Hero 内金色落幕卡）与 countdown.ended。 */
.race-status-card {
  background: var(--mobile-card-bg);
  margin: 8px 12px 0;
  border-radius: var(--mobile-radius-md);
  padding: 14px 16px;
  box-shadow: var(--mobile-shadow-xs);
}
.rsc-status {
  font-size: 12px;
  color: var(--mobile-text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.rsc-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mobile-primary);
  flex-shrink: 0;
}
.rsc-race-name { color: var(--mobile-primary); font-weight: 600; }
.rsc-stats {
  display: flex;
  text-align: center;
  margin-top: 12px;
}
.rsc-stat { flex: 1; }
.rsc-stat + .rsc-stat { border-left: 1px solid var(--mobile-border-light); }
.rsc-stat b {
  font-size: 24px;
  font-weight: 800;
  color: var(--mobile-primary);
  line-height: 1;
}
.rsc-stat span {
  display: block;
  font-size: 11px;
  color: var(--mobile-text-muted);
  margin-top: 4px;
}
.rsc-link {
  display: block;
  margin-top: 12px;
  padding-top: 11px;
  text-align: center;
  border-top: 1px solid var(--mobile-border-light);
  font-size: 13px;
  font-weight: 600;
  color: var(--mobile-primary);
  text-decoration: none;
}
.rsc-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.rsc-actions a { flex: 1; }
/* 卡内倒计时浅色化：原半透明绿底白字为深色 Hero 设计，白卡上改灰底深字 */
.race-status-card .countdown { margin-top: 12px; }
.race-status-card .countdown-unit {
  background: var(--mobile-bg);
  border-color: transparent;
  color: var(--mobile-text-primary);
  text-shadow: none;
}
.race-status-card .countdown-num { color: var(--mobile-text-primary); }
.race-status-card .countdown-unit-label { color: var(--mobile-text-muted); }

/* ===== 子页 Hero（subpage-hero） ===== */
.subpage-hero-v3 {
  position: relative;
  min-height: 200px;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.6) 100%),
    var(--subpage-hero-image, url('/landing/v2/images/banner2.jpg')) center/cover no-repeat;
  color: #fff;
  padding-top: 60px;
  overflow: hidden;
}
.subpage-hero-v3::after {
  content: '';
  position: absolute;
  bottom: 0; left: 16px;
  width: 60px;
  height: 3px;
  background: var(--mobile-primary);
}
.subpage-hero-v3-content { padding: 24px 16px 20px; position: relative; z-index: 1; }
.subpage-hero-v3 h1 {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 6px 0;
  text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}
.subpage-hero-v3 p {
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  margin: 0;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* ===== 图集区块（复刻 .pic_banner） ===== */
.gallery-v3-wrap {
  position: relative;
  margin: 8px 0 0;
  background: #000;
}
.gallery-v3-slides {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.gallery-v3-slides-inner {
  position: absolute;
  inset: 0;
  display: flex;
  transition: transform 0.5s ease;
}
.gallery-v3-slide {
  min-width: 100%;
  height: 100%;
  position: relative;
  background-size: cover;
  background-position: center;
}
.gallery-v3-slides::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--mobile-gallery-overlay);
  pointer-events: none;
  z-index: 2;
}
.gallery-v3-title-overlay {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 3;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}
.gallery-v3-more {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 3;
  color: #fff;
  font-size: 11px;
  background: rgba(0,0,0,0.5);
  padding: 3px 8px;
  border-radius: var(--mobile-radius-xs);
  text-decoration: none;
}
.gallery-v3-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 5;
  font-size: 18px;
  font-weight: 300;
  user-select: none;
  border: none;
}
.gallery-v3-arrow.prev { left: 12px; }
.gallery-v3-arrow.next { right: 12px; }
.gallery-v3-dots {
  position: absolute;
  bottom: 10px;
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
  z-index: 4;
}
.gallery-v3-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  cursor: pointer;
  border: none;
  padding: 0;
}
.gallery-v3-dot.active {
  background: var(--mobile-primary);
  transform: scale(1.3);
}

/* ===== 视频区块 ===== */
.video-v3-section {
  background: var(--mobile-card-bg);
  margin-top: 8px;
  padding: 14px 12px;
}
.main-video-v3-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--mobile-radius-md);
  overflow: hidden;
}
.main-video-v3-slides {
  position: absolute;
  inset: 0;
  display: flex;
  transition: transform 0.6s ease;
}
.main-video-v3-slide {
  min-width: 100%;
  height: 100%;
  position: relative;
  background-size: cover;
  background-position: center;
  object-fit: cover;
  background-color: #000;
}
/* 播放视频时隐藏播放按钮遮罩 */
.main-video-v3-wrap.playing .main-play-v3-hint {
  display: none;
}
.main-play-v3-hint {
  position: absolute;
  inset: 0;
  background: var(--mobile-video-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}
.main-play-v3-btn {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.main-video-v3-meta {
  position: absolute;
  bottom: 10px; left: 12px; right: 50px;
  z-index: 3;
  color: #fff;
  font-size: 11px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  pointer-events: none;
}
.main-video-v3-title { font-weight: 500; margin-bottom: 2px; }
.main-video-v3-counter { opacity: 0.7; font-size: 10px; }
.main-video-v3-dots {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 4;
  display: flex;
  gap: 4px;
}
.main-video-v3-dot {
  width: 16px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,0.4);
  transition: background 0.3s, width 0.3s;
  border: none;
  padding: 0;
  cursor: pointer;
}
.main-video-v3-dot.active {
  background: var(--mobile-primary);
  width: 20px;
}

/* ===== 赛事黑卡（首页实时赛况 + 列表卡变体） ===== */
.race-card-dark {
  background: #1a1a1a;
  color: #fff;
  border-radius: var(--mobile-radius-md);
  border-left: 3px solid var(--mobile-primary);
  padding: 14px;
  margin-bottom: 10px;
  text-decoration: none;
  display: block;
  transition: transform 0.2s ease;
}
.race-card-dark-badge {
  display: inline-block;
  background: var(--mobile-primary);
  color: #1a1a1a;
  padding: 2px 8px;
  border-radius: var(--mobile-radius-xs);
  font-size: 10px;
  font-weight: 700;
  margin-bottom: 6px;
}
.race-card-dark-title {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 4px 0;
  line-height: 1.4;
  color: #fff;
}
.race-card-dark-meta {
  font-size: 11px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 6px;
}
.race-card-dark-cta {
  font-size: 12px;
  color: var(--mobile-primary);
  font-weight: 600;
}

/* ===== 新闻标题: 深色文字 (对齐 PC 端 .rq-card-title color:#0f172a) =====
   原来用 var(--mobile-primary) #f7ad00 橙金作标题文字色,
   在白底上对比度仅 1.7:1, 远低于 WCAG 4.5:1, 看起来发黄不清晰.
   主色应只用于强调元素 (按钮/图标/徽章), 不用于大段标题文字. */
.news-item .news-headline-orange {
  font-size: 14px;
  font-weight: 600;
  color: var(--mobile-text-primary);
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== 商品卡（白卡 + 边框 + 左上角徽章） ===== */
.product-card-v3 {
  background: var(--mobile-card-bg);
  border: 1px solid var(--mobile-border);
  border-radius: var(--mobile-radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.product-card-v3:active {
  border-color: var(--mobile-primary);
}
.product-card-v3-thumb {
  aspect-ratio: 1;
  background: var(--mobile-bg);
  background-size: cover;
  background-position: center;
  position: relative;
}
.product-card-v3-badge {
  position: absolute;
  top: 6px; left: 6px;
  background: var(--mobile-primary);
  color: #1a1a1a;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 2px;
  z-index: 2;
}
.product-card-v3-info {
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.product-card-v3-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--mobile-text-primary);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 31px;
  margin: 0;
}
.product-card-v3-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px;
}
.product-card-v3-price {
  font-size: 14px;
  font-weight: 700;
  color: var(--mobile-primary);
}
.product-card-v3-price::before {
  content: '¥';
  font-size: 10px;
  margin-right: 1px;
}
.product-card-v3-original {
  font-size: 10px;
  color: var(--mobile-text-muted);
  text-decoration: line-through;
}

/* ===== 列表页卡片（赛事列表） ===== */
.list-card-v3 {
  background: var(--mobile-card-bg);
  border: 1px solid var(--mobile-border);
  border-radius: var(--mobile-radius-md);
  overflow: hidden;
  text-decoration: none;
  display: block;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.list-card-v3:active {
  border-color: var(--mobile-primary);
}
.list-card-v3-img {
  width: 100%;
  height: 160px;
  background-size: cover;
  background-position: center;
  position: relative;
  background-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.4) 100%);
}
.list-card-v3-badge {
  position: absolute;
  top: 8px; left: 8px;
  background: var(--mobile-primary);
  color: #1a1a1a;
  padding: 2px 6px;
  border-radius: var(--mobile-radius-xs);
  font-size: 9px;
  font-weight: 700;
}
.list-card-v3-body { padding: 12px; }
.list-card-v3-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--mobile-text-primary);
  margin: 0 0 6px 0;
  line-height: 1.4;
}
.list-card-v3-meta {
  font-size: 11px;
  color: var(--mobile-text-muted);
  display: flex;
  gap: 8px;
}

/* ===== 详情页 info-row ===== */
.detail-v3-section {
  background: var(--mobile-card-bg);
  margin-top: 8px;
  padding: 14px 12px;
}
.detail-v3-section h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--mobile-text-primary);
  margin: 0 0 10px 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--mobile-border-light);
  position: relative;
  padding-left: 10px;
}
.detail-v3-section h3::before {
  content: '';
  position: absolute;
  left: 0; top: 2px;
  width: 3px; height: 14px;
  background: var(--mobile-primary);
  border-radius: 2px;
}
.info-row {
  display: flex;
  padding: 10px 0;
  border-bottom: 1px solid var(--mobile-border-light);
  font-size: 13px;
}
.info-row:last-child { border-bottom: none; }
.info-label {
  width: 80px;
  color: var(--mobile-text-muted);
  flex-shrink: 0;
}
.info-value {
  flex: 1;
  color: var(--mobile-text-primary);
  font-weight: 500;
}
.info-value.highlight {
  color: var(--mobile-primary);
  font-weight: 700;
}
.stage-list-v3 {
  list-style: none;
  padding: 0;
  margin: 0;
}
.stage-list-v3 li {
  padding: 10px 12px;
  background: var(--mobile-bg);
  border-left: 3px solid var(--mobile-primary);
  border-radius: var(--mobile-radius-sm);
  margin-bottom: 8px;
  font-size: 12px;
}
.stage-list-v3 li:last-child { margin-bottom: 0; }
.stage-list-v3 .stage-name {
  font-weight: 700;
  color: var(--mobile-text-primary);
  margin-bottom: 2px;
}
.stage-list-v3 .stage-meta {
  font-size: 11px;
  color: var(--mobile-text-muted);
}

/* ===== 状态徽章 ===== */
.state-badge {
  display: inline-block;
  font-size: 9px;
  padding: 1px 6px;
  border-radius: var(--mobile-radius-xs);
  margin-left: 6px;
  font-weight: 700;
  vertical-align: middle;
}
.state-badge.pre { background: var(--mobile-countdown-bg); color: #fff; }
.state-badge.during { background: var(--mobile-primary); color: #1a1a1a; }
.state-badge.post { background: var(--mobile-countdown-ended-bg); color: #fff; }