/* ============================================================================
glass-refine.css — 第三层：视觉精修
----------------------------------------------------------------------------
引入位置：glass-components.css 之后（最后一份）
（若有）
← 本文件
⛔ 严格遵守上一层的约束：只写 颜色 / 背景 / 边框 / 圆角 / 阴影 / 滤镜 / 动效。
⛔ 不出现 width height display position z-index overflow transform margin padding。
============================================================================
本文件解决的问题（基于 2026-10-22 实测 computed style）：
1. .stat 有半透明底但没有 backdrop-filter → 统计卡是「白块」不是玻璃
2. .bar-track / .heat-mini 用 rgba(0,0,0,.04/.06) 黑色 → 冷白底上就是脏灰
3. .bar-fill 是 rgb(0,102,204) 纯色 → 条形图没有质感
4. .resume-bar 蓝色过饱和，抢主卡视线
5. 数字缺 tabular-nums，位数不同时不对齐
============================================================================ */
/* --------------------------------------------------- 1. 统计卡补上磨砂 */
/* 现状：bg 已是 rgba(255,255,255,.56)，但 backdrop-filter 为 none，
所以它只是「半透明白块」，和旁边真玻璃的 .card 质感割裂。 */
body .stat {
backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
border: 1px solid var(--glass-line);
box-shadow: var(--shadow-glass-sm), inset 0 1px 0 var(--edge-hi);
transition: box-shadow 450ms cubic-bezier(0.22, 1, 0.36, 1),
background-color 500ms, border-color 500ms;
}
body .stat:hover {
box-shadow: var(--shadow-glass), inset 0 1px 0 var(--edge-hi);
}
/* ------------------------------------------- 2. 干掉黑色半透明令牌 */
/* --o04 / --o06 是「4% / 6% 黑」，在冷白画布上会显脏灰。
直接改值 → 全站所有引用处一次性转冷，不用逐条改选择器。 */
:root {
--o04: rgba(120, 145, 180, 0.10);
--o06: rgba(120, 145, 180, 0.13);
}
[data-theme="dark"] {
--o04: rgba(255, 255, 255, 0.06);
--o06: rgba(255, 255, 255, 0.09);
}
/* --------------------------------------------- 3. 横向条形图（战绩分布） */
body .bar-track {
background: var(--track-bg);
box-shadow: var(--track-inset);
border-radius: 999px;
}
body .bar-fill {
border-radius: 999px;
background: linear-gradient(90deg,
var(--glass-accent-a) 0%, var(--glass-accent-b) 100%);
box-shadow: 0 0 12px rgba(0, 102, 204, 0.30),
inset 0 1px 0 rgba(255, 255, 255, 0.42);
}
/* 第一名用强调色，其余递减透明度 —— 让「战绩」有排名感，不是一排等长条 */
body .bar-row:nth-child(1) .bar-fill { opacity: 1; }
body .bar-row:nth-child(2) .bar-fill { opacity: 0.86; }
body .bar-row:nth-child(3) .bar-fill { opacity: 0.74; }
body .bar-row:nth-child(4) .bar-fill { opacity: 0.64; }
body .bar-row:nth-child(n+5) .bar-fill { opacity: 0.54; }
body .bar-name { color: var(--ink-light); letter-spacing: 0.01em; }
body .bar-num {
font-variant-numeric: tabular-nums;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--ink);
}
/* ------------------------------------------------------- 4. 热力图 */
body .heat-mini { border-radius: 3px; transition: filter 240ms; }
body .heat-mini.lv0 { background: rgba(120, 145, 180, 0.11); }
body .heat-mini.lv1 { background: rgba(0, 102, 204, 0.22); }
body .heat-mini.lv2 { background: rgba(0, 102, 204, 0.40); }
body .heat-mini.lv3 { background: rgba(0, 102, 204, 0.62); }
body .heat-mini.lv4 {
background: linear-gradient(135deg, #4a9bff, var(--glass-accent-b));
box-shadow: 0 0 10px rgba(0, 102, 204, 0.35);
}
body .heat-mini:hover { filter: brightness(1.12); }
[data-theme="dark"] body .heat-mini.lv0 { background: rgba(255, 255, 255, 0.09); }
[data-theme="dark"] body .heat-mini.lv1 { background: rgba(10, 132, 255, 0.26); }
[data-theme="dark"] body .heat-mini.lv2 { background: rgba(10, 132, 255, 0.46); }
[data-theme="dark"] body .heat-mini.lv3 { background: rgba(10, 132, 255, 0.68); }
[data-theme="dark"] body .heat-mini.lv4 {
background: linear-gradient(135deg, #5aa9ff, #0a84ff);
box-shadow: 0 0 10px rgba(10, 132, 255, 0.45);
}
/* 20261022P 校正：主热力图是 .heat-cell（today 页 28 天格），文档只写了图例的
.heat-mini。lv0 靠 --o04 转冷自动生效，lv1-3 两套已一致，lv4 这里补齐渐变+微光。 */
body .heat-cell.lv4 {
background: linear-gradient(135deg, #4a9bff, var(--glass-accent-b));
box-shadow: 0 0 10px rgba(0, 102, 204, 0.35);
}
[data-theme="dark"] body .heat-cell.lv4 {
background: linear-gradient(135deg, #5aa9ff, #0a84ff);
box-shadow: 0 0 10px rgba(10, 132, 255, 0.45);
}
/* --------------------------------------------------- 5. 提示条降饱和 */
/* 「昨天停在这里」原来 10% 纯蓝，整条荧光，抢主行动卡的视线 */
body .resume-bar {
background: rgba(0, 102, 204, 0.07);
border: 1px solid rgba(0, 102, 204, 0.13);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
body .resume-bar .resume-k { color: var(--ink-light); }
/* ------------------------------------------------------- 6. 数字对齐 */
body .stat-v,
body .stat-n,
body .bar-num,
body .wb-val-t,
body .wb-axis-t {
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum' 1;
}
body .stat-v { letter-spacing: -0.025em; }
/* --------------------------------------------- 7. SVG 图表文字显色 */
body .wb-axis-t { fill: var(--ink-light); opacity: 0.9; }
body .wb-val-t { fill: var(--ink); }
/* ----------------------------------------------- 8. 图表卡片底部 */
body .chart-foot {
color: var(--ink-light);
border-top: 1px solid var(--glass-line);
}
body .legend i {
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
}
/* ------------------------------------------- 9. 空状态（快捷入口） */
/* 当前是一整块留白 + 一行灰字，视觉上像「加载失败」。
这里把它收成一条居中的细提示，别再占那么大的视觉重量。 */
body .card-empty,
body .empty-inline {
background: rgba(255, 255, 255, 0.30);
border: 1px dashed rgba(130, 155, 190, 0.28);
border-radius: var(--radius-md);
color: var(--ink-light);
}
body .empty-inline {
border-style: dashed;
}
[data-theme="dark"] body .empty-inline {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.14);
}
/* --------------------------------------------------- 10. 暗色补丁 */
[data-theme="dark"] body .bar-fill {
box-shadow: 0 0 12px rgba(10, 132, 255, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
[data-theme="dark"] body .resume-bar {
background: rgba(10, 132, 255, 0.10);
border-color: rgba(10, 132, 255, 0.18);
}
/* ------------------------------------------- 11. ≤640 实色降级（20261022P）
.stat 的 backdrop 在手机端与卡片同规则退实色（iOS backdrop 采样错位三踩）。 */
@media (max-width: 640px) {
body .stat {
-webkit-backdrop-filter: none;
backdrop-filter: none;
background: var(--bg-1);
box-shadow: none;
}
}