/* The shared mobile header uses the Glass control shape in every tab.
   Leave display alone: each tab still decides which controls exist. */
html:not([data-appearance="glass"]) body #mobile-app-header#mobile-app-header .mobile-app-header__more-btn,
html:not([data-appearance="glass"]) body #mobile-app-header#mobile-app-header .mobile-app-header__icon-btn[aria-label="Notifications"],
html:not([data-appearance="glass"]) body #mobile-app-header#mobile-app-header .mobile-app-header__auth-btn {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.16) !important;
    border: 1px solid rgba(255, 255, 255, 0.34) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 8px 22px rgba(0, 0, 0, 0.12) !important;
    -webkit-backdrop-filter: blur(22px) saturate(170%) !important;
    backdrop-filter: blur(22px) saturate(170%) !important;
}

html:not([data-appearance="glass"]) body #mobile-app-header#mobile-app-header .mobile-app-header__auth-btn {
    width: auto !important;
    padding: 0 14px !important;
}

/* On a plain light header, use a faint dark fill so the rim is visible. */
html[data-theme="light"]:not([data-appearance="glass"]) body #mobile-app-header#mobile-app-header:not(.has-custom-background) :is(.mobile-app-header__more-btn, .mobile-app-header__icon-btn[aria-label="Notifications"], .mobile-app-header__auth-btn) {
    background: rgba(0, 0, 0, 0.045) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
}

/* A custom page colour uses white glyphs; a plain light page keeps dark ones. */
html:not([data-appearance="glass"]) body #mobile-app-header#mobile-app-header.has-custom-background .mobile-app-header__more-btn,
html:not([data-appearance="glass"]) body #mobile-app-header#mobile-app-header.has-custom-background .mobile-app-header__icon-btn[aria-label="Notifications"],
html:not([data-appearance="glass"]) body #mobile-app-header#mobile-app-header.has-custom-background .mobile-app-header__auth-btn,
html:not([data-appearance="glass"]) body #mobile-app-header#mobile-app-header.has-custom-background :is(.mobile-app-header__more-btn, .mobile-app-header__icon-btn[aria-label="Notifications"], .mobile-app-header__auth-btn) i {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}