/* ===== DS足球 UI POLISH FINAL ===== */

:root {
  --ds-green: #16a36a;
  --ds-green-2: #16c784;
  --ds-blue: #1f459f;
  --ds-blue-2: #244bad;
  --ds-bg: #eef3f8;
  --ds-card: #ffffff;
  --ds-text: #0f172a;
  --ds-muted: #64748b;
  --ds-line: #e5e7eb;
  --ds-red: #ef476f;
  --ds-yellow: #f59e0b;
}

html,
body {
  background: var(--ds-bg) !important;
  color: var(--ds-text) !important;
}

/* 顶部更干净 */
header,
.site-header,
.topbar,
.navbar {
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(15, 23, 42, .06) !important;
}

/* 下载按钮更像产品按钮 */
.download-app-btn,
a[href*="mkj8.cc"],
a[href*="66666.com"] {
  border-radius: 999px !important;
  box-shadow: 0 10px 26px rgba(22, 199, 132, .28) !important;
}

/* 世界杯横幅高级化 */
.worldcup-activity-banner,
.worldcup-hero,
.hero,
.hero-section,
.cup-hero {
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.15), transparent 24%),
    linear-gradient(135deg, #1f459f 0%, #244bad 55%, #193a90 100%) !important;
  overflow: hidden !important;
}

/* 赛程主卡片 */
.schedule-card,
.match-card,
.main-card,
.fixtures-card {
  border-radius: 18px !important;
  box-shadow: 0 18px 50px rgba(15,23,42,.08) !important;
  border: 1px solid rgba(226,232,240,.9) !important;
}

/* 首页比赛行高级化 */
.match-row[data-id] {
  position: relative !important;
  cursor: pointer !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease !important;
}

.match-row[data-id]:hover {
  transform: translateY(-1px) !important;
  background: #fbfefd !important;
  box-shadow: inset 4px 0 0 var(--ds-green), 0 8px 24px rgba(15,23,42,.06) !important;
}

.match-row[data-id]::after {
  content: "查看详情";
  position: absolute;
  right: 34px;
  top: 50%;
  transform: translateY(-50%);
  padding: 4px 9px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  font-size: 12px;
  font-weight: 900;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, right .18s ease;
}

.match-row[data-id]:hover::after {
  opacity: 1;
  right: 44px;
}

/* 进行中比赛闪动 */
.match-row.ds-live {
  background: linear-gradient(90deg, rgba(22,199,132,.08), transparent 42%) !important;
}

.match-row.ds-live::before {
  content: "LIVE";
  position: absolute;
  left: 8px;
  top: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #10b981;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  box-shadow: 0 0 0 0 rgba(16,185,129,.55);
  animation: dsLivePulse 1.5s infinite;
}

@keyframes dsLivePulse {
  0% { box-shadow: 0 0 0 0 rgba(16,185,129,.55); }
  70% { box-shadow: 0 0 0 8px rgba(16,185,129,0); }
  100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}

/* 完场状态胶囊优化 */
.match-row.ds-finished {
  opacity: .98;
}

.match-row.ds-upcoming {
  background: #fcfdff !important;
}

/* 日期栏更顺滑 */
.date-tabs,
.date-strip,
.calendar-tabs {
  scrollbar-width: thin;
  scroll-behavior: smooth;
}

.date-tabs::-webkit-scrollbar,
.date-strip::-webkit-scrollbar,
.calendar-tabs::-webkit-scrollbar {
  height: 6px;
}

.date-tabs::-webkit-scrollbar-thumb,
.date-strip::-webkit-scrollbar-thumb,
.calendar-tabs::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
}

/* 右侧数据卡片 */
.sidebar-card,
.rank-card,
.info-card,
.standings-card {
  border-radius: 16px !important;
  box-shadow: 0 16px 42px rgba(15,23,42,.08) !important;
  border: 1px solid rgba(226,232,240,.9) !important;
}

/* 小组排名晋级视觉 */
.standings-card tr:nth-child(1),
.standings-card tr:nth-child(2),
.rank-card tr:nth-child(1),
.rank-card tr:nth-child(2) {
  background: linear-gradient(90deg, rgba(22,199,132,.08), transparent) !important;
}

.standings-card tr:nth-child(3),
.rank-card tr:nth-child(3) {
  background: linear-gradient(90deg, rgba(245,158,11,.08), transparent) !important;
}

/* ===== 比赛详情弹窗高级化 ===== */

.pro-modal-mask {
  background: rgba(15, 23, 42, .56) !important;
  backdrop-filter: blur(6px) !important;
}

.pro-modal-panel {
  border-radius: 26px !important;
  box-shadow: 0 40px 110px rgba(15,23,42,.36) !important;
  border: 1px solid rgba(255,255,255,.4) !important;
}

.pro-match-content {
  background:
    linear-gradient(180deg, #ffffff 0%, #ffffff 62%, #f8fafc 100%) !important;
}

/* 详情头部 */
.pro-head {
  margin: -28px -28px 18px !important;
  padding: 34px 64px 30px !important;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.18), transparent 26%),
    linear-gradient(135deg, #183f9d, #2650b5) !important;
  border-bottom: 0 !important;
  color: #fff !important;
}

.pro-team-text b,
.pro-head .pro-team b {
  color: #ffffff !important;
}

.pro-team-text small {
  color: rgba(255,255,255,.72) !important;
}

.pro-real-flag {
  background: rgba(255,255,255,.16) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 10px 24px rgba(0,0,0,.16) !important;
}

.pro-score strong {
  color: #ffffff !important;
  font-size: 48px !important;
  text-shadow: 0 10px 28px rgba(0,0,0,.24);
}

.pro-score span {
  background: rgba(22,199,132,.95) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 22px rgba(22,199,132,.28);
}

/* 信息标签 */
.pro-subinfo {
  margin-bottom: 10px !important;
}

.pro-subinfo span {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border: 1px solid #e2e8f0 !important;
}

/* tab */
.pro-tabs {
  background: #edf2f7 !important;
  padding: 7px !important;
  border-radius: 18px !important;
}

.pro-tab {
  font-size: 14px !important;
  border-radius: 14px !important;
}

.pro-tab.active {
  background: linear-gradient(135deg, #16c784, #0f9f6e) !important;
  box-shadow: 0 10px 24px rgba(22,199,132,.26) !important;
}

/* 文字直播时间轴 */
.pro-events {
  position: relative;
  padding-left: 8px;
}

.pro-events::before {
  content: "";
  position: absolute;
  left: 78px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: linear-gradient(#d1fae5, #e2e8f0);
}

.pro-event {
  position: relative;
  grid-template-columns: 58px 48px 1fr !important;
  background: #ffffff !important;
  border-radius: 18px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 10px 26px rgba(15,23,42,.05);
}

.pro-minute {
  font-size: 15px !important;
  color: #0f172a !important;
}

.pro-event-icon {
  z-index: 2;
  background: #ecfdf5 !important;
  box-shadow: 0 0 0 6px #fff !important;
}

.pro-event p {
  font-size: 15px !important;
  color: #1e293b !important;
}

.pro-event small {
  display: inline-block;
  margin-top: 2px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569 !important;
  font-weight: 800;
}

/* 技术统计进度条 */
.pro-stats {
  gap: 10px !important;
}

.pro-stat-row {
  position: relative;
  grid-template-columns: 76px 1fr 76px !important;
  min-height: 56px;
  border: 1px solid #e2e8f0;
  background: #ffffff !important;
  box-shadow: 0 8px 20px rgba(15,23,42,.04);
}

.pro-stat-row span {
  font-size: 15px !important;
}

.pro-stat-row b {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  color: #334155 !important;
}

.pro-stat-track {
  width: 100%;
  height: 7px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
}

.pro-stat-left,
.pro-stat-right {
  height: 7px;
  background: #e2e8f0;
  border-radius: 999px;
  position: relative;
  overflow: hidden;
}

.pro-stat-left::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: var(--w, 0%);
  background: linear-gradient(90deg, #16a36a, #16c784);
  border-radius: 999px;
}

.pro-stat-right::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--w, 0%);
  background: linear-gradient(90deg, #38bdf8, #2563eb);
  border-radius: 999px;
}

/* 阵容卡片 */
.pro-lineup-card {
  border-radius: 20px !important;
  box-shadow: 0 12px 30px rgba(15,23,42,.06);
}

.pro-player-grid span {
  border: 1px solid #e2e8f0;
  background: #ffffff !important;
}

/* 比赛详情信息格 */
.pro-info-grid div {
  border: 1px solid #e2e8f0;
  background: #ffffff !important;
  box-shadow: 0 8px 20px rgba(15,23,42,.04);
}

/* 手机端优化 */
@media (max-width: 768px) {
  body {
    background: #f3f7fb !important;
  }

  .worldcup-activity-banner,
  .worldcup-hero,
  .hero,
  .hero-section,
  .cup-hero {
    min-height: 180px !important;
    padding: 22px 16px !important;
  }

  .match-row[data-id] {
    margin: 8px 10px !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 10px 26px rgba(15,23,42,.06) !important;
    overflow: hidden !important;
  }

  .match-row[data-id]::after {
    display: none !important;
  }

  .match-row.ds-live::before {
    left: 10px;
    top: 10px;
  }

  .pro-modal-panel {
    width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
  }

  .pro-match-content {
    max-height: 100vh !important;
    padding: 18px 14px 28px !important;
  }

  .pro-head {
    margin: -18px -14px 16px !important;
    padding: 58px 18px 26px !important;
  }

  .pro-score strong {
    font-size: 42px !important;
  }

  .pro-tabs {
    position: sticky;
    top: 0;
    z-index: 2;
  }

  .pro-events::before {
    left: 65px;
  }

  .pro-event {
    grid-template-columns: 48px 42px 1fr !important;
  }
}