* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--h5-page-inline: 16px;
--h5-section-gap: 12px;
--h5-card-inline: 12px;
--h5-card-block: 12px;
--h5-card-gap: 8px;
--h5-control-gap: 8px;
--h5-control-height: 36px;
--h5-dialog-inline: 20px;
--h5-font-body: 14px;
--h5-font-data: 14px;
--h5-font-aux: 12px;
--h5-tap-min: 24px;
--h5-tap-primary: 44px;
--h5-bottom-nav-height: 40px;
--h5-action-bar-height: 64px;
--plan-tab-size: 16px;
--plan-summary-min-height: 56px;
--plan-summary-number-size: 22px;
--plan-step-input-width: 81px;
--plan-pass-btn-max: 56px; /* 过关方式按钮的默认最长宽度 */
--myplans-head-top: 6px; /* 个人中心弹窗（.myplans-box）顶部留白 */
--home-hero-top: 12px;
--home-hero-bottom: 28px;
--home-match-list-inline: 18px;
--home-match-card-pad: 6px;
--home-odds-height: 26px;
--home-data-size: clamp(11px, calc(5vw - 4.7px), 13px);
/* 文本输入控件专用字号：iOS Safari 在 input/textarea/select 字号 < 16px 时，
聚焦瞬间会自动放大整页且不自动缩回。放开 user-scalable 后该副作用会暴露，
故所有文本录入控件固定 16px —— 这是平台硬要求，**不随宽度档位收缩**。
已知例外：.opt-mul-input（优化明细里的倍数微调框，高 18px 物理装不下 16px 字）。 */
--h5-font-input: 16px;
--h5-dialog-title-size: 24px;
--h5-dialog-body-size: 16px;
--mine-header-block: 9px;
--mine-avatar-size: 48px;
--account-row-height: 54px;
--mine-sub-head-height: 52px;
--saved-title-size: 18px;
--saved-back-size: 34px; /* 子页顶栏 ‹ 的字号；墨迹高≈字号×0.47，34px≈16px 与微信 × 相当 */
}
@media (max-width: 430px) {
:root {
--h5-page-inline: 14px;
--h5-section-gap: 10px;
--h5-card-inline: 11px;
--h5-card-block: 11px;
--h5-card-gap: 7px;
--h5-control-gap: 7px;
--h5-control-height: 35px;
--h5-dialog-inline: 18px;
--h5-font-body: 13.5px;
--h5-font-data: 13.5px;
--h5-font-aux: 11.5px;
--plan-tab-size: 15px;
--plan-summary-min-height: 54px;
--plan-summary-number-size: 21px;
--plan-step-input-width: 76px;
--home-hero-top: 10px;
--home-hero-bottom: 25px;
--home-match-list-inline: 16px;
--h5-dialog-title-size: 23px;
--h5-dialog-body-size: 15.5px;
--mine-header-block: 8px;
--mine-avatar-size: 46px;
--account-row-height: 53px;
--mine-sub-head-height: 51px;
--saved-title-size: 17px;
}
}
@media (max-width: 400px) {
:root {
--h5-page-inline: 12px;
--h5-section-gap: 9px;
--h5-card-inline: 10px;
--h5-card-block: 9px;
--h5-card-gap: 6px;
--h5-control-gap: 6px;
--h5-control-height: 34px;
--h5-dialog-inline: 16px;
--h5-font-body: 13px;
--h5-font-data: 13px;
--h5-font-aux: 11px;
--plan-tab-size: 14.5px;
--plan-summary-min-height: 52px;
--plan-summary-number-size: 20px;
--plan-step-input-width: 73px;
--home-hero-top: 8px;
--home-hero-bottom: 23px;
--home-match-list-inline: 14px;
--h5-dialog-title-size: 22px;
--h5-dialog-body-size: 15px;
--mine-header-block: 8px;
--mine-avatar-size: 44px;
--account-row-height: 52px;
--mine-sub-head-height: 50px;
}
}
@media (max-width: 360px) {
:root {
--h5-page-inline: 10px;
--h5-section-gap: 8px;
--h5-card-inline: 8px;
--h5-card-block: 8px;
--h5-card-gap: 5px;
--h5-control-gap: 5px;
--h5-control-height: 32px;
--h5-dialog-inline: 14px;
--h5-font-body: 13px;
--h5-font-data: 12px;
--h5-font-aux: 10px;
--plan-tab-size: 14px;
--plan-summary-min-height: 50px;
--plan-summary-number-size: 19px;
--plan-step-input-width: 67px;
--home-hero-top: 6px;
--home-hero-bottom: 21px;
--home-match-list-inline: 12px;
--home-odds-height: 24px;
--h5-dialog-title-size: 21px;
--h5-dialog-body-size: 14.5px;
--mine-header-block: 7px;
--mine-avatar-size: 42px;
--account-row-height: 50px;
--mine-sub-head-height: 48px;
--saved-title-size: 16px;
}
}
@media (max-width: 319px) {
:root {
--h5-page-inline: 8px;
--h5-section-gap: 7px;
--h5-card-inline: 7px;
--h5-card-block: 7px;
--h5-card-gap: 4px;
--h5-control-gap: 4px;
--h5-control-height: 30px;
--h5-dialog-inline: 12px;
--plan-tab-size: 13px;
--plan-summary-min-height: 48px;
--plan-summary-number-size: 18px;
--plan-step-input-width: 42px;
--home-hero-top: 4px;
--home-hero-bottom: 19px;
--home-match-list-inline: 10px;
--home-match-card-pad: 5px;
--home-data-size: 9.5px;
--h5-dialog-title-size: 20px;
--h5-dialog-body-size: 14px;
--mine-header-block: 6px;
--mine-avatar-size: 40px;
--account-row-height: 48px;
--mine-sub-head-height: 46px;
--saved-title-size: 15px;
}
}
html, body {
background-color: #f5f7fa;
font-family: "PingFang SC", "YaHei", sans-serif;
max-width: 480px;
margin: 0 auto;
height: 100%;
/* 禁止浏览器自动放大正文字号（Android font boosting / 多数国产浏览器的「字体大小」设置）。
本页间距与宽度全是按 12-13px 固定字号精算的（见 .data-bar / .head-right / .team-name 注释），
字号一被放大就整体错位挤压：标签压标题、数据条被裁、队名截断。微信内置浏览器默认不放大，
所以只在手机浏览器里出现。⚠️ Chrome 的无障碍字体缩放会忽略本属性，那种情况见下方 .font-boosted 兜底 */
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
.app-wrap {
display: flex;
flex-direction: column;
height: 100%;
}
.main-content {
flex: 1;
display: flex;
flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
/* 底部留出 tab 栏高度 + 安全区，防止内容被遮挡（与 Tab 栏高度精确对齐，无多余缝隙） */
padding-bottom: calc(var(--h5-bottom-nav-height) + env(safe-area-inset-bottom));
}
/* 首页额外让出合规提醒条（.info-notice-fixed）的高度，否则滚到底时最后一截内容
会被这条固定悬浮条盖住（2026-09-24 新增该条时一并调整）。 */
#page-home {
padding-bottom: calc(var(--h5-bottom-nav-height) + env(safe-area-inset-bottom) + 46px);
}
.top-bg {
position: relative; /* ← V008：给 .user-indicator absolute 定位锚点 */
background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #991b1b 100%);
background-image:
linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #991b1b 100%),
repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 20px),
repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 20px);
border-radius: 0 0 32px 32px;
box-shadow: 0 6px 16px rgba(220,38,38,0.3);
padding: var(--home-hero-top) var(--h5-page-inline) var(--home-hero-bottom);
}
.brand-container {
position: relative;
width: 100%;
min-height: 56px; /* 固定头部高度，标签改单行后不随之收缩 */
display: flex;
align-items: center;
justify-content: center;
}
.brand-title {
/* clamp 兼容极小屏（320）和大屏：320→24px / 480→32px / 中间按 7.5vw 计算 */
font-size: clamp(24px, 7.5vw, 32px);
font-weight: 900;
color: #fff;
text-shadow: 0 2px 6px rgba(0,0,0,0.25), 0 0 12px rgba(255,255,255,0.2);
letter-spacing: 2px;
margin: 0;
line-height: 1.2;
}
/* 单行 7 字标签：top:50% 与 .brand-title 同中心线。一行后标签变矮（约 21px），
已不与右上角「请登录」入口重叠，故不再需要原来 +3px 的避让下移。*/
.top-tag-left, .top-tag-right {
position: absolute;
top: 50%;
transform: translateY(-50%);
border-radius: 6px;
padding: 4px 6px;
/* clamp 极小屏防挤爆：320→8px / 480→10px */
font-size: clamp(8px, 2.4vw, 10px);
font-weight: bold;
line-height: 1.25;
text-align: center;
letter-spacing: 0.5px; /* 7 字一行变宽，字距收半格给标题让位 */
white-space: nowrap;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.top-tag-left {
left: 16px; /* 27→16：一行后标签更宽，外推避开"国彩量化" */
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
border: 1px solid rgba(255,255,255,0.3);
color: #000;
}
.top-tag-right {
right: 16px;
background: #b91c1c;
border: 1px solid rgba(255,255,255,0.2);
color: #fff;
}
.top-bg .top-subtitle {
color: rgba(255,255,255,0.9);
line-height: 1.7;
letter-spacing: 0.3px;
margin-top: var(--h5-section-gap);
text-align: center;
font-size: var(--h5-font-body);
}
.intro-link {
color: #fbbf24;
font-weight: bold;
cursor: pointer;
margin-left: 4px;
transition: opacity 0.2s ease;
}
.intro-link:active { opacity: 0.7; }
.date-wrap-container {
margin-top: 4px !important;
margin-bottom: 4px !important;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 var(--h5-page-inline);
min-height: 48px; /* 日期 tabs JS 渲染前预留空间，避免 0→48px 突变 */
}
.date-scroll-wrap {
display: flex;
align-items: center;
justify-content: space-around;
overflow-x: auto;
flex: 1;
padding: 2px 0;
-webkit-overflow-scrolling: touch;
min-height: 36px; /* date-item 高度，避免 0→36 突变 */
}
.date-scroll-wrap::-webkit-scrollbar { display: none; }
/* S1 日期 chip：flex 均分 + 椭圆（勿改回固定宽/vw 硬算）—— 见 H5/docs/H5主站样式设计说明.md */
.date-item {
transition: all 0.25s ease;
cursor: pointer;
flex: 1 1 0; /* 均分日期条可用宽度 */
min-width: 26px; /* 低于此宽度文字放不下，转为横向滚动（极端窄屏兜底） */
max-width: 36px; /* 宽屏不超过设计值，回到正圆 */
height: 36px;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
background-color: #fef2f2;
color: #666;
}
.date-item.active {
background-color: #ef4444;
color: #fff;
box-shadow: 0 2px 8px rgba(239,68,68,0.25);
/* 选中态带红底+外扩阴影，选中末位日期时紧邻「赛事筛选」按钮 → 提到上层，
任何情况下都不会被按钮压住（2026-07-28 用户建议的防御性处理）。 */
position: relative;
z-index: 2;
}
.date-item .week { font-size: 9px; line-height: 1; }
.date-item .day { font-size: 12px; font-weight: 500; line-height: 1; }
.data-bar {
background: linear-gradient(90deg, #fff5f5 0%, #fffafa 100%);
border: 1px solid #ffe6e6;
border-radius: 10px;
padding: max(4px, calc(var(--h5-card-gap) - 2px)) max(4px, calc(var(--h5-control-gap) - 3px));
margin: max(4px, calc(var(--h5-card-gap) - 2px)) var(--h5-card-gap);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap; /* 手机端始终保持一行 */
white-space: nowrap;
gap: clamp(2px, 1.25vw - 2px, 4px);
min-height: 36px;
/* 字号随屏宽自适应保证单行。二分实测单行上限：320→11.5、340→12.5、360→13.18（斜率 0.05/px），
取 calc(5vw - 4.7px) 并留 0.2px 余量：320→11.3、345→12.55、360→13（封顶）。
⚠️ 原为固定 13px + @media(≤355px) 降到 12px，320px 下仍溢出 16px（实测扫描发现）。 */
font-size: var(--home-data-size);
}
/* data-bar 内三个数字（已结束/命中/命中率）：避免 `-` → 数字 引起的宽度抖动 */
.data-bar #dayEnd,
.data-bar #dayHit,
.data-bar #dayRate {
display: inline-block;
/* 2026-08-03：占位宽度由 1.1em/2.8em 改为 0 —— 个位数时占位会在数字两侧空出一截，
与「数字和两侧汉字要紧贴」冲突（用户实测截图指出）。
原先设占位是怕数值位数变化让整条宽度跳变而溢出；现在右侧开关旁尚有 30~58px 余量
（320/360/375/414 四档实测），几 px 的变化被 flex 吸收，不会溢出。 */
min-width: 0;
text-align: center;
font-weight: bold;
color: #ef4444;
}
.data-bar #dayRate { min-width: 0; }
/* 覆盖子 span 上的 Tailwind .text-sm（14px），手机端避免换行；与父容器同一套自适应公式 */
.data-bar > span { font-size: var(--home-data-size); }
/* 首段「(12点-次日12点)」是口径说明、次要信息 → 比数据小一档，把宽度让给后面的数值。
纯靠字号线性公式压不住：文字实际渲染宽度相对字号是非线性的（实测字号 +2.4% 时该行宽 +5.2%，
跨阈值会跳变），仅靠调系数总有个别档位溢出，故对次要信息单独降档。 */
.data-bar > span:first-child { font-size: 0.86em; color: #9ca3af; }
#matchList {
padding: 0 var(--home-match-list-inline) 0;
container-type: inline-size;
container-name: home-match-list;
}
#matchList .page-loading,
#planListMulti .page-loading {
text-align:center;
padding:calc(var(--h5-dialog-inline) + var(--h5-section-gap)) 0;
color:#9ca3af;
}
.match-card {
--home-team-name-size: clamp(12px, calc(3.19vw + 1.8px), 15px);
--home-vs-size: clamp(16px, 5vw, 20px);
--home-score-label-size: clamp(7px, calc(3.19vw - 3.2px), 10px);
--home-score-value-size: clamp(9.5px, calc(5.85vw - 9.2px), 15px);
width: 100%;
max-width: 100%;
margin-bottom: 3px;
position: relative;
background: #fff;
border-radius: 10px;
padding: var(--home-match-card-pad); /* 水平 8→6：把 4px 让给队名行，保证 5 字队名在 360 屏也不截断 */
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
/* B17 单关标识（2026-08-05 用户订立，取代原「单」盾牌）：
红三角角标挂 0/-1 框左上角 + 该行三个赔率框红外框；未登录锁挂右上角。
盾牌已删 —— 三处渲染点（首页/量化精选/方案卡）都不再输出 .single-badge。 */
/* 卡片顶部一行：时间 / 联赛 / 状态 / 期号。居中显示、各段紧凑间距，避免占满整行
左右 padding 给单关盾牌和"+"按钮让位，防文字被覆盖 */
.match-card-head {
/* 左侧原为单关盾牌让位、盾牌已删(B17)，2026-08-14 回收该死留白：整行左移，
右侧腾出「精」戳的位置（中心分界线随之左移，是用户确认的取舍）。 */
padding-left: 6px;
padding-right: 32px;
display: grid;
/* 2026-08-14：右列要多装一枚「精」戳，而左列(编号+联赛)实测只占 91.2px、白占约 30px。
1fr 1fr 会把回收来的留白两列平分，右列只拿一半、仍装不下 → 改按实际需要分配。
仍是固定比例（不是 auto），故中心分界线在所有卡片上位置一致、卡片间竖向仍成线，
只是整体左移、不再落在卡片正中——这是用户确认的取舍。 */
grid-template-columns: 0.85fr 1.15fr; /* 中心线落在两列之间 = 世界杯｜已结束 之间 */
column-gap: 4px;
align-items: center;
margin-bottom: 2px;
}
.head-side { display: flex; align-items: center; gap: 2px; min-width: 0; }
.head-left { justify-content: flex-end; } /* 编号+联赛 贴中心线左侧 */
.head-right { justify-content: flex-start; } /* 状态+时间 贴中心线右侧 */
.match-no-red { color: #ef4444; font-weight: 700; font-size: 0.875rem; } /* 赛程编号：红色加粗 */
/* 开赛时间压到 12px 且禁止折行：右列被 1fr 均分死死限在 127.5px（375 屏），
14px 时「07-28 01:00」需 85.5px + 状态标签 55px 放不下，会在中间空格折成两行。
特异性 0,2,0 才能盖过 tailwind 的 .text-sm（0,1,0）。*/
/* 窄屏整行（状态标签+月日+时分）同步缩字号保单行，任何宽度都不隐藏月日 ——
旧版 ≤355px 曾 display:none 掉 .mt-date，违背「内容一致，只缩字号与间隙」原则（S25），已废除。
临界实测：320→10.5 / 330→11.32 / 345→12.18（≥345 现字号 12px 本就够）。 */
.match-card-head .head-right > span {
font-size: clamp(10.4px, calc(3.75vw - 1.6px), 12px);
white-space: nowrap;
}
/* 量化精选「精」戳（2026-08-14）：首页与竞彩量化卡片头，位于时间与右上角「+」/命中印章之间。
margin:0 auto 让它落在右列剩余空间的中间；配色与 web 的 .rec-stamp、串关精选页一致。 */
.match-card-head .head-right .rec-stamp {
margin: 0 auto;
flex-shrink: 0;
padding: 0 3px;
border: 1px solid #d97706;
border-radius: 4px;
background: #fef3c7;
color: #b45309;
font-weight: 800;
line-height: 1.45;
}
/* 月日与时分分段（_matchTimeParts 输出），整体显示「07-28 18:00」*/
.match-time .mt-date { margin-right: 4px; }
.stat-card {
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
margin: -16px var(--h5-page-inline) 4px;
padding: var(--h5-card-gap) var(--h5-page-inline);
position: relative;
z-index: 10;
}
/* stat-card 内 fallback：避免 Tailwind CDN 加载前 flex/text-center 失效 → 重排抖动 */
.stat-card > .flex { display: flex; justify-content: space-around; align-items: center; }
.stat-card .text-center { text-align: center; }
.stat-number {
/* clamp：320→16px / 480→20px */
font-size: clamp(16px, 5vw, 20px);
font-weight: bold;
color: #ef4444;
/* min-width 给数字留出固定占位，避免 `-` 变 `83.33%` 等内容变化引起宽度抖动 */
display: inline-block;
min-width: 70px;
text-align: center;
transition: opacity 0.15s ease;
}
.stat-label { font-size: 11px; color: #666; margin-top: 2px; }
.team-box { min-width: 0; display: flex; align-items: center; gap: clamp(1.5px, calc(2.66vw - 7px), 4px); }
.team-name {
/* clamp：320→12.8px / 375→15px（上限）。配合下方各项压缩，保证 5 字队名在 360 屏也完整显示 */
font-size: var(--home-team-name-size);
font-weight: 600;
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 6.3em; /* 放得下「5字+…」共 6 个字形；超 5 字的截断由 JS _truncTeamName 负责，CSS 只兜底 */
color: #1f2937;
}
.score-middle {
width: 40px;
flex-shrink: 0;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
line-height: 1;
}
.half-score-box {
background: #fff;
border: 1px solid #ccc;
border-radius: 6px;
padding: 0 3px;
margin-top: 1px;
font-size: 8px; /* 9→8：本框的自然宽是 .score-middle 能压到多窄的下限 */
color: #999;
line-height: 1;
}
.ai-analysis {
background: linear-gradient(90deg, #fff5f5 0%, #fffafa 100%);
border: 1px solid #ffe6e6;
border-radius: 8px;
padding: 3px; /* 左右等宽留白，给 .ai-title / .ai-more 对称居中 */
margin-top: 4px;
display: flex;
align-items: stretch;
gap: 4px;
}
.ai-analysis.is-locked {
align-items: center;
gap: 4px;
padding: 6px 5px;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
}
.ai-analysis.is-locked .ai-title {
flex-direction: row;
min-width: auto;
padding: 0;
font-size: clamp(10px, 2.8vw, 12px);
white-space: nowrap;
}
.ai-analysis.is-locked .ai-content {
color: #ef4444;
font-size: clamp(9px, 2.55vw, 11px);
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}
/* 🤖 / AI / 解 / 析 竖四行：占用更少水平空间 */
.ai-title {
color: #ef4444;
font-weight: bold;
font-size: 12px;
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
line-height: 1.15;
min-width: 26px;
padding: 0 2px;
}
.ai-title > span { display: block; }
.ai-content {
flex: 1;
font-size: 12px;
color: #666;
line-height: 1.4;
align-self: center;
min-width: 0; /* 让 flex:1 在父容器窄屏时可正常收缩，避免内容溢出 */
}
/* 更多资讯：竖排 5 字 + 手势 emoji，点击弹窗显示 AI 深度解析（ai_result） */
.ai-more {
color: #ea580c;
font-weight: bold;
font-size: 12px;
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
line-height: 1.15;
min-width: 26px;
padding: 0 2px;
cursor: pointer;
user-select: none;
}
.ai-more > span { display: block; }
.ai-more:active { opacity: 0.7; }
/* clamp：320→16px / 480→20px */
.vs-text { font-size: var(--home-vs-size); font-weight: 700; color: #ef4444; letter-spacing: 0px; }
/* 实力分块与队名同处一个 1fr 列，此块每省 1px 队名就多 1px；故字号跟着视口 clamp 缩放 */
.team-score { display: flex; align-items: center; gap: clamp(1px, calc(1.06vw - 2.4px), 2px); white-space: nowrap; }
.team-score-label { font-size: var(--home-score-label-size); color: #666; }
.team-score-value { font-size: var(--home-score-value-size); font-weight: bold; color: #ef4444; }
/* 锁定态的「•••」只是占位符不是数据，固定 12px + 去字距，比跟着实力分 clamp 缩了约 8px，
这 8px 全部让给队名（否则 360 屏锁定态 5 字队名会被截断）*/
.team-score.locked .team-score-value { color: #9ca3af; font-size: clamp(10px, calc(2.13vw + 3.2px), 12px); letter-spacing: 0; min-width: 22px; }
.score-lock { flex-shrink: 0; font-size: 10px; line-height: 1; }
/* 联赛 / 状态两个胶囊：12px + 收窄内边距，给同排的开赛时间腾出一行所需宽度 */
.league-tag {
background-color: #f0f7ff;
color: #4078c0;
padding: 2px 5px;
border-radius: 10px;
font-size: 12px;
line-height: 1;
flex-shrink: 0;
}
.status-tag { padding: 2px 5px; border-radius: 10px; font-size: 12px; line-height: 1; border: none; flex-shrink: 0; }
.status-end { background: #f3f4f6; color: #6b7280; }
.status-wait { background: #fff7ed; color: #c2410c; }
.status-started { background: #e5e7eb; color: #6b7280; }
.status-postponed { background: #6b7280; color: #fbbf24; font-weight: 700; }
.status-cancelled { background: #6b7280; color: #f87171; font-weight: 700; }
.vs-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); /* 中列比分/VS 落在卡片正中；
必须 minmax(0,1fr) 而非 1fr——后者默认 min-width:auto，长队名会把该列撑大、两列不等宽、VS 偏移 */
align-items: start;
column-gap: 2px;
margin-bottom: 3px;
position: relative;
}
/* 命中/遗憾印章：与右上角「+」按钮状态互斥（未开赛才有 +、已结束才有印章），
所以两者共用卡片右上角同一槽位——定位基准是 .match-card 而非 .vs-row。
曾挂在 .vs-row 内按行高垂直居中，纯 absolute 脱流又不占位，把客队实力分整块盖住。
逆时针 30° 斜置像盖章；像左上角「单」盾牌那样略微探出卡片边缘（.match-card 无
overflow:hidden，#matchList 左右各留 18px，不会被裁）。
2026-09-11：top/right 从贴死角（3px/0）改为离开角一点（8px/6px）——太靠边时视觉上
会把 30° 的斜角放大成"看起来转了更多"，往内挪一点就不这么突兀；不再与 .add-match-btn
的 top 强绑（二者互斥，各自调各自的位置不影响功能）。*/
.match-card .hit-badge {
position: absolute;
top: 8px; right: 8px; bottom: auto; left: auto;
transform: rotate(-18deg);
transform-origin: center;
background: #9ca3af;
color: #fff;
font-size: 12px;
font-weight: bold;
/* padding/字距按「旋转后向内侵入 ≤ 卡片为头部让出的 38px（卡片 6 + 头部 32）」定，
否则窄屏头部内容排满时会被印章压住开赛时间 */
padding: 2px 5px;
border-radius: 6px;
z-index: 10;
line-height: 1.1;
letter-spacing: 0;
}
.hit-badge.miss { background: #9ca3af !important; }
.hit-badge.hit-strong {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
font-size: 12px;
padding: 2px 6px;
box-shadow: 0 2px 6px rgba(220, 38, 38, 0.4);
text-shadow: 0 1px 1px rgba(0,0,0,0.15);
}
.odds-container { display: flex; align-items: stretch; margin-top: 0; gap: 2px; }
.odds-label-box,
.odds-mark-box,
.odds-option-box { height: var(--home-odds-height) !important; }
.odds-label-column { display: flex; flex-direction: column; gap: 2px; width: 44px; }
.odds-label-box {
background: #f3f4f6;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
color: #555;
font-weight: 500;
}
/* 宽度 24→48（2 倍）：框身左上角要放「单」角标、右上角要放未登录锁，原宽放不下。
同行三个赔率框是 flex:1 自动均摊，各自约缩 8px，无需另行改动。 */
.odds-mark-column { display: flex; flex-direction: column; gap: 2px; width: 48px; }
.odds-mark-box {
position: relative; /* mk-single / mk-lock 角标的定位锚点 */
overflow: hidden; /* 三角角标是超出裁切法：矩形旋转 45° 后由框裁出三角 */
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 600;
color: #888;
}
.odds-mark-box.handicap.positive { color: #2563eb; }
.odds-mark-box.handicap.negative { color: #ef4444; }
.odds-mark-box.handicap.zero { color: #888; }
.odds-options-container { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.odds-options-row { display: flex; gap: 2px; }
.odds-option-box {
flex: 1;
border: 1px solid #e5e7eb;
border-radius: 6px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
transition: all 0.2s ease;
pointer-events: none;
cursor: default;
}
.odds-option-box.result:not(.hit):not(.active) .odds-text,
.odds-option-box.result:not(.hit):not(.active) .odds-value {
color: #ef4444 !important;
font-weight: bold !important;
}
.odds-option-box.hit {
background: #ef4444 !important;
border-color: #ef4444 !important;
box-shadow: inset 0 0 4px rgba(0,0,0,0.1);
}
.odds-option-box.hit .odds-text,
.odds-option-box.hit .odds-value { color: #ffffff !important; font-weight: bold !important; }
.odds-option-box.miss {
background: #9ca3af !important;
border-color: #9ca3af !important;
}
.odds-option-box.miss .odds-text,
.odds-option-box.miss .odds-value { color: #fff !important; font-weight: bold !important; }
.odds-option-box.active {
background: #ef4444 !important;
border-color: #ef4444 !important;
box-shadow: inset 0 0 4px rgba(0,0,0,0.1);
}
.odds-option-box.active .odds-text,
.odds-option-box.active .odds-value { color: #fff !important; font-weight: bold !important; }
/* 默认态对齐串关精选的 .plan-odds-type / .plan-odds-val：细体 + 灰阶，
让整屏六个赔率框退为背景，把注意力留给命中/结果/选中态（那几档都带 !important，不受影响）*/
.odds-text { font-size: 12px; font-weight: 400; color: #6b7280; }
.odds-value { font-size: 13px; font-weight: 400; color: #9ca3af; }
@container home-match-list (max-width: 320px) {
.match-card {
--home-team-name-size: min(clamp(12px, calc(3.19vw + 1.8px), 15px), 14px);
--home-vs-size: min(clamp(16px, 5vw, 20px), 18px);
--home-score-value-size: min(clamp(9.5px, calc(5.85vw - 9.2px), 15px), 13px);
}
}
@container home-match-list (max-width: 280px) {
.match-card {
--home-team-name-size: min(clamp(12px, calc(3.19vw + 1.8px), 15px), 12.5px);
--home-vs-size: min(clamp(16px, 5vw, 20px), 16px);
--home-score-value-size: min(clamp(9.5px, calc(5.85vw - 9.2px), 15px), 11px);
}
}
.filter-btn {
background-color: #ef4444;
color: #fff;
/* 窄屏时把横向空间让给日期条：字号与左右内边距**同比例**随屏宽收缩
（390px→12px/10px 设计值，320px→11px/6px）。二者必须一起缩——只缩 padding 不缩字号，
按钮会显得又扁又挤、比例失调（2026-07-28 用户指出）。 */
padding: 4px clamp(6px, calc(5.7vw - 12.3px), 10px);
border-radius: 6px;
font-size: clamp(11px, calc(1.43vw + 6.43px), 12px);
white-space: nowrap;
border: none;
cursor: pointer;
flex-shrink: 0;
}
/* ===================== 赛事筛选弹窗 ===================== */
.league-modal-box {
width: 88%;
max-width: 360px;
padding: var(--h5-dialog-inline) var(--h5-dialog-inline) var(--h5-card-block);
}
.league-modal-title {
font-size: 16px;
font-weight: bold;
color: #1f2937;
margin-bottom: var(--h5-section-gap);
}
.league-options {
max-height: 50vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
display: flex;
flex-wrap: wrap;
gap: var(--h5-control-gap) calc(var(--h5-control-gap) + 2px);
padding: 4px 0 var(--h5-section-gap);
border-bottom: 1px solid #f3f4f6;
}
.league-options label {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 13px;
color: #374151;
cursor: pointer;
padding: 4px 0;
}
.league-options input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: #ef4444;
cursor: pointer;
}
.league-modal-toolbar {
display: flex;
align-items: center;
gap: var(--h5-control-gap);
padding-top: var(--h5-section-gap);
}
.league-toolbar-spacer { flex: 1; }
.league-action-btn {
/* 左右 padding 随屏宽收缩：原写死 14px，320px 下按钮内容宽只剩 24px，
而「全选」2 字需 26px → 两个字被挤成上下两行（脚本审计发现）。
同时 white-space:nowrap 兜底，任何情况下都不许把 2 字标签拆行。 */
padding: 6px clamp(8px, calc(6.4vw - 12.5px), 14px);
font-size: 13px;
white-space: nowrap;
border: 1px solid #e5e7eb;
border-radius: 6px;
background: #fff;
color: #6b7280;
cursor: pointer;
}
.league-action-btn.cancel { color: #6b7280; }
.league-action-btn.confirm {
background: #ef4444;
border-color: #ef4444;
color: #fff;
font-weight: 500;
}
.league-action-btn:active { opacity: 0.7; }
.league-options-empty {
color: #9ca3af;
font-size: 13px;
width: 100%;
text-align: center;
padding: 20px 0;
}
.modal-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.6);
display: flex; align-items: center; justify-content: center;
z-index: 9999; opacity: 0; visibility: hidden;
transition: all 0.3s ease;
}
.modal-overlay.show { opacity: 1; visibility: visible; }
.modal-box { background:#fff; border-radius:16px;
width:calc(100% - var(--h5-page-inline) - var(--h5-page-inline));
max-width:340px;
max-height:calc(100vh - var(--h5-page-inline) - var(--h5-page-inline)); overflow-y:auto;
padding:var(--h5-dialog-inline); }
.modal-box.league-modal-box {
max-width: 360px;
padding: var(--h5-dialog-inline) var(--h5-dialog-inline) var(--h5-card-block);
}
/* ===================== 底部固定 Tab 导航栏（红色 brand 主题）===================== */
/* 配色策略：与 ICP 备案区（#fff5f5）柔和衔接；图标默认正红描边、激活时深红；
文字默认暖灰、激活时红；三 Tab 间用半透明浅红描边分隔，点击 ripple 反馈 */
.bottom-nav {
position: fixed;
left: 50%;
transform: translateX(-50%);
bottom: 0;
width: 100%;
max-width: 480px;
height: var(--h5-bottom-nav-height);
display: flex;
align-items: stretch;
background: linear-gradient(180deg, #fff5f5 0%, #ffffff 100%);
border-top: 1px solid #ffd6d6;
box-shadow: 0 -2px 12px rgba(239, 68, 68, 0.08);
z-index: 1000;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
.nav-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/* 页脚压到 40px 后，图标(22)+文字(~14) 只剩 4px 余量，gap 必须跟着收 */
gap: 1px;
text-decoration: none;
color: #6b7280; /* 文字默认：暖灰 */
font-size: 10px;
cursor: pointer;
transition: all 0.18s ease;
-webkit-tap-highlight-color: transparent;
}
.nav-item:not(:last-child) {
border-right: 1px solid rgba(255, 214, 214, 0.55); /* 浅红半透明分隔线 */
}
.nav-item .nav-icon { color: #ef4444; } /* 图标默认：正红描边（svg stroke=currentColor）*/
.nav-item.active {
color: #ef4444; /* 激活时文字变红 */
background: rgba(239, 68, 68, 0.06); /* 激活时柔红底 */
}
.nav-item.active .nav-icon { color: #991b1b; } /* 激活时图标更深红，形成层次 */
.nav-item:active {
background: rgba(239, 68, 68, 0.12);
transform: scale(0.96);
}
.nav-icon {
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
}
.nav-icon svg { width: 22px; height: 22px; } /* svg 内联 stroke="currentColor"，颜色随 .nav-item .nav-icon 走 */
.nav-label { font-size: 10px; line-height: 1; font-weight: 500; }
/* ===================== ICP 备案页脚（外壳：纯定位容器，无背景）======
外层 #icpFooter 同时承载 [.compliance-tip, .icp-beian-content] 两个子元素，
样式分别独立；这样无论 fixed 还是 inline，合规条始终在备案信息上方。
*/
.icp-footer--inline {
max-width: 480px;
width: 100%;
margin: auto auto 0; /* sticky footer：内容不足一屏时 margin-top:auto 把它沉到底部导航上方（贴页脚）；内容超屏时失效、footer 随列表滚到底才现。已去掉 matchList 的 min-height，故不会有列表内部大空白 */
}
/* 备案信息子块：原 icp-footer 的视觉样式下沉到这里 */
.icp-beian-content {
/* S23 页脚恒 2 行：字号 / 行内 gap / 左右 padding 三者随宽度连续缩放，320px 也不许折行 */
padding: var(--h5-card-gap) clamp(4px, calc(7.5vw - 20px), 16px);
background: #fff5f5;
border-top: none;
border-radius: 0 0 8px 8px;
margin: 0 var(--h5-page-inline);
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
font-size: clamp(8px, calc(1.75vw + 2.3px), 11px);
color: #666;
text-align: center;
line-height: 1.6;
}
.icp-beian-content a {
color: #ef4444;
text-decoration: none;
font-weight: 500;
}
.icp-beian-content a:active { opacity: 0.7; }
/* 许可证标签：普通黑字、不可点（可点的只有后面那个编号） */
.icp-beian-content .license-label { color: #333; font-weight: normal; }
/* 标签 + 编号是一体的，裹成单个 flex item 才不会被 .beian-line 的 gap 顶开 */
.icp-beian-content .license-item { display: inline-flex; align-items: center; }
/* 证照链接 / 许可证号 / 备案号：统一红色可点击（勿换成品牌红 #ef4444，浅红底上对比度不够，见 S23） */
.icp-beian-content .license-link,
.icp-beian-content .license-num,
.icp-beian-content .beian-num {
color: #dc2626;
cursor: pointer;
text-decoration: none;
font-weight: 500;
}
.icp-beian-content .license-link:active,
.icp-beian-content .license-num:active,
.icp-beian-content .beian-num:active { color: #b91c1c; }
/* 分隔符：自身不再加 margin，横向间距统一由 .beian-line 的 gap 管，便于按宽度整体缩放 */
.icp-beian-content .beian-sep { color: #cbd5e1; margin: 0; }
/* 备案行 */
.icp-beian-content .beian-line {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: clamp(1px, calc(1.875vw - 5px), 4px);
}
.icp-beian-content .beian-line-sub { opacity: 0.85; }
/* S23 公安备案行：国徽 + 文字（国徽图仅 H5 有）。国徽用 em 跟随页脚字号，勿写死 px */
.icp-beian-content .beian-link { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; }
.beian-emblem { width: 1.4em; height: 1.4em; object-fit: contain; display: inline-block; }
/* S22 证照弹窗：轻遮罩悬浮，图片与关闭按钮一律锁在 H5 视口区域内（说明见 H5/docs/H5主站样式设计说明.md） */
.license-overlay {
display: none;
position: fixed;
top: 0; bottom: 0; left: 0; right: 0;
max-width: 480px; /* 与 html,body 同宽同中线，勿改成铺满浏览器窗口 */
margin: 0 auto;
z-index: 10000;
/* 半透明遮罩：与组合明细弹窗 .plan-detail-overlay 同款 0.45 —— 底层仍可辨识，
不用主流弹窗的 0.6（偏重），更不用近全黑 */
background: rgba(0, 0, 0, 0.45);
align-items: center;
justify-content: center;
/* 顶部多让出关闭按钮占的 48px，按钮与证照内容永不重叠 */
padding: calc(48px + var(--h5-card-gap) + env(safe-area-inset-top, 0px))
var(--h5-page-inline)
calc(var(--h5-page-inline) + env(safe-area-inset-bottom, 0px));
}
.license-overlay.show { display: flex; }
/* 图片等比缩放，随设备自适应，恒不超出 H5 视口区域；白底+圆角+投影做出悬浮卡片感 */
.license-overlay .license-img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
background: #fff;
border-radius: 12px;
box-shadow: 0 12px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,0,0,0.08);
}
/* 关闭按钮：absolute 使包含块 = 上面那层 overlay = H5 视口区域，故恒在 H5 区域右上角 */
.license-overlay .license-close {
position: absolute;
top: calc(12px + env(safe-area-inset-top, 0px));
right: calc(12px + env(safe-area-inset-right, 0px));
width: 36px;
height: 36px;
/* 无遮罩后按钮会落在浅色页面上，故用深色实心+白边+投影，任何底色上都清晰可辨 */
background: rgba(17,24,39,0.78);
border: 1.5px solid rgba(255,255,255,0.85);
box-shadow: 0 2px 10px rgba(0,0,0,0.35);
border-radius: 50%;
font-size: 22px;
line-height: 1;
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.license-overlay .license-close:active { background: rgba(17,24,39,0.92); }
/* ===================== 合规提示条（V3 风格） =====================
现位于 #icpFooter 内部，顶部留 8px 与赛事列表/ICP 容器边缘隔开
*/
.compliance-tip {
background: rgba(0, 0, 0, 0.6);
color: #ffffff;
padding: var(--h5-card-gap) var(--h5-page-inline);
border-radius: 8px 8px 0 0;
margin: var(--h5-card-gap) var(--h5-page-inline) 0;
display: flex;
justify-content: center;
align-items: center;
/* 本条要求单行，14px 下需 ~294px，360px 以下屏会折成两行 → 字号随屏宽线性收缩。
二分实测各宽度的单行字号上限：320→12.5、340→13.5、360→14.5（斜率恰为 0.05/px = 5vw）。
取 calc(5vw - 4.5px) 在上限基础上留 0.5px 余量：320→11.5、350→13、360→13.5、≥370→封顶 14。
⚠️ 截距曾用 -4px，350/355px 处算出的值正好压在上限上 → 仍折行（已修）。 */
font-size: clamp(11.5px, calc(5vw - 4.5px), 14px);
line-height: 1.5;
}
/* ===================== 弹窗：免责声明 / 关于我们 / 深度解析（V3 风格） ===================== */
.dlg-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.6);
z-index: 9999;
display: none;
align-items: center;
justify-content: center;
padding: var(--h5-page-inline);
}
.dlg-overlay.show { display: flex; }
.dlg-box-red {
width: 100%;
max-width: 420px;
background: linear-gradient(180deg, #ff6b7b 0%, #ff8794 100%);
border-radius: 20px;
max-height: calc(100vh - var(--h5-page-inline) - var(--h5-page-inline));
overflow-y: auto;
padding: var(--h5-dialog-inline);
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
color: #fff;
}
.dlg-title-bar { text-align: center; margin-bottom: var(--h5-section-gap); }
.dlg-title {
font-size: var(--h5-dialog-title-size);
font-weight: bold;
color: #fff;
background-color: #ef4444;
display: inline-block;
padding: 4px 16px;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(239,68,68,0.3);
}
.dlg-content {
background: #fff;
color: #333;
padding: var(--h5-dialog-inline);
border-radius: 12px;
line-height: 1.8;
font-size: var(--h5-dialog-body-size);
margin-bottom: var(--h5-section-gap);
}
.dlg-close-btn {
width: 100%;
min-height: var(--h5-tap-primary);
padding: var(--h5-card-block);
background: #fff;
color: #ef4444;
border-radius: 12px;
border: none;
font-size: var(--h5-dialog-body-size);
font-weight: bold;
cursor: pointer;
transition: 0.2s;
}
.dlg-close-btn:hover { background: #fef2f2; }
/* 深度解析弹窗（白底，复用 modal-box 容器尺寸） */
.dlg-box-white {
width: 100%;
max-width: 420px;
max-height: 86vh;
overflow-y: auto;
background: #fff;
border-radius: 20px;
padding: var(--h5-dialog-inline);
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
/* 深度解析弹窗：宽度 +12%、左右留白收窄（仅作用于 analysisModal） */
#analysisModal .dlg-box-white {
max-width: 470px;
padding: var(--h5-card-inline);
}
.dlg-close-red {
margin-top: var(--h5-section-gap);
width: 100%;
min-height: var(--h5-tap-primary);
padding: var(--h5-card-block);
background: #ef4444;
color: #fff;
border-radius: 12px;
border: none;
font-size: var(--h5-dialog-body-size);
font-weight: bold;
cursor: pointer;
transition: 0.2s;
}
.dlg-close-red:hover { background: #dc2626; }
/* AI 深度解析弹窗：复用 .dlg-box-white 容器，加标题分隔线 + 可滚动正文 */
#aiResultModal .dlg-box-white { max-height: 86vh; }
#aiResultModal .ai-result-title {
text-align: center;
font-size: 15px;
font-weight: bold;
color: #dc2626;
margin-bottom: var(--h5-section-gap);
padding-bottom: var(--h5-card-gap);
border-bottom: 1px solid #fee2e2;
}
#aiResultModal .ai-result-text {
font-size: var(--h5-font-body);
line-height: 1.7;
color: #333;
white-space: pre-wrap;
max-height: 60vh;
overflow-y: auto;
padding-right: 4px;
}
/* AI 深度解析 markdown 渲染版（marked 输出 HTML 时加 .md）——
Tailwind preflight 会重置 h2/h3 的字号与粗细，这里显式恢复标题样式 */
#aiResultModal .ai-result-text.md { white-space: normal; }
#aiResultModal .ai-result-text.md h1,
#aiResultModal .ai-result-text.md h2,
#aiResultModal .ai-result-text.md h3 {
font-weight: 800;
font-size: 14.5px;
color: #dc2626;
margin: 16px 0 6px;
line-height: 1.4;
}
#aiResultModal .ai-result-text.md h2:first-child,
#aiResultModal .ai-result-text.md h3:first-child { margin-top: 0; }
#aiResultModal .ai-result-text.md p { margin: 0 0 10px; }
#aiResultModal .ai-result-text.md .final-reminder { margin-top: 5.1em; }
#aiResultModal .ai-result-text.md strong { font-weight: 800; color: #111; }
#aiResultModal .ai-result-text.md ul,
#aiResultModal .ai-result-text.md ol { margin: 0 0 10px; padding-left: 20px; }
#aiResultModal .ai-result-text.md li { margin: 2px 0; }
#aiResultModal .ai-result-text.md table { border-collapse: collapse; width: 100%; margin: 8px 0; }
#aiResultModal .ai-result-text.md th,
#aiResultModal .ai-result-text.md td { border: 1px solid #eee; padding: 4px 8px; font-size: 12px; }
/* 关于我们弹窗：图片置顶 + 文字字号小一号（不影响其他共用 .dlg-content 的弹窗） */
#aboutModal .about-img {
display: block;
margin: 0 auto 12px;
max-width: 55%;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
#aboutModal .dlg-content {
font-size: 14px;
margin-top: 6px;
}
/* ===================== 右上角用户登录入口（V008 引入） ===================== */
.user-indicator {
position: absolute;
/* 高度已被 VIP 徽标(1.7em=20.4px，口径见下方注释，不可改)钉死。
白色胶囊底已去掉（2026-08-03），指示器与「国彩量化」标题不重叠靠的是
top:1px + hero 顶部留白(--home-hero-top)，两者一起决定间距。 */
top: 1px;
right: 12px;
transition: opacity 0.18s ease; /* 与 JS opacity 0→1 配合，淡入避免抖动 */
z-index: 5;
display: inline-flex;
align-items: center;
gap: 3px;
/* 不加外层包裹（2026-08-03 用户订立）：头像 / 昵称 / VIP 徽标直接落在红色 hero 上，
与 web 顶栏一致。底色一去，文字必须转白才看得清 —— hero 是深红渐变。 */
color: #fff;
font-size: 12px;
padding: 0;
cursor: pointer;
user-select: none;
text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
max-width: 65vw;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.user-indicator:hover { opacity: .85; }
.user-indicator .user-icon { font-size: 13px; }
/* 首页指示器的 VIP 图片徽标：对齐口径是「徽标内的 VIP 字」与昵称等高，不是整个徽标与昵称等高。
徽标 PNG 内 VIP 字形高恰为图高的 50%，故 height 取昵称字号的 1.7em（≈0.85 汉字高 ×2），
徽标整体比昵称大一圈、与相邻 20px 头像齐平。
与 web 顶栏 .nav-vip-badge、H5 我的页 .mine-vip-img 同一套观感 */
.user-indicator .user-vip-badge {
height: 1.7em;
width: auto;
flex: 0 0 auto;
display: block;
cursor: pointer;
/* 徽标本身只有 1.25em 高，横向补一点内边距把点击热区撑到手指可点的尺寸；
不加 margin 负值，避免影响指示器整体宽度（窄屏 320px 已按现宽度验证过不溢出）。 */
padding: 2px 1px;
}
.user-indicator .user-vip-badge.locked { filter: grayscale(1) opacity(.55); }
.user-indicator .user-avatar {
width: 20px;
height: 20px;
flex: 0 0 20px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255,255,255,.92);
font-size: 13px;
}
.user-indicator .user-name {
max-width: 22vw;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 600;
}
.user-indicator .user-level {
color: #f59e0b;
font-size: 11px;
font-weight: 600;
margin-left: 0;
}
.user-indicator .user-remain { color:#d97706; font-size:11px; }
.user-indicator.logged-in { color: #fff; }
.user-indicator.logged-in .user-level { color: #fde68a; }
/* 新版纳米式首页顶部：结构与样例同为左攻略 / 中品牌 / 右真实用户态。 */
.top-bg.top-nano {
padding: 8px var(--h5-page-inline) 10px;
border-radius: 0 0 20px 20px;
}
.nano-top-row { position: relative; display: flex; align-items: center; min-height: 48px; }
.nano-guide-btn {
display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 10px 0 4px;
color: #fff; border: 0; border-radius: 999px; background: rgba(255,255,255,.15); font-size: 11px;
}
.nano-guide-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; color: #ef4444; border-radius: 50%; background: #fff; font-size: 12px; }
.nano-brand {
position: absolute; left: 50%; top: 50%; display: inline-flex; align-items: center; gap: 6px;
transform: translate(-50%, -50%); padding: 4px 12px 4px 6px; border-radius: 999px;
background: rgba(255,255,255,.1); pointer-events: none; white-space: nowrap;
}
.nano-brand img { width: 28px; height: 28px; border: 2px solid rgba(255,255,255,.5); border-radius: 50%; object-fit: cover; }
.nano-brand span { display: flex; flex-direction: column; line-height: 1.05; }
.nano-brand b { color: #fff; font-size: 15px; letter-spacing: 1px; }
.nano-brand i { margin-top: 3px; color: rgba(255,255,255,.78); font-size: 12px; font-style: normal; letter-spacing: .18em; }
.top-nano .user-indicator { position: relative; top: auto; right: auto; margin-left: auto; min-width: 64px; max-width: 30%; height: 32px; padding: 0 5px 0 9px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.15); font-size: 11px; }
.top-nano .user-indicator .user-avatar { width: 22px; height: 22px; flex-basis: 22px; }
.top-nano .user-indicator .user-vip-badge { height: 22px; }
.top-nano .user-indicator .user-name { flex: 1 1 auto; min-width: 0; max-width: 15vw; }
.stat-card { margin: -2px 6px 3px; padding: 0; border-radius: 16px; }
.nano-stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nano-stat { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; min-height: 42px; padding: 5px 2px; color: #6b7280; border: 0; border-left: 1px solid #f3f4f6; background: transparent; font-size: 9px; white-space: nowrap; }
.nano-stat:first-child { border-left: 0; }
.nano-stat b { color: #ef4444; font-size: 12px; }
.nano-return-stat:not(:disabled) { cursor: pointer; }
.nano-return-stat:disabled { cursor: default; }
.top-return-rates { display: flex; justify-content: space-around; gap: 8px; margin: 2px 2px 8px; padding: 9px; color: #6b7280; border-radius: 10px; background: #fff4f4; font-size: 13px; }
.top-return-rates b { margin-left: 3px; color: #e33434; }
#planDetailBody.public-top-plan .profit-rate { display: none; }
@media (max-width: 360px) {
.nano-brand { padding-right: 7px; gap: 3px; }
.nano-brand img { width: 26px; height: 26px; }
.nano-brand b { font-size: 13px; }
.nano-brand i { font-size: 8px; }
.nano-guide-btn { gap: 3px; padding-right: 5px; font-size: 10px; }
.top-nano .user-indicator { min-width: 0; max-width: 88px; gap: 2px; padding: 0 5px; }
.top-nano .user-indicator .user-name { display: block; }
.stat-card { margin-right: 4px; margin-left: 4px; }
.nano-stat { gap: 1px; padding-right: 1px; padding-left: 1px; font-size: 9px; }
.nano-stat b { font-size: 11px; }
}
/* 新人攻略：结构、文案和视觉以复刻样本为准。 */
@font-face { font-family: GuideFontAwesome; src: url('/images/guide/fontawesome-webfont.ttf') format('truetype'); }
.guide-page { position: fixed; z-index: 180; inset: 0; max-width: 480px; margin: auto; color: #374151; background: #f9fafb; }
.guide-head { position: relative; display: flex; align-items: center; justify-content: center; min-height: 64px; padding: 10px 16px 14px; color: #fff; border-radius: 0 0 20px 20px; background: #ef2c32; }
.guide-head button { position: absolute; left: 12px; width: 32px; height: 32px; color: #fff; border: 0; background: transparent; font-size: 30px; line-height: 26px; }
.guide-head div { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.guide-head b { font-size: 16px; }.guide-head span { color: rgba(255,255,255,.82); font-size: 10px; }
.guide-scroll { height: calc(100% - 64px); overflow-y: auto; padding: 12px 14px 30px; -webkit-overflow-scrolling: touch; }
.guide-card,.guide-brand-card { margin-bottom: 12px; padding: 16px; border-radius: 16px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.guide-brand-card { position: relative; overflow: hidden; color: #fff; background: linear-gradient(135deg,#ef2c32,#b91c1c); }
.guide-brand-bubble { position:absolute;border-radius:50%;background:rgba(255,255,255,.1) }.guide-brand-bubble.one{right:-20px;top:-28px;width:96px;height:96px}.guide-brand-bubble.two{right:-36px;top:36px;width:64px;height:64px}
.guide-brand-title { position:relative;display:flex;gap:8px;align-items:center }.guide-brand-title img{width:36px;height:36px;border:2px solid rgba(255,255,255,.5);border-radius:50%;object-fit:cover}.guide-brand-title div{display:flex;flex-direction:column;gap:3px}.guide-brand-title b{font-size:14px}.guide-brand-title span{font-size:10px;color:rgba(255,255,255,.85)}
.guide-brand-card p{position:relative;margin:10px 0;font-size:11px;line-height:1.7;color:rgba(255,255,255,.92)}.guide-brand-card em{position:relative;display:block;padding:8px;border-radius:8px;background:rgba(255,255,255,.15);font-size:10px;font-style:normal;text-align:center}
.guide-core-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:12px}.guide-core-grid div{display:flex;flex-direction:column;gap:5px;padding:10px 3px;border-radius:14px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.06);text-align:center}.guide-core-grid b{color:#ef2c32;font-size:14px}.guide-core-grid span{color:#6b7280;font-size:9px;line-height:1.3}
.guide-fa{font-family:GuideFontAwesome!important;font-style:normal}.guide-card h2{display:flex;align-items:center;gap:8px;margin-bottom:10px;color:#1f2937;font-size:14px}.guide-card h2 .guide-fa{color:#ef2c32;font-size:14px}.guide-card h2 .warning{color:#f59e0b}.guide-card p{font-size:11px;line-height:1.65}.guide-muted{margin:-4px 0 12px;color:#6b7280;font-size:10px!important}
.guide-engine{margin:8px 0;padding:10px;border:1px solid #fee2e2;border-radius:12px;background:#fff5f5}.guide-engine.algo{border-color:#fde68a;background:#fffbeb}.guide-engine.data{border-color:#bfdbfe;background:#eff6ff}.guide-engine b{font-size:11px;color:#e33434}.guide-engine.algo b{color:#d97706}.guide-engine.data b{color:#2563eb}.guide-engine i{margin-left:4px;color:#9ca3af;font-size:9px;font-style:normal;font-weight:400}.guide-engine p{margin-top:5px;color:#4b5563;font-size:11px!important}.guide-card>small{display:block;margin-top:10px;padding:8px;border-radius:8px;background:#f9fafb;color:#6b7280;font-size:10px;text-align:center}
.guide-benefits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 8px}.guide-benefits>div{display:flex;align-items:flex-start;gap:8px;min-width:0}.guide-check{display:inline-flex;align-items:center;justify-content:center;flex:0 0 16px;width:16px;height:16px;margin-top:2px;border-radius:4px;color:#ef2c32;background:#fee2e2;font-size:9px;font-style:normal;font-weight:700}.guide-benefits span{min-width:0}.guide-benefits b{display:block;color:#374151;font-size:11px;line-height:1.3}.guide-benefits small{display:block;margin-top:3px;color:#9ca3af;font-size:9px;line-height:1.3}
.guide-offer{margin-top:12px;padding:10px 12px;border-radius:9px;background:#f9fafb}.guide-price-line{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:3px}.guide-price-line span{color:#4b5563;font-size:11px}.guide-price-line b{color:#ef4444;font-size:10px}.guide-offer button,.guide-main-cta{width:100%;margin-top:8px;padding:11px;border:0;border-radius:9px;color:#fff;background:#ef2c32;font-size:12px;font-weight:700}
.guide-steps{display:grid;gap:12px;counter-reset:guide}.guide-steps li{position:relative;display:grid;gap:3px;padding-left:30px;list-style:none}.guide-steps li::before{counter-increment:guide;content:counter(guide);position:absolute;left:0;top:1px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;color:#fff;background:#ef2c32;font-size:10px}.guide-steps b{font-size:12px}.guide-steps span{color:#6b7280;font-size:11px;line-height:1.55}
.guide-feature-wrap{position:relative}.guide-feature-row{display:flex;gap:10px;overflow-x:auto;padding:2px 4px;scroll-behavior:smooth;scroll-snap-type:x mandatory}.guide-feature-row button{flex:0 0 42%;overflow:hidden;padding:0;border:1px solid #f3f4f6;border-radius:12px;background:#f9fafb;text-align:left;scroll-snap-align:start}.guide-feature-row img{width:100%;height:160px;object-fit:cover;object-position:top}.guide-feature-row b{display:block;padding:8px 10px 0;color:#1f2937;font-size:11px;text-align:center}.guide-feature-row span{display:block;padding:4px 10px 9px;color:#6b7280;font-size:9px;line-height:1.35}.guide-feature-arrow{position:absolute;z-index:2;top:calc(50% - 13px);display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:50%;color:#9ca3af;background:rgba(255,255,255,.9);box-shadow:0 2px 8px rgba(0,0,0,.15);font-size:18px}.guide-feature-arrow.left{left:2px}.guide-feature-arrow.right{right:2px}
.guide-main-cta{margin:0 0 12px;padding:14px;border-radius:16px;font-size:14px}.guide-qualifications{display:grid;gap:12px}.guide-qualifications>div{display:flex;align-items:flex-start;gap:10px}.guide-qualifications>div>i{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border-radius:50%;color:#ef2c32;background:#fee2e2;font-size:14px}.guide-qualifications span{min-width:0}.guide-qualifications b{display:block;color:#374151;font-size:11px}.guide-qualifications small{display:block;margin-top:3px;color:#9ca3af;font-size:10px;line-height:1.55}.guide-qualifications em{font-style:normal}
.guide-online{padding:12px;border:1px solid #fee2e2;border-radius:12px;background:#fff5f5}.guide-online>b,.guide-business>b{display:block;margin-bottom:8px;font-size:12px}.guide-online>div{display:flex;align-items:center;justify-content:space-between;margin-top:8px;padding:10px 12px;border-radius:9px;background:#fff}.guide-online span{display:flex;flex-direction:column;gap:3px}.guide-online small{color:#9ca3af;font-size:10px}.guide-online strong{color:#1f2937;font-size:12px;letter-spacing:.03em}.guide-online button{padding:8px 12px;border:0;border-radius:8px;color:#fff;background:#ef2c32;font-size:11px;font-weight:700}.guide-online button.secondary{color:#ef2c32;background:#fee2e2}.guide-online p{margin-top:10px;color:#9ca3af;font-size:10px!important;text-align:center}
.guide-business{margin-top:12px}.guide-business>p{display:flex;align-items:flex-start;gap:8px;margin:8px 0}.guide-business>p>span{flex:0 0 56px;color:#9ca3af;font-size:10px}.guide-business em,.guide-business a{color:#4b5563;font-size:11px;font-style:normal;line-height:1.55}.guide-business a{color:#3b82f6;font-weight:700}.guide-business>div{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}.guide-business i{padding:5px 10px;border-radius:999px;color:#6b7280;background:#f9fafb;font-size:10px;font-style:normal}.guide-disclaimer p{color:#6b7280}
.guide-image-modal{position:fixed;z-index:200;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.78)}.guide-image-modal img{max-width:100%;max-height:88%;border-radius:10px}.guide-image-modal button{position:absolute;top:12px;right:16px;width:34px;height:34px;border:0;border-radius:50%;color:#ef2c32;background:#fff;font-size:25px}
/* ===================== 深度解析弹窗（按日期切换+推荐赛事+组合解析） ===================== */
/* 日期切换条（与首页 .date-scroll-wrap 视觉一致但放在弹窗内部） */
.deep-date-wrap {
display: flex;
align-items: center;
justify-content: space-around;
overflow-x: auto;
padding: var(--h5-control-gap) 0;
margin-bottom: var(--h5-card-gap);
-webkit-overflow-scrolling: touch;
border-bottom: 1px solid #f0f0f0;
}
.deep-date-wrap::-webkit-scrollbar { display: none; }
.deep-date-wrap .date-item {
width: 34px; height: 34px;
flex-shrink: 0;
}
/* 推荐赛事卡：紧凑版，区别于首页 .match-card */
.deep-match-card {
background: #fff;
border: 1.5px solid #e5e7eb;
border-radius: 10px;
padding: var(--h5-card-block) var(--h5-card-inline);
margin-bottom: var(--h5-card-gap);
transition: all .2s;
cursor: pointer;
position: relative;
}
.deep-match-card.checked {
border-color: #ef4444;
background: #fff7f7;
}
.deep-match-card .deep-check {
position: absolute;
top: 10px; right: 10px;
width: 18px; height: 18px;
border: 1.5px solid #ccc;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: transparent;
background: #fff;
flex-shrink: 0;
}
.deep-match-card.checked .deep-check {
border-color: #ef4444;
background: #ef4444;
color: #fff;
}
.deep-match-head {
display: flex;
align-items: center;
gap: var(--h5-control-gap);
font-size: var(--h5-font-aux);
color: #6b7280;
margin-bottom: var(--h5-card-gap);
flex-wrap: wrap;
padding-right: 26px; /* 给右上 checkbox 让位 */
}
.deep-match-teams {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--h5-control-gap);
margin-bottom: var(--h5-card-gap);
}
.deep-match-teams .team-name {
font-size: calc(var(--h5-font-body) + 1px);
font-weight: 700;
color: #1f2937;
max-width: 6rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.deep-match-teams .team-score-value {
font-size: var(--h5-font-data);
font-weight: bold;
color: #ef4444;
}
.deep-match-teams .vs-text {
font-size: calc(var(--h5-font-data) + 2px);
color: #ef4444;
font-weight: 700;
}
/* 紧凑预测行：一行内非让球区 + 让球区，只显示用户预测过的格子 */
.deep-predict-row {
display: flex;
align-items: center;
gap: var(--h5-control-gap);
flex-wrap: wrap;
padding-top: var(--h5-control-gap);
border-top: 1px dashed #f0f0f0;
}
.deep-predict-row .grp {
display: flex;
align-items: center;
gap: 4px;
}
.deep-predict-row .grp-label {
font-size: 11px;
color: #555;
background: #f3f4f6;
padding: 3px 6px;
border-radius: 4px;
}
.deep-predict-row .pick {
background: #ef4444;
color: #fff;
font-size: var(--h5-font-aux);
font-weight: bold;
padding: 3px 8px;
border-radius: 4px;
white-space: nowrap;
}
.deep-predict-row .grp-empty {
color: #9ca3af;
font-size: 11px;
padding: 3px 6px;
}
/* 组合解析容器（默认折叠 + 展开后内部独立滚动）*/
.deep-combin-area {
margin-top: var(--h5-section-gap);
padding: var(--h5-control-gap) var(--h5-card-gap); /* 用户选「中幅」padding 12→6px */
background: #f9fafb;
border-radius: 10px;
}
.deep-combin-title {
font-size: var(--h5-font-body);
font-weight: bold;
color: #374151;
cursor: pointer;
user-select: none;
display: flex;
align-items: center;
gap: var(--h5-control-gap);
padding: 4px 2px;
}
.deep-combin-title:hover { color: #111827; }
.deep-combin-arrow {
display: inline-block;
font-size: 10px;
color: #6b7280;
transition: transform 0.15s;
}
.deep-combin-area.expanded .deep-combin-arrow {
transform: rotate(180deg);
}
.deep-combin-toggle-hint {
margin-left: auto;
font-size: var(--h5-font-body); /* 与「📊 组合解析」标题同号 */
font-weight: bold;
color: #dc2626; /* 红色，引起用户点击注意 */
}
.deep-combin-text-wrap {
display: none;
max-height: 240px;
overflow-y: auto;
margin-top: var(--h5-control-gap);
padding: 2px 4px;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 6px;
}
.deep-combin-area.expanded .deep-combin-text-wrap {
display: block;
}
.deep-combin-text-wrap::-webkit-scrollbar { width: 5px; }
.deep-combin-text-wrap::-webkit-scrollbar-thumb {
background: #fca5a5;
border-radius: 3px;
}
.deep-combin-text {
font-size: var(--h5-font-aux);
color: #4b5563;
line-height: 1.7;
white-space: pre-wrap;
}
/* 空状态：占位文案 + 缩小 ad_code.jpg */
.deep-empty {
text-align: center;
padding: calc(var(--h5-card-block) + var(--h5-card-block))
var(--h5-page-inline) var(--h5-dialog-inline);
}
.deep-empty-title {
font-size: calc(var(--h5-font-body) + 6px);
font-weight: bold;
color: #ef4444;
margin-bottom: var(--h5-section-gap);
line-height: 1.5;
}
.deep-empty-img {
max-width: 160px;
max-height: 160px;
margin: 0 auto;
border-radius: 8px;
border: 1px solid #e5e7eb;
}
.deep-empty-img-hint {
font-size: 11px;
color: #9ca3af;
margin-top: 8px;
}
/* ════════════════════════════════════════════════════════════════
V010：深度解析独立页（#page-plan）的样式
════════════════════════════════════════════════════════════════ */
/* 主页 match-card 右上角"加入方案"圆形按钮 */
.match-card .add-match-btn {
position: absolute;
top: 3px;
right: 6px;
bottom: auto;
width: 26px;
height: 26px;
border-radius: 50%;
border: none;
background: #fee2e2;
color: #dc2626;
font-size: 18px;
font-weight: bold;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 1px 4px rgba(220,38,38,0.18);
transition: transform 0.12s ease, background 0.15s, color 0.15s;
z-index: 2;
}
.match-card .add-match-btn:active { transform: scale(0.92); }
.match-card .add-match-btn.selected {
background: #ef4444;
color: #fff;
}
.match-card .add-match-btn:disabled {
background: #e5e7eb;
color: #9ca3af;
box-shadow: none;
cursor: not-allowed;
}
/* 底部"深度解析" tab 上的红色数量徽章 */
.bottom-nav .nav-item .nav-icon { position: relative; }
.plan-badge {
position: absolute;
top: -4px;
right: -8px;
min-width: 16px;
height: 16px;
padding: 0 4px;
border-radius: 8px;
background: #ef4444;
color: #fff;
font-size: 11px;
font-weight: bold;
line-height: 16px;
text-align: center;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
/* 深度解析页顶部条：< 返回 + tab 切换 */
.plan-topbar {
display: flex;
align-items: center;
justify-content: space-between;
/* 上下留白压缩（2026-07-31 用户订立）：这是 sticky 顶栏，占的是每一屏的固定成本。
要调就改这里的 4px（上）与 3px（下）；左右仍走 --h5-page-inline。
原值 var(--h5-card-block) / calc(var(--h5-card-block)/2) = 12px / 6px。 */
padding: 3px var(--h5-page-inline) 2px;
background: #fff;
border-bottom: 1px solid #f3f4f6;
position: sticky;
top: 0;
z-index: 10;
}
.plan-tabs {
display: flex;
gap: calc(var(--h5-control-gap) + var(--h5-control-gap) + var(--h5-control-gap));
flex: 1;
justify-content: center;
}
.plan-tab {
border: none;
background: transparent;
font-size: var(--plan-tab-size);
font-weight: bold;
color: #6b7280;
/* 上 2px / 下 5px（2026-07-31 用户订立）。
⚠️ 下边距不能再压：.plan-tab.active::after 的红色下划线是 bottom:0 贴在
padding-box 底部的，压到 0 会顶到文字。原值 4px / 8px。 */
padding: 1px calc(var(--h5-control-gap) / 2) 3px;
cursor: pointer;
position: relative;
}
.plan-tab.active {
color: #dc2626;
}
.plan-tab.active::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
width: 28px;
height: 3px;
background: #dc2626;
border-radius: 2px;
transform: translateX(-50%);
}
.plan-list {
padding: 1px 3px 3px clamp(2px, calc(2.13vw - 2.8px), 3px);
container-type: inline-size;
container-name: plan-card-host;
} /* 左侧留白收窄让给标题行；右侧 8px = 👍 角标外凸量，刚好不溢出 */
/* 日期分组条：H5 纵向空间紧张，且一屏内会出现多个（昨天+今明后最多四个），
上下留白按 2px 外距 + 3px 内距压到最小（2026-07-31 用户订立）。
⚠️ 要调高度就改这两个值：margin 的上下（2px）与 padding 的上下（3px）；
左右间距仍走令牌，不要动。原值是 margin var(--h5-section-gap)/var(--h5-card-gap)
+ padding var(--h5-card-gap)，纵向共 36px，现为 10px。 */
/* 三列 grid `1fr auto 1fr`：中列只装「显示/隐藏」，两侧 1fr 恒等宽 ⇒ 按钮中心线锁在行正中，
不随统计文字长短（11/14 vs 0/0）漂移。space-between 做不到这点：中间元素会被两侧推着走，
几行按钮竖向对不齐。同 CLAUDE.md §6.3 的 VS 居中做法。 */
.plan-date-group{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
margin:0px 1px;
padding:1px var(--h5-card-inline);border-radius:8px;background:#f8fafc;
/* 整行三个元素同步缩，保证 320px 日期不折行（原 13px 时折 2 行） */
--plan-date-font:clamp(11px, calc(4.4vw - 3.08px), calc(var(--h5-font-body) - 1.5px));
color:#6b7280;font-size:var(--plan-date-font);}
.plan-date-group:first-child{margin-top:2px;}
/* 日期与场次数都是次要信息：不加粗、灰色，视觉重量让给上方的方案制作区 */
.plan-date-group b{font-weight:400;}
.plan-date-group span{justify-self:end;}
/* S16 未选区日期行的「显示/隐藏」：各天互相独立摊开 —— 见 H5/docs/H5主站样式设计说明.md */
.plan-day-toggle{border:1px solid #e5e7eb;background:#fff;color:#9ca3af;border-radius:12px;
padding:0 6px;font-size:calc(var(--plan-date-font) - 1px);line-height:1.45;cursor:pointer;}
.plan-date-group.open .plan-day-toggle{border-color:#9ca3af;color:#6b7280;}
/* 按钮有显式底色，浏览器默认的 disabled 灰压不住，必须自己置灰 */
.plan-day-toggle:disabled{background:#f9fafb;color:#d1d5db;border-color:#f3f4f6;cursor:not-allowed;}
/* S17 赛程精选区标题：已选场次跨日期集中于此 —— 见 H5/docs/H5主站样式设计说明.md
2026-09-24 加两侧合规文案后改三栏 grid（1fr auto 1fr）：中间"方案制作区"仍靠 auto 列
真正居中、不受两侧文案长度影响（flex space-between 会因两侧文案不等长而把中心挤偏，
grid 的 auto 列天生不受相邻列宽度影响，是延续原有"中心对称"设计意图的最小改法）。 */
.plan-picked-title{margin:2px 1px 3px;padding:2px var(--h5-card-inline);border-radius:8px;
/* 中间浅、两边深的对称渐变：文字与两侧括号都是居中对称的，单向渐变会显得整条偏一边 */
background:linear-gradient(90deg,#fbdada 0%,#fffafa 50%,#fbdada 100%);
color:#b91c1c;font-weight:800;font-size:var(--h5-font-body);
display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:4px;}
/* 两侧合规文案：字号明显小于中间标题，允许换行（内容优先，不截断不隐藏），
透明度略降以突出中间标题的视觉主次 */
.plan-picked-side{font-size:clamp(8px,calc(1.8vw + 0.8px),10px);font-weight:500;
color:#b91c1c;line-height:1.3;opacity:.82;}
.plan-picked-left{text-align:left;}
.plan-picked-right{text-align:right;}
/* 文字两侧的中括号，用伪元素挂在行内 —— 原写法是容器的 border-left，标题居中后它仍钉在
最左边，看着像个孤零零的括号。伪元素属于行内内容，跟着文字一起居中、天生左右对称。
括号靠「三条边 + 缺一条竖边」画出，比竖条更像标点、也比字符 【】 好控尺寸。 */
.plan-picked-center{text-align:center;white-space:nowrap;}
.plan-picked-center::before,
.plan-picked-center::after{content:'';display:inline-block;width:5px;height:.92em;
border:2px solid #ef4444;vertical-align:-.16em;}
.plan-picked-center::before{border-right:none;margin-right:8px;}
.plan-picked-center::after{border-left:none;margin-left:8px;}
.plan-picked-empty{margin:0 1px 4px;padding:14px 8px;border-radius:8px;background:#fff;
text-align:center;color:#ef4444;font-size:calc(var(--h5-font-body) - 1px);}
/* AI精选：独立于串关购物车，仅展示模型返回且经后端白名单校验的方案。 */
/* ── AI精选：尺寸/间距全部随屏宽自适应（2026-07-28 用户要求，不再写死）──────────
容器内容宽实测：320px→268、360px→308、380px→328、414px→362。 */
.ai-plan-root{padding:clamp(8px,3.75vw - 4px,12px);max-width:760px;margin:0 auto;}
.ai-plan-ask{background:#fff;border-radius:14px;padding:clamp(8px,5vw - 4px,18px) clamp(8px,3.75vw - 2px,10px);box-shadow:0 2px 10px rgba(0,0,0,.05);}
/* 标题「您需要我帮您选择一个什么样的方案呢？」18 字，18px 时需 ~324px → <380px 会折成两行。
字号随屏宽收缩保证始终单行：380px→18px 设计值、320px→14.6px（18 字 ×14.6≈263 < 268 可用宽）。 */
.ai-plan-ask h2{text-align:center;font-size:clamp(14.5px,calc(5.7vw - 3.6px),18px);color:#111827;margin:0 0 clamp(9px,3.75vw - 3px,14px);font-weight:800;white-space:nowrap;}
.ai-plan-input-row{display:flex;gap:clamp(5px,2.5vw - 2px,8px);align-items:stretch;}
/* 垂直 padding 单独收窄：rows=2 的文本框原用四边统一 padding，整行被撑高，
右侧「生成精/选方案」按钮（align-items:stretch 跟随等高）两行文字上下留出大片空白。 */
.ai-plan-input{min-width:0;flex:1;border:1px solid #d1d5db;border-radius:9px;padding:clamp(4px,calc(1.6vw - 1.1px),6px) clamp(7px,3vw - 2.6px,10px);font-size:var(--h5-font-input);line-height:1.35;}
/* 按钮文案由三行「生成/精选/方案」改为两行（见 ai_select.js），高度降下来、整体更紧凑；
宽度同步随屏宽收缩，不再写死 58px 挤占输入框。 */
/* 文案两行、每行 3 字（生成精 / 选方案）：3 字 ×13px≈39px，故按钮 50~58px 足够，
左右 padding 一并随屏宽收缩（原写死 2px 显得文字贴边、而按钮又偏宽，比例失调）。
⚠️ 按钮宽度必须 ≥ 单行字数 × 字号 + padding×2，否则会被再折一行（曾压到 47px 时“生成精选”
4 字放不下、折回 3 行）。 */
.ai-plan-generate{width:clamp(44px,calc(4.3vw + 30px),52px);flex-shrink:0;border:0;border-radius:9px;background:#ef4444;color:#fff;font-weight:800;font-size:clamp(11.5px,calc(1.6vw + 6.4px),13px);line-height:1.35;white-space:pre-line;cursor:pointer;padding:0 clamp(3px,calc(2.1vw - 3.7px),5px);}
.ai-plan-generate:disabled,.ai-plan-input:disabled,.ai-plan-preset:disabled{opacity:.48;cursor:not-allowed;}
/* 备选文案间距收紧：gap 8→4~6px、上边距 12→8~10px，避免窄屏下大片留白 */
.ai-plan-presets{display:flex;flex-wrap:wrap;gap:clamp(4px,2vw - 2.4px,6px);margin-top:clamp(8px,2.5vw,10px);}
.ai-plan-preset{border:0;border-radius:14px;background:#f3f4f6;color:#4b5563;padding:clamp(5px,2vw - 1.4px,7px) clamp(7px,3vw - 2.6px,10px);font-size:clamp(11px,2.1vw + 4.3px,12px);text-align:left;cursor:pointer;line-height:1.35;}
/* 配额提示必须**始终一行**：原 13px 写死，340px 下折成两行、与宽屏观感不一致。
窄屏只缩字号、不折行（nowrap 兜底，防极窄屏再次折回两行）。 */
.ai-plan-status{margin:12px 2px;color:#6b7280;font-size:clamp(10.5px,calc(2.66vw + 2px),13px);white-space:nowrap;}
/* 各会员档位 AI 精选每日次数对照表（2026-09-24 取代静态提示文案）：生成前唯一提示，
引导充值，见 ai_select.js _quotaTableHtml 注释。 */
.ai-quota-table{margin-top:var(--h5-section-gap);background:#fff;border-radius:14px;
padding:var(--h5-card-block) var(--h5-card-inline);box-shadow:0 2px 10px rgba(0,0,0,.05);}
.ai-quota-title{font-size:var(--h5-font-body);font-weight:700;color:#374151;
margin-bottom:var(--h5-card-gap);text-align:center;}
.ai-quota-row{display:flex;align-items:center;justify-content:space-between;gap:8px;
padding:var(--h5-card-gap) 2px;border-bottom:1px solid #f3f4f6;cursor:pointer;}
.ai-quota-row:last-child{border-bottom:0;}
.ai-quota-row:active{background:#f9fafb;}
/* 当前档位整行加背景色（2026-09-24 用户订立）：光靠「我的」角标不够醒目，
与角标同色系的浅红底，撑满行宽方便一眼扫到 */
.ai-quota-row.is-mine{background:#fef2f2;border-radius:8px;padding-left:6px;padding-right:6px;
margin:0 -6px;border-bottom-color:transparent;}
/* 表头行：列名说明，不可点、不响应点击态，字号更小、颜色更浅以区分数据行 */
.ai-quota-row.ai-quota-head{cursor:default;font-size:var(--h5-font-aux);color:#9ca3af;
border-bottom:1px solid #e5e7eb;}
.ai-quota-row.ai-quota-head:active{background:none;}
.ai-quota-row.ai-quota-head .ai-quota-tier,
.ai-quota-row.ai-quota-head .ai-quota-value{color:#9ca3af;font-weight:400;}
.ai-quota-tier{display:flex;align-items:center;gap:6px;}
.ai-quota-icon-wrap{position:relative;flex-shrink:0;line-height:0;}
.ai-quota-icon{width:22px;height:22px;border-radius:50%;object-fit:cover;display:block;}
/* 「我的」角标：叠在头像右上角（2026-09-24 用户订立），标记当前有效会员档位；
会员失效/未登录时固定落在【注册用户】行，见 ai_select.js _quotaTableHtml */
.ai-quota-badge{position:absolute;top:-7px;right:-8px;background:#dc2626;color:#fff;
font-size:9px;font-weight:700;padding:1px 4px;border-radius:6px;line-height:1.3;white-space:nowrap;}
.ai-quota-name{font-size:var(--h5-font-body);color:#1f2937;font-weight:600;white-space:nowrap;}
.ai-quota-value{font-size:var(--h5-font-aux);color:#6b7280;text-align:right;white-space:nowrap;}
/* 合规提醒条（2026-09-24 用户订立，加强风险防御等级）：通用组件，AI 精选页底部与
首页吸附条共用同一份视觉——浅蓝底 + ⓘ 图标，色值与本页「推荐理由」摘要块
（.ai-plan-summary）同一套蓝，全站保持一致。 */
.info-notice-bar{display:flex;align-items:center;gap:6px;margin-top:var(--h5-section-gap);
background:#eff6ff;border:1px solid #bfdbfe;border-radius:10px;
padding:8px var(--h5-card-inline);color:#1d4ed8;
font-size:clamp(10.5px,calc(2.3vw + 2px),12.5px);line-height:1.45;}
/* 图标用 CSS 画圆圈 + 纯 ASCII 字母 i，不用 ⓘ 这类特殊 Unicode 符号——同一坑踩过一次
（AI 精选翻页箭头 ‹›，见本文件 .ai-hist-arrow 注释）：生僻符号缺字形时会显示成方块，
几何图形/ASCII 字符不依赖字体，各设备渲染一致。 */
.info-notice-icon{flex-shrink:0;width:14px;height:14px;border:1.5px solid #1d4ed8;border-radius:50%;
display:inline-flex;align-items:center;justify-content:center;
font-size:10px;font-weight:700;font-style:italic;line-height:1;}
/* 首页专用：吸附在底部导航栏正上方，脱离文档流固定悬浮，随 .app-wrap 一起显隐 */
.info-notice-fixed{position:fixed;left:50%;transform:translateX(-50%);
bottom:calc(var(--h5-bottom-nav-height) + env(safe-area-inset-bottom) + 6px);
width:calc(100% - 2 * var(--h5-page-inline));
max-width:calc(480px - 2 * var(--h5-page-inline));
margin-top:0;box-shadow:0 2px 10px rgba(0,0,0,.06);z-index:900;}
.ai-plan-result{margin-top:var(--h5-section-gap);background:#fff;border-radius:14px;
padding:var(--h5-card-block) var(--h5-card-inline);box-shadow:0 2px 10px rgba(0,0,0,.05);}
/* 历史导航条（2026-09-23）：左「‹ 序号/总数 ›」翻看本日期 tab 下点标签/生成过的历次方案，
中「本条方案对应的指令标签」，右「推荐理由 + 开关」，默认收起（2026-08-06 用户订立沿用）——
理由较长，收起后用户先看到方案卡片与奖金试算，需要时再展开。 */
.ai-hist-head{display:flex;align-items:center;justify-content:space-between;gap:6px;
padding:0 2px 3px;margin-bottom:var(--h5-card-gap);}
.ai-hist-pager{display:flex;align-items:center;gap:2px;flex-shrink:0;}
.ai-hist-pager-single{min-width:1px;}
/* 翻页箭头（2026-09-24 改法）：不再用 ‹› 文字符号——这类字符的字体度量本身上下不
对称，无论 font-size 调多大、line-height/flex 怎么居中，字形本身偏心的问题都在，
越放大越明显。改成纯 CSS 边框旋转画的几何箭头，不依赖任何字体，天然居中。
JS（ai_select.js _headerHtml）里的 ‹/› 文字仍原样保留在按钮里，靠 font-size:0
让它不可见、不占地方，只用来给不看样式的场景（如屏幕阅读器）留一个文本提示。 */
.ai-hist-arrow{border:0;background:#f3f4f6;width:38px;height:38px;padding:0;
border-radius:50%;cursor:pointer;flex-shrink:0;font-size:0;line-height:0;color:transparent;
display:inline-flex;align-items:center;justify-content:center;}
.ai-hist-arrow::before{content:'';display:block;width:10px;height:10px;
border:solid #4b5563;border-width:0 2.5px 2.5px 0;}
.ai-hist-pager .ai-hist-arrow:first-child::before{transform:rotate(135deg);margin-left:3px;}
.ai-hist-pager .ai-hist-arrow:last-child::before{transform:rotate(-45deg);margin-right:3px;}
.ai-hist-arrow:disabled{opacity:.4;cursor:not-allowed;}
.ai-hist-count{font-size:21px;font-weight:500;color:#4b5563;min-width:44px;text-align:center;}
.ai-hist-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
font-size:var(--h5-font-aux);color:#9ca3af;text-align:center;padding:0 4px;}
.ai-hist-reason{display:flex;align-items:center;gap:6px;flex-shrink:0;color:#dc2626;
font-size:var(--h5-font-body);font-weight:700;}
/* 仿后台 .toggle-switch 的纯 CSS 药丸开关（admin.html 同款几何，颜色改用本页主色） */
.ai-reason-switch{position:relative;width:34px;height:18px;background:#d1d5db;border-radius:9px;
transition:background .2s;flex-shrink:0;cursor:pointer;}
.ai-reason-switch::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;
background:#fff;border-radius:50%;transition:left .2s;box-shadow:0 1px 3px rgba(0,0,0,.15);}
.ai-reason-switch.on{background:#dc2626;}
.ai-reason-switch.on::after{left:18px;}
.ai-plan-summary{padding:var(--h5-card-gap) var(--h5-card-inline);background:#eff6ff;
border-radius:9px;color:#1e3a5f;font-size:var(--h5-font-body);line-height:1.55;}
/* 额度用完 / 意图不明 弹窗：复用 .dlg-overlay/.dlg-box-white/.dlg-close-red 壳子 */
.ai-plan-modal-box{text-align:center;}
.ai-plan-modal-title{font-size:16px;font-weight:bold;color:#374151;margin-bottom:10px;}
.ai-plan-modal-text{font-size:var(--h5-font-body);color:#4b5563;line-height:1.6;}
.ai-plan-modal-qr{display:block;margin:14px auto 0;max-width:220px;width:100%;height:auto;
border:1px solid #e5e7eb;border-radius:8px;}
.ai-plan-modal-qr-tip{font-size:12px;color:#9ca3af;margin-top:8px;}
/* container-name 必须与 .plan-list 同名（plan-card-host）：AI 精选页的卡片也套了
.plan-card-view（见 ai_select.js），而共享 plan_card.css 里的 @container plan-card-host
降档规则要找到同名容器才生效 —— 少了这两行，AI tab 在极窄屏拿不到字号/间距的压缩档。 */
.ai-plan-cards{display:flex;flex-direction:column;gap:var(--h5-card-gap);
margin:var(--h5-card-gap) 0;
container-type:inline-size;container-name:plan-card-host;}
/* 保存 / 分享方案：字号与内边距同步随屏宽收缩（与串关精选页 .plan-action-btn 同思路） */
/* 底部双按钮（恢复官方推荐 / 继续添加） */
.plan-action-bar {
/* ⚙️ 与 .plan-calc-block 同一套压缩口径（2026-08-01 用户订立），微调改这一行。
padding 由 0 改为 3px（2026-08-06）：四个按钮改成独立圆角框后需留出边距，
否则两端的框贴死白卡边缘、被圆角裁掉，看不出是独立框。 */
margin: 2px 6px 0; /* ← 第三个值 = 与下方「过关方式」卡的缝，调这里 */
padding: 3px;
background: #fff;
border-radius: 10px;
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
display: flex;
gap: var(--h5-control-gap);
}
.plan-action-btn {
flex: 1;
/* 2026-08-03 用户订立：边框只比文字略大、勉强包住即可，min-height 让位给 padding:1px。
2026-08-06 用户订立：底色/边框/圆角照搬 .plan-opt-btn，与白色赛事卡片形成区分。 */
min-height: 0;
padding: 2px calc(var(--h5-control-gap) / 2);
border: 1px solid #d1d5db;
border-radius: 8px;
background: #f3f4f6;
color: #dc2626;
font-size: var(--h5-font-aux);
font-weight: 500;
white-space: nowrap;
cursor: pointer;
transition: background 0.15s;
}
.plan-action-btn.left { color: #6b7280; }
.plan-action-btn:active:not(:disabled) { background: #fef2f2; }
.plan-action-btn:disabled {
color: #d1d5db;
cursor: not-allowed;
}
/* 底部悬浮操作条：保存方案 / 分享方案 */
.plan-bottom-bar {
position: fixed;
left: 0; right: 0; bottom: 0;
max-width: 480px;
margin: 0 auto;
background: #fff;
box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
padding: var(--h5-control-gap) var(--h5-page-inline)
calc(var(--h5-control-gap) + env(safe-area-inset-bottom));
display: flex;
gap: var(--h5-control-gap);
z-index: 50;
}
.plan-bottom-btn {
flex: 1;
min-height: var(--h5-tap-primary);
padding: var(--h5-card-block) 0;
border: none;
border-radius: 8px;
font-size: var(--h5-font-body);
font-weight: bold;
cursor: pointer;
transition: opacity 0.15s;
}
.plan-bottom-btn.save { background: #fef2f2; color: #dc2626; }
.plan-bottom-btn.share { background: #dc2626; color: #fff; }
.plan-bottom-btn:active { opacity: 0.7; }
/* 进入 plan 页时给底部留出 plan-bottom-bar 的高度 */
#page-plan {
/* body 层独立页：占满视口高度，内部 overflow-y:auto 滚动（showPlanPage 时显示）*/
height: 100%;
/* 底部腾出：保存/分享 bar(~64) + 常驻页脚(56) + 安全区 */
padding-bottom: calc(var(--h5-action-bar-height) + var(--h5-bottom-nav-height) + 8px
+ env(safe-area-inset-bottom));
}
/* S2 plan 页赛事卡片：大部分规则**已失效**，卡片改用共享 plan_card.css。
改卡片样式请改共享文件；仍生效的只有 .out-cart / .plan-act-inline / .plan-cart-divider
—— 见 H5/docs/H5主站样式设计说明.md 与 H5/docs/赛程卡片公共样式的设计和使用范围.md */
.plan-match-card {
--plan-team-size: clamp(9px, calc(3.19vw - 1.2px), 12px);
--plan-score-size: clamp(9px, calc(2.13vw + 2.2px), 11px);
--plan-vs-size: clamp(9.5px, calc(3.72vw - 2.4px), 13px);
--plan-summary-size: clamp(8.5px, calc(1.6vw + 3.4px), 10px);
position: relative;
background: #fff;
border-radius: 10px;
padding: 7px clamp(4px, calc(2.13vw - 2.8px), 6px);
margin-bottom: 4px;
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
border: 1.5px solid transparent;
}
/* 购物车归属：上半区入车高亮（自选=绿 / 官方推荐=蓝），下半区未入车弱化（灰），已结束=只读淡显 */
.plan-match-card.in-cart {
border-color: #22c55e; /* 自选：绿框 */
background: #f0fdf4;
}
.plan-match-card.in-cart.recommended {
border-color: #3b82f6; /* 官方推荐：蓝框浅蓝底 */
background: #eff6ff;
}
/* out-cart 是**串关精选页独有**的状态（方案卡片里的场次都已入选），共享 plan_card.css 里没有
对应项 —— 而共享的 `.plan-card-view .plan-match-card{border:1.5px solid transparent}` 与
`.plan-match-card.out-cart` 特异性同为 (0,2,0)、且共享后加载，会把这里的 border-color 覆盖掉
（实测未入车卡片丢了灰框）。故本条必须用**双类选择器**(0,3,0) 压回来。
⚠️ 两个选择器都保留：套了作用域走前者，万一将来去掉 .plan-card-view 也不会失效。 */
.plan-match-card.out-cart,
.plan-card-view .plan-match-card.out-cart {
border-color: #e5e7eb; /* 未入车：灰框弱化 */
background: #fafafa;
opacity: 0.9;
}
.plan-match-card.finished {
border-color: #e5e7eb;
background: #f9fafb;
opacity: 0.92; /* 已结束：只读复盘，淡显 */
}
.plan-match-card.postponed {
border-color: #d1d5db;
background: #f9fafb;
opacity: 0.92;
}
/* 量化推荐戳「精」：2026-08-06 起取代原右上角 👍 圆标，改为右侧行内黄戳（借鉴 web 的「量化精选」，
H5 窄故只留一字）。行内元素、不绝对定位 —— 与时间/移除按钮同处 .plan-sum-right 靠右排列。
配色同 web 的 .rec-stamp；尺寸参照同排的 .plan-status-postponed。 */
.plan-card-view .rec-stamp {
flex-shrink: 0;
margin-right: 2px; /* 与时间留一点距离：外层 gap 仅 2~3px，紧贴着不好认 */
padding: 1px 3px;
border: 1px solid #d97706;
border-radius: 5px;
background: #fef3c7;
color: #b45309;
font-size: 10px;
font-weight: 800;
line-height: 1.2;
}
/* S3 「单」盾牌不占位，**勿恢复** single-eligible 的 padding-left —— 见 H5/docs/H5主站样式设计说明.md */
/* 上/下半区分隔条 */
.plan-cart-divider {
text-align: center;
color: #9ca3af;
font-size: 12px;
margin: 4px 0 6px;
position: relative;
}
.plan-cart-divider::before,
.plan-cart-divider::after {
content: '';
position: absolute;
top: 50%;
width: 22%;
height: 1px;
background: #e5e7eb;
}
.plan-cart-divider::before { left: 6%; }
.plan-cart-divider::after { right: 6%; }
/* 窄屏挤压治理（2026-07-28）：这一行要塞 场次号+联赛+主队评分/队名+VS+客队队名/评分+时间+按钮，
340px 下内容需求远超可用宽度。左右两列子元素都是 flex-shrink:0（不收缩），容器被压扁后内容直接溢出：
左列被 overflow:hidden 裁掉（“欧冠”→“欧”），右列原本没有 overflow 直接压到中间队名上（“萨巴赫82.2”盖上“23:00”）。
治理方式遵循既有设计——**保留“左右等宽 flex:1 → 中间块落卡片正中”不动**，只按屏宽压缩字号/间距/队名宽度。
全部用 clamp 平滑收缩（414px 维持原观感、320px 压到下限），不再用硬断点。 */
.plan-card-summary {
--rec-avoid: 8px; /* 右列避开 👍 角标所需的内缩量 */
--single-avoid: 8px; /* 左列避开「单」盾牌所需的内缩量；与 --rec-avoid 同值才对称 */
display: flex;
align-items: center;
gap: clamp(2px, calc(1.06vw - 1.4px), 3px);
min-width: 0;
padding: 0 clamp(2px, calc(1.06vw - 1.4px), 3px) 4px; /* action 已移入右列，两侧对称留白、更紧凑 */
white-space: nowrap;
/* 由 hidden 改为 visible（2026-07-30）：这一层会把探出行外的队徽上下两端裁掉。
横向溢出并不依赖这道 —— .plan-sum-left / .plan-sum-right 各自 overflow:hidden，
队名由 .team-name-text 的 max-width + ellipsis 收口，去掉本行不会让内容互相压。
（overflow-x/y 不能一个 hidden 一个 visible：那样 visible 会被算成 auto 并出滚动条。） */
overflow: visible;
font-size: var(--plan-summary-size);
line-height: 1.25;
}
/* 单行三列：左右等宽(flex:1) → 中间队名块落卡片正中，VS 绝对居中、镜像对称 */
.plan-sum-left { flex: 1 1 0; --sum-min: clamp(58px, calc(14.89vw + 10.35px), 72px); min-width: var(--sum-min); display: flex; align-items: center; gap: clamp(2px, calc(1.06vw - 1.4px), 3px); justify-content: flex-start; overflow: hidden; }
/* 右列同样要 overflow:hidden：否则内容溢出后会压到中间队名上（时间叠在队名上的根因） */
.plan-sum-right { flex: 1 1 0; --sum-min: clamp(58px, calc(14.89vw + 10.35px), 72px); min-width: var(--sum-min); display: flex; align-items: center; gap: clamp(2px, calc(1.06vw - 1.4px), 3px); justify-content: flex-end; overflow: hidden; }
/* center 必须 flex-grow:1：左右列 flex:1 1 0 会把全部剩余空间分光（320px 实测各拿 80.9px 却只需 ~53px），
center 不 grow 就只能停在 basis 宽度上、队名被迫省略。三列都 grow 时左右仍等宽，VS 照样严格居中。 */
/* S4 max-width 保「时间不被吃掉」（左溢出不计入 scrollWidth，测不出来）—— 见 H5/docs/H5主站样式设计说明.md */
.plan-sum-center{ flex: 1 1 auto; min-width: 0; max-width: clamp(184px, calc(54.3vw + 10.2px), 250px); display: flex; align-items: center; justify-content: center; gap: clamp(2px, calc(1.06vw - 1.4px), 3px); }
.plan-sum-center .plan-compact-team { flex: 1 1 0; } /* 等分保证 vs 居中；
原有的 max-width 已删除——6 字省略由 .team-name-text 的 5.35em 负责，
这里再限一道会先一步卡死队名（320px 实测只剩 36.7px，5 字放不下） */
/* 右列内联操作按钮：已入车=✓已选(可点移出)、未入车=+加入 */
/* 右列内容统一左移避开 👍 角标圆覆盖区：**所有卡片一致**，否则有角标/无角标两种卡片的
「时间+已选」与「时间+加入」竖向对不齐。左右两列同时加宽同样的量 —— 只加右列会让两列
不等宽，vs 就不再严格居中。 */
.plan-sum-left, .plan-sum-right { min-width: calc(var(--sum-min) + var(--rec-avoid)); }
.plan-sum-right { padding-right: var(--rec-avoid); }
/* 左列同理避开「单」盾牌外凸后留在卡片内的那一截（2026-08-01）。
与右侧 --rec-avoid 取同值，两列内容可用宽度才相等、vs 保持严格居中；
且**所有卡片一致**（无单关标签的也加），否则两种卡片的期号竖向对不齐。 */
.plan-sum-left { padding-left: var(--single-avoid); }
.plan-act-inline { flex-shrink: 0; padding: 2px clamp(3px, calc(2.13vw - 3.8px), 5px); border-radius: 10px; border: none; font-size: clamp(8.5px, calc(1.6vw + 3.4px), 10px); font-weight: 700; cursor: pointer; line-height: 1.2; }
.plan-act-inline.selected { background: #fee2e2; color: #dc2626; }
/* 串关精选页专用：整行同步连续缩放 + 榨干容器留白，保证 6 字队名完整显示。
遵循 §0.5 响应式第一原则（内容一个不删，只回收留白→缩间隙→缩字号）——
本页右列比方案卡片多「精」戳与「×移除」按钮，中列少约 44px。
⚠️ 队名字号取 --share-core-size（.team-name-text 的 font-size:var(--plan-card-core)）；
--share-summary-size 只管 .plan-card-summary 及其继承元素（时间/联赛），改错变量白改（已踩坑）。
取值由 320/375/414 三档实测二分得出（6+6 字形完整的最大队名字号 8.49/10.4/11.49px）
再拟合直线并留余量；上限保持原值，宽屏不缩。
⚠️ **AI 精选页刻意不在此作用域内**：它是 readonly、右列无加入/移除按钮（42.7px vs 75.8px），
实测可用字号 11.49/13.49/15.49px，共享 CSS 的原档位值(11/12/13px)本就放得下，
跟着缩属于「盲目缩放」（2026-08-06 用户订立：缩放要根据实际）。
⚠️ 方案明细页(#page-plan-detail)与分享页各有自己的覆盖，均不受此段影响。 */
#page-plan .plan-card-view {
--share-summary-size: clamp(6.8px, calc(1.20vw + 3.00px), 10px); /* 时间/联赛等继承元素 */
--share-score-size: clamp(6.2px, calc(2.39vw - 1.31px), 9px);
--share-vs-size: clamp(7.7px, calc(2.94vw - 1.62px), 11px);
}
#page-plan .plan-card-view .plan-card-summary {
--rec-avoid: 2px; --single-avoid: 2px; /* 两侧同值，不等会把中列推偏 */
gap: clamp(1px, calc(0.8vw - 1.5px), 2px);
padding-left: 1px; padding-right: 1px;
}
#page-plan .plan-card-view .plan-sum-left, #page-plan .plan-card-view .plan-sum-right,
#page-plan .plan-card-view .plan-sum-center { gap: clamp(1px, calc(0.8vw - 1.5px), 2px); }
/* 榨干容器留白：原 .plan-list 的 3px 与卡片的 4px padding 都是为容纳外凸角标而设，
角标（👍 / 单关盾牌）均已删除，回收给队名区。 */
#page-plan #planListMulti { padding-left: 1px; padding-right: 1px; }
#page-plan .plan-card-view .plan-match-card { padding-left: 2px; padding-right: 2px; }
/* 6+6 字形时连队徽一起缩：共享 CSS 只在 ≤360px 做，本页右列更挤，全档都需要 */
#page-plan .plan-card-view .plan-match-card.name-tight-both .team-badge { --badge-size: 0.7em; } /* ×移除（红）：文案指向下一步动作，配色随之 */
.plan-act-inline.add { background: #dbeafe; color: #2563eb; } /* +加入（蓝）：与红色的「×移除」区分，两个动作一眼可辨 */
.plan-act-inline:active { transform: scale(0.94); }
.plan-status-postponed {
flex-shrink: 0;
padding: 1px 4px;
border-radius: 7px;
background: #6b7280;
color: #fbbf24;
font-size: 11px;
font-weight: 700;
line-height: 1.2;
}
.plan-status-cancelled {
flex-shrink: 0;
padding: 1px 4px;
border-radius: 7px;
background: #6b7280;
color: #f87171;
font-size: 11px;
font-weight: 700;
line-height: 1.2;
}
.plan-card-no,
.plan-card-league,
.plan-card-time,
.plan-summary-middle{ flex-shrink: 0; }
.plan-card-no { color: #ef4444; font-weight: 700; }
/* 左列空间不足时优先省略联赛名（信息价值最低），保证场次号完整——原为 flex-shrink:0，
会被父级 overflow 硬裁成半个字（“欧冠”→“欧”+半字）。 */
.plan-card-league { color: #2563eb; font-weight: 600; flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.plan-card-time { color: #6b7280; }
/* 改 flex 容器：队名与评分拆成两个子元素，只让队名 ellipsis，评分 flex-shrink:0 永不被截。
此前队名是裸文本、评分是尾部 inline 子元素，ellipsis 作用在整体上会把评分一起截掉
（340px 实测“萨巴赫82…”，评分是实力量化的核心信息，不能截）。 */
.plan-compact-team {
flex: 1 1 0;
min-width: 0;
display: flex;
/* 由 baseline 改为 center（2026-07-30）：加队徽后客队侧 ![]()
排在 flex 首位，
inline-flex 的基线取自它的底边，客队评分会比主队评分低一截。与分享页同口径居中对齐
（两处是同一份 plan_share_view.js 渲染，对齐方式必须一致）。 */
align-items: center;
/* 由 hidden 改为 visible：否则会把探出行外的队徽上下两端裁掉。
队名超长的截断职责在内层 .team-name-text（max-width + ellipsis），这里不需要再兜一道。 */
overflow: visible;
color: #1f2937;
font-size: var(--plan-team-size);
font-weight: 600;
}
.plan-compact-team.home { justify-content: flex-end; }
.plan-compact-team.away { justify-content: flex-start; }
.plan-compact-team .team-name-text {
min-width: 0;
max-width: 6.3em; /* 与首页 .team-name 同口径：放得下「5字+…」共 6 个字形 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 卡内评分比全局 .team-score-value（clamp 13~15px）再收一档：一行里左右各一个，省下的宽度留给队名 */
.plan-compact-team .team-score-value {
flex-shrink: 0;
color: #ef4444;
font-weight: 700;
font-size: var(--plan-score-size);
margin: 0 clamp(2px, calc(1.06vw - 1.4px), 2.5px);
}
.plan-summary-middle {
color: #ef4444;
font-weight: 800;
text-transform: lowercase; /* 「VS」→「vs」：小写更窄，为单行标题腾宽度（比分为数字，不受影响） */
font-size: var(--plan-vs-size);
margin: 0 clamp(1px, calc(1.06vw - 2.4px), 2px);
}
.plan-odds-row {
display: flex;
align-items: center;
gap: 3px;
margin-top: 2px;
}
.plan-odds-label {
position: relative; /* mk-single 角标锚点 */
overflow: hidden; /* 旋转 45° 的方块由框裁成三角 */
flex-shrink: 0;
/* 宽 28→56（2 倍）：左上角放「单」角标（2026-08-05 用户订立） */
width: 56px;
height: 28px;
border: 1px solid #e5e7eb;
border-radius: 5px;
background: #f9fafb;
font-size: 13px;
font-weight: 700;
color: #888;
text-align: center;
line-height: 26px;
}
.plan-odds-label.positive { color: #2563eb; }
.plan-odds-label.negative { color: #ef4444; }
.plan-odds-label.zero { color: #888; }
.plan-odds-box {
position: relative; /* .ai-mark::after 的定位锚点：挪到基类上，使角标与 .predicted 背景色解耦 */
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 3px;
min-height: 28px;
padding: 2px;
border: 1px solid #e5e7eb;
border-radius: 6px;
cursor: pointer;
transition: all 0.12s;
user-select: none;
}
/* 选择 selection：用户计入组合 → 实红底白字（强） */
.plan-odds-box.active {
background: #ef4444;
border-color: #ef4444;
color: #fff;
}
/* 预测 prediction：仅后台预测、未入选 → 浅红底红字（弱，标注性；比 .active 弱一档，不会误当"已选"） */
.plan-odds-box.predicted {
background: #fee2e2;
border-color: #fca5a5;
color: #dc2626;
}
/* 「Ai」角标：右上角白底+蓝边圆，标注"这是 AI 预测的赔率"这一事实。与背景色（.predicted/.active）
解耦——只要该赔率是 AI 预测就一直显示，不随选中/未选中切换（此前用 .predicted::after 承载，
选中后 .predicted 类被摘掉、角标跟着消失，是已反馈的 bug）。*/
.plan-odds-box.ai-mark::after {
content: 'Ai';
position: absolute;
top: -7px;
right: -5px;
box-sizing: border-box;
width: 18px;
height: 18px;
border-radius: 50%;
background: #fff;
border: 1.5px solid #0ea5e9;
color: #ef4444;
display: flex;
align-items: center;
justify-content: center;
font-size: 8px;
font-weight: 800;
letter-spacing: -0.3px; /* "Ai" 双字符比单字「荐」宽，收紧字距避免贴边 */
line-height: 1;
box-shadow: 0 1px 3px rgba(14,165,233,.3);
z-index: 2;
}
.plan-odds-box.disabled {
opacity: 0.5;
cursor: not-allowed;
background: #f9fafb;
}
.plan-odds-box .plan-odds-type { font-size: 12px; line-height: 1.2; }
.plan-odds-box .plan-odds-val { font-size: 13px; font-weight: 400; line-height: 1.2; }
/* 原 @media (max-width:360px) 的 gap/队名字号/VS 三条已删除：
它们与上面的 clamp 同特异性且位置更晚，会整条覆盖掉 clamp 使其在 ≤360px 失效
（而 ≤360px 恰恰是最挤的区间）。压缩逻辑现已统一由 clamp 承担，不再用硬断点。 */
@container plan-card-host (max-width:340px) {
.plan-match-card {
--plan-team-size: min(clamp(9px, calc(3.19vw - 1.2px), 12px), 11px);
--plan-score-size: min(clamp(9px, calc(2.13vw + 2.2px), 11px), 10px);
--plan-vs-size: min(clamp(9.5px, calc(3.72vw - 2.4px), 13px), 11px);
}
}
@container plan-card-host (max-width:300px) {
.plan-match-card {
--plan-team-size: min(clamp(9px, calc(3.19vw - 1.2px), 12px), 10px);
--plan-score-size: min(clamp(9px, calc(2.13vw + 2.2px), 11px), 9px);
--plan-vs-size: min(clamp(9.5px, calc(3.72vw - 2.4px), 13px), 10px);
--plan-summary-size: min(clamp(8.5px, calc(1.6vw + 3.4px), 10px), 9px);
}
}
/* 未登录隔离：二维码占位块 */
.plan-qr-block {
text-align: center;
padding: 40px 16px 32px;
}
.plan-qr-block img {
display: block;
margin: 0 auto; /* Tailwind preflight 把 img 设为 block，text-align 不生效，需 margin auto 居中 */
width: 60%;
max-width: 240px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.plan-qr-block .plan-qr-msg {
margin-top: 16px;
font-size: 13px;
color: #6b7280;
line-height: 1.6;
}
/* 奖金计算器 */
/* S5 本页模块间距刻意走固定值、不用全局 --h5-* 令牌；串关与 AI 两页同步生效 —— 见 H5/docs/H5主站样式设计说明.md */
.plan-calc-block {
margin: 2px 6px;
padding: 3px;
background: #fff;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
font-size: var(--h5-font-body);
}
/* 「基础倍数」「过关方式」等行首标签：flex 行里会被步进器挤压（320px 下宽度只剩 33px、
4 字折成两行），加 nowrap + flex-shrink:0 保证始终单行（脚本审计发现）。 */
.plan-calc-label { color: #6b7280; white-space: nowrap; flex-shrink: 0; }
.plan-mul-btn {
width: 28px; height: 28px;
display: inline-flex; align-items: center; justify-content: center;
border: none;
background: #f3f4f6;
color: #4b5563;
border-radius: 50%;
font-size: 15px;
cursor: pointer;
}
.plan-mul-btn:disabled { color: #d1d5db; cursor: not-allowed; }
.plan-mul-input {
width: 60px; height: 28px;
text-align: center; font-weight: bold; font-size: var(--h5-font-input);
color: #111827; background: #fff;
border: 1px solid #e5e7eb; border-radius: 6px;
-moz-appearance: textfield; appearance: textfield;
}
/* S18 过关方式：胶囊按钮 + 动态均分 —— 见 H5/docs/H5主站样式设计说明.md */
.plan-multi-types {
display: flex;
align-items: center;
gap: 3px;
margin-bottom: 1px;
}
/* 标签不参与均分，剩余宽度全部给按钮 */
.plan-multi-types .plan-calc-label { flex: 0 0 auto; }
.plan-pass-btn {
flex: 1 1 0; min-width: 0; max-width: var(--plan-pass-btn-max);
min-height: 0; padding: 1px 2px;
border: 1px solid #e5e7eb; border-radius: 7px;
background: #fff; color: #374151; font-weight: 400;
font-size: var(--h5-font-body); line-height: 1.1;
white-space: nowrap; cursor: pointer;
}
/* 选中态与「冷热同倍」等优化策略按钮同一套：浅红底 + 红边 + 红字（不是红底白字） */
.plan-pass-btn.active { background: #fff1f2; border-color: #dc2626; color: #dc2626; font-weight: 700; }
.plan-opt-row {
display: flex;
gap: var(--h5-control-gap);
/* margin-bottom: 1px; */
margin: 0px 1px;
}
.plan-opt-btn {
flex: 1;
/* 未选中态原本是「蓝字+下划线+近乎透明的底」，看不出是按钮；
改为深灰字 + 浅灰底 + 明确边框，选中态（.plan-opt-btn.active）仍是红字红边 */
min-height: 0;
padding: 1px calc(var(--h5-control-gap) / 2);
border: 1px solid #d1d5db;
background: #f3f4f6;
border-radius: 8px;
font-size: var(--h5-font-aux);
color: #4b5563;
text-decoration: none;
cursor: pointer;
transition: all 0.2s;
}
.plan-opt-btn:active { background: #f3f4f6; }
/* ── 试算卡版式：场数/注数/基础倍数/金额按 2:2:3:2 四栏展示。
倍数步进器直接占据第三栏，删除上方重复的「已选赛事 + 基础倍数」行。 */
.plan-calc-summary {
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.6fr)
minmax(calc(68px + var(--plan-step-input-width) + 22px), 3fr) minmax(0, 1.6fr);
gap: 0;
text-align: center; background: #e5e7eb; border-radius: 10px; overflow: hidden;
padding: 0; margin: 0; color: #9ca3af;
}
/* 场数/注数是过程量 → 黑；倍数（可编辑）与金额（结果）→ 红。2026-08-03 用户订立 */
.plan-calc-stat:nth-child(1) b,
.plan-calc-stat:nth-child(2) b { color: #111827; }
/* S9 单位内联：场/注/倍/元 挂在数字右下角，省掉整整一行标签 —— 见 H5/docs/H5主站样式设计说明.md */
.plan-calc-stat {
min-width: 0; min-height: 0;
padding: 0 1px; background: #f9fafb;
/* 倍数胶囊(34px) 比文本(23px) 高，若只用 align-items 会让四栏内容中心线差 5.5px。
flex-wrap + align-content:center 把「整条内容行」在栏内垂直居中，
栏内仍保持 baseline —— 单位「场/注/元」照旧挂在数字右下角 */
display: flex; flex-direction: row; flex-wrap: wrap;
align-items: baseline; align-content: center; justify-content: center; gap: 1px;
}
.plan-unit {
font-style: normal; font-weight: 400; color: #111827; line-height: 1;
font-size: calc(var(--plan-summary-number-size) - 6px);
}
.plan-calc-summary b {
line-height: 1.1; color: #ef4444; margin: 0;
font-size: var(--plan-summary-number-size);
}
/* 四栏靠 .plan-calc-stat 的 align-items:baseline 对齐，而倍数栏比其他三栏多套了一层
.plan-mul-group —— flex 容器作为 flex item 时基线取自它的**第一个** item(即「−」按钮)，
于是整栏被按钮的文字基线拉低 8px。这里让 group 内部也走 baseline，
基线就落回输入框里的数字上，与「场/注/元」的数字齐平。 */
.plan-calc-summary .plan-mul-group { gap: 1px; align-items: baseline; }
/* −/+ 加大到 tap 下限，手机上好点 */
.plan-calc-summary .plan-mul-btn {
width: 34px; height: 34px;
color: #ef4444; font-weight: 700; font-size: calc(var(--h5-font-data) + 4px);
}
/* 「−」到 1 用 :disabled；「+」到 1000 用 .at-limit —— 后者必须保持可点，
点下去才能弹出「已到顶」的原因说明（disabled 会连 onclick 一起吞掉）。两者视觉一致。 */
.plan-calc-summary .plan-mul-btn:disabled,
.plan-calc-summary .plan-mul-btn.at-limit { color: #d1d5db; }
/* 倍数与「场/注/元」是同一排的四个数字，除颜色（这里保持黑色）外字号/字重应当一致，
原先只有 16px、比旁边的 20px 小一截。放大不触发 iOS 的「<16px 聚焦自动缩放」，安全。 */
.plan-calc-summary .plan-mul-input {
width: var(--plan-step-input-width); height: 28px;
font-size: var(--plan-summary-number-size); line-height: 1.1;
color: #ef4444;
}
/* S10 常用倍数快捷行：点击直接填进倍数输入框 */
.plan-quick-mul {
display: flex; align-items: center; gap: 2px;
/* margin-top: 1px; */
margin: 1px 0;
overflow-x: auto; -webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.plan-quick-mul::-webkit-scrollbar { display: none; }
.plan-quick-label { flex: 0 0 auto; color: #6b7280; font-size: var(--h5-font-aux); }
.plan-quick-btn {
flex: 1 1 0; min-width: 0; min-height: 0;
min-height: 20px; padding: 0 2px; border: 1px solid #e5e7eb; border-radius: 8px;
display: flex; align-items: center; justify-content: center;
background: #f9fafb; color: #374151; font-size: calc(var(--h5-font-aux) + 2px); cursor: pointer;
}
.plan-quick-btn-small { padding-left: 1px; padding-right: 1px; }
.plan-quick-btn:active { background: #fee2e2; border-color: #fca5a5; color: #dc2626; }
.plan-calc-norow { color: #9ca3af; padding: 8px; text-align: center; }
.plan-calc-table {
width: 100%;
border-collapse: collapse;
font-size: var(--h5-font-aux);
}
.plan-calc-table th, .plan-calc-table td {
padding: var(--h5-control-gap) calc(var(--h5-control-gap) / 2);
text-align: center;
border-bottom: 1px solid #f3f4f6;
}
.plan-calc-table th { color: #6b7280; font-weight: normal; background: #f9fafb; }
.plan-calc-table tbody tr:last-child td { border-bottom: none; }
/* ── 计算/优化区：对齐 admin/Bonus_Optimization 原始设计（玩法胶囊 + 横向主行 + 奖金优化开关 + 优化卡）── */
.plan-mt-hint { color: #9ca3af; font-size: var(--h5-font-aux); }
.plan-mul-group { display: flex; align-items: center; gap: 5px; }
.plan-opt-range {
display: flex; justify-content: space-between; align-items: center; gap: var(--h5-control-gap);
min-height: 0; color: #6b7280; margin: 5px 0 1px;
}
.plan-opt-prize { min-width: 0; display: flex; align-items: baseline; gap: var(--h5-control-gap);
white-space: nowrap; font-size: var(--h5-font-aux); }
.plan-opt-amount { color: #dc2626; font-weight: 700;
font-size: calc(var(--h5-font-data) + 3px); line-height: 1.15; }
/* B16 任一端金额 > 9999 时降一档，给右侧「《免责声明》保存方案」让出约 22px */
.plan-opt-amount.is-long { font-size: var(--h5-font-data); }
/* S11「（明细）」内联在金额后，点开是浮层弹窗；不再是占一格的独立按钮 */
.plan-detail-toggle {
border: 0; background: none; padding: 0 0 0 2px;
color: #2563eb; font-size: var(--h5-font-aux); font-weight: 600; cursor: pointer;
text-decoration: none;
}
/* 下划线只画在「明细」两字下，不含外面那对括号 —— 整体加线时线比文字长出一截 */
.plan-detail-toggle u { text-decoration: underline; text-underline-offset: 2px; }
/* 《免责声明》+「保存方案」包成一组整体靠右（2026-08-02 用户订立）：
外层 .plan-opt-range 是 space-between，两个 flex item 时**全部余量都落在中间**，
金额变长可直接吃掉这段空档。⚠️ 不要给单个按钮加 margin-left:auto —— 那会在
按钮左侧钉死一段固定空白（实测 21.7px），金额反而用不上。
金额进到五位数仍需配合 .plan-opt-amount.is-long 降档。 */
.plan-opt-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; }
.plan-disclaimer-btn {
/* 左 4px 是防 `）` 与 `《` 两个尖角字形连成一串（去掉实测会贴字）；
右侧不留，与「保存方案」的间距交给 .plan-opt-actions 的 gap */
flex: 0 0 auto; min-height: 0; padding: 1px 0 1px 4px;
border: 0; background: none; color: #6b7280;
font-size: var(--h5-font-aux); white-space: nowrap; cursor: pointer;
}
.plan-inline-save {
flex: 0 0 auto; min-height: 0; padding: 1px 7px;
border: 0; border-radius: 10px; background: #ef4444; color: #fff;
font-size: var(--h5-font-data); font-weight: 700; cursor: pointer;
}
.plan-inline-save:disabled { background: #fca5a5; }
/* B16 窄屏收字号与间隙：奖金行要塞「预计 金额（明细）《免责声明》[保存方案]」五段，
实测 375px 缺 16px、320px 缺 43px。分两档收，越窄收得越狠。
⚠️ 与 .plan-opt-amount.is-long 是两套：is-long 按金额长短触发，这里按屏宽兜底。 */
@media (max-width: 400px) {
.plan-opt-range { gap: 4px; }
.plan-disclaimer-btn { font-size: calc(var(--h5-font-aux) - 2px); }
.plan-inline-save { padding: 1px 5px; }
}
@media (max-width: 360px) {
/* 320px 光收间隙不够（缺 43px），金额必须一并降档——不分金额长短 */
.plan-opt-amount { font-size: var(--h5-font-data); }
.plan-disclaimer-btn { font-size: calc(var(--h5-font-aux) - 2px); padding-left: 2px; }
.plan-inline-save { padding: 1px 4px; font-size: calc(var(--h5-font-data) - 1px); }
}
/* S12 组合明细弹窗：position:fixed 不占布局，故仍是卡片 innerHTML 的一部分，
#planOptRows 的实时写入与每组合倍数步进器均不受影响 */
.plan-detail-overlay {
display: none; position: fixed; inset: 0; z-index: 60;
background: rgba(0, 0, 0, .45); align-items: center; justify-content: center;
padding: var(--h5-page-inline);
}
.plan-detail-overlay.show { display: flex; }
.plan-detail-box {
width: 100%; max-width: 440px; max-height: 76vh;
background: #fff; border-radius: 14px; overflow: hidden;
display: flex; flex-direction: column;
}
.plan-detail-head {
flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
padding: var(--h5-control-gap) var(--h5-card-inline);
border-bottom: 1px solid #f3f4f6; font-weight: 700; color: #111827;
}
.plan-detail-close {
border: 0; background: none; font-size: 22px; line-height: 1;
color: #9ca3af; cursor: pointer; padding: 0 4px;
}
.plan-detail-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.plan-detail-scroll .plan-opt-detail { display: table; width: 100%; }
/* 优化明细表 per-leg（对齐原始：单注逐腿队(选)，次腿缩进，组合间分隔线，奖金红色）*/
.plan-opt-detail { width: 100%; border-collapse: collapse; font-size: var(--h5-font-aux);
border: 1px solid #cbd5e1; }
.plan-opt-detail th, .plan-opt-detail td { border: 1px solid #cbd5e1; }
.plan-opt-detail th { color: #9ca3af; font-weight: normal; padding: 4px 2px 8px; }
.plan-opt-detail th { text-align: center; }
.plan-opt-detail td { padding: 3px 2px; text-align: center; vertical-align: middle; color: #4b5563; }
/* 编号与队名列一律居中；组合内第二腿(.sub)与第一腿**完全同款**——原先它缩进 14px 且用浅灰，
两腿看着像「主 + 附属」，实际是平等的两场比赛。 */
/* 「方案」「倍数」两列的值放大加粗深黑、括号内胜平负标红（2026-08-06 用户订立，以示重要）。
表头不受影响。三端同口径：web .bonus-opt-leg / 共享 .td-leg。 */
/* ⚠️ 方案列**不加粗**：队名字数多，整列加粗后密密麻麻一片黑（2026-08-06 用户反馈）。
只放大 + 转深黑；加粗留给字数少的「倍数」与括号内的赛果。 */
.plan-opt-detail td.opt-leg { text-align: center; font-size: 1.12em; color: #1f2937; }
.plan-opt-detail td.opt-leg.sub { color: #1f2937; }
.plan-opt-detail .leg-pick { color: #dc2626; font-weight: 700; }
.plan-opt-detail td.opt-no { text-align: center; font-size: 1.12em; color: #e11d48; font-weight: 700; white-space: nowrap; }
.plan-opt-detail td.opt-bonus { text-align: center; color: #dc2626; font-weight: 600; }
/* 两组组合交替底色（蓝/黄），避免多行连排误认成多个独立方案；
2026-07-28 由蓝/绿/黄三色精简为两色——三色在页面里显得杂乱，统一为浅蓝+浅黄，
H5/web 的 AI精选/串关精选/已保存方案与分享页 share.html 全部同款配色。 */
.plan-opt-detail tr.combo-tint-0 td,
.plan-calc-table tr.combo-tint-0 td { background: #dbeafe; }
.plan-opt-detail tr.combo-tint-1 td,
.plan-calc-table tr.combo-tint-1 td { background: #fef3c7; }
/* 每组合可调倍数：紧凑步进器（− / 文本框 / +），交互同顶部倍数 */
.opt-mul-stepper { display: inline-flex; align-items: center; gap: 3px; }
.opt-mul-btn {
width: 18px; height: 18px; border: none; background: #f3f4f6; color: #4b5563;
border-radius: 4px; font-size: 12px; line-height: 1; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.opt-mul-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.opt-mul-input {
/* 字号 12→13px、加粗（2026-08-06 用户订立）；height 18→20px 是配套 ——
原注释即写明「高 18px 物理装不下更大的字」，放大字号不抬高度会被裁 */
width: 30px; height: 20px; text-align: center; font-size: 13px; font-weight: 700; padding: 0;
border: 1px solid #e5e7eb; border-radius: 4px; color: #1f2937;
-moz-appearance: textfield; appearance: textfield;
}
/* 更多情报锁态：与 .ai-more 同布局，emoji 换 🔒 */
/* ── 登录弹窗-注册验证码按钮（60s 倒计时禁用态） ── */
.reg-code-btn {
min-height: var(--h5-control-height);
padding: 0 var(--h5-card-inline);
background: #ef4444;
color: #fff;
border: none;
border-radius: 6px;
font-size: var(--h5-font-body);
white-space: nowrap;
cursor: pointer;
}
.reg-code-btn:disabled {
background: #e5e7eb;
color: #9ca3af;
cursor: not-allowed;
}
/* ── 登录/注册弹窗右上角关闭 × ── */
.dlg-close-x {
position: absolute;
top: 6px;
right: 8px;
width: 34px;
height: 34px;
border: none;
background: transparent;
color: #9ca3af;
font-size: 24px;
line-height: 1;
cursor: pointer;
}
.dlg-close-x:active {
color: #6b7280;
}
/* ── 登录弹窗-密码/验证码双模式 tab ── */
.login-mode-tabs {
display: flex;
margin-bottom: var(--h5-section-gap);
border-bottom: 1px solid #f3f4f6;
}
.login-mode-tab {
flex: 1;
text-align: center;
min-height: var(--h5-control-height);
padding: var(--h5-card-gap) 0;
font-size: var(--h5-font-body);
color: #6b7280;
cursor: pointer;
border-bottom: 2px solid transparent;
}
.login-mode-tab.active {
color: #ef4444;
font-weight: bold;
border-bottom-color: #ef4444;
}
/* ── 深度解析页-已结束场赛果展示 ── */
/* VS 位置显示终场比分（红色加粗） */
.plan-final-score {
color: #ef4444;
font-weight: 800;
font-size: 16px;
}
/* 实际赛果格：绿色描边 + 右上角 ✓（与用户预测红底 .active 可叠加 = 预测命中） */
.plan-odds-box.actual-result {
border: 2px solid #16a34a !important;
position: relative;
}
.plan-odds-box.actual-result::after {
content: '✓';
position: absolute;
top: -7px;
right: -7px;
width: 15px;
height: 15px;
background: #16a34a;
color: #fff;
border-radius: 50%;
font-size: 10px;
line-height: 15px;
text-align: center;
}
/* ── 奖金优化按钮与结果（选中=浅红底红字红框，对齐原始 opt-btn-active）── */
.plan-opt-btn.active {
background: #fff1f2;
color: #dc2626;
border-color: #dc2626;
font-weight: 500;
text-decoration: none;
}
.plan-opt-scroll { max-height: 220px; overflow-y: auto; }
/* ── 「我的」整页 #page-mine（body 层独立页；点底部「我的」进入。当前仅前端框架，内容后续填充）── */
#page-mine {
height: 100%;
overflow-y: auto;
background: #f5f7fa;
padding: var(--mine-hero-gap) var(--h5-page-inline)
calc(var(--h5-bottom-nav-height) + var(--h5-card-gap) + env(safe-area-inset-bottom));
}
/* S28「我的」页：六段式版式 + 竖向紧凑（本页局部令牌，刻意不改全局 --h5-*）
—— 取值依据、全仓引用数、五档同比替换的坑，见 H5/docs/H5主站样式设计说明.md S28 */
#page-mine { --mine-gap: 7px; --mine-pad: 6px; --mine-row-h: 48px; --mine-row-ico: 30px;
/* 会员状态框（头部块 + 等级块）专用留白：S28 把全页压到 4px 后这两块显得压抑
（2026-09-08 用户反馈）。⚠️ 单开令牌而不是调 --mine-pad/--mine-gap —— 那两个
被下方功能列表共用（7 处），改它们会把整页一起撑开，不是本轮要的。 */
--mine-hero-pad: 11px; --mine-hero-gap: 10px; }
/* 3.1 头部：头像/昵称/签名/VIP等级 */
.mine-header {
display: flex; align-items: center; justify-content: space-between;
gap: var(--h5-control-gap);
background: linear-gradient(135deg, #ef4444, #dc2626);
color: #fff; border-radius: 0 0 16px 16px;
margin: 0 calc(0px - var(--h5-page-inline)) var(--mine-hero-gap);
padding: var(--mine-header-block) var(--h5-page-inline);
}
/* 点击域只在左半：右上角客服/铃铛/箭头各自独立，否则点它们会连带跳账号页。
原 .mine-header 的 gap（avatar↔id）下移到这里，头部两栏之间另用 control-gap。 */
.mine-header-main { display: flex; align-items: center; gap: var(--h5-section-gap);
flex: 1; min-width: 0; cursor: pointer; }
.mine-header-acts { display: flex; flex-direction: column; align-items: flex-end;
gap: 4px; flex-shrink: 0; }
.mine-act-row { display: flex; align-items: center; gap: 7px; }
.mine-act { background: none; border: none; color: #fff; cursor: pointer;
font-size: 17px; line-height: 1; padding: 2px; }
.mine-act-arrow { background: none; border: none; color: rgba(255,255,255,.75);
cursor: pointer; font-size: 18px; line-height: 1; padding: 0 3px; }
.mine-avatar { width:var(--mine-avatar-size); height:var(--mine-avatar-size); border-radius:50%;
background:rgba(255,255,255,0.18); flex-shrink:0;
padding:calc(var(--h5-control-gap) + 1px); box-sizing:border-box;
display:flex; align-items:center; justify-content:center; font-size:calc(var(--h5-font-data) + 16px); }
.mine-avatar svg { width: 100%; height: 100%; }
.mine-id { flex: 1; min-width: 0; }
/* 昵称 + VIP 徽标同一行、中心线对齐（口径同首页指示器「头像 昵称 徽标」）。
徽标原先是 .mine-header 的直属子元素，被 .mine-id{flex:1} 推到最右端、还 align-self:flex-start
顶部对齐 —— 既不挨着昵称、中心线也不齐，故收进本行。
昵称过长时先截昵称（min-width:0 + 下面的 ellipsis），徽标不压缩。 */
.mine-nick-row { display: flex; align-items: center; gap: var(--h5-control-gap); min-width: 0; }
.mine-nick { font-size: calc(var(--h5-font-data) + 3px); font-weight: bold;
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mine-sign { font-size: var(--h5-font-aux); opacity: 0.9; margin-top: 4px; }
/* 签名为空（已登录且没填 bio，即最常见的状态）时不占位：否则空元素的 margin-top:4px 仍在，
把昵称行整体顶高 2px，头像与昵称的中心线就对不齐了。 */
.mine-sign:empty { display: none; }
/* 我的页 VIP 徽标改用图片（/images/vip/vipN.png）：未开通置灰、点击进入会员中心。
对齐口径同首页指示器 —— 让「徽标内的 VIP 字」与昵称等高（徽标整体更大一圈）。
⚠️ 高度不写 em：容器没有自己的 font-size，em 会挂到继承值上而不是昵称，
故直接按 .mine-nick 的字号（--h5-font-data + 3px）算，两者永远同源。
⚠️ 容器里只有 ![]()
，**不要再给它 background/padding 撑胶囊底**（2026-08-07 用户订立）：
那是文字徽标时代的样式，图片本身已自带底色，套上去就是多余的黄色背景板。
padding 只用来撑点击热区，取值与首页 .user-vip-badge 一致。 */
.mine-vip-badge{ cursor:pointer; display:inline-flex; align-items:center;
flex-shrink:0; padding:2px 1px; }
.mine-vip-img{
height:calc((var(--h5-font-data) + 3px) * 1.7);
width:auto;
display:block;
}
.mine-vip-img.locked{ filter:grayscale(1) opacity(.55); }
.mine-vip-img.locked:active{ filter:grayscale(.4) opacity(.85); }
/* ── 3.2 会员等级块（四态：未登录 / 未开通 / 已过期 / 已开通）────────────────
取代原「VIP 卡 + 尊享权益四图标」（2026-09-05 用户订立，照 temp/examples 两份稿）。
底色三档：已开通=金、已过期=淡蓝紫、未开通/未登录=白。金色的双层光影用伪元素做，
与参考稿一致；⚠️ 伪元素必须挂在 ::before/::after 且卡片 overflow:hidden，否则光斑溢出圆角。 */
.mine-level-card { position:relative; overflow:hidden; border-radius:12px;
background:#fff; box-shadow:0 2px 12px rgba(0,0,0,0.07);
padding:var(--mine-hero-pad) var(--h5-card-inline); margin-bottom:var(--mine-hero-gap); }
/* 金色底覆盖两类身份：已开通(is-active) 与**未开通**(is-none = 未登录 + 已登录未开通)。
后者用金色是刻意的转化设计（2026-09-08 用户订立）——「先以美观的姿态吸引用户登录和注册」，
白底太素、留不住人。已过期(is-expired) 仍是蓝灰底，与「失去特权」的语义匹配。
⚠️ 连带：is-none 原来的灰字覆盖必须一并去掉，灰字(#9ca3af)落在金底(#FFE8A3)上
对比度只有约 2:1、根本读不清。区分身份改靠标题与按钮文案，不靠置灰。 */
.mine-level-card.is-active,
.mine-level-card.is-none { background:linear-gradient(135deg,#FFF9DD 0%,#FFE8A3 100%); }
.mine-level-card.is-active::before,
.mine-level-card.is-none::before { content:""; position:absolute; width:180px; height:180px;
background:radial-gradient(circle, rgba(255,220,120,.65) 0%, rgba(255,235,170,0) 70%);
right:-40px; top:-30px; border-radius:24px; transform:rotate(20deg); }
.mine-level-card.is-active::after,
.mine-level-card.is-none::after { content:""; position:absolute; width:120px; height:120px;
background:radial-gradient(circle, rgba(255,210,90,.4) 0%, rgba(255,228,150,0) 70%);
right:20px; bottom:-20px; border-radius:16px; transform:rotate(35deg); }
.mine-level-card.is-expired { background:linear-gradient(135deg,#e8edfb 0%,#dce4f8 100%); }
/* 内容层必须提到光斑之上，否则金色渐变会盖住文字 */
.mine-level-card > * { position:relative; z-index:1; }
.mine-level-top { display:flex; align-items:center; justify-content:space-between;
gap:var(--h5-control-gap); }
.mine-level-name { display:flex; align-items:center; gap:6px; min-width:0; }
.mine-level-title { font-size:calc(var(--h5-font-body) + 2px); font-weight:bold; color:#92400E;
white-space:nowrap; }
.mine-level-card.is-expired .mine-level-title { color:#4b5563; }
/* 套餐徽章（user/*.png，320x320 方图）：与标题文字等高略大，不参与压缩 */
.mine-level-badge { height:calc(var(--h5-font-body) + 10px); width:auto; flex-shrink:0; }
.mine-level-note { font-size:var(--h5-font-aux); color:#6b7280; white-space:nowrap;
min-width:0; overflow:hidden; text-overflow:ellipsis; }
.mine-level-expire { font-size:var(--h5-font-aux); color:#4b5563; flex-shrink:0; white-space:nowrap; }
/* 四项统计：固定营销文案，不随套餐变（PDF 明注「都是固定值」） */
.mine-level-stats { display:grid; grid-template-columns:repeat(4,1fr);
gap:2px; padding-top:3px; }
.mine-level-stats > div { text-align:center; min-width:0; }
.mine-level-stat-link { cursor:pointer; border-radius:5px; }
.mine-level-stat-link:focus-visible { outline:2px solid #d97706; outline-offset:1px; }
.mine-level-stat-link:active { background:rgba(146,64,14,.08); }
.mine-level-stats b { display:block; font-size:clamp(11px, calc(2.6vw + 2.7px), 15px);
font-weight:bold; color:#92400E; white-space:nowrap; }
.mine-level-stats span { display:block; margin-top:1px; color:#6b7280; white-space:nowrap;
font-size:clamp(9px, calc(1.6vw + 3.9px), 11px); }
.mine-level-card.is-expired .mine-level-stats b { color:#9ca3af; }
.mine-level-card.is-expired .mine-level-stats span { color:#9ca3af; }
.mine-level-foot { display:flex; align-items:center; justify-content:space-between;
gap:var(--h5-control-gap); padding-top:3px; }
/* 卖点长句：占满剩余宽、两行内截断；按钮永不被压缩 */
.mine-level-slogan { font-size:var(--h5-font-aux); color:#4b5563; min-width:0; line-height:1.35;
display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.mine-level-btn { flex-shrink:0; min-height:var(--h5-control-height);
background:#E62E2E; color:#fff; border:none; border-radius:8px;
padding:0 12px; font-size:var(--h5-font-aux); font-weight:bold; cursor:pointer;
white-space:nowrap; }
/* ── 3.3 双卡：会员中心 / 策略优化 ────────────────────────────────── */
.mine-duo { display:grid; grid-template-columns:1fr 1fr; gap:var(--h5-card-gap);
margin-bottom:var(--mine-gap); }
.mine-duo-card { display:flex; align-items:center; gap:var(--h5-control-gap);
background:#fff; border:none; border-radius:12px; box-shadow:0 2px 12px rgba(0,0,0,0.07);
padding:var(--mine-pad) var(--h5-control-gap); cursor:pointer; text-align:left;
min-width:0; }
.mine-duo-ico { flex-shrink:0; width:34px; height:34px; border-radius:9px; color:#fff;
display:flex; align-items:center; justify-content:center; font-size:17px; }
.duo-gold { background:#FBBF24; }
.duo-orange { background:#F97316; }
.mine-duo-txt { min-width:0; }
.mine-duo-txt b { display:block; font-size:var(--h5-font-body); font-weight:600; color:#1f2937;
white-space:nowrap; }
/* 「本地云端保存方案」7 字：320px 下格子内容宽不足，随屏宽微缩保单行 */
.mine-duo-txt i { display:block; margin-top:2px; font-style:normal; color:#6b7280;
font-size:clamp(8.4px, calc(1.5vw + 3.6px), 10px); white-space:nowrap; }
/* 我的页不再为新增一级模块预留空白：在保留窄屏单行与省略规则的前提下，
将已确定的功能入口放大并铺满可用内容区。 */
#page-mine .mine-level-title { font-size:calc(var(--h5-font-body) + 3px); }
#page-mine .mine-level-slogan { font-size:calc(var(--h5-font-aux) + 1px); }
#page-mine .mine-level-btn { font-size:calc(var(--h5-font-aux) + 1px); }
#page-mine .mine-duo-txt b,
#page-mine .mine-list-item,
#page-mine .mine-share-txt b { font-size:calc(var(--h5-font-body) + 1px); }
#page-mine .mine-duo-txt i,
#page-mine .mine-list-item .ml-note,
#page-mine .mine-share-txt i { font-size:calc(var(--h5-font-aux) + 1px); }
/* ── 3.4/3.5 功能列表 ─────────────────────────────────────────────── */
.mine-list { background:#fff; border-radius:12px; box-shadow:0 2px 12px rgba(0,0,0,0.07);
overflow:hidden; margin-bottom:var(--mine-gap); }
/* ⚠️ S28.3：行高 40px 刻意低于全站 --h5-tap-primary(44px) 热区下限，且只在本页生效 */
.mine-list-item { width:100%; min-height:var(--mine-row-h); display:flex; align-items:center;
gap:var(--h5-control-gap); background:none; border:none; border-bottom:1px solid #f3f4f6;
padding:var(--mine-pad) var(--h5-card-inline); font-size:var(--h5-font-body); color:#1f2937;
cursor:pointer; text-align:left; }
.mine-list-item:last-child { border-bottom: none; }
/* 彩色圆角图标底：与参考稿一致，用项目自带 emoji，不引 FontAwesome CDN */
.mine-list-item .ml-ico, .mine-share .ml-ico { flex-shrink:0;
width:var(--mine-row-ico); height:var(--mine-row-ico);
border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:15px; }
.ico-sky { background:#e0f2fe; } .ico-purple { background:#f3e8ff; } .ico-orange { background:#ffedd5; }
.ico-blue { background:#dbeafe; } .ico-green { background:#dcfce7; } .ico-indigo { background:#e0e7ff; }
.ico-gray { background:#e5e7eb; } .ico-red { background:#E62E2E; }
/* 「我的会员」用套餐徽章代替色块，尺寸与色块一致 */
.mine-list-item .ml-ico-img { flex-shrink:0;
width:var(--mine-row-ico); height:var(--mine-row-ico); object-fit:contain; }
.mine-list-item .ml-name { flex-shrink:0; }
/* 右侧说明：占剩余宽、靠右、超长省略；空文本时不占位 */
.mine-list-item .ml-note { flex:1; min-width:0; text-align:right; color:#9ca3af;
font-size:var(--h5-font-aux); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mine-list-item .ml-arrow { flex-shrink:0; margin-left:4px; color:#B0B8C4; font-size:16px; }
/* ── 3.6 分享好友 ─────────────────────────────────────────────────── */
.mine-share { width:100%; display:flex; align-items:center; gap:var(--h5-control-gap);
background:#fff; border:none; border-radius:12px; box-shadow:0 2px 12px rgba(0,0,0,0.07);
padding:var(--mine-pad) var(--h5-card-inline); margin-bottom:var(--mine-gap);
cursor:pointer; text-align:left; }
.mine-share .ml-ico { color:#fff; }
.mine-share-txt { flex:1; min-width:0; }
.mine-share-txt b { display:block; font-size:var(--h5-font-body); font-weight:600; color:#1f2937; }
.mine-share-txt i { display:block; margin-top:2px; font-style:normal; color:#6b7280;
font-size:var(--h5-font-aux); }
.mine-share .ml-arrow { flex-shrink:0; color:#B0B8C4; font-size:16px; }
/* ── 我的 > 设置 > 账号与安全 ── */
.mine-subpage { min-height:100%; margin:0 calc(0px - var(--h5-page-inline));
padding-bottom:calc(var(--h5-section-gap) + var(--h5-section-gap)); background:#f5f7fa; }
.mine-sub-head { height:var(--mine-sub-head-height); display:grid;
grid-template-columns:var(--h5-tap-primary) 1fr var(--h5-tap-primary);
align-items:center; background:#fff; border-bottom:1px solid #f1f5f9; }
.mine-sub-head h2 { margin:0; text-align:center; font-size:calc(var(--h5-font-data) + 3px); color:#1f2937; }
.mine-sub-head button { border:0; background:none; color:#111827; font-size:34px; line-height:1; cursor:pointer; }
/* 返回箭头改纯 CSS 几何图形，不再用 ‹ 文字符号——字形墨迹本身上下不对称，字号越大越偏离
标题中心线（2026-09-24 用户反馈）。只限定第一个按钮（固定是返回箭头），避免影响
.msg-head-act 等复用 .mine-sub-head button 基础规则的右侧按钮（它们各自还有自己的
font-size 覆盖，不受这里 font-size:0 影响，但显式收窄选择器更安全）。 */
.mine-sub-head > button:first-child { font-size:0; width:100%; height:100%;
display:inline-flex; align-items:center; justify-content:center; }
.mine-sub-head > button:first-child::before { content:''; display:block; width:12px; height:12px;
border:solid #111827; border-width:0 2.5px 2.5px 0; transform:rotate(135deg); margin-left:3px; }
.settings-group, .account-card { margin-top:var(--h5-section-gap); background:#fff;
border-top:1px solid #f1f5f9; border-bottom:1px solid #f1f5f9; }
.settings-row { width:100%; height:var(--account-row-height); padding:0 var(--h5-page-inline);
border:0; border-bottom:1px solid #f3f4f6; background:#fff; display:flex;
align-items:center; justify-content:space-between; color:#374151;
font-size:calc(var(--h5-font-body) + 1px); text-align:left; cursor:pointer; }
.settings-row:last-child { border-bottom:0; }
.settings-row b { color:#cbd5e1; font-size:24px; font-weight:400; }
.help-menu-group { margin-top:18px; }
.settings-logout { display:block; width:calc(100% - 28px); margin:28px auto 0; padding:12px; border:1px solid #ef4444; border-radius:7px; background:#fff; color:#ef4444; font-size:15px; cursor:pointer; }
.account-static-row { min-height:calc(var(--account-row-height) + 12px);
padding:var(--h5-card-gap) var(--h5-page-inline); display:flex; align-items:center;
justify-content:space-between; gap:var(--h5-section-gap); border-bottom:1px solid #f3f4f6; }
.account-static-row div { min-width:0; display:flex; flex-direction:column; gap:4px; }
.account-static-row strong, .account-action-row span { color:#374151;
font-size:calc(var(--h5-font-body) + 1px); font-weight:500; }
.account-static-row small { color:#9ca3af; font-size:var(--h5-font-aux); }
.account-static-row > span { max-width:42%; color:#6b7280; font-size:var(--h5-font-body);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-phone-row { width:100%; border:0; background:#fff; text-align:left; font-family:inherit; cursor:pointer; }
.account-phone-row > span { max-width:52%; display:flex; align-items:center; gap:8px; }
.account-phone-row em { overflow:hidden; text-overflow:ellipsis; color:#6b7280; font-style:normal; }
/* S29 优惠券包（P3）：页签 + 券卡列表。券的折扣值/有效期/状态全由 /api/coupons 下发，
本层只负责版式；「已使用/已过期」整卡降饱和，靠 .dead 一个类切换，不逐元素改色 */
.cw-tabs { display:flex; gap:var(--mine-gap); padding:var(--h5-card-gap) var(--h5-page-inline);
background:#fff; border-bottom:1px solid #f1f5f9; overflow-x:auto; }
.cw-tab { flex:0 0 auto; padding:6px 12px; border:0; border-radius:14px; background:#f3f4f6;
color:#6b7280; font-size:var(--h5-font-body); font-family:inherit; cursor:pointer; }
.cw-tab.active { background:#fef0f0; color:#e62e2e; font-weight:600; }
.cw-tab i { margin-left:3px; font-style:normal; font-size:var(--h5-font-aux); opacity:.75; }
.cw-list { padding:var(--h5-card-gap) var(--h5-page-inline) 0;
display:flex; flex-direction:column; gap:var(--h5-card-gap); }
.cw-empty { margin:calc(var(--h5-section-gap) * 2) 0; color:#9ca3af;
font-size:var(--h5-font-body); text-align:center; }
/* 券卡：左侧折扣值定宽、中间名称+倒计时自适应、右侧按钮定宽 —— 三列不换行不截断（§0.5）*/
.cw-card { display:grid; grid-template-columns:78px 1fr auto; align-items:center;
gap:var(--h5-card-gap); padding:var(--h5-card-block) var(--h5-card-gap);
border-radius:9px; background:#fff; box-shadow:0 2px 12px rgba(0,0,0,.07); }
.cw-left { text-align:center; color:#e62e2e; }
.cw-left b { font-size:calc(var(--h5-font-data) + 4px); font-weight:700; }
.cw-mid { min-width:0; }
.cw-name { color:#1f2937; font-size:calc(var(--h5-font-body) + 1px); font-weight:500;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cw-meta { margin-top:2px; color:#9ca3af; font-size:var(--h5-font-aux); }
/* 券卡「下方标注」（PDF 第 5 页同名列）：点明这张券属于哪档权益，夹在券名与倒计时之间 */
.cw-tag { margin-top:2px; color:#e62e2e; font-size:var(--h5-font-aux); }
.cw-card.dead .cw-tag { color:#c0c4cc; }
/* 「筛选」下拉：按券种多选，与页签(状态)正交 —— 空集=不筛 */
.cw-filter { display:flex; flex-wrap:wrap; gap:var(--mine-gap);
padding:var(--h5-card-gap) var(--h5-page-inline); background:#fff;
border-bottom:1px solid #f1f5f9; }
.cw-kind { padding:5px 10px; border:1px solid #e5e7eb; border-radius:13px; background:#fff;
color:#6b7280; font-size:var(--h5-font-aux); font-family:inherit; cursor:pointer; }
.cw-kind.on { border-color:#e62e2e; background:#fef0f0; color:#e62e2e; font-weight:600; }
.cw-kind-clear { border-style:dashed; color:#9ca3af; }
.cw-filter-btn i { margin-left:3px; }
.cw-use { padding:5px 11px; border:0; border-radius:13px; background:#e62e2e; color:#fff;
font-size:var(--h5-font-aux); font-family:inherit; cursor:pointer; }
.cw-badge { color:#c0c4cc; font-size:var(--h5-font-aux); }
.cw-card.dead { background:#fafafa; box-shadow:none; }
.cw-card.dead .cw-left, .cw-card.dead .cw-name { color:#c0c4cc; }
.account-phone-row b { flex-shrink:0; color:#9ca3af; font-size:13px; font-weight:400; }
.account-action-row { width:100%; height:var(--account-row-height); padding:0 var(--h5-page-inline);
border:0; background:#fff; display:flex; justify-content:space-between;
align-items:center; cursor:pointer; }
.account-action-row b { color:#9ca3af; font-size:13px; font-weight:400; }
.account-login-ttl-row { min-height:calc(var(--account-row-height) + 12px); padding:var(--h5-card-gap) var(--h5-page-inline);
display:flex; align-items:center; justify-content:space-between; gap:var(--h5-section-gap); border-top:1px solid #f3f4f6; }
.account-login-ttl-row > div:first-child { min-width:0; display:flex; flex-direction:column; gap:4px; }
.account-login-ttl-row strong { color:#374151; font-size:calc(var(--h5-font-body) + 1px); font-weight:500; }
.account-login-ttl-row small { color:#9ca3af; font-size:var(--h5-font-aux); }
.account-login-ttl-row > div:last-child { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.account-login-ttl-row select { min-height:36px; padding:4px 8px; border:1px solid #d1d5db; border-radius:7px; background:#fff; color:#374151; font:inherit; }
.account-login-ttl-row button { min-height:36px; padding:4px 12px; border:0; border-radius:7px; background:#ef4444; color:#fff; font:inherit; cursor:pointer; }
.account-login-ttl-row button:disabled { opacity:.6; cursor:not-allowed; }
.account-profile-form { padding:var(--h5-page-inline); display:flex; flex-direction:column;
gap:var(--h5-control-gap); }
.account-profile-form label { color:#374151; font-size:var(--h5-font-body); font-weight:500; }
.account-profile-form label small { color:#9ca3af; font-weight:400; }
.account-profile-form input, .account-profile-form textarea, .account-profile-form select {
width:100%; box-sizing:border-box; border:1px solid #d1d5db; border-radius:7px;
background:#fff; min-height:var(--h5-control-height);
padding:var(--h5-card-gap) var(--h5-card-inline); color:#374151;
font-size:var(--h5-font-input); font-family:inherit; }
.account-profile-form textarea { resize:vertical; }
/* 简介框下的常驻说明：刻意不写进 bio 真值，否则会被当成用户签名存库、显示在「我的」页 */
.account-bio-tip { color:#9ca3af; font-size:12px; line-height:1.5;
margin-top:calc(4px - var(--h5-control-gap)); }
/* 昵称 placeholder 单独缩放保证单行显示完整：input 自身字号必须恒 16px（iOS 聚焦自动放大，
见 --h5-font-input），故只缩 ::placeholder —— 自动放大只看输入文本字号，不看占位符。
取值按 320/360/375/414/430/480 六档实测临界二分拟合，上限封 13.8px（body 最宽 480px，
再宽容器也不变，但 vw 会继续涨）。⚠️ 改 placeholder 文案必须重新测算这三个数。 */
#accountNickname::placeholder { font-size: clamp(9.25px, calc(2.857vw + 0.11px), 13.8px); }
.avatar-preset-list { display:grid; grid-template-columns:repeat(6,1fr); gap:7px; margin-bottom:6px; }
.avatar-preset-list button { aspect-ratio:1; border:1px solid #e5e7eb; border-radius:50%; background:#f9fafb; font-size:22px; cursor:pointer; }
.avatar-preset-list button.active { border:2px solid #ef4444; background:#fef2f2; }
.account-profile-msg { min-height:18px; color:#dc2626; font-size:12px; }
.account-save-btn { min-height:var(--h5-tap-primary); padding:var(--h5-card-gap);
border:0; border-radius:7px; background:#ef4444; color:#fff;
font-size:calc(var(--h5-font-body) + 1px); font-weight:600; cursor:pointer; }
.account-save-btn:disabled { opacity:.6; cursor:not-allowed; }
.rebind-phone-box { position:relative; width:100%; max-width:380px;
padding:var(--h5-dialog-inline); box-sizing:border-box; }
.rebind-phone-box h3 { margin:0 0 8px; text-align:center; color:#1f2937; font-size:18px; }
.rebind-current { margin:0 0 var(--h5-section-gap); text-align:center; color:#6b7280;
font-size:var(--h5-font-body); }
.rebind-phone-box label { display:block; margin:var(--h5-card-gap) 0 5px;
color:#374151; font-size:var(--h5-font-body); }
.rebind-phone-box input { width:100%; min-height:var(--h5-control-height); box-sizing:border-box;
padding:var(--h5-card-gap) var(--h5-card-inline); border:1px solid #d1d5db;
border-radius:7px; font-size:var(--h5-font-input); }
.rebind-code-line { display:flex; gap:var(--h5-control-gap); }
.rebind-code-line input { flex:1; min-width:0; }
.rebind-code-line .reg-code-btn { flex-shrink:0; }
.rebind-tip { margin:12px 0 6px; color:#9ca3af; font-size:11px; line-height:1.55; }
.rebind-phone-msg { min-height:18px; margin-bottom:8px; color:#dc2626; font-size:12px; }
.rebind-submit-btn { width:100%; }
.help-article-box { position:relative; width:100%; max-width:400px; max-height:86vh;
overflow-y:auto; padding:var(--h5-dialog-inline); box-sizing:border-box; }
.help-article-box h3 { margin:0 0 16px; text-align:center; color:#1f2937; font-size:18px; }
.help-article-content { color:#4b5563; font-size:var(--h5-font-body); line-height:1.7; }
.help-article-content section { margin-bottom:14px; }
.help-article-content h4 { margin:0 0 4px; color:#374151; font-size:14px; }
.help-article-content p { margin:0; }
.help-article-content ol { margin:4px 0 0 20px; }
.help-article-actions { display:flex; gap:var(--h5-control-gap); margin:var(--h5-section-gap) 0 4px; }
.help-article-actions:empty { display:none; }
.help-article-actions button { flex:1; min-height:var(--h5-control-height);
padding:var(--h5-card-gap) var(--h5-control-gap); border:1px solid #ef4444;
border-radius:7px; background:#fff; color:#ef4444; font-size:var(--h5-font-body); cursor:pointer; }
.help-article-actions button:last-child { background:#ef4444; color:#fff; }
.help-coming-soon { padding:28px 8px; text-align:center; color:#6b7280; }
.contact-service-box { width:100%; max-width:360px; max-height:88vh; overflow-y:auto;
padding:var(--h5-dialog-inline); text-align:center; box-sizing:border-box; }
.contact-service-box img { max-width:220px !important; }
.contact-service-text { max-height:150px; overflow-y:auto; margin-top:var(--h5-section-gap);
padding:var(--h5-card-gap); border:1px solid #e5e7eb; border-radius:8px;
background:#f9fafb; color:#4b5563; font-size:var(--h5-font-aux);
line-height:1.6; text-align:left; white-space:pre-wrap; }
.login-modal-box { position:relative; max-width:380px; max-height:90vh; overflow-y:auto;
box-sizing:border-box; padding:calc(var(--h5-dialog-inline) + 4px) var(--h5-dialog-inline); }
.auth-heading { text-align:center; margin-bottom:calc(var(--h5-section-gap) + 6px); }
.auth-heading-title { font-size:calc(var(--h5-font-data) + 8px); font-weight:bold;
color:#ef4444; letter-spacing:2px; }
.auth-heading-sub { font-size:var(--h5-font-body); color:#6b7280; margin-top:var(--h5-control-gap); }
.auth-field { margin-bottom:var(--h5-card-gap); }
.auth-field.auth-field-last { margin-bottom:var(--h5-section-gap); }
.auth-field label { display:block; margin-bottom:4px; font-size:var(--h5-font-body); color:#374151; }
.sms-reg-tag { margin-left:6px; font-size:var(--h5-font-aux); font-weight:600; color:#16a34a; }
.sms-reg-tag.is-new { color:#ef4444; }
.auth-field > input,
.auth-code-line input { width:100%; min-height:var(--h5-control-height); box-sizing:border-box;
padding:var(--h5-card-gap) var(--h5-card-inline); border:1px solid #d1d5db;
border-radius:6px; font-size:var(--h5-font-input); }
.auth-code-line { display:flex; gap:var(--h5-control-gap); }
.auth-code-line input { flex:1; min-width:0; }
.auth-note { color:#6b7280; font-size:var(--h5-font-aux); line-height:1.5;
margin:-5px 0 var(--h5-card-gap); }
.login-password-hint { margin-top:4px; margin-bottom:0; }
.auth-note.emphasis { color:#ef4444; font-weight:600; }
.auth-error { min-height:18px; margin-bottom:var(--h5-card-gap);
color:#dc2626; font-size:var(--h5-font-body); }
.auth-agree { display:flex; align-items:flex-start; gap:var(--h5-control-gap);
margin-bottom:var(--h5-card-gap); color:#6b7280; font-size:var(--h5-font-aux);
line-height:1.5; }
.auth-agree input { flex-shrink:0; margin:2px 0 0; }
.auth-primary { width:100%; min-height:var(--h5-tap-primary); padding:var(--h5-card-gap);
background:#ef4444; color:#fff; border:none; border-radius:6px;
font-size:calc(var(--h5-font-body) + 1px); font-weight:bold; cursor:pointer; }
.auth-links { display:flex; justify-content:space-between; gap:var(--h5-control-gap);
margin-top:var(--h5-section-gap); font-size:var(--h5-font-aux); }
.auth-center { text-align:center; margin-top:var(--h5-section-gap);
color:#6b7280; font-size:var(--h5-font-aux); }
.auth-center.compact { margin-top:var(--h5-card-gap); }
.auth-link { cursor:pointer; text-decoration:underline; }
.auth-link.red { color:#ef4444; }
.auth-link.blue { color:#3b82f6; }
.auth-link.muted { color:#6b7280; }
.auth-link.strong { font-weight:bold; }
/* 登录注册合一后，登录视图底部只剩「忘记密码」一项，靠右不居中 */
.auth-links.auth-links-end { justify-content:flex-end; }
/* B22 已开赛未结束的选中确认框：左「保留」次要样式、右「取消」主按钮（默认动作） */
.live-confirm-box { max-width: 320px; padding: var(--h5-section-gap); text-align: center; }
.live-confirm-text { color:#374151; font-size:var(--h5-font-body); line-height:1.6;
margin-bottom:var(--h5-section-gap); text-align:left; }
.live-confirm-actions { display:flex; gap:var(--h5-control-gap); }
.live-confirm-btn { flex:1; min-height:var(--h5-tap-primary); border-radius:6px;
font-size:calc(var(--h5-font-body) + 1px); font-weight:bold; cursor:pointer; }
.live-confirm-btn.keep { background:#fff; color:#6b7280; border:1px solid #d1d5db; }
.live-confirm-btn.cancel { background:#ef4444; color:#fff; border:none; }
/* 注册赠送权益提示：与 web 端同款黄底框（2026-08-10 登录注册合并，位置移到 tab 之上） */
.register-gift-hint {
color:#a61c2b; background:#fff4e5; border:1px solid #f3d18b; border-radius:8px;
padding:7px 10px; font-size:var(--h5-font-aux); line-height:1.4;
margin-bottom:var(--h5-card-gap);
}
/* 验证码配额用尽：按钮保持不可点，与倒计时中的禁用态区分（灰底灰字、不再变回可点） */
.reg-code-btn.quota-out { background:#f3f4f6; color:#9ca3af; border-color:#e5e7eb; cursor:not-allowed; }
.share-dialog-box { max-width:340px; position:relative; padding:var(--h5-dialog-inline); }
.share-dialog-actions { display:flex; gap:var(--h5-control-gap); margin-top:var(--h5-section-gap); }
.share-dialog-btn { flex:1; min-height:var(--h5-tap-primary); padding:var(--h5-card-gap);
background:#fff; color:#6b7280; border:1px solid #d1d5db; border-radius:6px;
font-size:calc(var(--h5-font-body) + 1px); cursor:pointer; }
.share-dialog-btn.primary { background:#ef4444; color:#fff; border-color:#ef4444; font-weight:bold; }
.share-img-box { max-width:400px; position:relative; padding:var(--h5-card-inline); }
.share-img-hint { text-align:center; font-size:var(--h5-font-body); color:#6b7280;
margin:var(--h5-control-gap) 0 var(--h5-card-gap); }
.share-img-scroll { max-height:62vh; overflow-y:auto; }
.share-img-preview { width:100%; display:block; }
.share-img-download { display:block; min-height:var(--h5-control-height); text-align:center;
margin-top:var(--h5-section-gap); padding:var(--h5-card-gap); background:#ef4444;
color:#fff; border-radius:6px; text-decoration:none; font-size:var(--h5-font-body); }
/* 深度解析页：保存/分享 bar 叠在底部导航正上方（双底栏堆叠，页脚常驻）*/
body.has-plan-bar .plan-bottom-bar {
bottom: calc(var(--h5-bottom-nav-height) + env(safe-area-inset-bottom));
padding-bottom: var(--h5-control-gap);
z-index: 999;
}
/* ── 个人中心 / 分享方式弹窗 ── */
.myplans-box { max-width:480px; width:100%; padding:var(--myplans-head-top) 0 var(--h5-card-gap);
position:relative; max-height:92vh; overflow-y:auto; }
.myplans-title { text-align:center; font-size:calc(var(--h5-font-data) + 3px);
font-weight:bold; color:#ef4444; margin-bottom:var(--h5-card-gap); }
.myplan-block { border: 1px solid #f3f4f6; border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.myplan-block-title { font-size: 14px; font-weight: bold; color: #374151; margin-bottom: 6px; }
.myplan-empty { color: #9ca3af; text-align: center; padding: 10px 0; }
.myplan-meta { font-size: 12px; color: #6b7280; margin-bottom: 6px; }
.myplan-sel { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #374151; padding: 4px 0; border-bottom: 1px dashed #f3f4f6; }
.myplan-sel .mp-no { flex: 0 0 auto; min-width: 52px; color: #e11d48; font-weight: 700; }
.myplan-sel .mp-teams { flex: 1 1 auto; text-align: center; color: #111827; }
.myplan-sel .mp-odds { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.myplan-sel .mp-odds em { display: inline-block; padding: 1px 6px; border: 1px solid #fecaca; border-radius: 5px; background: #fef2f2; color: #e11d48; font-style: normal; font-weight: 600; }
.myplan-opt { margin-top: 8px; }
.myplan-opt-title { font-size: 12px; color: #ef4444; font-weight: bold; margin-bottom: 4px; }
.myplan-opt-title span { color: #6b7280; font-weight: normal; margin-left: 4px; }
.myplan-time { font-size: 11px; color: #9ca3af; margin-top: 6px; text-align: right; }
/* ── 个人中心概览网格 ── */
.uc-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--h5-card-gap); }
.uc-cell { background:#f9fafb; border:1px solid #f3f4f6; border-radius:8px;
padding:var(--h5-card-gap); }
.uc-label { font-size:var(--h5-font-aux); color:#9ca3af; margin-bottom:4px; }
.uc-value { font-size:var(--h5-font-body); font-weight:bold; color:#111827; word-break:break-all; }
.uc-value.red { color: #ef4444; }
/* ── 分享方式选择 ── */
.share-options { display:flex; gap:var(--h5-control-gap); margin-top:var(--h5-section-gap); }
.share-opt {
flex:1; min-width:0; text-align:center; padding:var(--h5-card-block) 2px;
border:1.5px solid #e5e7eb; border-radius:10px; font-size:var(--h5-font-aux);
color:#374151; cursor:pointer; line-height:1.7;
white-space: nowrap;
}
.share-opt.active { border-color: #ef4444; background: #fef2f2; color: #ef4444; font-weight: bold; }
/* 微信 / 朋友圈：暂不可选，置灰即表示不可点（emoji 用 grayscale 才压得住自带的颜色）*/
.share-opt.disabled { border-color: #f3f4f6; background: #f9fafb; color: #c0c4cc;
cursor: not-allowed; filter: grayscale(1); opacity: .65; }
/* ══════════ 已保存方案页 #page-saved（多方案/筛选/编辑/分组）══════════ */
#page-saved { height:100%; overflow-y:auto; background:#f5f7fa;
padding-bottom:calc(var(--h5-action-bar-height) + var(--h5-card-block)); }
.saved-topbar { position:sticky; top:0; z-index:5; display:flex; align-items:center;
justify-content:space-between; background:#fff;
padding:var(--h5-card-block) var(--h5-page-inline); border-bottom:1px solid #f0f0f0; }
/* 返回箭头改纯 CSS 几何图形，不再用 ‹ 文字符号——字形墨迹本身上下不对称，此前靠
#page-plan-detail 下面那条 --pd-back-shift 手动补偿都压不准（2026-09-24 用户反馈）。
width:24px 与 .saved-edit-ph 同宽的约定不变，标题居中不受影响。flex:0 0 auto 防窄屏被压缩 */
.saved-back { border: none; background: none; color: #374151; cursor: pointer; font-size: 0;
width: 24px; height: 24px; flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center; }
.saved-back::before { content: ''; display: block; width: 11px; height: 11px;
border: solid #374151; border-width: 0 2.5px 2.5px 0; transform: rotate(135deg); margin-left: 3px; }
.saved-title { font-size:var(--saved-title-size); font-weight:bold; color:#111827; }
.saved-edit { border:none; background:none; color:#3b82f6; font-size:var(--h5-font-body); cursor:pointer; }
/* 统计 */
.saved-stats { display:flex; background:#fff; padding:var(--h5-page-inline) 0;
margin-bottom:var(--h5-card-gap); }
/* 4 列后每格仅屏宽 1/4，字号随屏宽收缩，保证「保存金额（元）」窄屏不折行 */
.ss-cell { flex: 1 1 0; min-width: 0; text-align: center; }
.ss-num { font-size: clamp(17px, calc(2.6vw + 8.7px), 22px); font-weight: 700; color: #374151; }
.ss-num.won { color: #dc2626; }
.ss-lbl { font-size: clamp(10px, calc(1.8vw + 4.2px), 12px); color: #9ca3af; margin: 2px 0 0; white-space: nowrap; }
/* 筛选 */
.saved-filters { display: flex; background: #fff; border-bottom: 1px solid #f0f0f0; }
.sf-btn { flex:1; min-height:var(--h5-control-height); border:none; background:none;
padding:var(--h5-card-block) 4px; font-size:var(--h5-font-body); color:#374151; cursor:pointer; }
.sf-btn:not(:last-child) { border-right: 1px solid #f3f4f6; }
.saved-menu { background:#fff; padding:var(--h5-card-block) var(--h5-page-inline);
border-bottom:1px solid #f0f0f0; }
.saved-menu .sm-chip, .saved-groups .sg-chip { min-height:var(--h5-control-height);
border:1px solid #e5e7eb; background:#f9fafb; color:#6b7280; border-radius:8px;
padding:var(--h5-card-gap) var(--h5-page-inline); font-size:var(--h5-font-body);
cursor:pointer; margin:0 var(--h5-card-gap) var(--h5-card-gap) 0; }
.saved-menu .sm-chip.active, .saved-groups .sg-chip.active { background: #fff1f2; color: #dc2626; border-color: #dc2626; font-weight: 500; }
.saved-menu .sm-row { display: flex; flex-wrap: wrap; margin-top: 4px; }
.mm-item { display:flex; justify-content:space-between; align-items:center; width:100%;
min-height:var(--h5-control-height); border:none; background:none;
padding:var(--h5-card-block) 4px; font-size:var(--h5-font-body); color:#374151;
border-bottom:1px solid #f3f4f6; cursor:pointer; }
.mm-item.active { color: #dc2626; font-weight: 600; }
#savedMonthMenu { display:grid; grid-template-columns:repeat(auto-fit, minmax(72px, 1fr)); gap:6px; }
#savedMonthMenu .mm-item { width:auto; min-height:36px; justify-content:center; padding:6px 4px;
border:1px solid #e5e7eb; border-radius:8px; background:#f9fafb; text-align:center; }
#savedMonthMenu .mm-item.active { border-color:#dc2626; background:#fff1f2; }
.mm-lock { color: #f59e0b; font-size: 12px; }
/* 分组 chips */
.saved-groups { display:flex; flex-wrap:wrap; background:#fff;
padding:var(--h5-card-gap) var(--h5-page-inline) 2px; }
/* 列表 */
.saved-list { padding:var(--h5-card-gap) var(--h5-page-inline); }
.saved-empty { text-align:center; color:#9ca3af;
padding:calc(var(--h5-dialog-inline) + var(--h5-dialog-inline)) 0;
font-size:var(--h5-font-body); }
/* S26 卡片两行版式：行1=日期块+方案编号，行2=彩种+来源+金额+状态徽章；--sc-fs 整卡连续缩放 */
.saved-card { display:flex; align-items:center; gap:var(--h5-control-gap); background:#fff;
border-radius:12px; box-shadow:0 1px 3px rgba(0,0,0,0.05);
padding:var(--h5-card-block) var(--h5-card-inline); margin-bottom:var(--h5-card-gap);
cursor:pointer; --sc-fs: clamp(10.4px, calc(2.909vw + 1.09px), 12px); }
.saved-card.edit { --sc-fs: clamp(9.57px, calc(3.254vw - 0.84px), 12px); }
.sc-chk { width: 20px; height: 20px; border: 1.5px solid #d1d5db; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #fff; }
.sc-chk.on { background: #dc2626; border-color: #dc2626; }
.sc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sc-row1 { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
/* 行2 = 三列：左组(彩种+来源) | 本金 | 奖金徽章（2026-08-07 用户订立）。
⚠️ 列宽必须写死百分比而不是 auto —— 每张卡片是**独立的 grid**，auto 只在卡片内部取最大内容宽，
卡片与卡片之间不会对齐；用百分比才能让整列金额在视觉上排成一条线。
⚠️ 微调点：--sc-stake-w（本金列）/ --sc-prize-w（奖金列），只改这两个值。 */
.sc-row2 { --sc-stake-w: 22%; --sc-prize-w: 32%;
display: grid; grid-template-columns: 1fr var(--sc-stake-w) var(--sc-prize-w);
align-items: center; gap: 4px; white-space: nowrap; }
.sc-meta { display: flex; align-items: center; gap: 4px; min-width: 0; }
.sc-left { display: flex; align-items: baseline; gap: 3px; background: #eff6ff; border-radius: 8px;
padding: 4px 6px; flex-shrink: 0; }
.sc-date { font-size: calc(var(--sc-fs) * 1.17); font-weight: bold; color: #374151; }
.sc-time { font-size: calc(var(--sc-fs) * 0.92); color: #9ca3af; }
.sc-badge { display: inline-block; font-size: calc(var(--sc-fs) * 1.08); font-weight: bold;
padding: 3px 8px; border-radius: 14px; justify-self: end; }
/* 未开奖与首页赛程的「未开赛」同为「时间未到」，配色统一取 .status-wait 的橙 */
.sc-badge.open { background: #fff7ed; color: #c2410c; }
.sc-badge.lost { background: #e5e7eb; color: #9ca3af; }
.sc-badge.won { background: #fde2e2; color: #dc2626; }
.sc-name { font-size: var(--sc-fs); color: #9ca3af; margin-left: auto; }
.sc-lot, .sc-src { font-size: var(--sc-fs); color: #9ca3af; }
.sc-amt { font-size: calc(var(--sc-fs) * 1.33); color: #374151; font-weight: 600; text-align: right; }
/* 编辑底栏 */
.saved-editbar { position:fixed; left:0; right:0; bottom:0; max-width:480px; margin:0 auto;
background:#fff; box-shadow:0 -2px 10px rgba(0,0,0,0.08); display:flex; align-items:center;
gap:var(--h5-control-gap); padding:var(--h5-control-gap) var(--h5-page-inline)
calc(var(--h5-control-gap) + env(safe-area-inset-bottom)); z-index:60; }
.seb-all { font-size:var(--h5-font-body); color:#374151; display:flex;
align-items:center; gap:4px; margin-right:auto; }
.seb-btn { min-height:var(--h5-control-height); border:1px solid #e5e7eb;
background:#fff; border-radius:8px; padding:var(--h5-card-gap) var(--h5-page-inline);
font-size:var(--h5-font-body); cursor:pointer; color:#6b7280; }
.seb-btn.del { color: #dc2626; border-color: #fecaca; }
.seb-btn.grp { color: #3b82f6; border-color: #bfdbfe; }
/* 会员门槛 */
.saved-lock { text-align:center;
padding:calc(var(--h5-dialog-inline) + var(--h5-dialog-inline)) var(--h5-dialog-inline); }
.saved-lock-ico { font-size: 40px; }
.saved-lock p { color:#6b7280; font-size:var(--h5-font-body);
margin:var(--h5-section-gap) 0 calc(var(--h5-section-gap) + 6px); }
.saved-lock-btn { min-height:var(--h5-control-height); background:#dc2626; color:#fff;
border:none; border-radius:20px;
padding:var(--h5-card-gap) calc(var(--h5-page-inline) + var(--h5-page-inline));
font-size:var(--h5-font-body); font-weight:bold; cursor:pointer; }
/* ══════════ 消费记录页 #page-consume ══════════ */
#page-consume { height:100%; overflow-y:auto; background:#f5f7fa;
padding-bottom:calc(var(--h5-dialog-inline) + var(--h5-dialog-inline)); }
.saved-edit-ph { width: 24px; } /* 与 .saved-back 同宽，保持标题居中 */
.consume-summary { display:flex; align-items:center; justify-content:space-between;
gap:var(--h5-control-gap); background:#fff;
/* 统计文字与右侧两个按钮同步缩，保证 320px 统计行不折行 */
--cs-font:clamp(12.4px, calc(2.4vw + 4.72px), var(--h5-font-body));
padding:var(--h5-card-block) var(--h5-page-inline); border-bottom:1px solid #f0f0f0; }
.cs-text { font-size:var(--cs-font); color:#6b7280; flex:1; }
.cs-actions { display:flex; gap:var(--h5-control-gap); flex-shrink:0; }
.cs-filter-btn, .cs-export-btn { min-height:var(--h5-control-height);
border:1px solid #e5e7eb; background:#f9fafb; color:#374151; border-radius:8px;
padding:var(--h5-control-gap) var(--h5-card-inline); font-size:var(--cs-font); cursor:pointer; }
.cs-export-btn { background: #16a34a; color: #fff; border-color: #16a34a; }
.consume-filter { background:#fff; padding:var(--h5-card-block) var(--h5-page-inline);
border-bottom:1px solid #f0f0f0; }
.cf-row { display:flex; align-items:center; gap:var(--h5-control-gap);
margin-bottom:var(--h5-card-gap); }
.cf-row label { width:68px; font-size:var(--h5-font-body); color:#6b7280; flex-shrink:0; }
.cf-row select, .cf-row input { flex:1; min-width:0; min-height:var(--h5-control-height);
border:1px solid #e5e7eb; border-radius:8px; padding:var(--h5-control-gap) var(--h5-card-gap);
font-size:var(--h5-font-input); color:#374151; background:#fff; }
.cf-sep { flex:0 0 auto; color:#9ca3af; font-size:var(--h5-font-aux); }
.cf-actions { display:flex; gap:var(--h5-control-gap); margin-top:4px; }
.cf-btn { flex:1; min-height:var(--h5-control-height); border:1px solid #e5e7eb;
background:#f9fafb; color:#374151; border-radius:8px; padding:var(--h5-card-gap) 0;
font-size:var(--h5-font-body); cursor:pointer; }
.cf-btn.primary { background: #dc2626; color: #fff; border-color: #dc2626; }
.consume-list { padding:var(--h5-card-block) var(--h5-page-inline) 0; }
.consume-card { background:#fff; border-radius:12px; box-shadow:0 1px 3px rgba(0,0,0,0.05);
padding:var(--h5-card-block) var(--h5-card-inline); margin-bottom:var(--h5-card-gap); }
.cc-head { display:flex; align-items:flex-start; justify-content:space-between;
gap:var(--h5-control-gap); margin-bottom:var(--h5-card-gap);
padding-bottom:var(--h5-card-gap); border-bottom:1px dashed #f0f0f0; }
.cc-name { font-size:calc(var(--h5-font-body) + 1px); font-weight:bold; color:#111827; flex:1; }
.cc-badge { flex-shrink: 0; font-size: 12px; font-weight: bold; padding: 4px 12px; border-radius: 14px; }
.cc-badge.paid { background: #dcfce7; color: #16a34a; }
.cc-badge.closed { background: #e5e7eb; color: #6b7280; }
.cc-badge.failed { background: #fee2e2; color: #dc2626; }
.cc-badge.pending { background: #fef3c7; color: #d97706; }
.cc-row { display:flex; align-items:flex-start; gap:var(--h5-control-gap);
font-size:var(--h5-font-body); margin-top:var(--h5-card-gap); }
.cc-k { width: 60px; color: #9ca3af; flex-shrink: 0; }
.cc-v { color: #374151; flex: 1; text-align: right; }
.cc-wrap { word-break: break-all; }
.cc-amt { color: #dc2626; font-weight: bold; }
.consume-pager { display:flex; align-items:center; justify-content:center;
gap:var(--h5-section-gap); padding:var(--h5-page-inline); }
.cp-btn { min-height:var(--h5-control-height); border:1px solid #e5e7eb;
background:#fff; color:#374151; border-radius:8px;
padding:var(--h5-card-gap) var(--h5-page-inline); font-size:var(--h5-font-body); cursor:pointer; }
.cp-btn:disabled { color: #d1d5db; background: #f9fafb; cursor: not-allowed; }
.cp-info { font-size: 13px; color: #6b7280; }
/* ══════════ 已开通服务页 #page-services ══════════ */
#page-services { height:100%; overflow-y:auto; background:#f5f7fa;
padding-bottom:calc(var(--h5-dialog-inline) + var(--h5-dialog-inline)); }
.svc-status { display:flex; align-items:center; gap:var(--h5-control-gap); background:#fff;
padding:var(--h5-page-inline); margin-bottom:var(--h5-card-gap); }
.svc-status.on { border-left: 3px solid #dc2626; }
.svc-badge { background: #dc2626; color: #fff; font-size: 13px; font-weight: bold; padding: 3px 12px; border-radius: 12px; }
.svc-status-txt { font-size:var(--h5-font-body); color:#374151; flex:1; }
.svc-open-btn { min-height:var(--h5-control-height); border:none; background:#dc2626;
color:#fff; border-radius:8px; padding:var(--h5-control-gap) var(--h5-page-inline);
font-size:var(--h5-font-body); cursor:pointer; }
.svc-benefits-title { font-size:var(--h5-font-body); color:#9ca3af;
padding:var(--h5-control-gap) var(--h5-page-inline); }
.svc-list { padding:0 var(--h5-page-inline); }
.svc-item { display:flex; align-items:center; justify-content:space-between; background:#fff;
border-radius:10px; padding:var(--h5-card-block) var(--h5-card-inline);
margin-bottom:var(--h5-card-gap); }
.svc-item-name { font-size:calc(var(--h5-font-body) + 1px); color:#111827; }
.svc-item.off .svc-item-name { color: #6b7280; }
.svc-item-state { font-size: 13px; font-weight: 500; }
.svc-item.on .svc-item-state { color: #16a34a; }
.svc-item.off .svc-item-state { color: #d1d5db; }
.svc-tip { text-align:center; font-size:var(--h5-font-aux); color:#9ca3af;
padding:var(--h5-card-block); }
/* S8 字体放大兜底：仅 下生效，正常字号完全不参与渲染 —— 见 H5/docs/H5主站样式设计说明.md */
/* ① 顶部品牌行（标签 + 国彩量化 + 标签 + 右上角用户态）：**必须保持一行**（2026-07-28 用户订立）。
曾用「退回文档流 + 换行」方案，实测在微信放大字体下变成四行、观感差，已改为
**按实测倍率反向补偿字号**：font-size 写成 calc(设计值 / var(--font-scale))，
引擎再乘以放大倍率后正好回到设计尺寸，于是一行照常放得下，原有绝对定位布局一点不动。 */
.font-boosted .brand-title {
font-size: calc(clamp(24px, 7.5vw, 32px) / var(--font-scale, 1));
}
.font-boosted .top-tag-left,
.font-boosted .top-tag-right {
font-size: calc(clamp(8px, 2.4vw, 10px) / var(--font-scale, 1));
}
.font-boosted .user-indicator {
font-size: calc(12px / var(--font-scale, 1));
}
.font-boosted .user-indicator .user-icon {
font-size: calc(13px / var(--font-scale, 1));
}
/* ② 数据条：原设计「手机端保持一行、靠压缩间距放下」，字号放大后物理上放不下（实测溢出
61px 被裁）。放大时允许换行——信息完整比一行重要。 */
/* 数据条同理**必须保持一行**：原「允许换行」方案在微信放大字体下会折成两行、被下方卡片压住。
改为反向补偿字号，保留原设计的 nowrap + 靠压缩间距放下。 */
.font-boosted .data-bar,
.font-boosted .data-bar > span {
font-size: calc(clamp(11px, calc(5vw - 4.7px), 13px) / var(--font-scale, 1));
}
.font-boosted .data-bar {
gap: 2px;
}
/* 页脚合规条与备案行同样要求一行显示。基准字号已改为随屏宽自适应的 clamp（见上方定义），
这里连同 clamp 一起除以放大倍率——两个维度叠加：窄屏先按屏宽收缩，再抵消字体放大。 */
.font-boosted .compliance-tip {
font-size: calc(clamp(11.5px, calc(5vw - 4.5px), 14px) / var(--font-scale, 1));
}
.font-boosted .icp-beian-content {
font-size: calc(clamp(9px, calc(2.9vw - 0.3px), 11px) / var(--font-scale, 1));
}
/* ③ 赔率行标签：.odds-label-column 固定 width:44px，「非让球」3 字 ×13px=39px 刚好塞下，
放大后竖排成「非让 / 球」。放大时按内容取宽（44px 仅作下限）。 */
.font-boosted .odds-label-column {
width: auto;
min-width: 44px;
}
.font-boosted .odds-label-box {
padding: 0 4px;
white-space: nowrap;
}
/* ④ 卡片头整行「周二201 瑞超 ｜ 未开赛 07-28 18:00」**必须保持一行**（2026-07-28 用户反馈：
放大后开赛时间折成两行）。原方案是放开折行（white-space:normal），现统一改为字号反向补偿。
整行一起补偿而不是只补时间：编号/联赛/状态标签同样会被放大、挤占右列空间，只补时间挡不住。
注意 .match-no-red 用的是 rem——引擎放大时 html 根字号同样被放大，故 rem 也要一并补偿。 */
.font-boosted .match-card-head .head-right > span {
font-size: calc(12px / var(--font-scale, 1));
white-space: nowrap;
}
.font-boosted .match-card-head .match-no-red {
font-size: calc(0.875rem / var(--font-scale, 1));
}
.font-boosted .match-card-head .league-tag,
.font-boosted .match-card-head .status-tag {
font-size: calc(12px / var(--font-scale, 1));
}
/* ⑤ 队名：max-width 5.2rem 是按「15px×5 字=75px」算的，放大后 5 字排不下被过早省略。
改用百分比跟着 .team-box（已有 min-width:0）自适应——比再写死一个 rem 值稳：
rem 会随系统字号一起放大，写死容易反过来撑破卡片。ellipsis 仍兜底。 */
.font-boosted .team-name {
max-width: 100%;
min-width: 0;
}
/* ⑥ 比分中列：width:40px 是「能压到多窄的下限」，放大后 VS 撑破 → 放大时改为下限约束。 */
.font-boosted .score-middle {
width: auto;
min-width: 40px;
}
/* ⑦ 未解锁的 AI 解析提示：原规则是 nowrap + overflow:hidden + text-overflow:clip（硬切），
文案本身很长（🔒 今日及未来赛事需开通VIP查看完整AI量化深度解析），放大后必然被切掉半句。
放大时允许换行——注意原规则特异性 (0,3,0)，这里必须写到同层级才盖得住。 */
.font-boosted .ai-analysis.is-locked {
white-space: normal;
overflow: visible;
align-items: flex-start;
}
.font-boosted .ai-analysis.is-locked .ai-content {
white-space: normal;
overflow: visible;
text-overflow: clip;
overflow-wrap: break-word;
}
/* S7 已保存方案详情弹窗：DOM 与 CSS 均为单点（共享 plan_share_view.js + plan_card.css）—— 见 H5/docs/赛程卡片公共样式的设计和使用范围.md */
/* AI精选提问区：标题 = 小 logo + 一键机选竞足方案；输入框单行、按钮只留「生成」二字 */
.ai-plan-ask h2 .ai-plan-logo { display: inline-block; height: 1.15em; width: auto; vertical-align: -0.18em; margin-right: 5px; }
.ai-plan-input { height: auto; }
.ai-plan-hint { color: #9ca3af; font-size: clamp(10px, calc(2.4vw + 2.3px), 12px); }
/* ── 球队队徽（2026-07-30 新增）─────────────────────────────
源站无队徽的球队后端返回空串、前端不渲染，因此这些场次的排版与加队徽前完全一致。
尺寸用 em 跟随所在处字号；flex:none 防止在 flex 容器里被压扁。
⚠️ 队徽只塞进队名自己那一格，不动 .match-card-head 的 1fr 1fr
（中心分界线固定在卡片正中，是踩过坑才定下的既有约定）。 */
.team-badge {
/* 改队徽大小**只改这一个变量**：上下负 margin 由它算出，永远把「超过行高的部分」吸收掉，
使队徽对 flex 容器高度的贡献恒等于行高 1.4em —— 队徽放大而卡片高度一点不变。
（队名行高 = font-size × 1.4，见 .team-name / .team-name-text。
H5 卡片高度基线：375px = 224px、320px = 234.4px，调完请复测。） */
--badge-size: 1.7em;
width: var(--badge-size);
height: var(--badge-size);
margin-top: calc((1.4em - var(--badge-size)) / 2);
margin-bottom: calc((1.4em - var(--badge-size)) / 2);
object-fit: contain;
flex: none;
vertical-align: middle;
/* 队徽比行高大，探出的上下两端必须浮在相邻内容之上、且不被祖先裁掉，
否则看起来像被切掉一截（配套：下面的 .has-badge 容器与 .plan-compact-team 一律 overflow:visible）。 */
position: relative;
z-index: 20;
}
.team-badge.tb-home { margin-left: .28em; }
.team-badge.tb-away { margin-right: .28em; }
.team-name.has-badge,
.team-name-text.has-badge {
display: inline-flex;
align-items: center;
min-width: 0;
/* 不裁掉探出行外的队徽——队名的 ellipsis 已改由内层 .tn-text 负责 */
overflow: visible;
/* 6.3em 是队名自身的既有上限（放得下「5字+…」共 6 个字形，两处同口径）。
队徽额外占 1.15em 图 + 0.28em 间距，这里把这部分补进上限 ——
目的是给队徽腾出新空间，而不是挤掉队名一个字。列宽仍由 .vs-row 的
minmax(0,1fr) 兜底，放不下时由 .tn-text 的 ellipsis 截断，不会撑破中心线。 */
max-width: calc(6.3em + 1.43em);
}
.team-name.has-badge .tn-text,
.team-name-text.has-badge .tn-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* S13 串关精选吸底：只有赛程列表滚动，操作栏+计算器常驻页脚之上
—— 见 H5/docs/H5主站样式设计说明.md */
#page-plan.plan-sticky-calc {
overflow: hidden;
/* 保存/分享 bar 已并入计算器（见 S13），不再为它预留 --h5-action-bar-height + 8px，
否则这 72px 会白白从赛程列表的可视高度里扣掉 */
padding-bottom: calc(var(--h5-bottom-nav-height) + env(safe-area-inset-bottom));
}
#page-plan.plan-sticky-calc #planPaneMulti {
display: flex; flex-direction: column; flex: 1; min-height: 0;
}
#page-plan.plan-sticky-calc #planListMulti {
flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
#page-plan.plan-sticky-calc .plan-action-bar,
#page-plan.plan-sticky-calc #planCalculator { flex: 0 0 auto; }
/* S14 方案详情整页 #page-plan-detail：顶栏与其余子页同款（‹ / 标题 / 分享方案）
S6 卡片容器与分享页 share.html 的 .wrap 同口径 —— 见 H5/docs/H5主站样式设计说明.md */
#page-plan-detail {
height: 100%; overflow-y: auto; background: #f5f7fa;
padding-bottom: var(--h5-card-block);
/* 顶栏元素的视觉对齐：取值依据见文档 S14。‹ 已于 2026-09-24 改成纯 CSS 几何图形，
不再需要按字号手动补偿的 --pd-back-shift（原变量与下面那条覆盖规则一并删除）。 */
--pd-topbar-lift: 2px; /* 整行上移量（0=不移，越大越靠上）*/
--pd-share-shift: -1px; /* 「分享方案」胶囊的补偿（负=上移）*/
}
/* 整行上移：上内边距减、下内边距加，行高与顶栏总高不变。
左右内边距比其余子页各收 2px —— 标题是固定长度的方案审计名，窄屏靠让出间隙保单行 */
#page-plan-detail .saved-topbar {
padding-top: calc(var(--h5-card-block) - var(--pd-topbar-lift))-1px;
padding-bottom: calc(var(--h5-card-block) + var(--pd-topbar-lift))-1px;
padding-left: calc(var(--h5-page-inline) - 2px);
padding-right: calc(var(--h5-page-inline) - 2px);
}
#page-plan-detail .plan-detail-share { position: relative; top: var(--pd-share-shift); }
.plan-detail-body { padding: 6px 2px 0; }
/* 方案明细页：时间由 HH:mm 改为「月日 时间」后右列宽约 +26px（2026-08-06 用户订立：
本页多个赛程混排、无日期分组标题，只留时分分不清哪天）。按 §0.5 优先级①先回收容器留白，
实测 320/375 档只靠回收 padding 即可放下 6 字队名，**无需缩字号**。 */
#page-plan-detail .plan-card-view .plan-match-card { padding-left: 2px; padding-right: 2px; }
/* 利润率色块：本页时间行位置比分享页低一点，色块要再往下 3px 才不压住时间（2026-08-06 用户订立）。
⚠️ 微调点：只改这个 --pr-down。 */
#page-plan-detail .plan-card-view .profit-rate { --pr-down: 6px; }
#page-plan-detail .plan-card-view .plan-card-summary { padding-left: 1px; padding-right: 1px; }
/* 标题=固定长度审计名（4 汉字 + 20 ASCII），不加粗；字号连续缩放保证 320px 起单行不截断，
取值依据（各档实测上限与余量）见文档 S14。ellipsis 仅作兜底，正常不应触发 */
.plan-detail-title {
flex: 1 1 auto; min-width: 0; text-align: center;
font-weight: 400; font-size: clamp(13.3px, calc(5vw - 2.7px), 17.6px);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.plan-detail-share {
flex: 0 0 auto; min-height: var(--h5-tap-min); padding: 4px 6px;
border: 0; border-radius: 9px; background: #ef4444; color: #fff;
font-size: var(--h5-font-aux); font-weight: 600; cursor: pointer; white-space: nowrap;
}
/* S15 轻提示：2 秒自动消失，替代保存成功时的阻塞式 alert */
.plan-toast {
position: fixed; left: 50%; bottom: 30%; transform: translateX(-50%);
z-index: 200; max-width: 80%;
padding: 10px 18px; border-radius: 20px;
background: rgba(17, 24, 39, .88); color: #fff;
font-size: var(--h5-font-data); text-align: center;
opacity: 0; pointer-events: none; transition: opacity .2s;
}
.plan-toast.show { opacity: 1; }
/* ── 首页：AI 解析展开/收起（2026-08-03 用户订立）─────────────── */
/* data-bar 三段式：左右两段 flex:1 等宽，中间统计才真正居中（space-between 不保证居中） */
/* min-width:max-content 是关键：有余量时两侧 flex:1 等宽 → 中段真居中；
余量不足时两侧退回内容宽、优先保证不压字（响应式原则：宁可不居中，不可覆盖） */
.data-bar .db-side { flex: 1 1 0; min-width: max-content; display: flex; align-items: center; }
.data-bar .db-right { justify-content: flex-end; }
/* 两端各留一点内缩，别顶着边框（2026-08-05 用户订立）。
窄屏逐档收窄：这行本就吃紧，留白优先让位给中段数据。
⚠️ 用 margin 而非父容器 padding —— padding 会把中段的可用宽也一起压掉。 */
.data-bar .db-left { margin-left: 3px; }
.data-bar .db-right { margin-right: 3px; }
@media (max-width: 360px) {
.data-bar .db-left { margin-left: 2px; }
.data-bar .db-right { margin-right: 2px; }
}
@media (max-width: 320px) {
.data-bar .db-left { margin-left: 1px; }
.data-bar .db-right { margin-right: 1px; }
}
/* 中段「结束N场命中N场命中X.X%」：数字保持原字号，汉字/量词小一号并去掉字间空隙。
.db-t 是非数字文字，缩它不影响数字可读性，整段还能省下约 10px 让给右侧开关。 */
.data-bar .db-stat { flex: 0 0 auto; white-space: nowrap; }
.data-bar .db-t { font-style: normal; font-size: 0.84em; color: #6b7280; }
.data-bar .db-stat > span { margin: 0 1px; }
/* 顶部一键开关：文字 + 拨动开关，开=绿（尚有展开的卡片）/ 关=灰（全部收起） */
.analyse-switch {
display: inline-flex; align-items: center; gap: 3px;
border: 0; background: none; padding: 0; cursor: pointer;
/* 「解析」二字小一号：它是操作入口不是数据，缩它换中段数据的可读性 */
font-size: 0.84em; color: #374151; white-space: nowrap;
}
.analyse-switch .as-track {
position: relative; width: 26px; height: 15px; border-radius: 999px;
background: #d1d5db; transition: background .18s; flex: 0 0 auto;
}
.analyse-switch .as-knob {
position: absolute; top: 2px; left: 2px; width: 11px; height: 11px;
border-radius: 50%; background: #fff; transition: transform .18s;
box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.analyse-switch.on .as-track { background: #22c55e; }
.analyse-switch.on .as-knob { transform: translateX(11px); } /* = 轨道26 - 旋钮11 - 边距2*2 */
/* 卡片右侧竖向「解析 ︿」：去掉非让球/让球标签列后由它补上右侧位置 */
.odds-analyse-toggle {
flex: 0 0 auto; width: 22px; align-self: stretch;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
border: 1px solid #e5e7eb; border-radius: 6px; background: #f9fafb;
color: #6b7280; font-size: 11px; line-height: 1.05; cursor: pointer; padding: 0;
}
.odds-analyse-toggle .oat-text { writing-mode: vertical-rl; letter-spacing: 1px; }
/* 箭头加大加粗（2026-08-06 用户订立）：原 10px 太小、看不出可点。字号与粗细保留。
⚠️ 颜色由「标红 #dc2626」改为 inherit（2026-08-07 用户订立）：红箭头配灰字太突兀。
inherit 后箭头自动跟随按钮文字色 —— 展开态 #6b7280、收起态 .collapsed 的 #9ca3af 都跟着走，
这正是「与文字保持一致」的要求；原先刻意让箭头不随 .collapsed 变灰的设计已废止。 */
.odds-analyse-toggle .oat-caret { font-size: 16px; font-weight: 700; color: inherit; line-height: 1; }
.odds-analyse-toggle:active { background: #f3f4f6; }
.odds-analyse-toggle.collapsed { color: #9ca3af; }
/* 胜/平/负=黑字、赔率数字=中灰（2026-08-03 用户订立，H5 首页卡 / 方案卡 / web 三处同口径） —— 首页赛程卡。
只管普通态：命中/赛果/选中态在上方各有 !important 覆盖，特异性高于本规则，不会串色。 */
.odds-option-box .odds-text { color: #111827; }
.odds-option-box .odds-value { color: #6b7280; }
/* ── B17 单关标识三件套 ─────────────────────────────────────── */
/* 左上角红三角 + 白字「单」逆时针 45°：一个旋转 45° 的方块，左上半探出框外，
由宿主框的 overflow:hidden 裁出三角形；::after 里的「单」再转回 -45° 保持可读。 */
.mk-single {
position: absolute; top: -14px; left: -14px; width: 28px; height: 28px;
background: #ef4444; transform: rotate(45deg); z-index: 2; pointer-events: none;
}
.mk-single::after {
content: '单'; position: absolute; left: 50%; top: 50%;
/* 位移必须在 rotate(-45deg) 之前、且用 translateX：父级顺时针 45° 后，
局部 +x 才是屏幕的右下对角线（+y 是左下，会把字推出框外——两个方向都实测踩过）。 */
/* rotate(-90deg)：父级已 +45°，再 -90° 后字在屏幕上呈 -45°（逆时针 45°，沿三角斜边）。 */
transform: translate(-50%, -50%) translateX(9px) rotate(-90deg);
color: #fff; font-size: 9px; font-weight: 700; line-height: 1; font-style: normal;
}
/* 右上角未登录锁：形态与「实力」旁的 .score-lock 一致 —— 同为原生 🔒 emoji（黄色），
只是小一号。⚠️ 不要加 filter:grayscale —— 那会变灰，与实力分的锁不是一个东西。 */
.mk-lock {
position: absolute; top: 1px; right: 1px; z-index: 2; pointer-events: none;
font-size: 8px; line-height: 1; font-style: normal;
}
.mk-lock::after { content: '🔒'; }
/* 该行三个赔率框的红外框：画在行容器上（首页 .odds-options-row 只包三个赔率框，天然不含 0/-1 列） */
.odds-options-row.single-outline {
border: 1.5px solid #ef4444; border-radius: 8px; padding: 1px;
}
/* B17 量化精选卡：单关行红外框只圈三个赔率框、不含 0/-1 标签（截图 1 口径）。
标签与赔率框同居行容器，故用 ::after 描边层从标签右侧(56px+gap)起画。
⚠️ .plan-odds-label 宽度改动时这里的 58px 必须同步。 */
.plan-odds-row.single-outline { position: relative; }
.plan-odds-row.single-outline::after {
content: ''; position: absolute; top: -2px; bottom: -2px; left: 58px; right: -2px;
border: 1.5px solid #ef4444; border-radius: 8px; pointer-events: none;
}
/* 无预测赔率的场次被「+加入」引导过来时，高亮这一行赔率框提示用户手动选（app.js _planApplyFocusOdds，2.4s 后自动移除） */
.plan-odds-row.odds-need-pick { border-radius: 8px; animation: oddsNeedPick 0.8s ease-in-out 3; }
@keyframes oddsNeedPick {
0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
50% { box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.85); }
}
/* S30 消息中心（铃铛 → 我的消息 / 公告活动）。设计说明见 H5/docs/H5主站样式设计说明.md */
.mine-act-bell{position:relative}
.mine-bell-dot{position:absolute;top:-4px;right:-6px;min-width:16px;height:16px;padding:0 4px;
border-radius:8px;background:#ef4444;color:#fff;font-size:10px;line-height:16px;
text-align:center;font-weight:700;box-sizing:border-box}
.msg-tabs{display:flex;background:#fff;border-bottom:1px solid #eef0f3}
.msg-tab{flex:1;padding:12px 0;border:none;background:none;font-size:15px;color:#8b95a5;
position:relative;cursor:pointer}
.msg-tab.active{color:#e5322d;font-weight:700}
.msg-tab.active::after{content:'';position:absolute;left:50%;bottom:0;transform:translateX(-50%);
width:28px;height:3px;border-radius:2px;background:#e5322d}
/* 根因（2026-09-10 实测）：`.mine-sub-head button{font-size:34px}` 是给「‹」返回箭头写的通用规则，
选择器优先级 (0,1,1) 高于裸类 `.msg-head-act`(0,1,0)，导致「标为已读」被套上 34px 巨字号、
在 44px 宽的第三栏内逐字纵向折行溢出。用 `.mine-sub-head .msg-head-act` 复合选择器压过它，
并单独放宽本页头部第三栏宽度（不改全局 --h5-tap-primary，避免影响其余二级页的对称居中）。 */
/* 消息中心【列表页】头部改用「flex + 标题绝对居中」，不再用等宽两栏 grid 撑居中——
msgHeadAct 的内容会变（空/🗑图标/"标为已读"/"删除(3)"三种宽度都不同），
grid-template-columns 的第三栏不管填 auto 还是固定值，只要它随内容变宽，
中间 1fr 栏就跟着偏、标题就跟着挪（2026-09-10 实测：切两个 tab 标题肉眼可见跳动）。
绝对定位让标题的位置只取决于头部整体宽度，与左右两侧各自多宽完全无关，
彻底切断耦合，不用再猜"留多宽够用"。详情页(#messageDetailPage)第三格恒为空
，本就不受影响，维持原有对称 grid 不动。 */
#messageCenterPage.mine-subpage > .mine-sub-head {
display:flex; align-items:center; position:relative;
}
#messageCenterPage.mine-subpage > .mine-sub-head > h2 {
position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); margin:0;
}
#messageCenterPage.mine-subpage > .mine-sub-head > .msg-head-act {
margin-left:auto;
}
.mine-sub-head .msg-head-act{border:none;background:none;font-size:13px;color:#8b95a5;cursor:pointer;
padding:4px 10px 4px 2px;white-space:nowrap;line-height:1.2}
.msg-head-act.is-icon{font-size:18px}
.msg-head-act.is-active{color:#e5322d;font-weight:700}
.msg-list{padding:8px 0 24px}
.msg-item{display:flex;align-items:flex-start;gap:10px;padding:14px 14px;background:#fff;
border-bottom:1px solid #f2f4f7;cursor:pointer}
/* 选中态用蓝色描边高亮（与截图一致），不改变行高避免列表跳动 */
.msg-item.is-picked{background:#f0f7ff;box-shadow:inset 0 0 0 2px #3b82f6}
.msg-check{flex:0 0 18px;width:18px;height:18px;margin-top:2px;border-radius:50%;
border:1.5px solid #c8ceda;box-sizing:border-box}
.msg-check.on{border-color:#3b82f6;background:#3b82f6 radial-gradient(circle,#fff 22%,transparent 24%)}
.msg-icon{flex:0 0 auto;font-size:20px;line-height:1.2}
.msg-item.is-read .msg-icon{filter:grayscale(1);opacity:.45}
.msg-body{flex:1;min-width:0}
.msg-title{font-size:15px;font-weight:700;color:#1f2532;margin-bottom:3px}
.msg-item.is-read .msg-title{color:#6b7280;font-weight:600}
.msg-text{font-size:13px;color:#6b7280;line-height:1.5;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.msg-time{font-size:11px;color:#a8b0bd;margin-top:6px}
.msg-arrow{flex:0 0 auto;border:none;background:none;color:#c8ceda;font-size:20px;
padding:0 2px;cursor:pointer;align-self:center}
.msg-empty{text-align:center;color:#a8b0bd;font-size:13px;padding:40px 0}
.msg-detail{padding:18px 16px 32px;background:#fff;min-height:60vh}
.msg-detail-title{font-size:17px;font-weight:700;color:#1f2532;margin:0 0 6px;line-height:1.4}
.msg-detail-time{font-size:12px;color:#a8b0bd;margin-bottom:14px}
.msg-detail-img{display:block;width:100%;border-radius:8px;margin-bottom:12px}
.msg-detail-tail-label{font-size:12px;color:#a8b0bd;margin:16px 0 8px;padding-top:12px;
border-top:1px solid #f1f5f9}
.msg-detail-text{font-size:14px;color:#374151;line-height:1.75;white-space:normal;word-break:break-word}
.msg-detail-jump{margin-top:20px;width:100%;padding:12px 0;border:none;border-radius:8px;
background:#e5322d;color:#fff;font-size:15px;font-weight:700;cursor:pointer}