:root {
--bg-primary: #f0f0f0;
--bg-surface: #ffffff;
--bg-subtle: #f7f7f7;
--border-color: #e2e2e2;
--text-main: #0f172a;
--text-secondary: #334155;
--text-muted: #64748b;
--primary-color: #343434;
--primary-hover: #171717;
--primary-subtle: #ffffff;
--accent-live: #dc2626;
--accent-live-bg: #fef2f2;
--accent-upcoming: #059669;
--accent-upcoming-bg: #ecfdf5;
--accent-gold: #f59e0b;
--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.07);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.06);
/* ---------- 筛选 chip 三级底色（2026-09-22 第八轮）----------
用户要求「筛选按钮全部去描边」→ 改用底色表达层级：静默 / 悬停 / 选中。
这三个 token 在 :root 给一套浅色兜底、在深色段整体重定义（深色才是实际生效的那套）。
⚠️ 单独立 token 而不是复用 --bg-subtle：chip 要跟"面板底"有区分度，
而复用会让"面板去背景色"这条需求把 chip 一起打回透明。
2026-09-23：原 --chip-bg-strong（「包含已完赛」开启态）随那一行 UI 删除，已摘掉。 */
--chip-bg: #ffffff;
--chip-bg-hover: #fafafa;
--chip-bg-active: #e3e3e3;
--chip-fg-active: #202020;
/* ---------- 微型月历 / 赛季年历底板（2026-09-24 独立成 token）----------
与 chip 同理：**绝不复用 --bg-subtle** —— 迷你日历是「卡片内的一块独立底板」，
需要有别于面板底的固定色；复用会让"面板去背景色"这类改动把它一起打回透明。
深色段另给一档更亮的值（用户要求「mini 日历整体背景提亮一点点」）。 */
--mini-cal-bg: #f7f7f7;
--mode-inset: 2px; /* 分段切换滑块的内缩距离 */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--nav-h: 64px; /* 桌面端通栏导航高度（吸顶控制台要让出这段）
2026-09-22 第六轮：48 → 64（用户点名） */
/* ---------- 导航条底色 / 手机端底栏高度（2026-09-28）----------
① `--nav-bg`：**导航底色必须比页面底亮一档**。深色段原来直接写
rgba(6,8,15,.98)，与 --bg-primary(#06080f) 是同一个色 ——
手机端它与页面完全糊在一起，看不出边界（用户原话「颜色跟大背景完全一样」）。
抽成变量而不是继续硬写，是为了让"导航比页面亮一档"这件事在两套主题里都有显式表达。
② `--nav-h-mobile`：手机端底栏**内容高度**，取值 56px =
Material Design 的 Bottom Navigation 标准高度，同时保证每个 tab 的
可点区域 ≥ 48px（Apple HIG 的最小可点尺寸线）。 */
--nav-bg: #f7f7f7;
--nav-h-mobile: 56px;
/* 手机端"底部要给固定导航让出的空间"= 导航高 + 24px 呼吸位。
★ 由高度算出来而不是再写一个 80px：原先 .app-container 与悬浮反馈按钮各写一串
`80px + env(safe-area-inset-bottom)`，改导航高度时它们不会跟着变 ——
表现为"卡片最后一张被底栏压住难发现"。挂到同一个变量上就没有这回事了。 */
--nav-reserve: calc(var(--nav-h-mobile) + 24px);
/* 移动端顶栏内容高度（2026-10-19）：sticky-header 的吸顶轨道要让它这一截。
取 52px = iOS 导航栏的紧凑档，brand 28px 图标上下留白均衡。 */
--mtb-h: 52px;
/* ---------- 宽屏栅格 token（2026-09-20 PC 大屏改版）----------
全站只有这三个宽度变量，改版要调宽度只改这里：
--shell-w 页面外壳（导航内层 + .app-container 共用，保证两者左缘对齐）
--list-cols 「全部赛事」在超宽屏下的卡片列数
--split-side 「左日历 + 右列表」视图里右侧列表的宽度 */
--shell-w: 1440px;
--list-cols: 3;
--split-side: 33%;
/* ---------- 浅色补齐的 4 个 token（2026-10-08 F2）----------
这 4 个原本只存在于深色段 —— 也就是说浅色那套 token 是**残缺**的，
一旦生效就会有 4 个 var() 取不到值。CSS 变量未定义是**静默失效**（回退继承色、不报错），
所以必须先补齐再谈切换。取值原则：与深色同名 token **语义对齐**，不是照搬色值。
--bg-elevated 深色的「浮层/弹层底」比面层亮一档；浅色反过来要更亮 → 纯白
--border-strong 深色的「强调描边」；浅色要更深才看得见 → slate-300
--accent-cyan 深色是青 #22d3ee（品牌第二色）；浅色下青在白底上对比度不足 → 压成深青
--grad-brand 同 --accent-cyan 的道理，渐变终点一起压深 */
--bg-elevated: #ffffff;
--border-strong: #cecece;
--accent-cyan: #404040;
--grad-brand: linear-gradient(96deg, #343434 0%, #505050 100%);
/* ---------- F3：浅色主题专用文字色 token（2026-10-09）----------
这 6 个 token 在**深色段的值 = 改造前的硬编码原值** → 深色主题零回归；
浅色段按「同一语义在新底色上重新取值」给，不是照搬色值。
--text-strong 「页底/面板底上的强调文字」：深色是纯白，浅色必须近黑才看得见
--text-rose-soft 柔和红（进行中标记 / 今日日期 / 收藏 hover）
--text-gold 金（收藏激活·悬停） --text-gold-bright 亮金（赛季年历「当前」）
--text-soft 柔和大图标灰（未收藏的星）
--text-on-brand ★压在品牌渐变 / 青色底上的字。两套主题下**底都是深色**
（浅色的 --grad-brand 已压成 #2563eb→#0891b2），所以这里必须
**反过来给白** —— 沿用深墨蓝 #04121f 会糊成一片（对比度 ≈1.9:1）。 */
--text-strong: #0f172a;
--text-rose-soft: #be123c;
--text-gold: #b45309;
--text-gold-bright: #a16207;
--text-soft: #94a3b8;
--text-on-brand: #ffffff;
/* ---------- 按钮底色/字色（2026-10-13）----------
次要动作「官方链接」必须比主要动作「加入日历」**暗一档**，层级才立得住：
--btn-ghost-bg #e8edf4 （次要底；悬停 --btn-ghost-bg-hover #dbeafe）
--primary-subtle #eff6ff （主要底，比 #e8edf4 更亮 ← 用户点名要的关系）
--btn-ics-fg #0f172a （主要字：浅色下黑字）
深色侧三个值 = 改造前的原值（--bg-subtle / --bg-elevated / #bfdbfe）→ 深色零回归。 */
--btn-ghost-bg: #ffffff;
--btn-ghost-bg-hover: #fafafa;
--btn-ics-fg: #0f172a;
color-scheme: light;
/* 甘特条常态底色的不透明度（2026-10-13 用户拍板：浅色 0.75 / 深色 0.40）。
★ 深浅**不能**共用一个值 —— 深色下条越亮，白字对比越差（0.40→13.3，0.85→6.5，是反向的）；
浅色下 0.40 时白字对比只有 1.55~1.87，等于看不见。
hover 恒 100%（走 --bar-bg-solid），默认值 0.4 只是 --bar-rgb 缺失时的兜底。 */
--bar-dim-a: 0.75;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
}
html {
font-size: 17px;
}
body {
background-color: var(--bg-primary);
color: var(--text-main);
line-height: 1.55;
padding: 0;
-webkit-font-smoothing: antialiased;
}
/* 关闭根滚动容器的「越界回弹 / 下拉刷新」：
手机端页面已在顶部时继续下拉，浏览器会把整页（含 fixed 元素）跟着拖动，
底部的固定导航看起来在乱动 —— 这里直接禁止这个越界手势。
（桌面端吸顶导航同样受益：回弹时不会再把它拖下去） */
html,
body {
overscroll-behavior-y: none;
/* 关闭「滚动锚定」（Chrome 默认开启）：吸顶筛选栏折叠/展开会改变文档高度，
锚定算法会据此自动挪动 scrollY 去保持某个锚点元素不动 —— 用户滚轮的输入
与这次自动挪动互相抵消，表现就是「滚轮卡住、一下能滚一下又不能滚」
（2026-09-19 用户反馈的稳定复现问题）。见 app.js setupScrollEffects。 */
overflow-anchor: none;
}
.app-container {
max-width: var(--shell-w);
margin: 0 auto;
padding: 0 10px 60px 10px;
/* ---------- iOS 安全区（2026-10-16）----------
★ 前提：viewport 已设 viewport-fit=cover（见 index.html）。
开了 cover 之后系统不再自动把内容挪进安全区，刘海 / 状态栏 / 底部横条
都会压在页面上 —— 必须自己用 env() 补。
★ 写在 padding 之后（同一条属性写两遍）：不支持 env() 的浏览器第二条整条作废，
自动回落到上面的普通 padding，绝不会出现"内容贴边"。
★ 左 / 右用 max()：横屏时 env 是 44px（避让刘海），竖屏时是 0 ——
取大的那个，保证任何朝向都至少留 10px（WebKit 官方推荐的 min/max 写法）。 */
padding-top: env(safe-area-inset-top);
padding-left: max(10px, env(safe-area-inset-left));
padding-right: max(10px, env(safe-area-inset-right));
}
/* 吸顶控制台 */
.controls-sticky-bar {
position: -webkit-sticky;
position: sticky;
top: var(--nav-h); /* 桌面端通栏导航吸在顶部，控制台紧贴其下（手机端导航在底部，见媒体查询） */
z-index: 100;
background: rgba(248, 250, 252, 0.98);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
padding: 8px 2px 10px 2px;
border-bottom: 1px solid var(--border-color);
box-shadow: none;
display: flex;
flex-direction: column;
gap: 8px;
/* ⚠️ 这里的 padding / gap / margin-bottom **故意没有过渡**：折叠动画由 JS 用单一进度
每帧同时写这几个值（app.js renderCollapse），只有这样文档总高才能严格恒定。
再加 CSS 过渡 = 每条属性各补各的间，时刻对不齐（2026-09-19 实测摆动 59px）。
2026-09-20 风格收敛：常驻投影去掉（白底 + 1px 下描边已经分得开，
再加阴影是多余体积）；折叠态仍有投影（见下），因为那时它压着内容在滑。 */
transition: box-shadow 0.25s ease;
}
/* 上滑时折叠：只保留月份行，其他 3 行平滑收起。
⚠️ 2026-09-22 性能重构（用户报「全部赛事滚轮卡 + CPU 飙高」）：
旧实现由 JS 每帧同时写 rows.height / 父级 padding / gap / margin-bottom —— 全是**布局属性**，
每一帧都让整份文档（273 张卡、23000+px）布局失效，主线程被重排占满。
现在改为：三行包进 .collapse-wrap（**高度恒定**），折叠只做
transform: scaleY(p) + transform-origin: top
交给合成器（GPU）处理 → 零布局、零重绘。scaleY 会把内容竖向压扁，
因为同时 p→1 时 opacity→0，观感是"收起来"而不是"被压扁"（实测过渡自然）。
⚠️ 必须配 will-change/backface-visibility 提到独立层，否则浏览器可能在动画中临时提升层，
反而造成一次闪烁。 */
/* 折叠容器：装载三行可折叠内容。
⚠️ 2026-09-22 性能重构的核心 —— 折叠**只写 transform / opacity**（合成器属性），
不再每帧写 height/padding/gap（那些会让整份文档布局失效，是滚轮卡的根源）。
折叠后的空间回收怎么办？用 CSS 的 `height` 过渡**只在端点**发生：
JS 在动画结束时给容器加 .is-collapsed（height:0），展开时先移除再动画。
这样"逐帧布局"变成"整段动画只有 1 次布局"，代价从 200ms×每帧 降到 1 帧。 */
.collapse-wrap {
display: flex;
flex-direction: column;
gap: 8px;
transform-origin: top center;
will-change: transform, opacity;
backface-visibility: hidden;
overflow: hidden;
}
/* 折叠收尾态：容器真正让出空间（这一步会有一次布局，但整个动画只有这一次） */
.collapse-wrap.is-collapsed {
height: 0;
transform: scaleY(0);
opacity: 0;
pointer-events: none;
}
.collapsible-row {
overflow: hidden;
}
/* ⚠️ 这两条是「折叠态设计 token」的唯一来源：app.js readBarMetrics 会临时加 .collapsed
把 6px / 0 读走，再用算术推出 delta。改这里的数值会立刻生效，但**别改成百分比或 calc**，
动画是按 px 线性插值的。 */
/* 折叠态的视觉（阴影 + 收紧内边距）。
⚠️ 2026-09-22：padding/gap 的变化本身也是一次布局失效（会让文档高变 ~14px），
合成层方案下**不该再有**高度变化 —— 所以 padding/gap 不再随折叠改，
只留「收起后它压着内容在滑」需要的阴影。若将来要恢复 padding 收紧，
必须一并处理文档高恒定（旧版的 margin 补偿算法已在 app.js 删除）。 */
.controls-sticky-bar.collapsed {
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.45);
}
/* 单行横向平滑滚动条 */
.scroll-row {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding: 2px 0;
cursor: grab;
}
.scroll-row::-webkit-scrollbar {
display: none;
}
.scroll-row.grabbing {
cursor: grabbing;
user-select: none;
}
.tabs-scroll-box {
display: flex;
gap: 7px;
min-width: max-content;
align-items: center;
}
/* 月份胶囊按钮 */
/* 2026-09-22 第八轮（用户需求）：筛选按钮**全部去描边**，靠底色分层表达「可点 / 悬停 / 选中」三级。
★ 深浅两套规则都要改：基础段 + 深色覆盖段（后者同名选择器整体覆盖前者，
只改一处会出现"深色下描边回来了"的假象）。 */
.month-btn {
background: var(--chip-bg);
border: none;
color: var(--text-secondary);
padding: 6px 14px;
border-radius: 20px;
font-size: 14.5px;
cursor: pointer;
white-space: nowrap;
font-weight: 500;
transition: background-color 0.15s, color 0.15s;
}
.month-btn:hover {
background: var(--chip-bg-hover);
color: var(--text-main);
}
.month-btn.active {
background: var(--chip-bg-active);
color: var(--chip-fg-active);
font-weight: 700;
box-shadow: none;
}
/* 大项与地区标签按钮（2026-09-22 第八轮：单选，去描边，底色分层） */
.multi-tag-btn {
background: var(--chip-bg);
border: none;
color: var(--text-secondary);
padding: 5px 13px;
border-radius: var(--radius-sm);
font-size: 14.5px;
cursor: pointer;
user-select: none;
white-space: nowrap;
font-weight: 500;
transition: background-color 0.15s ease, color 0.15s ease;
}
.multi-tag-btn:hover {
background: var(--chip-bg-hover);
color: var(--text-main);
}
.multi-tag-btn.active {
background: var(--chip-bg-active);
color: var(--chip-fg-active);
font-weight: 700;
box-shadow: none;
}
.multi-tag-btn.all-btn.active {
background: var(--chip-bg-active);
color: var(--chip-fg-active);
}
/* ⚠️ 2026-09-23：「搜索 + 包含已完赛 + 分享」那一行（.search-row / .toggle-finished-btn）
随 UI 一起删除，这里原有一整块样式（含 .search-row input / :focus）已清理。
.toggle-finished-btn 只是那个分享按钮复用的类名，没有任何存活元素再用它了。 */
/* 赛事列表主区域 */
.events-main {
margin-top: 12px;
}
/* 卡片栅格（2026-09-20 PC 大屏改版）：
手机 / 平板 = 单列（与旧版逐像素等价：grid 单列 + 14px gap ≡ 原来的 flex column）；
超宽屏（>=1180px）= 三列，中宽（>=760px）= 两列。列数只由 --list-cols 控制。
⚠️ .events-grid 同时被「焦点卡片模式 / 国内卡片模式 / 关注卡片模式」复用，
但那些视图在宽屏走「左日历 + 右列表」分栏（见文件末尾 .split-* 段），
列表列数被压回 1 列 —— 多列只属于「全部赛事」。 */
.events-grid {
display: grid;
grid-template-columns: repeat(var(--list-cols), minmax(0, 1fr));
/* 第五轮（2026-09-22）：用户实测 18px 偏大，收成 12px。 */
gap: 12px;
align-content: start;
}
/* 综合赛事卡片（2026-09-20 风格收敛）：
去掉常驻投影 + 去掉 hover 位移，靠描边与留白分层 —— 与「3 张内容图」的
克制观感一致（简单、精致，不靠阴影堆体积）。hover 只换描边色。 */
.event-card {
background: var(--bg-surface);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
padding: 16px 18px;
box-shadow: none;
display: flex;
flex-direction: column;
gap: 14px;
transition: border-color 0.15s ease;
/* 性能（2026-09-22 用户报「全部赛事滚轮卡 + CPU 飙高」）：
「全部赛事」有 273 张卡、文档高 23000+px。吸顶控制台折叠时每帧改 height/padding/gap，
每次都是一个**布局失效**，浏览器最坏情况下要重排整份文档 → 每帧几十 ms，滚轮被拖住。
content-visibility:auto 让屏幕外卡片**跳过布局与绘制**（只花 contain-intrinsic-size 的
占位成本），整页重排代价从「273 张卡」降到「视口内那几张」。
实测 taskMs 616 → 212（−66%）。contain-intrinsic-size 给的是估算高度，用于滚动条估算；
卡片真实高度差一点不影响观感（滚动条长度略变），用 auto 关键字让浏览器记住真实尺寸。 */
content-visibility: auto;
contain-intrinsic-size: auto 260px;
}
.event-card:hover {
border-color: #94a3b8;
}
/* 卡片头部：左侧高质感官方LOGO徽章 + 右侧标题与状态 + 右上角星标关注 */
.card-header-block {
display: flex;
align-items: flex-start;
gap: 12px;
position: relative;
}
/* 权威官方 LOGO 徽章座 (52px x 52px，无论手机电脑均饱满大气)
2026-09-20 收敛：描边减到 1px、去掉投影 —— 圆角仍是 12px（= --radius-md） */
.card-brand-badge {
width: 52px;
height: 52px;
min-width: 52px;
border-radius: var(--radius-md);
background: #ffffff;
border: 1px solid var(--border-color);
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
overflow: hidden;
}
.card-official-logo {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.card-title-wrap {
flex-grow: 1;
display: flex;
flex-direction: column;
gap: 4px;
padding-right: 28px; /* 给右上角星标留出呼吸感 */
}
.card-title-row {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.card-title {
font-size: 19.5px;
font-weight: 800;
color: var(--text-main);
line-height: 1.35;
}
.status-tag {
font-size: 12px;
font-weight: 700;
height: 24px;
line-height: 16px;
padding: 0 7px;
border-radius: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* 状态标签（第五轮 2026-09-22：全部去描边，层次靠底色） */
.status-live {
background: var(--accent-live-bg);
color: var(--accent-live);
}
.status-upcoming {
background: var(--accent-upcoming-bg);
color: var(--accent-upcoming);
}
.status-finished {
background: var(--bg-subtle);
color: var(--text-muted);
}
/* 星标关注按钮 (右上角快速触达) */
.btn-star {
position: absolute;
top: -2px;
right: -2px;
background: none;
border: none;
font-size: 24px;
color: var(--text-soft);
cursor: pointer;
padding: 4px;
line-height: 1;
transition: transform 0.15s, color 0.15s;
}
.btn-star:hover {
transform: scale(1.15);
color: var(--text-gold);
}
.btn-star.active {
color: var(--text-gold);
text-shadow: 0 1px 3px rgba(245, 158, 11, 0.4);
}
/* 内容网格：左侧紧凑微型日历，右侧核心信息 */
.card-content-grid {
display: grid;
/* ★ 2026-09-24 溢出修复：右列必须是 minmax(0, 1fr)，不能写裸 1fr。
1fr == minmax(auto, 1fr)，min 取 min-content —— 右列里任何一个不可收缩的内容
（nowrap 的地名 / 并排的两个按钮）都会把这一列顶宽，列总宽超出卡片可用宽后，
举办地、摘要、按钮整排越过卡片右边界（实测最远溢出 124.7px，15 张卡中招：
总统杯 38.6px、环广西公路自行车世巡赛 124.7px…）。min 归零 → 列宽严格 = 剩余空间。 */
grid-template-columns: 165px minmax(0, 1fr);
gap: 16px;
/* 2026-09-24 卡片对齐：flex-start → stretch。
两列都拉伸到行高后，右列 .card-details-box 才有"剩余空间"可分配，
「加入日历 / 官方链接」才能靠 margin-top:auto 钉到卡片底部同一条线。
★ 左列 .mini-cal-container 没写 height，不会被拉伸变形（只是容器变高、底板下方留白）。 */
align-items: stretch;
/* ★ 2026-09-24 补：.event-card 是 flex column，同一行的矮卡片会被 .events-grid
拉伸到行高（实测：内容 218 的卡被拉到 292）。若 content-grid 不跟着长，
右列就停在 145.3，按钮只能钉在"右列底"而不是"卡片底" → 按钮下方空 75px。
flex:1 让 content-grid 吃掉卡片多出来的高度 → 右列跟着长 → 按钮真正贴卡片底。 */
flex: 1;
}
/* 微型月历：无论手机端还是桌面端，严格锁定 165px 紧凑视窗，绝不横向拉伸撑满 */
.mini-cal-container {
background: var(--mini-cal-bg); /* 2026-09-24：独立 token，深色段提亮一档 */
border: none; /* 2026-09-24 用户要求：外框描边去掉（背景保留） */
border-radius: 10px;
padding: 7px 8px;
user-select: none;
width: 165px;
min-width: 165px;
max-width: 165px;
flex-shrink: 0;
}
.mini-cal-header {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 11.5px;
font-weight: 700;
color: var(--text-secondary);
margin-bottom: 4px;
padding-bottom: 3px;
border-bottom: 1px solid #e2e8f0;
}
.mini-cal-month-badge {
color: var(--primary-color);
font-weight: 800;
}
.mini-cal-grid {
/* 日号格高 = 色带高度。改这里要同步：半圆半径（10px = 一半，见 .band-first）与断言。
★ 2026-09-24 起 19px → 20px（偶数）：格高为奇数时理想基线落在半像素上，
文本基线取整后 ink 必然偏上/偏下 0.5px（像素量化实测 -0.5，任何
padding/transform 补丁都会被取整钳在 ±0.5 两个态、无法归零）；
偶数格高让 ink 中心与基线都落回整数网格 → 实测偏差 0.000。 */
--mc-cell-h: 20px;
/* 「今天」高亮圆直径 —— 2026-09-24 用户拍板：**与条等高 20px**（原 22px 上下各超出 1px，
用户看着像"没对齐"）。代价已知：条比圆宽约 1.6px，圆的左右各露约 0.8px 蓝
（09-16 当初就是怕这个才定 22px，现在改回等高）。
★ 圆是**固定 px 正方形 + 50% 圆角**，不能写格子的 50%（格宽随 1fr 浮动会变椭圆）。
★ 圆比等分后的列宽（19.57px）大 → 必须配 .mini-cal-day.is-today 的 z-index 提层，
否则溢出部分被右侧邻格的 40% 蓝带叠色（见该文件里的三件套注释）。 */
--mc-today-d: 20px;
display: grid;
/* ★ 必须 minmax(0, 1fr) 不能写 1fr：1fr == minmax(auto, 1fr)，min 取 min-content，
而「今天」的 .mc-num 是固定 22px 圆 → 会把今天那一列从 19.57px 撑到 22px
（实测 computed = "19.1562 19.1719 19.1562 22px …"），整列格子与色带都跟着变宽，
网格出现不等宽 + 分数偏移 → 视觉上「水平差半像素」。minmax(0,…) 让 min 归零，
列宽严格等分，圆溢出由下面的 z-index 兜住。 */
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 2px;
text-align: center;
}
.mini-cal-th {
font-size: 10px;
font-weight: 600;
color: var(--text-muted);
padding: 1px 0;
}
.mini-cal-day {
font-size: 11px;
height: var(--mc-cell-h);
line-height: var(--mc-cell-h);
color: #64748b;
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
font-variant-numeric: tabular-nums;
position: relative;
}
/* 选中（赛事期间）：穿透式连续色带 —— 数字浮在色带上，相邻日之间不留断缝。
★ 扩展量 = 网格 gap 的一半（gap 2px → 每侧 1px），两格色带**恰好相接、零重叠**。
2026-09-24 之前是每侧 -2px（= 整个 gap，两格合计 4px 盖在 2px 缝上 → 重叠 2px）：
不透明色时代看不出问题，但色带改 40% 透明后，重叠区被叠了两次 alpha
（0.4 → 0.64）→ 每两个相邻日之间出现一条明显更深的竖纹（用户报障；
像素实测单层 (33,66,126) vs 重叠 (43,91,173)，宽 2 CSS px）。
内边距同步 1px，内容框宽度仍是格宽 → 数字位置不动。
★ 改 `.mini-cal-grid` 的 gap 必须同步改这两个值（verify 有交叉断言守着）。
端部圆角分两档：赛事的真实第一天 / 最后一天（band-first / band-last）做半圆，
跨行被切开的中间段只做普通圆角矩形 —— 一眼能看出"这条还在继续"。 */
.mini-cal-day.active {
background-color: var(--primary-color);
color: #ffffff !important;
font-weight: 700;
border-radius: 0;
margin-left: -1px;
margin-right: -1px;
padding-left: 1px;
padding-right: 1px;
}
/* 段首 / 段尾格：那一侧不再需要盖网格间隙（没有相邻的条要接），
所以 margin 归零 —— 但 **padding 必须同步归零**，否则内容框会比格子窄 1px
并整体偏向另一侧，数字和「今天」圆跟着偏 0.5px（2026-09-16 修：欧联杯 9/16
那种"轮次第一天"格就带 run-start，圆右侧贴边、左侧多露一条蓝） */
.mini-cal-day.active.run-start {
margin-left: 0;
padding-left: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.mini-cal-day.active.run-end {
margin-right: 0;
padding-right: 0;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
/* 半圆半径 = 格高 20px 的一半（10px）。不要用 999px：与同格另一端 4px 圆角
相加超出格宽时，CSS 的圆角等比缩放会把 4px 那端缩成 0（同甘特条的坑） */
.mini-cal-day.active.band-first {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.mini-cal-day.active.band-last {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
/* 单日赛事：一段就是一个胶囊 */
.mini-cal-day.active.band-first.band-last {
border-radius: 10px;
}
/* ★ 圆（20px）比等分后的列宽（19.57px）宽 → 左右各溢出约 0.2px。溢出部分若不提升层级，
会被**右侧邻格的色带背景**（40% 蓝）压上一层：同层非定位元素按树序绘制、后者盖前者，
于是圆的右半边泛蓝、看着像"歪了半像素"（2026-09-24 修）。
.mini-cal-day 已是 position:relative，这里只加 z-index 把今天格提到邻格之上。
（垂直方向上下各溢出 1px 落在行间 gap 里，gap 无背景，不受此影响。） */
.mini-cal-day.is-today {
position: relative;
z-index: 1;
}
/* 今天不在赛事期内：红字加粗；淡红「圆形」底画在 .mc-num 上（2026-09-16 起统一圆形，
不再是圆角矩形 —— 用户要求无论今天是否在色带内，高亮一律是圆） */
.mini-cal-day.is-today:not(.active) {
color: var(--accent-live) !important;
background: none;
border: none;
font-weight: 800;
}
/* 日号统一包在 .mc-num 里：平时透明（色带/格子背景直接透出来），
只有「今天」才在 .mc-num 上画高亮 —— 高亮是叠在格子/色带背景之上的独立一层：
不在色带内 = 淡红圆；在色带内 = 红圆盖蓝条（圆外露出的仍是蓝条而非卡片底色）。
圆 = 正方形（边长 = `--mc-today-d`）+ 50% 圆角。**2026-09-24 起 = 格高 20px（等高）**，
上下不再超出色带；左右因条比圆宽约 1.6px 会各露一点蓝（用户拍板接受的代价）。
★ 为什么用固定 px 而不是格子的 50%：格子宽随 1fr 浮动（约 19.6~30px+），
对格子直接用 50% 会得到肉眼可辨的椭圆；固定边长才能保证正圆。
★ 圆比等分后的列宽（19.57px）宽 → 左右溢出 ~0.2px，靠 .is-today 的 z-index 提层。
（box-shadow 衮边的做法已在 2026-09-16 弃用：阴影上下会溢出色带高度） */
.mc-num {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
/* 垂直居中靠「偶数格高」达成（2026-09-24）：奇数格高 19px 时理想基线悬在
半像素上、取整后 ink 必偏 0.5px，padding/transform 补丁会被取整钳死无法
归零（像素量化实测）；格高 20px 后 ink 偏差实测 0.000，这里不做任何补偿。 */
border-radius: 5px;
}
.mini-cal-day.is-today .mc-num {
width: var(--mc-today-d);
height: var(--mc-today-d);
/* ★ flex: 0 0 auto（2026-09-24 补）：.mc-num 是 flex item，默认 flex-shrink:1 ——
列宽改 minmax(0,1fr) 等分后（19.57px）比圆（20px）窄，圆会被压成 19.57×20 的椭圆。
禁止收缩后圆保持正圆、左右各溢出约 0.2px，由 .is-today 的 z-index 提层兜住。 */
flex: 0 0 auto;
border-radius: 50%;
}
.mini-cal-day.is-today:not(.active) .mc-num {
background: #fee2e2;
}
/* 今天恰好在赛事期内：格子保持色带蓝（连条不断），红圆由 .mc-num 承载 */
.mini-cal-day.is-today.active {
font-weight: 800;
}
.mini-cal-day.is-today.active .mc-num {
background-color: var(--accent-live);
color: #ffffff !important;
}
/* ---------- 赛季卡专用「年历」：两行跨年月历 + 连续穿透色带 ----------
第一行 = 赛季起始年 7~12 月，第二行 = 次年 1~6 月（两行各 6 格、对齐）。
月份格之间不留缝（grid 无 column-gap），赛季条直接铺在格子自身背景上
（与卡片微型月历同款的「穿透式」：数字浮在条上），真实首末日两格做单侧半圆、
跨行段端做 4px 圆角矩形。宽度与微型月历一致（165px）。 */
.season-cal {
background: var(--mini-cal-bg); /* 与微型月历同一 token，深浅两套主题同步 */
border: none; /* 2026-09-24 与微型月历同步：外框描边去掉（背景保留） */
border-radius: 10px;
padding: 7px 8px;
user-select: none;
width: 165px;
min-width: 165px;
max-width: 165px;
flex-shrink: 0;
}
.season-cal-header {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 11.5px;
font-weight: 700;
color: var(--text-secondary);
margin-bottom: 6px;
padding-bottom: 3px;
border-bottom: 1px solid #e2e8f0;
}
.season-cal-badge {
color: var(--primary-color);
font-weight: 800;
font-size: 10.5px;
font-variant-numeric: tabular-nums;
}
/* 7 列 = 年份标签 + 6 个月份格（2026-09-19 起两行各 6 格：7~12 月 / 次年 1~6 月，两行对齐） */
.season-grid {
display: grid;
grid-template-columns: 24px repeat(6, 1fr);
row-gap: 5px;
align-items: center;
}
.season-yr {
font-size: 9.5px;
font-weight: 700;
color: var(--text-muted);
font-variant-numeric: tabular-nums;
line-height: 1;
}
.season-cell {
display: flex;
align-items: center;
justify-content: center;
/* 2026-09-24: 19px → 20px（偶数），理由同微型月历 —— 奇数格高的基线半像素
取整会让月份数字 ink 偏 0.5px；半圆半径同步 9.5 → 10 */
height: 20px;
min-width: 0;
font-variant-numeric: tabular-nums;
}
/* 赛季条 = 格子自身背景（穿透式）：格间无缝 → 视觉上是一条连续的色带，
月份数字直接浮在条上（白色），不再把条和数字分成两层。
起止两端做半圆（圆角 = 条高一半，999px 兜底） */
.season-cell.in {
background: var(--primary-color);
}
/* 半圆半径 = 格高 20px 的一半（10px），理由同微型月历 —— 别用 999px */
.season-cell.in.is-start {
border-radius: 10px 0 0 10px;
}
.season-cell.in.is-end {
border-radius: 0 10px 10px 0;
}
.season-cell.in.is-start.is-end {
border-radius: 10px;
}
/* 跨行段端（12 月末 / 次年 1 月初这类「不是赛事真实首末日」的端点）= 4px 圆角矩形，
与微型月历的 .run-end 同款语义：一眼能看出「这条还在继续」，而不是被硬切了一刀。
（2026-09-19 用户指出这两端原本是直角） */
.season-cell.in.seg-l {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.season-cell.in.seg-r {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.season-lbl {
font-size: 11px;
line-height: 1;
color: var(--text-muted);
font-variant-numeric: tabular-nums;
}
.season-cell.in .season-lbl {
color: var(--text-strong);
font-weight: 700;
}
/* 当月（仅当年同月才算）：在条外时红字、在条上时蓝底配金色，保证都可读 */
.season-cell.is-now .season-lbl {
color: var(--accent-live);
font-weight: 800;
}
.season-cell.in.is-now .season-lbl {
color: var(--text-gold-bright);
}
/* 详情信息 */
.card-details-box {
display: flex;
flex-direction: column;
gap: 7px;
/* ★ grid item 的自动最小尺寸是 min-content；不写 min-width:0，右列仍会被内容顶宽
（与上面的 minmax(0,1fr) 是一对，缺一不可） */
min-width: 0;
}
.card-meta-list {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 15px;
}
/* 2026-09-24：卡片上的「举办地」三字去掉（用户要求）—— 只剩地名本身。
.meta-k 标签已从 app.js 的卡片模板移除，此处仅作历史说明，不再定义样式。 */
.meta-row {
display: flex;
align-items: center;
gap: 8px;
color: var(--text-secondary);
}
/* 2026-09-24 卡片对齐：地名限一行（省略号）。
实测 meta 区高度有两种取值 —— 23.3px(一行) / 46.5px(长地名折两行)，
折行的那批卡片整列内容被顶低一整行，按钮跟着下沉。
★ flex item 必须给 min-width:0，否则 nowrap 会把格子撑宽而不是截断。 */
.meta-row > span {
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.broadcast-row {
color: #b45309;
font-weight: 600;
}
.card-desc {
font-size: 13.5px;
color: var(--text-muted);
line-height: 1.45;
}
.card-hook {
font-size: 16px;
color: var(--text-main);
line-height: 1.7;
margin-top: 4px;
}
/* 每行文字分别铺一条方角色带，换行时保留自然的文字宽度。 */
.card-hook-text {
background-image: linear-gradient(rgba(245, 158, 11, 0.3), rgba(245, 158, 11, 0.3));
background-size: 100% 0.32em;
background-position: left 88%;
background-repeat: no-repeat;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
:root:not([data-theme="light"]) .card-hook-text {
background-image: linear-gradient(rgba(251, 191, 36, 0.65), rgba(251, 191, 36, 0.65));
}
/* 2026-09-24 第一次定的是 3 行：那是为了让卡片等高 —— 但按钮吸底（margin-top:auto）
落地后，对齐已经不再依赖摘要等高了，留着 min-height 只会让短摘要的卡片凭空多一块空白。
2026-09-24 第二次（用户：摘要有点少了）→ 上限放宽到 7 行 ≈ 137px，
与左列迷你日历（5 周版实测 145.3px）视觉齐平；超出省略号截断，全文仍在详情页。
★ 只作用于「全部赛事」的完整卡片，紧凑变体（焦点/国内/关注）不参与。
★ line-clamp 只管上限；13.5px × 1.45 = 19.575px/行 → 7 行 = 137px。 */
.event-card:not(.card-compact) .card-desc {
display: -webkit-box;
-webkit-line-clamp: 7;
-webkit-box-orient: vertical;
overflow: hidden;
}
.card-actions-row {
display: flex;
align-items: stretch; /* ★ 3.2：原 center。两枚按钮固有高度不同（button 矮于 ），
stretch 让它们拉平到同一高度；按钮内部仍靠自身 align-items 居中 */
justify-content: flex-end;
gap: 8px; /* 「加入日历」与「官方链接」并排时的间距 */
margin-top: 2px;
}
/* 2026-09-24 卡片对齐（仅完整卡片的右列）：按钮吸到卡片底部。
摘要定 3 行后右列内容高度已恒定，但左列迷你日历的行数仍会让卡片有高有矮；
margin-top:auto 吃掉右列剩余空间 → 按钮始终贴卡片底边，同一行的三个按钮落在同一条线上。
★ 只作用于 .card-details-box 内部，紧凑变体（焦点/国内/关注）的按钮保持原样。 */
.card-details-box .card-actions-row {
margin-top: auto;
}
.link-btn {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 13.5px;
font-weight: 700;
color: var(--primary-color);
text-decoration: none;
padding: 5px 12px;
background: var(--primary-subtle);
border-radius: 6px;
transition: background 0.15s;
}
.link-btn:hover {
background: #dbeafe;
}
/* 「加入日历」：主色实心 —— 本产品唯一的落地动作（把一次性浏览变成日历里的长期存在），
所以在卡片上给它比「官方链接」更高的视觉权重。 */
.btn-ics {
background: var(--primary-color);
color: #ffffff;
}
.btn-ics:hover {
background: var(--primary-hover);
color: #ffffff;
}
/* .link-btn 原本只服务 ；「加入日历」改成