/* 列表屏共用件:页头、竞赛 tab、chip、统计块、通用表格、空态、免责声明。
 * 01 Matches / 02 Predict / 04 You vs the model / 05 Model record / 06 Profile 都吃这一份。
 *
 * 拆在这里而不是各屏各写一遍:这些组件在五屏里的尺寸完全一致,复制五份必然漂移
 * (设计交付里最容易被做坏的就是这类"看起来一样"的东西)。 */

/* ===== 页头 ===== */
.pagehead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}
.pagehead__col {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.pagehead__title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.pagehead__sub {
  margin: 0;
  font-size: 11px;
  color: var(--muted2);
}
.pagehead__aside {
  font-size: 10px;
  color: var(--muted2);
}

/* ===== 竞赛 tab =====
 * 与 header 的主导航是两个层级:主导航切"屏",这排切"看哪个赛事"。
 * 所以它用下划线而不是背景块 —— 视觉重量必须比主导航轻一档。 */
.ctabs {
  display: flex;
  gap: 22px;
  align-items: stretch;
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
  overflow-x: auto;
  scrollbar-width: none;
}
.ctabs::-webkit-scrollbar {
  display: none;
}
.ctab {
  background: none;
  border: none;
  padding: 9px 2px 10px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--muted);
  transition: color 0.14s;
}
.ctab:hover {
  color: var(--text);
}
.ctab.is-active {
  color: var(--text);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--lime);
}

/* ===== chip(排序 / 分区切换)===== */
.chip {
  white-space: nowrap;
  padding: 6px 11px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 500;
  transition: all 0.14s;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
}
.chip:hover {
  border-color: var(--lime-dim);
}
.chip.is-active {
  border-color: var(--lime-dim);
  background: var(--lime-bg);
  color: var(--lime);
}
.chips {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

/* ===== 区块小标题行 ===== */
.blockhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}
.blockhead__aside {
  font-size: 9.5px;
  color: var(--muted2);
}

/* ===== 通用外框 =====
 * overflow:hidden 让内部行的 border-bottom 被圆角裁掉,不会在四角戳出直线。 */
.frame {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.frame__scroll {
  max-height: 718px;
  overflow-y: auto;
}
.frame__head {
  display: grid;
  gap: 8px;
  padding: 10px 13px;
  background: var(--card2);
  border-bottom: 1px solid var(--border);
}
.frame__th {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted2);
}
.frame__th--r {
  text-align: right;
}

/* ===== 统计块(N 等分,1px 缝)=====
 * 缝同样用背景色而不是 border —— 见 chrome.css .shell 的说明,理由一样。 */
.tiles {
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.tiles--3 {
  grid-template-columns: repeat(3, 1fr);
}
.tiles--4 {
  grid-template-columns: repeat(4, 1fr);
}
.tile {
  background: var(--card);
  padding: 17px 18px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.tile--compact {
  padding: 12px 11px;
  gap: 5px;
}
.tile__label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted2);
}
.tile--compact .tile__label {
  font-size: 8.5px;
}
.tile__value {
  font-size: 24px;
  font-weight: 600;
}
.tile--compact .tile__value {
  font-size: 17px;
}
.tile__sub {
  font-size: 10px;
  color: var(--muted2);
}
.tile--compact .tile__sub {
  font-size: 9px;
}

/* 数值语义色。tone 由数据方向决定,不由设计者心情决定 —— 见各视图的 tone 计算。 */
.v-lime {
  color: var(--lime);
}
.v-red {
  color: var(--red);
}
.v-amber {
  color: var(--amber);
}
.v-blue {
  color: var(--blue);
}
.v-text {
  color: var(--text);
}

/* ===== 空态 =====
 * 虚线 = "这里本该有东西但还没有";实线框会读成"这是一张空卡片"。 */
.empty {
  margin: 10px 0 0;
  padding: 16px 14px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted2);
}

/* ===== 底部免责 =====
 * 每一屏都要有。这不是法务话术填充 —— 产品的核心主张就是"这不是博彩",
 * 少一屏没有,那一屏就在暗示相反的事。 */
.disclaimer {
  margin: 0;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--muted2);
  border-top: 1px solid var(--border-soft);
  padding-top: 14px;
}

/* ===== 侧栏里的注单卡(02 / 04 共用)===== */
.slipcard {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  padding: 12px 13px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.slipcard__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.slipcard__fixture {
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.slipcard__time {
  font-size: 11px;
  color: var(--muted2);
}
.slipcard__mid {
  display: flex;
  align-items: center;
  gap: 10px;
}
.slipcard__pick {
  font-size: 11px;
  color: var(--lime);
}
.slipcard__meta {
  font-size: 11px;
  color: var(--muted);
}
.stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

/* ===== 结果小药丸(won / lost / void)===== */
.pill {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 3px;
  text-transform: uppercase;
  justify-self: start;
}
.pill--won {
  color: var(--lime);
  background: var(--lime-bg);
}
.pill--lost {
  color: var(--red);
  background: var(--red-bg);
}
.pill--void {
  color: var(--muted);
  background: var(--chip-bg);
}
.pill--open {
  color: var(--amber);
  background: var(--amber-bg);
}