/* Community home is a reading surface, not a stack of nested cards. */
    html body.community-active #community-main-area {
        --community-feed-ink: #0b0b0d;
        --community-feed-muted: rgba(11, 11, 13, 0.50);
        --community-feed-faint: rgba(11, 11, 13, 0.34);
    }

    html[data-theme^="dark"] body.community-active #community-main-area,
    body[data-theme^="dark"].community-active #community-main-area {
        --community-feed-ink: #f7f7f8;
        --community-feed-muted: rgba(247, 247, 248, 0.58);
        --community-feed-faint: rgba(247, 247, 248, 0.38);
    }

    html body.community-active #arena-grid {
        --community-feed-ink: #0b0b0d;
        --community-feed-muted: rgba(11, 11, 13, 0.50);
        --community-feed-faint: rgba(11, 11, 13, 0.34);
        background: #ffffff !important;
        padding-top: 4px !important;
    }

    html[data-theme^="dark"] body.community-active #arena-grid,
    body[data-theme^="dark"].community-active #arena-grid {
        --community-feed-ink: #f7f7f8;
        --community-feed-muted: rgba(247, 247, 248, 0.58);
        --community-feed-faint: rgba(247, 247, 248, 0.38);
        background: #050506 !important;
    }

    html body.community-active #community-feed-shell {
        gap: 0 !important;
    }

    /* Keep the feed tabs on the same left rail as compose, rooms, and posts. */
    /* Latest / Media is off the community home: the row sat between the header
       and the first post, pushing the feed down so two words you rarely acted
       on read as chrome in the way. Hidden, not deleted — the buttons,
       setCommunityFeedMode() and the media filter all still work, so bringing
       it back is this one line. */
    html body.community-active #community-feed-modes.community-feed-modes {
        width: 100% !important;
        margin: 0 0 6px !important;
        padding: 0 20px !important;
        display: none !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 22px !important;
        box-sizing: border-box !important;
    }

    html body.community-active #community-feed-modes.community-feed-modes > button {
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        text-indent: 0 !important;
        font-weight: 540 !important;
    }

    html body.community-active #community-feed-modes.community-feed-modes > button.is-active {
        font-weight: 650 !important;
    }

    html body.community-active .community-quick-compose {
        width: 100% !important;
        margin: 8px 0 0 !important;
        padding: 0 20px !important;
        box-sizing: border-box !important;
    }

    html body.community-active .community-quick-compose-shell {
        width: 100% !important;
        min-height: 56px !important;
        margin: 0 !important;
        padding: 8px 10px !important;
        display: grid !important;
        grid-template-columns: 38px minmax(0, 1fr) 34px 34px !important;
        column-gap: 4px !important;
        align-items: center !important;
        border: 1px solid rgba(11, 11, 13, 0.075) !important;
        border-radius: 18px !important;
        outline: 0 !important;
        background: #ffffff !important;
        color: var(--community-feed-ink) !important;
        box-shadow: 0 5px 18px rgba(11, 11, 13, 0.035) !important;
        text-align: left !important;
    }

    html[data-theme^="dark"] body.community-active .community-quick-compose-shell,
    body[data-theme^="dark"].community-active .community-quick-compose-shell {
        border-color: rgba(247, 247, 248, 0.10) !important;
        background: rgba(247, 247, 248, 0.055) !important;
        box-shadow: none !important;
    }

    html body.community-active .community-quick-compose-avatar {
        width: 38px !important;
        height: 38px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        border: 0 !important;
        border-radius: 13px !important;
        background: rgba(11, 11, 13, 0.055) !important;
        color: var(--community-feed-muted) !important;
        font-size: 12px !important;
        font-weight: 760 !important;
    }

    html body.community-active .community-quick-compose-avatar img {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        object-fit: cover !important;
        object-position: center top !important;
    }

    html body.community-active .community-quick-compose-input,
    html[data-theme] body.community-active #community-main-area #community-quick-compose-input[type="text"] {
        width: 100% !important;
        min-width: 0 !important;
        height: 38px !important;
        margin: 0 !important;
        padding: 0 2px !important;
        border: 0 !important;
        border-radius: 0 !important;
        outline: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        color: var(--community-feed-muted) !important;
        -webkit-text-fill-color: currentColor !important;
        box-shadow: none !important;
        font-size: 14px !important;
        line-height: 1.25 !important;
        font-weight: 520 !important;
    }

    html body.community-active .community-quick-compose-input:focus,
    html[data-theme] body.community-active #community-main-area #community-quick-compose-input[type="text"]:focus {
        color: var(--community-feed-ink) !important;
        -webkit-text-fill-color: currentColor !important;
    }

    html body.community-active .community-quick-compose-input::placeholder,
    html[data-theme] body.community-active #community-main-area #community-quick-compose-input[type="text"]::placeholder {
        color: var(--community-feed-muted) !important;
        -webkit-text-fill-color: var(--community-feed-muted) !important;
        opacity: 1 !important;
    }

    html body.community-active .community-quick-compose-media {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 0 !important;
        border-radius: 999px !important;
        outline: 0 !important;
        background: transparent !important;
        color: var(--community-feed-ink) !important;
        -webkit-text-fill-color: currentColor !important;
        box-shadow: none !important;
        font-size: 15px !important;
    }

    html body.community-active .community-quick-compose-media.has-media {
        position: relative !important;
        background: transparent !important;
        color: var(--community-feed-ink) !important;
        -webkit-text-fill-color: currentColor !important;
    }

    html body.community-active .community-quick-compose-media.has-media::after {
        content: "" !important;
        position: absolute !important;
        top: 4px !important;
        right: 3px !important;
        width: 6px !important;
        height: 6px !important;
        border: 2px solid #ffffff !important;
        border-radius: 999px !important;
        background: var(--community-feed-ink) !important;
    }

    html body.community-active .community-quick-compose-send {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 0 !important;
        border-radius: 999px !important;
        outline: 0 !important;
        background: transparent !important;
        color: var(--community-feed-ink) !important;
        -webkit-text-fill-color: currentColor !important;
        box-shadow: none !important;
        font-size: 15px !important;
    }

    html body.community-active .community-quick-compose-send:disabled {
        opacity: 0.42 !important;
    }

    html body.community-active #community-room-rail.community-room-rail {
        width: 100% !important;
        margin: 0 !important;
        padding: 10px 20px 12px !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        box-sizing: border-box !important;
        scroll-padding-inline: 20px !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }

    html body.community-active #community-room-rail.community-room-rail[hidden] {
        display: none !important;
    }

    html body.community-active #community-room-rail.community-room-rail::-webkit-scrollbar {
        display: none !important;
    }

    html body.community-active #community-room-rail .community-room-card,
    html body.community-active #community-room-rail .community-room-card.is-all {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 156px !important;
        height: 36px !important;
        min-height: 36px !important;
        margin: 0 !important;
        padding: 0 15px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1px solid rgba(11, 11, 13, 0.10) !important;
        border-radius: 999px !important;
        background: #ffffff !important;
        background-color: #ffffff !important;
        background-image: none !important;
        color: #343438 !important;
        -webkit-text-fill-color: currentColor !important;
        box-shadow: none !important;
    }

    html body.community-active #community-room-rail .community-room-card.is-active {
        border-color: var(--community-feed-ink) !important;
        background: var(--community-feed-ink) !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        box-shadow: none !important;
    }

    html[data-theme^="dark"] body.community-active #community-room-rail .community-room-card,
    body[data-theme^="dark"].community-active #community-room-rail .community-room-card {
        border-color: rgba(247, 247, 248, 0.16) !important;
        background: transparent !important;
        background-color: transparent !important;
        color: rgba(247, 247, 248, 0.72) !important;
    }

    html[data-theme^="dark"] body.community-active #community-room-rail .community-room-card.is-active,
    body[data-theme^="dark"].community-active #community-room-rail .community-room-card.is-active {
        border-color: #f7f7f8 !important;
        background: #f7f7f8 !important;
        color: #09090b !important;
        -webkit-text-fill-color: #09090b !important;
    }

    html body.community-active #community-room-rail .community-room-kicker,
    html body.community-active #community-room-rail .community-room-preview,
    html body.community-active #community-room-rail .community-room-count {
        display: none !important;
    }

    html body.community-active #community-room-rail .community-room-title,
    html body.community-active #community-room-rail .community-room-card.is-all .community-room-title {
        max-width: 126px !important;
        margin: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        color: currentColor !important;
        -webkit-text-fill-color: currentColor !important;
        font-size: 12px !important;
        line-height: 1 !important;
        font-weight: 520 !important;
        letter-spacing: -0.005em !important;
        text-transform: none !important;
    }

    html body.community-active #community-room-rail .community-room-card::before,
    html body.community-active #community-room-rail .community-room-card::after {
        content: none !important;
        display: none !important;
        background: none !important;
        box-shadow: none !important;
    }

    html body.community-active #arena-grid .bloc-card.mobile-community-card,
    html body.community-active #arena-grid .mobile-community-card.community-feed-hero,
    html body.community-active #arena-grid .mobile-community-card.community-feed-media,
    html body.community-active #arena-grid .mobile-community-card.community-feed-note,
    html body.community-active #arena-grid .mobile-community-card.community-feed-essay,
    html body.community-active #arena-grid .mobile-community-card.signal-short,
    html body.community-active #arena-grid .mobile-community-card.signal-medium,
    html body.community-active #arena-grid .mobile-community-card.signal-long {
        display: grid !important;
        grid-template-columns: 36px minmax(0, 1fr) !important;
        column-gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 18px 20px 16px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    html body.community-active #arena-grid .bloc-card.mobile-community-card + .bloc-card.mobile-community-card {
        margin-top: 0 !important;
        border-top: 1px solid rgba(9, 9, 11, 0.08) !important;
    }

    html body.community-active #arena-grid .bloc-card.mobile-community-card::before,
    html body.community-active #arena-grid .bloc-card.mobile-community-card::after {
        content: none !important;
        display: none !important;
    }

    html body.community-active #arena-grid .mobile-community-card-meta-wrap {
        display: contents !important;
    }

    html body.community-active #arena-grid .bloc-card.mobile-community-card .mobile-community-meta-row {
        grid-column: 1 / -1 !important;
        display: grid !important;
        grid-template-columns: 36px minmax(0, 1fr) auto !important;
        grid-template-rows: 17px 15px !important;
        column-gap: 12px !important;
        row-gap: 1px !important;
        min-height: 36px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: start !important;
    }

    html body.community-active #arena-grid .bloc-card.mobile-community-card .profile-avatar,
    html body.community-active #arena-grid .bloc-card.mobile-community-card .mobile-community-meta-row .profile-avatar {
        grid-column: 1 !important;
        grid-row: 1 / span 2 !important;
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 50% !important;
        background: rgba(11, 11, 13, 0.035) !important;
        box-shadow: none !important;
    }

    html[data-theme^="dark"] body.community-active #arena-grid .bloc-card.mobile-community-card .profile-avatar,
    body[data-theme^="dark"].community-active #arena-grid .bloc-card.mobile-community-card .profile-avatar {
        background: rgba(247, 247, 248, 0.08) !important;
    }

    html body.community-active #arena-grid .bloc-card.mobile-community-card .profile-avatar img,
    html body.community-active #arena-grid .bloc-card.mobile-community-card .mobile-community-meta-row .profile-avatar img {
        border-radius: 50% !important;
    }

    html body.community-active #arena-grid .bloc-card.mobile-community-card .mobile-community-author {
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: end !important;
        color: var(--community-feed-ink) !important;
        -webkit-text-fill-color: var(--community-feed-ink) !important;
        font-size: 13px !important;
        line-height: 1.15 !important;
        font-weight: 620 !important;
        letter-spacing: -0.005em !important;
    }

    html body.community-active #arena-grid .bloc-card.mobile-community-card .mobile-community-timestamp {
        grid-column: 2 !important;
        grid-row: 2 !important;
        align-self: start !important;
        max-width: 150px !important;
        color: var(--community-feed-muted) !important;
        -webkit-text-fill-color: var(--community-feed-muted) !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
        font-weight: 430 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
    }

    html body.community-active #arena-grid .mobile-community-room-source.mobile-community-room-source--meta {
        grid-column: 3 !important;
        grid-row: 1 / span 2 !important;
        align-self: center !important;
        justify-self: end !important;
        width: auto !important;
        max-width: 104px !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 5px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: var(--community-feed-faint) !important;
        -webkit-text-fill-color: currentColor !important;
        box-shadow: none !important;
        font-size: 9px !important;
        line-height: 1.15 !important;
        font-weight: 520 !important;
        letter-spacing: 0.07em !important;
        text-transform: uppercase !important;
    }

    html body.community-active #arena-grid .mobile-community-rebyte-meta {
        grid-column: 2 / -1 !important;
        justify-self: start !important;
        width: auto !important;
        max-width: 100% !important;
        min-height: 0 !important;
        margin: 0 0 9px !important;
        padding: 0 !important;
        gap: 5px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: var(--community-feed-faint) !important;
        -webkit-text-fill-color: currentColor !important;
        box-shadow: none !important;
        font-size: 9px !important;
        line-height: 1.2 !important;
        font-weight: 500 !important;
        letter-spacing: 0.06em !important;
        text-transform: uppercase !important;
    }

    html body.community-active #arena-grid .bloc-card.mobile-community-card .mobile-community-message {
        grid-column: 2 !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 10px 0 11px !important;
        padding: 0 !important;
        display: block !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html body.community-active #arena-grid .bloc-card.mobile-community-card .mobile-community-message p,
    html body.community-active #arena-grid .bloc-card.mobile-community-card.signal-short .mobile-community-message p,
    html body.community-active #arena-grid .bloc-card.mobile-community-card.signal-medium .mobile-community-message p,
    html body.community-active #arena-grid .bloc-card.mobile-community-card.signal-long .mobile-community-message p,
    html body.community-active #arena-grid .bloc-card.mobile-community-card.has-community-media .mobile-community-message p {
        margin: 0 !important;
        padding: 0 !important;
        color: var(--community-feed-ink) !important;
        -webkit-text-fill-color: var(--community-feed-ink) !important;
        font-size: clamp(14px, 3.5vw, 15px) !important;
        line-height: 1.4 !important;
        font-weight: 400 !important;
        letter-spacing: 0 !important;
        text-align: left !important;
        white-space: pre-wrap !important;
        overflow-wrap: anywhere !important;
    }

    html body.community-active #arena-grid .mobile-community-media-stage {
        grid-column: 1 / -1 !important;
        margin-top: 3px !important;
        margin-bottom: 12px !important;
    }

    html body.community-active #arena-grid .bloc-card.mobile-community-card .mobile-community-actions {
        grid-column: 2 !important;
        justify-content: flex-start !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body.community-active #arena-grid .mobile-community-actions > div.bytes-tv-mobile-hero-rail {
        display: grid !important;
        grid-template-columns: repeat(5, 32px) !important;
        align-items: center !important;
        justify-items: center !important;
        justify-content: space-between !important;
        width: calc(100% + 15px) !important;
        min-width: 0 !important;
        max-width: calc(100% + 15px) !important;
        min-height: 32px !important;
        margin: 0 -7.5px !important;
        gap: 0 !important;
    }

    html body.community-active #arena-grid .mobile-community-actions .bytes-tv-mobile-hero-rail__button,
    html body.community-active #arena-grid .mobile-community-actions .community-feed-action.bytes-tv-mobile-hero-rail__button {
        width: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: var(--community-feed-muted) !important;
        -webkit-text-fill-color: currentColor !important;
    }

    html body.community-active #arena-grid .mobile-community-actions .community-feed-action.has-engagement,
    html body.community-active #arena-grid .mobile-community-actions .community-feed-action.is-active,
    html body.community-active #arena-grid .mobile-community-actions .community-feed-action.is-rebyted {
        color: var(--community-feed-ink) !important;
        -webkit-text-fill-color: currentColor !important;
    }

    /* A quiet inset rule separates posts without turning the feed into cards. */
    html body.community-active #arena-grid .bloc-card.mobile-community-card {
        position: relative !important;
        padding-top: 20px !important;
        padding-bottom: 19px !important;
    }

    html body.community-active #arena-grid .bloc-card.mobile-community-card + .bloc-card.mobile-community-card {
        margin-top: 0 !important;
    }

    html body.community-active #arena-grid .bloc-card.mobile-community-card + .bloc-card.mobile-community-card::before {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: 68px !important;
        right: 20px !important;
        width: auto !important;
        height: 1px !important;
        background: rgba(11, 11, 13, 0.085) !important;
        box-shadow: none !important;
        pointer-events: none !important;
    }

    html[data-theme^="dark"] body.community-active #arena-grid .bloc-card.mobile-community-card + .bloc-card.mobile-community-card::before,
    body[data-theme^="dark"].community-active #arena-grid .bloc-card.mobile-community-card + .bloc-card.mobile-community-card::before {
        background: rgba(247, 247, 248, 0.12) !important;
    }

    /* Media follows the same content rail as the message and engagement row. */
    html body.community-active #arena-grid .mobile-community-media-stage,
    html body.community-active #arena-grid .mobile-community-media-stage.mobile-community-raw-media {
        grid-column: 2 / -1 !important;
        width: 100% !important;
        max-width: none !important;
        margin: 9px 0 15px !important;
        padding: 0 !important;
        justify-content: stretch !important;
        overflow: hidden !important;
        border-radius: 18px !important;
    }

    /* Stills keep their own proportions. A fixed 4/3 with object-fit: cover was
       slicing the top and bottom off every portrait photo; the wrapper now grows
       to the image so nothing is clipped and the media stays flush with the
       engagement row beneath it. */
    /* A coverage card is not a still.
       It brings its own picture with its own corners, and the tint behind a
       photograph shows around it as a grey box drawn on something that was
       already a shape. The rules below are for stills; this is not one. */
    html body.community-active #arena-grid .mobile-community-media-stage .bloc-card-media-preview:has(.community-coverage-card) {
        background: transparent !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    html body.community-active #arena-grid .mobile-community-media-stage .bloc-card-media-preview,
    html body.community-active #arena-grid .mobile-community-media-stage img {
        width: 100% !important;
        min-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        display: block !important;
        border: 0 !important;
        border-radius: 18px !important;
        background: rgba(11, 11, 13, 0.035) !important;
        box-shadow: none !important;
        object-fit: contain !important;
    }

    /* Community scrolls like Moments does.
     *
     * Market, Map and TV are each a fixed panel that reaches the floor with
     * its own scroller inside, so the feed passes behind the glass nav pill
     * and there is no dead white band under it. Community was the exception:
     * a relative block in normal flow that grew to whatever its posts came
     * to, which put the scroll on the page instead of the panel and left it
     * stopping short of the bottom.
     *
     * The clearance for the pill lives as padding inside the scroller, not as
     * a gap under the panel — a gap just shows the body colour through.
     */
    html body.community-active #community-main-area {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    }

    html body.stream-active .mobile-live-recording-wrap .mobile-live-recording-status,
    html body.stream-active .mobile-live-recording-wrap .mobile-live-recording-status *,
    html body.stream-active .mobile-live-recording-wrap .mobile-live-viewer-count,
    html body.stream-active .mobile-live-recording-wrap .mobile-live-viewer-count *,
    html body.stream-active .mobile-live-recording-wrap .mobile-live-sound-btn,
    html body.stream-active .mobile-live-recording-wrap .mobile-live-sound-btn * {
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
    }

    html body.stream-active .mobile-live-recording-wrap .mobile-live-recording-status,
    html body.stream-active .mobile-live-recording-wrap .mobile-live-viewer-count,
    html body.stream-active .mobile-live-recording-wrap .mobile-live-sound-btn {
        background: rgba(0, 0, 0, 0.74) !important;
        border-color: rgba(255, 255, 255, 0.22) !important;
    }

html[data-theme="dark"],
body[data-theme="dark"] {
    color-scheme: dark !important;
    --background-color: #0b0b0d;
    --bg-primary: #0b0b0d;
    --bg-secondary: #151517;
    --body-bg: #0b0b0d;
    --panel-bg: #151517;
    --surface-color: #18181b;
    --surface-background-color: #18181b;
    --surface-rgb: 24, 24, 27;
    --card-bg: #18181b;
    --modal-bg: #151517;
    --modal-overlay-bg: rgba(0, 0, 0, 0.72);
    --input-bg: #202024;
    --input-background-color: #202024;
    --hover-bg: #252529;
    --text-color: #f5f5f7;
    --text-primary: #f5f5f7;
    --text-secondary: #98989d;
    --border-color: rgba(255, 255, 255, 0.12);
    --input-border: rgba(255, 255, 255, 0.14);
    --dark-canvas: #0b0b0d;
    --dark-surface: #18181b;
    --dark-surface-raised: #252529;
    --dark-text: #f5f5f7;
    --dark-muted: #98989d;
    --dark-border: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] body[class] {
    background: var(--dark-canvas) !important;
    color: var(--dark-text) !important;
}

html[data-theme="dark"] body::before {
    opacity: 0 !important;
}

html[data-theme="dark"] #mobile-app-header,
html[data-theme="dark"] #bottom-nav,
html[data-theme="dark"] .mobile-blocspace-tab-rail {
    background: var(--dark-canvas) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

html[data-theme="dark"] .mobile-app-header__more-menu {
    --mobile-more-menu-bg: rgba(28, 28, 30, 0.96);
    --mobile-more-menu-text: #f5f5f7;
    --mobile-more-menu-muted: #98989d;
    --mobile-more-menu-icon-bg: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .mobile-app-header__more-item {
    box-shadow: none !important;
}

html[data-theme="dark"] .mobile-app-header__more-item.is-active {
    background: var(--dark-surface-raised) !important;
    color: var(--dark-text) !important;
    -webkit-text-fill-color: var(--dark-text) !important;
}

html[data-theme="dark"] .mobile-app-header__more-item.is-active i {
    color: var(--dark-text) !important;
    -webkit-text-fill-color: var(--dark-text) !important;
}

html[data-theme="dark"] #arena-grid,
html[data-theme="dark"] #bytes-main-area,
html[data-theme="dark"] #virtual-main-area,
html[data-theme="dark"] #market-main-area,
html[data-theme="dark"] #shop-main-area,
html[data-theme="dark"] #booking-main-area,
html[data-theme="dark"] #stream-main-area,
html[data-theme="dark"] #ai-main-area,
html[data-theme="dark"] #apps-main-area,
html[data-theme="dark"] .community-main-area,
html[data-theme="dark"] .mobile-blocspace-shell,
html[data-theme="dark"] .mobile-blocspace-tab-panel {
    background-color: var(--dark-canvas) !important;
    color: var(--dark-text) !important;
}

html[data-theme="dark"] #mobile-import-library,
html[data-theme="dark"] #mobile-import-library .mobile-import-library__body,
html[data-theme="dark"] #mobile-import-library .mobile-import-library__list {
    background: var(--dark-canvas) !important;
    background-color: var(--dark-canvas) !important;
    color: var(--dark-text) !important;
}

html[data-theme="dark"] #mobile-import-library .mobile-import-library__source,
html[data-theme="dark"] #mobile-import-library .mobile-import-library__search,
html[data-theme="dark"] #mobile-import-library .mobile-import-library__search.is-timeline-search,
html[data-theme="dark"] #mobile-import-library .mobile-import-library__search-action {
    background: var(--dark-surface) !important;
    background-color: var(--dark-surface) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

html[data-theme="dark"] #mobile-import-library .mobile-import-library__source-row {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
}

html[data-theme="dark"] #mobile-import-library .mobile-import-library__source.is-active {
    background: color-mix(in srgb, var(--primary-color) 14%, var(--dark-surface)) !important;
    border-color: color-mix(in srgb, var(--primary-color) 40%, var(--dark-border)) !important;
}

html[data-theme="dark"] #mobile-import-library .mobile-import-library__search.is-timeline-search::before,
html[data-theme="dark"] #mobile-import-library .mobile-import-library__source span:not(.mobile-import-library__platform-badge) {
    color: var(--dark-text) !important;
    -webkit-text-fill-color: var(--dark-text) !important;
}

html[data-theme="dark"] :where(
    .bloc-card,
    .fresh-feed-card,
    .mobile-blocspace-card,
    .mobile-blocspace-overview-card,
    .mobile-blocspace-metric,
    .booking-card,
    .booking-service-card,
    .shop-product-card,
    .stream-card,
    .settingsGroup
) {
    background-color: var(--dark-surface) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

html[data-theme="dark"] :where(
    input:not([type="color"]):not([type="range"]):not([type="checkbox"]):not([type="radio"]),
    textarea,
    select
) {
    color-scheme: dark !important;
    background-color: var(--dark-surface) !important;
    color: var(--dark-text) !important;
    -webkit-text-fill-color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
    caret-color: var(--dark-text) !important;
}

html[data-theme="dark"] :where(input, textarea)::placeholder {
    color: var(--dark-muted) !important;
    -webkit-text-fill-color: var(--dark-muted) !important;
    opacity: 1 !important;
}

html[data-theme="dark"] :where(
    #mobile-settings-modal,
    #quick-login-modal .qlm-container,
    #mobile-header-activity-modal,
    #tab-menu-modal,
    .mobile-sheet,
    .action-sheet,
    .drawer-panel,
    [role="dialog"]
) {
    color-scheme: dark !important;
    background-color: var(--dark-surface) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

html[data-theme="dark"] :where(
    .settingsHint,
    .settingsSub,
    .mobile-blocspace-subtitle,
    .mobile-blocspace-meta,
    .muted,
    small
) {
    color: var(--dark-muted) !important;
    -webkit-text-fill-color: var(--dark-muted) !important;
}

html[data-theme="dark"] :where(.skeleton, [class*="skeleton"], [class*="loading-placeholder"]) {
    background-color: var(--dark-surface-raised) !important;
}

html[data-theme="dark"] body.community-active #arena-grid {
    background: var(--dark-canvas) !important;
    background-color: var(--dark-canvas) !important;
}

html[data-theme="dark"] body.community-active #arena-grid .mobile-community-card {
    background: var(--dark-surface) !important;
    background-color: var(--dark-surface) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] body.community-active #arena-grid .mobile-community-message {
    background: var(--dark-surface-raised) !important;
    background-color: var(--dark-surface-raised) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

html[data-theme="dark"] body.community-active #arena-grid .mobile-community-card .mobile-community-message p,
html[data-theme="dark"] body.community-active #arena-grid .mobile-community-card.mobile-community-card p {
    color: var(--dark-text) !important;
    -webkit-text-fill-color: var(--dark-text) !important;
}

html[data-theme="dark"] body.community-active #arena-grid .mobile-community-rebyte-meta,
html[data-theme="dark"] body.community-active #arena-grid .mobile-community-card-meta-wrap,
html[data-theme="dark"] body.community-active #arena-grid .mobile-community-room-source,
html[data-theme="dark"] body.community-active #arena-grid .mobile-community-room-source *,
html[data-theme="dark"] body.community-active #arena-grid .mobile-community-meta-row {
    color: var(--dark-muted) !important;
    -webkit-text-fill-color: var(--dark-muted) !important;
    border-color: var(--dark-border) !important;
}

html[data-theme="dark"] body.community-active #arena-grid .profile-avatar,
html[data-theme="dark"] body.community-active #arena-grid .community-feed-action {
    background: var(--dark-surface-raised) !important;
    background-color: var(--dark-surface-raised) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

.mobile-app-header__more-menu {
    inset: 0 auto 0 0 !important;
    left: 0 !important;
    top: 0 !important;
    width: min(82vw, 336px) !important;
    height: 100dvh !important;
    max-width: calc(100vw - 56px) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 0 !important;
    padding: calc(env(safe-area-inset-top, 0px) + 20px) 16px calc(env(safe-area-inset-bottom, 0px) + 18px) !important;
    border: 0 !important;
    border-right: 1px solid color-mix(in srgb, var(--mobile-more-menu-text) 7%, transparent) !important;
    border-radius: 0 30px 30px 0 !important;
    background: #fbfbfc !important;
    box-shadow: 24px 0 70px rgba(15, 23, 42, 0.18) !important;
    backdrop-filter: blur(18px) saturate(135%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(135%) !important;
    overflow: hidden !important;
}

.mobile-app-header__more-backdrop {
    background: rgba(15, 15, 18, 0.14) !important;
    backdrop-filter: blur(4px) saturate(94%) !important;
    -webkit-backdrop-filter: blur(4px) saturate(94%) !important;
}

.mobile-app-header__more:not(.is-open) .mobile-app-header__more-menu {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate3d(-104%, 0, 0) !important;
}

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

.mobile-app-header__more.is-open::before {
    display: none !important;
}

.mobile-app-header__more-header {
    padding: 4px 4px 20px 6px !important;
}

.mobile-app-header__more-header-actions {
    gap: 6px !important;
}

.mobile-app-header__more-refresh,
.mobile-app-header__more-close {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border: 1px solid rgba(18, 18, 20, 0.08) !important;
    background: #ffffff !important;
    box-shadow: 0 5px 14px rgba(18, 18, 20, 0.08) !important;
}

.mobile-app-header__more-logo {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
}

.mobile-app-header__more-name {
    max-width: 215px !important;
    font-size: 18px !important;
    font-weight: 850 !important;
    line-height: 1.08 !important;
    text-transform: none !important;
}

.mobile-app-header__more-eyebrow {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: none !important;
}
.mobile-app-header__more-title {
    padding: 5px 12px 10px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: none !important;
}

.mobile-app-header__more-items {
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 0 2px 18px !important;
}

.mobile-app-header__assistant-profile {
    position: relative;
    width: 100%;
    min-height: 72px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 12px;
    margin: 0 0 26px;
    padding: 11px 12px;
    border: 1px solid rgba(18, 18, 20, 0.08);
    border-radius: 18px;
    background: #ffffff;
    color: var(--mobile-more-menu-text) !important;
    -webkit-text-fill-color: var(--mobile-more-menu-text) !important;
    text-align: left;
    box-shadow: 0 8px 22px rgba(18, 18, 20, 0.055);
}

.mobile-app-header__assistant-profile-avatar {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 12px;
    background: color-mix(in srgb, var(--mobile-more-menu-text) 7%, transparent);
    color: var(--mobile-more-menu-text) !important;
    -webkit-text-fill-color: var(--mobile-more-menu-text) !important;
    font-size: 16px;
    font-weight: 900;
}

.mobile-app-header__assistant-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mobile-app-header__assistant-profile-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mobile-app-header__assistant-profile-copy strong,
.mobile-app-header__assistant-profile-copy span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-app-header__assistant-profile-copy strong {
    color: var(--mobile-more-menu-text) !important;
    -webkit-text-fill-color: var(--mobile-more-menu-text) !important;
    font-size: 15px;
    font-weight: 820;
    line-height: 1.05;
}

.mobile-app-header__assistant-profile-copy span {
    color: var(--mobile-more-menu-muted) !important;
    -webkit-text-fill-color: var(--mobile-more-menu-muted) !important;
    font-size: 11px;
    font-weight: 650;
    line-height: 1.1;
}

.mobile-app-header__assistant-profile-chevron {
    display: grid;
    place-items: center;
    color: var(--mobile-more-menu-muted) !important;
    -webkit-text-fill-color: var(--mobile-more-menu-muted) !important;
    font-size: 12px;
}

.mobile-app-header__assistant-section {
    display: grid;
    gap: 0;
    margin: 0 0 25px;
}

.mobile-app-header__assistant-section + .mobile-app-header__assistant-section {
    padding-top: 4px;
}

.mobile-app-header__assistant-section:last-child {
    margin-bottom: 0;
}

.mobile-app-header__assistant-section .mobile-app-header__more-title {
    padding: 0 11px 9px !important;
    color: var(--mobile-more-menu-muted) !important;
    -webkit-text-fill-color: var(--mobile-more-menu-muted) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
}

.mobile-app-header__more-item,
.mobile-app-header__more-item.is-active {
    height: 48px !important;
    min-height: 48px !important;
    gap: 12px !important;
    padding: 0 12px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-transform: none !important;
    box-shadow: none !important;
}

.mobile-app-header__assistant-item .mobile-app-header__assistant-label,
.mobile-app-header__assistant-item > span:not(.mobile-app-header__assistant-indicator) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-app-header__assistant-indicator {
    flex: 0 0 auto;
    max-width: 132px;
    margin-left: auto;
    overflow: hidden;
    padding: 5px 8px;
    border-radius: 999px;
    color: #345aa8 !important;
    -webkit-text-fill-color: #345aa8 !important;
    background: #edf3ff !important;
    font-size: 9px;
    font-weight: 820;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-app-header__assistant-indicator[hidden] {
    display: none !important;
}

.mobile-app-header__assistant-indicator[data-tone="success"] {
    color: #2d6a48 !important;
    -webkit-text-fill-color: #2d6a48 !important;
    background: #eaf7ef !important;
}

.mobile-app-header__assistant-indicator[data-tone="warm"] {
    color: #8a5a22 !important;
    -webkit-text-fill-color: #8a5a22 !important;
    background: #fff3e4 !important;
}

/* Red means it wants you and clears when you open the item. Grey is a
   number for information only and never needs dismissing. Scoped by the
   menu id: a `[data-theme] [class*="bytes"] :not(script):not(style)` sweep
   outranks a bare class + attribute selector and painted both black. */
#mobile-app-header-more .mobile-app-header__assistant-indicator[data-tone="alert"] {
    color: #b42318 !important;
    -webkit-text-fill-color: #b42318 !important;
    background: #fdecea !important;
}

#mobile-app-header-more .mobile-app-header__assistant-indicator[data-tone="stat"] {
    color: #63635f !important;
    -webkit-text-fill-color: #63635f !important;
    background: #f1f1ed !important;
    font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em;
}

.mobile-app-header__more-item.has-assistant-indicator.is-active::after {
    display: none !important;
}

.mobile-app-header__more-item:not(.is-active) {
    border: 0 !important;
    border-bottom: 1px solid rgba(18, 18, 20, 0.055) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.mobile-app-header__more-item.is-active {
    border-radius: 14px !important;
    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) !important;
}

.mobile-app-header__more-item:not(.is-active):last-child {
    border-bottom-color: transparent !important;
}

.mobile-app-header__more-item i {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-size: 17px !important;
}

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

/* Apps are the primary destinations; utilities stay quieter below them. */
.mobile-app-header__assistant-section[aria-label="Apps"] {
    gap: 7px;
    margin-bottom: 42px;
}

.mobile-app-header__assistant-section[aria-label="Apps"] .mobile-app-header__more-title,
.mobile-app-header__assistant-section[aria-label="Utilities"] .mobile-app-header__more-title {
    padding-bottom: 11px !important;
}

.mobile-app-header__assistant-section[aria-label="Apps"] .mobile-app-header__more-item {
    height: 51px !important;
    min-height: 51px !important;
    padding: 0 12px !important;
    border: 1px solid rgba(18, 18, 20, 0.055) !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    box-shadow: 0 4px 12px rgba(18, 18, 20, 0.035) !important;
}

.mobile-app-header__assistant-section[aria-label="Apps"] .mobile-app-header__more-item i {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 9px !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 14px !important;
}

.mobile-app-header__assistant-section[aria-label="Apps"] [data-assistant-key="community"] i { background: #5d55c9 !important; }
.mobile-app-header__assistant-section[aria-label="Apps"] [data-assistant-key="booking"] i { background: #45b98a !important; }
.mobile-app-header__assistant-section[aria-label="Apps"] [data-assistant-key="agent"] i { background: #4d77df !important; }
.mobile-app-header__assistant-section[aria-label="Apps"] [data-assistant-key="shop"] i { background: #f07a45 !important; }
.mobile-app-header__assistant-section[aria-label="Apps"] [data-assistant-key="market"] i { background: #39a9aa !important; }
.mobile-app-header__assistant-section[aria-label="Apps"] [data-assistant-key="stream"] i { background: #e6607b !important; }
.mobile-app-header__assistant-section[aria-label="Apps"] [data-assistant-key="map"] i { background: #8371d5 !important; }
.mobile-app-header__assistant-section[aria-label="Apps"] [data-assistant-key="media"] i { background: #e7a126 !important; }
.mobile-app-header__assistant-section[aria-label="Apps"] [data-assistant-key="tv"] i { background: #68768a !important; }

/* Utilities are the same shape as Apps: separate rounded rows with the icon
   in a tile. Their tiles are one quiet ink colour so Apps still lead. */
.mobile-app-header__assistant-section[aria-label="Utilities"] {
    gap: 7px;
    margin-bottom: 0;
    padding-top: 24px;
}

.mobile-app-header__assistant-section[aria-label="Preferences"] {
    gap: 7px;
    padding-top: 0;
}

.mobile-app-header__assistant-section[aria-label="Apps"] + .mobile-app-header__assistant-section[aria-label="Preferences"] {
    margin-top: 20px;
}

.mobile-app-header__assistant-section[aria-label="Utilities"] + .mobile-app-header__assistant-section[aria-label="Preferences"] {
    margin-top: 24px;
}

.mobile-app-header__assistant-section[aria-label="Preferences"] .mobile-app-header__more-title {
    padding-bottom: 11px !important;
}

.mobile-app-header__assistant-section[aria-label="Preferences"] .mobile-app-header__more-item {
    height: 51px !important;
    min-height: 51px !important;
    padding: 0 12px !important;
    border: 1px solid rgba(18, 18, 20, 0.055) !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    box-shadow: 0 4px 12px rgba(18, 18, 20, 0.035) !important;
}

.mobile-app-header__assistant-section[aria-label="Preferences"] .mobile-app-header__more-item > i:first-child {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    border-radius: 9px !important;
    background: #18181b !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 14px !important;
}

.mobile-app-header__assistant-section[aria-label="Utilities"] .mobile-app-header__more-item {
    height: 51px !important;
    min-height: 51px !important;
    padding: 0 12px !important;
    border: 1px solid rgba(18, 18, 20, 0.055) !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    box-shadow: 0 4px 12px rgba(18, 18, 20, 0.035) !important;
}

.mobile-app-header__assistant-section[aria-label="Utilities"] .mobile-app-header__more-item i {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 9px !important;
    background: #18181b !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 14px !important;
}

html[data-theme="dark"] .mobile-app-header__assistant-section[aria-label="Utilities"] .mobile-app-header__more-item i,
body[data-theme="dark"] .mobile-app-header__assistant-section[aria-label="Utilities"] .mobile-app-header__more-item i,
html[data-theme="dark"] .mobile-app-header__assistant-section[aria-label="Preferences"] .mobile-app-header__more-item > i:first-child,
body[data-theme="dark"] .mobile-app-header__assistant-section[aria-label="Preferences"] .mobile-app-header__more-item > i:first-child {
    background: #ffffff !important;
    color: #111113 !important;
    -webkit-text-fill-color: #111113 !important;
}

html[data-theme="dark"] .mobile-app-header__assistant-section[aria-label="Apps"] .mobile-app-header__more-item,
body[data-theme="dark"] .mobile-app-header__assistant-section[aria-label="Apps"] .mobile-app-header__more-item,
html[data-theme="dark"] .mobile-app-header__assistant-section[aria-label="Utilities"] .mobile-app-header__more-item,
body[data-theme="dark"] .mobile-app-header__assistant-section[aria-label="Utilities"] .mobile-app-header__more-item,
html[data-theme="dark"] .mobile-app-header__assistant-section[aria-label="Preferences"] .mobile-app-header__more-item,
body[data-theme="dark"] .mobile-app-header__assistant-section[aria-label="Preferences"] .mobile-app-header__more-item {
    background: #222225 !important;
    border-color: rgba(255, 255, 255, 0.07) !important;
    box-shadow: none !important;
}

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

.mobile-app-header__more-action {
    margin-top: 0 !important;
    padding-top: 10px !important;
    border-radius: 0 !important;
}

html[data-theme="dark"] .mobile-app-header__more-menu,
body[data-theme="dark"] .mobile-app-header__more-menu {
    box-shadow: 24px 0 70px rgba(0, 0, 0, 0.44) !important;
}

html[data-theme="dark"] .mobile-app-header__assistant-profile,
body[data-theme="dark"] .mobile-app-header__assistant-profile {
    background: rgba(255, 255, 255, 0.035) !important;
    border-color: rgba(255, 255, 255, 0.09) !important;
}

html[data-theme="dark"] .mobile-app-header__more-menu,
body[data-theme="dark"] .mobile-app-header__more-menu {
    background: #171719 !important;
}

html[data-theme="dark"] .mobile-app-header__more-refresh,
html[data-theme="dark"] .mobile-app-header__more-close,
body[data-theme="dark"] .mobile-app-header__more-refresh,
body[data-theme="dark"] .mobile-app-header__more-close {
    background: #232326 !important;
    border-color: rgba(255, 255, 255, 0.09) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22) !important;
}

html[data-theme="dark"] .mobile-app-header__more-item:not(.is-active),
body[data-theme="dark"] .mobile-app-header__more-item:not(.is-active) {
    border-bottom-color: rgba(255, 255, 255, 0.07) !important;
}

html[data-theme="dark"] .mobile-app-header__assistant-indicator,
body[data-theme="dark"] .mobile-app-header__assistant-indicator {
    color: #b9ceff !important;
    -webkit-text-fill-color: #b9ceff !important;
    background: rgba(83, 128, 225, 0.18) !important;
}

html[data-theme="dark"] .mobile-app-header__assistant-indicator[data-tone="success"],
body[data-theme="dark"] .mobile-app-header__assistant-indicator[data-tone="success"] {
    color: #a9e4be !important;
    -webkit-text-fill-color: #a9e4be !important;
    background: rgba(70, 154, 100, 0.17) !important;
}

html[data-theme="dark"] #mobile-app-header-more .mobile-app-header__assistant-indicator[data-tone="alert"],
body[data-theme="dark"] #mobile-app-header-more .mobile-app-header__assistant-indicator[data-tone="alert"] {
    color: #ffb4a8 !important;
    -webkit-text-fill-color: #ffb4a8 !important;
    background: rgba(220, 60, 40, 0.2) !important;
}

html[data-theme="dark"] #mobile-app-header-more .mobile-app-header__assistant-indicator[data-tone="stat"],
body[data-theme="dark"] #mobile-app-header-more .mobile-app-header__assistant-indicator[data-tone="stat"] {
    color: rgba(255, 255, 255, 0.62) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.62) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .mobile-app-header__assistant-indicator[data-tone="warm"],
body[data-theme="dark"] .mobile-app-header__assistant-indicator[data-tone="warm"] {
    color: #f2c88f !important;
    -webkit-text-fill-color: #f2c88f !important;
    background: rgba(187, 123, 43, 0.17) !important;
}

@media (prefers-reduced-motion: reduce) {
    .mobile-app-header__more-menu,
    .mobile-app-header__more-backdrop {
        transition-duration: 0.01ms !important;
    }
}

/* An owner page colour keeps the menu on that colour in Dark too, so the
   dark-theme pills above (translucent fills with pale text, drawn for the
   #171719 menu) vanished on it: "8 today" and "2 new" read pink on beige.
   With a page colour the pills keep their own solid light-theme fills,
   which read on any page colour. */
html[data-page-color][data-theme="dark"] #mobile-app-header-more .mobile-app-header__assistant-indicator {
    color: #345aa8 !important;
    -webkit-text-fill-color: #345aa8 !important;
    background: #edf3ff !important;
}
html[data-page-color][data-theme="dark"] #mobile-app-header-more .mobile-app-header__assistant-indicator[data-tone="success"] {
    color: #2d6a48 !important;
    -webkit-text-fill-color: #2d6a48 !important;
    background: #eaf7ef !important;
}
html[data-page-color][data-theme="dark"] #mobile-app-header-more .mobile-app-header__assistant-indicator[data-tone="warm"] {
    color: #8a5a22 !important;
    -webkit-text-fill-color: #8a5a22 !important;
    background: #fff3e4 !important;
}
html[data-page-color][data-theme="dark"] #mobile-app-header-more .mobile-app-header__assistant-indicator[data-tone="alert"] {
    color: #b42318 !important;
    -webkit-text-fill-color: #b42318 !important;
    background: #fdecea !important;
}
html[data-page-color][data-theme="dark"] #mobile-app-header-more .mobile-app-header__assistant-indicator[data-tone="stat"] {
    color: #63635f !important;
    -webkit-text-fill-color: #63635f !important;
    background: #f1f1ed !important;
}

/* Direct implementation of Community Light.dc.html for the real Home feed. */
html body.community-active #community-main-area,
html body.community-active #community-feed-shell,
html body.community-active #arena-grid {
    background: #f7f7f5 !important;
}

html body.community-active .community-blips-rail {
    display: flex;
    gap: 12px;
    width: 100%;
    padding: 12px 14px 10px;
    overflow-x: auto;
    box-sizing: border-box;
    background: #ffffff;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

html body.community-active .community-blips-rail[hidden],
html body.community-active.community-room-mode .community-blips-rail {
    display: none !important;
}

html body.community-active .community-blips-rail::-webkit-scrollbar {
    display: none;
}

html body.community-active .community-blip-play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 38px;
    height: 38px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(10, 10, 14, 0.55);
    pointer-events: none;
}

html body.community-active .community-blip-play::after {
    content: '';
    position: absolute;
    left: 15px;
    top: 11px;
    border-style: solid;
    border-width: 8px 0 8px 12px;
    border-color: transparent transparent transparent #ffffff;
}

html body.community-active .community-blip-tile {
    position: relative;
    display: block;
    flex: 0 0 144px;
    width: 144px;
    height: 182px;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(10, 10, 14, 0.11);
    border-radius: 22px;
    background: #dededb;
    color: #ffffff;
    box-shadow: 0 8px 22px rgba(15, 15, 20, 0.10);
    isolation: isolate;
    -webkit-tap-highlight-color: transparent;
}

html body.community-active .community-blip-avatar {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
    border: 0;
    border-radius: inherit;
    background: #e9e9e6;
    box-shadow: none;
}

html body.community-active .community-blip-avatar::after {
    content: "";
    position: absolute;
    inset: 35% 0 0;
    z-index: 1;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.74));
    pointer-events: none;
}

html body.community-active .community-blip-avatar img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

html[data-theme] body.community-active #community-blips-rail .community-blip-tile--mine .community-blip-label,
html body.community-active #community-blips-rail .community-blip-tile--mine .community-blip-label {
    text-align: center;
}

html body.community-active .community-blip-tile--mine .community-blip-avatar {
    border: 0;
    border-radius: inherit;
    background:
        radial-gradient(circle at 76% 18%, rgba(255, 255, 255, 0.19), transparent 28%),
        linear-gradient(145deg, #424247 0%, #17171a 72%, #0b0b0d 100%);
}

html body.community-active .community-blip-add {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.46);
    background: rgba(255, 255, 255, 0.16);
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.20);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font: 350 30px/1 system-ui, sans-serif;
}

html body.community-active .community-blip-initial {
    position: relative;
    z-index: 2;
    color: #252529;
    font: 750 26px/1 system-ui, sans-serif;
}

/* The light theme paints every leaf element black with !important
   ([data-theme="light"] * * *, and the #mobile-bytes-panel sweep). The tile
   is dark, so the label has to win on both color and text-fill, with an id
   in the selector and !important, or it reads as black on black. */
html[data-theme] body.community-active #community-blips-rail .community-blip-label,
html body.community-active #community-blips-rail .community-blip-label {
    position: absolute;
    right: 12px;
    bottom: 12px;
    left: 12px;
    z-index: 3;
    display: block;
    overflow: hidden;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font: 700 13px/1.2 system-ui, sans-serif;
    text-align: left;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.68);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Community uses the shared mobile header's normal scroll-away behavior.
   Keep its shell available, but do not override the transform written by
   mobile-app-header.js when the reader leaves the top of the feed. */
html body.community-active #mobile-app-header.mobile-app-header {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
}

html body.community-active #mobile-app-header.mobile-app-header > * {
    visibility: visible !important;
}

/* Community Light header: the three scopes are one calm segmented control.
   Rooms shares the header (body.rooms-overlay-open), so it gets the same pill. */
html body:is(.community-active, .rooms-overlay-open).community-member-scope #mobile-app-header #community-filter-tabs {
    min-height: 40px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: visible !important;
}

html body:is(.community-active, .rooms-overlay-open).community-member-scope #mobile-app-header #community-filter-tabs .community-filter-strip {
    gap: 3px !important;
    align-items: stretch !important;
    min-height: 40px !important;
    padding: 3px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.28) !important;
    -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
    backdrop-filter: blur(18px) saturate(160%) !important;
    box-shadow: 0 6px 18px rgba(10, 10, 14, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
    overflow: hidden !important;
}

html body:is(.community-active, .rooms-overlay-open).community-member-scope #mobile-app-header #community-filter-tabs button {
    min-height: 34px !important;
    padding: 0 7px !important;
    border-radius: 999px !important;
    color: #35353a !important;
    -webkit-text-fill-color: #35353a !important;
    transition: color 150ms ease, background-color 150ms ease, box-shadow 150ms ease !important;
}

html body:is(.community-active, .rooms-overlay-open).community-member-scope #mobile-app-header #community-filter-tabs button[aria-selected="true"] {
    background: #ffffff !important;
    color: #0a0a0a !important;
    -webkit-text-fill-color: #0a0a0a !important;
    box-shadow: 0 1px 4px rgba(10, 10, 14, 0.12) !important;
}

html body:is(.community-active, .rooms-overlay-open).community-member-scope #mobile-app-header #community-filter-tabs .community-filter-label {
    max-width: calc(100% - 22px) !important;
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
}

html body:is(.community-active, .rooms-overlay-open).community-member-scope #mobile-app-header #community-filter-tabs .community-underline {
    display: none !important;
}

html body:is(.community-active, .rooms-overlay-open).community-member-scope #mobile-app-header .community-scope-badge {
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    border: 0 !important;
    background: #151517 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: none !important;
    font-size: 9px !important;
}

html:is([data-theme="dark"], [data-theme="dark-neo"], [data-theme="dark-accent"]) body:is(.community-active, .rooms-overlay-open).community-member-scope #mobile-app-header #community-filter-tabs .community-filter-strip {
    border-color: rgba(255, 255, 255, 0.28) !important;
    background: rgba(0, 0, 0, 0.62) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

html:is([data-theme="dark"], [data-theme="dark-neo"], [data-theme="dark-accent"]) body:is(.community-active, .rooms-overlay-open).community-member-scope #mobile-app-header #community-filter-tabs button {
    color: #e7e7ea !important;
    -webkit-text-fill-color: #e7e7ea !important;
}

html:is([data-theme="dark"], [data-theme="dark-neo"], [data-theme="dark-accent"]) body:is(.community-active, .rooms-overlay-open).community-member-scope #mobile-app-header #community-filter-tabs button[aria-selected="true"] {
    background: #ffffff !important;
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
}

html:is([data-theme="dark"], [data-theme="dark-neo"], [data-theme="dark-accent"]) body:is(.community-active, .rooms-overlay-open).community-member-scope #mobile-app-header .community-scope-badge {
    background: #ffffff !important;
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
}

html body.community-active #arena-grid {
    width: 100% !important;
    padding: 8px 14px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    box-sizing: border-box !important;
}

html body.community-active #arena-grid .bloc-card.mobile-community-card {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 14px 15px !important;
    border: 1px solid rgba(10, 10, 14, 0.07) !important;
    border-radius: 24px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

html body.community-active #arena-grid .bloc-card.mobile-community-card + .bloc-card.mobile-community-card {
    margin-top: 0 !important;
}

html body.community-active #arena-grid .bloc-card.mobile-community-card + .bloc-card.mobile-community-card::before,
html body.community-active #arena-grid .bloc-card.mobile-community-card::after {
    content: none !important;
    display: none !important;
}

html body.community-active #arena-grid .mobile-community-card-meta-wrap {
    display: block !important;
}

html body.community-active #arena-grid .bloc-card.mobile-community-card .mobile-community-meta-row {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) auto auto !important;
    grid-template-rows: 20px 16px !important;
    gap: 1px 10px !important;
    width: 100% !important;
    min-height: 38px !important;
    margin: 0 0 11px !important;
    padding: 0 !important;
    align-items: center !important;
}

html body.community-active #arena-grid .bloc-card.mobile-community-card .profile-avatar {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    background: #e6e6e3 !important;
}

html body.community-active #arena-grid .bloc-card.mobile-community-card .mobile-community-author {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: end !important;
    color: #0a0a0a !important;
    -webkit-text-fill-color: #0a0a0a !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 650 !important;
    letter-spacing: -0.02em !important;
}

html body.community-active #arena-grid .bloc-card.mobile-community-card .mobile-community-timestamp {
    grid-column: 3 !important;
    grid-row: 1 / 3 !important;
    align-self: center !important;
    color: #6b6b72 !important;
    -webkit-text-fill-color: #6b6b72 !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 450 !important;
}

html body.community-active #arena-grid .mobile-community-room-source.mobile-community-room-source--meta,
html body.community-active #arena-grid .mobile-community-app-context {
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    align-self: start !important;
    max-width: 190px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #5f5f66 !important;
    -webkit-text-fill-color: #5f5f66 !important;
    font-size: 11.5px !important;
    line-height: 1.2 !important;
    font-weight: 450 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
}

html body.community-active #arena-grid .bloc-card.mobile-community-card .mobile-community-message {
    display: block !important;
    width: 100% !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

html body.community-active #arena-grid .bloc-card.mobile-community-card .mobile-community-message p {
    margin: 0 !important;
    padding: 0 !important;
    color: #0a0a0a !important;
    -webkit-text-fill-color: #0a0a0a !important;
    font-size: 14.5px !important;
    line-height: 1.38 !important;
    font-weight: 500 !important;
    letter-spacing: -0.02em !important;
}

/* Media runs edge to edge inside the card. The card pads 15px each side, so
   the stage pulls back out by that much and lets the card's own corners clip
   it: one frame, not a rounded photo inside a rounded box. Height is capped
   with cover so a tall screenshot can't take the whole feed; the detail view
   still shows the full image. */
html body.community-active #arena-grid .bloc-card.mobile-community-card .mobile-community-media-stage,
html body.community-active #arena-grid .bloc-card.mobile-community-card.has-community-media .mobile-community-media-stage {
    width: calc(100% + 32px) !important;
    max-width: none !important;
    margin: 0 -16px 12px !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    display: block !important;
}

html body.community-active #arena-grid .bloc-card.mobile-community-card .mobile-community-media-stage .bloc-card-media-preview,
html body.community-active #arena-grid .bloc-card.mobile-community-card .mobile-community-media-stage img,
html body.community-active #arena-grid .bloc-card.mobile-community-card .mobile-community-media-stage video,
html body.community-active #arena-grid .bloc-card.mobile-community-card .mobile-community-media-stage iframe,
html body.community-active #arena-grid .bloc-card.mobile-community-card.has-community-media .mobile-community-media-stage .bloc-card-media-preview,
html body.community-active #arena-grid .bloc-card.mobile-community-card.has-community-media .mobile-community-media-stage img,
html body.community-active #arena-grid .bloc-card.mobile-community-card.has-community-media .mobile-community-media-stage video,
html body.community-active #arena-grid .bloc-card.mobile-community-card.has-community-media .mobile-community-media-stage iframe {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

html body.community-active #arena-grid .bloc-card.mobile-community-card .mobile-community-media-stage img,
html body.community-active #arena-grid .bloc-card.mobile-community-card .mobile-community-media-stage video,
html body.community-active #arena-grid .bloc-card.mobile-community-card.has-community-media .mobile-community-media-stage img,
html body.community-active #arena-grid .bloc-card.mobile-community-card.has-community-media .mobile-community-media-stage video {
    height: auto !important;
    max-height: 420px !important;
    object-fit: cover !important;
}

html body.community-active #arena-grid .bloc-card.mobile-community-card .mobile-community-actions {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body.community-active #arena-grid .mobile-community-actions > .bytes-tv-mobile-hero-rail {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 16px !important;
}

html body.community-active #arena-grid .community-feed-reply-preview {
    margin: 12px 0 0 !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(10, 10, 14, 0.07) !important;
}

html[data-theme^="dark"] body.community-active #community-main-area,
html[data-theme^="dark"] body.community-active #community-feed-shell,
html[data-theme^="dark"] body.community-active #arena-grid {
    background: #09090b !important;
}

html[data-theme^="dark"] body.community-active #arena-grid .bloc-card.mobile-community-card {
    border-color: rgba(255, 255, 255, 0.09) !important;
    background: #151517 !important;
}

/* ------------------------------------------------------------------------
   Flat feed: no post containers. The card used to do three jobs, separate
   posts, group a post's parts, and frame the media. Each job moves to
   something else so the feed stays compact without the box:
   - separation: one hairline between posts, 12px above and below;
   - grouping:   a 38px avatar column on the left and one shared left edge
                 for name, text, media and actions beside it (the spine);
   - media:      its own rounded object inside the content column.
   These rules sit last in the sheet so they beat the card rules above. */
html body.community-active #community-main-area,
html body.community-active #community-feed-shell,
html body.community-active #arena-grid {
    background: #ffffff !important;
}

html body.community-active #arena-grid {
    padding: 0 0 24px !important;
    gap: 0 !important;
}

html body.community-active #arena-grid .bloc-card.mobile-community-card {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    column-gap: 12px !important;
    row-gap: 0 !important;
    align-items: start !important;
    padding: 12px 16px 10px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(10, 10, 14, 0.07) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body.community-active #arena-grid .bloc-card.mobile-community-card > * {
    grid-column: 2 !important;
    min-width: 0 !important;
}

html body.community-active #arena-grid .bloc-card.mobile-community-card > .mobile-community-card-meta-wrap {
    grid-column: 1 / -1 !important;
}

/* Name row: avatar in the left column, name starts on the spine (38 + 12). */
html body.community-active #arena-grid .bloc-card.mobile-community-card .mobile-community-meta-row {
    gap: 1px 12px !important;
    margin: 0 0 8px !important;
}

html body.community-active #arena-grid .bloc-card.mobile-community-card .mobile-community-message {
    margin: 0 0 10px !important;
}

/* Media is its own object again, inside the column. */
html body.community-active #arena-grid .bloc-card.mobile-community-card .mobile-community-media-stage,
html body.community-active #arena-grid .bloc-card.mobile-community-card.has-community-media .mobile-community-media-stage {
    width: 100% !important;
    margin: 0 0 10px !important;
    border-radius: 16px !important;
    background: #f1f1ef !important;
}

html body.community-active #arena-grid .bloc-card.mobile-community-card .mobile-community-actions {
    margin: 2px 0 0 !important;
}

html body.community-active #arena-grid .community-feed-reply-preview {
    margin: 10px 0 0 !important;
    padding-top: 10px !important;
}

html[data-theme^="dark"] body.community-active #community-main-area,
html[data-theme^="dark"] body.community-active #community-feed-shell,
html[data-theme^="dark"] body.community-active #arena-grid {
    background: #09090b !important;
}

html[data-theme^="dark"] body.community-active #arena-grid .bloc-card.mobile-community-card {
    background: transparent !important;
    border-bottom-color: rgba(255, 255, 255, 0.09) !important;
}

html[data-theme^="dark"] body.community-active #arena-grid .bloc-card.mobile-community-card .mobile-community-media-stage {
    background: #151517 !important;
}

/* Style blocks that load after this sheet (mobile.html, post-Codex passes)
   restate the card grid as 46px columns, an 8px gap and a 36px avatar. The
   [data-post-id] attribute lifts these one notch so the spine stays at
   16 + 38 + 12 = 66px for the name, the text and the media alike. */
html body.community-active #arena-grid .bloc-card.mobile-community-card[data-post-id] {
    grid-template-columns: 38px minmax(0, 1fr) !important;
    column-gap: 12px !important;
}

html body.community-active #arena-grid .bloc-card.mobile-community-card[data-post-id] .mobile-community-meta-row {
    grid-template-columns: 38px minmax(0, 1fr) auto auto !important;
    column-gap: 12px !important;
}

html body.community-active #arena-grid .bloc-card.mobile-community-card[data-post-id] .profile-avatar {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
}

/* The avatar and name share a link wrapper with its own 8px gap; match the
   spine gap so the name lands on the same edge as the text below it. */
html body.community-active #arena-grid .bloc-card.mobile-community-card[data-post-id] .mobile-community-app-link {
    gap: 12px !important;
    column-gap: 12px !important;
}

/* Vertical rhythm on the spine: the name row is exactly the avatar's 38px,
   then 8px to the text, 10px to the media, 6px to the actions. The later
   passes stretch the row to 46px and stack three margins under it. */
html body.community-active #arena-grid .bloc-card.mobile-community-card[data-post-id] {
    padding: 12px 16px 10px !important;
}

html body.community-active #arena-grid .bloc-card.mobile-community-card[data-post-id] > .mobile-community-card-meta-wrap {
    margin: 0 !important;
    padding: 0 !important;
}

html body.community-active #arena-grid .bloc-card.mobile-community-card[data-post-id] .mobile-community-meta-row {
    grid-template-rows: 20px 18px !important;
    min-height: 38px !important;
    height: auto !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
}

html body.community-active #arena-grid .bloc-card.mobile-community-card[data-post-id] > .mobile-community-message {
    margin: 0 0 10px !important;
    padding: 0 !important;
}

html body.community-active #arena-grid .bloc-card.mobile-community-card[data-post-id] > .mobile-community-media-stage {
    margin: 0 0 10px !important;
}

html body.community-active #arena-grid .bloc-card.mobile-community-card[data-post-id] > .mobile-community-actions {
    margin: 0 !important;
}

/* Name row: one line, centred on the avatar. The second line only exists
   when a post carries app context; an empty second track was leaving about
   40px between the name and the text on the phone. */
html body.community-active #arena-grid .bloc-card.mobile-community-card[data-post-id] .mobile-community-meta-row {
    grid-template-rows: 38px !important;
    grid-auto-rows: auto !important;
    align-items: center !important;
    margin: 0 0 6px !important;
}

html body.community-active #arena-grid .bloc-card.mobile-community-card[data-post-id] .profile-avatar {
    grid-row: 1 !important;
    align-self: center !important;
}

html body.community-active #arena-grid .bloc-card.mobile-community-card[data-post-id] .mobile-community-author {
    grid-row: 1 !important;
    align-self: center !important;
}

html body.community-active #arena-grid .bloc-card.mobile-community-card[data-post-id] .mobile-community-timestamp {
    grid-row: 1 !important;
    align-self: center !important;
}

html body.community-active #arena-grid .bloc-card.mobile-community-card[data-post-id] .mobile-community-app-context {
    grid-row: 2 !important;
    grid-column: 2 / -1 !important;
    margin-top: 2px !important;
}

html body.community-active #arena-grid .bloc-card.mobile-community-card[data-post-id] .mobile-community-app-context:empty {
    display: none !important;
}

/* ------------------------------------------------------------------------
   Post detail with media: the picture first and full width, then the
   author row, the text, the actions and the replies under it. The thread
   grid becomes a plain column here; the named-row placement in mobile.html
   only applies to grid, so order does the sequencing. */
html body #enter-modal.post-detail-page.media-detail-active .post-detail-thread-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0 0 calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 0 !important;
}

html body #enter-modal.post-detail-page.media-detail-active .post-detail-thread-grid > .enter-post-body.is-media {
    order: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #000000 !important;
}

html body #enter-modal.post-detail-page.media-detail-active .enter-detail-media-stage,
html body #enter-modal.post-detail-page.media-detail-active .enter-detail-media-stage [data-embed-scope],
html body #enter-modal.post-detail-page.media-detail-active .enter-detail-media-stage .bloc-card-media-preview {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: #000000 !important;
}

html body #enter-modal.post-detail-page.media-detail-active .enter-detail-media-stage img,
html body #enter-modal.post-detail-page.media-detail-active .enter-detail-media-stage video,
html body #enter-modal.post-detail-page.media-detail-active .enter-detail-media-stage iframe,
html body #enter-modal.post-detail-page.media-detail-active .enter-detail-media-stage .bloc-card-media-preview > img {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 82vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

html body #enter-modal.post-detail-page.media-detail-active .enter-detail-media-stage img,
html body #enter-modal.post-detail-page.media-detail-active .enter-detail-media-stage .bloc-card-media-preview > img {
    object-fit: cover !important;
}

html body #enter-modal.post-detail-page.media-detail-active .enter-detail-media-stage video {
    object-fit: contain !important;
    background: #000000 !important;
}

/* Author row and text under the picture, on the 16px gutter. */
html body #enter-modal.post-detail-page.media-detail-active .post-detail-thread-grid > .enter-post-hero.is-media {
    order: 1 !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 14px 16px 0 !important;
}

html body #enter-modal.post-detail-page.media-detail-active .enter-post-hero.is-media .enter-post-author {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body #enter-modal.post-detail-page.media-detail-active .enter-post-hero.is-media .enter-post-avatar {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
}

html body #enter-modal.post-detail-page.media-detail-active .enter-post-hero.is-media .enter-post-headline {
    margin: 10px 0 0 !important;
    padding: 0 !important;
    max-width: none !important;
    width: 100% !important;
}

html body #enter-modal.post-detail-page.media-detail-active .post-detail-thread-grid > .post-detail-engagement {
    order: 2 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 12px 16px 6px !important;
}

html body #enter-modal.post-detail-page.media-detail-active .post-detail-thread-grid > .post-detail-replies-head {
    order: 3 !important;
    width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
}

html body #enter-modal.post-detail-page.media-detail-active .post-detail-thread-grid > .post-detail-inline-replies {
    order: 4 !important;
    width: 100% !important;
}

/* The close chevron floats over the picture, so it needs its own scrim. */
html body #enter-modal.post-detail-page.media-detail-active .enter-close {
    background: rgba(10, 10, 14, 0.5) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
}

html body #enter-modal.post-detail-page.media-detail-active .enter-close i {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* ------------------------------------------------------------------------
   Add a blip: the owner's empty viewer is a full-screen invitation. The
   viewer and the blip composer are full screen, so the bottom nav goes
   away while either is open. */
html body:has(#mobile-blips-viewer[style*="display: block"]) #bottom-nav,
html body:has(#new-custom-modal.story-mode[style*="display: block"]) #bottom-nav {
    display: none !important;
}

html body #mobile-blips-viewer .blip-empty {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: min(100%, 360px);
    padding: 40px 28px;
    text-align: center;
    color: #ffffff;
}

html body #mobile-blips-viewer .blip-empty__glow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 420px;
    height: 420px;
    transform: translate(-50%, -58%);
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--primary-color, #4f7cff) 26%, transparent) 0%, transparent 62%);
    pointer-events: none;
}

html body #mobile-blips-viewer .blip-empty__kicker {
    position: relative;
    margin-bottom: 26px;
    font: 500 10.5px/1 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.55) !important;
}

html body #mobile-blips-viewer .blip-empty__ring {
    position: relative;
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 18px 40px rgba(0, 0, 0, 0.45);
}

html body #mobile-blips-viewer .blip-empty__ring i {
    font-size: 36px;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body #mobile-blips-viewer .blip-empty__title {
    position: relative;
    margin-top: 26px;
    font: 700 26px/1.1 -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
    letter-spacing: -0.03em;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body #mobile-blips-viewer .blip-empty__copy {
    position: relative;
    max-width: 290px;
    margin-top: 10px;
    font: 450 15px/1.45 -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.68) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.68) !important;
    text-wrap: pretty;
}

html body #mobile-blips-viewer .blip-empty__cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 220px;
    height: 54px;
    margin-top: 30px;
    padding: 0 28px;
    border: 0;
    border-radius: 999px;
    background: #ffffff !important;
    color: #0a0a0a !important;
    -webkit-text-fill-color: #0a0a0a !important;
    font: 650 15.5px/1 -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
    letter-spacing: -0.02em;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
    -webkit-tap-highlight-color: transparent;
}

html body #mobile-blips-viewer .blip-empty__cta i,
html body #mobile-blips-viewer .blip-empty__cta span {
    color: #0a0a0a !important;
    -webkit-text-fill-color: #0a0a0a !important;
}

html body #mobile-blips-viewer .blip-empty__cta:active {
    transform: scale(0.98);
}

html body #mobile-blips-viewer .blip-empty__note {
    position: relative;
    margin-top: 16px;
    font: 500 10.5px/1 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.4) !important;
}

/* The viewer inherits the app's mono face; the invitation reads in the
   sans the feed uses. The small + in the corner duplicates the big button
   on this screen, so it steps aside until a blip exists. */
html body #mobile-blips-viewer .blip-empty__title,
html body #mobile-blips-viewer .blip-empty__copy,
html body #mobile-blips-viewer .blip-empty__cta,
html body #mobile-blips-viewer .blip-empty__cta span {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif !important;
}

html body #mobile-blips-viewer:has(.blip-empty) #mobile-blips-drop-btn {
    display: none !important;
}

/* ------------------------------------------------------------------------
   Blip viewing: the three marks from the Moments cinema across the foot of
   the film, on their own shadows, no discs. The caption rides above them. */
html body #mobile-blips-viewer .blip-actions {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 20px calc(env(safe-area-inset-bottom, 0px) + 10px);
    pointer-events: auto;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
}

html body #mobile-blips-viewer .blip-actions__btn {
    flex: 1 1 0;
    min-width: 0;
    height: 48px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 0;
    background: none !important;
    color: #f4f4f2 !important;
    -webkit-text-fill-color: #f4f4f2 !important;
    filter: drop-shadow(0 1px 8px rgba(6, 6, 10, 0.9));
    -webkit-tap-highlight-color: transparent;
    transition: color 160ms ease, transform 160ms ease;
}

html body #mobile-blips-viewer .blip-actions__btn i {
    font-size: 21px;
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}

html body #mobile-blips-viewer .blip-actions__btn:active {
    transform: scale(0.9);
}

html body #mobile-blips-viewer .blip-actions__btn.is-on,
html body #mobile-blips-viewer .blip-actions__btn.is-on i {
    color: #ff4a15 !important;
    -webkit-text-fill-color: #ff4a15 !important;
}

html body #mobile-blips-viewer .blip-actions__count {
    font: 600 12px/1 -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}

html body #mobile-blips-viewer .blip-actions__count:empty {
    display: none;
}

html body #mobile-blips-viewer #mobile-blips-caption-wrap {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 72px) !important;
}

/* A blip is a picture or a video. The composer's embed-link mode and its
   More options (platforms, schedule, season) do not apply to one. */
html body #new-custom-modal.story-mode #bytes-source-mode,
html body #new-custom-modal.story-mode #bytes-more-options {
    display: none !important;
}

/* The three top-right controls in the viewer are frosted squares; the app
   draws round marks everywhere else. */
html body #mobile-blips-viewer #mobile-blips-drop-btn,
html body #mobile-blips-viewer #mobile-blips-menu-btn,
html body #mobile-blips-viewer #mobile-blips-close-btn {
    width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: rgba(10, 10, 14, 0.35) !important;
}

/* The rail marks sit on the film, not on frosted tiles; the install banner
   has no business over a full-screen blip. */
html body #mobile-blips-viewer .blip-actions__btn {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}

html body:has(#mobile-blips-viewer[style*="display: block"]) #pwa-install-banner {
    display: none !important;
}

/* The cinema's marks in the blip rail: 21px strokes in the button's colour,
   lit orange once acted on, exactly as .mcin__act draws them. */
html body #mobile-blips-viewer .blip-actions__btn svg {
    width: 21px;
    height: 21px;
    display: block;
}

html body #mobile-blips-viewer .blip-actions__btn svg,
html body #mobile-blips-viewer .blip-actions__btn svg * {
    stroke: currentColor !important;
}

html body #mobile-blips-viewer .blip-actions__btn svg [fill="none"] {
    fill: none !important;
}

html body #mobile-blips-viewer .blip-actions__btn svg {
    color: inherit !important;
}

html body #mobile-blips-viewer .blip-actions__btn.is-on svg {
    color: #ff4a15 !important;
}

/* Press and hold pauses the blip; iOS must not answer the hold with its
   own image callout or a text selection. */
html body #mobile-blips-viewer,
html body #mobile-blips-viewer * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}