* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #f8fafc; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }

#three-canvas {
  display: block; width: 100%; height: 100%;
  background: #f8fafc;
  cursor: grab;
}
#three-canvas:active { cursor: grabbing; }

#app-header {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px;
  background: rgba(15, 15, 35, 0.85);
  color: #e2e8f0;
  z-index: 10;
  border-bottom: 1px solid rgba(100, 116, 139, 0.35);
}
#app-header h1 { font-size: 14pt; font-weight: 600; letter-spacing: 0.5px; }
#app-header .title-block { display: flex; align-items: baseline; gap: 14px; }
#app-header #node-counter { font-size: 9pt; color: #94a3b8; }
#app-header .mode-badge {
  padding: 4px 14px; border-radius: 14px;
  background: rgba(139, 92, 246, 0.25);
  color: #c4b5fd;
  font-size: 9pt; font-weight: 600; letter-spacing: 1px;
}

#loading-overlay {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(248, 250, 252, 0.95);
  color: #475569; font-size: 14pt;
  z-index: 20;
  transition: opacity .2s;
}
#loading-overlay.hidden { opacity: 0; pointer-events: none; }