:root {
  --mapro-ui-font-family: "BIZ UDPGothic", "BIZ UDPゴシック", sans-serif;
  --mapro-signal-go: #1FBF00;
  --mapro-signal-go-dark: #1FBF00;
  --mapro-signal-go-soft: #A8FF95;
  --mapro-signal-stop: #FF4D4D;
  --mapro-signal-stop-dark: #D93636;
  --mapro-signal-stop-soft: #FF9A9A;
  --mapro-signal-warn: #FFD93D;
  --mapro-signal-warn-dark: #D0AD2E;
  --mapro-signal-warn-soft: #FFE98A;
  --mapro-ui-text: #1f2937;
  --mapro-ui-muted: #4b5563;
  --mapro-ui-border: #cbd5e1;
  --mapro-ui-panel: rgba(255, 255, 255, 0.6);
  --mapro-ui-panel-strong: rgba(255, 255, 255, 0.7);
  --mapro-ui-accent: var(--mapro-signal-go-dark);
  --mapro-ui-focus-ring: 0 0 0 2px rgba(31, 191, 0, 0.3);
}

.mapro-wrap { width: 100%; max-width: 1760px; margin: 0 auto; box-sizing: border-box; position: relative; overflow: hidden; border-radius: 10px; font-family: var(--mapro-ui-font-family); color: var(--mapro-ui-text); --mapro-font-scale: 1; }
.mapro-wrap .bi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  line-height: 1;
  font-style: normal;
}

.mapro-wrap .bi::before {
  content: "help";
  font-family: "Material Symbols Outlined" !important;
  font-style: normal;
  font-weight: 500;
  font-size: 1em;
  line-height: 1;
  display: inline-block;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  direction: ltr;
  font-feature-settings: "liga";
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

.mapro-wrap .bi-dash-lg::before { content: "remove"; }
.mapro-wrap .bi-plus-lg::before { content: "add"; }
.mapro-wrap .bi-aspect-ratio-fill::before { content: "fit_screen"; }
.mapro-wrap .bi-arrows-fullscreen::before { content: "open_in_full"; }
.mapro-wrap .bi-fullscreen-exit::before { content: "close_fullscreen"; }
.mapro-wrap .bi-eye-fill::before { content: "visibility"; }
.mapro-wrap .bi-eye-slash-fill::before { content: "visibility_off"; }
.mapro-wrap .bi-funnel-fill::before { content: "filter_alt"; }
.mapro-wrap .bi-arrow-counterclockwise::before { content: "restart_alt"; }
.mapro-wrap .bi-question-circle-fill::before { content: "help"; }
.mapro-wrap .bi-geo-alt-fill::before { content: "location_on"; }
.mapro-wrap .bi-flag-fill::before { content: "flag"; }
.mapro-wrap .bi-caret-down-fill::before { content: "keyboard_arrow_down"; }
.mapro-wrap .bi-caret-up-fill::before { content: "keyboard_arrow_up"; }
.mapro-wrap .bi-arrow-right::before { content: "arrow_forward"; }
.mapro-wrap .bi-signpost-2-fill::before { content: "alt_route"; }
.mapro-wrap .bi-link-45deg::before { content: "link"; }
.mapro-wrap .bi-search::before { content: "search"; }
.mapro-wrap .bi-info-circle-fill::before { content: "info"; }
.mapro-wrap .bi-map::before { content: "map"; }
.mapro-wrap .bi-box::before { content: "view_in_ar"; }
.mapro-wrap .bi-palette-fill::before { content: "palette"; }
.mapro-wrap .bi-circle-half::before { content: "contrast"; }
.mapro-wrap .bi-type::before { content: "format_size"; }
.mapro-wrap .bi-layers-fill::before { content: "layers"; }
.mapro-wrap .bi-star-fill::before { content: "star"; }
.mapro-wrap .bi-exclamation-triangle-fill::before { content: "warning"; }
.mapro-wrap .bi-wrench-adjustable-circle-fill::before { content: "construction"; }
.mapro-wrap .bi-person-fill::before { content: "person"; }
.mapro-wrap .bi-toilet::before { content: "wc"; }
.mapro-wrap .bi-person-standing-dress::before { content: "wc"; }
.mapro-wrap .bi-person-walking::before { content: "directions_walk"; }
.mapro-wrap .bi-person-wheelchair::before { content: "accessible"; }
.mapro-wrap .btn,
.mapro-wrap .form-select { font-family: inherit; }
.mapro-wrap .btn:focus-visible,
.mapro-wrap .form-select:focus-visible { outline: none; box-shadow: var(--mapro-ui-focus-ring); border-color: var(--mapro-ui-accent); }
.mapro-wrap[data-ui-font-size="xs"] { --mapro-font-scale: 0.84; }
.mapro-wrap[data-ui-font-size="sm"] { --mapro-font-scale: 0.92; }
.mapro-wrap[data-ui-font-size="md"] { --mapro-font-scale: 1; }
.mapro-wrap[data-ui-font-size="lg"] { --mapro-font-scale: 1.12; }
.mapro-wrap[data-ui-font-size="xl"] { --mapro-font-scale: 1.24; }
.mapro-map-shell { width: 100%; position: relative; border-radius: 10px; overflow: hidden; --mapro-map-bg: #E8F4FD; }
.mapro-map-shell::after { display: none; }
.mapro-map { width:100%; height:min(98vh, calc(100vh - 16px)); min-height:680px; border:1px solid #ddd; border-radius:10px; overflow:hidden; position: relative; z-index: 1; background: var(--mapro-map-bg); }
.mapro-map.is-view-hidden { opacity: 0 !important; visibility: hidden !important; }
.mapro-2d-ghost { position: absolute; inset: 0; z-index: 619; pointer-events: none; overflow: hidden; border-radius: 10px; opacity: 0; }
.mapro-2d-ghost.is-animating { animation: mapro2dGhostTo3d .56s cubic-bezier(.2,.72,.22,1) forwards; }
.mapro-2d-ghost-pane { position: absolute; inset: 0; transform-origin: 50% 55%; }
.mapro-2d-ghost-fallback { position: absolute; inset: 0; background-size: contain; background-repeat: no-repeat; background-position: center; }
.mapro-overlay { position: absolute; left: 50%; transform: translateX(-50%); width: min(1020px, calc(100% - 20px)); z-index: 600; pointer-events: none; }
.mapro-overlay-tools { top: 10px; right: 10px; left: auto; transform: none; width: auto; z-index: 650; pointer-events: none; }
.mapro-overlay-floor { top: 10px; left: 10px; right: auto; transform: none; width: auto; z-index: 645; pointer-events: none; }
.mapro-overlay-info { top: calc(10px + env(safe-area-inset-top)); left: 10px; right: auto; transform: none; width: auto; z-index: 652; pointer-events: none; }
.mapro-info-topbar { display: inline-flex; align-items: center; gap: 6px; pointer-events: none; }
.mapro-info-topbar > * { pointer-events: auto; }
.mapro-info-toggle {
  pointer-events: auto;
  border: 1px solid rgba(0,0,0,0.14);
  background: rgba(255,255,255,0.82);
  border-radius: 12px;
  padding: 8px 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 22px rgba(12,20,30,0.18);
  width: fit-content;
  max-width: min(78vw, 420px);
  min-width: 0;
  text-align: left;
}
.mapro-info-icon {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(37,99,235,0.12);
  color: #1d4ed8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.mapro-info-icon i { font-size: calc(18px * var(--mapro-font-scale)); line-height: 1; }
.mapro-info-meta {
  display: grid;
  gap: 1px;
  min-width: 0;
  max-width: min(62vw, 340px);
}
.mapro-info-title {
  font-size: calc(11px * var(--mapro-font-scale));
  line-height: 1.1;
  color: #64748b;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.mapro-info-floor {
  font-size: calc(13.5px * var(--mapro-font-scale));
  line-height: 1.2;
  font-weight: 800;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mapro-info-updated {
  font-size: calc(11px * var(--mapro-font-scale));
  line-height: 1.2;
  color: #475569;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mapro-info-toggle:hover { background: rgba(255,255,255,0.9); }
.mapro-day-plan-wrap { display: inline-flex; align-items: center; }
.mapro-day-plan-select {
  border: 1px solid rgba(148, 163, 184, 0.42);
  background: rgba(255,255,255,0.94);
  color: #334155;
  border-radius: 12px;
  height: 44px;
  min-height: 44px;
  min-width: 168px;
  max-width: min(44vw, 220px);
  padding: 8px 30px 8px 10px;
  font-size: calc(13.5px * var(--mapro-font-scale));
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  white-space: nowrap;
}
.mapro-day-plan-select:focus {
  outline: none;
  border-color: #2271b1;
  box-shadow: 0 0 0 2px rgba(34,113,177,0.22);
}
.mapro-floor-picker { pointer-events: auto; position: relative; display: flex; gap: 6px; align-items: stretch; }
.mapro-floor-stack-toggle { border: 1px solid #ccd0d4; background: rgba(255,255,255,0.94); border-radius: 10px; padding: 7px 10px; min-width: 118px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); cursor: pointer; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.mapro-floor-stack-toggle:hover { background: #f6f7f7; }
.mapro-floor-stack-toggle.is-active { border-color: #2271b1; box-shadow: 0 0 0 1px rgba(34,113,177,0.25), 0 2px 8px rgba(0,0,0,0.08); }
.mapro-floor-stack-label { font-size: 10px; line-height: 1; color: #666; font-weight: 600; }
.mapro-floor-stack-current { font-size: 14px; line-height: 1.1; color: #1d2327; font-weight: 700; letter-spacing: 0.01em; }
.mapro-floor-stack-updated { font-size: 10px; line-height: 1.2; color: #5c6670; font-weight: 600; letter-spacing: 0.01em; margin-top: 2px; }
.mapro-floor-3d-toggle { display: none !important; }
.mapro-floor-3d-label { font-size: 10px; line-height: 1; color: #666; font-weight: 600; }
.mapro-floor-3d-current { font-size: 14px; line-height: 1.1; color: #1d2327; font-weight: 700; letter-spacing: 0.01em; }
.mapro-floor-picker .mapro-floor-select { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.mapro-floor-stack-scrim { position: absolute; inset: 0; background: rgba(16,20,24,0.34); backdrop-filter: blur(1px); z-index: 655; }
.mapro-floor-stack-panel { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); width: min(70%, 520px); height: min(72%, 560px); max-width: calc(100% - 28px); max-height: calc(100% - 28px); border-radius: 14px; border: 1px solid rgba(255,255,255,0.78); background: rgba(255,255,255,0.93); box-shadow: 0 18px 44px rgba(0,0,0,0.28); z-index: 660; display: flex; flex-direction: column; overflow: hidden; }
.mapro-floor-stack-panel.is-open { animation: maproFloorStackIn 0.22s ease-out; }
.mapro-floor-stack-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-bottom: 1px solid #e4e6e8; background: rgba(255,255,255,0.94); }
.mapro-floor-stack-title { margin: 0; font-size: 15px; line-height: 1.2; color: #1d2327; }
.mapro-floor-stack-close { border: 0; background: transparent; color: #66707a; font-size: 22px; line-height: 1; cursor: pointer; min-width: 34px; min-height: 34px; border-radius: 8px; }
.mapro-floor-stack-close:hover { background: rgba(0,0,0,0.06); color: #1d2327; }
.mapro-floor-stack-list { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; -webkit-overflow-scrolling: touch; }
.mapro-floor-stack-item { border: 1px solid rgba(0,0,0,0.14); background: rgba(255,255,255,0.97); border-radius: 12px; padding: 10px; cursor: pointer; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; width: 100%; text-align: left; transform: perspective(900px) rotateX(14deg) translateY(calc(-1 * var(--stack-shift, 0px))); transform-origin: center center; transition: transform 0.22s ease, border-color 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
.mapro-floor-stack-item:hover { transform: perspective(900px) rotateX(8deg) translateY(calc(-1 * var(--stack-shift, 0px))); border-color: rgba(34,113,177,0.44); box-shadow: 0 6px 16px rgba(0,0,0,0.16); }
.mapro-floor-stack-item.is-active { border-color: #2271b1; transform: perspective(900px) rotateX(0deg); box-shadow: 0 8px 20px rgba(34,113,177,0.28); }
.mapro-floor-stack-thumb-wrap { display: block; min-width: 0; }
.mapro-floor-stack-thumb { display: block; width: 100%; height: 72px; border-radius: 9px; border: 1px solid rgba(0,0,0,0.16); background-image: linear-gradient(150deg, #d7dee6 0%, #edf1f5 100%); background-size: cover; background-position: center; position: relative; overflow: hidden; }
.mapro-floor-stack-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0) 45%, rgba(0,0,0,0.07) 100%); pointer-events: none; }
.mapro-floor-stack-item.has-preview .mapro-floor-stack-thumb { filter: saturate(0.92) contrast(1.06); }
.mapro-floor-stack-meta { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: 62px; max-width: 130px; }
.mapro-floor-stack-meta .floor-name { font-size: 14px; line-height: 1; color: #1d2327; font-weight: 700; white-space: nowrap; }
.mapro-floor-stack-meta .floor-title { font-size: 11px; line-height: 1.2; color: #5a6570; text-align: right; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mapro-floor-3d-panel { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); width: min(82%, 860px); height: min(84%, 760px); max-width: calc(100% - 28px); max-height: calc(100% - 28px); border-radius: 14px; border: 1px solid rgba(255,255,255,0.78); background: var(--mapro-map-bg); box-shadow: 0 18px 44px rgba(0,0,0,0.28); z-index: 661; display: flex; flex-direction: column; overflow: hidden; }
.mapro-floor-3d-panel.is-stage { left: 0; right: 0; top: 0; bottom: 0; transform: none; width: 100%; height: 100%; max-width: none; max-height: none; border-radius: 10px; border: 1px solid #ddd; box-shadow: none; z-index: 620; background: var(--mapro-map-bg); }
.mapro-floor-3d-panel.is-stage .mapro-floor-3d-header { position: absolute; top: 10px; right: 10px; left: auto; z-index: 640; padding: 0; border: 0; background: transparent; pointer-events: none; }
.mapro-floor-3d-panel.is-stage .mapro-floor-3d-actions { pointer-events: auto; }
.mapro-floor-3d-panel.is-stage .mapro-floor-3d-scene-wrap { padding: 0; }
.mapro-floor-3d-panel.is-stage .mapro-floor-3d-scene { border: 0; border-radius: 10px; background: var(--mapro-map-bg); }
.mapro-floor-3d-panel.is-launching { animation: mapro-floor-3d-launch .24s ease; }
.mapro-floor-3d-boot { position: absolute; inset: 0; z-index: 648; display: flex; align-items: center; justify-content: center; background: rgba(248, 252, 255, 0.72); pointer-events: auto; opacity: 1; transition: opacity .22s ease; }
.mapro-floor-3d-boot.is-ready { opacity: 0; }
.mapro-floor-3d-boot.is-hidden { display: none; }
.mapro-floor-3d-boot-card { min-width: min(86%, 360px); max-width: min(92%, 420px); border-radius: 12px; border: 1px solid rgba(209, 220, 232, 0.95); background: rgba(255, 255, 255, 0.96); box-shadow: 0 10px 26px rgba(8, 18, 28, 0.18); padding: 14px 14px 12px; display: grid; gap: 8px; justify-items: center; text-align: center; }
.mapro-floor-3d-boot-spinner { width: 26px; height: 26px; border-radius: 999px; border: 3px solid rgba(43, 78, 112, 0.16); border-top-color: rgba(35, 113, 177, 0.95); animation: maproFloor3DBootSpin .9s linear infinite; }
.mapro-floor-3d-boot-title { margin: 0; font-size: 14px; line-height: 1.3; color: #1d2b39; font-weight: 800; letter-spacing: 0.01em; }
.mapro-floor-3d-boot-steps { width: 100%; display: grid; gap: 5px; }
.mapro-floor-3d-boot-step { font-size: 11px; line-height: 1.2; color: #6b7785; font-weight: 700; border: 1px solid #dce4ec; border-radius: 999px; padding: 4px 8px; background: rgba(247, 250, 253, 0.94); }
.mapro-floor-3d-boot-step.is-active { color: #0f4170; border-color: rgba(34,113,177,0.38); background: rgba(220, 236, 251, 0.88); }
.mapro-floor-3d-boot-step.is-done { color: #265379; border-color: rgba(56, 139, 211, 0.34); background: rgba(234, 243, 252, 0.86); }
.mapro-floor-3d-boot-note { margin: 0; font-size: 11px; line-height: 1.3; color: #5a6875; font-weight: 700; }
.mapro-floor-3d-boot-start { min-width: 140px; height: 34px; border-radius: 999px; border: 1px solid rgba(34,113,177,0.42); background: #ffffff; color: #1d4f7c; font-size: 12px; line-height: 1; font-weight: 800; letter-spacing: 0.01em; display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; cursor: pointer; box-shadow: 0 4px 12px rgba(21, 54, 88, 0.14); }
.mapro-floor-3d-boot-start:hover { background: #f2f8ff; border-color: rgba(34,113,177,0.58); }
.mapro-floor-3d-boot-start:active { transform: translateY(1px); }
.mapro-floor-3d-boot.is-manual .mapro-floor-3d-boot-spinner,
.mapro-floor-3d-boot.is-manual .mapro-floor-3d-boot-steps { display: none; }
.mapro-floor-3d-boot.is-manual .mapro-floor-3d-boot-title { font-size: 15px; }
.mapro-floor-3d-boot.is-manual .mapro-floor-3d-boot-note { font-size: 12px; color: #425364; }
.mapro-floor-3d-onboarding { position: absolute; inset: 0; z-index: 649; display: flex; align-items: center; justify-content: center; background: rgba(10, 18, 30, 0.46); pointer-events: auto; opacity: 1; transition: opacity .2s ease; }
.mapro-floor-3d-onboarding.is-hidden { display: none; opacity: 0; }
.mapro-floor-3d-onboarding-card { position: relative; width: min(92%, 460px); border-radius: 14px; border: 1px solid rgba(208, 220, 236, 0.96); background: rgba(255, 255, 255, 0.98); box-shadow: 0 14px 30px rgba(8, 16, 24, 0.22); padding: 16px 14px 12px; display: grid; gap: 8px; }
.mapro-floor-3d-onboarding-close { position: absolute; top: 8px; right: 8px; border: 0; background: transparent; color: #596574; width: 30px; height: 30px; border-radius: 999px; font-size: 20px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.mapro-floor-3d-onboarding-close:hover { background: rgba(16, 24, 32, 0.08); color: #1d2b39; }
.mapro-floor-3d-onboarding-title { margin: 0; font-size: 15px; line-height: 1.3; font-weight: 800; color: #1d2b39; text-align: center; padding-right: 28px; }
.mapro-floor-3d-onboarding-steps { display: grid; gap: 6px; }
.mapro-floor-3d-onboarding-step { border: 1px solid #dce5ef; border-radius: 10px; background: rgba(248, 251, 255, 0.96); min-height: 40px; padding: 8px 10px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 9px; }
.mapro-floor-3d-onboarding-step .icon { position: relative; width: 28px; height: 28px; border-radius: 999px; background: rgba(220, 234, 250, 0.86); color: #1f4f7a; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; flex: 0 0 auto; }
.mapro-floor-3d-onboarding-step .text { font-size: 12px; line-height: 1.28; color: #223242; font-weight: 700; }
.mapro-floor-3d-onboarding-step .icon::after { content: ''; position: absolute; inset: -4px; border-radius: 999px; border: 1px solid rgba(65, 128, 183, 0.34); opacity: 0; animation: maproFloor3DOnboardingPulse 1.6s ease-out infinite; }
.mapro-floor-3d-onboarding-step.is-pan .icon { gap: 1px; font-size: 12px; }
.mapro-floor-3d-onboarding-step.is-pinch .icon::before,
.mapro-floor-3d-onboarding-step.is-floor .icon::before { content: ''; position: absolute; left: 5px; right: 5px; height: 2px; border-radius: 999px; background: rgba(46, 95, 138, 0.74); top: 50%; transform: translateY(-50%); animation: maproFloor3DOnboardingSlide 1.5s ease-in-out infinite; }
.mapro-floor-3d-onboarding-step.is-floor .icon::before { left: 6px; right: 6px; animation-duration: 1.8s; }
.mapro-floor-3d-onboarding-note { margin: 1px 0 0; text-align: center; font-size: 11px; line-height: 1.3; color: #5e6d7c; font-weight: 700; }
@keyframes maproFloor3DBootSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes maproFloor3DOnboardingPulse {
  0% { opacity: 0; transform: scale(0.72); }
  24% { opacity: 0.42; }
  70% { opacity: 0; transform: scale(1.16); }
  100% { opacity: 0; transform: scale(1.16); }
}
@keyframes maproFloor3DOnboardingSlide {
  0% { transform: translateY(-50%) translateX(-3px); opacity: 0.32; }
  50% { transform: translateY(-50%) translateX(3px); opacity: 0.92; }
  100% { transform: translateY(-50%) translateX(-3px); opacity: 0.32; }
}
.mapro-floor-3d-header { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 8px 10px; border-bottom: 0; background: transparent; }
.mapro-floor-3d-title { display: none; }
.mapro-floor-3d-actions { display: inline-flex; align-items: center; gap: 6px; }
.mapro-floor-3d-reset { border: 1px solid #c9d2dc; background: rgba(255,255,255,0.98); color: #2b3a49; border-radius: 8px; padding: 6px 10px; font-size: 12px; line-height: 1.2; font-weight: 700; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.mapro-floor-3d-reset:hover { background: #f4f7fa; border-color: #9fb0c1; }
.mapro-floor-3d-close { border: 0; background: transparent; color: #66707a; font-size: 22px; line-height: 1; cursor: pointer; min-width: 34px; min-height: 34px; border-radius: 8px; }
.mapro-floor-3d-close:hover { background: rgba(0,0,0,0.06); color: #1d2327; }
.mapro-floor-3d-guide { display: none !important; }
.mapro-floor-3d-guide-main { display: inline; }
.mapro-floor-3d-guide-legend { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; vertical-align: middle; }
.mapro-floor-3d-guide-legend .chip { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid rgba(24,33,42,0.2); padding: 1px 6px; font-size: 10px; line-height: 1.2; font-weight: 700; color: #213240; background: rgba(255,255,255,0.9); }
.mapro-floor-3d-guide-legend .chip.type-elevator { border-color: rgba(39,115,212,0.4); color: #1558a5; background: rgba(224,238,254,0.9); }
.mapro-floor-3d-guide-legend .chip.type-stairs { border-color: rgba(200,100,22,0.34); color: #914a11; background: rgba(255,237,220,0.9); }
.mapro-floor-3d-guide-legend .chip.type-escalator { border-color: rgba(24,161,116,0.36); color: #0e7b58; background: rgba(223,248,239,0.9); }
.mapro-floor-3d-jump { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid #d7dfe7; background: rgba(240,245,251,0.88); flex-wrap: wrap; }
.mapro-floor-3d-jump-label { font-size: 12px; line-height: 1.2; color: #2f3a45; font-weight: 700; white-space: nowrap; }
.mapro-floor-3d-pick-mode { display: inline-flex; align-items: center; border: 1px solid #c7d3df; border-radius: 8px; overflow: hidden; background: rgba(255,255,255,0.96); }
.mapro-floor-3d-pick-btn { border: 0; border-right: 1px solid #c7d3df; background: transparent; color: #2b3744; font-size: 11px; line-height: 1.2; font-weight: 700; padding: 6px 8px; cursor: pointer; white-space: nowrap; }
.mapro-floor-3d-pick-btn:last-child { border-right: 0; }
.mapro-floor-3d-pick-btn:hover { background: #f2f6fa; }
.mapro-floor-3d-pick-btn.is-active { background: #2271b1; color: #fff; }
.mapro-floor-3d-jump-select { min-width: 116px; max-width: 100%; border: 1px solid #c3cfdc; background: rgba(255,255,255,0.98); color: #1d2327; border-radius: 8px; padding: 6px 28px 6px 10px; font-size: 12px; line-height: 1.2; font-weight: 600; }
.mapro-floor-3d-jump-select:focus { outline: none; border-color: #2271b1; box-shadow: 0 0 0 2px rgba(34,113,177,0.24); }
.mapro-floor-3d-side-rail {
  position: absolute;
  left: max(8px, env(safe-area-inset-left));
  top: 50%;
  transform: translateY(-50%);
  z-index: 642;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: auto;
}
.mapro-floor-3d-side-btn {
  min-width: 46px;
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.72);
  background: rgba(90, 102, 118, 0.88);
  color: rgba(255,255,255,0.98);
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
.mapro-floor-3d-side-btn:hover {
  transform: translateX(2px);
  background: rgba(105, 118, 136, 0.94);
}
.mapro-floor-3d-side-btn.is-active {
  background: rgba(245, 158, 11, 0.96);
  border-color: rgba(255, 235, 194, 0.96);
  color: #3f2205;
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.38), 0 6px 14px rgba(64, 36, 8, 0.24);
}
.mapro-floor-3d-side-btn.is-current-floor {
  border-color: rgba(255,255,255,0.96);
}
.mapro-floor-3d-scene-wrap { flex: 1; overflow: hidden; padding: 10px 12px 14px; background: var(--mapro-map-bg); -webkit-overflow-scrolling: touch; cursor: grab; user-select: none; touch-action: none; }
.mapro-floor-3d-scene-wrap.is-dragging { cursor: grabbing; }
.mapro-floor-3d-scene { position: relative; min-height: 320px; height: 100%; border: 1px solid rgba(84,101,119,0.22); border-radius: 12px; overflow: hidden; background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.28) 0%, rgba(240,240,240,1) 64%, rgba(229,229,229,1) 100%); perspective: 1480px; perspective-origin: 50% 38%; }
.mapro-floor-3d-scene::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,0.14) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.14) 1px, transparent 1px); background-size: 24px 24px; opacity: 0.26; }
.mapro-floor-3d-world { position: absolute; inset: 0; left: 50%; top: 50%; transform-style: preserve-3d; pointer-events: none; will-change: transform; transition: transform 200ms cubic-bezier(.2,.72,.2,1); }
.mapro-floor-3d-scene-wrap.is-dragging .mapro-floor-3d-world { transition: none; }
.mapro-floor-3d-level-anchor { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; pointer-events: none; }
.mapro-floor-3d-level-anchor.is-separating { transition: transform .62s cubic-bezier(.16,.78,.2,1); }
.mapro-floor-3d-level { pointer-events: auto; position: absolute; left: 50%; top: 50%; width: var(--plane-width, 420px); height: var(--plane-height, 260px); transform: translate3d(-50%, -50%, 0) rotateX(90deg); border: 1px solid rgba(38,52,67,0.42); background: rgba(245,248,252,0.96); border-radius: 10px; box-shadow: 0 10px 26px rgba(9,20,31,0.34), 0 2px 8px rgba(9,20,31,0.24); overflow: hidden; cursor: pointer; padding: 0; line-height: 1; backface-visibility: visible; -webkit-backface-visibility: visible; transition: opacity .22s ease, filter .22s ease, border-color .2s ease, box-shadow .2s ease; }
.mapro-floor-3d-level:hover { border-color: rgba(34,113,177,0.72); box-shadow: 0 14px 30px rgba(13,26,39,0.38), 0 0 0 2px rgba(34,113,177,0.18); }
.mapro-floor-3d-level.is-active { border-color: #2271b1; box-shadow: 0 14px 34px rgba(16,32,49,0.45), 0 0 0 2px rgba(34,113,177,0.34); }
.mapro-floor-3d-level.is-focused { opacity: 1; filter: saturate(1.08) brightness(1.02); border-color: rgba(34,113,177,0.9); box-shadow: 0 18px 38px rgba(16,32,49,0.52), 0 0 0 2px rgba(34,113,177,0.44); }
.mapro-floor-3d-level.is-focused { transform: translate3d(-50%, -50%, 26px) rotateX(90deg); }
.mapro-floor-3d-level.is-faded { opacity: 1; filter: none; background: rgba(245,248,252,var(--mapro-faded-floor-frame-opacity,0.26)); border-color: rgba(38,52,67,var(--mapro-faded-floor-frame-opacity,0.26)); box-shadow: 0 4px 12px rgba(9,20,31,calc(var(--mapro-faded-floor-frame-opacity,0.26) * 0.5)); }
.mapro-floor-3d-level.is-faded .mapro-floor-3d-thumb { opacity: var(--mapro-faded-floor-thumb-opacity,0.24); filter: blur(1.6px) saturate(0.62) brightness(0.85); }
.mapro-floor-3d-level.is-faded .mapro-floor-3d-point { opacity: 0.12; }
.mapro-floor-3d-level.is-faded .mapro-floor-3d-point.is-start,
.mapro-floor-3d-level.is-faded .mapro-floor-3d-point.is-goal { opacity: 0.92; }
.mapro-floor-3d-level.is-faded .mapro-floor-3d-point-label { opacity: 0.16; }
.mapro-floor-3d-level.is-faded .mapro-floor-3d-point-label.is-start,
.mapro-floor-3d-level.is-faded .mapro-floor-3d-point-label.is-goal { opacity: 0.9; }
.mapro-floor-3d-level.is-faded .mapro-floor-3d-annotation { opacity: 0.14; }
.mapro-floor-3d-level.is-faded .mapro-floor-3d-annotation.is-on-route { opacity: 0.9; }
.mapro-floor-3d-level.is-faded .mapro-floor-3d-route-overlay { opacity: 1; }
.mapro-floor-3d-level.is-commit { animation: mapro-floor-3d-commit .24s ease; border-color: rgba(34,113,177,0.95); box-shadow: 0 18px 42px rgba(16,32,49,0.58), 0 0 0 3px rgba(34,113,177,0.48); }
.mapro-floor-3d-level.has-route { box-shadow: 0 12px 30px rgba(10,24,38,0.42), 0 0 0 1px rgba(255,83,83,0.24); }
/* 3D viewer-only mode: disable scene element click/tap interactions */
.mapro-floor-3d-panel.is-viewer-only .mapro-floor-3d-level,
.mapro-floor-3d-panel.is-viewer-only .mapro-floor-3d-point,
.mapro-floor-3d-panel.is-viewer-only .mapro-floor-3d-annotation,
.mapro-floor-3d-panel.is-viewer-only .mapro-floor-3d-media {
  pointer-events: none !important;
  cursor: default !important;
}
.mapro-floor-3d-point-layer { position: absolute; inset: 0; pointer-events: none; z-index: 18; transform-style: preserve-3d; }
.mapro-floor-3d-point {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  --mapro-floor-3d-point-lift: 6px;
  --mapro-floor-3d-point-core-color: var(--mapro-point-color, rgba(31, 191, 0, 0.96));
  --mapro-floor-3d-point-glow-color: rgba(31, 191, 0, 0.52);
  --mapro-floor-3d-point-stem-color: rgba(156, 183, 141, 0.88);
  --mapro-3d-point-shape-transform: rotate(0deg);
  --mapro-3d-point-transform-base:
    translate(-50%, -50%)
    translate3d(0, 0, var(--mapro-floor-3d-point-lift, 6px))
    rotateY(calc(-1 * var(--mapro-floor-3d-yaw, 0deg)))
    rotateX(var(--mapro-floor-3d-pitch, 0deg))
    var(--mapro-3d-point-shape-transform);
  transform: var(--mapro-3d-point-transform-base);
  transform-style: preserve-3d;
  border: 2px solid rgba(255,255,255,0.95);
  background: var(--mapro-floor-3d-point-core-color);
  box-shadow: 0 0 0 2px var(--mapro-floor-3d-point-glow-color), 0 1px 5px rgba(0,0,0,0.26);
  cursor: pointer;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform-origin: 50% 50%;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
  overflow: visible;
  animation: maproPointIdlePulse3d 0.95s ease-in-out infinite;
}
.mapro-floor-3d-point-stem {
  position: absolute;
  left: 50%;
  top: calc(100% - 1px);
  width: 3px;
  height: calc(var(--mapro-floor-3d-point-lift, 6px) + 2px);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(250, 252, 255, 0.96) 0%, var(--mapro-floor-3d-point-stem-color) 100%);
  border: 1px solid rgba(17, 31, 46, 0.16);
  box-shadow: 0 1px 5px rgba(10, 22, 34, 0.24);
  transform: translateX(-50%) translate3d(0, 0, calc(var(--mapro-floor-3d-point-lift, 6px) * -1));
  transform-origin: top center;
  pointer-events: none;
  z-index: -1;
}
.mapro-floor-3d-point-label {
  position: absolute;
  max-width: 184px;
  min-height: 20px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(20, 36, 54, 0.48);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(240, 249, 236, 0.96) 100%);
  color: #11263a;
  font-size: calc(10.5px * var(--mapro-font-scale));
  line-height: 1.25;
  font-weight: 900;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  z-index: 24;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
  transform-style: preserve-3d;
  transform-origin: 50% 108%;
  transform:
    translate(-50%, -168%)
    translate3d(0, -2px, var(--mapro-floor-3d-label-lift, 30px))
    rotateX(-90deg)
    rotateY(calc(-1 * var(--mapro-floor-3d-yaw, 0deg)))
    rotateX(var(--mapro-floor-3d-pitch, 0deg));
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72), 0 1px 4px rgba(11, 27, 42, 0.22);
  box-shadow: 0 6px 16px rgba(9, 24, 38, 0.34);
}
.mapro-floor-3d-point-label::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  width: 3px;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(235, 244, 232, 0.94) 0%, rgba(126, 153, 116, 0.82) 100%);
  border: 1px solid rgba(16, 34, 51, 0.2);
  box-shadow: 0 2px 5px rgba(7, 18, 30, 0.24);
  transform: translate(-50%, -1px);
}
.mapro-floor-3d-point-label::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(15, 31, 46, 0.18);
  transform: translate3d(0, 3px, -8px);
  filter: blur(1px);
  z-index: -1;
  pointer-events: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.mapro-floor-3d-point-label.is-start,
.mapro-floor-3d-point-label.is-goal {
  border-color: rgba(31, 191, 0, 0.58);
  background: rgba(233, 255, 227, 0.98);
  color: #1c4f12;
  box-shadow: 0 0 0 1px rgba(31,191,0,0.24), 0 3px 10px rgba(10,20,32,0.24);
}
.mapro-floor-3d-point:hover { transform: var(--mapro-3d-point-transform-base) scale(1.14); }
.mapro-floor-3d-point.is-start,
.mapro-floor-3d-point.is-goal {
  width: 16px;
  height: 16px;
  background: rgba(228, 55, 55, 0.98);
  box-shadow: 0 0 0 2px rgba(228,55,55,0.34), 0 0 10px rgba(228,55,55,0.48);
  animation: maproRouteEndpointPulse3d 1.2s ease-in-out infinite;
}
.mapro-floor-3d-point.is-evac-exit { width: 16px; height: 16px; background: rgba(20,172,92,0.98); box-shadow: 0 0 0 3px rgba(20,172,92,0.28), 0 1px 6px rgba(0,0,0,0.32); }
.mapro-floor-3d-point-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
  text-shadow: 0 1px 2px rgba(0,0,0,0.28);
  opacity: 0;
}
.mapro-floor-3d-point-symbol i { font-size: 14px; line-height: 1; }
.mapro-floor-3d-point.is-start .mapro-floor-3d-point-symbol,
.mapro-floor-3d-point.is-goal .mapro-floor-3d-point-symbol { opacity: 1; }
.mapro-floor-3d-media {
  position: absolute;
  width: 62px;
  height: 42px;
  border: 1px solid rgba(33, 47, 62, 0.3);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255,255,255,0.94);
  box-shadow: 0 8px 16px rgba(8, 18, 28, 0.38);
  transform: translate(-50%, calc(-100% - 10px)) rotateX(-90deg);
  transform-origin: 50% 100%;
  cursor: pointer;
  pointer-events: auto;
  z-index: 19;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
}
.mapro-floor-3d-media.is-panorama {
  width: 78px;
  height: 34px;
  border-color: rgba(17, 83, 138, 0.42);
  box-shadow: 0 10px 20px rgba(8, 18, 28, 0.42), 0 0 0 1px rgba(255,255,255,0.28) inset;
  transform: translate(-50%, calc(-100% - 12px)) rotateX(-88deg);
}
.mapro-floor-3d-media.is-annotation {
  width: 54px;
  height: 36px;
  transform: translate(-50%, calc(-100% - 14px)) rotateX(-90deg);
}
.mapro-floor-3d-media.is-annotation.is-panorama {
  width: 68px;
  height: 30px;
  transform: translate(-50%, calc(-100% - 15px)) rotateX(-88deg);
}
.mapro-floor-3d-media:hover {
  filter: saturate(1.1);
}
.mapro-floor-3d-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mapro-floor-3d-level.is-faded .mapro-floor-3d-media {
  opacity: 0.14;
  pointer-events: none;
}
.leaflet-image-layer.mapro-map-image--mono { filter: grayscale(1) contrast(1.08) brightness(1.02) !important; transition: filter .22s ease; }
.mapro-map-shell.is-map-mono .mapro-floor-3d-level.has-preview .mapro-floor-3d-thumb { filter: grayscale(1) contrast(1.08) brightness(1.02); }
.mapro-map-shell.is-map-mono .mapro-floor-3d-level.is-faded .mapro-floor-3d-thumb { filter: grayscale(1) blur(1.6px) saturate(0.62) brightness(0.85); }
.mapro-floor-3d-annotation-layer { position: absolute; inset: 0; pointer-events: none; z-index: 12; }
.mapro-floor-3d-annotation { position: absolute; width: 20px; height: 20px; --mapro-3d-ann-transform-base: translate(-50%, -50%); transform: translate(-50%, -50%); border-radius: 999px; border: 1px solid rgba(255,255,255,0.95); background: rgba(255,255,255,0.92); box-shadow: 0 0 0 2px rgba(38,55,74,0.18), 0 1px 5px rgba(0,0,0,0.24); cursor: pointer; pointer-events: auto; font-size: 12px; line-height: 18px; text-align: center; transform-origin: 50% 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.mapro-floor-3d-annotation:hover { transform: var(--mapro-3d-ann-transform-base) scale(1.12); }
.mapro-floor-3d-annotation.is-on-route { animation: maproRouteAnnGlow3d 1.15s ease-in-out infinite; box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.55), 0 0 16px rgba(255, 153, 0, 0.85); }
.mapro-ann-icon,
.mapro-floor-3d-annotation { overflow: visible !important; }
.mapro-route-ann-callout {
  position: absolute;
  min-width: 54px;
  max-width: 148px;
  padding: 3px 6px;
  border-radius: 7px;
  border: 1px solid rgba(21, 36, 51, 0.24);
  background: rgba(255, 255, 255, 0.96);
  color: #1f2f3f;
  font-size: calc(10px * var(--mapro-font-scale));
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 4px 12px rgba(8, 19, 30, 0.22);
  z-index: 26;
  transition: opacity .22s ease, transform .22s ease;
}
.mapro-route-ann-callout::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 5px solid transparent;
}
.mapro-route-ann-callout[data-pos="top"] {
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translate(-50%, 4px) scale(0.92);
}
.mapro-route-ann-callout[data-pos="top"]::after {
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border-top-color: rgba(255, 255, 255, 0.96);
}
.mapro-route-ann-callout[data-pos="right"] {
  left: calc(100% + 8px);
  top: 50%;
  transform: translate(-4px, -50%) scale(0.92);
}
.mapro-route-ann-callout[data-pos="right"]::after {
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  border-right-color: rgba(255, 255, 255, 0.96);
}
.mapro-route-ann-callout[data-pos="bottom"] {
  left: 50%;
  top: calc(100% + 8px);
  transform: translate(-50%, -4px) scale(0.92);
}
.mapro-route-ann-callout[data-pos="bottom"]::after {
  left: 50%;
  top: -10px;
  transform: translateX(-50%);
  border-bottom-color: rgba(255, 255, 255, 0.96);
}
.mapro-route-ann-callout[data-pos="left"] {
  right: calc(100% + 8px);
  top: 50%;
  transform: translate(4px, -50%) scale(0.92);
}
.mapro-route-ann-callout[data-pos="left"]::after {
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  border-left-color: rgba(255, 255, 255, 0.96);
}
.mapro-route-ann-callout.is-visible[data-pos="top"] {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}
.mapro-route-ann-callout.is-visible[data-pos="right"] {
  opacity: 1;
  transform: translate(0, -50%) scale(1);
}
.mapro-route-ann-callout.is-visible[data-pos="bottom"] {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}
.mapro-route-ann-callout.is-visible[data-pos="left"] {
  opacity: 1;
  transform: translate(0, -50%) scale(1);
}
.mapro-route-ann-callout.is-visible:not([data-pos]) {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}
.mapro-floor-3d-route-overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 10; transform: translate3d(0, 0, var(--mapro-floor-3d-route-lift, 0px)); transform-origin: 50% 50%; }
.mapro-floor-3d-all-route-overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 8; }
.mapro-floor-3d-all-route-line { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 1.6px rgba(255,255,255,0.92)) drop-shadow(0 0 4px rgba(255,255,255,0.46)); }
.mapro-floor-3d-all-route-line.is-passable { stroke: rgba(168, 255, 149, 0.86); stroke-width: 4.8; }
.mapro-floor-3d-all-route-line.is-warning { stroke: rgba(253, 186, 116, 0.9); stroke-width: 5; stroke-dasharray: 8 6; }
.mapro-floor-3d-all-route-line.is-blocked { stroke: rgba(255, 154, 154, 0.95); stroke-width: 5.2; stroke-dasharray: 10 7; }
.mapro-floor-3d-route-line { stroke: rgba(239,36,36,0.84); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; fill: none; filter: drop-shadow(0 0 4px rgba(200,16,16,0.66)); animation: maproRouteLinePulse3d 1.2s ease-in-out infinite; }
.mapro-floor-3d-route-line.is-caution-route { stroke: rgba(245, 158, 11, 0.98); filter: drop-shadow(0 0 7px rgba(245, 158, 11, 0.72)); }
.mapro-floor-3d-route-line.is-fallback { stroke-width: 5; stroke-dasharray: 14 8; stroke: rgba(245,73,73,0.96); }
.mapro-floor-3d-route-line.is-cart-blocked { stroke: rgba(245, 158, 11, 0.98); stroke-width: 6.2; filter: drop-shadow(0 0 7px rgba(245, 158, 11, 0.9)); }
.mapro-floor-3d-route-line.is-cart-caution { stroke: rgba(245, 158, 11, 0.96); stroke-width: 6; stroke-dasharray: 18 9; filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.72)); }
.mapro-floor-3d-route-overlay.is-rise { animation: maproRoutePlaneRise .62s cubic-bezier(.2,.74,.2,1); transform-origin: 50% 50%; }
.mapro-floor-3d-route-line.is-flow { stroke-dasharray: 1; stroke-dashoffset: 1; animation: maproRouteStrokeFlow var(--mapro-route-duration,.34s) linear forwards, maproRouteLinePulse3d 1.2s ease-in-out infinite; animation-delay: var(--mapro-route-delay,0s), 0s; }
.mapro-floor-3d-route-line.is-fallback.is-flow { stroke-dasharray: 1; }
.mapro-floor-3d-route-node { stroke: rgba(255,255,255,0.96); stroke-width: 4; filter: drop-shadow(0 0 4px rgba(10,20,30,0.34)); }
.mapro-floor-3d-route-node.is-start { fill: rgba(235,55,55,0.98); }
.mapro-floor-3d-route-node.is-end { fill: rgba(235,55,55,0.98); }
.mapro-floor-3d-route-node.is-transition { fill: rgba(58,140,240,0.96); stroke: rgba(229,244,255,0.95); stroke-width: 5; }
.mapro-floor-3d-thumb { position: absolute; inset: 0; background-image: linear-gradient(160deg, #d8e2ec 0%, #f2f6fa 100%); background-size: contain; background-position: center; background-repeat: no-repeat; }
.mapro-floor-3d-level.has-preview .mapro-floor-3d-thumb { filter: saturate(1.02) contrast(1.05); }
.mapro-floor-3d-connector-layer { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.mapro-floor-3d-connector { position: absolute; left: 50%; top: 50%; width: 10px; margin-left: -5px; border-radius: 999px; transform-style: preserve-3d; pointer-events: none; }
.mapro-floor-3d-connector.type-stairs { width: 12px; margin-left: -6px; }
.mapro-floor-3d-connector::before,
.mapro-floor-3d-connector::after { content: ''; position: absolute; left: 50%; top: 0; height: 100%; border-radius: 999px; transform-origin: center center; }
.mapro-floor-3d-connector::before { width: 4px; transform: translateX(-50%); }
.mapro-floor-3d-connector::after { width: 4px; transform: translateX(-50%) rotateY(90deg); opacity: 0.34; }
.mapro-floor-3d-connector.type-elevator::before,
.mapro-floor-3d-connector.type-elevator::after { background: linear-gradient(180deg, rgba(55,128,221,0.95) 0%, rgba(118,170,236,0.86) 100%); box-shadow: 0 0 10px rgba(39,115,212,0.48); }
.mapro-floor-3d-connector.type-stairs::before,
.mapro-floor-3d-connector.type-stairs::after {
  background: linear-gradient(180deg, rgba(252, 253, 254, 0.98) 0%, rgba(194, 201, 210, 0.94) 55%, rgba(122, 131, 142, 0.96) 100%);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 0 1px rgba(18, 24, 31, 0.24);
}
.mapro-floor-3d-connector.type-escalator::before,
.mapro-floor-3d-connector.type-escalator::after { background: linear-gradient(180deg, rgba(24,161,116,0.95) 0%, rgba(104,213,178,0.86) 100%); box-shadow: 0 0 10px rgba(24,161,116,0.42); }
.mapro-floor-3d-connector-overshoot {
  position: absolute;
  left: 50%;
  top: -11px;
  width: 20px;
  height: 8px;
  transform: translate3d(-50%, 0, 10px) rotateY(-24deg);
  transform-style: preserve-3d;
  display: block;
  pointer-events: none;
  z-index: 2;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.56);
  background:
    repeating-linear-gradient(
      180deg,
      rgba(245, 248, 252, 0.96) 0,
      rgba(245, 248, 252, 0.96) 2px,
      rgba(162, 170, 181, 0.92) 2px,
      rgba(162, 170, 181, 0.92) 4px
    );
  box-shadow: 0 0 0 1px rgba(18, 24, 31, 0.26);
}
.mapro-floor-3d-connector-overshoot-step {
  display: block;
  height: 4px;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(190, 197, 207, 0.94) 62%, rgba(56, 64, 74, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 0 1px rgba(13, 19, 25, 0.48), 0 1px 0 rgba(255,255,255,0.28);
  transform: translateZ(3px);
}
.mapro-floor-3d-connector-overshoot.is-simple .mapro-floor-3d-connector-overshoot-step { display: none; }
.mapro-floor-3d-connector-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  transform:
    translate(-50%, -50%)
    translate3d(0, -2px, var(--mapro-floor-3d-label-lift, 30px))
    rotateX(90deg)
    rotateY(calc(-1 * var(--mapro-floor-3d-yaw, 0deg)))
    rotateX(var(--mapro-floor-3d-label-pitch, 24deg));
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid rgba(18, 26, 36, 0.55);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(231, 236, 243, 0.96) 100%);
  color: #1c2733;
  font-size: 10px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  box-shadow: 0 4px 10px rgba(8, 14, 20, 0.28), 0 0 0 1px rgba(255,255,255,0.18) inset;
  white-space: pre-line;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
}
.mapro-floor-3d-connector-label.is-static {
  /* Stair labels: follow camera view direction like other labels. */
  transform:
    translate(-50%, -50%)
    translate3d(0, -2px, var(--mapro-floor-3d-label-lift, 28px))
    rotateX(90deg)
    rotateY(calc(-1 * var(--mapro-floor-3d-yaw, 0deg)))
    rotateX(var(--mapro-floor-3d-label-pitch, 24deg));
}
.mapro-floor-3d-connector-staircase {
  position: absolute;
  left: 50%;
  top: 6px;
  width: 26px;
  height: calc(100% - 12px);
  transform: translateX(-50%) rotateY(-28deg) translateZ(2px);
  transform-style: preserve-3d;
  display: block;
  pointer-events: none;
  z-index: 1;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.54);
  background:
    repeating-linear-gradient(
      180deg,
      rgba(247, 250, 253, 0.98) 0,
      rgba(247, 250, 253, 0.98) 4px,
      rgba(168, 176, 186, 0.95) 4px,
      rgba(168, 176, 186, 0.95) 8px
    );
  box-shadow: 0 0 0 1px rgba(19, 26, 34, 0.25);
}
.mapro-floor-3d-connector-staircase::before,
.mapro-floor-3d-connector-staircase::after {
  content: '';
  position: absolute;
  top: 2px;
  bottom: 2px;
  width: 2px;
  border-radius: 2px;
  background: rgba(92, 102, 113, 0.92);
  transform: translateZ(3px);
}
.mapro-floor-3d-connector-staircase::before { left: 2px; }
.mapro-floor-3d-connector-staircase::after { right: 2px; }
.mapro-floor-3d-connector-stair-step {
  position: relative;
  display: block;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(186, 194, 205, 0.94) 60%, rgba(58, 66, 77, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.58);
  box-shadow: 0 0 0 1px rgba(12, 18, 24, 0.5), 0 1px 0 rgba(255,255,255,0.26);
  transform: translateZ(6px);
}
.mapro-floor-3d-connector-stair-step::before {
  content: '';
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: -3px;
  height: 3px;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(180deg, rgba(84, 94, 106, 0.95) 0%, rgba(28, 35, 43, 0.98) 100%);
}
.mapro-floor-3d-connector-stair-landing {
  display: block;
  width: 26px;
  height: 6px;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(193,201,211,0.92) 62%, rgba(60,68,79,0.98) 100%);
  border: 1px solid rgba(255,255,255,0.56);
  box-shadow: 0 0 0 1px rgba(12, 18, 25, 0.48);
  transform: translateZ(7px);
}
.mapro-floor-3d-connector-stair-landing.is-top { margin-bottom: 2px; }
.mapro-floor-3d-connector-stair-landing.is-bottom { margin-top: 2px; }
.mapro-floor-3d-connector.type-stairs .mapro-floor-3d-connector-label { z-index: 2; }
.mapro-floor-3d-connector-staircase.is-simple .mapro-floor-3d-connector-stair-step,
.mapro-floor-3d-connector-staircase.is-simple .mapro-floor-3d-connector-stair-landing { display: none; }
.mapro-floor-3d-route-vertical-layer { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.mapro-floor-3d-route-vertical { position: absolute; left: 50%; top: 50%; width: 6px; margin-left: -3px; border-radius: 999px; transform-style: preserve-3d; pointer-events: none; }
.mapro-floor-3d-route-vertical.is-flow { opacity: 0; animation: maproRouteVerticalFade var(--mapro-route-duration,.34s) ease-out var(--mapro-route-delay,0s) both; }
.mapro-floor-3d-route-vertical.is-flow::before { transform-origin: 50% 0; animation: maproRouteVerticalRiseFront var(--mapro-route-duration,.34s) cubic-bezier(.2,.74,.2,1) var(--mapro-route-delay,0s) both; }
.mapro-floor-3d-route-vertical.is-flow::after { transform-origin: 50% 0; animation: maproRouteVerticalRiseSide var(--mapro-route-duration,.34s) cubic-bezier(.2,.74,.2,1) var(--mapro-route-delay,0s) both; }
.mapro-floor-3d-route-vertical::before,
.mapro-floor-3d-route-vertical::after { content: ''; position: absolute; left: 50%; top: 0; height: 100%; border-radius: 999px; background: linear-gradient(180deg, rgba(237,52,52,0.98) 0%, rgba(255,108,108,0.92) 100%); box-shadow: 0 0 10px rgba(237,52,52,0.58); }
.mapro-floor-3d-route-vertical.is-cart-blocked::before,
.mapro-floor-3d-route-vertical.is-cart-blocked::after { background: linear-gradient(180deg, rgba(245, 158, 11, 0.98) 0%, rgba(253, 186, 116, 0.92) 100%); box-shadow: 0 0 12px rgba(245, 158, 11, 0.72); }
.mapro-floor-3d-route-vertical.is-cart-caution::before,
.mapro-floor-3d-route-vertical.is-cart-caution::after { background: linear-gradient(180deg, rgba(245, 158, 11, 0.94) 0%, rgba(251, 191, 36, 0.86) 100%); box-shadow: 0 0 8px rgba(245, 158, 11, 0.54); }
.mapro-floor-3d-route-vertical.is-caution-route::before,
.mapro-floor-3d-route-vertical.is-caution-route::after { background: linear-gradient(180deg, rgba(245, 158, 11, 0.96) 0%, rgba(253, 186, 116, 0.9) 100%); box-shadow: 0 0 10px rgba(245, 158, 11, 0.62); }
.mapro-floor-3d-route-vertical::before { width: 3px; transform: translateX(-50%); }
.mapro-floor-3d-route-vertical::after { width: 3px; transform: translateX(-50%) rotateY(90deg); opacity: 0.36; }
.mapro-floor-3d-empty { padding: 20px; text-align: center; color: #5f6b76; font-weight: 600; }
@keyframes mapro-floor-3d-launch {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.985); }
}
@keyframes mapro-floor-3d-commit {
  0% { filter: saturate(1.08) brightness(1.02); }
  50% { filter: saturate(1.24) brightness(1.12); }
  100% { filter: saturate(1.08) brightness(1.02); }
}
@keyframes maproRoutePlaneRise {
  0% { opacity: 0; transform: translate3d(0, 18px, var(--mapro-floor-3d-route-lift, 0px)) scale(0.97); filter: saturate(0.86); }
  100% { opacity: 1; transform: translate3d(0, 0, var(--mapro-floor-3d-route-lift, 0px)) scale(1); filter: saturate(1); }
}
@keyframes maproRouteStrokeDraw {
  0% { stroke-dashoffset: 2100; }
  100% { stroke-dashoffset: 0; }
}
@keyframes maproRouteStrokeFlow {
  0% { stroke-dashoffset: 1; }
  100% { stroke-dashoffset: 0; }
}
@keyframes maproRouteVerticalFade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes maproRouteVerticalRiseFront {
  0% { opacity: 0; transform: translateX(-50%) scaleY(0.2); }
  100% { opacity: 1; transform: translateX(-50%) scaleY(1); }
}
@keyframes maproRouteVerticalRiseSide {
  0% { opacity: 0; transform: translateX(-50%) rotateY(90deg) scaleY(0.2); }
  100% { opacity: 1; transform: translateX(-50%) rotateY(90deg) scaleY(1); }
}
.mapro-map-shell.is-floor-3d-topview .mapro-floor-3d-level { pointer-events: auto; }
.mapro-map-shell.is-floor-3d-topview .mapro-floor-3d-level.is-faded .mapro-floor-3d-point,
.mapro-map-shell.is-floor-3d-topview .mapro-floor-3d-level.is-faded .mapro-floor-3d-annotation { pointer-events: none; }
@keyframes mapro-mode-switch-3d {
  0% { opacity: 0; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes mapro-map-to-3d {
  0% { opacity: 1; filter: saturate(1); }
  100% { opacity: 0.08; filter: saturate(1.08); }
}
@keyframes mapro-mode-switch-2d {
  0% { opacity: 0; transform: scale(1.02); }
  32% { opacity: 0.9; transform: scale(1.01); }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes mapro-map-to-2d {
  0% { opacity: 0.08; filter: saturate(1.08); }
  100% { opacity: 1; filter: saturate(1); }
}
@keyframes mapro2dGhostTo3d {
  0% { opacity: 1; transform: perspective(1400px) rotateX(0deg) rotateY(0deg) scale(1); filter: saturate(1); }
  100% { opacity: 0; transform: perspective(1400px) rotateX(16deg) rotateY(-10deg) scale(0.96); filter: saturate(1.12); }
}
.mapro-map-shell.is-mode-switching-3d::after { animation: mapro-mode-switch-3d .46s ease; }
.mapro-map-shell.is-mode-switching-3d .mapro-map { animation: mapro-map-to-3d .46s cubic-bezier(.2,.72,.22,1); transform-origin: 50% 55%; }
.mapro-map-shell.is-mode-switching-2d::after { animation: mapro-mode-switch-2d .46s ease; }
.mapro-map-shell.is-mode-switching-2d .mapro-map { animation: mapro-map-to-2d .46s cubic-bezier(.2,.72,.22,1); transform-origin: 50% 55%; }
.mapro-map-shell.is-view-switch-fade::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 664; background: radial-gradient(circle at 50% 52%, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 68%); animation: mapro-view-switch-fade .22s ease both; }
@keyframes mapro-view-switch-fade {
  0% { opacity: 0; }
  35% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes mapro-scene-from-2d {
  0% { opacity: 0.12; transform: perspective(1200px) rotateX(0deg) rotateY(0deg) scale(0.985); filter: saturate(0.9); }
  100% { opacity: 1; transform: perspective(1200px) rotateX(0deg) rotateY(0deg) scale(1); filter: saturate(1); }
}
.mapro-map-shell.is-mode-switching-3d .mapro-floor-3d-scene { animation: mapro-scene-from-2d .42s cubic-bezier(.2,.74,.22,1); transform-origin: 50% 55%; }
.mapro-map-shell.is-3d-open .mapro-overlay-floor { z-index: 660; }
.mapro-map-shell.is-3d-open .mapro-zoom-group { display: inline-flex !important; }
@keyframes maproFloorStackIn { from { opacity: 0; transform: translate(-50%, -48%) scale(0.96); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.mapro-tools-row { display: flex; align-items: center; gap: 6px; padding: 5px; border-radius: 10px; border: 1px solid var(--mapro-ui-border); background: var(--mapro-ui-panel); backdrop-filter: blur(2px); box-shadow: 0 2px 8px rgba(0,0,0,0.08); pointer-events: auto; }
.mapro-view-mode-toggle { display: inline-flex; align-items: center; gap: 4px; }
.mapro-view-subgroup { display: inline-flex; align-items: center; border: 1px solid var(--mapro-ui-border); border-radius: 9px; overflow: hidden; background: var(--mapro-ui-panel-strong); }
.mapro-view-mode-btn { min-width: 44px; height: 34px; border: 0; border-right: 1px solid var(--mapro-ui-border); background: transparent; color: #2a323a; font-size: 13px; font-weight: 700; cursor: pointer; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.mapro-view-subgroup .mapro-view-mode-btn:last-child { border-right: 0; }
.mapro-view-mode-btn:hover { background: #f4f6f8; }
.mapro-view-mode-btn.is-active { background: #2271b1; color: #fff; }
.mapro-fontsize-group { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--mapro-ui-border); border-radius: 9px; padding: 0 8px; height: 34px; background: var(--mapro-ui-panel-strong); }
.mapro-fontsize-label { font-size: 11px; line-height: 1; color: #58616b; font-weight: 700; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.mapro-fontsize-select { min-width: 86px; height: 26px; border: 1px solid var(--mapro-ui-border); border-radius: 6px; background: #fff; color: #2a323a; font-size: 12px; font-weight: 700; padding: 0 26px 0 6px; }
.mapro-fontsize-select:focus { outline: none; border-color: #2271b1; box-shadow: 0 0 0 2px rgba(34,113,177,0.24); }
.mapro-overlay-bottom { left: 10px; right: 10px; width: auto; transform: none; bottom: max(16px, env(safe-area-inset-bottom)); display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 6px; flex-wrap: nowrap; overflow-x: auto; padding: 0 2px; pointer-events: auto; position: absolute; z-index: 720; }
.mapro-overlay-bottom::-webkit-scrollbar { height: 0; width: 0; }
.mapro-map-shell.is-side-controls .mapro-overlay-bottom { left: auto; right: 10px; top: 62px; bottom: 10px; width: min(360px, 34vw); flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 8px; overflow-x: hidden; overflow-y: auto; padding: 0; }
.mapro-map-shell.is-side-controls .mapro-overlay-bottom::-webkit-scrollbar { width: 6px; height: 6px; }
.mapro-map-shell.is-side-controls .mapro-overlay-bottom > * { width: 100%; max-width: 100%; }
.mapro-map-shell.is-side-controls .mapro-control-row { justify-content: flex-start; flex-wrap: wrap; }
.mapro-map-shell.is-side-controls .mapro-status { position: static; left: auto; bottom: auto; max-width: none; width: 100%; white-space: normal; }
.mapro-map-shell.is-side-controls .mapro-route-stats { width: 100%; flex-wrap: wrap; }
.mapro-map-shell.is-side-controls .mapro-route-stat { flex: 1 1 calc(50% - 1px); justify-content: center; border-right: 0; border-bottom: 1px solid rgba(148,163,184,0.3); }
.mapro-map-shell.is-side-controls .mapro-route-stat:nth-last-child(-n+2) { border-bottom: 0; }
.mapro-map-shell.is-side-controls .mapro-nav-bar { flex-direction: column; align-items: stretch; gap: 4px; }
.mapro-map-shell.is-side-controls .mapro-nav-item { flex: none; width: 100%; max-width: none; }
.mapro-map-shell.is-side-controls .mapro-nav-arrow { transform: rotate(90deg); align-self: center; padding: 1px 0; }
.mapro-map-shell.is-side-controls .mapro-share-inline { margin-left: 0; width: 100%; justify-content: flex-end; }
.mapro-control-row { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; pointer-events: auto; padding: 4px; border-radius: 10px; border: 1px solid var(--mapro-ui-border); background: var(--mapro-ui-panel); backdrop-filter: blur(2px); box-shadow: 0 2px 8px rgba(0,0,0,0.08); flex: 0 0 auto; }
.mapro-control { display: flex; flex-direction: column; gap: 1px; padding: 4px 6px; border-radius: 8px; border: 1px solid var(--mapro-ui-border); background: var(--mapro-ui-panel-strong); backdrop-filter: blur(2px); min-width: 104px; flex: 0 0 auto; }
.mapro-control-floor { pointer-events: auto; min-width: 118px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.mapro-ann-filter-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 4px; border: 1px solid var(--mapro-ui-border); background: var(--mapro-ui-panel-strong); border-radius: 8px; padding: 7px 9px; color: #2a323a; font-size: 12px; line-height: 1; font-weight: 700; cursor: pointer; white-space: nowrap; }
.mapro-ann-filter-toggle i { font-size: 12px; line-height: 1; }
.mapro-ann-filter-toggle:hover { background: #f4f6f8; }
.mapro-ann-filter-toggle.is-active { background: #2271b1; border-color: #1c5b8f; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); }
.mapro-ann-filter-panel { position: absolute; left: 10px; bottom: calc(76px + env(safe-area-inset-bottom)); width: min(270px, calc(100% - 20px)); max-height: min(56%, 340px); border: 1px solid rgba(255,255,255,0.5); border-radius: 12px; background: rgba(255,255,255,0.6); box-shadow: 0 16px 38px rgba(0,0,0,0.16); backdrop-filter: blur(6px); z-index: 736; overflow: hidden; pointer-events: auto; }
.mapro-ann-filter-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid #eceff2; background: rgba(255,255,255,0.96); }
.mapro-ann-filter-title { margin: 0; color: #1d2327; font-size: 13px; line-height: 1.2; }
.mapro-ann-filter-tools { display: inline-flex; align-items: center; gap: 4px; }
.mapro-ann-filter-action { border: 1px solid #d3dbe4; background: rgba(255,255,255,0.98); color: #344150; border-radius: 7px; padding: 4px 7px; font-size: 10px; line-height: 1; font-weight: 700; min-height: 26px; cursor: pointer; white-space: nowrap; }
.mapro-ann-filter-action:hover { background: #f2f6fa; border-color: #b5c5d6; color: #1f2f3f; }
.mapro-ann-filter-close { border: 0; background: transparent; color: #66707a; font-size: 22px; line-height: 1; cursor: pointer; min-width: 30px; min-height: 30px; border-radius: 8px; }
.mapro-ann-filter-close:hover { background: rgba(0,0,0,0.06); color: #1d2327; }
.mapro-ann-filter-list { padding: 8px 10px 10px; display: grid; gap: 6px; max-height: calc(min(56%, 340px) - 52px); overflow-y: auto; overflow-x: hidden; }
.mapro-ann-filter-item { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 8px; border: 1px solid #dbe2ea; border-radius: 8px; padding: 6px 8px; background: rgba(255,255,255,0.96); color: #2f3944; font-size: 12px; line-height: 1.2; font-weight: 700; cursor: pointer; user-select: none; }
.mapro-ann-filter-item:hover { border-color: #b7c7d8; background: #f8fbff; }
.mapro-ann-filter-item input { width: 15px; height: 15px; margin: 0; accent-color: #2271b1; cursor: pointer; }
.mapro-ann-filter-item .icon { font-size: 14px; line-height: 1; }
.mapro-ann-filter-item .icon .bi::before { font-size: 13px; line-height: 1; }
.mapro-ann-filter-item .text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mapro-ann-filter-empty { padding: 14px 8px; color: #5f6b76; font-size: 12px; text-align: center; }
.mapro-control-label { font-size: 10px; line-height: 1; color: #666; font-weight: 600; }
.mapro-mode-select,
.mapro-floor-select { padding: 4px 8px; font-size: 14px; min-width: 120px; border: 1px solid var(--mapro-ui-border); border-radius: 6px; background: #fff; min-height: 34px; }
.mapro-zoom-group { display: inline-flex; border: 1px solid var(--mapro-ui-border); border-radius: 8px; overflow: hidden; background: var(--mapro-ui-panel-strong); pointer-events: auto; margin-left: auto; }
.mapro-tools-row .mapro-zoom-group { margin-left: 0; }
.mapro-zoom-btn { width: 36px; height: 34px; border: 0; border-right: 1px solid var(--mapro-ui-border); background: transparent; cursor: pointer; font-size: 18px; line-height: 1; color: #333; display: inline-flex; align-items: center; justify-content: center; }
.mapro-zoom-btn:last-child { border-right: 0; }
.mapro-zoom-btn:hover { background: #f4f5f6; }
.mapro-zoom-btn:disabled { opacity: 0.5; cursor: default; }
.mapro-status { color:#222; font-size: 11px; line-height: 1.2; margin: 0; padding: 3px 6px; border-radius: 6px; background: rgba(255,255,255,0.86); width: fit-content; max-width: min(92vw, 460px); pointer-events: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: absolute; left: 2px; bottom: calc(100% + 4px); }
.mapro-status:empty { display: none; }
.mapro-route-stats { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--mapro-ui-border); border-radius: 8px; background: var(--mapro-ui-panel-strong); box-shadow: 0 2px 6px rgba(0,0,0,0.08); pointer-events: auto; flex: 0 0 auto; overflow: hidden; }
.mapro-route-stat { display: inline-flex; align-items: center; gap: 4px; padding: 5px 7px; border-right: 1px solid rgba(148,163,184,0.35); white-space: nowrap; color: #334155; }
.mapro-route-stat:last-child { border-right: 0; }
.mapro-route-stat i { color: #0f6ab7; font-size: 12px; }
.mapro-route-stat .value { font-size: 12px; line-height: 1; font-weight: 800; color: #1f2937; }
.mapro-route-stat .label { font-size: 10px; line-height: 1; font-weight: 700; color: #64748b; }
.mapro-fit-btn,
.mapro-fullscreen-btn { border: 1px solid var(--mapro-ui-border); background: var(--mapro-ui-panel-strong); border-radius: 8px; padding: 8px 12px; font-size: 13px; line-height: 1.2; cursor: pointer; white-space: nowrap; pointer-events: auto; display: inline-flex; align-items: center; gap: 5px; }
.mapro-fit-btn:hover,
.mapro-fullscreen-btn:hover { background: #f6f7f7; }
.mapro-btn-text { white-space: nowrap; }
.mapro-hazard-toggle { display: inline-flex; align-items: center; gap: 4px; border: 1px solid #148a55; background: rgba(20,172,92,0.96); color: #fff; border-radius: 8px; padding: 8px 10px; font-size: 12px; line-height: 1; font-weight: 800; cursor: pointer; white-space: nowrap; pointer-events: auto; }
.mapro-hazard-toggle .icon { font-size: 14px; line-height: 1; }
.mapro-hazard-toggle:hover { background: #18b264; border-color: #11814f; color: #fff; }
.mapro-hazard-toggle.is-active { background: #0f7a49; border-color: #0b6039; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16); }
.mapro-hazard-fab { position: absolute; left: 10px; right: auto; top: calc(58px + env(safe-area-inset-top)); bottom: auto; z-index: 646; border: 1px solid #d84d4d; border-radius: 999px; padding: 8px 12px; display: inline-flex; align-items: center; gap: 6px; color: #fff; background: linear-gradient(135deg, #e34d4f 0%, #c92f31 100%); box-shadow: 0 10px 22px rgba(201,47,49,0.32); cursor: pointer; pointer-events: auto; opacity: 0; transform: translateY(10px) scale(0.94); transition: opacity .22s ease, transform .22s ease; animation: maproHazardPulse 1.8s ease-in-out infinite; }
.mapro-hazard-fab .icon { font-size: 14px; line-height: 1; }
.mapro-hazard-fab .text { font-size: 12px; font-weight: 700; white-space: nowrap; }
.mapro-hazard-fab.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.mapro-hazard-fab[hidden] { display: none !important; }
.mapro-map-shell.is-side-controls .mapro-hazard-fab { left: 10px; right: auto; top: calc(58px + env(safe-area-inset-top)); bottom: auto; }
.mapro-map-shell.is-smartphone-layout .mapro-hazard-fab { left: 8px; right: auto; top: calc(54px + env(safe-area-inset-top)); bottom: auto; }
.mapro-hazard-modal { position: absolute; left: 10px; right: auto; top: calc(102px + env(safe-area-inset-top)); bottom: auto; width: min(420px, calc(100% - 20px)); max-height: min(68%, 540px); border-radius: 12px; border: 1px solid rgba(255,255,255,0.82); background: rgba(255,255,255,0.95); box-shadow: 0 16px 40px rgba(0,0,0,0.24); z-index: 736; overflow: hidden; display: none; flex-direction: column; pointer-events: auto; animation: maproHazardModalIn .2s ease-out; }
.mapro-map-shell.is-side-controls .mapro-hazard-modal { left: 10px; right: auto; top: calc(102px + env(safe-area-inset-top)); bottom: auto; }
.mapro-map-shell.is-side-controls .mapro-ann-filter-panel { left: auto; right: 10px; top: 62px; bottom: auto; width: min(330px, 34vw); max-height: min(52%, 460px); }
.mapro-map-shell.is-side-controls .mapro-ann-filter-list { max-height: calc(min(52%, 460px) - 52px); }
.mapro-hazard-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid #eceff2; background: #fff; }
.mapro-hazard-modal-title { margin: 0; color: #1d2327; font-size: 15px; line-height: 1.2; }
.mapro-hazard-close { border: 0; background: transparent; color: #66707a; font-size: 22px; line-height: 1; cursor: pointer; min-width: 32px; min-height: 32px; border-radius: 8px; }
.mapro-hazard-close:hover { background: rgba(0,0,0,0.06); color: #1d2327; }
.mapro-hazard-modal-content { padding: 12px 14px; overflow-y: auto; overflow-x: hidden; color: #27303a; }
.mapro-hazard-doc h4 { margin: 0 0 8px; font-size: 14px; line-height: 1.3; color: #c42b2d; }
.mapro-hazard-doc ul { margin: 0 0 10px 1.2em; padding: 0; display: grid; gap: 6px; }
.mapro-hazard-doc li { font-size: 13px; line-height: 1.45; }
.mapro-hazard-doc p { margin: 0; font-size: 12px; line-height: 1.45; color: #42505d; }
.mapro-fit-btn.is-active { background: #2271b1; border-color: #1c5b8f; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); }
.mapro-fit-btn:focus-visible,
.mapro-fullscreen-btn:focus-visible { outline: 2px solid #2271b1; outline-offset: 2px; }
.mapro-fit-btn:disabled,
.mapro-fullscreen-btn:disabled { opacity: 0.5; cursor: default; }
.mapro-note { margin-top: 8px; color: #777; font-size: 11px; text-align: center; }
.mapro-nav-bar { display: flex; align-items: center; background: rgba(255,255,255,0.6); border: 1px solid rgba(0,0,0,0.08); border-radius: 8px; padding: 4px; margin: 0; box-shadow: 0 2px 6px rgba(0,0,0,0.06); backdrop-filter: blur(4px); pointer-events: auto; flex: 0 0 auto; gap: 4px; min-width: 0; }
.mapro-nav-item { flex: 0 1 190px; min-width: 104px; max-width: 220px; padding: 4px 6px; cursor: pointer; border-radius: 8px; border: 1px solid rgba(0,0,0,0.12); background: rgba(255,255,255,0.92); backdrop-filter: blur(2px); transition: background 0.2s, border-color 0.2s; overflow: hidden; }
.mapro-nav-item:hover { background: #fff; border-color: rgba(0,0,0,0.2); }
.mapro-nav-item:active { background: #f0f0f0; }
.mapro-nav-item .label { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; line-height: 1; color: #666; font-weight: 600; white-space: nowrap; }
.mapro-nav-item .label .nav-icon { font-size: 12px; line-height: 1; }
.mapro-nav-item .label .nav-icon i { font-size: 1em; line-height: 1; }
.mapro-nav-item .label .label-text { line-height: 1; }
.mapro-nav-item .value { margin-top: 2px; font-size: 14px; font-weight: 700; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mapro-nav-arrow { padding: 0 3px; color: #9ea3a8; font-size: 14px; flex: 0 0 auto; }
.mapro-dest-selector { margin-top: 10px; }
.mapro-dest-selector select { width: 100%; max-width: 400px; padding: 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 16px; }
.mapro-share-inline { transition: opacity 0.25s; margin-left: 8px; display: inline-flex; align-items: center; gap: 6px; pointer-events: auto; flex: 0 0 auto; }
.mapro-route-link-btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--mapro-ui-border); background: var(--mapro-ui-panel-strong); border-radius: 10px; padding: 5px 9px; cursor: pointer; line-height: 1; }
.mapro-route-link-btn:hover { background: #f5f7f8; }
.mapro-route-link-btn:focus-visible { outline: 2px solid #2271b1; outline-offset: 2px; }
.mapro-route-link-meta { font-size: 10px; color: #666; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }
.mapro-route-link-icon { font-size: 23px; line-height: 1; display: inline-block; transform-origin: center; animation: maproLinkIconPulse 1.8s ease-in-out infinite; }
.mapro-route-link-icon i { font-size: 1em; line-height: 1; display: inline-block; }
.mapro-share-msg { display: none; color: #2a7a30; font-size: 11px; font-weight: 700; white-space: nowrap; }
.mapro-pinch-hint { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%) scale(0.94); opacity: 0; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; color: #fff; background: rgba(0,0,0,0.62); border: 1px solid rgba(255,255,255,0.25); box-shadow: 0 6px 22px rgba(0,0,0,0.28); pointer-events: none; z-index: 700; transition: opacity 0.28s ease, transform 0.28s ease; }
.mapro-pinch-hint.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.mapro-pinch-hint.is-hide { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
.mapro-pinch-hint-icon { font-size: 19px; line-height: 1; animation: maproPinchHintPulse 1.2s ease-in-out infinite; }
.mapro-pinch-hint-text { font-size: 12px; line-height: 1.2; font-weight: 600; white-space: nowrap; }
.mapro-search-modal { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(74%, 450px); height: min(62%, 500px); max-width: calc(100% - 24px); max-height: calc(100% - 24px); overflow: hidden; background: rgba(255,255,255,0.92); border: 1px solid rgba(255,255,255,0.78); z-index: 2000; display: flex; flex-direction: column; border-radius: 12px; box-shadow: 0 14px 38px rgba(0,0,0,0.2); backdrop-filter: blur(5px); box-sizing: border-box; }
.mapro-modal-header { padding: 12px 16px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 2; background: #fff; }
.mapro-modal-header h3 { margin: 0; font-size: 16px; color: #333; }
#mapro-modal-close, #mapro-ann-close { background: none; border: none; font-size: 24px; color: #999; cursor: pointer; padding: 0 8px; min-width: 40px; min-height: 40px; line-height: 1; border-radius: 8px; }
#mapro-modal-close:focus-visible, #mapro-ann-close:focus-visible { outline: 2px solid #0073aa; outline-offset: 2px; }
.mapro-tabs { display: flex; border-bottom: 1px solid #eee; background: #f9f9f9; position: sticky; top: 57px; z-index: 1; }
.mapro-tabs .tab-btn { flex: 1; padding: 12px; border: none; background: none; font-size: 14px; color: #666; cursor: pointer; border-bottom: 2px solid transparent; min-height: 44px; }
.mapro-tabs .tab-btn.active { color: #0073aa; border-bottom-color: #0073aa; background: #fff; font-weight: bold; }
.mapro-searchbar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid #eceff2; background: #fff; }
.mapro-searchbar .icon { color: #607080; font-size: 13px; line-height: 1; flex: 0 0 auto; }
.mapro-point-search { flex: 1; min-width: 0; border: 1px solid #cfd8e1; border-radius: 7px; padding: 6px 8px; font-size: 13px; line-height: 1.2; color: #1f2937; background: #fff; }
.mapro-point-search:focus { outline: none; border-color: #2271b1; box-shadow: 0 0 0 2px rgba(34,113,177,0.2); }
.mapro-point-search-clear { border: 1px solid #d3dbe4; background: #fff; color: #546170; border-radius: 7px; min-width: 28px; min-height: 28px; font-size: 17px; line-height: 1; cursor: pointer; padding: 0; }
.mapro-point-search-clear:hover { background: #f2f6fa; border-color: #b5c5d6; color: #2f3b48; }
.mapro-tab-content { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 0; min-width: 0; -webkit-overflow-scrolling: touch; }
.mapro-list-group { padding: 8px 16px; background: #f0f0f0; font-size: 12px; color: #666; font-weight: bold; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; position: sticky; top: 0; z-index: 4; box-shadow: 0 1px 0 rgba(229,229,229,0.95); }
.mapro-list-item { padding: 12px 16px; border-bottom: 1px solid #eee; cursor: pointer; display: flex; align-items: center; justify-content: space-between; min-height: 48px; min-width: 0; gap: 8px; position: relative; z-index: 1; }
.mapro-list-item:active { background: #f9f9f9; }
.mapro-list-item:hover { background: #f7fbff; }
.mapro-list-item .name { font-size: 15px; font-weight: bold; color: #333; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mapro-list-item .meta { font-size: 12px; color: #999; margin-left: 8px; }
.mapro-list-item .meta-extra { font-size: 11px; color: #6b7280; margin-left: 8px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.25; }
#mapro-ann-modal { width: min(92%, 420px) !important; max-width: 420px !important; max-height: calc(100% - 24px) !important; top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important; transform: translate(-50%, -50%) !important; }
#mapro-ann-content { overflow-y: auto; overflow-x: hidden; word-break: break-word; }
.mapro-point-select-modal {
  position: absolute;
  inset: 0;
  z-index: 2105;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: rgba(15, 23, 42, 0.28);
  backdrop-filter: blur(2px);
}
.mapro-point-select-dialog {
  width: min(92%, 520px);
  max-height: calc(100% - 24px);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.78);
  background: rgba(255,255,255,0.97);
  box-shadow: 0 16px 40px rgba(0,0,0,0.28);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#mapro-point-select-close {
  background: none;
  border: none;
  font-size: 24px;
  color: #999;
  cursor: pointer;
  padding: 0 8px;
  min-width: 40px;
  min-height: 40px;
  line-height: 1;
  border-radius: 8px;
}
#mapro-point-select-close:focus-visible {
  outline: 2px solid #0073aa;
  outline-offset: 2px;
}
.mapro-point-select-content {
  padding: 14px 16px;
  overflow-y: auto;
  overflow-x: hidden;
  word-break: break-word;
}
.mapro-point-select-summary {
  margin: 0 0 10px;
}
.mapro-point-select-name {
  margin: 0 0 4px;
  color: #0f172a;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 800;
}
.mapro-point-select-meta {
  margin: 0;
  color: #475569;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 700;
}
.mapro-point-select-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid #e2e8f0;
  background: #fff;
}
.mapro-point-select-btn {
  min-height: 38px;
  min-width: 172px;
  border-radius: 9px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #0f172a;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;
  cursor: pointer;
  padding: 7px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
}
.mapro-point-select-btn .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mapro-point-select-btn .icon .bi::before {
  transform: none !important;
}
.mapro-point-select-btn .text {
  display: inline-block;
}
.mapro-point-select-btn.is-start {
  border-color: rgba(31, 191, 0, 0.48);
  background: rgba(168, 255, 149, 0.34);
  color: #215f11;
}
.mapro-point-select-btn.is-goal {
  border-color: rgba(20, 122, 209, 0.45);
  background: rgba(180, 226, 255, 0.36);
  color: #0f4b77;
}
.mapro-point-select-btn:hover {
  filter: saturate(1.05);
}
.mapro-point-select-btn:disabled {
  opacity: 0.52;
  cursor: not-allowed;
  filter: none;
}
.mapro-point-select-content .mapro-point-desc,
.mapro-point-select-content .mapro-ann-desc {
  margin-top: 8px;
}
.mapro-panorama-block {
  margin: 0 0 12px;
}
.mapro-panorama-viewer-shell {
  position: relative;
}
.mapro-panorama-viewer {
  position: relative;
  width: 100%;
  height: clamp(170px, 34vh, 300px);
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: 8px;
  border: 1px solid rgba(30, 41, 59, 0.18);
  background:
    linear-gradient(180deg, rgba(248, 251, 255, 0.92) 0%, rgba(236, 244, 253, 0.92) 100%),
    repeating-linear-gradient(
      45deg,
      rgba(122, 138, 156, 0.12) 0,
      rgba(122, 138, 156, 0.12) 8px,
      rgba(122, 138, 156, 0.06) 8px,
      rgba(122, 138, 156, 0.06) 16px
    );
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
  scroll-behavior: auto;
  cursor: default;
  touch-action: none;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.mapro-panorama-viewer.is-scrollable {
  cursor: grab;
}
.mapro-panorama-viewer.is-dragging {
  cursor: grabbing;
}
#mapro-point-select-content .mapro-panorama-viewer img,
#mapro-ann-content .mapro-panorama-viewer img {
  display: block;
  height: 100% !important;
  width: auto !important;
  max-width: none !important;
  min-width: 100%;
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
}
.mapro-point-select-mode-field {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  border: 1px solid rgba(100, 116, 139, 0.35);
  border-radius: 9px;
  padding: 6px 8px;
  background: rgba(248, 250, 252, 0.96);
}
.mapro-point-select-mode-label {
  color: #475569;
  font-size: calc(10px * var(--mapro-font-scale));
  line-height: 1.2;
  font-weight: 700;
}
.mapro-point-select-mode-select {
  width: 100%;
  min-height: 32px;
  border-color: #cbd5e1;
  background-color: #fff;
  color: #0f172a;
  font-size: calc(12px * var(--mapro-font-scale));
  font-weight: 700;
}
.mapro-point-select-route {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #e2e8f0;
}
.mapro-point-select-route-title {
  margin: 0 0 8px;
  color: #0f172a;
  font-size: calc(13px * var(--mapro-font-scale));
  line-height: 1.3;
  font-weight: 800;
}
.mapro-point-select-route .mapro-route-info-popup {
  min-width: 0;
  width: 100%;
}
.mapro-point-select-route-note {
  margin: 8px 0 0;
  color: #475569;
  font-size: calc(11px * var(--mapro-font-scale));
  line-height: 1.4;
  font-weight: 700;
}
.mapro-point-select-route-note.is-alert {
  color: #9a3412;
}
.mapro-panorama-arrows {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(10px, 2.4vw, 24px);
  pointer-events: none;
  opacity: 0;
  transition: opacity .24s ease;
  z-index: 2;
}
.mapro-panorama-viewer-shell.show-arrows-intro .mapro-panorama-arrows {
  opacity: 1;
}
.mapro-panorama-gesture {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: clamp(42px, 9vw, 92px);
}
.mapro-panorama-arrow {
  position: static;
  display: inline-block;
  transform: none;
  width: clamp(70px, 12vw, 124px);
  height: clamp(42px, 6.8vw, 76px);
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.82)) drop-shadow(0 0 16px rgba(255,255,255,0.45));
}
.mapro-panorama-arrow svg {
  width: 100%;
  height: 100%;
  display: block;
}
.mapro-panorama-arrow path {
  fill: none;
  stroke: #fff;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mapro-panorama-arrow.is-left {
  transform: scaleX(-1);
  animation: maproPanoramaArrowLeft 1.42s ease-in-out infinite;
}
.mapro-panorama-arrow.is-right {
  animation: maproPanoramaArrowRight 1.42s ease-in-out infinite;
}
.mapro-panorama-hint {
  margin: 6px 2px 0;
  font-size: calc(10px * var(--mapro-font-scale));
  line-height: 1.35;
  color: #5b6c7d;
}
@keyframes maproPanoramaArrowLeft {
  0%, 100% { transform: scaleX(-1) translateX(0) scale(1); opacity: 0.96; }
  50% { transform: scaleX(-1) translateX(-8px) scale(1.04); opacity: 0.7; }
}
@keyframes maproPanoramaArrowRight {
  0%, 100% { transform: translateX(0) scale(1); opacity: 0.96; }
  50% { transform: translateX(8px) scale(1.04); opacity: 0.7; }
}

/* 共通パルスアニメーション */
@keyframes maproBlinkMarker {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}
.mapro-pulse-icon { background: transparent !important; border: none !important; }
.mapro-pulse-dot { position: relative; display: block; width: 24px; height: 24px; border-radius: 999px; background: rgba(31, 191, 0, 0.95); box-shadow: 0 0 0 3px rgba(31,191,0,0.28), 0 2px 10px rgba(0,0,0,.25); animation: maproBlinkMarker 2s infinite; }
.mapro-sub-icon { background: transparent !important; border: none !important; }
.mapro-sub-dot { position: relative; display: block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.3); transition: transform 0.2s ease; }
.mapro-route-point-dot {
  background: var(--mapro-point-color, rgba(31, 191, 0, 0.96));
  box-shadow: 0 0 0 2px rgba(31,191,0,0.34), 0 2px 9px rgba(0,0,0,0.28);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  animation: maproPointIdlePulse 0.95s ease-in-out infinite;
}
.mapro-route-point-symbol {
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
  opacity: 0;
  text-shadow: 0 1px 2px rgba(0,0,0,0.28);
}
.mapro-route-point-symbol i { font-size: 12px; line-height: 1; }
.leaflet-marker-icon.is-route-start .mapro-route-point-dot,
.leaflet-marker-icon.is-route-goal .mapro-route-point-dot,
.mapro-sub-dot.active,
.mapro-sub-dot.start-active {
  background: rgba(31, 191, 0, 0.98);
  transform: scale(2);
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(31,191,0,0.34), 0 0 14px rgba(31,191,0,0.48);
  animation: maproRouteEndpointPulse 1.2s ease-in-out infinite;
}
.leaflet-marker-icon.is-route-start .mapro-route-point-symbol,
.leaflet-marker-icon.is-route-goal .mapro-route-point-symbol { opacity: 1; }
.mapro-evac-icon { background: transparent !important; border: none !important; }
.mapro-evac-btn { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; background: rgba(20,172,92,0.96); border: 1px solid rgba(255,255,255,0.95); box-shadow: 0 4px 12px rgba(20,172,92,0.32), 0 1px 4px rgba(0,0,0,0.26); color: #fff; font-size: 10px; line-height: 1; font-weight: 800; white-space: nowrap; }
.mapro-evac-btn .mapro-sub-dot { width: 10px; height: 10px; border-width: 1px; border-color: rgba(20,172,92,0.96); background: #fff; box-shadow: none; }
.mapro-evac-btn .mapro-sub-dot.active,
.mapro-evac-btn .mapro-sub-dot.start-active { background: #ffd257; border-color: #fff; transform: scale(1.15); animation: none; }
.mapro-evac-text { letter-spacing: 0.01em; }
.mapro-label { background: rgba(255, 255, 255, 0.85); border: 1px solid #999; border-radius: 4px; padding: 1px 5px; font-size: 11px; color: #333; font-weight: bold; white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.mapro-label-active { background: rgba(255, 240, 240, 0.95); border-color: #d00; color: #d00; z-index: 1000; }
.mapro-route-line { stroke: rgba(31,191,0,0.92); stroke-opacity: 0.74; stroke-width: 6px; filter: drop-shadow(0 0 4px rgba(31,191,0,0.42)); animation: maproRouteLinePulse2d 1.2s ease-in-out infinite; }
.mapro-route-line.is-caution-route { stroke: rgba(245, 158, 11, 0.98); filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.72)); }
.mapro-all-route-line {
  filter: drop-shadow(0 0 1.4px rgba(255,255,255,0.9)) drop-shadow(0 0 3px rgba(255,255,255,0.42));
  animation: none;
}
.mapro-all-route-line.is-passable { stroke: rgba(57, 255, 20, 0.92); stroke-width: 4.8px; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.mapro-all-route-line.is-warning { stroke: rgba(253, 186, 116, 0.9); stroke-width: 5px; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 8 6; fill: none; }
.mapro-all-route-line.is-blocked { stroke: rgba(255, 154, 154, 0.94); stroke-width: 5.2px; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 10 7; fill: none; }
.mapro-all-route-line.is-warning,
.mapro-all-route-line.is-blocked {
  animation: none;
}
.mapro-map-shell.is-map-mono .mapro-all-route-line { filter: drop-shadow(0 0 2.2px rgba(255,255,255,0.96)) drop-shadow(0 0 6px rgba(255,255,255,0.6)); }
.mapro-map-shell.is-map-mono .mapro-all-route-line.is-passable { stroke: rgba(232, 243, 132, 0.99); stroke-width: 5.8px; }
.mapro-map-shell.is-map-mono .mapro-all-route-line.is-warning { stroke: rgba(251, 146, 60, 0.98); stroke-width: 6px; stroke-dasharray: 9 6; }
.mapro-map-shell.is-map-mono .mapro-all-route-line.is-blocked { stroke: rgba(255, 124, 124, 0.98); stroke-width: 6.2px; stroke-dasharray: 11 7; }
.mapro-map-shell.is-map-mono .mapro-floor-3d-all-route-line { filter: drop-shadow(0 0 2.2px rgba(255,255,255,0.96)) drop-shadow(0 0 6px rgba(255,255,255,0.6)); }
.mapro-map-shell.is-map-mono .mapro-floor-3d-all-route-line.is-passable { stroke: rgba(134, 245, 112, 0.98); stroke-width: 5.8; }
.mapro-map-shell.is-map-mono .mapro-floor-3d-all-route-line.is-warning { stroke: rgba(251, 146, 60, 0.98); stroke-width: 6; stroke-dasharray: 9 6; }
.mapro-map-shell.is-map-mono .mapro-floor-3d-all-route-line.is-blocked { stroke: rgba(255, 124, 124, 0.99); stroke-width: 6.2; stroke-dasharray: 11 7; }
.mapro-route-line.mapro-route-line-gradient { animation: none; filter: drop-shadow(0 0 6px rgba(31,191,0,0.34)); }
.mapro-route-line.mapro-route-line-gradient.is-caution-route { filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.54)); }
.mapro-route-line.mapro-route-line-gradient-base { stroke-opacity: 0.92; }
.mapro-route-line.mapro-route-line-gradient-inner { stroke-opacity: 0.48; }
.mapro-route-line.mapro-route-line-blocked {
  animation: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mapro-route-line.mapro-route-line-blocked-aura {
  stroke-opacity: 0.5;
  filter: drop-shadow(0 0 16px rgba(245, 158, 11, 0.72));
}
.mapro-route-line.mapro-route-line-blocked-core {
  stroke-opacity: 0.96;
  filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.86));
}
.mapro-route-line.mapro-route-line-flow {
  animation: none;
  stroke-opacity: 1;
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.52));
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mapro-route-line.mapro-route-line-flow-aura {
  animation: maproRouteAuraBreath 2.3s ease-in-out infinite;
  stroke-opacity: 0.24;
  filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0.56));
}
.mapro-route-line.mapro-route-line-flow-sweep {
  animation: maproRouteSweepMove 1.86s linear infinite;
  stroke-opacity: 0.52;
  filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.92));
}
.mapro-route-line.mapro-route-line-flow-sweep-core {
  animation: maproRouteSweepMove 1.86s linear infinite;
  stroke-opacity: 1;
  filter: drop-shadow(0 0 24px rgba(255, 255, 255, 0.98));
}
.mapro-hazard-start-icon { background: transparent !important; border: none !important; }
.mapro-hazard-start-dot { display: block; width: 16px; height: 16px; border-radius: 999px; background: rgba(231, 76, 60, 0.96); border: 2px solid #fff; box-shadow: 0 0 0 2px rgba(231,76,60,0.34), 0 0 14px rgba(231,76,60,0.55); animation: maproHazardPulse 1.8s ease-in-out infinite; }
@keyframes maproLinkIconPulse { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.14) rotate(-8deg); } }
@keyframes maproPinchHintPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes maproRouteAnnGlow { 0%, 100% { transform: scale(1.08); } 50% { transform: scale(1.28); } }
@keyframes maproRouteAnnGlow3d {
  0%, 100% { transform: var(--mapro-3d-ann-transform-base) scale(1.04); }
  50% { transform: var(--mapro-3d-ann-transform-base) scale(1.2); }
}
@keyframes maproPointIdlePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.38; transform: scale(1.16); }
}
@keyframes maproAllRouteFloatPulse {
  0%, 100% {
    opacity: 0.62;
    filter: drop-shadow(0 0 1.4px rgba(255,255,255,0.88)) drop-shadow(0 0 3px rgba(255,255,255,0.40));
  }
  50% {
    opacity: 0.98;
    filter: drop-shadow(0 0 2.2px rgba(255,255,255,0.98)) drop-shadow(0 0 8px rgba(255,255,255,0.68));
  }
}
@keyframes maproAllRouteDashFlow {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -26; }
}
@keyframes maproPointIdlePulse3d {
  0%, 100% { opacity: 1; transform: var(--mapro-3d-point-transform-base) scale(1); }
  50% { opacity: 0.38; transform: var(--mapro-3d-point-transform-base) scale(1.16); }
}
@keyframes maproRouteEndpointPulse {
  0%, 100% { opacity: 0.96; transform: scale(2); }
  50% { opacity: 0.72; transform: scale(2.12); }
}
@keyframes maproRouteEndpointPulse3d {
  0%, 100% { opacity: 0.96; transform: var(--mapro-3d-point-transform-base) scale(1); }
  50% { opacity: 0.78; transform: var(--mapro-3d-point-transform-base) scale(1.14); }
}
@keyframes maproRouteLinePulse2d {
  0%, 100% { stroke-opacity: 0.56; filter: drop-shadow(0 0 3px rgba(31,191,0,0.34)); }
  50% { stroke-opacity: 0.84; filter: drop-shadow(0 0 7px rgba(31,191,0,0.55)); }
}
@keyframes maproRouteSweepMove {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -560; }
}
@keyframes maproRouteAuraBreath {
  0%, 100% {
    stroke-opacity: 0.2;
    filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.46));
  }
  50% {
    stroke-opacity: 0.36;
    filter: drop-shadow(0 0 24px rgba(255, 255, 255, 0.78));
  }
}
@keyframes maproRouteLinePulse3d {
  0%, 100% { stroke-opacity: 0.58; filter: drop-shadow(0 0 3px rgba(31,191,0,0.44)); }
  50% { stroke-opacity: 0.88; filter: drop-shadow(0 0 8px rgba(31,191,0,0.68)); }
}
@keyframes maproHazardPulse { 0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 8px 18px rgba(201,47,49,0.3); } 50% { transform: translateY(-1px) scale(1.03); box-shadow: 0 12px 24px rgba(201,47,49,0.42); } }
@keyframes maproHazardModalIn { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
/* アノテーションアイコン（点滅） */
.mapro-ann-icon div { transition: transform 0.2s; font-size:16px; text-align:center; line-height:16px; animation: maproBlinkMarker 3s infinite; }
.mapro-ann-icon.mapro-ann-on-route div { animation: maproRouteAnnGlow 1.15s ease-in-out infinite; background: rgba(255,255,255,0.9); border-radius: 999px; box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.55), 0 0 18px rgba(255, 153, 0, 0.85); }
.mapro-ann-icon:hover div { transform: scale(1.2); cursor: pointer; animation: none; }
.mapro-cache-btn { margin-left:10px; padding:6px 10px; border:1px solid #ccc; border-radius:8px; background:#fff; cursor:pointer; }
.mapro-cache-btn:disabled { opacity:.6; cursor:default; }
.mapro-hide-attribution .leaflet-control-attribution { display:none !important; }
.mapro-wrap:fullscreen,
.mapro-wrap:-webkit-full-screen {
  background: #fff;
  padding: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  margin: 0;
  box-sizing: border-box;
  width: 100vw;
  height: 100dvh;
  max-width: 100vw;
  max-height: 100dvh;
}
.mapro-wrap:fullscreen .mapro-map-shell,
.mapro-wrap:-webkit-full-screen .mapro-map-shell {
  width: 100%;
  height: 100%;
  border-radius: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mapro-wrap:fullscreen .mapro-map,
.mapro-wrap:-webkit-full-screen .mapro-map {
  height: 100% !important;
  min-height: 0 !important;
  border-radius: 0;
}

.mapro-wrap:fullscreen .mapro-search-modal,
.mapro-wrap:-webkit-full-screen .mapro-search-modal,
.mapro-wrap.is-pseudo-fullscreen .mapro-search-modal,
.mapro-wrap:fullscreen .mapro-help-modal,
.mapro-wrap:-webkit-full-screen .mapro-help-modal,
.mapro-wrap.is-pseudo-fullscreen .mapro-help-modal {
  width: min(94%, 520px);
  max-width: calc(100% - 14px);
  height: min(76%, 680px);
  max-height: calc(100% - 14px);
}

.mapro-floor-stack-label { font-size: calc(10px * var(--mapro-font-scale)); }
.mapro-floor-stack-current { font-size: calc(14px * var(--mapro-font-scale)); }
.mapro-floor-stack-updated { font-size: calc(10px * var(--mapro-font-scale)); }
.mapro-floor-3d-label { font-size: calc(10px * var(--mapro-font-scale)); }
.mapro-floor-3d-current { font-size: calc(14px * var(--mapro-font-scale)); }
.mapro-control-label { font-size: calc(10px * var(--mapro-font-scale)); }
.mapro-mode-select,
.mapro-floor-select { font-size: calc(14px * var(--mapro-font-scale)); }
.mapro-view-mode-btn,
.mapro-fit-btn,
.mapro-fullscreen-btn,
.mapro-fontsize-select { font-size: calc(13px * var(--mapro-font-scale)); }
.mapro-fontsize-label { font-size: calc(11px * var(--mapro-font-scale)); }
.mapro-hazard-toggle { font-size: calc(12px * var(--mapro-font-scale)); }
.mapro-hazard-fab .text { font-size: calc(12px * var(--mapro-font-scale)); }
.mapro-status { font-size: calc(11px * var(--mapro-font-scale)); }
.mapro-route-stat .value { font-size: calc(12px * var(--mapro-font-scale)); }
.mapro-route-stat .label { font-size: calc(10px * var(--mapro-font-scale)); }
.mapro-ann-filter-toggle,
.mapro-ann-filter-item,
.mapro-ann-filter-empty { font-size: calc(12px * var(--mapro-font-scale)); }
.mapro-ann-filter-title { font-size: calc(13px * var(--mapro-font-scale)); }
.mapro-ann-filter-action { font-size: calc(10px * var(--mapro-font-scale)); }
.mapro-nav-item .label { font-size: calc(10px * var(--mapro-font-scale)); }
.mapro-nav-item .value { font-size: calc(14px * var(--mapro-font-scale)); }
.mapro-route-link-meta { font-size: calc(10px * var(--mapro-font-scale)); }
.mapro-share-msg { font-size: calc(11px * var(--mapro-font-scale)); }
.mapro-modal-header h3 { font-size: calc(16px * var(--mapro-font-scale)); }
.mapro-tabs .tab-btn { font-size: calc(14px * var(--mapro-font-scale)); }
.mapro-point-search { font-size: calc(13px * var(--mapro-font-scale)); }
.mapro-list-group { font-size: calc(12px * var(--mapro-font-scale)); }
.mapro-list-item .name { font-size: calc(15px * var(--mapro-font-scale)); }
.mapro-list-item .meta { font-size: calc(12px * var(--mapro-font-scale)); }
.mapro-floor-3d-jump-label,
.mapro-floor-3d-reset,
.mapro-floor-3d-jump-select { font-size: calc(12px * var(--mapro-font-scale)); }
.mapro-floor-stack-meta .floor-updated { font-size: calc(10px * var(--mapro-font-scale)); }
.mapro-nav-mode .label { font-size: calc(10px * var(--mapro-font-scale)); }
.mapro-nav-mode .mapro-mode-select { font-size: calc(11px * var(--mapro-font-scale)); }
.mapro-nav-item .label .nav-list-indicator { font-size: calc(10px * var(--mapro-font-scale)); }
.mapro-fontsize-label span { font-size: calc(10px * var(--mapro-font-scale)); }
.mapro-ann-filter-item .text { font-size: calc(11px * var(--mapro-font-scale)); }
.mapro-evac-btn { font-size: calc(10px * var(--mapro-font-scale)); }
.mapro-label { font-size: calc(11px * var(--mapro-font-scale)); }
.mapro-wrap .leaflet-tooltip,
.mapro-wrap .leaflet-popup-content,
.mapro-wrap .leaflet-control {
  font-size: calc(12px * var(--mapro-font-scale));
}

@media (min-width: 821px) {
  .mapro-overlay-bottom { justify-content: center; overflow-x: auto; }
}

@media (max-width: 820px) {
  .mapro-map { min-height: 460px; }
  .mapro-overlay-bottom { left: 8px; right: 8px; bottom: max(10px, env(safe-area-inset-bottom)); gap: 4px; }
  .mapro-route-stats { max-width: 100%; }
  .mapro-route-stat { padding: 4px 5px; gap: 3px; }
  .mapro-control-row { gap: 4px; padding: 3px; }
  .mapro-control { min-width: 88px; padding: 3px 5px; }
  .mapro-mode-select,
  .mapro-floor-select { min-width: 80px; max-width: 104px; min-height: 32px; font-size: calc(13px * var(--mapro-font-scale)); padding: 3px 6px; }
  .mapro-nav-item { min-width: 90px; max-width: 138px; padding: 3px 5px; }
  .mapro-nav-item .value { font-size: calc(12px * var(--mapro-font-scale)); }
  .mapro-route-link-btn { gap: 6px; padding: 4px 7px; }
  .mapro-route-link-meta { font-size: calc(9px * var(--mapro-font-scale)); }
  .mapro-ann-filter-panel { bottom: calc(70px + env(safe-area-inset-bottom)); width: min(240px, calc(100% - 16px)); max-height: min(54%, 300px); }
  .mapro-ann-filter-list { max-height: calc(min(54%, 300px) - 52px); }
  .mapro-ann-filter-action { padding: 4px 6px; min-height: 24px; }
  .mapro-floor-3d-panel.is-stage .mapro-floor-3d-header { top: max(6px, env(safe-area-inset-top)); right: max(6px, env(safe-area-inset-right)); }
}

@media (max-width: 820px) {
  .mapro-wrap { width: 100%; max-width: 100%; margin: 0 auto; }
  .mapro-overlay { width: calc(100% - 16px); }
  .mapro-overlay-tools { width: auto; right: 8px; top: 8px; }
  .mapro-overlay-floor { width: auto; left: 8px; top: 8px; }
  .mapro-floor-picker { gap: 4px; }
  .mapro-floor-stack-toggle,
  .mapro-floor-3d-toggle { min-width: 98px; padding: 6px 7px; border-radius: 9px; }
  .mapro-floor-stack-label,
  .mapro-floor-3d-label { font-size: calc(9px * var(--mapro-font-scale)); }
  .mapro-floor-stack-current,
  .mapro-floor-3d-current { font-size: calc(12px * var(--mapro-font-scale)); }
  .mapro-floor-stack-panel { width: calc(100% - 16px); max-width: calc(100% - 16px); height: min(68%, 520px); max-height: calc(100% - 20px); top: 50%; border-radius: 11px; }
  .mapro-floor-stack-header { padding: 10px 12px; }
  .mapro-floor-stack-title { font-size: 14px; }
  .mapro-floor-stack-list { padding: 10px; gap: 8px; }
  .mapro-floor-stack-item { padding: 8px; grid-template-columns: 1fr auto; transform: perspective(760px) rotateX(9deg) translateY(calc(-1 * var(--stack-shift, 0px))); }
  .mapro-floor-stack-thumb { height: 62px; }
  .mapro-floor-stack-meta { min-width: 56px; max-width: 110px; }
  .mapro-floor-stack-meta .floor-name { font-size: 13px; }
  .mapro-floor-stack-meta .floor-title { font-size: 10px; }
  .mapro-floor-3d-panel { width: calc(100% - 16px); max-width: calc(100% - 16px); height: min(68%, 520px); max-height: calc(100% - 20px); top: 50%; border-radius: 11px; }
  .mapro-floor-3d-panel.is-stage .mapro-floor-3d-scene-wrap { padding: 0; }
  .mapro-floor-3d-header { padding: 10px 12px; }
  .mapro-floor-3d-title { font-size: 14px; }
  .mapro-floor-3d-actions { gap: 4px; }
  .mapro-floor-3d-reset { font-size: calc(10px * var(--mapro-font-scale)); padding: 5px 8px; border-radius: 7px; }
  .mapro-floor-3d-guide { font-size: 10px; padding: 7px 10px; line-height: 1.35; }
  .mapro-floor-3d-guide-legend { display: flex; margin-left: 0; margin-top: 4px; gap: 5px; flex-wrap: wrap; }
  .mapro-floor-3d-guide-legend .chip { font-size: 9px; padding: 1px 5px; }
  .mapro-floor-3d-jump { padding: 7px 10px; gap: 6px; }
  .mapro-floor-3d-jump-label { font-size: calc(10px * var(--mapro-font-scale)); }
  .mapro-floor-3d-pick-btn { font-size: 10px; padding: 5px 6px; }
  .mapro-floor-3d-jump-select { min-width: 100px; font-size: calc(11px * var(--mapro-font-scale)); padding: 5px 24px 5px 8px; border-radius: 7px; }
  .mapro-floor-3d-side-rail { left: max(6px, env(safe-area-inset-left)); gap: 5px; }
  .mapro-floor-3d-side-btn { min-width: 40px; height: 27px; font-size: 11px; padding: 0 8px; }
  .mapro-floor-3d-scene-wrap { padding: 8px 9px 11px; }
  .mapro-floor-3d-scene { min-height: 280px; }
  .mapro-floor-3d-connector-label { font-size: 9px; padding: 1px 5px; }
  .mapro-floor-3d-point { width: 12px; height: 12px; }
  .mapro-floor-3d-point-label {
    max-width: 128px;
    min-height: 18px;
    font-size: calc(9px * var(--mapro-font-scale));
    padding: 1px 7px;
  }
  .mapro-floor-3d-point-label::before { height: 10px; width: 2px; }
  .mapro-floor-3d-annotation { width: 18px; height: 18px; font-size: 11px; line-height: 16px; }
  .mapro-floor-3d-route-line { stroke-width: 5; }
  .mapro-floor-3d-route-node { stroke-width: 3.5; }
  .mapro-tools-row { gap: 4px; padding: 4px; }
  .mapro-view-mode-btn { min-width: 40px; height: 32px; font-size: calc(12px * var(--mapro-font-scale)); }
  .mapro-view-mode-toggle { gap: 3px; }
  .mapro-fontsize-group { height: 32px; padding: 0 6px; }
  .mapro-fontsize-select { min-width: 74px; height: 24px; font-size: calc(11px * var(--mapro-font-scale)); }
  .mapro-overlay-bottom { left: 8px; right: 8px; width: auto; bottom: max(12px, env(safe-area-inset-bottom)); gap: 4px; padding: 0; }
  .mapro-ann-filter-panel { left: 8px; right: 8px; width: auto; max-width: none; bottom: calc(68px + env(safe-area-inset-bottom)); max-height: min(52%, 280px); border-radius: 10px; }
  .mapro-ann-filter-list { max-height: calc(min(52%, 280px) - 52px); }
  .mapro-ann-filter-item { padding: 5px 7px; gap: 7px; }
  .mapro-ann-filter-header { padding: 8px 10px; gap: 6px; }
  .mapro-ann-filter-tools { gap: 3px; }
  .mapro-ann-filter-action { padding: 3px 5px; min-height: 22px; }
  .mapro-control-row { gap: 4px; padding: 3px; }
  .mapro-control { min-width: 82px; padding: 3px 4px; }
  .mapro-mode-select,
  .mapro-floor-select { min-width: 78px; width: auto; max-width: 100px; }
  .mapro-control-floor { min-width: 104px; padding: 3px 5px; }
  .mapro-zoom-group { display: none; }
  .mapro-zoom-btn { width: 34px; height: 32px; font-size: 19px; }
  .mapro-fit-btn,
  .mapro-fullscreen-btn { width: auto; padding: 7px 10px; }
  .mapro-map { height: min(94dvh, calc(100dvh - 12px)); min-height: 440px; }
  .mapro-route-stats { max-width: 100%; overflow-x: auto; }
  .mapro-route-stat { padding: 4px 5px; gap: 3px; }
  .mapro-nav-bar { padding: 3px; gap: 3px; }
  .mapro-nav-item { min-width: 90px; max-width: 140px; padding: 3px 4px; }
  .mapro-nav-item .label { font-size: calc(9px * var(--mapro-font-scale)); gap: 3px; }
  .mapro-nav-item .label .nav-icon { font-size: 11px; }
  .mapro-nav-item .value { margin-top: 1px; font-size: calc(11px * var(--mapro-font-scale)); }
  .mapro-nav-arrow { padding: 0 3px; font-size: 13px; }
  .mapro-share-inline { margin-left: 6px; gap: 4px; }
  .mapro-route-link-btn { gap: 4px; padding: 4px 6px; }
  .mapro-route-link-meta { display: none; }
  .mapro-route-link-icon { font-size: 18px; }
  .mapro-status { left: 0; max-width: min(92vw, 320px); }
  .mapro-hazard-toggle { padding: 7px 8px; font-size: calc(11px * var(--mapro-font-scale)); }
  .mapro-hazard-fab { left: 8px; right: auto; top: calc(50px + env(safe-area-inset-top)); bottom: auto; padding: 7px 10px; }
  .mapro-hazard-fab .text { font-size: calc(11px * var(--mapro-font-scale)); }
  .mapro-hazard-modal { left: 8px; right: auto; top: calc(90px + env(safe-area-inset-top)); bottom: auto; width: calc(100% - 16px); max-height: calc(66% - env(safe-area-inset-bottom)); }
  .mapro-hazard-modal-title { font-size: calc(14px * var(--mapro-font-scale)); }
  .mapro-hazard-doc h4 { font-size: calc(13px * var(--mapro-font-scale)); }
  .mapro-hazard-doc li { font-size: calc(12px * var(--mapro-font-scale)); }
  .mapro-hazard-doc p { font-size: calc(11px * var(--mapro-font-scale)); }
  .mapro-search-modal { width: calc(100% - 20px); max-width: calc(100% - 20px); height: min(70%, 540px); max-height: calc(100% - 20px); border-radius: 10px; }
  .mapro-routing-options-modal { width: calc(100% - 20px) !important; max-width: calc(100% - 20px) !important; height: auto !important; max-height: min(60%, 400px) !important; }
  .mapro-tabs .tab-btn { font-size: calc(13px * var(--mapro-font-scale)); padding: 10px 6px; }
  .mapro-searchbar { padding: 7px 10px; gap: 5px; }
  .mapro-point-search { font-size: calc(12px * var(--mapro-font-scale)); padding: 5px 7px; }
  .mapro-point-search-clear { min-width: 26px; min-height: 26px; font-size: 15px; }
  .mapro-list-item .name { font-size: calc(14px * var(--mapro-font-scale)); }
  #mapro-ann-modal { width: calc(100% - 16px) !important; max-width: calc(100% - 16px) !important; max-height: calc(100% - 16px) !important; }
  .mapro-point-select-modal { padding: 10px; }
  .mapro-point-select-dialog { width: calc(100% - 16px); max-height: calc(100% - 16px); border-radius: 10px; }
  .mapro-point-select-name { font-size: calc(15px * var(--mapro-font-scale)); }
  .mapro-point-select-meta { font-size: calc(11px * var(--mapro-font-scale)); }
  .mapro-point-select-actions { flex-direction: column; gap: 6px; padding: 10px 12px; }
  .mapro-point-select-btn { width: 100%; min-width: 0; }
  .mapro-point-select-mode-field { padding: 7px 8px; }
  .mapro-point-select-btn { min-height: 36px; font-size: calc(12px * var(--mapro-font-scale)); }
}

@media (max-width: 420px) {
  .mapro-map { min-height: 400px; }
  .mapro-overlay-bottom { left: 6px; right: 6px; gap: 3px; bottom: max(8px, env(safe-area-inset-bottom)); }
  .mapro-ann-filter-panel { left: 6px; right: 6px; bottom: calc(62px + env(safe-area-inset-bottom)); max-height: min(50%, 250px); }
  .mapro-ann-filter-list { max-height: calc(min(50%, 250px) - 52px); }
  .mapro-ann-filter-title { font-size: calc(12px * var(--mapro-font-scale)); }
  .mapro-ann-filter-action { font-size: calc(9px * var(--mapro-font-scale)); padding: 3px 4px; }
  .mapro-control { min-width: 78px; padding: 2px 4px; }
  .mapro-mode-select,
  .mapro-floor-select { min-width: 72px; max-width: 94px; min-height: 30px; font-size: calc(12px * var(--mapro-font-scale)); padding: 2px 5px; }
  .mapro-nav-bar { padding: 2px; gap: 2px; }
  .mapro-route-stat { padding: 3px 4px; }
  .mapro-route-stat i { font-size: 11px; }
  .mapro-nav-item { min-width: 80px; max-width: 122px; padding: 2px 4px; }
  .mapro-nav-item .label .label-text { max-width: 58px; overflow: hidden; text-overflow: ellipsis; }
  .mapro-nav-item .value { font-size: calc(10px * var(--mapro-font-scale)); }
  .mapro-route-link-meta { display: none; }
  .mapro-route-link-icon { font-size: 18px; }
  .mapro-status { max-width: min(92vw, 260px); font-size: calc(10px * var(--mapro-font-scale)); }
}

/* Unified mobile / desktop controls */
.mapro-map-shell {
  --mapro-bottom-overlay-offset: 118px;
}

.mapro-wrap.is-pseudo-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  width: 100vw;
  max-width: 100vw;
  height: calc(var(--mapro-pseudo-vh, 1vh) * 100);
  margin: 0;
  padding: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  border-radius: 0;
  background: #fff;
}

.mapro-wrap.is-pseudo-fullscreen .mapro-map-shell {
  width: 100%;
  height: 100%;
  border-radius: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.mapro-wrap.is-pseudo-fullscreen .mapro-map {
  height: 100% !important;
  min-height: 0;
  border-radius: 0;
}

.mapro-overlay-floor {
  top: auto;
  left: 10px;
  right: auto;
  bottom: calc(max(10px, env(safe-area-inset-bottom)) + var(--mapro-bottom-overlay-offset));
  transform: none;
  width: auto;
  z-index: 736;
}

.mapro-overlay-tools {
  top: auto;
  left: auto;
  right: 10px;
  bottom: calc(max(10px, env(safe-area-inset-bottom)) + var(--mapro-bottom-overlay-offset));
  transform: none;
  width: auto;
  z-index: 735;
}

.mapro-overlay-bottom {
  left: 10px;
  right: 10px;
  bottom: max(10px, env(safe-area-inset-bottom));
  transform: none;
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  overflow: visible;
  padding: 0;
}

.mapro-overlay-bottom > * {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.mapro-system-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border-radius: 10px;
  border: 1px solid var(--mapro-ui-border);
  background: var(--mapro-ui-panel);
  backdrop-filter: blur(2px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.mapro-system-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  overflow: visible;
}

.mapro-help-btn {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--mapro-ui-border);
  background: var(--mapro-ui-panel-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mapro-help-btn i {
  font-size: 16px;
  line-height: 1;
}

.mapro-help-modal {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(92%, 460px);
  max-width: calc(100% - 16px);
  max-height: calc(100% - 16px);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.82);
  background: rgba(255,255,255,0.96);
  box-shadow: 0 16px 38px rgba(0,0,0,0.24);
  z-index: 2100;
  display: none;
  flex-direction: column;
  overflow: hidden;
  pointer-events: auto;
}

.mapro-help-content {
  padding: 12px 14px;
  overflow-y: auto;
  color: #2b3744;
}

.mapro-help-content ul {
  margin: 0;
  padding-left: 1.1em;
  display: grid;
  gap: 8px;
}

.mapro-help-content li {
  font-size: calc(12px * var(--mapro-font-scale));
  line-height: 1.45;
}

#mapro-help-close {
  background: none;
  border: none;
  font-size: 24px;
  color: #999;
  cursor: pointer;
  padding: 0 8px;
  min-width: 40px;
  min-height: 40px;
  line-height: 1;
  border-radius: 8px;
}

.mapro-info-content {
  display: grid;
  gap: 10px;
}

.mapro-info-section {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.8);
}

.mapro-info-section-title {
  margin: 0 0 6px;
  font-size: calc(12px * var(--mapro-font-scale));
  line-height: 1.25;
  color: #334155;
}

.mapro-info-floor-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.mapro-info-floor-meta strong {
  font-size: calc(13px * var(--mapro-font-scale));
  line-height: 1.2;
  color: #0f172a;
}

.mapro-info-floor-meta span {
  font-size: calc(11px * var(--mapro-font-scale));
  line-height: 1.2;
  color: #475569;
}

.mapro-info-content p,
.mapro-info-content li {
  font-size: calc(12px * var(--mapro-font-scale));
  line-height: 1.5;
  color: #334155;
}

#mapro-info-close {
  background: none;
  border: none;
  font-size: 24px;
  color: #999;
  cursor: pointer;
  padding: 0 8px;
  min-width: 40px;
  min-height: 40px;
  line-height: 1;
  border-radius: 8px;
}

.mapro-status {
  position: static;
  left: auto;
  bottom: auto;
  margin: 0;
  width: 100%;
  max-width: 100%;
  white-space: normal;
}

.mapro-floor-stack-toggle,
.mapro-floor-3d-toggle {
  min-width: auto;
  padding: 8px 10px;
  align-items: center;
}

.mapro-floor-stack-toggle .mapro-floor-stack-updated {
  display: none !important;
}

.mapro-floor-stack-meta .floor-updated {
  font-size: 10px;
  line-height: 1.2;
  color: #607080;
  text-align: right;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mapro-floor-stack-label {
  font-size: calc(11px * var(--mapro-font-scale));
}

.mapro-tools-row {
  gap: 4px;
  padding: 4px;
  justify-content: flex-end;
  flex-wrap: nowrap;
}

.mapro-tools-row .mapro-zoom-group { display: none; }

.mapro-tools-row.is-no-filter {
  grid-template-columns: var(--mapro-control-size) var(--mapro-control-size);
  grid-template-areas:
    "zoom zoom"
    "fit fullscreen";
}

.mapro-tools-row.is-no-filter #mapro-ann-filter-toggle {
  display: none !important;
}
.mapro-fit-btn { order: 1; }
.mapro-fullscreen-btn { order: 2; }
.mapro-ann-filter-toggle { order: 3; }

.mapro-view-mode-btn {
  min-width: 34px;
  width: auto;
  height: 34px;
  padding: 0 8px;
  gap: 4px;
}

.mapro-view-mode-btn span {
  display: inline;
}

.mapro-view-mode-btn i {
  font-size: 14px;
}

.mapro-system-row .mapro-view-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.mapro-system-row .mapro-view-subgroup {
  border-radius: 8px;
}

.mapro-system-row .mapro-view-mode-btn {
  min-width: 44px;
  height: 32px;
  padding: 0 7px;
  font-size: calc(11px * var(--mapro-font-scale));
}

.mapro-system-row .mapro-view-mode-btn span {
  display: inline;
}

.mapro-system-row .mapro-view-mode-btn.is-color {
  background: linear-gradient(90deg, #ef4444 0%, #f59e0b 50%, #22c55e 100%);
  color: #fff;
  border-right-color: rgba(255,255,255,0.45);
}

.mapro-system-row .mapro-view-mode-btn.is-color.is-active {
  background: linear-gradient(90deg, #dc2626 0%, #d97706 50%, #16a34a 100%);
  color: #fff;
}

.mapro-system-row .mapro-view-mode-btn.is-mono {
  background: linear-gradient(90deg, #111827 0%, #6b7280 52%, #f3f4f6 100%);
  color: #fff;
}

.mapro-system-row .mapro-view-mode-btn.is-mono.is-active {
  background: linear-gradient(90deg, #0b1220 0%, #4b5563 52%, #d1d5db 100%);
  color: #fff;
}

.mapro-fontsize-group {
  height: 34px;
  padding: 0 5px;
  border-radius: 8px;
}

.mapro-fontsize-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.mapro-fontsize-select {
  min-width: 92px;
  height: 26px;
  padding: 0 22px 0 6px;
  font-size: 11px;
}

.mapro-fontsize-label span {
  display: none;
}

.mapro-fit-btn,
.mapro-fullscreen-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  gap: 0;
  justify-content: center;
}

.mapro-fit-btn .mapro-btn-text,
.mapro-fullscreen-btn .mapro-btn-text {
  display: none !important;
}

.mapro-fit-btn i,
.mapro-fullscreen-btn i {
  font-size: 15px;
}

.mapro-control-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
}

.mapro-control {
  min-width: 0;
  width: auto;
  max-width: 150px;
  padding: 3px 6px;
  gap: 0;
}

.mapro-control-label {
  font-size: 9px;
}

.mapro-mode-select {
  width: auto;
  min-width: 108px;
  max-width: 132px;
  min-height: 30px;
  padding: 2px 6px;
  font-size: 12px;
}

.mapro-ann-filter-toggle {
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  gap: 0;
}

.mapro-ann-filter-toggle span {
  display: none;
}

.mapro-tools-row .mapro-ann-filter-toggle {
  border: 1px solid var(--mapro-ui-border);
  background: var(--mapro-ui-panel-strong);
  border-radius: 8px;
}

.mapro-tools-row .mapro-ann-filter-toggle.is-active {
  background: #2271b1;
  border-color: #1c5b8f;
  color: #fff;
}

.mapro-system-row .mapro-hazard-toggle {
  height: 32px;
  padding: 0 9px;
  border-radius: 8px;
}

.mapro-nav-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.mapro-nav-item {
  flex: 1 1 0;
  min-width: 0;
  min-height: 50px;
  max-width: none;
}

.mapro-nav-item .value {
  font-size: calc(13px * var(--mapro-font-scale));
}

.mapro-nav-item .label {
  display: inline-flex;
  align-items: center;
  width: 100%;
  gap: 4px;
}

.mapro-nav-item .label .nav-list-indicator {
  margin-left: auto;
  font-size: calc(10px * var(--mapro-font-scale));
  color: #8a95a3;
  line-height: 1;
}

.mapro-nav-mode {
  display: none !important;
}

.mapro-nav-mode .label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: calc(10px * var(--mapro-font-scale));
  line-height: 1;
  color: #666;
  font-weight: 600;
  white-space: nowrap;
}

.mapro-nav-mode .label .nav-icon {
  font-size: 12px;
  line-height: 1;
}

.mapro-nav-mode .mapro-mode-select {
  width: auto;
  min-width: 92px;
  max-width: 118px;
  min-height: 30px;
  font-size: calc(11px * var(--mapro-font-scale));
  padding: 2px 6px;
}

.mapro-ann-filter-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.mapro-ann-filter-item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  min-height: 74px;
  text-align: center;
  padding: 8px 6px;
}

.mapro-ann-filter-item input {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 14px;
  height: 14px;
}

.mapro-ann-filter-item .icon {
  font-size: 18px;
  line-height: 1;
}

.mapro-ann-filter-item .text {
  font-size: calc(11px * var(--mapro-font-scale));
  line-height: 1.25;
  text-align: center;
  white-space: normal;
}

.mapro-share-inline {
  margin-left: auto;
  justify-self: auto;
}

@media (max-width: 820px) and (orientation: portrait) {
  .mapro-overlay-tools {
    right: 6px;
    bottom: calc(max(6px, env(safe-area-inset-bottom)) + var(--mapro-bottom-overlay-offset));
  }

  .mapro-overlay-floor {
    left: 6px;
    bottom: calc(max(6px, env(safe-area-inset-bottom)) + var(--mapro-bottom-overlay-offset));
  }

  .mapro-tools-row {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 4px;
    gap: 4px;
  }

  .mapro-tools-row > .mapro-fit-btn,
  .mapro-tools-row > .mapro-fullscreen-btn,
  .mapro-tools-row > .mapro-map-only-toggle,
  .mapro-tools-row > .mapro-ann-filter-toggle {
    width: 34px;
    height: 34px;
  }

  .mapro-system-row {
    gap: 4px;
    padding: 3px;
  }

  .mapro-system-main {
    gap: 4px;
  }

  .mapro-system-row .mapro-fontsize-group {
    display: inline-flex;
    height: 30px;
    padding: 0 4px;
  }

  .mapro-system-row .mapro-fontsize-select {
    min-width: 74px;
    height: 24px;
    font-size: 10px;
  }

  .mapro-system-row .mapro-view-mode-btn {
    min-width: 40px;
    height: 30px;
    padding: 0 6px;
    font-size: 10px;
  }

  .mapro-help-btn {
    width: 32px;
    height: 32px;
  }

  .mapro-map {
    height: 100dvh;
    min-height: 0;
  }

  .mapro-ann-filter-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .mapro-ann-filter-item {
    min-height: 66px;
    padding: 6px 4px;
  }
}

.mapro-route-stats {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}

.mapro-route-stat {
  flex: 1 1 calc(33.333% - 1px);
  min-width: 90px;
  border-bottom: 1px solid rgba(148,163,184,0.3);
}

.mapro-route-stat:nth-last-child(-n+2) {
  border-bottom: 0;
}

@media (max-width: 1023px), (hover: none) and (pointer: coarse) {
  .mapro-zoom-group {
    display: none !important;
  }
  .mapro-map-shell.is-3d-open .mapro-zoom-group {
    display: inline-flex !important;
  }
}

@media (max-width: 820px) {
  .mapro-map {
    height: 100dvh;
    min-height: 0;
  }

  .mapro-overlay-floor {
    left: 8px;
    bottom: calc(max(8px, env(safe-area-inset-bottom)) + var(--mapro-bottom-overlay-offset));
  }

  .mapro-overlay-tools {
    right: 8px;
    bottom: calc(max(8px, env(safe-area-inset-bottom)) + var(--mapro-bottom-overlay-offset));
  }

  .mapro-overlay-bottom {
    left: 8px;
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    gap: 5px;
  }

  .mapro-route-stat {
    flex: 1 1 calc(50% - 1px);
  }

  .mapro-control {
    max-width: 138px;
    padding: 3px 5px;
  }

  .mapro-mode-select {
    min-width: 96px;
    max-width: 120px;
    min-height: 28px;
    font-size: 11px;
  }

  .mapro-nav-item {
    min-width: 100px;
  }

  .mapro-nav-mode {
    padding: 3px 5px;
  }

  .mapro-nav-mode .mapro-mode-select {
    min-width: 86px;
    max-width: 108px;
    min-height: 26px;
  }
}

@media (max-width: 820px) {
  .mapro-map {
    height: 100dvh;
    min-height: 0;
  }

  .mapro-overlay-floor {
    left: 6px;
    bottom: calc(max(6px, env(safe-area-inset-bottom)) + var(--mapro-bottom-overlay-offset));
  }

  .mapro-overlay-tools {
    right: 6px;
    bottom: calc(max(6px, env(safe-area-inset-bottom)) + var(--mapro-bottom-overlay-offset));
  }

  .mapro-overlay-bottom {
    left: 6px;
    right: 6px;
    bottom: max(6px, env(safe-area-inset-bottom));
    gap: 4px;
  }

  .mapro-route-stat {
    min-width: 82px;
  }

  .mapro-nav-item .label {
    font-size: calc(9px * var(--mapro-font-scale));
  }

  .mapro-control {
    max-width: 124px;
    padding: 2px 4px;
  }

  .mapro-mode-select {
    min-width: 90px;
    max-width: 112px;
    min-height: 26px;
    font-size: 11px;
  }

  .mapro-nav-mode {
    padding: 2px 4px;
  }

  .mapro-nav-mode .label {
    font-size: 9px;
  }

  .mapro-nav-mode .mapro-mode-select {
    min-width: 82px;
    max-width: 104px;
    min-height: 24px;
    font-size: 10px;
  }
}

@media (max-width: 820px) {
  .mapro-wrap[data-ui-font-size="sm"] { --mapro-font-scale: 1.08; }
  .mapro-wrap[data-ui-font-size="md"] { --mapro-font-scale: 1.24; }
  .mapro-wrap[data-ui-font-size="lg"] { --mapro-font-scale: 1.42; }
  .mapro-wrap[data-ui-font-size="xl"] { --mapro-font-scale: 1.6; }
}

/* Final unified control layout */
.mapro-wrap {
  --mapro-control-scale: 1.5;
  --mapro-control-size: calc(34px * var(--mapro-control-scale));
  --mapro-control-gap: max(4px, calc(4px * var(--mapro-control-scale)));
}

.mapro-wrap[data-ui-font-size="sm"] { --mapro-control-scale: 1.35; }
.mapro-wrap[data-ui-font-size="md"] { --mapro-control-scale: 1.5; }
.mapro-wrap[data-ui-font-size="lg"] { --mapro-control-scale: 1.72; }
.mapro-wrap[data-ui-font-size="xl"] { --mapro-control-scale: 1.95; }

#mapro-system-row { order: 1; }
.mapro-nav-bar { order: 2; }

.mapro-tools-row {
  display: grid;
  grid-template-columns: var(--mapro-control-size) var(--mapro-control-size);
  grid-template-areas:
    "zoom zoom"
    "maponly filter"
    "fit fullscreen";
  align-items: center;
  justify-items: end;
  justify-content: end;
  gap: var(--mapro-control-gap);
  padding: 0;
  border-radius: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#mapro-ann-filter-toggle {
  grid-area: filter;
  width: var(--mapro-control-size);
  height: var(--mapro-control-size);
  min-height: var(--mapro-control-size);
  padding: 0;
  gap: 0;
  justify-content: center;
}

#mapro-map-only-toggle {
  grid-area: maponly;
  width: var(--mapro-control-size);
  height: var(--mapro-control-size);
  min-height: var(--mapro-control-size);
  padding: 0;
  gap: 0;
  justify-content: center;
}

#mapro-fit-btn,
#mapro-fullscreen-btn {
  width: var(--mapro-control-size);
  height: var(--mapro-control-size);
  min-height: var(--mapro-control-size);
  padding: 0;
  gap: 0;
  justify-content: center;
}

#mapro-fit-btn { grid-area: fit; }
#mapro-fullscreen-btn { grid-area: fullscreen; }
#mapro-system-zoom { grid-area: zoom; justify-self: end; }

.mapro-ann-filter-toggle i,
.mapro-map-only-toggle i,
.mapro-fit-btn i,
.mapro-fullscreen-btn i {
  font-size: clamp(15px, calc(12px * var(--mapro-control-scale)), 24px);
}

#mapro-ann-filter-toggle,
#mapro-map-only-toggle {
  border: 0 !important;
  background: rgba(255,255,255,0.66) !important;
  box-shadow: 0 4px 14px rgba(15,23,42,0.18);
  backdrop-filter: blur(4px);
}

#mapro-ann-filter-toggle:hover,
#mapro-map-only-toggle:hover {
  background: rgba(255,255,255,0.84) !important;
}

#mapro-fit-btn,
#mapro-fullscreen-btn {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none;
  backdrop-filter: none;
}
#mapro-fit-btn i,
#mapro-fullscreen-btn i {
  color: #1f2937;
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 0 0 6px rgba(255,255,255,0.8);
}
#mapro-fit-btn:hover,
#mapro-fullscreen-btn:hover {
  background: transparent !important;
}
#mapro-fit-btn:hover i,
#mapro-fullscreen-btn:hover i {
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 0 0 10px rgba(255,255,255,1);
}

.mapro-system-row {
  gap: var(--mapro-control-gap);
  padding: calc(4px * var(--mapro-control-scale));
}

.mapro-system-main {
  gap: var(--mapro-control-gap);
}

.mapro-help-btn {
  width: var(--mapro-control-size);
  height: var(--mapro-control-size);
  border-radius: calc(8px * min(var(--mapro-control-scale), 1.4));
}

.mapro-help-btn i {
  font-size: clamp(16px, calc(12px * var(--mapro-control-scale)), 24px);
}

.mapro-system-row .mapro-view-mode-btn {
  width: var(--mapro-control-size);
  height: var(--mapro-control-size);
  min-width: 0;
  padding: 0;
  gap: 0;
}

.mapro-system-row .mapro-view-mode-btn span { display: none !important; }

.mapro-system-row .mapro-view-mode-btn i {
  font-size: clamp(14px, calc(11px * var(--mapro-control-scale)), 22px);
}

.mapro-system-row .mapro-view-subgroup {
  border-radius: calc(8px * min(var(--mapro-control-scale), 1.4));
}

.mapro-system-row .mapro-view-mode-btn.is-color {
  background: linear-gradient(135deg, #60a5fa 0%, #2563eb 58%, #1d4ed8 100%);
  color: #fff;
  border-right-color: rgba(255,255,255,0.34);
}

.mapro-system-row .mapro-view-mode-btn.is-color.is-active {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 56%, #1e40af 100%);
}

.mapro-system-row .mapro-view-mode-btn.is-mono {
  background: linear-gradient(135deg, #111827 0%, #6b7280 56%, #f3f4f6 100%);
  color: #fff;
}

.mapro-system-row .mapro-view-mode-btn.is-mono.is-active {
  background: linear-gradient(135deg, #0f172a 0%, #4b5563 56%, #d1d5db 100%);
}

.mapro-fontsize-group {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.mapro-fontsize-toggle {
  width: var(--mapro-control-size);
  height: var(--mapro-control-size);
  min-height: var(--mapro-control-size);
  padding: 0;
  border-radius: calc(8px * min(var(--mapro-control-scale), 1.4));
  border: 1px solid var(--mapro-ui-border);
  background: var(--mapro-ui-panel-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mapro-fontsize-toggle i {
  font-size: clamp(15px, calc(11px * var(--mapro-control-scale)), 22px);
  line-height: 1;
}

.mapro-fontsize-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  z-index: 760;
  min-width: 98px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  border-radius: 10px;
  border: 1px solid var(--mapro-ui-border);
  background: rgba(255,255,255,0.96);
  box-shadow: 0 10px 24px rgba(0,0,0,0.2);
}

.mapro-fontsize-option {
  border: 1px solid #d0d7df;
  background: rgba(255,255,255,0.96);
  color: #1f2937;
  border-radius: 8px;
  min-height: 30px;
  padding: 0 10px;
  font-size: calc(12px * var(--mapro-font-scale));
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}

.mapro-fontsize-option:hover {
  background: #eef5fb;
  border-color: #99b9d8;
}

.mapro-fontsize-option.is-active {
  background: #1d4ed8;
  color: #fff;
  border-color: #1e40af;
}

.mapro-system-row .mapro-hazard-toggle {
  height: var(--mapro-control-size);
  padding: 0 clamp(8px, calc(8px * var(--mapro-control-scale)), 14px);
  border: 1px solid #111827;
  background: rgba(255,255,255,0.98);
  color: #111827;
  border-radius: calc(8px * min(var(--mapro-control-scale), 1.4));
  gap: clamp(4px, calc(4px * var(--mapro-control-scale)), 8px);
  font-size: calc(12px * var(--mapro-font-scale));
  font-weight: 800;
}

.mapro-system-row .mapro-hazard-toggle:hover {
  background: #f8fafc;
  border-color: #0f172a;
  color: #111827;
}

.mapro-system-row .mapro-hazard-toggle.is-active {
  background: #effcf4;
  border-color: #16a34a;
  color: #111827;
}

.mapro-hazard-square-icon {
  display: inline-block;
  width: clamp(11px, calc(9px * var(--mapro-control-scale)), 18px);
  height: clamp(11px, calc(9px * var(--mapro-control-scale)), 18px);
  border-radius: 2px;
  border: 1px solid rgba(0,0,0,0.24);
  background: #07a83a;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22);
}

.mapro-nav-item,
.mapro-nav-mode {
  min-height: var(--mapro-control-size);
}

.mapro-nav-mode {
  flex: 1 1 0;
  min-width: 0;
  max-width: 220px;
  padding: 4px 6px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(2px);
}

.mapro-nav-item .label,
.mapro-nav-mode .label {
  font-size: calc(11px * var(--mapro-font-scale));
}

.mapro-nav-item .value {
  font-size: calc(15px * var(--mapro-font-scale));
}

.mapro-nav-mode .mapro-mode-select {
  min-height: clamp(28px, calc(var(--mapro-control-size) - 10px), 50px);
  min-width: clamp(110px, calc(84px * var(--mapro-control-scale)), 180px);
  font-size: calc(12px * var(--mapro-font-scale));
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0 18px 0 0;
  color: #1f2937;
  font-weight: 700;
}

@media (max-width: 820px) and (orientation: portrait) {
  .mapro-tools-row {
    gap: max(4px, calc(var(--mapro-control-gap) * 0.72));
    padding: calc(3px * var(--mapro-control-scale));
  }

  #mapro-ann-filter-toggle {
    width: var(--mapro-control-size);
  }
}

body.mapro-pseudo-fullscreen-active {
  margin: 0 !important;
  padding: 0 !important;
}

body.mapro-pseudo-fullscreen-active #wpadminbar {
  display: none !important;
}

.mapro-wrap.is-pseudo-fullscreen,
.mapro-wrap.is-pseudo-fullscreen .mapro-map-shell {
  left: 0;
  top: 0;
  width: 100dvw;
  max-width: 100dvw;
}

.mapro-wrap.is-pseudo-fullscreen .mapro-map {
  width: 100dvw !important;
}

.mapro-sub-dot,
.mapro-route-point-dot {
  width: 19px;
  height: 19px;
  background: var(--mapro-point-color, rgba(31, 191, 0, 0.96));
  box-shadow: 0 0 0 2px rgba(31,191,0,0.30), 0 2px 6px rgba(0,0,0,0.26);
}

.mapro-floor-3d-point {
  width: 17px;
  height: 17px;
  background: var(--mapro-point-color, rgba(31, 191, 0, 0.96));
  box-shadow: 0 0 0 2px rgba(31,191,0,0.32), 0 2px 7px rgba(0,0,0,0.28);
  animation: maproPointIdlePulse3d 0.95s ease-in-out infinite;
}

.mapro-label {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #7b8794;
  color: #1f2937;
  box-shadow: 0 2px 8px rgba(0,0,0,0.24);
}

.mapro-route-ann-callout {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(21, 36, 51, 0.3);
}

.mapro-route-info-marker {
  background: transparent !important;
  border: 0 !important;
}

.mapro-route-info-btn {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.92);
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
  color: #fff;
  box-shadow: 0 6px 16px rgba(37,99,235,0.38);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.mapro-route-info-btn i {
  font-size: 18px;
  line-height: 1;
}

.mapro-route-info-leaflet-popup .leaflet-popup-content-wrapper {
  border-radius: 10px;
  border: 1px solid #d6dee6;
}

.mapro-route-info-popup {
  min-width: 170px;
  color: #1f2937;
}

.mapro-route-info-popup h4 {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.2;
}

.mapro-route-info-popup .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0;
  font-size: 12px;
}

.mapro-route-info-popup .mapro-route-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.mapro-route-info-popup .metric-card {
  border: 1px solid #d9e2ec;
  border-radius: 8px;
  padding: 7px 8px;
  background: #f8fbff;
  display: grid;
  gap: 4px;
}

.mapro-route-info-popup .metric-card.is-wide {
  grid-column: 1 / -1;
}

.mapro-route-info-popup .metric-card .key {
  color: #475569;
  font-size: calc(11px * var(--mapro-font-scale));
  line-height: 1.2;
  font-weight: 700;
}

.mapro-route-info-popup .metric-card strong {
  color: #0f172a;
  font-size: calc(13px * var(--mapro-font-scale));
  line-height: 1.2;
  font-weight: 800;
}

/* Final compact line layout and hazard icon button */
.mapro-system-row {
  overflow: hidden;
}

.mapro-system-main {
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.mapro-system-main::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.mapro-system-main > * {
  flex: 0 0 auto;
}

.mapro-system-main .mapro-hazard-toggle {
  margin-left: auto;
  width: var(--mapro-control-size);
  min-width: var(--mapro-control-size);
  height: var(--mapro-control-size);
  min-height: var(--mapro-control-size);
  padding: 0;
  border-radius: calc(8px * min(var(--mapro-control-scale), 1.4));
  justify-content: center;
  gap: 0;
  background: rgba(255,255,255,0.92) !important;
}

.mapro-system-main .mapro-hazard-toggle .label {
  display: none !important;
}

.mapro-system-main .mapro-hazard-toggle .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.mapro-hazard-iso-icon {
  display: inline-block;
  width: clamp(20px, calc(16px * var(--mapro-control-scale)), 34px);
  height: clamp(20px, calc(16px * var(--mapro-control-scale)), 34px);
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.16);
  background: #fff url("../img/emergency-exit-iso.svg") center / 86% 86% no-repeat;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}

.mapro-system-main .mapro-hazard-toggle.is-active .mapro-hazard-iso-icon {
  box-shadow: 0 0 0 2px rgba(22,163,74,0.26), 0 2px 8px rgba(0,0,0,0.22);
}

.mapro-wrap.is-pseudo-fullscreen {
  inset: 0 !important;
}

.mapro-wrap.is-pseudo-fullscreen .mapro-map-shell {
  height: 100dvh !important;
}

.mapro-wrap.is-pseudo-fullscreen .mapro-map {
  height: 100dvh !important;
}

/* Nav value formatting + unified category panel (point + annotation) */
.mapro-nav-item .value {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.15;
}

.mapro-nav-item .value.is-selected {
  font-size: calc(13px * var(--mapro-font-scale));
  color: #1f2937 !important;
}

.mapro-nav-item .value.is-unset,
.mapro-nav-item .value .mapro-nav-unset {
  font-size: calc(11px * var(--mapro-font-scale)) !important;
  color: #8a95a3 !important;
  font-weight: 700;
  line-height: 1.1;
}

.mapro-nav-point-name {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.mapro-nav-floor-name {
  display: block;
  font-size: calc(10px * var(--mapro-font-scale));
  color: #6b7280;
  font-weight: 800;
  line-height: 1.1;
}

.mapro-ann-filter-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mapro-ann-filter-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mapro-ann-filter-section-title {
  margin: 0;
  padding: 0 2px;
  font-size: calc(11px * var(--mapro-font-scale));
  line-height: 1.2;
  color: #4b5563;
  font-weight: 800;
}

.mapro-ann-filter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

@media (max-width: 360px) {
  .mapro-ann-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Fullscreen hint pulse (until first click) */
#mapro-fullscreen-btn.is-attention {
  border-color: rgba(37, 99, 235, 0.82) !important;
  background: rgba(37, 99, 235, 0.08) !important;
  animation: maproFullscreenHintPulse 1.8s ease-in-out infinite;
  position: relative;
}

@keyframes maproFullscreenHintPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 4px 14px rgba(15, 23, 42, 0.18),
      0 0 0 0 rgba(37, 99, 235, 0.45);
  }
  50% {
    transform: scale(1.10);
    box-shadow:
      0 8px 24px rgba(15, 23, 42, 0.26),
      0 0 0 10px rgba(37, 99, 235, 0);
  }
}

/* Smartphone: stronger attention animation with background & larger ripple */
.mapro-map-shell.is-smartphone-layout #mapro-fullscreen-btn.is-attention,
.mapro-map-shell.is-smartphone-top-tool-group #mapro-fullscreen-btn.is-attention,
.mapro-map-shell.is-smartphone-grid-locked #mapro-fullscreen-btn.is-attention {
  background: rgba(37, 99, 235, 0.13) !important;
  border-color: rgba(37, 99, 235, 0.9) !important;
  border-width: 2px !important;
  border-style: solid !important;
  animation: maproFullscreenHintPulseMobile 1.6s ease-in-out infinite !important;
}

@keyframes maproFullscreenHintPulseMobile {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 4px 16px rgba(37, 99, 235, 0.28),
      0 0 0 0 rgba(37, 99, 235, 0.5);
  }
  50% {
    transform: scale(1.14);
    box-shadow:
      0 8px 28px rgba(37, 99, 235, 0.36),
      0 0 0 12px rgba(37, 99, 235, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  #mapro-fullscreen-btn.is-attention {
    animation: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.28), 0 4px 14px rgba(15, 23, 42, 0.18);
  }
  .mapro-map-shell.is-smartphone-layout #mapro-fullscreen-btn.is-attention,
  .mapro-map-shell.is-smartphone-top-tool-group #mapro-fullscreen-btn.is-attention,
  .mapro-map-shell.is-smartphone-grid-locked #mapro-fullscreen-btn.is-attention {
    animation: none !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35), 0 4px 16px rgba(37, 99, 235, 0.22) !important;
  }
}

/* Final consistency fixes (PC/SP common) */
.mapro-system-row {
  overflow: visible !important;
}

.mapro-system-main {
  overflow-y: visible !important;
}

.mapro-fontsize-group,
.mapro-fontsize-menu {
  z-index: 900 !important;
}

.mapro-system-main .mapro-hazard-toggle {
  border: 1px solid var(--mapro-ui-border) !important;
  background: var(--mapro-ui-panel-strong) !important;
  color: #2a323a !important;
  box-shadow: none !important;
}

.mapro-system-main .mapro-hazard-toggle:hover {
  background: #f4f6f8 !important;
  border-color: #b8c5d3 !important;
  color: #1f2937 !important;
}

.mapro-system-main .mapro-hazard-toggle.is-active {
  background: #eef6ff !important;
  border-color: #9fc2e9 !important;
  color: #1f2937 !important;
}

.mapro-hazard-iso-icon {
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 6px;
}

.mapro-nav-mode {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  min-height: var(--mapro-control-size);
  padding: 4px 6px !important;
}

.mapro-nav-mode .label {
  font-size: calc(10px * var(--mapro-font-scale)) !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  color: #666 !important;
}

.mapro-nav-mode .mapro-mode-select {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 14px 0 0 !important;
  min-height: 0 !important;
  height: auto !important;
  font-size: calc(11px * var(--mapro-font-scale)) !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
  color: #1f2937 !important;
}

.mapro-route-info-popup .actions {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #e2e8f0;
}

.mapro-route-copy-btn {
  width: 100%;
  border: 1px solid #d1dae4;
  background: #f8fafc;
  color: #1f2937;
  border-radius: 8px;
  min-height: 32px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
}

.mapro-route-copy-btn:hover {
  background: #eef4fb;
  border-color: #b6c7db;
}

.mapro-route-copy-btn i {
  font-size: 15px;
  line-height: 1;
}

.mapro-route-point-dot {
  background: var(--mapro-point-color, rgba(31, 191, 0, 0.96));
}

.mapro-route-point-dot.is-shape-rounded {
  border-radius: 6px;
}

.mapro-route-point-dot.is-shape-square {
  border-radius: 2px;
}

.mapro-route-point-dot.is-shape-diamond {
  border-radius: 3px;
  transform: rotate(45deg);
}

.mapro-route-point-dot.is-shape-diamond .mapro-route-point-symbol,
.mapro-route-point-dot.is-shape-diamond .mapro-point-base-symbol {
  transform: rotate(-45deg);
}

.mapro-point-base-symbol {
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 10px;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.24);
}

.mapro-point-base-symbol i {
  font-size: 11px;
  line-height: 1;
}

.leaflet-marker-icon.is-route-start .mapro-point-base-symbol,
.leaflet-marker-icon.is-route-goal .mapro-point-base-symbol {
  opacity: 0;
}

.mapro-floor-3d-point {
  background: var(--mapro-point-color, rgba(31, 191, 0, 0.96));
}

.mapro-floor-3d-point.is-shape-rounded {
  border-radius: 5px;
}

.mapro-floor-3d-point.is-shape-square {
  border-radius: 2px;
}

.mapro-floor-3d-point.is-shape-diamond {
  border-radius: 3px;
  --mapro-3d-point-shape-transform: rotate(45deg);
  transform: var(--mapro-3d-point-transform-base);
}

.mapro-floor-3d-point-base-symbol {
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 10px;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.24);
}

.mapro-floor-3d-point-base-symbol i {
  font-size: 11px;
  line-height: 1;
}

.mapro-floor-3d-point.is-shape-diamond .mapro-floor-3d-point-base-symbol,
.mapro-floor-3d-point.is-shape-diamond .mapro-floor-3d-point-symbol {
  transform: rotate(-45deg);
}

.mapro-floor-3d-point.is-start .mapro-floor-3d-point-base-symbol,
.mapro-floor-3d-point.is-goal .mapro-floor-3d-point-base-symbol {
  opacity: 0;
}

/* Desktop also uses mobile-like footer layout */
@media (min-width: 821px) {
  .mapro-system-main {
    flex-wrap: nowrap !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
  }

  .mapro-system-main .mapro-fontsize-group {
    position: relative;
    z-index: 980;
  }

  .mapro-system-main .mapro-fontsize-menu {
    z-index: 1200 !important;
  }

  .mapro-system-main .mapro-view-mode-toggle { order: 10; }
  .mapro-system-main .mapro-fontsize-group { order: 20; }
  .mapro-system-main .mapro-hazard-toggle { order: 30; margin-left: 0; }
  .mapro-system-main #mapro-ann-filter-toggle {
    order: 40;
    width: var(--mapro-control-size);
    min-width: var(--mapro-control-size);
    height: var(--mapro-control-size);
    min-height: var(--mapro-control-size);
    padding: 0;
    gap: 0;
    justify-content: center;
    border: 1px solid var(--mapro-ui-border) !important;
    background: var(--mapro-ui-panel-strong) !important;
    border-radius: calc(8px * min(var(--mapro-control-scale), 1.4));
  }

  .mapro-nav-bar {
    padding: 3px;
    gap: 3px;
  }

  .mapro-nav-item {
    min-width: 100px;
    max-width: 146px;
    padding: 3px 4px;
  }

  .mapro-nav-item .label {
    font-size: calc(9px * var(--mapro-font-scale));
    gap: 3px;
  }

  .mapro-nav-item .value {
    margin-top: 1px;
    font-size: calc(11px * var(--mapro-font-scale));
  }

  .mapro-nav-mode {
    padding: 3px 5px;
    min-width: 100px;
    max-width: 136px;
  }

  .mapro-nav-mode .label {
    font-size: calc(9px * var(--mapro-font-scale));
  }

  .mapro-nav-mode .mapro-mode-select {
    min-width: 86px;
    max-width: 108px;
    min-height: 26px;
    font-size: calc(10px * var(--mapro-font-scale));
  }

  .mapro-route-link-meta {
    display: none;
  }

  .mapro-route-link-btn {
    gap: 4px;
    padding: 4px 6px;
  }

  .mapro-route-link-icon {
    font-size: 18px;
  }
}

/* Landscape unified floating footer (PC + SP landscape) */
@media (orientation: landscape) {
  .mapro-overlay-bottom {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(1160px, calc(100% - 20px)) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  .mapro-overlay-bottom > * {
    width: auto !important;
    max-width: min(100%, 1120px) !important;
    min-width: 0;
  }

  .mapro-overlay-bottom > :not(#mapro-status) {
    margin-left: auto;
    margin-right: auto;
  }

  .mapro-overlay-bottom .mapro-system-row,
  .mapro-overlay-bottom .mapro-nav-bar {
    width: fit-content !important;
    max-width: min(100%, 1120px);
  }

  .mapro-overlay-bottom .mapro-system-row {
    justify-content: center;
  }

  .mapro-overlay-bottom .mapro-system-main {
    justify-content: center;
  }

  .mapro-overlay-bottom .mapro-nav-bar {
    justify-content: center;
    align-items: center;
  }
}

/* Final menu + annotation scaling fixes */
.mapro-map-shell.is-map-only .mapro-overlay-bottom {
  display: none !important;
}

.mapro-map-shell.is-map-only .mapro-ann-filter-panel {
  display: none !important;
}

.mapro-map-shell.is-map-only .leaflet-marker-icon.mapro-sub-icon,
.mapro-map-shell.is-map-only .leaflet-marker-icon.mapro-ann-icon {
  display: none !important;
}

.mapro-map-shell.is-map-only .mapro-floor-3d-point-layer,
.mapro-map-shell.is-map-only .mapro-floor-3d-annotation-layer {
  display: none !important;
}

#mapro-map-only-toggle.is-active {
  background: rgba(59,130,246,0.95) !important;
  color: #fff !important;
}

.mapro-nav-mode.is-mode-menu-enabled #mapro-mode-select {
  display: none !important;
}

.mapro-nav-mode.is-mode-menu-enabled {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  min-height: var(--mapro-control-size);
  min-width: 0;
  max-width: 220px;
  padding: 4px 6px !important;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.94);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  cursor: pointer;
  overflow: hidden;
}

.mapro-nav-mode.is-mode-menu-enabled:focus-visible {
  outline: 2px solid rgba(34, 113, 177, 0.5);
  outline-offset: 2px;
}

.mapro-nav-mode.is-mode-menu-enabled .label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: calc(10px * var(--mapro-font-scale));
  line-height: 1;
  color: #666;
  font-weight: 600;
  white-space: nowrap;
}

.mapro-nav-mode.is-mode-menu-enabled .label .nav-list-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  color: #8a95a3;
  font-size: calc(10px * var(--mapro-font-scale));
}

.mapro-nav-mode.is-mode-menu-enabled .mapro-mode-menu-group {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
  margin-top: 2px;
}

.mapro-nav-mode.is-mode-menu-enabled .mapro-mode-menu-toggle {
  width: 100%;
  min-height: clamp(28px, calc(var(--mapro-control-size) - 16px), 44px);
  min-width: clamp(110px, calc(84px * var(--mapro-control-scale)), 180px);
  padding: 0;
  border-radius: 0;
  border: 0;
  background: transparent;
  color: #1f2937;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  font-size: calc(15px * var(--mapro-font-scale));
  font-weight: 700;
  line-height: 1.1;
  box-shadow: none;
  pointer-events: auto;
  cursor: pointer;
}

.mapro-nav-mode.is-mode-menu-enabled .mapro-mode-menu-value {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: calc(15px * var(--mapro-font-scale));
  font-weight: 700;
}

.mapro-nav-mode.is-mode-menu-enabled .mapro-mode-menu-caret {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: calc(11px * var(--mapro-font-scale));
  color: #8a95a3;
}

.mapro-mode-menu {
  min-width: 126px;
}

/* Vertical preference (行き方) button – merged into unified routing button. */
.mapro-nav-vpref {
  display: none !important;
}
.mapro-nav-vpref .mapro-vpref-group {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
}
.mapro-nav-vpref .mapro-vpref-toggle {
  width: 100%;
  min-height: clamp(28px, calc(var(--mapro-control-size, 40px) - 16px), 44px);
  padding: 0;
  border-radius: 0;
  border: 0;
  background: transparent;
  color: #1f2937;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  font-size: calc(15px * var(--mapro-font-scale, 1));
  font-weight: 700;
  line-height: 1.1;
  box-shadow: none;
  pointer-events: auto;
  cursor: pointer;
}
.mapro-nav-vpref .mapro-vpref-value {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: calc(10px * var(--mapro-font-scale, 1));
  font-weight: 700;
  letter-spacing: -0.02em;
}
.mapro-nav-vpref .mapro-vpref-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mapro-nav-vpref .mapro-vpref-icon-glyph {
  font-size: clamp(16px, calc(14px * var(--mapro-font-scale, 1)), 22px);
}
.mapro-vpref-menu {
  min-width: 140px;
}

/* Unified routing options modal */
.mapro-routing-options-modal {
  width: min(74%, 380px) !important;
  height: auto !important;
  max-height: min(62%, 460px) !important;
}
.mapro-routing-options-content {
  padding: 0 !important;
  overflow-y: auto;
}
.mapro-routing-section {
  padding-bottom: 4px;
}
.mapro-routing-section + .mapro-routing-section {
  border-top: 1px solid #eee;
}
.mapro-routing-option {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  cursor: pointer;
  transition: background 0.15s;
}
.mapro-routing-option:hover {
  background: #f4f7fa;
}
.mapro-routing-option:active {
  background: #eaf0f6;
}
.mapro-routing-option-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #f1f5f9;
  color: #475569;
  font-size: 14px;
}
.mapro-routing-option.is-active .mapro-routing-option-icon {
  background: rgba(43, 112, 239, 0.1);
  color: #2b70ef;
}
.mapro-routing-option .name {
  flex: 1 1 auto;
  font-size: calc(13px * var(--mapro-font-scale, 1));
  font-weight: 500;
  color: #334155;
}
.mapro-routing-option.is-active .name {
  color: #1e40af;
  font-weight: 600;
}
.mapro-routing-check {
  flex: 0 0 auto;
  display: none;
  align-items: center;
  justify-content: center;
  color: #2b70ef;
  font-size: 16px;
}
.mapro-routing-option.is-active .mapro-routing-check {
  display: inline-flex;
}

/* Nav routing button in nav bar */
.mapro-nav-routing {
  cursor: pointer;
}

.mapro-mode-option {
  text-align: left;
}

.mapro-mode-option.mapro-fontsize-option {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  text-align: left;
  padding: 0 12px;
}

.mapro-mode-option .mapro-mode-option-icon {
  flex: 0 0 1.25em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25em;
  height: 1.25em;
}

.mapro-mode-option .mapro-mode-option-icon-glyph::before {
  transform: none !important;
}

.mapro-mode-option .mapro-mode-option-label {
  min-width: 0;
  flex: 1 1 auto;
}

.mapro-fontsize-menu.is-floating,
.mapro-mode-menu.is-floating {
  position: fixed !important;
  left: 0;
  top: 0;
  right: auto !important;
  bottom: auto !important;
  z-index: 2147483600 !important;
  max-height: min(54vh, 360px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  pointer-events: auto;
}

.mapro-ann-icon .mapro-ann-icon-symbol {
  display: inline-block;
  width: calc(24px * var(--mapro-font-scale));
  height: calc(24px * var(--mapro-font-scale));
  line-height: calc(24px * var(--mapro-font-scale));
  margin-left: calc((24px - (24px * var(--mapro-font-scale))) / 2);
  margin-top: calc((24px - (24px * var(--mapro-font-scale))) / 2);
  font-size: calc(16px * var(--mapro-font-scale));
  text-align: center;
  transition: transform 0.2s;
  animation: none;
}

.mapro-ann-icon.mapro-ann-on-route .mapro-ann-icon-symbol {
  animation: maproRouteAnnGlow 1.15s ease-in-out infinite;
  background: rgba(255,255,255,0.9);
  border-radius: 999px;
  box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.55), 0 0 18px rgba(255, 153, 0, 0.85);
}

.mapro-ann-icon:hover .mapro-ann-icon-symbol {
  transform: scale(1.2);
  cursor: pointer;
  animation: none;
}

.mapro-ann-icon.is-report .mapro-ann-icon-symbol,
.mapro-ann-icon .mapro-ann-icon-symbol.is-report {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.94);
  color: #1f2937;
  border-radius: 9px;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.96), 0 2px 8px rgba(30,41,59,0.35);
}

.mapro-ann-icon .mapro-ann-icon-symbol.is-report .bi::before {
  font-size: calc(13px * var(--mapro-font-scale));
  line-height: 1;
}

.mapro-ann-icon .mapro-ann-icon-symbol .mapro-ann-icon-image {
  width: calc(16px * var(--mapro-font-scale));
  height: calc(16px * var(--mapro-font-scale));
  object-fit: contain;
  display: block;
}

.mapro-floor-3d-annotation {
  width: calc(20px * var(--mapro-font-scale));
  height: calc(20px * var(--mapro-font-scale));
  font-size: calc(12px * var(--mapro-font-scale));
  line-height: calc(18px * var(--mapro-font-scale));
}

.mapro-floor-3d-annotation.is-report {
  background: rgba(255,255,255,0.96);
  color: #111827;
  border-color: rgba(255,255,255,0.95);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.36), 0 2px 8px rgba(30,41,59,0.36);
}

.mapro-floor-3d-annotation.is-report i.bi::before {
  font-size: 11px;
  line-height: 1;
}

.mapro-floor-3d-annotation .mapro-ann-icon-image {
  width: 70%;
  height: 70%;
  object-fit: contain;
  display: block;
}

.mapro-ann-report-meta {
  display: grid;
  gap: 6px;
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px solid rgba(216, 178, 62, 0.45);
  border-radius: 10px;
  background: rgba(255, 249, 224, 0.9);
}

.mapro-ann-report-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #374151;
  line-height: 1.4;
}

.mapro-ann-report-meta-item i.bi::before {
  font-size: 12px;
  color: #d0ad2e;
}

.mapro-ann-report-meta-item strong {
  font-size: 11px;
  font-weight: 700;
  color: #6b7280;
}

/* Final interaction fixes */
.leaflet-image-layer.mapro-map-image--mono {
  filter: grayscale(1) !important;
  transition: none !important;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
  transform: translateZ(0);
}

.mapro-map-shell.is-map-zooming .leaflet-image-layer.mapro-map-image--mono {
  filter: grayscale(1) !important;
}

.mapro-tools-row .mapro-zoom-group {
  display: none;
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  gap: var(--mapro-control-gap);
  margin-left: 0;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

.mapro-tools-row .mapro-zoom-btn {
  width: var(--mapro-control-size);
  height: var(--mapro-control-size);
  border: 0;
  border-radius: calc(8px * min(var(--mapro-control-scale), 1.4));
  font-size: clamp(16px, calc(12px * var(--mapro-control-scale)), 24px);
  color: #1f2937;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.mapro-tools-row .mapro-zoom-btn i {
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 0 0 6px rgba(255,255,255,0.8);
}

.mapro-tools-row .mapro-zoom-btn:hover {
  background: transparent;
}
.mapro-tools-row .mapro-zoom-btn:hover i {
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 0 0 10px rgba(255,255,255,1);
}

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .mapro-tools-row .mapro-zoom-group {
    display: flex;
  }
}

@media (max-width: 1023px), (hover: none) and (pointer: coarse) {
  .mapro-tools-row .mapro-zoom-group {
    display: none !important;
  }
}

.mapro-nav-bar {
  gap: max(6px, calc(5px * var(--mapro-font-scale)));
  padding: max(6px, calc(5px * var(--mapro-font-scale)));
}

.mapro-nav-item,
.mapro-nav-mode,
.mapro-nav-mode.is-mode-menu-enabled {
  min-height: clamp(72px, calc(54px + (12px * var(--mapro-font-scale))), 116px);
}

.mapro-nav-item {
  padding: 8px 10px;
}

.mapro-nav-item .label,
.mapro-nav-mode .label,
.mapro-nav-mode.is-mode-menu-enabled .label {
  font-size: calc(12px * var(--mapro-font-scale)) !important;
}

.mapro-nav-item .value,
.mapro-nav-mode.is-mode-menu-enabled .mapro-mode-menu-value {
  font-size: calc(20px * var(--mapro-font-scale)) !important;
  line-height: 1.12;
}

.mapro-nav-mode.is-mode-menu-enabled .mapro-mode-menu-toggle {
  min-height: calc(34px * var(--mapro-font-scale));
}

@media (max-width: 820px) {
  .mapro-nav-item,
  .mapro-nav-mode,
  .mapro-nav-mode.is-mode-menu-enabled {
    min-height: clamp(64px, calc(50px + (10px * var(--mapro-font-scale))), 98px);
  }

  .mapro-nav-item {
    padding: 7px 8px;
  }

  .mapro-nav-item .label,
  .mapro-nav-mode .label,
  .mapro-nav-mode.is-mode-menu-enabled .label {
    font-size: calc(11px * var(--mapro-font-scale)) !important;
  }

  .mapro-nav-item .value,
  .mapro-nav-mode.is-mode-menu-enabled .mapro-mode-menu-value {
    font-size: calc(17px * var(--mapro-font-scale)) !important;
  }
}

.mapro-hazard-mode-hint {
  position: absolute;
  left: 10px;
  top: calc(102px + env(safe-area-inset-top));
  max-width: min(86vw, 360px);
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(20,172,92,0.38);
  background: rgba(255,255,255,0.95);
  color: #1f2937;
  font-size: calc(11px * var(--mapro-font-scale));
  font-weight: 700;
  line-height: 1.35;
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
  z-index: 646;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .2s ease, transform .2s ease;
}

.mapro-hazard-mode-hint.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.mapro-hazard-mode-hint[hidden] {
  display: none !important;
}

.mapro-map-shell.is-smartphone-layout .mapro-hazard-mode-hint {
  left: 8px;
  top: calc(98px + env(safe-area-inset-top));
  max-width: min(92vw, 320px);
}

/* Keep start/goal value size fixed (unset and selected) */
.mapro-nav-item .value,
.mapro-nav-item .value.is-selected,
.mapro-nav-item .value.is-unset,
.mapro-nav-item .value .mapro-nav-unset {
  font-size: calc(11px * var(--mapro-font-scale)) !important;
  line-height: 1.15 !important;
}

.mapro-nav-item .mapro-nav-point-name {
  font-size: calc(11px * var(--mapro-font-scale)) !important;
  line-height: 1.15 !important;
  font-weight: 700;
}

.mapro-nav-item .mapro-nav-floor-name {
  font-size: calc(10px * var(--mapro-font-scale)) !important;
  line-height: 1.1 !important;
}

/* Keep popup menus anchored to their buttons (Safari stable) */
.mapro-fontsize-group,
.mapro-mode-menu-group {
  position: relative;
}

.mapro-fontsize-menu,
.mapro-mode-menu,
.mapro-fontsize-menu.is-floating,
.mapro-mode-menu.is-floating {
  position: absolute !important;
  right: 0 !important;
  left: auto !important;
  bottom: calc(100% + 8px) !important;
  top: auto !important;
  z-index: 2600 !important;
  max-height: min(54vh, 360px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mapro-nav-mode.is-mode-menu-enabled .mapro-mode-menu,
.mapro-nav-mode.is-mode-menu-enabled .mapro-mode-menu.is-floating {
  right: 0 !important;
  left: auto !important;
}

/* Make "なにで行く？" card match "どこから/どこへ" and keep single arrow */
.mapro-nav-mode.is-mode-menu-enabled {
  flex: 1 1 0 !important;
  min-width: 112px !important;
  max-width: none !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  background: rgba(255,255,255,0.92) !important;
  box-shadow: none !important;
}

.mapro-nav-mode.is-mode-menu-enabled .label {
  display: inline-flex !important;
  align-items: center !important;
  width: 100% !important;
  gap: 4px !important;
}

.mapro-nav-mode.is-mode-menu-enabled .label .nav-list-indicator {
  margin-left: auto !important;
}

.mapro-nav-mode.is-mode-menu-enabled .mapro-mode-menu-group {
  width: 100%;
  margin-top: 2px;
}

.mapro-nav-mode.is-mode-menu-enabled .mapro-mode-menu-toggle {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  justify-content: flex-start !important;
  color: #1f2937 !important;
}

.mapro-nav-mode.is-mode-menu-enabled .mapro-mode-menu-value {
  font-size: calc(11px * var(--mapro-font-scale)) !important;
  line-height: 1.15 !important;
  font-weight: 700;
}

.mapro-nav-mode.is-mode-menu-enabled .mapro-mode-menu-caret {
  display: none !important;
}

@media (max-width: 820px) and (orientation: portrait) {
  .mapro-overlay-bottom,
  .mapro-system-row,
  .mapro-system-main {
    overflow: visible !important;
  }

  .mapro-fontsize-group {
    z-index: 2800 !important;
  }

  .mapro-fontsize-group .mapro-fontsize-menu,
  .mapro-fontsize-group .mapro-fontsize-menu.is-floating {
    bottom: calc(100% + 10px) !important;
    right: 0 !important;
    left: auto !important;
    max-height: min(46vh, 280px);
  }
}

/* Nav arrow on value-right */
.mapro-nav-item .label .nav-list-indicator,
.mapro-nav-mode .label .nav-list-indicator {
  display: none !important;
}

.mapro-nav-item .value {
  position: relative;
  padding-right: 16px !important;
}

.mapro-nav-item .value::after {
  content: "keyboard_arrow_down";
  font-family: "Material Symbols Outlined" !important;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: calc(10px * var(--mapro-font-scale));
  line-height: 1;
  color: #8a95a3;
  font-feature-settings: "liga";
  -webkit-font-feature-settings: "liga";
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

.mapro-nav-mode.is-mode-menu-enabled .mapro-mode-menu-toggle {
  position: relative;
  padding-right: 16px !important;
}

.mapro-nav-mode.is-mode-menu-enabled .mapro-mode-menu-toggle::after {
  content: "keyboard_arrow_down";
  font-family: "Material Symbols Outlined" !important;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: calc(10px * var(--mapro-font-scale));
  line-height: 1;
  color: #8a95a3;
  font-feature-settings: "liga";
  -webkit-font-feature-settings: "liga";
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

.mapro-nav-mode.is-mode-menu-enabled .mapro-mode-menu-value {
  font-size: calc(11px * var(--mapro-font-scale)) !important;
  line-height: 1.15 !important;
}

/* Start/goal point name: no wrap, truncate with ellipsis (keep card shape stable) */
.mapro-nav-item .value {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.mapro-nav-item .mapro-nav-point-name {
  display: block;
  width: 100%;
  min-width: 0;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.mapro-nav-item .mapro-nav-floor-name {
  display: block;
  width: 100%;
  min-width: 0;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* 3D close/reset buttons are unified into global controls */
.mapro-floor-3d-header {
  display: none !important;
}

/* Make icons visually larger while keeping the button frames unchanged */
.mapro-tools-row .bi::before,
.mapro-system-row .bi::before,
.mapro-nav-bar .bi::before,
.mapro-overlay-info .bi::before,
.mapro-searchbar .bi::before,
.mapro-route-info-btn .bi::before {
  transform: scale(1.34);
  transform-origin: center;
}

.mapro-nav-item .value::after,
.mapro-nav-mode.is-mode-menu-enabled .mapro-mode-menu-toggle::after {
  font-size: calc(12px * var(--mapro-font-scale));
}

/* Hover/press feedback for clickable UI controls */
.mapro-tools-row button,
.mapro-system-row button,
.mapro-floor-picker button,
.mapro-nav-item,
.mapro-list-item,
.mapro-ann-filter-item,
.mapro-fontsize-option,
.mapro-mode-option,
.mapro-route-info-btn,
.mapro-route-copy-btn,
.mapro-hazard-fab,
#mapro-modal-close,
#mapro-ann-close,
#mapro-help-close,
#mapro-terms-close,
#mapro-info-close,
.mapro-info-toggle {
  transition: transform 0.16s cubic-bezier(0.2, 0.75, 0.2, 1), box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, filter 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .mapro-tools-row button:hover,
  .mapro-system-row button:hover,
  .mapro-floor-picker button:hover,
  .mapro-nav-item:hover,
  .mapro-list-item:hover,
  .mapro-ann-filter-item:hover,
  .mapro-fontsize-option:hover,
  .mapro-mode-option:hover,
  .mapro-route-info-btn:hover,
  .mapro-route-copy-btn:hover,
  .mapro-hazard-fab:hover,
  #mapro-modal-close:hover,
  #mapro-ann-close:hover,
  #mapro-help-close:hover,
#mapro-terms-close:hover,
  #mapro-info-close:hover,
  .mapro-info-toggle:hover {
    transform: translateY(-1px);
    filter: saturate(1.06);
  }
}

.mapro-tools-row button:active,
.mapro-system-row button:active,
.mapro-floor-picker button:active,
.mapro-nav-item:active,
.mapro-list-item:active,
.mapro-ann-filter-item:active,
.mapro-fontsize-option:active,
.mapro-mode-option:active,
.mapro-route-info-btn:active,
.mapro-route-copy-btn:active,
.mapro-hazard-fab:active,
#mapro-modal-close:active,
#mapro-ann-close:active,
#mapro-help-close:active,
#mapro-terms-close:active,
#mapro-info-close:active,
.mapro-info-toggle:active {
  transform: scale(0.96);
}

/* Keep fit icon visible in active state (override transparent bg rules) */
#mapro-fit-btn.is-active {
  background: #2271b1 !important;
  color: #fff !important;
  border-color: #1c5b8f !important;
}

#mapro-fit-btn.is-active .bi::before {
  color: #fff !important;
}

#mapro-fit-btn i,
#mapro-fit-btn .bi::before {
  opacity: 1 !important;
  visibility: visible !important;
  color: currentColor !important;
}

/* Bottom-left text links (Matterport-like) */
.mapro-overlay-legal {
  left: 12px;
  right: auto;
  bottom: calc(max(10px, env(safe-area-inset-bottom)) + 6px);
  transform: none;
  width: auto;
  z-index: 734;
  pointer-events: none;
}

.mapro-legal-links {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 2px 4px;
  border-radius: 0;
  background: transparent;
  border: 0;
  backdrop-filter: none;
  box-shadow: none;
}

.mapro-legal-link {
  border: 0;
  background: transparent;
  color: #111;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 1px 3px;
  cursor: pointer;
}

.mapro-legal-link:hover {
  text-decoration: underline;
  color: #111;
}

.mapro-legal-sep {
  color: #111;
  font-size: 11px;
  line-height: 1;
  padding: 0 3px;
}

/* Category icon visibility and active state */
#mapro-ann-filter-toggle.is-active {
  background: #2271b1 !important;
  border-color: #1c5b8f !important;
  color: #fff !important;
}

#mapro-ann-filter-toggle i,
#mapro-ann-filter-toggle .bi::before {
  opacity: 1 !important;
  visibility: visible !important;
  color: currentColor !important;
}

/* Pastel rainbow color button */
.mapro-system-row .mapro-view-mode-btn.is-color {
  background: linear-gradient(120deg, #f9a8d4 0%, #fdba74 22%, #fde68a 44%, #86efac 66%, #93c5fd 82%, #c4b5fd 100%) !important;
  color: #0f172a !important;
}

.mapro-system-row .mapro-view-mode-btn.is-color.is-active {
  background: linear-gradient(120deg, #f472b6 0%, #fb923c 22%, #facc15 44%, #4ade80 66%, #60a5fa 82%, #a78bfa 100%) !important;
  color: #0f172a !important;
}

.mapro-system-row .mapro-view-mode-btn.is-color i,
.mapro-system-row .mapro-view-mode-btn.is-color .bi::before {
  color: #0f172a !important;
}

@media (max-width: 820px) {
  .mapro-overlay-legal {
    left: 8px;
    bottom: calc(max(8px, env(safe-area-inset-bottom)) + 4px);
  }

  .mapro-legal-links {
    padding: 3px 7px;
  }

  .mapro-legal-link {
    font-size: 10px;
  }

  .mapro-overlay-info {
    top: calc(8px + env(safe-area-inset-top));
    left: 8px;
  }

  .mapro-info-toggle {
    width: fit-content;
    max-width: min(90vw, 280px);
    min-width: 0;
    padding: 7px 8px;
    gap: 7px;
  }
  .mapro-info-topbar {
    gap: 4px;
  }
  .mapro-day-plan-select {
    height: 42px;
    min-height: 42px;
    min-width: 132px;
    max-width: min(48vw, 170px);
    padding: 7px 24px 7px 8px;
    font-size: calc(13.5px * var(--mapro-font-scale));
  }
}

/* Floor picker: move to system row as stacked-layers icon */
.mapro-overlay-floor {
  display: none !important;
}

#mapro-floor-stack-quick-toggle {
  width: var(--mapro-control-size);
  height: var(--mapro-control-size);
  min-height: var(--mapro-control-size);
  min-width: var(--mapro-control-size);
  border: 0 !important;
  border-radius: calc(8px * min(var(--mapro-control-scale), 1.4));
  background: rgba(255,255,255,0.66) !important;
  box-shadow: 0 4px 14px rgba(15,23,42,0.18);
  backdrop-filter: blur(4px);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

#mapro-floor-stack-quick-toggle:hover {
  background: rgba(255,255,255,0.84) !important;
}

#mapro-floor-stack-quick-toggle.is-active {
  background: #2271b1 !important;
  color: #fff !important;
}

#mapro-floor-stack-quick-toggle .mapro-floor-stack-quick-icon .bi::before {
  font-size: clamp(14px, calc(11px * var(--mapro-control-scale)), 22px);
  line-height: 1;
}

#mapro-floor-stack-quick-toggle .mapro-floor-stack-quick-current {
  position: absolute;
  right: 2px;
  bottom: 2px;
  min-width: 20px;
  max-width: calc(var(--mapro-control-size) - 12px);
  padding: 1px 4px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.8);
  color: #fff;
  font-size: calc(9px * var(--mapro-font-scale));
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#mapro-floor-stack-quick-toggle.is-active .mapro-floor-stack-quick-current {
  background: rgba(255,255,255,0.95);
  color: #1d4ed8;
}

.mapro-system-main #mapro-floor-stack-quick-toggle {
  order: 9;
}

.mapro-system-main .mapro-view-mode-toggle {
  order: 10;
}

/* Route info popup: prevent overflow + 2-column cards */
.mapro-route-info-leaflet-popup .leaflet-popup-content-wrapper {
  max-width: min(88vw, 340px) !important;
}

.mapro-route-info-leaflet-popup .leaflet-popup-content {
  margin: 10px 12px !important;
  min-width: 0 !important;
}

.mapro-route-info-popup {
  min-width: min(84vw, 230px);
  width: min(84vw, 320px);
}

.mapro-route-info-popup h4 {
  margin: 0 0 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: calc(13px * var(--mapro-font-scale));
  line-height: 1.2;
}

.mapro-route-info-popup .title-icon {
  font-size: calc(14px * var(--mapro-font-scale));
  line-height: 1;
}

.mapro-route-info-popup .actions {
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid #e2e8f0;
}

.mapro-route-copy-btn {
  font-size: calc(12px * var(--mapro-font-scale));
  min-height: calc(32px * max(1, var(--mapro-font-scale)));
}

.mapro-route-copy-btn i {
  font-size: calc(15px * var(--mapro-font-scale));
}

@media (max-width: 520px) {
  .mapro-route-info-popup .mapro-route-info-grid {
    grid-template-columns: 1fr;
  }
}

/* Font size control should scale all information texts */
.mapro-modal-header h3 {
  font-size: calc(15px * var(--mapro-font-scale));
}

#mapro-ann-title {
  font-size: calc(15px * var(--mapro-font-scale));
  line-height: 1.3;
}

#mapro-ann-content,
#mapro-ann-content p,
#mapro-ann-content li,
#mapro-ann-content a {
  font-size: calc(12px * var(--mapro-font-scale));
  line-height: 1.6;
}

#mapro-ann-content img,
#mapro-ann-content video,
#mapro-ann-content iframe {
  max-width: 100%;
  height: auto;
}

.mapro-edge-closed-detail ul {
  margin: 0;
  padding-left: 1.1em;
  display: grid;
  gap: 8px;
}

.mapro-edge-closed-detail li {
  font-size: calc(12px * var(--mapro-font-scale));
  line-height: 1.5;
  color: #334155;
}

.mapro-edge-closed-icon {
  pointer-events: auto;
}

.mapro-edge-closed-icon-btn {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(185, 28, 28, 0.48);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 2px 8px rgba(185, 28, 28, 0.24);
  color: #b91c1c;
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.mapro-edge-closed-icon-btn:hover {
  background: #ffffff;
  box-shadow: 0 3px 10px rgba(185, 28, 28, 0.3);
}

.mapro-route-line-caution-aura {
  filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.34));
}

.mapro-route-line-caution-core {
  filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.44));
}

.mapro-route-caution-icon {
  pointer-events: auto;
}

.mapro-route-caution-icon-btn {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(217, 119, 6, 0.56);
  border-radius: 999px;
  background: rgba(255, 251, 235, 0.96);
  box-shadow: 0 2px 9px rgba(180, 83, 9, 0.28);
  color: #b45309;
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.mapro-route-caution-icon-btn:hover {
  background: #fff7ed;
  box-shadow: 0 3px 10px rgba(180, 83, 9, 0.34);
}

.mapro-edge-caution-detail li strong {
  color: #9a3412;
}

/* Nearest restroom quick action + hazard info placement */
.mapro-system-main #mapro-restroom-toggle {
  width: var(--mapro-control-size);
  min-width: var(--mapro-control-size);
  height: var(--mapro-control-size);
  min-height: var(--mapro-control-size);
  padding: 0;
  border: 1px solid var(--mapro-ui-border) !important;
  border-radius: calc(8px * min(var(--mapro-control-scale), 1.4));
  background: var(--mapro-ui-panel-strong) !important;
  color: #2a323a !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-left: auto;
  order: 29;
}

.mapro-system-main #mapro-restroom-toggle:hover {
  background: #f4f6f8 !important;
  border-color: #b8c5d3 !important;
  color: #1f2937 !important;
}

.mapro-system-main #mapro-restroom-toggle .label {
  display: none !important;
}

.mapro-system-main #mapro-restroom-toggle .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.mapro-system-main #mapro-restroom-toggle .bi::before {
  font-size: clamp(16px, calc(13px * var(--mapro-control-scale)), 24px);
  line-height: 1;
}

.mapro-system-main .mapro-hazard-toggle {
  margin-left: 6px !important;
  order: 30;
}

.mapro-system-main #mapro-gps-locate-toggle {
  order: 27;
  margin-left: 0 !important;
  height: var(--mapro-control-size);
  min-height: var(--mapro-control-size);
  width: var(--mapro-control-size);
  min-width: var(--mapro-control-size);
  padding: 0;
  border-radius: calc(8px * min(var(--mapro-control-scale), 1.4));
  border: 1px solid rgba(14, 116, 144, 0.3);
  background: linear-gradient(135deg, rgba(186, 230, 253, 0.92) 0%, rgba(224, 242, 254, 0.95) 100%);
  color: #0f4c81;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.mapro-system-main #mapro-gps-locate-toggle .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mapro-system-main #mapro-gps-locate-toggle .mapro-gps-icon-combo {
  position: relative;
  width: clamp(16px, calc(13px * var(--mapro-control-scale)), 24px);
  height: clamp(16px, calc(13px * var(--mapro-control-scale)), 24px);
}

.mapro-system-main #mapro-gps-locate-toggle .mapro-gps-icon-pin {
  color: currentColor;
}

.mapro-system-main #mapro-gps-locate-toggle .mapro-gps-icon-pin::before {
  font-size: clamp(15px, calc(12px * var(--mapro-control-scale)), 24px);
  line-height: 1;
  transform: none !important;
}

.mapro-system-main #mapro-gps-locate-toggle .mapro-gps-icon-gps {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: clamp(10px, calc(8px * var(--mapro-control-scale)), 14px);
  height: clamp(10px, calc(8px * var(--mapro-control-scale)), 14px);
  border-radius: 999px;
  background: rgba(15, 76, 129, 0.96);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(2, 24, 45, 0.28);
}

.mapro-system-main #mapro-gps-locate-toggle .mapro-gps-icon-gps::before {
  font-size: clamp(7px, calc(6px * var(--mapro-control-scale)), 10px);
  line-height: 1;
  transform: none !important;
}

.mapro-system-main #mapro-gps-locate-toggle .label {
  display: none !important;
}

.mapro-system-main #mapro-gps-locate-toggle .bi::before {
  line-height: 1;
}

.mapro-system-main #mapro-gps-locate-toggle:hover {
  border-color: rgba(14, 116, 144, 0.46);
  background: linear-gradient(135deg, rgba(153, 213, 244, 0.98) 0%, rgba(214, 240, 252, 0.98) 100%);
  color: #0c3d67;
}

.mapro-system-main #mapro-gps-locate-toggle.is-loading {
  opacity: 0.75;
  cursor: wait;
}

.mapro-hazard-fab {
  top: calc(84px + env(safe-area-inset-top)) !important;
  border-color: #148a55 !important;
  background: linear-gradient(135deg, #16a34a 0%, #0f7a49 100%) !important;
  box-shadow: 0 10px 22px rgba(20, 140, 85, 0.34) !important;
}

.mapro-map-shell.is-side-controls .mapro-hazard-fab {
  top: calc(84px + env(safe-area-inset-top)) !important;
}

.mapro-map-shell.is-smartphone-layout .mapro-hazard-fab {
  top: calc(78px + env(safe-area-inset-top)) !important;
}

.mapro-hazard-mode-hint {
  top: calc(132px + env(safe-area-inset-top)) !important;
}

.mapro-map-shell.is-smartphone-layout .mapro-hazard-mode-hint {
  top: calc(122px + env(safe-area-inset-top)) !important;
}

/* Restroom spotlight */
.leaflet-marker-icon.is-restroom-highlight .mapro-route-point-dot {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.42), 0 0 22px rgba(5, 150, 105, 0.68);
  animation: maproRestroomPulse 1s ease-in-out infinite;
}

.leaflet-marker-icon.is-restroom-highlight .mapro-point-base-symbol,
.leaflet-marker-icon.is-restroom-highlight .mapro-route-point-symbol {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

.mapro-floor-3d-point.is-restroom-highlight {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.42), 0 0 18px rgba(5, 150, 105, 0.66);
  animation: maproRestroomPulse 1s ease-in-out infinite;
}

@keyframes maproRestroomPulse {
  0%, 100% {
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.34), 0 0 14px rgba(5, 150, 105, 0.5);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.52), 0 0 24px rgba(5, 150, 105, 0.78);
  }
}

/* ===== 2026-02 UI fixes ===== */
.mapro-status.is-centered {
  left: 50% !important;
  transform: translateX(-50%);
  text-align: center;
  max-width: min(92vw, 460px);
  white-space: normal;
}

/* Smartphone: move status message to top of map shell. */
@media (max-width: 820px) {
  .mapro-map-shell .mapro-status {
    position: fixed !important;
    top: 6px !important;
    left: 50% !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    z-index: 2147483500 !important;
    max-width: min(92vw, 360px) !important;
    width: auto !important;
    text-align: center !important;
    white-space: normal !important;
    font-size: calc(11px * var(--mapro-font-scale, 1)) !important;
    background: rgba(255,255,255,0.95) !important;
    box-shadow: 0 2px 8px rgba(15,23,42,0.16) !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
  }
}

.mapro-nearest-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid #eceff2;
  background: #fff;
}

.mapro-nearest-filter[hidden] {
  display: none !important;
}

.mapro-nearest-filter-label {
  font-size: 12px;
  line-height: 1.2;
  color: #475569;
  font-weight: 700;
  white-space: nowrap;
}

.mapro-nearest-category {
  flex: 1;
  min-width: 0;
  height: 32px;
  border: 1px solid #cfd8e1;
  border-radius: 7px;
  padding: 0 8px;
  font-size: 13px;
  line-height: 1.2;
  color: #1f2937;
  background: #fff;
}

.mapro-list-item .distance {
  margin-left: auto;
  color: #0f6ab7;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
  white-space: nowrap;
}

/* Keep legal links and MAPRO always at the very bottom */
.mapro-map-shell {
  --mapro-fixed-footer-row-height: 28px;
}

.mapro-overlay-legal {
  left: 10px !important;
  right: auto !important;
  bottom: max(4px, env(safe-area-inset-bottom)) !important;
  z-index: 710 !important;
}

.mapro-overlay-brand {
  left: auto !important;
  right: 10px !important;
  bottom: max(4px, env(safe-area-inset-bottom)) !important;
  transform: none !important;
  width: auto !important;
  z-index: 710 !important;
  pointer-events: none;
}

.mapro-brand-row {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.mapro-overlay-brand .mapro-footer-hazard-btn {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, 0.98) !important;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.3) !important;
  color: #fff !important;
  box-shadow: 0 2px 9px rgba(0, 0, 0, 0.22) !important;
  backdrop-filter: blur(2px);
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  white-space: nowrap;
}

.mapro-overlay-brand .mapro-footer-hazard-btn:hover {
  border-color: rgba(255, 255, 255, 1) !important;
  background: rgba(15, 23, 42, 0.46) !important;
  color: #fff !important;
}

.mapro-overlay-brand .mapro-footer-hazard-btn.is-active {
  border-color: rgba(255, 255, 255, 1) !important;
  background: rgba(15, 23, 42, 0.58) !important;
  color: #fff !important;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.32) !important;
}

.mapro-overlay-brand .mapro-footer-hazard-btn .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mapro-overlay-brand .mapro-footer-hazard-btn .label {
  display: inline-flex !important;
  align-items: center;
}

.mapro-overlay-brand .mapro-footer-hazard-btn .mapro-hazard-iso-icon {
  width: 15px;
  height: 15px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.95) url("../img/emergency-exit-iso.svg") center / 84% 84% no-repeat;
  box-shadow: none;
}

.mapro-brand-version {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  color: rgba(100, 116, 139, 0.72);
  letter-spacing: 0.02em;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.mapro-overlay-bottom {
  bottom: calc(max(10px, env(safe-area-inset-bottom)) + var(--mapro-fixed-footer-row-height)) !important;
}

.mapro-system-main .mapro-view-mode-toggle {
  order: 26 !important;
}

.mapro-system-main .mapro-fontsize-group {
  order: 27 !important;
  margin-left: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  height: auto !important;
}

.mapro-system-main #mapro-font-size-toggle {
  width: var(--mapro-control-size);
  min-width: var(--mapro-control-size);
  height: var(--mapro-control-size);
  min-height: var(--mapro-control-size);
  padding: 0 !important;
  border-radius: calc(8px * min(var(--mapro-control-scale), 1.4));
  border: 1px solid var(--mapro-ui-border) !important;
  background: var(--mapro-ui-panel-strong) !important;
  box-shadow: none !important;
  color: #1f2937 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mapro-system-main #mapro-font-size-toggle:hover,
.mapro-system-main #mapro-font-size-toggle:active {
  background: #f4f6f8 !important;
  border-color: #b8c5d3 !important;
}

.mapro-system-main #mapro-font-size-toggle .bi::before {
  font-size: clamp(14px, calc(11px * var(--mapro-control-scale)), 22px);
  line-height: 1;
}

.mapro-system-main #mapro-font-size-menu[hidden] {
  display: none !important;
}

.mapro-system-main .mapro-mode-quick-group {
  order: 28 !important;
  margin-left: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  height: auto !important;
}

.mapro-system-main #mapro-mode-menu-toggle.mapro-mode-quick-toggle {
  width: var(--mapro-control-size);
  min-width: var(--mapro-control-size);
  height: var(--mapro-control-size);
  min-height: var(--mapro-control-size);
  padding: 0 !important;
  border-radius: calc(8px * min(var(--mapro-control-scale), 1.4));
  border: 1px solid var(--mapro-ui-border) !important;
  background: var(--mapro-ui-panel-strong) !important;
  box-shadow: none !important;
  color: #1f2937 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.mapro-system-main #mapro-mode-menu-toggle.mapro-mode-quick-toggle:hover,
.mapro-system-main #mapro-mode-menu-toggle.mapro-mode-quick-toggle:active {
  background: #f4f6f8 !important;
  border-color: #b8c5d3 !important;
}

.mapro-system-main #mapro-mode-menu-toggle.mapro-mode-quick-toggle .mapro-mode-menu-value {
  display: none !important;
}

.mapro-system-main #mapro-mode-menu-toggle.mapro-mode-quick-toggle .mapro-mode-quick-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.mapro-system-main #mapro-mode-menu-toggle.mapro-mode-quick-toggle .mapro-mode-quick-icon-glyph::before {
  font-size: clamp(14px, calc(11px * var(--mapro-control-scale)), 22px);
  line-height: 1;
  transform: none !important;
}

.mapro-system-main #mapro-mode-menu {
  min-width: 108px;
}

.mapro-system-main #mapro-restroom-toggle {
  order: 29 !important;
  margin-left: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.mapro-system-main #mapro-gps-locate-toggle {
  order: 27 !important;
}

.mapro-system-main #mapro-restroom-toggle:hover,
.mapro-system-main #mapro-restroom-toggle:active {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
}

.mapro-system-main #mapro-restroom-toggle:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.mapro-system-main #mapro-restroom-toggle .mapro-restroom-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--mapro-control-size);
  min-width: var(--mapro-control-size);
  height: var(--mapro-control-size);
  min-height: var(--mapro-control-size);
  border-radius: calc(8px * min(var(--mapro-control-scale), 1.4));
  border: 1px solid rgba(71, 85, 105, 0.28);
  background: linear-gradient(90deg, rgba(147, 197, 253, 0.94) 0%, rgba(191, 219, 254, 0.92) 47%, rgba(254, 205, 211, 0.92) 53%, rgba(252, 165, 165, 0.94) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.56), 0 1px 4px rgba(15, 23, 42, 0.12);
  color: #1f2937;
  line-height: 1;
  font-weight: 700;
}

.mapro-system-main #mapro-restroom-toggle.is-active .mapro-restroom-icon {
  border-color: rgba(196, 36, 36, 0.52);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.62), 0 0 0 2px rgba(220, 38, 38, 0.16);
}

.mapro-system-main #mapro-restroom-toggle .mapro-restroom-icon i,
.mapro-system-main #mapro-restroom-toggle .mapro-restroom-icon .bi::before {
  color: #1f2937 !important;
}

.mapro-system-main #mapro-restroom-toggle .mapro-restroom-icon .bi::before {
  font-size: clamp(14px, calc(11px * var(--mapro-control-scale)), 22px) !important;
}

@media (max-width: 820px) {
  .mapro-map-shell {
    --mapro-fixed-footer-row-height: 24px;
  }

  .mapro-overlay-bottom {
    bottom: calc(max(8px, env(safe-area-inset-bottom)) + var(--mapro-fixed-footer-row-height)) !important;
  }

  .mapro-overlay-legal {
    left: 8px !important;
    bottom: max(3px, env(safe-area-inset-bottom)) !important;
  }

  .mapro-overlay-brand {
    right: 8px !important;
    bottom: max(3px, env(safe-area-inset-bottom)) !important;
  }

  .mapro-brand-row {
    gap: 6px;
  }

  .mapro-overlay-brand .mapro-footer-hazard-btn {
    min-height: 24px;
    padding: 4px 8px;
    font-size: 10px;
  }

}

/* ===== 2026-02 Neon Signal Theme (GO/STOP/WARN) ===== */
.mapro-wrap {
  --mapro-go-rgb: 31, 191, 0;
  --mapro-ui-accent: var(--mapro-signal-go-dark);
  --mapro-ui-focus-ring: 0 0 0 2px rgba(var(--mapro-go-rgb), 0.36);
}

.mapro-wrap .mapro-info-icon {
  background: rgba(var(--mapro-go-rgb), 0.16);
  color: var(--mapro-signal-go-dark);
}

.mapro-wrap .mapro-route-line {
  stroke: rgba(var(--mapro-go-rgb), 0.98);
  filter: drop-shadow(0 0 6px rgba(var(--mapro-go-rgb), 0.66));
}
.mapro-wrap .mapro-route-line.is-caution-route {
  stroke: rgba(245, 158, 11, 0.98);
  filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.76));
}
.mapro-wrap .mapro-route-line.mapro-route-line-gradient {
  filter: drop-shadow(0 0 8px rgba(var(--mapro-go-rgb), 0.6));
}
.mapro-wrap .mapro-route-line.mapro-route-line-gradient.is-caution-route {
  filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.66));
}
.mapro-wrap .mapro-route-line.mapro-route-line-blocked-aura {
  filter: drop-shadow(0 0 18px rgba(245, 158, 11, 0.72));
}
.mapro-wrap .mapro-route-line.mapro-route-line-blocked-core {
  filter: drop-shadow(0 0 12px rgba(245, 158, 11, 0.86));
}

.mapro-wrap .mapro-floor-3d-route-line {
  stroke: rgba(var(--mapro-go-rgb), 0.96);
  filter: drop-shadow(0 0 6px rgba(var(--mapro-go-rgb), 0.72));
}
.mapro-wrap .mapro-floor-3d-route-line.is-caution-route {
  stroke: rgba(245, 158, 11, 0.98);
  filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.72));
}
.mapro-wrap .mapro-floor-3d-route-line.is-fallback {
  stroke: rgba(var(--mapro-go-rgb), 0.96);
}
.mapro-wrap .mapro-floor-3d-route-line.is-cart-blocked {
  stroke: rgba(245, 158, 11, 0.98);
  filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.92));
}
.mapro-wrap .mapro-floor-3d-route-line.is-cart-caution {
  stroke: rgba(245, 158, 11, 0.98);
  filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.72));
}
.mapro-wrap .mapro-floor-3d-route-node.is-start,
.mapro-wrap .mapro-floor-3d-route-node.is-end {
  fill: rgba(var(--mapro-go-rgb), 0.98);
}
.mapro-wrap .mapro-floor-3d-route-node.is-transition {
  fill: rgba(255, 217, 61, 0.98);
  stroke: rgba(255, 233, 138, 0.95);
}
.mapro-wrap .mapro-floor-3d-route-vertical::before,
.mapro-wrap .mapro-floor-3d-route-vertical::after {
  background: linear-gradient(180deg, rgba(var(--mapro-go-rgb), 0.98) 0%, rgba(129, 221, 104, 0.92) 100%);
  box-shadow: 0 0 12px rgba(var(--mapro-go-rgb), 0.72);
}
.mapro-wrap .mapro-floor-3d-route-vertical.is-cart-blocked::before,
.mapro-wrap .mapro-floor-3d-route-vertical.is-cart-blocked::after {
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.98) 0%, rgba(253, 186, 116, 0.92) 100%);
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.78);
}
.mapro-wrap .mapro-floor-3d-route-vertical.is-cart-caution::before,
.mapro-wrap .mapro-floor-3d-route-vertical.is-cart-caution::after {
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.96) 0%, rgba(253, 186, 116, 0.9) 100%);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.62);
}
.mapro-wrap .mapro-floor-3d-route-vertical.is-caution-route::before,
.mapro-wrap .mapro-floor-3d-route-vertical.is-caution-route::after {
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.96) 0%, rgba(253, 186, 116, 0.9) 100%);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.62);
}
.mapro-wrap .mapro-floor-3d-route-world-beam.is-caution-route .mapro-floor-3d-route-beam-face.is-top {
  background: linear-gradient(180deg, rgba(255, 236, 194, 0.96) 0%, rgba(245, 158, 11, 0.96) 100%);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.62), 0 3px 8px rgba(5, 16, 24, 0.24);
}

.mapro-wrap .mapro-sub-dot,
.mapro-wrap .mapro-floor-3d-point {
  background: var(--mapro-point-color, rgba(var(--mapro-go-rgb), 0.96));
}
.mapro-wrap .mapro-pulse-dot {
  background: rgba(var(--mapro-go-rgb), 0.96) !important;
  box-shadow: 0 0 0 3px rgba(var(--mapro-go-rgb), 0.32), 0 2px 10px rgba(0,0,0,0.25) !important;
}
.mapro-wrap .leaflet-marker-icon.is-route-start .mapro-route-point-dot,
.mapro-wrap .leaflet-marker-icon.is-route-goal .mapro-route-point-dot,
.mapro-wrap .mapro-sub-dot.active,
.mapro-wrap .mapro-sub-dot.start-active,
.mapro-wrap .mapro-floor-3d-point.is-start,
.mapro-wrap .mapro-floor-3d-point.is-goal {
  background: rgba(var(--mapro-go-rgb), 0.98) !important;
  border-color: #fff !important;
  box-shadow: 0 0 0 3px rgba(var(--mapro-go-rgb), 0.42), 0 0 14px rgba(var(--mapro-go-rgb), 0.62) !important;
}

.mapro-wrap .mapro-floor-3d-point.is-evac-exit,
.mapro-wrap .mapro-evac-btn {
  background: rgba(var(--mapro-go-rgb), 0.98) !important;
  border-color: rgba(31, 191, 0, 0.92) !important;
  box-shadow: 0 0 0 3px rgba(var(--mapro-go-rgb), 0.3), 0 1px 6px rgba(0, 0, 0, 0.32);
}
.mapro-map-shell.is-hazard-active .mapro-floor-3d-point.is-evac-exit,
.mapro-map-shell.is-hazard-active .mapro-evac-btn {
  background: rgba(255, 77, 77, 0.98) !important;
  border-color: rgba(217, 54, 54, 0.92) !important;
  box-shadow: 0 0 0 3px rgba(255, 77, 77, 0.3), 0 1px 6px rgba(0, 0, 0, 0.32);
}

.mapro-wrap .mapro-ann-icon.mapro-ann-on-route div,
.mapro-wrap .mapro-floor-3d-annotation.is-on-route {
  box-shadow: 0 0 0 3px rgba(255, 217, 61, 0.55), 0 0 18px rgba(255, 217, 61, 0.85);
}

.mapro-wrap .mapro-hazard-toggle {
  border-color: rgba(31, 191, 0, 0.44) !important;
  background: linear-gradient(135deg, rgba(198, 255, 181, 0.96) 0%, rgba(168, 255, 149, 0.96) 100%) !important;
  color: #1f2937 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 1px 4px rgba(31,191,0,0.2) !important;
}
.mapro-wrap .mapro-hazard-toggle:hover {
  background: linear-gradient(135deg, rgba(185, 255, 166, 0.98) 0%, rgba(150, 255, 132, 0.98) 100%) !important;
  border-color: rgba(31, 191, 0, 0.56) !important;
}
.mapro-wrap .mapro-hazard-toggle.is-active {
  background: linear-gradient(135deg, rgba(132, 214, 111, 0.98) 0%, rgba(92, 174, 80, 0.98) 100%) !important;
  border-color: rgba(65, 130, 57, 0.9) !important;
  color: #0f2f0f !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.45), 0 2px 8px rgba(31, 116, 44, 0.28) !important;
}
.mapro-wrap .mapro-hazard-fab {
  border-color: rgba(54, 119, 48, 0.9) !important;
  background: linear-gradient(135deg, rgba(90, 165, 78, 0.96) 0%, rgba(61, 125, 55, 0.96) 100%) !important;
  box-shadow: 0 10px 22px rgba(28, 90, 44, 0.32) !important;
}
.mapro-wrap .mapro-hazard-fab.is-active {
  border-color: rgba(31, 88, 42, 0.95) !important;
  background: linear-gradient(135deg, rgba(73, 141, 63, 0.98) 0%, rgba(47, 95, 42, 0.98) 100%) !important;
  box-shadow: 0 10px 24px rgba(20, 66, 31, 0.44) !important;
}
.mapro-wrap .mapro-hazard-start-dot {
  background: rgba(255, 77, 77, 0.98);
  box-shadow: 0 0 0 2px rgba(255, 77, 77, 0.34), 0 0 14px rgba(255, 77, 77, 0.56);
}

.mapro-wrap .mapro-hazard-modal {
  left: 50% !important;
  right: auto !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  width: min(500px, calc(100% - 24px)) !important;
  max-height: min(76%, 620px) !important;
}
.mapro-wrap .mapro-map-shell.is-side-controls .mapro-hazard-modal {
  left: 50% !important;
  right: auto !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
}
.mapro-wrap .mapro-map-shell.is-smartphone-layout .mapro-hazard-modal {
  left: 50% !important;
  right: auto !important;
  top: 50% !important;
  bottom: auto !important;
  width: calc(100% - 20px) !important;
  max-height: calc(74% - env(safe-area-inset-bottom)) !important;
  transform: translate(-50%, -50%) !important;
}

.mapro-wrap .mapro-edge-closed-icon-btn {
  border-color: rgba(255, 77, 77, 0.55);
  box-shadow: 0 2px 8px rgba(255, 77, 77, 0.3);
  color: #d93636;
}

.mapro-wrap .leaflet-marker-icon.is-restroom-highlight .mapro-route-point-dot,
.mapro-wrap .mapro-floor-3d-point.is-restroom-highlight {
  box-shadow: 0 0 0 3px rgba(var(--mapro-go-rgb), 0.44), 0 0 22px rgba(var(--mapro-go-rgb), 0.72);
}

.mapro-wrap .mapro-list-item .distance {
  color: var(--mapro-signal-go-dark);
}

.mapro-wrap .mapro-system-main #mapro-restroom-toggle .mapro-restroom-icon {
  border-color: rgba(71, 85, 105, 0.3);
  background: linear-gradient(90deg, rgba(147, 197, 253, 0.94) 0%, rgba(191, 219, 254, 0.92) 47%, rgba(254, 205, 211, 0.92) 53%, rgba(252, 165, 165, 0.94) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.62), 0 1px 4px rgba(15, 23, 42, 0.12);
}
.mapro-wrap .mapro-system-main #mapro-restroom-toggle.is-active .mapro-restroom-icon {
  border-color: rgba(196, 36, 36, 0.52);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.62), 0 0 0 2px rgba(220, 38, 38, 0.16);
}

/* ===== Mobile 3D / Footer / Control polish ===== */
.mapro-wrap .bi-crosshair::before { content: "my_location"; }
.mapro-wrap .bi-tools::before { content: "sync"; }

.mapro-system-main {
  gap: 2px !important;
  padding: 2px 4px !important;
}

.mapro-fontsize-group,
#mapro-font-size-toggle,
#mapro-font-size-menu {
  display: none !important;
}

.mapro-system-main .mapro-view-mode-btn,
.mapro-system-main #mapro-font-size-toggle,
.mapro-system-main #mapro-mode-menu-toggle.mapro-mode-quick-toggle,
.mapro-system-main #mapro-restroom-toggle .mapro-restroom-icon,
.mapro-system-main #mapro-gps-locate-toggle {
  width: calc(var(--mapro-control-size) + 4px) !important;
  min-width: calc(var(--mapro-control-size) + 4px) !important;
  height: calc(var(--mapro-control-size) + 4px) !important;
  min-height: calc(var(--mapro-control-size) + 4px) !important;
}

.mapro-system-main #mapro-gps-locate-toggle {
  background: transparent !important;
  border-color: rgba(148, 163, 184, 0.48) !important;
  box-shadow: none !important;
}

.mapro-system-main #mapro-gps-locate-toggle:hover,
.mapro-system-main #mapro-gps-locate-toggle.is-loading {
  background: transparent !important;
  border-color: rgba(100, 116, 139, 0.68) !important;
}

.mapro-legal-links #mapro-hazard-toggle.mapro-legal-hazard-link {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #111 !important;
  padding: 1px 3px !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: auto !important;
}

.mapro-legal-links #mapro-hazard-toggle.mapro-legal-hazard-link .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mapro-legal-links #mapro-hazard-toggle.mapro-legal-hazard-link .mapro-hazard-iso-icon {
  width: 11px !important;
  height: 11px !important;
  border-radius: 3px;
  border: 1px solid rgba(17, 17, 17, 0.42);
  box-shadow: none !important;
  background-size: 84% 84% !important;
}

.mapro-legal-links #mapro-hazard-toggle.mapro-legal-hazard-link.is-active {
  color: #000 !important;
  font-weight: 700;
  opacity: 0.9;
}

.mapro-legal-links #mapro-hazard-toggle.mapro-legal-hazard-link.is-active .mapro-hazard-iso-icon {
  border-color: rgba(17, 17, 17, 0.66);
  filter: saturate(1.04) brightness(0.84);
}

@media (max-width: 820px) {
  .mapro-map-shell {
    --mapro-control-scale: 1.7;
    --mapro-control-gap: 2px;
  }

  .mapro-system-main {
    gap: 1px !important;
    padding: 2px 3px !important;
  }

  .mapro-system-main #mapro-gps-locate-toggle .label {
    display: none !important;
  }

}

/* Final: map-overlay icon row */
@media (min-width: 821px) {
  .mapro-tools-row {
    display: grid !important;
    grid-template-columns: var(--mapro-control-size) var(--mapro-control-size) !important;
    grid-template-areas:
      "zoom zoom"
      "maponly fullscreen" !important;
    align-items: center !important;
    justify-items: end !important;
    justify-content: end !important;
    gap: var(--mapro-control-gap) !important;
    padding: 0 !important;
    grid-auto-flow: row !important;
  }

  #mapro-system-zoom {
    grid-area: zoom !important;
    justify-self: end !important;
  }

  #mapro-map-only-toggle {
    grid-area: maponly !important;
  }

  #mapro-fullscreen-btn {
    grid-area: fullscreen !important;
  }
}

@media (max-width: 820px) {
  .mapro-tools-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: var(--mapro-control-gap) !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
    padding: 0 !important;
  }
}

/* 3D場所名ラベル: 文字上に被る疑似影を無効化 */
.mapro-floor-3d-point-label {
  text-shadow: none !important;
}

.mapro-floor-3d-point-label::after {
  content: none !important;
  display: none !important;
}

/* 3Dラベル: フロア端では地図外にはみ出して表示できるようにする */
.mapro-floor-3d-level {
  overflow: visible !important;
}

.mapro-floor-3d-scene {
  overflow: visible !important;
}

.mapro-floor-3d-thumb {
  border-radius: inherit;
  overflow: hidden;
}

.mapro-floor-3d-point-label {
  max-width: min(260px, calc(100vw - 40px));
}

/* 3D auto-lite profile (smartphone + fullscreen + 3D only) */
.mapro-map-shell.is-3d-lite .mapro-floor-3d-point,
.mapro-map-shell.is-3d-lite .mapro-floor-3d-point.is-start,
.mapro-map-shell.is-3d-lite .mapro-floor-3d-point.is-goal,
.mapro-map-shell.is-3d-lite .mapro-floor-3d-point.is-restroom-highlight,
.mapro-map-shell.is-3d-lite .mapro-floor-3d-annotation.is-on-route,
.mapro-map-shell.is-3d-lite .mapro-floor-3d-route-line,
.mapro-map-shell.is-3d-lite .mapro-floor-3d-route-line.is-flow,
.mapro-map-shell.is-3d-lite .mapro-floor-3d-route-vertical.is-flow,
.mapro-map-shell.is-3d-lite .mapro-floor-3d-route-vertical.is-flow::before,
.mapro-map-shell.is-3d-lite .mapro-floor-3d-route-vertical.is-flow::after {
  animation: none !important;
}

.mapro-map-shell.is-3d-lite .mapro-floor-3d-route-line {
  filter: none !important;
}

.mapro-map-shell.is-3d-lite .mapro-floor-3d-route-line.is-flow {
  stroke-dasharray: none !important;
  stroke-dashoffset: 0 !important;
}

.mapro-map-shell.is-3d-lite .mapro-floor-3d-route-vertical.is-flow {
  opacity: 1 !important;
}
.mapro-map-shell.is-3d-lite .mapro-floor-3d-point {
  --mapro-floor-3d-point-lift: 6px;
}

.mapro-map-shell.is-3d-lite .mapro-floor-3d-point-label,
.mapro-map-shell.is-3d-lite .mapro-floor-3d-connector-label {
  text-shadow: none !important;
  filter: none !important;
}

.mapro-map-shell.is-3d-lite .mapro-floor-3d-point-label::after,
.mapro-map-shell.is-3d-lite .mapro-floor-3d-connector-label::after {
  content: none !important;
  display: none !important;
}

/* 3D iPad safe profile (3D + Apple touch tablet) */
.mapro-map-shell.is-3d-ipad-safe .mapro-floor-3d-point,
.mapro-map-shell.is-3d-ipad-safe .mapro-floor-3d-point.is-start,
.mapro-map-shell.is-3d-ipad-safe .mapro-floor-3d-point.is-goal,
.mapro-map-shell.is-3d-ipad-safe .mapro-floor-3d-point.is-restroom-highlight,
.mapro-map-shell.is-3d-ipad-safe .mapro-floor-3d-annotation.is-on-route,
.mapro-map-shell.is-3d-ipad-safe .mapro-floor-3d-route-line,
.mapro-map-shell.is-3d-ipad-safe .mapro-floor-3d-route-line.is-flow,
.mapro-map-shell.is-3d-ipad-safe .mapro-floor-3d-route-vertical.is-flow,
.mapro-map-shell.is-3d-ipad-safe .mapro-floor-3d-route-vertical.is-flow::before,
.mapro-map-shell.is-3d-ipad-safe .mapro-floor-3d-route-vertical.is-flow::after {
  animation: none !important;
}

.mapro-map-shell.is-3d-ipad-safe .mapro-floor-3d-route-line,
.mapro-map-shell.is-3d-ipad-safe .mapro-floor-3d-route-line.is-flow,
.mapro-map-shell.is-3d-ipad-safe .mapro-floor-3d-route-node,
.mapro-map-shell.is-3d-ipad-safe .mapro-floor-3d-route-vertical::before,
.mapro-map-shell.is-3d-ipad-safe .mapro-floor-3d-route-vertical::after,
.mapro-map-shell.is-3d-ipad-safe .mapro-floor-3d-level,
.mapro-map-shell.is-3d-ipad-safe .mapro-floor-3d-media {
  filter: none !important;
}

.mapro-map-shell.is-3d-ipad-safe .mapro-floor-3d-route-line.is-flow {
  stroke-dasharray: none !important;
  stroke-dashoffset: 0 !important;
}
.mapro-map-shell.is-3d-ipad-safe .mapro-floor-3d-point {
  --mapro-floor-3d-point-lift: 6px;
}

.mapro-map-shell.is-3d-ipad-safe .mapro-floor-3d-point-label,
.mapro-map-shell.is-3d-ipad-safe .mapro-floor-3d-connector-label {
  text-shadow: none !important;
  filter: none !important;
}

.mapro-map-shell.is-3d-ipad-safe .mapro-floor-3d-point-label::after,
.mapro-map-shell.is-3d-ipad-safe .mapro-floor-3d-connector-label::after {
  content: none !important;
  display: none !important;
}

.mapro-map-shell.is-3d-ipad-safe .mapro-floor-3d-level.is-faded {
  filter: none !important;
  box-shadow: none !important;
  opacity: 0.72 !important;
}

.mapro-map-shell.is-3d-ipad-safe .mapro-floor-3d-level.is-faded .mapro-floor-3d-thumb {
  filter: none !important;
  opacity: 0.2 !important;
}

.mapro-map-shell.is-3d-ipad-safe .mapro-floor-3d-level.is-faded .mapro-floor-3d-point,
.mapro-map-shell.is-3d-ipad-safe .mapro-floor-3d-level.is-faded .mapro-floor-3d-point-label,
.mapro-map-shell.is-3d-ipad-safe .mapro-floor-3d-level.is-faded .mapro-floor-3d-annotation {
  opacity: 0.08 !important;
}

.mapro-map-shell.is-3d-ipad-safe .mapro-floor-3d-panel,
.mapro-map-shell.is-3d-ipad-safe .mapro-floor-3d-jump,
.mapro-map-shell.is-3d-ipad-safe .mapro-floor-3d-reset,
.mapro-map-shell.is-3d-ipad-safe .mapro-floor-3d-boot-card,
.mapro-map-shell.is-3d-ipad-safe .mapro-tools-row,
.mapro-map-shell.is-3d-ipad-safe .mapro-control-row,
.mapro-map-shell.is-3d-ipad-safe .mapro-control,
.mapro-map-shell.is-3d-ipad-safe .mapro-search-modal,
.mapro-map-shell.is-3d-ipad-safe .mapro-ann-filter-panel {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.mapro-map-shell.is-3d-ipad-safe .mapro-floor-3d-scene::before {
  opacity: 0.16;
}

@media (max-width: 820px) {
  .mapro-floor-3d-boot-card { min-width: min(88%, 320px); padding: 12px 12px 11px; gap: 7px; }
  .mapro-floor-3d-boot-spinner { width: 24px; height: 24px; }
  .mapro-floor-3d-boot-title { font-size: 13px; }
  .mapro-floor-3d-boot-step { font-size: 10px; padding: 4px 7px; }
  .mapro-floor-3d-boot-note { font-size: 10px; }
  .mapro-floor-3d-boot-start { min-width: 128px; height: 32px; font-size: 11px; padding: 0 12px; }
  .mapro-floor-3d-onboarding-card { width: min(94%, 380px); padding: 14px 12px 11px; gap: 7px; }
  .mapro-floor-3d-onboarding-title { font-size: 14px; }
  .mapro-floor-3d-onboarding-step { min-height: 37px; padding: 7px 9px; gap: 8px; }
  .mapro-floor-3d-onboarding-step .icon { width: 24px; height: 24px; font-size: 12px; }
  .mapro-floor-3d-onboarding-step .text { font-size: 11px; }
  .mapro-floor-3d-onboarding-note { font-size: 10px; }
}

/* 3D low-latency profile during drag/pinch */
.mapro-map-shell.is-3d-low-latency .mapro-floor-3d-world,
.mapro-map-shell.is-3d-low-latency .mapro-floor-3d-level-anchor,
.mapro-map-shell.is-3d-low-latency .mapro-floor-3d-level,
.mapro-map-shell.is-3d-low-latency .mapro-floor-3d-point,
.mapro-map-shell.is-3d-low-latency .mapro-floor-3d-annotation,
.mapro-map-shell.is-3d-low-latency .mapro-floor-3d-route-line,
.mapro-map-shell.is-3d-low-latency .mapro-floor-3d-media {
  transition: none !important;
}

.mapro-map-shell.is-3d-low-latency .mapro-floor-3d-point:hover {
  transform: var(--mapro-3d-point-transform-base) !important;
}

.mapro-map-shell.is-3d-low-latency .mapro-floor-3d-annotation:hover {
  transform: var(--mapro-3d-ann-transform-base) !important;
}

.mapro-map-shell.is-3d-low-latency .mapro-floor-3d-point-label,
.mapro-map-shell.is-3d-low-latency .mapro-floor-3d-connector-label {
  text-shadow: none !important;
  box-shadow: none !important;
}

.mapro-map-shell.is-3d-low-latency .mapro-floor-3d-point-label::after {
  display: none !important;
}

.mapro-map-shell.is-3d-low-latency .mapro-floor-3d-route-line,
.mapro-map-shell.is-3d-low-latency .mapro-floor-3d-route-node,
.mapro-map-shell.is-3d-low-latency .mapro-floor-3d-all-route-line,
.mapro-map-shell.is-3d-low-latency .mapro-floor-3d-route-vertical::after {
  filter: none !important;
}

.mapro-map-shell.is-3d-low-latency .mapro-floor-3d-level.is-focused,
.mapro-map-shell.is-3d-low-latency .mapro-floor-3d-level.is-faded .mapro-floor-3d-thumb {
  filter: none !important;
}

/* 3D: annotation icons face camera based on current view angle (PC/SP/Tablet) */
.mapro-map-shell.is-3d-open .mapro-floor-3d-annotation {
  --mapro-3d-ann-transform-base:
    translate(-50%, -50%)
    translate3d(0, 0, 12px)
    rotateX(-90deg)
    rotateY(calc(-1 * var(--mapro-floor-3d-yaw, 0deg)))
    rotateX(var(--mapro-floor-3d-pitch, 0deg));
  transform: var(--mapro-3d-ann-transform-base);
  transform-style: preserve-3d;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
}

/* Left-top info: icon + floor title sizing */
.mapro-wrap .mapro-info-icon {
  width: 25.2px;
  height: 25.2px;
}

.mapro-wrap .mapro-info-icon i {
  font-size: calc(16.2px * var(--mapro-font-scale));
}

.mapro-wrap .mapro-info-floor {
  font-size: calc(12.15px * var(--mapro-font-scale));
}

@media (max-width: 820px) {
  .mapro-wrap .mapro-info-icon {
    width: 22.4px;
    height: 22.4px;
  }

  .mapro-wrap .mapro-info-icon i {
    font-size: calc(14.4px * var(--mapro-font-scale));
  }

  .mapro-wrap .mapro-info-floor {
    font-size: calc(10.8px * var(--mapro-font-scale));
  }
}

/* Fullscreen long-press menu (open in new tab) */
.mapro-tools-row {
  position: relative;
}

#mapro-fullscreen-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 136px;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 4px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.48);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.2);
  backdrop-filter: blur(4px);
  z-index: 760;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  transition: opacity .18s ease, transform .18s ease;
}

#mapro-fullscreen-menu[hidden] {
  display: none !important;
}

#mapro-fullscreen-menu.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

#mapro-fullscreen-menu .mapro-fullscreen-menu-item {
  border: 0;
  background: transparent;
  color: #1f2937;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;
  text-align: left;
  border-radius: 8px;
  min-height: 36px;
  padding: 8px 10px;
  cursor: pointer;
  white-space: nowrap;
}

#mapro-fullscreen-menu .mapro-fullscreen-menu-item:hover {
  background: rgba(15, 23, 42, 0.08);
}

#mapro-fullscreen-menu .mapro-fullscreen-menu-item:focus-visible {
  outline: 2px solid #2271b1;
  outline-offset: 1px;
}

@media (max-width: 820px) {
  #mapro-fullscreen-menu {
    right: 0;
    top: calc(100% + 5px);
    min-width: 144px;
  }

  #mapro-fullscreen-menu .mapro-fullscreen-menu-item {
    min-height: 38px;
    font-size: 12px;
    padding: 9px 11px;
  }
}

/* 3D real-lift overrides (point pillars + route beams) */
.mapro-floor-3d-level,
.mapro-floor-3d-point-layer,
.mapro-floor-3d-route-overlay,
.mapro-floor-3d-route-beam-layer,
.mapro-floor-3d-route-world-layer {
  transform-style: preserve-3d !important;
}

.mapro-floor-3d-level {
  overflow: visible !important;
}

.mapro-floor-3d-route-beam-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 9;
}

.mapro-floor-3d-route-world-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 14;
}

.mapro-floor-3d-point {
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  --mapro-3d-point-transform-base: translate(-50%, -50%) translate3d(0, 0, var(--mapro-floor-3d-point-lift, 6px));
  --mapro-3d-point-head-transform-base:
    translate3d(-50%, -50%, 1px)
    rotateX(-90deg)
    rotateY(calc(-1 * var(--mapro-floor-3d-yaw, 0deg)))
    rotateX(var(--mapro-floor-3d-pitch, 0deg))
    var(--mapro-3d-point-shape-transform, rotate(0deg));
  transform: var(--mapro-3d-point-transform-base) !important;
}

.mapro-floor-3d-point:hover {
  transform: var(--mapro-3d-point-transform-base) scale(1.08) !important;
}

.mapro-floor-3d-point-head {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--mapro-floor-3d-point-size, 18px);
  height: var(--mapro-floor-3d-point-size, 18px);
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.96);
  background: linear-gradient(165deg, rgba(255,255,255,0.46) 0%, var(--mapro-floor-3d-point-core-color, rgba(31, 191, 0, 0.96)) 60%, rgba(10,40,24,0.52) 100%);
  box-shadow: 0 0 0 2px var(--mapro-floor-3d-point-glow-color, rgba(31,191,0,0.52)), 0 2px 6px rgba(7,17,28,0.22);
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
  transform: var(--mapro-3d-point-head-transform-base);
}

.mapro-floor-3d-point-head::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255,255,255,0.18);
  transform: translateZ(1px);
}

.mapro-floor-3d-point-head::after {
  content: '';
  display: none;
}

.mapro-floor-3d-point.is-shape-rounded .mapro-floor-3d-point-head { border-radius: 8px; }
.mapro-floor-3d-point.is-shape-square .mapro-floor-3d-point-head { border-radius: 4px; }
.mapro-floor-3d-point.is-shape-diamond .mapro-floor-3d-point-head { border-radius: 4px; }

.mapro-floor-3d-point.is-start .mapro-floor-3d-point-head,
.mapro-floor-3d-point.is-goal .mapro-floor-3d-point-head {
  width: calc(var(--mapro-floor-3d-point-size, 18px) * 1.12);
  height: calc(var(--mapro-floor-3d-point-size, 18px) * 1.12);
  background: linear-gradient(170deg, rgba(255,236,236,0.98) 0%, rgba(235,55,55,0.98) 62%, rgba(120,16,16,0.9) 100%);
  box-shadow: 0 0 0 2px rgba(235,55,55,0.42), 0 0 14px rgba(235,55,55,0.56), 0 6px 14px rgba(7,17,28,0.34);
  animation: maproRouteEndpointPulse3d 1.2s ease-in-out infinite;
}

.mapro-floor-3d-point.is-evac-exit .mapro-floor-3d-point-head {
  background: linear-gradient(170deg, rgba(226,255,238,0.98) 0%, rgba(20,172,92,0.98) 62%, rgba(10,88,47,0.92) 100%);
  box-shadow: 0 0 0 3px rgba(20,172,92,0.28), 0 1px 6px rgba(0,0,0,0.32);
}

.mapro-floor-3d-point-base-symbol,
.mapro-floor-3d-point-symbol {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  z-index: 3;
}

.mapro-floor-3d-point-base-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.98);
  font-size: calc(var(--mapro-floor-3d-point-size, 18px) * 0.55);
  text-shadow: 0 1px 3px rgba(0,0,0,0.32);
}

.mapro-floor-3d-point-stem {
  left: 50%;
  top: calc(50% + (var(--mapro-floor-3d-point-size, 18px) * 0.5) - 1px);
  width: 3px;
  height: calc(var(--mapro-floor-3d-point-lift, 6px) - 2px);
  background: linear-gradient(180deg, rgba(245, 250, 255, 0.96) 0%, var(--mapro-floor-3d-point-stem-color, rgba(156,183,141,0.88)) 100%);
  border: 1px solid rgba(13, 28, 43, 0.24);
  transform: translateX(-50%) translate3d(0, 0, calc(var(--mapro-floor-3d-point-lift, 6px) * -1));
  box-shadow: 0 1px 3px rgba(8, 19, 30, 0.24);
  z-index: 0;
}

.mapro-floor-3d-point-label::after {
  display: none !important;
}

.mapro-floor-3d-route-beam,
.mapro-floor-3d-route-world-beam {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: var(--mapro-route-beam-thickness, 8px);
  transform-style: preserve-3d;
  transform:
    translate(-50%, -50%)
    translate3d(0, 0, var(--mapro-route-beam-lift, 24px))
    rotate(var(--mapro-route-beam-angle, 0deg));
  pointer-events: none;
  transform-origin: 50% 50%;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
}

.mapro-floor-3d-route-beam-face {
  position: absolute;
  inset: 0;
  border-radius: 999px;
}

.mapro-floor-3d-route-beam-face.is-top {
  background: linear-gradient(180deg, rgba(255,255,255,0.42) 0%, rgba(31,191,0,0.96) 100%);
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: 0 0 10px rgba(57,255,20,0.5), 0 4px 10px rgba(5, 16, 24, 0.28);
}

.mapro-floor-3d-route-beam-face.is-side {
  background: linear-gradient(180deg, rgba(11,90,11,0.92) 0%, rgba(5,42,8,0.9) 100%);
  transform: translate3d(0, calc(var(--mapro-route-beam-thickness, 8px) * 0.52), calc(var(--mapro-route-beam-thickness, 8px) * -0.56));
  opacity: 0.74;
}

.mapro-floor-3d-route-beam.is-style-striped .mapro-floor-3d-route-beam-face.is-top,
.mapro-floor-3d-route-world-beam.is-style-striped .mapro-floor-3d-route-beam-face.is-top {
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.42) 0 6px, rgba(203,255,190,0.36) 6px 12px),
    linear-gradient(180deg, rgba(255,255,255,0.38) 0%, rgba(31,191,0,0.96) 100%);
}

.mapro-floor-3d-route-beam.is-style-dashed .mapro-floor-3d-route-beam-face.is-top,
.mapro-floor-3d-route-world-beam.is-style-dashed .mapro-floor-3d-route-beam-face.is-top {
  background-image:
    repeating-linear-gradient(90deg, rgba(31,191,0,0.96) 0 18px, rgba(31,191,0,0.18) 18px 28px),
    linear-gradient(180deg, rgba(255,255,255,0.34) 0%, rgba(31,191,0,0.96) 100%);
}

.mapro-floor-3d-route-beam-support {
  position: absolute;
  top: 50%;
  width: 2px;
  min-height: 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(245,250,255,0.95) 0%, rgba(86,114,137,0.86) 100%);
  border: 1px solid rgba(15, 30, 44, 0.24);
  transform: translate(-50%, 0) translate3d(0, 0, calc(var(--mapro-route-beam-lift, 24px) * -1));
  box-shadow: 0 2px 5px rgba(9, 17, 28, 0.34);
}

.mapro-floor-3d-route-world-beam .mapro-floor-3d-route-beam-support {
  top: calc(50% + (var(--mapro-route-beam-thickness, 8px) * 0.5));
  transform: translate(-50%, 0);
}

.mapro-floor-3d-route-beam.is-cart-blocked .mapro-floor-3d-route-beam-face.is-top,
.mapro-floor-3d-route-world-beam.is-cart-blocked .mapro-floor-3d-route-beam-face.is-top {
  background: linear-gradient(180deg, rgba(255, 230, 180, 0.96) 0%, rgba(245, 158, 11, 0.98) 100%);
  box-shadow: 0 0 12px rgba(245,158,11,0.7), 0 4px 10px rgba(5, 16, 24, 0.28);
}

.mapro-floor-3d-route-beam.is-cart-caution .mapro-floor-3d-route-beam-face.is-top,
.mapro-floor-3d-route-world-beam.is-cart-caution .mapro-floor-3d-route-beam-face.is-top {
  background: linear-gradient(180deg, rgba(255, 242, 207, 0.96) 0%, rgba(245, 158, 11, 0.94) 100%);
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.54), 0 3px 8px rgba(5, 16, 24, 0.24);
}

.mapro-floor-3d-route-beam.is-caution-route .mapro-floor-3d-route-beam-face.is-top,
.mapro-floor-3d-route-world-beam.is-caution-route .mapro-floor-3d-route-beam-face.is-top {
  background: linear-gradient(180deg, rgba(255, 236, 194, 0.96) 0%, rgba(245, 158, 11, 0.96) 100%);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.62), 0 3px 8px rgba(5, 16, 24, 0.24);
}

.mapro-floor-3d-route-line.is-style-striped {
  stroke-dasharray: 11 5;
}

.mapro-floor-3d-route-line.is-style-dashed {
  stroke-dasharray: 16 9;
}

.mapro-floor-3d-route-vertical.is-style-striped::before,
.mapro-floor-3d-route-vertical.is-style-striped::after {
  background-image:
    repeating-linear-gradient(180deg, rgba(245,250,255,0.45) 0 7px, rgba(237,52,52,0.94) 7px 14px),
    linear-gradient(180deg, rgba(237,52,52,0.98) 0%, rgba(255,108,108,0.92) 100%);
}

.mapro-floor-3d-route-vertical.is-style-dashed::before,
.mapro-floor-3d-route-vertical.is-style-dashed::after {
  background-image:
    repeating-linear-gradient(180deg, rgba(237,52,52,0.98) 0 12px, rgba(237,52,52,0.2) 12px 20px),
    linear-gradient(180deg, rgba(237,52,52,0.98) 0%, rgba(255,108,108,0.92) 100%);
}

.mapro-map-shell.is-3d-lite .mapro-floor-3d-route-beam-support,
.mapro-map-shell.is-3d-ipad-safe .mapro-floor-3d-route-beam-support {
  display: none;
}

.mapro-map-shell.is-3d-lite .mapro-floor-3d-route-beam-face.is-top,
.mapro-map-shell.is-3d-ipad-safe .mapro-floor-3d-route-beam-face.is-top {
  box-shadow: 0 0 6px rgba(57,255,20,0.35), 0 2px 6px rgba(5, 16, 24, 0.22);
}

/* 3D mobile/tablet fast profile: prioritize interaction smoothness */
.mapro-map-shell.is-3d-mobile-fast .mapro-floor-3d-point,
.mapro-map-shell.is-3d-mobile-fast .mapro-floor-3d-route-line,
.mapro-map-shell.is-3d-mobile-fast .mapro-floor-3d-route-line.is-flow,
.mapro-map-shell.is-3d-mobile-fast .mapro-floor-3d-route-vertical.is-flow,
.mapro-map-shell.is-3d-mobile-fast .mapro-floor-3d-route-vertical.is-flow::before,
.mapro-map-shell.is-3d-mobile-fast .mapro-floor-3d-route-vertical.is-flow::after {
  animation: none !important;
}

.mapro-map-shell.is-3d-mobile-fast .mapro-floor-3d-level,
.mapro-map-shell.is-3d-mobile-fast .mapro-floor-3d-route-world-beam,
.mapro-map-shell.is-3d-mobile-fast .mapro-floor-3d-connector {
  transition: none !important;
}

.mapro-map-shell.is-3d-mobile-fast .mapro-floor-3d-point,
.mapro-map-shell.is-3d-mobile-fast .mapro-floor-3d-point-head,
.mapro-map-shell.is-3d-mobile-fast .mapro-floor-3d-route-line,
.mapro-map-shell.is-3d-mobile-fast .mapro-floor-3d-route-node,
.mapro-map-shell.is-3d-mobile-fast .mapro-floor-3d-route-vertical::before,
.mapro-map-shell.is-3d-mobile-fast .mapro-floor-3d-route-vertical::after {
  filter: none !important;
  box-shadow: none !important;
}

.mapro-map-shell.is-3d-mobile-fast .mapro-floor-3d-point-head {
  transform: var(--mapro-3d-point-head-transform-base) !important;
  border-width: 1px !important;
}

.mapro-map-shell.is-3d-mobile-fast .mapro-floor-3d-point-label {
  text-shadow: none !important;
  box-shadow: none !important;
}

/* Keep place labels visible on smartphone/tablet 3D unified-safe profiles. */
.mapro-map-shell.is-3d-lite .mapro-floor-3d-point-label,
.mapro-map-shell.is-3d-ipad-safe .mapro-floor-3d-point-label,
.mapro-map-shell.is-3d-mobile-fast .mapro-floor-3d-point-label {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.mapro-map-shell.is-3d-ipad-safe .mapro-floor-3d-level.is-faded .mapro-floor-3d-point-label,
.mapro-map-shell.is-3d-mobile-fast .mapro-floor-3d-level.is-faded .mapro-floor-3d-point-label {
  opacity: 0.56 !important;
}

.mapro-map-shell.is-3d-mobile-fast .mapro-floor-3d-connector-label {
  text-shadow: none !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.12) !important;
  transform:
    translate(-50%, -50%)
    translate3d(0, -1px, var(--mapro-floor-3d-label-lift, 24px))
    rotateX(90deg)
    rotateY(calc(-1 * var(--mapro-floor-3d-yaw, 0deg)))
    rotateX(var(--mapro-floor-3d-label-pitch, 22deg)) !important;
}

.mapro-map-shell.is-3d-lite .mapro-floor-3d-connector-label.is-static,
.mapro-map-shell.is-3d-ipad-safe .mapro-floor-3d-connector-label.is-static,
.mapro-map-shell.is-3d-mobile-fast .mapro-floor-3d-connector-label.is-static {
  /* Stair labels follow camera in all 3D performance profiles. */
  transform:
    translate(-50%, -50%)
    translate3d(0, -1px, var(--mapro-floor-3d-label-lift, 24px))
    rotateX(90deg)
    rotateY(calc(-1 * var(--mapro-floor-3d-yaw, 0deg)))
    rotateX(var(--mapro-floor-3d-label-pitch, 22deg)) !important;
}

.mapro-map-shell.is-3d-mobile-fast .mapro-floor-3d-route-world-beam .mapro-floor-3d-route-beam-support {
  display: none !important;
}

.mapro-map-shell.is-3d-mobile-fast .mapro-floor-3d-route-world-beam .mapro-floor-3d-route-beam-face.is-top {
  border-width: 1px !important;
  background: rgba(57, 255, 20, 0.9) !important;
}

.mapro-map-shell.is-3d-mobile-fast .mapro-floor-3d-route-world-beam .mapro-floor-3d-route-beam-face.is-side {
  opacity: 0.88;
}

/* WebGL hybrid renderer */
.mapro-map-shell.is-3d-renderer-webgl .mapro-floor-3d-scene {
  perspective: none !important;
  perspective-origin: 50% 50% !important;
  background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.24) 0%, rgba(236,242,247,0.96) 60%, rgba(224,233,239,0.98) 100%) !important;
}
.mapro-map-shell.is-3d-renderer-webgl .mapro-floor-3d-scene::before {
  opacity: 0.14;
}
.mapro-floor-3d-scene.is-renderer-webgl {
  overflow: hidden;
}
.mapro-floor-3d-webgl-canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  z-index: 6;
  pointer-events: auto;
  touch-action: none;
}
.mapro-map-shell.is-3d-renderer-webgl .mapro-floor-3d-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 8;
}

/* Search modal compact sizing (category/name/nearest) */
.mapro-search-modal .mapro-tabs .tab-btn {
  padding: 6px 5px;
  min-height: 34px;
  font-size: calc(11px * var(--mapro-font-scale, 1));
}

.mapro-search-modal .mapro-searchbar {
  padding: 5px 8px;
  gap: 4px;
}

.mapro-search-modal .mapro-point-search {
  padding: 4px 6px;
  font-size: calc(11px * var(--mapro-font-scale, 1));
}

.mapro-search-modal .mapro-point-search-clear {
  min-width: 22px;
  min-height: 22px;
  font-size: 13px;
}

.mapro-search-modal .mapro-nearest-filter {
  padding: 5px 8px;
  gap: 5px;
}

.mapro-search-modal .mapro-nearest-filter-label {
  font-size: calc(10px * var(--mapro-font-scale, 1));
}

.mapro-search-modal .mapro-nearest-category {
  height: 26px;
  font-size: calc(11px * var(--mapro-font-scale, 1));
}

.mapro-search-modal .mapro-list-group {
  padding: 5px 10px;
  font-size: calc(10px * var(--mapro-font-scale, 1));
}

.mapro-search-modal .mapro-list-item {
  padding: 6px 10px;
  min-height: 32px;
  gap: 5px;
}

.mapro-search-modal .mapro-list-item .name {
  font-size: calc(12px * var(--mapro-font-scale, 1));
}

.mapro-search-modal .mapro-list-item .meta {
  font-size: calc(9.5px * var(--mapro-font-scale, 1));
  margin-left: 5px;
}

.mapro-search-modal .mapro-list-item .meta-extra {
  font-size: calc(9.5px * var(--mapro-font-scale, 1));
  margin-left: 5px;
}

.mapro-search-modal .mapro-list-item .distance {
  font-size: calc(9px * var(--mapro-font-scale, 1));
}

/* Route detail popup compact override: always fit one screen as much as possible */
.mapro-route-info-leaflet-popup .leaflet-popup-content-wrapper {
  max-width: min(74vw, 296px) !important;
}

.mapro-route-info-leaflet-popup .leaflet-popup-content {
  margin: 8px 9px !important;
  max-height: min(62vh, 420px) !important;
  overflow: auto !important;
}

.mapro-route-info-popup {
  width: min(70vw, 276px) !important;
  min-width: min(70vw, 210px) !important;
  color: #1f2937;
}

.mapro-route-info-popup h4 {
  margin: 0 0 6px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

.mapro-route-info-popup .title-icon {
  font-size: 13px !important;
}

.mapro-route-info-popup .mapro-route-info-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

.mapro-route-info-popup .metric-card {
  padding: 5px 6px !important;
  gap: 3px !important;
}

.mapro-route-info-popup .metric-card .key {
  font-size: 10px !important;
  line-height: 1.15 !important;
}

.mapro-route-info-popup .metric-card strong {
  font-size: 11px !important;
  line-height: 1.15 !important;
}

.mapro-route-info-popup .actions {
  margin-top: 6px !important;
  padding-top: 6px !important;
}

.mapro-route-copy-btn {
  min-height: 28px !important;
  font-size: 11px !important;
  padding: 5px 8px !important;
  border-radius: 7px !important;
}

.mapro-route-copy-btn i {
  font-size: 13px !important;
}

@media (max-width: 520px) {
  .mapro-route-info-leaflet-popup .leaflet-popup-content-wrapper {
    max-width: min(86vw, 280px) !important;
  }

  .mapro-route-info-popup {
    width: min(82vw, 264px) !important;
    min-width: min(82vw, 196px) !important;
  }
}

/* Popup transparency tuning: keep map visible behind all map popups */
.mapro-info-toggle {
  background: #ffffff !important;
  border-color: #d8e0e8 !important;
}
.mapro-info-toggle:hover {
  background: #f5f8fb !important;
}

.mapro-search-modal,
#mapro-ann-modal,
.mapro-help-modal,
.mapro-info-modal,
.mapro-point-select-dialog,
.mapro-ann-filter-panel {
  background: #ffffff !important;
  border-color: #d9e2ec !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.mapro-point-select-modal {
  background: rgba(15, 23, 42, 0.44) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.mapro-search-modal .mapro-modal-header,
.mapro-help-modal .mapro-modal-header,
.mapro-info-modal .mapro-modal-header,
#mapro-point-select-modal .mapro-modal-header,
.mapro-search-modal .mapro-tabs,
.mapro-search-modal .mapro-searchbar,
.mapro-search-modal .mapro-list-group,
.mapro-point-select-actions {
  background: #ffffff !important;
}

.mapro-search-modal .mapro-list-item {
  background: #ffffff;
}
.mapro-search-modal .mapro-list-item:hover {
  background: #f4f7fa;
}
.mapro-search-modal .mapro-list-item:active {
  background: #eaf0f6;
}

.mapro-info-section {
  background: #ffffff !important;
}

#mapro-ann-filter-toggle,
.mapro-tools-row .mapro-ann-filter-toggle {
  background: #ffffff !important;
}
#mapro-ann-filter-toggle.is-active,
.mapro-tools-row .mapro-ann-filter-toggle.is-active {
  background: rgba(34, 113, 177, 0.72) !important;
}

.mapro-ann-filter-item {
  background: #ffffff;
  border: 1px solid #d6dfe9;
  border-radius: 10px;
}

.mapro-route-info-leaflet-popup .leaflet-popup-content-wrapper,
.mapro-route-info-leaflet-popup .leaflet-popup-tip {
  background: #ffffff !important;
  border: 1px solid #d8e2ec !important;
}

.mapro-route-info-popup .metric-card {
  background: #ffffff !important;
  border-color: rgba(148, 163, 184, 0.32) !important;
}

/* Public report */
#mapro-report-category-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
#mapro-report-category-stack > #mapro-report-toggle,
#mapro-report-category-stack > #mapro-ann-filter-toggle {
  width: 36px;
  min-width: 36px;
  min-height: 32px;
  height: 32px;
  padding: 0;
  justify-content: center;
}
#mapro-report-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  border: 1px solid #cfd6de;
  background: #ffffff;
  color: #2a343d;
  border-radius: 8px;
  padding: 0;
  min-height: 32px;
  min-width: 36px;
  font-size: 0;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
#mapro-report-toggle .icon .bi::before {
  font-size: 14px;
}
#mapro-report-toggle .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#mapro-report-toggle .mapro-report-toggle-icon-image {
  display: block;
  width: 16px;
  height: 16px;
  max-width: 16px;
  max-height: 16px;
  object-fit: contain;
}
#mapro-report-toggle .label {
  display: none;
}
#mapro-report-toggle.is-active {
  background: #39FF14;
  border-color: #1FBF00;
  color: #0f2a08;
}
#mapro-report-toggle:disabled {
  opacity: 0.62;
  cursor: not-allowed;
}
.mapro-report-modal .mapro-help-content.mapro-report-content {
  display: grid;
  gap: 10px;
  padding-top: 12px;
}
.mapro-report-location {
  margin: 0;
  font-size: 12px;
  color: #475463;
}
.mapro-report-field {
  display: grid;
  gap: 6px;
}
.mapro-report-field-label {
  font-size: 12px;
  font-weight: 700;
  color: #2b3440;
}
.mapro-report-field textarea {
  width: 100%;
  border: 1px solid #d2dbe4;
  border-radius: 8px;
  background: #fff;
  color: #1f2933;
  padding: 8px 10px;
  font-size: 13px;
}
.mapro-report-field .mapro-report-date {
  width: 100%;
  border: 1px solid #d2dbe4;
  border-radius: 8px;
  background: #fff;
  color: #1f2933;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 700;
}
.mapro-report-field textarea {
  resize: vertical;
  min-height: 84px;
}
@media (hover:none) and (pointer:coarse) {
  .mapro-report-field textarea,
  .mapro-report-field .mapro-report-date {
    font-size: 16px;
  }
}
.mapro-report-photo-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.mapro-report-photo-actions > .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 34px;
  padding: 6px 7px;
  font-size: 12px;
  font-weight: 700;
}
.mapro-report-photo-actions > .btn .bi::before {
  font-size: 13px;
}
.mapro-report-image-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}
.mapro-report-image-selected {
  margin: 0;
  font-size: 11px;
  color: #4b5764;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.mapro-report-note {
  margin: 0;
  font-size: 11px;
  color: #5a6572;
}
.mapro-report-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
@media (max-width: 820px) {
  #mapro-report-category-stack {
    gap: 3px;
  }
  #mapro-report-category-stack > #mapro-report-toggle,
  #mapro-report-category-stack > #mapro-ann-filter-toggle {
    width: 33px;
    min-width: 33px;
    min-height: 30px;
    height: 30px;
  }
  #mapro-report-toggle {
    min-height: 30px;
    min-width: 33px;
  }
  .mapro-report-modal .mapro-help-content.mapro-report-content {
    gap: 8px;
  }
  .mapro-report-photo-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mapro-report-photo-actions > #mapro-report-photo-clear {
    grid-column: 1 / -1;
  }
}

/* Final: reduce control frame size ~20% across PC/SP/Tablet */
.mapro-wrap {
  --mapro-control-size: calc(34px * var(--mapro-control-scale) * 0.8) !important;
  --mapro-control-gap: max(3px, calc(4px * var(--mapro-control-scale) * 0.8)) !important;
}

.mapro-system-row {
  gap: var(--mapro-control-gap) !important;
  padding: calc(3.2px * var(--mapro-control-scale)) !important;
}

.mapro-tools-row {
  gap: var(--mapro-control-gap) !important;
}

.mapro-system-main .mapro-view-mode-btn,
.mapro-system-main #mapro-font-size-toggle,
.mapro-system-main #mapro-mode-menu-toggle.mapro-mode-quick-toggle,
.mapro-system-main #mapro-restroom-toggle .mapro-restroom-icon,
.mapro-system-main #mapro-gps-locate-toggle {
  width: var(--mapro-control-size) !important;
  min-width: var(--mapro-control-size) !important;
  height: var(--mapro-control-size) !important;
  min-height: var(--mapro-control-size) !important;
}

#mapro-report-category-stack > #mapro-report-toggle,
#mapro-report-category-stack > #mapro-ann-filter-toggle {
  width: calc(var(--mapro-control-size) * 0.72) !important;
  min-width: calc(var(--mapro-control-size) * 0.72) !important;
  height: calc(var(--mapro-control-size) * 0.64) !important;
  min-height: calc(var(--mapro-control-size) * 0.64) !important;
}

#mapro-report-toggle {
  min-width: calc(var(--mapro-control-size) * 0.72) !important;
  min-height: calc(var(--mapro-control-size) * 0.64) !important;
}

@media (max-width: 820px) {
  .mapro-map-shell.is-smartphone-top-tool-group #mapro-report-category-stack {
    width: calc(var(--mapro-control-size) * 0.92);
  }

  .mapro-map-shell.is-smartphone-top-tool-group #mapro-report-category-stack > #mapro-report-toggle,
  .mapro-map-shell.is-smartphone-top-tool-group #mapro-report-category-stack > #mapro-ann-filter-toggle {
    width: calc(var(--mapro-control-size) * 0.92);
    min-width: calc(var(--mapro-control-size) * 0.92);
    height: calc((calc(var(--mapro-control-size) * 0.92) - 3px) / 2);
    min-height: calc((calc(var(--mapro-control-size) * 0.92) - 3px) / 2);
  }
}

/* Public day selector: align with Information button style and keep text fully visible. */
.mapro-info-topbar {
  flex-wrap: wrap;
  max-width: min(96vw, 620px);
}

/* Top-left Information + day selector: 20% downscale and unified border/text sizing. */
.mapro-info-toggle {
  border-color: #d8e0e8 !important;
  border-radius: 10px !important;
  padding: 6px 8px !important;
  gap: 6px !important;
}

.mapro-info-icon {
  width: 22px !important;
  height: 22px !important;
  background: rgba(245, 158, 11, 0.16) !important;
  color: #f59e0b !important;
  border: 1px solid rgba(245, 158, 11, 0.32) !important;
}

.mapro-info-icon i {
  font-size: calc(14.4px * var(--mapro-font-scale)) !important;
  color: inherit !important;
}

.mapro-info-title {
  font-size: calc(8.8px * var(--mapro-font-scale)) !important;
}

.mapro-info-floor {
  font-size: calc(10.8px * var(--mapro-font-scale)) !important;
}

.mapro-info-updated {
  font-size: calc(8.8px * var(--mapro-font-scale)) !important;
}

.mapro-day-plan-wrap {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  position: relative;
}

.mapro-day-plan-wrap::before {
  content: "calendar_month";
  font-family: "Material Symbols Outlined" !important;
  font-size: calc(11px * var(--mapro-font-scale));
  font-style: normal;
  font-weight: 500;
  line-height: 1;
  color: #f59e0b;
  font-feature-settings: "liga";
  -webkit-font-feature-settings: "liga";
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 1;
}

.mapro-day-plan-select {
  border: 1px solid #d8e0e8 !important;
  background: #ffffff !important;
  color: #1f2937 !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 22px rgba(12, 20, 30, 0.18) !important;
  height: auto !important;
  min-height: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 6px 22px 6px 24px !important;
  font-size: calc(10.8px * var(--mapro-font-scale)) !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  white-space: nowrap;
}

.mapro-day-plan-select:hover {
  background: #f5f8fb !important;
}

.mapro-day-plan-select:focus {
  outline: none;
  border-color: #2271b1 !important;
  box-shadow: 0 0 0 1px rgba(34, 113, 177, 0.28), 0 8px 22px rgba(12, 20, 30, 0.18) !important;
}

/* Nav start/goal icon highlight: turn orange when selected */
#mapro-nav-start .label .nav-icon i,
#mapro-nav-goal .label .nav-icon i {
  color: #5f6b76;
  transition: color 0.2s ease;
}

#mapro-nav-start.is-point-selected .label .nav-icon i,
#mapro-nav-goal.is-point-selected .label .nav-icon i {
  color: #f59e0b !important;
}

@media (max-width: 820px) {
  .mapro-info-topbar {
    gap: 4px !important;
  }

  .mapro-info-toggle {
    padding: 5px 7px !important;
    gap: 5px !important;
  }

  .mapro-info-icon {
    width: 20px !important;
    height: 20px !important;
  }

  .mapro-info-icon i {
    font-size: calc(13px * var(--mapro-font-scale)) !important;
  }

  .mapro-day-plan-select {
    padding: 5px 20px 5px 22px !important;
    font-size: calc(10.8px * var(--mapro-font-scale)) !important;
  }
}

/* Restroom spotlight: make icons larger and easier to find */
.leaflet-marker-icon.is-restroom-highlight .mapro-route-point-dot {
  transform: scale(1.42) !important;
  transform-origin: center center;
}

.leaflet-marker-icon.is-restroom-highlight .mapro-point-base-symbol,
.leaflet-marker-icon.is-restroom-highlight .mapro-route-point-symbol {
  transform: translate(-50%, -50%) scale(1.18) !important;
  transform-origin: center center;
}

/* Final override: 3D route continuity (diagonal-safe joins + dual side faces). */
.mapro-floor-3d-route-world-beam .mapro-floor-3d-route-beam-face.is-side {
  transform: translate3d(0, calc(var(--mapro-route-beam-thickness, 8px) * 0.53), calc(var(--mapro-route-beam-thickness, 8px) * -0.62));
  opacity: 0.72;
}

.mapro-floor-3d-route-world-beam .mapro-floor-3d-route-beam-face.is-side-back {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(11,90,11,0.9) 0%, rgba(4,34,7,0.86) 100%);
  transform: translate3d(0, calc(var(--mapro-route-beam-thickness, 8px) * -0.53), calc(var(--mapro-route-beam-thickness, 8px) * -0.58));
  opacity: 0.62;
}

.mapro-floor-3d-route-world-joint {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  transform-style: preserve-3d;
  pointer-events: none;
  z-index: 15;
  transform-origin: 50% 50%;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
}

.mapro-floor-3d-route-joint-face {
  position: absolute;
  inset: 0;
  border-radius: 999px;
}

.mapro-floor-3d-route-joint-face.is-top {
  background: linear-gradient(180deg, rgba(255,255,255,0.44) 0%, rgba(31,191,0,0.98) 100%);
  border: 1px solid rgba(255,255,255,0.74);
  box-shadow: 0 0 10px rgba(57,255,20,0.5), 0 4px 8px rgba(5,16,24,0.24);
}

.mapro-floor-3d-route-joint-face.is-side {
  background: linear-gradient(180deg, rgba(11,90,11,0.9) 0%, rgba(4,34,7,0.86) 100%);
  transform: translate3d(0, 48%, calc(var(--mapro-route-beam-thickness, 8px) * -0.46));
  opacity: 0.68;
}

.mapro-floor-3d-route-joint-face.is-side-back {
  background: linear-gradient(180deg, rgba(11,90,11,0.86) 0%, rgba(4,34,7,0.82) 100%);
  transform: translate3d(0, -48%, calc(var(--mapro-route-beam-thickness, 8px) * -0.42));
  opacity: 0.56;
}

.mapro-floor-3d-route-world-joint.is-cart-blocked .mapro-floor-3d-route-joint-face.is-top {
  background: linear-gradient(180deg, rgba(255,230,180,0.96) 0%, rgba(245,158,11,0.98) 100%);
  box-shadow: 0 0 11px rgba(245,158,11,0.68), 0 3px 8px rgba(5,16,24,0.22);
}

.mapro-floor-3d-route-world-joint.is-cart-caution .mapro-floor-3d-route-joint-face.is-top,
.mapro-floor-3d-route-world-joint.is-caution-route .mapro-floor-3d-route-joint-face.is-top {
  background: linear-gradient(180deg, rgba(255,236,194,0.96) 0%, rgba(245,158,11,0.96) 100%);
  box-shadow: 0 0 9px rgba(245,158,11,0.56), 0 3px 7px rgba(5,16,24,0.2);
}

.mapro-floor-3d-route-world-joint.is-style-striped .mapro-floor-3d-route-joint-face.is-top {
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.42) 0 5px, rgba(203,255,190,0.3) 5px 10px),
    linear-gradient(180deg, rgba(255,255,255,0.38) 0%, rgba(31,191,0,0.96) 100%);
}

.mapro-floor-3d-route-world-joint.is-style-dashed .mapro-floor-3d-route-joint-face.is-top {
  background-image:
    repeating-linear-gradient(90deg, rgba(31,191,0,0.96) 0 8px, rgba(31,191,0,0.24) 8px 14px),
    linear-gradient(180deg, rgba(255,255,255,0.34) 0%, rgba(31,191,0,0.96) 100%);
}

.mapro-map-shell.is-3d-mobile-fast .mapro-floor-3d-route-world-joint .mapro-floor-3d-route-joint-face.is-top {
  border-width: 1px !important;
  box-shadow: none !important;
  background: rgba(57, 255, 20, 0.9) !important;
}

.mapro-map-shell.is-3d-mobile-fast .mapro-floor-3d-route-world-joint .mapro-floor-3d-route-joint-face.is-side,
.mapro-map-shell.is-3d-mobile-fast .mapro-floor-3d-route-world-joint .mapro-floor-3d-route-joint-face.is-side-back {
  opacity: 0.84 !important;
}

/* Route detail modal: always center-fixed and expanded like the destination search modal */
#mapro-route-detail-modal.mapro-route-detail-modal {
  width: min(92%, 960px) !important;
  height: min(84%, 760px) !important;
  max-width: calc(100% - 20px) !important;
  max-height: calc(100% - 20px) !important;
}

#mapro-route-detail-modal .mapro-route-detail-content {
  padding: 14px 16px 16px !important;
  overflow: auto;
}

#mapro-route-detail-modal .mapro-route-info-popup {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
}

#mapro-route-detail-modal .mapro-route-info-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#mapro-route-detail-modal .mapro-route-info-popup .actions {
  margin-top: 10px;
}

@media (max-width: 820px) {
  #mapro-route-detail-modal.mapro-route-detail-modal {
    width: calc(100% - 16px) !important;
    height: calc(100% - 16px) !important;
    max-width: calc(100% - 16px) !important;
    max-height: calc(100% - 16px) !important;
    border-radius: 10px !important;
  }

  #mapro-route-detail-modal .mapro-route-info-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Smartphone: make "どこから→どこへ" bar more compact (reduce vertical height). */
@media (max-width: 820px) {
  .mapro-nav-bar {
    padding: 2px 3px !important;
    gap: 2px !important;
    border-radius: 7px !important;
  }

  .mapro-nav-item {
    padding: 2px 4px !important;
    min-width: 82px !important;
    max-width: 126px !important;
    border-radius: 7px !important;
  }

  .mapro-nav-item .label {
    font-size: calc(8px * var(--mapro-font-scale)) !important;
    line-height: 1 !important;
    gap: 2px !important;
  }

  .mapro-nav-item .label .nav-icon {
    font-size: 10px !important;
    line-height: 1 !important;
  }

  .mapro-nav-item .value,
  .mapro-nav-item .value.is-selected,
  .mapro-nav-item .value.is-unset,
  .mapro-nav-item .value .mapro-nav-unset {
    margin-top: 0 !important;
    gap: 0 !important;
    line-height: 1.05 !important;
    font-size: calc(10px * var(--mapro-font-scale)) !important;
  }

  .mapro-nav-item .mapro-nav-floor-name {
    font-size: calc(8px * var(--mapro-font-scale)) !important;
    line-height: 1 !important;
  }

  .mapro-nav-arrow {
    padding: 0 2px !important;
    font-size: 11px !important;
  }
}

/* Smartphone: place travel-mode button at the right side of "どこから/どこへ". */
@media (max-width: 820px) {
  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group #mapro-nav-mode.mapro-nav-mode {
    display: flex !important;
    flex: 0 0 auto;
    min-width: 82px;
    max-width: 110px;
    min-height: 50px;
    padding: 2px 4px !important;
    border-radius: 7px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: none;
    align-items: stretch;
    justify-content: stretch;
  }

  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group #mapro-nav-mode .mapro-mode-menu-group {
    width: 100%;
    margin-top: 0 !important;
    display: inline-flex;
    align-items: stretch;
    justify-content: stretch;
  }

  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group #mapro-nav-mode #mapro-mode-menu-toggle.mapro-mode-quick-toggle {
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: auto;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #1f2937;
    font-size: calc(11px * var(--mapro-font-scale));
    line-height: 1;
    font-weight: 700;
  }

  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group #mapro-nav-mode #mapro-mode-menu-toggle .mapro-mode-quick-icon-glyph::before {
    font-size: calc(12px * var(--mapro-font-scale));
  }

  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group #mapro-nav-mode #mapro-mode-menu-toggle .mapro-mode-menu-value {
    font-size: calc(11px * var(--mapro-font-scale));
    line-height: 1;
    font-weight: 700;
  }
}

/* Route detail modal: centered half-size + translucent outer frame (content cards stay opaque). */
#mapro-route-detail-modal.mapro-route-detail-modal {
  width: min(56vw, 620px) !important;
  height: min(56vh, 520px) !important;
  max-width: calc(100% - 28px) !important;
  max-height: calc(100% - 28px) !important;
  background: rgba(255, 255, 255, 0.48) !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.22) !important;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

#mapro-route-detail-modal .mapro-modal-header {
  background: rgba(255, 255, 255, 0.76) !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.9) !important;
}

#mapro-route-detail-modal .mapro-route-detail-content {
  background: transparent !important;
  padding: 12px 14px 14px !important;
}

#mapro-route-detail-modal .mapro-route-info-popup {
  width: 100% !important;
  max-width: none !important;
  background: #ffffff !important;
  border: 1px solid rgba(203, 213, 225, 0.9) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.12) !important;
}

#mapro-route-detail-modal .mapro-route-info-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

#mapro-route-detail-modal .mapro-route-info-popup .metric-card {
  background: #ffffff !important;
}

@media (max-width: 820px) {
  #mapro-route-detail-modal.mapro-route-detail-modal {
    width: min(92vw, 460px) !important;
    height: min(64vh, 560px) !important;
    max-width: calc(100% - 16px) !important;
    max-height: calc(100% - 16px) !important;
  }
  #mapro-route-detail-modal .mapro-route-info-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Desktop side controls: keep all viewer controls in a right collapsible sidebar. */
.mapro-side-controls-toggle {
  display: none;
  width: 100%;
  min-height: 34px;
  border-radius: 10px;
  border: 1px solid var(--mapro-ui-border);
  background: rgba(255, 255, 255, 0.95);
  color: #1f2937;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  padding: 6px 8px;
}

.mapro-side-controls-toggle .mapro-side-controls-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
}

.mapro-map-shell.is-side-controls .mapro-overlay-tools {
  display: none !important;
}

.mapro-map-shell.is-side-controls .mapro-overlay-bottom {
  transition: width 0.24s ease, right 0.24s ease;
}

.mapro-map-shell.is-side-controls .mapro-side-controls-toggle {
  display: inline-flex;
}

.mapro-map-shell.is-side-controls .mapro-system-row {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.mapro-map-shell.is-side-controls .mapro-system-main {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 8px;
}

.mapro-map-shell.is-side-controls .mapro-system-main > .mapro-tools-row {
  width: 100%;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.mapro-map-shell.is-side-controls .mapro-system-main > .mapro-tools-row .mapro-zoom-group {
  margin-left: 0;
}

.mapro-map-shell.is-side-controls.is-side-controls-collapsed .mapro-overlay-bottom {
  width: 46px !important;
  right: 8px;
  overflow: visible;
  padding: 0;
  gap: 0;
}

.mapro-map-shell.is-side-controls.is-side-controls-collapsed .mapro-overlay-bottom > *:not(#mapro-side-controls-toggle) {
  display: none !important;
}

.mapro-map-shell.is-side-controls.is-side-controls-collapsed .mapro-side-controls-toggle {
  width: 46px;
  min-height: 46px;
  padding: 0;
  border-radius: 12px;
}

.mapro-map-shell.is-side-controls.is-side-controls-collapsed .mapro-side-controls-toggle .mapro-side-controls-toggle-label {
  display: none;
}

/* Final lock: top-left Information and day selector must share identical frame/typography. */
.mapro-info-topbar {
  align-items: stretch !important;
  gap: 6px !important;
}

.mapro-info-toggle,
.mapro-day-plan-select {
  height: 36px !important;
  min-height: 36px !important;
  border: 1px solid #d8e0e8 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: #1f2937 !important;
  box-shadow: 0 8px 22px rgba(12, 20, 30, 0.18) !important;
  font-size: calc(10.8px * var(--mapro-font-scale)) !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

.mapro-info-toggle {
  padding: 6px 8px !important;
  gap: 6px !important;
}

.mapro-day-plan-select {
  padding: 6px 24px 6px 24px !important;
}

.mapro-info-floor {
  font-size: calc(10.8px * var(--mapro-font-scale)) !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}

.mapro-day-plan-wrap::before {
  left: 8px !important;
  font-size: calc(12px * var(--mapro-font-scale)) !important;
  color: #f59e0b !important;
}

.mapro-info-toggle:hover,
.mapro-day-plan-select:hover {
  background: #f5f8fb !important;
}

@media (max-width: 820px) {
  .mapro-info-topbar {
    gap: 4px !important;
  }

  .mapro-info-toggle,
  .mapro-day-plan-select {
    height: 32px !important;
    min-height: 32px !important;
    font-size: calc(10.2px * var(--mapro-font-scale)) !important;
  }

  .mapro-info-toggle {
    padding: 5px 7px !important;
    gap: 5px !important;
  }

  .mapro-day-plan-select {
    padding: 5px 20px 5px 22px !important;
  }

  .mapro-info-floor {
    font-size: calc(10.2px * var(--mapro-font-scale)) !important;
  }

  .mapro-day-plan-wrap::before {
    font-size: calc(11px * var(--mapro-font-scale)) !important;
  }
}

/* Hide label row in nav items – show only value area. */
#mapro-nav-start .label,
#mapro-nav-goal .label,
#mapro-nav-routing .label {
  display: none !important;
}

#mapro-nav-start,
#mapro-nav-goal,
#mapro-nav-routing {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#mapro-nav-start .value,
#mapro-nav-goal .value,
#mapro-nav-routing .value {
  margin-top: 0 !important;
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#mapro-nav-start:not(.is-point-selected) .value::after,
#mapro-nav-goal:not(.is-point-selected) .value::after,
#mapro-nav-routing .value::after {
  display: none !important;
}

#mapro-nav-start:not(.is-point-selected) .mapro-nav-placeholder,
#mapro-nav-goal:not(.is-point-selected) .mapro-nav-placeholder,
#mapro-nav-routing .mapro-nav-placeholder {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(15px * var(--mapro-font-scale));
  font-weight: 800;
  line-height: 1.2;
  color: #1f2937;
}

#mapro-nav-start:not(.is-point-selected) .mapro-nav-placeholder-icon,
#mapro-nav-goal:not(.is-point-selected) .mapro-nav-placeholder-icon,
#mapro-nav-routing .mapro-nav-placeholder-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 1.2em;
  min-width: 1.2em;
  color: #f59e0b;
}

#mapro-nav-start:not(.is-point-selected) .mapro-nav-placeholder-icon i,
#mapro-nav-goal:not(.is-point-selected) .mapro-nav-placeholder-icon i,
#mapro-nav-routing .mapro-nav-placeholder-icon i {
  font-size: 1em !important;
  line-height: 1;
}

#mapro-nav-start:not(.is-point-selected) .mapro-nav-placeholder-text,
#mapro-nav-goal:not(.is-point-selected) .mapro-nav-placeholder-text,
#mapro-nav-routing .mapro-nav-placeholder-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

@media (max-width: 820px) {
  #mapro-nav-start:not(.is-point-selected) .value,
  #mapro-nav-goal:not(.is-point-selected) .value,
  #mapro-nav-routing .value {
    min-height: 24px;
  }

  #mapro-nav-start:not(.is-point-selected) .mapro-nav-placeholder,
  #mapro-nav-goal:not(.is-point-selected) .mapro-nav-placeholder,
  #mapro-nav-routing .mapro-nav-placeholder {
    font-size: calc(10px * var(--mapro-font-scale));
  }
}

/* Final override: desktop side controls fixed-right layout + compact icon titles. */
@media (min-width: 821px) {
  .mapro-map-shell.is-side-controls .mapro-overlay-bottom {
    left: auto !important;
    right: 10px !important;
    top: 62px !important;
    bottom: 10px !important;
    width: min(360px, 34vw) !important;
    max-width: 420px;
    margin: 0 !important;
    transform: none !important;
    align-self: auto !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    flex-direction: column !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .mapro-map-shell.is-side-controls #mapro-nav-bar,
  .mapro-map-shell.is-side-controls .mapro-nav-bar {
    order: 1 !important;
  }

  .mapro-map-shell.is-side-controls #mapro-system-row {
    order: 2 !important;
  }

  .mapro-map-shell.is-side-controls #mapro-status,
  .mapro-map-shell.is-side-controls #mapro-route-stats {
    order: 90 !important;
  }

  .mapro-map-shell.is-side-controls .mapro-nav-bar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch !important;
    gap: 6px !important;
  }

  .mapro-map-shell.is-side-controls .mapro-nav-arrow {
    display: none !important;
  }

  .mapro-map-shell.is-side-controls #mapro-nav-start {
    grid-column: 1;
    min-height: 56px !important;
    max-width: none !important;
  }

  .mapro-map-shell.is-side-controls #mapro-nav-goal {
    grid-column: 2;
    min-height: 56px !important;
    max-width: none !important;
  }

  .mapro-map-shell.is-side-controls #mapro-nav-mode.mapro-nav-mode {
    grid-column: 1 / -1;
    display: flex !important;
    min-height: 52px !important;
    max-width: none !important;
    border-radius: 10px !important;
  }

  .mapro-map-shell.is-side-controls #mapro-nav-mode .mapro-mode-menu-group {
    width: 100%;
  }

  .mapro-map-shell.is-side-controls #mapro-nav-mode #mapro-mode-menu-toggle {
    width: 100%;
    min-height: 42px;
    justify-content: space-between;
  }

  .mapro-map-shell.is-side-controls #mapro-share-area {
    grid-column: 1 / -1;
  }

  .mapro-map-shell.is-side-controls .mapro-system-main {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 6px !important;
  }

  .mapro-map-shell.is-side-controls .mapro-system-main > .mapro-tools-row {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .mapro-map-shell.is-side-controls .mapro-system-main [data-short-label] {
    position: relative;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 2px !important;
    min-width: 64px !important;
    min-height: 52px !important;
    padding: 4px 4px 2px !important;
    overflow: visible !important;
  }

  .mapro-map-shell.is-side-controls .mapro-system-main [data-short-label]::after {
    content: attr(data-short-label);
    display: block;
    margin-top: 1px;
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0;
    color: #1f2937;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
  }

  .mapro-map-shell.is-side-controls .mapro-system-main [data-short-label] .mapro-btn-text,
  .mapro-map-shell.is-side-controls .mapro-system-main [data-short-label] .label,
  .mapro-map-shell.is-side-controls .mapro-system-main [data-short-label] .mapro-mode-menu-value {
    display: none !important;
  }
}

/* Smartphone final grid lock:
   8 equal slots (4x2), report on top-right slot, fullscreen floating outside */
@media (max-width: 820px) {
  .mapro-map-shell.is-smartphone-top-tool-group .mapro-system-row {
    position: relative !important;
    overflow: visible !important;
    padding: 4px 8px 2px 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .mapro-map-shell.is-smartphone-top-tool-group #mapro-system-main {
    --mapro-smartphone-slot-size: clamp(34px, 9vw, 40px);
    --mapro-smartphone-slot-gap: clamp(3px, 0.9vw, 6px);
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, var(--mapro-smartphone-slot-size)) !important;
    align-items: stretch !important;
    justify-items: center !important;
    justify-content: stretch !important;
    gap: var(--mapro-smartphone-slot-gap) !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .mapro-map-shell.is-smartphone-top-tool-group .mapro-system-main > * {
    margin: 0 !important;
    justify-self: center !important;
    align-self: stretch !important;
  }

  .mapro-map-shell.is-smartphone-top-tool-group #mapro-floor-stack-quick-toggle { grid-column: 1; grid-row: 1; }
  .mapro-map-shell.is-smartphone-top-tool-group .mapro-view-mode-toggle {
    grid-column: 2 / span 2;
    grid-row: 1;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--mapro-smartphone-slot-gap) !important;
    align-items: stretch !important;
    justify-items: center !important;
    width: 100% !important;
    height: 100% !important;
  }
  .mapro-map-shell.is-smartphone-top-tool-group #mapro-restroom-toggle { grid-column: 1; grid-row: 2; }
  .mapro-map-shell.is-smartphone-top-tool-group #mapro-gps-locate-toggle { grid-column: 2; grid-row: 2; }
  .mapro-map-shell.is-smartphone-top-tool-group #mapro-hazard-toggle { grid-column: 3; grid-row: 2; }
  .mapro-map-shell.is-smartphone-top-tool-group #mapro-report-category-stack { grid-column: 4; grid-row: 1 / span 2; }

  /* remove eye/map-only control for now */
  .mapro-map-shell #mapro-map-only-toggle {
    display: none !important;
  }

  /* Smartphone icon grid is fixed to 8 slots; keep walk/cart control in nav area only */
  .mapro-map-shell.is-smartphone-top-tool-group #mapro-system-main #mapro-mode-menu-toggle.mapro-mode-quick-toggle {
    display: none !important;
  }

  .mapro-map-shell.is-smartphone-top-tool-group #mapro-report-category-stack {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    gap: var(--mapro-smartphone-slot-gap) !important;
  }

  .mapro-map-shell.is-smartphone-top-tool-group #mapro-report-category-stack > #mapro-report-toggle {
    width: 100% !important;
    min-width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .mapro-map-shell.is-smartphone-top-tool-group #mapro-report-category-stack > #mapro-ann-filter-toggle {
    width: 100% !important;
    min-width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .mapro-map-shell.is-smartphone-top-tool-group #mapro-floor-stack-quick-toggle,
  .mapro-map-shell.is-smartphone-top-tool-group .mapro-view-mode-toggle .mapro-view-mode-btn,
  .mapro-map-shell.is-smartphone-top-tool-group #mapro-restroom-toggle,
  .mapro-map-shell.is-smartphone-top-tool-group #mapro-gps-locate-toggle,
  .mapro-map-shell.is-smartphone-top-tool-group #mapro-hazard-toggle,
  .mapro-map-shell.is-smartphone-top-tool-group #mapro-report-category-stack > #mapro-report-toggle,
  .mapro-map-shell.is-smartphone-top-tool-group #mapro-report-category-stack > #mapro-ann-filter-toggle {
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  /* copy floor-button look to all smartphone controls */
  .mapro-map-shell.is-smartphone-top-tool-group #mapro-floor-stack-quick-toggle,
  .mapro-map-shell.is-smartphone-top-tool-group .mapro-view-mode-toggle .mapro-view-mode-btn,
  .mapro-map-shell.is-smartphone-top-tool-group #mapro-restroom-toggle,
  .mapro-map-shell.is-smartphone-top-tool-group #mapro-gps-locate-toggle,
  .mapro-map-shell.is-smartphone-top-tool-group #mapro-hazard-toggle,
  .mapro-map-shell.is-smartphone-top-tool-group #mapro-report-category-stack > #mapro-report-toggle,
  .mapro-map-shell.is-smartphone-top-tool-group #mapro-report-category-stack > #mapro-ann-filter-toggle {
    border: 1px solid rgba(148, 163, 184, 0.44) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.14) !important;
    color: #1f2937 !important;
    padding: 0 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    font-family: inherit !important;
  }

  /* keep 3D/mono/report/category visually identical to floor button even when active */
  .mapro-map-shell.is-smartphone-top-tool-group .mapro-view-mode-toggle .mapro-view-mode-btn.is-active,
  .mapro-map-shell.is-smartphone-top-tool-group #mapro-report-category-stack > #mapro-report-toggle.is-active,
  .mapro-map-shell.is-smartphone-top-tool-group #mapro-report-category-stack > #mapro-ann-filter-toggle.is-active {
    border: 1px solid rgba(148, 163, 184, 0.44) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.14) !important;
    color: #1f2937 !important;
  }

  .mapro-map-shell.is-smartphone-top-tool-group .mapro-view-mode-toggle .mapro-view-mode-btn.is-color,
  .mapro-map-shell.is-smartphone-top-tool-group .mapro-view-mode-toggle .mapro-view-mode-btn.is-color.is-active,
  .mapro-map-shell.is-smartphone-top-tool-group .mapro-view-mode-toggle .mapro-view-mode-btn.is-mono,
  .mapro-map-shell.is-smartphone-top-tool-group .mapro-view-mode-toggle .mapro-view-mode-btn.is-mono.is-active {
    border: 1px solid rgba(148, 163, 184, 0.44) !important;
    background: rgba(255, 255, 255, 0.96) !important;
    color: #1f2937 !important;
  }

  .mapro-map-shell.is-smartphone-top-tool-group .mapro-view-mode-toggle .mapro-view-mode-btn i,
  .mapro-map-shell.is-smartphone-top-tool-group .mapro-view-mode-toggle .mapro-view-mode-btn .bi::before {
    color: currentColor !important;
  }

  .mapro-map-shell.is-smartphone-top-tool-group #mapro-fullscreen-btn.is-smartphone-floating {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    bottom: auto !important;
    left: auto !important;
    width: clamp(34px, 7.5vw, 40px) !important;
    min-width: clamp(34px, 7.5vw, 40px) !important;
    height: clamp(34px, 7.5vw, 40px) !important;
    min-height: clamp(34px, 7.5vw, 40px) !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.96) !important;
    background: rgba(255, 255, 255, 0.72) !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18) !important;
    backdrop-filter: blur(4px) !important;
    z-index: 900 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }

  .mapro-map-shell.is-smartphone-top-tool-group #mapro-fullscreen-btn[data-short-label]::after,
  .mapro-map-shell.is-smartphone-top-tool-group #mapro-fullscreen-btn .mapro-btn-text {
    display: none !important;
    content: none !important;
  }

  .mapro-map-shell.is-smartphone-top-tool-group #mapro-fullscreen-menu {
    position: absolute !important;
    right: 8px !important;
    top: calc(8px + clamp(34px, 7.5vw, 40px) + 4px) !important;
    z-index: 901 !important;
  }

  .mapro-map-shell.is-smartphone-top-tool-group #mapro-restroom-toggle .mapro-restroom-icon {
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: inherit !important;
  }

  .mapro-map-shell.is-smartphone-top-tool-group #mapro-restroom-toggle .icon,
  .mapro-map-shell.is-smartphone-top-tool-group #mapro-gps-locate-toggle .icon,
  .mapro-map-shell.is-smartphone-top-tool-group #mapro-hazard-toggle .icon,
  .mapro-map-shell.is-smartphone-top-tool-group #mapro-floor-stack-quick-toggle .icon,
  .mapro-map-shell.is-smartphone-top-tool-group #mapro-report-category-stack > #mapro-report-toggle .icon,
  .mapro-map-shell.is-smartphone-top-tool-group #mapro-report-category-stack > #mapro-ann-filter-toggle .icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
  }

  .mapro-map-shell.is-smartphone-top-tool-group #mapro-report-toggle .mapro-report-toggle-icon-image {
    width: clamp(16px, 4.4vw, 20px) !important;
    height: clamp(16px, 4.4vw, 20px) !important;
    max-width: none !important;
    max-height: none !important;
  }

  .mapro-map-shell.is-smartphone-top-tool-group #mapro-restroom-toggle .label,
  .mapro-map-shell.is-smartphone-top-tool-group #mapro-gps-locate-toggle .label,
  .mapro-map-shell.is-smartphone-top-tool-group #mapro-hazard-toggle .label,
  .mapro-map-shell.is-smartphone-top-tool-group #mapro-floor-stack-quick-toggle .mapro-btn-text,
  .mapro-map-shell.is-smartphone-top-tool-group #mapro-floor-stack-quick-toggle .mapro-floor-stack-quick-current {
    display: none !important;
  }

  .mapro-map-shell.is-smartphone-top-tool-group #mapro-system-panel-toggle.is-smartphone-chip {
    position: absolute !important;
    left: 8px !important;
    top: -12px !important;
    transform: none !important;
    width: 28px !important;
    min-width: 28px !important;
    height: 24px !important;
    min-height: 24px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(148, 163, 184, 0.62) !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.2) !important;
    z-index: 64 !important;
    padding: 0 !important;
  }

  .mapro-map-shell.is-smartphone-top-tool-group #mapro-system-panel-toggle.is-smartphone-chip .mapro-system-panel-toggle-label {
    display: none !important;
  }

  .mapro-map-shell.is-smartphone-top-tool-group #mapro-system-panel-toggle.is-smartphone-chip .mapro-system-panel-toggle-icon {
    font-size: 13px !important;
    line-height: 1 !important;
  }

  .mapro-map-shell.is-smartphone-top-tool-group .mapro-system-main [data-short-label] {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  .mapro-map-shell.is-smartphone-top-tool-group .mapro-system-main [data-short-label]::after {
    display: inline-block !important;
    content: attr(data-short-label);
    font-size: 10.5px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    margin-top: 0 !important;
    white-space: nowrap !important;
  }

  .mapro-map-shell.is-smartphone-top-tool-group #mapro-floor-stack-quick-toggle[data-short-label]::after {
    content: attr(data-short-label);
    white-space: nowrap !important;
    text-align: center !important;
  }

  .mapro-map-shell.is-smartphone-top-tool-group #mapro-view-mode-toggle-btn[data-short-label]::after {
    content: attr(data-short-label);
    white-space: nowrap !important;
    text-align: center !important;
  }

  .mapro-map-shell.is-smartphone-top-tool-group .mapro-system-main [data-short-label] i,
  .mapro-map-shell.is-smartphone-top-tool-group .mapro-system-main [data-short-label] .bi::before {
    font-size: clamp(16px, 4.1vw, 20px) !important;
    line-height: 1 !important;
  }

  /* shrink route selector block height by ~20% */
  .mapro-map-shell.is-smartphone-top-tool-group .mapro-nav-bar {
    padding: 3px !important;
    gap: 3px !important;
    border-radius: 10px !important;
  }

  .mapro-map-shell.is-smartphone-top-tool-group .mapro-nav-item,
  .mapro-map-shell.is-smartphone-top-tool-group #mapro-nav-mode.mapro-nav-mode {
    min-height: 40px !important;
    padding: 3px 6px !important;
    border-radius: 10px !important;
  }

  .mapro-map-shell.is-smartphone-top-tool-group .mapro-nav-item .label,
  .mapro-map-shell.is-smartphone-top-tool-group #mapro-nav-mode .label {
    font-size: calc(9px * var(--mapro-font-scale)) !important;
    line-height: 1 !important;
  }

  .mapro-map-shell.is-smartphone-top-tool-group .mapro-nav-item .value,
  .mapro-map-shell.is-smartphone-top-tool-group #mapro-nav-mode #mapro-mode-menu-toggle .mapro-mode-menu-value {
    font-size: calc(10px * var(--mapro-font-scale)) !important;
    line-height: 1.05 !important;
  }

  .mapro-map-shell.is-smartphone-top-tool-group #mapro-nav-mode #mapro-mode-menu-toggle .mapro-mode-menu-value {
    display: inline-block !important;
    white-space: nowrap !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* collapse must hide icon group and nav block completely */
  .mapro-map-shell.is-smartphone-top-tool-group.is-smartphone-tools-collapsed #mapro-system-main {
    display: none !important;
  }
  .mapro-map-shell.is-smartphone-top-tool-group.is-smartphone-tools-collapsed .mapro-nav-bar {
    display: none !important;
  }
}

/* Smartphone button hard-lock:
   keep floor / 3D / mono / report / category exactly same skin */
@media (max-width: 820px) {
  .mapro-map-shell.is-smartphone-top-tool-group #mapro-floor-stack-quick-toggle,
  .mapro-map-shell.is-smartphone-top-tool-group .mapro-view-mode-toggle .mapro-view-mode-btn,
  .mapro-map-shell.is-smartphone-top-tool-group #mapro-report-category-stack > #mapro-report-toggle,
  .mapro-map-shell.is-smartphone-top-tool-group #mapro-report-category-stack > #mapro-ann-filter-toggle {
    border: 1px solid rgba(148, 163, 184, 0.44) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    color: #1f2937 !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.14) !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-shadow: none !important;
    outline: none !important;
    filter: none !important;
  }

  .mapro-map-shell.is-smartphone-top-tool-group .mapro-view-mode-toggle .mapro-view-mode-btn.is-active,
  .mapro-map-shell.is-smartphone-top-tool-group .mapro-view-mode-toggle .mapro-view-mode-btn.is-color,
  .mapro-map-shell.is-smartphone-top-tool-group .mapro-view-mode-toggle .mapro-view-mode-btn.is-color.is-active,
  .mapro-map-shell.is-smartphone-top-tool-group .mapro-view-mode-toggle .mapro-view-mode-btn.is-mono,
  .mapro-map-shell.is-smartphone-top-tool-group .mapro-view-mode-toggle .mapro-view-mode-btn.is-mono.is-active,
  .mapro-map-shell.is-smartphone-top-tool-group #mapro-report-category-stack > #mapro-report-toggle.is-active,
  .mapro-map-shell.is-smartphone-top-tool-group #mapro-report-category-stack > #mapro-ann-filter-toggle.is-active {
    border: 1px solid rgba(148, 163, 184, 0.44) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    color: #1f2937 !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.14) !important;
    filter: none !important;
  }

  .mapro-map-shell.is-smartphone-top-tool-group #mapro-floor-stack-quick-toggle i,
  .mapro-map-shell.is-smartphone-top-tool-group #mapro-floor-stack-quick-toggle .bi::before,
  .mapro-map-shell.is-smartphone-top-tool-group .mapro-view-mode-toggle .mapro-view-mode-btn i,
  .mapro-map-shell.is-smartphone-top-tool-group .mapro-view-mode-toggle .mapro-view-mode-btn .bi::before,
  .mapro-map-shell.is-smartphone-top-tool-group #mapro-report-category-stack > #mapro-report-toggle i,
  .mapro-map-shell.is-smartphone-top-tool-group #mapro-report-category-stack > #mapro-report-toggle .bi::before,
  .mapro-map-shell.is-smartphone-top-tool-group #mapro-report-category-stack > #mapro-ann-filter-toggle i,
  .mapro-map-shell.is-smartphone-top-tool-group #mapro-report-category-stack > #mapro-ann-filter-toggle .bi::before {
    color: #1f2937 !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .mapro-map-shell.is-smartphone-top-tool-group .mapro-system-main [data-short-label]::after {
    font-family: inherit !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    color: #1f2937 !important;
  }
}

/* Smartphone tool grid final lock:
   force stable 4x2 layout and identical button skin for all icon controls. */
@media (max-width: 820px) {
  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group .mapro-system-row {
    position: relative !important;
    overflow: visible !important;
    padding: 6px 8px 2px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group #mapro-system-main {
    --mapro-smartphone-grid-row-height: clamp(39px, 8.6vw, 48px);
    --mapro-smartphone-grid-gap: clamp(4px, 1vw, 7px);
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, var(--mapro-smartphone-grid-row-height)) !important;
    gap: var(--mapro-smartphone-grid-gap) !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    justify-content: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group #mapro-map-only-toggle,
  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group #mapro-system-main #mapro-mode-menu-toggle.mapro-mode-quick-toggle {
    display: none !important;
  }

  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group #mapro-floor-stack-quick-toggle { grid-column: 1; grid-row: 1; }
  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group .mapro-view-mode-toggle {
    grid-column: 2 / span 2;
    grid-row: 1;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--mapro-smartphone-grid-gap) !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
  }
  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group #mapro-view-mode-toggle-btn { grid-column: 1; grid-row: 1; }
  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group #mapro-color-mode-toggle-btn { grid-column: 2; grid-row: 1; }
  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group #mapro-restroom-toggle { grid-column: 1; grid-row: 2; }
  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group #mapro-gps-locate-toggle { grid-column: 2; grid-row: 2; }
  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group #mapro-hazard-toggle { grid-column: 3; grid-row: 2; }

  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group #mapro-report-category-stack {
    display: contents !important;
  }
  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group #mapro-report-category-stack > #mapro-report-toggle {
    grid-column: 4;
    grid-row: 1;
  }
  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group #mapro-report-category-stack > #mapro-ann-filter-toggle {
    grid-column: 4;
    grid-row: 2;
  }
  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group #mapro-report-category-stack.is-single > #mapro-ann-filter-toggle {
    grid-column: 4;
    grid-row: 1;
  }

  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group #mapro-floor-stack-quick-toggle,
  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group .mapro-view-mode-toggle .mapro-view-mode-btn,
  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group #mapro-restroom-toggle,
  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group #mapro-gps-locate-toggle,
  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group #mapro-hazard-toggle,
  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group #mapro-report-category-stack > #mapro-report-toggle,
  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group #mapro-report-category-stack > #mapro-ann-filter-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 6px !important;
    gap: 4px !important;
    border: 1px solid rgba(148, 163, 184, 0.44) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    color: #1f2937 !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.14) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-shadow: none !important;
    outline: none !important;
    filter: none !important;
    overflow: hidden !important;
  }

  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group .mapro-view-mode-toggle .mapro-view-mode-btn.is-active,
  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group .mapro-view-mode-toggle .mapro-view-mode-btn.is-color,
  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group .mapro-view-mode-toggle .mapro-view-mode-btn.is-color.is-active,
  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group .mapro-view-mode-toggle .mapro-view-mode-btn.is-mono,
  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group .mapro-view-mode-toggle .mapro-view-mode-btn.is-mono.is-active,
  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group #mapro-report-category-stack > #mapro-report-toggle.is-active,
  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group #mapro-report-category-stack > #mapro-ann-filter-toggle.is-active {
    border: 1px solid rgba(148, 163, 184, 0.44) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    color: #1f2937 !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.14) !important;
  }

  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group .mapro-system-main [data-short-label] {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 0 !important;
  }

  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group .mapro-system-main [data-short-label]::after {
    display: inline-block !important;
    content: attr(data-short-label);
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.06 !important;
    color: #1f2937 !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group #mapro-floor-stack-quick-toggle[data-short-label]::after,
  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group #mapro-view-mode-toggle-btn[data-short-label]::after,
  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group #mapro-report-toggle[data-short-label]::after,
  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group #mapro-restroom-toggle[data-short-label]::after,
  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group #mapro-hazard-toggle[data-short-label]::after,
  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group #mapro-ann-filter-toggle[data-short-label]::after,
  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group #mapro-gps-locate-toggle[data-short-label]::after {
    content: attr(data-short-label);
    white-space: nowrap !important;
    text-align: left !important;
  }

  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group #mapro-floor-stack-quick-toggle .mapro-btn-text,
  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group #mapro-floor-stack-quick-toggle .mapro-floor-stack-quick-current,
  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group #mapro-restroom-toggle .label,
  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group #mapro-gps-locate-toggle .label,
  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group #mapro-hazard-toggle .label {
    display: none !important;
  }

  /* Hazard button had a desktop-only icon sizing rule (width:100%) that pushed it right in smartphone grid. */
  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group #mapro-hazard-toggle {
    margin-left: 0 !important;
  }

  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group #mapro-hazard-toggle .icon {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
  }

  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group .mapro-system-main [data-short-label] i,
  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group .mapro-system-main [data-short-label] .bi::before {
    font-size: clamp(16px, 4.2vw, 20px) !important;
    line-height: 1 !important;
  }

  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group #mapro-system-panel-toggle.is-smartphone-chip {
    position: absolute !important;
    top: -22px !important;
    left: 8px !important;
    transform: none !important;
    z-index: 75 !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 22px !important;
    min-height: 22px !important;
    border-radius: 10px 10px 0 0 !important;
    border: 1px solid rgba(148, 163, 184, 0.44) !important;
    border-bottom: none !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 -2px 6px rgba(15, 23, 42, 0.1) !important;
    padding: 0 !important;
  }

  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group #mapro-system-panel-toggle.is-smartphone-chip .mapro-system-panel-toggle-label {
    display: none !important;
  }

  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group #mapro-fullscreen-btn.is-smartphone-floating {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    bottom: auto !important;
    left: auto !important;
    width: clamp(34px, 7.5vw, 40px) !important;
    min-width: clamp(34px, 7.5vw, 40px) !important;
    height: clamp(34px, 7.5vw, 40px) !important;
    min-height: clamp(34px, 7.5vw, 40px) !important;
    border-radius: 10px !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 900 !important;
    padding: 0 !important;
  }
  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group #mapro-fullscreen-btn.is-smartphone-floating i {
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 0 0 6px rgba(255,255,255,0.8) !important;
  }

  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group #mapro-fullscreen-btn[data-short-label]::after,
  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group #mapro-fullscreen-btn .mapro-btn-text {
    display: none !important;
    content: none !important;
  }

  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group #mapro-fullscreen-menu {
    position: absolute !important;
    right: 8px !important;
    top: calc(8px + clamp(34px, 7.5vw, 40px) + 4px) !important;
    z-index: 901 !important;
  }

  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group.is-smartphone-tools-collapsed #mapro-system-main,
  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group.is-smartphone-tools-collapsed .mapro-nav-bar {
    display: none !important;
  }
}

/* Smartphone travel mode button final lock:
   keep 徒歩/台車 text perfectly centered inside the right card. */
@media (max-width: 820px) {
  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group #mapro-nav-mode .mapro-mode-menu-group {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
  }

  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group #mapro-nav-mode #mapro-mode-menu-toggle.mapro-mode-quick-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: row !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 4px !important;
    text-align: center !important;
    line-height: 1 !important;
  }

  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group #mapro-nav-mode #mapro-mode-menu-toggle.mapro-mode-quick-toggle::after {
    display: none !important;
    content: none !important;
  }

  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group #mapro-nav-mode #mapro-mode-menu-toggle .mapro-mode-quick-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
  }

  .mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group #mapro-nav-mode #mapro-mode-menu-toggle .mapro-mode-menu-value {
    display: inline-block !important;
    position: static !important;
    align-self: center !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Responsive mode separation final lock:
   hide smartphone chip on desktop layout. */
.mapro-wrap .mapro-map-shell.is-layout-desktop-ui #mapro-system-panel-toggle.is-smartphone-chip {
  display: none !important;
}

/* Smartphone grid lock (class-driven):
   keep 8-slot tool layout stable even when legacy media-query styles exist. */
.mapro-wrap .mapro-map-shell.is-smartphone-grid-locked .mapro-system-row {
  position: relative !important;
  overflow: visible !important;
  padding: 6px 8px 2px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.mapro-wrap .mapro-map-shell.is-smartphone-grid-locked #mapro-system-main {
  --mapro-smartphone-grid-row-height: clamp(39px, 8.6vw, 48px);
  --mapro-smartphone-grid-gap: clamp(4px, 1vw, 7px);
  display: grid !important;
  width: 100% !important;
  max-width: 100% !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, var(--mapro-smartphone-grid-row-height)) !important;
  gap: var(--mapro-smartphone-grid-gap) !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  justify-content: stretch !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.mapro-wrap .mapro-map-shell.is-smartphone-grid-locked #mapro-map-only-toggle,
.mapro-wrap .mapro-map-shell.is-smartphone-grid-locked #mapro-system-main #mapro-mode-menu-toggle.mapro-mode-quick-toggle {
  display: none !important;
}

.mapro-wrap .mapro-map-shell.is-smartphone-grid-locked #mapro-floor-stack-quick-toggle { grid-column: 1; grid-row: 1; }
.mapro-wrap .mapro-map-shell.is-smartphone-grid-locked .mapro-view-mode-toggle {
  grid-column: 2 / span 2;
  grid-row: 1;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--mapro-smartphone-grid-gap) !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
}

/* Remove legacy group frame on 3D/mono buttons (prevents double-border look). */
.mapro-wrap .mapro-map-shell.is-smartphone-grid-locked .mapro-view-mode-toggle,
.mapro-wrap .mapro-map-shell.is-smartphone-grid-locked .mapro-view-mode-toggle .mapro-view-subgroup {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.mapro-wrap .mapro-map-shell.is-smartphone-grid-locked #mapro-view-mode-toggle-btn { grid-column: 1; grid-row: 1; }
.mapro-wrap .mapro-map-shell.is-smartphone-grid-locked #mapro-color-mode-toggle-btn { grid-column: 2; grid-row: 1; }
.mapro-wrap .mapro-map-shell.is-smartphone-grid-locked #mapro-restroom-toggle { grid-column: 1; grid-row: 2; }
.mapro-wrap .mapro-map-shell.is-smartphone-grid-locked #mapro-gps-locate-toggle { grid-column: 2; grid-row: 2; }
.mapro-wrap .mapro-map-shell.is-smartphone-grid-locked #mapro-hazard-toggle { grid-column: 3; grid-row: 2; }

.mapro-wrap .mapro-map-shell.is-smartphone-grid-locked #mapro-report-category-stack {
  display: contents !important;
}
.mapro-wrap .mapro-map-shell.is-smartphone-grid-locked #mapro-report-category-stack > #mapro-report-toggle {
  grid-column: 4;
  grid-row: 1;
}
.mapro-wrap .mapro-map-shell.is-smartphone-grid-locked #mapro-report-category-stack > #mapro-ann-filter-toggle {
  grid-column: 4;
  grid-row: 2;
}
.mapro-wrap .mapro-map-shell.is-smartphone-grid-locked #mapro-report-category-stack.is-single > #mapro-ann-filter-toggle {
  grid-column: 4;
  grid-row: 1;
}

.mapro-wrap .mapro-map-shell.is-smartphone-grid-locked #mapro-floor-stack-quick-toggle,
.mapro-wrap .mapro-map-shell.is-smartphone-grid-locked .mapro-view-mode-toggle .mapro-view-mode-btn,
.mapro-wrap .mapro-map-shell.is-smartphone-grid-locked #mapro-restroom-toggle,
.mapro-wrap .mapro-map-shell.is-smartphone-grid-locked #mapro-gps-locate-toggle,
.mapro-wrap .mapro-map-shell.is-smartphone-grid-locked #mapro-hazard-toggle,
.mapro-wrap .mapro-map-shell.is-smartphone-grid-locked #mapro-report-category-stack > #mapro-report-toggle,
.mapro-wrap .mapro-map-shell.is-smartphone-grid-locked #mapro-report-category-stack > #mapro-ann-filter-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 6px !important;
  gap: 4px !important;
  border: 1px solid rgba(148, 163, 184, 0.44) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  color: #1f2937 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.14) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  overflow: hidden !important;
}

.mapro-wrap .mapro-map-shell.is-smartphone-grid-locked .mapro-system-main [data-short-label] {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 0 !important;
}

.mapro-wrap .mapro-map-shell.is-smartphone-grid-locked .mapro-system-main [data-short-label]::after {
  display: inline-block !important;
  content: attr(data-short-label);
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.06 !important;
  color: #1f2937 !important;
  white-space: nowrap !important;
}

.mapro-wrap .mapro-map-shell.is-smartphone-grid-locked #mapro-floor-stack-quick-toggle[data-short-label]::after,
.mapro-wrap .mapro-map-shell.is-smartphone-grid-locked #mapro-view-mode-toggle-btn[data-short-label]::after,
.mapro-wrap .mapro-map-shell.is-smartphone-grid-locked #mapro-report-toggle[data-short-label]::after,
.mapro-wrap .mapro-map-shell.is-smartphone-grid-locked #mapro-restroom-toggle[data-short-label]::after,
.mapro-wrap .mapro-map-shell.is-smartphone-grid-locked #mapro-hazard-toggle[data-short-label]::after,
.mapro-wrap .mapro-map-shell.is-smartphone-grid-locked #mapro-ann-filter-toggle[data-short-label]::after,
.mapro-wrap .mapro-map-shell.is-smartphone-grid-locked #mapro-gps-locate-toggle[data-short-label]::after {
  content: attr(data-short-label);
  white-space: nowrap !important;
  text-align: left !important;
}

.mapro-wrap .mapro-map-shell.is-smartphone-grid-locked .mapro-system-main [data-short-label] i,
.mapro-wrap .mapro-map-shell.is-smartphone-grid-locked .mapro-system-main [data-short-label] .bi::before {
  font-size: clamp(16px, 4.2vw, 20px) !important;
  line-height: 1 !important;
}

.mapro-wrap .mapro-map-shell.is-smartphone-grid-locked #mapro-report-toggle .mapro-report-toggle-icon-image {
  width: clamp(16px, 4.4vw, 20px) !important;
  height: clamp(16px, 4.4vw, 20px) !important;
}

.mapro-wrap .mapro-map-shell.is-smartphone-grid-locked #mapro-hazard-toggle {
  margin-left: 0 !important;
}

.mapro-wrap .mapro-map-shell.is-smartphone-grid-locked #mapro-hazard-toggle .icon {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  flex: 0 0 auto !important;
}

.mapro-wrap .mapro-map-shell.is-smartphone-grid-locked #mapro-system-panel-toggle.is-smartphone-chip {
  position: absolute !important;
  top: -12px !important;
  left: 8px !important;
  z-index: 75 !important;
  width: 28px !important;
  min-width: 28px !important;
  height: 24px !important;
  min-height: 24px !important;
  border-radius: 999px !important;
  padding: 0 !important;
}

.mapro-wrap .mapro-map-shell.is-smartphone-grid-locked #mapro-fullscreen-btn {
  /* Stays in overlay-tools (top-right); no special bottom-panel positioning needed */
}

.mapro-wrap .mapro-map-shell.is-smartphone-grid-locked.is-smartphone-tools-collapsed #mapro-system-main,
.mapro-wrap .mapro-map-shell.is-smartphone-grid-locked.is-smartphone-tools-collapsed .mapro-nav-bar {
  display: none !important;
}

/* Report marker on map: icon only (no white frame/background). */
.mapro-ann-icon.is-report .mapro-ann-icon-symbol,
.mapro-ann-icon .mapro-ann-icon-symbol.is-report {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.mapro-ann-icon.is-report.mapro-ann-on-route .mapro-ann-icon-symbol,
.mapro-ann-icon.mapro-ann-on-route .mapro-ann-icon-symbol.is-report {
  animation: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Smartphone collapse tab: attached to top-left edge of tool panel. */
.mapro-wrap .mapro-map-shell.is-smartphone-grid-locked #mapro-system-panel-toggle.is-smartphone-chip,
.mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group #mapro-system-panel-toggle.is-smartphone-chip {
  position: absolute !important;
  top: -22px !important;
  left: 8px !important;
  transform: none !important;
  z-index: 78 !important;
  width: 48px !important;
  min-width: 48px !important;
  height: 22px !important;
  min-height: 22px !important;
  border-radius: 10px 10px 0 0 !important;
  border: 1px solid rgba(148, 163, 184, 0.44) !important;
  border-bottom: none !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 -2px 6px rgba(15, 23, 42, 0.1) !important;
  padding: 0 !important;
}

/* Smartphone fullscreen button: top-right corner inside the map shell. */
.mapro-wrap .mapro-map-shell.is-smartphone-grid-locked #mapro-fullscreen-btn.is-smartphone-floating,
.mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group #mapro-fullscreen-btn.is-smartphone-floating {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  bottom: auto !important;
  left: auto !important;
  width: clamp(34px, 7.5vw, 40px) !important;
  min-width: clamp(34px, 7.5vw, 40px) !important;
  height: clamp(34px, 7.5vw, 40px) !important;
  min-height: clamp(34px, 7.5vw, 40px) !important;
  z-index: 900 !important;
  border-radius: 10px !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.mapro-wrap .mapro-map-shell.is-smartphone-grid-locked #mapro-fullscreen-btn.is-smartphone-floating i,
.mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group #mapro-fullscreen-btn.is-smartphone-floating i {
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 0 0 6px rgba(255,255,255,0.8) !important;
}

/* Smartphone floating fullscreen: attention state overrides transparent bg */
.mapro-wrap .mapro-map-shell.is-smartphone-grid-locked #mapro-fullscreen-btn.is-smartphone-floating.is-attention,
.mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group #mapro-fullscreen-btn.is-smartphone-floating.is-attention {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 2px solid rgba(37, 99, 235, 0.85) !important;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.28) !important;
  backdrop-filter: blur(4px) !important;
  animation: maproFullscreenHintPulseMobile 1.6s ease-in-out infinite !important;
}

.mapro-wrap .mapro-map-shell.is-smartphone-grid-locked #mapro-fullscreen-menu,
.mapro-wrap .mapro-map-shell.is-smartphone-top-tool-group #mapro-fullscreen-menu {
  position: absolute !important;
  top: calc(8px + clamp(34px, 7.5vw, 40px) + 4px) !important;
  right: 8px !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 901 !important;
}

/* -------------------------------------------------------------------------
   Time Travel (date-linked): bottom full-width slider shown only when enabled
   ------------------------------------------------------------------------- */
.mapro-time-travel-bar {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: calc(max(10px, env(safe-area-inset-bottom)) + var(--mapro-bottom-overlay-offset, 120px) + 8px);
  z-index: 721;
  display: grid;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  border: none;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 200ms ease, transform 200ms ease;
  --mapro-time-progress: 0%;
}

.mapro-time-travel-bar.is-visible {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
}

/* Desktop: keep timeline at the bottom edge. */
.mapro-map-shell.is-layout-desktop-ui .mapro-time-travel-bar {
  bottom: max(10px, env(safe-area-inset-bottom));
}

.mapro-time-travel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.mapro-time-travel-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: #1f2937;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  white-space: nowrap;
}

.mapro-time-travel-label i {
  color: #f59e0b;
  font-size: 13px;
  line-height: 1;
}

.mapro-time-travel-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.44);
  background: rgba(255, 255, 255, 0.96);
  color: #1f2937;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
}

.mapro-time-travel-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  margin-left: 4px;
  flex-shrink: 0;
  border: 1px solid rgba(148, 163, 184, 0.44);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  color: #64748b;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}

.mapro-time-travel-close i {
  font-size: 11px;
  line-height: 1;
}

.mapro-time-travel-close:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}

.mapro-time-travel-track-wrap {
  position: relative;
  width: 100%;
  min-width: 0;
  height: 34px;
  display: flex;
  align-items: flex-end;
}

.mapro-time-travel-slider {
  width: 100%;
  min-width: 0;
  cursor: pointer;
  margin: 0;
  position: relative;
  z-index: 2;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
}

.mapro-time-travel-slider::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.42);
  background:
    linear-gradient(90deg, rgba(57, 255, 20, 0.95) 0%, rgba(57, 255, 20, 0.95) var(--mapro-time-progress), rgba(203, 213, 225, 0.86) var(--mapro-time-progress), rgba(203, 213, 225, 0.86) 100%);
}

.mapro-time-travel-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin-top: -5px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.95);
  background: #f59e0b;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.3);
}

.mapro-time-travel-slider::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.42);
  background: rgba(203, 213, 225, 0.86);
}

.mapro-time-travel-slider::-moz-range-progress {
  height: 8px;
  border-radius: 999px;
  background: rgba(57, 255, 20, 0.95);
}

.mapro-time-travel-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.95);
  background: #f59e0b;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.3);
}

.mapro-time-travel-events {
  position: absolute;
  left: 0;
  right: 0;
  top: 1px;
  height: 18px;
  transform: none;
  pointer-events: auto;
  z-index: 3;
}

.mapro-time-travel-event {
  position: absolute;
  top: 0;
  width: 18px;
  height: 18px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.24);
  color: #ffffff;
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease, color 180ms ease;
}

.mapro-time-travel-event i {
  font-size: 10px;
  line-height: 1;
  pointer-events: none;
}

.mapro-time-travel-event.is-block-start {
  background: rgba(239, 68, 68, 0.95);
}

.mapro-time-travel-event.is-caution-start {
  background: rgba(245, 158, 11, 0.96);
}

.mapro-time-travel-event.is-block-end {
  background: rgba(34, 197, 94, 0.94);
}

.mapro-time-travel-event.is-caution-end {
  background: rgba(59, 130, 246, 0.94);
}

.mapro-time-travel-event.is-mixed {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.96) 0%, rgba(245, 158, 11, 0.96) 100%);
}

.mapro-time-travel-event:hover,
.mapro-time-travel-event:focus-visible {
  transform: translateX(-50%) translateY(-1px) scale(1.08);
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.34);
  outline: none;
}

.mapro-time-travel-event.is-active {
  transform: translateX(-50%) scale(1.12);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.26), 0 2px 8px rgba(15, 23, 42, 0.32);
}

/* Duration span bars on the timeline track */
.mapro-time-travel-span {
  position: absolute;
  bottom: 0;
  height: 8px;
  border-radius: 4px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
}

.mapro-time-travel-span i {
  font-size: 7px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.92);
  pointer-events: none;
  flex-shrink: 0;
}

.mapro-time-travel-span.is-block {
  background: rgba(239, 68, 68, 0.55);
}

.mapro-time-travel-span.is-caution {
  background: rgba(245, 158, 11, 0.50);
}

.mapro-map-shell.is-smartphone-grid-locked .mapro-time-travel-bar,
.mapro-map-shell.is-smartphone-top-tool-group .mapro-time-travel-bar {
  left: 8px;
  right: 8px;
  bottom: calc(max(8px, env(safe-area-inset-bottom)) + var(--mapro-bottom-overlay-offset, 120px) + 6px);
  padding: 7px 8px;
  gap: 5px;
}

.mapro-map-shell.is-smartphone-grid-locked .mapro-time-travel-label,
.mapro-map-shell.is-smartphone-top-tool-group .mapro-time-travel-label {
  font-size: 11px;
}

.mapro-map-shell.is-smartphone-grid-locked .mapro-time-travel-value,
.mapro-map-shell.is-smartphone-top-tool-group .mapro-time-travel-value {
  min-width: 50px;
  height: 22px;
  font-size: 11px;
}

.mapro-map-shell.is-smartphone-grid-locked .mapro-time-travel-track-wrap,
.mapro-map-shell.is-smartphone-top-tool-group .mapro-time-travel-track-wrap {
  height: 30px;
}

.mapro-map-shell.is-smartphone-grid-locked .mapro-time-travel-event,
.mapro-map-shell.is-smartphone-top-tool-group .mapro-time-travel-event {
  width: 16px;
  height: 16px;
}

.mapro-map-shell.is-smartphone-grid-locked .mapro-time-travel-event i,
.mapro-map-shell.is-smartphone-top-tool-group .mapro-time-travel-event i {
  font-size: 9px;
}

.leaflet-overlay-pane path.mapro-all-route-line,
.leaflet-overlay-pane path.mapro-static-edge-line {
  transition: stroke 200ms ease, opacity 200ms ease, stroke-width 200ms ease;
}