:root {
  --bg-0: #060a1f;
  --bg-1: #0a1130;
  --bg-2: #0e1a45;
  --line: #1c2a5e;
  --cyan: #00e0ff;
  --cyan-soft: #3aa0ff;
  --gold: #ffd166;
  --purple: #7c5cff;
  --green: #06d6a0;
  --pink: #ff6b9d;
  --text: #e8f0ff;
  --text-dim: #8fa3c8;
  --card: rgba(18, 28, 66, 0.72);
  --card-border: rgba(58, 160, 255, 0.22);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: radial-gradient(circle at 20% 10%, #122056 0%, var(--bg-0) 55%) fixed;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  overflow: hidden;
}

a { color: var(--cyan); text-decoration: none; }

/* ---------- 顶部栏 ---------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 26px;
  background: linear-gradient(180deg, rgba(6,10,31,0.92), rgba(6,10,31,0.35));
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--card-border);
}
.topbar-right { display: flex; align-items: center; gap: 18px; }
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.brand .logo {
  font-size: 14px; font-weight: 800; letter-spacing: 1px;
  background: linear-gradient(90deg, var(--cyan), var(--purple));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand .sublogo {
  font-size: 11px; font-weight: 700; color: var(--cyan); letter-spacing: 1px; white-space: nowrap;
}
.brand .sub { font-size: 10px; color: var(--text-dim); margin-top: 1px; }
.manifesto-logo {
  font-size: 18px; margin-left: 10px; text-decoration: none;
  transition: transform .2s;
}
.manifesto-logo:hover { transform: scale(1.2); }
.manifesto-badge {
  background: linear-gradient(135deg, #ffd166, #ff9a3c);
  color: #060a1f; font-size: 12px; font-weight: 700;
  padding: 5px 14px; border-radius: 20px; text-decoration: none;
  letter-spacing: 0.5px; transition: all .2s;
}
.manifesto-badge:hover { transform: scale(1.05); box-shadow: 0 0 16px rgba(255,209,102,0.4); }
.back-badge {
  background: linear-gradient(135deg, #00e0ff, #7c5cff);
  color: #060a1f !important;
}
.topbar nav { display: flex; gap: 20px; font-size: 13px; }
.topbar nav a { color: var(--text-dim); transition: color .2s; }

.recruit-banner .rb-text { letter-spacing: 0.3px; }
.recruit-banner .rb-btn {
  background: #0a1628; color: #d4af37; padding: 4px 16px; border-radius: 16px;
  font-size: 12px; font-weight: 700; white-space: nowrap;
  transition: background .2s;
}
.recruit-banner .rb-btn:hover { background: #1a3050; }
.topbar nav a:hover { color: var(--cyan); }

/* ---------- 图谱区 ---------- */
#graph-wrap { position: absolute; inset: 0; inset: 0; }
#graph { width: 100%; height: 100%; display: block; }

/* ---------- 图例面板（按钮弹出） ---------- */
#legend-btn {
  display: none;
}
.legend h4 { font-size: 12px; color: var(--text-dim); margin-bottom: 8px; font-weight: 600; }
.legend .row { display: flex; align-items: center; gap: 8px; margin: 5px 0; }
.legend .dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.legend .sep { height: 1px; background: var(--line); margin: 9px 0; }

/* ---------- 详情面板 ---------- */
#detail {
  position: fixed; top: 70px; right: 22px; width: 320px; z-index: 18;
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: 14px; padding: 18px; backdrop-filter: blur(10px);
  transform: translateX(380px); transition: transform .3s ease;
  max-height: calc(100vh - 110px); overflow-y: auto;
  display: none; /* 初始隐藏 */
}
#detail.open { 
  transform: translateX(0); 
  display: block; /* 打开时显示 */
}
#detail .close {
  position: absolute; top: 12px; right: 14px; cursor: pointer;
  color: var(--text-dim); font-size: 18px; line-height: 1; z-index: 10;
  transition: color .2s, transform .2s;
}
#detail .close:hover {
  color: var(--cyan);
  transform: scale(1.2);
}
#detail .d-type {
  display: inline-block; font-size: 11px; padding: 3px 9px; border-radius: 20px;
  background: rgba(0,224,255,0.14); color: var(--cyan); margin-bottom: 10px;
}
#detail .d-name { font-size: 21px; font-weight: 700; margin-bottom: 4px; }
#detail .d-title { font-size: 13px; color: var(--gold); margin-bottom: 12px; line-height: 1.4; }
#detail .d-org { font-size: 12px; color: var(--text-dim); margin-bottom: 12px; }
#detail .d-desc { font-size: 13px; line-height: 1.65; color: var(--text); margin-bottom: 14px; }
#detail .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
#detail .tag {
  font-size: 11px; padding: 3px 8px; border-radius: 6px;
  background: rgba(124,92,255,0.16); color: #c5b6ff;
}
#detail .action-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(135deg, #00e0ff 0%, #7c5cff 100%);
  color: #fff; font-size: 13px; font-weight: 600;
  padding: 10px 20px; border-radius: 8px;
  margin-bottom: 14px; cursor: pointer;
  text-decoration: none; transition: all .25s;
}
#detail .action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,224,255,0.35);
}
#detail .d-links a {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px;
  margin-right: 14px; color: var(--cyan);
}
#detail .d-rel { font-size: 12px; color: var(--text-dim); border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; }
#detail .d-rel b { color: var(--text); font-weight: 600; }
#detail .child-hint {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--cyan); margin: 12px 0;
  background: rgba(0,224,255,0.07); border: 1px solid rgba(0,224,255,.18);
  border-radius: 8px; padding: 9px 12px; line-height: 1.5;
}
#detail .parent-hint {
  font-size: 11px; color: var(--text-dim); margin-bottom: 8px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.detail-link { font-size: 12px; margin-right: 12px; color: var(--cyan); }

/* ---------- 过渡遮罩 ---------- */
#fade-overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(6,10,31,.82); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 14px;
  opacity: 0; pointer-events: none; transition: opacity .42s ease;
}
#fade-overlay.active { opacity: 1; pointer-events: all; }
#fade-overlay .spinner {
  width: 38px; height: 38px; border: 3px solid rgba(0,224,255,.18);
  border-top-color: #00e0ff; border-radius: 50%;
  animation: spin .75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
#fade-overlay p { color: #7ab8d4; font-size: 13px; letter-spacing: .5px; }


/* ---------- 底部生态入口 ---------- */
.ecosystem-bar {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 14;
  display: flex; gap: 10px; align-items: center;
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: 40px; padding: 8px 16px; backdrop-filter: blur(8px);
  font-size: 12px; max-width: calc(100vw - 40px); flex-wrap: wrap; justify-content: center;
}
.ecosystem-bar a {
  color: var(--text-dim); padding: 4px 10px; border-radius: 20px;
  transition: all .2s; white-space: nowrap;
}
.ecosystem-bar a:hover { color: var(--bg-0); background: var(--cyan); }

/* ---------- 节点交互 ---------- */
.node circle { cursor: pointer; transition: stroke-width .15s; }
.node text { fill: var(--text); font-size: 11px; pointer-events: none; text-anchor: middle; }
.link { stroke-opacity: 0.55; }
.node.dim { opacity: 0.18; }
.link.dim { stroke-opacity: 0.06; }
.link-label { fill: var(--text-dim); font-size: 9px; pointer-events: none; }

/* ---------- 加载态 ---------- */
#loading {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--text-dim); font-size: 14px; z-index: 5;
}


/* ---------- 申请加入虚拟星位 ---------- */
.apply-star { cursor: pointer; }
.apply-star circle {
  fill: transparent;
  stroke: #2bd4ff;
  stroke-width: 2.5;
  stroke-dasharray: 6 3;
  animation: dash-spin 1.2s linear infinite;
}
.apply-star text {
  fill: #2bd4ff;
  font-size: 11px;
  text-anchor: middle;
  pointer-events: none;
}
.link.apply {
  stroke: #2bd4ff;
  stroke-opacity: 0.5;
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
  fill: none;
}
@keyframes dash-spin {
  to { stroke-dashoffset: -18; }
}

@media (max-width: 720px) {
  .topbar nav { display: none; }
  .brand .sublogo { font-size: 10px; letter-spacing: 0; white-space: nowrap; }
  #detail { width: calc(100vw - 32px); right: 16px; }
  #legend-btn { left: 16px; bottom: 16px; }
  #legend-panel { left: 16px; bottom: 58px; }
}