:root{
  --primary-color:#6366F1;--primary-light:rgba(99,102,241,.1);
  --secondary-color:#8B5CF6;--accent-color:#EC4899;
  --success-color:#10B981;--warning-color:#F59E0B;--error-color:#EF4444;
  --dark-color:#1E293B;--light-color:#F8FAFC;
  --text-primary:#334155;--text-secondary:#64748B;--border-color:#E2E8F0;
  --shadow-sm:0 1px 3px rgba(0,0,0,.05),0 1px 2px rgba(0,0,0,.1);
  --shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);
  --shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);
  --transition:all .25s ease-in-out;--radius:6px
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Inter,'PingFang SC','Helvetica Neue',Arial,sans-serif;background:#FAFAFA;color:var(--text-primary);overflow:hidden;height:100vh;line-height:1.5}

/* 布局 */
#app{display:flex;flex-direction:column;height:100vh}
#toolbar{display:flex;align-items:center;padding:.75rem 1.25rem;background:#fff;border-bottom:1px solid var(--border-color);box-shadow:var(--shadow-sm);z-index:10;gap:.5rem;flex-wrap:wrap}
#canvas-container{flex:1;position:relative;overflow:hidden}
#canvas{width:100%;height:100%;cursor:grab} #canvas:active{cursor:grabbing}

/* 按钮 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:.45rem .9rem;background:#fff;color:var(--text-primary);border:1px solid var(--border-color);border-radius:var(--radius);cursor:pointer;font-size:.875rem;font-weight:500;transition:var(--transition);white-space:nowrap}
.btn:hover{background:#F1F5F9;border-color:#CBD5E1;transform:translateY(-.5px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}
.btn-primary:hover{background:#5254F9;border-color:#5254F9}
.btn-danger{background:var(--error-color);color:#fff;border-color:var(--error-color)}
.btn-danger:hover{background:#DC2626;border-color:#DC2626}
.btn-icon{padding:.45rem;border-radius:var(--radius)}

/* 节点/连线 */
.node{cursor:pointer;transition:var(--transition)}
.node .pill{rx:12px;ry:12px;transition:var(--transition);filter:drop-shadow(0 1px 2px rgba(0,0,0,.1))}
.node:hover .pill{filter:drop-shadow(0 3px 6px rgba(0,0,0,.15));transform:scale(1.03)}
.node.selected .pill{stroke-width:2.5px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.2));transform:scale(1.05)}
.node .text-container text{font-size:12px;transition:var(--transition)}
.node:hover .text-container text{font-weight:500}
.node.root .root-circle{filter:drop-shadow(0 4px 12px rgba(99,102,241,.3));transition:var(--transition)}
.node.root:hover .root-circle{transform:scale(1.03);filter:drop-shadow(0 6px 16px rgba(99,102,241,.35))}
.node.root.selected .root-circle{transform:scale(1.05);filter:drop-shadow(0 6px 16px rgba(217,119,6,.4))}
.link{fill:none;transition:var(--transition)}
.link.shadow{stroke:rgba(0,0,0,.1);stroke-width:6;stroke-opacity:.6;filter:blur(1px)}
.terminal{transition:var(--transition)}
/* 搜索命中集合（非当前激活） */
.node.highlighted .pill{stroke:var(--primary-color);stroke-width:2.5px}
/* 当前激活搜索项：更粗、更亮、发光 */
.node.active .pill{stroke:var(--accent-color)!important;stroke-width:5px!important;animation:glowPulse 1.2s ease-in-out infinite}
.node.active .root-circle{stroke:var(--accent-color)!important;stroke-width:5px!important;animation:glowPulse 1.2s ease-in-out infinite}
/* 连线跟随高亮/变暗 */
.link.active{stroke:var(--accent-color)!important;stroke-width:4.5px!important;opacity:1!important}
.link.dim{opacity:.25}
.search-match{fill:var(--accent-color);font-weight:600}

/* ★ 金属外圈（选中搜索项专用） */
.metal-ring,
.metal-ring-rect{
  fill:none;
  stroke:url(#metalGold);
  stroke-width:6px;
  filter:url(#metalShine);
  pointer-events:none;
}
@media (max-width:768px){
  .metal-ring,.metal-ring-rect{stroke-width:5px;}
}

/* 查找面板：左侧停靠 */
#searchContainer{
  position:absolute;top:60px;left:12px;width:320px;background:#fff;border-radius:var(--radius);
  box-shadow:var(--shadow-lg);z-index:40;overflow:hidden;transition:var(--transition);
  opacity:0;visibility:hidden;transform:translateY(-10px)
}
#searchContainer.visible{opacity:1;visibility:visible;transform:translateY(0)}
#searchInput{width:100%;padding:.85rem 1rem;border:none;font-size:1rem;outline:none;border-bottom:1px solid var(--border-color)}
#searchResultsList{max-height:350px;overflow-y:auto}
.search-result-item{padding:.85rem 1rem;border-bottom:1px solid var(--border-color);cursor:pointer;transition:var(--transition);display:flex;align-items:flex-start;gap:.75rem}
.search-result-item:hover{background:var(--primary-light);transform:translateX(2px)}
.search-result-item.active{background:var(--primary-light);border-left:3px solid var(--primary-color)}
.search-result-item .depth-indicator{min-width:6px;height:6px;border-radius:50%;margin-top:8px;flex-shrink:0;box-shadow:0 0 0 2px rgba(0,0,0,.04) inset}
.depth-0{background:var(--primary-color)} .depth-1{background:var(--secondary-color)} .depth-2{background:var(--accent-color)} .depth-3{background:var(--success-color)} .depth-4{background:var(--warning-color)}
.search-no-results{padding:1.5rem;text-align:center;color:var(--text-secondary);background:#F8FAFC}

/* 右键菜单（跟随鼠标） */
#contextMenu{position:absolute;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-lg);z-index:100;padding:.35rem 0;min-width:180px;opacity:0;transform:translateY(5px);pointer-events:none;transition:var(--transition)}
#contextMenu.visible{opacity:1;transform:translateY(0);pointer-events:all}
#contextMenu>div{padding:.55rem 1rem;cursor:pointer;transition:var(--transition);display:flex;align-items:center;gap:8px;font-size:.875rem}
#contextMenu>div:hover{background:var(--primary-light);color:var(--primary-color)}
#contextMenu>div:not(:last-child){border-bottom:1px solid rgba(0,0,0,.05)}

/* 编辑框 */
.node-edit-input{position:absolute;background:#fff;border:2px solid var(--primary-color);border-radius:6px;padding:6px 10px;font-family:inherit;font-size:12px;outline:none;resize:none;overflow:hidden;box-shadow:var(--shadow);z-index:50;transition:var(--transition)}
.node-edit-input:focus{border-color:var(--secondary-color);box-shadow:0 0 0 3px rgba(139,92,246,.2)}

/* 状态/连接 */
#statusBar{display:flex;align-items:center;gap:1rem;margin-left:auto;padding:0 .5rem;font-size:.8125rem;color:var(--text-secondary)}
.connection-status{display:inline-flex;align-items:center;gap:4px}
.connection-status::before{content:'';width:8px;height:8px;border-radius:50%;transition:var(--transition)}
.connection-status.connected::before{background:var(--success-color);box-shadow:0 0 0 3px rgba(16,185,129,.2)}
.connection-status.disconnected::before{background:var(--warning-color);box-shadow:0 0 0 3px rgba(245,158,11,.2);animation:pulse 2s infinite}
.auto-save-indicator{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px}
.auto-save-indicator.pending{background:var(--primary-color);animation:pulse 1.5s infinite}
.auto-save-indicator.saved{background:var(--success-color)}

/* 节点统计 */
#nodeStatistics{display:flex;align-items:center;gap:.75rem;padding:0 .5rem;font-size:.8125rem;color:var(--text-secondary);border-left:1px solid var(--border-color)}
#nodeStatistics .total{font-weight:600;color:var(--primary-color)}
#nodeStatistics .level-indicator{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:4px;font-size:.75rem;font-weight:500;background:var(--primary-light);color:var(--primary-color)}

/* 保存状态：居中弹窗 */
.save-status{position:fixed;left:50%;top:10%;transform:translate(-50%,-50%) scale(.98);padding:.6rem 1rem;border-radius:10px;font-size:.875rem;z-index:1000;pointer-events:none;opacity:0;transition:var(--transition);box-shadow:var(--shadow-lg);display:none}
.save-status.success{background:rgba(16,185,129,.12);color:var(--success-color);opacity:1;transform:translate(-50%,-50%) scale(1);display:block}
.save-status.error{background:rgba(239,68,68,.12);color:var(--error-color);opacity:1;transform:translate(-50%,-50%) scale(1);display:block}
.save-status.warning{background:
/*rgba(245,158,11,.12);*/
/*rgba(14, 165, 233, 1);*/
rgba(0, 0, 0, 0.12);
color:var(--warning-color);opacity:1;transform:translate(-50%,-50%) scale(1);display:block}
.save-status.pending{background:rgba(99,102,241,.12);color:var(--primary-color);opacity:1;transform:translate(-50%,-50%) scale(1);display:block}

/* 重复内容：居中弹窗 */
#duplicateDetails{position:fixed;left:50%;top:10%;transform:translate(-50%,-50%) scale(.98);background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-lg);z-index:1100;max-width:360px;width:90%;overflow:hidden;transition:var(--transition);opacity:0;pointer-events:none;display:none}
#duplicateDetails.visible{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:all;display:block}
#duplicateList{max-height:260px;overflow-y:auto}
#duplicateList div{padding:.75rem 1rem;border-bottom:1px solid var(--border-color);font-size:.875rem;cursor:pointer;transition:var(--transition)}
#duplicateList div:hover{background:var(--primary-light);color:var(--primary-color);padding-left:1.25rem}

/* 搜索计数 */
#searchCount{padding:.65rem 1rem;font-size:.8125rem;color:var(--text-secondary);background:#F8FAFC;border-top:1px solid var(--border-color)}

/* 登录模态（居中） */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;visibility:hidden;transition:var(--transition)}
.modal-backdrop.visible{opacity:1;visibility:visible}
.modal{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-lg);width:90%;max-width:400px;padding:1.5rem;transform:translateY(20px) scale(.98);transition:var(--transition)}
.modal-backdrop.visible .modal{transform:translateY(0) scale(1)}
.modal h3{margin-bottom:1.25rem;color:var(--dark-color);font-size:1.25rem;font-weight:600}
.modal input{width:100%;padding:.85rem;margin-bottom:1.25rem;border:1px solid var(--border-color);border-radius:var(--radius);font-size:1rem;transition:var(--transition)}
.modal input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(99,102,241,.2)}
.modal-actions{display:flex;justify-content:flex-end;gap:.75rem;margin-top:1.5rem}

/* 动画 */
@keyframes glowPulse{0%{filter:none}50%{filter:drop-shadow(0 0 6px rgba(236,72,153,.6))}100%{filter:none}}
@keyframes dash{to{stroke-dashoffset:-6}}
@keyframes pulse{0%{opacity:1}50%{opacity:.4}100%{opacity:1}}

/* 响应式 */
@media (max-width:768px){
  #toolbar{padding:.5rem;gap:.25rem}
  .btn span:not(.icon){display:none}
  .btn{padding:.45rem}
  #statusBar{font-size:.75rem;gap:.5rem}
  #nodeStatistics{display:none}
}

/* === 查找结果列表·紧凑版覆盖 === */
#searchResultsList {
  max-height: 300px;              /* 略减高度（原 350） */
}

.search-result-item {
  padding: 6px 10px;              /* 更小的内边距（原 ~14px） */
  gap: 8px;                       /* 行内间距更紧（原 12px） */
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.search-result-item:hover {
  transform: translateX(1px);     /* 缩小悬停位移（原 2px） */
}

.search-result-item .depth-indicator {
  min-width: 3px;                 /* 小一号点 */
  width: 3px;
  height: 3px;
  margin-top: 6px;
}

/* 文本更紧凑 */
.search-result-item > div {
  line-height: 1.3;
  font-size: 12px;                /* 主文本更小（原 ~14px） */
}

/* 路径说明更小更淡 */
.search-result-item > div > div {
  font-size: 11px;                /* 次文本更小（原 11px 保持/下调） */
  color: #9aa4b2;                 /* 再淡一点 */
  margin-top: 1px;                /* 减小顶边距 */
}

/* 顶部计数条也更紧凑 */
#searchCount {
  padding: 6px 10px;
  font-size: 12px;
}

/* 搜索提示行更紧凑（如果用到的话） */
.search-hint {
  padding: 6px 10px;
  font-size: 11px;
}


/*弹窗样式*/
/* === 公告弹窗（玻璃风、半透明黑） === */
.announce-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);        /* 半透明黑 */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
  opacity: 0;
  visibility: hidden;
  transition: all .25s ease;
}

.announce-backdrop.visible {
  opacity: 1;
  visibility: visible;
}

.announce-modal {
  width: min(92vw, 520px);
  border-radius: 14px;
  padding: 18px 18px 16px;
  background: rgba(17, 24, 39, 0.42);  /* 石板黑半透明 */
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  transform: translateY(10px) scale(.98);
  transition: all .25s ease;
  color: #E5E7EB;
}

.announce-backdrop.visible .announce-modal {
  transform: translateY(0) scale(1);
}

.announce-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.announce-title {
  font-size: 16px;
  font-weight: 700;
  color: #F3F4F6;
  display: flex;
  align-items: center;
  gap: 8px;
}

.announce-body {
  font-size: 13px;
  color: #CBD5E1;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

.announce-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

/* 复用按钮风格，并做暗色适配 */
.btn-ghost-dark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 13px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: #E5E7EB;
  cursor: pointer;
  transition: all .2s ease;
}
.btn-ghost-dark:hover { background: rgba(255,255,255,0.12); }

.btn-primary-dark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 13px;
  border-radius: 8px;
  border: 1px solid rgba(99,102,241,0.5);
  background: linear-gradient(135deg, rgba(99,102,241,0.95), rgba(139,92,246,0.95));
  color: #fff;
  cursor: pointer;
  transition: all .2s ease;
  box-shadow: 0 6px 16px rgba(99,102,241,0.35);
}
.btn-primary-dark:hover { filter: brightness(1.05); }