* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; display: flex; height: 100vh; overflow: hidden; }
#map { flex: 1; height: 100vh; }
#panel {
  width: 380px; height: 100vh; overflow-y: auto;
  background: #1a1d23; color: #e0e0e0; padding: 16px;
  border-left: 2px solid #2d3139; font-size: 13px;
}
h1 { font-size: 18px; margin-bottom: 12px; color: #4fc3f7; }
h3 { font-size: 13px; color: #81d4fa; margin: 12px 0 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.section { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #2d3139; }
.row { display: flex; gap: 8px; align-items: center; margin: 4px 0; flex-wrap: wrap; }
.row label { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #b0b0b0; }
input[type="number"] {
  width: 70px; padding: 4px 6px; background: #2d3139; border: 1px solid #3d4149;
  color: #e0e0e0; border-radius: 4px; font-size: 12px;
}
input[type="range"] { width: 100px; }
.btn {
  padding: 6px 12px; border: none; border-radius: 4px; cursor: pointer;
  font-size: 12px; font-weight: 500; transition: background 0.2s;
}
.btn-primary { background: #1976d2; color: white; }
.btn-primary:hover { background: #1565c0; }
.btn-play { background: #2e7d32; color: white; }
.btn-play:hover { background: #1b5e20; }
.btn-accent { background: #e65100; color: white; }
.btn-accent:hover { background: #bf360c; }
.btn-outline { background: transparent; border: 1px solid #3d4149; color: #b0b0b0; }
.btn-outline:hover { background: #2d3139; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.battery-bar {
  width: 100%; height: 20px; background: #2d3139; border-radius: 10px;
  position: relative; overflow: hidden; margin: 4px 0;
}
.battery-fill {
  height: 100%; background: linear-gradient(90deg, #4caf50, #8bc34a);
  border-radius: 10px; transition: width 0.3s;
  width: 100%;
}
.battery-fill.low { background: linear-gradient(90deg, #f44336, #ff9800); }
.battery-fill.swapping { background: linear-gradient(90deg, #ff9800, #ffc107); animation: pulse 0.5s infinite alternate; }
@keyframes pulse { from { opacity: 0.6; } to { opacity: 1; } }
#battery-text { position: absolute; top: 0; left: 50%; transform: translateX(-50%); font-size: 11px; line-height: 20px; font-weight: bold; color: #fff; text-shadow: 0 0 4px rgba(0,0,0,0.7); }

#area-info { font-size: 11px; color: #888; margin-top: 4px; }
#sim-status { font-size: 12px; color: #4fc3f7; margin-top: 4px; }
#stats { font-size: 12px; color: #b0b0b0; }
#stats div { margin: 2px 0; }
#stats span { color: #4fc3f7; font-weight: bold; }
#export-status { font-size: 11px; color: #ff9800; margin-top: 4px; }

.controls { display: flex; gap: 6px; margin: 6px 0; }

#legend {
  position: absolute; bottom: 20px; right: 400px; background: rgba(26,29,35,0.9);
  padding: 10px 14px; border-radius: 6px; font-size: 11px; color: #ccc; z-index: 1000;
}
#legend div { margin: 3px 0; display: flex; align-items: center; gap: 6px; }
.leg { display: inline-block; width: 16px; height: 3px; border-radius: 2px; }
.leg-path { background: #4fc3f7; }
.leg-footprint { background: rgba(255,152,0,0.4); border: 1px dashed #ff9800; height: 0; }
.leg-gcp { background: #f44336; width: 8px; height: 8px; border-radius: 50%; }
.leg-tie { background: #9c27b0; width: 6px; height: 6px; border-radius: 50%; }
.leg-drone { background: #4fc3f7; width: 10px; height: 10px; border-radius: 50%; }
.leg-home { background: #4caf50; width: 8px; height: 8px; border-radius: 2px; }

/* Leaflet overrides for dark theme feel */
.leaflet-control-zoom a { background: #2d3139 !important; color: #e0e0e0 !important; border-color: #3d4149 !important; }