html, body { height: 100%; margin: 0; }
body { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #f8fafc; color: #0f172a; }
#map { height: 100%; width: 100%; }
.control-card { width: min(360px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; }
.control-header { min-height: 58px; }
.admin-login-button { min-height: 34px; white-space: nowrap; }
.planner-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-color: #2563eb; background: #eff6ff; color: #1d4ed8; }
.planner-toggle:hover { border-color: #1d4ed8; background: #dbeafe; }
.control-card.collapsed { width: min(520px, calc(100vw - 32px)); overflow: visible; }
.control-card.collapsed #plannerContent { display: none; }
.map-actions { z-index: 15; padding-bottom: env(safe-area-inset-bottom); pointer-events: none; }
.map-actions button { pointer-events: auto; }
.route-steps { max-height: min(430px, 42vh); overflow-y: auto; }
.route-summary > div { min-height: 42px; }
.route-steps::-webkit-scrollbar { width: 6px; }
.route-steps::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
.marker-token {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border: 3px solid #fff; border-radius: 999px;
  color: #fff; font-size: 13px; font-weight: 800; line-height: 1;
  box-shadow: 0 2px 7px rgba(15, 23, 42, .24);
}
.marker-start { background: #16a34a; }
.marker-end { background: #dc2626; }
.marker-waypoint { background: #2563eb; }
.status-dot { width: 8px; height: 8px; border-radius: 999px; background: #94a3b8; }
.status-dot.ready { background: #16a34a; }
.status-dot.error { background: #dc2626; }
@media (max-width: 640px) {
  .control-card { left: 12px; top: 12px; width: calc(100vw - 24px); max-height: calc(100dvh - 24px); padding: 16px; }
  .control-card > div:first-child { flex-wrap: wrap; }
  .control-card.collapsed { width: auto; max-width: calc(100vw - 24px); }
  #adminLoginButton { white-space: nowrap; }
  #routeManagement .mt-2 { flex-wrap: wrap; }
  #routeNameInput, #routeStartInput, #routeEndInput, #saveRouteNameButton { width: 100%; flex-basis: 100%; }
  .map-actions { right: 12px; bottom: calc(72px + env(safe-area-inset-bottom)); }
  #adminLoginDialog form { max-height: calc(100dvh - 32px); overflow-y: auto; }
  #routeSelect, #openAmapButton, #resetMapButton, #addWaypointButton,
  #addRouteButton, #deleteRouteButton, #saveRouteNameButton,
  #waypointControls button { min-height: 44px; }
  .route-steps { max-height: 24dvh; }
}