.star-body { margin: 0; padding: 0; background: #0a0a1a; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #e0e0e0; }

#constellation-canvas { width: 100vw; height: 100vh; background: radial-gradient(ellipse at center, #0d1117 0%, #000010 100%); }

#control-bar { position: fixed; top: 16px; right: 16px; display: flex; align-items: center; gap: 12px; background: rgba(20, 20, 40, 0.8); padding: 8px 16px; border-radius: 20px; backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.1); font-size: 13px; }

.status { padding: 2px 8px; border-radius: 10px; font-size: 11px; }
.status.connected { background: #22c55e; color: #000; }
.status.disconnected { background: #666; color: #fff; }
.status.connecting { background: #f59e0b; color: #000; }

#refresh-btn { background: none; border: 1px solid rgba(255, 255, 255, 0.2); color: #e0e0e0; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-size: 16px; transition: background 0.2s; }
#refresh-btn:hover { background: rgba(255, 255, 255, 0.1); }

#info-panel { position: fixed; bottom: 24px; left: 24px; background: rgba(20, 20, 40, 0.9); padding: 16px 20px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); max-width: 300px; backdrop-filter: blur(8px); }
#info-panel.hidden { display: none; }
#node-title { margin: 0 0 8px; font-size: 15px; font-weight: 600; }
#node-description { margin: 0 0 8px; font-size: 13px; opacity: 0.8; }
#node-type { font-size: 11px; color: #a78bfa; }

#loading { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 14px; opacity: 0.6; }

.topic-node { fill: #f59e0b; cursor: pointer; }
.note-node { fill: #818cf8; cursor: pointer; }
.achievement-node { fill: #22c55e; cursor: pointer; }
.connection-line { stroke: rgba(255, 255, 255, 0.15); stroke-width: 1; fill: none; }
.node-label { fill: #e0e0e0; font-size: 11px; pointer-events: none; text-anchor: middle; }