@pioneer_zmc/dsh-workbench 0.2.1

package/web/assets/style.css

@@ -0,0 +1,836 @@
+/* 两套主题共享语义色；业务状态色与品牌强调色分开。 */
+:root {
+  color-scheme: dark;
+  --page: #111419; --surface: #181d25; --surface-soft: #141a22;
+  --hover: #202834; --border: #2b3442; --border-strong: #536781;
+  --text: #edf2fa; --secondary: #c2ccda; --muted: #9caabd;
+  --accent: #8ab9ff; --accent-bg: #1b2c45; --accent-border: #42638e; --accent-hover: #273e5c;
+  --primary: #619eff; --primary-ink: #0b172a;
+  --success: #80d6ac; --success-bg: #163428; --success-border: #34654b; --success-hover: #214e38;
+  --warning: #efc777; --warning-bg: #342b19; --warning-border: #745e34;
+  --danger: #f2a1aa; --danger-bg: #362027; --danger-border: #75404b;
+  --purple: #c5b5f0; --purple-bg: #2b253b;
+  --code-bg: #10151d; --canvas: #020617;
+  --glow: rgba(75, 133, 229, .12); --grid: rgba(116, 147, 189, .13);
+  --shadow: 0 12px 32px rgba(0, 0, 0, .12);
+}
+:root[data-theme="light"] {
+  color-scheme: light;
+  --page: #f6f8fb; --surface: #ffffff; --surface-soft: #f0f4f9;
+  --hover: #eaf0f8; --border: #dce3ed; --border-strong: #99abc3;
+  --text: #1b2a41; --secondary: #41516a; --muted: #5c6d84;
+  --accent: #245dc1; --accent-bg: #eaf1ff; --accent-border: #a8c3ee; --accent-hover: #dce9ff;
+  --primary: #2865d5; --primary-ink: #ffffff;
+  --success: #206e4b; --success-bg: #e6f4ec; --success-border: #9bc8ae; --success-hover: #cee8d9;
+  --warning: #825607; --warning-bg: #fff4dc; --warning-border: #dac28c;
+  --danger: #ac354a; --danger-bg: #fff0f2; --danger-border: #e0aeb7;
+  --purple: #6d46a5; --purple-bg: #f0eafa;
+  --code-bg: #edf2f9; --canvas: #f8fafc;
+  --glow: rgba(72, 133, 239, .10); --grid: rgba(70, 112, 169, .13);
+  --shadow: 0 12px 32px rgba(29, 53, 88, .06);
+}
+/* 共用阅读组件：保留原有交互结构，使用统一主题色。 */
+* { box-sizing: border-box; }
+body {
+  margin: 0; padding: 0;
+  font: 14px/1.65 "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
+  color: var(--text); background: var(--page);
+}
+a { color: var(--accent); text-decoration: none; }
+a:hover { text-decoration: underline; }
+.top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 20px; }
+.top h1 { margin: 0 0 4px; font-size: 22px; }
+.sub { margin: 0; color: var(--muted); max-width: 72ch; }
+.crumbs { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
+.status { margin: 2px 0 0; font-size: 13px; color: var(--muted); white-space: nowrap; }
+.status[data-kind="ok"] { color: var(--success); }
+.status[data-kind="bad"] { color: var(--danger); }
+.status[data-kind="warn"] { color: var(--warning); }
+.error {
+  margin: 0 0 16px; padding: 10px 14px; border-radius: 8px;
+  background: var(--danger-bg); border: 1px solid var(--danger-border); color: var(--danger);
+  overflow-wrap: anywhere; white-space: pre-wrap;
+}
+.guide {
+  margin: 0 0 20px; padding: 14px 18px; border-radius: 10px;
+  background: var(--surface-soft); border: 1px solid var(--border-strong);
+}
+.guide h2 { margin: 0 0 8px; font-size: 16px; }
+.guide p { margin: 6px 0; color: var(--secondary); }
+.guide pre {
+  margin: 8px 0; padding: 12px 14px; border-radius: 8px; overflow-x: auto;
+  background: var(--code-bg); border: 1px solid var(--border); color: var(--accent); font-size: 13px;
+}
+.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
+.card {
+  display: block; padding: 16px 18px; border-radius: 10px;
+  background: var(--surface); border: 1px solid var(--border); color: inherit;
+}
+.card:hover { border-color: var(--border-strong); text-decoration: none; }
+.card h2 { margin: 0 0 6px; font-size: 16px; color: var(--text); }
+.card p { margin: 0; color: var(--muted); }
+.card .meta { margin-top: 10px; font-size: 13px; color: var(--muted); }
+.badge {
+  display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px;
+  font-size: 12px; vertical-align: 1px;
+}
+.badge[data-kind="identical"] { background: var(--success-bg); color: var(--success); }
+.badge[data-kind="changed"] { background: var(--warning-bg); color: var(--warning); }
+.badge[data-kind="no-snapshot"] { background: var(--surface-soft); color: var(--muted); }
+.badge[data-kind="compare-failed"] { background: var(--purple-bg); color: var(--purple); }
+.badge[data-kind="invalid"] { background: var(--danger-bg); color: var(--danger); }
+/* 状态汇总小徽标（首页业务卡小行＋业务页汇总行）：颜色复用四状态语义色；
+   业务页上是按钮，点一下跳到第一张该状态的图卡。 */
+.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
+.chip-row .badge { margin-left: 0; }
+.chip-row button.badge { border: 0; padding: 3px 10px; font-family: inherit; cursor: pointer; }
+.chip-row button.badge:hover { text-decoration: underline; }
+.panel {
+  margin: 0 0 20px; padding: 14px 18px; border-radius: 10px;
+  background: var(--surface); border: 1px solid var(--border);
+}
+.panel h2 { margin: 0 0 10px; font-size: 15px; }
+.doc-list { margin: 0; padding-left: 18px; }
+.versions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
+.versions button, .versions .current-item {
+  padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border);
+  background: var(--surface); color: var(--text); cursor: pointer; font-size: 13px;
+}
+.versions button[aria-current="true"] { border-color: var(--accent); background: var(--accent-bg); }
+.stage-note { color: var(--muted); }
+/* 「已选」状态条（E·选中同步）：写在图层外面的一条提示，只报图里当前选中的步骤；
+   不给图加任何东西。未选中时整条隐藏（不给"没选"占位）。 */
+.selection-bar {
+  margin: 0 0 12px; padding: 8px 14px; border-radius: 8px;
+  background: var(--accent-bg); border: 1px solid var(--accent-border); color: var(--accent);
+}
+.selection-bar[data-kind="selected"] b { color: var(--text); }
+.selection-bar[data-kind="warn"] {
+  background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning);
+}
+.detail-open {
+  margin-left: 12px; padding: 3px 12px; border-radius: 6px;
+  border: 1px solid var(--accent-border); background: var(--accent-bg); color: var(--accent);
+  font-size: 13px; cursor: pointer;
+}
+.detail-open:hover { background: var(--accent-hover); }
+/* 节点详情弹层（F）：读某个步骤在当前所选版本里的说明；弹出期间挡住图（模态），
+   关闭后图原样——弹层不碰 iframe，缩放与位置都不动。 */
+.detail-dialog {
+  width: min(1440px, calc(100vw - 48px)); max-width: none; height: 88dvh; max-height: 960px; margin: auto; padding: 0;
+  border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); color: var(--text);
+}
+.detail-dialog[open] { display: flex; flex-direction: column; }
+.detail-dialog::backdrop { background: rgba(6, 8, 12, .62); }
+.detail-dialog-head {
+  display: flex; justify-content: space-between; align-items: center;
+  padding: 10px 14px 10px 22px; border-bottom: 1px solid var(--border);
+  color: var(--muted); font-size: 13px;
+}
+.detail-close {
+  width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border);
+  background: var(--surface-soft); color: var(--secondary); font-size: 16px; line-height: 1; cursor: pointer;
+}
+.detail-close:hover { background: var(--hover); }
+.detail-dialog-body { padding: 16px 28px; overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
+.detail-dialog-head, .detail-dialog > .detail-source { flex-shrink: 0; }
+.reader-tools { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 12px 0; font-size: 13px; }
+.reader-tools button { padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); cursor: pointer; }
+.reader-title { margin: 8px 0; font-size: 26px; }
+.reader-columns { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; padding: 18px 0 12px; color: var(--muted); font-size: 12px; letter-spacing: .08em; }
+.reader-pair { display: grid; grid-template-columns: minmax(0, 1.15fr) 40px minmax(0, 1fr); align-items: start; padding: 26px 0; border-top: 1px solid var(--border); }
+.reader-code, .reader-prose { min-width: 0; }
+.reader-prose { line-height: 1.85; overflow-wrap: anywhere; padding-left: 6px; }
+.reader-prose h3 { margin: 0 0 16px; font-size: 20px; }
+.reader-prose p { margin: 0 0 14px; }
+.reader-link { border-top: 1px dashed var(--border-strong); margin-top: 32px; }
+.reader-unpaired .reader-link { visibility: hidden; }
+.reader-snippet { margin: 0 0 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); overflow: hidden; }
+.reader-snippet figcaption { padding: 12px 14px 4px; font-size: 13px; font-weight: 600; }
+.reader-snippet .ev-src { padding: 0 14px 8px; overflow-wrap: anywhere; }
+.reader-snippet .ev-code { border: 0; border-top: 1px solid var(--border); border-radius: 0; white-space: pre; max-width: 100%; }
+.reader-snippet .ev-bad { padding: 12px 14px; }
+.detail-example { white-space: pre; overflow-x: auto; padding: 12px; background: var(--surface-soft); }
+@media (max-width: 850px) {
+  .detail-dialog { width: calc(100vw - 20px); height: 94dvh; max-height: 94dvh; }
+  .detail-dialog-body { padding: 14px 18px; }
+  .reader-columns { display: none; }
+  .reader-pair { grid-template-columns: minmax(0, 1fr); gap: 16px; }
+  .reader-link { width: 0; height: 16px; border-top: 0; border-left: 1px dashed var(--border-strong); margin: -16px 0 0 20px; }
+  .reader-tools { align-items: flex-start; flex-direction: column; }
+}
+.detail-dialog-body .detail-block { background: var(--surface-soft); }
+/* 保存版本（G）：版本条上的入口 + 保存弹层。弹层外观沿用节点详情弹层那一套，
+   只有表单区不同；关闭三方式与详情层一致。 */
+.versions button.save-open {
+  border-color: var(--success-border); background: var(--success-bg); color: var(--success);
+}
+.versions button.save-open:hover { background: var(--success-bg); }
+.save-dialog {
+  width: min(560px, calc(100vw - 48px)); max-height: 82vh; margin: auto; padding: 0;
+  border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); color: var(--text);
+}
+.save-dialog[open] { display: flex; flex-direction: column; }
+.save-dialog::backdrop { background: rgba(6, 8, 12, .62); }
+.save-dialog-body { padding: 16px 22px 18px; overflow-y: auto; }
+.save-check {
+  margin: 0 0 14px; padding: 8px 12px; border-radius: 8px;
+  background: var(--surface-soft); border: 1px solid var(--border); color: var(--secondary); font-size: 13px;
+}
+.save-check[data-kind="ok"] { background: var(--success-bg); border-color: var(--success-border); color: var(--success); }
+.save-check[data-kind="warn"] { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning); }
+.save-check[data-kind="bad"] { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); }
+.save-problems { margin: 6px 0 0; padding-left: 18px; }
+.save-field { display: block; margin: 0 0 14px; font-size: 13px; color: var(--secondary); }
+.save-label { display: block; margin-bottom: 6px; color: var(--muted); }
+.save-field input[type="text"], .save-field textarea {
+  width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 8px;
+  border: 1px solid var(--border); background: var(--page); color: var(--text); font-size: 13px;
+}
+.save-field textarea { resize: vertical; font-family: inherit; }
+.save-stages { border: 0; padding: 0; margin: 0 0 14px; }
+.save-stages label { margin-right: 16px; }
+.save-error {
+  margin: 0 0 12px; padding: 8px 12px; border-radius: 8px;
+  background: var(--danger-bg); border: 1px solid var(--danger-border); color: var(--danger); font-size: 13px;
+}
+.save-actions { display: flex; gap: 10px; justify-content: flex-end; }
+.save-submit, .save-cancel {
+  padding: 7px 18px; border-radius: 8px; font-size: 13px; cursor: pointer;
+  border: 1px solid var(--border); background: var(--surface); color: var(--text);
+}
+.save-submit { border-color: var(--success-border); background: var(--success-bg); color: var(--success); }
+.save-submit:hover:not(:disabled) { background: var(--success-hover); }
+.save-submit:disabled { opacity: .5; cursor: not-allowed; }
+.save-cancel:hover { background: var(--hover); }
+.detail-lead-line { margin: 0 0 12px; color: var(--secondary); max-width: 82ch; }
+.detail-miss { margin: 0 0 8px; color: var(--secondary); max-width: 82ch; }
+.detail-source {
+  margin: 0; padding: 10px 22px 14px; border-top: 1px solid var(--border);
+  color: var(--muted); font-size: 12px;
+}
+.detail-source:empty { display: none; }
+/* 现场渲染画布：原生装配出的整页装在 iframe（独立小房间）里，样式自带；
+   这里只管小房间在阅读页里的占位与外观，滚动由小房间内部自己处理 */
+.chart-stage {
+  padding: 6px;
+  background: var(--canvas);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+}
+.chart-frame {
+  display: block;
+  width: 100%;
+  height: 78vh;
+  border: 0;
+  border-radius: 8px;
+  background: var(--canvas);
+}
+.muted { color: var(--muted); font-size: 13px; }
+/* 渲染失败说明卡（B·说人话）：坏的是哪份 / 原因 / 建议 + 可折叠技术原文 */
+.fail-card {
+  max-width: 640px;
+  margin: 40px auto;
+  padding: 18px 22px;
+  border-radius: 10px;
+  background: var(--surface-soft);
+  border: 1px solid var(--border-strong);
+}
+.fail-card h2 { margin: 0 0 8px; font-size: 17px; color: var(--danger); }
+.fail-card p { margin: 6px 0; line-height: 1.7; }
+.fail-which { color: var(--muted); font-size: 13px; }
+.fail-reason { color: var(--text); }
+.fail-hint { color: var(--success); }
+.fail-detail { margin-top: 12px; }
+.fail-detail summary { cursor: pointer; color: var(--muted); font-size: 13px; }
+.fail-detail pre {
+  margin: 8px 0 0; padding: 10px 14px; border-radius: 8px;
+  background: var(--code-bg); border: 1px solid var(--border); color: var(--accent);
+  font-size: 12px; overflow-wrap: anywhere; white-space: pre-wrap;
+}
+/* 说明文档面板（C）：一个步骤一块，块内正文按段落与列表排 */
+.details-panel {
+  margin: 20px 0 0; padding: 16px 22px; border-radius: 10px;
+  background: var(--surface); border: 1px solid var(--border);
+}
+.details-panel h2 { margin: 0 0 6px; font-size: 15px; }
+.details-lead { margin: 0 0 14px; color: var(--secondary); max-width: 82ch; }
+.details-warn {
+  margin: 0 0 14px; padding: 10px 14px; border-radius: 8px;
+  background: var(--warning-bg); border: 1px solid var(--warning-border); color: var(--warning);
+}
+.detail-block {
+  margin: 0 0 14px; padding: 12px 16px; border-radius: 8px;
+  background: var(--surface-soft); border: 1px solid var(--border);
+}
+.detail-block h3 { margin: 0 0 6px; font-size: 14px; color: var(--text); }
+.detail-block p { margin: 0 0 6px; color: var(--secondary); max-width: 82ch; }
+.detail-block p:last-child, .detail-block ul:last-child { margin-bottom: 0; }
+.detail-block ul { margin: 0 0 6px; padding-left: 20px; color: var(--secondary); }
+.detail-block li { margin: 2px 0; }
+.detail-block code {
+  padding: 1px 5px; border-radius: 4px; background: var(--code-bg); color: var(--accent); font-size: 12px;
+}
+.detail-sub { margin-left: 8px; color: var(--muted); font-size: 12px; font-weight: 400; }
+.detail-note { margin-left: 8px; color: var(--muted); font-size: 12px; font-weight: 400; }
+.detail-id { margin-left: 8px; font-weight: 400; }
+
+/* 源码证据面板（D）：一条证据一块；有效引用贴带行号代码，坏引用红字说原因 */
+.evidence-panel {
+  margin: 20px 0 0; padding: 16px 22px; border-radius: 10px;
+  background: var(--surface); border: 1px solid var(--border);
+}
+.evidence-panel h2 { margin: 0 0 6px; font-size: 15px; }
+.ev-summary { margin: 0 0 6px; color: var(--secondary); }
+.ev-warn {
+  margin: 0; padding: 10px 14px; border-radius: 8px;
+  background: var(--warning-bg); border: 1px solid var(--warning-border); color: var(--warning);
+}
+.ev-block {
+  margin: 0 0 14px; padding: 12px 16px; border-radius: 8px;
+  background: var(--surface-soft); border: 1px solid var(--border);
+}
+.ev-block:last-child { margin-bottom: 0; }
+.ev-block h3 { margin: 0 0 6px; font-size: 14px; color: var(--text); }
+.ev-src { margin: 0 0 6px; color: var(--muted); font-size: 12px; }
+.ev-code {
+  margin: 0; padding: 10px 14px; border-radius: 8px;
+  background: var(--code-bg); border: 1px solid var(--border); color: var(--secondary);
+  font-size: 12px; line-height: 1.6; overflow-x: auto;
+}
+.ev-bad { margin: 0; color: var(--danger); }
+.ev-block-bad { border-color: var(--danger-border); }
+
+/* 页面骨架与首页。装饰只出现在首页介绍区，不进入正文和图画布。 */
+[hidden] { display: none !important; }
+html { scroll-behavior: smooth; scroll-padding-top: 24px; }
+body { min-width: 320px; -webkit-font-smoothing: antialiased; }
+button, input, textarea { font-family: inherit; }
+button, a { -webkit-tap-highlight-color: transparent; }
+a, button { touch-action: manipulation; }
+:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
+::selection { background: var(--accent-bg); color: var(--text); }
+.app-bar {
+  min-height: 88px; padding: 18px max(32px, calc((100% - 1200px) / 2));
+  display: flex; justify-content: space-between; align-items: center; gap: 20px;
+  border-bottom: 1px solid var(--border);
+}
+.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--text); font-size: 19px; font-weight: 650; letter-spacing: -.5px; }
+.brand:hover { text-decoration: none; }
+.brand-mark {
+  position: relative; display: grid; place-items: center; width: 35px; height: 35px;
+  background: var(--accent-bg); border: 1px solid var(--accent-border); border-radius: 10px;
+  color: var(--accent); font: 600 23px/1 "Segoe UI", sans-serif;
+}
+.brand-mark span { position: absolute; width: 5px; height: 5px; background: var(--accent); right: -3px; top: 6px; border-radius: 2px; }
+.brand-caption { padding-left: 15px; margin-left: 15px; border-left: 1px solid var(--border); color: var(--muted); font-size: 12px; font-weight: 400; letter-spacing: .5px; }
+.theme-switch { display: flex; padding: 4px; gap: 3px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); flex-shrink: 0; }
+.theme-switch button { padding: 6px 12px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--muted); font-size: 12px; cursor: pointer; line-height: 1.5; }
+.theme-switch button span { font-size: 15px; margin-right: 3px; }
+.theme-switch button[aria-pressed="true"] { background: var(--surface); color: var(--text); border-color: var(--border); box-shadow: 0 2px 4px rgba(0, 0, 0, .04); }
+.theme-switch button:hover { color: var(--text); }
+.skip-link { position: absolute; top: -70px; left: 20px; padding: 10px 18px; background: var(--surface); border: 1px solid var(--accent); border-radius: 8px; z-index: 10; }
+.skip-link:focus { top: 16px; }
+.home-main { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
+.project-hero { display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; gap: 40px; padding: 66px 0 52px; min-height: 390px; }
+.hero-copy { min-width: 0; position: relative; z-index: 1; }
+.eyebrow { margin: 0 0 17px; display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 11px; font-weight: 500; letter-spacing: 2px; }
+.eyebrow-line { display: inline-block; width: 20px; height: 2px; background: var(--accent); }
+.project-hero h1 { margin: 0 0 22px; color: var(--text); font-size: clamp(30px, 3.2vw, 46px); line-height: 1.35; letter-spacing: -1.3px; font-weight: 650; text-wrap: balance; overflow-wrap: anywhere; }
+.hero-description { margin: 0; max-width: 55ch; color: var(--muted); font-size: 14px; line-height: 1.9; overflow-wrap: anywhere; }
+.hero-actions { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; margin: 28px 0 22px; }
+.primary-link { display: inline-flex; gap: 30px; align-items: center; padding: 11px 19px; border-radius: 8px; background: var(--primary); color: var(--primary-ink); font-size: 13px; font-weight: 600; transition: filter .15s, transform .15s; }
+.primary-link span { font-size: 18px; line-height: 1; }
+.primary-link:hover { filter: brightness(1.09); transform: translateY(-1px); text-decoration: none; }
+/* 首页 hero 的主按钮：进建筑是这一页最想让人点的那一下，尺寸与间距都压过次级入口。 */
+.primary-link-lead { gap: 36px; padding: 15px 24px; font-size: 15px; box-shadow: var(--shadow); }
+.secondary-link { display: inline-flex; align-items: center; padding: 12px 18px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface-soft); color: var(--text); font-size: 13px; font-weight: 600; transition: border-color .15s, color .15s; }
+.secondary-link:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
+.hero-hint { font-size: 12px; color: var(--muted); }
+.workspace-details { margin-top: 20px; max-width: 100%; color: var(--muted); font-size: 12px; }
+.workspace-details summary { cursor: pointer; width: fit-content; max-width: 100%; overflow-wrap: anywhere; }
+.workspace-details p { margin: 8px 0 0; padding: 10px 12px; background: var(--surface-soft); border: 1px solid var(--border); border-radius: 6px; overflow-wrap: anywhere; }
+.top .workspace-details { margin-top: 12px; }
+.hero-art { position: relative; min-width: 0; color: var(--accent); background: radial-gradient(ellipse, var(--glow), transparent 69%); }
+.hero-art svg { position: relative; display: block; width: 100%; height: auto; }
+.art-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 32px 32px; mask-image: radial-gradient(ellipse, #000 12%, transparent 70%); }
+.art-ghost { fill: var(--surface); stroke: var(--border-strong); stroke-opacity: .55; }
+.art-node-halo { fill: var(--accent-bg); stroke: var(--accent-border); opacity: .65; }
+.art-node { fill: var(--surface); stroke: var(--accent-border); }
+.art-dot { opacity: .7; }
+.art-caption { display: block; text-align: center; color: var(--muted); font-size: 10px; letter-spacing: 4px; margin-top: -12px; }
+.project-metrics { display: grid; grid-template-columns: 1fr 1fr 1.35fr; padding: 23px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
+.project-metrics > div { padding: 0 30px; border-left: 1px solid var(--border); }
+.project-metrics > div:first-child { padding-left: 0; border-left: 0; }
+.metric-label { display: block; color: var(--muted); font-size: 12px; margin-bottom: 8px; }
+.project-metrics strong { font: 500 30px/1.3 "Segoe UI", sans-serif; color: var(--text); margin-right: 12px; font-variant-numeric: tabular-nums; }
+.metric-unit { font-size: 12px; color: var(--muted); }
+.metric-note p { margin: 0 0 2px; color: var(--secondary); font-size: 14px; font-weight: 500; }
+.metric-note p span { color: var(--muted); padding: 0 10px; }
+.business-section { padding-top: 38px; scroll-margin-top: 22px; }
+.section-heading { display: flex; gap: 20px; justify-content: space-between; align-items: flex-end; margin-bottom: 20px; }
+.section-heading .eyebrow { margin-bottom: 6px; font-size: 10px; }
+.section-heading h2 { margin: 0; color: var(--text); font-size: 23px; font-weight: 600; letter-spacing: -.5px; }
+.home-page .status[data-kind="ok"] { color: var(--muted); }
+.home-page .status { white-space: normal; text-align: right; }
+.home-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 20px; }
+.business-card { display: flex; flex-direction: column; padding: 26px 28px 20px; border-radius: 13px; min-height: 245px; transition: border-color .18s, box-shadow .18s, transform .18s; overflow-wrap: anywhere; }
+.business-card:hover { border-color: var(--accent-border); box-shadow: var(--shadow); transform: translateY(-3px); }
+.business-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
+.business-icon { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 10px; color: var(--accent); background: var(--surface-soft); }
+.business-icon svg { width: 22px; height: 22px; }
+.business-number { font: 12px/1.5 Consolas, monospace; color: var(--muted); }
+.business-card h3 { margin: 0 0 8px; color: var(--text); font-size: 20px; font-weight: 600; }
+.business-card .business-intro { margin: 0 0 24px; color: var(--muted); font-size: 13px; line-height: 1.8; }
+.business-card .chip-row { margin: 0 0 20px; }
+.business-card-footer { display: flex; gap: 16px; justify-content: space-between; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12px; }
+.business-enter { color: var(--accent); white-space: nowrap; }
+.business-card .business-warning { color: var(--danger); margin: 0 0 16px; padding: 8px 10px; background: var(--danger-bg); border-radius: 6px; font-size: 12px; }
+.loading-copy { color: var(--muted); }
+.empty-state { grid-column: 1 / -1; padding: 35px; border: 1px dashed var(--border-strong); border-radius: 12px; }
+.empty-state h3 { font-size: 17px; margin: 0 0 8px; }
+.empty-state p { color: var(--muted); margin: 0; }
+.home-footer { display: flex; justify-content: space-between; gap: 16px; padding: 28px 0; margin-top: 46px; border-top: 1px solid var(--border); color: var(--muted); font-size: 11px; }
+.page-content { max-width: 1320px; margin: 0 auto; padding: 36px 40px 56px; }
+.read-page .page-content { max-width: 1800px; }
+.top { gap: 32px; margin-bottom: 28px; }
+.top > div { min-width: 0; }
+.top h1 { margin: 14px 0 10px; font-size: 28px; line-height: 1.4; overflow-wrap: anywhere; }
+.top .sub { overflow-wrap: anywhere; }
+.top #repoLine { margin-top: 10px; font-size: 12px; }
+.top .status { white-space: normal; text-align: right; max-width: 34%; flex-shrink: 0; }
+.business-page .cards { gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
+/* 图卡与首页业务卡同构：内容顶对齐、meta 沉底，同行卡片底部空白齐平。 */
+.business-page .card { display: flex; flex-direction: column; padding: 24px; border-radius: 12px; overflow-wrap: anywhere; }
+.business-page .card .meta { margin-top: auto; padding-top: 10px; }
+.business-page .card h2 { line-height: 1.7; margin-bottom: 10px; }
+.chart-summary { margin: 0 0 18px; }
+/* 汇总行点状态后的定位提示：闪一下目标卡的外框，1.2s 后撤掉（business.js）。 */
+.card.flash { outline: 2px solid var(--accent); outline-offset: 3px; }
+
+/* ── 展示页：吸顶格式切换器＋星图＋球阵 ───────────────────────────── */
+.heading-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
+.showcase-link {
+  display: inline-flex; padding: 7px 14px; border-radius: 8px;
+  border: 1px solid var(--accent-border); background: var(--accent-bg); color: var(--accent);
+  font-size: 12px; font-weight: 600; white-space: nowrap;
+}
+.showcase-link:hover { background: var(--accent-hover); text-decoration: none; }
+.view-switch {
+  position: sticky; top: 0; z-index: 6;
+  display: flex; gap: 6px; align-items: center;
+  margin: 0 -40px 22px; padding: 10px 40px;
+  background: var(--page); border-bottom: 1px solid var(--border);
+}
+.view-switch button[data-view] {
+  padding: 7px 16px; border-radius: 8px; border: 1px solid var(--border);
+  background: var(--surface); color: var(--secondary); font-size: 13px; cursor: pointer;
+}
+.view-switch button[data-view]:hover { color: var(--text); }
+.view-switch button[data-view][aria-pressed="true"] { border-color: var(--accent-border); background: var(--accent-bg); color: var(--accent); }
+.sphere-start {
+  margin-left: auto; padding: 7px 14px; border-radius: 8px;
+  border: 1px solid var(--success-border); background: var(--success-bg); color: var(--success);
+  font-size: 12px; cursor: pointer;
+}
+.sphere-start:hover { background: var(--success-hover); }
+.view-note { margin: 10px 2px 0; color: var(--muted); font-size: 12px; }
+/* 星图：SVG 星座。主星带光晕并错相闪烁；连线只连真实归属。 */
+.star-box { border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); overflow: hidden; }
+.star-svg { display: block; width: 100%; height: auto; }
+.star-svg a { cursor: pointer; }
+.star-line { stroke: var(--accent-border); stroke-width: 1; opacity: .7; }
+.star-glow { fill: var(--glow); animation: star-twinkle 3.2s ease-in-out infinite; }
+.star-business { fill: var(--accent); }
+.star-svg a:hover .star-business { fill: var(--primary); }
+.star-chart { fill: var(--secondary); }
+.star-svg a:hover .star-chart { fill: var(--accent); }
+.star-label { fill: var(--text); font-size: 15px; font-weight: 600; }
+@keyframes star-twinkle { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
+/* 球阵：节点绝对定位，位移/层序/透明度由 showcase.js 每帧写入。 */
+.sphere-box {
+  position: relative; height: 520px; overflow: hidden; border: 1px solid var(--border); border-radius: 12px;
+  background: radial-gradient(ellipse at 50% 45%, var(--glow), transparent 70%), var(--surface-soft);
+}
+.sphere-node { position: absolute; display: grid; place-items: center; width: 18px; height: 18px; color: inherit; }
+.sphere-node[data-kind="business"] { width: 34px; height: 34px; }
+.sphere-dot {
+  display: block; width: 100%; height: 100%; border-radius: 50%;
+  background: var(--accent-bg); border: 1px solid var(--accent-border); box-shadow: 0 0 18px var(--glow);
+}
+.sphere-node[data-kind="chart"] .sphere-dot { background: var(--surface); border-color: var(--border-strong); box-shadow: none; }
+.sphere-node:hover .sphere-dot { border-color: var(--accent); }
+.sphere-label { position: absolute; top: 100%; margin-top: 5px; white-space: nowrap; font-size: 12px; color: var(--text); }
+.sphere-node[data-kind="chart"] .sphere-label { display: none; }
+.badge { font-weight: 500; white-space: normal; }
+.card h2 .badge { font-weight: 500; }
+.versions button { font-family: inherit; }
+.guide, .panel, .details-panel, .evidence-panel { overflow-wrap: anywhere; }
+@media (max-width: 850px) {
+  .app-bar { padding: 16px 28px; }
+  .home-main, .page-content { padding-left: 28px; padding-right: 28px; }
+  .project-hero { gap: 20px; grid-template-columns: 1.4fr 1fr; padding: 42px 0; min-height: 330px; }
+  .hero-hint { display: none; }
+  .project-metrics { grid-template-columns: 1fr 1fr; }
+  .project-metrics .metric-note { display: none; }
+  .business-card { padding: 22px; }
+  .view-switch { margin: 0 -28px 22px; padding: 10px 28px; }
+}
+@media (max-width: 600px) {
+  .app-bar { min-height: 72px; padding: 14px 20px; gap: 12px; }
+  .brand-caption { display: none; }
+  .brand { font-size: 17px; gap: 10px; }
+  .theme-switch button { padding: 5px 8px; }
+  .theme-switch button span { display: none; }
+  .home-main, .page-content { padding-left: 20px; padding-right: 20px; }
+  .project-hero { display: block; min-height: auto; padding: 38px 0 32px; }
+  .hero-art { display: none; }
+  .project-hero h1 { font-size: 30px; letter-spacing: -.8px; }
+  .hero-actions { margin-top: 24px; }
+  .project-metrics > div { padding: 0 18px; }
+  .project-metrics strong { display: block; margin-bottom: 3px; }
+  .business-section { padding-top: 30px; }
+  .section-heading { align-items: center; }
+  .home-footer { margin-top: 30px; flex-wrap: wrap; }
+  .home-footer > span:last-child { display: none; }
+  .top { display: block; }
+  .top .status { max-width: none; margin-top: 16px; text-align: left; }
+  .top h1 { font-size: 24px; }
+  .view-switch { margin: 0 -20px 18px; padding: 8px 20px; }
+  .sphere-box { height: 400px; }
+}
+@media (prefers-reduced-motion: reduce) {
+  html { scroll-behavior: auto; }
+  *, *::before, *::after { transition: none !important; animation: none !important; }
+}
+
+/* ── 建筑总览页：三维视图＋房间目录 ───────────────────────────── */
+.building-layout {
+  display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 18px;
+  align-items: stretch; margin-top: 18px;
+}
+.building-viewport {
+  position: relative; min-width: 0; min-height: 560px; height: calc(100vh - 230px);
+  border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
+  background: radial-gradient(120% 90% at 50% 0%, #eef3ea 0%, #dfe7da 62%, #d3ddce 100%);
+}
+.building-viewport canvas { display: block; width: 100%; height: 100%; touch-action: none; }
+.view-toolbar {
+  position: absolute; top: 12px; left: 12px; right: 12px; z-index: 2;
+  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
+  pointer-events: none;
+}
+.view-toolbar > * { pointer-events: auto; }
+/* 操作行分两段：左边是浏览方式，右边是资料目录开关（目录收起后开关仍在原位，点得回来）。 */
+.toolbar-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+.toolbar-field { font-size: 13px; color: #41504a; }
+.floor-select, .reset-button, .walk-button, .panel-toggle {
+  padding: 7px 12px; border-radius: 8px; font-size: 13px; font-family: inherit;
+  border: 1px solid #b9c6b2; background: rgba(251, 250, 240, .92); color: #29433a;
+}
+.floor-select:hover, .reset-button:hover, .walk-button:hover, .panel-toggle:hover { border-color: #487465; }
+.walk-button { font-weight: 600; border-color: #7f9c8b; }
+.walk-button[aria-pressed="true"] { background: #487465; border-color: #3d6455; color: #fbfaf0; }
+.walk-button:disabled { cursor: not-allowed; opacity: .55; border-color: #b9c6b2; color: #7d8f81; }
+.preview-toggle {
+  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
+  padding: 7px 12px; border-radius: 8px; border: 1px dashed #9db4a4;
+  background: rgba(251, 250, 240, .92); color: #29433a; font-size: 13px;
+}
+.preview-toggle small { display: block; font-size: 11px; color: #7d8f81; }
+.preview-banner {
+  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 2;
+  margin: 0; padding: 7px 16px; border-radius: 999px; font-size: 13px;
+  background: var(--warning-bg); border: 1px solid var(--warning-border); color: var(--warning);
+}
+.scene-hint {
+  position: absolute; right: 14px; bottom: 12px; z-index: 1; margin: 0;
+  font-size: 12px; color: #6c7d70; pointer-events: none;
+}
+/* 探索模式的操作层：左下角位置提示与方向按钮，按钮按住即走（pointerdown/up）。 */
+.walk-hud {
+  position: absolute; left: 12px; bottom: 12px; z-index: 2;
+  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
+}
+/* 进不去探索的说明：和漫游操作层同角（进不去时操作层是隐藏的，不会叠在一起）。 */
+.walk-notice {
+  position: absolute; left: 12px; bottom: 12px; z-index: 3; margin: 0;
+  max-width: min(460px, calc(100% - 24px)); padding: 8px 14px; border-radius: 10px;
+  font-size: 12px; line-height: 1.6;
+  background: var(--warning-bg); border: 1px solid var(--warning-border); color: var(--warning);
+}
+.walk-location {
+  margin: 0; padding: 6px 14px; border-radius: 999px; font-size: 12px;
+  background: rgba(251, 250, 240, .92); border: 1px solid #b9c6b2; color: #29433a;
+}
+.walk-pad { display: grid; grid-template-columns: repeat(3, 38px); gap: 4px; }
+.walk-pad button {
+  width: 38px; height: 36px; border-radius: 8px; font-size: 15px; line-height: 1;
+  border: 1px solid #b9c6b2; background: rgba(251, 250, 240, .92); color: #2f4a3f;
+  touch-action: none; user-select: none;
+}
+.walk-pad button:hover { border-color: #487465; }
+.walk-pad button[data-pressed="true"] { background: #487465; border-color: #3d6455; color: #fbfaf0; }
+.walk-pad [data-walk-key="ArrowUp"] { grid-area: 1 / 2; }
+.walk-pad [data-walk-key="ArrowLeft"] { grid-area: 2 / 1; }
+.walk-pad [data-walk-key="ArrowDown"] { grid-area: 2 / 2; }
+.walk-pad [data-walk-key="ArrowRight"] { grid-area: 2 / 3; }
+.scene-fallback {
+  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column;
+  align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 28px;
+  background: color-mix(in srgb, var(--page) 78%, transparent);
+}
+.scene-fallback strong { font-size: 17px; }
+.scene-fallback p { margin: 0; max-width: 46ch; color: var(--secondary); font-size: 13px; }
+.building-directory {
+  display: flex; flex-direction: column; gap: 16px; padding: 20px;
+  border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
+  max-height: calc(100vh - 230px); overflow-y: auto;
+}
+.building-directory .project-block h2 { margin: 8px 0 6px; font-size: 21px; }
+.project-description { margin: 0; color: var(--muted); font-size: 13px; }
+.metrics { margin: 10px 0 0; font-size: 13px; color: var(--secondary); }
+.phase-card {
+  display: flex; gap: 12px; align-items: flex-start; padding: 13px 15px;
+  border: 1px solid var(--accent-border); background: var(--accent-bg); border-radius: 10px;
+}
+.phase-card .status-dot {
+  flex: none; width: 10px; height: 10px; border-radius: 999px; margin-top: 5px;
+  background: var(--accent); box-shadow: 0 0 0 4px var(--glow);
+}
+.phase-card strong { font-size: 14px; }
+.phase-card p { margin: 3px 0 0; font-size: 12.5px; color: var(--secondary); }
+.notices details {
+  border: 1px solid var(--warning-border); background: var(--warning-bg);
+  border-radius: 10px; padding: 10px 14px; font-size: 13px;
+}
+.notices summary { cursor: pointer; color: var(--warning); font-weight: 600; }
+.notices ul { margin: 8px 0 2px; padding-left: 18px; color: var(--secondary); }
+.notices li { margin: 4px 0; }
+.section-label { font-size: 12px; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }
+.section-label span { text-transform: none; letter-spacing: 0; }
+.rooms { display: flex; flex-direction: column; gap: 12px; }
+.room-card {
+  border: 1px solid var(--border); border-radius: 10px; padding: 13px 15px;
+  background: var(--surface-soft); cursor: pointer;
+}
+.room-card:hover { border-color: var(--border-strong); background: var(--hover); }
+.room-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
+.room-title { font-weight: 650; font-size: 15px; }
+.room-meta { font-size: 12px; color: var(--muted); }
+.room-intro { margin: 6px 0 0; font-size: 12.5px; color: var(--secondary); }
+.room-entries { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
+/* 目录卡里的资料入口：按钮（在房内面板里读），不是外链。 */
+.room-entry {
+  display: block; width: 100%; text-align: left; font: inherit; cursor: pointer;
+  color: var(--text); font-size: 12.5px; padding: 5px 9px; border-radius: 6px;
+  border: 1px solid var(--border); background: var(--surface);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.room-entry:hover { border-color: var(--accent-border); background: var(--accent-bg); }
+.room-empty { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
+.diagnostics-panel {
+  margin-top: 18px; padding: 20px 22px; border: 1px solid var(--danger-border);
+  background: var(--danger-bg); border-radius: 14px;
+}
+.diagnostics-panel h2 { margin: 0 0 4px; font-size: 18px; color: var(--danger); }
+.diagnostics-note { margin: 0 0 12px; font-size: 13px; color: var(--secondary); }
+.problem-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
+.problem-item {
+  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
+  padding: 9px 12px; border-radius: 8px; background: var(--surface);
+  border: 1px solid var(--border); font-size: 13px;
+}
+.problem-item[data-severity="error"] { border-color: var(--danger-border); }
+.problem-item[data-severity="warning"] { border-color: var(--warning-border); }
+.problem-code { flex: none; font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: var(--muted); }
+.problem-message { flex: 1 1 30ch; }
+.problem-path {
+  font-family: ui-monospace, Consolas, monospace; font-size: 12px;
+  background: var(--code-bg); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px;
+  color: var(--accent);
+}
+@media (max-width: 1080px) {
+  .building-layout { grid-template-columns: 1fr; }
+  .building-directory { max-height: none; }
+  .building-viewport { height: 62vh; min-height: 420px; }
+  /* 窄屏上操作层与右下角提示、底部横幅会挤在一起：位置提示挪到提示行上方。 */
+  .walk-hud { bottom: 34px; }
+  .preview-banner { bottom: 78px; }
+}
+
+/* ── 建筑总览页的"全窗口"形态（作者 2026-09-25 提出）────────────────────
+   建筑生成成功后整页切到这一形态：页面不滚动，三维视图占满浏览器窗口，
+   资料目录改成浮在视口右侧的抽屉，点开关收起后视图占满全宽。
+   类由 building.js 在让舞台现身时加到 body 上——没有蓝图、诊断失败、未配置
+   这些页没有舞台、不加这个类，仍是普通滚动文档。 */
+.building-page.building-live { height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
+/* 顶栏与页头压成两行，把高度让给视图；工作区行展开时浮在页面上，不把视图挤下去。 */
+.building-page.building-live .app-bar { flex: none; min-height: 60px; padding: 8px 22px; }
+.building-page.building-live .brand { font-size: 16px; }
+.building-page.building-live .brand-mark { width: 28px; height: 28px; font-size: 18px; border-radius: 8px; }
+.building-page.building-live .page-content {
+  flex: 1; min-height: 0; width: 100%; max-width: none; padding: 14px 22px 18px;
+  display: flex; flex-direction: column;
+  /* 正常窗口装得下、页面不滚动；窗口矮到装不下时（视图有最小高度）在这里滚，
+     不让内容被裁掉。 */
+  overflow: auto;
+}
+.building-page.building-live .top { flex: none; align-items: baseline; gap: 18px; margin-bottom: 10px; }
+.building-page.building-live .top > div { display: flex; align-items: baseline; gap: 4px 16px; flex-wrap: wrap; }
+.building-page.building-live .top h1 { margin: 0; font-size: 20px; }
+.building-page.building-live .top .crumbs { margin: 0; }
+/* 一句话说明压成一行（窄了截断），不让页头长高。 */
+.building-page.building-live .top .sub {
+  flex: 1 1 20ch; min-width: 0; margin: 0; font-size: 12.5px;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.building-page.building-live .workspace-details { margin-top: 0; }
+.building-page.building-live .workspace-details p { position: absolute; z-index: 6; max-width: min(80ch, 90vw); box-shadow: var(--shadow); }
+.building-page.building-live .building-layout {
+  position: relative; flex: 1; min-height: 0; margin-top: 0;
+  display: flex; flex-direction: column;
+  /* 抽屉宽度是唯一来源：让位宽度由它算出来（抽屉 + 左右各 12px 间距），两者不会再对不上
+     ——按一半宽度让位时，窄窗口上提示会被更宽的抽屉盖住。 */
+  --panel-w: min(400px, calc(100% - 24px));
+  --dock: calc(var(--panel-w) + 24px);
+}
+.building-page.building-live .building-layout[data-directory="closed"] { --dock: 0px; }
+.building-page.building-live .building-viewport { flex: 1; min-height: 320px; height: auto; }
+.building-page.building-live .preview-banner {
+  left: calc((100% - var(--dock)) / 2); bottom: 16px; text-align: center;
+  /* 窄窗口上按剩余可见宽度收窄并折行。 */
+  max-width: max(120px, calc(100% - var(--dock) - 24px));
+}
+.building-page.building-live .scene-hint {
+  /* 提示就在操作行里：常态排布（不再是绝对定位的右下角浮字），窄屏跟着换行、由 --toolbar-h
+     一并算进让位高度——它不会再和底部横幅、左下角方向按钮区抢地方。 */
+  position: static; margin: 0; max-width: none;
+  font-size: 12px; color: #6c7d70; pointer-events: none;
+}
+/* 抽屉本身：从操作行下方开始（开关那一行始终露在外面），收起时移出右侧并退出命中与焦点。
+   起点按操作行的实际高度算（--toolbar-h 由 building.js 量，含窄屏换行与放大字号），
+   不让抽屉盖住收起开关。 */
+.building-page.building-live .building-directory {
+  position: absolute; top: calc(24px + var(--toolbar-h, 34px)); right: 12px; bottom: 12px; z-index: 3;
+  width: var(--panel-w); max-height: none;
+  box-shadow: var(--shadow);
+  transition: transform .18s ease, opacity .18s ease, visibility .18s;
+}
+.building-page.building-live .building-layout[data-directory="closed"] .building-directory {
+  transform: translateX(calc(100% + 20px)); opacity: 0; visibility: hidden;
+}
+/* 读资料时目录也让位（面板是浮在视口上的卡片，目录在它后面只露半截）：抽屉与它的开关一起
+   收起来，读完关掉面板就回来。这是显示规则，不改作者存的展开／收起选择。 */
+.building-page.building-live .building-layout[data-reading="true"] { --dock: 0px; }
+.building-page.building-live .building-layout[data-reading="true"] .building-directory {
+  transform: translateX(calc(100% + 20px)); opacity: 0; visibility: hidden;
+}
+.building-page.building-live .building-layout[data-reading="true"] .panel-toggle { visibility: hidden; }
+/* 读资料时锁住场景交互：卡片四周露出的画布不接拖动、滚轮与点牌子（关掉面板就恢复）；
+   屏幕方向按钮同样不生效并变淡（该停的输入一起停，页面那层还有一道闸）。
+   操作提示这时也收起：它介绍的几个动作此刻都做不了。 */
+.building-page.building-live .building-layout[data-reading="true"] .building-viewport canvas { pointer-events: none; }
+.building-page.building-live .building-layout[data-reading="true"] .walk-pad button { opacity: .45; pointer-events: none; }
+.building-page.building-live .building-layout[data-reading="true"] .scene-hint { visibility: hidden; }
+/* 资料卡片顶部让开操作行（含换行后的实际高度），底部让开"完整外观预览"横幅的实际高度
+   （窄屏它会折行）：两头都不许压住露在外面的东西。面板不是模态，露在外面的控制照常可用。 */
+.building-page.building-live .material-panel {
+  inset-block-start: max(clamp(28px, 6vh, 64px), calc(var(--toolbar-h, 34px) + 36px));
+  inset-block-end: max(clamp(28px, 6vh, 64px), calc(var(--banner-h, 0px) + 24px));
+}
+/* 窗口窄到抽屉几乎占满整幅（< 600px）：并排放不下提示，改成"抽屉让开底部一条带"——
+   横幅按实际高度留在带里（它是如实标注，不许被盖住）。操作提示此刻在操作行里，不受影响。 */
+@media (max-width: 600px) {
+  .building-page.building-live .building-layout { --dock: 0px; }
+  .building-page.building-live .building-directory {
+    bottom: calc(12px + var(--banner-h, 0px) + 16px);
+  }
+}
+/* 小窗口漫游时左下角是方向按钮区，横幅与它并排不下：让横幅退场——同一句话在页头状态行上
+   一直都有（"完整外观预览 · 不代表当前阶段（…）"），没有丢掉这条如实标注。 */
+@media (max-width: 1080px) {
+  .building-page.building-live .building-layout:has(.walk-hud:not([hidden])) .preview-banner { display: none; }
+}
+
+
+/* ── 房内打开资料：介绍＋资料清单＋正文／流程图都在这块面板里 ──────────
+   面板是浮在三维视口上的一张卡片：四周留一圈建筑（作者 2026-09-25 验收时提出——
+   全覆盖会让人看不出自己还在房子里），宽屏也不摊满；打开时暂停漫游输入，人留在原地，
+   关闭后位置与视角原样，接着走。 */
+.material-panel {
+  position: absolute; inset: clamp(28px, 6vh, 64px) clamp(28px, 4vw, 84px); z-index: 4;
+  display: flex; flex-direction: column;
+  max-width: 1480px; margin-inline: auto;
+  background: color-mix(in srgb, var(--surface) 97%, transparent);
+  border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
+  /* 卡片压在浅色场景上，用比通用阴影更重的一档，两套主题下都看得出是浮层。 */
+  box-shadow: 0 16px 44px rgba(14, 26, 20, .22);
+}
+.material-panel[hidden] { display: none; }
+.material-head {
+  flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
+  padding: 14px 18px; border-bottom: 1px solid var(--border);
+}
+.material-kind {
+  margin: 0; font-size: 11.5px; letter-spacing: .12em; color: var(--muted); text-transform: uppercase;
+}
+.material-heading h2 { margin: 5px 0 0; font-size: 19px; }
+.material-close {
+  flex: none; width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border);
+  background: var(--surface-soft); color: var(--secondary); font-size: 16px; line-height: 1; cursor: pointer;
+}
+.material-close:hover { background: var(--hover); }
+.material-body {
+  flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
+}
+.material-side { padding: 14px 16px; overflow-y: auto; border-right: 1px solid var(--border); }
+.material-intro { margin: 0 0 14px; font-size: 13px; color: var(--secondary); }
+.material-list-label {
+  margin: 0; font-size: 11.5px; letter-spacing: .12em; color: var(--muted); text-transform: uppercase;
+}
+.material-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
+/* 作者样式里的 display 会盖过 [hidden] 的 UA 规则：这两处显式收起来，别让"没有资料"时
+   还留着一个空清单框（DOM 测试看不见这条，只在浏览器里现形）。 */
+.material-list[hidden] { display: none; }
+.material-item {
+  width: 100%; display: block; text-align: left; font: inherit; font-size: 12.5px;
+  padding: 6px 10px; border-radius: 6px; cursor: pointer;
+  border: 1px solid var(--border); background: var(--surface);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.material-item:hover { border-color: var(--accent-border); background: var(--accent-bg); }
+.material-item[aria-current="true"] { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); }
+.material-empty { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); }
+.material-reader { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 14px 18px 18px; }
+.material-reader-hint { margin: 0; font-size: 13px; color: var(--muted); }
+.material-reader-title { flex: none; margin: 0 0 8px; font-size: 13px; color: var(--secondary); }
+.material-reader-status {
+  flex: none; margin: 0 0 10px; padding: 9px 12px; border-radius: 8px; font-size: 13px;
+  background: var(--danger-bg); border: 1px solid var(--danger-border); color: var(--danger);
+  overflow-wrap: anywhere;
+}
+.material-reader-status[data-kind="info"] {
+  background: var(--surface-soft); border-color: var(--border); color: var(--muted);
+}
+.material-reader-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
+.material-doc-heading { margin: 18px 0 8px; font-size: 16px; }
+.material-doc-heading[data-level="1"] { margin-top: 0; font-size: 20px; }
+.material-doc-heading[data-level="2"] { font-size: 17px; }
+.material-doc-paragraph { margin: 0 0 12px; color: var(--secondary); }
+.material-doc-list { margin: 0 0 12px; padding-left: 20px; color: var(--secondary); }
+.material-doc-list li { margin: 4px 0; }
+.material-reader-body code {
+  font-family: ui-monospace, Consolas, monospace; font-size: 12.5px;
+  background: var(--code-bg); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px;
+}
+.material-doc-empty { margin: 0; color: var(--muted); }
+.material-reader-frame {
+  flex: 1; width: 100%; min-height: 0; border: 1px solid var(--border); border-radius: 10px;
+  background: var(--page);
+}
+@media (max-width: 1080px) {
+  /* 窄屏上视口本身不高：清单与正文改成上下排，阅读区保住最小高度。 */
+  .material-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
+  .material-side { border-right: 0; border-bottom: 1px solid var(--border); max-height: 34%; }
+}