// 显示更整齐 */
.al-body-sec > p { margin: 4px 0; }
.al-body-sec > p:first-child { margin-top: 0; }
.al-body-sec > p:last-child { margin-bottom: 0; }
.al-body-sec ul, .al-body-sec ol {
margin: 6px 0;
padding-left: 18px;
}
.al-body-sec li { margin: 3px 0; line-height: 1.55; }
.al-body-sec code {
background: var(--paper-warm);
padding: 1px 5px;
border-radius: 2px;
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
color: var(--vermilion);
}
.al-body-sec strong { color: var(--ink); font-weight: 600; }
.al-body-sec em { color: var(--vermilion); font-style: normal; }
.al-body-sec-label {
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
color: var(--ink-mute);
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 5px;
}
.al-body-mono {
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
color: var(--ink-soft);
}
/* ---- sub-list (merged tool, e.g., multiple read_file) ---- */
.al-sub-item {
display: flex;
align-items: center;
gap: 9px;
padding: 6px 0;
border-bottom: 0.5px solid var(--rule-soft);
}
.al-sub-item:last-child { border-bottom: none; }
.al-sub-item:first-child { padding-top: 0; }
.al-sub-dot {
width: 6px; height: 6px;
border-radius: 50%;
flex-shrink: 0;
background: var(--rule);
}
.al-sub-dot.success { background: var(--success); }
.al-sub-dot.running { background: var(--vermilion); }
.al-sub-dot.error { background: var(--error); }
.al-sub-info { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.al-sub-name {
font-size: 12px;
font-weight: 500;
color: var(--ink);
}
.al-sub-path {
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
color: var(--ink-mute);
}
/* ---- bash terminal ---- */
.al-bash {
background: #141414;
color: #d8d8d8;
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
line-height: 1.7;
padding: 9px 12px;
position: relative;
overflow-x: auto;
}
.al-bash-time {
position: absolute;
top: 7px; right: 12px;
color: #555;
font-size: 12px;
}
.al-bash .t-cmd { color: #7ec8e3; }
.al-bash .t-out { color: #888; }
.al-bash .t-ok { color: #6db66d; }
.al-bash .t-err { color: #e88; }
.al-bash > div { white-space: pre-wrap; }
/* ---- confirm bar (dangerous bash) ---- */
.al-confirm-bar {
background: var(--warning-bg);
border-top: 0.5px solid rgba(168,134,75,.35);
padding: 9px 12px;
display: flex;
align-items: center;
gap: 8px;
}
.al-confirm-warn {
font-size: 12px;
color: var(--warning);
flex: 1;
display: flex;
align-items: center;
gap: 5px;
}
.al-confirm-warn i { font-size: 13px; }
.al-confirm-btn {
font-family: 'Inter', sans-serif;
font-size: 12px;
padding: 4px 10px;
border-radius: 4px;
border: 0.5px solid var(--rule);
background: var(--paper);
color: var(--ink-soft);
cursor: pointer;
transition: all .15s;
}
.al-confirm-btn:hover { background: var(--paper-warm); color: var(--ink); }
.al-confirm-btn.primary {
background: var(--warning);
border-color: var(--warning);
color: var(--paper);
font-weight: 500;
}
.al-confirm-btn.primary:hover { opacity: 0.9; }
/* ---- diff view (edit_file) · 全黑 VSCode 风格 + Python 语法高亮 ----
· 背景 #0a0a0a 接近全黑（用户要求）· 文字 #d4d4d4
· 顶部 fake tab bar 模拟编辑器标签 · 三个 macOS 风格圆点
· add 行：左侧绿色 stripe + 浅绿底 · del 行：红色 · ctx：灰色 */
.al-diff {
font-family: 'JetBrains Mono', 'SF Mono', 'Consolas', 'Monaco', monospace;
font-size: 12px;
line-height: 1.65;
background: #0a0a0a;
color: #d4d4d4;
border: 1px solid #1a1a1a;
border-radius: 5px;
padding: 10px 0;
overflow-x: auto;
position: relative;
}
.al-diff::before {
content: '';
display: block;
height: 8px;
background:
radial-gradient(circle at 14px 4px, #ff5f56 3px, transparent 3.5px),
radial-gradient(circle at 30px 4px, #ffbd2e 3px, transparent 3.5px),
radial-gradient(circle at 46px 4px, #27c93f 3px, transparent 3.5px),
linear-gradient(to bottom, #161616 0, #161616 100%);
border-bottom: 1px solid #1a1a1a;
margin: -10px 0 8px;
}
.al-diff-line {
display: block;
padding: 0 16px;
white-space: pre;
min-height: 1.65em;
}
.al-diff-line:hover { background: rgba(255,255,255,0.025); }
.al-diff-add {
background: rgba(64,160,80,0.10);
color: #d4d4d4;
border-left: 3px solid #4a8a4a;
padding-left: 13px;
}
.al-diff-del {
background: rgba(220,70,70,0.10);
color: #d4d4d4;
border-left: 3px solid #b04040;
padding-left: 13px;
}
.al-diff-ctx {
color: #707070;
padding-left: 16px;
}
/* ── Python 语法高亮 token 配色（VSCode Dark+ 同款） ── */
.al-diff--py .hl-kw { color: #569cd6; } /* def / class / import / if / return 等 */
.al-diff--py .hl-builtin { color: #4ec9b0; } /* print / len / range / self / cls 等 */
.al-diff--py .hl-str { color: #ce9178; } /* "abc" / 'xyz' */
.al-diff--py .hl-comment { color: #6a9955; font-style: italic; } /* # ... */
.al-diff--py .hl-fn { color: #dcdcaa; } /* def 后的函数名 */
.al-diff--py .hl-num { color: #b5cea8; } /* 数字 */
.al-diff--py .hl-decorator{ color: #c586c0; } /* @staticmethod 等 */
/* 滚动条 · 暗色主题 */
.al-diff::-webkit-scrollbar { height: 8px; }
.al-diff::-webkit-scrollbar-track { background: #0a0a0a; }
.al-diff::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 4px; }
.al-diff::-webkit-scrollbar-thumb:hover { background: #3a3a3a; }
/* ---- grep matches ---- */
.al-search-match {
display: flex;
gap: 9px;
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
color: var(--ink-soft);
padding: 3px 0;
}
.al-search-file { color: var(--vermilion); }
.al-search-more {
font-size: 12px;
color: var(--ink-mute);
padding-top: 5px;
font-family: 'JetBrains Mono', monospace;
}
/* ---- verify wrapper ---- */
.al-verify {
margin-bottom: 8px;
border-left: 2px solid rgba(107,122,58,.5);
padding-left: 12px;
margin-left: 14px;
}
.al-verify-label {
display: flex;
align-items: center;
gap: 5px;
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
font-weight: 500;
color: var(--success);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 8px;
}
.al-verify-label i { font-size: 12px; }
/* verify 内部的 row 复用 .al-row 样式，但缩小 spine 区域 */
.al-verify .al-row { gap: 0; }
/* ---- final response ---- */
.al-final {
margin-top: 14px;
padding-top: 14px;
border-top: 0.5px solid var(--rule-soft);
}
.al-final-label {
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
font-weight: 500;
color: var(--ink-mute);
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 7px;
}
.al-final-text {
font-size: 14px;
color: var(--ink);
line-height: 1.75;
}
.al-final-text p {
margin: 0 0 12px;
}
.al-final-text p:last-child { margin-bottom: 0; }
.al-final-text code {
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
background: var(--paper-warm);
color: var(--ink-soft);
padding: 1px 6px;
border-radius: 3px;
}
.al-final-text strong {
font-weight: 500;
color: var(--vermilion);
}
.al-final-text em {
font-style: italic;
color: var(--ink-soft);
}
/* 干实验方案 · 富内容 final summary（推演结论 / 设计参数 / KPI 表 / 风险 / 下一步） */
.al-final-summary h4 {
font-family: 'Noto Serif SC', serif;
font-size: 13px;
font-weight: 600;
color: var(--vermilion);
letter-spacing: 0.04em;
margin: 18px 0 8px;
padding-left: 10px;
border-left: 3px solid var(--vermilion);
}
.al-final-summary h4:first-child { margin-top: 4px; }
.al-final-summary p {
font-size: 13px;
line-height: 1.75;
color: var(--ink-soft);
margin: 0 0 10px;
}
.al-final-summary ul {
margin: 6px 0 12px;
padding-left: 22px;
list-style: square;
}
.al-final-summary ul li {
font-size: 13px;
line-height: 1.7;
color: var(--ink-soft);
margin-bottom: 4px;
}
.al-final-summary code {
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
padding: 1px 5px;
background: var(--paper-warm);
border: 1px solid var(--rule);
border-radius: 2px;
color: var(--vermilion);
}
.al-final-summary strong { color: var(--ink); font-weight: 600; }
.al-final-summary em { font-style: italic; color: var(--ink); }
/* KPI 比对表格 */
.al-final-summary .al-kpi-table {
width: 100%;
border-collapse: collapse;
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
margin: 8px 0 14px;
background: var(--paper);
border: 1px solid var(--rule);
}
.al-kpi-table thead th {
background: var(--paper-cool);
color: var(--ink-mute);
font-weight: 500;
text-align: left;
padding: 7px 10px;
border-bottom: 1px solid var(--rule);
letter-spacing: 0.08em;
font-size: 12px;
text-transform: uppercase;
}
.al-kpi-table tbody td {
padding: 6px 10px;
border-bottom: 1px solid var(--rule-soft);
color: var(--ink-soft);
}
.al-kpi-table tbody tr:last-child td { border-bottom: none; }
.al-kpi-table tbody td strong { color: var(--ink); font-weight: 600; }
.al-kpi-table tbody td.ok {
color: var(--vermilion);
font-weight: 600;
letter-spacing: 0.04em;
}
/* ---- al-final · WT → 突变态 序列 diff 卡片 ---- */
.al-mut-diff {
margin-top: 16px;
border: 1px solid var(--rule);
border-radius: 4px;
background: var(--paper);
overflow: hidden;
}
.al-mut-diff-header {
display: flex;
align-items: baseline;
justify-content: space-between;
padding: 9px 14px;
border-bottom: 1px solid var(--rule-soft);
background: var(--paper-cool);
}
.al-mut-diff-header-title {
font-family: 'Noto Serif SC', serif;
font-size: 13px;
font-weight: 600;
color: var(--vermilion);
letter-spacing: 0.04em;
}
.al-mut-diff-header-meta {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--ink-mute);
letter-spacing: 0.06em;
}
.al-mut-diff-body {
padding: 12px 14px 6px;
display: flex;
flex-direction: column;
gap: 10px;
overflow-x: auto;
}
.al-mut-diff-row {
display: grid;
grid-template-columns: 36px 1fr;
gap: 10px;
align-items: start;
}
.al-mut-diff-row.is-quiet { opacity: 0.78; }
.al-mut-diff-pos {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--ink-mute);
text-align: right;
padding-top: 3px;
user-select: none;
}
.al-mut-diff-lines {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.al-mut-diff-line {
display: flex;
gap: 8px;
align-items: center;
}
.al-mut-diff-tag {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.06em;
width: 30px;
flex-shrink: 0;
text-align: center;
padding: 2px 4px;
border-radius: 2px;
background: var(--paper-warm);
color: var(--ink-mute);
user-select: none;
}
.al-mut-diff-tag.mut {
background: var(--vermilion-bg);
color: var(--vermilion);
font-weight: 600;
}
.al-mut-diff-seq {
font-family: 'JetBrains Mono', monospace;
font-size: 12.5px;
line-height: 1.55;
color: var(--ink-soft);
letter-spacing: 0;
white-space: nowrap;
}
.al-mut-diff-cell {
display: inline-block;
width: 1ch;
text-align: center;
position: relative;
}
.al-mut-diff-cell.wt-changed {
background: var(--paper-warm);
color: var(--ink-mute);
text-decoration: line-through;
text-decoration-color: var(--mut-color, var(--vermilion));
text-decoration-thickness: 1.5px;
border-radius: 2px;
}
.al-mut-diff-cell.mut-new {
color: #fff;
font-weight: 600;
border-radius: 2px;
cursor: default;
}
.al-mut-diff-pills {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 10px 14px 12px;
border-top: 1px solid var(--rule-soft);
background: var(--paper-warm);
}
.al-mut-diff-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 9px 3px 7px;
background: var(--paper);
border: 1px solid var(--rule);
border-radius: 11px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--ink);
cursor: default;
transition: border-color .12s, background .12s;
}
.al-mut-diff-pill:hover {
border-color: var(--ink-mute);
background: var(--paper-cool);
}
.al-mut-diff-pill-dot {
width: 7px; height: 7px;
border-radius: 50%;
flex-shrink: 0;
}
.al-mut-diff-pill-label {
font-weight: 600;
color: var(--ink);
}
.al-mut-diff-pill-score {
color: var(--ink-mute);
font-weight: 400;
}
/* ═══════════════════════════════════════════════════════════════
pf-proc · 蛋白质场景"推理过程"模块（挂在 proteinFullSumDrawer 顶部）
· 跟随剧本逐节滑入，AMIX 10 轮 / Top-10 / mut-diff / 频谱 / 库 / 排名 / 推荐
═══════════════════════════════════════════════════════════════ */
.pf-sum-process-body { padding: 0; }
.pf-sum-process-body:empty { display: none; }
.pf-proc-host { background: linear-gradient(180deg, rgba(190,52,40,0.025) 0%, rgba(0,0,0,0) 220px); }
/* ── 推理流程 preamble · 品牌蓝玻璃卡
· 接近不透明 (95%) 品牌蓝底 · 避免半透与暖纸 body 的混浊
· 玻璃质感靠内顶光泽 + 浅蓝浮影呈现，而非高透明 ── */
.pf-preamble {
margin: 14px 18px 14px;
padding: 16px 20px 18px;
background: rgba(233, 240, 249, 0.95); /* vermilion-bg @ 95% · 接近实色但保留 1px 玻璃感 */
border: 1px solid rgba(22, 97, 171, 0.18);
border-radius: 4px;
backdrop-filter: blur(8px) saturate(1.2);
-webkit-backdrop-filter: blur(8px) saturate(1.2);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.75), /* 顶部白光泽 · 玻璃质感 */
0 2px 10px rgba(22, 97, 171, 0.08); /* 浅蓝浮影 · 与底色同 hue */
}
.pf-preamble-line {
display: flex;
align-items: baseline;
gap: 10px;
margin-bottom: 6px;
line-height: 1.5;
}
.pf-preamble-line:last-of-type { margin-bottom: 8px; }
/* 第一行（优化目标）= 主信息 · 加大字号形成"主→副→数据"三级层级 */
.pf-preamble-line:first-of-type {
margin-bottom: 8px;
align-items: baseline;
}
.pf-preamble-line:first-of-type .pf-preamble-tag { font-size: 13px; }
.pf-preamble-line:first-of-type .pf-preamble-val { font-size: 14.5px; line-height: 1.45; color: var(--ink); font-weight: 600; }
.pf-preamble-tag {
font-family: 'Noto Serif SC', 'Songti SC', serif;
font-size: 11.5px;
font-weight: 700; /* 加粗 · 与 body 普通文字形成清晰层级 */
color: var(--ink);
letter-spacing: 0.06em;
flex: 0 0 auto;
}
.pf-preamble-tag::after {
content: '：';
color: var(--ink-mute);
}
.pf-preamble-val {
font-size: 12px;
color: var(--ink-soft);
font-weight: 500;
letter-spacing: 0.02em;
}
.pf-preamble-meta {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.1em;
color: var(--ink-faint);
text-transform: uppercase;
font-weight: 500;
}
/* 序列块 · 不再做独立卡，而是 preamble 内部的"数据段"
· 取消单独底色与四边框，只保留顶部虚线分隔 + monospace 字体（保留数据语义）
· 顶部虚线用中性 rgba ink，与新的中性 frosted glass preamble 不引入新 hue */
.pf-preamble-seq {
margin-top: 8px;
padding-top: 8px;
border-top: 1px dashed rgba(22, 97, 171, 0.22);
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.05em;
color: var(--ink);
line-height: 1.75;
word-break: break-all;
background: transparent;
}
/* ── 推理流程 sticky stepper · 7 步 · 数字徽章卡片风格
· 背景全透明 · 借用抽屉 body 的暖纸作底
· 保留 backdrop-filter blur 让滚动到下方的内容浮过 stepper 时维持可读性 ── */
.pf-stepper {
position: sticky;
top: 0;
z-index: 5;
background: transparent;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border-bottom: 1px solid var(--rule-soft);
padding: 14px 22px 14px;
}
.pf-stepper-list {
display: flex;
align-items: flex-start;
list-style: none;
margin: 0;
padding: 0;
gap: 0;
}
.pf-stepper-step {
display: flex; flex-direction: column;
align-items: center;
gap: 7px;
flex: 0 0 auto;
min-width: 64px;
position: relative;
cursor: default;
}
/* 连接线 · 三态：pending / done / flowing */
.pf-stepper-conn {
flex: 1 1 auto;
height: 2px;
min-width: 18px;
margin-top: 10px; /* 与 22px 徽章中心对齐 */
background: rgba(0,0,0,0.1);
border-radius: 1px;
transition: background .35s ease;
overflow: hidden; /* 给 flow shimmer 用 */
position: relative;
}
.pf-stepper-conn.is-done {
background: var(--vermilion);
}
/* flowing · 能量从左往右传 · linear-gradient + background-position shift */
.pf-stepper-conn.is-flowing {
background-image: linear-gradient(
90deg,
var(--vermilion) 0%,
rgba(190,52,40,0.95) 35%,
rgba(255,255,255,0.6) 50%,
rgba(190,52,40,0.95) 65%,
var(--vermilion) 100%
);
background-size: 220% 100%;
background-color: var(--vermilion);
animation: pfStepperFlow 1.6s linear infinite;
}
@keyframes pfStepperFlow {
from { background-position: 100% 0; }
to { background-position: -100% 0; }
}
/* 占位但不可见：保持槽位让 7 个 step 位置完全固定 */
.pf-stepper-step.is-hidden,
.pf-stepper-conn.is-hidden {
opacity: 0;
visibility: hidden;
}
/* 渐进 reveal：新可见的 step / connector 入场动画 */
.pf-stepper-step.is-appearing,
.pf-stepper-conn.is-appearing {
animation: pfStepperAppear .42s cubic-bezier(.22,.8,.26,1);
}
@keyframes pfStepperAppear {
from { opacity: 0; transform: scale(0.7); }
to { opacity: 1; transform: scale(1); }
}
/* 数字徽章方块 · pending baseline */
.pf-stepper-dot {
width: 22px; height: 22px;
border-radius: 3px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--paper);
border: 1.5px solid rgba(0,0,0,0.16);
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
font-weight: 600;
color: var(--ink-faint);
transition: all .25s cubic-bezier(.22,.8,.26,1);
position: relative;
}
.pf-stepper-num { display: inline; line-height: 1; }
.pf-stepper-label {
font-family: 'Noto Serif SC', serif;
font-size: 12px;
color: var(--ink-faint);
letter-spacing: 0.02em;
white-space: nowrap;
transition: color .25s, font-weight .25s;
display: inline-flex; align-items: baseline; gap: 4px;
}
/* 标签前的两位数字序号 · 蒙板低存在感 · 跟随父态变色 */
.pf-stepper-label-num {
font-family: 'JetBrains Mono', monospace;
font-size: 9.5px;
color: var(--ink-faint);
opacity: 0.7;
letter-spacing: 0;
transition: color .25s, opacity .25s;
}
.pf-stepper-step.is-active .pf-stepper-label-num,
.pf-stepper-step.is-done .pf-stepper-label-num {
color: inherit;
opacity: 0.85;
}
/* active · vermilion 描边 + vermilion 数字 + 软 pulse 阴影 + 标签加粗 */
.pf-stepper-step.is-active .pf-stepper-dot {
background: var(--paper);
border-color: var(--vermilion);
color: var(--vermilion);
box-shadow: 0 0 0 0 rgba(190,52,40,0.35);
animation: pfStepperBadgePulse 1.6s ease-out infinite;
}
@keyframes pfStepperBadgePulse {
0% { box-shadow: 0 0 0 0 rgba(190,52,40,0.38); }
70% { box-shadow: 0 0 0 6px rgba(190,52,40,0); }
100% { box-shadow: 0 0 0 0 rgba(190,52,40,0); }
}
.pf-stepper-step.is-active .pf-stepper-label {
color: var(--vermilion);
font-weight: 600;
}
/* done · 实心 vermilion 方块 + 白 ✓（数字隐藏） */
.pf-stepper-step.is-done .pf-stepper-dot {
background: var(--vermilion);
border-color: var(--vermilion);
color: transparent; /* 数字不显示，被 ✓ 取代 */
}
.pf-stepper-step.is-done .pf-stepper-dot::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 13px 13px;
background-repeat: no-repeat;
background-position: center;
}
.pf-stepper-step.is-done .pf-stepper-label {
color: var(--ink-soft);
}
.pf-proc-head {
padding: 22px 28px 14px;
border-bottom: 1px solid var(--rule-soft);
}
.pf-proc-head-eyebrow {
display: inline-flex; align-items: center; gap: 7px;
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
letter-spacing: 0.12em;
color: var(--vermilion);
margin-bottom: 6px;
}
.pf-proc-live-dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--vermilion);
box-shadow: 0 0 0 0 rgba(190,52,40,0.55);
animation: pfProcPulse 1.4s infinite;
}
.pf-proc-live-dot.is-done {
background: #2f8659;
animation: none;
box-shadow: 0 0 0 0 rgba(107,122,58,0.4);
}
@keyframes pfProcPulse {
0% { box-shadow: 0 0 0 0 rgba(190,52,40,0.55); }
70% { box-shadow: 0 0 0 6px rgba(190,52,40,0); }
100% { box-shadow: 0 0 0 0 rgba(190,52,40,0); }
}
.pf-proc-head-title {
font-family: 'Noto Serif SC', serif;
font-size: 18px;
font-weight: 600;
color: var(--ink);
letter-spacing: 0.02em;
margin-bottom: 4px;
}
.pf-proc-head-meta {
font-family: 'JetBrains Mono', monospace;
font-size: 11.5px;
color: var(--ink-mute);
letter-spacing: 0.04em;
}
.pf-proc-phase-label::before { content: '› '; color: var(--ink-faint); }
.pf-proc-section {
padding: 14px 28px 18px;
border-bottom: 1px dashed var(--rule-soft);
opacity: 1;
transition: opacity .35s ease, transform .35s ease, max-height .4s ease;
}
.pf-proc-section.is-hidden { display: none; }
.pf-proc-section.is-in {
animation: pfProcSecIn .42s cubic-bezier(.22,.8,.26,1);
}
@keyframes pfProcSecIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.pf-proc-section-head {
display: flex; align-items: baseline; gap: 10px;
margin-bottom: 10px;
}
.pf-proc-section-num {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
color: var(--vermilion);
background: var(--vermilion-bg);
padding: 2px 6px;
border-radius: 2px;
letter-spacing: 0.08em;
flex-shrink: 0;
}
.pf-proc-section-name {
font-family: 'Noto Serif SC', serif;
font-size: 13.5px;
font-weight: 600;
color: var(--ink-soft);
flex: 1;
}
.pf-proc-section-side {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--ink-mute);
letter-spacing: 0.03em;
}
.pf-proc-section-side strong { color: var(--ink-soft); font-weight: 600; }
/* ── 01 · AMIX split 2 列 · 左序列 ┃ 右 3D viewer · 50/50 ── */
.pf-proc-amix-split {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 18px;
align-items: start;
}
.pf-proc-amix-left {
min-width: 0;
display: flex; flex-direction: column;
gap: 7px;
}
.pf-proc-amix-right {
display: flex; flex-direction: column;
gap: 8px;
min-width: 0;
/* 左列变高（含 mut-diff + freq subblock）时，3D viewer sticky 留在视区，
方便用户在任意 cell click → 立即在 3D 中聚焦 */
position: sticky;
top: 72px; /* 让出顶部 stepper (~70px) 高度 */
align-self: start;
}
.pf-proc-3d-head {
display: flex; align-items: baseline; justify-content: space-between;
padding-bottom: 4px;
}
.pf-proc-3d-title {
font-family: 'Noto Serif SC', serif;
font-size: 12px;
font-weight: 600;
color: var(--ink-soft);
}
.pf-proc-3d-meta {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
color: var(--ink-faint);
letter-spacing: 0.04em;
}
.pf-proc-3d-viewer {
position: relative;
width: 100%;
height: 420px;
background: var(--paper-cool); /* 素色：与抽屉整体暖米纸调匹配 · 取冷一档让 spectral 蛋白色更清晰 */
border-radius: 4px;
overflow: hidden;
border: 1px solid var(--rule);
}
.pf-proc-3d-loading {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
color: var(--ink-mute);
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.06em;
pointer-events: none;
}
/* 残基详情浮层 · 绝对定位贴在 viewer 内左下角 · 透明 frosted glass 风格 ·
与右上角控制按钮 (top:8px right:8px) 错位，互不遮挡 */
.pf-proc-3d-info {
position: absolute;
left: 10px;
bottom: 10px;
z-index: 2;
max-width: calc(100% - 20px); /* 左右各留 10px · 控制按钮在 top-right 不同 row 不冲突 */
background: rgba(253,252,248,0.72); /* paper @ 72% */
border: 1px solid rgba(0,0,0,0.06);
border-radius: 3px;
padding: 6px 10px;
display: flex; align-items: center;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: opacity .2s ease, background .2s ease;
}
/* 空态：低亮、压低存在感 · 详情态：满亮、强调聚焦的残基 */
.pf-proc-3d-info[data-mode="empty"] { opacity: 0.7; background: rgba(253,252,248,0.55); }
.pf-proc-3d-info[data-mode="detail"] { opacity: 1; }
.pf-proc-3d-info[data-mode="empty"] .pf-proc-3d-detail { display: none; }
.pf-proc-3d-info[data-mode="detail"] .pf-proc-3d-empty { display: none; }
.pf-proc-3d-empty {
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
color: var(--ink-mute);
letter-spacing: 0.04em;
line-height: 1.45;
}
.pf-proc-3d-detail {
display: flex; align-items: baseline; gap: 8px;
}
.pf-proc-3d-detail-main {
display: flex; align-items: baseline; gap: 5px;
font-family: 'JetBrains Mono', monospace;
}
.pf-proc-3d-pos {
font-size: 13px; font-weight: 700;
color: var(--ink);
}
.pf-proc-3d-arrow {
color: var(--ink-faint);
font-size: 11px;
}
.pf-proc-3d-mut {
font-size: 13px; font-weight: 700;
color: var(--vermilion);
letter-spacing: 0.02em;
}
.pf-proc-3d-detail-meta {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
color: var(--ink-mute);
letter-spacing: 0.03em;
}
/* 深色主题适配 · 文字色 + 浮层底色翻转 */
.pf-proc-3d-viewer.is-bg-dark .pf-proc-3d-info {
background: rgba(20,28,40,0.55);
border-color: rgba(255,255,255,0.12);
}
.pf-proc-3d-viewer.is-bg-dark .pf-proc-3d-info[data-mode="empty"] { background: rgba(20,28,40,0.40); }
.pf-proc-3d-viewer.is-bg-dark .pf-proc-3d-empty { color: rgba(255,255,255,0.55); }
.pf-proc-3d-viewer.is-bg-dark .pf-proc-3d-pos { color: rgba(255,255,255,0.92); }
.pf-proc-3d-viewer.is-bg-dark .pf-proc-3d-arrow { color: rgba(255,255,255,0.5); }
.pf-proc-3d-viewer.is-bg-dark .pf-proc-3d-mut { color: #ff9070; } /* 深底下 vermilion 偏暗 · 换暖橙提对比 */
.pf-proc-3d-viewer.is-bg-dark .pf-proc-3d-detail-meta { color: rgba(255,255,255,0.55); }
/* 控制按钮叠在 viewer 内右上 · 默认低存在感 · hover 才提亮 · 适配素色底 */
.pf-proc-3d-controls {
position: absolute;
top: 8px; right: 8px;
display: flex; gap: 2px;
z-index: 2;
opacity: 0.6;
transition: opacity .2s ease;
}
.pf-proc-3d-viewer:hover .pf-proc-3d-controls { opacity: 1; }
.pf-proc-3d-btn {
width: 24px; height: 24px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(253,252,248,0.7); /* paper 半透 · 在素色底上自然融入 */
border: 1px solid var(--rule);
border-radius: 3px;
color: var(--ink-soft);
cursor: pointer;
transition: all .15s ease;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.pf-proc-3d-btn:hover {
background: var(--paper);
border-color: var(--vermilion-soft);
color: var(--vermilion);
}
.pf-proc-3d-btn svg { width: 13px; height: 13px; }
/* 主题按钮：默认显示月亮（点击后切到深色）· 切到深色后显示太阳（点击再切回浅色） */
.pf-proc-3d-btn[data-3d-act="theme"] .theme-icon-sun { display: none; }
/* 深色主题修饰：viewer 底色 + loading 文字 + 控制按钮全部翻成深底风格 */
.pf-proc-3d-viewer.is-bg-dark {
background: #0e1620;
border-color: rgba(0,0,0,0.45);
}
.pf-proc-3d-viewer.is-bg-dark .pf-proc-3d-loading {
color: rgba(255,255,255,0.55);
}
.pf-proc-3d-viewer.is-bg-dark .pf-proc-3d-btn {
background: rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.1);
color: rgba(255,255,255,0.75);
}
.pf-proc-3d-viewer.is-bg-dark .pf-proc-3d-btn:hover {
background: rgba(255,255,255,0.18);
border-color: rgba(255,255,255,0.28);
color: #fff;
}
.pf-proc-3d-viewer.is-bg-dark .pf-proc-3d-btn[data-3d-act="theme"] .theme-icon-moon { display: none; }
.pf-proc-3d-viewer.is-bg-dark .pf-proc-3d-btn[data-3d-act="theme"] .theme-icon-sun { display: block; }
/* legend 提示尾巴 */
.pf-proc-legend-hint {
margin-left: auto;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
color: var(--ink-faint);
letter-spacing: 0.05em;
}
/* cell focused 高亮：vermilion outline · 适用 WT 序列 cell / mut-diff col / freq bar */
.pf-proc-seq-char,
.pf-proc-col[data-pos],
.pf-proc-freq-bar[data-pos] {
cursor: pointer;
}
.pf-proc-seq-char.is-focused,
.pf-proc-col.is-focused .pf-proc-cell-mut,
.pf-proc-freq-bar.is-focused {
outline: 2px solid var(--vermilion);
outline-offset: 1px;
z-index: 2;
}
/* 窄屏兜底：抽屉 < 720px 时改纵向，3D 在序列下方 */
@media (max-width: 720px) {
.pf-proc-amix-split {
grid-template-columns: 1fr;
}
.pf-proc-amix-right {
position: static; /* 纵向时不需要 sticky */
}
.pf-proc-3d-viewer { height: 300px; }
}
/* ── 01 · AMIX 在 WT 序列上的采样可视化 ── */
.pf-proc-amix-stats {
display: flex; flex-wrap: wrap; gap: 14px;
padding: 4px 0 8px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--ink-mute);
letter-spacing: 0.03em;
}
.pf-proc-amix-stat strong {
color: var(--ink-soft);
font-weight: 600;
font-variant-numeric: tabular-nums;
margin-left: 3px;
}
.pf-proc-amix-stat .pf-amix-val { color: var(--vermilion); }
.pf-proc-amix-tline {
display: flex; align-items: center; gap: 0;
padding: 6px 2px 10px;
}
.pf-proc-amix-tldot {
width: 8px; height: 8px; border-radius: 50%;
background: rgba(0,0,0,0.14);
flex-shrink: 0;
transition: all .25s ease;
}
.pf-proc-amix-tldot.is-running {
background: var(--vermilion);
transform: scale(1.45);
box-shadow: 0 0 0 4px rgba(190,52,40,0.18);
animation: pfTlPulse 1.4s infinite;
}
@keyframes pfTlPulse {
0% { box-shadow: 0 0 0 0 rgba(190,52,40,0.45); }
70% { box-shadow: 0 0 0 6px rgba(190,52,40,0); }
100% { box-shadow: 0 0 0 0 rgba(190,52,40,0); }
}
.pf-proc-amix-tldot.is-done {
background: var(--vermilion);
opacity: 0.55;
}
.pf-proc-amix-tldot.is-best {
background: var(--vermilion);
opacity: 1;
box-shadow: 0 0 0 3px rgba(190,52,40,0.2);
}
.pf-proc-amix-tlbar {
flex: 1;
height: 1px;
background: rgba(0,0,0,0.1);
margin: 0 6px;
}
/* WT 序列网格（60 残基/行 × 4 行） */
.pf-proc-seq-grid {
background: var(--paper);
border: 1px solid var(--rule-soft);
border-radius: 3px;
padding: 8px 10px;
overflow-x: auto;
font-family: 'JetBrains Mono', monospace;
line-height: 1.55;
}
.pf-proc-seq-line {
display: flex; align-items: baseline;
white-space: nowrap;
}
.pf-proc-seq-num {
width: 36px;
padding-right: 10px;
text-align: right;
color: var(--ink-faint);
font-size: 9.5px;
flex-shrink: 0;
user-select: none;
}
/* row 用 flex 拉伸 + 每 cell 等分 → 在左列宽度内最大块度铺满，cell 不再固定 1ch */
.pf-proc-seq-row {
display: flex;
flex: 1 1 auto;
min-width: 0;
gap: 1px;
}
.pf-proc-seq-char {
flex: 1 1 0;
min-width: 0;
max-width: 22px; /* 末行 cell 数少时不至于撑得过宽 */
text-align: center;
font-size: 13px;
color: var(--ink-mute);
position: relative;
border-radius: 2px;
line-height: 1.6;
transition: color .25s, background .25s, transform .2s;
}
/* 每 10 个字一组的细分隔 */
.pf-proc-seq-char:nth-child(10n) { margin-right: 3px; }
.pf-proc-seq-char.is-sampled {
color: var(--vermilion);
background: rgba(190,52,40,0.18);
animation: pfSeqSample .5s ease-out;
}
@keyframes pfSeqSample {
0% { background: rgba(190,52,40,0.55); transform: scale(1.25); }
100% { background: rgba(190,52,40,0.18); transform: scale(1); }
}
.pf-proc-seq-char.is-locked {
color: #fff;
background: var(--mut-color, var(--vermilion));
font-weight: 700;
animation: pfSeqLock .55s cubic-bezier(.22,.8,.26,1);
}
@keyframes pfSeqLock {
0% { transform: scale(1.4); box-shadow: 0 0 0 0 rgba(190,52,40,0.6); }
60% { box-shadow: 0 0 0 5px rgba(190,52,40,0); }
100% { transform: scale(1); box-shadow: none; }
}
/* legend */
.pf-proc-seq-legend {
display: flex; gap: 14px;
margin-top: 8px;
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
color: var(--ink-faint);
}
.pf-proc-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.pf-proc-legend-swatch {
width: 12px; height: 12px; border-radius: 2px;
display: inline-block;
}
.pf-proc-legend-swatch.is-sample { background: rgba(190,52,40,0.22); }
.pf-proc-legend-swatch.is-locked { background: var(--vermilion); }
/* AMIX 节内的 Top-10 子块 · 视觉分隔但同节 */
.pf-proc-subblock {
margin-top: 16px;
padding-top: 14px;
border-top: 1px dashed var(--rule-soft);
}
.pf-proc-subblock.is-hidden { display: none; }
.pf-proc-subblock.is-in { animation: pfProcSecIn .42s cubic-bezier(.22,.8,.26,1); }
.pf-proc-subblock-head {
display: flex; align-items: baseline; gap: 8px;
margin-bottom: 8px;
}
.pf-proc-subblock-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--vermilion);
flex-shrink: 0;
margin-right: 2px;
}
/* 小 A / B 序号标签（合并节内的子段标识） */
.pf-proc-subblock-tag {
display: inline-flex; align-items: center; justify-content: center;
width: 16px; height: 16px;
font-family: 'JetBrains Mono', monospace;
font-size: 9.5px;
font-weight: 700;
color: var(--vermilion);
background: var(--vermilion-bg);
border-radius: 2px;
letter-spacing: 0;
flex-shrink: 0;
}
.pf-proc-subblock-name-row {
display: flex; align-items: center; gap: 8px;
margin-bottom: 8px;
font-family: 'Noto Serif SC', serif;
font-size: 12px;
color: var(--ink-mute);
}
.pf-proc-subblock-name {
font-family: 'Noto Serif SC', serif;
font-size: 12.5px;
font-weight: 600;
color: var(--ink-soft);
flex: 1;
}
.pf-proc-subblock-side {
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
color: var(--ink-mute);
letter-spacing: 0.03em;
}
/* 横向并排：02 + 03 同节 split */
.pf-proc-section-row { padding-top: 16px; padding-bottom: 18px; }
.pf-proc-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 22px;
}
.pf-proc-half {
min-width: 0; /* 让 overflow scroll 起作用 */
}
.pf-proc-half.is-hidden { visibility: hidden; }
.pf-proc-half.is-in {
animation: pfProcSecIn .42s cubic-bezier(.22,.8,.26,1);
}
/* split 内 mut-diff cell 缩到 18px 适应窄列 */
.pf-proc-half .pf-proc-col,
.pf-proc-amix-left .pf-proc-subblock[data-sec="mutdiff"] .pf-proc-col { width: 19px; }
.pf-proc-half .pf-proc-cell,
.pf-proc-amix-left .pf-proc-subblock[data-sec="mutdiff"] .pf-proc-cell { width: 17px; height: 17px; font-size: 11.5px; }
.pf-proc-half .pf-proc-cell-pos,
.pf-proc-amix-left .pf-proc-subblock[data-sec="mutdiff"] .pf-proc-cell-pos { font-size: 8.5px; }
/* split 内 freq bars 整体缩矮（mut-diff & rank pills 的 split 半子，已废用） */
.pf-proc-half .pf-proc-freq-bars { height: 70px; gap: 1.5px; }
.pf-proc-half .pf-proc-freq-bar { width: 6px; }
.pf-proc-half .pf-proc-freq-pos { font-size: 7.5px; }
/* amix-left 内 mut-diff · 22 cells 按 flex 等分撑满左列，不滚动 */
.pf-proc-amix-left .pf-proc-subblock[data-sec="mutdiff"] .pf-proc-grid {
gap: 2px;
overflow: hidden;
}
.pf-proc-amix-left .pf-proc-subblock[data-sec="mutdiff"] .pf-proc-col {
flex: 1 1 0;
min-width: 0;
width: auto;
}
.pf-proc-amix-left .pf-proc-subblock[data-sec="mutdiff"] .pf-proc-cell {
width: 100%;
max-width: 22px; /* cell 不撑得过宽 */
height: 18px;
font-size: 11.5px;
}
.pf-proc-amix-left .pf-proc-subblock[data-sec="mutdiff"] .pf-proc-cell-pos {
font-size: 8.5px;
}
/* amix-left 内 freq bars · 41 个柱子按 flex 等分宽度铺满容器，不滚动 */
.pf-proc-amix-left .pf-proc-subblock[data-sec="freq"] .pf-proc-freq-bars {
height: 70px;
gap: 2px;
overflow: hidden;
}
.pf-proc-amix-left .pf-proc-subblock[data-sec="freq"] .pf-proc-freq-bar {
flex: 1 1 0;
width: auto;
min-width: 0;
}
.pf-proc-amix-left .pf-proc-subblock[data-sec="freq"] .pf-proc-freq-pos {
font-size: 7.5px;
}
/* 窄屏兜底：< 560px 时 split 改成纵向 */
@media (max-width: 560px) {
.pf-proc-split { grid-template-columns: 1fr; gap: 16px; }
}
/* ── 02 · Top-10 候选 · 219 横条 + 突变 dot ── */
.pf-proc-top10-ruler {
position: relative;
height: 14px;
margin: 4px 0 6px 130px; /* 130px 让出 meta 列 */
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
color: var(--ink-faint);
}
.pf-proc-top10-ruler span {
position: absolute;
top: 0;
transform: translateX(-50%);
}
.pf-proc-top10-stack {
display: flex; flex-direction: column; gap: 4px;
}
.pf-proc-top10-strip {
display: flex; align-items: center; gap: 8px;
opacity: 0;
transform: translateY(4px);
transition: opacity .3s ease, transform .3s ease;
}
.pf-proc-top10-strip.is-in { opacity: 1; transform: translateY(0); }
.pf-proc-top10-meta {
width: 122px;
display: flex; gap: 6px; align-items: baseline;
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
color: var(--ink-mute);
flex-shrink: 0;
white-space: nowrap;
}
.pf-proc-top10-rank { font-weight: 600; color: var(--ink-soft); }
.pf-proc-top10-score { font-variant-numeric: tabular-nums; color: var(--ink-mute); }
.pf-proc-top10-mut { color: var(--ink-faint); font-size: 9.5px; }
.pf-proc-top10-strip.is-best .pf-proc-top10-rank { color: var(--vermilion); }
.pf-proc-top10-strip.is-best .pf-proc-top10-score { color: var(--vermilion); font-weight: 600; }
.pf-proc-top10-track {
flex: 1;
position: relative;
height: 14px;
background: rgba(0,0,0,0.04);
border-radius: 2px;
overflow: hidden;
}
.pf-proc-top10-strip.is-best .pf-proc-top10-track {
background: rgba(190,52,40,0.06);
border: 1px solid rgba(190,52,40,0.22);
height: 16px;
}
.pf-proc-top10-dot {
position: absolute;
width: 3px;
height: 100%;
top: 0;
border-radius: 1px;
background: var(--vermilion);
transform-origin: center;
animation: pfTopDotIn .35s cubic-bezier(.22,.8,.26,1);
}
@keyframes pfTopDotIn {
from { opacity: 0; transform: scaleY(0.3); }
to { opacity: 1; transform: scaleY(1); }
}
.pf-proc-top10-strip.is-best .pf-proc-top10-dot {
width: 4px;
box-shadow: 0 0 4px -1px rgba(190,52,40,0.5);
}
/* ── 03 · Top-1 vs WT 突变格栅 ── */
.pf-proc-grid {
display: flex; gap: 5px;
overflow-x: auto;
overflow-y: hidden;
padding-bottom: 6px;
scrollbar-width: thin;
}
.pf-proc-grid::-webkit-scrollbar { height: 5px; }
.pf-proc-grid::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 2px; }
.pf-proc-col {
display: flex; flex-direction: column; align-items: center;
gap: 2px;
flex-shrink: 0;
width: 22px;
transition: opacity .3s, width .35s, margin .35s;
}
.pf-proc-col.dimmed { opacity: 0.3; }
.pf-proc-cell-pos {
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
color: var(--ink-faint);
margin-bottom: 1px;
user-select: none;
}
.pf-proc-cell {
display: flex; align-items: center; justify-content: center;
width: 20px; height: 20px;
font-family: 'JetBrains Mono', monospace;
font-size: 13px;
line-height: 1;
border-radius: 3px;
}
.pf-proc-cell-wt {
color: var(--ink-mute);
background: rgba(0,0,0,0.04);
}
.pf-proc-cell-mut {
color: var(--ink-faint);
background: rgba(0,0,0,0.03);
font-weight: 600;
position: relative;
transition: color .3s, background .3s, box-shadow .25s;
}
.pf-proc-cell-mut.cycling {
color: var(--vermilion);
background: rgba(190,52,40,0.06);
}
.pf-proc-cell-mut.settled {
color: #fff;
background: var(--mut-color, var(--vermilion));
animation: pfProcLock .42s ease-out;
}
@keyframes pfProcLock {
0% { box-shadow: 0 0 0 0 rgba(190,52,40,0.55); transform: scale(1.12); }
50% { box-shadow: 0 0 0 5px rgba(190,52,40,0); }
100% { box-shadow: 0 0 0 0 rgba(190,52,40,0); transform: scale(1); }
}
.pf-proc-cell-mut.risk::after {
content: '!';
position: absolute;
top: -4px; right: -4px;
width: 11px; height: 11px;
background: #c93838;
color: #fff;
font-size: 8px;
font-weight: 700;
line-height: 11px;
text-align: center;
border-radius: 50%;
box-shadow: 0 0 0 1.5px var(--paper);
}
.pf-proc-cell-mut.recommend {
box-shadow: 0 0 0 2px var(--vermilion), 0 0 10px -1px rgba(190,52,40,0.45);
}
/* ── 04 · 频率筛选条形图 ── */
.pf-proc-freq-bars {
display: flex; align-items: flex-end; gap: 2px;
height: 88px;
padding-top: 6px;
border-bottom: 1px solid var(--rule-soft);
overflow-x: auto;
}
.pf-proc-freq-bar {
flex: 0 0 auto;
width: 8px;
height: 100%;
display: flex; flex-direction: column; justify-content: flex-end;
align-items: center;
position: relative;
transition: opacity .5s ease;
}
.pf-proc-freq-fill {
width: 100%;
background: var(--ink-mute);
border-radius: 1px 1px 0 0;
transition: height .6s cubic-bezier(.22,.8,.26,1);
}
.pf-proc-freq-bar.is-high .pf-proc-freq-fill { background: var(--vermilion); }
.pf-proc-freq-pos {
font-family: 'JetBrains Mono', monospace;
font-size: 8px;
color: var(--ink-faint);
margin-top: 2px;
transform: rotate(-60deg);
transform-origin: top center;
height: 16px;
line-height: 1;
white-space: nowrap;
}
.pf-proc-freq-bar.is-dimmed { opacity: 0.15; }
.pf-proc-freq-bar.is-dimmed .pf-proc-freq-pos { opacity: 0; }
.pf-proc-freq-bar.is-high { z-index: 1; }
/* 02 节 · A/B 合并为单列 · lib-grid 全宽 · 评分附着到每个 chip */
.pf-proc-libsplit {
display: block;
}
.pf-proc-libsplit-half { min-width: 0; }
.pf-proc-libsplit-half[data-sec="rank"] { display: none; } /* B 半边已并入 A，DOM 保留但不渲染 */
/* ── 05 · 突变库（位点 × targets） ── */
.pf-proc-lib-grid {
display: grid;
/* split 后左列窄，min 改小让 cell 能放 2 列 */
grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
gap: 6px 8px;
}
.pf-proc-lib-pos {
border: 1px solid var(--rule-soft);
border-radius: 4px;
padding: 7px 9px 8px;
background: var(--paper);
opacity: 0;
transform: translateY(6px);
transition: opacity .3s, transform .3s, border-color .3s, background .3s;
}
.pf-proc-lib-pos.is-in { opacity: 1; transform: translateY(0); }
.pf-proc-lib-pos.is-risk {
border-color: rgba(192,48,48,0.4);
background: rgba(192,48,48,0.04);
}
.pf-proc-lib-pos.is-risk::after {
content: '⚠';
position: absolute;
margin-left: -16px;
color: #c93838;
font-size: 10px;
}
.pf-proc-lib-pos-head {
display: inline-flex; align-items: baseline; gap: 2px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--ink-soft);
margin-bottom: 5px;
}
.pf-proc-lib-pos-wt { color: var(--ink-mute); }
.pf-proc-lib-pos-num { color: var(--ink); font-weight: 600; }
.pf-proc-lib-pos-arrow { color: var(--ink-faint); margin-left: 4px; }
.pf-proc-lib-targets { display: flex; gap: 4px 5px; flex-wrap: wrap; }
.pf-proc-lib-target {
position: relative;
display: inline-flex; align-items: center; justify-content: center; gap: 3px;
padding: 0 4px 0 5px;
min-width: 22px; height: 18px;
background: rgba(0,0,0,0.03);
color: var(--ink-faint);
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
font-weight: 600;
border-radius: 3px;
opacity: 0;
transform: scale(0.85);
transition: all .25s cubic-bezier(.22,.8,.26,1);
}
.pf-proc-lib-target.is-on {
opacity: 1;
transform: scale(1);
background: var(--mc, var(--vermilion));
color: #fff;
}
.pf-proc-lib-target-letter { line-height: 1; }
/* 评分数字 · 默认隐藏 · 随 _attachLibScores 才显现 · 9px 小字附在 letter 右侧 */
.pf-proc-lib-target-score {
font-size: 8.5px;
font-weight: 500;
line-height: 1;
opacity: 0.85;
letter-spacing: -0.02em;
display: none;
}
.pf-proc-lib-target.has-score .pf-proc-lib-target-score { display: inline-block; }
/* tier 修饰 · 仅在评分附着后生效 */
.pf-proc-lib-target.is-mid { opacity: 0.85; }
.pf-proc-lib-target.is-low { opacity: 0.55; }
.pf-proc-lib-target.is-low.is-on {
background: rgba(0,0,0,0.05);
color: var(--ink-mute);
}
/* 推荐组合标记 · 右上角小星 */
.pf-proc-lib-target.is-star::after {
content: '★';
position: absolute;
top: -6px; right: -5px;
width: 11px; height: 11px;
display: flex; align-items: center; justify-content: center;
font-size: 8.5px;
color: var(--vermilion);
background: var(--paper);
border: 1px solid rgba(190,52,40,0.35);
border-radius: 50%;
line-height: 1;
z-index: 2;
}
/* ── 06 · 综合评分 pills ── */
.pf-proc-rank-pills {
display: flex; flex-wrap: wrap; gap: 6px;
}
.pf-proc-rank-pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 9px 4px 7px;
background: var(--paper);
border: 1px solid var(--rule);
border-radius: 12px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--ink-soft);
opacity: 0;
transform: translateY(4px);
transition: opacity .3s, transform .3s, border-color .3s, background .3s, opacity .3s;
}
.pf-proc-rank-pill.is-in { opacity: 1; transform: translateY(0); }
.pf-proc-rank-pill-dot { width: 7px; height: 7px; border-radius: 50%; }
.pf-proc-rank-pill-label { font-weight: 600; }
.pf-proc-rank-pill-score { color: var(--ink-mute); }
.pf-proc-rank-pill.is-high {
border-color: var(--vermilion);
background: var(--vermilion-bg);
}
.pf-proc-rank-pill.is-mid { border-color: rgba(0,0,0,0.12); }
.pf-proc-rank-pill.is-low { opacity: 0.55; }
.pf-proc-rank-pill.is-recommend {
border-color: var(--vermilion);
box-shadow: 0 0 0 2px rgba(190,52,40,0.12);
}
.pf-proc-rank-pill.is-risk {
opacity: 0.35;
text-decoration: line-through;
text-decoration-color: rgba(0,0,0,0.4);
}
/* ── 推荐 / 风险 · 单张玻璃卡 · 风格与 pf-preamble 同源 ──
· 外层 .pf-proc-verdict-row = 玻璃卡容器（推荐与不建议合并到一张卡）
· 内层 .pf-proc-verdict-line 不再各自独立卡，只是卡内的行
· 两行之间用品牌蓝虚线分隔（与 pf-preamble-seq 的虚线同一规则）*/
.pf-proc-verdict-row {
display: flex; flex-direction: column;
gap: 0;
padding: 14px 18px 16px;
background: rgba(233, 240, 249, 0.95);
border: 1px solid rgba(22, 97, 171, 0.18);
border-radius: 4px;
backdrop-filter: blur(8px) saturate(1.2);
-webkit-backdrop-filter: blur(8px) saturate(1.2);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.75),
0 2px 10px rgba(22, 97, 171, 0.08);
}
.pf-proc-verdict-line {
display: flex; align-items: center; flex-wrap: wrap;
gap: 6px 10px;
padding: 6px 0;
background: transparent; /* 取消独立 bg */
border: none; /* 取消独立 border */
border-radius: 0;
box-shadow: none;
}
/* 两行之间用品牌蓝虚线分隔 · 与 pf-preamble-seq 同一规则 */
.pf-proc-verdict-line + .pf-proc-verdict-line {
border-top: 1px dashed rgba(22, 97, 171, 0.22);
margin-top: 4px;
padding-top: 10px;
}
/* 推荐 / 不建议的"行级降权"改用文字色实现（玻璃卡内不再需要 row-level opacity） */
.pf-proc-verdict-line.is-risk { opacity: 1; }
.pf-proc-verdict-icon {
font-size: 14px; color: var(--vermilion);
line-height: 1; flex-shrink: 0;
}
.pf-proc-verdict-line.is-risk .pf-proc-verdict-icon {
color: #c93838; font-size: 12px;
}
.pf-proc-verdict-label {
font-family: 'Noto Serif SC', serif;
font-size: 13px; font-weight: 700;
color: var(--vermilion);
letter-spacing: 0.02em;
margin-right: 2px; flex-shrink: 0;
}
.pf-proc-verdict-line.is-risk .pf-proc-verdict-label {
font-size: 12px; font-weight: 500; color: var(--ink-mute);
}
.pf-proc-verdict-chips {
display: flex; gap: 4px; flex-wrap: wrap;
}
.pf-proc-verdict-chip {
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px; font-weight: 600;
padding: 2px 7px; border-radius: 3px;
letter-spacing: 0.04em; line-height: 1.4;
}
.pf-proc-verdict-chip.is-rec { background: var(--vermilion); color: #fff; }
.pf-proc-verdict-chip.is-risk {
background: rgba(192,48,48,0.08);
color: rgba(192,48,48,0.7);
text-decoration: line-through;
text-decoration-color: rgba(192,48,48,0.45);
}
.pf-proc-verdict-meta {
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px; color: var(--ink-mute);
letter-spacing: 0.03em; margin-left: auto;
}
.pf-proc-verdict-line.is-rec .pf-proc-verdict-meta {
color: var(--vermilion); font-weight: 600;
}
@media (max-width: 520px) {
.pf-proc-verdict-meta { margin-left: 0; width: 100%; }
}
.pf-proc-divider {
height: 1px;
margin: 0 28px;
background: linear-gradient(90deg, transparent 0%, var(--rule) 30%, var(--rule) 70%, transparent 100%);
}
/* ---- final response · hover 操作栏 ---- */
.al-actions {
margin-top: 12px;
display: flex;
gap: 2px;
opacity: 0;
transition: opacity .15s ease;
}
.al-final:hover .al-actions,
.al-actions:focus-within,
.al-final.is-latest .al-actions {
opacity: 1;
}
.al-action-btn {
width: 26px; height: 26px;
display: inline-flex; align-items: center; justify-content: center;
border: none;
background: transparent;
color: var(--ink-mute);
border-radius: 4px;
cursor: pointer;
transition: background .12s, color .12s;
padding: 0;
}
.al-action-btn i { font-size: 14px; line-height: 1; }
.al-action-btn:hover {
background: var(--paper-warm);
color: var(--ink);
}
.al-action-btn.active {
color: var(--vermilion);
}
.al-action-btn.active:hover {
color: var(--vermilion);
background: var(--vermilion-bg, rgba(190,52,40,0.08));
}
.al-action-btn[data-act="dislike"].active {
color: var(--ink-soft);
}
.al-action-sep {
width: 1px;
margin: 4px 4px;
background: var(--rule-soft);
}
/* stats 块（数据科学风：metric tiles），用于 KG / 任何结构化指标输出 */
.al-stats { padding: 14px 16px; }
.al-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 16px;
}
.al-stat {
padding-left: 11px;
border-left: 2px solid var(--rule);
}
.al-stat.accent { border-left-color: var(--vermilion); }
.al-stat.success { border-left-color: var(--success); }
.al-stat-label {
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
letter-spacing: 0.14em;
color: var(--ink-mute);
text-transform: uppercase;
margin-bottom: 5px;
}
.al-stat-val {
font-family: 'JetBrains Mono', monospace;
font-size: 18px;
font-weight: 600;
color: var(--ink);
line-height: 1;
letter-spacing: -0.01em;
margin-bottom: 5px;
}
.al-stat-val small {
font-size: 12px;
font-weight: 400;
color: var(--ink-faint);
margin-left: 3px;
}
.al-stat-sub {
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
color: var(--ink-mute);
line-height: 1.55;
}
/* Knowledge-Graph 可视化（SVG + legend + 交互） */
.al-kg-wrap { padding: 4px 0 0; position: relative; }
.al-kg-svg {
width: 100%;
height: auto;
display: block;
background: var(--paper);
cursor: default;
}
/* 节点 hover：放大 + 描边 */
.al-kg-svg circle[data-kind="node"] {
cursor: pointer;
transition: stroke-width .12s ease;
}
.al-kg-svg circle.al-kg-hovered {
stroke: var(--ink);
stroke-width: 1.8;
}
/* gap marker hover */
.al-kg-svg g[data-kind="gap"] { cursor: pointer; }
.al-kg-svg g[data-kind="gap"]:hover circle {
stroke-width: 1.8;
opacity: 1;
}
/* 社区隐藏态（点 legend chip 关掉某个社区） */
.al-kg-svg.hide-c0 [data-ci="0"] { opacity: 0.08 !important; }
.al-kg-svg.hide-c1 [data-ci="1"] { opacity: 0.08 !important; }
.al-kg-svg.hide-c2 [data-ci="2"] { opacity: 0.08 !important; }
.al-kg-svg.hide-c3 [data-ci="3"] { opacity: 0.08 !important; }
.al-kg-svg.hide-c4 [data-ci="4"] { opacity: 0.08 !important; }
/* 悬浮 tooltip */
.al-kg-tooltip {
position: absolute;
z-index: 10;
background: var(--ink);
color: var(--paper);
padding: 7px 11px;
border-radius: 4px;
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
line-height: 1.55;
pointer-events: none;
box-shadow: 0 3px 10px rgba(0,0,0,0.18);
max-width: 280px;
opacity: 0;
transform: translateY(2px);
transition: opacity .12s ease, transform .12s ease;
}
.al-kg-tooltip.on { opacity: 1; transform: translateY(0); }
.al-kg-tooltip strong {
color: #fff;
font-weight: 600;
}
.al-kg-tooltip .t-tag {
display: inline-block;
font-size: 12px;
letter-spacing: 0.1em;
padding: 1px 5px;
border-radius: 8px;
background: rgba(255,255,255,0.14);
color: rgba(255,255,255,0.85);
margin-right: 4px;
}
.al-kg-tooltip .t-tag.gap {
background: rgba(255,150,150,0.22);
color: #ffb3b3;
}
.al-kg-tooltip .t-row {
font-size: 12px;
color: rgba(255,255,255,0.7);
margin-top: 3px;
}
.al-kg-tooltip .t-q {
font-size: 12px;
color: rgba(255,200,200,0.85);
font-style: italic;
margin-top: 5px;
border-top: 1px dashed rgba(255,255,255,0.18);
padding-top: 5px;
}
/* legend chip 可点击切换 */
.al-kg-legend-item[data-ci] {
cursor: pointer;
user-select: none;
transition: opacity .15s ease;
}
.al-kg-legend-item[data-ci]:hover { color: var(--ink); }
.al-kg-legend-item.al-off {
opacity: 0.35;
}
.al-kg-legend-item.al-off .dot {
filter: grayscale(0.7);
}
/* 小工具栏（reset） */
.al-kg-tools {
display: flex;
justify-content: flex-end;
gap: 6px;
padding: 0 4px 8px;
}
.al-kg-tools button {
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
padding: 3px 9px;
border-radius: 3px;
background: var(--paper);
border: 0.5px solid var(--rule);
color: var(--ink-mute);
cursor: pointer;
transition: all .15s ease;
}
.al-kg-tools button:hover {
background: var(--paper-warm);
color: var(--ink);
border-color: var(--ink-mute);
}
.al-kg-legend {
display: flex;
flex-wrap: wrap;
gap: 10px 18px;
padding: 10px 4px 2px;
border-top: 1px solid var(--rule-soft);
margin-top: 6px;
}
.al-kg-legend-item {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
color: var(--ink-soft);
}
.al-kg-legend-item .dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.al-kg-legend-item .dot.gap {
background: transparent;
border: 1px dashed var(--error);
}
.al-kg-legend-item em {
font-style: normal;
color: var(--ink);
font-weight: 600;
margin-left: 2px;
}
.al-kg-legend-item.gap { color: var(--error); }
/* 嵌入式 rich card（seq / mol3d / freq / lib / struct / rank / verdict） */
.al-embed { padding: 12px; background: var(--paper); }
.al-embed > .scene-seq-card,
.al-embed > .scene-mol3d,
.al-embed > .scene-freq,
.al-embed > .scene-lib,
.al-embed > .scene-struct,
.al-embed > .scene-rank,
.al-embed > .scene-verdict {
max-width: 100% !important;
margin: 0 !important;
}
/* mol3d 在 agent-loop 内部时压缩高度 */
.al-embed > .scene-mol3d .scene-mol3d-canvas { height: 280px; }
/* struct hero viewer 在 agent-loop 内部时压缩布局 */
.al-embed > .scene-struct .scene-struct-hero-canvas { height: 260px; }
.al-embed > .scene-struct .scene-struct-hero-stage { min-height: 260px; }
.al-embed > .scene-struct .scene-struct-hero { grid-template-columns: minmax(0, 1fr) 180px; }
/* 最终回复下方：继续追问 chips */
.al-followups {
margin-top: 16px;
padding-top: 14px;
border-top: 1px dashed var(--rule-soft);
animation: alSlideIn .35s ease-out;
}
.al-followups-label {
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
color: var(--ink-mute);
letter-spacing: 0.14em;
text-transform: uppercase;
margin-bottom: 9px;
display: flex; align-items: center; gap: 6px;
}
.al-followups-label i { font-size: 12px; color: var(--vermilion); }
.al-followup-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.al-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 13px;
border: 0.5px solid var(--rule);
border-radius: 16px;
background: var(--paper);
color: var(--ink-soft);
font-size: 13px;
line-height: 1.4;
cursor: pointer;
transition: all .15s;
font-family: 'Inter','Noto Serif SC',sans-serif;
}
.al-chip:hover {
border-color: var(--vermilion);
color: var(--vermilion);
background: var(--vermilion-bg);
transform: translateY(-1px);
}
.al-chip i { font-size: 13px; }
.al-chip.primary {
border-color: var(--ink);
background: var(--ink);
color: var(--paper);
font-weight: 500;
}
.al-chip.primary:hover {
background: var(--vermilion);
border-color: var(--vermilion);
color: var(--paper);
}
/* ══ STEP / IGES 仿真结构嵌入卡（iframe 装入 fishbone-viewer） ══ */
.scene-stp {
border: 1px solid var(--rule);
border-radius: 4px;
background: var(--paper);
overflow: hidden;
display: flex;
flex-direction: column;
}
.scene-stp-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 10px 14px;
background: var(--paper-cool);
border-bottom: 1px solid var(--rule);
}
.scene-stp-head-left {
display: flex; flex-direction: column; gap: 2px;
min-width: 0;
}
.scene-stp-eyebrow {
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
letter-spacing: 0.2em;
color: var(--vermilion);
text-transform: uppercase;
}
.scene-stp-title {
font-family: 'Noto Serif SC', serif;
font-size: 13px;
font-weight: 600;
color: var(--ink);
letter-spacing: 0.02em;
}
.scene-stp-meta {
display: flex;
flex-wrap: wrap;
gap: 4px 10px;
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
color: var(--ink-mute);
align-items: baseline;
justify-content: flex-end;
max-width: 60%;
}
.scene-stp-meta span {
display: inline-flex; align-items: baseline; gap: 4px;
}
.scene-stp-meta em {
font-style: normal;
color: var(--ink-faint);
letter-spacing: 0.1em;
text-transform: uppercase;
font-size: 12px;
}
.scene-stp-frame {
position: relative;
background: #0a0c10; /* viewer 的内部底色 · 避免加载时白屏闪现 */
min-height: 280px;
}
.scene-stp-frame iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
}
.scene-stp-foot {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
padding: 8px 14px;
border-top: 1px solid var(--rule);
background: var(--paper-warm);
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
color: var(--ink-mute);
}
.scene-stp-file {
display: inline-flex; align-items: center; gap: 5px;
color: var(--ink-soft);
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.scene-stp-file i { color: var(--vermilion); }
.scene-stp-action {
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 8px;
color: var(--ink-mute);
border: 1px solid var(--rule);
border-radius: 3px;
text-decoration: none;
transition: color .15s, border-color .15s, background .15s;
}
.scene-stp-action:hover {
color: var(--vermilion);
border-color: var(--vermilion-soft);
background: var(--paper);
}
.scene-stp-action i { font-size: 12px; }
/* 湿实验入口 CTA */
.scene-wetlab {
max-width: 760px; margin: 0 auto 28px;
border: 1px solid var(--ink);
background: var(--paper);
padding: 22px 26px;
position: relative;
animation: sceneFadeIn .6s ease-out;
}
.scene-wetlab::before {
content: ''; position: absolute;
inset: 4px; border: 1px solid var(--rule);
pointer-events: none;
}
.scene-wetlab-head {
position: relative; z-index: 1;
padding-bottom: 12px;
margin-bottom: 14px;
border-bottom: 1px solid var(--rule-soft);
}
.scene-wetlab-eyebrow {
font-family: 'JetBrains Mono', monospace;
font-size: 12px; letter-spacing: 0.22em;
text-transform: uppercase; color: var(--vermilion);
margin-bottom: 5px;
}
.scene-wetlab-title {
font-family: 'Noto Serif SC', serif;
font-size: 16px; font-weight: 500;
color: var(--ink); letter-spacing: 0.08em;
}
.scene-wetlab-body {
position: relative; z-index: 1;
font-size: 13px; color: var(--ink-soft);
line-height: 1.75;
margin-bottom: 16px;
}
.scene-wetlab-body strong {
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
color: var(--vermilion);
}
.scene-wetlab-meta {
display: flex; gap: 18px;
margin-bottom: 16px;
font-family: 'JetBrains Mono', monospace;
font-size: 12px; color: var(--ink-faint);
letter-spacing: 0.1em;
position: relative; z-index: 1;
}
.scene-wetlab-meta strong {
color: var(--ink); font-weight: 500;
}
.scene-wetlab-actions {
display: flex; gap: 12px;
position: relative; z-index: 1;
}
.scene-wetlab-btn {
padding: 9px 18px;
border: 1px solid var(--rule);
background: var(--paper);
color: var(--ink-soft);
font-family: 'Noto Serif SC', serif;
font-size: 13px;
letter-spacing: 0.1em;
cursor: pointer;
transition: all .15s;
}
.scene-wetlab-btn:hover {
border-color: var(--ink-soft);
color: var(--ink);
}
.scene-wetlab-btn.primary {
background: var(--ink);
color: var(--paper);
border-color: var(--ink);
}
.scene-wetlab-btn.primary:hover {
background: var(--vermilion);
border-color: var(--vermilion);
}
/* 共用动画 */
@keyframes sceneFadeIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes scenePulse {
0% { box-shadow: 0 0 0 0 var(--vermilion); }
50% { box-shadow: 0 0 0 5px var(--vermilion-bg); }
100% { box-shadow: 0 0 0 0 transparent; }
}
/* ============================================================
视觉优化覆盖（0518）
1) 重要按钮：默认 ink，hover vermilion（蓝）
2) 仅大标题保留衬线；小标题与正文用无衬线
3) 弱化 header 的「实验入口」
4) 统一输入框 / 卡片等大线框圆角
============================================================ */
/* ── 字体 · 仅大标题保留衬线 ─────────────────── */
.home-title,
.home-title em {
font-family: 'Cormorant Garamond', 'Noto Serif SC', serif !important;
}
/* 0529 · logo 改用 Noto Serif SC（aerospace_tenant_v2 风），不再强制 Cormorant */
.logo-mark,
.logo-mark em,
.nav-drawer-logo-mark,
.nav-drawer-logo-mark em {
font-family: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', serif !important;
}
/* ── 较小衬线声明全部转为无衬线 ──────────────── */
.serif:not(.home-title):not(.logo-mark):not(.nav-drawer-logo-mark),
.cn-serif,
.cp-card-title,
.section-title,
.project-name,
.project-card.new-project .label,
.asset-title,
.panel-collapsed-strip .strip-label,
.chat-mode-badge,
.sa-card-title,
.sa-card-body .kv .v em,
.dc-head .dc-title,
.dc-empty-tip,
.dc-stage-name,
.dc-card-title,
.dc-exp-step-body strong,
.dc-wl-kpi-table td:first-child,
.message-response em,
.ws-title,
.ws-preview-text,
.ws-preview-text h3,
.modal-title,
.demo-stage-eyebrow,
.demo-stage-title,
.demo-stage-title em,
.demo-stage-foot-cap,
.demo-scene-latin,
.demo-scene-h,
.demo-scene-num,
.anth-title,
.anth-title em,
.anth-num,
.anth-latin,
.anth-h,
.anth-foot-cap,
.mode-pill,
.model-option-sub,
.ds-sum-val,
.hub-project-name,
.hub-graph-card-title,
.session-card-title,
.session-new-card .plus-icon,
.session-new-card .new-label,
.graph-card-title,
.graph-new-card .plus,
.graph-new-card .label,
.graph-viewer-title,
.graph-stat-value,
.qs-card-title,
.vp-card-title,
.chat-experiment-card-title,
.gps-graph-title,
.gps-stat-val,
.gdp-empty-icon,
.gdp-title,
#artifactFsTitle,
.meeting-mgmt-title,
.meeting-card-title,
.meeting-card-summary,
.meeting-detail-title,
.fs-meeting-title-input,
.fs-wave-speaker,
.md-insight-body,
.md-rec-headline,
.md-report-title,
.md-report-section-title,
.md-report-stat-val,
.strip-num,
.strip-current,
.scene-mol3d-title,
.scene-think-label,
.scene-say em,
.scene-banner-mark,
.scene-banner-text,
.scene-act-roman,
.scene-act-cn,
.scene-plan-num,
.scene-plan-title,
.scene-seq-rank,
.scene-seq-name,
.scene-freq-stats strong,
.scene-freq-title,
.scene-lib-title,
.scene-struct-title,
.scene-stp-title,
.scene-wetlab-title,
.scene-wetlab-desc,
.al-toolbar-title,
.al-final-summary h4,
.psd-title,
.psd-flow-title,
.psd-card-title,
.pf-sum-title,
.pf-target-title,
.pf-hero-name,
.pf-side-name,
.pf-stepm-name,
.pf-step-name,
.pf-toc-label {
font-family: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont,
"Segoe UI", "PingFang SC", "Hiragino Sans GB",
"Microsoft YaHei", sans-serif !important;
letter-spacing: 0.01em;
}
/* 让小衬线里的 italic em 也回归正常字形 */
.demo-stage-title em,
.anth-title em,
.scene-say em,
.message-response em,
.sa-card-body .kv .v em {
font-style: normal !important;
}
/* ── 重要按钮：默认 ink，hover vermilion ─────── */
.btn.btn-primary,
.send-btn,
#composerSendBtn,
.nav-drawer-cta.primary {
background: var(--ink) !important;
color: var(--paper) !important;
border: 1px solid var(--ink) !important;
border-radius: 4px !important;
transition: background .18s ease, border-color .18s ease,
color .18s ease, box-shadow .18s ease !important;
}
.btn.btn-primary:hover,
.send-btn:hover,
#composerSendBtn:hover,
.nav-drawer-cta.primary:hover {
background: #0d4683 !important; /* 比主色 #2f7fd8 深一阶 */
border-color: #0d4683 !important;
color: #fff !important;
}
.send-btn:disabled,
.send-btn[disabled],
#composerSendBtn:disabled,
#composerSendBtn[disabled] {
background: var(--rule) !important;
color: var(--ink-faint) !important;
border-color: var(--rule) !important;
}
/* ── 弱化 Header「实验入口」───────────────── */
.topbar-right > a.btn.btn-primary {
background: transparent !important;
color: var(--ink-mute) !important;
border: 1px solid var(--rule) !important;
font-weight: 400 !important;
font-size: 12px !important;
padding: 6px 12px !important;
border-radius: 4px !important;
box-shadow: none !important;
letter-spacing: 0.02em;
}
.topbar-right > a.btn.btn-primary:hover {
background: var(--paper-warm) !important;
color: var(--ink-soft) !important;
border-color: var(--rule-soft) !important;
}
.topbar-right > a.btn.btn-primary svg {
opacity: 0.65;
width: 13px;
height: 13px;
}
/* ── 统一输入框 / 卡片等大线框圆角（10px）──── */
.composer,
.composer-input,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="url"],
input[type="tel"],
textarea,
select,
.card,
.panel,
.modal,
.modal-card,
.ws-card,
.sb-card,
.cp-card,
.sa-card,
.dc-card,
.qs-card,
.vp-card,
.chat-experiment-card,
.session-card,
.graph-card,
.psd-card,
.demo-scene,
.scene-wetlab,
.scene-mol3d,
.scene-lib,
.scene-struct,
.scene-stp,
.scene-freq,
.scene-seq,
.exec-panel,
.nav-drawer,
.anth-piece,
.meeting-card,
.dc-exp-step,
.session-new-card,
.graph-new-card,
.project-card,
.hub-project-card,
.hub-graph-card,
.pf-target,
.pf-sum,
.pf-hero,
.pf-side,
.pf-stepm,
.pf-step {
border-radius: 8px !important;
}
.composer { border-radius: 8px !important; }
/* ===== 场景模式 tabs（输入框上方 · 胶囊分段控件）===== */
.composer-tabs-row {
max-width: 880px;
margin: 0 auto 12px;
text-align: center;
}
.composer-tabs {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 4px;
background: var(--paper-warm);
border: 1px solid var(--rule);
border-radius: 999px;
max-width: 100%;
}
.composer-tab {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 16px;
border-radius: 999px;
font-size: 13px;
font-weight: 500;
color: var(--ink-mute);
background: transparent;
border: none;
cursor: pointer;
white-space: nowrap;
user-select: none;
transition: background .15s, color .15s;
}
.composer-tab:hover { color: var(--ink-soft); }
.composer-tab.active {
background: var(--ink);
color: var(--paper);
}
.composer-tab svg { width: 14px; height: 14px; flex-shrink: 0; }
/* 大按钮 / Primary 容器 圆角统一 4px（保留小标签徽章原值） */
.btn,
.btn.btn-primary,
.btn.btn-ghost,
.send-btn,
#composerSendBtn,
.nav-drawer-cta,
.toolbar-icon-btn,
.quickcmd-btn,
.attached-files .attached-nav,
button.btn,
a.btn {
border-radius: 4px !important;
}
/* 圆形头像保留圆形 */
.user-avatar { border-radius: 50% !important; }
/* ── 对话页输入框微调 ────────────────────── */
/* 1) 占位符与「发送」文字水平对齐：
改用 align-items:center 让 textarea 与按钮以视觉中线对齐，
同时显式 line-height 20 + 上下 padding 8，使单行 36px 精准居中 */
.chat-input-main-row {
align-items: center !important;
}
.chat-input-textarea {
padding-top: 8px !important;
padding-bottom: 8px !important;
line-height: 20px !important;
}
/* 2) 激活状态：与首页 composer 一致的深蓝描边 + 蓝色外发光 */
.chat-input-inner:focus-within {
border-color: var(--vermilion) !important;
box-shadow: 0 2px 12px rgba(26,79,140,0.12),
0 0 0 3px rgba(26,79,140,0.08) !important;
}
/* 3) 默认未输入内容时，发送按钮置灰禁用 */
.chat-input-textarea:placeholder-shown
+ .chat-input-send-wrap .send-btn,
.chat-input-textarea:placeholder-shown
~ .chat-input-send-wrap .send-btn {
background: var(--rule) !important;
color: var(--ink-faint) !important;
border-color: var(--rule) !important;
cursor: not-allowed !important;
opacity: 0.7 !important;
pointer-events: none;
}
/* ── 附件 chip 横向单行 + 箭头滚动 ──────────── */
.attached-files {
flex-wrap: nowrap !important;
align-items: center !important;
gap: 4px !important;
}
.attached-files .attached-strip {
flex: 1;
min-width: 0;
display: flex;
flex-wrap: nowrap;
gap: 5px;
overflow-x: auto;
scroll-behavior: smooth;
scrollbar-width: none; /* Firefox */
}
.attached-files .attached-strip::-webkit-scrollbar { display: none; }
.attached-files .attached-chip {
flex-shrink: 0;
white-space: nowrap;
max-width: 220px;
}
.attached-files .attached-chip > span:not(.attached-chip-remove) {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.attached-files .attached-nav {
flex-shrink: 0;
width: 20px;
height: 22px;
border: 1px solid var(--rule);
background: var(--paper);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
color: var(--ink-mute);
cursor: pointer;
padding: 0;
transition: opacity .15s, color .15s, border-color .15s, background .15s;
}
.attached-files .attached-nav:hover {
color: var(--ink);
border-color: var(--ink-soft);
background: var(--paper-warm);
}
.attached-files .attached-nav[data-disabled="true"] {
opacity: 0.3;
pointer-events: none;
}
.attached-files .attached-nav[data-hidden="true"] {
display: none;
}
/* ── 首页卡片 · 标题衬线 + 前置 icon / tag 无衬线 ── */
.demo-scene-h {
display: flex !important;
align-items: center;
gap: 8px;
font-family: 'Noto Serif SC', 'Songti SC', serif !important;
letter-spacing: 0.06em !important;
}
.demo-scene-icon {
width: 18px;
height: 18px;
flex-shrink: 0;
color: var(--vermilion);
stroke: currentColor;
fill: none;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.demo-scene-tags li {
font-family: 'Inter', 'Noto Sans SC', -apple-system,
"Segoe UI", "PingFang SC", "Microsoft YaHei",
sans-serif !important;
}
/* ── 输入框占位符 + 发送按钮 强制无衬线 ─────── */
.composer-input,
.chat-input-textarea,
#composerSendBtn,
.send-btn {
font-family: 'Inter', 'Noto Sans SC', -apple-system,
BlinkMacSystemFont, "Segoe UI", "PingFang SC",
"Hiragino Sans GB", "Microsoft YaHei",
sans-serif !important;
}
.composer-input::placeholder,
.chat-input-textarea::placeholder {
font-family: 'Inter', 'Noto Sans SC', -apple-system,
BlinkMacSystemFont, "Segoe UI", "PingFang SC",
"Hiragino Sans GB", "Microsoft YaHei",
sans-serif !important;
font-style: normal !important;
}
/* 对话页输入框外框圆角与首页 composer / 卡片统一 */
.chat-input-inner {
border-radius: 8px !important;
}
/* 卡片描述文字 · 与输入框占位符使用同一无衬线字体栈 */
.demo-scene-desc {
font-family: 'Inter', 'Noto Sans SC', -apple-system,
BlinkMacSystemFont, "Segoe UI", "PingFang SC",
"Hiragino Sans GB", "Microsoft YaHei",
sans-serif !important;
}
/* 对话气泡 · 用户输入与模型回复正文统一无衬线 */
.message-user-bubble,
.message-quick-bubble,
.message-quick-bubble em,
.message-quick-bubble strong,
.message-response,
.message-response p,
.message-response li,
.message-response strong,
.message-response em,
.message-response .callout {
font-family: 'Inter', 'Noto Sans SC', -apple-system,
BlinkMacSystemFont, "Segoe UI", "PingFang SC",
"Hiragino Sans GB", "Microsoft YaHei",
sans-serif !important;
font-style: normal !important;
}
/* 等宽字体仍保留：行内 code / 序列等 */
.message-quick-bubble code,
.message-response code {
font-family: 'JetBrains Mono', ui-monospace, monospace !important;
}
/* 进一步：覆盖更多模型回复 / 场景叙事容器，强制无衬线 */
.scene-say,
.scene-say em,
.scene-say strong,
.scene-banner-text,
.al-final,
.al-final p,
.al-final li,
.al-final em,
.al-final strong,
.al-final-text,
.al-final-text p,
.al-final-text li,
.al-final-text em,
.al-final-text strong,
.al-body-sec,
.al-body-sec p,
.al-body-sec li,
.al-body-sec em,
.al-body-sec strong {
font-family: 'Inter', 'Noto Sans SC', -apple-system,
BlinkMacSystemFont, "Segoe UI", "PingFang SC",
"Hiragino Sans GB", "Microsoft YaHei",
sans-serif !important;
font-style: normal !important;
}
/* 行内 code 仍保留等宽 */
.scene-say code,
.al-final code,
.al-final-text code,
.al-body-sec code {
font-family: 'JetBrains Mono', ui-monospace, monospace !important;
}
/* ── 模型回复 summary 入口 · 改为圆形图标按钮，并由 JS 动态垂直跟随对应回复 ── */
.pf-sum-anchor {
width: 32px !important;
height: 32px !important;
padding: 0 !important;
border-radius: 50% !important;
justify-content: center !important;
gap: 0 !important;
background: var(--paper) !important;
border: 1px solid var(--rule) !important;
box-shadow: 0 2px 6px -1px rgba(0,0,0,0.06) !important;
right: 8px !important; /* 紧贴 chat-panel 右缘 8px */
}
/* chat 内容区右内边距加宽到 80px，让所有模型回复元素（气泡 / chips / callout 等）
的右边界统一在距 chat-panel 右缘 80px 处；icon 左缘距右缘 40px → 精确 40px 间距 */
.chat-messages {
padding-right: 80px !important;
}
.pf-sum-anchor:hover {
border-color: var(--vermilion) !important;
color: var(--vermilion) !important;
transform: translateY(-1px);
}
.pf-toc-bullet,
.pf-toc-label,
.pf-toc-go { display: none !important; }
.pf-toc-icon {
width: 16px;
height: 16px;
color: var(--ink-mute);
transition: color .15s;
}
.pf-sum-anchor:hover .pf-toc-icon { color: var(--vermilion); }
/* ── 步骤锚点连接线：实线 → 点状虚线（点 ×2、间距 ×2） ── */
.al-spine-line {
width: 2px !important;
background: none !important;
background-color: transparent !important;
background-image: linear-gradient(to bottom,
var(--rule-soft) 0,
var(--rule-soft) 2px,
transparent 2px,
transparent 5px) !important;
background-size: 2px 5px !important;
background-repeat: repeat-y !important;
border-left: none !important;
}
/* ── 首页「深度研究」卡片隐藏，剩余 4 张卡片改为 1 行 4 列布局 ── */
.demo-scene[data-theme="deep"] { display: none !important; }
.demo-stage-grid { grid-template-columns: repeat(4, 1fr) !important; }
@media (max-width: 880px) {
.demo-stage-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
.demo-stage-grid { grid-template-columns: 1fr !important; }
}
/* Header「实验入口」按钮文字 · 非衬线 */
.topbar-right > a.btn.btn-primary {
font-family: 'Inter', 'Noto Sans SC', -apple-system,
BlinkMacSystemFont, "Segoe UI", "PingFang SC",
"Hiragino Sans GB", "Microsoft YaHei",
sans-serif !important;
}
/* ──「继续探索」首项 chip 弱化：蓝色线框 + 蓝字，与其他选项一致的轮廓形式 ── */
.al-chip.primary {
background: var(--paper) !important;
border: 1px solid var(--vermilion) !important;
color: var(--vermilion) !important;
font-weight: 500 !important;
}
.al-chip.primary:hover {
background: var(--vermilion-bg) !important;
border-color: var(--vermilion) !important;
color: var(--vermilion) !important;
}
/* ── 右侧面板底部「下一步」首项弱化（与 .al-chip.primary 保持一致语言） ── */
.psd-cta.primary,
.pf-sum-cta-btn.primary {
background: var(--paper) !important;
border: 1px solid var(--vermilion) !important;
color: var(--vermilion) !important;
}
.psd-cta.primary:hover,
.pf-sum-cta-btn.primary:hover {
background: var(--vermilion-bg) !important;
border-color: var(--vermilion) !important;
color: var(--vermilion) !important;
}
/* =====================================================
↓ 全局左侧导航（复用 home.html 侧栏视觉，1:1 同款）
仅保留：新建对话 / 科学工具
===================================================== */
/* 局部 token：sidebar / avatar-popup（默认 sky） */
.sidebar,
.avatar-popup {
--bg-soft: #dbe7f5;
--paper: #ffffff;
--ink: #0d2540;
--ink-soft: #38547a;
--muted: #6b7d9a;
--muted-2: #a0b0c8;
--line: #b8ccdf;
--line-soft: #d0dee9;
--accent: #2f7fd8;
--accent-soft: #6ea9e8;
--notification: #c93838;
--sans: "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
--serif: "Noto Serif SC", "Songti SC", "Source Han Serif SC", serif;
--display: "Cormorant Garamond", "Noto Serif SC", serif;
--mono: "JetBrains Mono", "SF Mono", Menlo, monospace;
}
:root[data-theme="origin"] .sidebar,
:root[data-theme="origin"] .avatar-popup {
--bg-soft: #f0ebdb; --paper: #faf7ee; --ink: #1a2438; --ink-soft: #3a4663;
--muted: #8a8676; --muted-2: #b8b3a1;
--line: #e4dec9; --line-soft: #ece6d3;
--accent: #2c4a7a; --accent-soft: #5a7fb5; --notification: #d8513e;
}
:root[data-theme="dark"] .sidebar,
:root[data-theme="dark"] .avatar-popup {
--bg-soft: #10161f; --paper: #141a24; --ink: #e8ecf3; --ink-soft: #b8c0ce;
--muted: #a0abbc; --muted-2: #7d8593;
--line: #2a3341; --line-soft: #1e2632;
--accent: #5aa9e6; --accent-soft: #7ebae8; --notification: #e64848;
}
:root[data-theme="dark2"] .sidebar,
:root[data-theme="dark2"] .avatar-popup {
--bg-soft: #0f1a3c; --paper: #142347; --ink: #f4f7ff; --ink-soft: #c8d3ec;
--muted: #94a3c6; --muted-2: #6a7ea3;
--line: #2a4380; --line-soft: #1c3266;
--accent: #5aa9ff; --accent-soft: #7bbfff; --notification: #ff6968;
}
/* 让全局内容向右让位 232px 给侧栏 */
body { padding-left: 232px; transition: padding-left .25s cubic-bezier(.2,.7,.3,1); }
body.sidebar-collapsed { padding-left: 68px; }
/* 侧栏外壳 */
.sidebar{
position: fixed;
left: 0;
top: 0;
width: 232px;
height: 100vh;
background: var(--bg-soft);
border-right: 1px solid var(--line);
box-shadow: 2px 0 8px -3px rgba(15, 42, 90, 0.08);
display: flex;
flex-direction: column;
padding: 18px 14px 14px;
overflow: hidden;
font-family: var(--sans);
color: var(--ink);
font-size: 14px;
z-index: 60;
transition: width .25s cubic-bezier(.2,.7,.3,1), padding .25s cubic-bezier(.2,.7,.3,1);
}
body.sidebar-collapsed .sidebar{ width: 68px; padding: 18px 10px 14px; }
/* 品牌区 */
.sidebar .brand{
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 6px 18px;
}
body.sidebar-collapsed .sidebar .brand{
flex-direction: column;
align-items: center;
gap: 12px;
padding: 4px 0 16px;
}
.sidebar .brand-left{
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
border: 0;
background: transparent;
padding: 0;
cursor: pointer;
text-align: left;
}
.sidebar .brand-left:focus-visible{
outline: 1px solid var(--accent-soft);
outline-offset: 4px;
border-radius: 6px;
}
.sidebar .mascot{
width: 44px;
height: 44px;
flex-shrink: 0;
background: url('../src/logo.png') center / contain no-repeat;
position: relative;
}
/* 旧十字 pseudo 图案 · 用 Logo 图后不再显示 */
.sidebar .mascot::before,
.sidebar .mascot::after{
content: none;
}
.sidebar .brand-name{
font-family: var(--serif);
font-weight: 700;
font-size: 18px;
letter-spacing: 0.3px;
color: var(--ink);
white-space: nowrap;
}
.sidebar .brand-name em{
color: var(--accent);
font-style: normal;
}
body.sidebar-collapsed .sidebar .brand-name{ display: none; }
.sidebar .sidebar-collapse{
width: 28px; height: 28px;
border-radius: 6px;
display: grid;
place-items: center;
color: var(--muted);
cursor: pointer;
transition: background .2s, color .2s;
background: transparent;
border: none;
}
.sidebar .sidebar-collapse:hover{ background: rgba(0,0,0,.05); color: var(--ink); }
.sidebar .sidebar-collapse svg{ width: 18px; height: 18px; }
.sidebar .sidebar-collapse .ico-expand{ display: none; }
body.sidebar-collapsed .sidebar .sidebar-collapse .ico-collapse{ display: none; }
body.sidebar-collapsed .sidebar .sidebar-collapse .ico-expand{ display: block; }
/* 导航 */
.sidebar .nav{
display: flex;
flex-direction: column;
gap: 2px;
}
.sidebar .nav-item{
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
border-radius: 8px;
color: var(--ink-soft);
cursor: pointer;
font-size: 13.5px;
transition: background .15s, color .15s;
user-select: none;
}
.sidebar .nav-item:hover{ background: rgba(0,0,0,.035); color: var(--ink); }
.sidebar .nav-item.active{
background: #fff;
color: var(--accent);
box-shadow: 0 1px 2px rgba(44,74,122,.04), 0 0 0 1px rgba(44,74,122,.08);
font-weight: 500;
}
.sidebar .nav-item svg{ width: 16px; height: 16px; flex-shrink: 0; }
.sidebar .nav-item span{ white-space: nowrap; overflow: hidden; }
body.sidebar-collapsed .sidebar .nav-item{ justify-content: center; padding: 9px 0; }
body.sidebar-collapsed .sidebar .nav-item span{ display: none; }
.sidebar .nav-divider{
height: 1px;
background: var(--line-soft);
margin: 10px 10px;
opacity: .8;
}
body.sidebar-collapsed .sidebar .nav-divider{ margin: 10px 6px; }
.sidebar .nav-section-title{
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px 6px;
color: var(--muted);
font-size: 13px;
}
.sidebar .nav-section-title svg{ width: 16px; height: 16px; flex-shrink: 0; }
.sidebar .nav-section-title span{ white-space: nowrap; overflow: hidden; }
body.sidebar-collapsed .sidebar .nav-section-title{ justify-content: center; padding: 8px 0 4px; }
body.sidebar-collapsed .sidebar .nav-section-title span{ display: none; }
.sidebar .history{
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 1px;
margin-bottom: 10px;
scrollbar-width: thin;
scrollbar-color: var(--line) transparent;
}
.sidebar .history::-webkit-scrollbar{ width: 4px; }
.sidebar .history::-webkit-scrollbar-thumb{ background: var(--line); border-radius: 4px; }
.sidebar .history-item{
padding: 7px 12px;
color: var(--ink-soft);
font-size: 12.5px;
border-radius: 6px;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: background .15s;
}
.sidebar .history-item:hover{ background: rgba(0,0,0,.035); }
.sidebar .history-more{
padding: 8px 12px;
color: var(--ink);
font-size: 12.5px;
font-weight: 500;
cursor: pointer;
border-radius: 6px;
}
.sidebar .history-more:hover{ background: rgba(0,0,0,.035); }
body.sidebar-collapsed .sidebar .history-item,
body.sidebar-collapsed .sidebar .history-more{ display: none; }
.sidebar .sidebar-footer{
border-top: 1px solid var(--line);
padding-top: 12px;
display: flex;
align-items: center;
gap: 8px;
}
body.sidebar-collapsed .sidebar .sidebar-footer{
flex-direction: column;
align-items: center;
gap: 8px;
padding-top: 12px;
}
.sidebar .footer-spacer{ flex: 1; }
body.sidebar-collapsed .sidebar .footer-spacer{ display: none; }
.sidebar .avatar{
width: 32px; height: 32px;
border-radius: 50%;
background: #1a2438;
color: #f5f1e6;
display: grid;
place-items: center;
font-weight: 500;
font-size: 13px;
font-family: var(--display);
cursor: pointer;
}
.sidebar .avatar-wrap{
position: relative;
display: flex;
align-items: center;
}
body.sidebar-collapsed .sidebar .avatar-wrap{ order: 99; margin-top: 4px; }
/* 头像 hover 浮层 */
.avatar-popup{
position: fixed;
width: 268px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 14px;
box-shadow:
0 30px 60px -20px rgba(15,30,60,.18),
0 12px 24px -16px rgba(0,0,0,.10);
padding: 22px 0 8px;
opacity: 0;
visibility: hidden;
transform: translateX(-6px);
transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
z-index: 9999;
pointer-events: none;
color: var(--ink);
font-family: var(--sans);
}
.avatar-popup.is-visible{
opacity: 1;
visibility: visible;
transform: translateX(0);
pointer-events: auto;
}
.avatar-popup::before{
content: '';
position: absolute;
left: -6px;
width: 12px; height: 12px;
background: var(--paper);
border-left: 1px solid var(--line);
border-bottom: 1px solid var(--line);
transform: rotate(45deg);
}
.avatar-popup[data-dir="up"]::before{ bottom: 18px; top: auto; }
.avatar-popup[data-dir="down"]::before{ top: 18px; bottom: auto; }
.avatar-popup-head{
display: flex;
flex-direction: column;
align-items: center;
padding: 6px 20px 18px;
}
.avatar-popup-avatar{
width: 60px; height: 60px;
border-radius: 50%;
background: #1a2438;
color: #f5f1e6;
display: grid;
place-items: center;
font-family: var(--display);
font-weight: 700;
font-size: 22px;
margin-bottom: 12px;
box-shadow: 0 4px 12px -4px rgba(0,0,0,.25);
}
.avatar-popup-name{
font-family: var(--sans);
font-size: 15px;
font-weight: 600;
color: var(--ink);
letter-spacing: 0.01em;
}
.avatar-popup-menu{ border-top: 1px solid var(--line); }
.avatar-popup-item{
display: flex;
align-items: center;
gap: 14px;
padding: 13px 22px;
color: var(--ink-soft);
text-decoration: none;
font-family: var(--sans);
font-size: 13.5px;
border-bottom: 1px solid var(--line);
transition: background .15s, color .15s;
cursor: pointer;
}
.avatar-popup-item:last-child{ border-bottom: none; }
.avatar-popup-item:hover{
background: var(--bg-soft);
color: var(--ink);
}
.avatar-popup-item .api-icon{
width: 17px; height: 17px;
color: var(--muted);
flex-shrink: 0;
transition: color .15s;
}
.avatar-popup-item:hover .api-icon{ color: var(--ink-soft); }
.avatar-popup-item .api-label{ flex: 1; }
.avatar-popup-item .api-chev{
width: 14px; height: 14px;
color: var(--muted-2);
flex-shrink: 0;
}
.avatar-popup-item.is-group-end{
border-bottom: 1px solid var(--line);
box-shadow: 0 4px 0 var(--bg-soft);
}
.avatar-popup-item.is-logout{ color: var(--ink-soft); }
.avatar-popup-item.is-logout:hover{ color: #c66648; }
.avatar-popup-item.is-logout:hover .api-icon{ color: #c66648; }
.sidebar .footer-icon{
width: 28px; height: 28px;
border-radius: 6px;
display: grid;
place-items: center;
color: var(--muted);
cursor: pointer;
position: relative;
transition: background .15s, color .15s;
background: transparent;
border: none;
}
.sidebar .footer-icon:hover{ background: rgba(0,0,0,.04); color: var(--ink); }
.sidebar .footer-icon svg{ width: 16px; height: 16px; }
.sidebar .footer-icon-lang{
background: transparent;
border: none;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
user-select: none;
transition: background .15s, color .15s, transform .25s;
}
.sidebar .footer-icon-lang .lang-cn{
font-family: var(--serif);
font-size: 14px;
font-weight: 700;
}
.sidebar .footer-icon-lang .lang-en{
font-family: var(--mono);
font-size: 9.5px;
font-weight: 700;
margin-left: -1px;
position: relative;
top: -3px;
}
.sidebar .footer-icon-lang[data-lang="en"] .lang-cn{
font-size: 9.5px;
font-family: var(--mono);
font-weight: 700;
order: 2;
margin-left: -1px;
position: relative;
top: -3px;
}
.sidebar .footer-icon-lang[data-lang="en"] .lang-en{
font-family: var(--serif);
font-size: 14px;
order: 1;
margin-left: 0;
top: 0;
}
.sidebar .footer-icon-lang:active{ transform: scale(0.92); }
.sidebar .badge{
position: absolute;
top: -2px; right: -2px;
min-width: 14px; height: 14px;
border-radius: 50%;
background: var(--notification);
color: #fff;
font-size: 9px;
font-weight: 600;
display: grid;
place-items: center;
padding: 0 3px;
border: 1.5px solid var(--bg-soft);
}
@media (max-width: 860px){
body{ padding-left: 64px; }
.sidebar{ width: 64px; padding: 18px 8px 14px; }
.sidebar .brand-name,
.sidebar .nav-item span,
.sidebar .history,
.sidebar .nav-section-title span,
.sidebar .sidebar-collapse{ display: none; }
.sidebar .nav-item{ justify-content: center; padding: 9px; }
}
/* =====================================================
↓ 工具库 (#pageTools) + 技能库 (#pageSkills)
视觉与 home.html 科学工具 1:1（MCP 卡 / Skill 卡 / 双轴筛选 / Sort）
局部 token 与 home.html 完全一致，避免污染全局
===================================================== */
#pageTools, #pageSkills{
--bg-soft: #eaf1fa;
--paper: #ffffff;
--ink: #0d2540;
--ink-soft: #38547a;
--muted: #6b7d9a;
--muted-2: #a0b0c8;
--line: #d0dee9;
--line-soft: #e5eef7;
--accent: #2f7fd8;
--accent-soft: #6ea9e8;
--sans: "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
--serif: "Noto Serif SC", "Songti SC", "Source Han Serif SC", serif;
--display: "Cormorant Garamond", "Noto Serif SC", serif;
--mono: "JetBrains Mono", "SF Mono", Menlo, monospace;
}
:root[data-theme="origin"] #pageTools, :root[data-theme="origin"] #pageSkills {
--bg-soft: #f0ebdb; --paper: #faf7ee; --ink: #1a2438; --ink-soft: #3a4663;
--muted: #8a8676; --muted-2: #b8b3a1;
--line: #e4dec9; --line-soft: #ece6d3;
--accent: #2c4a7a; --accent-soft: #5a7fb5;
}
:root[data-theme="dark"] #pageTools, :root[data-theme="dark"] #pageSkills {
--bg-soft: #10161f; --paper: #141a24; --ink: #e8ecf3; --ink-soft: #b8c0ce;
--muted: #a0abbc; --muted-2: #7d8593;
--line: #2a3341; --line-soft: #1e2632;
--accent: #5aa9e6; --accent-soft: #7ebae8;
}
:root[data-theme="dark2"] #pageTools, :root[data-theme="dark2"] #pageSkills {
--bg-soft: #0f1a3c; --paper: #142347; --ink: #f4f7ff; --ink-soft: #c8d3ec;
--muted: #94a3c6; --muted-2: #6a7ea3;
--line: #2a4380; --line-soft: #1c3266;
--accent: #5aa9ff; --accent-soft: #7bbfff;
}
#pageTools.page.active,
#pageSkills.page.active{
display: block;
background: var(--page-bg);
min-height: calc(100vh - 56px);
padding: 40px 56px 56px;
font-family: var(--sans);
color: var(--ink);
}
@media (max-width: 720px){
#pageTools.page.active,
#pageSkills.page.active{ padding: 24px 18px 40px; }
}
#pageTools .apps-view,
#pageSkills .apps-view{
width: 100%;
max-width: 1280px;
margin: 0 auto;
}
/* Header */
#pageTools .apps-header,
#pageSkills .apps-header{
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 28px;
gap: 24px;
flex-wrap: wrap;
}
#pageTools .apps-eyebrow,
#pageSkills .apps-eyebrow{
font-family: var(--display);
font-size: 12px;
letter-spacing: 0.32em;
color: var(--accent);
text-transform: uppercase;
margin-bottom: 8px;
}
#pageTools .apps-title,
#pageSkills .apps-title{
font-family: var(--serif);
font-weight: 700;
font-size: 30px;
color: var(--ink);
letter-spacing: 0.02em;
margin: 0;
}
#pageTools .apps-title em,
#pageSkills .apps-title em{
color: var(--accent);
font-style: italic;
font-weight: 500;
}
#pageTools .apps-head-meta,
#pageSkills .apps-head-meta{
font-size: 13px;
color: var(--muted);
margin-top: 6px;
letter-spacing: 0.02em;
}
#pageTools .apps-search,
#pageSkills .apps-search{
display: flex;
align-items: center;
gap: 8px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 999px;
padding: 9px 16px;
width: 300px;
max-width: 100%;
color: var(--muted);
transition: border-color .2s, box-shadow .2s;
}
#pageTools .apps-search:focus-within,
#pageSkills .apps-search:focus-within{
border-color: var(--accent-soft);
box-shadow: 0 0 0 4px rgba(60,106,168,.06);
}
#pageTools .apps-search svg,
#pageSkills .apps-search svg{ width: 14px; height: 14px; flex-shrink: 0; }
#pageTools .apps-search input,
#pageSkills .apps-search input{
flex: 1; min-width: 0;
border: none; outline: none; background: transparent;
font-family: var(--sans); font-size: 13px; color: var(--ink);
}
#pageTools .apps-search input::placeholder,
#pageSkills .apps-search input::placeholder{ color: var(--muted-2); }
/* 双轴筛选 */
#pageTools .apps-tags,
#pageSkills .apps-tags{ margin-bottom: 28px; }
#pageTools .tag-row,
#pageSkills .tag-row{
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
#pageTools .tag-row.secondary,
#pageSkills .tag-row.secondary{ margin-top: 12px; }
#pageTools .tag-row-label,
#pageSkills .tag-row-label{
font-size: 13px;
color: var(--muted);
letter-spacing: 0.04em;
margin-right: 12px;
font-family: var(--sans);
font-weight: 500;
flex-shrink: 0;
}
#pageTools .tag-chip,
#pageSkills .tag-chip{
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px 7px 11px;
border-radius: 999px;
font-size: 13px;
color: var(--ink-soft);
background: var(--paper);
border: 1px solid var(--line);
cursor: pointer;
transition: all .18s ease;
user-select: none;
font-family: var(--sans);
}
#pageTools .tag-chip svg,
#pageSkills .tag-chip svg{ width: 13px; height: 13px; opacity: .68; transition: opacity .18s; }
#pageTools .tag-chip:hover,
#pageSkills .tag-chip:hover{ background: var(--bg-soft); border-color: var(--muted-2); color: var(--ink); }
#pageTools .tag-chip.active,
#pageSkills .tag-chip.active{
color: #fff;
background: var(--vermilion);
border-color: var(--vermilion);
}
#pageTools .tag-chip.active svg,
#pageSkills .tag-chip.active svg{ opacity: 1; }
#pageTools .tag-chip-sec,
#pageSkills .tag-chip-sec{
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px 6px 10px;
border-radius: 6px;
font-size: 12.5px;
color: var(--muted);
background: transparent;
border: 1px solid transparent;
cursor: pointer;
transition: all .15s;
user-select: none;
font-family: var(--sans);
}
#pageTools .tag-chip-sec svg,
#pageSkills .tag-chip-sec svg{ width: 12px; height: 12px; opacity: .65; transition: opacity .15s; }
#pageTools .tag-chip-sec:hover,
#pageSkills .tag-chip-sec:hover{ color: var(--ink); background: var(--bg-soft); }
#pageTools .tag-chip-sec.active,
#pageSkills .tag-chip-sec.active{
color: var(--ink);
background: var(--bg-soft);
font-weight: 500;
}
/* Sort bar */
#pageTools .tools-toolbar,
#pageSkills .tools-toolbar{
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 22px;
padding-bottom: 14px;
border-bottom: 1px solid var(--line);
}
#pageTools .tools-toolbar-left,
#pageSkills .tools-toolbar-left{
display: inline-flex;
align-items: center;
gap: 16px;
font-family: var(--sans);
}
#pageTools .toolbar-count,
#pageSkills .toolbar-count{
font-family: var(--mono);
font-size: 12px;
color: var(--muted);
letter-spacing: 0.04em;
}
#pageTools .toolbar-count strong,
#pageSkills .toolbar-count strong{
font-family: var(--display);
font-style: italic;
color: var(--ink);
font-size: 15px;
font-weight: 700;
margin: 0 3px;
}
#pageTools .tools-sort,
#pageSkills .tools-sort{
display: inline-flex;
align-items: center;
gap: 10px;
}
#pageTools .tools-sort-label,
#pageSkills .tools-sort-label{
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.18em;
color: var(--muted);
text-transform: uppercase;
}
#pageTools .tools-sort-group,
#pageSkills .tools-sort-group{
display: inline-flex;
gap: 2px;
background: var(--bg-soft);
border: 1px solid var(--line);
border-radius: 999px;
padding: 3px;
}
#pageTools .tools-sort-btn,
#pageSkills .tools-sort-btn{
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 13px;
background: transparent;
border: none;
border-radius: 999px;
color: var(--muted);
font-family: var(--sans);
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all .2s ease;
white-space: nowrap;
}
#pageTools .tools-sort-btn svg,
#pageSkills .tools-sort-btn svg{ width: 12px; height: 12px; }
#pageTools .tools-sort-btn:hover:not(.is-active),
#pageSkills .tools-sort-btn:hover:not(.is-active){ color: var(--ink); }
#pageTools .tools-sort-btn.is-active,
#pageSkills .tools-sort-btn.is-active{
background: var(--ink);
color: var(--paper);
box-shadow: 0 4px 10px -5px rgba(0,0,0,.35);
}
/* 空态 */
#pageTools .grid-empty,
#pageSkills .grid-empty{
text-align: center;
padding: 60px 20px;
color: var(--muted);
font-family: var(--sans);
font-size: 14px;
background: var(--paper);
border: 1px dashed var(--line);
border-radius: 12px;
}
/* ===== MCP 卡片（工具库） ===== */
#pageTools .mcp-grid{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
@media (max-width: 1200px){ #pageTools .mcp-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px){ #pageTools .mcp-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ #pageTools .mcp-grid{ grid-template-columns: 1fr; } }
#pageTools .mcp-card{
background: var(--paper);
border: 1px solid var(--line);
border-radius: 12px;
padding: 16px 16px 14px;
cursor: pointer;
position: relative;
display: flex;
flex-direction: column;
gap: 11px;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s;
overflow: hidden;
min-height: 196px;
}
#pageTools .mcp-card:hover{
transform: translateY(-3px);
border-color: var(--muted-2);
box-shadow: 0 16px 30px -18px rgba(40,80,120,.28);
}
#pageTools .mcp-card-top{
display: flex;
align-items: center;
gap: 11px;
}
#pageTools .mcp-icon-block{
width: 38px; height: 38px;
border-radius: 9px;
background: linear-gradient(135deg, #5b9dc8, #2c6585);
display: grid;
place-items: center;
flex-shrink: 0;
color: #fff;
box-shadow: 0 4px 10px -4px rgba(44, 101, 133, .35);
}
#pageTools .mcp-icon-block svg{ width: 20px; height: 20px; }
#pageTools .mcp-icon-block[data-cat="database"]{ background: linear-gradient(135deg, #5b9dc8, #2c6585); }
#pageTools .mcp-icon-block[data-cat="search"]{ background: linear-gradient(135deg, #8a73c4, #4d3b8a); }
#pageTools .mcp-icon-block[data-cat="compute"]{ background: linear-gradient(135deg, #6db89a, #3a7e5c); }
#pageTools .mcp-icon-block[data-cat="model"]{ background: linear-gradient(135deg, #d18568, #a04e30); }
#pageTools .mcp-icon-block[data-cat="sim"]{ background: linear-gradient(135deg, #d8a566, #a0703a); }
#pageTools .mcp-icon-block[data-cat="knowledge"]{background: linear-gradient(135deg, #7c9dc4, #5675a8); }
#pageTools .mcp-title-block{
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
#pageTools .mcp-card-name{
font-family: var(--serif);
font-size: 15.5px;
font-weight: 700;
color: var(--ink);
line-height: 1.3;
letter-spacing: -0.005em;
margin: 0;
}
#pageTools .mcp-card-pkg{
font-family: var(--mono);
font-size: 10.5px;
color: var(--muted);
letter-spacing: 0.02em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#pageTools .mcp-desc{
font-size: 12px;
color: var(--ink-soft);
line-height: 1.6;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 0;
}
#pageTools .mcp-card-tags{
display: flex;
gap: 5px;
flex-wrap: wrap;
}
#pageTools .mcp-card-tag{
font-size: 10.5px;
padding: 2px 8px;
border-radius: 4px;
background: var(--bg-soft);
color: var(--ink-soft);
letter-spacing: 0.02em;
font-family: var(--sans);
}
#pageTools .mcp-card-tag.primary{
background: rgba(44,101,133,.1);
color: #2c6585;
font-weight: 600;
}
#pageTools .mcp-card-meta{
margin-top: auto;
padding-top: 10px;
border-top: 1px dashed var(--line);
display: flex;
align-items: center;
justify-content: space-between;
font-family: var(--mono);
font-size: 10px;
color: var(--muted);
}
#pageTools .mcp-card-meta .author{
display: flex;
align-items: center;
gap: 6px;
color: var(--ink-soft);
min-width: 0;
}
#pageTools .mcp-card-meta .org-avatar{
width: 18px; height: 18px;
border-radius: 50%;
background: linear-gradient(135deg, #2c6585, #7ab3c8);
color: #fff;
display: grid;
place-items: center;
font-size: 9px;
font-weight: 700;
font-family: var(--display);
flex-shrink: 0;
letter-spacing: 0;
}
#pageTools .mcp-card-meta .org-avatar[data-tone="casc"]{ background: linear-gradient(135deg, #c34141, #8a2222); }
#pageTools .mcp-card-meta .org-avatar[data-tone="casic"]{ background: linear-gradient(135deg, #2c6585, #5b9dc8); }
#pageTools .mcp-card-meta .org-avatar[data-tone="avic"]{ background: linear-gradient(135deg, #3a7e5c, #6db89a); }
#pageTools .mcp-card-meta .org-avatar[data-tone="buaa"]{ background: linear-gradient(135deg, #4d3b8a, #8a73c4); }
#pageTools .mcp-card-meta .org-avatar[data-tone="nuaa"]{ background: linear-gradient(135deg, #a04e30, #d18568); }
#pageTools .mcp-card-meta .org-avatar[data-tone="cnsa"]{ background: linear-gradient(135deg, #5e3814, #a0703a); }
#pageTools .mcp-card-meta .org-avatar[data-tone="calt"]{ background: linear-gradient(135deg, #1a2438, #3a4663); }
#pageTools .mcp-card-meta .org-avatar[data-tone="sast"]{ background: linear-gradient(135deg, #5675a8, #7c9dc4); }
#pageTools .mcp-card-meta .handle{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 10px;
letter-spacing: 0;
}
#pageTools .mcp-card-meta .stats{
display: flex;
gap: 10px;
flex-shrink: 0;
}
#pageTools .mcp-card-meta .stat{
display: inline-flex;
align-items: center;
gap: 3px;
}
#pageTools .mcp-card-meta .stat svg{ width: 9px; height: 9px; opacity: .65; }
/* ===== Skill 卡片（技能库） ===== */
#pageSkills .skill-grid{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
}
@media (max-width: 900px){ #pageSkills .skill-grid{ grid-template-columns: 1fr; } }
#pageSkills .skill-card{
background:
radial-gradient(ellipse 50% 110% at 0% 50%, rgba(255,228,180,.28), transparent 55%),
var(--paper);
border: 1px solid var(--line);
border-radius: 12px;
padding: 18px 22px 14px;
cursor: pointer;
position: relative;
display: grid;
grid-template-columns: 56px 1fr auto;
grid-template-rows: auto auto auto auto;
column-gap: 16px;
row-gap: 10px;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s;
overflow: hidden;
}
#pageSkills .skill-card:hover{
transform: translateY(-3px);
border-color: #d8a566;
box-shadow: 0 18px 32px -20px rgba(176,123,58,.32);
}
#pageSkills .skill-icon{
grid-column: 1;
grid-row: 1;
width: 56px; height: 56px;
border-radius: 13px;
background: linear-gradient(135deg, #f7d695 0%, #b07b3a 100%);
display: grid;
place-items: center;
color: #fff;
box-shadow: 0 10px 18px -8px rgba(176,123,58,.5);
align-self: start;
}
#pageSkills .skill-icon svg{ width: 28px; height: 28px; }
#pageSkills .skill-name-block{
grid-column: 2;
grid-row: 1;
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
min-width: 0;
min-height: 56px;
align-self: center;
}
#pageSkills .skill-name{
font-family: var(--serif);
font-size: 19px;
font-weight: 700;
color: var(--ink);
line-height: 1.2;
letter-spacing: 0.01em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 0;
}
#pageSkills .skill-name-en{
font-family: var(--mono);
font-size: 11px;
color: var(--muted);
letter-spacing: 0.04em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#pageSkills .skill-level{
grid-column: 3;
grid-row: 1;
align-self: start;
justify-self: end;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
background: linear-gradient(135deg, #f7d695, #d8a566);
color: #5e3814;
border-radius: 999px;
font-family: var(--display);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.08em;
box-shadow: 0 4px 10px -4px rgba(176,123,58,.4);
}
#pageSkills .skill-level::before{ content: '✦'; font-size: 9px; }
#pageSkills .skill-desc{
grid-column: 1 / -1;
grid-row: 2;
font-size: 13px;
color: var(--ink-soft);
line-height: 1.6;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 2px 0 0;
}
#pageSkills .skill-tags{
grid-column: 1 / -1;
grid-row: 3;
display: flex;
gap: 6px;
flex-wrap: wrap;
}
#pageSkills .skill-tag{
font-size: 11px;
padding: 3px 9px;
background: var(--bg-soft);
color: var(--ink-soft);
border-radius: 4px;
font-family: var(--sans);
}
#pageSkills .skill-meta{
grid-column: 1 / -1;
grid-row: 4;
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 10px;
margin-top: 4px;
border-top: 1px dashed var(--line);
font-family: var(--mono);
font-size: 11px;
color: var(--muted);
}
#pageSkills .skill-author{
display: flex;
align-items: center;
gap: 7px;
color: var(--ink-soft);
min-width: 0;
}
#pageSkills .skill-author .org-avatar{
width: 20px; height: 20px;
border-radius: 50%;
background: linear-gradient(135deg, #b07b3a, #f7d695);
color: #fff;
display: grid;
place-items: center;
font-size: 9px;
font-weight: 700;
font-family: var(--display);
flex-shrink: 0;
}
#pageSkills .skill-author .org-avatar[data-tone="casc"]{ background: linear-gradient(135deg, #c34141, #8a2222); }
#pageSkills .skill-author .org-avatar[data-tone="casic"]{ background: linear-gradient(135deg, #2c6585, #5b9dc8); }
#pageSkills .skill-author .org-avatar[data-tone="avic"]{ background: linear-gradient(135deg, #3a7e5c, #6db89a); }
#pageSkills .skill-author .org-avatar[data-tone="buaa"]{ background: linear-gradient(135deg, #4d3b8a, #8a73c4); }
#pageSkills .skill-author .org-avatar[data-tone="nuaa"]{ background: linear-gradient(135deg, #a04e30, #d18568); }
#pageSkills .skill-author .org-avatar[data-tone="cnsa"]{ background: linear-gradient(135deg, #5e3814, #a0703a); }
#pageSkills .skill-author .org-avatar[data-tone="calt"]{ background: linear-gradient(135deg, #1a2438, #3a4663); }
#pageSkills .skill-author .org-avatar[data-tone="sast"]{ background: linear-gradient(135deg, #5675a8, #7c9dc4); }
#pageSkills .skill-author .handle{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#pageSkills .skill-stats{
display: flex;
gap: 12px;
flex-shrink: 0;
}
#pageSkills .skill-stats .stat{
display: inline-flex;
align-items: center;
gap: 4px;
}
#pageSkills .skill-stats svg{ width: 11px; height: 11px; opacity: .7; }
/* ── 技能类型徽章 · 工具技能变体（领域技能沿用上面那条暖金规则） ── */
#pageSkills .skill-level[data-type="tool"]{
background: linear-gradient(135deg, #5b9dc8, #2c6585);
color: #fff;
box-shadow: 0 4px 10px -4px rgba(44,101,133,.45);
}
/* ── 研制环节分段标题（横跨整行网格） ── */
#pageSkills .skill-section-head{
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 9px;
margin: 14px 0 -2px;
}
#pageSkills .skill-grid > .skill-section-head:first-child{ margin-top: 0; }
#pageSkills .skill-section-badge{
display: grid;
place-items: center;
min-width: 22px; height: 22px;
padding: 0 5px;
border-radius: 6px;
background: linear-gradient(135deg, #f7d695, #d8a566);
color: #5e3814;
font-family: var(--display);
font-size: 12px;
font-weight: 700;
flex-shrink: 0;
}
#pageSkills .skill-section-title{
font-family: var(--serif);
font-size: 15px;
font-weight: 700;
color: var(--ink);
letter-spacing: 0.02em;
flex-shrink: 0;
}
#pageSkills .skill-section-count{
font-family: var(--mono);
font-size: 11px;
color: var(--muted);
padding: 1px 7px;
border: 1px solid var(--line);
border-radius: 999px;
flex-shrink: 0;
}
#pageSkills .skill-section-rule{
flex: 1;
height: 1px;
background: linear-gradient(to right, var(--line), transparent);
}
/* ── 领域 chip 上的数量徽章（chip 由数据生成，带计数） ── */
#pageSkills .tag-chip-num{
margin-left: 6px;
padding: 0 5px;
border-radius: 999px;
background: rgba(0,0,0,.07);
font-family: var(--mono);
font-size: 10px;
line-height: 15px;
}
#pageSkills .tag-chip.active .tag-chip-num{ background: rgba(255,255,255,.25); }
/* ── 「演示数据（后端未连接 · 重试）」里的重试链接 ── */
#pageSkills .skill-retry{
color: var(--vermilion);
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
}
#pageSkills .skill-retry:hover{ opacity: .75; }
/* ── 技能库分页条（后端技能量大，卡片分页铺） ── */
#pageSkills .skill-pager{
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
margin-top: 22px;
padding-top: 16px;
border-top: 1px dashed var(--line);
}
#pageSkills .skill-pager[hidden]{ display: none; }
#pageSkills .skill-pager-btn{
min-width: 32px;
height: 30px;
padding: 0 9px;
border: 1px solid var(--line);
border-radius: 6px;
background: var(--paper);
color: var(--ink-soft);
font-family: var(--mono);
font-size: 12px;
cursor: pointer;
transition: border-color .2s, color .2s, background .2s;
}
#pageSkills .skill-pager-btn:hover:not(:disabled){
border-color: #d8a566;
color: var(--ink);
}
#pageSkills .skill-pager-btn.is-active{
background: linear-gradient(135deg, #f7d695, #d8a566);
border-color: #d8a566;
color: #5e3814;
font-weight: 700;
}
#pageSkills .skill-pager-btn:disabled{
opacity: .4;
cursor: default;
}
#pageSkills .skill-pager-gap{
color: var(--muted);
font-family: var(--mono);
font-size: 12px;
padding: 0 2px;
}
#pageSkills .skill-pager-info{
margin-left: auto;
color: var(--muted);
font-family: var(--mono);
font-size: 11.5px;
}
/* =====================================================
↓ 设备库 (#pageDevices)
与 工具库 / 技能库 同款 token + 筛选 + 排序
卡片：16:9 顶部封面 + 状态徽章 + 紧凑信息密度
===================================================== */
#pageDevices{
--bg-soft: #eaf1fa;
--paper: #ffffff;
--ink: #0d2540;
--ink-soft: #38547a;
--muted: #6b7d9a;
--muted-2: #a0b0c8;
--line: #d0dee9;
--line-soft: #e5eef7;
--accent: #2f7fd8;
--accent-soft: #6ea9e8;
/* 设备主题：钢铁深绿 + 暖铜辅色，与工具库蓝/技能库金做区分 */
--device-deep: #2a4d35;
--device-mid: #4a7d5b;
--device-soft: #8db3a0;
--device-bg: rgba(74,125,91,.10);
--status-online:#4a7d5b;
--status-maint: #b07b3a;
--status-queue: #2c4a7a;
--sans: "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
--serif: "Noto Serif SC", "Songti SC", "Source Han Serif SC", serif;
--display: "Cormorant Garamond", "Noto Serif SC", serif;
--mono: "JetBrains Mono", "SF Mono", Menlo, monospace;
}
:root[data-theme="origin"] #pageDevices {
--bg-soft: #f0ebdb; --paper: #faf7ee; --ink: #1a2438; --ink-soft: #3a4663;
--muted: #8a8676; --muted-2: #b8b3a1;
--line: #e4dec9; --line-soft: #ece6d3;
--accent: #2c4a7a; --accent-soft: #5a7fb5;
--device-deep: #2a4d35; --device-mid: #4a7d5b; --device-soft: #8db3a0;
--device-bg: rgba(74,125,91,.10);
--status-online: #4a7d5b; --status-maint: #b07b3a; --status-queue: #2c4a7a;
}
:root[data-theme="dark"] #pageDevices {
--bg-soft: #10161f; --paper: #141a24; --ink: #e8ecf3; --ink-soft: #b8c0ce;
--muted: #a0abbc; --muted-2: #7d8593;
--line: #2a3341; --line-soft: #1e2632;
--accent: #5aa9e6; --accent-soft: #7ebae8;
--device-deep: #3c8560; --device-mid: #4a7d5b; --device-soft: #8db3a0;
--device-bg: rgba(74,125,91,.16);
--status-online: #7bc36b; --status-maint: #d4a961; --status-queue: #5aa9e6;
}
:root[data-theme="dark2"] #pageDevices {
--bg-soft: #0f1a3c; --paper: #142347; --ink: #f4f7ff; --ink-soft: #c8d3ec;
--muted: #94a3c6; --muted-2: #6a7ea3;
--line: #2a4380; --line-soft: #1c3266;
--accent: #5aa9ff; --accent-soft: #7bbfff;
--device-deep: #4a8560; --device-mid: #5aa675; --device-soft: #7dc796;
--device-bg: rgba(90,166,117,.16);
--status-online: #7bd88f; --status-maint: #f5c766; --status-queue: #5aa9ff;
}
#pageDevices.page.active{
display: block;
background: var(--page-bg);
min-height: calc(100vh - 56px);
padding: 40px 56px 56px;
font-family: var(--sans);
color: var(--ink);
}
@media (max-width: 720px){ #pageDevices.page.active{ padding: 24px 18px 40px; } }
#pageDevices .apps-view{
width: 100%;
max-width: 1280px;
margin: 0 auto;
}
#pageDevices .apps-header{
display: flex; align-items: flex-end; justify-content: space-between;
margin-bottom: 28px; gap: 24px; flex-wrap: wrap;
}
#pageDevices .apps-eyebrow{
font-family: var(--display); font-size: 12px;
letter-spacing: 0.32em; color: var(--device-deep);
text-transform: uppercase; margin-bottom: 8px;
}
#pageDevices .apps-title{
font-family: var(--serif); font-weight: 700;
font-size: 30px; color: var(--ink); letter-spacing: 0.02em; margin: 0;
}
#pageDevices .apps-title em{
color: var(--device-deep); font-style: italic; font-weight: 500;
}
#pageDevices .apps-head-meta{
font-size: 13px; color: var(--muted); margin-top: 6px; letter-spacing: 0.02em;
}
#pageDevices .apps-search{
display: flex; align-items: center; gap: 8px;
background: var(--paper); border: 1px solid var(--line);
border-radius: 999px; padding: 9px 16px;
width: 300px; max-width: 100%;
color: var(--muted);
transition: border-color .2s, box-shadow .2s;
}
#pageDevices .apps-search:focus-within{
border-color: var(--device-soft);
box-shadow: 0 0 0 4px rgba(74,125,91,.10);
}
#pageDevices .apps-search svg{ width: 14px; height: 14px; flex-shrink: 0; }
#pageDevices .apps-search input{
flex: 1; min-width: 0;
border: none; outline: none; background: transparent;
font-family: var(--sans); font-size: 13px; color: var(--ink);
}
#pageDevices .apps-search input::placeholder{ color: var(--muted-2); }
/* 双轴筛选 */
#pageDevices .apps-tags{ margin-bottom: 28px; }
#pageDevices .tag-row{ display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#pageDevices .tag-row.secondary{ margin-top: 12px; }
#pageDevices .tag-row-label{
font-size: 13px; color: var(--muted);
letter-spacing: 0.04em; margin-right: 12px;
font-family: var(--sans); font-weight: 500; flex-shrink: 0;
}
#pageDevices .tag-chip{
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 14px 7px 11px; border-radius: 999px;
font-size: 13px; color: var(--ink-soft);
background: var(--paper); border: 1px solid var(--line);
cursor: pointer; transition: all .18s ease; user-select: none;
font-family: var(--sans);
}
#pageDevices .tag-chip svg{ width: 13px; height: 13px; opacity: .68; transition: opacity .18s; }
#pageDevices .tag-chip:hover{ background: var(--bg-soft); border-color: var(--muted-2); color: var(--ink); }
#pageDevices .tag-chip.active{ color: #fff; background: var(--vermilion); border-color: var(--vermilion); }
#pageDevices .tag-chip.active svg{ opacity: 1; }
#pageDevices .tag-chip-sec{
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px 6px 10px; border-radius: 6px;
font-size: 12.5px; color: var(--muted);
background: transparent; border: 1px solid transparent;
cursor: pointer; transition: all .15s; user-select: none;
font-family: var(--sans);
}
#pageDevices .tag-chip-sec svg{ width: 11px; height: 11px; opacity: .65; transition: opacity .15s; }
#pageDevices .tag-chip-sec:hover{ color: var(--ink); background: var(--bg-soft); }
#pageDevices .tag-chip-sec.active{ color: var(--ink); background: var(--bg-soft); font-weight: 500; }
#pageDevices .tag-chip-sec .status-dot{
width: 8px; height: 8px; border-radius: 50%; display: inline-block;
}
#pageDevices .tag-chip-sec[data-status="online"] .status-dot{ background: var(--status-online); }
#pageDevices .tag-chip-sec[data-status="maint"] .status-dot{ background: var(--status-maint); }
#pageDevices .tag-chip-sec[data-status="queue"] .status-dot{ background: var(--status-queue); }
/* Sort */
#pageDevices .tools-toolbar{
display: flex; align-items: center; justify-content: space-between;
gap: 16px; flex-wrap: wrap;
margin-bottom: 22px; padding-bottom: 14px;
border-bottom: 1px solid var(--line);
}
#pageDevices .tools-toolbar-left{
display: inline-flex; align-items: center; gap: 16px;
font-family: var(--sans);
}
#pageDevices .toolbar-count{
font-family: var(--mono); font-size: 12px;
color: var(--muted); letter-spacing: 0.04em;
}
#pageDevices .toolbar-count strong{
font-family: var(--display); font-style: italic;
color: var(--ink); font-size: 15px; font-weight: 700; margin: 0 3px;
}
#pageDevices .tools-sort{ display: inline-flex; align-items: center; gap: 10px; }
#pageDevices .tools-sort-label{
font-family: var(--mono); font-size: 10.5px;
letter-spacing: 0.18em; color: var(--muted); text-transform: uppercase;
}
#pageDevices .tools-sort-group{
display: inline-flex; gap: 2px;
background: var(--bg-soft); border: 1px solid var(--line);
border-radius: 999px; padding: 3px;
}
#pageDevices .tools-sort-btn{
display: inline-flex; align-items: center; gap: 5px;
padding: 6px 13px; background: transparent; border: none;
border-radius: 999px; color: var(--muted);
font-family: var(--sans); font-size: 12px; font-weight: 600;
cursor: pointer; transition: all .2s ease; white-space: nowrap;
}
#pageDevices .tools-sort-btn svg{ width: 12px; height: 12px; }
#pageDevices .tools-sort-btn:hover:not(.is-active){ color: var(--ink); }
#pageDevices .tools-sort-btn.is-active{
background: var(--ink); color: var(--paper);
box-shadow: 0 4px 10px -5px rgba(0,0,0,.35);
}
#pageDevices .grid-empty{
text-align: center; padding: 60px 20px;
color: var(--muted); font-family: var(--sans); font-size: 14px;
background: var(--paper); border: 1px dashed var(--line); border-radius: 12px;
}
/* ===== Device 卡片网格 ===== */
#pageDevices .device-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
@media (max-width: 1200px){ #pageDevices .device-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px){ #pageDevices .device-grid{ grid-template-columns: 1fr; } }
#pageDevices .device-card{
background: var(--paper);
border: 1px solid var(--line);
border-radius: 14px;
overflow: hidden;
cursor: pointer;
display: flex; flex-direction: column;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s;
min-height: 380px;
}
#pageDevices .device-card:hover{
transform: translateY(-3px);
border-color: var(--device-soft);
box-shadow: 0 18px 32px -20px rgba(42,77,53,.35);
}
/* 顶部封面 16:9 + 状态徽章 + 设备分类标识 */
#pageDevices .device-cover{
position: relative;
aspect-ratio: 16 / 9;
background: linear-gradient(135deg, #d4cfb8 0%, #b8b09a 100%);
overflow: hidden;
border-bottom: 1px solid var(--line);
}
#pageDevices .device-cover img{
width: 100%; height: 100%;
object-fit: cover; object-position: center;
display: block;
transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
#pageDevices .device-card:hover .device-cover img{ transform: scale(1.04); }
/* 封面渐变蒙层（提升状态徽章可读性） */
#pageDevices .device-cover::after{
content: '';
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(20,30,40,.18) 0%, transparent 30%, transparent 60%, rgba(20,30,40,.32) 100%);
pointer-events: none;
}
/* 状态徽章 · 右上 */
#pageDevices .device-status{
position: absolute; top: 10px; right: 10px;
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 10px 4px 8px;
background: rgba(255,255,255,.92);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
border-radius: 999px;
font-family: var(--sans);
font-size: 11px; font-weight: 600;
color: var(--ink-soft);
box-shadow: 0 2px 6px rgba(20,30,40,.18);
z-index: 2;
}
#pageDevices .device-status .dot{
width: 6px; height: 6px; border-radius: 50%;
box-shadow: 0 0 0 2px rgba(255,255,255,.65);
}
#pageDevices .device-status[data-status="online"]{ color: var(--status-online); }
#pageDevices .device-status[data-status="online"] .dot{ background: var(--status-online); animation: deviceStatusPulse 1.8s ease-in-out infinite; }
#pageDevices .device-status[data-status="maint"]{ color: var(--status-maint); }
#pageDevices .device-status[data-status="maint"] .dot{ background: var(--status-maint); }
#pageDevices .device-status[data-status="queue"]{ color: var(--status-queue); }
#pageDevices .device-status[data-status="queue"] .dot{ background: var(--status-queue); }
@keyframes deviceStatusPulse{
0%,100%{ opacity: 1; transform: scale(1); }
50% { opacity: .65; transform: scale(.86); }
}
/* 左下：设备分类小标识 */
#pageDevices .device-kind{
position: absolute; left: 10px; bottom: 10px;
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 9px;
background: rgba(255,255,255,.92);
border-radius: 4px;
font-family: var(--mono);
font-size: 10px; font-weight: 600;
color: var(--device-deep);
letter-spacing: 0.04em;
z-index: 2;
}
/* 卡片下半部分 */
#pageDevices .device-body{
padding: 14px 16px 14px;
display: flex; flex-direction: column; gap: 9px;
flex: 1;
}
#pageDevices .device-title-row{
display: flex; align-items: flex-start; gap: 10px;
}
#pageDevices .device-title-block{
flex: 1; min-width: 0;
display: flex; flex-direction: column; gap: 3px;
}
#pageDevices .device-name{
font-family: var(--serif);
font-size: 16px; font-weight: 700;
color: var(--ink); line-height: 1.3;
margin: 0;
}
#pageDevices .device-model{
font-family: var(--mono);
font-size: 10.5px;
color: var(--muted);
letter-spacing: 0.04em;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#pageDevices .device-desc{
font-size: 12.5px;
color: var(--ink-soft);
line-height: 1.6;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 0;
}
/* 关键指标行 */
#pageDevices .device-specs{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px 14px;
padding: 8px 10px;
background: var(--device-bg);
border-radius: 6px;
font-family: var(--mono);
}
#pageDevices .device-spec{
display: flex; flex-direction: column; gap: 1px;
min-width: 0;
}
#pageDevices .device-spec-label{
font-size: 9.5px;
color: var(--muted);
letter-spacing: 0.06em;
text-transform: uppercase;
}
#pageDevices .device-spec-value{
font-family: var(--display);
font-size: 14px;
font-weight: 700;
color: var(--device-deep);
letter-spacing: 0.01em;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* tags */
#pageDevices .device-tags{
display: flex; gap: 5px; flex-wrap: wrap;
}
#pageDevices .device-tag{
font-size: 10.5px;
padding: 2px 8px;
border-radius: 4px;
background: var(--bg-soft);
color: var(--ink-soft);
font-family: var(--sans);
letter-spacing: 0.02em;
}
#pageDevices .device-tag.primary{
background: var(--device-bg);
color: var(--device-deep);
font-weight: 600;
}
/* 底部 meta：机构 + 调度指标 */
#pageDevices .device-meta{
margin-top: auto;
padding-top: 10px;
border-top: 1px dashed var(--line);
display: flex; align-items: center; justify-content: space-between;
font-family: var(--mono);
font-size: 10px;
color: var(--muted);
}
#pageDevices .device-meta .author{
display: flex; align-items: center; gap: 6px;
color: var(--ink-soft); min-width: 0;
}
#pageDevices .device-meta .org-avatar{
width: 20px; height: 20px;
border-radius: 50%;
background: linear-gradient(135deg, var(--device-mid), var(--device-deep));
color: #fff;
display: grid; place-items: center;
font-size: 9px; font-weight: 700;
font-family: var(--display);
flex-shrink: 0;
}
#pageDevices .device-meta .org-avatar[data-tone="calt"]{ background: linear-gradient(135deg, #1a2438, #3a4663); }
#pageDevices .device-meta .org-avatar[data-tone="casc"]{ background: linear-gradient(135deg, #c34141, #8a2222); }
#pageDevices .device-meta .org-avatar[data-tone="avic"]{ background: linear-gradient(135deg, #3a7e5c, #6db89a); }
#pageDevices .device-meta .org-avatar[data-tone="buaa"]{ background: linear-gradient(135deg, #4d3b8a, #8a73c4); }
#pageDevices .device-meta .org-avatar[data-tone="nuaa"]{ background: linear-gradient(135deg, #a04e30, #d18568); }
#pageDevices .device-meta .org-avatar[data-tone="cnsa"]{ background: linear-gradient(135deg, #5e3814, #a0703a); }
#pageDevices .device-meta .org-avatar[data-tone="sast"]{ background: linear-gradient(135deg, #5675a8, #7c9dc4); }
#pageDevices .device-meta .org-avatar[data-tone="cardc"]{ background: linear-gradient(135deg, #2c4a7a, #5a7fb5); }
#pageDevices .device-meta .handle{
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-size: 10px;
}
#pageDevices .device-meta .stats{ display: flex; gap: 10px; flex-shrink: 0; }
#pageDevices .device-meta .stat{
display: inline-flex; align-items: center; gap: 3px;
}
#pageDevices .device-meta .stat svg{ width: 9px; height: 9px; opacity: .65; }
/* =====================================================
↓ 科学知识库 (#pageKnowledge)
与首页 4 场景卡呼应：每张知识库卡片右下角嵌同款场景水印
5 个场景色（超材料紫 / 合金铜 / 气动青 / 涡轮橙 / 通用钢蓝）
===================================================== */
#pageKnowledge{
--bg-soft: #eaf1fa;
--paper: #ffffff;
--ink: #0d2540;
--ink-soft: #38547a;
--muted: #6b7d9a;
--muted-2: #a0b0c8;
--line: #d0dee9;
--line-soft: #e5eef7;
--accent: #2f7fd8;
--accent-soft: #6ea9e8;
--sc-meta: #6d5fb5;
--sc-meta-bg: rgba(109,95,181,.10);
--sc-alloy: #b07b3a;
--sc-alloy-bg:rgba(176,123,58,.10);
--sc-aero: #3d8fa6;
--sc-aero-bg: rgba(61,143,166,.10);
--sc-turbine: #c47715;
--sc-turbine-bg: rgba(196,119,21,.10);
--sc-general: #5675a8;
--sc-general-bg: rgba(86,117,168,.10);
--sans: "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
--serif: "Noto Serif SC", "Songti SC", "Source Han Serif SC", serif;
--display: "Cormorant Garamond", "Noto Serif SC", serif;
--mono: "JetBrains Mono", "SF Mono", Menlo, monospace;
}
:root[data-theme="origin"] #pageKnowledge {
--bg-soft: #f0ebdb; --paper: #faf7ee; --ink: #1a2438; --ink-soft: #3a4663;
--muted: #8a8676; --muted-2: #b8b3a1;
--line: #e4dec9; --line-soft: #ece6d3;
--accent: #2c4a7a; --accent-soft: #5a7fb5;
}
:root[data-theme="dark"] #pageKnowledge {
--bg-soft: #10161f; --paper: #141a24; --ink: #e8ecf3; --ink-soft: #b8c0ce;
--muted: #a0abbc; --muted-2: #7d8593;
--line: #2a3341; --line-soft: #1e2632;
--accent: #5aa9e6; --accent-soft: #7ebae8;
--sc-meta: #a798e6; --sc-meta-bg: rgba(167,152,230,.16);
--sc-alloy: #d4a961; --sc-alloy-bg: rgba(212,169,97,.16);
--sc-aero: #6dc0d6; --sc-aero-bg: rgba(109,192,214,.16);
--sc-turbine: #ffb573; --sc-turbine-bg: rgba(255,181,115,.16);
--sc-general: #7ba3d8; --sc-general-bg: rgba(123,163,216,.16);
}
:root[data-theme="dark2"] #pageKnowledge {
--bg-soft: #0f1a3c; --paper: #142347; --ink: #f4f7ff; --ink-soft: #c8d3ec;
--muted: #94a3c6; --muted-2: #6a7ea3;
--line: #2a4380; --line-soft: #1c3266;
--accent: #5aa9ff; --accent-soft: #7bbfff;
--sc-meta: #a798e6; --sc-meta-bg: rgba(167,152,230,.16);
--sc-alloy: #f5c766; --sc-alloy-bg: rgba(245,199,102,.16);
--sc-aero: #6dc0d6; --sc-aero-bg: rgba(109,192,214,.16);
--sc-turbine: #e8a04a; --sc-turbine-bg: rgba(232,160,74,.16);
--sc-general: #7ba3d8; --sc-general-bg: rgba(123,163,216,.16);
}
#pageKnowledge.page.active{
display: block;
background: var(--page-bg);
min-height: calc(100vh - 56px);
padding: 40px 56px 56px;
font-family: var(--sans);
color: var(--ink);
}
@media (max-width: 720px){ #pageKnowledge.page.active{ padding: 24px 18px 40px; } }
#pageKnowledge .apps-view{ width: 100%; max-width: 1280px; margin: 0 auto; }
#pageKnowledge .apps-header{
display: flex; align-items: flex-end; justify-content: space-between;
margin-bottom: 28px; gap: 24px; flex-wrap: wrap;
}
#pageKnowledge .apps-eyebrow{
font-family: var(--display); font-size: 12px;
letter-spacing: 0.32em; color: var(--accent);
text-transform: uppercase; margin-bottom: 8px;
}
#pageKnowledge .apps-title{
font-family: var(--serif); font-weight: 700;
font-size: 30px; color: var(--ink); letter-spacing: 0.02em; margin: 0;
}
#pageKnowledge .apps-title em{
color: var(--accent); font-style: italic; font-weight: 500;
}
#pageKnowledge .apps-head-meta{
font-size: 13px; color: var(--muted); margin-top: 6px; letter-spacing: 0.02em;
}
#pageKnowledge .apps-search{
display: flex; align-items: center; gap: 8px;
background: var(--paper); border: 1px solid var(--line);
border-radius: 999px; padding: 9px 16px;
width: 300px; max-width: 100%;
color: var(--muted);
transition: border-color .2s, box-shadow .2s;
}
#pageKnowledge .apps-search:focus-within{
border-color: var(--accent-soft);
box-shadow: 0 0 0 4px rgba(60,106,168,.06);
}
#pageKnowledge .apps-search svg{ width: 14px; height: 14px; flex-shrink: 0; }
#pageKnowledge .apps-search input{
flex: 1; min-width: 0;
border: none; outline: none; background: transparent;
font-family: var(--sans); font-size: 13px; color: var(--ink);
}
#pageKnowledge .apps-search input::placeholder{ color: var(--muted-2); }
#pageKnowledge .apps-tags{ margin-bottom: 28px; }
#pageKnowledge .tag-row{ display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#pageKnowledge .tag-row.secondary{ margin-top: 12px; }
#pageKnowledge .tag-row-label{
font-size: 13px; color: var(--muted);
letter-spacing: 0.04em; margin-right: 12px;
font-family: var(--sans); font-weight: 500; flex-shrink: 0;
}
#pageKnowledge .tag-chip{
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 14px 7px 11px; border-radius: 999px;
font-size: 13px; color: var(--ink-soft);
background: var(--paper); border: 1px solid var(--line);
cursor: pointer; transition: all .18s ease; user-select: none;
font-family: var(--sans);
}
#pageKnowledge .tag-chip svg{ width: 13px; height: 13px; opacity: .68; transition: opacity .18s; }
#pageKnowledge .tag-chip .sc-dot{
width: 9px; height: 9px; border-radius: 50%; display: inline-block;
}
#pageKnowledge .tag-chip[data-scenario="meta"] .sc-dot{ background: var(--sc-meta); }
#pageKnowledge .tag-chip[data-scenario="alloy"] .sc-dot{ background: var(--sc-alloy); }
#pageKnowledge .tag-chip[data-scenario="aero"] .sc-dot{ background: var(--sc-aero); }
#pageKnowledge .tag-chip[data-scenario="turbine"] .sc-dot{ background: var(--sc-turbine); }
#pageKnowledge .tag-chip[data-scenario="general"] .sc-dot{ background: var(--sc-general); }
/* 场景 chip icon 配色（与各场景主题色一致，替代原色点）*/
#pageKnowledge .tag-chip[data-scenario="meta"] svg{ color: var(--sc-meta); }
#pageKnowledge .tag-chip[data-scenario="alloy"] svg{ color: var(--sc-alloy); }
#pageKnowledge .tag-chip[data-scenario="aero"] svg{ color: var(--sc-aero); }
#pageKnowledge .tag-chip[data-scenario="turbine"] svg{ color: var(--sc-turbine); }
#pageKnowledge .tag-chip[data-scenario="general"] svg{ color: var(--sc-general); }
#pageKnowledge .tag-chip:hover{ background: var(--bg-soft); border-color: var(--muted-2); color: var(--ink); }
#pageKnowledge .tag-chip.active{ color: #fff; background: var(--vermilion); border-color: var(--vermilion); }
#pageKnowledge .tag-chip.active svg{ opacity: 1; color: #fff; }
#pageKnowledge .tag-chip.active .sc-dot{ box-shadow: 0 0 0 2px rgba(255,255,255,.32); }
#pageKnowledge .tag-chip-sec{
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px 6px 10px; border-radius: 6px;
font-size: 12.5px; color: var(--muted);
background: transparent; border: 1px solid transparent;
cursor: pointer; transition: all .15s; user-select: none;
font-family: var(--sans);
}
#pageKnowledge .tag-chip-sec svg{ width: 12px; height: 12px; opacity: .65; transition: opacity .15s; }
#pageKnowledge .tag-chip-sec:hover{ color: var(--ink); background: var(--bg-soft); }
#pageKnowledge .tag-chip-sec.active{ color: var(--ink); background: var(--bg-soft); font-weight: 500; }
#pageKnowledge .tools-toolbar{
display: flex; align-items: center; justify-content: space-between;
gap: 16px; flex-wrap: wrap;
margin-bottom: 22px; padding-bottom: 14px;
border-bottom: 1px solid var(--line);
}
#pageKnowledge .tools-toolbar-left{ display: inline-flex; align-items: center; gap: 16px; font-family: var(--sans); }
#pageKnowledge .toolbar-count{
font-family: var(--mono); font-size: 12px;
color: var(--muted); letter-spacing: 0.04em;
}
#pageKnowledge .toolbar-count strong{
font-family: var(--display); font-style: italic;
color: var(--ink); font-size: 15px; font-weight: 700; margin: 0 3px;
}
#pageKnowledge .tools-sort{ display: inline-flex; align-items: center; gap: 10px; }
#pageKnowledge .tools-sort-label{
font-family: var(--mono); font-size: 10.5px;
letter-spacing: 0.18em; color: var(--muted); text-transform: uppercase;
}
#pageKnowledge .tools-sort-group{
display: inline-flex; gap: 2px;
background: var(--bg-soft); border: 1px solid var(--line);
border-radius: 999px; padding: 3px;
}
#pageKnowledge .tools-sort-btn{
display: inline-flex; align-items: center; gap: 5px;
padding: 6px 13px; background: transparent; border: none;
border-radius: 999px; color: var(--muted);
font-family: var(--sans); font-size: 12px; font-weight: 600;
cursor: pointer; transition: all .2s ease; white-space: nowrap;
}
#pageKnowledge .tools-sort-btn svg{ width: 12px; height: 12px; }
#pageKnowledge .tools-sort-btn:hover:not(.is-active){ color: var(--ink); }
#pageKnowledge .tools-sort-btn.is-active{
background: var(--ink); color: var(--paper);
box-shadow: 0 4px 10px -5px rgba(0,0,0,.35);
}
#pageKnowledge .grid-empty{
text-align: center; padding: 60px 20px;
color: var(--muted); font-family: var(--sans); font-size: 14px;
background: var(--paper); border: 1px dashed var(--line); border-radius: 12px;
}
/* ===== KB 卡片网格 ===== */
#pageKnowledge .kb-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
@media (max-width: 1200px){ #pageKnowledge .kb-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px){ #pageKnowledge .kb-grid{ grid-template-columns: 1fr; } }
#pageKnowledge .kb-card{
position: relative;
background: var(--paper);
border: 1px solid var(--line);
border-left: none;
border-radius: 12px;
padding: 16px 18px 14px 22px;
cursor: pointer;
display: flex; flex-direction: column;
gap: 11px;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s;
overflow: hidden;
min-height: 280px;
}
#pageKnowledge .kb-card::before{
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 6px;
background: var(--sc-general);
}
#pageKnowledge .kb-card[data-scenario="meta"]::before{ background: var(--sc-meta); }
#pageKnowledge .kb-card[data-scenario="alloy"]::before{ background: var(--sc-alloy); }
#pageKnowledge .kb-card[data-scenario="aero"]::before{ background: var(--sc-aero); }
#pageKnowledge .kb-card[data-scenario="turbine"]::before{ background: var(--sc-turbine); }
#pageKnowledge .kb-card:hover{
transform: translateY(-3px);
border-color: var(--muted-2);
box-shadow: 0 18px 32px -20px rgba(40,55,80,.25);
}
#pageKnowledge .kb-watermark{
position: absolute;
right: 14px; bottom: 12px;
width: 96px; height: 96px;
pointer-events: none;
z-index: 0;
opacity: .12;
transition: opacity .25s ease, transform .35s ease;
color: var(--sc-general);
}
#pageKnowledge .kb-card:hover .kb-watermark{ opacity: .22; transform: scale(1.06); }
#pageKnowledge .kb-card[data-scenario="meta"] .kb-watermark{ color: var(--sc-meta); }
#pageKnowledge .kb-card[data-scenario="alloy"] .kb-watermark{ color: var(--sc-alloy); }
#pageKnowledge .kb-card[data-scenario="aero"] .kb-watermark{ color: var(--sc-aero); }
#pageKnowledge .kb-card[data-scenario="turbine"] .kb-watermark{ color: var(--sc-turbine); }
#pageKnowledge .kb-top{
position: relative; z-index: 1;
display: flex; align-items: flex-start; gap: 11px;
}
#pageKnowledge .kb-icon-block{
width: 38px; height: 38px;
border-radius: 9px;
background: linear-gradient(135deg, #7c9dc4, #5675a8);
display: grid; place-items: center;
flex-shrink: 0; color: #fff;
box-shadow: 0 4px 10px -4px rgba(40,55,80,.35);
}
#pageKnowledge .kb-card[data-scenario="meta"] .kb-icon-block{ background: linear-gradient(135deg, #8a73c4, #4d3b8a); box-shadow: 0 4px 10px -4px rgba(109,95,181,.35); }
#pageKnowledge .kb-card[data-scenario="alloy"] .kb-icon-block{ background: linear-gradient(135deg, #d8a566, #8a5a20); box-shadow: 0 4px 10px -4px rgba(176,123,58,.35); }
#pageKnowledge .kb-card[data-scenario="aero"] .kb-icon-block{ background: linear-gradient(135deg, #5fb8d0, #2a6478); box-shadow: 0 4px 10px -4px rgba(61,143,166,.35); }
#pageKnowledge .kb-card[data-scenario="turbine"] .kb-icon-block{ background: linear-gradient(135deg, #e09a3e, #8a4f00); box-shadow: 0 4px 10px -4px rgba(196,119,21,.35); }
#pageKnowledge .kb-icon-block svg{ width: 20px; height: 20px; }
#pageKnowledge .kb-title-block{
flex: 1; min-width: 0;
display: flex; flex-direction: column; gap: 3px;
}
#pageKnowledge .kb-name{
font-family: var(--serif);
font-size: 15.5px; font-weight: 700;
color: var(--ink); line-height: 1.3;
margin: 0;
}
#pageKnowledge .kb-alias{
font-family: var(--mono);
font-size: 10.5px;
color: var(--muted);
letter-spacing: 0.04em;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#pageKnowledge .kb-badge{
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 9px;
background: var(--sc-general-bg);
color: var(--sc-general);
border-radius: 999px;
font-family: var(--display);
font-weight: 700;
font-size: 12.5px;
letter-spacing: 0.02em;
flex-shrink: 0;
white-space: nowrap;
}
#pageKnowledge .kb-card[data-scenario="meta"] .kb-badge{ background: var(--sc-meta-bg); color: var(--sc-meta); }
#pageKnowledge .kb-card[data-scenario="alloy"] .kb-badge{ background: var(--sc-alloy-bg); color: var(--sc-alloy); }
#pageKnowledge .kb-card[data-scenario="aero"] .kb-badge{ background: var(--sc-aero-bg); color: var(--sc-aero); }
#pageKnowledge .kb-card[data-scenario="turbine"] .kb-badge{ background: var(--sc-turbine-bg); color: var(--sc-turbine); }
#pageKnowledge .kb-badge svg{ width: 11px; height: 11px; opacity: .85; }
#pageKnowledge .kb-desc{
position: relative; z-index: 1;
font-size: 12.5px;
color: var(--ink-soft);
line-height: 1.6;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 0;
}
#pageKnowledge .kb-metrics{
position: relative; z-index: 1;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
background: var(--bg-soft);
border-radius: 6px;
overflow: hidden;
border: 1px solid var(--line-soft);
}
#pageKnowledge .kb-metric{
padding: 7px 8px;
text-align: center;
border-right: 1px solid var(--line-soft);
display: flex; flex-direction: column; gap: 1px;
min-width: 0;
}
#pageKnowledge .kb-metric:last-child{ border-right: none; }
#pageKnowledge .kb-metric-value{
font-family: var(--display);
font-size: 14px;
font-weight: 700;
color: var(--ink);
line-height: 1.1;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#pageKnowledge .kb-metric-label{
font-family: var(--mono);
font-size: 9px;
color: var(--muted);
letter-spacing: 0.04em;
text-transform: uppercase;
}
#pageKnowledge .kb-tags{
position: relative; z-index: 1;
display: flex; gap: 5px; flex-wrap: wrap;
}
#pageKnowledge .kb-tag{
font-size: 10.5px;
padding: 2px 8px;
border-radius: 4px;
background: var(--bg-soft);
color: var(--ink-soft);
letter-spacing: 0.02em;
font-family: var(--sans);
}
#pageKnowledge .kb-tag.primary{ font-weight: 600; }
#pageKnowledge .kb-card[data-scenario="meta"] .kb-tag.primary{ background: var(--sc-meta-bg); color: var(--sc-meta); }
#pageKnowledge .kb-card[data-scenario="alloy"] .kb-tag.primary{ background: var(--sc-alloy-bg); color: var(--sc-alloy); }
#pageKnowledge .kb-card[data-scenario="aero"] .kb-tag.primary{ background: var(--sc-aero-bg); color: var(--sc-aero); }
#pageKnowledge .kb-card[data-scenario="turbine"] .kb-tag.primary{ background: var(--sc-turbine-bg); color: var(--sc-turbine); }
#pageKnowledge .kb-card[data-scenario="general"] .kb-tag.primary{ background: var(--sc-general-bg); color: var(--sc-general); }
#pageKnowledge .kb-meta{
position: relative; z-index: 1;
margin-top: auto;
padding-top: 10px;
border-top: 1px dashed var(--line);
display: flex; align-items: center; justify-content: space-between;
font-family: var(--mono);
font-size: 10px;
color: var(--muted);
}
#pageKnowledge .kb-meta .author{
display: flex; align-items: center; gap: 6px;
color: var(--ink-soft); min-width: 0;
}
#pageKnowledge .kb-meta .org-avatar{
width: 18px; height: 18px;
border-radius: 50%;
background: linear-gradient(135deg, #4a5680, #2a3550);
color: #fff;
display: grid; place-items: center;
font-size: 8px; font-weight: 700;
font-family: var(--display);
flex-shrink: 0;
}
#pageKnowledge .kb-meta .org-avatar[data-tone="calt"]{ background: linear-gradient(135deg, #1a2438, #3a4663); }
#pageKnowledge .kb-meta .org-avatar[data-tone="casc"]{ background: linear-gradient(135deg, #c34141, #8a2222); }
#pageKnowledge .kb-meta .org-avatar[data-tone="avic"]{ background: linear-gradient(135deg, #3a7e5c, #6db89a); }
#pageKnowledge .kb-meta .org-avatar[data-tone="buaa"]{ background: linear-gradient(135deg, #4d3b8a, #8a73c4); }
#pageKnowledge .kb-meta .org-avatar[data-tone="nuaa"]{ background: linear-gradient(135deg, #a04e30, #d18568); }
#pageKnowledge .kb-meta .org-avatar[data-tone="cnsa"]{ background: linear-gradient(135deg, #5e3814, #a0703a); }
#pageKnowledge .kb-meta .org-avatar[data-tone="sast"]{ background: linear-gradient(135deg, #5675a8, #7c9dc4); }
#pageKnowledge .kb-meta .org-avatar[data-tone="cardc"]{ background: linear-gradient(135deg, #2c4a7a, #5a7fb5); }
#pageKnowledge .kb-meta .handle{
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-size: 10px;
}
#pageKnowledge .kb-meta .stats{ display: flex; gap: 10px; flex-shrink: 0; }
#pageKnowledge .kb-meta .stat{ display: inline-flex; align-items: center; gap: 3px; }
#pageKnowledge .kb-meta .stat svg{ width: 9px; height: 9px; opacity: .65; }
#pageKnowledge .kb-meta .version{
font-family: var(--mono);
color: var(--muted-2);
font-size: 9.5px;
letter-spacing: 0.04em;
}
/* =====================================================
↓ 科学图谱库 (#pageGraphLib)
每张卡顶部内嵌 mini 拓扑预览 SVG；按场景给不同拓扑
===================================================== */
#pageGraphLib{
--bg-soft: #eaf1fa;
--paper: #ffffff;
--ink: #0d2540;
--ink-soft: #38547a;
--muted: #6b7d9a;
--muted-2: #a0b0c8;
--line: #d0dee9;
--line-soft: #e5eef7;
--accent: #2f7fd8;
--accent-soft: #6ea9e8;
--sc-meta: #6d5fb5;
--sc-meta-bg: rgba(109,95,181,.10);
--sc-alloy: #b07b3a;
--sc-alloy-bg:rgba(176,123,58,.10);
--sc-aero: #3d8fa6;
--sc-aero-bg: rgba(61,143,166,.10);
--sc-turbine: #c47715;
--sc-turbine-bg: rgba(196,119,21,.10);
--sc-general: #5675a8;
--sc-general-bg: rgba(86,117,168,.10);
--sans: "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
--serif: "Noto Serif SC", "Songti SC", "Source Han Serif SC", serif;
--display: "Cormorant Garamond", "Noto Serif SC", serif;
--mono: "JetBrains Mono", "SF Mono", Menlo, monospace;
}
:root[data-theme="origin"] #pageGraphLib {
--bg-soft: #f0ebdb; --paper: #faf7ee; --ink: #1a2438; --ink-soft: #3a4663;
--muted: #8a8676; --muted-2: #b8b3a1;
--line: #e4dec9; --line-soft: #ece6d3;
--accent: #2c4a7a; --accent-soft: #5a7fb5;
}
:root[data-theme="dark"] #pageGraphLib {
--bg-soft: #10161f; --paper: #141a24; --ink: #e8ecf3; --ink-soft: #b8c0ce;
--muted: #a0abbc; --muted-2: #7d8593;
--line: #2a3341; --line-soft: #1e2632;
--accent: #5aa9e6; --accent-soft: #7ebae8;
--sc-meta: #a798e6; --sc-meta-bg: rgba(167,152,230,.16);
--sc-alloy: #d4a961; --sc-alloy-bg: rgba(212,169,97,.16);
--sc-aero: #6dc0d6; --sc-aero-bg: rgba(109,192,214,.16);
--sc-turbine: #ffb573; --sc-turbine-bg: rgba(255,181,115,.16);
--sc-general: #7ba3d8; --sc-general-bg: rgba(123,163,216,.16);
}
:root[data-theme="dark2"] #pageGraphLib {
--bg-soft: #0f1a3c; --paper: #142347; --ink: #f4f7ff; --ink-soft: #c8d3ec;
--muted: #94a3c6; --muted-2: #6a7ea3;
--line: #2a4380; --line-soft: #1c3266;
--accent: #5aa9ff; --accent-soft: #7bbfff;
--sc-meta: #a798e6; --sc-meta-bg: rgba(167,152,230,.16);
--sc-alloy: #f5c766; --sc-alloy-bg: rgba(245,199,102,.16);
--sc-aero: #6dc0d6; --sc-aero-bg: rgba(109,192,214,.16);
--sc-turbine: #e8a04a; --sc-turbine-bg: rgba(232,160,74,.16);
--sc-general: #7ba3d8; --sc-general-bg: rgba(123,163,216,.16);
}
#pageGraphLib.page.active{
display: block;
background: var(--page-bg);
min-height: calc(100vh - 56px);
padding: 40px 56px 56px;
font-family: var(--sans);
color: var(--ink);
}
@media (max-width: 720px){ #pageGraphLib.page.active{ padding: 24px 18px 40px; } }
#pageGraphLib .apps-view{ width: 100%; max-width: 1280px; margin: 0 auto; }
#pageGraphLib .apps-header{
display: flex; align-items: flex-end; justify-content: space-between;
margin-bottom: 28px; gap: 24px; flex-wrap: wrap;
}
#pageGraphLib .apps-eyebrow{
font-family: var(--display); font-size: 12px;
letter-spacing: 0.32em; color: var(--accent);
text-transform: uppercase; margin-bottom: 8px;
}
#pageGraphLib .apps-title{
font-family: var(--serif); font-weight: 700;
font-size: 30px; color: var(--ink); letter-spacing: 0.02em; margin: 0;
}
#pageGraphLib .apps-title em{
color: var(--accent); font-style: italic; font-weight: 500;
}
#pageGraphLib .apps-head-meta{
font-size: 13px; color: var(--muted); margin-top: 6px; letter-spacing: 0.02em;
}
#pageGraphLib .apps-search{
display: flex; align-items: center; gap: 8px;
background: var(--paper); border: 1px solid var(--line);
border-radius: 999px; padding: 9px 16px;
width: 300px; max-width: 100%;
color: var(--muted);
transition: border-color .2s, box-shadow .2s;
}
#pageGraphLib .apps-search:focus-within{
border-color: var(--accent-soft);
box-shadow: 0 0 0 4px rgba(60,106,168,.06);
}
#pageGraphLib .apps-search svg{ width: 14px; height: 14px; flex-shrink: 0; }
#pageGraphLib .apps-search input{
flex: 1; min-width: 0;
border: none; outline: none; background: transparent;
font-family: var(--sans); font-size: 13px; color: var(--ink);
}
#pageGraphLib .apps-search input::placeholder{ color: var(--muted-2); }
#pageGraphLib .apps-tags{ margin-bottom: 28px; }
#pageGraphLib .tag-row{ display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#pageGraphLib .tag-row.secondary{ margin-top: 12px; }
#pageGraphLib .tag-row-label{
font-size: 13px; color: var(--muted);
letter-spacing: 0.04em; margin-right: 12px;
font-family: var(--sans); font-weight: 500; flex-shrink: 0;
}
#pageGraphLib .tag-chip{
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 14px 7px 11px; border-radius: 999px;
font-size: 13px; color: var(--ink-soft);
background: var(--paper); border: 1px solid var(--line);
cursor: pointer; transition: all .18s ease; user-select: none;
font-family: var(--sans);
}
#pageGraphLib .tag-chip svg{ width: 13px; height: 13px; opacity: .68; transition: opacity .18s; }
#pageGraphLib .tag-chip .sc-dot{
width: 9px; height: 9px; border-radius: 50%; display: inline-block;
}
#pageGraphLib .tag-chip[data-scenario="meta"] .sc-dot{ background: var(--sc-meta); }
#pageGraphLib .tag-chip[data-scenario="alloy"] .sc-dot{ background: var(--sc-alloy); }
#pageGraphLib .tag-chip[data-scenario="aero"] .sc-dot{ background: var(--sc-aero); }
#pageGraphLib .tag-chip[data-scenario="turbine"] .sc-dot{ background: var(--sc-turbine); }
#pageGraphLib .tag-chip[data-scenario="general"] .sc-dot{ background: var(--sc-general); }
/* 场景 chip icon 配色（与各场景主题色一致，替代原色点）*/
#pageGraphLib .tag-chip[data-scenario="meta"] svg{ color: var(--sc-meta); }
#pageGraphLib .tag-chip[data-scenario="alloy"] svg{ color: var(--sc-alloy); }
#pageGraphLib .tag-chip[data-scenario="aero"] svg{ color: var(--sc-aero); }
#pageGraphLib .tag-chip[data-scenario="turbine"] svg{ color: var(--sc-turbine); }
#pageGraphLib .tag-chip[data-scenario="general"] svg{ color: var(--sc-general); }
#pageGraphLib .tag-chip:hover{ background: var(--bg-soft); border-color: var(--muted-2); color: var(--ink); }
#pageGraphLib .tag-chip.active{ color: #fff; background: var(--vermilion); border-color: var(--vermilion); }
#pageGraphLib .tag-chip.active svg{ opacity: 1; color: #fff; }
#pageGraphLib .tag-chip.active .sc-dot{ box-shadow: 0 0 0 2px rgba(255,255,255,.32); }
#pageGraphLib .tag-chip-sec{
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px 6px 10px; border-radius: 6px;
font-size: 12.5px; color: var(--muted);
background: transparent; border: 1px solid transparent;
cursor: pointer; transition: all .15s; user-select: none;
font-family: var(--sans);
}
#pageGraphLib .tag-chip-sec svg{ width: 12px; height: 12px; opacity: .65; transition: opacity .15s; }
#pageGraphLib .tag-chip-sec:hover{ color: var(--ink); background: var(--bg-soft); }
#pageGraphLib .tag-chip-sec.active{ color: var(--ink); background: var(--bg-soft); font-weight: 500; }
#pageGraphLib .tools-toolbar{
display: flex; align-items: center; justify-content: space-between;
gap: 16px; flex-wrap: wrap;
margin-bottom: 22px; padding-bottom: 14px;
border-bottom: 1px solid var(--line);
}
#pageGraphLib .tools-toolbar-left{ display: inline-flex; align-items: center; gap: 16px; font-family: var(--sans); }
#pageGraphLib .toolbar-count{
font-family: var(--mono); font-size: 12px;
color: var(--muted); letter-spacing: 0.04em;
}
#pageGraphLib .toolbar-count strong{
font-family: var(--display); font-style: italic;
color: var(--ink); font-size: 15px; font-weight: 700; margin: 0 3px;
}
#pageGraphLib .tools-sort{ display: inline-flex; align-items: center; gap: 10px; }
#pageGraphLib .tools-sort-label{
font-family: var(--mono); font-size: 10.5px;
letter-spacing: 0.18em; color: var(--muted); text-transform: uppercase;
}
#pageGraphLib .tools-sort-group{
display: inline-flex; gap: 2px;
background: var(--bg-soft); border: 1px solid var(--line);
border-radius: 999px; padding: 3px;
}
#pageGraphLib .tools-sort-btn{
display: inline-flex; align-items: center; gap: 5px;
padding: 6px 13px; background: transparent; border: none;
border-radius: 999px; color: var(--muted);
font-family: var(--sans); font-size: 12px; font-weight: 600;
cursor: pointer; transition: all .2s ease; white-space: nowrap;
}
#pageGraphLib .tools-sort-btn svg{ width: 12px; height: 12px; }
#pageGraphLib .tools-sort-btn:hover:not(.is-active){ color: var(--ink); }
#pageGraphLib .tools-sort-btn.is-active{
background: var(--ink); color: var(--paper);
box-shadow: 0 4px 10px -5px rgba(0,0,0,.35);
}
#pageGraphLib .grid-empty{
text-align: center; padding: 60px 20px;
color: var(--muted); font-family: var(--sans); font-size: 14px;
background: var(--paper); border: 1px dashed var(--line); border-radius: 12px;
}
/* ===== KG 卡片网格 ===== */
#pageGraphLib .kg-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
@media (max-width: 1200px){ #pageGraphLib .kg-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px){ #pageGraphLib .kg-grid{ grid-template-columns: 1fr; } }
#pageGraphLib .kg-card{
background: var(--paper);
border: 1px solid var(--line);
border-radius: 14px;
overflow: hidden;
cursor: pointer;
display: flex; flex-direction: column;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s;
min-height: 380px;
}
#pageGraphLib .kg-card:hover{
transform: translateY(-3px);
border-color: var(--muted-2);
box-shadow: 0 18px 32px -20px rgba(40,55,80,.28);
}
/* 顶部 mini 拓扑预览 · 132px 高 */
#pageGraphLib .kg-preview{
position: relative;
height: 132px;
background:
linear-gradient(180deg, rgba(255,255,255,.4) 0%, rgba(0,0,0,.02) 100%),
var(--paper);
border-bottom: 1px solid var(--line);
overflow: hidden;
}
#pageGraphLib .kg-card[data-scenario="meta"] .kg-preview{ background: linear-gradient(180deg, rgba(109,95,181,.08) 0%, rgba(109,95,181,.02) 100%), var(--paper); }
#pageGraphLib .kg-card[data-scenario="alloy"] .kg-preview{ background: linear-gradient(180deg, rgba(176,123,58,.08) 0%, rgba(176,123,58,.02) 100%), var(--paper); }
#pageGraphLib .kg-card[data-scenario="aero"] .kg-preview{ background: linear-gradient(180deg, rgba(61,143,166,.08) 0%, rgba(61,143,166,.02) 100%), var(--paper); }
#pageGraphLib .kg-card[data-scenario="turbine"] .kg-preview{ background: linear-gradient(180deg, rgba(196,119,21,.08) 0%, rgba(196,119,21,.02) 100%), var(--paper); }
#pageGraphLib .kg-card[data-scenario="general"] .kg-preview{ background: linear-gradient(180deg, rgba(86,117,168,.08) 0%, rgba(86,117,168,.02) 100%), var(--paper); }
/* 预览底 grid 纹理（贴近 KG 可视化感） */
#pageGraphLib .kg-preview::before{
content: '';
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(40,55,80,.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(40,55,80,.04) 1px, transparent 1px);
background-size: 18px 18px;
pointer-events: none;
}
#pageGraphLib .kg-graph{
position: relative;
width: 100%; height: 100%;
z-index: 1;
color: var(--sc-general);
}
#pageGraphLib .kg-card[data-scenario="meta"] .kg-graph{ color: var(--sc-meta); }
#pageGraphLib .kg-card[data-scenario="alloy"] .kg-graph{ color: var(--sc-alloy); }
#pageGraphLib .kg-card[data-scenario="aero"] .kg-graph{ color: var(--sc-aero); }
#pageGraphLib .kg-card[data-scenario="turbine"] .kg-graph{ color: var(--sc-turbine); }
#pageGraphLib .kg-graph .kg-edge{
stroke: currentColor;
opacity: 0.55;
fill: none;
stroke-linecap: round;
}
#pageGraphLib .kg-graph .kg-edge.weak{ opacity: 0.28; }
#pageGraphLib .kg-graph .kg-node{
fill: currentColor;
stroke: var(--paper);
stroke-width: 1.2;
}
#pageGraphLib .kg-graph .kg-node.hub{ stroke-width: 1.6; }
#pageGraphLib .kg-card:hover .kg-graph{ animation: kgPulse 1.6s ease-in-out infinite; }
@keyframes kgPulse{
0%,100%{ opacity: 1; }
50% { opacity: .82; }
}
/* 头条徽章 · 右上角 */
#pageGraphLib .kg-badge{
position: absolute; right: 10px; top: 10px;
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 9px;
background: rgba(255,255,255,.92);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
border-radius: 999px;
font-family: var(--display);
font-weight: 700;
font-size: 12.5px;
letter-spacing: 0.02em;
color: var(--ink);
box-shadow: 0 2px 6px rgba(20,30,40,.10);
z-index: 2;
}
#pageGraphLib .kg-badge svg{ width: 11px; height: 11px; opacity: .8; }
#pageGraphLib .kg-card[data-scenario="meta"] .kg-badge{ color: var(--sc-meta); }
#pageGraphLib .kg-card[data-scenario="alloy"] .kg-badge{ color: var(--sc-alloy); }
#pageGraphLib .kg-card[data-scenario="aero"] .kg-badge{ color: var(--sc-aero); }
#pageGraphLib .kg-card[data-scenario="turbine"] .kg-badge{ color: var(--sc-turbine); }
#pageGraphLib .kg-card[data-scenario="general"] .kg-badge{ color: var(--sc-general); }
/* 左下：图谱类型小标识 */
#pageGraphLib .kg-type-pill{
position: absolute; left: 10px; bottom: 10px;
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 9px;
background: rgba(255,255,255,.92);
border-radius: 4px;
font-family: var(--mono);
font-size: 10px; font-weight: 600;
letter-spacing: 0.04em;
color: var(--ink-soft);
z-index: 2;
}
/* 卡片主体 */
#pageGraphLib .kg-body{
padding: 14px 16px 14px;
display: flex; flex-direction: column; gap: 9px;
flex: 1;
}
#pageGraphLib .kg-title-block{
display: flex; flex-direction: column; gap: 3px;
}
#pageGraphLib .kg-name{
font-family: var(--serif);
font-size: 16px; font-weight: 700;
color: var(--ink); line-height: 1.3;
margin: 0;
}
#pageGraphLib .kg-alias{
font-family: var(--mono);
font-size: 10.5px;
color: var(--muted);
letter-spacing: 0.04em;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#pageGraphLib .kg-desc{
font-size: 12.5px;
color: var(--ink-soft);
line-height: 1.6;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 0;
transition: -webkit-line-clamp .18s;
}
/* 悬停卡片：描述从 2 行展开为完整多行 */
#pageGraphLib .kg-card:hover .kg-desc{
-webkit-line-clamp: unset;
overflow: visible;
}
#pageGraphLib .kg-metrics{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
background: var(--bg-soft);
border-radius: 6px;
overflow: hidden;
border: 1px solid var(--line-soft);
}
#pageGraphLib .kg-metric{
padding: 7px 6px;
text-align: center;
border-right: 1px solid var(--line-soft);
display: flex; flex-direction: column; gap: 1px;
min-width: 0;
}
#pageGraphLib .kg-metric:last-child{ border-right: none; }
#pageGraphLib .kg-metric-value{
font-family: var(--display);
font-size: 14px;
font-weight: 700;
color: var(--ink);
line-height: 1.1;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#pageGraphLib .kg-metric-label{
font-family: var(--mono);
font-size: 9px;
color: var(--muted);
letter-spacing: 0.04em;
text-transform: uppercase;
}
#pageGraphLib .kg-tags{
display: flex; gap: 5px; flex-wrap: wrap;
}
#pageGraphLib .kg-tag{
font-size: 10.5px;
padding: 2px 8px;
border-radius: 4px;
background: var(--bg-soft);
color: var(--ink-soft);
letter-spacing: 0.02em;
font-family: var(--sans);
}
#pageGraphLib .kg-tag.primary{ font-weight: 600; }
#pageGraphLib .kg-card[data-scenario="meta"] .kg-tag.primary{ background: var(--sc-meta-bg); color: var(--sc-meta); }
#pageGraphLib .kg-card[data-scenario="alloy"] .kg-tag.primary{ background: var(--sc-alloy-bg); color: var(--sc-alloy); }
#pageGraphLib .kg-card[data-scenario="aero"] .kg-tag.primary{ background: var(--sc-aero-bg); color: var(--sc-aero); }
#pageGraphLib .kg-card[data-scenario="turbine"] .kg-tag.primary{ background: var(--sc-turbine-bg); color: var(--sc-turbine); }
#pageGraphLib .kg-card[data-scenario="general"] .kg-tag.primary{ background: var(--sc-general-bg); color: var(--sc-general); }
#pageGraphLib .kg-meta{
margin-top: auto;
padding-top: 10px;
border-top: 1px dashed var(--line);
display: flex; align-items: center; justify-content: space-between;
font-family: var(--mono);
font-size: 10px;
color: var(--muted);
}
#pageGraphLib .kg-meta .author{
display: flex; align-items: center; gap: 6px;
color: var(--ink-soft); min-width: 0;
}
#pageGraphLib .kg-meta .org-avatar{
width: 18px; height: 18px;
border-radius: 50%;
background: linear-gradient(135deg, #4a5680, #2a3550);
color: #fff;
display: grid; place-items: center;
font-size: 8px; font-weight: 700;
font-family: var(--display);
flex-shrink: 0;
}
#pageGraphLib .kg-meta .org-avatar[data-tone="calt"]{ background: linear-gradient(135deg, #1a2438, #3a4663); }
#pageGraphLib .kg-meta .org-avatar[data-tone="casc"]{ background: linear-gradient(135deg, #c34141, #8a2222); }
#pageGraphLib .kg-meta .org-avatar[data-tone="avic"]{ background: linear-gradient(135deg, #3a7e5c, #6db89a); }
#pageGraphLib .kg-meta .org-avatar[data-tone="buaa"]{ background: linear-gradient(135deg, #4d3b8a, #8a73c4); }
#pageGraphLib .kg-meta .org-avatar[data-tone="nuaa"]{ background: linear-gradient(135deg, #a04e30, #d18568); }
#pageGraphLib .kg-meta .org-avatar[data-tone="cnsa"]{ background: linear-gradient(135deg, #5e3814, #a0703a); }
#pageGraphLib .kg-meta .org-avatar[data-tone="sast"]{ background: linear-gradient(135deg, #5675a8, #7c9dc4); }
#pageGraphLib .kg-meta .org-avatar[data-tone="cardc"]{ background: linear-gradient(135deg, #2c4a7a, #5a7fb5); }
#pageGraphLib .kg-meta .handle{
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-size: 10px;
}
#pageGraphLib .kg-meta .stats{ display: flex; gap: 10px; flex-shrink: 0; }
#pageGraphLib .kg-meta .stat{ display: inline-flex; align-items: center; gap: 3px; }
#pageGraphLib .kg-meta .stat svg{ width: 9px; height: 9px; opacity: .65; }
#pageGraphLib .kg-meta .version{
font-family: var(--mono);
color: var(--muted-2);
font-size: 9.5px;
letter-spacing: 0.04em;
}
/* =====================================================
↓ Tab 切换骨架屏（5 个 library page 通用）
参考 home.html .view-skeleton + .is-loading 机制
每次切到 KB / KG / 工具 / 技能 / 设备 库时短暂展示 ~420ms
===================================================== */
@keyframes spaceSkelShimmer {
0% { background-position: -240% 0; }
100% { background-position: 240% 0; }
}
.sk-bar, .sk-circle{
background: linear-gradient(90deg, rgba(60,40,20,.05) 0%, rgba(60,40,20,.13) 50%, rgba(60,40,20,.05) 100%);
background-size: 200% 100%;
animation: spaceSkelShimmer 1.5s ease-in-out infinite;
border-radius: 4px;
}
.sk-circle{ border-radius: 50%; }
.page > .view-skel{
display: none;
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 40px 56px 56px;
box-sizing: border-box;
position: absolute;
left: 0; right: 0; top: 0;
}
@media (max-width: 720px){
.page > .view-skel{ padding: 24px 18px 40px; }
}
.page.is-loading{ position: relative; }
.page.is-loading > .view-skel{ display: block; }
.page.is-loading > .apps-view{
opacity: 0;
pointer-events: none;
}
.page > .apps-view{
transition: opacity .32s ease;
}
.view-skel .sk-view-head{
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
margin-bottom: 28px;
}
.view-skel .sk-head-left{ display: flex; flex-direction: column; gap: 10px; }
.view-skel .sk-eyebrow{ width: 220px; height: 10px; }
.view-skel .sk-title-bar{ width: 180px; height: 28px; }
.view-skel .sk-meta{ width: 380px; max-width: 60vw; height: 11px; }
.view-skel .sk-search{ width: 300px; height: 38px; border-radius: 999px; }
.view-skel .sk-tag-row{
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 12px;
}
.view-skel .sk-tag-row:last-of-type{ margin-bottom: 22px; }
.view-skel .sk-tag-label{ width: 64px; height: 12px; margin-right: 6px; }
.view-skel .sk-chip{
width: 84px; height: 30px;
border-radius: 999px;
}
.view-skel .sk-chip.sm{
width: 76px; height: 26px;
border-radius: 6px;
}
.view-skel .sk-toolbar{
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 14px;
margin-bottom: 22px;
border-bottom: 1px solid var(--rule);
}
.view-skel .sk-count{ width: 150px; height: 14px; }
.view-skel .sk-sort{ width: 200px; height: 30px; border-radius: 999px; }
.view-skel .sk-grid-4{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.view-skel .sk-grid-3{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.view-skel .sk-grid-2{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
}
@media (max-width: 1200px){
.view-skel .sk-grid-4{ grid-template-columns: repeat(3, 1fr); }
.view-skel .sk-grid-3{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px){
.view-skel .sk-grid-4{ grid-template-columns: repeat(2, 1fr); }
.view-skel .sk-grid-2{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
.view-skel .sk-grid-3{ grid-template-columns: 1fr; }
}
/* —— 卡片：compact (Tools) —— */
.view-skel .sk-card{
background: var(--paper);
border: 1px solid var(--rule);
border-radius: 12px;
padding: 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
.view-skel .sk-card.compact{ min-height: 196px; }
.view-skel .sk-card .sk-card-top{
display: flex;
align-items: center;
gap: 11px;
}
.view-skel .sk-card .sk-icon-block{
width: 38px; height: 38px;
border-radius: 9px;
flex-shrink: 0;
}
.view-skel .sk-card .sk-card-name-block{
flex: 1;
display: flex;
flex-direction: column;
gap: 5px;
}
.view-skel .sk-card .sk-card-name{ width: 80%; height: 14px; }
.view-skel .sk-card .sk-card-pkg{ width: 60%; height: 8px; }
.view-skel .sk-card .sk-desc-line{ width: 100%; height: 9px; }
.view-skel .sk-card .sk-desc-line.short{ width: 72%; }
.view-skel .sk-card .sk-tags-row{
display: flex;
gap: 6px;
margin-top: 2px;
}
.view-skel .sk-card .sk-mini-chip{
width: 50px; height: 16px;
border-radius: 4px;
}
.view-skel .sk-card .sk-foot{
margin-top: auto;
padding-top: 10px;
border-top: 1px dashed var(--rule);
display: flex;
align-items: center;
gap: 8px;
}
.view-skel .sk-card .sk-foot .sk-mini-circle{
width: 18px; height: 18px;
flex-shrink: 0;
}
.view-skel .sk-card .sk-foot .sk-foot-name{
flex: 1;
height: 10px;
max-width: 110px;
}
.view-skel .sk-card .sk-foot .sk-foot-stat{
width: 36px; height: 10px;
}
/* —— 卡片：horizontal (Skills) —— */
.view-skel .sk-card.horizontal{
min-height: 170px;
padding: 18px 22px 14px;
display: grid;
grid-template-columns: 56px 1fr auto;
grid-template-rows: auto auto auto auto;
column-gap: 16px;
row-gap: 10px;
}
.view-skel .sk-card.horizontal .sk-big-icon{
width: 56px; height: 56px;
border-radius: 13px;
grid-column: 1;
grid-row: 1;
}
.view-skel .sk-card.horizontal .sk-name-block{
grid-column: 2;
grid-row: 1;
align-self: center;
display: flex;
flex-direction: column;
gap: 6px;
}
.view-skel .sk-card.horizontal .sk-name-block .sk-bar:first-child{
width: 70%; height: 16px;
}
.view-skel .sk-card.horizontal .sk-name-block .sk-bar:last-child{
width: 45%; height: 10px;
}
.view-skel .sk-card.horizontal .sk-level{
grid-column: 3;
grid-row: 1;
justify-self: end;
width: 48px; height: 22px;
border-radius: 999px;
}
.view-skel .sk-card.horizontal .sk-h-desc{
grid-column: 1 / -1;
grid-row: 2;
display: flex;
flex-direction: column;
gap: 6px;
}
.view-skel .sk-card.horizontal .sk-h-tags{
grid-column: 1 / -1;
grid-row: 3;
display: flex;
gap: 6px;
}
.view-skel .sk-card.horizontal .sk-h-foot{
grid-column: 1 / -1;
grid-row: 4;
padding-top: 10px;
border-top: 1px dashed var(--rule);
display: flex;
align-items: center;
gap: 8px;
}
/* —— 卡片：cover-top (Devices) —— */
.view-skel .sk-card.cover-top{
padding: 0;
min-height: 380px;
border-radius: 14px;
overflow: hidden;
}
.view-skel .sk-card.cover-top .sk-cover{
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 0;
border-bottom: 1px solid var(--rule);
background:
linear-gradient(135deg, rgba(60,40,20,.10) 0%, rgba(60,40,20,.16) 100%);
}
.view-skel .sk-card.cover-top .sk-cover-body{
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 9px;
flex: 1;
}
.view-skel .sk-card.cover-top .sk-specs{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px 14px;
padding: 8px 10px;
border-radius: 6px;
background: var(--bg-soft);
}
.view-skel .sk-card.cover-top .sk-specs .sk-bar{ height: 14px; }
/* —— 卡片：spine-left (Knowledge) —— */
.view-skel .sk-card.spine-left{
position: relative;
padding: 16px 18px 14px 22px;
border-left: none;
min-height: 280px;
}
.view-skel .sk-card.spine-left::before{
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 6px;
background: linear-gradient(180deg, rgba(60,40,20,.18) 0%, rgba(60,40,20,.08) 100%);
}
.view-skel .sk-card.spine-left .sk-metrics{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
background: var(--bg-soft);
border: 1px solid var(--rule);
border-radius: 6px;
overflow: hidden;
}
.view-skel .sk-card.spine-left .sk-metrics > div{
padding: 8px 6px;
border-right: 1px solid var(--rule);
display: flex;
flex-direction: column;
gap: 4px;
align-items: center;
}
.view-skel .sk-card.spine-left .sk-metrics > div:last-child{ border-right: none; }
.view-skel .sk-card.spine-left .sk-metrics .sk-bar{ width: 70%; height: 14px; }
.view-skel .sk-card.spine-left .sk-metrics .sk-bar.small{ width: 50%; height: 8px; }
/* —— 卡片：preview-top (Graphs / KG) —— */
.view-skel .sk-card.preview-top{
padding: 0;
min-height: 380px;
border-radius: 14px;
overflow: hidden;
}
.view-skel .sk-card.preview-top .sk-graph-preview{
position: relative;
height: 132px;
border-bottom: 1px solid var(--rule);
background:
linear-gradient(90deg, rgba(60,40,20,.05) 0%, rgba(60,40,20,.13) 50%, rgba(60,40,20,.05) 100%);
background-size: 200% 100%;
animation: spaceSkelShimmer 1.5s ease-in-out infinite;
}
.view-skel .sk-card.preview-top .sk-graph-preview::before{
content: '';
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(40,55,80,.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(40,55,80,.06) 1px, transparent 1px);
background-size: 18px 18px;
pointer-events: none;
}
.view-skel .sk-card.preview-top .sk-preview-body{
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 9px;
flex: 1;
}