:root {
    --mobile-app-header-height: calc(env(safe-area-inset-top, 0px) + 74px);
}

body.mobile-header-pill-active {
    --mobile-app-header-height: calc(env(safe-area-inset-top, 0px) + 100px);
}

.mobile-app-header {
    --mobile-header-bg: var(--background-color, #ffffff);
    --mobile-header-image: none;
    --mobile-header-overlay: rgba(0, 0, 0, 0);
    background: var(--mobile-header-bg) !important;
    color: var(--text-primary, #111111) !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

.mobile-app-header__brand-row {
    height: 46px !important;
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    gap: 6px !important;
}

.mobile-app-header__brand {
    width: auto !important;
    max-width: min(66vw, 270px) !important;
    min-height: 40px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    gap: 8px !important;
}

.mobile-app-header__logo {
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px !important;
    flex-basis: 28px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: color-mix(in srgb, var(--text-primary, #111111) 9%, transparent) !important;
    background-size: cover !important;
    background-position: center !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--text-primary, #111111) !important;
    -webkit-text-fill-color: var(--text-primary, #111111) !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
}

.mobile-app-header__name {
    font-size: clamp(14px, 3.65vw, 18px) !important;
    /* 920 was near the top of the variable range and read as a heavy slab at
       header size. Semibold still anchors the brand without shouting. */
    font-weight: 600 !important;
    text-transform: none !important;
}

.mobile-app-header__icon-btn {
    width: 34px !important;
    height: 34px !important;
    border-radius: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--text-primary, #111111) !important;
    -webkit-text-fill-color: var(--text-primary, #111111) !important;
    box-shadow: none !important;
}

.mobile-app-header__more-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 13px !important;
    border: 1px solid color-mix(in srgb, var(--text-primary, #111111) 10%, transparent) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(247, 248, 250, 0.68)),
        color-mix(in srgb, var(--background-color, #ffffff) 92%, transparent) !important;
    color: var(--text-primary, #111111) !important;
    -webkit-text-fill-color: var(--text-primary, #111111) !important;
    box-shadow:
        0 8px 22px rgba(15, 23, 42, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

.mobile-app-header__more-btn i,
.mobile-app-header__icon-btn i {
    font-size: 18px !important;
    width: 20px !important;
    height: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.mobile-app-header__actions {
    gap: 7px !important;
}

.mobile-app-header__auth-btn {
    width: auto !important;
    min-width: 50px !important;
    height: 34px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    background: transparent !important;
    border: 1px solid color-mix(in srgb, var(--text-primary, #111111) 15%, transparent) !important;
    box-shadow: none !important;
    font-size: 8px !important;
    font-weight: 900 !important;
    letter-spacing: 0.02em !important;
}

.mobile-app-header__brand-row {
    position: relative !important;
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    gap: 8px !important;
}

.mobile-app-header__brand {
    width: auto !important;
    max-width: min(66vw, 270px) !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    justify-content: center !important;
    gap: 9px !important;
    text-align: center !important;
}

.mobile-app-header__more {
    grid-column: 1 !important;
    justify-self: start !important;
    margin-right: 0 !important;
}

.mobile-app-header__tabs {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

.mobile-app-header__profile-btn {
    flex: 0 1 auto !important;
    max-width: min(52vw, 220px) !important;
    justify-content: center !important;
    text-align: center !important;
    overflow: hidden !important;
}

.mobile-app-header__name-wrap,
.mobile-app-header__name {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.mobile-app-header__name-wrap {
    justify-content: center !important;
}

.mobile-app-header__actions {
    grid-column: 3 !important;
}

.mobile-app-header__name {
    font-size: clamp(14px, 3.65vw, 18px) !important;
    font-weight: 900 !important;
}

.mobile-app-header__pill-slot {
    height: 26px;
    margin: 0 -16px 0;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}

.mobile-app-header__pill {
    min-width: 0;
    height: 24px;
    max-width: min(68vw, 280px);
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 77, 46, 0.24);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 244, 241, 0.92));
    color: #111111;
    -webkit-text-fill-color: #111111;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(255, 77, 46, 0.08);
    -webkit-tap-highlight-color: transparent;
    appearance: none;
    -webkit-appearance: none;
}

.mobile-app-header__pill-dot {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 999px;
    background: var(--primary-color, #ff4d2e);
}

.mobile-app-header__pill[data-pill-type="live"] .mobile-app-header__pill-dot {
    background: #ef4444;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.16);
}

.mobile-app-header__pill[data-pill-type="sale"] .mobile-app-header__pill-dot {
    background: #a855f7;
}

.mobile-app-header__pill[data-pill-type="event"] .mobile-app-header__pill-dot {
    background: #0ea5e9;
}

.mobile-app-header__pill[data-pill-type="sponsor"] .mobile-app-header__pill-dot {
    background: #f59e0b;
}

.mobile-app-header__pill-copy {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 9px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Sponsor metadata should feel like a quiet attribution, not a promotion. */
.mobile-app-header__pill[data-pill-type="sponsor"] {
    height: 18px;
    max-width: min(62vw, 240px);
    padding: 0 4px;
    gap: 5px;
    border: 0;
    background: transparent;
    color: #7b8491;
    -webkit-text-fill-color: #7b8491;
    box-shadow: none;
}

.mobile-app-header__pill[data-pill-type="sponsor"] .mobile-app-header__pill-dot {
    width: 4px;
    height: 4px;
    flex-basis: 4px;
    background: #aeb6c1;
}

.mobile-app-header__pill[data-pill-type="sponsor"] .mobile-app-header__pill-copy {
    font-size: 8px;
    font-weight: 650;
    letter-spacing: 0.02em;
    text-transform: none;
}

html[data-theme="dark"] .mobile-app-header__pill[data-pill-type="sponsor"],
body[data-theme="dark"] .mobile-app-header__pill[data-pill-type="sponsor"],
html[data-theme="dark-accent"] .mobile-app-header__pill[data-pill-type="sponsor"],
body[data-theme="dark-accent"] .mobile-app-header__pill[data-pill-type="sponsor"] {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.07);
    color: #d1d5db;
    -webkit-text-fill-color: #d1d5db;
}

html[data-theme="light"] .mobile-app-header,
body[data-theme="light"] .mobile-app-header,
html[data-theme="light-accent"] .mobile-app-header,
body[data-theme="light-accent"] .mobile-app-header,
html[data-theme="light"][data-theme-variant] .mobile-app-header,
body[data-theme="light"][data-theme-variant] .mobile-app-header {
    --mobile-header-bg: #ffffff;
    background: #ffffff !important;
    color: #111111 !important;
    border-bottom-color: transparent !important;
}

html[data-theme="light-accent"] .mobile-app-header,
body[data-theme="light-accent"] .mobile-app-header {
    --mobile-header-bg: color-mix(in srgb, var(--accent-color) 5%, #ffffff 95%);
    background: color-mix(in srgb, var(--accent-color) 5%, #ffffff 95%) !important;
    border-bottom-color: transparent !important;
}

html[data-theme="light"] .mobile-app-header__pill,
body[data-theme="light"] .mobile-app-header__pill,
html[data-theme="light-accent"] .mobile-app-header__pill,
body[data-theme="light-accent"] .mobile-app-header__pill {
    background: rgba(17, 17, 17, 0.04) !important;
    border-color: rgba(255, 77, 46, 0.24) !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}

html[data-theme="light"] .mobile-app-header__pill[data-pill-type="live"],
body[data-theme="light"] .mobile-app-header__pill[data-pill-type="live"],
html[data-theme="light-accent"] .mobile-app-header__pill[data-pill-type="live"],
body[data-theme="light-accent"] .mobile-app-header__pill[data-pill-type="live"] {
    background: rgba(239, 68, 68, 0.08) !important;
    border-color: rgba(239, 68, 68, 0.22) !important;
}

html[data-theme="light"] .mobile-app-header__pill[data-pill-type="sale"],
body[data-theme="light"] .mobile-app-header__pill[data-pill-type="sale"],
html[data-theme="light-accent"] .mobile-app-header__pill[data-pill-type="sale"],
body[data-theme="light-accent"] .mobile-app-header__pill[data-pill-type="sale"] {
    background: rgba(168, 85, 247, 0.08) !important;
    border-color: rgba(168, 85, 247, 0.22) !important;
}

html[data-theme="light"] .mobile-app-header__pill[data-pill-type="event"],
body[data-theme="light"] .mobile-app-header__pill[data-pill-type="event"],
html[data-theme="light-accent"] .mobile-app-header__pill[data-pill-type="event"],
body[data-theme="light-accent"] .mobile-app-header__pill[data-pill-type="event"] {
    background: rgba(14, 165, 233, 0.08) !important;
    border-color: rgba(14, 165, 233, 0.22) !important;
}

html[data-theme="dark"] .mobile-app-header,
body[data-theme="dark"] .mobile-app-header,
html[data-theme="dark-accent"] .mobile-app-header,
body[data-theme="dark-accent"] .mobile-app-header,
html[data-theme="dark"][data-theme-variant] .mobile-app-header,
body[data-theme="dark"][data-theme-variant] .mobile-app-header {
    --mobile-header-bg: #050505;
    background: #050505 !important;
    color: #ffffff !important;
    border-bottom-color: transparent !important;
}

html[data-theme="dark"] .mobile-app-header__pill,
body[data-theme="dark"] .mobile-app-header__pill,
html[data-theme="dark-accent"] .mobile-app-header__pill,
body[data-theme="dark-accent"] .mobile-app-header__pill {
    background: rgba(255, 255, 255, 0.09) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: none !important;
}

.mobile-app-header__logo,
.mobile-app-header__name,
.mobile-app-header__icon-btn,
.mobile-app-header__tab {
    color: currentColor;
    -webkit-text-fill-color: currentColor;
}

body.community-active #mobile-app-header .mobile-app-header__brand {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body.community-active #mobile-app-header #mobile-header-blips-wrap,
body.community-active #mobile-app-header #mobile-app-header-logo {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
}

body.community-active #mobile-app-header #mobile-app-header-name {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

html[data-theme="light"] .mobile-app-header__tab,
body[data-theme="light"] .mobile-app-header__tab,
html[data-theme="light-accent"] .mobile-app-header__tab,
body[data-theme="light-accent"] .mobile-app-header__tab {
    color: rgba(17, 17, 17, 0.62);
}

html[data-theme="dark"] .mobile-app-header__tab,
body[data-theme="dark"] .mobile-app-header__tab,
html[data-theme="dark-accent"] .mobile-app-header__tab,
body[data-theme="dark-accent"] .mobile-app-header__tab {
    color: rgba(255, 255, 255, 0.66);
}

.mobile-app-header__tab.is-active {
    color: var(--primary-color, #ff4d2e) !important;
    -webkit-text-fill-color: var(--primary-color, #ff4d2e) !important;
}

.mobile-app-header__more {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    grid-column: 1;
    justify-self: start;
    margin-right: 0;
}

.mobile-app-header__more-btn {
    width: 44px;
    height: 44px;
    position: relative;
    z-index: 2;
    border: 1px solid color-mix(in srgb, var(--text-primary, #111111) 9%, transparent);
    border-radius: 13px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--background-color, #ffffff) 88%, transparent), color-mix(in srgb, var(--text-primary, #111111) 5%, transparent));
    color: currentColor;
    -webkit-text-fill-color: currentColor;
    display: grid;
    place-items: center;
    font-size: 17px;
    line-height: 1;
    flex: 0 0 auto;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.09);
}

/* The active/open state used to paint the icon in --primary-color. That colour
   is per-app and can be white or near-white, which made the hamburger vanish
   into its own light background — the button read as an empty circle. Tint the
   background and border with the brand colour, but keep the glyph itself on the
   text colour so it is legible whatever the app's primary happens to be. */
.mobile-app-header__more.has-active-tab .mobile-app-header__more-btn,
.mobile-app-header__more.is-open .mobile-app-header__more-btn {
    color: var(--text-primary, #111111) !important;
    -webkit-text-fill-color: var(--text-primary, #111111) !important;
    background: linear-gradient(180deg, color-mix(in srgb, var(--primary-color, #ff4d2e) 12%, var(--background-color, #ffffff)), color-mix(in srgb, var(--primary-color, #ff4d2e) 5%, var(--background-color, #ffffff))) !important;
    border-color: color-mix(in srgb, var(--primary-color, #ff4d2e) 18%, transparent) !important;
}

/* An unseen alert inside the menu shows as a red dot on the hamburger. */
.mobile-app-header__more.has-alerts .mobile-app-header__more-btn::after {
    content: "";
    position: absolute;
    top: 7px;
    right: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e0362b;
    box-shadow: 0 0 0 2px var(--background-color, #ffffff);
    pointer-events: none;
}

/* Last word on the glyph: nothing upstream may leave it invisible. */
.mobile-app-header__more-btn i,
.mobile-app-header__more.has-active-tab .mobile-app-header__more-btn i,
.mobile-app-header__more.is-open .mobile-app-header__more-btn i {
    color: var(--text-primary, #111111) !important;
    -webkit-text-fill-color: var(--text-primary, #111111) !important;
    opacity: 1 !important;
}

.mobile-app-header__more-menu {
    --mobile-more-menu-bg: rgba(250, 250, 252, 0.97);
    --mobile-more-menu-text: #111111;
    --mobile-more-menu-muted: rgba(17, 17, 17, 0.52);
    --mobile-more-menu-icon-bg: transparent;
    position: fixed;
    inset: 0 auto 0 0;
    width: min(82vw, 336px);
    max-width: calc(100vw - 56px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0;
    padding: calc(env(safe-area-inset-top, 0px) + 22px) 16px calc(env(safe-area-inset-bottom, 0px) + 18px);
    border-radius: 0 30px 30px 0;
    background: var(--mobile-more-menu-bg) !important;
    border: 0;
    border-right: 1px solid color-mix(in srgb, var(--mobile-more-menu-text) 7%, transparent);
    box-shadow: 24px 0 70px rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(34px) saturate(150%);
    -webkit-backdrop-filter: blur(34px) saturate(150%);
    z-index: 2147483000;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(-104%, 0, 0);
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease, visibility 0s linear 280ms;
}

.mobile-app-header__more.is-open .mobile-app-header__more-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
    transition-delay: 0s;
}

.mobile-app-header__more-backdrop {
    position: fixed;
    inset: 0;
    display: block;
    width: 100vw;
    height: 100dvh;
    padding: 0;
    border: 0;
    z-index: 2147482999;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    background: rgba(15, 15, 18, 0.16);
    backdrop-filter: blur(9px) saturate(92%);
    -webkit-backdrop-filter: blur(9px) saturate(92%);
    transition: opacity 200ms ease, visibility 0s linear 200ms;
}

.mobile-app-header__more.is-open .mobile-app-header__more-backdrop {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

body.mobile-header-menu-open {
    overflow: hidden !important;
}

.mobile-app-header__more-header {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 4px 24px 6px;
}

.mobile-app-header__more-identity {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
}

.mobile-app-header__more-logo {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 10px;
    background: var(--mobile-more-menu-icon-bg);
    color: var(--mobile-more-menu-text) !important;
    -webkit-text-fill-color: var(--mobile-more-menu-text) !important;
    font-size: 15px;
    font-weight: 900;
}

.mobile-app-header__more-logo.has-image {
    border-radius: 9px;
    background: transparent;
}

.mobile-app-header__more-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mobile-app-header__more-name-wrap {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mobile-app-header__more-name {
    max-width: 205px;
    overflow: hidden;
    color: var(--mobile-more-menu-text) !important;
    -webkit-text-fill-color: var(--mobile-more-menu-text) !important;
    font-size: 18px;
    font-weight: 850;
    line-height: 1.08;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-app-header__more-eyebrow {
    color: var(--mobile-more-menu-muted) !important;
    -webkit-text-fill-color: var(--mobile-more-menu-muted) !important;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.mobile-app-header__more-close {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--mobile-more-menu-text) 6%, transparent);
    color: var(--mobile-more-menu-text) !important;
    -webkit-text-fill-color: var(--mobile-more-menu-text) !important;
    font-size: 15px;
}

.mobile-app-header__more-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mobile-app-header__more-refresh {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--mobile-more-menu-text) !important;
    -webkit-text-fill-color: var(--mobile-more-menu-text) !important;
    font-size: 15px;
}

.mobile-app-header__more-items {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    /* Keep the final action above the fixed bottom navigation. */
    padding: 0 2px max(88px, calc(env(safe-area-inset-bottom, 0px) + 88px)) !important;
    box-sizing: border-box;
    scroll-padding-bottom: 88px;
}

.mobile-app-header__more-items::-webkit-scrollbar {
    display: none;
}

.mobile-app-header__more-item {
    width: 100%;
    min-width: 0;
    height: 50px;
    border: 0;
    border-radius: 15px;
    background: transparent;
    color: var(--mobile-more-menu-text) !important;
    -webkit-text-fill-color: var(--mobile-more-menu-text) !important;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 13px;
    padding: 0 12px;
    font-size: 16px;
    font-weight: 720;
    line-height: 1;
    text-transform: none;
    white-space: nowrap;
    text-align: left;
    box-shadow: none;
}

.mobile-app-header__more-title {
    display: block;
    padding: 5px 12px 10px;
    color: var(--mobile-more-menu-muted) !important;
    -webkit-text-fill-color: var(--mobile-more-menu-muted) !important;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
}

.mobile-app-header__more-item i {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 0;
    background: var(--mobile-more-menu-icon-bg);
    color: var(--mobile-more-menu-text) !important;
    -webkit-text-fill-color: var(--mobile-more-menu-text) !important;
    display: grid;
    place-items: center;
    text-align: center;
    font-size: 17px;
}

.mobile-app-header__more-item .mobile-app-header__theme-chevron {
    width: 14px;
    min-width: 14px;
    height: 14px;
    margin-left: auto;
    font-size: 11px;
    transition: transform 160ms ease;
}

.mobile-app-header__more-item[aria-expanded="true"] .mobile-app-header__theme-chevron {
    transform: rotate(180deg);
}

.mobile-app-header__theme-choices {
    display: flex;
    gap: 6px;
    margin: 2px 10px 12px 48px;
}

.mobile-app-header__theme-choices[hidden] {
    display: none !important;
}

.mobile-app-header__theme-choices button {
    flex: 1;
    min-width: 0;
    padding: 9px 5px;
    border: 1px solid color-mix(in srgb, var(--mobile-more-menu-text) 18%, transparent);
    border-radius: 12px;
    background: transparent;
    color: var(--mobile-more-menu-text);
    -webkit-text-fill-color: var(--mobile-more-menu-text);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
}

.mobile-app-header__theme-choices button.is-selected {
    border-color: var(--mobile-more-menu-text);
    background: color-mix(in srgb, var(--mobile-more-menu-text) 12%, transparent);
}

.mobile-app-header__more-item.is-active {
    height: 50px;
    flex-direction: row;
    justify-content: flex-start;
    padding: 0 12px;
    text-align: left;
    font-size: 16px;
    color: var(--mobile-more-menu-text) !important;
    -webkit-text-fill-color: var(--mobile-more-menu-text) !important;
    background: color-mix(in srgb, var(--mobile-more-menu-text) 7%, transparent);
}

.mobile-app-header__more-item.is-active::after {
    content: "";
    width: 7px;
    height: 7px;
    margin-left: auto;
    border-radius: 999px;
    background: var(--primary-color, #ff4d2e);
}

.mobile-app-header__more-item.is-active i {
    background: transparent;
    color: var(--primary-color, #ff4d2e) !important;
    -webkit-text-fill-color: var(--primary-color, #ff4d2e) !important;
}

.mobile-app-header__more-footer {
    padding: 12px 2px 0;
}

.mobile-app-header__more-action {
    margin-top: 0;
    border-top: 1px solid color-mix(in srgb, var(--text-primary, #111111) 8%, transparent) !important;
    border-radius: 0;
    padding-top: 10px;
    color: color-mix(in srgb, var(--text-primary, #111111) 78%, transparent);
    -webkit-text-fill-color: color-mix(in srgb, var(--text-primary, #111111) 78%, transparent);
}

.mobile-app-header__more-action i {
    background: color-mix(in srgb, var(--text-primary, #111111) 5%, transparent);
}

html[data-theme="dark"] .mobile-app-header__more-menu,
body[data-theme="dark"] .mobile-app-header__more-menu,
html[data-theme="dark-accent"] .mobile-app-header__more-menu,
body[data-theme="dark-accent"] .mobile-app-header__more-menu {
    --mobile-more-menu-bg: rgba(12, 12, 12, 0.94);
    --mobile-more-menu-text: #ffffff;
    --mobile-more-menu-muted: rgba(255, 255, 255, 0.54);
    --mobile-more-menu-icon-bg: rgba(255, 255, 255, 0.08);
    background: var(--mobile-more-menu-bg) !important;
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 18px 54px rgba(0, 0, 0, 0.36);
}

body.mobile-guest-app .mobile-app-header__guest-menu-only {
    display: none !important;
}

.mobile-app-header__refresh-btn {
    display: none !important;
}

.mobile-app-header__more-item span {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

.mobile-app-header__more-item[data-menu-action="logout"] {
    margin-top: 8px;
    color: #b42318 !important;
    border-top: 1px solid color-mix(in srgb, #b42318 12%, transparent);
    border-radius: 0;
    padding-top: 14px;
}

html[data-theme="dark"] .mobile-app-header__more-item[data-menu-action="logout"],
body[data-theme="dark"] .mobile-app-header__more-item[data-menu-action="logout"],
html[data-theme="dark-accent"] .mobile-app-header__more-item[data-menu-action="logout"],
body[data-theme="dark-accent"] .mobile-app-header__more-item[data-menu-action="logout"] {
    color: #ff8b82 !important;
    border-top-color: color-mix(in srgb, #ff8b82 18%, transparent);
}

.mobile-app-header__auth-btn {
    background: transparent !important;
}

html[data-theme="light"] .mobile-app-header__auth-btn,
body[data-theme="light"] .mobile-app-header__auth-btn,
html[data-theme="light-accent"] .mobile-app-header__auth-btn,
body[data-theme="light-accent"] .mobile-app-header__auth-btn {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border-color: rgba(17, 17, 17, 0.18) !important;
}

html[data-theme="dark"] .mobile-app-header__auth-btn,
body[data-theme="dark"] .mobile-app-header__auth-btn,
html[data-theme="dark-accent"] .mobile-app-header__auth-btn,
body[data-theme="dark-accent"] .mobile-app-header__auth-btn {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

.mobile-app-header.has-custom-background {
    background: var(--mobile-header-bg) !important;
    color: #ffffff !important;
    border-bottom-color: transparent !important;
}

.mobile-app-header.has-custom-background .mobile-app-header__pill {
    background: rgba(0, 0, 0, 0.28) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

@media (max-width: 390px) {
    .mobile-app-header__brand-row {
        grid-template-columns: 40px minmax(0, 1fr) auto !important;
    }

    .mobile-app-header__pill {
        max-width: min(74vw, 250px);
    }
}

/* The workspace menu lives inside #mobile-app-header, which sets
   `isolation: isolate` at z-index 10020. That caps the menu's own
   z-index (2147483000) inside the header's stacking context, so
   full-screen surfaces like Seasons (z 120500) paint over the menu and
   only its top header row stays visible. Lift the whole header above
   those surfaces while the menu is open. */
body.mobile-header-menu-open #mobile-app-header,
body:has(.mobile-app-header__more.is-open) #mobile-app-header {
    z-index: 2147483000 !important;
}

/* ---------- offer pill ----------
   The 'sponsor' type above is a quiet credit line, deliberately. An 'offer'
   is a reward the guest can claim, so it has to read as tappable: the
   sponsor's mark at full colour, the offer in mixed case at a size you can
   actually read, and a chevron. Kept as its own type so campaigns never
   change how existing sponsor credits look. */

.mobile-app-header__pill[data-pill-type="offer"] {
    height: 32px;
    max-width: min(86vw, 340px);
    padding: 0 10px 0 4px;
    gap: 8px;
    /* The base pill carries a warm accent tint. An offer belongs to the
       sponsor, not to the app's accent, so it is reset to neutral. */
    border: 1px solid rgba(17, 17, 17, 0.08);
    background: #ffffff;
    background-image: none;
    color: #111111;
    -webkit-text-fill-color: #111111;
    box-shadow: 0 2px 10px rgba(17, 17, 17, 0.10);
}

.mobile-app-header__pill[data-pill-type="offer"]:active { transform: scale(0.985); }

.mobile-app-header__pill-mark {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: 999px;
    overflow: hidden;
    background: #f1f1f3;
    color: #111111;
    -webkit-text-fill-color: #111111;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

.mobile-app-header__pill-mark img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Mixed case, readable — not the 9px caps strip the dot types use. */
.mobile-app-header__pill[data-pill-type="offer"] .mobile-app-header__pill-copy {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.005em;
    text-transform: none;
}

/* A border corner rather than a glyph: immune to the icon-font and
   text-colour overrides that erase characters on this header. */
.mobile-app-header__pill-chevron {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    margin-right: 1px;
    border-right: 1.6px solid rgba(17, 17, 17, 0.42);
    border-top: 1.6px solid rgba(17, 17, 17, 0.42);
    transform: rotate(45deg);
}

html[data-theme="dark"] .mobile-app-header__pill[data-pill-type="offer"],
body[data-theme="dark"] .mobile-app-header__pill[data-pill-type="offer"],
html[data-theme="dark-accent"] .mobile-app-header__pill[data-pill-type="offer"],
body[data-theme="dark-accent"] .mobile-app-header__pill[data-pill-type="offer"] {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.10);
    background-image: none;
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    box-shadow: none;
}

html[data-theme="dark"] .mobile-app-header__pill[data-pill-type="offer"] .mobile-app-header__pill-chevron,
body[data-theme="dark"] .mobile-app-header__pill[data-pill-type="offer"] .mobile-app-header__pill-chevron,
html[data-theme="dark-accent"] .mobile-app-header__pill[data-pill-type="offer"] .mobile-app-header__pill-chevron,
body[data-theme="dark-accent"] .mobile-app-header__pill[data-pill-type="offer"] .mobile-app-header__pill-chevron {
    border-right-color: rgba(255, 255, 255, 0.55);
    border-top-color: rgba(255, 255, 255, 0.55);
}

/* The slot has to grow with the taller pill or it clips. */
.mobile-app-header__pill-slot:has(.mobile-app-header__pill[data-pill-type="offer"]) {
    height: 36px;
}

/* The light-theme block above forces a tinted background and the accent
   border onto every pill with !important. An offer carries the sponsor's
   identity rather than the app's accent, so it opts out at equal weight. */
html[data-theme="light"] .mobile-app-header__pill[data-pill-type="offer"],
body[data-theme="light"] .mobile-app-header__pill[data-pill-type="offer"],
html[data-theme="light-accent"] .mobile-app-header__pill[data-pill-type="offer"],
body[data-theme="light-accent"] .mobile-app-header__pill[data-pill-type="offer"] {
    background: #ffffff !important;
    border-color: rgba(17, 17, 17, 0.08) !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}

html[data-theme="light"] .mobile-app-header__pill[data-pill-type="offer"] .mobile-app-header__pill-mark,
body[data-theme="light"] .mobile-app-header__pill[data-pill-type="offer"] .mobile-app-header__pill-mark,
html[data-theme="dark"] .mobile-app-header__pill[data-pill-type="offer"] .mobile-app-header__pill-mark,
body[data-theme="dark"] .mobile-app-header__pill[data-pill-type="offer"] .mobile-app-header__pill-mark {
    background: #f1f1f3 !important;
}

/* In Community the app identity participates in the same avatar system as
   members. Scope this to Community so app headers elsewhere keep their shape. */
body.community-active #mobile-app-header #mobile-header-blips-wrap,
body.community-active #mobile-app-header #mobile-app-header-logo,
body.community-active #mobile-app-header #mobile-app-header-logo img {
    border-radius: 50% !important;
    overflow: hidden !important;
}

body.community-active #mobile-app-header #mobile-header-blips-wrap,
body.community-active #mobile-app-header #mobile-app-header-logo {
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
}

body.community-active #mobile-app-header #mobile-app-header-logo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* A shop sheet owns the screen while it is up. These sheets start below the
   header, so when the header had tucked away on a scroll the space above
   them showed whatever was behind (the catalog creeping in over the orders
   list). Pin the header while any of them is open; the tuck is an inline
   transform, which this outranks. */
html body:has(.mobile-shop-owner-orders-modal, .mobile-shop-dashboard-modal, .mobile-shop-order-detail-sheet, .mobile-shop-dashboard-activity-modal, #mobile-shop-reviews-modal, #mobile-shop-question-modal, #mobile-shop-guest-products-modal, #shop-item-detail-modal, #mobile-shop-review-form-modal, #mobile-shop-review-product-picker) #mobile-app-header {
    transform: translateY(0) !important;
}

/* Become a member, beside Login. Same pill, filled: the way in should be the
   one that stands out. Over the Moments photograph the fill goes white (see
   mobile-import-library.css, where the hero's glass rules live). */
html[data-theme="light"] .mobile-app-header__auth-btn.mobile-app-header__join-btn,
body[data-theme="light"] .mobile-app-header__auth-btn.mobile-app-header__join-btn,
html[data-theme="light-accent"] .mobile-app-header__auth-btn.mobile-app-header__join-btn,
body[data-theme="light-accent"] .mobile-app-header__auth-btn.mobile-app-header__join-btn,
.mobile-app-header__auth-btn.mobile-app-header__join-btn {
    background: #111111 !important;
    border-color: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    white-space: nowrap !important;
}
html[data-theme="dark"] .mobile-app-header__auth-btn.mobile-app-header__join-btn,
body[data-theme="dark"] .mobile-app-header__auth-btn.mobile-app-header__join-btn,
html[data-theme="dark-accent"] .mobile-app-header__auth-btn.mobile-app-header__join-btn,
body[data-theme="dark-accent"] .mobile-app-header__auth-btn.mobile-app-header__join-btn {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}

/* The verified seal (nst-verified.js) rides after the name: the name
   ellipsizes, the seal never wraps or clips. */
#mobile-app-header .mobile-app-header__name-wrap:has(> .nst-verified) {
    display: inline-flex !important;
    align-items: center !important;
}
#mobile-app-header .mobile-app-header__name-wrap > .nst-verified {
    font-size: clamp(14px, 3.65vw, 18px) !important;
    --nst-verified-size: 0.82em;
    margin-left: 3px !important;
    vertical-align: 0 !important;
}

/* The phone's notification centre (static/js/mobile-notify.js): the desktop
 * bell's panel (notify.css) as a full-screen sheet at 390px. Pure white /
 * black by theme, no grey fills; on an app with a page colour
 * (mobile-page-colors.js: html[data-page-color] and --pc-*) it takes the
 * page's own colours.
 *
 * Every colour carries the #pn-center id and !important: the phone's theme
 * sweeps ([data-theme] * * *, [class*="bytes"] ...) repaint leaf text and
 * icons black otherwise. */

#pn-center {
  --pn-bg: #ffffff; --pn-ink: #0a0a0a; --pn-dim: #5f5f66; --pn-faint: #9a9aa1;
  --pn-line: #ececef; --pn-edge: #d9d9de; --pn-on-ink: #ffffff; --pn-red: #e5484d;
}
html[data-theme="dark"] #pn-center {
  --pn-bg: #000000; --pn-ink: #f5f5f6; --pn-dim: #a3a3ab; --pn-faint: #6e6e76;
  --pn-line: #1f1f23; --pn-edge: #2e2e34; --pn-on-ink: #000000;
}
html[data-page-color] #pn-center:not(#pc) {
  --pn-bg: var(--pc-page); --pn-ink: var(--pc-ink); --pn-dim: var(--pc-dim); --pn-faint: var(--pc-faint);
  --pn-line: var(--pc-line); --pn-edge: var(--pc-edge); --pn-on-ink: var(--pc-page);
}

/* Glass overrides page-color tokens as well as light/dark palettes. Keep
 * the blur on the sheet so notification rows and icons stay sharp. */
html[data-appearance="glass"] body #pn-center#pn-center {
  --pn-bg: var(--gl-sheet, rgba(28, 28, 32, 0.42));
  --pn-ink: #ffffff;
  --pn-dim: rgba(255,255,255,.76);
  --pn-faint: rgba(255,255,255,.62);
  --pn-line: var(--gl-rim, rgba(255,255,255,.22));
  --pn-edge: var(--gl-rim, rgba(255,255,255,.22));
  --pn-on-ink: #0b0b0c;
  -webkit-backdrop-filter: var(--gl-blur, blur(22px) saturate(170%));
  backdrop-filter: var(--gl-blur, blur(22px) saturate(170%));
}
html[data-appearance="glass"] body #pn-center :is(.pn-av, .pn-chip:not(.is-on)) {
  background: var(--gl-fill, rgba(255,255,255,.14)) !important;
}

/* ------------------------------------------------------------ the bell */
html body #mobile-app-header [data-pn-bell] { position: relative; }
html body #mobile-app-header [data-pn-bell] .pn-badge {
  position: absolute;
  top: 1px;
  right: -2px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: #e5484d !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font: 700 10px/17px "JetBrains Mono", ui-monospace, monospace !important;
  letter-spacing: 0 !important;
  text-align: center;
  pointer-events: none;
  box-sizing: border-box;
  z-index: 2;
}
html body #mobile-app-header [data-pn-bell] .pn-badge[hidden] { display: none !important; }
/* The old static dot says nothing now; the count does. */
html body #mobile-app-header [data-pn-bell] .mobile-app-header__status-dot { display: none !important; }

/* ----------------------------------------------------------- the sheet */
html body #pn-center {
  position: fixed;
  inset: 0;
  z-index: 2147483400;
  display: flex;
  flex-direction: column;
  background: var(--pn-bg) !important;
  color: var(--pn-ink) !important;
  font-family: "Archivo", "Inter", system-ui, -apple-system, sans-serif !important;
  font-size: 14px;
  line-height: 1.35;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: contain;
}
html body #pn-center[hidden] { display: none !important; }
html body #pn-center :where(*) {
  box-sizing: border-box;
  font-family: inherit;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  text-shadow: none !important;
}
html.pn-open body #bottom-nav,
html body:has(#pn-center:not([hidden])) #bottom-nav { display: none !important; }
html.pn-open, html.pn-open body { overflow: hidden !important; }

html body #pn-center .pn-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 8px 6px;
  background: transparent !important;
  border: 0 !important;
}
html body #pn-center .pn-title {
  flex: 1 1 auto;
  margin: 0;
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: var(--pn-ink) !important;
  -webkit-text-fill-color: var(--pn-ink) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html body #pn-center .pn-tools { display: flex; align-items: center; gap: 4px; flex: none; }
html body #pn-center .pn-icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0 !important;
  border-radius: 50%;
  background: transparent !important;
  color: var(--pn-ink) !important;
  -webkit-text-fill-color: var(--pn-ink) !important;
  box-shadow: none !important;
  cursor: pointer;
}
html body #pn-center .pn-icon svg { width: 22px; height: 22px; color: var(--pn-ink) !important; }
html body #pn-center .pn-gear svg { width: 20px; height: 20px; }
html body #pn-center .pn-gear.is-on { box-shadow: inset 0 0 0 1.5px var(--pn-ink) !important; }
html body #pn-center .pn-icon[hidden], html body #pn-center .pn-link[hidden] { display: none !important; }
html body #pn-center .pn-link {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 8px 6px;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--pn-dim) !important;
  -webkit-text-fill-color: var(--pn-dim) !important;
  cursor: pointer;
}

html body #pn-center .pn-chips {
  flex: none;
  display: flex;
  gap: 6px;
  padding: 4px 16px 12px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--pn-line) !important;
}
html body #pn-center .pn-chips::-webkit-scrollbar { display: none; }
html body #pn-center .pn-chips[hidden] { display: none !important; }
html body #pn-center .pn-chip {
  flex: none;
  height: 32px;
  padding: 0 14px;
  border-radius: 16px;
  border: 1px solid var(--pn-edge) !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--pn-ink) !important;
  -webkit-text-fill-color: var(--pn-ink) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 30px;
  cursor: pointer;
}
html body #pn-center .pn-chip.is-on {
  background: var(--pn-ink) !important;
  border-color: var(--pn-ink) !important;
  color: var(--pn-on-ink) !important;
  -webkit-text-fill-color: var(--pn-on-ink) !important;
}
html body #pn-center .pn-chip:disabled { opacity: 0.4; }

html body #pn-center .pn-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0 0 calc(24px + env(safe-area-inset-bottom, 0px));
}
html body #pn-center .pn-group {
  margin: 0;
  padding: 16px 16px 6px;
  font: 700 11px/1 "JetBrains Mono", ui-monospace, monospace !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  color: var(--pn-faint) !important;
  -webkit-text-fill-color: var(--pn-faint) !important;
}
html body #pn-center .pn-row {
  width: 100%;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  margin: 0;
  padding: 12px 16px;
  border: 0 !important;
  border-bottom: 1px solid var(--pn-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html body #pn-center .pn-row:active { opacity: 0.6; }
html body #pn-center .pn-av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: 1px solid var(--pn-edge) !important;
  color: var(--pn-dim) !important;
  -webkit-text-fill-color: var(--pn-dim) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}
html body #pn-center .pn-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
html body #pn-center .pn-av svg { width: 18px; height: 18px; color: var(--pn-ink) !important; }
html body #pn-center .pn-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; padding-top: 1px; }
html body #pn-center .pn-line {
  font-size: 14px !important;
  line-height: 1.35 !important;
  color: var(--pn-dim) !important;
  -webkit-text-fill-color: var(--pn-dim) !important;
  overflow-wrap: anywhere;
}
html body #pn-center .pn-line b {
  font-weight: 600 !important;
  color: var(--pn-ink) !important;
  -webkit-text-fill-color: var(--pn-ink) !important;
}
html body #pn-center .pn-row.is-unread .pn-line { color: var(--pn-ink) !important; -webkit-text-fill-color: var(--pn-ink) !important; }
html body #pn-center .pn-row.is-unread .pn-line b { font-weight: 800 !important; }
html body #pn-center .pn-detail {
  font-size: 13px !important;
  color: var(--pn-dim) !important;
  -webkit-text-fill-color: var(--pn-dim) !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
html body #pn-center .pn-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; padding-top: 2px; }
html body #pn-center .pn-time {
  font: 500 11.5px/1 "JetBrains Mono", ui-monospace, monospace !important;
  color: var(--pn-faint) !important;
  -webkit-text-fill-color: var(--pn-faint) !important;
  white-space: nowrap;
}
html body #pn-center .pn-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--pn-red) !important; }
html body #pn-center .pn-dot[hidden] { display: none !important; }

html body #pn-center .pn-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 72px 32px 32px;
  text-align: center;
}
html body #pn-center .pn-empty svg { width: 30px; height: 30px; color: var(--pn-faint) !important; margin-bottom: 4px; }
html body #pn-center .pn-empty b { font-size: 16px !important; font-weight: 700 !important; color: var(--pn-ink) !important; -webkit-text-fill-color: var(--pn-ink) !important; }
html body #pn-center .pn-empty p { margin: 0; max-width: 280px; font-size: 13.5px !important; color: var(--pn-dim) !important; -webkit-text-fill-color: var(--pn-dim) !important; }
html body #pn-center .pn-cta {
  margin-top: 12px;
  height: 44px;
  padding: 0 28px;
  border-radius: 22px;
  border: 0 !important;
  background: var(--pn-ink) !important;
  color: var(--pn-on-ink) !important;
  -webkit-text-fill-color: var(--pn-on-ink) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
html body #pn-center .pn-note {
  margin: 16px;
  font-size: 13px !important;
  color: var(--pn-dim) !important;
  -webkit-text-fill-color: var(--pn-dim) !important;
}

/* Members: per-app switches. */
html body #pn-center .pn-set-lead { margin: 12px 16px 4px; font-size: 13px !important; color: var(--pn-dim) !important; -webkit-text-fill-color: var(--pn-dim) !important; }
html body #pn-center .pn-set { padding: 14px 16px; border-bottom: 1px solid var(--pn-line) !important; }
html body #pn-center .pn-set-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
html body #pn-center .pn-set-name { font-size: 15px !important; font-weight: 700 !important; color: var(--pn-ink) !important; -webkit-text-fill-color: var(--pn-ink) !important; }
html body #pn-center .pn-set-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
html body #pn-center .pn-switch {
  position: relative;
  flex: none;
  width: 46px;
  height: 28px;
  padding: 0;
  border-radius: 14px;
  border: 1.5px solid var(--pn-edge) !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
}
html body #pn-center .pn-switch .pn-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--pn-faint) !important;
  transition: transform 0.15s ease;
}
html body #pn-center .pn-switch.is-on { background: var(--pn-ink) !important; border-color: var(--pn-ink) !important; }
html body #pn-center .pn-switch.is-on .pn-knob { transform: translateX(18px); background: var(--pn-on-ink) !important; }

/* A post opened from a notification, lit briefly in its room. */
html body #mobile-community-room .community-room-message.pn-lit { box-shadow: inset 3px 0 0 currentColor; }

html body .pn-toast {
  position: fixed;
  left: 50%;
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 2147483500;
  padding: 10px 16px;
  border-radius: 20px;
  background: #0a0a0a !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 13px !important;
}

/* Line glyphs stay lines: the phone's icon sweeps fill every path. */
html body #pn-center svg path { fill: none !important; stroke: currentColor !important; }

/* ------------------------------------------- push row (web-push.js) */
html body #pn-center .wp-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 12px 16px 14px;
  border-bottom: 1px solid var(--pn-line) !important;
  background: transparent !important;
}
html body #pn-center .wp-strip[hidden] { display: none !important; }
html body #pn-center .wp-text {
  flex: 1;
  margin: 0;
  font-size: 14px !important;
  line-height: 1.4;
  color: var(--pn-dim) !important;
  -webkit-text-fill-color: var(--pn-dim) !important;
}
html body #pn-center .wp-btn {
  flex: none;
  height: 38px;
  padding: 0 18px;
  border-radius: 19px;
  border: 0 !important;
  background: var(--pn-ink) !important;
  color: var(--pn-on-ink) !important;
  -webkit-text-fill-color: var(--pn-on-ink) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
html body #pn-center .wp-btn.is-on {
  background: transparent !important;
  color: var(--pn-dim) !important;
  -webkit-text-fill-color: var(--pn-dim) !important;
  box-shadow: inset 0 0 0 1px var(--pn-edge) !important;
}
html body #pn-center .wp-btn[hidden] { display: none !important; }
html body #pn-center .wp-btn:disabled { opacity: 0.6; }

.mobile-header-activity-modal {
  --mha-bg: var(--background-color, #ffffff);
  --mha-surface: rgba(0, 0, 0, 0.035);
  --mha-text: var(--text-primary, #000000);
  --mha-sub: rgba(0, 0, 0, 0.62);
  --mha-muted: rgba(0, 0, 0, 0.42);
  --mha-border: rgba(0, 0, 0, 0.1);
  --mha-unread: rgba(0, 120, 255, 0.08);
  --mha-shadow: rgba(15, 23, 42, 0.1);
  position: fixed;
  inset: 0;
  z-index: 2147483400;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--mha-bg);
  color: var(--mha-text);
}

[data-theme="dark"] .mobile-header-activity-modal,
body[data-theme="dark"] .mobile-header-activity-modal {
  --mha-bg: #000000;
  --mha-surface: rgba(255, 255, 255, 0.065);
  --mha-text: #ffffff;
  --mha-sub: rgba(255, 255, 255, 0.7);
  --mha-muted: rgba(255, 255, 255, 0.45);
  --mha-border: rgba(255, 255, 255, 0.12);
  --mha-unread: rgba(0, 120, 255, 0.16);
  --mha-shadow: rgba(0, 0, 0, 0.36);
}

.mobile-header-activity-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 16px 14px;
  border-bottom: 1px solid var(--mha-border);
}

.mobile-header-activity-title-wrap {
  display: grid;
  gap: 4px;
}

.mobile-header-activity-title-side {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.mobile-header-activity-title {
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mha-sub);
}

.mobile-header-activity-total {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--mha-text);
}

.mobile-header-activity-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mobile-header-activity-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--mha-border);
  background: var(--mha-surface);
  color: var(--mha-text);
  display: grid;
  place-items: center;
  font-size: 15px;
  cursor: pointer;
}

.mobile-header-activity-push-action {
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--mha-border);
  background: var(--mha-bg);
  color: var(--mha-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 13px;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 8px 18px var(--mha-shadow);
  cursor: pointer;
  white-space: nowrap;
}

.mobile-header-activity-push-action.is-on {
  background: var(--mha-surface);
  color: var(--mha-text);
  -webkit-text-fill-color: var(--mha-text);
}

.mobile-header-activity-push-action i {
  font-size: 13px;
}

.mobile-header-activity-close {
  font-size: 20px;
}

.mobile-header-activity-menu i {
  font-size: 14px;
}

.mobile-header-activity-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 14px calc(22px + env(safe-area-inset-bottom, 0px));
}

.mobile-header-activity-loading,
.mobile-header-activity-empty,
.mobile-header-activity-error {
  display: grid;
  place-items: center;
  min-height: 180px;
  color: var(--mha-sub);
  text-align: center;
}

.mobile-header-activity-loading i {
  font-size: 24px;
}

.mobile-header-activity-layout {
  display: block;
}

.mobile-header-activity-filter-drawer {
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 0 0 12px;
}

.mobile-header-activity-modal.is-filter-open .mobile-header-activity-filter-drawer {
  display: grid;
}

.mobile-header-activity-filter {
  width: 100%;
  min-height: 44px;
  padding: 8px 7px;
  border-radius: 14px;
  border: 1px solid var(--mha-border);
  background: var(--mha-surface);
  color: var(--mha-sub);
  display: grid;
  gap: 4px;
  text-align: left;
  cursor: pointer;
}

.mobile-header-activity-filter.is-active {
  border-color: var(--mha-text);
  background: var(--mha-bg);
  color: var(--mha-text);
  box-shadow: 0 8px 20px var(--mha-shadow);
}

.mobile-header-activity-filter-label {
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-header-activity-filter-count {
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
}

.mobile-header-activity-main {
  min-width: 0;
}

.mobile-header-activity-sync {
  padding: 0 0 9px;
  font-size: 10px;
  line-height: 1.35;
  font-weight: 850;
  color: var(--mha-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.mobile-header-activity-feed {
  display: contents;
}

.mobile-header-activity-row {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  min-height: 84px;
  padding: 16px 0;
  border: 0;
  border-top: 1px solid var(--mha-border);
  border-radius: 0;
  background: transparent !important;
  color: inherit !important;
  text-align: left;
  cursor: pointer;
  box-shadow: none !important;
}

.mobile-header-activity-row:first-child {
  border-top: 0;
}

.mobile-header-activity-row.is-unread {
  background: transparent !important;
}

.mobile-header-activity-avatar {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--mha-surface);
  display: grid;
  place-items: center;
  color: var(--mha-text);
  position: relative;
  flex: 0 0 auto;
}

.mobile-header-activity-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mobile-header-activity-avatar i {
  font-size: 19px;
}

.mobile-header-activity-unread-dot {
  position: absolute;
  right: 0;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--primary-color, #ff4f2e);
  box-shadow: 0 0 0 2px var(--mha-bg);
}

.mobile-header-activity-copy {
  min-width: 0;
  display: grid;
  gap: 6px;
  padding-top: 1px;
}

.mobile-header-activity-row-title {
  font-size: 17px;
  line-height: 1.22;
  font-weight: 900;
  color: var(--mha-text);
}

.mobile-header-activity-row-subtitle {
  font-size: 13px;
  line-height: 1.3;
  font-weight: 750;
  color: var(--mha-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-header-activity-time {
  font-size: 12px;
  font-weight: 850;
  color: var(--mha-muted);
  white-space: nowrap;
  padding-top: 3px;
}

.mobile-header-activity-empty,
.mobile-header-activity-error {
  min-height: 220px;
  padding: 42px 12px;
  color: var(--mha-muted);
}

.mobile-header-activity-empty i,
.mobile-header-activity-error i {
  font-size: 34px;
  margin-bottom: 14px;
  opacity: 0.65;
}

.mobile-header-activity-empty strong,
.mobile-header-activity-error strong {
  display: block;
  font-size: 14px;
  font-weight: 900;
  color: var(--mha-text);
}

.mobile-header-activity-empty span,
.mobile-header-activity-error span {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.45;
}

.mobile-header-activity-detail {
  --mha-bg: var(--background-color, #ffffff);
  --mha-surface: rgba(0, 0, 0, 0.035);
  --mha-text: var(--text-primary, #000000);
  --mha-sub: rgba(0, 0, 0, 0.62);
  --mha-muted: rgba(0, 0, 0, 0.42);
  --mha-border: rgba(0, 0, 0, 0.1);
  position: fixed;
  inset: 0;
  z-index: 2147483402;
  display: grid;
  place-items: center;
  padding: 22px;
  color: var(--mha-text, #000);
}

[data-theme="dark"] .mobile-header-activity-detail,
body[data-theme="dark"] .mobile-header-activity-detail {
  --mha-bg: #000000;
  --mha-surface: rgba(255, 255, 255, 0.065);
  --mha-text: #ffffff;
  --mha-sub: rgba(255, 255, 255, 0.7);
  --mha-muted: rgba(255, 255, 255, 0.45);
  --mha-border: rgba(255, 255, 255, 0.12);
}

.mobile-header-activity-detail-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(3px);
}

.mobile-header-activity-detail-card {
  position: relative;
  width: min(100%, 360px);
  max-height: min(78vh, 640px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 24px;
  border: 1px solid var(--mha-border, rgba(0, 0, 0, 0.1));
  background: var(--mha-bg, #fff);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
  padding: 20px;
}

.mobile-header-activity-detail-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--mha-border, rgba(0, 0, 0, 0.1));
  background: var(--mha-surface, rgba(0, 0, 0, 0.035));
  color: var(--mha-text, #000);
  font-size: 19px;
  font-weight: 900;
}

.mobile-header-activity-detail-head {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding-right: 34px;
}

.mobile-header-activity-detail-avatar {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--mha-surface, rgba(0, 0, 0, 0.035));
  display: grid;
  place-items: center;
}

.mobile-header-activity-detail-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mobile-header-activity-detail-avatar i {
  font-size: 21px;
}

.mobile-header-activity-detail-copy {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.mobile-header-activity-detail-kicker {
  font-size: 10px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mha-muted, rgba(0, 0, 0, 0.42));
}

.mobile-header-activity-detail-copy strong {
  font-size: 19px;
  line-height: 1.16;
  font-weight: 950;
  color: var(--mha-text, #000);
}

.mobile-header-activity-detail-copy span:not(.mobile-header-activity-detail-kicker) {
  font-size: 13px;
  line-height: 1.38;
  font-weight: 750;
  color: var(--mha-sub, rgba(0, 0, 0, 0.62));
}

.mobile-header-activity-detail-context {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  padding: 14px;
  border-radius: 18px;
  background: var(--mha-surface, rgba(0, 0, 0, 0.035));
}

.mobile-header-activity-detail-context-row {
  display: grid;
  gap: 4px;
}

.mobile-header-activity-detail-context-row span {
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mha-muted, rgba(0, 0, 0, 0.42));
}

.mobile-header-activity-detail-context-row strong {
  font-size: 13px;
  line-height: 1.38;
  font-weight: 800;
  color: var(--mha-text, #000);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.mobile-header-activity-detail-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
}

.mobile-header-activity-detail-actions button {
  min-height: 42px;
  border-radius: 999px;
  border: 1px solid var(--mha-border, rgba(0, 0, 0, 0.1));
  background: var(--mha-surface, rgba(0, 0, 0, 0.035));
  color: var(--mha-text, #000);
  -webkit-text-fill-color: var(--mha-text, #000);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mobile-header-activity-detail-actions button.is-primary {
  background: var(--mha-bg, #fff);
  color: var(--mha-text, #000);
  -webkit-text-fill-color: var(--mha-text, #000);
  box-shadow: 0 8px 18px var(--mha-shadow, rgba(15, 23, 42, 0.1));
}

.mobile-header-activity-email-modal {
  --mha-bg: var(--background-color, #ffffff);
  --mha-surface: rgba(0, 0, 0, 0.035);
  --mha-text: var(--text-primary, #000000);
  --mha-sub: rgba(0, 0, 0, 0.62);
  --mha-muted: rgba(0, 0, 0, 0.42);
  --mha-border: rgba(0, 0, 0, 0.1);
  --mha-shadow: rgba(15, 23, 42, 0.1);
  position: fixed;
  inset: 0;
  z-index: 2147483402;
  display: grid;
  place-items: center;
  padding: 18px;
  color: var(--mha-text);
}

[data-theme="dark"] .mobile-header-activity-email-modal,
body[data-theme="dark"] .mobile-header-activity-email-modal {
  --mha-bg: #000000;
  --mha-surface: rgba(255, 255, 255, 0.065);
  --mha-text: #ffffff;
  --mha-sub: rgba(255, 255, 255, 0.7);
  --mha-muted: rgba(255, 255, 255, 0.45);
  --mha-border: rgba(255, 255, 255, 0.12);
  --mha-shadow: rgba(0, 0, 0, 0.36);
}

.mobile-header-activity-email-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(5px);
}

.mobile-header-activity-email-panel {
  position: relative;
  width: min(100%, 390px);
  max-height: min(84vh, 720px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 26px;
  border: 1px solid var(--mha-border);
  background: var(--mha-bg);
  box-shadow: 0 26px 80px rgba(15, 23, 42, 0.24);
}

.mobile-header-activity-email-top {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--mha-bg) 92%, transparent);
  border-bottom: 1px solid var(--mha-border);
  backdrop-filter: blur(18px);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.mobile-header-activity-email-icon {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  border: 1px solid var(--mha-border);
  background: var(--mha-surface);
  color: var(--mha-text);
  -webkit-text-fill-color: var(--mha-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mobile-header-activity-email-reader {
  padding: 18px 16px 22px;
}

.mobile-header-activity-email-from {
  color: var(--mha-sub);
  font-size: 12px;
  font-weight: 850;
  margin-bottom: 5px;
}

.mobile-header-activity-email-address {
  color: var(--mha-muted);
  font-size: 11px;
  font-weight: 750;
  margin-bottom: 10px;
  overflow-wrap: anywhere;
}

.mobile-header-activity-email-subject {
  font-size: 26px;
  line-height: 1.04;
  font-weight: 950;
  margin-bottom: 8px;
  overflow-wrap: anywhere;
}

.mobile-header-activity-email-date {
  color: var(--mha-sub);
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 18px;
}

.mobile-header-activity-email-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}

.mobile-header-activity-email-toolbar button {
  min-height: 36px;
  border-radius: 999px;
  border: 1px solid var(--mha-border);
  background: var(--mha-surface);
  color: var(--mha-text);
  -webkit-text-fill-color: var(--mha-text);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mobile-header-activity-email-content {
  color: var(--mha-text);
  font-size: 15px;
  line-height: 1.65;
  word-break: break-word;
}

.mobile-header-activity-email-content * {
  max-width: 100%;
}

.mobile-header-activity-email-content img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

.mobile-header-activity-email-reply {
  margin-top: 22px;
  padding: 14px;
  border-radius: 18px;
  background: var(--mha-surface);
}

.mobile-header-activity-email-reply-kicker {
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mha-muted);
  margin-bottom: 10px;
}

.mobile-header-activity-email-reply textarea {
  -webkit-appearance: none;
  appearance: none;
  color-scheme: light !important;
  width: 100%;
  border: 1px solid var(--mha-border);
  border-radius: 14px;
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  padding: 12px;
  font: inherit;
  resize: vertical;
  box-shadow: none !important;
  caret-color: #000000 !important;
}

.mobile-header-activity-email-reply textarea::placeholder {
  color: var(--mha-muted, rgba(0, 0, 0, 0.42)) !important;
  -webkit-text-fill-color: var(--mha-muted, rgba(0, 0, 0, 0.42)) !important;
}

.mobile-header-activity-email-reply button {
  width: 100%;
  min-height: 42px;
  margin-top: 10px;
  border-radius: 999px;
  border: 1px solid var(--mha-border);
  background: var(--mha-bg);
  color: var(--mha-text);
  -webkit-text-fill-color: var(--mha-text);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 8px 18px var(--mha-shadow);
}

.mobile-header-activity-member-sheet {
  position: fixed;
  inset: 0;
  z-index: 2147483401;
  display: flex;
  align-items: flex-end;
  color: var(--mha-text, #000);
}

.mobile-header-activity-member-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.mobile-header-activity-member-panel {
  position: relative;
  width: 100%;
  border-radius: 22px 22px 0 0;
  border-top: 1px solid var(--mha-border, rgba(0, 0, 0, 0.1));
  background: var(--mha-bg, #fff);
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.16);
}

.mobile-header-activity-member-close {
  position: absolute;
  right: 14px;
  top: 14px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--mha-border, rgba(0, 0, 0, 0.1));
  background: var(--mha-surface, rgba(0, 0, 0, 0.035));
  color: inherit;
  font-size: 18px;
}

.mobile-header-activity-member-head {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding-right: 42px;
}

.mobile-header-activity-member-avatar {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--mha-surface, rgba(0, 0, 0, 0.035));
  display: grid;
  place-items: center;
  overflow: hidden;
  font-size: 18px;
  font-weight: 950;
}

.mobile-header-activity-member-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mobile-header-activity-member-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.mobile-header-activity-member-copy strong {
  font-size: 18px;
  font-weight: 950;
  line-height: 1.15;
}

.mobile-header-activity-member-copy span,
.mobile-header-activity-member-meta span {
  color: var(--mha-sub, rgba(0, 0, 0, 0.62));
  font-size: 11px;
  font-weight: 800;
}

.mobile-header-activity-member-meta {
  display: grid;
  gap: 7px;
  margin-top: 14px;
}

.mobile-header-activity-member-meta b {
  display: block;
  color: var(--mha-muted, rgba(0, 0, 0, 0.42));
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mobile-header-activity-member-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}

.mobile-header-activity-member-actions button {
  min-height: 46px;
  border-radius: 14px;
  border: 1px solid var(--mha-border, rgba(0, 0, 0, 0.1));
  background: var(--mha-surface, rgba(0, 0, 0, 0.035));
  color: inherit;
  display: grid;
  place-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 900;
}

/* Frosted-glass nav pill. Keep the fill translucent enough that the
   backdrop-filter in the container kill-switch actually has something to blur —
   an opaque fill here silently disables the glass. */
#bottom-nav,
html[data-theme] #bottom-nav,
body[data-theme] #bottom-nav,
[data-theme] #bottom-nav {
    background: rgba(255, 255, 255, 0.14) !important;
    background-color: rgba(255, 255, 255, 0.14) !important;
    background-image: none !important;
    border: 1px solid rgba(140, 140, 150, 0.28) !important;
    border-top: 1px solid rgba(140, 140, 150, 0.28) !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    backdrop-filter: blur(22px) saturate(1.6) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.6) !important;
}

html[data-theme="light"] #bottom-nav,
body[data-theme="light"] #bottom-nav,
html[data-theme="light-accent"] #bottom-nav,
body[data-theme="light-accent"] #bottom-nav,
html[data-theme="light"][data-theme-variant] #bottom-nav,
body[data-theme="light"][data-theme-variant] #bottom-nav {
    background: rgba(255, 255, 255, 0.14) !important;
    background-color: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(140, 140, 150, 0.28) !important;
}

html[data-theme="light-accent"] #bottom-nav,
body[data-theme="light-accent"] #bottom-nav {
    background: rgba(255, 255, 255, 0.14) !important;
    background-color: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(140, 140, 150, 0.28) !important;
}

html[data-theme="light-accent"] .mobile-blocspace-tab-rail,
body[data-theme="light-accent"] .mobile-blocspace-tab-rail {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    border-top-color: transparent !important;
}

html[data-theme="dark"] #bottom-nav,
body[data-theme="dark"] #bottom-nav,
html[data-theme="dark-accent"] #bottom-nav,
body[data-theme="dark-accent"] #bottom-nav,
html[data-theme="dark"][data-theme-variant] #bottom-nav,
body[data-theme="dark"][data-theme-variant] #bottom-nav {
    background: rgba(20, 20, 24, 0.28) !important;
    background-color: rgba(20, 20, 24, 0.28) !important;
    background-image: none !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

#bottom-nav > button.bottom-nav-btn {
    background: transparent !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

html[data-theme="light"] #bottom-nav > button.bottom-nav-btn,
body[data-theme="light"] #bottom-nav > button.bottom-nav-btn,
html[data-theme="light-accent"] #bottom-nav > button.bottom-nav-btn,
body[data-theme="light-accent"] #bottom-nav > button.bottom-nav-btn {
    color: rgba(17, 17, 17, 0.68) !important;
}

html[data-theme="dark"] #bottom-nav > button.bottom-nav-btn,
body[data-theme="dark"] #bottom-nav > button.bottom-nav-btn,
html[data-theme="dark-accent"] #bottom-nav > button.bottom-nav-btn,
body[data-theme="dark-accent"] #bottom-nav > button.bottom-nav-btn {
    color: rgba(255, 255, 255, 0.72) !important;
}

#bottom-nav > button.bottom-nav-btn.active,
#bottom-nav > button.bottom-nav-btn.active i,
#bottom-nav > button.bottom-nav-btn.active .mobile-nav-glyph,
#bottom-nav > button.bottom-nav-btn.active .bottom-nav-label,
#bottom-nav > button.bottom-nav-btn.active .bottom-nav-avatar {
    color: var(--primary-color, #ff4d2e) !important;
    -webkit-text-fill-color: var(--primary-color, #ff4d2e) !important;
}

.mobile-blocspace-tab-rail {
    background: #ffffff;
    background-color: #ffffff;
    background-image: none;
    border-top-color: transparent;
    box-shadow: none;
}

html[data-theme="light"] .mobile-blocspace-tab-rail,
body[data-theme="light"] .mobile-blocspace-tab-rail,
html[data-theme="light-accent"] .mobile-blocspace-tab-rail,
body[data-theme="light-accent"] .mobile-blocspace-tab-rail {
    background: #ffffff;
    background-color: #ffffff;
    background-image: none;
    border-top-color: transparent;
}

html[data-theme="dark"] .mobile-blocspace-tab-rail,
body[data-theme="dark"] .mobile-blocspace-tab-rail,
html[data-theme="dark-accent"] .mobile-blocspace-tab-rail,
body[data-theme="dark-accent"] .mobile-blocspace-tab-rail {
    background: #050505;
    border-top-color: rgba(255, 255, 255, 0.12);
}

.mobile-blocspace-shell-tab.is-active {
    color: var(--text-primary, #111111) !important;
    background: color-mix(in srgb, var(--text-primary, #111111) 8%, transparent) !important;
    border-radius: 18px !important;
    font-weight: 900 !important;
}

.mobile-blocspace-shell-tab.is-active::after {
    display: block !important;
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 3px !important;
    width: 24px !important;
    height: 3px !important;
    border-radius: 999px !important;
    background: var(--text-primary, #111111) !important;
    transform: translateX(-50%) !important;
}

/* Keep the Bloc Space rail single-select. Global first-button rules elsewhere
   in the mobile shell must not make Home look active beside the real section. */
.mobile-blocspace-tab-rail .mobile-blocspace-shell-tab:not(.is-active) {
    background: transparent !important;
    color: var(--text-secondary, #6b7280) !important;
    border-radius: 0 !important;
    transition: none !important;
}

.mobile-blocspace-tab-rail .mobile-blocspace-shell-tab:not(.is-active)::after {
    background: transparent !important;
    display: none !important;
    transition: none !important;
}

.mobile-blocspace-tab-rail .mobile-blocspace-shell-tab.is-active {
    background: color-mix(in srgb, var(--text-primary, #111111) 8%, transparent) !important;
    color: var(--text-primary, #111111) !important;
    transition: none !important;
}

.mobile-blocspace-tab-rail .mobile-blocspace-shell-tab.is-active::after {
    background: var(--text-primary, #111111) !important;
}

/* ---- Bloc Space rail wears the same pill as the app's own nav ----------
   Same inset, height, radius, glass and shadow as #bottom-nav above, and the
   same tab shape: no active box, no top indicator, the active tab simply takes
   the app's primary colour. Appended after the rail rules above so it wins. */
.mobile-blocspace-tab-rail,
html[data-theme] .mobile-blocspace-tab-rail,
body[data-theme] .mobile-blocspace-tab-rail,
body.blocspace-modal-open .mobile-blocspace-tab-rail {
    left: 14px !important;
    right: 14px !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    min-height: 50px !important;
    height: auto !important;
    padding: 3px 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
    overflow: visible !important;
    border: 1px solid rgba(140, 140, 150, 0.28) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, 0.14) !important;
    background-color: rgba(255, 255, 255, 0.14) !important;
    background-image: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    backdrop-filter: blur(22px) saturate(1.6) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.6) !important;
}

html[data-theme="dark"] .mobile-blocspace-tab-rail,
body[data-theme="dark"] .mobile-blocspace-tab-rail,
html[data-theme="dark-accent"] .mobile-blocspace-tab-rail,
body[data-theme="dark-accent"] .mobile-blocspace-tab-rail {
    background: rgba(20, 20, 24, 0.28) !important;
    background-color: rgba(20, 20, 24, 0.28) !important;
    background-image: none !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

.mobile-blocspace-tab-rail .mobile-blocspace-shell-tab,
.mobile-blocspace-tab-rail .mobile-blocspace-shell-tab:not(.is-active),
.mobile-blocspace-tab-rail .mobile-blocspace-shell-tab.is-active,
html[data-theme] .mobile-blocspace-tab-rail .mobile-blocspace-shell-tab,
body[data-theme] .mobile-blocspace-tab-rail .mobile-blocspace-shell-tab {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 42px !important;
    min-height: 0 !important;
    padding: 0 !important;
    gap: 1px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 8px !important;
    font-weight: 760 !important;
    letter-spacing: 0.01em !important;
    transition: color 0.12s ease, transform 0.1s ease !important;
}

.mobile-blocspace-tab-rail .mobile-blocspace-shell-tab::after,
.mobile-blocspace-tab-rail .mobile-blocspace-shell-tab.is-active::after {
    display: none !important;
    content: none !important;
}

.mobile-blocspace-tab-rail .mobile-blocspace-shell-tab i {
    width: 26px !important;
    height: 26px !important;
    font-size: 22px !important;
    transform: none !important;
    color: currentColor !important;
    -webkit-text-fill-color: currentColor !important;
}

.mobile-blocspace-tab-rail .mobile-blocspace-shell-tab:not(.is-active),
html[data-theme="light"] .mobile-blocspace-tab-rail .mobile-blocspace-shell-tab:not(.is-active),
body[data-theme="light"] .mobile-blocspace-tab-rail .mobile-blocspace-shell-tab:not(.is-active),
html[data-theme="light-accent"] .mobile-blocspace-tab-rail .mobile-blocspace-shell-tab:not(.is-active),
body[data-theme="light-accent"] .mobile-blocspace-tab-rail .mobile-blocspace-shell-tab:not(.is-active) {
    color: rgba(17, 17, 17, 0.68) !important;
    -webkit-text-fill-color: rgba(17, 17, 17, 0.68) !important;
}

html[data-theme="dark"] .mobile-blocspace-tab-rail .mobile-blocspace-shell-tab:not(.is-active),
body[data-theme="dark"] .mobile-blocspace-tab-rail .mobile-blocspace-shell-tab:not(.is-active),
html[data-theme="dark-accent"] .mobile-blocspace-tab-rail .mobile-blocspace-shell-tab:not(.is-active),
body[data-theme="dark-accent"] .mobile-blocspace-tab-rail .mobile-blocspace-shell-tab:not(.is-active) {
    color: rgba(255, 255, 255, 0.72) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.72) !important;
}

.mobile-blocspace-tab-rail .mobile-blocspace-shell-tab.is-active,
.mobile-blocspace-tab-rail .mobile-blocspace-shell-tab.is-active i,
.mobile-blocspace-tab-rail .mobile-blocspace-shell-tab.is-active span,
html[data-theme] .mobile-blocspace-tab-rail .mobile-blocspace-shell-tab.is-active,
body[data-theme] .mobile-blocspace-tab-rail .mobile-blocspace-shell-tab.is-active,
html[data-theme] .mobile-blocspace-tab-rail .mobile-blocspace-shell-tab.is-active i,
body[data-theme] .mobile-blocspace-tab-rail .mobile-blocspace-shell-tab.is-active i,
html[data-theme] .mobile-blocspace-tab-rail .mobile-blocspace-shell-tab.is-active span,
body[data-theme] .mobile-blocspace-tab-rail .mobile-blocspace-shell-tab.is-active span {
    color: var(--primary-color, #ff4d2e) !important;
    -webkit-text-fill-color: var(--primary-color, #ff4d2e) !important;
}

/* Dark-theme rules elsewhere give every button a fill; the rail tabs stay
   glass-clear whatever the theme. Deep selectors so nothing outranks them. */
html[data-theme] body .mobile-blocspace-tab-rail .mobile-blocspace-shell-tab,
html body[data-theme] .mobile-blocspace-tab-rail .mobile-blocspace-shell-tab,
html[data-theme] body .mobile-blocspace-tab-rail .mobile-blocspace-shell-tab:not(.is-active),
html body[data-theme] .mobile-blocspace-tab-rail .mobile-blocspace-shell-tab:not(.is-active),
html[data-theme] body .mobile-blocspace-tab-rail .mobile-blocspace-shell-tab.is-active,
html body[data-theme] .mobile-blocspace-tab-rail .mobile-blocspace-shell-tab.is-active {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* The login sheet, in the join page's language: paper, mono eyebrows,
   filled fields, one black button. Same ids and classes as before so the
   login, sign-up, Google and Stripe code under it is untouched.

   Doubled with html/body and !important throughout because the page under it
   repaints anything whose id contains "modal" (black text, white boxes,
   Oxanium, backdrop blur on buttons). */

html body #quick-login-modal {
    position: fixed !important; inset: 0 !important; z-index: 2147483300 !important;
    display: flex !important; align-items: stretch !important; justify-content: center !important;
    margin: 0 !important; padding: 0 !important; border: 0 !important;
    background: transparent !important; background-color: transparent !important;
    color-scheme: light !important;
    font-family: var(--font-family, Manrope), -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important;
}
html body #quick-login-modal * { box-sizing: border-box; letter-spacing: 0; }
html body #quick-login-modal *:not(.fas):not(.qlm-image-cta):not(.qlm-mono):not(.qlm-bar-title):not(.qlm-input-label):not(.qlm-btn-primary):not(.qlm-pay-eyebrow):not(.qlm-credentials-label):not(.qlm-credentials-pin):not(.qlm-credentials-value):not(.qlm-credentials-continue):not(.qlm-credentials-download) {
    font-family: var(--font-family, Manrope), -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important;
}
html body #quick-login-modal button, html body #quick-login-modal a {
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important; filter: none !important; text-shadow: none !important;
}
body.quick-login-open #bottom-nav { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }

/* Full height, the same as the join page it switches with. */
html body #quick-login-modal #qlm-container {
    position: relative !important; width: 100% !important; max-width: none !important; height: 100% !important; max-height: none !important;
    display: flex !important; flex-direction: column !important;
    margin: 0 !important; padding: 0 !important;
    border: 0 !important; border-radius: 0 !important;
    background: #FBFBF9 !important; background-color: #FBFBF9 !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important;
    box-shadow: none !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    overflow: hidden auto !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    animation: qlmSlideUp 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* The top half is the app's picture, fading down into dark with the
   headline on it, the way the app's own hero does. */
html body #quick-login-modal .qlm-grabber { display: none !important; }
html body #quick-login-modal .qlm-art {
    position: relative !important; flex: 1 1 46vh !important; height: auto !important; min-height: 250px !important; max-height: none !important;
    display: flex !important; flex-direction: column !important; justify-content: space-between !important;
    background-color: #111214 !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important;
    overflow: hidden !important;
}
html body #quick-login-modal .qlm-art::after {
    content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0) 32%, rgba(0, 0, 0, 0) 48%, rgba(0, 0, 0, 0.82) 100%) !important;
}
html body #quick-login-modal .qlm-art.is-blank::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%) !important; }
html body #quick-login-modal .qlm-art-initial {
    position: absolute !important; right: -6px !important; top: 40px !important; font-size: 220px !important; line-height: 1 !important; font-weight: 800 !important;
    color: rgba(255, 255, 255, 0.07) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.07) !important; pointer-events: none !important;
}
html body #quick-login-modal .qlm-bar {
    position: relative !important; z-index: 1 !important; flex: none !important; display: grid !important; grid-template-columns: 1fr auto 1fr !important; align-items: center !important;
    padding: calc(14px + env(safe-area-inset-top, 0px)) 18px 10px !important;
}
html body #quick-login-modal .qlm-close {
    justify-self: start !important; width: auto !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 8px 0 !important;
    border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
    font-size: 13px !important; font-weight: 600 !important; color: rgba(255, 255, 255, 0.86) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.86) !important; cursor: pointer;
}
html body #quick-login-modal .qlm-bar-title, html body #quick-login-modal .qlm-pay-eyebrow {
    justify-self: center !important; text-align: center !important;
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 9px !important; font-weight: 500 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.72) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.72) !important; white-space: nowrap !important;
}
html body #quick-login-modal .qlm-pay-eyebrow { color: #70706B !important; -webkit-text-fill-color: #70706B !important; }
html body #quick-login-modal .qlm-bar-spacer { justify-self: end !important; }

/* Identity on the picture, the hero's four slots */
html body #quick-login-modal .qlm-identity { position: relative !important; z-index: 1 !important; padding: 0 18px 14px !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; }
html body #quick-login-modal .qlm-identity-name { display: flex !important; align-items: center !important; gap: 10px !important; font-size: calc(34px * var(--identity-scale, 1)) !important; line-height: 1.05 !important; font-weight: 800 !important; letter-spacing: 0.02em !important; text-transform: uppercase !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35); }
html body #quick-login-modal .qlm-identity-name i { font-size: 18px !important; color: #22C55E !important; -webkit-text-fill-color: #22C55E !important; }
html body #quick-login-modal .qlm-identity-role { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 8px !important; margin-top: 6px !important; font-size: 13px !important; font-weight: 500 !important; color: rgba(255, 255, 255, 0.82) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.82) !important; }
html body #quick-login-modal .qlm-identity-role span { color: rgba(255, 255, 255, 0.82) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.82) !important; }
html body #quick-login-modal .qlm-identity-role i { width: 4px !important; height: 4px !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.5) !important; display: inline-block !important; }
html body #quick-login-modal .qlm-identity-rule { height: 1px !important; margin: 12px 0 !important; border: 0 !important; background: rgba(255, 255, 255, 0.22) !important; }
html body #quick-login-modal .qlm-identity-org { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 10px !important; font-size: 13px !important; font-weight: 500 !important; color: rgba(255, 255, 255, 0.86) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.86) !important; }
html body #quick-login-modal .qlm-identity-org span { color: rgba(255, 255, 255, 0.86) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.86) !important; }
html body #quick-login-modal .qlm-identity-place { display: inline-flex !important; align-items: center !important; gap: 5px !important; }
html body #quick-login-modal .fas { font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome !important; font-weight: 900 !important; }
html body #quick-login-modal .qlm-identity-place i { font-size: 12px !important; color: rgba(255, 255, 255, 0.86) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.86) !important; }

/* Headline under the switch, on paper */
html body #quick-login-modal .qlm-hero {
    flex: none !important; display: flex !important; align-items: flex-end !important; justify-content: space-between !important; gap: 16px !important;
    padding: 14px 18px 0 !important;
}
html body #quick-login-modal .qlm-copy-wrap { flex: 1 1 auto !important; min-width: 0 !important; }
html body #quick-login-modal .qlm-title {
    margin: 0 2px 0 !important; padding: 0 !important;
    font-size: 26px !important; line-height: 1.1 !important; font-weight: 800 !important; letter-spacing: -0.03em !important;
    color: #111214 !important; -webkit-text-fill-color: #111214 !important;
}
html body #quick-login-modal .qlm-copy {
    margin: 6px 2px 0 !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.45 !important;
    color: #63635F !important; -webkit-text-fill-color: #63635F !important;
}
html body #quick-login-modal .qlm-app-mark { display: none !important; }

/* The switch: two pills on one track */
html body #quick-login-modal .qlm-tabs {
    display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 4px !important;
    flex: none !important; margin: 14px 18px 0 !important; padding: 4px !important; border-radius: 999px !important;
    background: #EFEFEB !important; border: 0 !important;
}
html body #quick-login-modal .qlm-tab {
    height: 38px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 999px !important;
    background: transparent !important; box-shadow: none !important;
    font-size: 13px !important; font-weight: 700 !important; color: #63635F !important; -webkit-text-fill-color: #63635F !important; cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease;
}
html body #quick-login-modal .qlm-tabs[hidden] { display: none !important; }
html body #quick-login-modal .qlm-tab::after { display: none !important; }
html body #quick-login-modal .qlm-tab.active {
    background: #111214 !important; color: #FBFBF9 !important; -webkit-text-fill-color: #FBFBF9 !important;
    box-shadow: 0 6px 14px -8px rgba(17, 18, 20, 0.5) !important;
}

/* Panes and fields */
html body #quick-login-modal .qlm-pane {
    flex: none !important; display: flex !important; flex-direction: column !important; gap: 10px !important;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)) !important; overflow: visible !important;
}
/* The button sits at the foot, like the join page's; fields stay at the top. */
html body #quick-login-modal .qlm-pane .qlm-btn-primary { margin-top: 6px !important; flex: none !important; }
html body #quick-login-modal .qlm-pane[hidden] { display: none !important; }
html body #quick-login-modal .qlm-pane > * { flex: 0 0 auto !important; }
html body #quick-login-modal .qlm-input-group { display: flex !important; flex-direction: column !important; gap: 6px !important; min-width: 0 !important; flex: 0 0 auto !important; margin: 0 !important; }
html body #quick-login-modal .qlm-pin-row > .qlm-input-group, html body #quick-login-modal .qlm-name-row > .qlm-input-group { flex: 1 1 0 !important; }
html body #quick-login-modal .qlm-input-label {
    margin: 0 0 0 4px !important;
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 9px !important; font-weight: 500 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important;
    color: #70706B !important; -webkit-text-fill-color: #70706B !important;
}
html body #quick-login-modal input.qlm-input {
    width: 100% !important; height: 52px !important; margin: 0 !important; padding: 0 16px !important;
    border: 0 !important; border-radius: 16px !important; outline: none !important; box-shadow: none !important;
    background: #F4F4F1 !important; background-color: #F4F4F1 !important;
    font-size: 16px !important; font-weight: 600 !important; letter-spacing: -0.01em !important;
    color: #111214 !important; -webkit-text-fill-color: #111214 !important; caret-color: #111214 !important;
    -webkit-appearance: none !important; appearance: none !important; color-scheme: light !important;
}
html body #quick-login-modal input.qlm-input:focus { box-shadow: 0 0 0 1.5px #111214 inset !important; }
html body #quick-login-modal input.qlm-input::placeholder { color: #A3A3A0 !important; -webkit-text-fill-color: #A3A3A0 !important; opacity: 1 !important; font-weight: 500 !important; }
html body #quick-login-modal input.qlm-input:-webkit-autofill,
html body #quick-login-modal input.qlm-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #F4F4F1 inset !important; -webkit-text-fill-color: #111214 !important; caret-color: #111214 !important;
}
html body #quick-login-modal input[type="password"].qlm-input { letter-spacing: 0.18em !important; }
html body #quick-login-modal .qlm-image-row { position: relative !important; display: flex !important; align-items: center !important; gap: 12px !important; margin: 0 !important; padding: 10px 12px 10px 10px !important; border: 1px solid #EAEAE6 !important; border-radius: 18px !important; background: #FFFFFF !important; box-shadow: 0 1px 2px rgba(17, 18, 20, 0.03) !important; cursor: pointer; overflow: hidden !important; }
html body #quick-login-modal .qlm-image-row .qlm-image-tile { border-radius: 50% !important; width: 46px !important; height: 46px !important; flex: 0 0 46px !important; }
html body #quick-login-modal .qlm-image-copy { flex: 1 1 auto !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 2px !important; }
html body #quick-login-modal .qlm-image-copy strong { font-size: 14px !important; font-weight: 800 !important; letter-spacing: -0.01em !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; }
html body #quick-login-modal .qlm-image-copy small { font-size: 11.5px !important; font-weight: 500 !important; line-height: 1.35 !important; color: #63635F !important; -webkit-text-fill-color: #63635F !important; }
html body #quick-login-modal .qlm-image-cta { flex: none !important; height: 32px !important; padding: 0 14px !important; display: inline-flex !important; align-items: center !important; border-radius: 999px !important; background: #111214 !important; font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 10px !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; color: #FBFBF9 !important; -webkit-text-fill-color: #FBFBF9 !important; }
html body #quick-login-modal .qlm-image-row .qlm-file-input { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; opacity: 0 !important; cursor: pointer; }
html body #quick-login-modal .qlm-image-tile {
    position: relative !important; width: 52px !important; height: 52px !important; flex: 0 0 52px !important; margin: 0 !important;
    border-radius: 16px !important; border: 1.5px dashed #D6D6D1 !important; background: #F4F4F1 !important; overflow: hidden !important;
    display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer;
}
html body #quick-login-modal .qlm-image-tile svg { width: 18px !important; height: 18px !important; fill: none !important; }
html body #quick-login-modal .qlm-image-tile svg * { fill: none !important; stroke: #63635F !important; }
html body #quick-login-modal .qlm-image-tile img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; }
html body #quick-login-modal .qlm-image-tile img[hidden] { display: none !important; }
html body #quick-login-modal .qlm-file-input { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; opacity: 0 !important; cursor: pointer; padding: 0 !important; }
html body #quick-login-modal .qlm-pin-row { display: flex !important; gap: 10px !important; }

/* Plan line on Sign up, same shape as the join page's plan card */
html body #quick-login-modal .qlm-plan {
    display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important;
    padding: 13px 14px !important; border: 1.5px solid #111214 !important; border-radius: 18px !important; background: #FFFFFF !important;
}
html body #quick-login-modal .qlm-plan-copy { display: flex !important; flex-direction: column !important; gap: 3px !important; min-width: 0 !important; }
html body #quick-login-modal .qlm-plan-copy strong { font-size: 14px !important; font-weight: 800 !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; }
html body #quick-login-modal .qlm-plan-copy small, html body #quick-login-modal .qlm-hint, html body #quick-login-modal .qlm-hint span {
    font-size: 12px !important; font-weight: 500 !important; line-height: 1.4 !important; color: #63635F !important; -webkit-text-fill-color: #63635F !important;
}
html body #quick-login-modal .qlm-plan-price { display: flex !important; align-items: baseline !important; gap: 4px !important; flex: none !important; }
html body #quick-login-modal .qlm-plan-price b { font-size: 22px !important; font-weight: 800 !important; letter-spacing: -0.03em !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; }
html body #quick-login-modal .qlm-plan-price small { font-size: 11px !important; font-weight: 600 !important; color: #63635F !important; -webkit-text-fill-color: #63635F !important; }
html body #quick-login-modal .qlm-link, html body #quick-login-modal .qlm-link-unused {
    align-self: flex-start !important; width: auto !important; height: auto !important; min-height: 0 !important; margin: -4px 0 0 4px !important; padding: 0 !important;
    border: 0 !important; background: transparent !important; box-shadow: none !important;
    font-size: 13px !important; font-weight: 700 !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; cursor: pointer;
}
html body #quick-login-modal .qlm-link span { color: #63635F !important; -webkit-text-fill-color: #63635F !important; }

/* The one black button */
html body #quick-login-modal .qlm-btn-primary, html body #quick-login-modal .qlm-btn-primary:disabled {
    display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
    width: 100% !important; height: 54px !important; margin: 4px 0 0 !important; padding: 0 !important; border: 0 !important; border-radius: 16px !important;
    background: #111214 !important; background-color: #111214 !important; box-shadow: 0 12px 24px -12px rgba(17, 18, 20, 0.55) !important;
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0.22em !important; text-transform: uppercase !important;
    color: #FBFBF9 !important; -webkit-text-fill-color: #FBFBF9 !important; cursor: pointer; transition: transform 0.12s ease, opacity 0.12s ease;
}
html body #quick-login-modal .qlm-btn-primary::before { display: none !important; }
html body #quick-login-modal .qlm-btn-primary:active { transform: scale(0.985); }
html body #quick-login-modal .qlm-btn-primary:disabled { opacity: 0.55 !important; }
html body #quick-login-modal .qlm-btn-primary i { color: #FBFBF9 !important; -webkit-text-fill-color: #FBFBF9 !important; font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome !important; }

/* Google, as a real button under the black one */
html body #quick-login-modal .qlm-google,
html body #quick-login-modal .qlm-tiktok {
    display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important;
    width: 100% !important; height: 48px !important; margin: 0 !important; padding: 0 16px !important;
    border: 1px solid #E3E3DE !important; border-radius: 16px !important;
    background: #FFFFFF !important; background-color: #FFFFFF !important; box-shadow: 0 1px 2px rgba(17, 18, 20, 0.04) !important;
    text-decoration: none !important; cursor: pointer; flex: none !important;
}
html body #quick-login-modal .qlm-google:active,
html body #quick-login-modal .qlm-tiktok:active { background: #F4F4F1 !important; }
html body #quick-login-modal .qlm-google span,
html body #quick-login-modal .qlm-tiktok span { font-size: 14px !important; font-weight: 700 !important; letter-spacing: -0.01em !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; }
html body #quick-login-modal .qlm-google svg,
html body #quick-login-modal .qlm-tiktok svg { width: 20px !important; height: 20px !important; flex: none !important; filter: none !important; }
html body #quick-login-modal .qlm-google svg path { fill: inherit; }
html body #quick-login-modal .qlm-google svg path[fill="#4285F4"] { fill: #4285F4 !important; }
html body #quick-login-modal .qlm-google svg path[fill="#34A853"] { fill: #34A853 !important; }
html body #quick-login-modal .qlm-google svg path[fill="#FBBC05"] { fill: #FBBC05 !important; }
html body #quick-login-modal .qlm-google svg path[fill="#EA4335"] { fill: #EA4335 !important; }

html body #quick-login-modal .qlm-legal {
    margin: 2px 0 0 !important; padding: 0 6px !important; text-align: center !important;
    font-size: 11px !important; font-weight: 500 !important; line-height: 1.5 !important; color: #8A8A84 !important; -webkit-text-fill-color: #8A8A84 !important;
}

/* Welcome back, after a login */
html body #quick-login-modal .qlm-success { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 10px !important; padding: 26px 18px calc(40px + env(safe-area-inset-bottom, 0px)) !important; text-align: center !important; }
html body #quick-login-modal .qlm-success-mark { width: 72px !important; height: 72px !important; border-radius: 50% !important; overflow: hidden !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #111214 !important; box-shadow: 0 0 0 1px #EAEAE6 !important; }
html body #quick-login-modal .qlm-success-mark img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
html body #quick-login-modal .qlm-success-mark span { font-size: 18px !important; font-weight: 800 !important; color: #FBFBF9 !important; -webkit-text-fill-color: #FBFBF9 !important; }
html body #quick-login-modal .qlm-success-title { margin-top: 6px !important; font-size: 22px !important; font-weight: 800 !important; letter-spacing: -0.03em !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; }
html body #quick-login-modal .qlm-success-copy { font-size: 13px !important; font-weight: 500 !important; color: #63635F !important; -webkit-text-fill-color: #63635F !important; }

/* Your app is ready: the credentials card */
html body #quick-login-modal .qlm-credentials { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 12px !important; padding: calc(22px + env(safe-area-inset-top, 0px)) 18px calc(14px + env(safe-area-inset-bottom, 0px)) !important; }
html body #quick-login-modal .qlm-credentials-continue { margin-top: auto !important; flex: none !important; }
html body #quick-login-modal .qlm-credentials-icon { width: 44px !important; height: 44px !important; border-radius: 14px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: rgba(15, 191, 164, 0.14) !important; color: #0B8F7B !important; -webkit-text-fill-color: #0B8F7B !important; font-size: 16px !important; }
html body #quick-login-modal .qlm-credentials-icon i { color: #0B8F7B !important; -webkit-text-fill-color: #0B8F7B !important; font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome !important; }
html body #quick-login-modal .qlm-credentials-title { font-size: 26px !important; font-weight: 800 !important; letter-spacing: -0.03em !important; line-height: 1.12 !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; }
html body #quick-login-modal .qlm-credentials-copy { margin-top: -6px !important; font-size: 13px !important; font-weight: 500 !important; color: #63635F !important; -webkit-text-fill-color: #63635F !important; }
html body #quick-login-modal .qlm-credentials-card { border: 1px solid #EAEAE6 !important; border-radius: 18px !important; background: #FFFFFF !important; box-shadow: 0 1px 2px rgba(17, 18, 20, 0.03) !important; overflow: hidden !important; }
html body #quick-login-modal .qlm-credentials-field { display: flex !important; flex-direction: column !important; gap: 4px !important; padding: 13px 14px !important; }
html body #quick-login-modal .qlm-credentials-divider { height: 1px !important; background: #EFEFEB !important; }
html body #quick-login-modal .qlm-credentials-label { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 9px !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: #70706B !important; -webkit-text-fill-color: #70706B !important; }
html body #quick-login-modal .qlm-credentials-value { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 13px !important; font-weight: 600 !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; word-break: break-all !important; }
html body #quick-login-modal .qlm-credentials-pin { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 24px !important; font-weight: 600 !important; letter-spacing: 0.24em !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; }
html body #quick-login-modal .qlm-credentials-download {
    display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
    width: 100% !important; height: 46px !important; margin: 0 !important; padding: 0 !important; border: 1px solid #EAEAE6 !important; border-radius: 16px !important;
    background: #FFFFFF !important; box-shadow: none !important;
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 11px !important; letter-spacing: 0.18em !important; text-transform: uppercase !important;
    color: #111214 !important; -webkit-text-fill-color: #111214 !important; cursor: pointer;
}
html body #quick-login-modal .qlm-credentials-download i { color: #111214 !important; -webkit-text-fill-color: #111214 !important; font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome !important; }
html body #quick-login-modal .qlm-credentials-continue {
    display: flex !important; align-items: center !important; justify-content: center !important;
    width: 100% !important; height: 54px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 16px !important;
    background: #111214 !important; box-shadow: 0 12px 24px -12px rgba(17, 18, 20, 0.55) !important;
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 12px !important; letter-spacing: 0.22em !important; text-transform: uppercase !important;
    color: #FBFBF9 !important; -webkit-text-fill-color: #FBFBF9 !important; cursor: pointer;
}

/* Paying inside the sheet */
html body #quick-login-modal .qlm-pay { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; display: flex !important; flex-direction: column !important; gap: 12px !important; padding: calc(18px + env(safe-area-inset-top, 0px)) 18px calc(14px + env(safe-area-inset-bottom, 0px)) !important; }
html body #quick-login-modal .qlm-pay .qlm-btn-primary { margin-top: auto !important; flex: none !important; }
html body #quick-login-modal .qlm-pay-eyebrow { justify-self: auto !important; text-align: left !important; margin-left: 2px !important; }
html body #quick-login-modal .qlm-pay-title { font-size: 26px !important; font-weight: 800 !important; letter-spacing: -0.03em !important; line-height: 1.12 !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; }
html body #quick-login-modal .qlm-pay-price { margin-top: -6px !important; font-size: 14px !important; font-weight: 600 !important; color: #63635F !important; -webkit-text-fill-color: #63635F !important; }
html body #quick-login-modal #qlm-payment-element { margin-top: 4px !important; min-height: 120px !important; }
html body #quick-login-modal .qlm-pay-error { min-height: 0 !important; font-size: 12px !important; font-weight: 600 !important; color: #A83E29 !important; -webkit-text-fill-color: #A83E29 !important; }

@keyframes qlmSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* No app image: a paper hero with a monogram tile, not a black block with a
   ghost letter. Everything on it flips to ink so it can be read. */
html body #quick-login-modal .qlm-art.is-blank { background-color: #F4F4F1 !important; background-image: linear-gradient(180deg, #F7F7F4 0%, #E9E9E4 100%) !important; }
html body #quick-login-modal .qlm-art.is-blank::after { background: none !important; }
html body #quick-login-modal .qlm-art.is-blank .qlm-art-initial {
    position: absolute !important; left: 50% !important; top: 50% !important; right: auto !important;
    transform: translate(-50%, -58%) !important; width: 96px !important; height: 96px !important; border-radius: 28px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    background: #111214 !important; box-shadow: 0 18px 32px -18px rgba(17, 18, 20, 0.6) !important;
    font-size: 40px !important; line-height: 1 !important; font-weight: 800 !important; letter-spacing: -0.02em !important;
    color: #FBFBF9 !important; -webkit-text-fill-color: #FBFBF9 !important; opacity: 1 !important;
}
html body #quick-login-modal .qlm-art.is-blank .qlm-close, html body #quick-login-modal .qlm-art.is-blank .qlm-bar-title { color: #63635F !important; -webkit-text-fill-color: #63635F !important; }
html body #quick-login-modal .qlm-art.is-blank .qlm-identity, html body #quick-login-modal .qlm-art.is-blank .qlm-identity-name { color: #111214 !important; -webkit-text-fill-color: #111214 !important; text-shadow: none !important; }
html body #quick-login-modal .qlm-art.is-blank .qlm-identity-role, html body #quick-login-modal .qlm-art.is-blank .qlm-identity-role span, html body #quick-login-modal .qlm-art.is-blank .qlm-identity-org, html body #quick-login-modal .qlm-art.is-blank .qlm-identity-org span, html body #quick-login-modal .qlm-art.is-blank .qlm-identity-place { color: #63635F !important; -webkit-text-fill-color: #63635F !important; text-shadow: none !important; }

html body #quick-login-modal .qlm-credentials-ready {
    display: inline-flex !important; align-items: center !important; gap: 8px !important;
    align-self: flex-start !important; width: fit-content !important;
    padding: 8px 12px !important; border-radius: 999px !important;
    background: #f0f0ed !important; color: #111214 !important;
    -webkit-text-fill-color: #111214 !important; font: 600 12px/1.2 system-ui,sans-serif !important;
}
html body #quick-login-modal .qlm-credentials-ready span {
    color: inherit !important; -webkit-text-fill-color: inherit !important;
}

.mobile-startup-splash {
    position: fixed;
    inset: 0 !important;
    z-index: 2147483647;
    display: flex;
    width: 100vw !important;
    height: 100dvh !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: #ffffff !important;
    background-image: radial-gradient(circle at 50% 44%, #ffffff 0%, #f5f5f7 100%) !important;
    box-shadow: none !important;
    opacity: 1;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: opacity;
}

/* The desktop phone preview contains fixed elements inside its screen.
   Viewport units would center the loader outside that clipped screen. */
@media (min-width: 900px) {
    html.nst-framed .nst-phone__screen .mobile-startup-splash {
        width: 100% !important;
        height: 100% !important;
    }
}

html:has(.mobile-startup-splash),
body:has(.mobile-startup-splash),
body.mobile-app-starting {
    overflow: hidden !important;
    background: #ffffff !important;
}

/*
 * The fixed splash already covers the shell. Keeping every sibling hidden can
 * leave Safari on a permanent blank/loading screen if startup JavaScript is
 * delayed, so let the shell render underneath the overlay.
 */

.mobile-startup-splash__orb,
.mobile-startup-splash__glow { position: absolute; border-radius: 50%; transform: translateZ(0); }
.mobile-startup-splash__orb--top { top: -250px; right: -250px; width: 500px; height: 500px; background: radial-gradient(circle, color-mix(in srgb, var(--splash-accent) 9%, transparent) 0%, transparent 70%); animation: splash-orb-float 8s ease-in-out infinite; }
.mobile-startup-splash__orb--bottom { bottom: -200px; left: -200px; width: 400px; height: 400px; background: radial-gradient(circle, color-mix(in srgb, var(--splash-accent) 12%, transparent) 0%, transparent 70%); animation: splash-orb-float 6s ease-in-out infinite reverse; }
.mobile-startup-splash__glow { width: 180px; height: 180px; background: radial-gradient(circle, color-mix(in srgb, var(--splash-primary) 30%, transparent) 0%, transparent 70%); animation: splash-glow-pulse 2s ease-in-out infinite; }
.mobile-startup-splash__logo { position: relative; width: 160px; height: 160px; margin-bottom: 32px; overflow: hidden; border-radius: 40px; box-shadow: 0 30px 80px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.1), inset 0 0 40px rgba(255,255,255,.05); animation: splash-logo-entrance .8s cubic-bezier(.34,1.56,.64,1); }
.mobile-startup-splash__logo img { width: 100%; height: 100%; object-fit: cover; filter: brightness(1.05) contrast(1.05); }
.mobile-startup-splash__title { position: relative; margin: 0 0 48px; padding: 0 20px; color: #111111; font-size: 36px; font-weight: 900; letter-spacing: -.5px; text-align: center; }
.mobile-startup-splash__loader { position: relative; width: 60px; height: 60px; }
.mobile-startup-splash__spinner { position: absolute; border: 3px solid transparent; border-radius: 50%; animation: splash-spin 1.2s cubic-bezier(.68,-.55,.265,1.55) infinite; }
.mobile-startup-splash__spinner--outer { inset: 0; border-top-color: #111111; border-right-color: rgba(17,17,17,.28); }
.mobile-startup-splash__spinner--inner { inset: 15%; border-bottom-color: color-mix(in srgb, var(--splash-accent) 60%, transparent); border-left-color: color-mix(in srgb, var(--splash-primary) 30%, transparent); animation-duration: 1s; animation-direction: reverse; }

@keyframes splash-logo-entrance { from { transform: scale(.92) translateY(12px); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes splash-text-rise { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes splash-spin { to { transform: rotate(360deg); } }
@keyframes splash-glow-pulse { 0%,100% { transform: scale(1); opacity: .3; } 50% { transform: scale(1.2); opacity: .5; } }
@keyframes splash-orb-float { 0%,100% { transform: translate(0) scale(1); } 50% { transform: translate(30px,30px) scale(1.1); } }
@supports not (height: 100dvh) { .mobile-startup-splash { height: 100vh !important; } }
@media (prefers-reduced-motion: reduce) { .mobile-startup-splash, .mobile-startup-splash * { animation: none !important; } }

/* The splash matches the app: Dark, Glass (the app photo blurred behind
   frosted glass), or the owner's page colour. Light stays as above. */
html[data-theme="dark"] .mobile-startup-splash,
html[data-theme="dark"] body.mobile-app-starting,
html[data-theme="dark"]:has(.mobile-startup-splash),
html[data-theme="dark"] body:has(.mobile-startup-splash) {
    background-color: #0b0b0c !important;
    background-image: radial-gradient(circle at 50% 44%, #1a1a1d 0%, #0b0b0c 100%) !important;
}
html[data-theme="dark"] .mobile-startup-splash__title { color: #ffffff; }
html[data-theme="dark"] .mobile-startup-splash__spinner--outer { border-top-color: #ffffff; border-right-color: rgba(255,255,255,.28); }

html[data-appearance="glass"] .mobile-startup-splash {
    background-color: #151517 !important;
    background-image: none !important;
}
html[data-appearance="glass"] .mobile-startup-splash::before {
    content: ""; position: absolute; inset: -40px;
    background: var(--splash-photo, none) center / cover no-repeat, #151517;
    filter: blur(34px) saturate(1.5) brightness(.62);
    transform: scale(1.1);
}
html[data-appearance="glass"] .mobile-startup-splash::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02) 45%, rgba(0,0,0,.25));
}
html[data-appearance="glass"] .mobile-startup-splash > * { z-index: 1; }
html[data-appearance="glass"] .mobile-startup-splash__logo {
    box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.35), inset 0 1px 0 rgba(255,255,255,.4);
}
html[data-appearance="glass"] .mobile-startup-splash__orb { display: none; }
html[data-appearance="glass"] .mobile-startup-splash__title { color: #ffffff; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
html[data-appearance="glass"] .mobile-startup-splash__spinner--outer { border-top-color: #ffffff; border-right-color: rgba(255,255,255,.3); }

.mobile-startup-splash.is-page-color {
    background-color: var(--splash-page) !important;
    background-image: radial-gradient(circle at 50% 44%, color-mix(in srgb, var(--splash-page) 88%, #ffffff) 0%, var(--splash-page) 100%) !important;
}
.mobile-startup-splash.is-page-color .mobile-startup-splash__title { color: var(--splash-ink); }
.mobile-startup-splash.is-page-color .mobile-startup-splash__spinner--outer { border-top-color: var(--splash-ink); border-right-color: color-mix(in srgb, var(--splash-ink) 28%, transparent); }

#stream-empty {
    display: none;
    text-align: center;
    padding: 48px 22px 56px;
    color: var(--text-secondary);
}

/* The placeholder is the empty state with the words taken out. Same 82px mark,
   same rhythm down the page, so when the answer arrives the layout settles
   instead of jumping -- and a fast reply reads as one steady screen rather
   than two. It centers on the visible strip rather than the viewport: the tab
   already pads 60px of header plus the top inset above this box, and the nav
   pill floats over the bottom, so only what is left is fair to center in --
   otherwise the mark sits low, pushed down by a header it cannot see. */
#stream-loading-skeleton {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    /* 60px header and the top inset are the parent's padding; 96px is the nav
       pill plus its bottom inset. 32px trims this box's own 16px gutters. */
    min-height: calc(100dvh - 60px - env(safe-area-inset-top, 0px) - 96px - env(safe-area-inset-bottom, 0px) - 32px);
    padding: 24px 22px;
    background: var(--background-color);
    text-align: center;
}

.mobile-stream-loading-mark {
    position: relative;
    width: 82px;
    height: 82px;
    margin: 0 auto 18px;
    border: 1px solid color-mix(in srgb, var(--text-primary, #111) 10%, var(--border-color, rgba(0, 0, 0, 0.08)) 90%);
    border-radius: 26px;
    background:
        radial-gradient(circle at 34% 26%, color-mix(in srgb, var(--text-primary, #111) 5%, transparent) 0 28%, transparent 48%),
        linear-gradient(145deg, color-mix(in srgb, var(--surface-color, #fff) 96%, var(--text-primary, #111) 4%), var(--surface-color, #fff));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

/* Two rings ripple outward from the tower, the way a signal would. The empty
   state draws these same rings holding still; here they carry the waiting. */
.mobile-stream-loading-mark::before,
.mobile-stream-loading-mark::after {
    content: "";
    position: absolute;
    border: 1px solid color-mix(in srgb, var(--text-primary, #111) 12%, transparent);
    border-radius: 999px;
    animation: mobile-stream-loading-ripple 2.4s cubic-bezier(0.33, 0, 0.2, 1) infinite;
}

.mobile-stream-loading-mark::before {
    inset: 29px;
}

.mobile-stream-loading-mark::after {
    inset: 29px;
    animation-delay: 1.2s;
}

@keyframes mobile-stream-loading-ripple {
    0% { inset: 29px; opacity: 0; }
    18% { opacity: 0.58; }
    100% { inset: 8px; opacity: 0; }
}

.mobile-stream-loading-mark i {
    position: relative;
    z-index: 1;
    font-size: 24px;
    color: var(--text-primary, #111);
    -webkit-text-fill-color: var(--text-primary, #111);
    animation: mobile-stream-loading-pulse 2.4s ease-in-out infinite;
}

@keyframes mobile-stream-loading-pulse {
    0%, 100% { opacity: 0.45; }
    18% { opacity: 1; }
}

.mobile-stream-loading-title {
    max-width: 330px;
    margin: 0 auto 6px;
    color: var(--text-primary, var(--text-color));
    font-size: 21px;
    font-weight: 840;
    letter-spacing: 0;
    line-height: 1.18;
}

.mobile-stream-loading-copy {
    max-width: 315px;
    margin: 0 auto;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 650;
    line-height: 1.55;
    opacity: 0.82;
}

@media (prefers-reduced-motion: reduce) {
    .mobile-stream-loading-mark::before,
    .mobile-stream-loading-mark::after,
    .mobile-stream-loading-mark i {
        animation: none;
    }
    .mobile-stream-loading-mark::before { inset: 18px; opacity: 0.58; }
    .mobile-stream-loading-mark::after { inset: 29px; opacity: 0.58; }
    .mobile-stream-loading-mark i { opacity: 1; }
}

.mobile-stream-empty-mark {
    position: relative;
    width: 82px;
    height: 82px;
    margin: 0 auto 18px;
    border: 1px solid color-mix(in srgb, var(--text-primary, #111) 10%, var(--border-color, rgba(0, 0, 0, 0.08)) 90%);
    border-radius: 26px;
    background:
        radial-gradient(circle at 34% 26%, color-mix(in srgb, var(--text-primary, #111) 5%, transparent) 0 28%, transparent 48%),
        linear-gradient(145deg, color-mix(in srgb, var(--surface-color, #fff) 96%, var(--text-primary, #111) 4%), var(--surface-color, #fff));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.mobile-stream-empty-mark::before,
.mobile-stream-empty-mark::after {
    content: "";
    position: absolute;
    border: 1px solid color-mix(in srgb, var(--text-primary, #111) 12%, transparent);
    border-radius: 999px;
    opacity: 0.58;
}

.mobile-stream-empty-mark::before {
    inset: 18px;
}

.mobile-stream-empty-mark::after {
    inset: 29px;
}

.mobile-stream-empty-mark i {
    position: relative;
    z-index: 1;
    font-size: 24px;
    color: var(--text-primary, #111);
    -webkit-text-fill-color: var(--text-primary, #111);
}

.mobile-stream-empty-title {
    max-width: 330px;
    margin: 0 auto 6px;
    color: var(--text-primary, var(--text-color));
    font-size: 21px;
    font-weight: 840;
    letter-spacing: 0;
    line-height: 1.18;
}

.mobile-stream-empty-copy {
    max-width: 315px;
    margin: 0 auto;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 650;
    line-height: 1.55;
    opacity: 0.82;
}

.mobile-stream-empty-go-live {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    margin: 20px auto 0;
    padding: 0 24px;
    border: 1px solid color-mix(in srgb, var(--text-primary, #111) 14%, var(--border-color, transparent));
    border-radius: 999px;
    background: var(--surface-color, #fff);
    color: var(--text-primary, var(--text-color));
    -webkit-text-fill-color: var(--text-primary, var(--text-color));
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.1);
    font-size: 15px;
    font-weight: 900;
    cursor: pointer;
}

.mobile-stream-empty-go-live i,
.mobile-stream-empty-go-live span {
    color: currentColor;
    -webkit-text-fill-color: currentColor;
}

.mobile-stream-empty-go-live:disabled,
.mobile-stream-empty-form button:disabled {
    opacity: 0.72;
}

.mobile-stream-empty-note {
    display: none;
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.35;
    opacity: 0.62;
}

.mobile-stream-empty-signup {
    display: none;
    width: min(100%, 340px);
    margin: 14px auto 0;
}

.mobile-stream-empty-signup-note {
    margin-bottom: 12px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 780;
    line-height: 1.4;
}

.mobile-stream-empty-form {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 54px;
    padding: 5px;
    border: 1px solid color-mix(in srgb, var(--text-primary, #111) 12%, var(--border-color) 88%);
    border-radius: 22px;
    background: var(--surface-color, #fff);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

.mobile-stream-empty-form input {
    min-width: 0;
    flex: 1;
    height: 44px;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
    padding: 0 13px;
    font-size: 13px;
    font-weight: 720;
    outline: none;
    box-sizing: border-box;
}

.mobile-stream-empty-form input::placeholder {
    color: var(--text-secondary);
    -webkit-text-fill-color: var(--text-secondary);
    opacity: 0.72;
}

.mobile-stream-empty-form button {
    flex: 0 0 auto;
    height: 44px;
    border: 1px solid color-mix(in srgb, var(--text-primary, #111) 12%, var(--border-color, transparent));
    border-radius: 17px;
    background: color-mix(in srgb, var(--text-primary, #111) 4%, var(--surface-color, #fff) 96%);
    color: var(--text-primary, var(--text-color));
    -webkit-text-fill-color: var(--text-primary, var(--text-color));
    padding: 0 15px;
    font-size: 12px;
    font-weight: 880;
}

.mobile-stream-empty-status {
    min-height: 16px;
    margin-top: 9px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 760;
}

/* Stream Live empty state. The dark broadcast card borrows the signal-first
   hierarchy of the design reference while every control maps to a stream
   source the app can actually publish. */
#stream-empty {
    box-sizing: border-box;
    width: 100%;
    padding: 14px 2px 118px;
    text-align: left;
}

.mobile-stream-empty-hero {
    position: relative;
    overflow: hidden;
    padding: 17px 16px 16px;
    border: 1px solid #292a2e;
    border-radius: 22px;
    background: #111214;
    background-size: cover;
    background-position: center 30%;
    box-shadow: 0 18px 38px -24px rgba(17, 18, 20, 0.75);
    color: #fbfbf9;
}

/* Full-bleed when there's a real photo: the app's own picture is the point,
   so it runs edge to edge behind the header (hidden via body.stream-empty-
   fullbleed, same pattern as the Season Builder detail screen) instead of
   sitting boxed inside a small rounded card. */
/* The header stays (hamburger + bell) but paints no bar: its white fill is
   written inline with !important by applyHeaderTheme in mobile-app-header.js,
   which has a matching stream-empty-fullbleed branch that clears it and turns
   the glyphs white. Only the pseudo layers can be cleared from here. */
html body.stream-active.stream-empty-fullbleed #mobile-app-header::before,
html body.stream-active.stream-empty-fullbleed #mobile-app-header::after {
    background: none !important;
}
/* The stream container keeps 16px side padding and a white fill; on a 3x
   phone the hero's edges rounded a hairline short of the screen and that
   white showed through. Drop the padding and paint the wrappers dark so no
   rounding can show a light edge. */
html body.stream-active.stream-empty-fullbleed #stream-main-area,
html body.stream-active.stream-empty-fullbleed #stream-main-area > .stream-container {
    background: #111214 !important;
}
html body.stream-active.stream-empty-fullbleed #stream-main-area > .stream-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* The stream area reserves the header's height as padding-top (an inline
   html body #stream-main-area rule in mobile.html). With the header gone that
   reservation is just a blank band above the photo, so drop it here too. */
html body.stream-active.stream-empty-fullbleed #stream-main-area {
    padding-top: 0 !important;
}
html body.stream-active.stream-empty-fullbleed #stream-empty {
    padding: 0 !important;
}
/* This screen is the photo and nothing else: no email collect under it, no
   container padding beneath, so a guest has nothing to scroll to. Owners keep
   the Stream-from sources section, which is what can still extend the page. */
html body #stream-empty > .mobile-stream-empty-signup {
    display: none !important;
}
html body.stream-active.stream-empty-fullbleed #stream-main-area > .stream-container {
    padding-bottom: 0 !important;
}
html body.stream-active.stream-empty-fullbleed #stream-main-area {
    overflow: hidden !important;
}
html body.stream-active.stream-empty-fullbleed .mobile-stream-empty-hero:is(.has-photo, .is-owner-golive) {
    position: relative;
    left: 0;
    width: 100%;
    margin-left: 0;
    min-height: 100dvh;
    /* Bottom padding clears the fixed Collect Trading Card / chat dock
       (54px tall, 16px off the bottom) with room to spare, so the title and
       copy never sit underneath it. */
    padding: calc(24px + env(safe-area-inset-top, 0px)) 22px calc(140px + env(safe-area-inset-bottom, 0px));
    border: 0;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.mobile-stream-empty-kicker {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #8b8b85;
    -webkit-text-fill-color: #8b8b85;
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.mobile-stream-empty-signal {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    /* Grey: this kicker only shows when nothing is live. */
    background: #8b8b85;
    box-shadow: 0 0 0 4px rgba(139, 139, 133, 0.12);
}
/* A scheduled stream is a promise, not an absence: the dot goes live-green. */
.mobile-stream-empty-hero.is-upcoming .mobile-stream-empty-signal {
    background: #6fe3c6;
    box-shadow: 0 0 0 4px rgba(111, 227, 198, 0.14);
}

.mobile-stream-empty-wave {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 54px;
    margin: 15px 0 17px;
    opacity: 0.95;
}

.mobile-stream-empty-wave span {
    width: 100%;
    min-width: 2px;
    border-radius: 2px;
    background: #2a2b2e;
    transform-origin: bottom center;
    animation: mobile-stream-empty-wave-pulse 1.8s ease-in-out infinite;
}

.mobile-stream-empty-wave span:nth-child(6n + 1) { --wave-h: 24%; background: #6fe3c6; animation-delay: 0ms; }
.mobile-stream-empty-wave span:nth-child(6n + 2) { --wave-h: 48%; animation-delay: 90ms; }
.mobile-stream-empty-wave span:nth-child(6n + 3) { --wave-h: 72%; animation-delay: 180ms; }
.mobile-stream-empty-wave span:nth-child(6n + 4) { --wave-h: 38%; animation-delay: 270ms; }
.mobile-stream-empty-wave span:nth-child(6n + 5) { --wave-h: 88%; animation-delay: 360ms; }
.mobile-stream-empty-wave span:nth-child(6n) { --wave-h: 58%; animation-delay: 450ms; }

@keyframes mobile-stream-empty-wave-pulse {
    0%, 100% { height: calc(var(--wave-h) * 0.55); opacity: 0.65; }
    50% { height: var(--wave-h); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-stream-empty-wave span { animation: none; height: var(--wave-h); }
}

.mobile-stream-empty-hero .mobile-stream-empty-title {
    max-width: none;
    margin: 0;
    color: #fbfbf9;
    -webkit-text-fill-color: #fbfbf9;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.2;
    text-align: left;
}

.mobile-stream-empty-hero .mobile-stream-empty-copy {
    max-width: 340px;
    margin: 7px 0 0;
    color: #b9b9b3;
    -webkit-text-fill-color: #b9b9b3;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.5;
    opacity: 1;
    text-align: left;
}

/* mobile.html still contains broad, late-loading light-theme color rules.
   Keep those from washing out this intentionally dark card. */
#stream-main-area #stream-empty .mobile-stream-empty-hero,
#stream-main-area #stream-empty .mobile-stream-empty-hero .mobile-stream-empty-title {
    color: #fbfbf9 !important;
    -webkit-text-fill-color: #fbfbf9 !important;
}

#stream-main-area #stream-empty .mobile-stream-empty-hero .mobile-stream-empty-kicker,
#stream-main-area #stream-empty .mobile-stream-empty-hero .mobile-stream-empty-kicker span:not(.mobile-stream-empty-signal) {
    color: #8b8b85 !important;
    -webkit-text-fill-color: #8b8b85 !important;
}

#stream-main-area #stream-empty .mobile-stream-empty-hero .mobile-stream-empty-copy {
    color: #b9b9b3 !important;
    -webkit-text-fill-color: #b9b9b3 !important;
}

#stream-main-area #stream-empty .mobile-stream-empty-owner-actions .mobile-stream-empty-secondary,
#stream-main-area #stream-empty .mobile-stream-empty-owner-actions .mobile-stream-empty-secondary * {
    color: #fbfbf9 !important;
    -webkit-text-fill-color: #fbfbf9 !important;
}

.mobile-stream-empty-owner-actions {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin-top: 16px;
}

.mobile-stream-empty-owner-actions button {
    min-width: 0;
    height: 48px;
    margin: 0;
    padding: 0 12px;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.11em;
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
}

.mobile-stream-empty-owner-actions button i { font-size: 12px; }

.mobile-stream-empty-secondary {
    border: 1px solid #34353a;
    background: transparent;
    color: #fbfbf9;
    -webkit-text-fill-color: #fbfbf9;
}

.mobile-stream-empty-owner-sources { margin-top: 22px; }

.mobile-stream-empty-owner-sources h4 {
    margin: 0 4px 10px;
    color: var(--text-secondary);
    -webkit-text-fill-color: var(--text-secondary);
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.mobile-stream-empty-source-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.mobile-stream-empty-source-grid button {
    min-width: 0;
    min-height: 88px;
    padding: 12px;
    border: 1px solid var(--border-color, #eaeae6);
    border-radius: 16px;
    background: var(--surface-color, #fff);
    box-shadow: 0 1px 2px rgba(17, 18, 20, 0.03);
    color: var(--text-primary, var(--text-color));
    -webkit-text-fill-color: var(--text-primary, var(--text-color));
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
    cursor: pointer;
}

.mobile-stream-empty-source-grid button > span:last-of-type {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mobile-stream-empty-source-grid strong {
    color: var(--text-primary, var(--text-color));
    -webkit-text-fill-color: var(--text-primary, var(--text-color));
    font-size: 13px;
    font-weight: 780;
    letter-spacing: -0.02em;
}

.mobile-stream-empty-source-grid small {
    overflow: hidden;
    color: var(--text-secondary);
    -webkit-text-fill-color: var(--text-secondary);
    font-size: 10.5px;
    font-weight: 560;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-stream-source-icon {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    -webkit-text-fill-color: #fff;
    font-size: 13px;
}

.mobile-stream-source-icon svg {
    width: 17px;
    height: 17px;
    display: block;
    fill: #fff;
}

.mobile-stream-source-icon--twitch { background: #7c4de0; }
.mobile-stream-source-icon--youtube { background: #d92b1f; }
.mobile-stream-source-icon--kick { background: #53fc19; color: #111214; -webkit-text-fill-color: #111214; }
.mobile-stream-source-icon--kick svg { fill: #111214; }
.mobile-stream-source-icon--other { background: #2563eb; }

#stream-empty > .mobile-stream-empty-signup {
    width: min(100%, 360px);
    margin: 18px auto 0;
}

#stream-empty > .mobile-stream-empty-signup .mobile-stream-empty-signup-note {
    margin-bottom: 9px;
    text-align: center;
}

@media (max-width: 350px) {
    .mobile-stream-empty-owner-actions { grid-template-columns: 1fr; }
    .mobile-stream-empty-source-grid { grid-template-columns: 1fr; }
}

#stream-empty-state .mobile-stream-empty-signup {
    width: min(100%, 300px);
    margin-top: 0;
}

.mobile-stream-waitlist-summary {
    margin: -4px 0 12px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 720;
    line-height: 1.4;
}

.mobile-stream-waitlist-list {
    display: grid;
    gap: 8px;
}

.mobile-stream-waitlist-empty {
    padding: 14px;
    border: 1px dashed var(--border-color);
    border-radius: 16px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 720;
    line-height: 1.4;
}

.mobile-stream-waitlist-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    border-radius: 15px;
    background: color-mix(in srgb, var(--surface-color, transparent) 82%, transparent);
}

.mobile-stream-waitlist-row a {
    min-width: 0;
    overflow: hidden;
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
    font-size: 12px;
    font-weight: 840;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
}

.mobile-stream-waitlist-row span {
    flex: 0 0 auto;
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 780;
}

/* ------------------------------------------------------------------------
   Owner placeholder: the stream pass Go Live screen, on the owner's own tab.
   Same photo, same brand block, same red pulsing button (mobile-stream-add-
   composer.css draws it for the pass link; this is that look on the tab
   itself). The guest kicker/wave/title are hidden while it is up.
   ------------------------------------------------------------------------ */
html body.stream-active.stream-empty-fullbleed .mobile-stream-empty-hero.is-owner-golive {
    justify-content: space-between;
    align-items: center;
    text-align: center;
    background-color: #0A0A0C;
    padding: calc(28px + env(safe-area-inset-top, 0px)) 24px calc(18px + var(--mobile-bottom-nav-height, calc(58px + env(safe-area-inset-bottom, 0px))));
}
.mobile-stream-empty-hero.is-owner-golive > :not(.mobile-stream-empty-golive) {
    display: none !important;
}
#stream-main-area #stream-empty .mobile-stream-empty-hero.is-owner-golive .mobile-stream-empty-golive {
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 100%;
}
#stream-main-area #stream-empty .mobile-stream-empty-golive-brand { margin-top: 34px; text-align: center; }
#stream-main-area #stream-empty .mobile-stream-empty-golive-eyebrow {
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}
#stream-main-area #stream-empty .mobile-stream-empty-golive-tagline {
    margin-top: 8px;
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.72) !important;
}
#stream-main-area #stream-empty .mobile-stream-empty-golive-action {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
/* Two rings, offset in time, expanding out from the button and fading. */
#stream-main-area #stream-empty .mobile-stream-empty-golive-action::before,
#stream-main-area #stream-empty .mobile-stream-empty-golive-action::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 168px;
    height: 168px;
    margin-left: -84px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 122, 105, 0.8);
    pointer-events: none;
    animation: mobile-stream-empty-golive-ring 2.6s cubic-bezier(.16, .84, .32, 1) infinite;
}
#stream-main-area #stream-empty .mobile-stream-empty-golive-action::after { animation-delay: 1.3s; }
@keyframes mobile-stream-empty-golive-ring {
    0% { transform: scale(0.94); opacity: 0.55; }
    70% { opacity: 0.12; }
    100% { transform: scale(1.5); opacity: 0; }
}
#stream-main-area #stream-empty .mobile-stream-empty-golive-btn,
#stream-main-area #stream-empty .mobile-stream-empty-golive-btn * {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}
#stream-main-area #stream-empty .mobile-stream-empty-golive-btn {
    position: relative;
    width: 168px;
    height: 168px;
    margin: 0;
    padding: 0;
    border: 0 !important;
    border-radius: 50% !important;
    background:
        radial-gradient(circle at 38% 30%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 32%),
        radial-gradient(circle at 50% 46%, #FF6A5A 0%, #EE2E1E 55%, #B4140C 100%) !important;
    box-shadow:
        inset 0 2px 3px rgba(255, 255, 255, 0.45),
        inset 0 -10px 18px rgba(0, 0, 0, 0.28),
        0 0 34px 4px rgba(233, 39, 27, 0.55),
        0 20px 44px -16px rgba(0, 0, 0, 0.75) !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transform-origin: 50% 50%;
    animation: mobile-stream-empty-golive-pulse 2.6s cubic-bezier(.45, 0, .2, 1) infinite;
}
#stream-main-area #stream-empty .mobile-stream-empty-golive-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.5);
    pointer-events: none;
}
#stream-main-area #stream-empty .mobile-stream-empty-golive-btn i {
    position: relative;
    font-size: 29px !important;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
}
#stream-main-area #stream-empty .mobile-stream-empty-golive-btn span {
    position: relative;
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
@keyframes mobile-stream-empty-golive-pulse {
    0%, 100% { transform: scale(1); box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.45), inset 0 -10px 18px rgba(0, 0, 0, 0.28), 0 0 34px 4px rgba(233, 39, 27, 0.55), 0 20px 44px -16px rgba(0, 0, 0, 0.75); }
    45% { transform: scale(1.045); box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.45), inset 0 -10px 18px rgba(0, 0, 0, 0.28), 0 0 52px 10px rgba(233, 39, 27, 0.75), 0 20px 44px -16px rgba(0, 0, 0, 0.75); }
    70% { transform: scale(1.015); }
}
@media (prefers-reduced-motion: reduce) {
    #stream-main-area #stream-empty .mobile-stream-empty-golive-btn { animation: none; }
    #stream-main-area #stream-empty .mobile-stream-empty-golive-action::before,
    #stream-main-area #stream-empty .mobile-stream-empty-golive-action::after { animation: none; display: none; }
}
/* The owner's own scheduled game, under the button: "Up next" and the label. */
#stream-main-area #stream-empty .mobile-stream-empty-golive-next {
    max-width: 300px;
    text-align: center;
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.85) !important;
}
#stream-main-area #stream-empty .mobile-stream-empty-golive-next b {
    display: block;
    font-weight: 700 !important;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: 9px !important;
    color: #6fe3c6 !important;
    -webkit-text-fill-color: #6fe3c6 !important;
}
#stream-main-area #stream-empty .mobile-stream-empty-golive-foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
#stream-main-area #stream-empty .mobile-stream-empty-golive-as {
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: center;
    color: rgba(255, 255, 255, 0.65) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.65) !important;
}

/* Starting: the button holds still, the stages draw underneath in white on
   the dark photo (the composer's light version lives in add-composer.css). */
#stream-main-area #stream-empty .mobile-stream-empty-golive-btn.is-busy { animation: none; opacity: 0.85; transform: none; }
#stream-main-area #stream-empty .mobile-stream-empty-golive-status {
    max-width: 300px;
    text-align: center;
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important;
    font-size: 11px !important;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.85) !important;
}
#stream-main-area #stream-empty .mobile-stream-empty-golive-status .stream-start-heading {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    font-size: 13px !important; font-weight: 700 !important; color: #fff !important; -webkit-text-fill-color: #fff !important;
}
#stream-main-area #stream-empty .mobile-stream-empty-golive-status .stream-start-heading::before {
    content: ''; width: 14px; height: 14px; flex: 0 0 14px; border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.25); border-top-color: #6fe3c6;
    animation: mobile-stream-empty-golive-spin 1s linear infinite;
}
@keyframes mobile-stream-empty-golive-spin { to { transform: rotate(360deg); } }
#stream-main-area #stream-empty .mobile-stream-empty-golive-status .stream-start-steps { display: flex; gap: 8px; width: 240px; margin: 14px auto 10px; }
#stream-main-area #stream-empty .mobile-stream-empty-golive-status .stream-start-steps span {
    flex: 1; border-top: 3px solid rgba(255, 255, 255, 0.22); padding-top: 7px;
    font-size: 9px !important; font-weight: 600 !important; letter-spacing: 0.12em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.5) !important;
}
#stream-main-area #stream-empty .mobile-stream-empty-golive-status .stream-start-steps .is-done { border-color: #6fe3c6; color: #6fe3c6 !important; -webkit-text-fill-color: #6fe3c6 !important; }
#stream-main-area #stream-empty .mobile-stream-empty-golive-status .stream-start-steps .is-current { border-color: #fff; color: #fff !important; -webkit-text-fill-color: #fff !important; }
#stream-main-area #stream-empty .mobile-stream-empty-golive-status .stream-start-hint { font-size: 10.5px !important; color: rgba(255, 255, 255, 0.7) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.7) !important; }
#stream-main-area #stream-empty .mobile-stream-empty-golive-status[role="alert"] { color: #ffb4a8 !important; -webkit-text-fill-color: #ffb4a8 !important; }
@media (prefers-reduced-motion: reduce) { #stream-main-area #stream-empty .mobile-stream-empty-golive-status .stream-start-heading::before { animation: none; } }

/* ------------------------------------------------------------------------
   Guest, nothing live: the shared empty guide (empty-state.js, surface dark)
   centred on a full-height dark stage, the app's photo dimmed behind it when
   there is one. The old kicker/wave/title/copy step aside.
   ------------------------------------------------------------------------ */
html body.stream-active.stream-empty-fullbleed .mobile-stream-empty-hero.is-guest-es {
    position: relative;
    left: 0;
    width: 100%;
    margin-left: 0;
    min-height: 100dvh;
    padding: calc(var(--mobile-app-header-height, 100px) + 8px) 20px calc(120px + env(safe-area-inset-bottom, 0px));
    border: 0;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #0a0a0c;
    background-size: cover;
    background-position: center;
}
html body .mobile-stream-empty-hero.is-guest-es:not(.has-photo) {
    background-image: radial-gradient(120% 60% at 50% 38%, rgba(124, 92, 255, 0.22), transparent 62%),
        radial-gradient(90% 50% at 50% 70%, rgba(255, 106, 61, 0.14), transparent 70%) !important;
}
html body .mobile-stream-empty-hero.is-guest-es > :not(.mobile-stream-empty-es) {
    display: none !important;
}
html body .mobile-stream-empty-hero.is-guest-es > .mobile-stream-empty-es {
    width: 100%;
}
/* No email signups in placeholders: notifications is the follow-up. */
html body #stream-drawer-empty-signup { display: none !important; }

/* Meme Streamer (memes2apps apps): the same Go Live screen in lime with dark
   type. Athlete Streamer and every other site keep the red above. */
#stream-main-area #stream-empty [data-stream-brand="meme"] .mobile-stream-empty-golive-action::before,
#stream-main-area #stream-empty [data-stream-brand="meme"] .mobile-stream-empty-golive-action::after {
    border-color: rgba(216, 255, 53, 0.8);
}
#stream-main-area #stream-empty [data-stream-brand="meme"] .mobile-stream-empty-golive-btn {
    background:
        radial-gradient(circle at 38% 30%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 32%),
        radial-gradient(circle at 50% 46%, #E8FF7A 0%, #C6F432 55%, #7FA300 100%) !important;
    box-shadow:
        inset 0 2px 3px rgba(255, 255, 255, 0.5),
        inset 0 -10px 18px rgba(0, 0, 0, 0.2),
        0 0 34px 4px rgba(198, 244, 50, 0.5),
        0 20px 44px -16px rgba(0, 0, 0, 0.75) !important;
    animation-name: mobile-stream-empty-golive-pulse-meme;
}
#stream-main-area #stream-empty [data-stream-brand="meme"] .mobile-stream-empty-golive-btn,
#stream-main-area #stream-empty [data-stream-brand="meme"] .mobile-stream-empty-golive-btn * {
    color: #0B0B0C !important;
    -webkit-text-fill-color: #0B0B0C !important;
    text-shadow: none;
}
@keyframes mobile-stream-empty-golive-pulse-meme {
    0%, 100% { transform: scale(1); box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.5), inset 0 -10px 18px rgba(0, 0, 0, 0.2), 0 0 34px 4px rgba(198, 244, 50, 0.5), 0 20px 44px -16px rgba(0, 0, 0, 0.75); }
    45% { transform: scale(1.045); box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.5), inset 0 -10px 18px rgba(0, 0, 0, 0.2), 0 0 52px 10px rgba(198, 244, 50, 0.7), 0 20px 44px -16px rgba(0, 0, 0, 0.75); }
    70% { transform: scale(1.015); }
}

/* Mobile Stream library: the same schedule and replay data as desktop. Its
 * colors follow the active app theme, including while a stream is playing. */

.mss, .mss-player {
    --mss-ink: #111114;
    --mss-dim: rgba(17, 17, 20, 0.58);
    --mss-faint: rgba(17, 17, 20, 0.38);
    --mss-card: #ffffff;
    --mss-soft: rgba(17, 17, 20, 0.05);
    --mss-line: rgba(17, 17, 20, 0.09);
    --mss-shadow: 0 1px 2px rgba(17, 17, 20, 0.05), 0 8px 24px rgba(17, 17, 20, 0.07);
    --mss-thumb: #1b1b1f;
    --mss-fun-a: #ff6a3d;
    --mss-fun-b: #7c5cff;
    --mss-live: #ff3b30;
    --mss-blur: none;
}
[data-theme="dark"] .mss,
[data-theme="dark-accent"] .mss {
    --mss-ink: #f5f5f7;
    --mss-dim: rgba(245, 245, 247, 0.62);
    --mss-faint: rgba(245, 245, 247, 0.4);
    --mss-card: #1b1b1f;
    --mss-soft: rgba(255, 255, 255, 0.06);
    --mss-line: rgba(255, 255, 255, 0.1);
    --mss-shadow: none;
    --mss-thumb: #26262b;
}
[data-page-color] .mss {
    --mss-ink: var(--pc-ink);
    --mss-dim: var(--pc-dim);
    --mss-faint: var(--pc-faint, var(--pc-dim));
    --mss-card: var(--pc-card);
    --mss-soft: var(--pc-soft);
    --mss-line: var(--pc-line);
    --mss-shadow: none;
}
html[data-appearance="glass"] .mss {
    --mss-ink: #ffffff;
    --mss-dim: rgba(255, 255, 255, 0.72);
    --mss-faint: rgba(255, 255, 255, 0.5);
    --mss-card: var(--gl-fill, rgba(255, 255, 255, 0.14));
    --mss-soft: rgba(255, 255, 255, 0.1);
    --mss-line: var(--gl-rim, rgba(255, 255, 255, 0.3));
    --mss-shadow: var(--gl-shadow, none);
    --mss-thumb: rgba(0, 0, 0, 0.35);
    --mss-blur: var(--gl-blur, blur(22px) saturate(170%));
}

/* ------------------------------------------------------------ layout */

html body #stream-guest-shelf.mss {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 560px !important;
    margin: 0 auto !important;
    padding: 20px 0 calc(120px + env(safe-area-inset-bottom, 0px)) !important;
    background: transparent !important;
}
html body #mobile-stream-feed .stream-feed-card > .mss-feed.mss {
    box-sizing: border-box !important;
    display: block !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto;
    padding: 14px 16px calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    background: var(--background-color, #fff) !important;
    color: var(--mss-ink) !important;
    border-top: 1px solid var(--mss-line) !important;
}
html[data-appearance="glass"] body #mobile-stream-feed .stream-feed-card > .mss-feed.mss {
    background: var(--gl-fill, rgba(255, 255, 255, .14)) !important;
    backdrop-filter: var(--gl-blur, blur(22px) saturate(170%));
}
html body #mobile-stream-feed .stream-feed-card > .mss-feed.mss[hidden] { display: none !important; }

/* Keep each live stream as exactly one snap page. The library occupies the
   lower part of that page; chat is a separate button and sheet. */
html body.stream-active #mobile-stream-feed > .stream-feed-card:not(.native-immersive-card) {
    overflow: hidden !important;
    padding-bottom: 0 !important;
}
html body.stream-active #mobile-stream-feed > .stream-feed-card:not(.native-immersive-card) > .stream-feed-player {
    flex: 0 0 clamp(210px, 34dvh, 360px) !important;
    height: clamp(210px, 34dvh, 360px) !important;
    min-height: 0 !important;
}
html body.stream-active #mobile-stream-feed > .stream-feed-card:not(.native-immersive-card) > .stream-feed-metadata {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 10px 16px !important;
    background: var(--background-color, #fff) !important;
    color: var(--text-primary) !important;
}
html body.stream-active #mobile-stream-feed .stream-feed-metadata .stream-feed-meta-top {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}
html body.stream-active #mobile-stream-feed .stream-feed-metadata .stream-feed-title {
    display: none;
}
html body.stream-active #mobile-stream-feed .stream-feed-metadata .stream-feed-avatar {
    width: 36px; height: 36px; border-radius: 10px;
}
html body.stream-active #mobile-stream-feed .stream-feed-metadata .stream-feed-platform {
    margin-top: 2px;
}
/* One clear cue between the player and its schedule, only when streams stack. */
html body.stream-active #mobile-stream-feed .stream-feed-navigation {
    box-sizing: border-box;
    flex: 0 0 auto;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 16px;
    background: var(--background-color, #fff);
    border-top: 1px solid var(--mss-line, rgba(0,0,0,.1));
    color: var(--text-primary, #111);
}
html body.stream-active #mobile-stream-feed .stream-feed-navigation-count {
    display: grid;
    gap: 2px;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 600;
}
html body.stream-active #mobile-stream-feed .stream-feed-navigation-count strong { font-weight: 800; }
html body.stream-active #mobile-stream-feed .stream-feed-navigation-count small { font-size: 11px; opacity: .65; }
html body.stream-active #mobile-stream-feed .stream-feed-navigation-actions { display: flex; gap: 7px; }
html body.stream-active #mobile-stream-feed .stream-feed-navigation-actions button {
    min-width: 38px;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 12px;
    font-weight: 750;
    white-space: nowrap;
    cursor: pointer;
}
html body.stream-active #mobile-stream-feed .stream-feed-navigation-actions button i { margin-left: 5px; }
html body.stream-active #mobile-stream-feed .stream-feed-navigation-actions button:not(.stream-feed-navigation-next) i { margin: 0; }
html body #mobile-stream-feed button.stream-fullscreen-trigger {
    flex: 0 0 40px;
    width: 40px !important; height: 40px !important;
    display: grid !important; place-items: center;
    padding: 0 !important;
    border-radius: 12px !important;
    border: 1px solid var(--mss-line, rgba(0, 0, 0, .12)) !important;
    background: var(--mss-card, #fff) !important;
    color: var(--mss-ink, #111) !important;
    -webkit-text-fill-color: var(--mss-ink, #111) !important;
}
html body #mobile-stream-feed button.stream-fullscreen-trigger i { color: inherit !important; -webkit-text-fill-color: inherit !important; }
html body #mobile-stream-feed .stream-feed-meta-actions { display: flex; align-items: center; flex: 0 0 auto; gap: 6px; }
html body #mobile-stream-feed .stream-feed-meta-actions button[data-stream-collect-action],
html body #mobile-stream-feed .stream-feed-meta-actions button[data-stream-chat-action] {
    position: relative; flex: 0 0 40px; width: 40px !important; height: 40px !important;
    display: grid; place-items: center; padding: 0 !important;
    border-radius: 12px !important; border: 1px solid var(--mss-line, rgba(0,0,0,.12)) !important;
    background: var(--mss-card, #fff) !important; color: var(--mss-ink, #111) !important;
    -webkit-text-fill-color: var(--mss-ink, #111) !important;
}
html body #mobile-stream-feed .stream-feed-meta-actions button[hidden],
html body #mobile-stream-feed .native-live-tools button[hidden] { display: none !important; }
html body #mobile-stream-feed .stream-feed-meta-actions .stream-chat-unread,
html body #mobile-stream-feed .native-live-tools .stream-chat-unread {
    position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 3px;
    border-radius: 999px; background: #e53935; color: #fff !important; -webkit-text-fill-color: #fff !important;
    font-size: 10px; line-height: 17px; text-align: center;
}
html body #mobile-stream-feed .stream-feed-meta-actions .stream-chat-unread[hidden],
html body #mobile-stream-feed .native-live-tools .stream-chat-unread[hidden] { display: none !important; }
html body #mobile-stream-feed .stream-player-fullscreen-exit { display: none !important; }
html body #mobile-stream-feed .stream-feed-player:is(:fullscreen, .is-mobile-fullscreen) .stream-player-fullscreen-exit,
html body #mobile-stream-feed .stream-feed-card.is-mobile-fullscreen .stream-player-fullscreen-exit {
    display: grid !important; place-items: center;
    position: absolute !important; top: calc(env(safe-area-inset-top, 0px) + 14px); right: 14px;
    z-index: 12; width: 44px !important; height: 44px !important; padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, .35) !important; border-radius: 12px !important;
    background: rgba(0, 0, 0, .6) !important; color: #fff !important; -webkit-text-fill-color: #fff !important;
    backdrop-filter: blur(12px);
}
html body #mobile-stream-feed .stream-player-fullscreen-exit i { color: inherit !important; -webkit-text-fill-color: inherit !important; }
/* Fullscreen is a safe-area stage around a correctly proportioned video.
   Filling the iframe itself to 100dvh cropped YouTube's 16:9 preview on phones. */
html body #mobile-stream-feed .stream-feed-player:fullscreen,
html body.mobile-stream-fullscreen #mobile-stream-feed > .stream-feed-card.is-mobile-fullscreen > .stream-feed-player {
    --stream-fs-top: max(env(safe-area-inset-top, 0px), 48px);
    --stream-fs-bottom: max(env(safe-area-inset-bottom, 0px), 20px);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    padding: var(--stream-fs-top) env(safe-area-inset-right, 0px) var(--stream-fs-bottom) env(safe-area-inset-left, 0px) !important;
    background: #000 !important;
    border: 0 !important;
}
html body #mobile-stream-feed .stream-feed-player:fullscreen > iframe,
html body.mobile-stream-fullscreen #mobile-stream-feed > .stream-feed-card.is-mobile-fullscreen > .stream-feed-player > iframe {
    position: relative !important;
    flex: 0 0 auto !important;
    display: block !important;
    width: min(100%, calc((100dvh - 80px) * 16 / 9)) !important;
    height: auto !important;
    max-height: calc(100dvh - var(--stream-fs-top) - var(--stream-fs-bottom)) !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
    border: 0 !important;
    border-radius: 0 !important;
}
html body #mobile-stream-feed .stream-feed-player:fullscreen > :is(video, .mobile-live-recording-wrap),
html body.mobile-stream-fullscreen #mobile-stream-feed > .stream-feed-card.is-mobile-fullscreen > .stream-feed-player > :is(video, .mobile-live-recording-wrap) {
    width: 100% !important;
    height: 100% !important;
    max-height: calc(100dvh - var(--stream-fs-top) - var(--stream-fs-bottom)) !important;
    object-fit: contain !important;
}
html body #mobile-stream-feed .stream-feed-player:fullscreen .stream-player-fullscreen-exit,
html body.mobile-stream-fullscreen #mobile-stream-feed > .stream-feed-card.is-mobile-fullscreen .stream-player-fullscreen-exit {
    top: calc(var(--stream-fs-top) + 8px) !important;
    right: calc(env(safe-area-inset-right, 0px) + 14px) !important;
}
html body.mobile-stream-fullscreen #mobile-stream-feed > .stream-feed-card.is-mobile-fullscreen { overflow: visible !important; }
html body.mobile-stream-fullscreen #mobile-stream-feed > .stream-feed-card.is-mobile-fullscreen > .stream-feed-player {
    position: fixed !important; inset: 0 !important; z-index: 100100 !important;
    width: 100vw !important; height: 100dvh !important; max-height: none !important; min-height: 0 !important;
    background: #000 !important;
}
html body.mobile-stream-fullscreen #mobile-app-header,
html body.mobile-stream-fullscreen #bottom-nav { visibility: hidden !important; }
html body.stream-active #mobile-stream-feed .native-immersive-card > .mss-feed.mss {
    position: absolute !important;
    z-index: 5;
    top: calc(env(safe-area-inset-top, 0px) + 62px);
    right: 10px; bottom: calc(env(safe-area-inset-bottom, 0px) + 90px); left: 10px;
    flex: none !important;
    border: 1px solid var(--mss-line) !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .2);
}
html body.stream-active #mobile-stream-feed .native-immersive-card > .mss-feed.mss[hidden] { display: none !important; }
html body.stream-active #mobile-stream-feed .native-immersive-card.stream-library-open .native-live-tools { z-index: 6; }
html body.stream-active #mobile-stream-feed .native-immersive-card .stream-library-trigger[aria-expanded="true"] { background: #fff !important; color: #111 !important; -webkit-text-fill-color: #111 !important; }

html body .mss.mss * { box-sizing: border-box; }
html body .mss.mss [hidden] { display: none !important; }

/* The same Schedule / Replays library as the desktop Stream page, stacked
   below the player on phones. */
html body .mss.mss .mss-tabs { display: grid !important; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0 0 22px !important; padding: 4px !important; border: 1px solid var(--mss-line) !important; border-radius: 14px !important; background: var(--mss-soft) !important; }
html body .mss.mss .mss-tabs button { min-width: 0; min-height: 43px; border: 0 !important; border-radius: 10px !important; background: transparent !important; color: var(--mss-dim) !important; -webkit-text-fill-color: var(--mss-dim) !important; font: 800 13px/1.2 var(--font-family, Manrope), sans-serif !important; cursor: pointer; }
html body .mss.mss .mss-tabs button[aria-selected="true"] { background: var(--mss-card) !important; color: var(--mss-ink) !important; -webkit-text-fill-color: var(--mss-ink) !important; box-shadow: var(--mss-shadow) !important; }
html body .mss.mss .mss-tabs button span { opacity: .65; font-size: 11px; }
html body .mss.mss .mss-schedule__head { display: flex !important; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 18px !important; }
html body .mss.mss .mss-schedule__head h3 { margin: 0 0 3px !important; color: var(--mss-ink) !important; -webkit-text-fill-color: var(--mss-ink) !important; font: 800 17px/1.15 var(--font-family, Manrope), sans-serif !important; white-space: nowrap; }
html body .mss.mss .mss-schedule__head span { color: var(--mss-dim) !important; -webkit-text-fill-color: var(--mss-dim) !important; font: 700 10px/1.2 var(--font-family, Manrope), sans-serif !important; letter-spacing: .12em; text-transform: uppercase; }
html body .mss.mss .mss-date-picker { position: relative; flex: none; display: grid; place-items: center; min-height: 37px; padding: 0 12px !important; border: 1px solid var(--mss-line) !important; border-radius: 9px !important; color: var(--mss-ink) !important; -webkit-text-fill-color: var(--mss-ink) !important; font: 700 12px var(--font-family, Manrope), sans-serif !important; overflow: hidden; }
html body .mss.mss .mss-date-picker input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
html body .mss.mss .mss-weekbar { display: flex !important; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px !important; color: var(--mss-ink) !important; }
html body .mss.mss .mss-weekbar strong { font: 800 13px var(--font-family, Manrope), sans-serif !important; text-transform: uppercase; letter-spacing: .06em; }
html body .mss.mss .mss-weekbar button { width: 35px; height: 35px; border: 1px solid var(--mss-line) !important; border-radius: 9px !important; background: var(--mss-card) !important; color: var(--mss-ink) !important; -webkit-text-fill-color: var(--mss-ink) !important; font: 700 25px/1 var(--font-family, Manrope), sans-serif !important; }
html body .mss.mss .mss-days { display: grid !important; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 18px !important; }
html body .mss.mss .mss-day { display: flex !important; flex-direction: column; align-items: center; gap: 3px; min-width: 0; min-height: 58px; padding: 8px 2px !important; border: 1px solid var(--mss-line) !important; border-radius: 10px !important; background: var(--mss-card) !important; color: var(--mss-dim) !important; -webkit-text-fill-color: var(--mss-dim) !important; font-family: var(--font-family, Manrope), sans-serif !important; }
html body .mss.mss .mss-day.is-active { background: var(--mss-ink) !important; color: var(--mss-card) !important; -webkit-text-fill-color: var(--mss-card) !important; }
html body .mss.mss .mss-day.is-active :is(span, strong, i) { color: var(--mss-card) !important; -webkit-text-fill-color: var(--mss-card) !important; }
html body .mss.mss .mss-day span { font-size: 10px; font-weight: 700; }
html body .mss.mss .mss-day strong { font-size: 17px; line-height: 1; }
html body .mss.mss .mss-day i { width: 4px; height: 4px; border-radius: 50%; background: currentColor !important; }
html body .mss.mss .mss-sponsor { display: flex !important; align-items: center; gap: 10px; min-width: 0; margin: 0 0 20px !important; padding: 10px !important; border: 1px solid var(--mss-line) !important; border-radius: 12px !important; background: var(--mss-card) !important; }
html body .mss.mss .mss-sponsor__art { display: grid !important; place-items: center; flex: 0 0 72px; width: 72px; height: 58px; padding: 4px; border-radius: 8px; background: #fff !important; color: #111 !important; overflow: hidden; }
html body .mss.mss .mss-sponsor__art img { display: block; width: 100% !important; height: 100% !important; object-fit: contain !important; }
html body .mss.mss .mss-sponsor__copy { display: flex !important; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; color: var(--mss-ink) !important; }
html body .mss.mss .mss-sponsor__copy .mss-sponsor__eyebrow { font-size: 9px; font-weight: 800; letter-spacing: .1em; color: var(--mss-dim) !important; }
html body .mss.mss .mss-sponsor__copy strong { font-size: 13px; }
html body .mss.mss .mss-sponsor__copy > span:last-child { font-size: 10px; line-height: 1.25; color: var(--mss-dim) !important; }
html body .mss.mss .mss-sponsor__actions { display: flex !important; flex-direction: column; gap: 5px; flex: 0 0 auto; }
html body .mss.mss :is(.mss-sponsor__link, .mss-sponsor__manage) { display: grid !important; place-items: center; min-height: 30px; padding: 0 8px !important; border: 1px solid var(--mss-line) !important; border-radius: 7px !important; background: var(--mss-soft) !important; color: var(--mss-ink) !important; -webkit-text-fill-color: var(--mss-ink) !important; font: 750 10px var(--font-family, Manrope), sans-serif !important; text-decoration: none; white-space: nowrap; }
html body .mss.mss .mss-game-list h4 { margin: 0 0 4px !important; color: var(--mss-dim) !important; -webkit-text-fill-color: var(--mss-dim) !important; font: 800 10px var(--font-family, Manrope), sans-serif !important; letter-spacing: .1em; text-transform: uppercase; }
html body .mss.mss .mss-game { display: grid !important; grid-template-columns: 76px 46px minmax(0, 1fr); gap: 10px; align-items: center; padding: 13px 0 !important; border-bottom: 1px solid var(--mss-line) !important; }
html body .mss.mss .mss-game__thumb { display: grid; place-items: center; width: 46px; height: 46px; overflow: hidden; border: 1px solid var(--mss-line); border-radius: 9px; background: var(--mss-soft); color: var(--mss-ink); }
html body .mss.mss .mss-game__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
html body .mss.mss .mss-game__thumb [hidden] { display: none !important; }
html body .mss.mss .mss-game time { color: var(--mss-ink) !important; -webkit-text-fill-color: var(--mss-ink) !important; font: 800 13px var(--font-family, Manrope), sans-serif !important; }
html body .mss.mss .mss-game time small { display: block; color: var(--mss-dim) !important; font-size: 10px; }
html body .mss.mss .mss-game div { display: flex !important; flex-direction: column; gap: 3px; min-width: 0; }
html body .mss.mss .mss-game strong { color: var(--mss-ink) !important; -webkit-text-fill-color: var(--mss-ink) !important; font-size: 13px; }
html body .mss.mss .mss-game span, html body .mss.mss .mss-game div small { color: var(--mss-dim) !important; -webkit-text-fill-color: var(--mss-dim) !important; font-size: 11px; line-height: 1.25; }
html body .mss.mss .mss-no-games { padding: 22px 2px !important; color: var(--mss-dim) !important; -webkit-text-fill-color: var(--mss-dim) !important; font: 500 13px/1.4 var(--font-family, Manrope), sans-serif !important; }

html body .mss.mss .mss-feed-lead {
    display: flex !important; align-items: center; justify-content: center; gap: 8px;
    margin: 0 0 18px !important;
    font: 600 12px/1.2 system-ui, -apple-system, sans-serif !important;
    letter-spacing: .02em;
    color: var(--mss-faint) !important; -webkit-text-fill-color: var(--mss-faint) !important;
}
html body .mss.mss .mss-feed-lead i { color: var(--mss-faint) !important; -webkit-text-fill-color: var(--mss-faint) !important; }

/* "Nothing live right now": one quiet line, not a card. */
html body .mss.mss .mss-offline {
    display: flex !important; align-items: center; gap: 10px;
    margin: 0 0 22px !important; padding: 0 2px !important;
    font: 600 13px/1.2 system-ui, -apple-system, sans-serif !important;
    color: var(--mss-dim) !important; -webkit-text-fill-color: var(--mss-dim) !important;
}
html body .mss.mss .mss-offline span { color: inherit !important; -webkit-text-fill-color: inherit !important; }
html body .mss.mss .mss-offline__dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--mss-faint) !important;
    box-shadow: 0 0 0 4px var(--mss-soft);
}

html body .mss.mss .mss-sec { margin: 0 0 28px !important; }
html body .mss.mss .mss-head {
    display: flex !important; align-items: baseline; gap: 8px;
    margin: 0 0 12px !important; padding: 0 2px !important;
}
html body .mss.mss .mss-h {
    margin: 0 !important;
    font: 800 22px/1.1 system-ui, -apple-system, sans-serif !important;
    letter-spacing: -0.02em;
    color: var(--mss-ink) !important; -webkit-text-fill-color: var(--mss-ink) !important;
}
html body .mss.mss .mss-count {
    font: 700 13px/1 system-ui, -apple-system, sans-serif !important;
    color: var(--mss-faint) !important; -webkit-text-fill-color: var(--mss-faint) !important;
}

/* ------------------------------------------------------------ Coming up */

html body .mss.mss .mss-up {
    position: relative; overflow: hidden;
    display: flex !important; gap: 16px; align-items: stretch;
    padding: 16px !important;
    border-radius: 22px !important;
    background: var(--mss-card) !important;
    border: 1px solid var(--mss-line) !important;
    box-shadow: var(--mss-shadow) !important;
    -webkit-backdrop-filter: var(--mss-blur); backdrop-filter: var(--mss-blur);
}
html body .mss.mss .mss-up::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--mss-fun-a) 16%, transparent), transparent 60%),
                radial-gradient(100% 90% at 100% 100%, color-mix(in srgb, var(--mss-fun-b) 14%, transparent), transparent 60%);
}
html body .mss.mss .mss-up__date {
    position: relative; flex: 0 0 64px;
    display: flex !important; flex-direction: column; align-items: center; justify-content: center;
    border-radius: 16px !important;
    background: linear-gradient(150deg, var(--mss-fun-a), var(--mss-fun-b)) !important;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--mss-fun-b) 30%, transparent);
}
html body .mss.mss .mss-up__mon {
    font: 800 11px/1 system-ui, -apple-system, sans-serif !important; letter-spacing: .12em;
    color: rgba(255, 255, 255, .85) !important; -webkit-text-fill-color: rgba(255, 255, 255, .85) !important;
}
html body .mss.mss .mss-up__day {
    margin-top: 3px;
    font: 800 28px/1 system-ui, -apple-system, sans-serif !important; letter-spacing: -0.03em;
    color: #fff !important; -webkit-text-fill-color: #fff !important;
}
html body .mss.mss .mss-up__body { position: relative; min-width: 0; flex: 1 1 auto; }
html body .mss.mss .mss-up__pill {
    display: inline-flex !important; align-items: center; gap: 6px;
    padding: 4px 9px !important; border-radius: 999px !important;
    background: color-mix(in srgb, var(--mss-live) 12%, transparent) !important;
    font: 800 10.5px/1.2 system-ui, -apple-system, sans-serif !important; letter-spacing: .06em; text-transform: uppercase;
    color: var(--mss-live) !important; -webkit-text-fill-color: var(--mss-live) !important;
}
html[data-appearance="glass"] body .mss.mss .mss-up__pill,
[data-theme="dark"] .mss.mss .mss-up__pill,
.mss.mss.is-in-feed .mss-up__pill {
    color: #ff6b61 !important; -webkit-text-fill-color: #ff6b61 !important;
}
html body .mss.mss .mss-up__dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor !important;
    animation: mss-pulse 1.6s ease-in-out infinite;
}
@keyframes mss-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
html body .mss.mss .mss-up__title {
    margin: 8px 0 6px !important;
    font: 750 17px/1.25 system-ui, -apple-system, sans-serif !important; letter-spacing: -0.01em;
    overflow-wrap: anywhere;
    color: var(--mss-ink) !important; -webkit-text-fill-color: var(--mss-ink) !important;
}
html body .mss.mss :is(.mss-up__when, .mss-up__where) {
    display: flex !important; align-items: baseline; gap: 7px;
    margin-top: 3px !important;
    font: 500 13.5px/1.35 system-ui, -apple-system, sans-serif !important;
    color: var(--mss-dim) !important; -webkit-text-fill-color: var(--mss-dim) !important;
}
html body .mss.mss :is(.mss-up__when, .mss-up__where) span { color: inherit !important; -webkit-text-fill-color: inherit !important; min-width: 0; overflow-wrap: anywhere; }
html body .mss.mss :is(.mss-up__when, .mss-up__where) i {
    width: 13px; flex: 0 0 13px; text-align: center; font-size: 12px !important;
    color: var(--mss-faint) !important; -webkit-text-fill-color: var(--mss-faint) !important;
}

/* ------------------------------------------------------------ replays */

html body .mss.mss .mss-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 18px 12px;
}
html body .mss.mss button.mss-rp {
    display: flex !important; flex-direction: column; align-items: stretch; gap: 8px;
    min-width: 0; width: 100% !important; height: auto !important;
    margin: 0 !important; padding: 0 !important;
    border: 0 !important; border-radius: 0 !important;
    background: transparent !important; box-shadow: none !important;
    text-align: left !important; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .16s ease;
}
html body .mss.mss button.mss-rp:active { transform: scale(.975); }
html body .mss.mss button.mss-rp.is-lead { grid-column: 1 / -1; }
html body .mss.mss .mss-rp__thumb {
    position: relative; display: block !important; overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: 14px !important;
    background: var(--mss-thumb) !important;
    border: 1px solid var(--mss-line) !important;
}
html body .mss.mss .is-lead .mss-rp__thumb { border-radius: 20px !important; }
html body .mss.mss .mss-rp__thumb img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
html body .mss.mss .mss-rp__ph {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    font-size: 18px !important;
    color: rgba(255, 255, 255, .35) !important; -webkit-text-fill-color: rgba(255, 255, 255, .35) !important;
}
html body .mss.mss .mss-rp__play {
    position: absolute; left: 10px; bottom: 10px;
    display: flex !important; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50% !important;
    background: rgba(255, 255, 255, .94) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
}
html body .mss.mss .is-lead .mss-rp__play { width: 48px; height: 48px; left: 14px; bottom: 14px; }
html body .mss.mss .mss-rp__play i {
    margin-left: 2px; font-size: 11px !important;
    color: #111114 !important; -webkit-text-fill-color: #111114 !important;
}
html body .mss.mss .is-lead .mss-rp__play i { font-size: 16px !important; margin-left: 3px; }
html body .mss.mss .mss-rp__len {
    position: absolute; right: 8px; bottom: 8px;
    padding: 3px 6px !important; border-radius: 6px !important;
    background: rgba(0, 0, 0, .72) !important;
    font: 700 11px/1.2 ui-monospace, "SF Mono", Menlo, monospace !important; font-variant-numeric: tabular-nums;
    color: #fff !important; -webkit-text-fill-color: #fff !important;
}
html body .mss.mss .mss-rp__tag {
    position: absolute; left: 8px; top: 8px;
    display: inline-flex !important; align-items: center; gap: 5px;
    padding: 4px 7px !important; border-radius: 999px !important;
    background: rgba(0, 0, 0, .6) !important;
    font: 700 10.5px/1.2 system-ui, -apple-system, sans-serif !important;
    color: #fff !important; -webkit-text-fill-color: #fff !important;
}
html body .mss.mss .mss-rp__tag i { font-size: 9px !important; color: #fff !important; -webkit-text-fill-color: #fff !important; }
html body .mss.mss .mss-rp__cap { display: flex !important; flex-direction: column; gap: 3px; min-width: 0; padding: 0 2px !important; }
html body .mss.mss .mss-rp__title {
    display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font: 700 14px/1.3 system-ui, -apple-system, sans-serif !important;
    color: var(--mss-ink) !important; -webkit-text-fill-color: var(--mss-ink) !important;
}
html body .mss.mss .is-lead .mss-rp__title { font-size: 17px !important; letter-spacing: -0.01em; }
html body .mss.mss .mss-rp__meta {
    font: 500 12.5px/1.3 system-ui, -apple-system, sans-serif !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: var(--mss-dim) !important; -webkit-text-fill-color: var(--mss-dim) !important;
}

html body .mss.mss button.mss-more {
    display: flex !important; align-items: center; justify-content: center; gap: 8px;
    width: 100% !important; height: 46px !important;
    margin: 18px 0 0 !important; padding: 0 16px !important;
    border-radius: 999px !important;
    border: 1px solid var(--mss-line) !important;
    background: var(--mss-soft) !important; box-shadow: none !important;
    -webkit-backdrop-filter: var(--mss-blur); backdrop-filter: var(--mss-blur);
    font: 700 14px/1 system-ui, -apple-system, sans-serif !important;
    color: var(--mss-ink) !important; -webkit-text-fill-color: var(--mss-ink) !important;
}
html body .mss.mss button.mss-more span {
    padding: 3px 7px !important; border-radius: 999px !important;
    background: var(--mss-line) !important;
    font-size: 12px !important;
    color: var(--mss-dim) !important; -webkit-text-fill-color: var(--mss-dim) !important;
}

/* ------------------------------------------------------------ player */

html.mss-player-open, html.mss-player-open body { overflow: hidden !important; }
html body #stream-replay-player.mss-player {
    position: fixed !important; inset: 0 !important;
    z-index: 2147483000 !important;
    display: flex !important; flex-direction: column;
    background: #000 !important;
    opacity: 0; transform: translateY(24px);
    transition: opacity .2s ease, transform .22s cubic-bezier(.2, .8, .2, 1);
}
html body #stream-replay-player.mss-player.is-open { opacity: 1; transform: none; }
html body #stream-replay-player .mss-player__bar {
    position: relative; z-index: 2;
    display: flex !important; align-items: center; gap: 12px;
    padding: calc(env(safe-area-inset-top, 0px) + 10px) 14px 12px !important;
    background: #000 !important;
}
html body #stream-replay-player button.mss-player__close {
    flex: 0 0 40px; width: 40px !important; height: 40px !important;
    display: flex !important; align-items: center; justify-content: center;
    margin: 0 !important; padding: 0 !important;
    border: 0 !important; border-radius: 50% !important;
    background: rgba(255, 255, 255, .14) !important; box-shadow: none !important;
    cursor: pointer;
}
html body #stream-replay-player button.mss-player__close i {
    font-size: 18px !important;
    color: #fff !important; -webkit-text-fill-color: #fff !important;
}
html body #stream-replay-player .mss-player__text { min-width: 0; flex: 1 1 auto; }
html body #stream-replay-player .mss-player__title {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font: 700 15px/1.3 system-ui, -apple-system, sans-serif !important;
    color: #fff !important; -webkit-text-fill-color: #fff !important;
}
html body #stream-replay-player .mss-player__meta {
    display: flex !important; align-items: center; gap: 7px; margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font: 500 12.5px/1.3 system-ui, -apple-system, sans-serif !important;
    color: rgba(255, 255, 255, .62) !important; -webkit-text-fill-color: rgba(255, 255, 255, .62) !important;
}
html body #stream-replay-player .mss-player__badge {
    padding: 2px 6px !important; border-radius: 5px !important;
    background: linear-gradient(135deg, #ff6a3d, #7c5cff) !important;
    font: 800 10px/1.3 system-ui, -apple-system, sans-serif !important; letter-spacing: .06em; text-transform: uppercase;
    color: #fff !important; -webkit-text-fill-color: #fff !important;
}
html body #stream-replay-player .mss-player__stage {
    position: relative; flex: 1 1 auto; min-height: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    background: #000 !important;
}
html body #stream-replay-player .mss-player__stage iframe {
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
    background: #000;
}

.native-stream-card-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 0; }
.native-stream-card-controls span { flex: 1; font-size: 12px; }
.native-stream-card-controls button { padding: 10px; border: 1px solid #ddd; border-radius: 10px; background: #fff; color: #111 !important; -webkit-text-fill-color: #111 !important; }