已经完成布局之后才插入的；插入之后
.table-wrap(overflow:auto) 的 scrollHeight 会停在一个陈旧值上，比实际内容高 7px
（ledger 页实测，ai-cost 页恰好不触发）。识别特征：
· 任何一次重排都会把它修正 —— 所以「页面加载后再注入样式」测出来永远是 0，
只有冷加载才看得到这 7px；改完 colspan 再改回来，也不复发。
· 与装饰圆无关（把 ::before 设成 display:none 仍是 7）、与单元格高度无关
（padding:0 让格子从 84px 变 16px，仍是 7）、与 overflow 取值无关
（visible / hidden / clip 都是 7，只要装饰圆已被裁掉）。
把布局隔离在表格内部之后，这个陈旧值不再产生（冷加载稳定 0）。
作用域只能是 .data-table：写在 .table-wrap / tbody / td 上实测都无效。
实测副作用：单元格高度、行高、列宽、表格宽度全部不变（rows=[41,84]、cellH=84）。 */
.data-table { width: 100%; border-collapse: collapse; font-size: 11.5px; contain: layout; }
.data-table th,
.data-table td { text-align: left; padding: 15px 14px; border-bottom: 1px solid rgba(255, 255, 255, .05); white-space: nowrap; }
/* v19.7 修正：上面这条通用单元格规则特异性 (0,1,1) 高于 `.empty` (0,1,0)，
把空态单元格自己的 padding: 34px / text-align: center 吃掉了。
后果是同一个 .empty 类在两种上下文里长得不一样：
列表里的 → 34px + 居中（真生效）
表格里的
→ 15px + 左对齐（被覆盖）
这里用 (0,2,1) 显式恢复空态单元格的对齐与内边距。
裁切是为了兜住 .empty::before 那个装饰圆：
它按 top:24px + 130px 摆放，下缘到 154px，而单元格内容盒只有 83px ——
多出的 70px 会把 .table-wrap(overflow:auto) 撑出一条多余滚动条。
四种裁法实测（每个候选都 goto 一次全新加载、只注入一个 style 标签、
动画已冻结，测 .table-wrap 的 scrollHeight - clientHeight）：
不裁（overflow: visible） → ledger 70px / ai-cost 70px ← 基线
overflow: hidden → ledger 7px / ai-cost 0px 裁不干净
clip-path: inset(0) → ledger 70px / ai-cost 70px 完全无效（等于不裁）
contain: paint → ledger 0px / ai-cost 0px 有效
overflow: clip → ledger 0px / ai-cost 0px 有效
取 overflow: clip 而非 contain: paint：后者按规范隐含 layout containment，
会改变单元格内在尺寸的参与方式；overflow: clip 只做绘制层裁切，无此副作用。
前置的 overflow: hidden 是给不支持 clip 的老引擎兜底（至少能裁掉 63/70px）。
注意：ledger 残留的那 7px 后来查明**不是**装饰圆造成的，
而是表格的陈旧布局值 —— 已由上面 .data-table 的 contain: layout 处理。
踩坑备忘一：本条一度被写成 clip-path: inset(0)，那是**注入污染**造成的误判 ——
在同一页面里连续 addStyleTag 注入多个候选，!important 规则按注入顺序互相覆盖，
先注入 overflow 得到 0，再注入 clip-path 仍读到 0。注入式 A/B 必须每次重建页面。
踩坑备忘二：测量前必须冻结 .empty::before 的 emptyWait 动画，它带 scale(.94→1.05)，
而 transform 会计入祖先的 scrollable overflow，不冻结时读数会在 70/73 之间跳。 */
.data-table td.empty {
padding: 34px;
text-align: center;
white-space: normal;
overflow: hidden;
overflow: clip;
}
.data-table th {
color: var(--muted2);
font-size: 9.5px;
font-weight: 600;
letter-spacing: .14em;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.data-table td { font-variant-numeric: tabular-nums; }
.data-table tbody tr {
transition: background .35s ease;
animation: rowIn .3s cubic-bezier(.16, .84, .3, 1) both;
animation-delay: calc(var(--i, 0) * 32ms);
}
.data-table tbody tr:hover { background: rgba(62, 224, 127, .045); }
/* --------------------------------------------------------------------------
16. Pipeline — 真实景深
-------------------------------------------------------------------------- */
.workflow-shell {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
margin: 24px 0;
position: relative;
perspective: 1100px;
perspective-origin: 50% 40%;
}
.workflow-shell::before {
content: "";
position: absolute;
left: 3%;
right: 3%;
top: 50%;
height: 1px;
z-index: 0;
pointer-events: none;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .12) 14% 86%, transparent);
}
.workflow-step {
position: relative;
overflow: hidden;
z-index: 1;
padding: 14px;
border-radius: 16px;
min-height: 88px;
opacity: .5;
transform: translateZ(-24px);
background: linear-gradient(158deg, rgba(255, 255, 255, .05), rgba(0, 0, 0, .3));
box-shadow: inset 0 0 0 1px var(--line), 0 10px 24px -14px rgba(0, 0, 0, .9);
transition:
transform .6s cubic-bezier(.16, .84, .3, 1),
opacity .6s ease,
box-shadow .6s ease;
}
.workflow-step span {
font: 9.5px ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: .14em;
color: var(--muted2);
display: block;
margin-bottom: 14px;
}
.workflow-step strong { font-size: 11px; letter-spacing: -.005em; }
.workflow-step::after {
content: "";
position: absolute;
top: 0;
left: -80%;
width: 55%;
height: 1px;
opacity: 0;
transform: skewX(-25deg);
background: linear-gradient(90deg, transparent, var(--green), transparent);
box-shadow: 0 0 12px rgba(62, 224, 127, .9);
}
/* 激活：向观察者前移，配合 perspective 产生真实抬升 */
.workflow-step.active {
opacity: 1;
transform: translateZ(48px) translateY(-2px);
background: linear-gradient(158deg, rgba(139, 124, 246, .16), rgba(0, 0, 0, .34));
box-shadow:
inset 0 0 0 1px rgba(139, 124, 246, .55),
inset 0 1px 0 rgba(255, 255, 255, .14),
0 26px 50px -18px rgba(139, 124, 246, .6);
}
.workflow-step.active::after { opacity: 1; animation: stepSweep 2.6s ease-in-out infinite; }
.workflow-step.done {
opacity: .88;
transform: translateZ(-8px);
color: var(--green);
box-shadow: inset 0 0 0 1px rgba(62, 224, 127, .3), 0 10px 24px -16px rgba(62, 224, 127, .5);
}
.workflow-step.blocked {
opacity: 1;
transform: translateZ(30px);
color: var(--red);
box-shadow: inset 0 0 0 1px rgba(242, 114, 140, .5), 0 20px 40px -18px rgba(242, 114, 140, .5);
}
.workflow-step.blocked::after { display: none; }
.workflow-shell[data-state="idle"] .workflow-step:first-child { animation: idlePulse 5.8s ease-in-out infinite; }
.workflow-shell[data-state="awaiting-human"] .workflow-step.active::after { animation: none; opacity: 0; }
.workflow-shell[data-state="awaiting-human"] .workflow-step.active {
background: linear-gradient(158deg, rgba(245, 196, 81, .16), rgba(0, 0, 0, .34));
box-shadow:
inset 0 0 0 1px rgba(245, 196, 81, .55),
inset 0 1px 0 rgba(255, 255, 255, .14),
0 26px 50px -18px rgba(245, 196, 81, .55);
animation: reviewPause 3.6s ease-in-out infinite;
}
.workflow-shell[data-state="verified"] .workflow-step.done { animation: verifiedGlow .75s cubic-bezier(.16, .84, .3, 1) both; }
/* --------------------------------------------------------------------------
17. Ledger trace
-------------------------------------------------------------------------- */
.trace-path {
grid-column: span 12;
position: relative;
height: 1px;
margin: -6px 0;
pointer-events: none;
background: linear-gradient(90deg, transparent, rgba(62, 224, 127, .18) 20% 80%, transparent);
}
.trace-path::after {
content: "";
position: absolute;
top: -1px;
left: 0;
width: 22%;
height: 3px;
border-radius: 3px;
background: linear-gradient(90deg, transparent, rgba(62, 224, 127, .7), transparent);
animation: traceFlow 9s ease-in-out infinite;
}
.verified-glow { animation: verifiedEdge .7s cubic-bezier(.16, .84, .3, 1) both; }
/* --------------------------------------------------------------------------
18. Toast
-------------------------------------------------------------------------- */
.toast {
position: fixed;
right: 26px;
bottom: 30px;
max-width: 370px;
padding: 15px 17px;
border-radius: 16px;
z-index: 30;
font-size: 12px;
color: var(--text);
background: linear-gradient(158deg, rgba(255, 255, 255, .08), rgba(0, 0, 0, .4)), rgba(20, 24, 23, .92);
backdrop-filter: blur(26px) saturate(150%);
-webkit-backdrop-filter: blur(26px) saturate(150%);
box-shadow:
inset 0 0 0 1px var(--line2),
inset 0 1px 0 rgba(255, 255, 255, .1),
0 30px 60px -20px rgba(0, 0, 0, .95);
animation: slideIn .34s cubic-bezier(.16, .84, .3, 1);
}
/* --------------------------------------------------------------------------
19. Dock nav
-------------------------------------------------------------------------- */
.dock {
position: fixed;
left: 26px;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 4px;
padding: 9px;
border-radius: 20px;
z-index: 20;
/* 导航项增至 8 个后竖排总高约 432px（每项 48px + 4px 间距）；短视口下必须可滚动，
否则底部两项会被推出屏幕、永远点不到（窄屏另有横向布局覆盖）。 */
max-height: calc(100vh - 36px);
overflow-y: auto;
overscroll-behavior: contain;
background: linear-gradient(158deg, rgba(255, 255, 255, .07), rgba(0, 0, 0, .35)), rgba(14, 17, 16, .62);
backdrop-filter: blur(30px) saturate(150%);
-webkit-backdrop-filter: blur(30px) saturate(150%);
box-shadow:
inset 0 0 0 1px var(--line),
inset 0 1px 0 rgba(255, 255, 255, .09),
0 30px 70px -24px rgba(0, 0, 0, .95);
}
.dock a {
width: 70px;
height: 48px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
border-radius: 13px;
color: var(--muted2);
text-decoration: none;
font-size: 9px;
letter-spacing: .04em;
transition: color .3s ease, background .3s ease, transform .35s cubic-bezier(.16, .84, .3, 1);
}
.dock a strong { font-size: 16px; font-weight: 500; }
.dock a:hover { color: var(--text); background: rgba(255, 255, 255, .05); transform: translateX(3px); }
.dock a.active {
color: var(--green);
background: linear-gradient(150deg, rgba(62, 224, 127, .16), rgba(62, 224, 127, .04));
box-shadow: inset 0 0 0 1px rgba(62, 224, 127, .26), inset 0 1px 0 rgba(255, 255, 255, .1);
transform: translateX(3px);
}
/* --------------------------------------------------------------------------
20. Keyframes
-------------------------------------------------------------------------- */
@keyframes traceDrift {
0% { transform: translate3d(0, 0, 0); }
100% { transform: translate3d(-18px, 12px, 0); }
}
/* 体积光斑漂移：幅度很小，只在长时间尺度上让画面「呼吸」 */
@keyframes atmoDrift {
0% { transform: translate3d(-1.6%, -1.2%, 0) scale(1.02); }
100% { transform: translate3d(2.2%, 1.6%, 0) scale(1.09); }
}
/* 胶片颗粒抖动：steps(1) 逐帧跳变，不做补间——真实颗粒是逐帧随机的，
补间会变成「缓慢位移的噪点图」，反而穿帮。 */
@keyframes grainShift {
0% { transform: translate3d(0, 0, 0); }
12% { transform: translate3d(-6px, 4px, 0); }
25% { transform: translate3d(5px, -7px, 0); }
37% { transform: translate3d(-9px, -3px, 0); }
50% { transform: translate3d(7px, 6px, 0); }
62% { transform: translate3d(-4px, -8px, 0); }
75% { transform: translate3d(8px, 2px, 0); }
87% { transform: translate3d(-7px, 7px, 0); }
100% { transform: translate3d(0, 0, 0); }
}
@keyframes bentoIn {
from { opacity: 0; transform: translateY(18px) rotateX(4deg); }
to { opacity: 1; transform: translateY(0) rotateX(0); }
}
@keyframes eqBar {
0%, 100% { transform: scaleY(0.55); opacity: .45; }
50% { transform: scaleY(1); opacity: 1; }
}
@keyframes coreSpin { to { transform: rotate(360deg); } }
@keyframes corePulse {
0%, 100% { opacity: .6; transform: scale(.94); }
50% { opacity: 1; transform: scale(1.06); }
}
@keyframes statusBreath {
0%, 100% { opacity: .74; }
50% { opacity: 1; }
}
@keyframes meter { to { width: 86%; } }
@keyframes stepSweep { 0% { left: -70%; } 55%, 100% { left: 120%; } }
@keyframes idlePulse {
0%, 100% { opacity: .42; }
50% { opacity: .68; }
}
@keyframes reviewPause {
0%, 100% { box-shadow: inset 0 0 0 1px rgba(245, 196, 81, .5), 0 22px 44px -20px rgba(245, 196, 81, .4); }
50% { box-shadow: inset 0 0 0 1px rgba(245, 196, 81, .8), 0 30px 60px -18px rgba(245, 196, 81, .7); }
}
@keyframes verifiedGlow {
0% { box-shadow: inset 0 0 0 1px rgba(62, 224, 127, .3); }
45% { box-shadow: inset 0 0 0 1px rgba(62, 224, 127, .7), 0 0 50px -10px rgba(62, 224, 127, .7); }
100% { box-shadow: inset 0 0 0 1px rgba(62, 224, 127, .3); }
}
@keyframes verifiedTrace {
from { opacity: .95; transform: scale(.92); }
to { opacity: 0; transform: scale(1.12); }
}
@keyframes verifiedEdge {
0% { box-shadow: var(--shadow); }
45% { box-shadow: var(--shadow), inset 0 0 0 1px rgba(62, 224, 127, .5), 0 0 70px -14px rgba(62, 224, 127, .6); }
100% { box-shadow: var(--shadow); }
}
@keyframes traceFlow {
0% { left: -22%; opacity: 0; }
20% { opacity: .9; }
70% { opacity: .5; }
100% { left: 100%; opacity: 0; }
}
@keyframes emptyWait {
0%, 100% { opacity: .4; transform: translateX(-50%) scale(.94); }
50% { opacity: .9; transform: translateX(-50%) scale(1.05); }
}
@keyframes commandWait {
0%, 100% { box-shadow: inset 0 0 0 1px var(--line); }
50% { box-shadow: inset 0 0 0 1px rgba(62, 224, 127, .22), 0 0 26px -10px rgba(62, 224, 127, .4); }
}
@keyframes rowIn {
from { opacity: 0; transform: translateY(7px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes slideIn { from { transform: translateY(14px); opacity: 0; } }
@keyframes islandSettle {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes pageEnter {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes pageLeave {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(-8px); }
}
/* --------------------------------------------------------------------------
21. Responsive
-------------------------------------------------------------------------- */
@media (max-width: 1180px) {
.ai-core { right: -150px; }
}
@media (max-width: 980px) {
.shell { padding: 30px 26px 116px; }
.dock {
left: 50%;
top: auto;
bottom: 18px;
transform: translateX(-50%);
flex-direction: row;
border-radius: 22px;
max-width: calc(100vw - 28px);
overflow-x: auto;
}
.dock a { width: 58px; height: 46px; }
.dock a:hover,
.dock a.active { transform: translateY(-3px); }
.hero,
.command-panel,
.status-zone,
.activity-panel,
.wide,
.narrow { grid-column: span 12; }
.module-strip { grid-template-columns: repeat(3, 1fr); gap: 20px; }
.module-metric:nth-child(3) { border-right: 0; }
.module-metric:nth-child(n + 4) { padding-top: 16px; }
.workflow-shell { grid-template-columns: repeat(2, 1fr); perspective: none; }
.workflow-shell::before { display: none; }
.workflow-step,
.workflow-step.active,
.workflow-step.done,
.workflow-step.blocked { transform: none; }
.ai-core { right: -200px; opacity: .4; }
/* Bento 在平板以下退化为单列 */
.dashboard-grid.bento {
grid-template-columns: 1fr;
grid-template-areas:
"hero"
"command"
"status"
"activity"
"metrics"
"pulse"
"notes";
}
.metric-floats { flex-direction: column; }
}
@media (max-width: 620px) {
.shell { padding: 22px 16px 108px; }
.topbar { margin-bottom: 34px; }
.top-actions .pill { display: none; }
.hero { padding: 30px; min-height: 348px; }
.hero h1 { font-size: 42px; }
.command-panel { min-height: 320px; }
.status-lines { grid-template-columns: 1fr; }
.module-strip { grid-template-columns: repeat(2, 1fr); }
.module-metric:nth-child(2n) { border-right: 0; }
.form-grid { grid-template-columns: 1fr; }
.field.full { grid-column: auto; }
.workflow-shell { grid-template-columns: 1fr; }
.panel.pad { padding: 20px; }
.live-island { width: 100%; }
.island-meter { display: none; }
.ai-core { display: none; }
.island-eq { display: none; }
}
/* --------------------------------------------------------------------------
22. Reduced motion — 保留静态层级与状态颜色
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
body::before { animation: none; }
.ai-core { transform: none !important; opacity: .6 !important; }
.ai-core > span { animation: none !important; }
.ai-core::after { display: none; }
.dashboard-grid.bento > section { animation: none; }
.island-eq span { animation: none; }
/* 材质层：颗粒是「纹理」不是「动效」，保留但停止逐帧抖动；体积光停止漂移。
（reduced-motion 下 3D 运行时本就不加载，无需处理 #spline-bg） */
#atmo-grain { animation: none; }
#atmo-light { animation: none; }
.workflow-step { transform: none !important; }
.workflow-step::after { display: none; }
.trace-path::after { display: none; }
.empty::before { animation: none; opacity: .5; }
.command-input { animation: none; }
.live-dot { animation: none !important; }
.status-line em { animation: none !important; }
.island-meter span { animation: none !important; width: 72%; }
.dock a:hover,
.dock a.active,
.button:hover { transform: none; }
}
|