/* ============================================================
   世界观设定（world.html）
   在 graph.css 共享三栏骨架上追加本页专属样式：
   面包屑 · 分类树 · 层级图谱舞台 · 完整度刻度
   ============================================================ */

/* ---------- 面包屑 ---------- */
.wd-crumbbar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-shrink:0;
  height:42px;padding:0 22px;
  border-bottom:1px solid var(--border);background:var(--sidebar);
  font-size:12px;color:var(--text-mute);
  transition:background .25s var(--ease),border-color .25s var(--ease);
}
.wd-crumb{display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap}
.wd-crumb .sep{opacity:.45}
.wd-crumb .c-book{color:var(--text-dim)}
.wd-crumb .c-cat{color:var(--text-dim)}
.wd-crumb .c-cur{color:var(--accent2);font-weight:600}
.wd-crumb-meta{font-size:11px;color:var(--text-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- 左栏：搜索 ---------- */
.wd-searchbox{position:relative;padding:0 14px 12px}
.wd-searchbox .wd-s-ico{
  position:absolute;left:26px;top:50%;transform:translateY(-50%);
  font-size:12px;opacity:.65;pointer-events:none;
}
.wd-searchbox input{
  width:100%;height:36px;border-radius:10px;outline:none;
  border:1px solid var(--border);background:var(--card);color:var(--text);
  font-size:12px;font-family:inherit;padding:0 12px 0 32px;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.wd-searchbox input::placeholder{color:var(--text-mute)}
.wd-searchbox input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

/* ---------- 左栏：分类树 ---------- */
.wd-tree{padding:2px 12px 0}
.wd-group{
  margin:13px 4px 6px;font-size:10.5px;font-weight:700;
  letter-spacing:.08em;color:var(--text-mute);
}
.wd-item{
  display:flex;align-items:center;gap:9px;
  padding:8px 10px;border-radius:10px;cursor:pointer;
  font-size:12px;color:var(--text-dim);
  border:1px solid transparent;
  transition:all var(--dur) var(--ease);
}
.wd-item:hover{background:var(--card);border-color:var(--border);color:var(--text)}
.wd-item.on{
  background:var(--accent-soft);border-color:var(--accent);
  color:var(--accent2);font-weight:600;
}
.wd-item .wi{font-size:13px;flex-shrink:0;width:16px;text-align:center}
.wd-item .wn{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wd-item .wc{font-size:10px;color:var(--text-mute);flex-shrink:0}
.wd-item.on .wc{color:var(--accent2)}
.wd-item.dim{opacity:.4}
.wd-empty{padding:16px 6px;font-size:11px;color:var(--text-mute);text-align:center}

/* ---------- 中栏：图例条 + 舞台 ---------- */
.wd-canvas{display:flex;flex-direction:column;overflow:hidden}
/* 图例独立成条，既不遮节点也不随图谱滚动 */
.wd-legend{
  display:flex;flex-wrap:wrap;gap:7px 18px;flex-shrink:0;
  padding:9px 22px;font-size:10.5px;color:var(--text-dim);
  border-bottom:1px solid var(--border);background:var(--sidebar);
  transition:background .25s var(--ease),border-color .25s var(--ease);
}
.wd-legend .lg{display:flex;align-items:center;gap:8px;white-space:nowrap}
.wd-legend .lg i{width:18px;height:0;border-top:2px solid currentColor;border-radius:2px;flex-shrink:0}
.wd-legend .lg.dash i{border-top-style:dashed}

/* 画布不足以容纳图谱时整体滚动，避免节点互相挤压（最小尺寸由脚本按节点数计算） */
.wd-stagewrap{flex:1;min-height:0;overflow:auto}
.wd-stage{position:relative;width:100%;height:100%;min-width:520px;min-height:420px}

/* 未入图条目提示 */
.wd-more{
  position:absolute;left:16px;bottom:76px;z-index:6;
  padding:5px 12px;border-radius:999px;font-size:10.5px;color:var(--text-mute);
  background:var(--card);border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
}
.wd-more:empty{display:none}

/* ---------- 底部：世界观完整度刻度 ---------- */
.wd-scale{
  position:relative;flex-shrink:0;
  padding:15px 26px 12px;
  border-top:1px solid var(--border);background:var(--sidebar);
  transition:background .25s var(--ease),border-color .25s var(--ease);
}
.wd-scale-line{
  position:absolute;left:26px;right:26px;top:19px;height:3px;border-radius:2px;
  background:var(--border);
}
.wd-scale-fill{
  position:absolute;left:0;top:0;height:100%;border-radius:2px;
  background:linear-gradient(90deg,var(--accent-deep),var(--accent));
  box-shadow:0 0 10px var(--accent-glow);
  transition:width .45s var(--ease);
}
.wd-scale-marks{position:relative;display:flex;justify-content:space-between}
.wd-mark{
  display:flex;flex-direction:column;align-items:center;gap:9px;
  font-size:10.5px;color:var(--text-mute);white-space:nowrap;
  transition:color var(--dur) var(--ease);
}
.wd-mark i{
  width:11px;height:11px;border-radius:50%;box-sizing:border-box;
  background:var(--bg);border:2px solid var(--border);
  transition:all var(--dur) var(--ease);
}
.wd-mark.on{color:var(--accent2)}
.wd-mark.on i{background:var(--accent);border-color:var(--accent);box-shadow:0 0 10px var(--accent-glow)}
.wd-mark.done{color:var(--text-dim)}
.wd-mark.done i{background:var(--accent-deep);border-color:var(--accent-deep)}

/* ---------- 右栏：关联网络 ---------- */
.rs-net .k{width:44px}
.rs-net .v .nv{cursor:pointer;border-bottom:1px dashed transparent;transition:all var(--dur) var(--ease)}
.rs-net .v .nv:hover{color:var(--accent2);border-bottom-color:var(--accent)}

/* ---------- 右栏：完整度分项 ---------- */
.rs-meter{margin-bottom:11px}
.rs-meter-top{
  display:flex;align-items:center;justify-content:space-between;
  font-size:11px;color:var(--text-dim);margin-bottom:5px;
}
.rs-meter-top b{color:var(--accent2)}
.rs-meter-bar{height:6px;border-radius:3px;background:var(--border);overflow:hidden}
.rs-meter-bar i{
  display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--accent-deep),var(--accent));
  transition:width .45s var(--ease);
}
.rs-meter-bar i.low{background:linear-gradient(90deg,#7a3a2a,var(--orange))}
.rs-meter-bar i.zero{background:var(--border)}
.rs-miss{
  margin-top:4px;padding:9px 11px;border-radius:10px;font-size:11px;line-height:1.6;
  border:1px solid var(--border);background:var(--card);color:var(--text-mute);
}
.rs-miss b{color:var(--orange)}

/* ---------- 响应式 ---------- */
@media (max-width:1140px){
  .wd-crumb-meta{display:none}
}
@media (max-width:860px){
  .wd-crumbbar{display:none}
}