/* miniKB 前端样式：三栏布局、简约、深浅色主题、移动端响应式 */
:root {
  --bg: #f5f5f5;
  --bg-soft: #ffffff;
  --panel: #ffffff;
  --border: #ddd;
  --text: #222;
  --muted: #888;
  --accent: #4a6cf7;
  --accent-soft: #eef1fe;
  --danger: #d9534f;
  --code-bg: #f1f1f1;
  --editor-bg: #fcfcfc;
  --hl-bg: #ffe28a;
  --hl-text: inherit;
  --shadow: rgba(0, 0, 0, .12);
  --node-fill: #4a6cf7;
  --node-text: #fff;
  --node-muted: #b9c4e8;
}

/* 深色主题：在 <html data-theme="dark"> 下覆盖 CSS 变量 */
html[data-theme="dark"] {
  --bg: #1e1f24;
  --bg-soft: #26272e;
  --panel: #26272e;
  --border: #3a3b44;
  --text: #e6e6eb;
  --muted: #9aa0ab;
  --accent: #6c8cff;
  --accent-soft: #30324a;
  --danger: #f2746f;
  --code-bg: #2f3038;
  --editor-bg: #202128;
  --hl-bg: #5a4a1a;
  --hl-text: #ffe9a8;
  --shadow: rgba(0, 0, 0, .5);
  --node-fill: #6c8cff;
  --node-text: #10131a;
  --node-muted: #3d4670;
}

html, body { height: 100%; margin: 0; background: var(--bg); color: var(--text); font: 14px/1.6 system-ui, "Segoe UI", "Microsoft YaHei", sans-serif; }
* { box-sizing: border-box; }
#app { display: flex; flex-direction: column; height: 100vh; }
#app.hidden { display: none; }

/* 工具栏 */
#toolbar { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--panel); border-bottom: 1px solid var(--border); flex: 0 0 auto; }
.tool { background: none; border: 1px solid transparent; border-radius: 6px; padding: 5px 9px; font-size: 15px; cursor: pointer; color: var(--text); }
.tool:hover { background: var(--accent-soft); }
.tool.active { background: var(--accent); color: #fff; }
.sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }
#title { font-weight: 700; letter-spacing: .5px; padding-right: 8px; }
#search-box { flex: 1; display: flex; gap: 6px; max-width: 460px; margin-left: auto; }
#search-input { flex: 1; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); }
#search-filter { border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); padding: 6px; }

/* 三栏布局 */
#layout { flex: 1 1 auto; display: flex; min-height: 0; }
.panel { background: var(--panel); border-right: 1px solid var(--border); display: flex; flex-direction: column; }
#filetree { width: 235px; flex: 0 0 235px; }
#editor-area { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#sidebar { width: 245px; flex: 0 0 245px; border-right: none; border-left: 1px solid var(--border); }

.panel-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--border); font-weight: 600; }
.ft-actions button { background: none; border: 1px solid var(--border); border-radius: 5px; padding: 2px 7px; margin-left: 5px; cursor: pointer; font-size: 12px; color: var(--accent); }
.ft-actions button:hover { background: var(--accent-soft); }
#tpl-row { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--border); font-size: 12px; color: var(--muted); }
#tpl-row select { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 5px; background: var(--bg); color: var(--text); padding: 3px 5px; font-size: 12px; }
.tree { overflow: auto; flex: 1; padding: 6px; }
.tree ul { list-style: none; padding: 0 0 0 14px; margin: 0; }
.tree li { margin: 1px 0; white-space: nowrap; }
.tree .row { display: flex; align-items: center; padding: 3px 5px; border-radius: 5px; cursor: pointer; gap: 5px; }
.tree .row:hover { background: var(--accent-soft); }
.tree .row.active { background: var(--accent); color: #fff; }
.tree .row.dir { font-weight: 600; }
.tree .caret { width: 14px; text-align: center; color: var(--muted); }
.tree .nm { overflow: hidden; text-overflow: ellipsis; }
.tree .ic { color: var(--muted); }

/* 编辑区 */
#current-note-bar { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--border); background: var(--panel); font-size: 12px; }
#note-path { font-weight: 600; }
#note-tags { color: var(--accent); }

/* ===== 笔记导出（按钮 + 下拉菜单）===== */
#note-export-bar { margin-left: auto; position: relative; display: flex; align-items: center; flex: 0 0 auto; }
.tool.small { font-size: 12px; padding: 3px 8px; border: 1px solid var(--border); border-radius: 6px; background: none; color: var(--text); cursor: pointer; }
.tool.small:hover { background: var(--accent-soft); color: var(--accent); }
#export-menu { position: absolute; top: calc(100% + 4px); right: 0; min-width: 150px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px var(--shadow); z-index: 60; padding: 4px; }
#export-menu.hidden { display: none; }
#export-menu .exp-item { display: block; width: 100%; text-align: left; padding: 7px 12px; background: none; border: none; border-radius: 5px; cursor: pointer; font-size: 13px; color: var(--text); white-space: nowrap; }
#export-menu .exp-item:hover { background: var(--accent-soft); }
@media (max-width: 768px) { #export-menu { right: -4px; } }
#editor-wrap { flex: 1; display: flex; min-height: 0; }
#editor { flex: 1; border: none; padding: 16px; resize: none; outline: none; font-family: "Consolas","Courier New",monospace; font-size: 14px; line-height: 1.7; background: var(--editor-bg); color: var(--text); }
#preview { flex: 1; padding: 16px 22px; overflow: auto; border-left: 1px solid var(--border); background: var(--panel); }
#preview.hidden, #editor.hidden, #graph-view.hidden { display: none; }

/* ===== Markdown 格式工具条 ===== */
#md-toolbar { display: flex; align-items: center; gap: 2px; padding: 5px 8px; background: var(--panel); border-bottom: 1px solid var(--border); overflow-x: auto; flex: 0 0 auto; flex-wrap: nowrap; }
#md-toolbar.hidden { display: none; }
/* 编辑器被隐藏（预览模式或图谱/画布/属性/附件覆盖视图）时，一并隐藏格式工具条 */
#editor-area:has(#editor.hidden) #md-toolbar { display: none; }
.md-btn { flex: 0 0 auto; min-width: 28px; height: 26px; padding: 0 7px; background: none; border: 1px solid transparent; border-radius: 5px; cursor: pointer; color: var(--text); font-size: 13px; line-height: 1; }
.md-btn:hover { background: var(--accent-soft); color: var(--accent); }
.md-btn b { font-size: 14px; }
.md-btn i { font-size: 14px; }
.md-sep { flex: 0 0 auto; width: 1px; height: 18px; background: var(--border); margin: 0 5px; }

/* 知识图谱 */
#graph-view { flex: 1; display: flex; flex-direction: column; border-left: 1px solid var(--border); background: var(--bg-soft); min-width: 0; }
#graph-view.hidden { display: none; }
.graph-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px; border-bottom: 1px solid var(--border); font-weight: 600; background: var(--panel); }
.graph-actions { display: flex; gap: 6px; }
#graph-wrap { flex: 1; position: relative; overflow: hidden; }
#graph-canvas { position: absolute; inset: 0; cursor: grab; }
#graph-canvas:active { cursor: grabbing; }
#graph-canvas svg { width: 100%; height: 100%; display: block; }
.graph-tip { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); font-size: 11px; color: var(--muted); background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 2px 12px; white-space: nowrap; pointer-events: none; }
.graph-node circle { fill: var(--node-fill); stroke: #fff; stroke-width: 1.5; cursor: pointer; transition: r .1s; }
.graph-node:hover circle { filter: brightness(1.15); }
.graph-node text { fill: var(--node-text); font-size: 11px; text-anchor: middle; pointer-events: none; user-select: none; }
.graph-link line { stroke: var(--border); stroke-width: 1.5; }
.graph-node.muted circle { fill: var(--node-muted); }
.graph-node.muted text { fill: var(--muted); }

/* 登录界面 */
#login-screen { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: var(--bg); }
#login-screen.hidden { display: none; }
.login-card { display: flex; flex-direction: column; gap: 12px; width: 300px; padding: 32px 28px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 40px var(--shadow); }
.login-logo { font-size: 22px; font-weight: 700; text-align: center; letter-spacing: 1px; }
.login-title { text-align: center; color: var(--muted); margin-bottom: 8px; font-size: 13px; }
.login-card input { padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font-size: 14px; }
.login-card button { padding: 10px; border: none; border-radius: 6px; background: var(--accent); color: #fff; font-size: 15px; cursor: pointer; }
.login-card button:hover { filter: brightness(1.08); }
.login-error { color: var(--danger); font-size: 12px; min-height: 16px; text-align: center; }

/* Markdown 预览样式 */
.md-preview h1, .md-preview h2, .md-preview h3 { margin: .8em 0 .4em; }
.md-preview h1 { border-bottom: 2px solid var(--border); padding-bottom: .2em; }
.md-preview h2 { border-bottom: 1px solid var(--border); padding-bottom: .2em; }
.md-preview table { border-collapse: collapse; margin: .6em 0; }
.md-preview th, .md-preview td { border: 1px solid var(--border); padding: 5px 9px; }
.md-preview th { background: var(--bg); }
.md-preview code { background: var(--code-bg); padding: 1px 5px; border-radius: 4px; }
.md-preview pre { background: var(--code-bg); padding: 10px; border-radius: 6px; overflow: auto; }
.md-preview pre code { background: none; padding: 0; }
.md-preview blockquote { border-left: 3px solid var(--accent); margin: 0.5em 0; padding-left: 12px; color: var(--muted); }
.md-preview ul, .md-preview ol { padding-left: 22px; }
.md-preview input[type=checkbox] { margin-right: 6px; }
.md-preview a { color: var(--accent); }
.md-preview img { max-width: 100%; }
.wlink { color: var(--accent); cursor: pointer; text-decoration: none; border-bottom: 1px dashed var(--accent); }
.wlink.missing { color: var(--danger); }
mark.hl { background: var(--hl-bg); color: var(--hl-text); border-radius: 2px; padding: 0 1px; }

#statusbar { display: flex; justify-content: space-between; padding: 4px 12px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); background: var(--panel); }

/* 侧栏 tabs */
.tab-head { display: flex; border-bottom: 1px solid var(--border); }
.tab { flex: 1; background: none; border: none; padding: 8px; cursor: pointer; font-size: 13px; color: var(--muted); border-bottom: 2px solid transparent; }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.tab-body { flex: 1; overflow: auto; padding: 8px; }
.tab-body.hidden { display: none; }
.backlink-item, .tag-item { padding: 6px 8px; border-radius: 5px; cursor: pointer; margin: 2px 0; font-size: 13px; }
.backlink-item:hover, .tag-item:hover { background: var(--accent-soft); }
.tag-item .cnt { color: var(--muted); font-size: 12px; margin-left: 6px; }
.empty-tip { color: var(--muted); font-size: 12px; padding: 10px; }

/* 搜索浮层 */
#search-results { position: fixed; top: 46px; right: 16px; width: 420px; max-height: 60vh; overflow: auto; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px var(--shadow); z-index: 50; }
.sr-head { padding: 8px 12px; font-weight: 600; border-bottom: 1px solid var(--border); }
.sr-item { padding: 8px 12px; border-bottom: 1px solid var(--border); cursor: pointer; }
.sr-item:hover { background: var(--accent-soft); }
.sr-item .nm { font-weight: 600; }
.sr-item .snip { font-size: 12px; color: var(--muted); white-space: pre-wrap; }
.sr-item .where { font-size: 11px; color: var(--accent); }

/* 通用 */
.hidden { display: none !important; }

/* ===== 移动端响应式 ===== */
@media (max-width: 768px) {
  #sidebar { position: fixed; right: 0; top: 0; bottom: 0; width: 78vw; max-width: 300px; z-index: 40; transform: translateX(100%); transition: transform .2s; box-shadow: -8px 0 24px var(--shadow); }
  #sidebar.open { transform: translateX(0); }
  #filetree { position: fixed; left: 0; top: 0; bottom: 0; width: 78vw; max-width: 260px; z-index: 40; transform: translateX(-100%); transition: transform .2s; box-shadow: 8px 0 24px var(--shadow); }
  #filetree.open { transform: translateX(0); }
  #layout { display: block; }
  #editor-area { width: 100%; height: 100%; }
  #preview { border-left: 1px solid var(--border); }
  #search-box { max-width: none; flex: 1; }
  #title { display: none; }
  #btn-theme, #btn-logout { font-size: 15px; padding: 5px 7px; }
  #tool-actions .sep { display: none; }
  #search-results { left: 8px; right: 8px; width: auto; top: 52px; }
  /* 分屏在手机上太窄，默认单一编辑区，预览盖在上层由按钮切换 */
  #editor-wrap { position: relative; }
  #preview { position: absolute; inset: 0; z-index: 5; background: var(--panel); }
  /* 窄屏下所有对话框/输入框放大、加宽，避免 iOS 聚焦缩放与点不到按钮 */
  .modal-card { width: 86vw !important; max-width: 360px; }
  .modal-card input, .modal-card select, .dialog-input, #dialog-msg { font-size: 16px; }
  .modal-actions button { min-height: 40px; padding: 8px 18px; font-size: 15px; flex: 1; }
}
/* 手机端遮罩，点击收起侧栏 */
#mobile-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.32); z-index: 39; display: none; }
#mobile-overlay.show { display: block; }

/* 非常窄时再压一压工具栏 */
@media (max-width: 480px) {
  #search-input { width: 100%; }
  .graph-tip { display: none; }
}

/* ===== 阶段3：附件 / 公式 / 画布 / 属性表 ===== */
/* 附件上传小按钮（状态栏） */
#attach-btn { margin-left: 8px; }

/* 属性表格视图 */
#props-view { flex: 1; display: flex; flex-direction: column; border-left: 1px solid var(--border); background: var(--bg-soft); min-width: 0; }
#props-view.hidden { display: none; }
#props-table-wrap { flex: 1; overflow: auto; padding: 12px; }
.props-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.props-table th, .props-table td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; }
.props-table th { background: var(--panel); position: sticky; top: 0; font-weight: 600; }
.props-table tr:hover td { background: var(--accent-soft); }
.prop-name { cursor: pointer; color: var(--accent); font-weight: 600; }
.tag-chip { display: inline-block; background: var(--accent-soft); color: var(--accent); border-radius: 10px; padding: 1px 8px; margin: 1px 3px; font-size: 11px; }

/* 画布视图 */
#canvas-view { flex: 1; display: flex; flex-direction: column; border-left: 1px solid var(--border); background: var(--bg-soft); min-width: 0; }
#canvas-view.hidden { display: none; }
#canvas-stage { flex: 1; position: relative; overflow: auto; background: var(--bg); }
.canvas-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.canvas-card { position: absolute; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 4px 16px var(--shadow); padding: 0; overflow: hidden; font-size: 13px; cursor: grab; }
.canvas-card:hover { box-shadow: 0 6px 20px var(--shadow); }
.canvas-card:active { cursor: grabbing; }
.canvas-card.note { background: var(--accent-soft); }
.canvas-card-h { padding: 5px 8px; font-weight: 600; font-size: 12px; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border-bottom: 1px solid var(--border); cursor: grab; user-select: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.canvas-card-h:active { cursor: grabbing; }
.canvas-card-b { flex: 1; padding: 6px 8px; overflow: auto; min-height: 0; }
.canvas-card-b.note-body { cursor: pointer; }
.canvas-card-b[contenteditable="true"] { outline: none; }
.canvas-card-b[contenteditable="true"]:focus { outline: 2px solid var(--accent); border-radius: 4px; }

/* 公式渲染（KaTeX） */
.md-preview .katex { font-size: 1.05em; }
code.math-err { background: var(--code-bg); color: var(--danger); padding: 2px 5px; border-radius: 4px; }

/* ===== 附件管理视图 ===== */
#attach-view { flex: 1; display: flex; flex-direction: column; border-left: 1px solid var(--border); background: var(--bg-soft); min-width: 0; }
#attach-view.hidden { display: none; }
.attach-tip { padding: 6px 14px; border-bottom: 1px solid var(--border); font-size: 12px; color: var(--muted); background: var(--panel); }
.attach-tip code { background: var(--code-bg); padding: 1px 5px; border-radius: 4px; }
/* 统计条：未引用高亮，一眼看出可清理量 */
.attach-stats { display: flex; align-items: center; gap: 16px; padding: 6px 14px; border-bottom: 1px solid var(--border); font-size: 12px; color: var(--muted); background: var(--panel); flex-wrap: wrap; }
.attach-stats b { color: var(--text); font-weight: 700; }
.attach-stats .stat-used b { color: var(--accent); }
.attach-stats .stat-unused { color: var(--danger); font-weight: 600; }
.attach-stats .stat-unused b { color: var(--danger); }
/* 管理工具条：搜索 + 排序 + 筛选 + 批量操作 */
.attach-toolbar { display: flex; align-items: center; gap: 6px; padding: 6px 14px; border-bottom: 1px solid var(--border); background: var(--panel); flex-wrap: wrap; }
.attach-toolbar input[type=text] { flex: 1 1 120px; min-width: 90px; padding: 5px 9px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font-size: 12px; }
.attach-toolbar select { border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); padding: 5px 6px; font-size: 12px; }
.attach-toolbar .tool { font-size: 12px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; background: none; color: var(--text); cursor: pointer; white-space: nowrap; }
.attach-toolbar .tool:hover { background: var(--accent-soft); color: var(--accent); }
.attach-toolbar .tool.danger { color: var(--danger); border-color: var(--danger); }
.attach-toolbar .tool.danger:hover { background: var(--danger); color: #fff; }
/* 选中信息条 */
.attach-selbar { padding: 5px 14px; border-bottom: 1px solid var(--border); font-size: 12px; color: var(--accent); background: var(--accent-soft); display: flex; align-items: center; gap: 8px; }
.attach-selbar.hidden { display: none; }
/* 附件网格列表 */
#attach-list { flex: 1; overflow: auto; padding: 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; align-content: start; }
.attach-item { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; position: relative; transition: box-shadow .15s, border-color .15s; }
.attach-item:hover { box-shadow: 0 4px 14px var(--shadow); }
.attach-item.checked { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.attach-item.unused { border-color: color-mix(in srgb, var(--danger) 55%, var(--border)); }
.attach-item.unused .attach-name { color: var(--danger); }
/* 复选框（悬浮于缩略图左上角）+ 未引用标识 */
.attach-check { position: absolute; top: 6px; left: 6px; z-index: 2; width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.attach-unused-tag { position: absolute; top: 6px; right: 6px; z-index: 2; background: var(--danger); color: #fff; font-size: 10px; padding: 1px 6px; border-radius: 9px; font-weight: 600; }
.attach-item .thumb { width: 100%; aspect-ratio: 16/10; object-fit: cover; background: var(--code-bg); cursor: pointer; display: block; }
.attach-item .thumb.placeholder { display: flex; align-items: center; justify-content: center; font-size: 30px; color: var(--muted); cursor: default; }
.attach-meta { padding: 6px 8px 2px; }
.attach-name { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.attach-size { font-size: 11px; color: var(--muted); }
.attach-mtime { font-size: 10px; color: var(--muted); }
/* 引用状态徽章 + 引用笔记 chips */
.attach-refbadge { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 11px; flex-wrap: wrap; }
.attach-refbadge .ref-used { color: var(--accent); font-weight: 600; }
.attach-refbadge .ref-none { color: var(--danger); font-weight: 600; }
.attach-refchips { padding: 2px 8px 6px; display: flex; flex-wrap: wrap; gap: 3px; }
.attach-refchips .refchip { font-size: 10px; color: var(--accent); background: var(--accent-soft); border-radius: 9px; padding: 0 7px; cursor: pointer; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attach-refchips .refchip:hover { filter: brightness(1.05); text-decoration: underline; }
.attach-actions { display: flex; gap: 4px; padding: 4px 8px 8px; }
.attach-actions button { flex: 1; background: none; border: 1px solid var(--border); border-radius: 5px; padding: 2px 4px; font-size: 11px; cursor: pointer; color: var(--text); }
.attach-actions button:hover { background: var(--accent-soft); }
.attach-actions button.danger:hover { background: var(--danger); color: #fff; }
.attach-empty { color: var(--muted); font-size: 13px; padding: 20px; grid-column: 1 / -1; text-align: center; }

/* ===== 改密码模态 ===== */
.modal { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; }
.modal.hidden { display: none; }
.modal-card { display: flex; flex-direction: column; gap: 12px; width: 320px; padding: 26px 24px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 40px var(--shadow); }
.modal-title { font-size: 16px; font-weight: 700; }
.modal-card input { padding: 9px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font-size: 14px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.btn-ghost { padding: 7px 14px; border: 1px solid var(--border); border-radius: 6px; background: none; color: var(--text); cursor: pointer; font-size: 13px; }
.btn-ghost:hover { background: var(--accent-soft); }
.btn-primary { padding: 7px 16px; border: none; border-radius: 6px; background: var(--accent); color: #fff; cursor: pointer; font-size: 13px; }
.btn-primary:hover { filter: brightness(1.08); }

/* ===== 通用对话框（替代 alert/confirm/prompt，移动端友好）===== */
#dialog-modal .modal-card { width: 340px; }
.dialog-msg { font-size: 14px; line-height: 1.6; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.dialog-input { padding: 9px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font-size: 15px; width: 100%; }
.dialog-input:focus { outline: none; border-color: var(--accent); }

/* ===== 右键菜单 ===== */
.ctx-menu { position: fixed; z-index: 120; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px var(--shadow); min-width: 150px; padding: 4px; }
.ctx-menu.hidden { display: none; }
.ctx-item { display: block; width: 100%; text-align: left; padding: 7px 12px; background: none; border: none; cursor: pointer; font-size: 13px; color: var(--text); border-radius: 5px; }
.ctx-item:hover { background: var(--accent-soft); }
.ctx-item.danger:hover { background: var(--danger); color: #fff; }
.ctx-sep { height: 1px; background: var(--border); margin: 4px 8px; }

/* 移动文件夹选择对话框（基于 modal） */
#move-modal .modal-card { width: 320px; }
#move-target { padding: 9px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font-size: 13px; }

/* ===== 标签增删（编辑区顶部） ===== */
.note-tag-chip { display: inline-flex; align-items: center; gap: 3px; background: var(--accent-soft); color: var(--accent); border-radius: 10px; padding: 1px 6px 1px 9px; margin: 1px 3px; font-size: 11px; }
.note-tag-chip .del { cursor: pointer; color: var(--muted); font-weight: 700; padding: 0 2px; }
.note-tag-chip .del:hover { color: var(--danger); }
#tag-add-input { width: 90px; border: 1px dashed var(--border); border-radius: 10px; background: none; color: var(--text); font-size: 11px; padding: 1px 8px; outline: none; }
#tag-add-input:focus { border-color: var(--accent); }

/* ===== 画布增强：删除按钮 / 连线把手 / 尺寸调整 / 连线删除 ===== */
.canvas-card { position: relative; }
.canvas-del { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; line-height: 16px; text-align: center; border-radius: 50%; border: none; background: rgba(0,0,0,.12); color: var(--text); font-size: 11px; cursor: pointer; z-index: 3; }
.canvas-del:hover { background: var(--danger); color: #fff; }
.canvas-link-knob { position: absolute; right: -7px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 2px solid var(--panel); cursor: crosshair; z-index: 4; }
.canvas-link-knob:hover { transform: translateY(-50%) scale(1.2); }
.canvas-resize { position: absolute; right: 0; bottom: 0; width: 14px; height: 14px; cursor: nwse-resize; z-index: 4; background: radial-gradient(circle, var(--muted) 1.5px, transparent 2px) no-repeat 3px 3px; }
.canvas-edge { pointer-events: stroke; cursor: pointer; }
.canvas-edge-g:hover .canvas-edge { stroke: var(--danger) !important; stroke-width: 3 !important; }
.canvas-edge-g:hover .canvas-edge-dot { fill: var(--danger) !important; }
.canvas-edge-dot { fill: #3b82f6; stroke: #fff; stroke-width: 1; pointer-events: visiblePainted; cursor: pointer; }
.canvas-edge.del-hint { stroke: var(--danger); stroke-width: 3; }

/* ===== 画布增强：视口/缩放/框选/网格/选中/颜色 ===== */
#canvas-stage { overflow: hidden; position: relative; cursor: default; }
.canvas-viewport { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; }
/* 网格背景：随视口平移缩放（由 JS 设 background-size/position） */
#canvas-stage.grid { background-image: radial-gradient(circle, var(--border) 1px, transparent 1px); background-repeat: repeat; }
/* 选框 */
.canvas-marquee { position: absolute; border: 1px dashed var(--accent); background: var(--accent-soft); opacity: .5; z-index: 9; pointer-events: none; }
/* 卡片选中态 */
.canvas-card.selected { box-shadow: 0 0 0 2px var(--accent), 0 6px 20px var(--shadow); }
/* 卡片颜色（默认区分文本/笔记） */
.canvas-card.c-text { background: var(--panel); }
.canvas-card.c-note { background: var(--accent-soft); }
.canvas-card.c-blue { border-top: 3px solid #3b82f6; }
.canvas-card.c-green { border-top: 3px solid #22c55e; }
.canvas-card.c-orange { border-top: 3px solid #f97316; }
.canvas-card.c-purple { border-top: 3px solid #a855f7; }
/* 连线把手（端点小圆） */
.canvas-link-knob { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 2px solid var(--panel); cursor: crosshair; z-index: 5; }
.canvas-link-knob.s { left: -6px; top: 50%; transform: translateY(-50%); }
.canvas-link-knob.e { right: -6px; top: 50%; transform: translateY(-50%); }
.canvas-link-knob:hover { transform: translateY(-50%) scale(1.25); }