/* 全站骨架:header + 主/侧栏分栏。数值出自 README《Global chrome》,与 Quvix Flow.dc.html
 * 的 <header> 内联样式逐条核对过。
 *
 * 🔴 分栏的 1px 缝是**背景色**不是 border:.shell 用 gap:1px + background:var(--border),
 *    两个子栏各自铺 var(--bg) 盖住底色,露出的那一列就是发丝线。改成 border-left 会在
 *    主栏内容比侧栏短时把线画断 —— 这是设计要的"接缝",必须通栏。
 *
 * 🔴 min-width:1180px 是桌面专供,设计交付明确只覆盖 desktop web。窄于此宽度整页横向滚动,
 *    不做响应式塌缩 —— 强行塌缩会毁掉八轴雷达与球场的比例。 */

.app {
  min-height: 100vh;
  min-width: 1180px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

/* ===== HEADER ===== */
.hdr {
  position: sticky;
  top: 0;
  z-index: 40;
  height: 56px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 20px;
  background: var(--header-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

/* logo:2d "Offset" —— 45° 轴上两枚不等长胶囊,错开滑动。缝隙就是模型价与市场价之间那道边。
 * 比例锁死(README《Logo》):胶囊宽 ≈ 标记的 36%,缝 ≈ 13%,短胶囊 ≈ 长的 73%,错位 ≈ ±10%。
 * 永远不描边、不加阴影、不拉伸缝隙。 */
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}
.logo__mark {
  width: 22px;
  height: 22px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 3px;
  transform: rotate(45deg);
}
.logo__bar {
  width: 8px;
  border-radius: 4px;
}
.logo__bar--long {
  height: 22px;
  background: var(--lime);
  transform: translateY(-2.2px);
}
.logo__bar--short {
  height: 16px;
  background: var(--text);
  transform: translateY(2.2px);
}
.logo__word {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.nav {
  display: flex;
  gap: 2px;
}
.nav__btn {
  background: none;
  border: none;
  padding: 8px 11px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  transition: color 0.14s;
}
.nav__btn:hover {
  color: var(--text);
}
.nav__btn.is-active {
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--lime);
}

.hdr__spacer {
  flex: 1;
}

/* 每日额度表 —— 额度是这个产品的记分方式,不是余额,所以常驻 header。 */
.pool {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 12px 6px 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.pool__col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pool__row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.pool__left {
  font-size: 12px;
  font-weight: 600;
  color: var(--lime);
}
.pool__total {
  font-size: 11px;
  color: var(--muted2);
}
.pool__track {
  width: 132px;
  height: 3px;
  background: var(--card3);
  border-radius: 2px;
  overflow: hidden;
}
.pool__fill {
  height: 100%;
  background: var(--lime);
  border-radius: 2px;
  transition: width 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.pool__div {
  width: 1px;
  height: 26px;
  background: var(--border);
}
.pool__reset {
  font-size: 10px;
  color: var(--muted2);
  line-height: 1.4;
}

/* 右上角三个控件:投注篮 / 主题 / 账号 */
.hdr__btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 10.5px;
  color: var(--muted);
  transition: all 0.14s;
}
.hdr__btn:hover {
  border-color: var(--lime-dim);
  color: var(--text);
}

.cart {
  position: relative;
}
.cart__btn {
  gap: 7px;
  padding: 6px 11px;
}
/* 篮里有未提交的单时整颗按钮转 lime —— "还没提交"必须一眼看得见,否则用户会以为已经下注了。 */
.cart__btn.is-filled {
  background: var(--lime-bg);
  border-color: var(--lime-dim);
  color: var(--lime);
}
.cart__count {
  font-size: 10.5px;
  font-weight: 600;
  min-width: 14px;
  padding: 1px 5px;
  border-radius: 9px;
  background: var(--lime);
  color: var(--bg);
}

.avatar-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 3px 6px 3px 3px;
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.14s;
}
.avatar-btn:hover {
  background: var(--hair);
}
.avatar-btn.is-active {
  background: var(--lime-bg);
}
/* 头像底色由用户名 hash 出色相,同一个人每次进来颜色一致。用 oklch 而不是 hsl:
 * 同一亮度下不同色相的观感亮度才一致,白字压上去对比度不会忽高忽低。 */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  background: oklch(0.47 0.11 var(--avatar-hue));
  border: 1px solid oklch(0.58 0.13 var(--avatar-hue));
  overflow: hidden;         /* 自定义头像 img 圆形裁切靠这里 */
}
/* 自定义上传的头像(2026-08-10):img 填满圆,加载失败时 alt 空串不显示碎图标,
 * 底下的字母底色仍在 —— 图挂了自动退回字母头像的观感。 */
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.avatar-btn__name {
  font-size: 12px;
  color: var(--text2);
}

/* ===== 主/侧栏分栏 ===== */
.shell {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 328px;
  gap: 1px;
  min-width: 1180px;
  background: var(--border);
}
.shell__main {
  background: var(--bg);
  padding: 22px 24px 40px;
  min-width: 0;
}
/* Match detail 顶部是返回链接不是标题,22px 会让返回链离 header 太远。 */
.shell__main--tight {
  padding-top: 18px;
}
.shell__rail {
  background: var(--bg);
  padding: 22px 20px 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}