:root { color-scheme: light dark; /* ===== 设计令牌（静态玻璃皮肤）===== 本次只替换视觉皮肤：配色 / 材质 / 圆角 / 阴影 / 排版层级。 DOM 结构、视图划分与交互流程一律未动。 玻璃材质三条硬规则（四个主题档共用）： 1) 表面 = 半透明填充 + 1px 极细描边 + 顶部 1px 内高光（模拟边缘折射） 2) 表面层次改用「描边 + 顶部 1px 内高光」这类非模糊手段表达（V1 起关闭毛玻璃）； 内容卡靠半透明 + 描边 + 阴影表达层次，避免几十个元素同时开模糊 3) 全静态：不新增任何动效、发光或渐变堆叠 字体：CSP 仅允许 'self' 与 data:，无法外链字体，因此只用系统字体栈。 */ --font-sans: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", "HarmonyOS Sans SC", "MiSans", "PingFang SC", "Microsoft YaHei", sans-serif; --font-mono: ui-monospace, "Cascadia Code", "SF Mono", "JetBrains Mono", Consolas, "Liberation Mono", monospace; /* ---- 尺度：圆角 / 容器 / 栅格 ---- */ --radius: 12px; --radius-sm: 8px; --radius-xs: 6px; /* O-17：顶栏与内容区共用同一容器宽度，保证左基线对齐 */ --shell: 1200px; --gutter: 24px; /* ---- 玻璃材质（浅色档）---- */ --glass-1: rgba(255, 255, 255, 0.68); --glass-2: rgba(255, 255, 255, 0.84); --glass-3: rgba(255, 255, 255, 0.95); --glass-inset: rgba(19, 26, 34, 0.035); --glass-line: rgba(19, 26, 34, 0.09); --glass-line-strong: rgba(19, 26, 34, 0.18); --glass-hi: inset 0 1px 0 rgba(255, 255, 255, 0.9); --glass-drop: 0 18px 40px -24px rgba(19, 26, 34, 0.35); --shell-bg: rgba(255, 255, 255, 0.72); --blur-1: blur(14px) saturate(150%); --blur-2: blur(22px) saturate(170%); /* 环境光（静态）：玻璃层需要有东西可模糊，纯平底上磨砂看不出来 */ --atmo-1: rgba(11, 111, 102, 0.10); --atmo-2: rgba(46, 92, 180, 0.07); --atmo-3: rgba(255, 255, 255, 0.75); --grain-op: 0.020; /* ---- 底色 / 文字（冷中性灰，四档同一色相家族）---- */ --bg-0: #eceff3; --bg-1: #ffffff; --surface: var(--glass-2); --surface-raised: var(--glass-3); --panel: var(--glass-1); --panel-strong: var(--glass-2); --line: var(--glass-line); --line-strong: var(--glass-line-strong); --text: #14181d; --muted: #5c6672; /* ---- 强调色：全站只用这一种，面积占比 < 5% ---- */ --accent: #0b6f66; --accent-2: var(--accent); --accent-soft: rgba(11, 111, 102, 0.10); --accent-line: rgba(11, 111, 102, 0.30); --accent-hover: #095c55; --on-accent: #ffffff; --sel-bg: rgba(11, 111, 102, 0.20); /* ---- 语义色（浅色档）---- */ --warm: #8a6212; /* O-17 修复：--warn / --ok 此前被 13 处声明引用，却从未在任何主题里定义， var() 解析失败会导致整条声明被丢弃（如 .pkt-warn{fill} 实际没生效）。 */ --warn: #8a6212; --ok: #1a7a4a; --danger: #c33a45; --ok-soft: rgba(26, 122, 74, 0.12); --ok-line: rgba(26, 122, 74, 0.30); --warn-soft: rgba(138, 98, 18, 0.12); --warn-line: rgba(138, 98, 18, 0.32); --danger-soft: rgba(195, 58, 69, 0.11); --danger-line: rgba(195, 58, 69, 0.32); --info-soft: rgba(47, 99, 184, 0.10); --info-line: rgba(47, 99, 184, 0.30); --neutral-soft: rgba(19, 26, 34, 0.05); --neutral-line: rgba(19, 26, 34, 0.16); /* O-17：站内图标集的最小可用件（mask 用），避免再用 ✓ / ↗ 等文本字符当图标 */ --ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.2 5.2L20 7'/%3E%3C/svg%3E"); --shadow: 0 10px 30px -18px rgba(19, 26, 34, 0.28); --glow: none; /* light-theme surface tokens (inset panels / code / hover) */ --soft-bg: var(--glass-inset); --code-bg: rgba(19, 26, 34, 0.06); --code-text: #0f3d38; --pre-bg: #f7f9fb; --pre-text: #14181d; --row-hover: rgba(19, 26, 34, 0.035); --qcard-hover: var(--glass-3); --syn-c: #6b7482; --syn-k: #7a3ea8; --syn-s: #0a4a6e; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; /* ---- 玻璃材质（深色档）---- */ --glass-1: rgba(255, 255, 255, 0.042); --glass-2: rgba(255, 255, 255, 0.062); --glass-3: rgba(255, 255, 255, 0.088); --glass-inset: rgba(255, 255, 255, 0.032); --glass-line: rgba(255, 255, 255, 0.085); --glass-line-strong: rgba(255, 255, 255, 0.16); --glass-hi: inset 0 1px 0 rgba(255, 255, 255, 0.06); --glass-drop: 0 20px 44px -26px rgba(0, 0, 0, 0.85); --shell-bg: rgba(11, 13, 17, 0.62); --atmo-1: rgba(52, 195, 174, 0.10); --atmo-2: rgba(105, 140, 220, 0.075); --atmo-3: rgba(255, 255, 255, 0.035); --grain-op: 0.038; /* ---- 底色 / 文字 ---- */ --bg-0: #08090b; --bg-1: #0b0d11; --surface: var(--glass-2); --surface-raised: var(--glass-3); --panel: var(--glass-1); --panel-strong: var(--glass-2); --line: var(--glass-line); --line-strong: var(--glass-line-strong); --text: #e9ecef; --muted: #8d949f; /* ---- 强调色 ---- */ --accent: #34c3ae; --accent-2: var(--accent); --accent-soft: rgba(52, 195, 174, 0.12); --accent-line: rgba(52, 195, 174, 0.30); --accent-hover: #45d4be; --on-accent: #04211d; --sel-bg: rgba(52, 195, 174, 0.26); /* ---- 语义色 ---- */ --warm: #96620B; --warn: #96620B; --ok: #45b97c; --danger: #e8737d; --ok-soft: rgba(69, 185, 124, 0.13); --ok-line: rgba(69, 185, 124, 0.30); --warn-soft: rgba(150, 98, 11, 0.13); --warn-line: rgba(150, 98, 11, 0.32); --danger-soft: rgba(232, 115, 125, 0.13); --danger-line: rgba(232, 115, 125, 0.32); --info-soft: rgba(127, 159, 224, 0.12); --info-line: rgba(127, 159, 224, 0.30); --neutral-soft: rgba(255, 255, 255, 0.05); --neutral-line: rgba(255, 255, 255, 0.14); --shadow: 0 18px 40px -26px rgba(0, 0, 0, 0.85); /* dark-theme surface tokens */ --soft-bg: var(--glass-inset); --code-bg: rgba(255, 255, 255, 0.06); --code-text: #8fd8cc; --pre-bg: rgba(0, 0, 0, 0.28); --pre-text: #e9ecef; --row-hover: rgba(255, 255, 255, 0.035); --qcard-hover: var(--glass-2); --syn-c: #7a8494; --syn-k: #E4663A; --syn-s: #e0a985; } } /* explicit overrides win over system preference */ :root[data-theme="light"] { color-scheme: light; --glass-1: rgba(255, 255, 255, 0.68); --glass-2: rgba(255, 255, 255, 0.84); --glass-3: rgba(255, 255, 255, 0.95); --glass-inset: rgba(19, 26, 34, 0.035); --glass-line: rgba(19, 26, 34, 0.09); --glass-line-strong: rgba(19, 26, 34, 0.18); --glass-hi: inset 0 1px 0 rgba(255, 255, 255, 0.9); --glass-drop: 0 18px 40px -24px rgba(19, 26, 34, 0.35); --shell-bg: rgba(255, 255, 255, 0.72); --atmo-1: rgba(11, 111, 102, 0.10); --atmo-2: rgba(46, 92, 180, 0.07); --atmo-3: rgba(255, 255, 255, 0.75); --grain-op: 0.020; --bg-0: #eceff3; --bg-1: #ffffff; --surface: var(--glass-2); --surface-raised: var(--glass-3); --panel: var(--glass-1); --panel-strong: var(--glass-2); --line: var(--glass-line); --line-strong: var(--glass-line-strong); --text: #14181d; --muted: #5c6672; --accent: #0b6f66; --accent-2: var(--accent); --accent-soft: rgba(11, 111, 102, 0.10); --accent-line: rgba(11, 111, 102, 0.30); --accent-hover: #095c55; --on-accent: #ffffff; --sel-bg: rgba(11, 111, 102, 0.20); --warm: #8a6212; --warn: #8a6212; --ok: #1a7a4a; --danger: #c33a45; --ok-soft: rgba(26, 122, 74, 0.12); --ok-line: rgba(26, 122, 74, 0.30); --warn-soft: rgba(138, 98, 18, 0.12); --warn-line: rgba(138, 98, 18, 0.32); --danger-soft: rgba(195, 58, 69, 0.11); --danger-line: rgba(195, 58, 69, 0.32); --info-soft: rgba(47, 99, 184, 0.10); --info-line: rgba(47, 99, 184, 0.30); --neutral-soft: rgba(19, 26, 34, 0.05); --neutral-line: rgba(19, 26, 34, 0.16); --shadow: 0 10px 30px -18px rgba(19, 26, 34, 0.28); --soft-bg: var(--glass-inset); --code-bg: rgba(19, 26, 34, 0.06); --code-text: #0f3d38; --pre-bg: #f7f9fb; --pre-text: #14181d; --row-hover: rgba(19, 26, 34, 0.035); --qcard-hover: var(--glass-3); --syn-c: #6b7482; --syn-k: #7a3ea8; --syn-s: #0a4a6e; } :root[data-theme="dark"] { color-scheme: dark; --glass-1: rgba(255, 255, 255, 0.042); --glass-2: rgba(255, 255, 255, 0.062); --glass-3: rgba(255, 255, 255, 0.088); --glass-inset: rgba(255, 255, 255, 0.032); --glass-line: rgba(255, 255, 255, 0.085); --glass-line-strong: rgba(255, 255, 255, 0.16); --glass-hi: inset 0 1px 0 rgba(255, 255, 255, 0.06); --glass-drop: 0 20px 44px -26px rgba(0, 0, 0, 0.85); --shell-bg: rgba(11, 13, 17, 0.62); --atmo-1: rgba(52, 195, 174, 0.10); --atmo-2: rgba(105, 140, 220, 0.075); --atmo-3: rgba(255, 255, 255, 0.035); --grain-op: 0.038; --bg-0: #08090b; --bg-1: #0b0d11; --surface: var(--glass-2); --surface-raised: var(--glass-3); --panel: var(--glass-1); --panel-strong: var(--glass-2); --line: var(--glass-line); --line-strong: var(--glass-line-strong); --text: #e9ecef; --muted: #8d949f; --accent: #34c3ae; --accent-2: #7f9fe0; --accent-soft: rgba(52, 195, 174, 0.12); --accent-line: rgba(52, 195, 174, 0.30); --accent-hover: #45d4be; --on-accent: #04211d; --sel-bg: rgba(52, 195, 174, 0.26); --warm: #96620B; --warn: #96620B; --ok: #45b97c; --danger: #e8737d; --ok-soft: rgba(69, 185, 124, 0.13); --ok-line: rgba(69, 185, 124, 0.30); --warn-soft: rgba(150, 98, 11, 0.13); --warn-line: rgba(150, 98, 11, 0.32); --danger-soft: rgba(232, 115, 125, 0.13); --danger-line: rgba(232, 115, 125, 0.32); --info-soft: rgba(127, 159, 224, 0.12); --info-line: rgba(127, 159, 224, 0.30); --neutral-soft: rgba(255, 255, 255, 0.05); --neutral-line: rgba(255, 255, 255, 0.14); --shadow: 0 18px 40px -26px rgba(0, 0, 0, 0.85); --soft-bg: var(--glass-inset); --code-bg: rgba(255, 255, 255, 0.06); --code-text: #8fd8cc; --pre-bg: rgba(0, 0, 0, 0.28); --pre-text: #e9ecef; --row-hover: rgba(255, 255, 255, 0.035); --qcard-hover: var(--glass-2); --syn-c: #7a8494; --syn-k: #E4663A; --syn-s: #e0a985; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; min-height: 100%; background-color: var(--bg-0); color: var(--text); font-family: var(--font-sans); font-size: 15px; line-height: 1.65; -webkit-font-smoothing: antialiased; } /* color transitions for all themed surfaces */ .sidebar, .viewbar, .panel, .diag-card, .modal, .user-menu, .qcard, .stat, .chip, .badge, .btn, input, textarea, select, table, th, td, .doc-callout, code, pre { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } body { background-color: var(--bg-0); } /* ===== 静态环境光与细颗粒（玻璃的「底」）===== 磨砂玻璃要成立，前提是背后有东西可被模糊。此前为了「纯平」把所有装饰底 都删了，结果半透明面层在纯平底上只会显得"发灰"，读不出玻璃。 这里固定渲染两层背景：极低透明度的冷色环境光 + 细颗粒。 两者都 pointer-events:none / z-index:0，落在 .app（z-index:1）之下； 全静态，不含任何动画，也不参与交互。 */ body::before, body::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; } body::before { /* V1 数据手册风：环境光晕全站关闭。 原来这里的三层 --atmo 径向晕染就是正文背后那团橙色污渍的来源； 令牌已在覆盖层置空，这里连同写法一并删掉，避免再被误开。 */ background: none; } /* 细颗粒：SVG feTurbulence 内联 data URI（CSP 的 img-src 允许 data:）， 用于破掉纯平的矢量感，是「玻璃有实体」的关键细节之一。 */ body::after { opacity: var(--grain-op); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 160px 160px; } ::selection { background: var(--sel-bg); color: var(--text); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg-0); } ::-webkit-scrollbar-thumb { background: var(--glass-line-strong); border-radius:2px; border: 2px solid var(--bg-0); }@media (hover: hover) { ::-webkit-scrollbar-thumb:hover { background: var(--muted); }} #progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--accent); z-index: 99; transition: width 0.08s linear; } /* ===== app shell ===== */ /* 视觉隐藏但屏幕阅读器可读（O-10）：用于 等有语义但不该显示的内容 */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .app { position: relative; z-index: 1; display: flex; min-height: 100vh; } .sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: 236px; z-index: 40; display: flex; flex-direction: column; padding: 22px 14px 16px; background: var(--bg-0); border-right: 1px solid var(--line); overflow-y: auto; } .side-brand { display: flex; align-items: center; gap: 11px; padding: 0 8px; } .logo { width: 38px; height: 38px; flex: none; border-radius:2px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.18); display: grid; place-items: center; } /* 光纤弧位图图标：位图自带圆角与深蓝玻璃底，去掉旧链环时代的方章外壳。 双类名提升优先级，压过 instrument.css 对 .logo 的实心色覆盖。 */ .logo.logo--icon, .modal .m-logo.m-logo--icon { background: transparent; border: 0; padding: 0; border-radius: 9px; overflow: hidden; } .logo.logo--icon img, .modal .m-logo.m-logo--icon img { width: 100%; height: 100%; object-fit: cover; display: block; } .side-name { font-weight: 600; font-size: 16.5px; letter-spacing: 0.5px; } .side-name em { font-style: normal; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: 1px; } .side-tag { color: var(--muted); font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; margin-top: 3px; white-space: nowrap; } .side-tag .tag-dot { color: var(--accent); letter-spacing: 0; } .side-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; margin-top: 20px; } .side-group { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); opacity: 0.72; margin: 18px 10px 6px; } .side-nav .side-group:first-child { margin-top: 0; } /* ===== workspaces (collapsible groups) ===== */ .ws { margin-bottom: 2px; } .ws-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; background: transparent; border: 0; border-radius:2px; color: var(--muted); font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; cursor: pointer; text-align: left; transition: color 0.15s, background 0.15s; }@media (hover: hover) { .ws-head:hover { color: var(--text); background: var(--accent-soft); }} .ws-ico { display: inline-flex; color: var(--muted); }@media (hover: hover) { .ws-head:hover .ws-ico { color: var(--accent); }} /* 折叠箭头（O-09）：原先是 10px「▾」文字，颜色极淡几乎看不出可点击。 换成 SVG chevron 并加深颜色，随折叠状态旋转。 */ .ws-caret { margin-left: auto; display: inline-flex; align-items: center; color: var(--muted); transition: transform 0.2s; } .ws-caret svg { display: block; } .ws.collapsed .ws-caret { transform: rotate(-90deg); } .ws-body { overflow: hidden; transition: max-height 0.25s ease, opacity 0.2s; max-height: 400px; opacity: 1; } .ws.collapsed .ws-body { max-height: 0; opacity: 0; } /* 当前视图所在组高亮组头（O-09）——15 个入口不必一次性全亮 */ .ws.active > .ws-head { color: var(--text); } .ws.active > .ws-head .ws-ico, .ws.active > .ws-head .ws-caret { color: var(--accent); } /* 侧栏内容超出视口时的底部提示（O-09）： 原用 mask-image 渐隐收边；V1 关掉一切渐变，改由滚动条自身表达。 */ .sidebar.has-more { } .side-link { position: relative; display: flex; align-items: center; gap: 9px; padding: 9px 13px; border-radius:2px; color: var(--muted); font-size: 13.5px; cursor: pointer; user-select: none; /* 补 href 后是真链接，去掉浏览器默认下划线（N-02） */ text-decoration: none; transition: color 0.18s ease, background 0.18s ease; }@media (hover: hover) { .side-link:hover { color: var(--text); background: var(--accent-soft); }} .side-link.active { color: var(--text); font-weight: 600; background: var(--accent-soft); } .side-link.active::before { content: ""; position: absolute; left: 0; top: 24%; bottom: 24%; width: 3px; border-radius:2px; background: var(--accent); } /* external link entry (AIDC monitor platform jump) */ .side-ext { color: var(--accent); }@media (hover: hover) { .side-ext:hover { color: var(--accent); }} /* O-17：外链箭头统一用站内 SVG 图标集（原为 `↗` 文本字符， 与侧栏 6 个分组的 24×24 stroke 图标不是同一套视觉语言）。 */ .side-ext .ext-arrow { margin-left: auto; flex: none; width: 12px; height: 12px; opacity: 0.7; transition: transform 0.18s ease; }@media (hover: hover) { .side-ext:hover .ext-arrow { transform: translate(2px, -2px); }} /* gated state: cluster not connected yet */ .side-ext.aidc-gated { color: var(--muted); opacity: 0.5; cursor: not-allowed; background: transparent; } .qcard.aidc-gated { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.6); } .aidc-mon-status { padding: 2px 12px 6px; font-size: 11px; line-height: 1.5; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .aidc-mon-status.ok { color: #1a7f37; } .aidc-mon-status.bad { color: #9a6700; } /* 云机数据角标：标注硬件板块读自云服务器 /proc/sys，非用户本地 */ .cloud-badge { display: inline-block; padding: 2px 10px; font-size: 11px; font-weight: 600; color: #9a6700; background: rgba(154,103,0,0.12); border-radius:2px; cursor: help; white-space: nowrap; } @keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } } .side-foot { margin-top: 18px; padding: 12px 12px; border: 1px solid var(--line); border-radius:2px; background: var(--soft-bg); display: flex; flex-direction: column; gap: 6px; } .side-foot-sub { color: var(--muted); font-size: 11.5px; font-family: "JetBrains Mono", Consolas, monospace; letter-spacing: 0.02em; } .main { flex: 1; margin-left: 236px; display: flex; flex-direction: column; min-height: 100vh; } .viewbar { position: sticky; top: 0; z-index: 30; min-height: 60px; display: flex; align-items: center; justify-content: space-between; /* O-17：与 .content 共用同一容器宽度（--shell / --gutter）， 使顶栏左边缘与内容区左边缘落在同一条基线上（此前 1204px vs 1080px）。 */ padding: 10px max(var(--gutter), calc((100% - var(--shell)) / 2 + var(--gutter))); border-bottom: 1px solid var(--line); background: var(--bg-0); } .view-title { font-weight: 600; font-size: 15px; letter-spacing: 0.02em; color: var(--text); line-height: 1.3; } .breadcrumb { font-size: 11.5px; color: var(--muted); margin-top: 2px; display: flex; align-items: center; gap: 6px; } .breadcrumb .bc-seg { color: var(--muted); } .breadcrumb .bc-seg:last-child { color: var(--text); font-weight: 500; } .breadcrumb .bc-sep { opacity: 0.4; } /* ===== 关键目标健康自检告警条（N-06）===== 默认 hidden，只在启动探测发现关键目标不可达时出现。用 warn 色而非 danger：资源不可达不等于站点坏了，主站自身仍然可用。 类名用 selfcheck-bar 而非 health-bar —— 后者在下方"探测目标健康度" 卡片里已被用作 4px 进度条（.health-bar i），两个组件同名会互相污染。 */ .selfcheck-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 14px 30px 0; padding: 10px 14px; border: 1px solid var(--line); border-left: 3px solid var(--warn, #d29922); border-radius:2px; background: var(--soft-bg); font-size: 13px; color: var(--text); } .selfcheck-bar[hidden] { display: none; } .selfcheck-bar .health-text { flex: 1; min-width: 200px; line-height: 1.5; } .selfcheck-bar .health-retry { flex: none; font: inherit; font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius:2px; cursor: pointer; color: var(--text); background: var(--panel-strong); border: 1px solid var(--line); }@media (hover: hover) { .selfcheck-bar .health-retry:hover { border-color: var(--accent); color: var(--accent); }} /* 统一的异步按钮三态（P1-4）：busy 时前置一枚 currentColor 小转圈； 暂停等开关态用 .is-active 高亮（朱红描边），作为「已暂停」标识。 */ .btn.is-loading::before, .selfcheck-bar .health-retry.is-loading::before { content: ""; display: inline-block; width: 11px; height: 11px; margin-right: 6px; vertical-align: -1px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: btn-spin 0.7s linear infinite; } @keyframes btn-spin { to { transform: rotate(360deg); } } .btn.is-active { border-color: var(--accent); color: var(--accent); } /* 自检判定为死链的入口：置灰 + 不可点，并标出原因 */ .is-broken { opacity: 0.45; cursor: not-allowed; } .is-broken::after { content: '（不可达）'; font-size: 11px; color: var(--muted); margin-left: 4px; } /* ===== 全局命令面板（N-12）===== 侧栏 15 个入口分 6 组，外加入口若干 —— 找一个视图要逐级展开。 Cmd/Ctrl+K 打开搜索式直达面板。开合复用 .modal-mask 的 .show 机制 （连带复用既有焦点陷阱与 Esc 关闭），这里只补内部结构。 */ .modal.cmdk { width: min(560px, calc(100% - 40px)); padding: 0; overflow: hidden; /* 修 P0-2：面板改回「fixed 置布 + 垂直居中」。 旧写法 align-self:flex-start + margin-top:11vh 在内容偏高时会把面板 顶部顶出视口上方（输入框被裁切、无法聚焦）。这里去掉顶部对齐， 交给 .modal-mask 的 align-items:center 居中；最大高度约束在视口内， 超出部分由内部 .cmdk-list 自己滚动。 */ max-height: min(540px, calc(100vh - 48px)); display: flex; flex-direction: column; animation: pop 0.16s ease; } .cmdk-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); color: var(--muted); } .cmdk-head input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--text); font: inherit; font-size: 15px; } .cmdk-head input::placeholder { color: var(--muted); } .cmdk-list { position: relative; flex: 1; overflow-y: auto; padding: 6px; } .cmdk-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 11px; border-radius:2px; border: 0; background: none; cursor: pointer; color: var(--text); font: inherit; font-size: 13.5px; } .cmdk-item .cmdk-ws { flex: none; margin-left: auto; color: var(--muted); font-size: 11.5px; } .cmdk-item[aria-selected="true"] { background: var(--accent-soft); } .cmdk-item[aria-selected="true"] .cmdk-ws { color: var(--accent); } .cmdk-empty { padding: 26px 14px; text-align: center; color: var(--muted); font-size: 13px; } .cmdk-foot { display: flex; gap: 14px; flex-wrap: wrap; padding: 9px 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11.5px; } .cmdk-foot span { display: inline-flex; align-items: center; gap: 4px; } /* ===== 四态组件：空 / 加载 / 错误 / 无权限（O-18）===== 此前四种状态各写各的（有的是一行灰字、有的临时拼个按钮），文案与结构都不统一。 这里定成一套：状态图标 + 一句人话 + 一个明确的下一步。 用法见 app.js 里的 YiLinkState.build/render。 */ .state { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 26px 20px; border: 1px dashed var(--line); border-radius:2px; background: var(--soft-bg); color: var(--muted); font-size: 13px; } .state .state-ico { opacity: .7; } .state .state-text { margin: 0; max-width: 48ch; line-height: 1.7; } .state .state-text b { color: var(--text); } .state .state-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; } .state-error { border-style: solid; border-color: var(--danger); } .state-error .state-text { color: var(--text); } .state-denied { border-style: solid; border-color: var(--line-strong); } /* 错误态：可展开的技术详情，普通访客默认不看 */ .state details { width: 100%; text-align: left; } .state details summary { cursor: pointer; font-size: 12px; } .state details pre { margin: 8px 0 0; padding: 8px 10px; border-radius:2px; background: var(--panel-strong); border: 1px solid var(--line); font: 11.5px/1.6 Consolas, monospace; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; } /* 加载态用骨架块而非"加载中…"文字，避免内容到位时的布局跳动 */ .skel { display: flex; flex-direction: column; gap: 8px; width: 100%; } .skel i { display: block; height: 12px; border-radius:2px; background: var(--soft-bg); } .skel i:nth-child(2) { width: 82%; } .skel i:nth-child(3) { width: 64%; } @keyframes skel { from { background-position: 100% 0; } to { background-position: 0 0; } } @media (prefers-reduced-motion: reduce) { .skel i { animation: none; } } kbd { display: inline-block; padding: 1px 5px; border-radius:2px; border: 1px solid var(--line-strong); background: var(--soft-bg); font: 500 11px/1.5 Consolas, monospace; color: var(--muted); } .user-slot { position: relative; } .user-btn { display: inline-flex; align-items: center; gap: 9px; padding: 6px 12px 6px 6px; border-radius:2px; border: 1px solid var(--line); background: rgba(255,255,255,0.03); color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s; }@media (hover: hover) { .user-btn:hover { border-color: rgba(45,212,191,0.4); background: rgba(255,255,255,0.06); }} .user-btn.is-logged { border-color: rgba(45,212,191,0.45); } .user-avatar { width: 28px; height: 28px; border-radius:50%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18); display: grid; place-items: center; color: var(--accent); flex: none; } .user-avatar svg { display: block; } .user-caret { color: var(--muted); font-size: 10px; margin-left: 2px; transition: transform .15s; } .user-slot.open .user-caret { transform: rotate(180deg); } .user-menu { position: absolute; top: calc(100% + 8px); right: 0; width: 240px; background: var(--bg-1); border: 1px solid var(--line); border-radius:2px; box-shadow: var(--glass-drop); padding: 6px; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .15s, transform .15s; z-index: 60; } .user-slot.open .user-menu { opacity: 1; transform: translateY(0); pointer-events: auto; } .user-menu .user-head { padding: 10px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; } .user-menu .user-head .uname { font-weight: 600; font-size: 14px; } .user-menu .user-head .usub { color: var(--muted); font-size: 11.5px; margin-top: 2px; } .user-menu .u-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius:2px; color: var(--text); font-size: 13px; cursor: pointer; border: 0; background: transparent; width: 100%; text-align: left; }@media (hover: hover) { .user-menu .u-item:hover { background: rgba(255,255,255,0.06); }} .user-menu .u-item svg { color: var(--muted); flex: none; } .user-menu .u-item.danger { color: var(--danger); } .user-menu .u-item.danger svg { color: var(--danger); } .user-menu .u-divider { height: 1px; background: var(--line); margin: 4px 6px; } /* ===== 网站账户登录（独立于"主机视角"） ===== */ .account-slot { position: relative; } .acc-btn { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius:2px; border: 1px solid var(--line); background: var(--soft-bg); color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s; font-family: inherit; }@media (hover: hover) { .acc-btn:hover { border-color: var(--accent); }} .acc-avatar { width: 28px; height: 28px; border-radius:50%; display: grid; place-items: center; flex: none; font-size: 15px; line-height: 1; color: var(--on-accent); font-weight: 600; overflow: hidden; } .acc-caret { color: var(--muted); font-size: 10px; transition: transform .15s; } .account-slot.open .acc-caret { transform: rotate(180deg); } .acc-menu { position: absolute; top: calc(100% + 8px); right: 0; width: 248px; background: var(--bg-1); border: 1px solid var(--line); border-radius:2px; box-shadow: var(--glass-drop); padding: 6px; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .15s, transform .15s; z-index: 60; } .account-slot.open .acc-menu { opacity: 1; transform: translateY(0); pointer-events: auto; } .acc-menu .acc-head { padding: 10px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; display: flex; gap: 10px; align-items: center; } .acc-menu .acc-head .acc-meta { min-width: 0; } .acc-menu .acc-head .uname { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .acc-menu .acc-head .usub { color: var(--muted); font-size: 11.5px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .acc-menu .u-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius:2px; color: var(--text); font-size: 13px; cursor: pointer; border: 0; background: transparent; width: 100%; text-align: left; font-family: inherit; }@media (hover: hover) { .acc-menu .u-item:hover { background: var(--soft-bg); }} .acc-menu .u-item svg { color: var(--muted); flex: none; } .acc-menu .u-item.danger { color: var(--danger); } .acc-menu .u-item.danger svg { color: var(--danger); } .acc-menu .u-divider { height: 1px; background: var(--line); margin: 4px 6px; } /* account modal: tabs / code row / profile editor */ .acc-tabs { display: flex; gap: 4px; background: var(--soft-bg); border-radius:2px; padding: 4px; margin-bottom: 18px; } .acc-tab { flex: 1; border: 0; background: transparent; padding: 8px 0; font-size: 13px; font-weight: 600; color: var(--muted); border-radius:2px; cursor: pointer; font-family: inherit; } .acc-tab.active { background: var(--bg-1); color: var(--text); } .acc-field { margin-bottom: 12px; } .acc-field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; font-weight: 500; } .acc-input-row { display: flex; align-items: center; gap: 8px; } .acc-prefix { padding: 9px 10px; font-size: 13px; font-weight: 600; color: var(--text); background: var(--soft-bg); border: 1px solid var(--line); border-radius:2px; white-space: nowrap; } .acc-input { flex: 1; min-width: 0; padding: 9px 12px; font-size: 14px; background: var(--bg-1); color: var(--text); border: 1px solid var(--line); border-radius:2px; font-family: inherit; } /* N-14：此处原为 outline: none，把 O-03 的全局焦点环吃掉了 （.acc-input:focus 权重高于 :focus-visible），键盘用户看不到焦点位置。 去掉后回归全局 :focus-visible 焦点环，边框变色仍保留。 */ .acc-input:focus { border-color: var(--accent); } .acc-code-btn { padding: 9px 12px; font-size: 12.5px; font-weight: 600; white-space: nowrap; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent); border-radius:2px; cursor: pointer; font-family: inherit; } .acc-code-btn:disabled { opacity: .5; cursor: not-allowed; } .acc-hint { font-size: 12px; color: var(--warn); background: rgba(154,103,0,0.08); border: 1px dashed var(--warn); border-radius:2px; padding: 7px 10px; margin-bottom: 12px; display: none; } .acc-hint.show { display: block; } /* 表单内联错误提示：与"演示验证码"提示分离，不互相覆盖 */ .field-error { font-size: 12px; color: var(--danger); margin: -4px 0 10px; display: none; line-height: 1.5; } .field-error.show { display: block; } .acc-footnote { font-size: 11.5px; color: var(--muted); margin-top: 14px; line-height: 1.6; text-align: center; } .acc-full-btn { width: 100%; justify-content: center; margin-top: 2px; } /* profile editor */ .acc-preview-row { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .acc-big-avatar { width: 56px; height: 56px; font-size: 28px; border-radius:50%; display: grid; place-items: center; color: var(--on-accent); font-weight: 600; overflow: hidden; } .acc-preview-row .acc-pv-meta { font-size: 12px; color: var(--muted); } .acc-emo-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin: 6px 0 12px; } .acc-emo { aspect-ratio: 1; border: 1px solid var(--line); border-radius:2px; background: var(--bg-1); font-size: 17px; cursor: pointer; padding: 0; display: grid; place-items: center; } .acc-emo.active { border-color: var(--accent); background: var(--accent-soft); } .acc-color-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin: 6px 0 14px; } .acc-color { aspect-ratio: 1; border-radius:50%; border: 2px solid transparent; cursor: pointer; padding: 0; position: relative; } .acc-color.active { border-color: var(--text); } .acc-bound-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; padding: 8px 0; border-top: 1px solid var(--line); } .acc-bound-row .acc-bv { color: var(--muted); } /* ===== 宽带测速（speedtest 风格） ===== */ .st-layout { display: grid; grid-template-columns: 340px 1fr; gap: 28px; align-items: start; } .st-gauge-wrap { position: relative; width: 300px; height: 300px; margin: 4px auto 0; } #st-gauge { display: block; width: 300px; height: 300px; } .st-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; } .st-val { font-size: 42px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .st-unit { font-size: 12px; color: var(--muted); margin-top: 4px; letter-spacing: 0.12em; } .st-phase { font-size: 12.5px; color: var(--accent); font-weight: 600; margin-top: 10px; } .st-btn-row { position: absolute; left: 0; right: 0; bottom: -14px; display: flex; justify-content: center; } .st-btn-row .btn { min-width: 130px; justify-content: center; } .st-result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .st-metric { background: var(--soft-bg); border: 1px solid var(--line); border-radius:2px; padding: 11px 14px; } .st-m-l { font-size: 11.5px; color: var(--muted); margin-bottom: 3px; } .st-m-v { font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; } .st-m-v small { font-size: 11px; color: var(--muted); font-weight: 500; } .st-netinfo, .st-history { margin-top: 16px; } .st-ni-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 600; margin-bottom: 8px; } .st-ni-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 7px 0; border-top: 1px solid var(--line); } .st-ni-row .st-ni-k { color: var(--muted); flex: none; } .st-ni-row .st-ni-valv { text-align: right; font-weight: 500; overflow: hidden; text-overflow: ellipsis; } .st-hist-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 10px; font-size: 12.5px; padding: 6px 0; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; align-items: center; } .st-hist-row .st-hist-time { color: var(--muted); } .st-hist-empty { font-size: 12.5px; color: var(--muted); padding: 4px 0; } @media (max-width: 900px) { .st-layout { grid-template-columns: 1fr; } } /* ===== 持续测试（V0.4 阶段 C） ===== */ .sus-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: var(--sp-3); } .sus-state { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); } .sus-dot { width: 8px; height: 8px; border-radius:50%; background: var(--muted); flex: none; } .sus-dot.on { background: var(--ok); } .sus-dot.warn { background: var(--warn); } .sus-ctl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); } .sus-field { display: inline-flex; align-items: center; gap: 6px; } .sus-input, .sus-select, .sus-time { background: var(--soft-bg); border: 1px solid var(--line); color: var(--text); border-radius:2px; padding: 5px 8px; font-size: 12.5px; font-family: inherit; font-variant-numeric: tabular-nums; } .sus-input { width: 72px; } .sus-time { width: 96px; } .sus-days { display: inline-flex; gap: 3px; } /* 自定义 display 会盖掉 UA 的 [hidden]{display:none}，必须显式写回来， 否则 hidden 属性在这两个元素上完全失效。 */ .sus-days[hidden], .sus-chart-empty[hidden] { display: none; } .sus-days label { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border: 1px solid var(--line); border-radius:2px; font-size: 12px; color: var(--text); cursor: pointer; user-select: none; } .sus-days label:has(input:checked) { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } .sus-days input { margin: 0; } .sus-chart-wrap { position: relative; margin-top: 14px; } #sus-chart { display: block; width: 100%; height: 240px; } .sus-chart-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12.5px; color: var(--muted); pointer-events: none; } .sus-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: 8px; } .sus-legend i { display: inline-block; width: 14px; height: 2px; margin-right: 6px; vertical-align: middle; } .sus-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 10px; margin-top: 14px; } .sus-note { font-size: 12.5px; color: var(--muted); margin-top: 12px; line-height: 1.75; } .sus-note code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.94em; } @media (max-width: 900px) { .sus-stats { grid-template-columns: repeat(2, 1fr); } } /* 表格内术语就地提示标记 */ .term-tip { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius:50%; background: var(--accent-soft); color: var(--accent); font-size: 10px; font-weight: 600; font-style: normal; cursor: help; margin-left: 6px; vertical-align: middle; } /* ===== theme switcher ===== */ .theme-slot { position: relative; } .theme-btn { width: 34px; height: 34px; border-radius:2px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; display: grid; place-items: center; }@media (hover: hover) { .theme-btn:hover { border-color: var(--accent); color: var(--accent); }} .theme-ico { display: block; } .theme-menu { position: absolute; top: calc(100% + 8px); right: 0; width: 160px; background: var(--surface); border: 1px solid var(--line); border-radius:2px; box-shadow: var(--shadow); padding: 6px; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .15s, transform .15s; z-index: 70; } .theme-slot.open .theme-menu { opacity: 1; transform: translateY(0); pointer-events: auto; } .theme-opt { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius:2px; border: 0; background: transparent; color: var(--text); font-size: 13px; cursor: pointer; width: 100%; text-align: left; }@media (hover: hover) { .theme-opt:hover { background: var(--accent-soft); }} .theme-opt.active { color: var(--accent); font-weight: 600; } .theme-status { padding: 8px 12px 4px; color: var(--muted); font-size: 11px; border-top: 1px solid var(--line); margin-top: 4px; } /* ===== optics end-to-end animation ===== */ .opt-stage { background: var(--panel-strong); border-radius:2px; padding: 12px; border: 1px solid var(--line); } .opt-legend { color: var(--muted); font-size: 12.5px; padding: 8px 4px 2px; } .opt-stage svg text { user-select: none; } /* VXLAN/EVPN packet walkthrough: each frame has an explicit control-plane prerequisite, data-plane action, and evidence boundary. */ .vx-walk { border: 1px solid var(--line); border-radius:2px; overflow: hidden; } .vx-meta-bar { display: flex; flex-wrap: wrap; gap: 12px 18px; padding: 10px 16px; background: var(--panel-strong); border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted); line-height: 1.5; } .vx-meta-bar b { color: var(--text); font-weight: 600; margin-right: 4px; } /* ===== Knowledge tree (AIDC 8-branch) ===== */ .kt-body { display: grid; grid-template-columns: 280px 1fr; gap: 16px; margin-bottom: 22px; } .kt-tree { border: 1px solid var(--line); border-radius:2px; padding: 12px 8px; max-height: 520px; overflow-y: auto; background: var(--surface); font-size: 13px; } .kt-node { cursor: pointer; padding: 4px 8px; border-radius:2px; user-select: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }@media (hover: hover) { .kt-node:hover { background: var(--accent-soft); }} .kt-node.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .kt-node.kt-top { font-weight: 600; color: var(--text); margin-top: 6px; padding: 6px 8px; border-bottom: 1px solid var(--line); } .kt-node.kt-l2 { padding-left: 20px; font-weight: 500; color: var(--text); font-size: 12.5px; } .kt-node.kt-l3 { padding-left: 36px; color: var(--muted); font-size: 12px; } .kt-detail { border: 1px solid var(--line); border-radius:2px; padding: 16px 18px; background: var(--surface); min-height: 300px; } .kt-detail h3 { margin: 0 0 4px; } .kt-detail .kt-path { font-size: 12px; color: var(--muted); margin-bottom: 12px; } .kt-detail table { width: 100%; font-size: 13px; } .kt-detail th { text-align: left; padding: 6px 10px; background: var(--panel-strong); border-bottom: 1px solid var(--line); font-weight: 600; font-size: 12px; } .kt-detail td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.5; } .kt-guide { margin-top: 18px; } .kt-guide-title { font-size: 14px; font-weight: 600; color: var(--accent); margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--accent-soft, rgba(31,111,235,0.2)); } .kt-guide-body { font-size: 13.5px; line-height: 1.75; color: var(--text); } .kt-guide-body h5 { font-size: 13.5px; font-weight: 600; margin: 16px 0 6px; color: var(--text); } .kt-guide-body p { margin: 0 0 10px; } .kt-guide-body ul, .kt-guide-body ol { margin: 0 0 10px; padding-left: 20px; } .kt-guide-body li { margin-bottom: 4px; } .kt-guide-body code { background: var(--panel-strong); padding: 1px 5px; border-radius:2px; font-size: 12.5px; } .kt-guide-body pre { background: var(--panel-strong); border: 1px solid var(--line); border-radius:2px; padding: 10px 12px; overflow-x: auto; margin: 8px 0 12px; font-size: 12px; line-height: 1.5; } .kt-guide-body pre code { background: none; padding: 0; } .kt-guide-body .callout { background: rgba(31,111,235,0.06); border-left: 3px solid var(--accent); padding: 10px 14px; border-radius:2px; margin: 10px 0; font-size: 13px; } /* AIDC 动画演示专区 */ .aidc-svg { width: 100%; min-height: 200px; background: var(--panel-strong); border: 1px solid var(--line); border-radius:2px; margin: 10px 0; } .aidc-svg .nd { fill: var(--panel); stroke: var(--line-strong); stroke-width: 1.5; rx: 6; } .aidc-svg .nd.active { stroke: var(--accent); stroke-width: 2.5; } .aidc-svg .nd-label { fill: var(--text); font-size: 11px; font-weight: 600; text-anchor: middle; } .aidc-svg .nd-sub { fill: var(--muted); font-size: 9.5px; text-anchor: middle; } .aidc-svg .link { stroke: var(--line-strong); stroke-width: 1.5; fill: none; } .aidc-svg .link.active { stroke: var(--accent); stroke-width: 2.5; } .aidc-svg .link.dashed { stroke-dasharray: 5 3; } .aidc-svg .pkt { fill: var(--accent); font-size: 10px; } .aidc-svg .pkt-warn { fill: var(--warn); } .aidc-svg .pkt-ok { fill: var(--ok); } .aidc-svg .pkt-danger { fill: var(--danger); } .aidc-svg .badge { fill: var(--accent-soft, rgba(31,111,235,0.15)); stroke: var(--accent); stroke-width: 1; rx: 3; } .aidc-svg .badge-text { fill: var(--accent); font-size: 9px; font-weight: 600; text-anchor: middle; } .aidc-svg .arrow { fill: var(--accent); } .aidc-svg .warn-arrow { fill: var(--warn); } .aidc-svg .queue-bar { fill: var(--line); rx: 2; } .aidc-svg .queue-fill { rx: 2; } .aidc-svg .queue-thresh { stroke: var(--warn); stroke-width: 1; stroke-dasharray: 3 2; } .aidc-svg .annot { fill: var(--muted); font-size: 9px; } .aidc-track { display: grid; grid-template-columns: repeat(8, minmax(118px, 1fr)); overflow-x: auto; background: var(--surface); } .aidc-step { min-height: 126px; padding: 13px 12px; border-right: 1px solid var(--line); cursor: pointer; background: var(--surface); color: var(--muted); } .aidc-step:last-child { border-right: 0; } @media (hover: hover) {.aidc-step:hover{ background: var(--accent-soft); color: var(--text); }} .aidc-step.active{ background: var(--accent-soft); color: var(--text); } .aidc-step.active { border-top: 3px solid var(--accent); } .aidc-step b { display: block; margin-top: 4px; font-size: 13px; color: inherit; } .aidc-step span { display: block; margin-top: 5px; font-size: 11.5px; line-height: 1.45; } .aidc-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius:2px; margin-top: 10px; } .aidc-detail .vx-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; } .aidc-detail .vx-action { font-size: 13.5px; line-height: 1.6; margin-bottom: 8px; } .aidc-detail .vx-meta { font-size: 12px; color: var(--muted); margin-bottom: 6px; } .aidc-detail pre { background: var(--panel-strong); border: 1px solid var(--line); border-radius:2px; padding: 8px 10px; font-size: 12px; overflow-x: auto; margin: 6px 0; white-space: pre-wrap; } @media (max-width: 768px) { .aidc-detail { grid-template-columns: 1fr; } } @media (max-width: 900px) { .kt-body { grid-template-columns: 1fr; } } .vx-head { padding: 14px 16px; background: var(--panel-strong); border-bottom: 1px solid var(--line); } .vx-head h3 { margin: 0; font-size: 15px; } .vx-head p { margin: 3px 0 0; color: var(--muted); font-size: 12.5px; } .vx-track { display: grid; grid-template-columns: repeat(8, minmax(118px, 1fr)); overflow-x: auto; background: var(--surface); } .vx-step { min-height: 126px; padding: 13px 12px; border-right: 1px solid var(--line); cursor: pointer; background: var(--surface); color: var(--muted); } .vx-step:last-child { border-right: 0; } @media (hover: hover) {.vx-step:hover{ background: var(--accent-soft); color: var(--text); }} .vx-step.active{ background: var(--accent-soft); color: var(--text); } .vx-step.active { border-top: 3px solid var(--accent); } .vx-num { color: var(--accent); font: 700 12px Consolas, monospace; } .vx-step b { display: block; margin-top: 4px; font-size: 13px; color: inherit; } .vx-step span { display: block; margin-top: 5px; font-size: 11.5px; line-height: 1.45; } .vx-detail { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; border-top: 1px solid var(--line); } .vx-detail > div { padding: 15px 16px; min-height: 126px; } .vx-detail > div + div { border-left: 1px solid var(--line); background: var(--panel-strong); } .vx-label { color: var(--muted); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; } .vx-action { margin-top: 5px; font-size: 14px; font-weight: 600; } .vx-meta { margin-top: 7px; color: var(--muted); font-size: 12.5px; } .vx-packet { margin-top: 10px; padding: 8px 10px; border: 1px solid var(--line); border-left: 3px solid var(--accent); background: var(--bg-0); font: 12px/1.55 Consolas, monospace; white-space: pre-wrap; } .vx-evidence a { color: var(--accent); } .vx-controls { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin: 12px 0; } @media (max-width: 720px) { .vx-detail { grid-template-columns: 1fr; } .vx-detail > div + div { border-left: 0; border-top: 1px solid var(--line); } } /* mode bar */ .opt-mode-bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; margin-bottom: 12px; background: var(--panel-strong); border: 1px solid var(--line); border-radius:2px; flex-wrap: wrap; gap: 10px; } .opt-mode { padding: 4px 12px; border-radius:2px; font-size: 12px; font-weight: 600; border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; }@media (hover: hover) { .opt-mode:hover { color: var(--text); }} .opt-mode.active { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); } /* timeline */ .opt-timeline { display: flex; align-items: center; gap: 2px; padding: 10px 12px; margin-bottom: 8px; background: var(--panel-strong); border: 1px solid var(--line); border-radius:2px; overflow-x: auto; } .opt-tl-step { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 0 auto; min-width: 52px; } .opt-tl-ico { width: 26px; height: 26px; border-radius:2px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); font-size: 12px; color: var(--muted); font-family: var(--font-mono); transition: all 0.2s; } .opt-tl-label { font-size: 11px; color: var(--muted); } .opt-tl-line { flex: 1; height: 2px; background: var(--line); min-width: 16px; } .opt-tl-step.done .opt-tl-ico { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .opt-tl-step.done .opt-tl-label { color: var(--accent); font-weight: 600; } .opt-tl-step.active .opt-tl-ico { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); animation: st-pulse 1s infinite; } .opt-tl-step.fail .opt-tl-ico { background: var(--danger); color: #fff; border-color: var(--danger); } .opt-tl-step.fail .opt-tl-label { color: var(--danger); font-weight: 600; } .opt-tl-line.done { background: var(--accent); } .opt-link { transition: stroke 0.4s; } .opt-node rect, .opt-node circle { transition: stroke 0.3s; } .opt-node.bad rect, .opt-node.bad circle { stroke: #ef4444; } .opt-link.bad { stroke: url(#opt-line-bad); } .opt-scene.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } @keyframes opt-shake { 0%,100% { transform: translate(0,0); } 20% { transform: translate(-3px,1px); } 40% { transform: translate(3px,-1px); } 60% { transform: translate(-2px,-1px); } 80% { transform: translate(2px,1px); } } .opt-rabbit.shake { animation: opt-shake 0.4s ease-in-out 2; } @keyframes opt-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } .opt-rabbit.bob { animation: opt-bob 0.5s ease-in-out infinite; } /* ===== 光链路：边界卡 / 教学台 / 实测台 ===== */ .opt-scope-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0 0 22px; } .opt-scope-card { padding:13px 16px; border-radius:2px; border:1px solid var(--line); background:var(--panel-strong); } .opt-scope-card h4 { margin:0 0 6px; font-size:13.5px; display:flex; gap:7px; align-items:center; } .opt-scope-card p { margin:0; color:var(--muted); font-size:12.5px; line-height:1.65; } .opt-scope-card.thisway { border-left:3px solid var(--accent); } .opt-scope-card.notthis { border-left:3px solid var(--warn); } @media (max-width:760px){ .opt-scope-grid { grid-template-columns:1fr; } } .lab-banner { display:flex; align-items:center; gap:10px; padding:10px 15px; border:1px solid var(--line); border-bottom:0; border-radius:2px 2px 0 0; background:var(--panel-strong); font-size:13px; font-weight:700; } .lab-banner .lab-tag { font-size:11px; padding:2px 9px; border-radius:2px; font-weight:700; } .lab-banner .lab-tag.teach { background:var(--accent-soft); color:var(--accent); } .lab-banner .lab-tag.live { background:rgba(245,158,11,.15); color:var(--warn); } .lab-banner .lab-sub { font-weight:400; color:var(--muted); font-size:12px; margin-left:6px; } .lab-card { border:1px solid var(--line); border-radius:0 0 2px 2px; padding:14px 16px 18px; margin:0 0 26px; background:var(--panel); } .opt-timeline.fine { padding:10px 10px; } .opt-timeline.fine .opt-tl-step { min-width:44px; } .opt-timeline.fine .opt-tl-ico { width:24px; height:24px; font-size:11px; } .opt-timeline.fine .opt-tl-label { font-size:10.5px; } .opt-timeline.fine .opt-tl-line { min-width:8px; } .opt-stage { position:relative; border:1px solid var(--line); border-radius:2px; overflow:hidden; background:var(--panel); } .opt-teach-note { margin-top:10px; padding:10px 12px; border-radius:2px; background:var(--soft-bg); font-size:12.5px; color:var(--muted); line-height:1.7; } .opt-teach-note b { color:var(--text); } .opt-seg { transition:stroke .35s; } @keyframes seg-blink { 0%,100%{opacity:1} 50%{opacity:.2} } .opt-seg.bad { animation: seg-blink .65s ease-in-out infinite; } @keyframes node-alert { 0%,100%{ stroke:#ef4444 } 50%{ stroke:#fca5a5 } } .opt-nd.bad rect, .opt-nd.bad circle, .opt-nd.bad path.frame { stroke:#ef4444 !important; animation:node-alert .65s ease-in-out infinite; } .opt-nd.bad { filter: drop-shadow(0 0 6px rgba(239,68,68,.75)); } /* Agent 6 种接入方式卡 */ .acc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } @media (max-width:900px){ .acc-grid { grid-template-columns:1fr 1fr; } } @media (max-width:600px){ .acc-grid { grid-template-columns:1fr; } } .acc-card { border:1px solid var(--line); border-radius:2px; padding:11px 13px; background:var(--panel-strong); } .acc-top { display:flex; align-items:center; gap:7px; font-weight:700; font-size:13px; color:var(--text); } .acc-dot { margin-left:auto; width:8px; height:8px; border-radius:50%; background:var(--line-strong); flex:none; } .acc-card.has-node .acc-dot { background: var(--ok); } .acc-card code { display:block; margin:8px 0; font:10.5px/1.5 Consolas,monospace; color:var(--muted); word-break:break-all; } .acc-nodes { font-size:11px; color:var(--muted); line-height:1.5; } .acc-count { color: var(--ok); font-weight: 600; } /* 实测台 */ .lt-locked { text-align:center; padding:30px 20px 26px; color:var(--muted); } .lt-locked .lt-lock-ico { font-size:32px; opacity:.55; display:block; margin-bottom:10px; } .lt-locked p { margin:6px 0 0; font-size:12.5px; line-height:1.7; } .lt-items { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; } @media (max-width:760px){ .lt-items { grid-template-columns:1fr; } } .lt-item { border:1px solid var(--line); border-radius:2px; padding:11px 13px; background:var(--panel-strong); scroll-margin-top:80px; } .lt-item.flash { border-color: var(--accent); } .lt-head { display:flex; align-items:center; justify-content:space-between; gap:8px; } .lt-head h5 { margin:0; font-size:13px; } .lt-status { font-size:11px; font-weight:700; padding:2px 9px; border-radius:2px; white-space:nowrap; } .lt-status.pass { background:rgba(16,185,129,.15); color:#34d399; } .lt-status.fail { background:rgba(239,68,68,.15); color:#f87171; } .lt-status.warn { background:rgba(245,158,11,.15); color:#fbbf24; } .lt-status.run { background:var(--accent-soft); color:var(--accent); } .lt-status.skip { background:rgba(148,163,184,.12); color:var(--muted); } .lt-ev { margin:7px 0 0; font:11.5px/1.55 Consolas,monospace; color:var(--muted); word-break:break-all; } .lt-minitopo { margin-top:6px; border-top:1px dashed var(--line); padding-top:6px; } .lt-fix { margin-top:8px; padding:7px 10px; border-radius:2px; background:rgba(245,158,11,.08); border-left:3px solid var(--warn); font-size:12px; color:#fcd34d; line-height:1.6; } .lt-summary { margin-top:16px; border:1px solid var(--line-strong); border-radius:2px; padding:13px 16px; background:var(--panel-strong); display:flex; align-items:center; gap:12px; flex-wrap:wrap; } .lt-summary .lt-big { font-size:14.5px; font-weight:700; } .lt-anchors { display:flex; gap:7px; flex-wrap:wrap; margin-left:auto; } .lt-anchor { font-size:11.5px; padding:3px 10px; border-radius:2px; border:1px solid var(--danger); color:#f87171; cursor:pointer; background:transparent; }@media (hover: hover) { .lt-anchor:hover { background:rgba(239,68,68,.12); }} .content { flex: 1; width: 100%; max-width: var(--shell); margin: 0 auto; padding: 30px var(--gutter) 64px; } /* ===== hero / overview ===== */ /* O-17：hero 改两栏（左 1.15fr 主张与入口 / 右 .85fr 实时态势）， 把原来空着的右半屏用起来；窄屏回落单栏。 间距统一走 8pt 栅格：8 / 16 / 24 / 32。 */ .hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 32px; align-items: start; padding: 32px 0 8px; } .hero-lead, .hero-side { min-width: 0; } /* 右栏里 command-deck 不再横向分两列（栏宽不够），改为上下堆叠 */ .hero-side .command-deck { grid-template-columns: 1fr; margin: 0; } .hero-side .deck-primary { border-right: 0; border-bottom: 1px solid var(--line); } @media (max-width: 1080px) { .hero { grid-template-columns: 1fr; gap: 24px; } /* 回到单栏后宽度够了，command-deck 复原成左右两列 */ .hero-side .command-deck { grid-template-columns: minmax(0, 1.42fr) minmax(260px, .88fr); } .hero-side .deck-primary { border-right: 1px solid var(--line); border-bottom: 0; } } .eyebrow { color: var(--accent); font-size: 12.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; } h1 { font-size: clamp(2.3rem, 5.4vw, 3.7rem); line-height: 1.08; margin: 14px 0 16px; letter-spacing: -0.02em; color: var(--text); } .lede { max-width: 700px; color: var(--muted); font-size: 1.03rem; margin: 0; } /* 两张入口卡（O-11）：左卡 = 免登录工具（大多数访客的路）， 右卡 = 项目档案（技术访客的路）。按钮行已取消，避免首屏出现三四个并列入口。 */ .hero-entries { display: grid; grid-template-columns: repeat(auto-fit, minmax(236px, 1fr)); gap: 16px; margin-top: 32px; } .hero-entry { display: flex; flex-direction: column; gap: 8px; padding: 22px; /* O-17：并入卡片标准档（原 16px 是第四种尺寸） */ } .hero-entry.is-primary { border-color: var(--line-strong); } .hero-entry .he-title { font-size: 14.5px; font-weight: 600; color: var(--text); } .hero-entry .he-sub { margin: 0; font-size: 12px; color: var(--muted); } .he-links { display: flex; flex-direction: column; gap: 8px; } .he-link { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; padding: 8px 10px; border: 1px solid transparent; border-radius:2px; background: var(--soft-bg); color: var(--text); font-family: inherit; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; } .he-link em { font-style: normal; font-size: 11.5px; font-weight: 400; color: var(--muted); }@media (hover: hover) { .he-link:hover { border-color: var(--accent); background: var(--accent-soft); }} /* 需登录入口的锁标识（O-11）：默认隐藏，syncLoginUi() 按真实登录态显示。 只加锁图标不够 —— title / aria-label 里也写明"需要主机管理权限"， 否则读屏用户与鼠标用户都无从得知。 */ .lock-ico { display: none; margin-left: 6px; opacity: .7; vertical-align: -1px; } .side-link.needs-login .lock-ico { display: inline-block; } /* Live command deck: these values are populated only from local APIs. */ .command-deck { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(260px, .88fr); gap: 0; margin: 30px 0 0; border: 1px solid var(--line-strong); border-radius:var(--radius); background: var(--panel); box-shadow: var(--shadow); } .command-deck::before { content: ""; position: absolute; inset: 0; pointer-events: none; /* V1：网格底纹属装饰性渐变，全部关闭 */ background-image: none; } .deck-primary, .deck-health { position: relative; padding: 18px 20px; } .deck-primary { border-right: 1px solid var(--line); } .deck-kicker { display:flex; align-items:center; gap:8px; font: 700 11px/1 Consolas, monospace; letter-spacing:.12em; color:var(--accent); } .signal-dot { width:8px; height:8px; border-radius:50%; background:var(--accent); } .deck-primary h2 { margin:12px 0 5px; font-size:18px; letter-spacing:0; } .deck-desc { margin:0; color:var(--muted); font-size:12.5px; } .metric-row { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:17px; } .live-metric { min-width:0; padding:10px 11px; border:1px solid var(--line); background:var(--soft-bg); } .live-metric span { display:block; color:var(--muted); font-size:11px; } .live-metric strong { display:block; margin-top:3px; font:700 18px/1.25 Consolas,monospace; color:var(--text); font-variant-numeric:tabular-nums; white-space:normal; overflow-wrap:anywhere; } .deck-health { display:flex; flex-direction:column; justify-content:space-between; gap:16px; } .deck-health-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; } .deck-label { color:var(--muted); font-size:11px; letter-spacing:.09em; text-transform:uppercase; } .health-score { margin-top:3px; font:700 28px/1 Consolas,monospace; color:var(--accent); font-variant-numeric:tabular-nums; } .health-list { display:flex; flex-direction:column; gap:8px; } .health-item { display:grid; grid-template-columns:minmax(0,1fr) 52px; gap:9px; align-items:center; font:12px/1.2 Consolas,monospace; } .health-item span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:var(--muted); } .health-bar { height:4px; overflow:hidden; background:var(--line); } .health-bar i { display:block; height:100%; width:100%; background:var(--accent); transition:width .5s ease, background .2s ease; } .deck-foot { color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; } .deck-offline .signal-dot, .deck-offline .health-score { background:var(--danger); color:var(--danger); } .deck-offline .health-bar i { background:var(--danger); } /* 窄屏单列：必须带上 .hero-side 前缀，否则被上方 @media(max-width:1080px) 里 `.hero-side .command-deck { grid-template-columns: minmax(0,1.42fr) minmax(260px,.88fr) }` 按特异度压过 —— 那 260px 最小列宽会在手机宽度下把整个 hero 撑出横向溢出。 */ @media (max-width: 768px) { .command-deck, .hero-side .command-deck { grid-template-columns:1fr; } .deck-primary, .hero-side .deck-primary { border-right:0; border-bottom:1px solid var(--line); } } @media (max-width: 440px) { .metric-row { grid-template-columns:1fr 1fr; } .metric-row .live-metric:last-child { grid-column:span 2; } } /* quick launch cards */ .quick-grid { display: grid; gap: 13px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin: 34px 0 10px; } .qcard { display: flex; flex-direction: column; gap: 3px; padding: 17px 18px; border-radius:var(--radius); border: 1px solid var(--line); background: var(--panel); cursor: pointer; text-decoration: none; transition: border-color 0.18s ease, background 0.18s ease; }@media (hover: hover) { .qcard:hover { border-color: var(--line-strong); background: var(--qcard-hover); }} .q-ico { width: 38px; height: 38px; border-radius:2px; display: grid; place-items: center; font-size: 19px; background: var(--accent-soft); margin-bottom: 8px; } .q-ico svg { display: block; } .qcard b { font-size: 14.5px; } .q-sub { color: var(--muted); font-size: 12.5px; } /* ===== buttons ===== */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius:2px; font-size: 14px; font-weight: 600; cursor: pointer; border: 1px solid transparent; font-family: inherit; transition: background 0.18s, border-color 0.18s, color 0.18s; text-decoration: none; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); color: #052e28; }@media (hover: hover) { .btn-primary:hover { background: #26b8a5; }} .btn-ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }@media (hover: hover) { .btn-ghost:hover { border-color: var(--line-strong); background: var(--soft-bg); }} /* ===== badges / chips ===== */ .badge { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius:2px; border: 1px solid rgba(45, 212, 191, 0.3); background: var(--accent-soft); color: var(--accent); font-size: 12.5px; font-weight: 600; } /* O-17：状态点统一为 .dot 组件，四态用「形状 + 颜色」双重编码 —— ok 实心圆 · warn 菱形 · bad 方块 · idle 空心环。 灰度打印或色盲用户下，仅凭形状也能分辨状态（WCAG 1.4.1）。 语义色 --ok / --warn / --danger 均已在四个主题里定义。 */ .dot { width: 8px; height: 8px; flex: none; border-radius:50%; background: var(--accent); } .dot.ok { background: var(--ok); } .dot.warn { background: var(--warn); border-radius:2px; transform: rotate(45deg); } .dot.bad { background: var(--danger); border-radius:1px; } .dot.idle { background: transparent; border: 1.5px solid var(--muted); } .chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius:2px; border: 1px solid var(--line-strong); background: var(--panel); font-family: "JetBrains Mono", Consolas, monospace; font-size: 12.5px; color: var(--muted); transition: border-color 0.2s, color 0.2s, box-shadow 0.2s; } .chip b { color: var(--accent); font-weight: 600; }@media (hover: hover) { .chip:hover { border-color: var(--line-strong); color: var(--text); }} /* ===== 首屏「用户能感知的价值」行（O-15） ===== 原来这个位置放的是 Reactor/epoll/端口/TLS 这排引擎内部参数，普通访客看不懂， 且其中 HTTPS :8443 当时并不可用。改为陈述用户关心的事实，技术参数收进 下方可展开的「技术详情 ▾」，兼顾技术访客与普通访客。 */ .hero-facts { margin-top: 20px; display: flex; gap: 9px 18px; flex-wrap: wrap; align-items: center; color: var(--muted); font-size: 13px; } .hero-facts .fact { display: inline-flex; align-items: center; gap: 6px; } /* O-17：此前的 '✓' 是字体字符，各设备字形差异大； 改用站内图标集的同款 stroke SVG（走 mask，颜色仍由 --accent 控制）。 */ .hero-facts .fact::before { content: ''; flex: none; width: 13px; height: 13px; background: var(--accent); -webkit-mask: var(--ico-check) center / contain no-repeat; mask: var(--ico-check) center / contain no-repeat; } .hero-facts .fact b { color: var(--text); font-variant-numeric: tabular-nums; } .tech-details { margin-top: 14px; } .tech-details > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; color: var(--muted); font-size: 12.5px; user-select: none; padding: 5px 2px; border-radius:2px; } .tech-details > summary::-webkit-details-marker { display: none; } .tech-details > summary::after { content: '▾'; font-size: 10px; transition: transform 0.2s; } .tech-details[open] > summary::after { transform: rotate(180deg); }@media (hover: hover) { .tech-details > summary:hover { color: var(--text); }} .tech-details .tech-chips { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 10px; } .tech-details .chip em { font-style: normal; opacity: 0.75; } /* ===== stats ===== */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 36px 0 10px; } /* 「项目成果」条带 = .section-head 标题 + .stats 数字卡； 两者各自的 18px / 36px 边距叠加会过松，这里抵消掉标题下方的间距。 */ .section-head + .stats { margin-top: 0; } /* 小屏：概览统计卡从 4 列降为 2 列，消除横向滚动 */ @media (max-width: 768px) { .stats { grid-template-columns: repeat(2, 1fr); } .metric-row { grid-template-columns: repeat(2, 1fr); } } .stat { position: relative; padding: 22px; /* O-17：并入卡片标准档 */ } .stat .k { color: var(--muted); font-size: 13px; } .stat .v { font-size: 1.7rem; font-weight: 600; margin-top: 4px; color: var(--text); font-variant-numeric: tabular-nums; } .stat .v small { font-size: 13px; color: var(--muted); font-weight: 500; margin-left: 4px; } /* ===== 数字与单位排版规范（O-08）================================= 全站新增数值展示一律遵守以下 7 条，避免"同一屏五种写法"： 1) 数字与单位之间用细空格，HTML 写  （比普通空格窄、比无空格清楚） 2) 单位一律小写：ms / s / req/s / mbps / gb 3) 速率统一写 req/s（不写 /s、RPS；RPS 只作为指标名保留在大写标题里） 4) 时长统一写「N 小时 N 分钟 N 秒」（带空格），不写 1时2分3秒 5) 比值写 A/B（如 6/6），斜杠两侧不加空格 6) 数值容器一律加 .num —— tabular-nums 让等宽数字对齐，刷新时不跳字宽 7) 中英文之间补一个空格 ================================================================= */ .num, .stat .v, .live-metric strong, .health-score, .deck-foot, td.num, .live-row span:last-child { font-variant-numeric: tabular-nums; } /* 基准数据卡（O-15）：虚线边框与上方实时卡（实线）区分。 V1：斜纹底属装饰性渐变，删掉，只保留虚线边框这个「标记」。 */ .stat-bench { border-style: dashed; }@media (hover: hover) { .stat-bench:hover { border-color: var(--line-strong); }} .stats-bench-note { grid-column: 1 / -1; margin-bottom: -4px; color: var(--muted); font-size: 12px; } .stats-bench-note b { color: var(--text); font-weight: 600; } /* ===== sections / panels ===== */ section { padding: 26px 0 18px; } .section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; gap: 12px; flex-wrap: wrap; } .section-head h2 { margin: 0; font-size: 1.35rem; letter-spacing: -0.01em; } .hint { color: var(--muted); font-size: 13px; } /* 需要主机管理权限时的页内提示条（含「去登录」入口） */ .perm-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; margin-bottom: 14px; border-radius:2px; background: rgba(245, 185, 95, 0.10); border: 1px solid var(--warn); font-size: 13px; line-height: 1.5; } .perm-banner .perm-ico { font-size: 16px; } .perm-banner .perm-text { flex: 1 1 320px; min-width: 0; } .perm-banner .btn { padding: 5px 14px; font-size: 12.5px; } .panel { display: none; } .panel.active { display: block; animation: viewin 0.22s ease; } @keyframes viewin { from { opacity: 0; } to { opacity: 1; } } /* ===== cards ===== */ .grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } /* ===== 卡片三档（O-17）============================================= 全站只允许这三种尺寸（间距走 8pt 栅格：8 / 16 / 24 / 32）： .card-lg 主卡 —— hero 入口卡、并列主区块 padding 24px 26px .card 标准卡 —— 特性卡 / 指标卡 padding 22px .card-sm 微卡 —— 内嵌事实条级 padding 12px 14px 三档共用同一套背景 / 描边 / 圆角与 hover， 只在内边距与标题字号上区分，不再出现第四种尺寸。 .stat（概览指标卡）与 .hero-entry（入口卡）并入标准档。 */ .card-lg, .card, .card-sm, .stat, .hero-entry { background: var(--panel); border: 1px solid var(--line); border-radius:var(--radius); transition: border-color 0.18s ease; }@media (hover: hover) { .card-lg:hover, .card:hover, .card-sm:hover, .stat:hover, .hero-entry:hover { border-color: var(--line-strong); }} .card-lg { padding: 24px 26px; } .card-lg > h2, .card-lg .he-title { font-size: 16px; } .card-sm { padding: 12px 14px; border-radius:2px; } .card-sm > h4, .card-sm .k { font-size: 13px; } .card { padding: 22px; cursor: default; } .card .icon { width: 42px; height: 42px; border-radius:2px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-size: 20px; font-weight: 600; margin-bottom: 14px; } .card .icon svg { display: block; } .card h3 { margin: 0 0 6px; font-size: 1.05rem; } .card p { margin: 0; color: var(--muted); font-size: 14px; } /* ===== architecture ===== */ .arch { background: var(--panel); border: 1px solid var(--line); border-radius:var(--radius); padding: 30px; overflow-x: auto; } .flow { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; min-width: 760px; } .node { padding: 14px 18px; border-radius:2px; background: var(--panel-strong); border: 1px solid var(--line-strong); font-size: 13.5px; font-weight: 600; text-align: center; min-width: 110px; transition: all 0.2s; } .node.reactor { border-color: var(--accent); color: var(--accent); }@media (hover: hover) { .node:hover { border-color: var(--line-strong); }} .arrow { color: var(--muted); font-size: 18px; } .arch-note { margin-top: 22px; padding: 14px 16px; background: rgba(79, 139, 255, 0.08); border-left: 3px solid var(--accent-2); border-radius:0 2px 2px 0; color: var(--muted); font-size: 13.5px; } /* ===== tables ===== */ table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius:var(--radius); overflow: hidden; } th, td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); font-size: 14px; } th { background: var(--panel-strong); color: var(--muted); font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.05em; } tr:last-child td { border-bottom: none; }@media (hover: hover) { tr:hover td { background: var(--row-hover); }} td.num { font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 600; } code { font-family: "JetBrains Mono", Consolas, monospace; font-size: 12.5px; color: var(--code-text); background: var(--code-bg); padding: 1px 6px; border-radius:2px; } /* ===== code block ===== */ pre { background: var(--pre-bg); color: var(--pre-text); border: 1px solid var(--line); border-radius:var(--radius); padding: 18px 20px; overflow-x: auto; font-family: "JetBrains Mono", "Fira Code", Consolas, monospace; font-size: 13px; line-height: 1.7; } .c { color: var(--syn-c); } .k { color: var(--syn-k); } .s { color: var(--syn-s); } .f { color: var(--accent); } /* ===== timeline ===== */ .timeline { display: grid; gap: 10px; } .tl-item { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 14px 18px; background: var(--panel); border: 1px solid var(--line); border-radius:var(--radius-sm); transition: all 0.2s; }@media (hover: hover) { .tl-item:hover { border-color: var(--accent-2); }} .tl-tag { font-size: 12px; color: var(--accent); font-weight: 600; letter-spacing: 0.05em; padding-top: 2px; } .tl-body { color: var(--muted); font-size: 14px; } .tl-body strong { color: var(--text); } /* ===== live panel ===== */ .live-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .live-card { background: var(--panel); border: 1px solid var(--line); border-radius:var(--radius); padding: 18px 20px; } .live-card h4 { margin: 0 0 12px; font-size: 13px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; } .live-row { display: flex; justify-content: space-between; padding: 7px 0; font-size: 14px; border-bottom: 1px dashed var(--line); } .live-row:last-child { border-bottom: none; } .live-row span:first-child { color: var(--muted); } .live-row span:last-child { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; } /* ===== diagnostics ===== */ .diag-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } .diag-card { background: var(--panel); border: 1px solid var(--line); border-radius:var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 14px; transition: border-color 0.18s ease; }@media (hover: hover) { .diag-card:hover { border-color: var(--line-strong); }} .diag-head { display: flex; gap: 14px; align-items: flex-start; } .diag-icon { width: 44px; height: 44px; border-radius:2px; display: grid; place-items: center; font-size: 22px; background: var(--accent-soft); color: var(--accent); flex-shrink: 0; } .diag-icon svg { display: block; } .diag-head h3 { margin: 0 0 4px; font-size: 1.05rem; } .diag-head p { margin: 0; color: var(--muted); font-size: 13px; } .diag-btn { align-self: flex-start; } .diag-btn:disabled { opacity: 0.6; cursor: not-allowed; } .diag-result { font-size: 14px; color: var(--text); padding: 12px 14px; border-radius:2px; background: var(--soft-bg); border: 1px solid var(--line); font-variant-numeric: tabular-nums; min-height: 44px; word-break: break-word; } .diag-result.diag-code { font-family: "JetBrains Mono", Consolas, monospace; font-size: 12.5px; white-space: pre-wrap; } .diag-result .ok { color: var(--accent); font-weight: 600; } .diag-result .muted { color: var(--muted); font-size: 12.5px; } .muted { color: var(--muted); } .ok { color: var(--accent); font-weight: 600; } .diag-input { flex: 1; min-width: 120px; padding: 10px 12px; border-radius:2px; border: 1px solid var(--line-strong); background: var(--soft-bg); color: var(--text); font-size: 14px; transition: border-color 0.2s, box-shadow 0.2s; font-family: inherit; } .diag-input:focus { border-color: var(--accent); } .diag-input::placeholder { color: rgba(140, 160, 192, 0.55); } .status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius:2px; font-size: 12px; font-weight: 600; } .status-online { color: var(--accent); background: var(--accent-soft); border: 1px solid rgba(46, 230, 200, 0.35); } .status-offline { color: var(--muted); background: rgba(140, 160, 192, 0.08); border: 1px solid var(--line-strong); } /* ===== unified state component ===== */ .st { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius:2px; font-size: 12px; font-weight: 600; border: 1px solid transparent; white-space: nowrap; } .st::before { content: ""; width: 7px; height: 7px; border-radius:50%; background: currentColor; } .st-ok { color: var(--ok); background: var(--ok-soft); border-color: var(--ok-line); } .st-warn { color: var(--warn); background: var(--warn-soft); border-color: var(--warn-line); } .st-fail { color: var(--danger); background: var(--danger-soft); border-color: var(--danger-line); } .st-run { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); } .st-run::before { animation: st-pulse 1s infinite; } .st-pending { color: var(--muted); background: var(--neutral-soft); border-color: var(--line-strong); } .st-expired { color: var(--danger); background: var(--danger-soft); border-color: var(--line-strong); } @keyframes st-pulse { 0%,100%{opacity:1} 50%{opacity:0.3} } /* task id pill */ .task-id { font-family: "SF Mono", "Cascadia Code", "Consolas", monospace; font-size: 12px; color: var(--muted); background: var(--panel-strong); border: 1px solid var(--line); padding: 2px 8px; border-radius:2px; } /* decorative hover light-line removed */ .diag-result.loading { background: var(--soft-bg); } @keyframes shimmer { from { background-position: 120% 0; } to { background-position: -80% 0; } } /* ===== 访客设备信息采集（浏览器侧）===== 与 .diag-card 的区别：这里是"关于你自己的数据"，所以给它一条左侧强调边， 并把"未采集 + 原因"做成一眼可见的两种字号，避免和真实值混淆。 */ .tg-card { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius:var(--radius); padding: 20px 22px; } .tg-lead { font-size: 14px; line-height: 1.7; color: var(--text); margin: 0 0 14px; } .tg-lead strong { color: var(--accent); } .tg-scopes { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .tg-scope { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius:2px; background: var(--soft-bg); cursor: pointer; }@media (hover: hover) { .tg-scope:hover { border-color: var(--line-strong); }} .tg-scope input { margin: 2px 0 0; flex-shrink: 0; accent-color: var(--accent); } .tg-scope-t { display: flex; flex-direction: column; gap: 2px; } .tg-scope-t b { font-size: 13.5px; color: var(--text); } .tg-scope-t em { font-style: normal; font-size: 12px; color: var(--muted); line-height: 1.5; } .tg-notes { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px; } .tg-notes li { position: relative; padding-left: 14px; font-size: 12.5px; color: var(--muted); line-height: 1.65; } .tg-notes li::before { content: "·"; position: absolute; left: 3px; color: var(--accent); } .tg-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 0; } .tg-danger { color: var(--danger); border-color: rgba(207,34,46,0.35); }@media (hover: hover) { .tg-danger:hover { border-color: var(--danger); }} .tg-detail { margin-top: 16px; font-size: 13px; } .tg-detail summary { cursor: pointer; color: var(--muted); }@media (hover: hover) { .tg-detail summary:hover { color: var(--text); }} .tg-detail table { margin-top: 10px; } .tg-fine { font-size: 12px; color: var(--muted); line-height: 1.7; margin: 10px 0 0; } .tg-raw { max-height: 320px; overflow: auto; padding: 12px 14px; margin: 10px 0 0; background: var(--soft-bg); border: 1px solid var(--line); border-radius:2px; font: 12px/1.6 "JetBrains Mono", Consolas, monospace; color: var(--text); white-space: pre-wrap; word-break: break-all; } .tg-grants { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .tg-tag { font-size: 11.5px; padding: 3px 10px; border-radius:2px; border: 1px solid var(--line-strong); color: var(--muted); background: var(--soft-bg); } .tg-tag.on { color: var(--ok); border-color: rgba(26,127,55,0.35); } .tg-flags { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; } .tg-flags li { font-size: 12.5px; line-height: 1.65; color: var(--warn); padding: 8px 12px; border-radius:2px; background: rgba(154,103,0,0.08); border: 1px dashed var(--warn); } .tg-notice { font-size: 12.5px; line-height: 1.65; color: var(--muted); margin: 0 0 12px; } .tg-err { font-size: 13px; color: var(--danger); margin: 0 0 12px; } .tg-status { font-size: 12.5px; color: var(--text); margin: 0 0 14px; } .tg-muted { color: var(--muted); margin-left: 6px; } .tg-val { font-variant-numeric: tabular-nums; } .tg-miss { font-size: 12px; color: var(--muted); } .tg-reason { display: block; font-size: 12px; color: var(--muted); line-height: 1.6; margin-top: 2px; } .tg-path { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; } .grad { color: var(--accent); } .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.in { opacity: 1; transform: none; } footer { margin-top: 56px; padding: 22px 0 8px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; text-align: center; } /* ===== modals ===== */ .modal-mask { position: fixed; inset: 0; z-index: 100; background: rgba(3, 5, 10, 0.68); display: none; align-items: center; justify-content: center; } .modal-mask.show { display: flex; } .modal { position: relative; width: min(400px, calc(100% - 40px)); max-height: calc(100vh - 40px); overflow-y: auto; background: var(--panel-strong); border: 1px solid var(--line-strong); border-radius:2px; padding: 32px 28px; box-shadow: var(--glass-drop); animation: pop 0.2s ease; } @keyframes pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .modal .m-logo { width: 44px; height: 44px; border-radius:2px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.18); display: grid; place-items: center; margin-bottom: 16px; } .modal h3 { margin: 0 0 4px; font-size: 1.25rem; } .modal .m-sub { color: var(--muted); font-size: 13.5px; margin: 0 0 18px; } .modal .m-close { position: absolute; top: 12px; right: 18px; color: var(--muted); font-size: 24px; cursor: pointer; line-height: 1; /* O-10：由 改成