:root {
  --bg: #0f1117; --bg-card: #181b24; --border: #2a2e3a; --text: #e4e6ed;
  --text-muted: #9299ac; --text-dim: #6b7280; --accent: #6c8cff;
  --font: 'Inter', -apple-system, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font); background: var(--bg); color: var(--text); overflow: hidden; height: 100vh; }

.top-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; gap: 1rem; padding: 0.6rem 1.2rem;
  background: rgba(15,17,23,0.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.top-bar a { color: var(--accent); text-decoration: none; font-size: 0.82rem; font-weight: 600; }
.top-bar a:hover { color: #93b4ff; }
.top-bar .title { font-size: 0.95rem; font-weight: 700; color: var(--text); }
.top-bar .spacer { flex: 1; }

.controls { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.controls label { font-size: 0.75rem; color: var(--text-muted); display: flex; align-items: center; gap: 0.3rem; cursor: pointer; }
.controls input[type="checkbox"] { accent-color: var(--accent); }
.controls input[type="range"] { width: 80px; accent-color: var(--accent); }
.controls .sep { width: 1px; height: 16px; background: var(--border); margin: 0 0.3rem; }
.controls button {
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text-muted);
  font-size: 0.72rem; font-weight: 600; padding: 0.25rem 0.6rem; border-radius: 12px;
  cursor: pointer; font-family: var(--font); transition: all 0.2s;
}
.controls button:hover { border-color: var(--accent); color: var(--accent); }
.controls button.active { border-color: var(--accent); color: var(--accent); background: rgba(108,140,255,0.12); }

.search-box {
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text);
  font-size: 0.78rem; padding: 0.3rem 0.6rem; border-radius: 8px;
  font-family: var(--font); width: 150px; outline: none; transition: border-color 0.2s;
}
.search-box:focus { border-color: var(--accent); }

canvas { display: block; position: fixed; top: 0; left: 0; }

.tooltip {
  position: fixed; z-index: 100; pointer-events: none; display: none;
  background: rgba(24,27,36,0.96); border: 1px solid var(--border);
  border-radius: 10px; padding: 0.7rem 1rem; max-width: 340px;
  backdrop-filter: blur(8px); box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.tooltip .tt-label { font-size: 0.9rem; font-weight: 700; margin-bottom: 0.15rem; }
.tooltip .tt-chapter { font-size: 0.7rem; font-weight: 600; opacity: 0.7; }
.tooltip .tt-diff { font-size: 0.72rem; margin-top: 0.25rem; }
.tooltip .tt-def { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.35rem; line-height: 1.45; border-top: 1px solid var(--border); padding-top: 0.35rem; }
.tooltip .tt-conn { font-size: 0.7rem; color: var(--text-dim); margin-top: 0.3rem; }
.tooltip .tt-hint { font-size: 0.65rem; color: var(--text-dim); margin-top: 0.3rem; font-style: italic; border-top: 1px solid var(--border); padding-top: 0.25rem; }

.legend {
  position: fixed; bottom: 1rem; left: 1rem; z-index: 50;
  background: rgba(24,27,36,0.9); border: 1px solid var(--border);
  border-radius: 10px; padding: 0.7rem 1rem; backdrop-filter: blur(6px);
}
.legend h4 { font-size: 0.72rem; color: var(--text-muted); margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 0.05em; }
.legend-item { display: flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; margin-bottom: 0.2rem; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.legend-section { margin-top: 0.5rem; border-top: 1px solid var(--border); padding-top: 0.4rem; }

.stats {
  position: fixed; bottom: 1rem; right: 1rem; z-index: 50;
  font-size: 0.7rem; color: var(--text-dim); text-align: right;
}