/* ============ 基础 ============ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  display: flex; flex-direction: column;
  background: #f5f6fa; color: #1f2937;
  overflow: hidden;
}

/* ============ 顶部工具栏 ============ */
.toolbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 10px 16px;
  background: #fff; border-bottom: 1px solid #e9e6f2;
  flex-shrink: 0;
}
.toolbar .title { font-size: 15px; font-weight: 800; margin-right: auto; color: #5b21b6; }
.toolbar .hint { font-size: 12px; color: #9ca3af; }
.toolbar button {
  padding: 6px 12px; font-size: 13px; font-weight: 600;
  border: 2px solid #e5e7eb; border-radius: 10px;
  background: #fff; color: #374151; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.toolbar button:hover { background: #f3f0fb; border-color: #d6cbf0; }
.toolbar button:disabled { opacity: .4; cursor: not-allowed; }
.toolbar button.primary {
  background: #8b5cf6; border-color: #7c3aed; color: #fff;
}
.toolbar button.primary:hover { background: #7c3aed; }
.toolbar button.primary.on { background: #f97316; border-color: #ea580c; }
.zoom-label {
  font-size: 12px; color: #6b7280; min-width: 44px; text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ============ 批注工具栏（进入批注模式才显示） ============ */
.annotate-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
  padding: 8px 16px;
  background: #fff7ed; border-bottom: 2px solid #fdba74;
  flex-shrink: 0;
}
.annotate-bar .ab-label { font-size: 13px; font-weight: 800; color: #c2410c; }
.annotate-bar .group { display: flex; align-items: center; gap: 6px; }
.annotate-bar .group .cap { font-size: 12px; color: #9a3412; }
.swatch {
  width: 24px; height: 24px; border-radius: 50%;
  border: 3px solid transparent; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(0,0,0,.12);
  transition: opacity .12s;
}
.swatch.active { border-color: #fff; box-shadow: 0 0 0 2px #c2410c; }
.size-btn {
  width: 34px; height: 26px; border-radius: 8px;
  border: 2px solid #e5e7eb; background: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .12s;
}
.size-btn.active { border-color: #c2410c; background: #ffedd5; }
.size-btn .dot { border-radius: 50%; background: #c2410c; }
.annotate-bar button.text {
  padding: 5px 12px; font-size: 13px; font-weight: 600;
  border: 2px solid #e5e7eb; border-radius: 10px;
  background: #fff; color: #374151; cursor: pointer;
}
.annotate-bar button.text:hover { background: #fff1e2; border-color: #fdba74; }
.annotate-bar button.text.on {
  background: #f97316; border-color: #ea580c; color: #fff;
}

/* ============ 画布视口 ============ */
#viewport {
  flex: 1; position: relative; overflow: hidden;
  cursor: grab; touch-action: none;
  background:
    radial-gradient(circle at 1px 1px, #e4e7f0 1px, transparent 0) 0 0 / 24px 24px;
}
#viewport:active { cursor: grabbing; }
#viewport.annotating { cursor: crosshair; }

#world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }

#links { position: absolute; left: 0; top: 0; }
#links path {
  fill: none; stroke: #c3cbe8; stroke-width: 1.8;
  transition: transform .25s cubic-bezier(.2,.7,.3,1), opacity .25s ease;
}
#links path.entering { animation: lineIn .28s ease-out; }
@keyframes lineIn { from { opacity: 0; } to { opacity: 1; } }

#annotations { position: absolute; left: 0; top: 0; pointer-events: none; }
#annotations path { fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ============ 节点（卡通贴纸风） ============ */
.node {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px; text-align: center;
  user-select: none; white-space: nowrap; overflow: hidden;
  cursor: pointer;
  border-style: solid;
  transition: box-shadow .12s, transform .25s cubic-bezier(.2,.7,.3,1);
  font-variant-numeric: tabular-nums;
  box-shadow: 0 3px 0 rgba(0,0,0,.10), 0 6px 14px rgba(0,0,0,.08);
}
.node:hover {
  box-shadow: 0 4px 0 rgba(0,0,0,.12), 0 10px 22px rgba(0,0,0,.20), 0 0 0 3px rgba(0,0,0,.10);
}

/* 展开时新节点的淡入 */
.node.entering { animation: nodeIn .28s ease-out; }
@keyframes nodeIn {
  from { opacity: 0; transform: scale(.7); }
  to { opacity: 1; transform: scale(1); }
}

.node.root {
  background: #8b5cf6; color: #fff;
  border-color: #5b21b6; border-width: 3px;
  font-size: 15px; font-weight: 800; border-radius: 18px;
}
.node.vowel {
  background: #3b82f6; color: #fff;
  border-color: #1e40af; border-width: 2.5px;
  font-size: 20px; font-weight: 800; border-radius: 14px;
}
.node.grapheme {
  background: #22c55e; color: #fff;
  border-color: #166534; border-width: 2.5px;
  font-size: 15px; font-weight: 800;
}
.node.phoneme {
  background: #f97316; color: #fff;
  border-color: #9a3412; border-width: 2.5px;
  font-size: 14px; font-weight: 700;
}
.node.word {
  background: #fef9c3; color: #713f12;
  border-color: #eab308; border-width: 2px;
  font-size: 13px; font-weight: 600; border-radius: 10px;
}

.node.folded::after {
  content: "+";
  position: absolute; right: 3px; bottom: 1px;
  font-size: 12px; font-weight: 900; color: rgba(0,0,0,.55);
}
.node.root.folded::after, .node.vowel.folded::after,
.node.grapheme.folded::after, .node.phoneme.folded::after { color: rgba(255,255,255,.95); }