@arshdelight/practi 0.9.5 → 0.11.0

package/web-default/lang.js

@@ -10,12 +10,12 @@ var POP_I18N = (function () {
   // 字典值：字符串，或函数（复数/拼接类文案按参数生成）
   var M = {
     zh: {
-      settings: '设置', language: '语言', done: '完成',
+      settings: '设置', language: '语言', done: '完成', copied: '已复制', back: '返回', metaInfo: '文档信息',
       tabWizard: '步骤', tabSv: '标准视图', tabDoc: '文档树',
-      labelDocJson: '文档 JSON', labelSvJson: 'StandardView JSON',
+      labelDocJson: '文档 JSON', labelSvJson: '标准视图 JSON',
       // 目录页
       pageTitle: '我的实践',
-      thDocument: '文档', thSteps: '步骤', thAdded: '添加时间',
+      thDocument: '文档', thNodes: '节点', thAdded: '添加时间',
       emptyLead: '还没有记录。写下第一手实践经验，成为一份 POP 文档——哈希可验证，永久保存。',
       emptyHint: '用 <code>practi new</code> 创建',
       countDocs: function (n) { return n + ' 篇文档'; },
@@ -23,7 +23,7 @@ var POP_I18N = (function () {
       pagerPrev: '上一页', pagerNext: '下一页',
       loadFail: '加载失败（/api/directs）',
       // 详情页
-      stepCount: function (n) { return n + ' 个步骤'; },
+      nodeCount: function (n) { return n + ' 个节点'; },
       loading: '加载中…',
       opPar: '以下任务并行执行——顺序无关',
       opChoice: '选择一个分支继续',
@@ -41,22 +41,28 @@ var POP_I18N = (function () {
       endPractice: '实践完结',
       revisions: function (n) { return '修订 (' + n + ')'; },
       refines: function (n) { return '改进 (' + n + ')'; },
+      secNotes: function (n) { return '笔记 (' + n + ')'; },
+      notePanel: '笔记',
+      noteNew: '新建',
+      noteDelete: '删除',
+      noteEmpty: '这条节点还没有笔记，点上方「新建」写一条。',
+      noteServerStale: '服务器像是旧构建（前端新、服务器旧）——重启 practi web 再试',
       docFail: function (s) { return '文档加载失败（' + s + '）'; },
       backMine: '← 我的实践'
     },
     en: {
-      settings: 'Settings', language: 'Language', done: 'Done',
+      settings: 'Settings', language: 'Language', done: 'Done', copied: 'Copied', back: 'Back', metaInfo: 'Document info',
       tabWizard: 'Todo', tabSv: 'StandardView', tabDoc: 'Document',
       labelDocJson: 'Document JSON', labelSvJson: 'StandardView JSON',
       pageTitle: 'My practices',
-      thDocument: 'Document', thSteps: 'Steps', thAdded: 'Added',
+      thDocument: 'Document', thNodes: 'Nodes', thAdded: 'Added',
       emptyLead: 'Nothing recorded yet. Write first-hand experience as a POP document — verifiable by hash, forever.',
       emptyHint: 'create one with <code>practi new</code>',
       countDocs: function (n) { return n + (n === 1 ? ' document' : ' documents'); },
       pageOf: function (a, b) { return 'page ' + a + ' of ' + b; },
       pagerPrev: 'Previous', pagerNext: 'Next',
       loadFail: 'failed to load /api/directs',
-      stepCount: function (n) { return n + (n === 1 ? ' step' : ' steps'); },
+      nodeCount: function (n) { return n + (n === 1 ? ' node' : ' nodes'); },
       loading: 'loading…',
       opPar: 'the tasks below run in parallel — order does not matter',
       opChoice: 'pick one branch to continue',
@@ -74,6 +80,12 @@ var POP_I18N = (function () {
       endPractice: 'end of practice',
       revisions: function (n) { return 'revisions (' + n + ')'; },
       refines: function (n) { return 'refines (' + n + ')'; },
+      secNotes: function (n) { return 'notes (' + n + ')'; },
+      notePanel: 'Notes',
+      noteNew: 'New',
+      noteDelete: 'Delete',
+      noteEmpty: 'No notes on this node yet — click New above to write one.',
+      noteServerStale: 'the server looks like an older build — restart practi web and retry',
       docFail: function (s) { return 'failed to load document (' + s + ')'; },
       backMine: '← My practices'
     }

package/web-default/style.css

@@ -47,13 +47,13 @@ a:hover { text-decoration: underline; }
    fixed 布局是必须的：hash 是无空格长串，auto 布局下 max-width 失效会把表撑出横向滚动 */
 .doc-table { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: fixed; }
 .doc-table th { padding: 8px 16px; font-size: 12px; font-weight: 500; color: var(--brand-50); text-align: left; white-space: nowrap; border-bottom: 1px solid var(--border); }
-.doc-table th.col-steps { width: 8ch; }
+.doc-table th.col-nodes { width: 8ch; }
 .doc-table th.col-added { width: 22ch; }
 .doc-table td { padding: 12px 16px; vertical-align: middle; border-bottom: 1px solid var(--border-light); overflow: hidden; text-overflow: ellipsis; }
 .doc-table tr:last-child td { border-bottom: none; }
 .doc-name { font-weight: 500; color: var(--brand); }
 .doc-desc { font-size: 12px; color: var(--brand-40); margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.doc-steps { font-size: 12px; color: var(--brand-40); font-variant-numeric: tabular-nums; }
+.doc-nodes { font-size: 12px; color: var(--brand-40); font-variant-numeric: tabular-nums; }
 .doc-date { font-size: 12px; color: var(--brand-40); white-space: nowrap; font-variant-numeric: tabular-nums; }
 .doc-date.derived { opacity: .6; }
 .count-row { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; font-size: 14px; color: var(--brand-60); }
@@ -67,7 +67,11 @@ a:hover { text-decoration: underline; }
 .empty code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; }
 
 /* ── 详情页（向导模式）：一次一节点，op 决定呈现 ── */
-.detail { max-width: 48rem; padding-bottom: 110px; }
+/* 内容列=详情页唯一的滚动容器（应用壳布局）；gutter 常驻防长文档切换时内容左右微移 */
+/*.detail 是滚动容器且拉满全宽——滚动条在窗口最右而非内容列右缘；
+  内容限宽由子元素承担（.nav 是 fixed 定位，排除在限宽外）*/
+.detail { max-width: none; overflow-y: auto; scrollbar-gutter: stable; padding-bottom: 110px; }
+.detail > *:not(.nav) { max-width: 48rem; margin-inline: auto; }
 .node-title { font-size: 22px; font-weight: 700; color: var(--brand); margin: 8px 0 4px; }
 .node-desc { color: var(--brand-60); margin: 0 0 12px; }
 .op-note { font-size: 13px; color: var(--brand-40); font-style: italic; margin: 0 0 8px; }
@@ -76,6 +80,30 @@ a:hover { text-decoration: underline; }
 .section-sm .prose p:first-child { margin-top: 0; }
 .section-sm .prose p:last-child { margin-bottom: 0; }
 .prose pre { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; overflow-x: auto; font-size: 13px; margin: 12px 0; }
+/* 围栏代码块深色卡（detail.js enhanceCodeBlocks 生成，与 hub PopCodeBlock 统一：
+   GitHub Dark 底 #0d1117 + 顶栏语言标签/复制按钮）；未增强的 pre 仍走上方白底规则 */
+.codeblock { margin: 12px 0; border-radius: 12px; overflow: hidden; background: #0d1117; }
+.codeblock-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: #161b22; border-bottom: 1px solid #262c36; padding: 4px 12px; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 10px; color: #94a3b8; user-select: none; }
+.codeblock-copy { display: flex; align-items: center; gap: 4px; border: none; background: none; color: #94a3b8; cursor: pointer; padding: 2px 6px; border-radius: 6px; font-size: 10px; font-family: inherit; }
+.codeblock-copy:hover { color: #f1f5f9; background: rgba(255, 255, 255, .1); }
+.codeblock pre { margin: 0; border: none; border-radius: 0; background: #0d1117; color: #c9d1d9; padding: 14px 16px; font-size: 13px; }
+.codeblock pre code { background: transparent; border: none; padding: 0; font-size: inherit; color: inherit; }
+/* hljs token 色板：与 hub globals.css 同源（github-dark），两处同步改 */
+.codeblock .hljs { color: #c9d1d9; }
+.codeblock .hljs-doctag, .codeblock .hljs-keyword, .codeblock .hljs-meta .hljs-keyword, .codeblock .hljs-template-tag, .codeblock .hljs-template-variable, .codeblock .hljs-type, .codeblock .hljs-variable.language_ { color: #ff7b72; }
+.codeblock .hljs-title, .codeblock .hljs-title.class_, .codeblock .hljs-title.class_.inherited__, .codeblock .hljs-title.function_ { color: #d2a8ff; }
+.codeblock .hljs-attr, .codeblock .hljs-attribute, .codeblock .hljs-literal, .codeblock .hljs-meta, .codeblock .hljs-number, .codeblock .hljs-operator, .codeblock .hljs-variable, .codeblock .hljs-selector-attr, .codeblock .hljs-selector-class, .codeblock .hljs-selector-id { color: #79c0ff; }
+.codeblock .hljs-regexp, .codeblock .hljs-string, .codeblock .hljs-meta .hljs-string { color: #a5d6ff; }
+.codeblock .hljs-built_in, .codeblock .hljs-symbol { color: #ffa657; }
+.codeblock .hljs-comment, .codeblock .hljs-code, .codeblock .hljs-formula { color: #8b949e; }
+.codeblock .hljs-name, .codeblock .hljs-quote, .codeblock .hljs-selector-tag, .codeblock .hljs-selector-pseudo { color: #7ee787; }
+.codeblock .hljs-subst { color: #c9d1d9; }
+.codeblock .hljs-section { color: #1f6feb; font-weight: bold; }
+.codeblock .hljs-bullet { color: #f2cc60; }
+.codeblock .hljs-emphasis { color: #c9d1d9; font-style: italic; }
+.codeblock .hljs-strong { color: #c9d1d9; font-weight: bold; }
+.codeblock .hljs-addition { color: #aff5b4; background-color: #033a16; }
+.codeblock .hljs-deletion { color: #ffdcd7; background-color: #67060c; }
 .prose figure { margin: 14px 0; }
 .prose img { max-width: 100%; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
 .prose figcaption { font-size: 12px; color: var(--brand-40); text-align: center; margin-top: 4px; }
@@ -120,8 +148,13 @@ ol.io-list li { padding: 2px 0; }
 .io-ref:hover { color: var(--brand); text-decoration: none; }
 .section-sm { margin-top: 18px; }
 .section-sm .label { font-size: 12px; font-weight: 600; color: var(--brand-50); margin-bottom: 6px; }
+/* JSON 视图 label 行：label 居左 + 复制按钮居右（按钮复用 .codeblock-copy 深色样式，在浅底上取中性色） */
+.label-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
+.label-row .label { margin-bottom: 0; }
+.label-row .json-copy { color: var(--brand-40); }
+.label-row .json-copy:hover { color: var(--brand); background: rgba(0, 51, 102, .06); }
 .att-list li { padding: 4px 0; }
-.child-card { border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; font-size: 14px; color: var(--brand-60); background: #fff; }
+.child-card { display: block; border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; font-size: 14px; color: var(--brand-60); background: #fff; }
 button.child-card { width: 100%; text-align: left; cursor: pointer; font: inherit; }
 button.child-card:hover { border-color: var(--brand); color: var(--brand); }
 .child-desc { font-size: 12px; color: var(--brand-40); margin-top: 2px; display: block; }
@@ -130,7 +163,9 @@ button.child-card:hover { border-color: var(--brand); color: var(--brand); }
 .choice-card:hover { border-color: var(--brand); background: rgba(0, 51, 102, .04); }
 /* 底部导航固定在视口底部：位置恒定，不随内容高度漂移；内行与正文列同宽对齐 */
 /* 底部操作区：固定视口底悬浮于内容列上方，无分界线（仅极轻投影托起），行与正文列同宽 */
-.nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: #fff; padding: 10px 24px; box-shadow: 0 -1px 8px rgba(0, 51, 102, .03); }
+.nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: #fff; padding: 10px 24px; box-shadow: 0 -1px 8px rgba(0, 51, 102, .03); transition: right .25s ease; }
+/* 笔记栏展开时操作区同步让位（与内容列居中一起平滑重排） */
+body.note-open .nav { right: 18rem; }
 .nav-row { max-width: 48rem; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
 .btn { padding: 8px 16px; border: 1px solid #d1d5db; border-radius: 8px; background: #fff; color: var(--brand-60); font-size: 14px; cursor: pointer; text-decoration: none; display: inline-block; }
 .btn:hover { background: var(--hover-bg); text-decoration: none; }
@@ -138,9 +173,13 @@ button.child-card:hover { border-color: var(--brand); color: var(--brand); }
 .btn-primary:hover { background: #1f2937; }
 .nav-hint { font-size: 13px; color: var(--brand-40); }
 .finish { font-size: 13px; color: var(--brand-40); }
-/* ── 详情页外壳：左侧大纲栏（sticky 侧栏）+ 内容列；窄屏侧栏隐藏回单列 ── */
-.shell { display: flex; align-items: flex-start; }
-.shell main { flex: 1; min-width: 0; }
+/* ── 详情页外壳：应用壳布局——整页不滚（滚动只属于中间内容列），header 常驻、左右栏满高 ── */
+body.detail-page { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
+body.detail-page > header { flex: none; }
+.shell { display: flex; align-items: stretch; flex: 1; min-height: 0; position: relative; }
+/* main 右缘留 26px 舌片竖轨：#note-toggle 固定钉右缘，不留轨会盖住 main 自己的滚动条
+   （面板展开时同理——轨在 main 与面板之间） */
+.shell main { flex: 1; min-width: 0; margin-right: 26px; }
 .side { display: none; }
 .side-count { font-size: 12px; font-weight: 500; color: var(--brand-40); margin: 0 0 8px; }
 .side-item { display: block; border-radius: 6px; padding: 6px 10px; font-size: 13px; line-height: 1.45; color: var(--brand-60); }
@@ -159,7 +198,7 @@ a.side-note:hover { color: var(--brand); text-decoration: none; background: rgba
 /* 档案底仓：钉在侧栏最底（flex 末位），大纲长过侧栏时随滚动自然跟在内容后 */
 .side-foot { margin-top: auto; padding-top: 4px; }
 @media (min-width: 1024px) {
-  .side { display: flex; flex-direction: column; position: sticky; top: 49px; height: calc(100dvh - 49px); overflow-y: auto; width: 16rem; flex: none; border-right: 1px solid var(--border); background: #f8fafc; padding: 12px 14px 24px; }
+  .side { display: flex; flex-direction: column; overflow-y: auto; width: 16rem; flex: none; border-right: 1px solid var(--border); background: #f8fafc; padding: 12px 14px 24px; }
   /* 操作区只覆盖内容列：left 让出侧栏，侧栏档案区完整可见 */
   .nav { left: 16rem; }
 }
@@ -171,7 +210,7 @@ a.side-note:hover { color: var(--brand); text-decoration: none; background: rgba
 .side-tab:hover { color: var(--brand); }
 .side-tab.on { background: rgba(0, 51, 102, .1); color: var(--brand); font-weight: 500; }
 /* JSON 视图：pretty 渲染，当前节点/其子树 steps 命中行整行铺浅蓝底（编辑器选中行形态） */
-.json-pre { margin: 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: #fff; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 13px; line-height: 1.6; color: var(--brand); overflow-x: auto; white-space: pre; }
+.json-pre { margin: 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: #fff; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 13px; line-height: 1.6; color: var(--brand); overflow: auto; white-space: pre; max-height: calc(100dvh - 260px); }
 .json-pre .jk { color: var(--brand-60); }
 /* 行级块：短行铺满可视宽、长行铺到内容末尾，高亮行首尾与缩进、逗号全部入色带 */
 .json-pre .ln { display: block; width: max-content; min-width: 100%; }
@@ -179,4 +218,76 @@ a.side-note:hover { color: var(--brand); text-decoration: none; background: rgba
 /* revisions 折叠：节点自己的变更史，默认收起，好奇点开 */
 /* revisions 折叠已删：revisions/refines 汇总挪到左侧大纲底部（.side-sec） */
 
+/* 学习笔记：只住右侧笔记栏（内容区不出现）；note-time 由右栏条目复用 */
+.note-time { display: block; font-size: 12px; color: var(--brand-40); font-variant-numeric: tabular-nums; margin-bottom: 2px; }
+/* 侧栏大纲的笔记数徽标：实心、可点（跳到该节点并展开笔记栏），
+   边框/文字继承所在条目的颜色（currentColor）——普通态/选中态/根标题自动同色 */
+.note-badge { display: inline-block; min-width: 14px; height: 13px; line-height: 13px; padding: 0 4px; border-radius: 999px; background: var(--primary); color: #f8fafc; font-size: 9px; font-weight: 600; text-align: center; margin-left: 5px; vertical-align: middle; cursor: pointer; }
+.note-badge:hover { background: #374151; }
+
+/* ── 右侧笔记栏：布局列（非悬浮）——宽度 0↔18rem 平滑过渡，内容列随之在两栏之间保持居中 ── */
+#note-side { flex: none; width: 0; overflow: hidden; align-self: stretch; transition: width .25s ease; }
+#note-side.open { width: 18rem; }
+/* 内层定宽：动画期间内容不被挤压，从右缘逐步露出（抽屉观感）；边框/投影挂内层，
+   收起宽度 0 时被 overflow 裁掉，不留残线 */
+#note-list { width: 18rem; height: 100%; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; background: #f8fafc; border-left: 1px solid var(--border); box-shadow: 0 0 24px rgba(0, 51, 102, .08); padding: 14px 14px 16px; }
+/* 展开收起舌片：钉在面板左缘垂直居中（面板的相邻兄弟，right 与面板宽度同参数过渡即贴合）；
+   收起后停在屏幕右缘仍可点 */
+#note-toggle { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 26px; height: 56px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-right: none; border-radius: 8px 0 0 8px; background: #f8fafc; color: var(--brand-40); cursor: pointer; z-index: 5; transition: right .25s ease; }
+#note-side.open + #note-toggle { right: 18rem; }
+#note-toggle:hover { color: var(--brand); }
+/* 箭头语义=面板去向：收起态朝左（展开=面板从右缘向左滑出），展开态朝右（收起=向右滑走） */
+#note-toggle svg { width: 14px; height: 14px; transition: transform .25s ease; transform: rotate(180deg); }
+#note-side.open + #note-toggle svg { transform: rotate(0deg); }
+.nside-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
+.nside-title { margin: 0; font-size: 12px; font-weight: 600; color: var(--brand-50); }
+/* 新建按钮：面板头部的小胶囊 */
+.nside-new { flex: none; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--brand-40); cursor: pointer; padding: 2px; }
+.nside-new svg { width: 12px; height: 12px; }
+.nside-new:hover { color: var(--brand); }
+/* 头部贴面板顶+右缘：气泡朝下开、右缘对齐，避免被 #note-list 的 overflow 裁掉 */
+.nside-new[data-tip]::after { left: auto; right: 0; bottom: auto; top: calc(100% + 6px); transform: none; }
+.nside-empty { font-size: 12px; line-height: 1.6; color: var(--brand-40); margin: 0 0 10px; }
+.nside-err { font-size: 12px; line-height: 1.5; color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; padding: 6px 10px; margin: 0 0 10px; overflow-wrap: break-word; }
+.nside-item { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; }
+.nside-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 3px; }
+.nside-acts { display: inline-flex; gap: 2px; }
+.nside-act { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: none; border-radius: 6px; background: transparent; color: var(--brand-30); cursor: pointer; }
+.nside-act svg { width: 13px; height: 13px; }
+.nside-act:hover { background: var(--hover-bg); color: var(--brand); }
+.nside-item .note-time { font-size: 11px; }
+/* 行内编辑态与底部新增框共用输入框形态 */
+.nside-input { display: block; width: 100%; border: none; background: transparent; resize: none; overflow: hidden; padding: 0; margin: 0; color: var(--brand-60); font-family: inherit; font-size: 13px; line-height: 1.6; cursor: default; caret-color: transparent; transition: color .15s ease; }
+/* 支持 field-sizing 的浏览器：输入框只占文字本身宽度——点卡片空白处不会出现光标，
+   点文字才进编辑且光标落在点击处；autoGrow 在 JS 侧对支持的浏览器跳过 */
+@supports (field-sizing: content) {
+  .nside-input { field-sizing: content; width: auto; min-width: 24px; max-width: 100%; min-height: 0; }
+}
+.nside-input:focus { outline: none; cursor: text; caret-color: auto; color: var(--primary); }
+
 /* LR kick */
+
+/* 复制 toast：对齐 hub sonner（richColors, position=top-center）——白底细边浅投影、
+   绿色对勾圆标居左，顶部居中下滑淡入 */
+.web-toast { position: fixed; top: 16px; left: 50%; transform: translateX(-50%) translateY(-8px); background: #fff; color: #1f2937; font-size: 13px; padding: 10px 14px; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, .08); display: flex; align-items: center; gap: 8px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 60; }
+.web-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
+
+/* ── 内容列顶栏（hub 同款）：返回居左、Info 居右；.detail > * 规则天然把它限宽居中 ── */
+.detail-topbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 18px; }
+.topbar-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #e5e7eb; background: #fff; color: rgba(0, 51, 102, .6); border-radius: 8px; height: 32px; padding: 0 12px; font-size: 12px; font-weight: 500; font-family: inherit; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
+.topbar-btn:hover { color: var(--brand); border-color: #d1d5db; background: #f9fafb; }
+.topbar-icon { width: 32px; padding: 0; justify-content: center; }
+/* 文档信息弹窗（hub InfoDialog 同构：白卡、居中、遮罩） */
+#info-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .4); z-index: 50; display: flex; align-items: center; justify-content: center; }
+.info-card { width: 320px; max-width: calc(100vw - 32px); background: #fff; border-radius: 8px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1); padding: 24px; }
+.info-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
+.info-title { font-size: 17px; font-weight: 700; color: var(--brand); }
+.info-close { border: none; background: none; color: var(--brand-40); cursor: pointer; padding: 2px; display: flex; }
+.info-close:hover { color: var(--brand); }
+.info-row { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 13px; color: var(--brand); }
+.info-row .info-key { color: var(--brand-60); }
+/* 哈希整行按钮（hub InfoDialog 同款）：指纹图标+等宽哈希+复制图标，hover 沉到全色 */
+.info-hash-btn { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; border: 1px solid #e5e7eb; background: #fff; border-radius: 8px; padding: 8px 10px; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 12px; color: rgba(0, 51, 102, .6); cursor: pointer; transition: color .15s, border-color .15s; }
+.info-hash-btn:hover { color: var(--brand); border-color: #d1d5db; }
+.info-hash-btn .info-hash { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
+.info-hash-btn svg:last-child { opacity: .4; flex-shrink: 0; }