/* MyMappi bottom navigation v2: balanced, stable, and intentionally quiet. */ html body .app-shell .bottom-nav, html body main.app-shell .bottom-nav { box-sizing: border-box !important; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 62px minmax(0, 1fr) minmax(0, 1fr) !important; align-items: center !important; min-height: 78px !important; padding: 8px 10px !important; gap: 4px !important; overflow: visible !important; border: 1px solid rgba(210, 244, 237, 0.16) !important; border-radius: 32px !important; background: radial-gradient(circle at 50% 0%, rgba(41, 179, 139, 0.12), transparent 42%), linear-gradient(145deg, rgba(5, 35, 47, 0.94), rgba(7, 55, 70, 0.91)) !important; box-shadow: 0 16px 36px rgba(3, 28, 40, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; backdrop-filter: blur(20px) saturate(1.14) !important; -webkit-backdrop-filter: blur(20px) saturate(1.14) !important; } html body .app-shell .bottom-nav-item, html body main.app-shell .bottom-nav-item { position: relative !important; box-sizing: border-box !important; display: grid !important; grid-template-rows: 20px 14px !important; place-content: center !important; place-items: center !important; width: 100% !important; min-width: 0 !important; min-height: 54px !important; margin: 0 !important; padding: 7px 3px !important; gap: 4px !important; overflow: visible !important; border: 1px solid transparent !important; border-radius: 20px !important; color: rgba(235, 249, 246, 0.76) !important; background: transparent !important; box-shadow: none !important; font-size: clamp(0.62rem, 1vw, 0.72rem) !important; font-weight: 760 !important; letter-spacing: 0 !important; line-height: 1 !important; text-align: center !important; white-space: nowrap !important; touch-action: manipulation; transition: color 170ms ease, background 170ms ease, border-color 170ms ease, transform 120ms ease !important; } html body .app-shell .bottom-nav-item svg, html body main.app-shell .bottom-nav-item svg { width: 19px !important; height: 19px !important; stroke-width: 2.1 !important; } html body .app-shell .bottom-nav-item.active, html body main.app-shell .bottom-nav-item.active { border-color: rgba(196, 249, 234, 0.13) !important; color: #ffffff !important; background: linear-gradient(145deg, rgba(48, 191, 148, 0.22), rgba(54, 128, 163, 0.17)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.11) !important; } html body .app-shell .bottom-nav-item.active::after, html body main.app-shell .bottom-nav-item.active::after { display: none !important; content: none !important; } html body .app-shell .bottom-nav-item#accountMenuButton, html body main.app-shell .bottom-nav-item#accountMenuButton { color: rgba(235, 249, 246, 0.76) !important; } html body .app-shell .bottom-nav-item#accountMenuButton.active, html body main.app-shell .bottom-nav-item#accountMenuButton.active { color: #ffffff !important; } html body .app-shell #accountMenuButton .account-nav-status, html body main.app-shell #accountMenuButton .account-nav-status { top: 8px !important; left: calc(50% + 7px) !important; width: 6px !important; height: 6px !important; border-color: rgba(6, 45, 57, 0.96) !important; } html body .app-shell .add-memory-button, html body main.app-shell .add-memory-button, html body .app-shell .add-memory-button.first-memory-pulse, html body main.app-shell .add-memory-button.first-memory-pulse, html body .app-shell .map-stage.memory-editor-active .add-memory-button, html body main.app-shell section.map-stage.memory-editor-active .add-memory-button { position: relative !important; inset: auto !important; box-sizing: border-box !important; display: grid !important; place-items: center !important; align-self: center !important; justify-self: center !important; width: 60px !important; height: 60px !important; min-width: 60px !important; min-height: 60px !important; margin: 0 !important; padding: 0 !important; border: 1px solid rgba(220, 255, 246, 0.3) !important; border-radius: 50% !important; color: #ffffff !important; background: radial-gradient(circle at 34% 20%, rgba(255, 255, 255, 0.34), transparent 31%), linear-gradient(145deg, #1aaa7e 0%, #118f98 58%, #176b88 100%) !important; box-shadow: 0 10px 24px rgba(8, 97, 112, 0.26), 0 0 0 4px rgba(45, 194, 150, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.26) !important; animation: none !important; translate: 0 0 !important; transform: none !important; touch-action: manipulation; transition: filter 160ms ease, box-shadow 160ms ease, transform 120ms ease !important; } html body .app-shell .add-memory-button svg, html body main.app-shell .add-memory-button svg { width: 27px !important; height: 27px !important; stroke-width: 2.15 !important; } @media (hover: hover) { html body .app-shell .bottom-nav-item:hover, html body main.app-shell .bottom-nav-item:hover { color: #ffffff !important; background: rgba(255, 255, 255, 0.065) !important; } html body .app-shell .add-memory-button:hover, html body main.app-shell .add-memory-button:hover { filter: brightness(1.045) saturate(1.04) !important; box-shadow: 0 12px 27px rgba(8, 97, 112, 0.3), 0 0 0 4px rgba(45, 194, 150, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.28) !important; transform: none !important; } } html body .app-shell .bottom-nav-item:active, html body main.app-shell .bottom-nav-item:active, html body .app-shell .add-memory-button:active, html body main.app-shell .add-memory-button:active { transform: scale(0.96) !important; } html body .app-shell .bottom-nav-item:focus-visible, html body main.app-shell .bottom-nav-item:focus-visible, html body .app-shell .add-memory-button:focus-visible, html body main.app-shell .add-memory-button:focus-visible { outline: 2px solid rgba(139, 244, 214, 0.9) !important; outline-offset: 2px !important; } @media (max-width: 720px), (hover: none) and (pointer: coarse) and (max-width: 1024px) { html body .app-shell .bottom-nav, html body main.app-shell .bottom-nav { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 58px minmax(0, 1fr) minmax(0, 1fr) !important; height: 78px !important; min-height: 78px !important; padding: 8px !important; gap: 3px !important; border-radius: 28px !important; } html body .app-shell .bottom-nav-item, html body main.app-shell .bottom-nav-item { grid-template-rows: 19px 13px !important; min-height: 50px !important; padding: 6px 2px !important; gap: 4px !important; border-radius: 18px !important; font-size: clamp(0.59rem, 2.45vw, 0.66rem) !important; line-height: 1 !important; white-space: nowrap !important; } html body .app-shell .bottom-nav-item svg, html body main.app-shell .bottom-nav-item svg { width: 18px !important; height: 18px !important; } html body .app-shell .add-memory-button, html body main.app-shell .add-memory-button, html body .app-shell .add-memory-button.first-memory-pulse, html body main.app-shell .add-memory-button.first-memory-pulse, html body .app-shell .map-stage.memory-editor-active .add-memory-button, html body main.app-shell section.map-stage.memory-editor-active .add-memory-button { width: 56px !important; height: 56px !important; min-width: 56px !important; min-height: 56px !important; transform: none !important; } } @media (max-width: 350px) { html body .app-shell .bottom-nav, html body main.app-shell .bottom-nav { right: 6px !important; left: 6px !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 54px minmax(0, 1fr) minmax(0, 1fr) !important; padding-inline: 6px !important; gap: 2px !important; } html body .app-shell .bottom-nav-item, html body main.app-shell .bottom-nav-item { font-size: 0.56rem !important; } html body .app-shell .add-memory-button, html body main.app-shell .add-memory-button { width: 52px !important; height: 52px !important; min-width: 52px !important; min-height: 52px !important; } } @media (prefers-reduced-motion: reduce) { html body .app-shell .bottom-nav-item, html body main.app-shell .bottom-nav-item, html body .app-shell .add-memory-button, html body main.app-shell .add-memory-button { transition: none !important; } }