/* --- MODE SWITCHER --- */
#mode-switcher {
  position: fixed; top: 12px; left: 12px;
  display: flex; gap: 4px; z-index: 300;
}
.mode-btn {
  background: rgba(20, 20, 30, 0.6);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.1);
  color: #888; border-radius: 6px;
  padding: 7px 14px; font-size: 12px;
  font-family: 'Courier New', monospace;
  cursor: pointer; transition: all 0.15s;
}
.mode-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.mode-btn.active { background: #ff0033; color: #fff; border-color: #ff0033; }

/* Mesh sub-mode toolbar sits below mode switcher */
#mesh-toolbar {
  position: fixed; top: 48px; left: 12px;
  display: flex; gap: 4px; z-index: 300;
}



body { 
  /* Dynamic midnight blue to violet gradient */
  background: linear-gradient(135deg, #090a0f 0%, #151125 100%); 
  overflow: hidden; 
  font-family: 'Segoe UI', Roboto, Helvetica, sans-serif; /* Modernized font */
  color: #ccc; 
}

#viewport { width: 100vw; height: 100vh; display: block; cursor: default; }

/* --- STATUS BAR --- */
#statusbar {
  position: fixed; bottom: 0; left: 0; right: 0; height: 24px;
  background: rgba(20, 20, 30, 0.4);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  display: flex; align-items: center; padding: 0 12px;
  font-size: 11px; color: #888; gap: 20px; z-index: 200;
}
#statusbar .sep { color: rgba(255, 255, 255, 0.1); }
#statusbar .hi { color: #ff0033; }

/* --- SCENE HIERARCHY --- */
#hierarchy {
  position: fixed; top: 12px; right: 12px; bottom: 36px; width: 200px;
  background: rgba(20, 20, 30, 0.4);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  display: flex; flex-direction: column; overflow: hidden; z-index: 100;
}
.h-title {
  padding: 8px 12px; font-size: 10px; color: #888; text-transform: uppercase;
  letter-spacing: 1px; background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
#h-list { flex: 1; overflow-y: auto; padding: 5px 0; }
.h-item { padding: 6px 12px; font-size: 11px; color: #bbb; cursor: pointer; display: flex; align-items: center; gap: 10px; transition: 0.1s;}
.h-item:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
.h-item.active { background: rgba(255, 0, 51, 0.8); color: #fff; }
.h-item .ic { color: #666; font-size: 10px; width: 12px; text-align: center; }
.h-item.active .ic { color: #fff; }

/* --- GIZMO POSITION --- */
#gizmo { 
  position: fixed; top: auto; bottom: 36px; right: 224px; width: 120px; height: 120px; 
  pointer-events: auto; cursor: pointer; z-index: 100;
}