/* MyMappi wordmark: one calm white title with the coral i dot as the accent. */
:root {
  --mymappi-logo-navy: #12365c;
  --mymappi-logo-green: #20c98c;
  --mymappi-logo-teal: #14aec2;
  --mymappi-logo-blue: #2878ef;
  --mymappi-logo-coral: #f2555f;
  --mymappi-wordmark-font: ui-rounded, "SF Pro Rounded", "Avenir Next Rounded", "Arial Rounded MT Bold", system-ui, sans-serif;
}

/* Deep glass keeps the white wordmark readable over every app view. */
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,
html body main.app-shell section.map-stage.memories-focus:not(.memory-editor-active) header.topbar > a.brand {
  border-color: rgba(221, 255, 246, 0.17) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(75, 218, 176, 0.12), transparent 48%),
    linear-gradient(145deg, rgba(5, 57, 64, 0.94), rgba(3, 34, 49, 0.94)) !important;
  box-shadow:
    0 12px 30px rgba(2, 30, 40, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.13) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
}

html body main.app-shell section.map-stage.home-focus header.topbar > a.brand h1,
html body main.app-shell section.map-stage.map-focus header.topbar > a.brand h1,
html body main.app-shell section.map-stage.memories-focus:not(.memory-editor-active) header.topbar > a.brand h1 {
  color: #f7fffc !important;
  font-family: var(--mymappi-wordmark-font) !important;
  font-weight: 800 !important;
  font-kerning: normal !important;
  letter-spacing: 0 !important;
  text-shadow: 0 6px 16px rgba(0, 20, 30, 0.2) !important;
}

html body .app-shell .topbar .brand-my,
html body main.app-shell .topbar .brand-my {
  color: #f7fffc !important;
  -webkit-text-fill-color: #f7fffc !important;
}

html body .app-shell .topbar .brand-second-m,
html body main.app-shell .topbar .brand-second-m,
html body .app-shell .topbar .brand-app,
html body main.app-shell .topbar .brand-app {
  color: #f7fffc !important;
  background: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  -webkit-text-fill-color: #f7fffc !important;
  text-shadow: inherit !important;
}

html body .app-shell .topbar .brand-i,
html body main.app-shell .topbar .brand-i {
  color: #f7fffc !important;
  -webkit-text-fill-color: #f7fffc !important;
}

html body .app-shell .topbar .brand-i::before,
html body main.app-shell .topbar .brand-i::before {
  border-color: rgba(255, 255, 255, 0.98) !important;
  background: var(--mymappi-logo-coral) !important;
  box-shadow:
    0 0.04em 0.13em rgba(213, 48, 62, 0.28),
    0 0 0.18em rgba(242, 85, 95, 0.14) !important;
}

/* Carry the same white wordmark and coral dot into account screens. */
html body .auth-brand h1,
html body .auth-card.signup-mode .auth-brand h1,
html body .auth-card.verify-mode .auth-brand h1 {
  padding: 0 !important;
  border: 0 !important;
  color: #f7fffc !important;
  font-family: var(--mymappi-wordmark-font) !important;
  font-weight: 800 !important;
  font-kerning: normal !important;
  letter-spacing: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

html body .auth-brand-my {
  color: #f7fffc !important;
  -webkit-text-fill-color: #f7fffc !important;
}

html body .auth-brand-second-m,
html body .auth-brand-app {
  color: #f7fffc !important;
  background: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  -webkit-text-fill-color: #f7fffc !important;
}

html body .auth-brand-i {
  color: #f7fffc !important;
  -webkit-text-fill-color: #f7fffc !important;
}

html body .auth-brand-i::after {
  border-color: rgba(255, 255, 255, 0.98) !important;
  background: var(--mymappi-logo-coral) !important;
}