/* ========================================================================
   足球比分·纳米数据 — 响应式 PWA 样式
   浅色比分站风格 / 系统字体 / 桌面顶部导航 + 手机底部导航
   断点：手机 <768px，平板 768-1199，桌面 >=1200
   ======================================================================== */

:root {
  /* —— 浅色主题（WCAG AA：正文 #1f2937 over #ffffff ≈ 13:1；次要 #5b6470 ≈ 5.4:1）—— */
  --bg-primary:   #f5f6f8;          /* 页面底：浅灰 */
  --bg-secondary: #ffffff;          /* 卡片/行：纯白 */
  --bg-elevated:  #eef0f3;          /* 抬升块（按钮底/标签底）：浅灰 */
  --bg-hover:     #e7eaef;          /* hover/active 态 */
  --border:       #d4d8de;          /* 主边框 */
  --border-soft:  #e6e9ee;          /* 细分隔线 */
  --text-primary: #1f2937;          /* 正文深色 */
  --text-secondary:#5b6470;         /* 次要中灰（AA 达标）*/
  --text-dim:     #79828e;          /* 更弱灰（仅辅助小字）*/
  --accent:       #1a8f3c;          /* 品牌绿（浅底加深保证可读）*/
  --accent-dim:   #167a33;          /* 实心绿底按钮 */
  --live:         #e0352b;          /* 进行中红（浅底加深）*/
  --live-bg:      rgba(224,53,43,.10);
  --gold:         #b07d00;          /* 黄牌/陈旧金（浅底加深）*/
  --blue:         #1f6feb;          /* 链接/客队蓝 */
  --up:           #1a8f3c;
  --down:         #e0352b;
  --radius:       12px;
  --radius-sm:    8px;
  --shadow:       0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.06);
  --tap:          48px;            /* 触控目标 */
  --nav-h:        58px;            /* 底部导航高度 */
  --header-h:     104px;           /* 运行时由 app.js 用 ResizeObserver 写入真实头部高度 */
  --safe-b:       env(safe-area-inset-bottom, 0px);
  --maxw:         1280px;
  --ease:         cubic-bezier(.2,.6,.2,1);
  --dur:          .2s;
  /* 新增（UI_OVERHAUL §0.2）：选中 chip 底 / 统一间距阶 / 大圆角 / 评分梯度色 */
  --bg-chip-on:   rgba(31,111,235,.10);
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --radius-lg:    16px;
  --rating-hi:    #1a8f3c;
  --rating-mid:   #b07d00;
  --rating-lo:    #e0352b;
  /* 趋势/SVG 描线色（随主题切换，避免硬编码近白线在浅底不可见）*/
  --chart-line:   #1f2937;
  --chart-grid:   #d4d8de;
  --momentum:     #e8b007;          /* 势头折线/面积（雷速黄）*/
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Microsoft YaHei", "Hiragino Sans GB", system-ui, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* 根级横向锁:overflow-x:clip 硬裁任何横向溢出(clip 不创建滚动容器,不破坏 sticky/纵向滚动);
   overscroll-behavior:none 放在 html(iOS 真正的滚动元素;Safari 不会把 body 的 overscroll 传到视口,
   这是"手机左右滑动跑版/橡皮筋"的根因)。两者一起从根本杜绝横向滑动跑版。 */
html { height: 100%; overflow-x: clip; overscroll-behavior: none; }
/* body 用 min-height 而非 height：固定 100% 会把 sticky 头部的包含块锁成 1 屏，
   下滑超过 ~1 屏后 .app-header 触到 body 底边而整块跟着滚走（顶部导航跟着跑）。
   min-height 让 body 随内容增高，sticky 头部全程钉住。 */
body { min-height: 100%; }
body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;   /* x+y 均禁橡皮筋/滚动链:消除手机左右滑动露出的异常板块(不影响 sticky 头部) */
}
/* 内容区任何意外横向溢出就地裁掉(clip 不创建滚动容器,不影响 sticky 头部=兄弟节点);
   内部需横向滚动的条带(指数/球员/标签栏)各自带 overflow-x:auto,不受影响。 */
main#view { overflow-x: clip; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; color: inherit; }
img { display: block; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* ───────────────────────── 顶部状态栏 / 导航 ───────────────────────── */
.app-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(16,24,40,.05);
}
.topbar {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px;
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; white-space: nowrap; }
.brand .logo { width: 26px; height: 26px; }
.health-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; padding: 4px 10px; border-radius: 999px;
  background: var(--bg-elevated); color: var(--text-secondary);
  border: 1px solid var(--border-soft); white-space: nowrap;
  cursor: pointer; transition: border-color var(--dur) var(--ease);
}
@media (hover: hover) { .health-badge:hover { border-color: var(--border); } }
.health-badge:active { transform: scale(.97); }
.health-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-dim); }
.health-badge.ok .dot { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.health-badge.stale .dot { background: var(--gold); }
.health-badge.down .dot { background: var(--live); }

/* 桌面顶部导航 */
.desktop-nav { display: flex; gap: 4px; margin-left: auto; }
.desktop-nav a {
  padding: 8px 16px; border-radius: var(--radius-sm); font-weight: 600;
  color: var(--text-secondary); font-size: 14px;
}
.desktop-nav a.active { background: var(--bg-elevated); color: var(--text-primary); }
.desktop-nav a:hover { color: var(--text-primary); }

/* ───────────────────────── 比分页 控制条 ───────────────────────── */
.controls { max-width: var(--maxw); margin: 0 auto; padding: 10px 16px 0; }
.date-bar { display: flex; align-items: center; gap: 8px; }
.date-bar button.nav-day {
  width: var(--tap); height: 40px; border-radius: var(--radius-sm);
  background: var(--bg-elevated); border: 1px solid var(--border-soft);
  font-size: 18px; display: grid; place-items: center;
}
.date-bar button.nav-day:active { background: var(--bg-hover); }
.date-current { flex: 1; text-align: center; line-height: 1.25; }
.date-current .date-rel { font-weight: 700; font-size: 16px; }
.date-current .date-sub { color: var(--text-secondary); font-weight: 400; font-size: 12px; font-variant-numeric: tabular-nums; }
/* 📅 日历入口按钮（明显、独立于翻日区，避免误触）*/
.date-cal { position: relative; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--bg-elevated); border: 1px solid var(--border-soft); display: grid; place-items: center; font-size: 17px; cursor: pointer; flex: 0 0 auto; }
.date-cal input[type=date] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.today-btn { font-size: 12px; padding: 6px 10px; border-radius: 999px; background: var(--bg-elevated); border: 1px solid var(--border-soft); color: var(--text-secondary); flex: 0 0 auto; }

/* 状态筛选 + 筛选入口同一行:状态横滑占满左侧,⚙筛选按钮固定右侧 */
.filter-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.filter-row .filter-tabs { margin-top: 0; flex: 1; min-width: 0; }
.filter-trigger {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 4px; position: relative;
  width: 38px; height: 38px; padding: 0; border-radius: 10px;
  background: var(--bg-elevated); border: 1px solid var(--border-soft);
  color: var(--text-secondary); font-size: 13px; font-weight: 600; white-space: nowrap;
}
.filter-trigger .ft-ico { font-size: 16px; }
.filter-trigger .ft-lb { display: none; }   /* 去掉"筛选/排序"文字,只留 ⚙ 图标省宽 */
.filter-trigger.has-filter { background: var(--bg-chip-on); border-color: var(--blue); color: var(--blue); }
.filter-trigger.has-filter::after { content: ""; position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--live); }
/* 筛选抽屉内的小标题 */
.fs-label { font-size: 12px; font-weight: 700; color: var(--text-dim); margin: 14px 0 8px; }
.fs-label:first-of-type { margin-top: 4px; }

/* 状态四类:文字Tab + 选中下划线(雷速/懂球帝风格,去边框去填充,更干净)。四等分平铺不溢出。 */
.filter-tabs {
  display: flex; gap: 0; margin-top: 10px;
  border-bottom: 1px solid var(--border-soft);   /* Tab 轨道线 */
}
.filter-tabs button {
  flex: 1 1 0; min-width: 0; position: relative;
  padding: 10px 4px; min-height: 40px;
  background: transparent; border: 0; border-radius: 0;
  color: var(--text-secondary); font-size: 13px; font-weight: 600; white-space: nowrap;
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.filter-tabs button.active { color: var(--text-primary); font-weight: 700; }
.filter-tabs button.active::after {
  content: ""; position: absolute; left: 20%; right: 20%; bottom: -1px;
  height: 2px; background: var(--accent); border-radius: 2px;
}
.filter-tabs .badge { margin-left: 0; font-size: 11px; color: var(--text-dim); opacity: .9; font-variant-numeric: tabular-nums; }

/* 状态分区段标题(全部视图:进行中/未开赛/赛果) */
.section-head { display: flex; align-items: center; gap: 8px; padding: 12px 4px 6px; font-size: 13px; font-weight: 700; color: var(--text-secondary); }
.section-head .sec-cnt { margin-left: auto; font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.section-head.collapsible { cursor: pointer; background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 12px 14px; margin: 4px 0 10px; }
.section-head.collapsible .sec-cnt { margin-left: auto; }
.section-head.collapsible .sec-arrow { color: var(--text-dim); font-size: 12px; margin-left: 8px; }

/* ───────────────────────── 主体容器 ───────────────────────── */
main {
  max-width: var(--maxw); margin: 0 auto;
  padding: 12px 16px calc(var(--nav-h) + var(--safe-b) + 20px);
}
@media (min-width: 1200px) { main { padding-bottom: 32px; } }

.offline-banner {
  display: none; background: var(--gold); color: #fff; text-align: center;
  font-size: 12px; font-weight: 700; padding: 6px;
}
body.is-offline .offline-banner { display: block; }
/* 数据偏旧/上游抖动:橙色降级横幅(优雅降级,明确告知看的是最近一次数据;离线时不重复显示) */
.stale-banner { display: none; background: #e8830c; color: #fff; text-align: center; font-size: 12px; font-weight: 700; padding: 6px; }
body.data-stale:not(.is-offline) .stale-banner { display: block; }

/* ───────────────────────── 赛事分组 / 比赛行 ───────────────────────── */
.comp-group { margin-bottom: 14px; box-shadow: var(--shadow); border-radius: var(--radius); }
.comp-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; background: var(--bg-elevated);
  border-radius: var(--radius) var(--radius) 0 0; border: 1px solid var(--border);
  position: sticky; top: var(--header-h); z-index: 10;
}
.comp-head img { width: 18px; height: 18px; border-radius: 4px; object-fit: contain; background: #0000000a; }
.comp-head .name { font-weight: 700; font-size: 13px; }
.comp-head .cnt { margin-left: auto; color: var(--text-dim); font-size: 12px; }

.match-list {
  border: 1px solid var(--border); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); overflow: hidden;
  /* 屏幕外赛事列表跳过渲染/布局（225 场长列表降载），sticky comp-head 留在容器外保持常驻 */
  content-visibility: auto;
  contain-intrinsic-size: auto 240px;
}
.match-row {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  align-items: center; gap: 10px;
  padding: 12px; min-height: var(--tap);
  background: var(--bg-secondary); border-top: 1px solid var(--border-soft);
  cursor: pointer; position: relative;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.match-row:first-child { border-top: 0; }
@media (hover: hover) { .match-row:hover { background: var(--bg-hover); } }
.match-row:active { background: var(--bg-hover); transform: scale(.997); }
/* 滚球行：左侧竖条，长列表一眼可辨 */
.match-row.is-live { box-shadow: inset 3px 0 var(--live); }

.mr-status { font-size: 11px; text-align: center; color: var(--text-secondary); }
.mr-status .min-clock { color: var(--live); font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.mr-status .min { color: var(--live); font-weight: 700; }
.mr-status.live .min::after {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 4px;
  border-radius: 50%; background: var(--live); animation: blink 1s infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.25} }
.mr-status .t { color: var(--text-dim); }

.mr-teams { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mr-team { display: flex; align-items: center; gap: 7px; min-width: 0; }
.mr-team img { width: 18px; height: 18px; object-fit: contain; border-radius: 3px; flex: 0 0 auto; }
.mr-team .tn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }

.mr-score { display: flex; flex-direction: column; gap: 4px; text-align: right; font-variant-numeric: tabular-nums; }
.mr-score .s { font-weight: 700; font-size: 16px; min-width: 18px; }
.mr-score .s.live-score { color: var(--accent); }
/* 完场比分弱化、未开赛占位更暗，形成三态层级 */
.mr-score.ended .s { color: var(--text-secondary); }
.mr-score.upcoming .s { color: var(--text-dim); font-weight: 600; }
.mr-score .s.flash { animation: flashgreen .6s ease; }
@keyframes flashgreen { 0%{background:var(--accent);color:#fff;border-radius:4px} 100%{background:transparent} }

.mr-tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; padding-left: 70px; }
.tag { font-size: 11px; padding: 1px 6px; border-radius: 4px; background: var(--bg-elevated); color: var(--text-secondary); }
.tag.ht { color: var(--text-secondary); }
.tag.corner::before { content: "角 "; }
.tag.yellow { background: rgba(212,160,23,.16); color: var(--gold); }
.tag.yellow::before { content: "黄 "; }
.tag.red { background: var(--live-bg); color: var(--live); }
.tag.red::before { content: "红 "; }
/* 能力入口图标组：靠右、与左侧数据标签分隔 */
.mr-caps { margin-left: auto; display: inline-flex; gap: 4px; }
.tag.icon { background: transparent; padding: 1px 3px; font-size: 13px; line-height: 1; opacity: .85; }

/* ───────────────────────── 通用 ───────────────────────── */
.skeleton { background: linear-gradient(90deg,var(--bg-secondary),var(--bg-elevated),var(--bg-secondary)); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: var(--radius); }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.sk-row { height: 56px; margin-bottom: 8px; }
/* 结构化骨架：与真实「分组头 + 多行」一致，落地无跳动 */
.sk-group { margin-bottom: 14px; }
.sk-head { height: 34px; border-radius: var(--radius) var(--radius) 0 0; margin-bottom: 2px; }
.sk-matchrow { height: 48px; border-radius: 0; margin-bottom: 2px; }
.sk-group .sk-matchrow:last-child { border-radius: 0 0 var(--radius) var(--radius); }
.sk-newscard { aspect-ratio: 16/9; border-radius: var(--radius); }
.empty { text-align: center; color: var(--text-secondary); padding: 48px 16px; font-size: 14px; }
.empty .empty-ico { font-size: 38px; opacity: .55; margin-bottom: 10px; }
.empty .empty-sub { color: var(--text-dim); font-size: 13px; margin-top: 6px; }
.error-box { text-align: center; color: var(--live); padding: 32px 16px; }
/* 友好错误/空状态卡：图标+标题+说明+操作按钮，居中成卡而非一行裸红字贴顶 */
.state-card { max-width: 420px; margin: 8vh auto 0; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.state-card .state-title { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.state-card .empty-sub { margin-top: 6px; }
.state-actions { display: flex; gap: 10px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.btn-ghost { background: transparent; border-color: var(--border); color: var(--text-secondary); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 18px; border-radius: var(--radius-sm); background: var(--bg-elevated); border: 1px solid var(--border); font-weight: 600; min-height: 44px; }
.btn.primary { background: var(--accent-dim); border-color: var(--accent); color: #fff; }
.btn:active { transform: scale(.98); }
.spin { width: 20px; height: 20px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: rot .8s linear infinite; }
@keyframes rot { to { transform: rotate(360deg); } }
.loadmore-wrap { text-align: center; padding: 16px 0; }

/* ───────────────────────── 比赛详情 ───────────────────────── */
.detail-back { display: inline-flex; align-items: center; gap: 6px; padding: 8px 0; color: var(--text-secondary); font-size: 14px; min-height: 44px; }
.scoreboard {
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px; margin-bottom: 12px;
  box-shadow: var(--shadow);
}
.sb-comp { display: flex; align-items: center; gap: 8px; justify-content: center; color: var(--text-secondary); font-size: 13px; margin-bottom: 12px; }
.sb-comp img { width: 18px; height: 18px; object-fit: contain; }
.sb-main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.sb-team { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sb-team img { width: 56px; height: 56px; object-fit: contain; }
.sb-team .nm { font-weight: 600; text-align: center; font-size: 14px; }
.sb-center { text-align: center; }
.sb-center .big { font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sb-center .big .sep { color: var(--text-dim); margin: 0 6px; }
.sb-center .st { font-size: 13px; margin-top: 4px; }
.sb-center .st.live { color: var(--live); font-weight: 700; }
.sb-center .ht { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.sb-env { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-soft); font-size: 12px; color: var(--text-secondary); }

/* tabs */
.tabs {
  display: flex; gap: 2px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--border-soft); margin-bottom: 14px;
  position: sticky; top: var(--header-h); background: var(--bg-primary); z-index: 9;
  scrollbar-width: none; padding-right: 4px;
}
.tabs::-webkit-scrollbar { display: none; }
/* 收紧 padding/字号让 6 个子tab在 390px 窄屏放得下,消除右端「资料」被裁切 */
.tabs button { flex: 0 0 auto; padding: 11px 10px; background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--text-secondary); font-size: 13px; font-weight: 600; min-height: 44px; white-space: nowrap; transition: color var(--dur) var(--ease); }
@media (min-width: 768px) { .tabs button { padding: 11px 16px; font-size: 14px; } }
.tabs button.active { color: var(--text-primary); border-bottom-color: var(--accent); }

.tab-panel { animation: fade var(--dur) var(--ease); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
/* 路由切换一次性轻过渡 */
#view.route-enter { animation: fade var(--dur) var(--ease); }

/* 记分牌滚球分钟强调 pill */
.sb-min { display: inline-flex; align-items: center; gap: 5px; background: var(--live-bg); color: var(--live); font-weight: 700; padding: 2px 9px; border-radius: 999px; font-size: 13px; font-variant-numeric: tabular-nums; }
.sb-min::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--live); animation: blink 1s infinite; }

/* 统计条 */
.stat-row { margin-bottom: 10px; }
.stat-top { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px; }
.stat-top .label { color: var(--text-secondary); }
.stat-bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--bg-elevated); }
.stat-bar .h { background: var(--accent); }
.stat-bar .a { background: var(--blue); }

/* tlive 时间线 */
.tlive { list-style: none; }
.tlive li { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border-soft); font-size: 13px; }
.tlive li.main { background: var(--bg-secondary); border-radius: var(--radius-sm); padding: 9px 10px; }
.tlive .tm { color: var(--text-dim); flex: 0 0 34px; text-align: right; line-height: 1.5; font-variant-numeric: tabular-nums; }
.tlive .tx { flex: 1; min-width: 0; color: var(--text-secondary); line-height: 1.5; word-break: break-word; }
.tlive .ev-icon { flex: 0 0 auto; line-height: 1.5; }

/* events 时间线 */
.events { list-style: none; }
.events li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border-soft); }
.events .tm { color: var(--text-dim); width: 40px; font-variant-numeric: tabular-nums; }
.events .ic { font-size: 16px; width: 24px; text-align: center; }
.events .side-home { margin-right: auto; }
.events .side-away { margin-left: auto; flex-direction: row-reverse; text-align: right; }
.events .tx { color: var(--text-secondary); font-size: 13px; }

/* odds 表 */
.odds-sub-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.odds-sub-tabs button { padding: 6px 14px; border-radius: 999px; background: var(--bg-elevated); border: 1px solid var(--border-soft); color: var(--text-secondary); font-size: 13px; font-weight: 600; }
.odds-sub-tabs button.active { background: var(--accent-dim); border-color: var(--accent); color: #fff; }
.odds-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.odds-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 320px; }
.odds-table th, .odds-table td { padding: 9px 8px; text-align: center; border-bottom: 1px solid var(--border-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.odds-table th { color: var(--text-dim); font-weight: 600; font-size: 12px; }
/* 首列「公司」吸左，窄屏横滚时对照不丢列 */
.odds-table td.co, .odds-table th.co { text-align: left; font-weight: 600; position: sticky; left: 0; background: var(--bg-primary); z-index: 1; }
.odds-table th.co { background: var(--bg-primary); }
.odds-table td.closed { color: var(--text-dim); }
.odds-table .badge-closed { font-size: 10px; color: var(--live); margin-left: 4px; }

/* lineup */
.pitch { position: relative; background: linear-gradient(180deg,#0e2a16,#0a1f10); border: 1px solid var(--border-soft); border-radius: var(--radius); aspect-ratio: 2/3; max-width: 420px; margin: 0 auto 16px; overflow: hidden; }
.pitch::before { content:""; position:absolute; left:8%; right:8%; top:50%; border-top:1px dashed #ffffff44; }
.pitch::after { content:""; position:absolute; left:50%; top:50%; width:60px; height:60px; transform:translate(-50%,-50%); border:1px dashed #ffffff44; border-radius:50%; }
.player-dot { position: absolute; transform: translate(-50%,-50%); text-align: center; width: 52px; }
.player-dot .num { width: 26px; height: 26px; margin: 0 auto; border-radius: 50%; background: var(--accent-dim); display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; }
.player-dot.away .num { background: var(--blue); }
.player-dot .pn { font-size: 10px; color: #fff; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lineup-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lineup-lists h4 { font-size: 13px; margin-bottom: 8px; color: var(--text-secondary); }
.lineup-lists li { list-style: none; font-size: 13px; padding: 4px 0; display: flex; gap: 8px; }
.lineup-lists .pno { color: var(--text-dim); width: 22px; }

/* trend svg */
.trend-wrap { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow); }
.trend-legend { display: flex; gap: 16px; font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; }
.trend-legend .sw { display: inline-block; width: 12px; height: 4px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }

/* animation iframe */
.anim-wrap { position: relative; background: #000; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16/9; }
.anim-wrap iframe { width: 100%; height: 100%; border: 0; display: block; position: relative; z-index: 1; }
/* iframe 加载前的 16:9 骨架占位，避免慢网黑屏 */
.anim-wrap .anim-sk { position: absolute; inset: 0; z-index: 0; border-radius: 0; }
.anim-fs { position: absolute; right: 10px; bottom: 10px; z-index: 2; background: rgba(0,0,0,.6); border: 1px solid #ffffff33; border-radius: var(--radius-sm); padding: 8px 12px; color: #fff; font-size: 13px; }
.anim-wrap:fullscreen { aspect-ratio: auto; height: 100%; }

/* video */
.video-item { background: var(--bg-secondary); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 12px; margin-bottom: 10px; }
.video-url { font-family: monospace; font-size: 12px; word-break: break-all; color: var(--text-secondary); background: var(--bg-primary); padding: 8px; border-radius: var(--radius-sm); margin: 8px 0; }

/* ───────────────────────── 资讯 ───────────────────────── */
.news-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
@media (min-width: 768px) { .news-grid { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 1200px) { .news-grid { grid-template-columns: repeat(3,1fr); gap: 18px; } }
.news-card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; cursor: pointer; display: flex; flex-direction: column; box-shadow: var(--shadow); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
@media (hover: hover) { .news-card:hover { border-color: var(--border); box-shadow: 0 4px 12px rgba(16,24,40,.12); } }
.news-card:active { transform: scale(.99); }
/* 封面统一:容器相对定位 + 底部渐变压暗,抹平不同来源图片的色调差,封面更整齐 */
.news-cover-wrap { position: relative; }
.news-cover-wrap::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 56%, rgba(16,24,40,.22)); }
.news-cover { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: var(--bg-elevated); display: block; }
.news-body { padding: 12px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.news-cat { font-size: 11px; color: var(--accent); font-weight: 600; }
.news-title { font-size: 14px; font-weight: 600; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-time { font-size: 11px; color: var(--text-dim); margin-top: auto; }

/* news modal */
.modal-mask {
  position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 100; display: none; align-items: flex-end;
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.modal-mask.open { display: flex; opacity: 1; }
@media (min-width: 768px) { .modal-mask { align-items: center; justify-content: center; } }
.modal {
  background: var(--bg-secondary); width: 100%; max-width: 720px; max-height: 92vh;
  border-radius: var(--radius) var(--radius) 0 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: calc(20px + var(--safe-b));
  box-shadow: 0 -8px 32px rgba(16,24,40,.18);
  transform: translateY(24px); transition: transform var(--dur) var(--ease);
}
.modal-mask.open .modal { transform: translateY(0); }
@media (min-width: 768px) {
  .modal { border-radius: var(--radius); max-height: 86vh; transform: scale(.97); }
  .modal-mask.open .modal { transform: scale(1); }
}
.modal-head { position: sticky; top: 0; background: var(--bg-secondary); padding: 14px 16px; display: flex; align-items: center; border-bottom: 1px solid var(--border-soft); }
.modal-head .x { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; background: var(--bg-elevated); border: 0; font-size: 20px; line-height: 1; }
.modal-content { padding: 16px; }
.modal-content h2 { font-size: 18px; margin-bottom: 8px; line-height: 1.4; }
.modal-content .meta { color: var(--text-dim); font-size: 12px; margin-bottom: 14px; }
.modal-content img { max-width: 100%; height: auto; border-radius: var(--radius-sm); margin: 8px 0; }
.modal-content p { margin: 8px 0; color: var(--text-secondary); line-height: 1.7; }

/* ───────────────────────── “更多”页 ───────────────────────── */
.about-card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; box-shadow: var(--shadow); }
.about-card h3 { font-size: 15px; margin-bottom: 10px; }
.about-card p, .about-card li { color: var(--text-secondary); font-size: 13px; line-height: 1.7; }
.about-card ul { padding-left: 18px; }
.kv { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border-soft); font-size: 13px; }
.kv .k { color: var(--text-secondary); }
.kv .v { font-variant-numeric: tabular-nums; }

/* ───────────────────────── 底部导航（手机） ───────────────────────── */
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  display: flex; background: var(--bg-secondary);
  border-top: 1px solid var(--border-soft);
  padding-bottom: var(--safe-b);
}
@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  .tabbar { background: rgba(255,255,255,.85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
}
.tabbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: var(--nav-h); color: var(--text-dim); font-size: 11px; position: relative;
  transition: color var(--dur) var(--ease);
}
.tabbar a .ico { font-size: 20px; line-height: 1; transition: transform var(--dur) var(--ease); }
.tabbar a .ico svg { width: 23px; height: 23px; display: block; }
.tabbar a.active { color: var(--accent); }
.tabbar a.active .ico { transform: scale(1.12); }
.tabbar a.active::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 28px; height: 2px; border-radius: 0 0 2px 2px; background: var(--accent); }

@media (min-width: 1200px) {
  .tabbar { display: none; }
}
@media (max-width: 1199px) {
  .desktop-nav { display: none; }
}
@media (max-width: 767px) {
  .sb-team img { width: 46px; height: 46px; }
  .sb-center .big { font-size: 28px; }
  .lineup-lists { grid-template-columns: 1fr; }
}

/* ═══════════════════════ UI_OVERHAUL 新增组件 ═══════════════════════ */

/* 通用横滑 chip 组（联赛筛选 / 资讯分类 / 图文类型复用 .filter-tabs 视觉）*/
.chip-bar {
  display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding-bottom: 2px;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 46px), transparent);
          mask-image: linear-gradient(90deg, #000 calc(100% - 46px), transparent);
}
.chip-bar::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 12px; border-radius: 999px; background: transparent;
  border: 1px solid var(--border); color: var(--text-secondary);
  font-size: 13px; font-weight: 600; white-space: nowrap; min-height: 36px;
}
/* 选中态统一为实心绿(与 segmented 一致),全站筛选选中语言一致、不再蓝绿混杂 */
.chip.active { background: var(--accent-dim); border-color: var(--accent); color: #fff; }
.chip.active .chip-count { color: #fff; opacity: .85; }
.chip .chip-logo { width: 16px; height: 16px; border-radius: 3px; object-fit: contain; background: #0000000a; }
.chip .chip-label { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip .chip-count { font-size: 11px; opacity: .75; }

/* 分段控件 segmented（排序 / 图文类型）*/
.segmented { display: inline-flex; background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: 999px; padding: 2px; flex: 0 0 auto; }
.segmented button { padding: 6px 12px; border: 0; background: transparent; border-radius: 999px; color: var(--text-secondary); font-size: 12px; font-weight: 600; white-space: nowrap; min-height: 36px; }
.segmented button.active { background: var(--accent-dim); color: #fff; }

/* 比分页：联赛筛选 + 排序 同一行 */
.comp-sort-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.comp-filter { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.comp-filter .chip-bar { flex: 1; min-width: 0; }
.comp-more-btn { flex: 0 0 auto; font-size: 12px; padding: 6px 10px; border-radius: 999px; background: var(--bg-elevated); border: 1px solid var(--border-soft); color: var(--text-secondary); white-space: nowrap; }

/* 滚球总数 pill（首屏醒目入口）*/
.live-pill { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 14px; margin-bottom: 12px; border-radius: var(--radius); background: var(--live-bg); border: 1px solid rgba(248,81,73,.3); color: var(--live); font-weight: 700; font-size: 14px; }
.live-pill .lp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--live); animation: blink 1s infinite; }
.live-pill .lp-go { margin-left: auto; font-size: 13px; opacity: .9; }

/* 分组头能力角标汇总 + 时间段分组头 + 行内联赛名 */
.comp-head .comp-caps { display: inline-flex; gap: 6px; margin-left: 8px; }
.comp-head .comp-caps .cap { font-size: 11px; color: var(--text-dim); }
.comp-head.time-head .name { font-variant-numeric: tabular-nums; }
.mr-comp { font-size: 11px; color: var(--text-dim); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 联赛选择面板（modal 内）*/
.comp-search { width: 100%; padding: 10px 12px; margin: 8px 0 12px; border-radius: var(--radius-sm); background: var(--bg-elevated); border: 1px solid var(--border-soft); color: var(--text-primary); font-size: 14px; }
.comp-panel-list { max-height: 50vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.comp-row { display: flex; align-items: center; gap: 8px; padding: 9px 6px; border-bottom: 1px solid var(--border-soft); cursor: pointer; }
.comp-row img { width: 18px; height: 18px; object-fit: contain; border-radius: 3px; background: #0000000a; }
.comp-row .cn { flex: 1; font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comp-row .cc { font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.comp-row.on { background: var(--bg-elevated); }
.comp-row input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); }
.comp-panel-foot { display: flex; gap: 10px; margin-top: 12px; position: sticky; bottom: 0; background: var(--bg-secondary); padding-top: 10px; }
.comp-panel-foot .btn { flex: 1; }

/* 统一小节标题 */
.data-section-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text-secondary); margin: var(--space-4) 0 var(--space-3); }
.data-section-title .dst-count { font-size: 11px; font-weight: 600; color: var(--text-dim); background: var(--bg-elevated); padding: 1px 7px; border-radius: 999px; }
.sec { margin-bottom: var(--space-4); }

/* 评分徽标 */
.rating-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; padding: 1px 6px; border-radius: 5px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; }
.rating-badge.hi { background: var(--rating-hi); }
.rating-badge.mid { background: var(--rating-mid); }
.rating-badge.lo { background: var(--rating-lo); }
.rating-badge.mini { min-width: 30px; font-size: 11px; padding: 0 5px; }

/* 2D 动画置顶区 */
.anim-hero { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--space-3); box-shadow: var(--shadow); }
.anim-hero-head { display: flex; align-items: center; padding: 8px 12px; }
.anim-hero-head .ahh-title { font-weight: 700; font-size: 13px; }
.anim-hero-head .ahh-toggle { margin-left: auto; font-size: 12px; color: var(--text-secondary); background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: 999px; padding: 4px 12px; min-height: 32px; }
.anim-hero-body { display: block; }
.anim-hero.collapsed .anim-hero-body { display: none; }
.anim-note { padding: 8px 12px; font-size: 12px; color: var(--text-dim); }

/* 球员统计 Tab */
.mvp-bar { display: flex; align-items: center; gap: 8px; background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 8px 12px; margin-bottom: var(--space-3); }
.mvp-bar .mvp-tag { color: var(--gold); font-weight: 700; font-size: 13px; }
.mvp-bar .mvp-name { font-size: 13px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 阵容&球员 合并 tab 的分段 */
.squad-sec { margin-bottom: 18px; }
.squad-h { font-size: 14px; font-weight: 700; color: var(--text-primary); margin: 4px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border-soft); }
/* 本场相关资讯列表 */
.mnews-list { display: flex; flex-direction: column; gap: 10px; }
.mnews-item { display: flex; gap: 10px; align-items: center; padding: 8px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--bg-secondary); }
.mnews-cover { width: 96px; height: 64px; object-fit: cover; border-radius: 6px; flex: 0 0 auto; background: var(--bg-elevated); }
.mnews-body { min-width: 0; flex: 1; }
.mnews-title { font-size: 13px; font-weight: 600; line-height: 1.45; color: var(--text-primary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mnews-time { font-size: 11px; color: var(--text-dim); margin-top: 4px; }
.player-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.player-col { min-width: 0; }
.player-col .pc-head { font-size: 13px; font-weight: 700; margin-bottom: 8px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.player-table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 300px; }
.player-table th, .player-table td { padding: 6px 5px; text-align: center; border-bottom: 1px solid var(--border-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.player-table th { color: var(--text-dim); font-weight: 600; font-size: 11px; }
.player-table td.pid, .player-table th.pid { text-align: left; position: sticky; left: 0; background: var(--bg-primary); z-index: 1; }
.player-table td.pid { display: flex; align-items: center; gap: 4px; }
.player-table .p-tag { font-size: 10px; padding: 0 4px; border-radius: 3px; background: var(--accent-dim); color: #fff; }
.player-table .p-tag.sub { background: var(--bg-elevated); color: var(--text-dim); }
.player-table .p-num { font-size: 10px; color: var(--text-dim); background: var(--bg-elevated); border-radius: 3px; padding: 0 4px; }
.player-table .p-name { font-size: 12px; color: var(--text-primary); max-width: 96px; overflow: hidden; text-overflow: ellipsis; }
.player-table .p-goal { font-size: 10px; }
.player-table .p-gk { font-size: 9px; color: var(--gold); border: 1px solid var(--gold); border-radius: 3px; padding: 0 3px; }

/* 阵容增强：头像/队长/评分/位置 */
.lineup-formation { font-size: 13px; color: var(--text-secondary); padding: 6px 0 10px; text-align: center; }
.player-dot .num.avatar { background: transparent; border: 2px solid var(--accent-dim); padding: 0; overflow: hidden; }
.player-dot .num.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.player-dot.away .num.avatar { border-color: var(--blue); }
.player-dot .pn .cap-c { color: var(--gold); font-weight: 700; }
.player-dot .rating-badge.mini { margin: 2px auto 0; }

/* 站位图统一头像圈:照片或剪影 + 号码角标(替代"一半照片一半光号码") */
.player-dot .pp-av { position: relative; width: 30px; height: 30px; margin: 0 auto; border-radius: 50%; border: 2px solid var(--accent-dim); background: #16271b; overflow: visible; }
.player-dot.away .pp-av { border-color: var(--blue); }
.player-dot .pp-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.player-dot .pp-sil { width: 100%; height: 100%; display: grid; place-items: center; color: #ffffff66; }
.player-dot .pp-sil svg { width: 19px; height: 19px; }
.player-dot .pp-no { position: absolute; right: -5px; bottom: -4px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; background: var(--accent-dim); color: #fff; font-size: 9px; font-weight: 700; line-height: 15px; text-align: center; box-shadow: 0 0 0 1.5px #0a1f10; }
.player-dot.away .pp-no { background: var(--blue); }
.lineup-lists li { align-items: center; }
.lineup-lists .ppos { font-size: 10px; color: var(--text-dim); background: var(--bg-elevated); border-radius: 3px; padding: 0 4px; }
.lineup-lists .pnm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lineup-lists .pnm .cap-c { color: var(--gold); font-weight: 700; }
.lineup-lists .rating-badge { margin-left: auto; }

/* 指数走势曲线 */
.odds-hist-holder { margin-top: 14px; }
.odds-hist-toggle { width: 100%; padding: 9px; border-radius: var(--radius-sm); background: var(--bg-elevated); border: 1px solid var(--border-soft); color: var(--text-secondary); font-size: 13px; font-weight: 600; }
.odds-hist-toggle.on { color: var(--text-primary); border-color: var(--border); }
.odds-chart-box { margin-top: 12px; background: var(--bg-secondary); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 12px; }
.odds-chart-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; }
.odds-chart-legend .sw { display: inline-block; width: 12px; height: 4px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.odds-chart-note { font-size: 11px; color: var(--text-dim); margin-top: 6px; }

/* 视频 Tab：分组 + 免费外链按钮 + 集锦/动图网格 */
.video-note { font-size: 12px; color: var(--text-dim); margin-bottom: 10px; }
.video-item .vi-head { font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.ext-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.ext-btns .btn { flex: 1; min-width: 130px; }
.hl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 768px) { .hl-grid { grid-template-columns: repeat(3, 1fr); } }
.hl-item { display: block; background: var(--bg-secondary); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); overflow: hidden; }
.hl-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: var(--bg-elevated); }
.hl-cap { padding: 6px 8px; font-size: 12px; color: var(--text-secondary); }

/* 资讯：双层筛选 + 图文卡区分 */
.news-cats { margin-bottom: 8px; }
/* 资讯分类默认平铺全显示(换行),不再横滑+右端渐隐遮住「中超」等分类 */
.news-cats .chip-bar { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; padding-bottom: 0; gap: 8px; }
.news-typesort { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 12px; }
.news-typesort .ts-group { display: flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; }
.news-typesort .ts-label { font-size: 12px; color: var(--text-dim); }
.news-cover-wrap { position: relative; }
.news-type-badge { position: absolute; top: 6px; left: 6px; z-index: 2; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 4px; }
.news-type-badge.img { background: rgba(0,0,0,.6); color: #fff; }
.news-type-badge.text { position: static; background: var(--bg-elevated); color: var(--text-secondary); }
.news-card.text-only { background: var(--bg-secondary); }
.news-card.text-only .news-body { padding: 12px; gap: 8px; }
.news-cat-row { display: flex; align-items: center; gap: 6px; }
.news-title.text { -webkit-line-clamp: 3; }
.news-summary { font-size: 12px; color: var(--text-dim); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 数据能力总览（更多页）*/
.cap-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.cap-chip { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--bg-elevated); border: 1px solid var(--border-soft); color: var(--text-secondary); }

@media (max-width: 767px) {
  .player-cols { grid-template-columns: 1fr; }
  /* 排序与联赛筛选回到「同一行」(联赛chip可横滑占满,排序segmented收窄靠右),省掉上一版独占的一整行,减少首屏堆叠层数 */
  .comp-sort-row { flex-direction: row; align-items: center; gap: 8px; margin-top: 8px; }
  .comp-filter { order: 1; flex: 1; min-width: 0; }
  .comp-sort-row .segmented { order: 2; flex: 0 0 auto; padding: 1px; }
  .comp-sort-row .segmented button { min-height: 34px; padding: 6px 9px; font-size: 12px; }
  /* 间距阶梯:筛选三带同组 8px 贴紧,组与首条比分之间 14px 呼吸断点(而非全等距 10px) */
  .controls { padding: 8px 12px 0; }
  .filter-tabs { margin-top: 8px; }
  main { padding: 14px 12px calc(var(--nav-h) + var(--safe-b) + 20px); }
  .live-pill { margin-top: 2px; margin-bottom: 14px; padding: 11px 14px; }
  /* 状态文字Tab:移动端触控靠 min-height 撑(下划线样式,padding 同基础规则即可) */
  .filter-tabs button { min-height: 42px; font-size: 13px; }
}

/* ═════════════════════ 详情页 Hero（雷速风格·深色球场底）═════════════════════ */
/* 深色 Hero 区与浅色正文对比；页面底仍 --bg-primary 浅色，仅此区深色球场底 */
.match-hero {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-3);
  padding: 16px 16px 14px;
  color: #f4f7fb;
  background:
    linear-gradient(180deg, rgba(8,28,16,.86) 0%, rgba(8,24,16,.92) 55%, rgba(6,18,12,.96) 100%),
    radial-gradient(120% 80% at 50% -10%, #1c5a31 0%, #0c3a1e 45%, #07260f 100%);
  box-shadow: var(--shadow);
}
/* 球场草纹与中圈：纯 CSS，无外链图也成形 */
.match-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: .5;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 8%, rgba(255,255,255,0) 8% 16%);
}
.match-hero::after {
  content: ""; position: absolute; left: 50%; bottom: -70px; width: 150px; height: 150px;
  transform: translateX(-50%); border: 1px solid rgba(255,255,255,.12); border-radius: 50%; z-index: 0;
}
.match-hero > * { position: relative; z-index: 1; }

.mh-comp { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: #c7d6cb; margin-bottom: 10px; flex-wrap: wrap; }
.mh-comp-logo { width: 18px; height: 18px; object-fit: contain; }
.mh-comp .mh-time { color: #9fb3a6; }
/* 关注按钮(详情 Hero 内,留在居中元信息行,flex-wrap 自然换行不破版) */
.mh-fav {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; padding: 3px 11px;
  border: 1px solid rgba(255,255,255,.28); border-radius: 99px;
  background: rgba(255,255,255,.06); color: #d7e2da; font-size: 12px; line-height: 1.4;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.mh-fav .mh-fav-ic { font-size: 13px; line-height: 1; }
.mh-fav.on { background: rgba(212,160,23,.18); border-color: var(--gold); color: var(--gold); }
@media (hover: hover) { .mh-fav:hover { background: rgba(255,255,255,.12); } }
.mh-fav:active { transform: scale(.96); }

/* ★关注视图的推送开关横幅 */
.follow-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 8px 0; padding: 10px 14px; border-radius: 10px;
  background: var(--bg-elevated); border: 1px solid var(--border-soft);
  font-size: 13px; color: var(--text-secondary);
}
.follow-banner.on { background: rgba(31,170,89,.10); border-color: rgba(31,170,89,.35); color: var(--text-primary); }
.follow-banner.hint { color: var(--text-dim); font-size: 12px; }
.follow-banner .fb-btn {
  flex: 0 0 auto; padding: 6px 14px; border: 1px solid var(--border-soft); border-radius: 8px;
  background: transparent; color: var(--text-secondary); font-size: 13px; font-weight: 600;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.follow-banner .fb-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.follow-banner .fb-btn:active { transform: scale(.96); }

/* 推送引导条(列表顶,解锁被★关注 tab 死锁的推送开关) */
.push-guide { display: flex; align-items: center; gap: 10px; margin: 8px 0; padding: 10px 14px; border-radius: 10px; background: linear-gradient(135deg, rgba(59,130,246,.12), rgba(31,170,89,.08)); border: 1px solid rgba(59,130,246,.3); font-size: 13px; color: var(--text-primary); }
.push-guide .pg-txt { flex: 1; min-width: 0; }
.push-guide .pg-on { flex: 0 0 auto; padding: 6px 16px; border: 0; border-radius: 8px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.push-guide .pg-on:active { transform: scale(.96); }
.push-guide .pg-x { flex: 0 0 auto; width: 26px; height: 26px; border: 0; border-radius: 6px; background: transparent; color: var(--text-dim); font-size: 18px; line-height: 1; cursor: pointer; }

/* 前瞻 tab(内容层:H2H 交锋 + 两队近期战绩) */
.pv-title { display: flex; align-items: baseline; gap: 8px; font-weight: 700; font-size: 14px; margin: 14px 4px 8px; }
.pv-mut { color: var(--text-dim); font-size: 12px; font-weight: 400; }
.h2h-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--bg-secondary); border: 1px solid var(--border-soft); border-radius: 12px; padding: 12px 14px; }
.h2h-side { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.h2h-side.r { justify-content: flex-end; }
.h2h-side img { width: 22px; height: 22px; object-fit: contain; border-radius: 3px; flex: 0 0 auto; }
.h2h-side b { font-size: 18px; }
.h2h-mid { display: flex; flex-direction: column; align-items: center; line-height: 1.1; flex: 0 0 auto; }
.h2h-mid b { font-size: 18px; color: var(--text-secondary); }
.pv-form { display: inline-flex; gap: 4px; margin: 2px 4px 4px; flex-wrap: wrap; }
.fb { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 4px; border-radius: 5px; font-size: 11px; font-weight: 700; color: #fff; flex: 0 0 auto; }
.fb.w { background: var(--ok, #1faa59); }
.fb.d { background: #7a828f; }
.fb.l { background: var(--live, #e0483a); }
.pv-team { background: var(--bg-secondary); border: 1px solid var(--border-soft); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
.pv-team-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.pv-team-head img { width: 22px; height: 22px; object-fit: contain; border-radius: 3px; flex: 0 0 auto; }
.pv-team-name { font-weight: 700; font-size: 14px; }
.pv-list { margin-top: 4px; }
.pv-row { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-top: 1px solid var(--border-soft); font-size: 13px; }
.pv-row:first-child { border-top: 0; }
.pv-opp { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-secondary); }
.pv-opp.ar { text-align: right; }
.pv-score { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 46px; text-align: center; }
.pv-date { color: var(--text-dim); font-size: 12px; min-width: 42px; flex: 0 0 auto; }
/* AI 赛后复盘卡 */
.recap-card { background: linear-gradient(135deg, rgba(59,130,246,.08), rgba(31,170,89,.06)); border: 1px solid var(--border-soft); border-left: 3px solid var(--accent); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.recap-body { margin: 0; font-size: 14px; line-height: 1.75; color: var(--text-primary); text-indent: 2em; }
.recap-meta { margin-top: 8px; font-size: 11px; color: var(--text-dim); }
/* 完场比赛首屏的 AI 复盘入口(Hero 下) */
.recap-cta { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin: 10px 0 0; padding: 11px 14px; border: 1px solid rgba(59,130,246,.3); border-radius: 12px; background: linear-gradient(135deg, rgba(59,130,246,.12), rgba(31,170,89,.08)); color: var(--text-primary); font-size: 14px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.recap-cta .rc-go { flex: 0 0 auto; color: var(--accent); font-weight: 700; }
.recap-cta:active { transform: scale(.99); }
/* 球员榜(射手/评分) */
.lb-toggle { display: flex; gap: 6px; margin-bottom: 8px; }
.lb-toggle button { padding: 5px 14px; border: 1px solid var(--border-soft); border-radius: 99px; background: transparent; color: var(--text-secondary); font-size: 13px; font-weight: 600; cursor: pointer; }
.lb-toggle button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.lb-row { display: flex; align-items: center; gap: 8px; padding: 7px 4px; border-top: 1px solid var(--border-soft); font-size: 13px; }
.lb-row:first-child { border-top: 0; }
.lb-rank { flex: 0 0 22px; text-align: center; color: var(--text-dim); font-variant-numeric: tabular-nums; font-weight: 700; }
.lb-rank.top { color: var(--gold); }
.lb-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.lb-team { flex: 0 1 auto; min-width: 0; max-width: 38%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-dim); font-size: 12px; }
.lb-val { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent); }

.mh-main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.mh-team { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.mh-logo { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.mh-name { font-weight: 700; font-size: 14px; text-align: center; line-height: 1.25; max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mh-rank { font-size: 11px; color: #9fb3a6; }

/* 手机窄屏：详情页 Hero 收紧高度（队徽/内边距更小，首屏不被巨大 Hero 占满）*/
@media (max-width: 560px) {
  .match-hero { padding: 12px 12px 10px; }
  .mh-comp { margin-bottom: 6px; }
  .mh-logo { width: 50px; height: 50px; }
  .match-hero::after { bottom: -56px; width: 120px; height: 120px; }
}

.mh-center { text-align: center; padding: 0 6px; }
.mh-score { font-size: 42px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.05; letter-spacing: 1px; }
.mh-score .mh-sep { color: rgba(255,255,255,.45); margin: 0 8px; }
.mh-status { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: 6px; font-size: 13px; color: #c7d6cb; }
.mh-status.live { color: #ffd76a; font-weight: 700; }
.mh-status .mh-min { font-variant-numeric: tabular-nums; }
.mh-status .mh-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--live); box-shadow: 0 0 6px var(--live); animation: blink 1s infinite; }
.mh-ht { font-size: 12px; color: #9fb3a6; margin-top: 3px; }

.mh-env { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 12px; font-size: 13px; color: #c2d2c8; }
.mh-env span { display: inline-flex; align-items: center; gap: 4px; }

/* 视频/动画切换按钮 */
.mh-switch { display: flex; gap: 8px; margin-top: 14px; }
.mh-sw-btn {
  flex: 1; min-height: 42px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18);
  color: #eef5ef; font-size: 14px; font-weight: 600; letter-spacing: .5px;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
@media (hover: hover) { .mh-sw-btn:hover { background: rgba(255,255,255,.16); } }
.mh-sw-btn.on { background: var(--momentum); border-color: var(--momentum); color: #2a1d00; font-weight: 700; }

/* 媒体容器：默认收起，展开后内嵌动画/视频源 */
.mh-media { max-height: 0; overflow: hidden; transition: max-height .28s var(--ease); }
/* 媒体替换比分块:限高 ~比分块高度量级,避免比静态还高、避免占满视口挤走下面资讯/聊天室 */
.mh-media.open { max-height: 70vh; margin-top: 6px; }
/* 动画框:铺满容器宽度(与上方「视频/动画直播」切换按钮对齐),用 max-height 控高避免在宽屏过高。
   手机本就满宽;PC 不再 560 居中(那样比按钮窄、不对齐,且把纳米自带控件挤到框外突出)。 */
.mh-anim-wrap { position: relative; background: #000; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 16/9; width: 100%; max-height: 56vh; margin: 0; }
.mh-anim-wrap iframe { width: 100%; height: 100%; border: 0; display: block; position: relative; z-index: 1; }
/* 双缓冲新帧:绝对覆盖在当前帧上,后台加载好淡入,再由 JS 移除旧帧 → 定时重载无闪烁 */
.mh-anim-wrap iframe.mh-anim-next { position: absolute; inset: 0; z-index: 2; opacity: 0; transition: opacity .3s ease; }
.mh-anim-wrap iframe.mh-anim-next.ready { opacity: 1; }
.mh-anim-wrap:fullscreen { aspect-ratio: auto; height: 100%; }
.mh-media-sk { position: absolute; inset: 0; z-index: 0; }
.mh-media-note { font-size: 11px; color: #9fb3a6; margin-top: 8px; }
.mh-media-tip { font-size: 13px; color: #c7d6cb; background: rgba(255,255,255,.08); border-radius: var(--radius-sm); padding: 14px; text-align: center; }
.mh-media-tip.soft { color: #9fb3a6; font-size: 12px; }
.mh-video-box { display: flex; flex-direction: column; gap: 10px; }
.mh-video-item { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-sm); padding: 10px 12px; }
.mh-video-item .mvi-head { font-size: 12px; color: #c7d6cb; margin-bottom: 6px; }
.mh-video-item .mvi-url { font-family: monospace; font-size: 11px; word-break: break-all; color: #e6efe8; background: rgba(0,0,0,.3); padding: 7px; border-radius: 6px; margin-bottom: 8px; }
.mh-ext-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.mh-ext-btns .btn, .mh-video-item .btn { flex: 1; min-width: 120px; min-height: 38px; }

/* 支持率条（左主队% 右客队%）*/
.mh-support { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.14); }
.mh-sup-head { display: flex; align-items: baseline; gap: 8px; font-size: 12px; margin-bottom: 6px; }
.mh-sup-label { font-weight: 700; color: #eef5ef; }
.mh-sup-src { color: #9fb3a6; font-size: 11px; }
.mh-sup-row { display: flex; align-items: center; gap: 8px; }
.mh-sup-pct { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 36px; }
.mh-sup-pct.h { color: #7be0a0; text-align: left; }
.mh-sup-pct.a { color: #8bb4ff; text-align: right; }
.mh-sup-bar { flex: 1; display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: rgba(255,255,255,.12); }
.mh-sup-bar .h { background: var(--accent); }
.mh-sup-bar .a { background: var(--blue); }

/* 详情页 tabs 紧贴 Hero */
.tabs.match-tabs { margin-top: 2px; }

/* ── 直播&统计：势头折线（雷速黄）── */
.momentum-wrap { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow); }
.momentum-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.momentum-head .mm-team { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-secondary); min-width: 0; }
.momentum-head .mm-team.away { flex-direction: row; justify-content: flex-end; }
.momentum-head .mm-logo { width: 20px; height: 20px; object-fit: contain; }
.momentum-head .mm-title { font-size: 12px; color: var(--text-dim); font-weight: 700; }
.momentum-note { font-size: 11px; color: var(--text-dim); margin-top: 6px; }

/* ── 圆环统计（进攻/危险进攻/控球率）── */
.ring-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ring-item { background: var(--bg-secondary); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 10px 6px; text-align: center; box-shadow: var(--shadow); }
.ring-svg-wrap { position: relative; width: 80px; height: 80px; margin: 0 auto 6px; }
.ring-svg { width: 80px; height: 80px; transform: none; }
.ring-center { position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.ring-vals { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; }
.ring-vals .rv { font-weight: 700; font-variant-numeric: tabular-nums; }
.ring-vals .rv.h { color: var(--accent); }
.ring-vals .rv.a { color: var(--blue); }
.ring-vals .rv-label { color: var(--text-secondary); font-size: 11px; }

/* ── 射门对比条 + 角球/牌 平铺 ── */
.cmp-row { margin-bottom: 12px; }
.cmp-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; margin-bottom: 5px; }
.cmp-top .cmp-label { color: var(--text-secondary); font-size: 12px; }
.cmp-top .cmp-v { font-weight: 700; font-variant-numeric: tabular-nums; }
.cmp-top .cmp-v.h { color: var(--accent); }
.cmp-top .cmp-v.a { color: var(--blue); }
.cmp-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--bg-elevated); }
.cmp-bar .h { background: var(--accent); }
.cmp-bar .a { background: var(--blue); }
.cmp-bar.off .h { background: #6fae84; }
.cmp-bar.off .a { background: #7aa3e8; }
.stat-tiles { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.stat-tile { flex: 1; min-width: 96px; display: flex; align-items: center; justify-content: space-between; gap: 6px; background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 8px 10px; }
.stat-tile .st-h { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-tile .st-a { color: var(--blue); font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-tile .st-mid { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.stat-tile .st-ico { font-size: 14px; }
.stat-tile .st-lb { font-size: 11px; color: var(--text-secondary); }

/* ── 文字直播 / 重要事件 子标签 ── */
.live-sub-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.live-sub-tabs button { padding: 7px 16px; border-radius: 999px; background: var(--bg-elevated); border: 1px solid var(--border-soft); color: var(--text-secondary); font-size: 13px; font-weight: 600; min-height: 38px; }
.live-sub-tabs button.active { background: var(--accent-dim); border-color: var(--accent); color: #fff; }
.events .ev-team { width: 16px; height: 16px; object-fit: contain; vertical-align: middle; }

@media (max-width: 767px) {
  .mh-logo { width: 52px; height: 52px; }
  .mh-score { font-size: 34px; }
  .mh-name { font-size: 13px; }
  .ring-grid { gap: 6px; }
  .ring-svg-wrap, .ring-svg { width: 68px; height: 68px; }
}

/* ───────────────────────── 数据中转站（station）───────────────────────── */
#view > h2 + .station-intro,
.station-intro { color: var(--text-secondary); font-size: 13px; line-height: 1.7; margin: -6px 0 16px; max-width: 860px; }

.station-sec { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px; box-shadow: var(--shadow); }
.station-sec-h { font-size: 15px; font-weight: 700; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border-soft); }
/* 鉴权说明卡:绿色强调,第三方接入必读 */
.auth-card { border-color: var(--accent); border-left: 4px solid var(--accent); }
.auth-card .auth-list { margin: 0 0 12px; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.55; }
.auth-card .auth-list b { color: var(--accent-dim); }

/* 大徽标 */
.sc-badge { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--radius); margin-bottom: 12px; }
.sc-badge.all-ok { background: rgba(26,143,60,.08); border: 1px solid rgba(26,143,60,.3); }
.sc-badge.partial { background: rgba(176,125,0,.08); border: 1px solid rgba(176,125,0,.3); }
.sc-badge-num { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.sc-badge.all-ok .sc-badge-num { color: var(--accent); }
.sc-badge.partial .sc-badge-num { color: var(--gold); }
.sc-badge-txt { font-size: 13px; color: var(--text-secondary); line-height: 1.4; }
.sc-meta { font-size: 12px; color: var(--text-dim); margin: 4px 0 12px; }

/* 自检卡片网格 */
.sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.sc-card { border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 12px; background: var(--bg-primary); border-left-width: 3px; }
.sc-card.s-ok { border-left-color: var(--accent); }
.sc-card.s-partial { border-left-color: var(--gold); }
.sc-card.s-missing { border-left-color: var(--live); }
.sc-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sc-cat { font-weight: 700; font-size: 14px; }
.sc-status { font-size: 12px; font-weight: 600; white-space: nowrap; }
.sc-kv { display: flex; gap: 8px; font-size: 12px; padding: 3px 0; line-height: 1.5; }
.sc-k { color: var(--text-dim); flex: 0 0 64px; }
.sc-v { color: var(--text-secondary); word-break: break-word; flex: 1; }
.sc-v.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; }
.sc-note { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border-soft); font-size: 11px; color: var(--text-dim); line-height: 1.5; }

/* 配置自检加载骨架（替代裸 spinner，结构同真实卡片，落地无跳动）*/
.sc-sk-badge { height: 64px; border-radius: var(--radius); margin-bottom: 12px; }
.sc-sk-card { border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 12px; background: var(--bg-primary); border-left: 3px solid var(--border); }
.sc-sk-line { height: 12px; border-radius: 6px; margin: 8px 0; }
.sc-sk-line.w40 { width: 40%; } .sc-sk-line.w60 { width: 60%; } .sc-sk-line.w70 { width: 70%; } .sc-sk-line.w90 { width: 90%; }

/* 文档：搜索 + 分组 + 折叠项 */
.station-search { width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: 999px; font-size: 14px; background: var(--bg-primary); color: var(--text-primary); margin-bottom: 12px; min-height: 44px; }
.station-search:focus { outline: 2px solid var(--accent-dim); outline-offset: 0; border-color: var(--accent); }
.doc-list { display: flex; flex-direction: column; gap: 6px; }
.doc-group-h { font-size: 12px; font-weight: 700; color: var(--text-dim); text-transform: none; margin: 10px 0 2px; padding-left: 2px; }
.doc-group-h:first-child { margin-top: 0; }

.doc-item { border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--bg-primary); overflow: hidden; }
.doc-item[open] { border-color: var(--border); box-shadow: var(--shadow); }
.doc-sum { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 10px 12px; flex-wrap: wrap; }
.doc-sum::-webkit-details-marker { display: none; }
.doc-sum:hover { background: var(--bg-hover); }
.doc-method { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px; letter-spacing: .3px; flex: 0 0 auto; color: #fff; }
.doc-method.m-get { background: var(--accent); }
.doc-method.m-iframe { background: var(--blue); }
.doc-path { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; font-weight: 600; color: var(--text-primary); word-break: break-all; }
.doc-summary { font-size: 12px; color: var(--text-dim); flex: 1 1 100%; }
@media (min-width: 768px) { .doc-summary { flex: 1; text-align: right; } }
.doc-body { padding: 4px 12px 14px; border-top: 1px solid var(--border-soft); }
.doc-sub { font-size: 12px; font-weight: 700; color: var(--text-secondary); margin: 12px 0 6px; }
.doc-empty { font-size: 12px; color: var(--text-dim); }

.doc-tbl { width: 100%; border-collapse: collapse; font-size: 12px; display: block; overflow-x: auto; }
.doc-tbl th, .doc-tbl td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
.doc-tbl th { color: var(--text-dim); font-weight: 600; white-space: nowrap; }
.doc-tbl td.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; color: var(--text-primary); white-space: nowrap; }

.doc-example { margin-top: 10px; }
.doc-code-row { display: flex; align-items: stretch; gap: 6px; }
.doc-code { flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; background: #1f2937; color: #e6e9ee; padding: 8px 10px; border-radius: var(--radius-sm); overflow-x: auto; white-space: pre; line-height: 1.5; }
.doc-code.block { display: block; white-space: pre-wrap; word-break: break-word; }
.doc-copy { flex: 0 0 auto; padding: 0 12px; border: 1px solid var(--border); background: var(--bg-elevated); border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; color: var(--text-secondary); min-height: 36px; cursor: pointer; }
.doc-copy:active { transform: scale(.97); }
.doc-note { margin-top: 10px; font-size: 11.5px; color: var(--gold); line-height: 1.5; }

@media (max-width: 767px) {
  .sc-grid { grid-template-columns: 1fr; }
  .doc-summary { flex: 1 1 100%; }
}

/* ───────────────────────── 开发者中心子 TAB（station 顶部）───────────────────────── */
.dc-tabs {
  display: flex; gap: 6px; margin: 4px 0 14px; padding-bottom: 2px;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  overscroll-behavior-x: contain;   /* 横向滚动条到头不把滑动链给页面,避免跑版 */
  border-bottom: 1px solid var(--border-soft);
}
.dc-tabs::-webkit-scrollbar { display: none; }
.dc-tab {
  flex: 0 0 auto; padding: 9px 16px; min-height: 40px; cursor: pointer;
  border: 0; border-bottom: 2px solid transparent; background: transparent;
  font-size: 14px; font-weight: 600; color: var(--text-secondary); white-space: nowrap;
  border-top-left-radius: var(--radius-sm); border-top-right-radius: var(--radius-sm);
}
.dc-tab:hover { background: var(--bg-hover); color: var(--text-primary); }
.dc-tab.on { color: var(--accent); border-bottom-color: var(--accent); background: transparent; }
.dc-tab:focus-visible { outline: 2px solid var(--accent-dim); outline-offset: -2px; }
.dc-panel { min-height: 200px; }
.dc-pane { animation: dc-fade .18s var(--ease); }
@keyframes dc-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* API 参考子 TAB：操作条 + 内嵌 iframe */
.apiref-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 12px; }
.apiref-frame {
  width: 100%; height: 72vh; min-height: 420px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: #fff;
}

/* 设计规格子 TAB：左目录 + 右 markdown */
.spec-layout { display: grid; grid-template-columns: 220px 1fr; gap: 14px; align-items: start; }
.spec-toc {
  display: flex; flex-direction: column; gap: 4px; position: sticky; top: calc(var(--header-h) + 8px);
  max-height: calc(100vh - var(--header-h) - 32px); overflow-y: auto;
}
.spec-toc-item {
  text-align: left; padding: 9px 12px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  background: var(--bg-primary); color: var(--text-secondary); font-size: 13px; font-weight: 600; cursor: pointer;
  min-height: 40px; line-height: 1.4;
}
.spec-toc-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.spec-toc-item.on { background: var(--bg-chip-on); border-color: var(--accent); color: var(--accent); }
.spec-doc { min-width: 0; padding: 4px 4px 8px; }

@media (max-width: 767px) {
  .spec-layout { grid-template-columns: 1fr; }
  .spec-toc {
    flex-direction: row; flex-wrap: nowrap; overflow-x: auto; position: static; max-height: none;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px;
  }
  .spec-toc::-webkit-scrollbar { display: none; }
  .spec-toc-item { flex: 0 0 auto; white-space: nowrap; }
  .apiref-frame { height: 78vh; }
}

/* ───────────────────────── Markdown 渲染（设计规格正文）───────────────────────── */
.md-body { font-size: 14px; line-height: 1.75; color: var(--text-primary); word-wrap: break-word; }
.md-body h1, .md-body h2, .md-body h3, .md-body h4, .md-body h5, .md-body h6 {
  line-height: 1.35; margin: 22px 0 10px; scroll-margin-top: calc(var(--header-h) + 12px);
}
.md-body h1 { font-size: 22px; padding-bottom: 8px; border-bottom: 2px solid var(--border); }
.md-body h2 { font-size: 19px; padding-bottom: 6px; border-bottom: 1px solid var(--border-soft); }
.md-body h3 { font-size: 16px; }
.md-body h4 { font-size: 14.5px; }
.md-body h5, .md-body h6 { font-size: 13px; color: var(--text-secondary); }
.md-body p { margin: 10px 0; }
.md-body ul, .md-body ol { margin: 10px 0; padding-left: 24px; }
.md-body li { margin: 4px 0; }
.md-body a { color: var(--blue); text-decoration: none; }
.md-body a:hover { text-decoration: underline; }
.md-body strong { font-weight: 700; }
.md-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px;
  background: var(--bg-elevated); color: var(--text-primary); padding: 1px 6px; border-radius: 4px;
}
.md-body pre {
  background: #1f2937; color: #e6e9ee; padding: 12px 14px; border-radius: var(--radius-sm);
  overflow-x: auto; margin: 12px 0; line-height: 1.6;
}
.md-body pre code { background: transparent; color: inherit; padding: 0; font-size: 12.5px; }
.md-body blockquote {
  margin: 12px 0; padding: 8px 14px; border-left: 3px solid var(--accent);
  background: rgba(26,143,60,.06); color: var(--text-secondary); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.md-body hr { border: 0; border-top: 1px solid var(--border-soft); margin: 20px 0; }
.md-body table, .md-body .md-table {
  border-collapse: collapse; width: 100%; margin: 12px 0; font-size: 13px; display: block; overflow-x: auto;
}
.md-body th, .md-body td { border: 1px solid var(--border-soft); padding: 7px 10px; text-align: left; vertical-align: top; }
.md-body th { background: var(--bg-elevated); font-weight: 700; white-space: nowrap; }
.md-body img { max-width: 100%; height: auto; }

/* ═════════════ 桌面增强（≥1024px，仅加宽/重排，手机 <1024 完全不变）═════════════ */
@media (min-width: 1024px) {
  /* ① 比赛详情：容器收窄居中（消除巨大留白），Hero 满宽置顶 */
  main:has(#matchHero) { max-width: 1180px; }

  /* ① 直播&统计：左 62% 统计（势头/圆环/射门）+ 右 38% sticky 时间线
     仅当本场有「文字直播/重要事件」(.sec.live-sub) 时启用两栏；否则保持单列 */
  #tabPanel:has(> .sec.live-sub) {
    display: grid;
    grid-template-columns: 62fr 38fr;
    gap: 20px;
    align-items: start;
  }
  /* 左栏统计区按出现顺序自动落入第 1 列 */
  #tabPanel:has(> .sec.live-sub) > .sec { grid-column: 1; margin-bottom: 16px; }
  /* 右栏：文字直播/事件时间线，置顶 sticky，跨所有行 */
  #tabPanel:has(> .sec.live-sub) > .sec.live-sub {
    grid-column: 2; grid-row: 1 / 99;
    position: sticky; top: calc(var(--header-h) + 56px);
    align-self: start; margin-bottom: 0;
    max-height: calc(100vh - var(--header-h) - 76px); overflow-y: auto;
  }
  /* 势头 SVG 在更宽左栏不至过高 */
  #tabPanel:has(> .sec.live-sub) .momentum-wrap svg { max-height: 220px; }

  /* ② 比分行(桌面)：根因是 teams 占 1fr 把比分推到行最右，队名与比分间 ~800px 空洞、
     视线要横扫才对上比分。改为左聚合两区:[状态|队名|比分] 紧贴成「赛果区」,比分就在队名旁;
     次要标签(半/角/牌)归右侧「数据区」。比分不再远离赛果,中段不再空。 */
  main:has(.match-list) .match-row {
    grid-template-columns: 48px auto auto 1fr;
    padding-top: 7px; padding-bottom: 7px; gap: 14px;
  }
  main:has(.match-list) .match-row .mr-teams { gap: 2px; max-width: 360px; }
  main:has(.match-list) .match-row .mr-team .tn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  main:has(.match-list) .match-row .mr-score {
    grid-column: 3; grid-row: 1; text-align: left; min-width: 30px; padding-left: 2px;
  }
  main:has(.match-list) .match-row .mr-tags {
    grid-column: 4; grid-row: 1; align-self: center;
    margin-top: 0; padding-left: 0; justify-content: flex-end; flex-wrap: nowrap; gap: 8px;
  }
}

/* ───────────────────────── 减少动态效果（无障碍/省电/低端机）───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── PC 详情桌面 2 栏(主控修正:用真实存在的 .detail-stats/.detail-live)── */
@media (min-width: 1024px) {
  main:has(#matchHero) { max-width: 1280px; }
  #tabPanel:has(.detail-live) {
    display: grid; grid-template-columns: minmax(0, 1fr) 396px;
    gap: 16px; align-items: start;
  }
  .detail-stats { min-width: 0; }
  /* 右栏=置顶 sticky 侧栏(随左栏滚动常驻);加左分隔线让它读作"刻意的侧栏"而非悬空内容,弱化短时间线的失衡感 */
  .detail-live { position: sticky; top: 12px; align-self: start; max-height: calc(100vh - 20px); overflow: auto; border-left: 1px solid var(--border-soft); padding-left: 16px; }
  .detail-live::after { content: "文字直播随比赛实时更新"; display: block; margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--border-soft); font-size: 11px; color: var(--text-dim); text-align: center; }
}

/* ── PC详情2栏 修正:tab内容渲染进一个空class包裹层(box),grid要加在box上 ── */
@media (min-width: 1024px) {
  #tabPanel:has(.detail-live) { display: block !important; }
  #tabPanel:has(.detail-live) > div {
    display: grid; grid-template-columns: minmax(0, 1fr) 396px;
    gap: 16px; align-items: start;
  }
}

/* ── 动画区角标控件:左上=返回、右上=全屏。绝对定位浮在画面角落,不再占用工具条高度 ── */
.mh-anim-ctl {
  position: absolute; top: 8px; z-index: 3;
  width: 30px; height: 30px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1; font-weight: 700;
  background: rgba(0,0,0,.5); color: #fff;
  border: 1px solid rgba(255,255,255,.28); border-radius: 8px;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); cursor: pointer;
}
.mh-anim-ctl.left { left: 8px; }
.mh-anim-ctl.right { right: 8px; font-size: 15px; }
@media (hover: hover) { .mh-anim-ctl:hover { background: rgba(0,0,0,.72); } }
.mh-media-note { font-size: 11px; opacity: .7; }