/* ============================================================================
   pages/parlay.css · 串关页（今日方案卡 / 连中走势 / 历史期数 / 玩法说明）
   依赖：tokens + base + components（designer 共享层）
   基线：_tmp/ui-v3/design/css/pages/parlay.css（F 设计稿 1:1），追加：
         · 结构化分腿的分组分隔与「可串/可单」标签
         · Markdown 回退正文排版（plan-text）
         · 未发布/需登录态的按钮区
         · 历史期数「今日待定」行、页脚免责
   ========================================================================== */

/* ------------------------------ 今日方案卡 ------------------------------ */
.plan-head { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); }
.plan-head .eyebrow { flex: 1; }
/* 「口径 ⓘ」在小屏里不能被标题挤成两行（designer 组件未设 nowrap） */
.parlay-page .card-head .card-link { flex: none; white-space: nowrap; }
.plan-title { font-size: var(--fs-20); font-weight: var(--fw-bold); letter-spacing: .01em; line-height: var(--lh-2); }
.plan-sub { margin-top: 3px; font-size: var(--fs-11); color: var(--txt-2); line-height: var(--lh-3); }
.plan-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-3); }
.plan-meta .badge { height: 22px; }

.legs { display: flex; flex-direction: column; margin-top: var(--s-3); border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line-1); }
.leg-row {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: var(--bg-inset);
  border-bottom: 1px solid var(--line-1);
}
.leg-row:last-child { border-bottom: 0; }
.leg-no {
  width: 18px; height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: var(--fw-semibold);
  color: var(--brand-text);
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  font-variant-numeric: tabular-nums;
}
.leg-main { min-width: 0; }
.leg-teams {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  color: var(--txt-0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 队名自己负责省略号（徽章占位后不能让 flex 容器整体硬裁） */
.leg-teams .leg-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leg-tag {
  flex: none;
  height: 17px;
  padding: 0 6px;
  border-radius: var(--r-full);
  font-size: 9px;
  line-height: 17px;
  color: var(--aurora-teal);
  background: var(--aurora-teal-soft);
  border: 1px solid var(--aurora-teal-line);
}
.leg-sub { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 10px; color: var(--txt-2); }
.leg-sub .num { color: var(--txt-2); }
.leg-odds { text-align: right; flex: none; }
.leg-odds b { display: block; font-size: var(--fs-15); font-weight: var(--fw-semibold); letter-spacing: -.01em; }
.leg-odds b.dim { color: var(--txt-3); font-weight: var(--fw-regular); }
.leg-odds span { display: block; font-size: 9px; color: var(--txt-3); margin-top: 1px; }
.leg-group-sep { height: 1px; margin: 0 12px; background: var(--line-2); }
/* 用户没写赔率时（真实手工内容常见）不多留一列空「—」 */
.legs--plain .leg-row { grid-template-columns: 18px 1fr; }

/* 回退：Markdown / 自由文本正文 */
.plan-text { margin-top: var(--s-3); }
.plan-text.md-body { font-size: var(--fs-13); line-height: var(--lh-4); }
.plan-text.md-body p { margin: .5em 0; }

.plan-sum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin-top: var(--s-3);
  padding: 12px var(--s-3);
  border-radius: var(--r-md);
  background: linear-gradient(100deg, var(--brand-soft), transparent 82%);
  border: 1px solid var(--brand-line);
}
.plan-sum .ps-k { font-size: 10px; color: var(--txt-2); letter-spacing: .04em; }
.plan-sum .ps-v { display: flex; align-items: baseline; gap: 5px; margin-top: 2px; }
.plan-sum .ps-v b { font-size: var(--fs-26); font-weight: var(--fw-bold); color: var(--brand-text); line-height: 1; letter-spacing: -.02em; }
.plan-sum .ps-v b.ps-na { font-size: var(--fs-13); color: var(--txt-2); font-weight: var(--fw-medium); letter-spacing: 0; }
.plan-sum .ps-v span { font-size: var(--fs-11); color: var(--txt-2); }
.plan-sum .ps-model { text-align: right; font-size: 10px; color: var(--txt-2); }
.plan-sum .ps-model b { display: block; margin-top: 2px; font-size: var(--fs-12); color: var(--txt-1); font-weight: var(--fw-medium); }

.plan-actions { display: flex; gap: var(--s-2); margin-top: var(--s-3); }
.plan-actions .btn { flex: 1; }
.plan-note { display: flex; gap: 6px; margin-top: var(--s-3); font-size: 10px; line-height: var(--lh-3); color: var(--txt-3); }
.plan-note svg { width: 12px; height: 12px; flex: none; margin-top: 1px; }

/* 未发布 / 需登录态 */
.plan-empty { padding: var(--s-6) var(--s-4); text-align: center; }
.plan-empty .pe-ico {
  width: 54px; height: 54px;
  margin: 0 auto var(--s-3);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--aurora-teal);
  background: var(--aurora-teal-soft);
  border: 1px solid var(--aurora-teal-line);
}
.plan-empty .pe-ico svg { width: 24px; height: 24px; }
.plan-empty h3 { font-size: var(--fs-17); font-weight: var(--fw-semibold); }
.plan-empty p { margin-top: 6px; font-size: var(--fs-12); line-height: var(--lh-4); color: var(--txt-2); }
.plan-empty .plan-actions { justify-content: center; }
.plan-empty .plan-actions .btn { flex: 0 1 auto; min-width: 132px; }

/* ------------------------------ 连中走势 ------------------------------ */
.streak-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.streak-big { display: flex; align-items: baseline; gap: 5px; }
.streak-big b { font-size: var(--fs-34); font-weight: var(--fw-bold); letter-spacing: -.02em; line-height: 1; }
.streak-big span { font-size: var(--fs-12); color: var(--txt-2); }
.streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--r-full);
  font-size: var(--fs-11);
  color: var(--brand-text);
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
}
.streak-badge svg { width: 13px; height: 13px; }
.trend-bars { display: flex; align-items: flex-end; gap: 5px; height: 46px; margin-top: var(--s-3); }
.trend-bars > i {
  flex: 1;
  border-radius: 3px 3px 1px 1px;
  background: linear-gradient(180deg, var(--aurora-teal), var(--aurora-teal-soft));
  opacity: .85;
  min-height: 4px;
  transition: height var(--dur-4) var(--ease-out);
}
.trend-bars > i.miss { background: linear-gradient(180deg, var(--danger), var(--danger-soft)); opacity: .55; }
.trend-labels { display: flex; gap: 5px; margin-top: 5px; }
.trend-labels span { flex: 1; text-align: center; font-size: 9px; color: var(--txt-3); font-variant-numeric: tabular-nums; }
.streak-foot { display: flex; gap: var(--s-4); margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line-1); }
.streak-foot .sf { min-width: 0; flex: 1; }
.streak-foot b { display: block; font-size: var(--fs-15); font-weight: var(--fw-semibold); }
.streak-foot b.teal { color: var(--aurora-teal); }
.streak-foot b.gold { color: var(--brand-text); }
.streak-foot span { display: block; margin-top: 3px; font-size: 10px; color: var(--txt-2); }

/* ------------------------------ 历史期数 ------------------------------ */
.hist-list-plain { display: flex; flex-direction: column; }
.hist-period {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-1);
}
.hist-period:last-child { border-bottom: 0; }
.hp-no { font-size: 10px; color: var(--txt-2); }
.hp-no b { display: block; font-size: var(--fs-13); color: var(--txt-0); font-weight: var(--fw-semibold); }
.hp-main { min-width: 0; }
.hp-teams { font-size: var(--fs-12); color: var(--txt-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-odds { margin-top: 2px; font-size: 10px; color: var(--txt-2); }
.hp-trail { flex: none; }
.hist-period--pending .hp-teams { color: var(--brand-text); }

/* ------------------------------ 玩法说明 ------------------------------ */
.rules { display: flex; flex-direction: column; gap: 10px; }
.rule { display: flex; gap: 10px; }
.rule-n {
  width: 20px; height: 20px;
  flex: none;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: var(--fw-semibold);
  color: var(--aurora-teal);
  background: var(--aurora-teal-soft);
  border: 1px solid var(--aurora-teal-line);
}
.rule p { font-size: var(--fs-12); line-height: var(--lh-4); color: var(--txt-1); }
.rule p b { color: var(--txt-0); font-weight: var(--fw-semibold); }

/* ------------------------------ 页脚免责 ------------------------------ */
.parlay-disclaimer {
  display: flex;
  gap: 6px;
  padding: var(--s-2) 4px var(--s-1);
  font-size: 10px;
  line-height: var(--lh-3);
  color: var(--txt-3);
}
.parlay-disclaimer svg { width: 12px; height: 12px; flex: none; margin-top: 1px; }

/* ------------------------------ 骨架 ------------------------------ */
.parlay-skeleton .sk-card { margin-bottom: 10px; }

/* ------------------------------ 亮色微调 ------------------------------ */
:root[data-theme="light"] .legs { background: var(--bg-1); }
:root[data-theme="light"] .leg-row { background: var(--bg-1); }

/* ============================================================================
   2026-11-12 · 主推 / 可串 角色分栏（只有主推腿计入命中）
   ----------------------------------------------------------------------------
   口径（与 vps/patches/parlay-auto.js 一致）：
     主推 = 无（可串）标记且位于分隔线之前 → 金（--brand-grad / --brand-text）
     可串/备选 = 带（可串/可单/单关）标记或分隔线之后 → 青（--aurora-teal）
   约束：390 / 320 均不横溢；暗/亮双主题；数字 tabular-nums；全部走 tokens。
   ========================================================================== */

/* ---- 方案卡内的醒目介绍（复用 .notice 基础样式，只收紧尺寸） ---- */
.parlay-page .plan-role-note {
  margin-top: var(--s-3);
  padding: 9px 10px;
  gap: 6px;
  font-size: 11px;
  line-height: var(--lh-3);
  color: var(--txt-1);
}
.parlay-page .plan-role-note svg { width: 14px; height: 14px; margin-top: 1px; }
.parlay-page .plan-role-note b { color: var(--txt-0); font-weight: var(--fw-semibold); }
.parlay-page .plan-role-warn { margin-top: var(--s-3); padding: 9px 10px; font-size: 11px; line-height: var(--lh-3); gap: 6px; }
.parlay-page .plan-role-warn svg { width: 14px; height: 14px; margin-top: 1px; }

/* ---- 腿分组：组头 / 组脚 ---- */
.legs + .legs { margin-top: var(--s-2); }
.legs-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: var(--bg-inset);
  border-bottom: 1px solid var(--line-1);
}
.legs-head-t { font-size: var(--fs-11); font-weight: var(--fw-semibold); letter-spacing: .02em; line-height: 1.3; }
.legs-head-s { font-size: 10px; color: var(--txt-2); font-variant-numeric: tabular-nums; }
.legs-head--main { background: linear-gradient(100deg, var(--brand-soft), transparent 78%); }
.legs-head--main .legs-head-t { color: var(--brand-text); }
.legs-head--alt { background: linear-gradient(100deg, var(--aurora-teal-soft), transparent 78%); }
.legs-head--alt .legs-head-t { color: var(--aurora-teal); }
.legs-foot {
  padding: 6px 12px;
  font-size: 10px;
  line-height: var(--lh-3);
  color: var(--txt-3);
  background: var(--bg-inset);
}
.legs-foot--alt { color: var(--txt-2); }
.legs-foot--alt b { color: var(--aurora-teal); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }

/* ---- 单腿角色徽章（金=主推 / 青=可串） ---- */
.leg-badge {
  flex: none;
  height: 17px;
  padding: 0 6px;
  border-radius: var(--r-full);
  font-size: 9px;
  font-weight: var(--fw-semibold);
  line-height: 15px;
  letter-spacing: .02em;
  white-space: nowrap;
}
.leg-badge--main { color: var(--brand-ink); background: var(--brand-grad); border: 1px solid transparent; }
.leg-badge--alt { color: var(--aurora-teal); background: var(--aurora-teal-soft); border: 1px solid var(--aurora-teal-line); }

/* ---- 可串行：降一档亮度 + 青色序号，扫一眼就能和主推分开 ---- */
.leg-row--alt { background: var(--surface-1); }
.leg-row--alt .leg-teams { color: var(--txt-1); }
.leg-no--alt { color: var(--aurora-teal); background: var(--aurora-teal-soft); border-color: var(--aurora-teal-line); }
:root[data-theme="light"] .leg-row--alt { background: var(--surface-1); }

/* ---- 命中率旁的口径说明（连中走势卡底部） ---- */
.streak-hint {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin-top: var(--s-2);
  font-size: 10px;
  line-height: var(--lh-3);
  color: var(--txt-3);
}
.streak-hint svg { width: 12px; height: 12px; flex: none; margin-top: 1px; }

/* ---- 320 窄屏：组头说明折行不撑破 ---- */
@media (max-width: 359px) {
  .legs-head { flex-wrap: wrap; row-gap: 2px; }
  .legs-head-s { flex-basis: 100%; }
  .parlay-page .plan-role-note { padding: 8px; }
}