* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; overflow: hidden; background: #1a1a2e; }
#map { width: 100vw; height: 100vh; }

.loading {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  background: rgba(30,30,40,0.95); padding: 20px 32px; border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4); z-index: 2000;
  font-size: 14px; color: #ccc; display: flex; align-items: center; gap: 12px;
  border: 1px solid #333;
}
.spinner { width: 20px; height: 20px; border: 3px solid #333; border-top-color: #fde725; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Panel */
.panel {
  position: absolute; top: 12px; right: 12px; width: 270px;
  background: rgba(20,20,30,0.92); backdrop-filter: blur(12px);
  border-radius: 12px; box-shadow: 0 2px 20px rgba(0,0,0,0.5);
  z-index: 1000; font-size: 12px; overflow: hidden; color: #ccc;
  border: 1px solid #333;
}
.panel-header { padding: 14px 16px 10px; border-bottom: 1px solid #333; }
.panel-header h3 { font-size: 14px; font-weight: 600; margin: 0; color: #eee; }
.panel-header p { font-size: 11px; color: #888; margin: 2px 0 0; }
.panel-body { padding: 12px 16px 16px; max-height: calc(100vh - 200px); overflow-y: auto; }
.panel label { display: block; margin: 8px 0 4px; font-weight: 500; font-size: 11px; color: #999; }
.panel input[type="range"] { width: 100%; margin: 2px 0 4px; accent-color: #fde725; }
.range-row { display: flex; justify-content: space-between; font-size: 10px; color: #777; }

.route-filter { display: flex; gap: 6px; margin-top: 8px; }
.route-filter input { flex: 1; padding: 6px 10px; border: 1px solid #444; border-radius: 6px; font-size: 12px; background: #1a1a2e; color: #ccc; }
.route-filter input:focus { outline: none; border-color: #fde725; }

/* Stop popup */
.maplibregl-popup-content { background: rgba(20,20,30,0.94) !important; border: 1px solid #444 !important; border-radius: 8px !important; box-shadow: 0 4px 16px rgba(0,0,0,0.5) !important; padding: 10px 14px !important; color: #ccc !important; }
.maplibregl-popup-tip { border-top-color: rgba(20,20,30,0.94) !important; }
.stop-popup { font-size: 14px; color: #ddd; min-width: 180px; }
.stop-popup strong { font-size: 15px; color: #fff; display: block; margin-bottom: 2px; }
.stop-routes { max-height: 200px; overflow-y: auto; margin-top: 4px; }
.stop-route-row { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 13px; }
.route-name { color: #fde725; font-weight: 500; }
.stop-popup-meta { color: #999; font-size: 12px; margin: 2px 0 6px; }
.stop-more { color: #666; font-size: 12px; }
.route-freq { color: #999; }

.panel-body::-webkit-scrollbar { width: 4px; }
.panel-body::-webkit-scrollbar-thumb { background: #333; border-radius: 2px; }