/* ============================================================
   乒乓世界 · 球员分析工作台（v2 · 详情页专用）
   ------------------------------------------------------------
   结构：档案头 → 锚点导航 → 能力 / 曲线 / 逐局 / 比赛 / 交手
   视觉：R 星式 —— 大字报数字（Archivo）、切角卡片、暗底高对比
   （旧 pages.css 仍被未重构的页面使用，本文件不依赖它）
   ============================================================ */

main {
  padding-top: var(--nav-h);
}

/* ============================================================
   一、档案头
   ============================================================ */

.profile {
  position: relative;
  padding: var(--sp-8) 0 var(--sp-7);
  overflow: hidden;
}

/* 背景光晕：右上角品牌橙的微弱辉光 */
.profile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 64% 88% at 80% -10%,
    rgba(255, 92, 26, 0.1),
    transparent 62%
  );
  pointer-events: none;
}

.back-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 13px;
  color: var(--text-2);
  transition: color var(--dur) var(--ease);
}

.back-link svg {
  width: 14px;
  height: 14px;
}

.back-link:hover {
  color: var(--text-0);
}

.profile__top {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-top: var(--sp-6);
}

.profile__name h1 {
  margin-top: var(--sp-3);
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  background: linear-gradient(175deg, #ffffff 0%, #d8d8de 46%, #8e8e9c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.profile__name-en {
  display: block;
  margin-top: var(--sp-3);
  font-size: clamp(0.9rem, 1.8vw, 1.2rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-1);
}

.profile__rank {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-2);
  flex-shrink: 0;
}

.profile__rank-num {
  font-size: clamp(2.6rem, 5.5vw, 4rem);
  font-weight: 900;
  line-height: 1;
  color: var(--brand);
}

.profile__rank-label {
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--text-2);
}

/* 关键数字行 */
.profile__career {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  margin: var(--sp-7) 0 0;
  padding: var(--sp-5) 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.profile__career b {
  display: block;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1;
  color: var(--text-0);
}

.profile__career span {
  display: block;
  margin-top: var(--sp-2);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-2);
}

/* ============================================================
   二、锚点导航（吸顶 + 滚动高亮）
   ============================================================ */

.anchor-nav {
  position: sticky;
  top: var(--nav-h);
  z-index: 50;
  background: rgba(8, 8, 10, 0.88);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}

.anchor-nav .wrap {
  display: flex;
  gap: var(--sp-6);
}

.anchor-nav a {
  position: relative;
  padding: var(--sp-4) 0;
  font-size: 14px;
  color: var(--text-1);
  transition: color var(--dur) var(--ease);
}

.anchor-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transition: transform var(--dur) var(--ease);
}

.anchor-nav a:hover,
.anchor-nav a.is-active {
  color: var(--text-0);
}

.anchor-nav a.is-active::after {
  transform: scaleX(1);
}

/* ============================================================
   三、内容区布局
   ============================================================ */

.detail {
  padding-top: var(--sp-7);
  padding-bottom: var(--sp-9);
  display: grid;
  gap: var(--sp-7);
}

.detail > section {
  /* 锚点跳转时给吸顶导航留位 */
  scroll-margin-top: calc(var(--nav-h) + 64px);
}

.section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

.section-title h2 {
  font-size: 1.3rem;
  font-weight: 800;
}

.section-title span {
  font-size: 12px;
  color: var(--text-2);
}

.panel {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--sp-6);
}

.panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

.panel__title {
  font-size: 1.05rem;
  font-weight: 700;
}

.panel__hint {
  font-size: 12px;
  color: var(--text-2);
}

.panel-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--sp-5);
}

.chart {
  width: 100%;
  height: 320px;
}

.chart--tall {
  height: 380px;
}

.empty-hint {
  padding: var(--sp-7) 0;
  text-align: center;
  font-size: 13px;
  color: var(--text-2);
}

/* ============================================================
   四、分类胜率（沿用旧结构，重写样式）
   ============================================================ */

.h2h-list {
  display: grid;
  gap: var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.h2h-group__title {
  margin-bottom: var(--sp-3);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--text-2);
}

.h2h-group .h2h-list {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}

.h2h-item__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}

.h2h-item__label {
  font-size: 13px;
  color: var(--text-1);
}

.h2h-item__pct {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 15px;
  color: var(--text-0);
}

.h2h-item__bar {
  height: 4px;
  margin-top: var(--sp-2);
  background: var(--bg-3);
  border-radius: 2px;
  overflow: hidden;
}

.h2h-item__bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--brand), var(--brand-hot));
  border-radius: 2px;
}

.h2h-item__sub {
  margin-top: var(--sp-2);
  font-size: 11px;
  color: var(--text-2);
}

/* ============================================================
   五、逐局指标卡
   ============================================================ */

.metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}

.metric {
  padding: var(--sp-6);
  background: var(--bg-1);
  transition: background var(--dur) var(--ease);
}

.metric:hover {
  background: var(--bg-2);
}

.metric:hover::after {
  background: linear-gradient(
    to bottom left,
    transparent calc(50% - 0.7px),
    var(--brand) calc(50% - 0.7px),
    var(--brand) calc(50% + 0.7px),
    transparent calc(50% + 0.7px)
  );
}

.metric--wide {
  grid-column: 1 / -1;
}

.metric__name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--text-2);
}

.metric__value {
  margin-top: var(--sp-4);
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  line-height: 1;
  color: var(--text-0);
}

.metric__sub {
  margin-top: var(--sp-4);
  font-size: 13px;
  color: var(--text-1);
}

.metric__note {
  margin-top: var(--sp-3);
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-2);
}

/* 局次曲线：条形列表 */
.gbars {
  display: grid;
  gap: var(--sp-3);
  margin: var(--sp-5) 0 0;
  padding: 0;
  list-style: none;
  max-width: 720px;
}

.gbar {
  display: grid;
  grid-template-columns: 64px 1fr 52px;
  align-items: center;
  gap: var(--sp-4);
}

.gbar__label {
  font-size: 12px;
  color: var(--text-2);
}

.gbar__track {
  height: 6px;
  background: var(--bg-3);
  border-radius: 3px;
  overflow: hidden;
}

.gbar__track i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--brand), var(--brand-hot));
  border-radius: 3px;
}

.gbar__val {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 14px;
  text-align: right;
  color: var(--text-0);
}

/* ============================================================
   六、比赛记录
   ============================================================ */

.tabs {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}

.tab {
  padding: var(--sp-2) var(--sp-4);
  font-size: 13px;
  color: var(--text-1);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: all var(--dur) var(--ease);
}

.tab:hover {
  color: var(--text-0);
  border-color: var(--line-strong);
}

.tab.is-active {
  color: #fff;
  background: var(--brand);
  border-color: var(--brand);
}

.table-scroll {
  overflow-x: auto;
}

.mtable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.mtable th {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-2);
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}

.mtable td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
  color: var(--text-1);
  white-space: nowrap;
}

.mtable tbody tr {
  transition: background var(--dur) var(--ease);
}

.mtable tbody tr:hover {
  background: var(--bg-2);
}

.mtable__event {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mtable .score {
  color: var(--text-0);
  font-weight: 600;
}

.mtable .games {
  color: var(--text-2);
  font-size: 12px;
}

.plink {
  color: var(--text-0);
  border-bottom: 1px dashed var(--text-2);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.plink:hover {
  color: var(--brand-hot);
  border-color: var(--brand);
}

/* 结果徽标 */
.rtag {
  display: inline-block;
  padding: 1px 8px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--r-sm);
}

.rtag--win {
  color: var(--accent);
  background: var(--accent-soft);
}

.rtag--lose {
  color: var(--text-2);
  background: rgba(255, 255, 255, 0.05);
}

/* 分页 */
.pager {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  flex-wrap: wrap;
}

.pgbtn {
  min-width: 34px;
  padding: var(--sp-2) var(--sp-3);
  font-size: 13px;
  color: var(--text-1);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: all var(--dur) var(--ease);
}

.pgbtn:hover:not(:disabled) {
  color: var(--text-0);
  border-color: var(--line-strong);
}

.pgbtn.is-active {
  color: #fff;
  background: var(--brand);
  border-color: var(--brand);
}

.pgbtn:disabled {
  opacity: 0.35;
  cursor: default;
}

.pgtext {
  margin-left: var(--sp-2);
  font-size: 12px;
  color: var(--text-2);
}

/* ============================================================
   七、交手快照
   ============================================================ */

.vs-list {
  display: grid;
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.vs-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(120px, 220px);
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-3) var(--sp-2);
  border-radius: var(--r-sm);
  transition: background var(--dur) var(--ease);
}

.vs-item:hover {
  background: var(--bg-2);
}

.vs-item__who {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  min-width: 0;
}

.vs-item__who b {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vs-item__who span {
  font-size: 12px;
  color: var(--text-2);
  flex-shrink: 0;
}

.vs-item__score {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-family: var(--font-display);
}

.vs-item__score b {
  font-size: 17px;
  font-weight: 900;
  color: var(--text-2);
}

.vs-item__score b.is-lead {
  color: var(--text-0);
}

.vs-item__score em {
  font-style: normal;
  color: var(--text-2);
}

.vs-item__bar {
  height: 4px;
  background: var(--bg-3);
  border-radius: 2px;
  overflow: hidden;
}

.vs-item__bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #00b8a3);
  border-radius: 2px;
}

/* ============================================================
   八、列表页（排行榜）
   ============================================================ */

.list-page {
  padding-top: var(--sp-8);
  padding-bottom: var(--sp-9);
}

.page-head {
  margin-bottom: var(--sp-7);
}

.page-head h1 {
  margin-top: var(--sp-3);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 900;
  letter-spacing: -0.01em;
}

.page-head__desc {
  max-width: 640px;
  margin-top: var(--sp-4);
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-1);
}

/* 筛选栏 */
.filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
  margin-bottom: var(--sp-6);
}

.filters .tabs {
  margin-bottom: 0;
}

.filters__right {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.input,
.select {
  height: 38px;
  padding: 0 var(--sp-4);
  font-size: 13px;
  color: var(--text-0);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  outline: none;
  transition: border-color var(--dur) var(--ease);
}

.input {
  width: 220px;
}

.input::placeholder {
  color: var(--text-2);
}

.input:focus,
.select:focus {
  border-color: var(--brand);
}

.select {
  cursor: pointer;
  appearance: none;
  padding-right: var(--sp-7);
  background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%),
    linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.select option {
  background: var(--bg-1);
  color: var(--text-0);
}

/* 排行榜表格 */
.rank-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

/* 球员列表顶部：数据更新日期条 */
.list-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  margin-bottom: var(--sp-3);
  padding: 10px 16px;
  font-size: 12.5px;
  color: var(--text-2);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.list-meta b {
  margin-right: 6px;
  font-weight: 600;
  color: var(--text-1);
}

/* 表格卡片外框：与纪录墙 record-card 同一套边框 / 渐变 / 阴影 */
.table-scroll.rank-board {
  background:
    linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.045),
      rgba(255, 255, 255, 0.01) 62%
    ),
    var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

.rank-table th {
  padding: 14px 18px;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-2);
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.02);
}

/* 数字列表头必须与数据一样右对齐：.rank-table th 的特异性更高，需显式覆盖 */
.rank-table th.rank-table__num {
  text-align: right;
}

.rank-table td {
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.rank-table tbody tr:last-child td {
  border-bottom: none;
}

.rank-table tbody tr {
  transition: background var(--dur) var(--ease);
}

.rank-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.035);
}

.rank-table__no {
  width: 64px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 15px;
  color: var(--text-2);
}

.rank-table__no.is-top {
  color: var(--brand);
}

.rank-table__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.rank-table__elo {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 16px;
  color: var(--text-0);
}

.rank-table__dim {
  color: var(--text-2);
}

.rank-table__assoc {
  color: var(--text-1);
}

.rank-table__en {
  margin-left: var(--sp-3);
  font-size: 12px;
  color: var(--text-2);
}

.rank-table .plink {
  border-bottom: none;
}

.rank-table .plink b {
  font-weight: 600;
  color: var(--text-0);
}

.rank-table .plink:hover b {
  color: var(--brand-hot);
}

/* ============================================================
   九、对比页
   ============================================================ */

/* 选择器 */
.vs-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: var(--sp-5);
  margin-bottom: var(--sp-7);
}

.vs-picker__side {
  position: relative;
}

.vs-picker__label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-2);
}

.vs-picker__side--a .vs-picker__label {
  color: var(--brand);
}

.vs-picker__side--b .vs-picker__label {
  color: var(--accent);
}

.vs-picker__input {
  width: 100%;
}

.vs-picker__vs {
  padding-bottom: var(--sp-2);
  font-size: 1.4rem;
  color: var(--text-2);
}

/* 自动补全下拉 */
.suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 60;
  margin: 0;
  padding: var(--sp-2);
  list-style: none;
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.7);
}

.suggest button {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-3);
  text-align: left;
  border-radius: var(--r-sm);
  transition: background var(--dur) var(--ease);
}

.suggest button:hover {
  background: var(--bg-3);
}

.suggest button b {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-0);
}

.suggest button span {
  font-size: 12px;
  color: var(--text-2);
}

.suggest__empty {
  padding: var(--sp-3);
  font-size: 13px;
  color: var(--text-2);
}

/* 对比内容布局 */
.panel-grid--compare {
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
}

#content {
  display: grid;
  gap: var(--sp-5);
}

/* 对照表 */
.ctable {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.ctable th {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  border-bottom: 1px solid var(--line-strong);
}

.ctable__who {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ctable__who b {
  font-size: 15px;
}

.ctable__who span {
  font-size: 12px;
  color: var(--text-2);
}

.ctable td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
  color: var(--text-1);
}

.ctable .row-label {
  color: var(--text-2);
  font-size: 13px;
}

.ctable td.is-better {
  color: var(--text-0);
  font-weight: 700;
  background: rgba(255, 92, 26, 0.06);
}

/* 直接交手 */
.h2h-empty {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-7) 0;
  text-align: center;
  color: var(--text-2);
}

.h2h-empty b {
  color: var(--text-1);
}

.h2h-empty span {
  font-size: 12px;
}

.h2h-score {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
}

.h2h-score__name {
  font-size: 15px;
  font-weight: 700;
}

.h2h-score__num {
  font-size: clamp(2.6rem, 5vw, 4rem);
  line-height: 1;
}

.h2h-score__colon {
  font-size: 2rem;
  color: var(--text-2);
}

.h2h-bar {
  display: flex;
  height: 6px;
  margin: var(--sp-5) auto 0;
  max-width: 560px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--bg-3);
}

.h2h-bar i {
  display: block;
  height: 100%;
}

.h2h-meta {
  margin-top: var(--sp-4);
  text-align: center;
  font-size: 12px;
  color: var(--text-2);
}

.h2h-timeline {
  display: grid;
  gap: var(--sp-1);
  margin: var(--sp-6) 0 0;
  padding: 0;
  list-style: none;
}

.h2h-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-2);
  border-radius: var(--r-sm);
  transition: background var(--dur) var(--ease);
}

.h2h-row:hover {
  background: var(--bg-2);
}

.h2h-row__date {
  font-size: 12px;
  color: var(--text-2);
}

.h2h-row__event {
  font-size: 13px;
  color: var(--text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.h2h-row__score {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}

.h2h-row__score b {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 15px;
  color: var(--text-2);
}

.h2h-row__score b.is-a {
  color: var(--brand);
}

.h2h-row__score b.is-b {
  color: var(--accent);
}

.h2h-row__score em {
  font-style: normal;
  color: var(--text-2);
}

/* ============================================================
   十、分析实验室
   ============================================================ */

.tabs--lab {
  margin-bottom: var(--sp-7);
}

.lab-panel {
  display: grid;
  gap: var(--sp-5);
}

/* ⚠️ display: grid 会覆盖 hidden 属性的 display: none —— 必须显式处理 */
.lab-panel[hidden] {
  display: none;
}

.lab-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
}

.lab-desc {
  max-width: 640px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-1);
}

.lab-foot {
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-2);
}

/* 判定徽标 */
.judge {
  display: inline-block;
  padding: 2px 9px;
  font-size: 12px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  background: rgba(255, 255, 255, 0.05);
}

.judge--over {
  color: var(--brand-hot);
  background: var(--brand-soft);
}

.judge--under {
  color: var(--accent);
  background: var(--accent-soft);
}

/* 矩阵选择器 */
.matrix-picker {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.matrix-picker__search {
  position: relative;
  width: 260px;
}

.matrix-picker__search .input {
  width: 100%;
}

.matrix-picker__chips {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  font-size: 13px;
  color: var(--text-0);
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  transition: border-color var(--dur) var(--ease);
}

.chip i {
  font-style: normal;
  color: var(--text-2);
}

.chip:hover {
  border-color: var(--brand);
}

.chip:hover i {
  color: var(--brand-hot);
}

/* 交手矩阵 */
.matrix {
  border-collapse: collapse;
  font-size: 13px;
}

.matrix__col,
.matrix__row {
  padding: var(--sp-3) var(--sp-4);
  font-weight: 600;
  font-size: 13px;
  color: var(--text-1);
  white-space: nowrap;
}

.matrix__col {
  text-align: center;
  border-bottom: 1px solid var(--line-strong);
}

.matrix__row {
  text-align: right;
  border-right: 1px solid var(--line-strong);
}

.mx-cell {
  padding: var(--sp-3) var(--sp-4);
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--text-1);
  border: 1px solid var(--bg-0);
  white-space: nowrap;
}

.mx-cell b {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 15px;
  color: var(--text-2);
}

.mx-cell em {
  font-style: normal;
  color: var(--text-2);
  margin: 0 2px;
}

.mx-cell--lead {
  color: var(--text-0);
}

.mx-cell--lead b {
  color: var(--brand-hot);
}

.mx-cell--self {
  color: var(--text-2);
  background: var(--bg-1);
}

.mx-cell--none {
  color: var(--text-2);
  text-align: center;
}

/* ============================================================
   十一、三榜评分（实力榜 / 球员页 rating 卡）
   ============================================================ */

/* 数据截至日 */
.strength-asof {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
}

/* 覆盖范围警示条（历史地位榜） */
.strength-flag {
  padding: var(--sp-3) var(--sp-4);
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-1);
  background: rgba(255, 180, 40, 0.08);
  border-left: 2px solid #ffb428;
}

.strength-flag b {
  color: #ffc65c;
}

/* 峰值窗口：等宽字体，日期不折行 */
.strength-window {
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: nowrap;
}

/* 「怎么算的」折叠说明 */
.how {
  padding: var(--sp-4) var(--sp-5);
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-1);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

.how summary {
  font-weight: 600;
  color: var(--text-0);
  cursor: pointer;
  list-style: none;
}

.how summary::-webkit-details-marker {
  display: none;
}

.how summary::after {
  content: "＋";
  float: right;
  color: var(--brand);
}

.how[open] summary::after {
  content: "－";
}

.how__body {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.how__body b {
  color: var(--text-0);
}

.how__example {
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-2);
  border-left: 2px solid var(--brand);
}

/* 外部联赛球员区块 —— 不参与常规排名，用 coverage 钩子着样式 */
.strength-external {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--accent-soft);
  border-left: 2px solid var(--accent);
}

.strength-external__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-1);
}

.strength-external__tag {
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
}

.strength-external__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name rating"
    "en   rating"
    "reason reason";
  gap: var(--sp-1) var(--sp-5);
  padding: var(--sp-4);
  background: var(--bg-1);
  transition: background var(--dur) var(--ease);
}

.strength-external__item:hover {
  background: var(--bg-2);
}

.strength-external__name {
  grid-area: name;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
}

.strength-external__item b {
  font-weight: 600;
}

.strength-external__en {
  font-size: 12px;
  color: var(--text-2);
}

.strength-external__rating {
  grid-area: rating;
  align-self: center;
  font-size: 1.5rem;
  color: var(--accent);
}

.strength-external__reason {
  grid-area: reason;
  margin-top: var(--sp-2);
  font-size: 12px;
  color: var(--text-1);
}

/* ---------- 球员页：三榜卡 ---------- */

.rating-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
}

.rating-card {
  padding: var(--sp-6);
  background: var(--bg-1);
  transition: background var(--dur) var(--ease);
}

.rating-card:hover {
  background: var(--bg-2);
}

.rating-card__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--text-2);
}

.rating-card__unit {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text-2);
}

.rating-card__value {
  margin-top: var(--sp-4);
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  line-height: 1;
  color: var(--text-0);
}

.rating-card__rank {
  margin-top: var(--sp-3);
  font-size: 13px;
  color: var(--text-1);
}

.rating-card__meta {
  margin-top: var(--sp-3);
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-2);
}

/* 外部联赛球员卡片：只靠 data-coverage 钩子，不写死人名 */
.rating-card[data-coverage="external"] {
  background: linear-gradient(135deg, var(--accent-soft), var(--bg-1) 60%);
  border-left: 2px solid var(--accent);
}

.rating-card[data-coverage="external"] .rating-card__value {
  color: var(--accent);
}

/* 档案头的覆盖状态徽标 */
.cov-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--sp-3);
  padding: 3px 10px;
  font-size: 12px;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid rgba(0, 224, 198, 0.35);
  border-radius: var(--r-sm);
}

.cov-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---------- 球员页：三大赛荣誉明细 ---------- */

.honors-panel {
  margin-top: var(--sp-5);
}

.honor-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.honor-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.honor-item:last-child {
  border-bottom: none;
}

.honor-item__year {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-2);
}

.honor-item__event {
  color: var(--text-1);
}

.honor-item__round {
  font-weight: 600;
  color: var(--text-0);
}

.honor-item__round.is-champion {
  color: var(--brand-hot);
}

.honor-item__points {
  font-family: var(--font-mono);
  font-size: 12px;
  text-align: right;
  color: var(--text-2);
}

/* ============================================================
   十二、关于页
   ============================================================ */

.about-page {
  display: grid;
  gap: var(--sp-5);
}

.about-page .page-head {
  margin-bottom: var(--sp-4);
}

.about-h2 {
  margin-bottom: var(--sp-5);
  font-size: 1.15rem;
  font-weight: 800;
}

.about-h3 {
  margin: var(--sp-6) 0 var(--sp-3);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-0);
}

.about-page .panel > .lab-desc + .lab-desc,
.about-page .panel > .about-list + .lab-foot {
  margin-top: var(--sp-4);
}

/* 数据规模大数字 */
.about-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
  margin: var(--sp-5) 0;
  padding: 0;
  list-style: none;
}

.about-stats b {
  display: block;
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  line-height: 1;
  color: var(--text-0);
}

.about-stats span {
  display: block;
  margin-top: var(--sp-2);
  font-size: 12px;
  color: var(--text-2);
}

/* 列表 */
.about-list {
  display: grid;
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-list li {
  padding-left: var(--sp-5);
  position: relative;
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-1);
}

.about-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  background: var(--brand);
}

.about-list b {
  color: var(--text-0);
}

@media (max-width: 720px) {
  .about-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   响应式
   ============================================================ */

@media (max-width: 900px) {
  .panel-grid,
  .panel-grid--compare {
    grid-template-columns: 1fr;
  }

  .vs-picker {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: var(--sp-4);
  }

  .vs-picker__vs {
    display: none;
  }

  .metrics {
    grid-template-columns: 1fr;
  }

  .mile-grid,
  .mile-grid--rally {
    grid-template-columns: 1fr;
  }

  .rating-cards {
    grid-template-columns: 1fr;
  }

  .profile__top {
    flex-direction: column;
    align-items: flex-start;
  }

  .profile__rank {
    align-items: flex-start;
  }

  .profile__career {
    gap: var(--sp-6);
  }

  .vs-item {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .vs-item__bar {
    display: none;
  }
}

@media (max-width: 640px) {
  .anchor-nav .wrap {
    gap: var(--sp-5);
    overflow-x: auto;
  }

  .h2h-group .h2h-list {
    grid-template-columns: 1fr;
  }

  .profile__career {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-5);
  }
}

/* ============================================================
   十三、数据溯源页（trace.html）
   ------------------------------------------------------------
   实力榜的每个数字点进来：公式代入 → 原始数据 → 数据来源。
   ============================================================ */

.trace-page {
  display: grid;
  gap: var(--sp-5);
}

.trace-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.trace-back {
  font-size: 13px;
  color: var(--text-1);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

.trace-back:hover {
  color: var(--brand-hot);
}

.trace-asof {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
}

/* ---------- 头部：球员 + 当前指标 ---------- */

.trace-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  padding: var(--sp-7);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(255, 92, 26, 0.14), transparent 55%),
    var(--bg-1);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
}

.trace-hero h1 {
  margin: var(--sp-3) 0 var(--sp-2);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.2;
}

.trace-hero h1 span {
  color: var(--text-2);
  font-weight: 700;
}

.trace-hero__sub {
  margin: 0;
  font-size: 13px;
  color: var(--text-2);
}

.trace-hero__figure {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-2);
  text-align: right;
}

.trace-hero__value {
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  line-height: 1;
  color: var(--text-0);
}

.trace-hero__rank {
  font-size: 13px;
  color: var(--text-1);
}

/* ---------- 指标切换 ---------- */

.trace-switch {
  display: grid;
  gap: var(--sp-3);
}

.trace-switch__row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.trace-switch__label {
  flex: 0 0 84px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text-2);
}

.tabs--wrap {
  flex-wrap: wrap;
  margin-bottom: 0;
}

.trace-switch .tab {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.trace-tab__val {
  margin-left: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  opacity: 0.7;
}

.trace-switch .tab.is-active .trace-tab__val {
  opacity: 0.9;
}

/* ---------- 卡片 ---------- */

.trace-card {
  display: grid;
  gap: var(--sp-5);
  padding: var(--sp-6);
  background: var(--bg-1);
  border: 1px solid var(--line);
}

.trace-card--calc {
  border-left: 2px solid var(--brand);
}

.trace-card--limits {
  background: var(--bg-0);
}

.trace-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.trace-h2 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
}

.trace-h3 {
  margin: var(--sp-4) 0 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-0);
}

.trace-card__hint {
  font-size: 12px;
  color: var(--text-2);
}

.trace-lead {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-1);
}

.trace-lead strong {
  color: var(--text-0);
}

/* ---------- 公式 ---------- */

.trace-formula {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.9;
  color: var(--text-1);
  background: var(--bg-0);
  border: 1px solid var(--line);
  overflow-x: auto;
}

.trace-formula__line {
  white-space: nowrap;
}

.trace-formula__note {
  color: var(--text-2);
  font-size: 12px;
}

.trace-val {
  color: var(--accent);
  font-weight: 700;
}

/* ---------- 输入项 ---------- */

.trace-inputs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.trace-inputs li {
  padding: var(--sp-3) var(--sp-4);
  font-size: 13px;
  background: var(--bg-2);
}

.trace-inputs span {
  display: block;
  font-size: 12px;
  color: var(--text-2);
}

.trace-inputs b {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text-0);
}

.trace-inputs em {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 11px;
  color: var(--text-2);
}

/* ---------- 规则 / 注释 ---------- */

.trace-rules {
  display: grid;
  gap: var(--sp-2);
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-1);
}

.trace-rules li::marker {
  color: var(--brand);
}

.trace-rules code,
.trace-tables code,
.trace-lead code {
  padding: 1px 5px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  background: rgba(0, 224, 198, 0.08);
}

.trace-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.8;
  color: var(--text-2);
}

.trace-empty {
  margin: 0;
  padding: var(--sp-5);
  text-align: center;
  font-size: 13px;
  color: var(--text-2);
  background: var(--bg-2);
}

.trace-warn {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  background: rgba(255, 180, 40, 0.08);
  border-left: 2px solid #ffb428;
}

.trace-warn b {
  color: #ffc65c;
}

.trace-warn p {
  margin: 0;
  font-size: 13px;
  color: var(--text-1);
}

/* ---------- 比赛盒 ---------- */

.trace-matchbox {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg-2);
  border-left: 2px solid var(--accent);
}

.trace-matchbox__head {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-1);
}

/* ---------- 溯源表格 ---------- */

.trace-table {
  font-size: 12px;
}

.trace-table th {
  white-space: nowrap;
}

.trace-table td {
  padding: var(--sp-2) var(--sp-3);
}

.trace-mono {
  font-family: var(--font-mono);
  color: var(--text-2);
  white-space: nowrap;
}

.trace-dim {
  color: var(--text-2);
}

/* 赛事名中英对照：中文主行 + 英文原名小字 */
.event-name-cn {
  display: block;
  color: var(--text-1);
}

.event-name-en {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--text-2);
  word-break: break-word;
}

.trace-up {
  color: var(--accent) !important;
}

.trace-down {
  color: #ff8a5c !important;
}

.trace-event {
  max-width: 300px;
}

.trace-event span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-1);
}

.trace-src {
  display: inline-block;
  margin-top: 2px;
  padding: 0 5px;
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-2);
  border: 1px solid var(--line);
}

.trace-src--manual {
  color: #ffc65c;
  border-color: rgba(255, 180, 40, 0.4);
}

.trace-pick {
  display: inline-block;
  padding: 1px 8px;
  font-size: 11px;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid rgba(0, 224, 198, 0.35);
}

.trace-row--selected {
  background: rgba(0, 224, 198, 0.06);
}

.trace-row--dim {
  opacity: 0.55;
}

.trace-source-link {
  color: inherit;
  text-decoration: none;
}

.trace-source-link:hover {
  text-decoration: underline;
}

.trace-total-row td {
  padding-top: var(--sp-3);
  font-weight: 700;
  color: var(--text-0);
  background: var(--bg-2);
  border-top: 1px solid var(--line-strong);
}

/* ---------- 历史地位求和 ---------- */

.trace-sum {
  display: grid;
  gap: var(--sp-2);
  max-width: 360px;
  margin-left: auto;
}

.trace-sum > div {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-2) 0;
  font-size: 13px;
  color: var(--text-1);
  border-bottom: 1px solid var(--line);
}

.trace-sum b {
  font-family: var(--font-mono);
  color: var(--text-0);
}

.trace-sum__total {
  border-bottom: none !important;
  padding-top: var(--sp-3) !important;
}

.trace-sum__total span {
  color: var(--text-0);
  font-weight: 700;
}

.trace-sum__total b {
  font-size: 1.15rem;
  color: var(--brand-hot);
}

/* ---------- 数据流水线 ---------- */

.trace-pipeline {
  display: grid;
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.trace-pipeline > li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}

.trace-pipeline > li:first-child {
  padding-top: 0;
  border-top: none;
}

.trace-pipeline__no {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.2rem;
  color: var(--brand);
}

.trace-pipeline h3 {
  margin: 0 0 var(--sp-2);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-0);
}

.trace-pipeline p {
  margin: 0 0 var(--sp-2);
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-1);
}

.trace-pipeline .trace-formula {
  margin-top: var(--sp-2);
}

.trace-tables {
  font-size: 12px;
  color: var(--text-2);
}

/* ---------- 实力榜里的可点击数值 ---------- */

.trace-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.18);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.trace-link:hover {
  color: var(--brand-hot);
  border-bottom-color: var(--brand-hot);
}

.trace-hint {
  margin-top: calc(var(--sp-2) * -1);
}

/* 覆盖提示框后面紧跟的脚注：负边距会压到提示框上，单独拉开 */
.strength-flag + .trace-hint {
  margin-top: var(--sp-3);
}

/* ---------- 响应式 ---------- */

@media (max-width: 760px) {
  .trace-hero {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--sp-6);
  }

  .trace-hero__figure {
    align-items: flex-start;
    text-align: left;
  }

  .trace-switch__label {
    flex-basis: 100%;
  }

  .trace-card {
    padding: var(--sp-5);
  }

  .trace-formula__line {
    white-space: normal;
  }

  .trace-event {
    max-width: 200px;
  }
}

/* ============================================================
   九、纪录墙（2026-10-27）
   ============================================================ */

/* 记录墙筛选：一级分类 + 模板分组（2026-10-31 改版） */
#recordCategories.tabs {
  gap: 10px;
  margin-bottom: 14px;
}

#recordCategories .tab {
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

#recordCategories .tab:hover {
  background: rgba(255, 255, 255, 0.07);
  transform: translateY(-1px);
}

#recordCategories .tab.is-active {
  border-color: transparent;
  background: linear-gradient(120deg, var(--brand), #ff8a4d);
  box-shadow: 0 8px 20px rgba(255, 92, 26, 0.28);
}

#recordTabs.tabs {
  display: block;
  margin-bottom: 20px;
}

#recordTabs .tab {
  padding: 9px 16px;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: 10px;
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.035);
}

#recordTabs .tab:hover {
  color: var(--text-0);
  border-color: rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}

#recordTabs .tab.is-active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(120deg, var(--brand), #ff8a4d);
  box-shadow: 0 6px 16px rgba(255, 92, 26, 0.3);
}

.record-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-4);
  margin: var(--sp-3) 0 var(--sp-5);
  font-size: 13px;
  color: var(--text-1);
}

.record-meta b {
  color: var(--text-0);
  font-weight: 700;
}

.record-meta span:last-child {
  color: var(--text-2);
}

.record-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.record-card {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: var(--sp-4);
  padding: 22px;
  overflow: hidden;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012) 62%),
    var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
  transition:
    border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

/* 单人里程碑卡片：没有名次列，单列铺满 */
.record-card--plain {
  display: block;
}

.record-card::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: transparent;
  transition: background var(--dur) var(--ease);
}

.record-card:hover {
  border-color: rgba(255, 255, 255, 0.26);
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.38);
}

.record-card:hover::before {
  background: var(--brand);
}

.record-card.is-top {
  background:
    linear-gradient(135deg, rgba(255, 92, 26, 0.18), rgba(53, 224, 207, 0.06) 62%),
    var(--bg-1);
  border-color: rgba(255, 92, 26, 0.4);
  box-shadow: 0 14px 38px rgba(255, 92, 26, 0.12);
}

.record-card.is-top::before {
  background: var(--brand);
}

.record-card__rank {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--text-2);
}

.record-card.is-top .record-card__rank {
  color: var(--brand);
}

.record-card__body {
  min-width: 0;
}

.record-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}

.record-card__holder {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
}

.record-card__holder a {
  color: var(--text-0);
  transition: color var(--dur) var(--ease);
}

.record-card__holder a:hover {
  color: var(--brand-hot);
}

.record-card__value {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  background: linear-gradient(90deg, #8af3e8, #35d9c6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.record-card.is-top .record-card__value {
  background: linear-gradient(90deg, #ffd2bb, #ff7a3d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.record-card__sub {
  margin: var(--sp-2) 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-1);
}

.record-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.record-card__tags span {
  padding: 2px 8px;
  font-size: 11px;
  color: var(--text-2);
  border: 1px solid var(--line);
  border-radius: 999px;
}

/* 模块标签（生涯累计 / 赛季与连胜 / 单场最佳 / 生涯首次）：品牌色描边 */
.record-card__tags span.record-card__module {
  color: var(--brand);
  border-color: rgba(53, 217, 198, 0.4);
}

.record-card__evidence {
  margin-top: var(--sp-3);
  font-size: 12px;
  color: var(--text-2);
}

.record-card__evidence summary {
  cursor: pointer;
  color: var(--text-1);
  transition: color var(--dur) var(--ease);
}

.record-card__evidence summary:hover {
  color: var(--brand-hot);
}

.record-card__evidence-text {
  margin: var(--sp-2) 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.7;
  color: var(--text-2);
  word-break: break-word;
}

.record-note {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-2);
}

@media (max-width: 900px) {
  .record-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .record-card {
    grid-template-columns: 44px minmax(0, 1fr);
    padding: var(--sp-4);
  }

  .record-card__rank {
    font-size: 1.8rem;
  }

  .record-card__head {
    flex-direction: column;
    gap: var(--sp-1);
  }

  .record-card__value {
    font-size: 1.5rem;
  }
}

/* ============================================================
   十、记录级数据溯源（2026-10-27）
   ============================================================ */

.record-card__trace-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--sp-3);
  padding-bottom: 1px;
  font-size: 12px;
  color: var(--brand-hot);
  border-bottom: 1px dashed rgba(255, 92, 26, 0.35);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.record-card__trace-link:hover {
  color: var(--brand);
  border-color: var(--brand);
}

.trace-page .page-head {
  margin-bottom: 0;
}

.trace-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

.record-trace-summary {
  border-left: 2px solid var(--brand);
}

.record-trace-summary__line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.record-trace-summary__label {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-2);
}

.record-trace-summary__value {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 900;
  line-height: 1;
  color: var(--brand-hot);
}

.record-trace-summary__meta {
  font-size: 13px;
  color: var(--text-1);
}

.record-trace-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-2);
}

.record-trace-honors {
  display: grid;
  gap: var(--sp-3);
}

.record-trace-honor {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

.record-trace-honor__year {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1;
  color: var(--text-2);
}

.record-trace-honor__body {
  min-width: 0;
}

.record-trace-honor__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.record-trace-honor__event {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-0);
}

.record-trace-honor__match {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-2);
  font-size: 13px;
  color: var(--text-1);
}

.record-trace-honor__games {
  margin: var(--sp-2) 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
}

@media (max-width: 600px) {
  .record-trace-honor {
    grid-template-columns: 48px minmax(0, 1fr);
    padding: var(--sp-3);
  }

  .record-trace-honor__year {
    font-size: 1.3rem;
  }

  .trace-actions {
    gap: var(--sp-2);
  }
}

/* ============================================================
   个人里程碑（2026-10-28）
   ------------------------------------------------------------
   1. 纪录墙：里程碑指标筛选条
   2. 球员页：高亮卡 + 全部里程碑列表
   ============================================================ */

.record-milestone-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin: 0 0 var(--sp-4);
}

.record-milestone-bar[hidden] {
  display: none;
}

/* 个人里程碑：模块导航（2026-10-29） */
.record-milestone-nav {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-4);
}

.record-milestone-nav[hidden] {
  display: none;
}

.record-module-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.record-module-tab {
  padding: 9px 20px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-1);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.record-module-tab:hover {
  color: var(--text-0);
  border-color: var(--text-1);
  background: rgba(255, 255, 255, 0.05);
}

.record-module-tab.is-active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(120deg, var(--brand), #ff8a4d);
  box-shadow: 0 6px 18px rgba(255, 92, 26, 0.28);
}

/* 个人里程碑工具栏：搜索框居中、口径徽标靠右（2026-10-31 反馈） */
.record-milestone-tools {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: 6px 0;
}

.record-milestone-highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
  margin: 0 0 var(--sp-4);
}

.record-milestone-highlights[hidden] {
  display: none;
}

.milestone-highlight {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.01) 60%),
    var(--bg-1);
  color: var(--text-0);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.milestone-highlight:hover {
  border-color: rgba(255, 92, 26, 0.55);
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.3);
}

.milestone-highlight__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--text-2);
}

.milestone-highlight__value {
  font-size: 26px;
  line-height: 1.1;
  color: var(--brand-hot);
}

.milestone-highlight__player {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-0);
  text-decoration: none;
}

.milestone-highlight__sub {
  font-size: 11px;
  color: var(--text-2);
}

/* 个人里程碑指标：按主题分组 + 更大的胶囊按钮（2026-10-31 反馈） */
.record-milestone-chips {
  display: block;
  margin: 0 0 var(--sp-4);
}

.record-milestone-chips[hidden] {
  display: none;
}

.record-chip-group,
.record-tab-group {
  margin-bottom: 13px;
}

.record-chip-group:last-child,
.record-tab-group:last-child {
  margin-bottom: 0;
}

.record-chip-group__label,
.record-tab-group__label {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-2);
}

.record-chip-row,
.record-tab-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.record-metric-chip {
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--text-1);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition:
    color 0.15s,
    border-color 0.15s,
    background 0.15s,
    transform 0.15s,
    box-shadow 0.15s;
}

.record-metric-chip:hover {
  color: var(--text-0);
  border-color: rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}

.record-metric-chip.is-active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(120deg, var(--brand), #ff8a4d);
  box-shadow: 0 6px 16px rgba(255, 92, 26, 0.3);
}

.record-milestone-bar label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--text-2);
}

.record-milestone-bar select {
  min-width: 220px;
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: var(--bg-1);
  color: var(--text-0);
  font: inherit;
  font-size: 13px;
}

/* 里程碑口径徽标：2018 年起算 */
.record-scope-note {
  position: absolute;
  right: 0;
  padding: 3px 8px;
  border: 1px solid rgba(255, 92, 26, 0.45);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--brand-hot);
  cursor: help;
}

@media (max-width: 900px) {
  .record-milestone-highlights {
    grid-template-columns: 1fr;
  }
  .record-milestone-tools {
    align-items: center;
    flex-direction: column;
  }
  .record-milestone-tools .record-scope-note {
    position: static;
  }
}

/* 里程碑 tab：按球员搜索 */
.record-milestone-bar__divider {
  width: 1px;
  height: 20px;
  background: var(--line-strong);
}

.record-player-search {
  position: relative;
  width: min(560px, 100%);
}

.record-player-search input {
  width: 100%;
  height: 46px;
  padding: 0 18px 0 44px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%236f7c96' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M12.5 12.5 17 17'/%3E%3C/svg%3E")
      16px center / 18px no-repeat,
    var(--bg-2);
  color: var(--text-0);
  font: inherit;
  font-size: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.record-player-search input::placeholder {
  color: var(--text-2);
}

.record-player-search input:focus {
  outline: none;
  border-color: var(--brand);
  background-color: var(--bg-3);
  box-shadow:
    0 0 0 3px rgba(255, 92, 26, 0.18),
    0 12px 30px rgba(0, 0, 0, 0.3);
}

.record-player-suggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 300px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--bg-1);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  z-index: 30;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.record-player-suggest__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  background: none;
  color: var(--text-0);
  text-align: left;
  cursor: pointer;
}

.record-player-suggest__item:hover {
  background: var(--bg-2);
}

.record-player-suggest__name {
  font-size: 13px;
  font-weight: 700;
}

.record-player-suggest__sub {
  font-size: 11px;
  color: var(--text-2);
}

.record-player-suggest__empty {
  margin: 0;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text-2);
}

.record-back-link {
  color: var(--brand-hot);
  text-decoration: none;
  border-bottom: 1px dashed rgba(255, 92, 26, 0.35);
}

.record-back-link:hover {
  color: var(--brand);
  border-color: var(--brand);
}

/* 球员页个人里程碑：分类 tab + 卡片网格（2026-10-31 改版，与纪录墙同视觉） */
.mile-module-tabs {
  margin-bottom: var(--sp-5);
  flex-wrap: wrap;
}

.mile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: var(--sp-4);
}

/* 逐局指标沿用 .metrics 的三列节奏 */
.mile-grid--rally {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mile-tile {
  display: block;
  padding: 18px 20px;
}

.mile-tile__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
}

.mile-tile__title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-1);
}

.mile-tile__module {
  flex: none;
  padding: 2px 8px;
  font-size: 11px;
  color: var(--text-2);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
}

.mile-tile__value {
  margin-top: var(--sp-3);
  font-size: 1.9rem;
  line-height: 1.15;
  color: var(--text-0);
}

.mile-tile__sub {
  margin-top: var(--sp-2);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-1);
}

.mile-tile__meta {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-2);
}

.mile-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
}

.mile-card {
  padding: var(--sp-6);
  background: var(--bg-1);
  transition: background var(--dur) var(--ease);
}

.mile-card:hover {
  background: var(--bg-2);
}

.mile-card__title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--text-2);
}

.mile-card__value {
  margin-top: var(--sp-4);
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  line-height: 1;
  color: var(--text-0);
}

.mile-card__unit {
  margin-left: 4px;
  font-size: 13px;
  color: var(--text-1);
}

.mile-card__meta {
  margin-top: var(--sp-3);
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-2);
}

.mile-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--sp-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mile-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.mile-item__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: var(--text-1);
}

.mile-item__value {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-0);
  white-space: nowrap;
}

.mile-item__meta {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--text-2);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .mile-strip {
    grid-template-columns: 1fr;
  }

  .mile-list {
    grid-template-columns: 1fr;
  }
}

/* 实力榜 v2：当前实力基础切换（2026-10-31） */
.lab-head--model { flex-direction: column; align-items: flex-start; gap: 8px; }
.strength-model-note { margin: 0; color: #9aa4b2; font-size: 13px; line-height: 1.7; }

/* ============================================================
   赛事站点筛选（2026-11-01）
   ============================================================ */
.record-live-series {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0;
  padding: 10px 14px;
  border: 1px solid rgba(255, 92, 26, 0.35);
  border-radius: 12px;
  background: rgba(255, 92, 26, 0.08);
  color: var(--text-1);
  font-size: 13px;
}

.record-live-series__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px rgba(255, 92, 26, 0.15);
}

.record-live-series__link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}

.record-live-series__link:first-of-type {
  margin-left: auto;
}

.record-series-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 10px;
  scrollbar-width: thin;
}

.record-series-chip {
  flex: 0 0 auto;
  display: grid;
  gap: 2px;
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: transparent;
  color: var(--text-1);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.record-series-chip:hover,
.record-series-chip:focus-visible {
  border-color: var(--brand);
  color: var(--text-0);
}

.record-series-chip.is-active {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--text-0);
}

.record-series-chip__name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.record-series-chip__live {
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

.record-series-chip__meta {
  font-size: 11px;
  color: var(--text-2);
  white-space: nowrap;
}

.record-card__series {
  border-color: rgba(255, 92, 26, 0.4) !important;
  color: var(--brand);
}

/* hidden 属性必须显式生效（与 tab 面板同一个坑） */
.record-live-series[hidden],
.record-series-bar[hidden] {
  display: none !important;
}