/* ============ 全局 ============ */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
:root {
  --red: #e8383d;
  --red-dark: #d02f34;
  --blue-link: #3b7cd4;
  --text: #333;
  --text2: #999;
  --line: #f0f0f0;
  --bg: #fff;
  --green-live: #2e9e5b;
}
html, body { height: 100%; }
body {
  font-family: -apple-system, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  color: var(--text); background: #fff; font-size: 14px;
  max-width: 1024px; margin: 0 auto; box-shadow: 0 0 30px rgba(0,0,0,.08);
}
#app { min-height: 100vh; display: flex; flex-direction: column; }
.page { flex: 1; display: flex; flex-direction: column; min-height: 100vh; }
a { text-decoration: none; color: inherit; }
.clickable { cursor: pointer; }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.scroll-x::-webkit-scrollbar { display: none; }

/* ============ 状态栏 ============ */
.statusbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 18px 2px; font-size: 13px; font-weight: 600;
}
.statusbar.on-dark { color: #fff; }
.statusbar .right { display: flex; gap: 6px; align-items: center; font-weight: 500; }

/* ============ 首页顶部导航 ============ */
.home-top { background: #fff; position: sticky; top: 0; z-index: 50; }
.sports-nav { display: flex; align-items: center; padding: 6px 14px 0; }
.sports-nav .filter-icon, .sports-nav .setting-icon { font-size: 19px; color: #444; width: 40px; }
.sports-nav .setting-icon { text-align: right; }
.sports-tabs { flex: 1; display: flex; justify-content: center; gap: 28px; font-size: 17px; color: #333; }
.sports-tabs .tab { padding: 4px 0; position: relative; }
.sports-tabs .tab.active { font-weight: 700; font-size: 18px; }
.sports-tabs .tab.active::after {
  content: ""; position: absolute; right: -8px; top: 2px; width: 10px; height: 10px;
  background: var(--red); border-radius: 50% 50% 50% 0; transform: rotate(45deg);
}
.sub-tabs { display: flex; align-items: center; padding: 8px 14px 0; border-bottom: 1px solid var(--line); }
.sub-tabs .tabs { flex: 1; display: flex; gap: 26px; font-size: 15px; color: #555; }
.sub-tabs .tab { padding-bottom: 9px; position: relative; }
.sub-tabs .tab.active { color: #000; font-weight: 700; }
.sub-tabs .tab.active::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 4px; width: 20px; height: 3px; background: var(--red); border-radius: 2px;
}
.sub-tabs .mode-icon { font-size: 17px; color: #444; }

/* ============ 首页比赛列表 ============ */
.match-list { flex: 1; padding-bottom: 120px; }
.match-row { display: flex; padding: 10px 14px 12px; border-bottom: 1px solid #f6f6f6; align-items: stretch; }
.match-row .left-col { width: 72px; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; }
.match-row .league { font-size: 13px; font-weight: 600; }
.match-row .star { color: #ccc; font-size: 17px; }
.match-row .mid-col { flex: 1; display: flex; flex-direction: column; align-items: center; }
.match-row .time-min { display: flex; width: 100%; font-size: 13px; color: #888; }
.match-row .time-min .t { width: 90px; text-align: left; }
.match-row .time-min .m { flex: 1; text-align: center; color: var(--red); }
.match-row .time-min .m.pre { color: #999; }
.match-row .teams-line { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 16px; }
.match-row .team { display: flex; align-items: center; gap: 4px; font-weight: 600; }
.match-row .team .rank { color: #999; font-size: 12px; font-weight: 400; }
.match-row .card { display: inline-block; min-width: 13px; height: 16px; line-height: 16px; border-radius: 2px; background: #f5a623; color: #fff; font-size: 11px; text-align: center; padding: 0 2px; }
.match-row .score { color: var(--red); font-weight: 700; font-size: 17px; min-width: 44px; text-align: center; }
.match-row .score.vs { color: #999; font-weight: 400; font-size: 14px; }
.match-row .half-corner { margin-top: 5px; font-size: 12px; color: #aaa; }
.match-row .right-col { width: 90px; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.match-row .hot { font-size: 12px; color: #f60; display: flex; align-items: center; gap: 2px; }
.match-row .hot.gray { color: #999; }
.match-row .lineup-tag { font-size: 12px; color: var(--red); }
.match-row .icon-btn { width: 22px; height: 22px; border-radius: 4px; background: #f7b52c; color: #fff; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.match-row .icon-btn.video { background: var(--red); }

.section-row { display: flex; align-items: center; padding: 12px 14px; border-bottom: 1px solid #f6f6f6; background: #fff; }
.section-row .league { width: 72px; font-size: 13px; font-weight: 600; flex-shrink: 0; }
.section-row .title { flex: 1; text-align: center; font-weight: 700; font-size: 16px; }
.section-row .right { width: 130px; text-align: right; font-size: 12px; color: #888; flex-shrink: 0; }
.section-row .hot-line { position: absolute; right: 14px; font-size: 12px; color: #f60; }

.wc-pill { display: flex; justify-content: center; padding: 8px 0; }
.wc-pill span { border: 1px solid var(--red); color: var(--red); border-radius: 16px; padding: 3px 16px; font-size: 14px; display: flex; align-items: center; gap: 5px; }

/* 底部浮动筛选条 */
.float-filter {
  position: fixed; bottom: 118px; left: 50%; transform: translateX(-50%);
  background: #fff; border-radius: 24px; box-shadow: 0 4px 16px rgba(0,0,0,.16);
  display: flex; align-items: center; padding: 5px 16px 5px 6px; gap: 18px; font-size: 15px; color: #444; z-index: 60;
}
.float-filter .all { background: var(--red); color: #fff; border-radius: 20px; padding: 6px 14px; display: flex; align-items: center; gap: 5px; font-weight: 600; }

/* 底部关注条 */
.follow-bar {
  position: fixed; bottom: 66px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 1024px;
  background: #fff; border-top: 1px solid var(--line); display: flex; align-items: center;
  padding: 8px 14px; gap: 12px; z-index: 55; font-size: 14px;
}
.follow-bar .seg { display: flex; background: #f3f3f3; border-radius: 6px; overflow: hidden; font-size: 13px; }
.follow-bar .seg span { padding: 4px 10px; }
.follow-bar .seg .on { background: #fff; color: var(--red); border: 1px solid #eee; border-radius: 6px; font-weight: 600; }
.follow-bar .team-pill { background: #fdf0f0; color: var(--red); border-radius: 6px; padding: 5px 12px; flex: 1; }
.follow-bar .streak { color: #e8683d; font-size: 13px; }

/* 底部主导航 */
.tabbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 1024px;
  background: #fff; border-top: 1px solid var(--line); display: flex; z-index: 70; padding: 6px 0 10px;
}
.tabbar .item { flex: 1; text-align: center; font-size: 11px; color: #999; }
.tabbar .item .ic { font-size: 22px; display: block; margin-bottom: 2px; }
.tabbar .item.active { color: var(--red); }

/* ============ 赛事页（世界杯） ============ */
.league-hero {
  position: relative; height: 200px; overflow: hidden; color: #fff;
  background:
    linear-gradient(115deg, #17c964 0%, #17c964 17%, transparent 17.3%),
    linear-gradient(245deg, #ff2121 0%, #ff2121 17%, transparent 17.3%),
    radial-gradient(circle at 20% -40%, #4a52ff 0%, #2a2ee0 60%, #2326c9 100%);
  background-color: #2a2ee0;
}
.league-hero.small { height: 96px; }
.league-hero .bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; font-size: 20px; }
.league-hero .bar .name { font-size: 15px; display: flex; align-items: center; gap: 6px; }
.league-hero .bar .acts { display: flex; gap: 16px; font-size: 18px; }
.league-hero .center { position: absolute; left: 50%; top: 44px; transform: translateX(-50%); text-align: center; }
.league-hero .center .logo { width: 58px; height: 58px; border-radius: 12px; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 32px; margin: 0 auto 6px; }
.league-hero .center .cn { font-size: 17px; font-weight: 700; }
.league-hero .center .en { font-size: 12px; opacity: .85; }

.league-tabs { display: flex; align-items: center; padding: 0 16px; border-bottom: 1px solid var(--line); background: #fff; position: sticky; top: 0; z-index: 40; }
.league-tabs .tabs { flex: 1; display: flex; gap: 24px; font-size: 16px; color: #444; }
.league-tabs .tab { padding: 12px 0 10px; position: relative; }
.league-tabs .tab.active { font-weight: 700; color: #000; }
.league-tabs .tab.active::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 5px; width: 22px; height: 3px; background: var(--red); border-radius: 2px; }
.league-tabs .year { border: 1px solid #f0b6b6; color: var(--red); border-radius: 12px; font-size: 12px; padding: 2px 8px; background: #fff5f5; }

.stage-pills { display: flex; gap: 10px; padding: 12px 16px 4px; }
.stage-pills .p1 { background: #fdeaea; color: var(--red); border: 1px solid #f5c1c1; border-radius: 8px; padding: 4px 12px; font-size: 14px; }
.stage-pills .p2 { background: #fff; color: #555; border: 1px solid #ddd; border-radius: 8px; padding: 4px 12px; font-size: 14px; }

/* 淘汰赛对阵图 */
.bracket-wrap { padding: 10px 8px 20px; overflow-x: auto; }
.bracket { min-width: 960px; }
.b-row { display: flex; justify-content: space-around; align-items: flex-start; }
.b-match { width: 220px; text-align: center; position: relative; padding-bottom: 14px; }
.b-match .line { display: flex; justify-content: center; align-items: center; gap: 10px; font-size: 13px; }
.b-match .team { display: flex; align-items: center; gap: 4px; width: 74px; }
.b-match .team.r { justify-content: flex-end; }
.b-match .team .nm { font-size: 13px; color: #333; }
.b-match .loser .nm, .b-match .loser .fl { opacity: .45; }
.b-match .mid { color: #999; font-size: 12px; min-width: 44px; }
.b-match .mid .sc { color: #666; font-weight: 600; }
.b-connector { height: 26px; border-left: 1.5px solid #e0e0e0; border-right: 1.5px solid #e0e0e0; border-bottom: 1.5px solid #e0e0e0; margin: 0 55px; border-radius: 0 0 4px 4px; }
.b-connector.red-l { border-left-color: #e8383d; }
.b-connector.red-r { border-right-color: #e8383d; }
.b-node { text-align: center; padding: 10px 0 6px; }
.b-node .shield { width: 30px; height: 30px; margin: 0 auto 4px; border-radius: 8px; background: #eee; color: #bbb; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.b-node .nm { font-size: 12px; color: #666; }
.b-node .dt { font-size: 12px; color: #999; margin-bottom: 4px; }
.third-box { background: #f7f7f9; border-radius: 8px; padding: 8px 20px; display: flex; align-items: center; gap: 26px; justify-content: center; margin: 8px auto; width: fit-content; }
.third-box .cap { font-size: 13px; color: #666; text-align: center; }

/* 小组积分表 */
.group-block { margin: 14px 0 4px; }
.group-head { display: flex; align-items: center; gap: 8px; padding: 8px 16px; font-size: 15px; font-weight: 700; }
.group-head .badge { border: 1px solid #f0b6b6; color: var(--red); font-size: 12px; font-weight: 400; border-radius: 10px; padding: 1px 8px; background: #fff5f5; }
.g-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.g-table th { color: #888; font-weight: 400; padding: 8px 6px; text-align: center; }
.g-table td { padding: 12px 6px; text-align: center; border-top: 1px solid #f7f7f7; }
.g-table .tm { text-align: left; padding-left: 16px; display: flex; align-items: center; gap: 8px; }
.g-table tr.adv { background: #fce8e8; }
.adv-band { position: relative; }
.adv-tag { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--red); color: #fff; font-size: 12px; border-radius: 10px; padding: 1px 10px; z-index: 2; }

/* 历史 冠军 */
.hist-layout { display: flex; min-height: 500px; }
.hist-side { width: 98px; flex-shrink: 0; background: #fafafa; }
.hist-side .it { padding: 16px 0 16px 14px; font-size: 13px; color: #777; }
.hist-side .it.active { background: #fff; color: var(--red); font-weight: 700; }
.hist-main { flex: 1; padding: 14px 16px; }
.hist-main h3 { font-size: 16px; margin-bottom: 6px; }
.h-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.h-table th { text-align: left; color: #999; font-weight: 400; padding: 10px 4px; }
.h-table td { padding: 13px 4px; border-top: 1px solid #f7f7f7; }

/* 榜单（射手/球队） */
.rank-layout { display: flex; }
.rank-side { width: 98px; flex-shrink: 0; background: #fafafa; max-height: 75vh; overflow-y: auto; }
.rank-side .it { padding: 14px 0 14px 16px; font-size: 13px; color: #777; }
.rank-side .it.active { background: #fff; color: var(--red); font-weight: 700; }
.rank-main { flex: 1; padding: 14px 16px; }
.rank-main h3 { font-size: 16px; margin-bottom: 4px; }
.r-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.r-table th { color: #999; font-weight: 400; padding: 10px 4px; text-align: left; }
.r-table th:last-child, .r-table td:last-child { text-align: right; }
.r-table td { padding: 12px 4px; border-top: 1px solid #f7f7f7; }
.r-table .no { width: 30px; color: #666; }
.r-table .avatar { width: 26px; height: 26px; border-radius: 50%; background: #eef1f6; display: inline-flex; align-items: center; justify-content: center; margin-right: 8px; font-size: 13px; }

/* 动态新闻列表 */
.news-list { }
.news-item { display: flex; justify-content: space-between; gap: 14px; padding: 14px 16px; border-bottom: 1px solid #f5f5f5; }
.news-item .txt { flex: 1; }
.news-item .txt .t { font-size: 16px; line-height: 1.45; }
.news-item .txt .time { font-size: 12px; color: #aaa; margin-top: 10px; }
.news-item .txt .time .hot { color: var(--red); margin-right: 6px; }
.news-item .thumb { width: 128px; height: 82px; background: linear-gradient(135deg, #e8f0e8, #d8e4d8); border-radius: 6px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 34px; }
.matchday-strip { display: flex; gap: 10px; padding: 10px 14px; overflow-x: auto; }
.md-card { border: 1px solid #eee; border-radius: 8px; padding: 10px 12px; min-width: 300px; position: relative; }
.md-card .lg { font-size: 12px; color: #666; display: flex; justify-content: space-between; }
.md-card .tm { display: flex; justify-content: space-between; font-size: 14px; margin-top: 6px; }
.md-card .sc { font-weight: 700; }
.md-tag { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); background: #2a2ee0; color: #fff; font-size: 11px; padding: 1px 8px; border-radius: 3px; }

/* ============ 比赛详情页 ============ */
.match-hero {
  position: relative; color: #fff; padding-bottom: 12px;
  background:
    radial-gradient(circle at 75% 20%, rgba(90,110,255,.55), transparent 45%),
    radial-gradient(circle at 15% 85%, rgba(60,80,230,.6), transparent 40%),
    linear-gradient(160deg, #2b3aa8 0%, #2d3fd0 45%, #2331b8 100%);
}
.match-hero .bar { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; }
.match-hero .bar .mid { text-align: center; font-size: 13px; line-height: 1.5; }
.match-hero .bar .mid .l1 { font-size: 15px; }
.match-hero .bar .acts { display: flex; gap: 14px; font-size: 17px; }
.match-hero .teams { display: flex; align-items: flex-start; justify-content: space-between; padding: 30px 8% 34px; }
.match-hero .tside { text-align: center; width: 120px; }
.match-hero .tside .fl { font-size: 44px; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
.match-hero .tside .nm { margin-top: 10px; font-size: 15px; }
.match-hero .tside .fifa { font-size: 12px; opacity: .8; margin-top: 2px; }
.match-hero .center { text-align: center; padding-top: 4px; }
.match-hero .center .status { font-size: 12px; background: rgba(255,255,255,.18); display: inline-block; padding: 1px 8px; border-radius: 3px; }
.match-hero .center .countdown-box { margin-top: 14px; background: rgba(20,30,140,.55); border-radius: 6px; padding: 8px 16px; display: inline-block; }
.match-hero .center .cd-label { font-size: 12px; opacity: .85; }
.match-hero .center .cd { font-size: 20px; font-weight: 700; letter-spacing: 1px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.match-hero .follow-row { display: flex; justify-content: center; gap: 10px; padding-bottom: 14px; }
.match-hero .follow-row span { background: rgba(0,0,0,.35); border-radius: 4px; padding: 4px 12px; font-size: 13px; }
.support-bar { display: flex; height: 22px; font-size: 12px; color: #fff; }
.support-bar .l { background: var(--red); display: flex; align-items: center; padding: 0 8px; gap: 4px; border-radius: 0 11px 0 0; }
.support-bar .m { flex: 1; background: rgba(255,255,255,.12); }
.support-bar .r { background: #3b7cd4; display: flex; align-items: center; padding: 0 8px; gap: 4px; border-radius: 11px 0 0 0; }

.detail-tabs { display: flex; gap: 22px; padding: 0 16px; border-bottom: 1px solid var(--line); background: #fff; position: sticky; top: 0; z-index: 40; overflow-x: auto; }
.detail-tabs .tab { padding: 13px 0 11px; font-size: 16px; color: #444; position: relative; white-space: nowrap; }
.detail-tabs .tab.active { font-weight: 700; color: #000; }
.detail-tabs .tab.active::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 5px; width: 22px; height: 3px; background: var(--red); border-radius: 2px; }

/* 直播 tab */
.weather-card { margin: 12px 14px; background: linear-gradient(135deg, #eef7ef, #e6f2ee); border-radius: 10px; padding: 14px 16px; position: relative; }
.weather-card .deg { font-size: 26px; font-weight: 700; display: inline-block; margin-right: 12px; }
.weather-card .desc { font-size: 15px; }
.weather-card .meta { font-size: 12px; color: #888; margin-top: 6px; }
.weather-card .stadium { margin-top: 10px; background: rgba(255,255,255,.7); border-radius: 8px; padding: 8px 12px; font-size: 14px; }
.weather-card .stadium .tags { font-size: 12px; color: #999; margin-top: 3px; }
.weather-card .cloud { position: absolute; right: 16px; top: 12px; font-size: 34px; }
.thumb-strip { display: flex; gap: 10px; padding: 4px 14px 12px; overflow-x: auto; }
.thumb-card { width: 128px; flex-shrink: 0; }
.thumb-card .im { height: 76px; border-radius: 6px; background: linear-gradient(135deg, #dfe8df, #cfdccf); display: flex; align-items: center; justify-content: center; font-size: 30px; }
.thumb-card .tt { font-size: 12px; line-height: 1.4; margin-top: 5px; color: #333; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.stat-rings { display: flex; justify-content: space-around; padding: 12px 10px 4px; }
.ring-item { text-align: center; }
.ring-item .lbl { font-size: 14px; margin-bottom: 8px; }
.ring { width: 56px; height: 56px; border-radius: 50%; border: 6px solid #f0b429; border-left-color: #ddd; border-bottom-color: #ddd; margin: 0 auto; position: relative; }
.ring .v { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #666; }
.ring-nums { display: flex; justify-content: space-between; width: 90px; margin: 4px auto 0; font-size: 13px; color: #666; }
.shots { padding: 8px 14px 14px; }
.shots .row { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 13px; color: #666; }
.shots .bar { flex: 1; height: 7px; background: #e9e9e9; border-radius: 4px; overflow: hidden; display: flex; }
.shots .bar .f { background: #f0b429; width: 50%; }
.shots .cap { text-align: center; font-size: 14px; margin-top: 10px; }
.live-seg { display: flex; border-bottom: 1px solid var(--line); margin-top: 6px; }
.live-seg .s { flex: 1; text-align: center; padding: 11px 0; font-size: 15px; color: #666; background: #fafafa; }
.live-seg .s.on { background: #fff; color: var(--red); font-weight: 700; }
.tl-list { padding: 8px 14px; }
.tl-item { display: flex; gap: 10px; padding: 10px 0; border-left: 2px solid #eee; margin-left: 8px; padding-left: 16px; position: relative; font-size: 14px; color: #444; }
.tl-item::before { content: "📄"; position: absolute; left: -10px; top: 10px; font-size: 13px; background: #fff; }
.rel-news h4 { padding: 14px 16px 4px; font-size: 16px; }

/* 聊天 tab */
.chat-notice { background: #fff8e6; color: #c8881a; font-size: 12px; padding: 7px 14px; display: flex; gap: 6px; align-items: center; }
.chat-notice.n2 { background: #fff; color: #d0a13a; border-bottom: 1px solid #faf3e0; }
.chat-list { flex: 1; padding: 8px 14px 80px; }
.chat-msg { margin-top: 12px; font-size: 15px; line-height: 1.5; }
.chat-msg .lv { display: inline-block; background: #b9c3f0; color: #fff; font-size: 11px; border-radius: 3px; padding: 0 5px; margin-right: 5px; vertical-align: 2px; }
.chat-msg .lv.hi { background: #f0a35e; }
.chat-msg .lv.vhi { background: #e86a6a; }
.chat-msg .nm { color: #5b8edb; margin-right: 4px; }
.chat-input { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 1024px; background: #fff; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 10px; padding: 10px 14px; z-index: 80; }
.chat-input .box { flex: 1; background: #f4f4f4; border-radius: 18px; padding: 8px 14px; color: #aaa; font-size: 14px; }
.chat-input .emj { font-size: 22px; }

/* 阵容 tab */
.lineup-head { padding: 12px 16px 0; }
.lineup-head .cap { font-size: 15px; font-weight: 700; }
.lineup-head .cap small { color: #999; font-weight: 400; margin-left: 6px; }
.lineup-teamtabs { display: flex; margin-top: 10px; border-bottom: 1px solid var(--line); }
.lineup-teamtabs .t { flex: 1; text-align: center; font-size: 15px; padding: 10px 0; color: #555; position: relative; }
.lineup-teamtabs .t.on { color: var(--red); font-weight: 700; }
.lineup-teamtabs .t.on::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 26px; height: 3px; background: var(--red); }
.lineup-last { padding: 10px 16px; font-size: 13px; color: #888; }
.lineup-last .res { display: flex; justify-content: center; gap: 10px; font-size: 15px; color: #333; margin-top: 8px; align-items: center; }
.lineup-last .res b { font-size: 17px; }
.pitch { position: relative; background: repeating-linear-gradient(90deg, #58b54c 0 12.5%, #4faa44 12.5% 25%); padding: 24px 0 30px; overflow: hidden; }
.pitch .meta-row { display: flex; justify-content: space-between; padding: 0 16px; color: #fff; font-size: 12px; margin-bottom: 4px; opacity: .95; }
.pitch .box-lines { position: absolute; left: 50%; transform: translateX(-50%); top: 46px; width: 76%; height: 210px; border: 2px solid rgba(255,255,255,.55); border-top: none; }
.pitch .box-lines .inner { position: absolute; left: 50%; transform: translateX(-50%); top: 0; width: 44%; height: 90px; border: 2px solid rgba(255,255,255,.55); border-top: none; }
.pitch .team-cap { position: absolute; left: 14px; top: 74px; background: rgba(0,0,0,.35); color: #fff; font-size: 12px; padding: 3px 10px; border-radius: 4px; }
.pitch .coach { position: absolute; right: 14px; top: 74px; color: #fff; font-size: 12px; }
.p-line { display: flex; justify-content: space-around; position: relative; z-index: 3; }
.p-line.gk { margin-top: 26px; }
.p-line + .p-line { margin-top: 62px; }
.player { text-align: center; width: 84px; }
.player .ava { width: 44px; height: 44px; border-radius: 50%; background: #fff; margin: 0 auto; position: relative; display: flex; align-items: center; justify-content: center; font-size: 22px; box-shadow: 0 2px 5px rgba(0,0,0,.25); }
.player .ava .num { position: absolute; left: -4px; top: -4px; background: #333; color: #fff; border-radius: 50%; width: 17px; height: 17px; font-size: 10px; line-height: 17px; }
.player .ava .cpt { position: absolute; left: -6px; bottom: -2px; background: var(--red); color: #fff; border-radius: 3px; font-size: 10px; padding: 0 3px; }
.player .ava .sub { position: absolute; right: -16px; top: -4px; color: #ffe28a; font-size: 11px; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.player .nm { color: #fff; font-size: 13px; margin-top: 5px; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.player .rt { display: inline-block; margin-top: 3px; font-size: 11px; color: #fff; background: #f0a11d; border-radius: 3px; padding: 0 5px; }
.player .rt.hi { background: #e8383d; }
.watermark { position: absolute; color: rgba(255,255,255,.13); font-size: 64px; font-weight: 700; transform: rotate(-18deg); pointer-events: none; }

/* 指数 tab */
.odds-cats { display: flex; border-bottom: 1px solid var(--line); }
.odds-cats .c { flex: 1; text-align: center; padding: 12px 0; font-size: 15px; color: #555; position: relative; }
.odds-cats .c.on { color: var(--red); font-weight: 700; }
.odds-cats .c.on::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 24px; height: 3px; background: var(--red); }
.odds-head { display: flex; padding: 10px 16px; font-size: 13px; color: #888; }
.odds-head .co { width: 70px; }
.odds-head .grp { flex: 1; text-align: center; }
.odds-table { font-size: 14px; }
.odds-tr { display: flex; align-items: center; padding: 13px 16px; border-top: 1px solid #f6f6f6; }
.odds-tr:nth-child(odd) { background: #fafbfd; }
.odds-tr .co { width: 70px; color: #333; }
.odds-tr .v { flex: 1; text-align: center; color: #555; }
.odds-tr .v.g { color: #2e9e5b; }
.odds-tr .v.r { color: #e8383d; }
.odds-tr .arr { width: 18px; color: #ccc; }
.odds-foot { display: flex; justify-content: center; padding: 16px 0 24px; }
.odds-foot .seg { display: flex; border: 1px solid #eee; border-radius: 20px; overflow: hidden; font-size: 14px; }
.odds-foot .seg .s { padding: 7px 18px; color: #666; }
.odds-foot .seg .s.on { background: var(--red); color: #fff; border-radius: 20px; display: flex; gap: 5px; align-items: center; }

/* 情报 tab */
.intel-vip { margin: 12px 14px; background: linear-gradient(135deg, #fdf3dc, #fbe9c4); border-radius: 10px; padding: 12px 14px; }
.intel-vip .h { display: flex; justify-content: space-between; align-items: center; font-size: 15px; font-weight: 700; color: #7a5410; }
.intel-vip .h .more { font-weight: 400; font-size: 13px; color: #b08430; }
.intel-vip .sub { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; color: #8a6a20; }
.intel-vip .sub .tagn { background: #e89b2c; color: #fff; border-radius: 3px; font-size: 11px; padding: 1px 5px; }
.intel-vip .sub .tagb { background: #d84f43; color: #fff; border-radius: 3px; font-size: 11px; padding: 1px 5px; }
.intel-vip .lockline { margin-top: 8px; background: rgba(255,255,255,.6); border-radius: 6px; height: 30px; display: flex; align-items: center; justify-content: center; color: #c9a25a; font-size: 13px; gap: 8px; }
.intel-vip .buy { margin-top: 10px; background: linear-gradient(90deg, #e8383d, #e05555); color: #fff; border-radius: 22px; text-align: center; padding: 10px 0; font-size: 15px; }
.intel-vip .buy s { opacity: .7; font-size: 12px; margin: 0 3px; }
.intel-filters { display: flex; gap: 10px; padding: 6px 14px 2px; }
.intel-filters .f { border: 1px solid #e5e5e5; border-radius: 6px; padding: 4px 12px; font-size: 13px; color: #555; }
.intel-filters .f.on { border-color: var(--red); color: var(--red); background: #fff5f5; }
.intel-item { padding: 12px 16px; border-bottom: 8px solid #f7f7f9; }
.intel-item .tags { display: flex; align-items: center; gap: 6px; }
.intel-item .tags .t1 { background: #fdeaea; color: var(--red); font-size: 12px; border-radius: 3px; padding: 1px 7px; }
.intel-item .tags .t2 { border: 1px solid #f3caca; color: var(--red); font-size: 12px; border-radius: 3px; padding: 0 6px; }
.intel-item .tags .fl { margin-left: auto; font-size: 16px; }
.intel-item h4 { font-size: 16px; margin: 10px 0 8px; }
.intel-item p { font-size: 14px; color: #666; line-height: 1.7; }
.intel-more { text-align: center; color: var(--red); font-size: 14px; padding: 12px 0; }
.radar-sec h4 { padding: 14px 16px 0; font-size: 16px; }
.radar-legend { display: flex; gap: 16px; padding: 8px 16px; font-size: 13px; color: #666; }
.radar-legend .d { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px; }
.radar-tabs { display: flex; justify-content: flex-end; gap: 8px; padding: 0 16px; font-size: 12px; }
.radar-tabs span { border: 1px solid #eee; border-radius: 10px; padding: 2px 10px; color: #888; }
.radar-tabs span.on { background: #fdeaea; color: var(--red); border-color: #f3caca; }
.radar-box { display: flex; justify-content: center; padding: 8px 0 18px; }
.team-bottom-tabs { display: flex; border-top: 1px solid var(--line); }
.team-bottom-tabs .t { flex: 1; text-align: center; padding: 12px 0; font-size: 14px; background: #fafafa; }
.team-bottom-tabs .t.on { background: #fff; font-weight: 700; }

/* 专家 tab */
.exp-banner { margin: 12px 14px; border-radius: 10px; padding: 18px 16px; color: #fff; font-size: 20px; font-weight: 700; letter-spacing: 1px; background: linear-gradient(120deg, #4db2f0, #6fc3f5 60%, #8ed0f8); display: flex; justify-content: space-between; align-items: center; }
.exp-banner .join { background: linear-gradient(90deg, #f5c045, #f0a72c); color: #7a4d00; font-size: 14px; border-radius: 18px; padding: 8px 16px; font-weight: 600; }
.exp-two { display: flex; gap: 10px; padding: 0 14px; }
.exp-two .b { flex: 1; border-radius: 8px; padding: 10px 12px; font-size: 13px; }
.exp-two .b1 { background: #fdf3dc; color: #8a6a20; }
.exp-two .b2 { background: #e8f2fd; color: #3a6ea8; }
.exp-two .b .tt { font-size: 14px; font-weight: 700; display: flex; gap: 6px; align-items: center; }
.exp-two .b .tt .bd { font-size: 11px; background: #d84f43; color: #fff; border-radius: 3px; padding: 0 5px; font-weight: 400; }
.exp-two .b .sub2 { margin-top: 4px; color: #999; font-size: 12px; }
.exp-seg { display: flex; margin-top: 12px; border-bottom: 1px solid var(--line); }
.exp-seg .s { flex: 1; text-align: center; font-size: 15px; padding: 10px 0; color: #555; position: relative; }
.exp-seg .s.on { color: var(--red); font-weight: 700; }
.exp-seg .s.on::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 26px; height: 3px; background: var(--red); }
.exp-filters { display: flex; align-items: center; padding: 10px 14px; gap: 8px; font-size: 13px; }
.exp-filters .f { border: 1px solid #e5e5e5; border-radius: 5px; padding: 3px 10px; color: #555; }
.exp-filters .f.on { border-color: var(--red); color: var(--red); }
.exp-filters .right { margin-left: auto; display: flex; gap: 12px; color: #888; }
.exp-filters .right .on { color: var(--red); }
.exp-card { padding: 14px 16px; border-bottom: 1px solid #f3f3f3; display: flex; gap: 12px; }
.exp-card .ava { width: 46px; height: 46px; border-radius: 50%; background: #e8ecf5; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.exp-card .bd { flex: 1; min-width: 0; }
.exp-card .l1 { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; }
.exp-card .streak { background: linear-gradient(90deg, #e8383d, #f06a3c); color: #fff; font-size: 11px; border-radius: 3px; padding: 1px 5px; font-weight: 400; }
.exp-card .tags { display: flex; gap: 6px; margin-top: 5px; flex-wrap: wrap; }
.exp-card .tags span { background: #fdeaea; color: #d05a4f; font-size: 11px; border-radius: 3px; padding: 1px 6px; }
.exp-card .title { margin-top: 8px; font-size: 15px; }
.exp-card .title .pre { color: var(--red); }
.exp-card .meta { margin-top: 8px; font-size: 12px; color: #999; display: flex; gap: 10px; }
.exp-card .rt { text-align: right; flex-shrink: 0; }
.exp-card .rt .pct { color: var(--red); font-size: 24px; font-weight: 700; }
.exp-card .rt .pct small { font-size: 12px; }
.exp-card .rt .rc { font-size: 11px; color: #d08a8a; }
.exp-card .rt .cat { margin-top: 26px; font-size: 12px; color: #888; }
.exp-card .rt .coin { color: #e8881a; font-size: 12px; margin-top: 4px; }

/* 热议 tab */
.hot-topline { display: flex; justify-content: space-between; background: #fdeaea; color: #c05555; padding: 8px 14px; font-size: 13px; }
.hot-lives { display: flex; gap: 14px; padding: 12px 14px 6px; overflow-x: auto; }
.hot-live-item { text-align: center; flex-shrink: 0; width: 62px; }
.hot-live-item .cir { width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--red); display: flex; align-items: center; justify-content: center; font-size: 24px; margin: 0 auto; position: relative; }
.hot-live-item .cir .lv { position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); background: var(--red); color: #fff; font-size: 9px; border-radius: 7px; padding: 0 5px; white-space: nowrap; }
.hot-live-item .nm2 { font-size: 11px; color: #555; margin-top: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post { padding: 14px 16px; border-bottom: 8px solid #f7f7f9; }
.post .ph { display: flex; align-items: center; gap: 8px; }
.post .ph .ava { width: 38px; height: 38px; border-radius: 50%; background: #f0e6f5; display: flex; align-items: center; justify-content: center; font-size: 19px; }
.post .ph .nm { font-weight: 700; font-size: 15px; color: #444; }
.post .ph .lv { background: #8e77d8; color: #fff; font-size: 10px; border-radius: 3px; padding: 0 4px; }
.post .body2 { display: flex; gap: 10px; margin-top: 8px; }
.post .body2 p { flex: 1; font-size: 14px; color: #444; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post .body2 .im { width: 92px; height: 66px; border-radius: 6px; background: #eef2f8; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 28px; }
.post .plan { margin-top: 8px; background: #fdf0f0; color: var(--red); font-size: 13px; border-radius: 5px; padding: 6px 10px; display: inline-block; }
.post .pf { display: flex; justify-content: space-between; margin-top: 10px; font-size: 12px; color: #999; }

/* 数据 tab */
.data-seg { display: flex; align-items: center; padding: 10px 14px; gap: 10px; }
.data-seg .s { padding: 5px 16px; font-size: 14px; border-radius: 6px; color: #555; }
.data-seg .s.on { background: #fff; border: 1px solid #eee; color: #000; font-weight: 700; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.data-seg .right { margin-left: auto; display: flex; gap: 4px; font-size: 13px; }
.data-seg .right span { padding: 3px 10px; border-radius: 5px; color: #777; }
.data-seg .right span.on { background: #333; color: #fff; }
.dt-sec { padding: 6px 16px 14px; border-bottom: 8px solid #f7f7f9; }
.dt-sec h4 { font-size: 16px; padding: 10px 0; display: flex; justify-content: space-between; align-items: center; }
.dt-sec h4 small { color: #999; font-weight: 400; font-size: 12px; margin-left: 6px; }
.dt-sec h4 .chip { border: 1px solid #f3caca; color: var(--red); font-size: 12px; font-weight: 400; border-radius: 12px; padding: 2px 10px; }
.gd-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; }
.gd-row .tm { width: 76px; display: flex; gap: 4px; align-items: center; }
.gd-row .tot { margin-left: auto; color: #e8881a; font-weight: 600; }
.gd-cells { display: flex; gap: 2px; }
.gd-cells span { width: 34px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 3px; background: #eee; color: #999; font-size: 12px; }
.gd-cells span.y { background: #f5c045; color: #fff; }
.gd-cells span.gy { background: #c9c9c9; color: #fff; }
.gd-scale { display: flex; gap: 2px; margin-left: 84px; font-size: 10px; color: #bbb; }
.gd-scale span { width: 34px; text-align: left; }
.h2h-sum { display: flex; justify-content: space-between; padding: 12px 4px; text-align: center; font-size: 12px; color: #888; }
.h2h-sum b { display: block; font-size: 15px; color: #333; margin-bottom: 3px; }
.h2h-sum b .rd { color: var(--red); }
.h2h-table { width: 100%; font-size: 13px; border-collapse: collapse; }
.h2h-table th { color: #999; font-weight: 400; padding: 8px 4px; text-align: left; }
.h2h-table td { padding: 10px 4px; border-top: 1px solid #f6f6f6; }
.h2h-table .sc { color: #2e9e5b; font-weight: 700; }
.h2h-table .hf { color: #aaa; font-size: 11px; }
.mini-tags { display: flex; gap: 6px; padding: 6px 0; font-size: 12px; }
.mini-tags span { border: 1px solid #eee; border-radius: 4px; padding: 2px 8px; color: #777; }
.mini-tags span.on { border-color: var(--red); color: var(--red); }

/* 会员 tab */
.vip-hero { margin: 14px; border-radius: 14px; background: linear-gradient(150deg, #fdf3d9, #fbe6bb); padding: 18px 16px 22px; }
.vip-hero .h { display: flex; justify-content: space-between; align-items: center; }
.vip-hero .h .t { font-size: 22px; font-weight: 800; color: #6b4c10; }
.vip-hero .h .q { background: #f7dfae; border-radius: 14px; padding: 4px 14px; color: #8a5f16; font-size: 14px; }
.vip-hero .h .q b { color: #d02f34; font-size: 18px; }
.vip-shot { margin-top: 16px; background: #fff; border-radius: 12px; padding: 14px; box-shadow: 0 4px 14px rgba(190,150,60,.18); }
.vip-shot .mock-line { height: 10px; border-radius: 5px; background: #f0f0f0; margin: 8px 0; }
.vip-shot .mock-tabs { display: flex; gap: 12px; font-size: 13px; color: #888; }
.vip-shot .mock-tabs .on { color: var(--red); font-weight: 700; }
.vip-shot .pillrow { display: flex; gap: 8px; margin-top: 10px; }
.vip-shot .pillrow span { border: 1px solid #eee; border-radius: 5px; font-size: 12px; padding: 3px 8px; color: #666; }
.vip-shot .pillrow span.on { border-color: var(--red); color: var(--red); }
.vip-shot .lock { margin-top: 12px; background: #faf7ef; border-radius: 6px; padding: 8px; text-align: center; color: #c9a25a; font-size: 13px; }
.vip-badges { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.vip-badge { background: linear-gradient(120deg, #f8e2ae, #f3d086); border-radius: 20px; padding: 8px 16px; font-size: 15px; font-weight: 700; color: #6b4c10; display: flex; gap: 6px; align-items: center; box-shadow: 0 3px 8px rgba(190,150,60,.25); }

/* ============ 球队页 ============ */
.team-hero { background: linear-gradient(160deg, #14532d, #0f4425); color: #fff; padding-bottom: 16px; }
.team-hero .bar { display: flex; justify-content: space-between; padding: 10px 16px; font-size: 19px; }
.team-hero .idrow { text-align: center; margin-top: -6px; }
.team-hero .idrow .fl { font-size: 42px; }
.team-hero .idrow .nm { font-size: 17px; font-weight: 700; margin-top: 4px; }
.team-hero .idrow .en { font-size: 12px; opacity: .8; }
.team-hero .stats { display: flex; justify-content: space-around; margin-top: 14px; text-align: center; }
.team-hero .stats b { font-size: 20px; display: block; }
.team-hero .stats span { font-size: 12px; opacity: .8; }
.team-hero .forms { display: flex; gap: 4px; justify-content: center; }
.team-hero .forms i { width: 18px; height: 18px; border-radius: 50%; background: #2e9e5b; color: #fff; font-style: normal; font-size: 11px; display: flex; align-items: center; justify-content: center; }
.mx-matchcard { margin: 12px 14px; border: 1px solid #eee; border-radius: 10px; padding: 12px 16px; position: relative; }
.mx-matchcard .tag { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); background: #14532d; color: #fff; font-size: 11px; border-radius: 3px; padding: 1px 8px; }
.mx-matchcard .l1 { text-align: center; font-size: 12px; color: #888; }
.mx-matchcard .row { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.mx-matchcard .row .t { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 14px; width: 110px; }
.mx-matchcard .cd { font-size: 15px; font-weight: 700; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.mx-matchcard .rt2 { position: absolute; right: 14px; top: 10px; font-size: 12px; color: #999; }

/* 通用返回栏（浅色） */
.lightbar { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; font-size: 19px; background: #fff; }

/* 视频大图帖子 */
.video-post { padding: 12px 16px; }
.video-post .vh { display: flex; align-items: center; gap: 8px; }
.video-post .vh .ava { width: 34px; height: 34px; border-radius: 50%; background: #e0ecfa; display: flex; align-items: center; justify-content: center; }
.video-post .vh .fo { margin-left: auto; color: var(--red); border: 1px solid var(--red); font-size: 12px; border-radius: 4px; padding: 2px 8px; }
.video-post h4 { margin: 10px 0; font-size: 16px; }
.video-post .vbox { border-radius: 8px; background: linear-gradient(135deg, #dfe4ec, #cfd6e2); height: 300px; display: flex; align-items: center; justify-content: center; font-size: 52px; color: rgba(0,0,0,.35); }

/* 空态 */
.empty { text-align: center; color: #bbb; padding: 60px 0; font-size: 14px; }

/* ================= 底部导航各栏目 ================= */
.row-arrow { color: #ccc; font-size: 20px; }

/* 赛程/赛果日期条 */
.date-strip { display: flex; align-items: center; gap: 4px; padding: 8px 12px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.date-strip::-webkit-scrollbar { display: none; }
.date-strip .dt { flex-shrink: 0; text-align: center; font-size: 13px; color: #666; padding: 4px 10px; border-radius: 14px; line-height: 1.3; }
.date-strip .dt small { display: block; font-size: 10px; color: #aaa; }
.date-strip .dt.on { background: #fdeaea; color: var(--red); }
.date-strip .cal { margin-left: auto; font-size: 17px; color: #888; }

/* 关注空态 */
.follow-empty { text-align: center; padding: 120px 0; }
.follow-empty .art { font-size: 64px; opacity: .5; }
.follow-empty .t1 { color: #999; font-size: 14px; margin-top: 14px; }
.follow-empty .t2 { color: #f5a623; font-size: 14px; margin-top: 8px; }

/* ---------- 资讯 ---------- */
.news-head { display: flex; align-items: center; padding: 8px 16px; }
.news-head .h24 { font-weight: 700; font-size: 15px; width: 60px; }
.news-head .acts2 { width: 60px; text-align: right; font-size: 16px; }
.news-topnav { flex: 1; display: flex; justify-content: center; gap: 24px; font-size: 17px; color: #555; }
.news-topnav .tab { position: relative; padding-bottom: 3px; }
.news-topnav .tab.active { font-weight: 700; color: #000; }
.news-topnav .tab.active::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: -2px; width: 18px; height: 3px; background: var(--red); border-radius: 2px; }

/* 头条 */
.tt-cats { display: flex; gap: 16px; padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: 15px; color: #555; }
.tt-cats span { flex-shrink: 0; }
.tt-cats span.on { color: var(--red); font-weight: 700; position: relative; }
.tt-cats .menu { margin-left: auto; color: #888; }
.tt-banner { margin: 12px 14px; border-radius: 10px; overflow: hidden; background: linear-gradient(120deg, #1b3a8f, #2b52c8); color: #fff; display: flex; padding: 16px; align-items: center; }
.tt-banner .txt { flex: 1; }
.tt-banner .l1 { font-size: 13px; opacity: .85; }
.tt-banner .l2 { font-size: 22px; font-weight: 800; margin: 4px 0 10px; }
.tt-banner .cta { background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.5); border-radius: 16px; padding: 4px 14px; font-size: 13px; }
.tt-banner .cards { display: flex; gap: 6px; }
.tt-banner .sc-card { width: 56px; background: rgba(255,255,255,.1); border-radius: 6px; padding: 6px 0; text-align: center; }
.tt-banner .sc-card .ph { font-size: 26px; }
.tt-banner .sc-card .nm { font-size: 12px; margin: 2px 0; }
.tt-banner .sc-card .fl3 { font-size: 14px; }
.tt-scores { display: flex; gap: 1px; background: #eee; }
.tt-scores .ttsc { flex: 1; background: #fff; padding: 10px 16px; }
.tt-scores .l { font-size: 12px; color: #888; display: flex; justify-content: space-between; margin-bottom: 6px; }
.tt-scores .ji2 { color: #999; }
.tt-scores .rw { display: flex; justify-content: space-between; font-size: 14px; margin-top: 5px; }
.tt-scores .rw b { font-size: 15px; }
.top-tag { background: #fdeaea; color: var(--red); font-size: 11px; border-radius: 3px; padding: 1px 5px; border: 1px solid #f3caca; }
.toutiao-list { }
.tt-big { padding: 12px 16px; border-bottom: 8px solid #f7f7f9; }
.tt-big .tt-title { font-size: 16px; line-height: 1.5; }
.tt-big .big-img { margin: 10px 0; height: 240px; border-radius: 8px; background: linear-gradient(120deg, #1b3a8f, #3358c8); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 60px; color: #fff; }
.tt-big .big-cn { font-size: 22px; font-weight: 800; margin-top: 10px; }
.tt-big .tt-meta { display: flex; gap: 16px; color: #999; font-size: 12px; }
.tt-item2 { display: flex; gap: 14px; padding: 14px 16px; border-bottom: 1px solid #f5f5f5; }
.tt-item2 .txt { flex: 1; }
.tt-item2 .t { font-size: 16px; line-height: 1.45; }
.tt-item2 .m { font-size: 12px; color: #aaa; margin-top: 8px; }
.tt-item2 .m .hot { color: var(--red); margin-right: 6px; }
.tt-item2 .thumb { width: 128px; height: 82px; border-radius: 6px; background: linear-gradient(135deg, #e8f0e8, #d8e4d8); display: flex; align-items: center; justify-content: center; font-size: 32px; flex-shrink: 0; }
.tt-item { padding: 14px 16px; font-size: 16px; }

/* 资讯-关注 选择球队 */
.follow-layout { display: flex; flex: 1; }
.follow-side { width: 98px; background: #fafafa; }
.follow-side .it { padding: 16px 0 16px 16px; font-size: 14px; color: #777; }
.follow-side .it.active { background: #fff; color: var(--red); font-weight: 700; }
.follow-main { flex: 1; padding: 12px 16px; }
.follow-main h3 { font-size: 15px; margin-bottom: 12px; }
.follow-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.follow-grid .fcard { border: 1px solid #eee; border-radius: 10px; padding: 30px 0; text-align: center; }
.follow-grid .fl2 { font-size: 34px; }
.follow-grid .nm { font-size: 14px; margin-top: 10px; }
.follow-foot { position: fixed; bottom: 66px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 1024px; background: #fff; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; z-index: 60; }
.follow-foot b { color: var(--red); }
.follow-foot .done-btn { background: var(--red); color: #fff; border-radius: 18px; padding: 8px 28px; }

/* 资讯-世界杯 */
.wc-info-hero { color: #fff; position: relative; padding-bottom: 8px;
  background:
    linear-gradient(120deg, #17c964 0%, #17c964 20%, transparent 20.3%),
    linear-gradient(240deg, #ff2121 0%, #ff2121 18%, transparent 18.3%),
    radial-gradient(circle at 30% 10%, #4a52ff, #2a2ee0 70%);
  background-color: #2a2ee0; }
.wc-info-top { display: flex; align-items: center; gap: 12px; padding: 4px 16px 10px; }
.wc-info-top .trophy { font-size: 36px; text-align: center; line-height: 1; }
.wc-info-top .trophy small { display: block; font-size: 9px; letter-spacing: 1px; }
.wc-stages { flex: 1; display: flex; justify-content: space-between; font-size: 13px; position: relative; }
.wc-stages::before { content: ""; position: absolute; left: 4%; right: 4%; top: 6px; height: 2px; background: rgba(255,255,255,.3); }
.wc-stages .stg { text-align: center; position: relative; z-index: 2; opacity: .8; }
.wc-stages .stg.cur { opacity: 1; font-weight: 700; }
.wc-stages .dot { display: block; width: 10px; height: 10px; border-radius: 50%; background: #fff; margin: 0 auto 6px; }
.wc-hero-panel { margin: 0 14px; background: rgba(20,30,120,.55); border-radius: 12px; padding: 4px 16px; }
.wc-hm { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.wc-hm:last-child { border-bottom: none; }
.wc-hm .s { text-align: center; font-size: 13px; opacity: .8; margin-bottom: 10px; }
.wc-hm .s .src { background: rgba(255,255,255,.2); border-radius: 3px; padding: 0 6px; font-size: 11px; }
.wc-hm .r { display: flex; align-items: center; justify-content: space-between; font-size: 18px; }
.wc-hm .tm { flex: 1; display: flex; align-items: center; gap: 8px; font-weight: 700; }
.wc-hm .tm.r { justify-content: flex-end; }
.wc-hm .sc { font-size: 24px; font-weight: 800; margin: 0 6px; }
.wc-hm .mid { font-size: 18px; font-weight: 700; }
.wc-hm .ji { background: rgba(255,255,255,.15); border-radius: 14px; padding: 3px 10px; font-size: 12px; }
.wc-quick { display: flex; justify-content: space-around; padding: 18px 8px; background: linear-gradient(180deg, #17c964 0%, #fff 60%); }
.wc-quick .q { text-align: center; font-size: 15px; font-weight: 600; }
.wc-quick .qi { font-size: 34px; margin-bottom: 4px; }
.wc-banners { display: flex; gap: 8px; padding: 4px 14px 12px; }
.wc-banners .wb { border-radius: 10px; color: #fff; padding: 14px 12px; font-size: 15px; font-weight: 700; text-align: center; display: flex; flex-direction: column; justify-content: center; }
.wc-banners .wb small { font-size: 11px; font-weight: 400; opacity: .9; margin-top: 4px; }
.wc-banners .wb1 { flex: 1; background: linear-gradient(120deg, #5fb0f5, #3d8fe0); }
.wc-banners .wb2 { flex: 1; background: linear-gradient(120deg, #4a90e2, #2b6fc8); }
.wc-banners .wb3 { width: 44px; background: #2b52c8; writing-mode: vertical-lr; padding: 10px 6px; }

/* ---------- 发现 ---------- */
.disc-head { display: flex; align-items: center; padding: 8px 16px; }
.disc-head .av { width: 40px; font-size: 22px; }
.disc-head .acts2 { width: 40px; text-align: right; font-size: 16px; }
.disc-topnav { flex: 1; display: flex; justify-content: center; gap: 30px; font-size: 17px; color: #555; }
.disc-topnav .tab { position: relative; padding-bottom: 3px; }
.disc-topnav .tab.active { font-weight: 700; color: #000; }
.disc-topnav .tab.active::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: -2px; width: 16px; height: 3px; background: var(--red); border-radius: 2px; }
.disc-topnav .free { color: var(--red); font-size: 9px; }

/* 发现-社区 */
.nation-row { display: flex; gap: 10px; padding: 12px 14px; }
.nation-row .ncard { flex-shrink: 0; width: 180px; background: #f6f6f8; border-radius: 12px; padding: 18px 0; text-align: center; position: relative; }
.nation-row .ntag { position: absolute; top: 8px; right: 8px; background: #e8681a; color: #fff; font-size: 10px; border-radius: 8px 8px 8px 0; padding: 1px 6px; }
.nation-row .nfl { font-size: 40px; }
.nation-row .nst { color: #f5b301; font-size: 12px; margin: 4px 0; height: 14px; }
.nation-row .nnm { font-size: 15px; font-weight: 600; }
.disc-banner { margin: 4px 14px; height: 90px; border-radius: 10px; background: linear-gradient(120deg, #5fb0f5, #3d8fe0); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; }
.topic-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px 4px; padding: 16px 10px; }
.topic { text-align: center; }
.topic .tic { width: 56px; height: 56px; border-radius: 14px; margin: 0 auto; display: flex; align-items: center; justify-content: center; font-size: 30px; }
.topic .tnm { font-size: 14px; font-weight: 600; margin-top: 6px; }
.topic .tho { font-size: 11px; color: #f60; margin-top: 2px; }
.post .off { background: #fdeaea; color: var(--red); font-size: 10px; border-radius: 3px; padding: 0 5px; }

/* 发现-直播推荐 */
.live-empty { text-align: center; padding: 30px 0 10px; }
.live-empty .art { font-size: 44px; opacity: .5; }
.live-empty .t2 { color: #999; font-size: 14px; margin-top: 8px; }
.live-sec-title { padding: 10px 16px 4px; font-size: 17px; font-weight: 700; border-left: 4px solid var(--red); margin: 4px 0; }
.live-day { padding: 8px 16px; font-size: 13px; color: #666; background: #fafafa; display: flex; justify-content: space-between; }
.lrec { padding: 10px 16px; border-bottom: 8px solid #f7f7f9; }
.lrec-h { display: flex; align-items: center; font-size: 14px; }
.lrec-h .lg { color: #999; font-size: 12px; width: 60px; flex-shrink: 0; }
.lrec-h .tm { flex: 1; text-align: right; }
.lrec-h .tm.r { text-align: left; }
.lrec-h .vs { color: #999; font-size: 12px; text-align: center; width: 60px; }
.lrec-e { display: flex; gap: 10px; background: #f4f7fd; border-radius: 8px; padding: 10px 12px; margin-top: 10px; }
.lrec-e .ava { font-size: 30px; }
.lrec-e .bd { flex: 1; }
.lrec-e .l1 { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lrec-e .rec { color: var(--red); font-size: 12px; font-weight: 400; }
.lrec-e .rec b { background: var(--red); color: #fff; border-radius: 3px; padding: 0 4px; }
.lrec-e .rt { color: var(--red); font-size: 11px; background: #fdeaea; border-radius: 3px; padding: 0 5px; font-weight: 400; }
.lrec-e .good { font-size: 12px; color: #999; margin-top: 6px; }

/* 发现-专家 */
.exp-filter2 { display: flex; gap: 10px; padding: 10px 14px; }
.exp-filter2 span { flex-shrink: 0; border: 1px solid #e5e5e5; border-radius: 5px; padding: 3px 12px; font-size: 13px; color: #555; }
.exp-filter2 span.on { background: #fdeaea; color: var(--red); border-color: #f3caca; }
.exp-avatars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px 0; padding: 6px 10px 12px; }
.exp-avatars .ea { text-align: center; }
.exp-avatars .av2 { width: 46px; height: 46px; border-radius: 50%; background: #e8ecf5; margin: 0 auto; display: flex; align-items: center; justify-content: center; font-size: 24px; position: relative; }
.exp-avatars .av2 .n { position: absolute; top: -3px; right: -3px; background: var(--red); color: #fff; font-size: 10px; border-radius: 8px; padding: 0 4px; }
.exp-avatars .nm { font-size: 13px; margin-top: 6px; }
.exp-avatars .bd2 { display: inline-block; margin-top: 3px; background: var(--red); color: #fff; font-size: 10px; border-radius: 3px; padding: 0 5px; }
.exp-avatars .bd2.vip { background: #e8a020; }
.exp-card2-banner { margin: 4px 14px; border-radius: 10px; height: 64px; background: linear-gradient(120deg, #2f6fd0, #4a90e2); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; }
.exp-quick { display: flex; justify-content: space-around; padding: 14px 8px; }
.exp-quick .q { text-align: center; font-size: 13px; }
.exp-quick .qi { font-size: 30px; margin-bottom: 4px; }
.exp-live-cards { display: flex; gap: 10px; padding: 4px 14px 12px; }
.exp-live-cards .elc-side { flex-shrink: 0; width: 46px; background: #f2f5fb; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 13px; color: #666; text-align: center; }
.exp-live-cards .elc-side small { color: #aaa; font-size: 11px; }
.exp-live-cards .elc { flex-shrink: 0; width: 240px; border: 1px solid #eee; border-radius: 8px; padding: 10px 12px; position: relative; }
.exp-live-cards .elc .h { display: flex; gap: 8px; align-items: center; }
.exp-live-cards .elc .av { font-size: 26px; }
.exp-live-cards .elc .nm { font-size: 14px; font-weight: 700; }
.exp-live-cards .elc .role { font-size: 11px; color: #999; }
.exp-live-cards .elc .role .rec { color: var(--red); }
.exp-live-cards .elc .lg { font-size: 12px; color: #888; margin: 8px 0 4px; }
.exp-live-cards .elc .mt { display: flex; justify-content: space-between; align-items: center; font-size: 14px; margin-top: 4px; }
.exp-live-cards .elc .livebtn { background: #fdeaea; color: var(--red); border-radius: 4px; padding: 4px 10px; font-size: 12px; }
.exp-live-cards .elc .bk { text-align: center; font-size: 11px; color: #888; }
.exp-live-cards .elc .bkh { color: var(--red); font-weight: 700; font-size: 14px; }
.exp-live-cards .elc .book-tag { position: absolute; top: 10px; right: 10px; color: #e8a020; font-size: 11px; }
.rec-match { font-size: 12px; color: #666; background: #f7f7f7; border-radius: 4px; padding: 5px 8px; margin-top: 8px; display: inline-block; }
.exp-card .title .pre { color: var(--red); }
.sutui-row { display: flex; gap: 8px; padding: 10px 14px; }
.sutui-row .su { flex: 1; display: flex; gap: 8px; align-items: center; border: 1px solid #eee; border-radius: 8px; padding: 8px; }
.sutui-row .su .av { font-size: 24px; }
.sutui-row .su .nm { font-size: 13px; font-weight: 600; }
.sutui-row .su .rec { font-size: 11px; color: var(--red); }
.sutui-row .su .vipt { background: #e8a020; color: #fff; border-radius: 3px; padding: 0 4px; }

/* ---------- 数据 ---------- */
.data-top { display: flex; align-items: center; padding: 8px 16px; border-bottom: 1px solid var(--line); }
.data-top .tabs { flex: 1; display: flex; justify-content: center; gap: 28px; font-size: 17px; color: #555; }
.data-top .tabs .on { font-weight: 700; color: #000; }
.data-top .acts2 { font-size: 17px; }
.data-leaguebar { display: flex; gap: 18px; padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: 15px; color: #555; }
.data-leaguebar span { flex-shrink: 0; }
.data-leaguebar span.on { color: var(--red); font-weight: 700; }
.data-leaguebar .menu { margin-left: auto; color: #888; }
.data-sub { display: flex; gap: 20px; padding: 10px 16px; font-size: 14px; color: #888; }
.data-sub .on { color: var(--red); font-weight: 700; }
.data-recent { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 4px 14px 12px; }
.data-recent .drc { border: 1px solid #eee; border-radius: 8px; padding: 12px; display: flex; gap: 8px; align-items: center; }
.data-recent .drc .lg { font-size: 22px; }
.data-recent .drc .nm { font-size: 14px; font-weight: 600; }
.data-recent .drc .cnt { font-size: 12px; color: #999; }
.data-filters { display: flex; gap: 8px; padding: 8px 16px; border-top: 8px solid #f7f7f9; overflow-x: auto; }
.data-filters span { flex-shrink: 0; border: 1px solid #e5e5e5; border-radius: 5px; padding: 3px 12px; font-size: 13px; color: #555; }
.data-filters span.on { background: #fdeaea; color: var(--red); border-color: #f3caca; }
.data-body { display: flex; }
.data-side { width: 90px; background: #fafafa; flex-shrink: 0; }
.data-side .it { padding: 14px 0 14px 16px; font-size: 13px; color: #777; }
.data-side .it.active { background: #fff; color: var(--red); font-weight: 700; }
.data-main { flex: 1; padding: 8px 12px 20px; }
.data-main .lg-sec h4 { font-size: 15px; padding: 10px 4px; }
.data-main .lg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 0; }
.data-main .lgc { text-align: center; }
.data-main .lgi { font-size: 30px; }
.data-main .lgc .nm { font-size: 13px; margin-top: 4px; }

/* ---------- 我的 ---------- */
.mine-page { background: #f4f4f6; }
.mine-topbar { display: flex; justify-content: space-between; padding: 10px 16px; font-size: 18px; }
.mine-topbar .acts2 { font-size: 16px; }
.mine-login { display: flex; align-items: center; gap: 12px; padding: 10px 16px 18px; position: relative; }
.mine-login .av { width: 48px; height: 48px; border-radius: 50%; background: #e0e4f0; display: flex; align-items: center; justify-content: center; font-size: 26px; }
.mine-login .nm { font-size: 20px; font-weight: 700; }
.mine-login .gift { position: absolute; right: 16px; top: 6px; background: linear-gradient(135deg, #ff7a45, #f0502f); color: #fff; border-radius: 10px; padding: 6px 10px; font-size: 20px; text-align: center; }
.mine-login .gift small { font-size: 10px; }
.mine-vip { margin: 0 14px; background: linear-gradient(120deg, #e8e4f5, #dcd8ee); border-radius: 12px 12px 0 0; display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; }
.mine-vip .t { font-size: 15px; font-weight: 700; color: #4a3a70; }
.mine-vip .s { font-size: 12px; color: #8a7ab0; margin-top: 3px; }
.mine-vip .open { background: linear-gradient(90deg, #f5c045, #f0a72c); color: #7a4d00; border-radius: 16px; padding: 6px 16px; font-size: 14px; font-weight: 600; }
.mine-wallet { margin: 0 14px; background: #fff; display: flex; padding: 16px 0; border-radius: 0 0 12px 12px; }
.mine-wallet .w { flex: 1; text-align: center; border-right: 1px solid #f2f2f2; }
.mine-wallet .w:last-child { border-right: none; }
.mine-wallet .w .v { font-size: 18px; font-weight: 700; }
.mine-wallet .w .n { font-size: 12px; color: #888; margin-top: 3px; }
.mine-signin { margin: 12px 14px; background: #fff; border-radius: 10px; padding: 14px 16px; display: flex; align-items: center; font-size: 15px; }
.mine-signin .r { color: #e8683d; font-size: 12px; margin-left: 8px; }
.mine-signin .go2 { margin-left: auto; color: var(--red); font-size: 13px; }
.mine-links { margin: 0 14px; background: #fff; border-radius: 10px; display: grid; grid-template-columns: 1fr 1fr; }
.mine-links .ml { padding: 16px; font-size: 15px; display: flex; align-items: center; }
.mine-links .ml .ar { margin-left: auto; color: #ccc; }
.mine-grid { margin: 12px 14px; background: #fff; border-radius: 10px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 0; padding: 18px 0; }
.mine-grid .mg { text-align: center; }
.mine-grid .mgi { font-size: 24px; }
.mine-grid .mgi .zhuan { display: inline-block; background: var(--red); color: #fff; border-radius: 6px; width: 24px; height: 24px; line-height: 24px; font-size: 13px; }
.mine-grid .nm { font-size: 13px; margin-top: 4px; color: #555; }
.mine-banner { margin: 0 14px 20px; height: 130px; border-radius: 12px; background: linear-gradient(120deg, #7cc0f5, #4a90e2); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; text-align: center; }

/* ================= 世界杯 概览 / 比赛 ================= */
/* 概览 基本信息 */
.ov-sec { padding: 4px 16px 12px; border-bottom: 8px solid #f7f7f9; }
.ov-sec h4 { font-size: 16px; padding: 12px 0; }
.ov-teams { display: flex; }
.ov-teams .t { flex: 1; text-align: center; padding: 8px 0 16px; }
.ov-teams .t:first-child { border-right: 1px solid #f2f2f2; }
.ov-teams .fl { font-size: 40px; }
.ov-teams .nm { font-size: 16px; font-weight: 700; margin-top: 6px; }
.ov-teams .ds { font-size: 12px; color: #999; margin-top: 3px; }
.ov-row { display: flex; justify-content: space-between; padding: 14px 0; border-top: 1px solid #f5f5f5; font-size: 14px; color: #555; }
.ov-row b { color: #333; }
.ov-best-h { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px 8px; font-size: 16px; font-weight: 700; }
.ov-best-h .rnd { font-size: 12px; color: var(--red); border: 1px solid #f3caca; border-radius: 12px; padding: 2px 10px; font-weight: 400; }

/* 最佳阵容 球场（锋线在上，box在上方） */
.best-pitch { padding: 20px 0 26px; }
.best-pitch .box-lines.top { top: auto; bottom: 0; border-top: 2px solid rgba(255,255,255,.55); border-bottom: none; }
.best-pitch .box-lines.top .inner { top: auto; bottom: 0; border-top: 2px solid rgba(255,255,255,.55); border-bottom: none; }
.p-line.best { margin-top: 0; }
.p-line.best.fw { margin-top: 6px; }
.p-line.best + .p-line.best { margin-top: 48px; }
.p-line.best.am { padding: 0 8%; }
.p-line.best.mf { padding: 0 20%; }
.player .ava .natflag { position: absolute; right: -6px; bottom: -3px; font-size: 12px; background: #fff; border-radius: 3px; line-height: 1; }

/* 比赛 赛程列表 */
.games-list { position: relative; padding-bottom: 20px; }
.gm-date { background: #f7f7f9; text-align: center; padding: 10px 0; font-size: 14px; color: #666; }
.gm-row { display: flex; align-items: center; padding: 12px 16px; border-bottom: 1px solid #f5f5f5; }
.gm-l { width: 74px; flex-shrink: 0; }
.gm-l .stg { font-size: 13px; color: #333; }
.gm-l .tm2 { font-size: 12px; color: #999; margin-top: 3px; }
.gm-teams { flex: 1; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.gm-teams .gm-tm { display: flex; align-items: center; gap: 6px; }
.gm-teams .shield-sm { color: #bbb; }
.gm-sc { width: 40px; display: flex; flex-direction: column; gap: 10px; text-align: right; color: #999; font-size: 15px; }
.games-tools { position: fixed; right: 8px; bottom: 130px; display: flex; flex-direction: column; gap: 2px; z-index: 30; }
.games-tools .gt { width: 46px; padding: 8px 0; background: #fff; border: 1px solid #eee; border-radius: 8px; text-align: center; font-size: 11px; color: #666; line-height: 1.6; }