/* One stable premium header for Home and Explore. */ html body main.app-shell section.map-stage.home-focus header.topbar, html body main.app-shell section.map-stage.map-focus header.topbar { position: absolute !important; top: max(14px, env(safe-area-inset-top)) !important; right: clamp(20px, 3vw, 32px) !important; left: clamp(20px, 3vw, 32px) !important; z-index: 820 !important; box-sizing: border-box !important; display: grid !important; grid-template-columns: minmax(96px, 1fr) auto minmax(96px, 1fr) !important; width: auto !important; max-width: none !important; min-height: 50px !important; align-items: center !important; margin: 0 !important; padding: 0 !important; transform: none !important; pointer-events: none !important; } html body main.app-shell section.map-stage.home-focus header.topbar > .topbar-left, html body main.app-shell section.map-stage.home-focus header.topbar > .topbar-actions, html body main.app-shell section.map-stage.map-focus header.topbar > .topbar-left, html body main.app-shell section.map-stage.map-focus header.topbar > .topbar-actions { position: static !important; inset: auto !important; box-sizing: border-box !important; display: grid !important; grid-template-columns: repeat(2, 42px) !important; width: 96px !important; min-width: 96px !important; height: 50px !important; min-height: 50px !important; align-items: center !important; justify-content: center !important; gap: 4px !important; margin: 0 !important; padding: 4px !important; border: 1px solid rgba(218, 255, 247, 0.24) !important; border-radius: 18px !important; background: radial-gradient(circle at 18% 0%, rgba(100, 230, 196, 0.15), transparent 48%), linear-gradient(145deg, rgba(6, 55, 67, 0.94), rgba(3, 32, 46, 0.93)) !important; box-shadow: 0 12px 28px rgba(2, 28, 40, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.13) !important; filter: none !important; transform: none !important; pointer-events: auto !important; backdrop-filter: blur(16px) saturate(1.1) !important; -webkit-backdrop-filter: blur(16px) saturate(1.1) !important; } html body main.app-shell section.map-stage.home-focus header.topbar > .topbar-left, html body main.app-shell section.map-stage.map-focus header.topbar > .topbar-left { grid-column: 1 !important; justify-self: start !important; } html body main.app-shell section.map-stage.home-focus header.topbar > .topbar-actions, html body main.app-shell section.map-stage.map-focus header.topbar > .topbar-actions { grid-column: 3 !important; justify-self: end !important; } html body main.app-shell section.map-stage.home-focus header.topbar > a.brand, html body main.app-shell section.map-stage.map-focus header.topbar > a.brand { position: static !important; inset: auto !important; grid-column: 2 !important; justify-self: center !important; margin: 0 !important; transform: none !important; pointer-events: auto !important; } html body main.app-shell section.map-stage.home-focus header.topbar #categoryMenuButton, html body main.app-shell section.map-stage.home-focus header.topbar #logoHomeButton, html body main.app-shell section.map-stage.home-focus header.topbar #pinSearchButton, html body main.app-shell section.map-stage.home-focus header.topbar #notificationButton, html body main.app-shell section.map-stage.map-focus header.topbar #categoryMenuButton, html body main.app-shell section.map-stage.map-focus header.topbar #logoHomeButton, html body main.app-shell section.map-stage.map-focus header.topbar #pinSearchButton, html body main.app-shell section.map-stage.map-focus header.topbar #notificationButton { position: relative !important; inset: auto !important; box-sizing: border-box !important; display: grid !important; width: 42px !important; min-width: 42px !important; max-width: 42px !important; height: 42px !important; min-height: 42px !important; max-height: 42px !important; place-items: center !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 14px !important; color: #f3fffb !important; background: rgba(255, 255, 255, 0.055) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; filter: none !important; opacity: 1 !important; transform: none !important; cursor: pointer !important; transition: color 150ms ease, background-color 150ms ease, transform 150ms ease !important; } html body main.app-shell section.map-stage.home-focus header.topbar #categoryMenuButton:hover, html body main.app-shell section.map-stage.home-focus header.topbar #logoHomeButton:hover, html body main.app-shell section.map-stage.home-focus header.topbar #pinSearchButton:hover, html body main.app-shell section.map-stage.home-focus header.topbar #notificationButton:hover, html body main.app-shell section.map-stage.map-focus header.topbar #categoryMenuButton:hover, html body main.app-shell section.map-stage.map-focus header.topbar #logoHomeButton:hover, html body main.app-shell section.map-stage.map-focus header.topbar #pinSearchButton:hover, html body main.app-shell section.map-stage.map-focus header.topbar #notificationButton:hover { color: #ffffff !important; background: rgba(100, 226, 193, 0.18) !important; transform: translateY(-1px) !important; } html body main.app-shell section.map-stage.home-focus header.topbar #categoryMenuButton:focus-visible, html body main.app-shell section.map-stage.home-focus header.topbar #logoHomeButton:focus-visible, html body main.app-shell section.map-stage.home-focus header.topbar #pinSearchButton:focus-visible, html body main.app-shell section.map-stage.home-focus header.topbar #notificationButton:focus-visible, html body main.app-shell section.map-stage.map-focus header.topbar #categoryMenuButton:focus-visible, html body main.app-shell section.map-stage.map-focus header.topbar #logoHomeButton:focus-visible, html body main.app-shell section.map-stage.map-focus header.topbar #pinSearchButton:focus-visible, html body main.app-shell section.map-stage.map-focus header.topbar #notificationButton:focus-visible { outline: 2px solid rgba(151, 244, 216, 0.96) !important; outline-offset: 2px !important; } html body main.app-shell section.map-stage.home-focus header.topbar #categoryMenuButton > [data-icon], html body main.app-shell section.map-stage.home-focus header.topbar #pinSearchButton > [data-icon], html body main.app-shell section.map-stage.home-focus header.topbar #notificationButton > [data-icon], html body main.app-shell section.map-stage.map-focus header.topbar #categoryMenuButton > [data-icon], html body main.app-shell section.map-stage.map-focus header.topbar #pinSearchButton > [data-icon], html body main.app-shell section.map-stage.map-focus header.topbar #notificationButton > [data-icon], html body main.app-shell section.map-stage.home-focus header.topbar #categoryMenuButton > svg, html body main.app-shell section.map-stage.home-focus header.topbar #pinSearchButton > svg, html body main.app-shell section.map-stage.home-focus header.topbar #notificationButton > svg, html body main.app-shell section.map-stage.map-focus header.topbar #categoryMenuButton > svg, html body main.app-shell section.map-stage.map-focus header.topbar #pinSearchButton > svg, html body main.app-shell section.map-stage.map-focus header.topbar #notificationButton > svg { position: static !important; inset: auto !important; display: block !important; width: 20px !important; height: 20px !important; margin: 0 !important; stroke-width: 2.1 !important; filter: none !important; transform: none !important; } html body main.app-shell section.map-stage.home-focus header.topbar #logoHomeButton img, html body main.app-shell section.map-stage.map-focus header.topbar #logoHomeButton img { display: block !important; width: 36px !important; height: 36px !important; object-fit: contain !important; object-position: center !important; margin: 0 !important; filter: drop-shadow(0 2px 4px rgba(1, 25, 36, 0.16)) !important; transform: none !important; } html body main.app-shell section.map-stage.home-focus header.topbar .hidden-control, html body main.app-shell section.map-stage.map-focus header.topbar .hidden-control { display: none !important; } @media (max-width: 720px), (hover: none) and (pointer: coarse) and (max-width: 1024px) { html body main.app-shell section.map-stage.home-focus header.topbar, html body main.app-shell section.map-stage.map-focus header.topbar { top: max(10px, calc(env(safe-area-inset-top) + 8px)) !important; right: max(12px, env(safe-area-inset-right)) !important; left: max(12px, env(safe-area-inset-left)) !important; grid-template-columns: minmax(94px, 1fr) auto minmax(94px, 1fr) !important; } html body main.app-shell section.map-stage.home-focus header.topbar > .topbar-left, html body main.app-shell section.map-stage.home-focus header.topbar > .topbar-actions, html body main.app-shell section.map-stage.map-focus header.topbar > .topbar-left, html body main.app-shell section.map-stage.map-focus header.topbar > .topbar-actions { grid-template-columns: repeat(2, 40px) !important; width: 92px !important; min-width: 92px !important; height: 48px !important; min-height: 48px !important; } html body main.app-shell section.map-stage.home-focus header.topbar #categoryMenuButton, html body main.app-shell section.map-stage.home-focus header.topbar #logoHomeButton, html body main.app-shell section.map-stage.home-focus header.topbar #pinSearchButton, html body main.app-shell section.map-stage.home-focus header.topbar #notificationButton, html body main.app-shell section.map-stage.map-focus header.topbar #categoryMenuButton, html body main.app-shell section.map-stage.map-focus header.topbar #logoHomeButton, html body main.app-shell section.map-stage.map-focus header.topbar #pinSearchButton, html body main.app-shell section.map-stage.map-focus header.topbar #notificationButton { width: 40px !important; min-width: 40px !important; max-width: 40px !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; border-radius: 13px !important; } html body main.app-shell section.map-stage.home-focus header.topbar #logoHomeButton img, html body main.app-shell section.map-stage.map-focus header.topbar #logoHomeButton img { width: 34px !important; height: 34px !important; } } @media (prefers-reduced-motion: reduce) { html body main.app-shell section.map-stage.home-focus header.topbar button, html body main.app-shell section.map-stage.map-focus header.topbar button { transition: none !important; } }