.mobile-blocspace-shell-header {
    position: fixed !important;
    top: var(--blocspace-shell-top-offset, env(safe-area-inset-top, 0px)) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 10007 !important;
    background: var(--background-color);
    border-bottom: none;
    padding: 8px 16px 0 16px !important;
    margin: 0 !important;
    transform: none !important;
    box-shadow: none;
}

.mobile-blocspace-header-top {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 40px;
}

/* Glass circle: a frosted disc that lifts the control off whatever sits
   behind the header without turning it into a solid chip. */
.mobile-blocspace-header-button {
    appearance: none;
    -webkit-appearance: none;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--surface-color) 62%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent);
    border-radius: 999px;
    box-shadow: 0 1px 2px color-mix(in srgb, #000 6%, transparent),
                inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent);
    color: var(--text-primary);
    padding: 0;
    margin: 0;
    cursor: pointer;
    font-size: 15px;
    transition: transform 140ms cubic-bezier(.2,.8,.2,1), background 140ms ease;
}

.mobile-blocspace-header-button:active {
    transform: scale(0.92);
    background: color-mix(in srgb, var(--surface-color) 78%, transparent);
}

/* Dark: the inner highlight reads as glare on glass, so it dims down. */
html[data-theme="dark"] .mobile-blocspace-header-button,
body[data-theme="dark"] .mobile-blocspace-header-button {
    background: color-mix(in srgb, #ffffff 8%, transparent);
    border-color: color-mix(in srgb, #ffffff 14%, transparent);
    box-shadow: 0 1px 2px color-mix(in srgb, #000 30%, transparent),
                inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent);
}

.mobile-blocspace-header-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
}

.mobile-blocspace-title-stack {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
}

.mobile-blocspace-title-avatar {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: color-mix(in srgb, var(--text-primary) 9%, transparent);
    background-size: cover;
    background-position: center;
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 950;
    line-height: 1;
}

.mobile-blocspace-title-avatar.has-image {
    border: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent);
}

.mobile-blocspace-title-main {
    font-size: 14px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--text-primary);
    max-width: 176px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-blocspace-tab-rail {
    /* The rail carries its own height so the modal can reserve exactly this
       much room for it, rather than both sides guessing at a number. */
    --blocspace-rail-height: calc(64px + env(safe-area-inset-bottom, 0px));

    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10008;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
    gap: 0;
    min-height: var(--blocspace-rail-height);
    padding: 4px max(16px, env(safe-area-inset-left, 0px)) calc(4px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-right, 0px));
    overflow: hidden;
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--text-primary, CanvasText) 10%, transparent);
    border-radius: 0;
    background: color-mix(in srgb, var(--background-color, Canvas) 96%, transparent);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.mobile-blocspace-tab-rail::-webkit-scrollbar {
    display: none;
}

/* `html` is pinned to 100vh and pulled up by a negative safe-area margin (see
   the "NUCLEAR OPTION" block in mobile.html). On iOS Safari/Chrome 100vh is the
   *large* viewport -- it assumes the URL bar is hidden -- so a plain
   `bottom: 0` anchors the rail below the visible area and the URL bar covers
   it. Anchoring off 100dvh instead tracks the viewport as the URL bar shows and
   hides. Scoped to the modal so the global rule is left alone.
   @supports keeps this from firing on engines without dvh, which fall back to
   the `bottom: 0` above.

   Translating by the vh/dvh difference pins the rail's BOTTOM edge to the
   visible viewport. Deriving `top` instead would need the rail's exact rendered
   height, which content can change; this holds whatever the rail measures. The
   difference is 0 on desktop and whenever the URL bar is hidden, so the rail
   sits unchanged in those cases. */
@supports (height: 100dvh) {
    body.blocspace-modal-open .mobile-blocspace-tab-rail {
        transform: translateY(calc(100dvh - 100vh));
    }
}

.mobile-blocspace-shell-tab {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    background: transparent;
    border: none;
    border-radius: 0;
    min-width: 0;
    min-height: 58px;
    padding: 0 2px;
    color: var(--text-secondary);
    font-size: 8px;
    font-weight: 760;
    letter-spacing: 0;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-align: center;
    box-shadow: none;
    outline: none;
    transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.mobile-blocspace-shell-tab::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 3px;
    width: 18px;
    height: 3px;
    border-radius: 999px;
    background: transparent;
    transform: translateX(-50%);
    transition: background 0.18s ease, width 0.18s ease;
}

.mobile-blocspace-shell-tab i {
    width: 25px;
    height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    color: currentColor;
}

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

.mobile-blocspace-shell-tab.is-active::after {
    background: var(--text-primary);
    width: 24px;
}

.mobile-blocspace-shell-tab.is-active i {
    transform: translateY(-1px);
}

.mobile-blocspace-nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 10008;
}

.mobile-blocspace-nav-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

.mobile-blocspace-nav-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(280px, 82vw);
    background: var(--background-color);
    border-right: 1px solid var(--border-color);
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    z-index: 10009;
    display: flex;
    flex-direction: column;
    padding: calc(18px + env(safe-area-inset-top, 0px)) 16px 18px;
}

.mobile-blocspace-nav-drawer.is-open {
    transform: translateX(0);
}

.mobile-blocspace-nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.mobile-blocspace-nav-title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.mobile-blocspace-nav-close {
    width: 34px;
    height: 34px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: transparent;
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
}

.mobile-blocspace-nav-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mobile-blocspace-nav-item {
    width: 100%;
    min-height: 44px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: transparent;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    text-align: left;
}

.mobile-blocspace-nav-item i {
    width: 16px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 14px;
}

.mobile-blocspace-nav-item-label {
    flex: 1;
}

.mobile-blocspace-nav-item.is-active {
    background: rgba(255,255,255,0.06);
    border-color: var(--border-color);
}

.mobile-blocspace-nav-item.is-active i,
.mobile-blocspace-nav-item.is-active .mobile-blocspace-nav-item-label {
    color: var(--text-primary);
}

.mobile-blocspace-dashboard-email-shell {
    display: none;
    height: min(620px, calc(100dvh - 250px));
    min-height: 460px;
    margin: 2px -6px 0;
    border-radius: 0;
    overflow: hidden;
    background: var(--background-color, #fff);
}

.mobile-blocspace-dashboard-email-frame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: var(--background-color, #fff);
}

.mobile-blocspace-messages-shell.is-email-fullscreen .mobile-blocspace-dashboard-email-shell {
    display: block;
    position: fixed;
    top: max(92px, calc(env(safe-area-inset-top, 0px) + 70px));
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2147483600;
    width: 100vw;
    height: calc(100dvh - max(92px, calc(env(safe-area-inset-top, 0px) + 70px)));
    min-height: 0;
    margin: 0;
    border-radius: 0;
    background: #ffffff;
}

.mobile-blocspace-messages-shell.is-email-pane .mobile-blocspace-dashboard-email-shell {
    display: none !important;
}

.mobile-blocspace-messages-shell.is-email-pane .mobile-blocspace-messages-latest {
    display: grid;
}

.mobile-blocspace-messages-shell.is-email-pane .mobile-blocspace-messages-searchbar.is-open {
    display: grid;
}

.mobile-blocspace-messages-shell.is-email-fullscreen .mobile-blocspace-dashboard-email-frame {
    height: 100%;
}

.mobile-blocspace-messages-shell {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 0 10px;
}

.mobile-blocspace-messages-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 40px;
    margin-bottom: -2px;
}

.mobile-blocspace-messages-kicker {
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.mobile-blocspace-messages-head h2 {
    margin: 4px 0 0;
    color: var(--text-primary);
    font-size: clamp(28px, 7vw, 40px);
    line-height: 0.95;
    font-weight: 950;
    letter-spacing: 0;
}

.mobile-blocspace-messages-head p {
    margin: 7px 0 0;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.2;
    font-weight: 760;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-blocspace-messages-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}

.mobile-blocspace-messages-actions button {
    width: 36px;
    height: 36px;
    border: 1px solid color-mix(in srgb, var(--text-primary) 9%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-color) 50%, transparent);
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    font-size: 14px;
}

.mobile-blocspace-messages-actions button[data-mobile-message-compose],
.mobile-blocspace-messages-actions button[data-mobile-message-call],
.mobile-blocspace-messages-actions button[data-mobile-message-fullscreen] {
    background: color-mix(in srgb, var(--surface-color) 82%, transparent);
    border-color: color-mix(in srgb, var(--text-primary) 9%, transparent);
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
}

.mobile-blocspace-messages-searchbar {
    min-height: 0;
    height: 0;
    border: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface-color) 82%, transparent);
    color: var(--text-primary);
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 8px;
    padding: 0 7px 0 13px;
    box-shadow: 0 12px 30px color-mix(in srgb, var(--text-primary) 5%, transparent);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-2px);
    transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 140ms;
    overflow: hidden;
}

.mobile-blocspace-messages-searchbar.is-open {
    min-height: 40px;
    height: 46px;
    padding-top: 6px;
    padding-bottom: 6px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 140ms ease, transform 140ms ease;
}

.mobile-blocspace-messages-searchbar > i {
    color: var(--text-secondary);
    font-size: 13px;
}

.mobile-blocspace-messages-searchbar input {
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent !important;
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
    font: inherit;
    font-size: 15px;
    font-weight: 850;
}

.mobile-blocspace-messages-searchbar input::placeholder {
    color: var(--text-secondary);
    -webkit-text-fill-color: var(--text-secondary);
}

.mobile-blocspace-messages-searchbar button {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-primary) 7%, transparent);
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mobile-blocspace-messages-overview {
    display: none;
    grid-template-columns: minmax(118px, 0.58fr) minmax(0, 1.42fr);
    gap: 9px;
    padding: 11px;
    border: 1px solid color-mix(in srgb, var(--text-primary) 6%, transparent);
    border-radius: 14px;
    background:
        linear-gradient(90deg, color-mix(in srgb, #22c55e 8%, transparent), transparent 42%),
        color-mix(in srgb, var(--surface-color) 76%, transparent);
}

.mobile-blocspace-messages-filters {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 0;
    scrollbar-width: none;
    min-width: 0;
}

.mobile-blocspace-messages-filters::-webkit-scrollbar {
    display: none;
}

.mobile-blocspace-messages-filters button {
    flex: 0 0 auto;
    min-height: 38px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-primary);
    padding: 0 2px 7px;
    font: inherit;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 0;
    box-shadow: none;
    position: relative;
}

.mobile-blocspace-messages-filters button.is-active {
    background: transparent;
    border-color: transparent;
    color: var(--primary-color) !important;
    -webkit-text-fill-color: var(--primary-color);
}

.mobile-blocspace-messages-filters button.is-active::after {
    content: "";
    position: absolute;
    left: 2px;
    right: 2px;
    bottom: 0;
    height: 3px;
    border-radius: 999px;
    background: currentColor;
}

.mobile-blocspace-messages-ring {
    min-height: 122px;
    padding-right: 12px;
    border-right: 1px solid color-mix(in srgb, var(--text-primary) 7%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-blocspace-messages-ring-inner {
    width: min(116px, 100%);
    aspect-ratio: 1;
    border-radius: 999px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background:
        conic-gradient(#22c55e var(--messages-score, 0%), color-mix(in srgb, var(--text-primary) 9%, transparent) 0),
        color-mix(in srgb, var(--background-color) 86%, transparent);
    box-shadow: inset 0 0 0 12px color-mix(in srgb, var(--background-color) 82%, transparent);
}

.mobile-blocspace-messages-ring-inner span,
.mobile-blocspace-messages-ring-inner em {
    color: var(--text-secondary);
    font-size: 9px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-style: normal;
}

.mobile-blocspace-messages-ring-inner strong {
    margin: 5px 0 4px;
    color: var(--text-primary);
    font-size: clamp(32px, 9vw, 48px);
    line-height: 0.9;
    font-weight: 950;
    letter-spacing: 0;
}

.mobile-blocspace-messages-metrics {
    min-width: 0;
    display: grid;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 0;
}

.mobile-blocspace-messages-metric {
    min-width: 0;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    column-gap: 9px;
    padding: 5px 0;
}

.mobile-blocspace-messages-metric + .mobile-blocspace-messages-metric {
    border-top: 1px solid color-mix(in srgb, var(--text-primary) 6%, transparent);
}

.mobile-blocspace-messages-metric i {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #22c55e;
    font-size: 12px;
}

.mobile-blocspace-messages-metric span {
    min-width: 0;
    color: var(--text-secondary);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-blocspace-messages-metric strong {
    grid-column: 2;
    min-width: 0;
    color: var(--text-primary);
    font-size: 16px;
    line-height: 1.05;
    font-weight: 950;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-blocspace-messages-latest {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 0;
    padding-top: 2px;
}

.mobile-blocspace-messages-latest:empty {
    display: none;
}

.mobile-blocspace-messages-row {
    width: 100%;
    min-height: 74px;
    border: 1px solid color-mix(in srgb, var(--text-primary) 7%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface-color) 82%, transparent);
    color: var(--text-primary);
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto 36px;
    align-items: center;
    gap: 10px;
    padding: 7px;
    text-align: left;
    font: inherit;
    cursor: pointer;
    box-shadow: 0 12px 30px color-mix(in srgb, var(--text-primary) 5%, transparent);
    overflow: hidden;
}

.mobile-blocspace-messages-row:active {
    transform: scale(0.992);
}

.mobile-blocspace-messages-row.is-unread .mobile-blocspace-messages-row-copy strong,
.mobile-blocspace-messages-row.is-unread .mobile-blocspace-messages-row-copy em {
    color: var(--text-primary);
}

.mobile-blocspace-messages-avatar {
    width: 36px;
    height: 36px;
    min-width: 42px;
    max-width: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--text-primary) 7%, transparent);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 950;
    overflow: hidden;
    position: relative;
    flex: 0 0 42px;
}

.mobile-blocspace-messages-avatar img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    border-radius: inherit !important;
    flex: 0 0 auto !important;
}

.mobile-blocspace-messages-avatar i {
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    opacity: 0.18;
}

.mobile-blocspace-messages-avatar span {
    position: relative;
    z-index: 1;
}

.mobile-blocspace-messages-row-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mobile-blocspace-messages-row-copy strong,
.mobile-blocspace-messages-row-copy span,
.mobile-blocspace-messages-row-copy em {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-blocspace-messages-row-copy strong {
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.05;
    font-weight: 950;
}

.mobile-blocspace-messages-row-copy span {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.1;
    font-weight: 820;
}

.mobile-blocspace-messages-row-copy span b {
    display: inline-flex;
    align-items: center;
    margin-right: 7px;
    color: var(--text-primary);
    font-size: 9px;
    font-weight: 950;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.mobile-blocspace-messages-row-copy em {
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.2;
    font-style: normal;
    font-weight: 720;
}

.mobile-blocspace-messages-row-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
    color: var(--text-secondary);
    font-size: 10px;
    line-height: 1;
    font-weight: 850;
    white-space: nowrap;
}

.mobile-blocspace-messages-row-meta b {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #22c55e;
}

.mobile-blocspace-messages-row-delete {
    width: 34px;
    height: 34px;
    border-radius: 13px;
    border: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent);
    background: color-mix(in srgb, var(--surface-color) 94%, transparent);
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--text-primary) 5%, transparent);
    cursor: pointer;
}

.mobile-blocspace-messages-row-delete i {
    color: inherit;
    -webkit-text-fill-color: inherit;
    font-size: 12px;
    pointer-events: none;
}

.mobile-blocspace-messages-row-delete:active {
    transform: scale(0.96);
}

html[data-theme="light"] .mobile-blocspace-messages-row-delete,
body[data-theme="light"] .mobile-blocspace-messages-row-delete,
html[data-theme="light-accent"] .mobile-blocspace-messages-row-delete,
body[data-theme="light-accent"] .mobile-blocspace-messages-row-delete {
    background: #ffffff !important;
    border-color: rgba(5, 5, 5, 0.12) !important;
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
}

.mobile-blocspace-messages-empty {
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-secondary);
    text-align: center;
    border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 7%, transparent);
}

.mobile-blocspace-messages-empty i {
    width: 46px;
    height: 46px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--text-primary) 6%, transparent);
    color: var(--text-primary);
}

.mobile-blocspace-messages-empty strong {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 950;
}

.mobile-blocspace-messages-empty span {
    max-width: 240px;
    font-size: 12px;
    font-weight: 760;
}

/* Light accent final surface pass for Bloc Space tabs. */
html[data-theme="light-accent"],
body[data-theme="light-accent"] {
    --blocspace-light-accent-bg: color-mix(in srgb, var(--accent-color, var(--primary-color, #ff4d2e)) 5%, #ffffff 95%);
    --blocspace-light-accent-surface: color-mix(in srgb, var(--accent-color, var(--primary-color, #ff4d2e)) 7%, #ffffff 93%);
    --blocspace-light-accent-card: rgba(255, 255, 255, 0.88);
    --blocspace-light-accent-border: color-mix(in srgb, var(--accent-color, var(--primary-color, #ff4d2e)) 18%, rgba(5, 5, 5, 0.12));
}

html[data-theme="light-accent"] .mobile-blocspace-shell,
body[data-theme="light-accent"] .mobile-blocspace-shell,
html[data-theme="light-accent"] .mobile-blocspace-tab-panel,
body[data-theme="light-accent"] .mobile-blocspace-tab-panel {
    background:
        radial-gradient(circle at 14% 0%, color-mix(in srgb, var(--accent-color, var(--primary-color, #ff4d2e)) 10%, transparent), transparent 34%),
        linear-gradient(180deg, var(--blocspace-light-accent-bg), #ffffff 42%, var(--blocspace-light-accent-bg)) !important;
    color: #050505 !important;
}

html[data-theme="light-accent"] .mobile-blocspace-shell-header,
body[data-theme="light-accent"] .mobile-blocspace-shell-header,
html[data-theme="light-accent"] .mobile-blocspace-tab-rail,
body[data-theme="light-accent"] .mobile-blocspace-tab-rail,
html[data-theme="light-accent"] .mobile-blocspace-nav-drawer,
body[data-theme="light-accent"] .mobile-blocspace-nav-drawer {
    background: color-mix(in srgb, var(--blocspace-light-accent-bg) 88%, rgba(255, 255, 255, 0.82)) !important;
    border-color: var(--blocspace-light-accent-border) !important;
    color: #050505 !important;
}

html[data-theme="light-accent"] .mobile-blocspace-messages-shell,
body[data-theme="light-accent"] .mobile-blocspace-messages-shell,
html[data-theme="light-accent"] .mobile-blocspace-messages-overview,
body[data-theme="light-accent"] .mobile-blocspace-messages-overview,
html[data-theme="light-accent"] .mobile-blocspace-dashboard-email-shell,
body[data-theme="light-accent"] .mobile-blocspace-dashboard-email-shell,
html[data-theme="light-accent"] .mobile-blocspace-dashboard-email-frame,
body[data-theme="light-accent"] .mobile-blocspace-dashboard-email-frame {
    background: var(--blocspace-light-accent-card) !important;
    border-color: var(--blocspace-light-accent-border) !important;
    color: #050505 !important;
    box-shadow: 0 18px 42px rgba(5, 5, 5, 0.07) !important;
}

html[data-theme="light-accent"] .mobile-blocspace-messages-actions button,
body[data-theme="light-accent"] .mobile-blocspace-messages-actions button,
html[data-theme="light-accent"] .mobile-blocspace-messages-filters button,
body[data-theme="light-accent"] .mobile-blocspace-messages-filters button,
html[data-theme="light-accent"] .mobile-blocspace-messages-row,
body[data-theme="light-accent"] .mobile-blocspace-messages-row {
    background: rgba(255, 255, 255, 0.78) !important;
    border-color: var(--blocspace-light-accent-border) !important;
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
}

html[data-theme="light-accent"] .mobile-blocspace-messages-filters button,
body[data-theme="light-accent"] .mobile-blocspace-messages-filters button {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

html[data-theme="light-accent"] .mobile-blocspace-messages-searchbar,
body[data-theme="light-accent"] .mobile-blocspace-messages-searchbar {
    background: rgba(255, 255, 255, 0.82) !important;
    border-color: var(--blocspace-light-accent-border) !important;
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
}

html[data-theme="light-accent"] .mobile-blocspace-messages-actions button[data-mobile-message-compose],
body[data-theme="light-accent"] .mobile-blocspace-messages-actions button[data-mobile-message-compose],
html[data-theme="light-accent"] .mobile-blocspace-messages-actions button[data-mobile-message-call],
body[data-theme="light-accent"] .mobile-blocspace-messages-actions button[data-mobile-message-call] {
    background: rgba(255, 255, 255, 0.78) !important;
    border-color: var(--blocspace-light-accent-border) !important;
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
}

html[data-theme="light-accent"] .mobile-blocspace-messages-filters button.is-active,
body[data-theme="light-accent"] .mobile-blocspace-messages-filters button.is-active {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--accent-color, var(--primary-color, #ff4d2e)) !important;
    -webkit-text-fill-color: var(--accent-color, var(--primary-color, #ff4d2e)) !important;
}

html[data-theme="light"] .mobile-blocspace-messages-filters button.is-active,
body[data-theme="light"] .mobile-blocspace-messages-filters button.is-active,
html[data-theme="light"] .mobile-blocspace-messages-filters button.is-active *,
body[data-theme="light"] .mobile-blocspace-messages-filters button.is-active *,
html[data-theme="light-accent"] .mobile-blocspace-messages-filters button.is-active *,
body[data-theme="light-accent"] .mobile-blocspace-messages-filters button.is-active * {
    color: var(--accent-color, var(--primary-color, #ff4d2e)) !important;
    -webkit-text-fill-color: var(--accent-color, var(--primary-color, #ff4d2e)) !important;
}

html[data-theme="light-accent"] .mobile-blocspace-messages-head h2,
html[data-theme="light-accent"] .mobile-blocspace-messages-row-copy strong,
html[data-theme="light-accent"] .mobile-blocspace-messages-row-copy span b,
html[data-theme="light-accent"] .mobile-blocspace-messages-metric strong,
html[data-theme="light-accent"] .mobile-blocspace-messages-ring-inner strong,
body[data-theme="light-accent"] .mobile-blocspace-messages-head h2,
body[data-theme="light-accent"] .mobile-blocspace-messages-row-copy strong,
body[data-theme="light-accent"] .mobile-blocspace-messages-row-copy span b,
body[data-theme="light-accent"] .mobile-blocspace-messages-metric strong,
body[data-theme="light-accent"] .mobile-blocspace-messages-ring-inner strong {
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
}

.mobile-blocspace-message-composer {
    position: fixed;
    inset: 0;
    z-index: 2147483646 !important;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
    isolation: isolate;
}

.mobile-blocspace-message-composer.is-open {
    pointer-events: auto;
}

.mobile-blocspace-message-composer-scrim {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(0, 0, 0, 0.36);
    opacity: 0;
    transition: opacity 180ms ease;
}

.mobile-blocspace-message-composer.is-open .mobile-blocspace-message-composer-scrim {
    opacity: 1;
}

.mobile-blocspace-message-composer-panel {
    position: relative;
    z-index: 1;
    width: min(430px, calc(100vw - 20px));
    max-height: min(76vh, 690px);
    margin: 0 10px max(10px, env(safe-area-inset-bottom));
    border: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
    border-radius: 24px;
    background: color-mix(in srgb, var(--surface-color) 96%, var(--background-color) 4%);
    color: var(--text-primary);
    padding: 10px 14px 14px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28);
    transform: translateY(24px);
    opacity: 0;
    transition: transform 220ms ease, opacity 180ms ease;
    overflow: hidden;
}

.mobile-blocspace-message-composer.is-open .mobile-blocspace-message-composer-panel {
    transform: translateY(0);
    opacity: 1;
}

.mobile-blocspace-message-composer-grabber {
    width: 42px;
    height: 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-primary) 18%, transparent);
    margin: 2px auto 12px;
}

.mobile-blocspace-message-composer-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px;
    gap: 12px;
    align-items: center;
}

.mobile-blocspace-message-composer-head strong,
.mobile-blocspace-message-composer-head span {
    display: block;
}

.mobile-blocspace-message-composer-head strong {
    color: var(--text-primary);
    font-size: 26px;
    line-height: 1;
    font-weight: 950;
}

.mobile-blocspace-message-composer-head span {
    margin-top: 6px;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.25;
    font-weight: 760;
}

.mobile-blocspace-message-composer-head button {
    width: 40px;
    height: 40px;
    border: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-color) 84%, transparent);
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mobile-blocspace-message-composer-search {
    min-height: 50px;
    margin-top: 14px;
    border: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--background-color) 64%, transparent);
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 0 13px;
}

.mobile-blocspace-message-composer-search i {
    color: var(--text-secondary);
    font-size: 13px;
}

.mobile-blocspace-message-composer-search input {
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent !important;
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
    font: inherit;
    font-size: 15px;
    font-weight: 850;
}

.mobile-blocspace-message-composer-list {
    max-height: calc(min(76vh, 690px) - 174px);
    overflow-y: auto;
    display: grid;
    gap: 10px;
    margin-top: 0;
}

.mobile-blocspace-message-contact-row {
    min-height: 66px;
    border: 1px solid color-mix(in srgb, var(--text-primary) 7%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface-color) 82%, transparent);
    color: var(--text-primary);
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 9px;
    padding: 10px;
}

.mobile-blocspace-message-contact-avatar {
    width: 44px;
    height: 44px;
    border-radius: 15px;
    background: color-mix(in srgb, var(--text-primary) 7%, transparent);
    color: var(--text-primary);
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 950;
}

.mobile-blocspace-message-contact-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mobile-blocspace-message-contact-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.mobile-blocspace-message-contact-copy strong,
.mobile-blocspace-message-contact-copy em {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-blocspace-message-contact-copy strong {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 920;
}

.mobile-blocspace-message-contact-copy em {
    color: var(--text-secondary);
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
}

.mobile-blocspace-message-contact-row button {
    min-width: 40px;
    height: 38px;
    border: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--background-color) 70%, transparent);
    color: var(--text-primary);
    font: inherit;
    font-size: 11px;
    font-weight: 900;
    padding: 0 12px;
}

.mobile-blocspace-message-contact-row button:last-child {
    min-width: 38px;
    width: 38px;
    padding: 0;
    background: color-mix(in srgb, var(--surface-color) 82%, transparent);
    border-color: color-mix(in srgb, var(--text-primary) 8%, transparent);
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
}

.mobile-blocspace-message-composer-empty {
    border: 1px solid color-mix(in srgb, var(--text-primary) 7%, transparent);
    border-radius: 14px;
    padding: 18px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 800;
}

html[data-theme="light"] .mobile-blocspace-message-composer-panel,
body[data-theme="light"] .mobile-blocspace-message-composer-panel,
html[data-theme="light-accent"] .mobile-blocspace-message-composer-panel,
body[data-theme="light-accent"] .mobile-blocspace-message-composer-panel,
html[data-theme="light"] .mobile-blocspace-message-contact-row,
body[data-theme="light"] .mobile-blocspace-message-contact-row,
html[data-theme="light-accent"] .mobile-blocspace-message-contact-row,
body[data-theme="light-accent"] .mobile-blocspace-message-contact-row {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(5, 5, 5, 0.1) !important;
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
}

html[data-theme="light"] .mobile-blocspace-message-composer-search,
body[data-theme="light"] .mobile-blocspace-message-composer-search,
html[data-theme="light-accent"] .mobile-blocspace-message-composer-search,
body[data-theme="light-accent"] .mobile-blocspace-message-composer-search,
html[data-theme="light"] .mobile-blocspace-message-composer-head button,
body[data-theme="light"] .mobile-blocspace-message-composer-head button,
html[data-theme="light-accent"] .mobile-blocspace-message-composer-head button,
body[data-theme="light-accent"] .mobile-blocspace-message-composer-head button {
    background: #ffffff !important;
    border-color: rgba(5, 5, 5, 0.12) !important;
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
}

html[data-theme="light"] .mobile-blocspace-message-contact-row button:last-child,
body[data-theme="light"] .mobile-blocspace-message-contact-row button:last-child,
html[data-theme="light-accent"] .mobile-blocspace-message-contact-row button:last-child,
body[data-theme="light-accent"] .mobile-blocspace-message-contact-row button:last-child {
    background: #ffffff !important;
    border-color: rgba(5, 5, 5, 0.12) !important;
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
}


/* Bloc Space in-page email inbox/thread UI */
.mobile-blocspace-messages-row.is-email-row .mobile-blocspace-messages-row-copy span,
.mobile-blocspace-messages-row.is-email-row .mobile-blocspace-messages-row-copy em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-blocspace-messages-avatar.is-email {
    position: relative;
    border-radius: 14px;
    background: color-mix(in srgb, var(--accent-color, var(--primary-color, #ff4d2e)) 10%, var(--text-primary) 5%, transparent);
    color: var(--text-primary);
}

.mobile-blocspace-messages-avatar.is-email i {
    font-size: 17px;
    opacity: 0.72;
}

.mobile-blocspace-messages-avatar.is-email.has-logo {
    background: #ffffff;
}

.mobile-blocspace-messages-avatar.is-email.has-logo i {
    display: none;
}

.mobile-blocspace-messages-avatar.is-email.has-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mobile-blocspace-email-reader {
    position: fixed;
    inset: 0;
    z-index: 2147483645;
    background: var(--background-color, #fff);
    color: var(--text-primary, #050505);
    isolation: isolate;
}

.mobile-blocspace-email-reader-panel {
    height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    background: var(--background-color, #fff);
    color: var(--text-primary, #050505);
}

.mobile-blocspace-email-reader-head {
    min-height: 54px;
    padding: calc(env(safe-area-inset-top, 0px) + 6px) 18px 6px;
    border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 12px;
    background: color-mix(in srgb, var(--background-color, #fff) 96%, var(--surface-color, #fff) 4%);
}

.mobile-blocspace-email-reader-head button {
    width: 42px;
    height: 42px;
    border: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-color, #fff) 92%, transparent);
    color: var(--text-primary, #050505);
    -webkit-text-fill-color: var(--text-primary, #050505);
    box-shadow: 0 10px 24px rgba(0,0,0,.07);
}

.mobile-blocspace-email-reader-head span,
.mobile-blocspace-email-reader-head strong {
    display: block;
    min-width: 0;
}

.mobile-blocspace-email-reader-head span {
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: 10px;
    font-weight: 820;
    color: var(--text-secondary, #666);
}

.mobile-blocspace-email-reader-head strong {
    margin-top: 7px;
    font-size: 16px;
    line-height: 1.1;
    font-weight: 650;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary, #050505);
}

.mobile-blocspace-email-reader-body {
    min-height: 0;
    overflow-y: auto;
    padding: 10px 0 calc(150px + env(safe-area-inset-bottom, 0px));
    scroll-padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    gap: 12px;
    -webkit-overflow-scrolling: touch;
}

.mobile-blocspace-email-thread-card {
    border: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface-color, #fff) 86%, transparent);
    color: var(--text-primary, #050505);
    box-shadow: 0 14px 36px rgba(0,0,0,.05);
}


.mobile-blocspace-email-thread-card.is-email-summary {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    padding: 2px 16px 8px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
}

.mobile-blocspace-email-summary-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.mobile-blocspace-email-summary-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.mobile-blocspace-email-summary-top strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary, #050505);
    font-size: 14px;
    font-weight: 760;
}

.mobile-blocspace-email-summary-top small,
.mobile-blocspace-email-summary-copy em,
.mobile-blocspace-email-summary-copy span {
    color: var(--text-secondary, #666);
    font-size: 10px;
    font-style: normal;
    font-weight: 650;
}

.mobile-blocspace-email-summary-copy em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-blocspace-email-summary-copy h1 {
    margin: 4px 0 0;
    color: var(--text-primary, #050505);
    font-size: clamp(14px, 3.8vw, 17px);
    line-height: 1.2;
    font-weight: 680;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.mobile-blocspace-email-thread-card.is-sender {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px;
}

.mobile-blocspace-email-thread-avatar {
    width: 34px;
    height: 34px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--accent-color, var(--primary-color, #ff4d2e)) 12%, transparent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 950;
}

.mobile-blocspace-email-thread-card.is-sender strong,
.mobile-blocspace-email-thread-card.is-sender em {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-blocspace-email-thread-card.is-sender strong {
    font-size: 15px;
    font-weight: 820;
    color: var(--text-primary, #050505);
}

.mobile-blocspace-email-thread-card.is-subject {
    padding: 16px 18px;
    display: grid;
    gap: 7px;
    background: #ffffff;
}

.mobile-blocspace-email-thread-card.is-subject span {
    color: var(--text-secondary, #666);
    font-size: 11px;
    font-weight: 860;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.mobile-blocspace-email-thread-card.is-subject h1 {
    margin: 0;
    color: var(--text-primary, #050505);
    font-size: clamp(15px, 4vw, 18px);
    line-height: 1.08;
    font-weight: 680;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.mobile-blocspace-email-thread-card.is-subject em {
    color: var(--text-secondary, #666);
    font-size: 12px;
    font-style: normal;
    font-weight: 760;
}

.mobile-blocspace-email-thread-card.is-sender em,
.mobile-blocspace-email-thread-card small {
    font-size: 12px;
    font-style: normal;
    color: var(--text-secondary, #666);
}

.mobile-blocspace-email-thread-card.is-incoming,
.mobile-blocspace-email-thread-card.is-outgoing {
    width: min(88%, 760px);
    padding: 15px 16px;
}

.mobile-blocspace-email-thread-card.is-outgoing {
    margin-left: auto;
    background: color-mix(in srgb, var(--accent-color, var(--primary-color, #ff4d2e)) 12%, #ffffff 88%);
    border-color: color-mix(in srgb, var(--accent-color, var(--primary-color, #ff4d2e)) 35%, transparent);
}

.mobile-blocspace-email-thread-message-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: baseline;
    margin-bottom: 10px;
}

.mobile-blocspace-email-thread-message-head strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 840;
    color: var(--text-primary, #050505);
}

.mobile-blocspace-email-thread-card p {
    margin: 0;
    color: var(--text-primary, #050505);
    font-size: 13px;
    line-height: 1.42;
    font-weight: 520;
    overflow-wrap: anywhere;
}

.mobile-blocspace-email-clean-body {
    white-space: pre-wrap;
}

.mobile-blocspace-email-thread-card.has-original {
    width: 100%;
}

.mobile-blocspace-email-original {
    margin-top: 14px;
    border-top: 1px solid rgba(5,5,5,.08);
    padding-top: 10px;
}

.mobile-blocspace-email-original summary {
    cursor: pointer;
    color: var(--text-secondary, #666);
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.mobile-blocspace-email-original[open] summary {
    margin-bottom: 10px;
    color: var(--text-primary, #050505);
}

.mobile-blocspace-email-thread-card.has-html {
    width: 100%;
    max-width: 100%;
    padding: 4px 0 0;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.mobile-blocspace-email-thread-card.has-html .mobile-blocspace-email-thread-message-head {
    padding: 0 14px 6px;
}

.mobile-blocspace-email-html-frame {
    display: block;
    width: 100%;
    min-height: 180px;
    height: 180px;
    margin-top: 0;
    border: 0;
    border-radius: 0;
    background: #ffffff;
    overflow: hidden;
}


.mobile-blocspace-email-html-direct {
    display: none;
}


.mobile-blocspace-email-html-direct h1,
.mobile-blocspace-email-html-direct h2,
.mobile-blocspace-email-html-direct h3 {
    font-size: clamp(18px, 6vw, 26px) !important;
    line-height: 1.12 !important;
}

.mobile-blocspace-email-html-direct img {
    display: block !important;
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
}

.mobile-blocspace-email-html-direct a {
    color: #2563eb;
}

.mobile-blocspace-email-text-details {
    margin-top: 12px;
    color: var(--text-primary, #050505);
}

.mobile-blocspace-email-text-details summary {
    cursor: pointer;
    color: var(--text-secondary, #666);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.mobile-blocspace-email-text-fallback {
    margin-top: 0 !important;
    padding: 14px 16px;
    border: 1px solid rgba(0,0,0,.07);
    border-radius: 14px;
    background: rgba(255,255,255,.92);
}

.mobile-blocspace-email-text-fallback.is-empty {
    color: var(--text-secondary, #777);
}

.mobile-blocspace-email-reply {
    position: fixed;
    left: max(14px, env(safe-area-inset-left));
    right: max(14px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
    z-index: 10;
    border: 1px solid rgba(5,5,5,.08);
    border-radius: 24px;
    background: #ffffff;
    color: #050505;
    color-scheme: light;
    padding: 7px;
    box-shadow: 0 18px 54px rgba(0,0,0,.18);
    backdrop-filter: none;
}

.mobile-blocspace-email-reply::before {
    content: '';
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(118px + env(safe-area-inset-bottom, 0px));
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(to top, #ffffff 76%, rgba(255,255,255,.92) 90%, rgba(255,255,255,0));
}

.mobile-blocspace-email-reply label {
    display: block;
    margin: 0 8px 6px;
    color: #303030;
    font-size: 12px;
    font-weight: 760;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-blocspace-email-reply div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    gap: 8px;
    align-items: end;
}

.mobile-blocspace-email-reply textarea {
    appearance: none;
    -webkit-appearance: none;
    min-height: 40px;
    max-height: 78px;
    resize: none;
    border: 1px solid rgba(5,5,5,.10);
    border-radius: 14px;
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
    caret-color: #050505;
    color-scheme: light;
    outline: 0;
    padding: 9px 12px;
    font: inherit;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 650;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.8);
}

.mobile-blocspace-email-reply textarea::placeholder {
    color: rgba(5,5,5,.42);
    -webkit-text-fill-color: rgba(5,5,5,.42);
}

.mobile-blocspace-email-reply button {
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 17px;
    background: var(--accent-color, var(--primary-color, #ff4d2e));
    color: #050505;
    -webkit-text-fill-color: #050505;
    font-size: 17px;
    box-shadow: 0 18px 36px color-mix(in srgb, var(--accent-color, var(--primary-color, #ff4d2e)) 30%, transparent);
}

.mobile-blocspace-email-reply button:disabled {
    opacity: .55;
}

.mobile-blocspace-email-reply > span {
    display: block;
    margin: 8px 8px 0;
    color: #b42318;
    font-size: 12px;
    font-weight: 780;
}

html[data-theme="light"] .mobile-blocspace-email-reader,
body[data-theme="light"] .mobile-blocspace-email-reader,
html[data-theme="light-accent"] .mobile-blocspace-email-reader,
body[data-theme="light-accent"] .mobile-blocspace-email-reader,
html[data-theme="light"] .mobile-blocspace-email-reader-panel,
body[data-theme="light"] .mobile-blocspace-email-reader-panel,
html[data-theme="light-accent"] .mobile-blocspace-email-reader-panel,
body[data-theme="light-accent"] .mobile-blocspace-email-reader-panel {
    background: #ffffff !important;
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
}

html[data-theme="light"] .mobile-blocspace-email-thread-card,
body[data-theme="light"] .mobile-blocspace-email-thread-card,
html[data-theme="light-accent"] .mobile-blocspace-email-thread-card,
body[data-theme="light-accent"] .mobile-blocspace-email-thread-card,
html[data-theme="light"] .mobile-blocspace-email-reader-head button,
body[data-theme="light"] .mobile-blocspace-email-reader-head button,
html[data-theme="light-accent"] .mobile-blocspace-email-reader-head button,
body[data-theme="light-accent"] .mobile-blocspace-email-reader-head button {
    background: #ffffff !important;
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
    border-color: rgba(5,5,5,.10) !important;
}


.mobile-blocspace-messages-loading {
    min-height: 160px;
    border: 1px solid color-mix(in srgb, var(--text-primary) 7%, transparent);
    border-radius: 24px;
    background: color-mix(in srgb, var(--surface-color) 84%, transparent);
    display: grid;
    place-items: center;
    gap: 9px;
    padding: 24px;
    color: var(--text-secondary);
    text-align: center;
    box-shadow: 0 12px 30px color-mix(in srgb, var(--text-primary) 5%, transparent);
}

.mobile-blocspace-messages-loading span {
    width: 44px;
    height: 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-primary) 12%, transparent);
    animation: mobileBlocspaceMessagePulse 0.9s ease-in-out infinite alternate;
}

.mobile-blocspace-messages-loading span:nth-child(2) { width: 70px; animation-delay: .12s; }
.mobile-blocspace-messages-loading span:nth-child(3) { width: 54px; animation-delay: .24s; }
.mobile-blocspace-messages-loading strong { color: var(--text-primary); font-size: 13px; font-weight: 900; }

@keyframes mobileBlocspaceMessagePulse {
    from { opacity: .28; transform: scaleX(.82); }
    to { opacity: 1; transform: scaleX(1); }
}


#mobile-blocspace-email-reader .mobile-blocspace-email-reply,
#mobile-blocspace-email-reader .mobile-blocspace-email-reply div {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
    color-scheme: light !important;
}

#mobile-blocspace-email-reader .mobile-blocspace-email-reply textarea,
#mobile-blocspace-email-reader .mobile-blocspace-email-reply textarea:focus,
#mobile-blocspace-email-reader .mobile-blocspace-email-reply textarea:active {
    -webkit-appearance: none !important;
    appearance: none !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
    caret-color: #050505 !important;
    color-scheme: light !important;
    border: 1px solid rgba(5,5,5,.12) !important;
    outline: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
}

#mobile-blocspace-email-reader .mobile-blocspace-email-reply textarea::placeholder {
    color: rgba(5,5,5,.42) !important;
    -webkit-text-fill-color: rgba(5,5,5,.42) !important;
}


/* Light-mode mobile button safety: prevent black-filled buttons with hidden text. */
html[data-theme="light"] body .mobile-blocspace-shell button,
html[data-theme="light-accent"] body .mobile-blocspace-shell button,
body[data-theme="light"] .mobile-blocspace-shell button,
body[data-theme="light-accent"] .mobile-blocspace-shell button {
    color-scheme: light !important;
}

html[data-theme="light"] body .mobile-blocspace-shell button:not(.mobile-blocspace-email-reply button):not([data-mobile-primary]):not(.is-danger),
html[data-theme="light-accent"] body .mobile-blocspace-shell button:not(.mobile-blocspace-email-reply button):not([data-mobile-primary]):not(.is-danger),
body[data-theme="light"] .mobile-blocspace-shell button:not(.mobile-blocspace-email-reply button):not([data-mobile-primary]):not(.is-danger),
body[data-theme="light-accent"] .mobile-blocspace-shell button:not(.mobile-blocspace-email-reply button):not([data-mobile-primary]):not(.is-danger) {
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
}

html[data-theme="light"] .mobile-blocspace-message-contact-row button,
html[data-theme="light-accent"] .mobile-blocspace-message-contact-row button,
body[data-theme="light"] .mobile-blocspace-message-contact-row button,
body[data-theme="light-accent"] .mobile-blocspace-message-contact-row button,
html[data-theme="light"] .mobile-blocspace-messages-searchbar button,
html[data-theme="light-accent"] .mobile-blocspace-messages-searchbar button,
body[data-theme="light"] .mobile-blocspace-messages-searchbar button,
body[data-theme="light-accent"] .mobile-blocspace-messages-searchbar button,
html[data-theme="light"] .mobile-blocspace-messages-actions button,
html[data-theme="light-accent"] .mobile-blocspace-messages-actions button,
body[data-theme="light"] .mobile-blocspace-messages-actions button,
body[data-theme="light-accent"] .mobile-blocspace-messages-actions button {
    background: #ffffff !important;
    border-color: rgba(5, 5, 5, 0.12) !important;
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
    opacity: 1 !important;
}

html[data-theme="light"] .mobile-blocspace-messages-filters button.is-active,
html[data-theme="light-accent"] .mobile-blocspace-messages-filters button.is-active,
body[data-theme="light"] .mobile-blocspace-messages-filters button.is-active,
body[data-theme="light-accent"] .mobile-blocspace-messages-filters button.is-active {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--accent-color, var(--primary-color, #ff4d2e)) !important;
    -webkit-text-fill-color: var(--accent-color, var(--primary-color, #ff4d2e)) !important;
}

#mobile-blocspace-email-reader .mobile-blocspace-email-reply button,
html[data-theme="light"] #mobile-blocspace-email-reader .mobile-blocspace-email-reply button,
html[data-theme="light-accent"] #mobile-blocspace-email-reader .mobile-blocspace-email-reply button,
body[data-theme="light"] #mobile-blocspace-email-reader .mobile-blocspace-email-reply button,
body[data-theme="light-accent"] #mobile-blocspace-email-reader .mobile-blocspace-email-reply button {
    background: #111111 !important;
    border-color: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
}

#mobile-blocspace-email-reader .mobile-blocspace-email-reply button i {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}

/* Bloc Space messages flatten pass */
.mobile-blocspace-messages-shell {
    gap: 14px;
}

.mobile-blocspace-messages-head {
    margin-bottom: 0;
}

.mobile-blocspace-messages-head h2 {
    font-size: clamp(24px, 6.2vw, 34px);
    line-height: 1.02;
}

.mobile-blocspace-messages-head p {
    max-width: 42vw;
    text-align: right;
}

.mobile-blocspace-messages-actions {
    gap: 12px;
}

.mobile-blocspace-messages-actions button,
html[data-theme="light"] .mobile-blocspace-messages-actions button,
html[data-theme="light-accent"] .mobile-blocspace-messages-actions button,
body[data-theme="light"] .mobile-blocspace-messages-actions button,
body[data-theme="light-accent"] .mobile-blocspace-messages-actions button {
    width: 34px !important;
    height: 34px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--text-primary, #050505) !important;
    -webkit-text-fill-color: var(--text-primary, #050505) !important;
}

.mobile-blocspace-messages-searchbar,
html[data-theme="light-accent"] .mobile-blocspace-messages-searchbar,
body[data-theme="light-accent"] .mobile-blocspace-messages-searchbar {
    border: 0 !important;
    border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding-left: 0;
    padding-right: 0;
}

.mobile-blocspace-messages-searchbar button,
html[data-theme="light"] .mobile-blocspace-messages-searchbar button,
html[data-theme="light-accent"] .mobile-blocspace-messages-searchbar button,
body[data-theme="light"] .mobile-blocspace-messages-searchbar button,
body[data-theme="light-accent"] .mobile-blocspace-messages-searchbar button {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.mobile-blocspace-messages-filters {
    gap: 18px;
    padding: 0 0 8px;
    border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 9%, transparent);
}

.mobile-blocspace-messages-filters button,
html[data-theme="light-accent"] .mobile-blocspace-messages-filters button,
body[data-theme="light-accent"] .mobile-blocspace-messages-filters button {
    min-width: 64px;
    min-height: 36px;
    padding: 0 0 8px;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--text-secondary, #666) !important;
    -webkit-text-fill-color: var(--text-secondary, #666) !important;
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 7px;
}

.mobile-blocspace-messages-filters button span,
.mobile-blocspace-messages-filters button b {
    display: inline-flex;
    min-width: 0;
    color: inherit;
    -webkit-text-fill-color: inherit;
}

.mobile-blocspace-messages-filters button b {
    font-size: 12px;
    line-height: 1;
    font-weight: 900;
    opacity: 0.62;
}

.mobile-blocspace-messages-filters button.is-active,
html[data-theme="light"] .mobile-blocspace-messages-filters button.is-active,
html[data-theme="light-accent"] .mobile-blocspace-messages-filters button.is-active,
body[data-theme="light"] .mobile-blocspace-messages-filters button.is-active,
body[data-theme="light-accent"] .mobile-blocspace-messages-filters button.is-active,
html[data-theme="light"] .mobile-blocspace-messages-filters button.is-active *,
html[data-theme="light-accent"] .mobile-blocspace-messages-filters button.is-active *,
body[data-theme="light"] .mobile-blocspace-messages-filters button.is-active *,
body[data-theme="light-accent"] .mobile-blocspace-messages-filters button.is-active * {
    color: var(--text-primary, #050505) !important;
    -webkit-text-fill-color: var(--text-primary, #050505) !important;
}

.mobile-blocspace-messages-latest {
    gap: 0;
    padding-top: 0;
}

.mobile-blocspace-messages-row,
html[data-theme="light-accent"] .mobile-blocspace-messages-row,
body[data-theme="light-accent"] .mobile-blocspace-messages-row {
    min-height: 78px;
    border: 0 !important;
    border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    grid-template-columns: 38px minmax(0, 1fr) auto 30px;
    gap: 12px;
    padding: 13px 0;
}

.mobile-blocspace-messages-row:active {
    transform: none;
}

.mobile-blocspace-messages-avatar {
    width: 34px;
    height: 34px;
    min-width: 34px;
    max-width: 34px;
    flex-basis: 34px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--text-primary) 6%, transparent);
}

.mobile-blocspace-messages-avatar.is-email {
    background: color-mix(in srgb, var(--text-primary) 6%, transparent);
}

.mobile-blocspace-messages-row-copy {
    gap: 4px;
}

.mobile-blocspace-messages-row-copy strong {
    font-size: 15px;
}

.mobile-blocspace-messages-row-copy span {
    font-size: 12px;
}

.mobile-blocspace-messages-row-copy span:empty {
    display: none;
}

.mobile-blocspace-messages-row-copy em {
    font-size: 12px;
}

.mobile-blocspace-messages-row-meta {
    gap: 8px;
    font-size: 11px;
}

.mobile-blocspace-messages-row-delete,
html[data-theme="light"] .mobile-blocspace-messages-row-delete,
html[data-theme="light-accent"] .mobile-blocspace-messages-row-delete,
body[data-theme="light"] .mobile-blocspace-messages-row-delete,
body[data-theme="light-accent"] .mobile-blocspace-messages-row-delete {
    width: 30px;
    height: 30px;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--text-secondary, #666) !important;
    -webkit-text-fill-color: var(--text-secondary, #666) !important;
}

.mobile-blocspace-messages-empty,
.mobile-blocspace-messages-loading {
    min-height: 160px;
    border: 0 !important;
    border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.mobile-blocspace-messages-empty i {
    width: 34px;
    height: 34px;
    border-radius: 0;
    background: transparent;
}

.mobile-blocspace-message-contact-row,
html[data-theme="light"] .mobile-blocspace-message-contact-row,
html[data-theme="light-accent"] .mobile-blocspace-message-contact-row,
body[data-theme="light"] .mobile-blocspace-message-contact-row,
body[data-theme="light-accent"] .mobile-blocspace-message-contact-row {
    min-height: 70px;
    border: 0 !important;
    border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 12px 0;
}

.mobile-blocspace-message-contact-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
}

.mobile-blocspace-message-contact-row button,
.mobile-blocspace-message-contact-row button:last-child,
html[data-theme="light"] .mobile-blocspace-message-contact-row button,
html[data-theme="light-accent"] .mobile-blocspace-message-contact-row button,
body[data-theme="light"] .mobile-blocspace-message-contact-row button,
body[data-theme="light-accent"] .mobile-blocspace-message-contact-row button,
html[data-theme="light"] .mobile-blocspace-message-contact-row button:last-child,
html[data-theme="light-accent"] .mobile-blocspace-message-contact-row button:last-child,
body[data-theme="light"] .mobile-blocspace-message-contact-row button:last-child,
body[data-theme="light-accent"] .mobile-blocspace-message-contact-row button:last-child {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--text-primary, #050505) !important;
    -webkit-text-fill-color: var(--text-primary, #050505) !important;
}

.mobile-blocspace-email-reader-head {
    background: #ffffff;
}

.mobile-blocspace-email-reader-head button,
html[data-theme="light"] .mobile-blocspace-email-reader-head button,
html[data-theme="light-accent"] .mobile-blocspace-email-reader-head button,
body[data-theme="light"] .mobile-blocspace-email-reader-head button,
body[data-theme="light-accent"] .mobile-blocspace-email-reader-head button {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.mobile-blocspace-email-reader-body {
    gap: 0;
    padding-top: 0;
}

.mobile-blocspace-email-thread-card,
html[data-theme="light"] .mobile-blocspace-email-thread-card,
html[data-theme="light-accent"] .mobile-blocspace-email-thread-card,
body[data-theme="light"] .mobile-blocspace-email-thread-card,
body[data-theme="light-accent"] .mobile-blocspace-email-thread-card {
    border: 0 !important;
    border-bottom: 1px solid rgba(5, 5, 5, 0.08) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.mobile-blocspace-email-thread-card.is-incoming,
.mobile-blocspace-email-thread-card.is-outgoing,
.mobile-blocspace-email-thread-card.has-original {
    width: 100%;
    margin-left: 0;
    padding: 16px 18px;
}

.mobile-blocspace-email-thread-card.is-email-summary {
    padding: 14px 18px 12px;
}

.mobile-blocspace-email-thread-avatar {
    border-radius: 10px;
    background: color-mix(in srgb, var(--text-primary) 6%, transparent);
}

/* Analytics canvas: indigo accent, lifted in dark so it stays readable. */
.mobile-blocspace-analytics-canvas {
    --analytics-accent: #4B4CE0;
}

html[data-theme="dark"] .mobile-blocspace-analytics-canvas,
body[data-theme="dark"] .mobile-blocspace-analytics-canvas {
    --analytics-accent: #8F90FF;
}

/* Qualified with html body and the modal id to outrank the theme rule
   `html[data-theme="light"] body [id*="modal"] *`, which paints every
   descendant black and would flatten the accent number to ink. */
html body #blocspace-modal .mobile-blocspace-analytics-canvas .is-accent-metric,
html body .mobile-blocspace-analytics-canvas .is-accent-metric {
    color: var(--analytics-accent) !important;
    -webkit-text-fill-color: var(--analytics-accent) !important;
}

/* Calendar activity dots. Backgrounds aren't hit by the blanket colour rule,
   but they are declared here so both dots stay in one place. */
html body .mobile-blocspace-analytics-canvas .is-activity-dot {
    background: color-mix(in srgb, var(--text-primary) 34%, transparent);
}

html body .mobile-blocspace-analytics-canvas .is-accent-dot {
    background: var(--analytics-accent);
}

/* Wallet text-link (connect stripe). Qualified with html body to outrank the
   blanket `[id*="modal"] *` colour rule, same pattern as the accent metric. */
html body #blocspace-modal .is-wallet-textlink,
html body .is-wallet-textlink {
    color: var(--analytics-accent, #4B4CE0) !important;
    -webkit-text-fill-color: var(--analytics-accent, #4B4CE0) !important;
}

#blocspace-wallet-finance {
    --analytics-accent: #4B4CE0;
}

html[data-theme="dark"] #blocspace-wallet-finance,
body[data-theme="dark"] #blocspace-wallet-finance {
    --analytics-accent: #8F90FF;
}

/* Member tag reads in the accent, qualified to outrank the blanket rule. */
html body #blocspace-modal .mobile-blocspace-analytics-canvas .is-member-tag,
html body .mobile-blocspace-analytics-canvas .is-member-tag {
    color: var(--analytics-accent) !important;
    -webkit-text-fill-color: var(--analytics-accent) !important;
}

/* Top Engagers rows read as an open list, not cards. The global
   `button, .btn` glass rule in mobile.html hands every button a blur and a
   drop shadow; inline styles can't cancel a shadow they never set, so the
   rows picked up grey card edges against the white ground. Strip the glass
   here and let the hairline dividers carry the structure. */
html body #blocspace-modal .mobile-blocspace-engager-row,
html body .mobile-blocspace-engager-row {
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
    background: transparent !important;
}

html body #blocspace-modal .mobile-blocspace-engager-row:active,
html body .mobile-blocspace-engager-row:active {
    background: rgba(15, 23, 42, 0.04) !important;
}

html[data-theme="dark"] body .mobile-blocspace-engager-row,
body[data-theme="dark"] .mobile-blocspace-engager-row {
    border-bottom-color: rgba(255, 255, 255, 0.10) !important;
}

html[data-theme="dark"] body .mobile-blocspace-engager-row:active,
body[data-theme="dark"] .mobile-blocspace-engager-row:active {
    background: rgba(255, 255, 255, 0.06) !important;
}

/* Member grid tiles and the detail sheet draw their own borders. The global
   `button, .btn` glass rule in mobile.html would add a blur and drop shadow on
   top, which reads as a doubled card edge -- same trap as the engager rows. */
html body #blocspace-modal .mobile-blocspace-member-card,
html body .mobile-blocspace-member-card,
html body #blocspace-modal .mobile-blocspace-member-sheet button,
html body .mobile-blocspace-member-sheet button {
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html body #blocspace-modal .mobile-blocspace-member-card:active,
html body .mobile-blocspace-member-card:active {
    background: rgba(15, 23, 42, 0.04) !important;
}

html[data-theme="dark"] body .mobile-blocspace-member-card,
body[data-theme="dark"] .mobile-blocspace-member-card {
    border-color: rgba(255, 255, 255, 0.14) !important;
}

html[data-theme="dark"] body .mobile-blocspace-member-card:active,
body[data-theme="dark"] .mobile-blocspace-member-card:active {
    background: rgba(255, 255, 255, 0.06) !important;
}

/* Closed drawers were parked with transform: translateX(100%) only, which slides
   them out of sight but leaves them laid out -- the body measured 948px against a
   430px viewport, so the whole app could be dragged sideways into dead space on
   iOS (overflow-x:hidden does not stop touch panning there).
   visibility:hidden keeps the slide animation (unlike display:none) while taking
   the closed drawer out of the scrollable area. */
html body #market-drawer.market-drawer-hidden,
html body #ai-drawer.ai-drawer-hidden {
    /* visibility:hidden still occupies layout, so it did not shrink the page.
       Pinning the closed drawer to the viewport's own right edge keeps it
       off-screen without extending the scrollable width, and leaves the
       translateX slide animation untouched. */
    visibility: hidden;
    /* !important because #ai-drawer sets left/width inline, which otherwise wins. */
    left: auto !important;
    right: 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

/* Same fix as the market/AI drawers above, for the BlocSpace "Sections" nav
   drawer: transform: translateX(-100%) alone still leaves it laid out at its
   280px width, so a fixed-position element inside the scrollable
   #blocspace-modal-content can visually drift into view on iOS during
   scroll/touch instead of staying pinned off-screen. */
html body .mobile-blocspace-nav-drawer:not(.is-open) {
    visibility: hidden;
    left: auto !important;
    right: 100% !important;
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    border-right: 0 !important;
    overflow: hidden !important;
}

/* BlocSpace fills the screen, so nothing behind it should pan. The body already
   carries overflow:hidden while the modal is open, but it still accepted a
   horizontal scroll offset -- the page could be dragged sideways off the app,
   exposing a blank gutter. Clamp the width so there is nothing to scroll to. */
html body.blocspace-modal-open {
    max-width: 100vw !important;
    overflow-x: clip !important;
    overscroll-behavior-x: none !important;
}

html body.blocspace-modal-open #blocspace-modal {
    max-width: 100vw;
    overscroll-behavior-x: none;
}

/* The scroll container that renders every BlocSpace tab (Wallet included)
   only clamped overflow-y. Nothing stopped a misbehaving descendant (e.g.
   the Sections drawer above) from rendering past its horizontal edge, which
   is what let the Wallet screen appear to shift/drag sideways. Clip only
   blocks paint/scroll past this box's own edge -- it doesn't touch the
   independent overflow-y, any translateX slide animation, or the nested
   horizontal chip-scrollers other BlocSpace tabs use internally. */
html body #blocspace-modal-content {
    overflow-x: clip !important;
    overscroll-behavior-x: none !important;
}

/* Blocspace › Analytics.
 *
 * The section is a light dashboard with one dark hero card, set in Manrope
 * with IBM Plex Mono eyebrows. It lives inside #blocspace-modal-content, whose
 * id matches the theme's blanket `[id*="modal"] *` colour rules (black in
 * light, white in dark, both !important). Every colour here is therefore
 * written with html body + the content id in front of it and !important on
 * both color and -webkit-text-fill-color, or the hero's pale text turns to
 * ink the moment the light theme loads. Tokens flip for the dark themes. */

html body #blocspace-activity-content .bsa-root {
    --bsa-card: #FFFFFF;
    --bsa-line: #EAEAE6;
    --bsa-line2: #F1F1ED;
    --bsa-ink: #111214;
    --bsa-ink2: #4E4E4A;
    --bsa-mute: #63635F;
    --bsa-mute2: #70706B;
    --bsa-faint: #A3A3A0;
    --bsa-track: #F4F4F0;
    --bsa-pill: #F1F1ED;
    --bsa-chip: #EFEFEB;
    --bsa-thumb: #F4F4F0;
    --bsa-hero: #111214;
    --bsa-hero-on: #1D1E21;
    --bsa-hero-line: #2A2B2E;
    --bsa-hero-ink: #FBFBF9;
    --bsa-hero-mute: #8B8B85;
    --bsa-mint: #6FE3C6;
    --bsa-teal: #0FBFA4;
    --bsa-teal-ink: #0A6558;
    --bsa-teal-bg: #E4F5F1;
    --bsa-amber: #C2703A;
    --bsa-amber-ink: #8A5426;
    --bsa-amber-bg: #F7EDE2;
    --bsa-red: #A83E29;
    --bsa-red-bg: #FBEDE9;
    --bsa-salmon: #F09B84;
    --bsa-bar-lo: #D6D6D0;
    --bsa-bar-mid: #5C5D61;
    --bsa-shadow: 0 1px 2px rgba(17, 18, 20, 0.03);
    --bsa-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --bsa-sans: var(--font-family, Manrope), 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-family: var(--bsa-sans) !important;
    -webkit-font-smoothing: antialiased;
    display: block;
    padding: 2px 4px 28px;
    color: var(--bsa-ink) !important;
    -webkit-text-fill-color: var(--bsa-ink) !important;
}

html[data-theme="dark"] body #blocspace-activity-content .bsa-root,
html[data-theme="dark-accent"] body #blocspace-activity-content .bsa-root,
body[data-theme="dark"] #blocspace-activity-content .bsa-root,
body[data-theme="dark-accent"] #blocspace-activity-content .bsa-root {
    --bsa-card: #141517;
    --bsa-line: #26272B;
    --bsa-line2: #1F2023;
    --bsa-ink: #FBFBF9;
    --bsa-ink2: #D6D6D0;
    --bsa-mute: #9A9A94;
    --bsa-mute2: #8B8B85;
    --bsa-faint: #5C5D61;
    --bsa-track: #232428;
    --bsa-pill: #1F2023;
    --bsa-chip: #26272B;
    --bsa-thumb: #1F2023;
    --bsa-hero: #1A1B1E;
    --bsa-hero-on: #26272B;
    --bsa-hero-line: #33343A;
    --bsa-teal-bg: #0F2A25;
    --bsa-teal-ink: #6FE3C6;
    --bsa-amber-bg: #2B1F14;
    --bsa-amber-ink: #E0A874;
    --bsa-red-bg: #2E1712;
    --bsa-red: #F09B84;
    --bsa-bar-lo: #3A3B40;
    --bsa-bar-mid: #8B8B85;
    --bsa-shadow: none;
}

/* The theme forces its display face on every element with !important; the
   dashboard is Manrope, so the family is restated at the same weight here and
   the mono roles below outrank it (:where keeps this one weak). */
html body #blocspace-activity-content .bsa-root :where(*:not(.fas):not(.fa):not(.far):not(.fab)) {
    font-family: var(--bsa-sans) !important;
}

/* Type roles. Each carries its own colour so the blanket rules never win. */
html body #blocspace-activity-content .bsa-root .bsa-eyebrow {
    font-family: var(--bsa-mono) !important;
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bsa-mute2) !important;
    -webkit-text-fill-color: var(--bsa-mute2) !important;
}

html body #blocspace-activity-content .bsa-root .bsa-mono {
    font-family: var(--bsa-mono) !important;
    font-size: 9px;
    letter-spacing: 0.08em;
    color: var(--bsa-mute2) !important;
    -webkit-text-fill-color: var(--bsa-mute2) !important;
}

html body #blocspace-activity-content .bsa-root .bsa-ink {
    color: var(--bsa-ink) !important;
    -webkit-text-fill-color: var(--bsa-ink) !important;
}

html body #blocspace-activity-content .bsa-root .bsa-ink2 {
    color: var(--bsa-ink2) !important;
    -webkit-text-fill-color: var(--bsa-ink2) !important;
}

html body #blocspace-activity-content .bsa-root .bsa-mute {
    color: var(--bsa-mute) !important;
    -webkit-text-fill-color: var(--bsa-mute) !important;
}

/* Buttons here are plain boxes: the app's button chrome stays off them. */
html body #blocspace-activity-content .bsa-root button {
    -webkit-appearance: none !important;
    appearance: none !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    /* The theme blurs the backdrop of every button; on a flat pill that
       reads as a hairline seam between neighbours. */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    font: inherit !important;
    text-align: left;
    cursor: pointer;
    min-height: 0 !important;
    height: auto !important;
    width: auto;
    line-height: normal;
    border-radius: 0 !important;
}

/* Range pills */
html body #blocspace-activity-content .bsa-root .bsa-ranges {
    display: flex;
    gap: 4px;
    padding: 3px;
    margin: 6px 0 10px;
    background: var(--bsa-pill);
    border-radius: 12px;
}

html body #blocspace-activity-content .bsa-root .bsa-range {
    flex: 1 1 0;
    height: 32px !important;
    border-radius: 10px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
    color: var(--bsa-mute) !important;
    -webkit-text-fill-color: var(--bsa-mute) !important;
    transition: background .16s ease, color .16s ease;
}

html body #blocspace-activity-content .bsa-root .bsa-range.is-on {
    background: var(--bsa-hero) !important;
    color: var(--bsa-hero-ink) !important;
    -webkit-text-fill-color: var(--bsa-hero-ink) !important;
}

/* Hero */
html body #blocspace-activity-content .bsa-root .bsa-hero {
    padding: 15px;
    border-radius: 22px;
    background: var(--bsa-hero);
    box-shadow: 0 16px 34px -20px rgba(17, 18, 20, 0.66);
}

html body #blocspace-activity-content .bsa-root .bsa-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

html body #blocspace-activity-content .bsa-root .bsa-hero-top .bsa-eyebrow,
html body #blocspace-activity-content .bsa-root .bsa-hero-top .bsa-mono,
html body #blocspace-activity-content .bsa-root .bsa-hero-unit,
html body #blocspace-activity-content .bsa-root .bsa-hero-label,
html body #blocspace-activity-content .bsa-root .bsa-kpi-unit,
html body #blocspace-activity-content .bsa-root .bsa-kpi-label,
html body #blocspace-activity-content .bsa-root .bsa-kpi-delta {
    color: var(--bsa-hero-mute) !important;
    -webkit-text-fill-color: var(--bsa-hero-mute) !important;
}

html body #blocspace-activity-content .bsa-root .bsa-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bsa-mint);
    flex: none;
    display: inline-block;
}

html body #blocspace-activity-content .bsa-root .bsa-hero-body {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
}

html body #blocspace-activity-content .bsa-root .bsa-hero-value {
    font-size: 44px;
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 0.95;
    color: var(--bsa-hero-ink) !important;
    -webkit-text-fill-color: var(--bsa-hero-ink) !important;
    font-variant-numeric: tabular-nums;
}

html body #blocspace-activity-content .bsa-root .bsa-hero-unit {
    font-family: var(--bsa-mono) !important;
    font-size: 14px;
}

html body #blocspace-activity-content .bsa-root .bsa-hero-label {
    font-family: var(--bsa-mono) !important;
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-top: 8px;
}

html body #blocspace-activity-content .bsa-root .bsa-spark {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 44px;
    flex: none;
    width: 132px;
}

html body #blocspace-activity-content .bsa-root .bsa-spark i {
    flex: 1 1 0;
    min-width: 0;
    border-radius: 2px;
    background: var(--bsa-hero-line);
    transition: height .22s ease;
    display: block;
}

html body #blocspace-activity-content .bsa-root .bsa-spark i.is-on {
    background: var(--bsa-mint);
}

html body #blocspace-activity-content .bsa-root .bsa-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin-top: 15px;
    background: var(--bsa-hero-line);
    border-radius: 14px;
    overflow: hidden;
}

html body #blocspace-activity-content .bsa-root .bsa-kpi {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 12px 12px 11px !important;
    background: var(--bsa-hero) !important;
    transition: background .16s ease;
}

html body #blocspace-activity-content .bsa-root .bsa-kpi.is-on {
    background: var(--bsa-hero-on) !important;
}

html body #blocspace-activity-content .bsa-root .bsa-kpi-value {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1;
    color: var(--bsa-hero-ink) !important;
    -webkit-text-fill-color: var(--bsa-hero-ink) !important;
    font-variant-numeric: tabular-nums;
}

html body #blocspace-activity-content .bsa-root .bsa-kpi.is-on .bsa-kpi-value {
    color: var(--bsa-mint) !important;
    -webkit-text-fill-color: var(--bsa-mint) !important;
}

html body #blocspace-activity-content .bsa-root .bsa-kpi-unit {
    font-family: var(--bsa-mono) !important;
    font-size: 10px;
}

html body #blocspace-activity-content .bsa-root .bsa-kpi-label {
    font-family: var(--bsa-mono) !important;
    font-size: 8px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html body #blocspace-activity-content .bsa-root .bsa-kpi-delta {
    font-family: var(--bsa-mono) !important;
    font-size: 8.5px;
    letter-spacing: 0.04em;
    margin-top: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html body #blocspace-activity-content .bsa-root .bsa-kpi-delta.is-up {
    color: var(--bsa-mint) !important;
    -webkit-text-fill-color: var(--bsa-mint) !important;
}

html body #blocspace-activity-content .bsa-root .bsa-kpi-delta.is-down {
    color: var(--bsa-salmon) !important;
    -webkit-text-fill-color: var(--bsa-salmon) !important;
}

/* Cards and section heads */
html body #blocspace-activity-content .bsa-root .bsa-card {
    background: var(--bsa-card);
    border: 1px solid var(--bsa-line);
    border-radius: 18px;
    box-shadow: var(--bsa-shadow);
}

html body #blocspace-activity-content .bsa-root .bsa-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 20px 4px 9px;
}

/* Flag */
html body #blocspace-activity-content .bsa-root .bsa-flag {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 12px 13px;
    border-radius: 16px;
}

html body #blocspace-activity-content .bsa-root .bsa-flag-icon {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    background: var(--bsa-teal-bg);
    color: var(--bsa-teal-ink) !important;
    -webkit-text-fill-color: var(--bsa-teal-ink) !important;
}

html body #blocspace-activity-content .bsa-root .bsa-flag.is-bad .bsa-flag-icon {
    background: var(--bsa-red-bg);
    color: var(--bsa-red) !important;
    -webkit-text-fill-color: var(--bsa-red) !important;
}

html body #blocspace-activity-content .bsa-root .bsa-flag-title {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.35;
    text-wrap: pretty;
}

html body #blocspace-activity-content .bsa-root .bsa-flag-meta {
    font-family: var(--bsa-mono) !important;
    font-size: 9.5px;
    margin-top: 4px;
    color: var(--bsa-mute) !important;
    -webkit-text-fill-color: var(--bsa-mute) !important;
}

html body #blocspace-activity-content .bsa-root .bsa-flag-go {
    font-size: 11px !important;
    font-weight: 700 !important;
    flex: none;
    color: var(--bsa-teal-ink) !important;
    -webkit-text-fill-color: var(--bsa-teal-ink) !important;
}

/* Retention */
html body #blocspace-activity-content .bsa-root .bsa-retention {
    padding: 14px;
}

html body #blocspace-activity-content .bsa-root .bsa-curve {
    position: relative;
    height: 74px;
}

html body #blocspace-activity-content .bsa-root .bsa-curve .bsa-grid {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--bsa-line2);
}

html body #blocspace-activity-content .bsa-root .bsa-curve .bsa-grid.is-base {
    background: var(--bsa-line);
}

/* Bars stop 18px short of the top so the marker label has a lane of its own. */
html body #blocspace-activity-content .bsa-root .bsa-bars {
    position: absolute;
    inset: 18px 0 0 0;
    display: flex;
    align-items: flex-end;
    gap: 3px;
}

html body #blocspace-activity-content .bsa-root .bsa-bars i {
    flex: 1 1 0;
    min-width: 0;
    display: block;
    border-radius: 3px 3px 1px 1px;
    background: var(--bsa-bar-lo);
    transition: height .24s ease;
}

html body #blocspace-activity-content .bsa-root .bsa-bars i.is-hi {
    background: var(--bsa-ink);
}

html body #blocspace-activity-content .bsa-root .bsa-bars i.is-mid {
    background: var(--bsa-bar-mid);
}

html body #blocspace-activity-content .bsa-root .bsa-cliff {
    position: absolute;
    top: -2px;
    bottom: 0;
    border-left: 1px dashed var(--bsa-mute2);
    padding-left: 5px;
    pointer-events: none;
}

html body #blocspace-activity-content .bsa-root .bsa-cliff.is-flip {
    border-left: 0;
    border-right: 1px dashed var(--bsa-mute2);
    padding-left: 0;
    padding-right: 5px;
    text-align: right;
}

html body #blocspace-activity-content .bsa-root .bsa-cliff span {
    font-family: var(--bsa-mono) !important;
    font-size: 8px;
    letter-spacing: 0.08em;
    background: var(--bsa-ink);
    border-radius: 4px;
    padding: 2px 5px;
    white-space: nowrap;
    color: var(--bsa-card) !important;
    -webkit-text-fill-color: var(--bsa-card) !important;
}

html body #blocspace-activity-content .bsa-root .bsa-axis {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
}

html body #blocspace-activity-content .bsa-root .bsa-axis span {
    font-family: var(--bsa-mono) !important;
    font-size: 8.5px;
    letter-spacing: 0.08em;
    color: var(--bsa-mute2) !important;
    -webkit-text-fill-color: var(--bsa-mute2) !important;
}

html body #blocspace-activity-content .bsa-root .bsa-stats {
    display: flex;
    gap: 8px;
    margin-top: 13px;
    padding-top: 13px;
    border-top: 1px solid var(--bsa-line2);
}

html body #blocspace-activity-content .bsa-root .bsa-stat {
    flex: 1 1 0;
    min-width: 0;
}

html body #blocspace-activity-content .bsa-root .bsa-stat-value {
    font-family: var(--bsa-mono) !important;
    font-size: 15px;
    letter-spacing: -0.01em;
    white-space: nowrap;
    color: var(--bsa-ink) !important;
    -webkit-text-fill-color: var(--bsa-ink) !important;
}

html body #blocspace-activity-content .bsa-root .bsa-stat-label {
    font-family: var(--bsa-mono) !important;
    font-size: 8.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 4px;
    color: var(--bsa-mute2) !important;
    -webkit-text-fill-color: var(--bsa-mute2) !important;
}

/* Sort chips */
html body #blocspace-activity-content .bsa-root .bsa-sorts {
    display: flex;
    gap: 5px;
}

html body #blocspace-activity-content .bsa-root .bsa-sort {
    height: 24px !important;
    padding: 0 9px !important;
    border-radius: 8px !important;
    display: flex;
    align-items: center;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    background: var(--bsa-card) !important;
    border: 1px solid var(--bsa-line) !important;
    color: var(--bsa-ink2) !important;
    -webkit-text-fill-color: var(--bsa-ink2) !important;
}

html body #blocspace-activity-content .bsa-root .bsa-sort.is-on {
    background: var(--bsa-ink) !important;
    border-color: var(--bsa-ink) !important;
    color: var(--bsa-card) !important;
    -webkit-text-fill-color: var(--bsa-card) !important;
}

/* Top bytes */
html body #blocspace-activity-content .bsa-root .bsa-bytes {
    overflow: hidden;
}

html body #blocspace-activity-content .bsa-root .bsa-byte {
    display: block;
    width: 100%;
    border-bottom: 1px solid var(--bsa-line2) !important;
}

html body #blocspace-activity-content .bsa-root .bsa-byte:last-child {
    border-bottom: 0 !important;
}

html body #blocspace-activity-content .bsa-root .bsa-byte-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 13px;
}

html body #blocspace-activity-content .bsa-root .bsa-byte-num {
    font-family: var(--bsa-mono) !important;
    font-size: 10px;
    width: 16px;
    flex: none;
    color: var(--bsa-mute) !important;
    -webkit-text-fill-color: var(--bsa-mute) !important;
}

html body #blocspace-activity-content .bsa-root .bsa-thumb {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 14px;
    border: 1px solid var(--bsa-line);
    background: var(--bsa-thumb);
    color: var(--bsa-ink2) !important;
    -webkit-text-fill-color: var(--bsa-ink2) !important;
}

html body #blocspace-activity-content .bsa-root .bsa-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

html body #blocspace-activity-content .bsa-root .bsa-byte-main {
    flex: 1 1 auto;
    min-width: 0;
}

html body #blocspace-activity-content .bsa-root .bsa-byte-title-row {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

html body #blocspace-activity-content .bsa-root .bsa-byte-title {
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    color: var(--bsa-ink) !important;
    -webkit-text-fill-color: var(--bsa-ink) !important;
}

html body #blocspace-activity-content .bsa-root .bsa-tag {
    flex: none;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: var(--bsa-chip);
    border-radius: 4px;
    padding: 3px 5px;
    color: var(--bsa-ink2) !important;
    -webkit-text-fill-color: var(--bsa-ink2) !important;
}

html body #blocspace-activity-content .bsa-root .bsa-byte-stats {
    font-family: var(--bsa-mono) !important;
    font-size: 10px;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--bsa-mute) !important;
    -webkit-text-fill-color: var(--bsa-mute) !important;
}

html body #blocspace-activity-content .bsa-root .bsa-chev {
    font-size: 12px;
    flex: none;
    color: var(--bsa-faint) !important;
    -webkit-text-fill-color: var(--bsa-faint) !important;
}

html body #blocspace-activity-content .bsa-root .bsa-byte-track {
    height: 3px;
    background: var(--bsa-track);
}

html body #blocspace-activity-content .bsa-root .bsa-byte-fill {
    height: 100%;
    background: var(--bsa-bar-lo);
    transition: width .22s ease;
}

html body #blocspace-activity-content .bsa-root .bsa-byte-fill.is-hi { background: var(--bsa-teal); }
html body #blocspace-activity-content .bsa-root .bsa-byte-fill.is-mid { background: var(--bsa-amber); }

html body #blocspace-activity-content .bsa-root .bsa-empty {
    padding: 16px 14px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--bsa-mute) !important;
    -webkit-text-fill-color: var(--bsa-mute) !important;
}

/* Two-up people cards */
html body #blocspace-activity-content .bsa-root .bsa-two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 20px;
}

html body #blocspace-activity-content .bsa-root .bsa-people {
    display: block;
    width: 100%;
    padding: 13px !important;
    border-radius: 16px !important;
    background: var(--bsa-card) !important;
    border: 1px solid var(--bsa-line) !important;
    box-shadow: var(--bsa-shadow) !important;
}

html body #blocspace-activity-content .bsa-root .bsa-people-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
}

html body #blocspace-activity-content .bsa-root .bsa-people-top .bsa-eyebrow {
    font-size: 8.5px;
    letter-spacing: 0.12em;
}

html body #blocspace-activity-content .bsa-root .bsa-count {
    font-family: var(--bsa-mono) !important;
    font-size: 12px;
    color: var(--bsa-ink) !important;
    -webkit-text-fill-color: var(--bsa-ink) !important;
}

html body #blocspace-activity-content .bsa-root .bsa-people-body {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    margin-top: 8px;
    text-wrap: pretty;
    color: var(--bsa-mute) !important;
    -webkit-text-fill-color: var(--bsa-mute) !important;
}

html body #blocspace-activity-content .bsa-root .bsa-people-body b {
    font-weight: 700;
    color: var(--bsa-ink) !important;
    -webkit-text-fill-color: var(--bsa-ink) !important;
}

/* Audience quality */
html body #blocspace-activity-content .bsa-root .bsa-quality {
    margin-top: 20px;
    padding: 15px;
    border-radius: 20px;
}

html body #blocspace-activity-content .bsa-root .bsa-grade {
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 5px;
    padding: 4px 7px;
    background: var(--bsa-red-bg);
    color: var(--bsa-red) !important;
    -webkit-text-fill-color: var(--bsa-red) !important;
}

html body #blocspace-activity-content .bsa-root .bsa-grade.is-building {
    background: var(--bsa-amber-bg);
    color: var(--bsa-amber-ink) !important;
    -webkit-text-fill-color: var(--bsa-amber-ink) !important;
}

html body #blocspace-activity-content .bsa-root .bsa-grade.is-strong {
    background: var(--bsa-teal-bg);
    color: var(--bsa-teal-ink) !important;
    -webkit-text-fill-color: var(--bsa-teal-ink) !important;
}

html body #blocspace-activity-content .bsa-root .bsa-score {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1;
    color: var(--bsa-ink) !important;
    -webkit-text-fill-color: var(--bsa-ink) !important;
    font-variant-numeric: tabular-nums;
}

html body #blocspace-activity-content .bsa-root .bsa-verdict {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.45;
    margin-top: 8px;
    text-wrap: pretty;
    color: var(--bsa-ink2) !important;
    -webkit-text-fill-color: var(--bsa-ink2) !important;
}

html body #blocspace-activity-content .bsa-root .bsa-benches {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid var(--bsa-line2);
}

html body #blocspace-activity-content .bsa-root .bsa-bench-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

html body #blocspace-activity-content .bsa-root .bsa-bench-label {
    font-size: 12px;
    font-weight: 600;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--bsa-ink2) !important;
    -webkit-text-fill-color: var(--bsa-ink2) !important;
}

html body #blocspace-activity-content .bsa-root .bsa-bench-value {
    font-family: var(--bsa-mono) !important;
    font-size: 11.5px;
    flex: none;
    color: var(--bsa-ink) !important;
    -webkit-text-fill-color: var(--bsa-ink) !important;
}

html body #blocspace-activity-content .bsa-root .bsa-bench-track {
    position: relative;
    height: 4px;
    border-radius: 2px;
    background: var(--bsa-line2);
    margin-top: 6px;
}

html body #blocspace-activity-content .bsa-root .bsa-bench-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 2px;
    background: var(--bsa-teal);
    transition: width .22s ease;
}

html body #blocspace-activity-content .bsa-root .bsa-bench-tick {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 1.5px;
    background: var(--bsa-ink);
    transform: translateX(-1px);
}

html body #blocspace-activity-content .bsa-root .bsa-foot {
    font-family: var(--bsa-mono) !important;
    font-size: 9px;
    letter-spacing: 0.06em;
    margin-top: 11px;
    color: var(--bsa-mute) !important;
    -webkit-text-fill-color: var(--bsa-mute) !important;
}

/* List sub-view (all engagers / all signups) */
html body #blocspace-activity-content .bsa-root .bsa-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 8px 2px 12px;
}

html body #blocspace-activity-content .bsa-root .bsa-list-title {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-top: 3px;
    color: var(--bsa-ink) !important;
    -webkit-text-fill-color: var(--bsa-ink) !important;
}

html body #blocspace-activity-content .bsa-root .bsa-close {
    width: 32px;
    height: 32px !important;
    border-radius: 10px !important;
    border: 1px solid var(--bsa-line) !important;
    background: var(--bsa-card) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px !important;
    flex: none;
    color: var(--bsa-ink) !important;
    -webkit-text-fill-color: var(--bsa-ink) !important;
}

html body #blocspace-activity-content .bsa-root .bsa-person {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 11px 13px !important;
    border-bottom: 1px solid var(--bsa-line2) !important;
}

html body #blocspace-activity-content .bsa-root .bsa-person:last-child {
    border-bottom: 0 !important;
}

html body #blocspace-activity-content .bsa-root .bsa-avatar {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    overflow: hidden;
    flex: none;
    display: grid;
    place-items: center;
    background: var(--bsa-thumb);
    border: 1px solid var(--bsa-line);
    font-size: 13px;
    font-weight: 800;
    color: var(--bsa-ink) !important;
    -webkit-text-fill-color: var(--bsa-ink) !important;
}

html body #blocspace-activity-content .bsa-root .bsa-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

html body #blocspace-activity-content .bsa-root .bsa-person-name {
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--bsa-ink) !important;
    -webkit-text-fill-color: var(--bsa-ink) !important;
}

html body #blocspace-activity-content .bsa-root .bsa-person-meta {
    font-family: var(--bsa-mono) !important;
    font-size: 10px;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--bsa-mute) !important;
    -webkit-text-fill-color: var(--bsa-mute) !important;
}

html body #blocspace-activity-content .bsa-root .bsa-person-side {
    flex: none;
    text-align: right;
}

/* Loading */
html body #blocspace-activity-content .bsa-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
    gap: 14px;
    font-family: var(--font-family, Manrope), 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary) !important;
    -webkit-text-fill-color: var(--text-secondary) !important;
}

html body #blocspace-activity-content .bsa-loading i {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 3px solid color-mix(in srgb, var(--text-primary) 12%, transparent);
    border-top-color: var(--text-primary);
    animation: spin 1s linear infinite;
    display: block;
}

/* Audience: three figures side by side, hairline between them. */
html body #blocspace-activity-content .bsa-root .bsa-audience {
    display: flex;
    gap: 1px;
    background: var(--bsa-line);
    overflow: hidden;
}

html body #blocspace-activity-content .bsa-root .bsa-audience-cell {
    flex: 1 1 0;
    min-width: 0;
    padding: 14px 13px;
    background: var(--bsa-card);
}

/* Blocspace › Wallet, Members, Messages — shared design language.
 *
 * Same system as the Analytics section: a pale ground, white cards with a
 * hairline border, one dark hero card, Manrope for words and IBM Plex Mono
 * for eyebrows and figures. All three sections render inside
 * #blocspace-modal-content, whose id matches the theme's blanket
 * `[id*="modal"] *` colour rules (!important, black in light, white in dark)
 * plus an !important Oxanium font and a backdrop blur on every button. Every
 * rule here is therefore written as `html body #blocspace-modal-content
 * .bsd-root …` with !important on colour, fill and family, or the theme wins.
 * Tokens flip for the dark themes. Class prefix: bsd- (Blocspace design). */

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root {
    --bsd-card: #FFFFFF;
    --bsd-card2: #FCFCFA;
    --bsd-line: #EAEAE6;
    --bsd-line2: #F1F1ED;
    --bsd-ink: #111214;
    --bsd-ink2: #4E4E4A;
    --bsd-mute: #63635F;
    --bsd-mute2: #70706B;
    --bsd-faint: #A3A3A0;
    --bsd-track: #F4F4F0;
    --bsd-pill: #F1F1ED;
    --bsd-chip: #EFEFEB;
    --bsd-chip2: #DEDED8;
    --bsd-thumb: #F1F1ED;
    --bsd-hero: #111214;
    --bsd-hero-on: #1D1E21;
    --bsd-hero-line: #2A2B2E;
    --bsd-hero-edge: #34353A;
    --bsd-hero-ink: #FBFBF9;
    --bsd-hero-mute: #8B8B85;
    --bsd-hero-soft: #B9B9B3;
    --bsd-mint: #6FE3C6;
    --bsd-teal: #0FBFA4;
    --bsd-teal-ink: #0A6558;
    --bsd-teal-bg: #E4F5F1;
    --bsd-amber: #C2703A;
    --bsd-amber-ink: #8A5426;
    --bsd-amber-bg: #F7EDE2;
    --bsd-red: #A83E29;
    --bsd-red-bg: #FDF6F4;
    --bsd-red-line: #EFDCD7;
    --bsd-bar-lo: #D6D6D0;
    --bsd-bar-mid: #5C5D61;
    --bsd-dash: #D6D6D0;
    --bsd-shadow: 0 1px 2px rgba(17, 18, 20, 0.03);
    --bsd-lift: 0 10px 24px -14px rgba(17, 18, 20, 0.38);
    --bsd-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --bsd-sans: var(--font-family, Manrope), 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-family: var(--bsd-sans) !important;
    -webkit-font-smoothing: antialiased;
    display: block;
    padding: 2px 4px 28px;
    color: var(--bsd-ink) !important;
    -webkit-text-fill-color: var(--bsd-ink) !important;
}

html[data-theme="dark"] body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root,
html[data-theme="dark-accent"] body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root,
body[data-theme="dark"] :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root,
body[data-theme="dark-accent"] :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root {
    --bsd-card: #141517;
    --bsd-card2: #1A1B1E;
    --bsd-line: #26272B;
    --bsd-line2: #1F2023;
    --bsd-ink: #FBFBF9;
    --bsd-ink2: #D6D6D0;
    --bsd-mute: #9A9A94;
    --bsd-mute2: #8B8B85;
    --bsd-faint: #5C5D61;
    --bsd-track: #232428;
    --bsd-pill: #1F2023;
    --bsd-chip: #26272B;
    --bsd-chip2: #33343A;
    --bsd-thumb: #1F2023;
    --bsd-hero: #1A1B1E;
    --bsd-hero-on: #26272B;
    --bsd-hero-line: #33343A;
    --bsd-hero-edge: #45464C;
    --bsd-teal-bg: #0F2A25;
    --bsd-teal-ink: #6FE3C6;
    --bsd-amber-bg: #2B1F14;
    --bsd-amber-ink: #E0A874;
    --bsd-red: #F09B84;
    --bsd-red-bg: #2E1712;
    --bsd-red-line: #4A2A22;
    --bsd-bar-lo: #3A3B40;
    --bsd-bar-mid: #8B8B85;
    --bsd-dash: #3A3B40;
    --bsd-shadow: none;
    --bsd-lift: none;
}

/* The theme forces its display face on every element; restate ours weakly
   (:where) so the mono roles below still win. Icons keep their own face. */
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root :where(*:not(.fas):not(.fa):not(.far):not(.fab)) {
    font-family: var(--bsd-sans) !important;
}

/* ---- type roles ------------------------------------------------------- */
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-eyebrow {
    font-family: var(--bsd-mono) !important;
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bsd-mute2) !important;
    -webkit-text-fill-color: var(--bsd-mute2) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-mono {
    font-family: var(--bsd-mono) !important;
    font-size: 9px;
    letter-spacing: 0.08em;
    color: var(--bsd-mute2) !important;
    -webkit-text-fill-color: var(--bsd-mute2) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-fig {
    font-family: var(--bsd-mono) !important;
    font-size: 13px;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    color: var(--bsd-ink) !important;
    -webkit-text-fill-color: var(--bsd-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-ink { color: var(--bsd-ink) !important; -webkit-text-fill-color: var(--bsd-ink) !important; }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-ink2 { color: var(--bsd-ink2) !important; -webkit-text-fill-color: var(--bsd-ink2) !important; }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-mute { color: var(--bsd-mute) !important; -webkit-text-fill-color: var(--bsd-mute) !important; }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-teal { color: var(--bsd-teal-ink) !important; -webkit-text-fill-color: var(--bsd-teal-ink) !important; }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-red { color: var(--bsd-red) !important; -webkit-text-fill-color: var(--bsd-red) !important; }

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-title {
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    color: var(--bsd-ink) !important;
    -webkit-text-fill-color: var(--bsd-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-meta {
    font-family: var(--bsd-mono) !important;
    font-size: 10px;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--bsd-mute) !important;
    -webkit-text-fill-color: var(--bsd-mute) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-sub {
    font-size: 11.5px;
    font-weight: 500;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--bsd-mute) !important;
    -webkit-text-fill-color: var(--bsd-mute) !important;
}

/* ---- buttons are plain boxes ----------------------------------------- */
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root button {
    -webkit-appearance: none !important;
    appearance: none !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    font: inherit !important;
    text-align: left;
    cursor: pointer;
    min-height: 0 !important;
    height: auto !important;
    width: auto;
    line-height: normal;
    border-radius: 0 !important;
    color: inherit;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root input {
    -webkit-appearance: none !important;
    appearance: none !important;
    border: 0 !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    letter-spacing: -0.015em;
    color: var(--bsd-ink) !important;
    -webkit-text-fill-color: var(--bsd-ink) !important;
}

/* The field draws its own clear control; the browser's stays off. */
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root input[type="search"]::-webkit-search-cancel-button,
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: none !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root input::placeholder {
    color: var(--bsd-faint) !important;
    -webkit-text-fill-color: var(--bsd-faint) !important;
    opacity: 1;
}

/* ---- pills (segmented control) ---------------------------------------- */
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-pills {
    display: flex;
    gap: 4px;
    padding: 3px;
    background: var(--bsd-pill);
    border-radius: 12px;
    min-width: 0;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-pill {
    flex: 1 1 0;
    min-width: 0;
    height: 32px !important;
    border-radius: 10px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
    white-space: nowrap;
    color: var(--bsd-mute) !important;
    -webkit-text-fill-color: var(--bsd-mute) !important;
    transition: background .16s ease, color .16s ease;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-pill.is-on {
    background: var(--bsd-hero) !important;
    color: var(--bsd-hero-ink) !important;
    -webkit-text-fill-color: var(--bsd-hero-ink) !important;
}

/* Light variant: the active pill is a white card on the grey tray. */
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-pills.is-soft .bsd-pill.is-on {
    background: var(--bsd-card) !important;
    box-shadow: 0 1px 3px rgba(17, 18, 20, 0.10) !important;
    color: var(--bsd-ink) !important;
    -webkit-text-fill-color: var(--bsd-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-pill .bsd-badge {
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--bsd-mono) !important;
    font-size: 9.5px;
    box-sizing: border-box;
    background: var(--bsd-chip2);
    color: var(--bsd-ink2) !important;
    -webkit-text-fill-color: var(--bsd-ink2) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-pill.is-on .bsd-badge {
    background: var(--bsd-hero);
    color: var(--bsd-hero-ink) !important;
    -webkit-text-fill-color: var(--bsd-hero-ink) !important;
}

/* ---- chips (filters) and sorts --------------------------------------- */
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-chips {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-chips::-webkit-scrollbar { display: none; }

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-chip {
    flex: none;
    display: flex;
    align-items: center;
    gap: 7px;
    height: 32px !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
    white-space: nowrap;
    background: var(--bsd-card) !important;
    border: 1px solid var(--bsd-line) !important;
    color: var(--bsd-ink2) !important;
    -webkit-text-fill-color: var(--bsd-ink2) !important;
    transition: background .16s ease, color .16s ease;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-chip .bsd-count {
    font-family: var(--bsd-mono) !important;
    font-size: 10px;
    color: var(--bsd-mute2) !important;
    -webkit-text-fill-color: var(--bsd-mute2) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-chip.is-on {
    background: var(--bsd-hero) !important;
    border-color: var(--bsd-hero) !important;
    color: var(--bsd-hero-ink) !important;
    -webkit-text-fill-color: var(--bsd-hero-ink) !important;
}

/* Labels are spans, and the theme's blanket rule paints spans on its own;
   the active chip and pill restate the colour on their children too. */
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-chip.is-on > span,
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-pill.is-on > span,
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-sort.is-on > span,
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-btn.is-primary > span,
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-hero-cta > span {
    color: var(--bsd-hero-ink) !important;
    -webkit-text-fill-color: var(--bsd-hero-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-pills.is-soft .bsd-pill.is-on > span {
    color: var(--bsd-ink) !important;
    -webkit-text-fill-color: var(--bsd-ink) !important;
}

/* Labels are spans, and the theme's blanket rule paints spans on its own;
   the active chip and pill restate the colour on their children too. */
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-chip.is-on > span,
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-pill.is-on > span,
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-sort.is-on > span,
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-btn.is-primary > span,
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-hero-cta > span {
    color: var(--bsd-hero-ink) !important;
    -webkit-text-fill-color: var(--bsd-hero-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-pills.is-soft .bsd-pill.is-on > span {
    color: var(--bsd-ink) !important;
    -webkit-text-fill-color: var(--bsd-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-chip.is-on .bsd-count {
    color: #A9B3B0 !important;
    -webkit-text-fill-color: #A9B3B0 !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-sorts { display: flex; gap: 5px; flex: none; }

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-sort {
    height: 24px !important;
    padding: 0 9px !important;
    border-radius: 8px !important;
    display: flex;
    align-items: center;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    white-space: nowrap;
    background: var(--bsd-card) !important;
    border: 1px solid var(--bsd-line) !important;
    color: var(--bsd-ink2) !important;
    -webkit-text-fill-color: var(--bsd-ink2) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-sort.is-on {
    background: var(--bsd-hero) !important;
    border-color: var(--bsd-hero) !important;
    color: var(--bsd-hero-ink) !important;
    -webkit-text-fill-color: var(--bsd-hero-ink) !important;
}

/* ---- cards, heads, dividers ------------------------------------------ */
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-card {
    background: var(--bsd-card);
    border: 1px solid var(--bsd-line);
    border-radius: 18px;
    box-shadow: var(--bsd-shadow);
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-card.is-list { overflow: hidden; }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-card.is-pad { padding: 14px; }

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 22px 4px 9px;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-head.is-tight { margin: 11px 4px 9px; }

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-link {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    white-space: nowrap;
    color: var(--bsd-teal-ink) !important;
    -webkit-text-fill-color: var(--bsd-teal-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-rule {
    height: 1px;
    background: var(--bsd-line2);
    margin: 13px 0;
}

/* Sticky filter deck that sits above a list (members, messages). */
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-deck {
    padding: 8px 0 12px;
    border-bottom: 1px solid var(--bsd-line2);
    display: grid;
    gap: 12px;
}

/* ---- hero (dark) ------------------------------------------------------ */
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-hero {
    padding: 16px;
    border-radius: 22px;
    background: var(--bsd-hero);
    box-shadow: 0 16px 34px -20px rgba(17, 18, 20, 0.66);
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-hero .bsd-eyebrow,
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-hero .bsd-mono,
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-hero .bsd-hero-mute {
    color: var(--bsd-hero-mute) !important;
    -webkit-text-fill-color: var(--bsd-hero-mute) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-hero-soft {
    font-family: var(--bsd-mono) !important;
    font-size: 10px;
    margin-top: 8px;
    color: var(--bsd-hero-soft) !important;
    -webkit-text-fill-color: var(--bsd-hero-soft) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-hero-value {
    font-size: 42px;
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 0.95;
    font-variant-numeric: tabular-nums;
    color: var(--bsd-hero-ink) !important;
    -webkit-text-fill-color: var(--bsd-hero-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-hero-cents {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--bsd-hero-mute) !important;
    -webkit-text-fill-color: var(--bsd-hero-mute) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-hero-unit {
    font-family: var(--bsd-mono) !important;
    font-size: 13px;
    color: var(--bsd-hero-mute) !important;
    -webkit-text-fill-color: var(--bsd-hero-mute) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--bsd-mono) !important;
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bsd-mint) !important;
    -webkit-text-fill-color: var(--bsd-mint) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bsd-mint);
    display: inline-block;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-status.is-off {
    color: #E0A874 !important;
    -webkit-text-fill-color: #E0A874 !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-status.is-off i { background: #E0A874; }

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin-top: 15px;
    background: var(--bsd-hero-line);
    border-radius: 14px;
    overflow: hidden;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-kpi {
    min-width: 0;
    padding: 12px;
    background: var(--bsd-hero);
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-kpi-value {
    font-family: var(--bsd-mono) !important;
    font-size: 15px;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--bsd-hero-ink) !important;
    -webkit-text-fill-color: var(--bsd-hero-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-kpi-label {
    font-family: var(--bsd-mono) !important;
    font-size: 8px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--bsd-hero-mute) !important;
    -webkit-text-fill-color: var(--bsd-hero-mute) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-hero-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-hero-cta {
    flex: 1 1 auto;
    height: 46px !important;
    border-radius: 14px !important;
    background: var(--bsd-hero-ink) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--bsd-mono) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bsd-hero) !important;
    -webkit-text-fill-color: var(--bsd-hero) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-hero-icon {
    flex: none;
    width: 46px;
    height: 46px !important;
    border-radius: 14px !important;
    border: 1px solid var(--bsd-hero-edge) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px !important;
    color: var(--bsd-hero-ink) !important;
    -webkit-text-fill-color: var(--bsd-hero-ink) !important;
}

/* ---- light KPI strip -------------------------------------------------- */
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-strip {
    display: flex;
    gap: 1px;
    background: var(--bsd-line);
    border: 1px solid var(--bsd-line);
    border-radius: 14px;
    overflow: hidden;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-strip.is-round { border-radius: 18px; }

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-strip > div {
    flex: 1 1 0;
    min-width: 0;
    background: var(--bsd-card);
    padding: 11px 10px;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-strip .bsd-strip-value {
    font-family: var(--bsd-mono) !important;
    font-size: 15px;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--bsd-ink) !important;
    -webkit-text-fill-color: var(--bsd-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-strip .bsd-strip-label {
    font-family: var(--bsd-mono) !important;
    font-size: 7.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--bsd-mute2) !important;
    -webkit-text-fill-color: var(--bsd-mute2) !important;
}

/* ---- rows -------------------------------------------------------------- */
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-row {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 12px 13px !important;
    border-bottom: 1px solid var(--bsd-line2) !important;
    box-sizing: border-box;
    transition: background .14s ease;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-row.is-unread { background: var(--bsd-card2) !important; }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-row:last-child,
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-item:last-child > .bsd-row { border-bottom: 0 !important; }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-item { border-bottom: 1px solid var(--bsd-line2); }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-item:last-child { border-bottom: 0; }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-item > .bsd-row { border-bottom: 0 !important; }

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-num {
    font-family: var(--bsd-mono) !important;
    font-size: 10px;
    width: 17px;
    flex: none;
    color: var(--bsd-mute) !important;
    -webkit-text-fill-color: var(--bsd-mute) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-avatar {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: -0.02em;
    background: var(--bsd-thumb);
    color: var(--bsd-ink2) !important;
    -webkit-text-fill-color: var(--bsd-ink2) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-avatar.is-dark {
    background: var(--bsd-hero);
    color: var(--bsd-hero-ink) !important;
    -webkit-text-fill-color: var(--bsd-hero-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-avatar.is-small { width: 36px; height: 36px; border-radius: 11px; font-size: 11px; }

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-avatar-wrap { position: relative; flex: none; }

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-presence {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid var(--bsd-card);
    background: var(--bsd-bar-lo);
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-presence.is-on { background: var(--bsd-teal); }

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-main { flex: 1 1 auto; min-width: 0; }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-side { text-align: right; flex: none; }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-side .bsd-mono { display: block; margin-top: 4px; }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-title-row { display: flex; align-items: center; gap: 7px; min-width: 0; }

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-chev {
    font-size: 12px;
    flex: none;
    color: var(--bsd-faint) !important;
    -webkit-text-fill-color: var(--bsd-faint) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex: none;
    display: inline-block;
    background: var(--bsd-bar-lo);
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-dot.is-teal { background: var(--bsd-teal); }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-dot.is-amber { background: var(--bsd-amber); }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-dot.is-mid { background: var(--bsd-hero-soft); }

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-pip {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--bsd-mono) !important;
    font-size: 9.5px;
    box-sizing: border-box;
    background: var(--bsd-hero);
    color: var(--bsd-hero-ink) !important;
    -webkit-text-fill-color: var(--bsd-hero-ink) !important;
}

/* ---- tags -------------------------------------------------------------- */
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-tag {
    flex: none;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 4px;
    padding: 3px 5px;
    white-space: nowrap;
    background: var(--bsd-chip);
    color: var(--bsd-ink2) !important;
    -webkit-text-fill-color: var(--bsd-ink2) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-tag.is-teal {
    background: var(--bsd-teal-bg);
    color: var(--bsd-teal-ink) !important;
    -webkit-text-fill-color: var(--bsd-teal-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-tag.is-amber {
    background: var(--bsd-amber-bg);
    color: var(--bsd-amber-ink) !important;
    -webkit-text-fill-color: var(--bsd-amber-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-tag.is-red {
    background: var(--bsd-red-bg);
    color: var(--bsd-red) !important;
    -webkit-text-fill-color: var(--bsd-red) !important;
}

/* ---- bars and mixes --------------------------------------------------- */
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-track { height: 3px; background: var(--bsd-track); }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-track.is-thin { height: 4px; border-radius: 2px; overflow: hidden; background: var(--bsd-line2); }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-fill { height: 100%; background: var(--bsd-bar-lo); transition: width .22s ease; }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-fill.is-hi { background: var(--bsd-teal); }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-fill.is-mid { background: var(--bsd-amber); }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-fill.is-ink { background: var(--bsd-ink); border-radius: 2px; }

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-mix {
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    gap: 1px;
    background: var(--bsd-line2);
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-mix i { display: block; height: 100%; }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-mix-list { display: flex; flex-direction: column; gap: 9px; margin-top: 13px; }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-mix-row { display: flex; align-items: center; gap: 9px; }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-swatch { width: 8px; height: 8px; border-radius: 3px; flex: none; display: inline-block; }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-mix-label { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--bsd-ink2) !important; -webkit-text-fill-color: var(--bsd-ink2) !important; }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-mix-pct { font-family: var(--bsd-mono) !important; font-size: 9.5px; flex: none; width: 34px; text-align: right; color: var(--bsd-mute) !important; -webkit-text-fill-color: var(--bsd-mute) !important; }

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .c-ink { background: var(--bsd-ink); }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .c-teal { background: var(--bsd-teal); }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .c-amber { background: var(--bsd-amber); }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .c-grey { background: var(--bsd-bar-lo); }

/* ---- search ------------------------------------------------------------ */
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-search {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 42px;
    padding: 0 13px;
    border-radius: 14px;
    background: var(--bsd-card);
    border: 1px solid var(--bsd-line);
    box-shadow: var(--bsd-shadow);
    box-sizing: border-box;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-search > i.fas {
    font-size: 12px;
    flex: none;
    color: var(--bsd-ink2) !important;
    -webkit-text-fill-color: var(--bsd-ink2) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-search input { flex: 1 1 auto; min-width: 0; }

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-clear {
    flex: none;
    width: 20px;
    height: 20px !important;
    border-radius: 50% !important;
    background: var(--bsd-chip) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px !important;
    color: var(--bsd-ink2) !important;
    -webkit-text-fill-color: var(--bsd-ink2) !important;
}

/* ---- empty, loading, list head --------------------------------------- */
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-empty {
    padding: 30px 18px;
    text-align: center;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-empty-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--bsd-ink) !important;
    -webkit-text-fill-color: var(--bsd-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-empty-body {
    font-size: 12px;
    font-weight: 500;
    margin-top: 5px;
    line-height: 1.45;
    text-wrap: pretty;
    color: var(--bsd-mute) !important;
    -webkit-text-fill-color: var(--bsd-mute) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-note {
    padding: 14px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--bsd-mute) !important;
    -webkit-text-fill-color: var(--bsd-mute) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
    gap: 14px;
    font-family: var(--font-family, Manrope), 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary) !important;
    -webkit-text-fill-color: var(--text-secondary) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-loading i {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 3px solid color-mix(in srgb, var(--text-primary) 12%, transparent);
    border-top-color: var(--text-primary);
    animation: spin 1s linear infinite;
    display: block;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 8px 2px 12px;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-list-title {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-top: 3px;
    color: var(--bsd-ink) !important;
    -webkit-text-fill-color: var(--bsd-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-close {
    width: 32px;
    height: 32px !important;
    border-radius: 10px !important;
    border: 1px solid var(--bsd-line) !important;
    background: var(--bsd-card) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px !important;
    flex: none;
    color: var(--bsd-ink) !important;
    -webkit-text-fill-color: var(--bsd-ink) !important;
}

/* ---- action buttons and key/value lists ------------------------------ */
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-actions { display: flex; gap: 7px; }

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-btn {
    flex: 1 1 0;
    height: 38px !important;
    border-radius: 12px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    text-align: center;
    padding: 0 6px !important;
    box-sizing: border-box;
    white-space: nowrap;
    border: 1px solid var(--bsd-line) !important;
    background: var(--bsd-card2) !important;
    color: var(--bsd-ink) !important;
    -webkit-text-fill-color: var(--bsd-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-btn.is-wide { flex: 1.6 1 0; }

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-btn.is-danger {
    border-color: var(--bsd-red-line) !important;
    background: var(--bsd-red-bg) !important;
    color: var(--bsd-red) !important;
    -webkit-text-fill-color: var(--bsd-red) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-btn.is-primary {
    border-color: var(--bsd-hero) !important;
    background: var(--bsd-hero) !important;
    color: var(--bsd-hero-ink) !important;
    -webkit-text-fill-color: var(--bsd-hero-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 12px;
    padding: 14px !important;
    border: 1px dashed var(--bsd-dash) !important;
    border-radius: 16px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    box-sizing: border-box;
    color: var(--bsd-ink2) !important;
    -webkit-text-fill-color: var(--bsd-ink2) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-kv {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: 11px;
    background: var(--bsd-line2);
    border-radius: 12px;
    overflow: hidden;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-kv > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--bsd-card);
    padding: 11px 12px;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-kv-label {
    font-size: 12.5px;
    font-weight: 600;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--bsd-ink2) !important;
    -webkit-text-fill-color: var(--bsd-ink2) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-kv-value {
    font-family: var(--bsd-mono) !important;
    font-size: 10.5px;
    flex: none;
    color: var(--bsd-ink) !important;
    -webkit-text-fill-color: var(--bsd-ink) !important;
}

/* Expanding subscription card */
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-subcard {
    border-radius: 18px;
    background: var(--bsd-card);
    border: 1px solid var(--bsd-line);
    box-shadow: var(--bsd-shadow);
    transition: border-color .16s ease, box-shadow .16s ease;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-subcard.is-open {
    border-color: var(--bsd-ink);
    box-shadow: var(--bsd-lift);
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-subcard-head {
    display: block;
    width: 100%;
    padding: 14px !important;
    box-sizing: border-box;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-price {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--bsd-ink) !important;
    -webkit-text-fill-color: var(--bsd-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-big {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--bsd-ink) !important;
    -webkit-text-fill-color: var(--bsd-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-stack { display: flex; flex-direction: column; gap: 9px; }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

/* ---- messages ---------------------------------------------------------- */
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-compose {
    flex: none;
    width: 40px;
    height: 40px !important;
    border-radius: 14px !important;
    background: var(--bsd-hero) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px -12px rgba(17, 18, 20, 0.6) !important;
    color: var(--bsd-hero-ink) !important;
    -webkit-text-fill-color: var(--bsd-hero-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-compose i.fas {
    font-size: 13px;
    color: var(--bsd-hero-ink) !important;
    -webkit-text-fill-color: var(--bsd-hero-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-preview {
    font-size: 12.5px;
    font-weight: 500;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--bsd-mute) !important;
    -webkit-text-fill-color: var(--bsd-mute) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-preview.is-unread {
    font-weight: 700;
    color: var(--bsd-ink) !important;
    -webkit-text-fill-color: var(--bsd-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-title.is-unread { font-weight: 800; }

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-arrow {
    font-size: 11px;
    flex: none;
    color: var(--bsd-teal-ink) !important;
    -webkit-text-fill-color: var(--bsd-teal-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-arrow.is-missed {
    color: var(--bsd-red) !important;
    -webkit-text-fill-color: var(--bsd-red) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-round-btn {
    width: 32px;
    height: 32px !important;
    border-radius: 11px !important;
    border: 1px solid var(--bsd-line) !important;
    background: var(--bsd-card2) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    font-size: 12px !important;
    color: var(--bsd-ink) !important;
    -webkit-text-fill-color: var(--bsd-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-round-btn i.fas {
    color: var(--bsd-ink) !important;
    -webkit-text-fill-color: var(--bsd-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-trash {
    width: 28px;
    height: 28px !important;
    border-radius: 9px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    font-size: 11px !important;
    color: var(--bsd-faint) !important;
    -webkit-text-fill-color: var(--bsd-faint) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-trash i.fas {
    color: var(--bsd-faint) !important;
    -webkit-text-fill-color: var(--bsd-faint) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-side-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex: none;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-row[role="button"] { cursor: pointer; }

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-avatar.is-round { border-radius: 50%; }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-presence { border-radius: 50%; }

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-more-btn {
    width: 30px;
    height: 30px !important;
    border-radius: 50% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    font-size: 13px !important;
    color: var(--bsd-mute) !important;
    -webkit-text-fill-color: var(--bsd-mute) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-more-btn i.fas {
    color: var(--bsd-mute) !important;
    -webkit-text-fill-color: var(--bsd-mute) !important;
}

/* ---- Bloc Space header controls ----------------------------------------
   Back and Settings sit in a 36px circle with a hairline, the header control
   from the design files, so they read as buttons in both themes. */
html body #blocspace-modal-content .mobile-blocspace-header-button,
html[data-theme] body #blocspace-modal-content .mobile-blocspace-header-button,
html body[data-theme] #blocspace-modal-content .mobile-blocspace-header-button {
    width: 36px !important;
    height: 36px !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 4px !important;
    border-radius: 50% !important;
    border: 1px solid #EAEAE6 !important;
    background: #FFFFFF !important;
    background-image: none !important;
    box-shadow: 0 1px 2px rgba(17, 18, 20, 0.04) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: #111214 !important;
    -webkit-text-fill-color: #111214 !important;
    font-size: 14px !important;
    transition: transform .12s ease, border-color .12s ease !important;
}

html body #blocspace-modal-content .mobile-blocspace-header-button i {
    color: #111214 !important;
    -webkit-text-fill-color: #111214 !important;
    font-size: 14px !important;
}

html body #blocspace-modal-content .mobile-blocspace-header-button:active {
    transform: scale(0.94) !important;
    border-color: #111214 !important;
}

html[data-theme="dark"] body #blocspace-modal-content .mobile-blocspace-header-button,
html body[data-theme="dark"] #blocspace-modal-content .mobile-blocspace-header-button,
html[data-theme="dark-accent"] body #blocspace-modal-content .mobile-blocspace-header-button,
html body[data-theme="dark-accent"] #blocspace-modal-content .mobile-blocspace-header-button {
    border-color: #26272B !important;
    background: #141517 !important;
    box-shadow: none !important;
    color: #FBFBF9 !important;
    -webkit-text-fill-color: #FBFBF9 !important;
}

html[data-theme="dark"] body #blocspace-modal-content .mobile-blocspace-header-button i,
html body[data-theme="dark"] #blocspace-modal-content .mobile-blocspace-header-button i,
html[data-theme="dark-accent"] body #blocspace-modal-content .mobile-blocspace-header-button i,
html body[data-theme="dark-accent"] #blocspace-modal-content .mobile-blocspace-header-button i {
    color: #FBFBF9 !important;
    -webkit-text-fill-color: #FBFBF9 !important;
}

/* ---- calendar ---------------------------------------------------------- */
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-month {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1;
    margin-top: 5px;
    color: var(--bsd-ink) !important;
    -webkit-text-fill-color: var(--bsd-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-ctl {
    width: 30px;
    height: 30px !important;
    border-radius: 10px !important;
    border: 1px solid var(--bsd-line) !important;
    background: var(--bsd-card) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px !important;
    color: var(--bsd-ink) !important;
    -webkit-text-fill-color: var(--bsd-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-ctl.is-wide {
    width: auto;
    padding: 0 11px !important;
    font-family: var(--bsd-mono) !important;
    font-size: 9.5px !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-ctl.is-add {
    border-color: var(--bsd-hero) !important;
    background: var(--bsd-hero) !important;
    box-shadow: 0 8px 16px -10px rgba(17, 18, 20, 0.6) !important;
    font-size: 14px !important;
    color: var(--bsd-hero-ink) !important;
    -webkit-text-fill-color: var(--bsd-hero-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-dows {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    margin-top: 2px;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-dows > div {
    text-align: center;
    font-family: var(--bsd-mono) !important;
    font-size: 8.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bsd-mute2) !important;
    -webkit-text-fill-color: var(--bsd-mute2) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
    margin-top: -5px;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-cell {
    height: 44px !important;
    border-radius: 11px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 100%;
    transition: background .14s ease !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-cell.is-today { background: var(--bsd-pill) !important; }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-cell.is-on { background: var(--bsd-hero) !important; }

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-num {
    font-family: var(--bsd-mono) !important;
    font-size: 13.5px;
    line-height: 1;
    color: var(--bsd-ink) !important;
    -webkit-text-fill-color: var(--bsd-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-cell.is-today .bsd-cal-num { font-weight: 500; }

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-cell.is-out .bsd-cal-num {
    color: var(--bsd-faint) !important;
    -webkit-text-fill-color: var(--bsd-faint) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-cell.is-on .bsd-cal-num {
    color: var(--bsd-hero-ink) !important;
    -webkit-text-fill-color: var(--bsd-hero-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-dots { display: flex; gap: 2px; height: 4px; align-items: center; }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-dots i { width: 4px; height: 4px; border-radius: 50%; display: block; }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-dots i.c-on { background: var(--bsd-hero-ink); }

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-day-title {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--bsd-ink) !important;
    -webkit-text-fill-color: var(--bsd-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-event {
    display: flex;
    align-items: stretch;
    gap: 11px;
    width: 100%;
    padding: 12px !important;
    background: var(--bsd-card) !important;
    border: 1px solid var(--bsd-line) !important;
    border-radius: 16px !important;
    box-shadow: var(--bsd-shadow) !important;
    box-sizing: border-box;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-rail { width: 3px; border-radius: 2px; flex: none; display: block; }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-when { width: 52px; flex: none; text-align: left; }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-title.is-done { text-decoration: line-through; opacity: 0.6; }

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-hour {
    display: flex;
    gap: 10px;
    padding: 9px 13px;
    border-bottom: 1px solid var(--bsd-track);
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-hour:last-child { border-bottom: 0; }

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-block {
    display: block;
    width: 100%;
    border-radius: 12px !important;
    padding: 9px 11px !important;
    border-left: 3px solid var(--bsd-bar-lo) !important;
    background: var(--bsd-chip) !important;
    box-sizing: border-box;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-block-title {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--bsd-ink) !important;
    -webkit-text-fill-color: var(--bsd-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-block-meta {
    display: block;
    font-family: var(--bsd-mono) !important;
    font-size: 9.5px;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--bsd-mute) !important;
    -webkit-text-fill-color: var(--bsd-mute) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-block.is-booking { background: var(--bsd-hero) !important; border-left-color: var(--bsd-hero) !important; }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-block.is-booking .bsd-cal-block-title { color: var(--bsd-hero-ink) !important; -webkit-text-fill-color: var(--bsd-hero-ink) !important; }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-block.is-booking .bsd-cal-block-meta { color: var(--bsd-hero-mute) !important; -webkit-text-fill-color: var(--bsd-hero-mute) !important; }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-block.is-meeting { background: var(--bsd-teal-bg) !important; border-left-color: var(--bsd-teal) !important; }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-block.is-task { background: var(--bsd-amber-bg) !important; border-left-color: var(--bsd-amber) !important; }

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-now {
    position: absolute;
    left: 0;
    right: 0;
    top: 14px;
    height: 1.5px;
    background: var(--bsd-red);
    pointer-events: none;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-now span {
    position: absolute;
    left: -4px;
    top: -3px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--bsd-red);
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-date {
    width: 44px;
    flex: none;
    text-align: center;
    border-right: 1px solid var(--bsd-line2);
    padding: 2px 0;
}

/* ---- calendar detail sheet ---------------------------------------------
   Mounted on <body> so it rides over the tab rail. Position comes from a
   class, not an inline style: the light theme paints every descendant of an
   inline `position: fixed` element black. */
html body #blocspace-calendar-sheet {
    position: fixed;
    inset: 0;
    /* The Bloc Space modal lives near the top of the stacking range; the
       sheet rides just above it, like the members sheet does. */
    z-index: 2147483200;
    pointer-events: none;
}

html body #blocspace-calendar-sheet .bsd-scrim {
    position: absolute;
    inset: 0;
    background: rgba(17, 18, 20, 0.42);
    opacity: 0;
    transition: opacity .22s ease;
}

html body #blocspace-calendar-sheet .bsd-sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 88vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 28px 28px 0 0;
    background: #FBFBF9;
    box-shadow: 0 -18px 48px -20px rgba(17, 18, 20, 0.5);
    transform: translateY(104%);
    transition: transform .28s cubic-bezier(.32, .72, 0, 1);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
}

html[data-theme="dark"] body #blocspace-calendar-sheet .bsd-sheet,
html body[data-theme="dark"] #blocspace-calendar-sheet .bsd-sheet,
html[data-theme="dark-accent"] body #blocspace-calendar-sheet .bsd-sheet,
html body[data-theme="dark-accent"] #blocspace-calendar-sheet .bsd-sheet {
    background: #0E0F11;
}

html body #blocspace-calendar-sheet.is-open { pointer-events: auto; }
html body #blocspace-calendar-sheet.is-open .bsd-scrim { opacity: 1; }
html body #blocspace-calendar-sheet.is-open .bsd-sheet { transform: translateY(0); }

html body #blocspace-calendar-sheet .bsd-grabber {
    width: 38px;
    height: 4px;
    border-radius: 2px;
    margin: 9px auto 4px;
    background: var(--bsd-chip2, #DEDED8);
}

html body #blocspace-calendar-sheet .bsd-root { padding: 8px 18px 0; }

html body #blocspace-calendar-sheet .bsd-root .bsd-sheet-title {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.2;
    margin-top: 8px;
    text-wrap: pretty;
    color: var(--bsd-ink) !important;
    -webkit-text-fill-color: var(--bsd-ink) !important;
}

html body #blocspace-calendar-sheet .bsd-root .bsd-sheet-cta {
    width: 100%;
    height: 50px !important;
    margin-top: 12px;
    border-radius: 15px !important;
    background: var(--bsd-hero) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 24px -14px rgba(17, 18, 20, 0.55) !important;
    font-family: var(--bsd-mono) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--bsd-hero-ink) !important;
    -webkit-text-fill-color: var(--bsd-hero-ink) !important;
}

html body #blocspace-calendar-sheet .bsd-root .bsd-kv > div .bsd-kv-value.is-strong {
    font-family: var(--bsd-sans) !important;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Bloc Space Messages
   A focused communications surface that follows the Bloc Space Home language. */

#blocspace-section-dms {
    /* The design root paints its own cards; the section stays on the theme ground. */
    background: transparent !important;
}

#blocspace-section-dms .mobile-blocspace-messages-shell {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 10px 22px 96px;
    background: #fff !important;
}

#blocspace-section-dms .mobile-blocspace-messages-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    padding-bottom: 8px;
}

#blocspace-section-dms .mobile-blocspace-messages-actions button[hidden] {
    display: none !important;
}

#blocspace-section-dms .mobile-blocspace-messages-actions button,
#blocspace-section-dms .mobile-blocspace-messages-actions button[data-mobile-message-compose] {
    width: 38px !important;
    min-width: 38px;
    height: 38px !important;
    padding: 0 !important;
    border: 1px solid color-mix(in srgb, var(--text-primary, #1A1917) 10%, transparent) !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--surface-color, #fff) 62%, transparent) !important;
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    color: var(--text-primary, #1A1917) !important;
    -webkit-text-fill-color: var(--text-primary, #1A1917) !important;
    box-shadow: 0 1px 2px color-mix(in srgb, #000 6%, transparent),
                inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent) !important;
    font-size: 13px;
    font-weight: 500;
}

#blocspace-section-dms .mobile-blocspace-messages-actions button i,
#blocspace-section-dms .mobile-blocspace-messages-actions button span {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}

#blocspace-section-dms .mobile-blocspace-messages-toolbar {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin: 0 -22px;
    padding: 0 22px;
    border-bottom: 0;
}

#blocspace-section-dms .mobile-blocspace-messages-filters {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 0;
    border: 0;
    overflow: visible;
}

#blocspace-section-dms .mobile-blocspace-messages-filters button {
    position: relative;
    min-width: 0;
    min-height: 44px;
    padding: 8px 0 10px;
    gap: 7px;
    justify-content: flex-start;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--text-primary, #1A1917) !important;
    -webkit-text-fill-color: var(--text-primary, #1A1917) !important;
    box-shadow: none !important;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .35;
}

#blocspace-section-dms .mobile-blocspace-messages-filters button::after {
    content: '';
    position: absolute;
    right: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    border-radius: 0;
    background: transparent;
}

#blocspace-section-dms .mobile-blocspace-messages-filters button.is-active,
#blocspace-section-dms .mobile-blocspace-messages-filters button.is-active * {
    color: var(--text-primary, #050505) !important;
    -webkit-text-fill-color: var(--text-primary, #050505) !important;
    opacity: 1;
}

#blocspace-section-dms .mobile-blocspace-messages-filters button.is-active::after {
    background: var(--text-primary, #050505);
}

#blocspace-section-dms .mobile-blocspace-messages-filters button b {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-primary, #050505) 7%, transparent);
    color: inherit;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
}

/* Search is always on the page -- an inbox you cannot search is a list you
   have to scroll. Open and closed look the same; only focus differs. */
#blocspace-section-dms .mobile-blocspace-messages-searchbar {
    margin: 14px 0 6px;
    padding: 0 14px !important;
    min-height: 44px;
    gap: 10px;
    border: 0 !important;
    border-radius: 12px !important;
    background: color-mix(in srgb, var(--text-primary, #050505) 5%, transparent) !important;
    box-shadow: none !important;
}

/* The bar is always in its open form now, so this carries the field look. */
#blocspace-section-dms .mobile-blocspace-messages-searchbar.is-open {
    margin: 14px 0 6px;
    padding: 0 14px !important;
    min-height: 44px;
    gap: 10px;
    border: 0 !important;
    border-bottom: 0 !important;
    border-radius: 12px !important;
    background: color-mix(in srgb, var(--text-primary, #050505) 5%, transparent) !important;
    box-shadow: none !important;
}

#blocspace-section-dms .mobile-blocspace-messages-searchbar.is-open input {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

#blocspace-section-dms .mobile-blocspace-messages-latest {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 4px 0 0;
}

#blocspace-section-dms .mobile-blocspace-messages-row {
    grid-template-columns: 56px minmax(0, 1fr) auto;
    min-height: 76px;
    gap: 16px;
    padding: 10px 0;
    border: 0 !important;
    border-bottom: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#blocspace-section-dms .mobile-blocspace-messages-avatar {
    width: 56px;
    height: 56px;
    min-width: 56px;
    max-width: 56px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-primary, #050505) 8%, transparent);
    font-size: 15px;
    font-weight: 500;
}

#blocspace-section-dms .mobile-blocspace-messages-row-copy {
    gap: 3px;
}

#blocspace-section-dms .mobile-blocspace-messages-row-copy strong {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.2px;
}

#blocspace-section-dms .mobile-blocspace-messages-row-copy span,
#blocspace-section-dms .mobile-blocspace-messages-row-copy em {
    color: var(--text-secondary, #7E7A72);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
}

#blocspace-section-dms .mobile-blocspace-messages-row.is-unread .mobile-blocspace-messages-row-copy strong {
    font-weight: 700;
}

#blocspace-section-dms .mobile-blocspace-messages-row.is-unread .mobile-blocspace-messages-row-copy em {
    color: var(--text-primary, #1A1917);
    font-weight: 400;
}

#blocspace-section-dms .mobile-blocspace-messages-row.is-call-row.is-missed .mobile-blocspace-messages-row-copy em {
    color: #c23b3b;
    font-weight: 720;
}

/* Email is an inbox, not a three-line activity feed. Keep the sender and
   subject scannable, then let the thread reader carry the full preview. */
#blocspace-section-dms .mobile-blocspace-messages-row.is-email-row {
    grid-template-columns: 46px minmax(0, 1fr) auto;
    min-height: 66px;
    padding: 10px 0;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important;
}

#blocspace-section-dms .mobile-blocspace-messages-row.is-email-row .mobile-blocspace-messages-row-copy {
    gap: 3px;
}

#blocspace-section-dms .mobile-blocspace-messages-row.is-email-row .mobile-blocspace-messages-row-copy strong {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #151515;
    font-size: 14px;
    font-weight: 720;
    line-height: 1.15;
}

#blocspace-section-dms .mobile-blocspace-messages-row.is-email-row .mobile-blocspace-messages-row-copy span {
    overflow: hidden;
    color: #595959;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#blocspace-section-dms .mobile-blocspace-messages-row.is-email-row .mobile-blocspace-messages-row-copy em {
    display: none;
}

#blocspace-section-dms .mobile-blocspace-messages-row.is-email-row .mobile-blocspace-messages-row-meta {
    min-width: 44px;
    padding-top: 2px;
    color: #777;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important;
    font-size: 10px;
    font-weight: 600;
    text-align: right;
}

#blocspace-section-dms .mobile-blocspace-messages-row-meta {
    align-self: start;
    padding-top: 4px;
    color: var(--text-secondary, #7E7A72);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#blocspace-section-dms .mobile-blocspace-messages-row-meta b {
    width: 6px;
    height: 6px;
    background: var(--analytics-accent, #4B4CE0);
}

#blocspace-section-dms .mobile-blocspace-messages-row-delete {
    display: none !important;
}

#blocspace-section-dms .mobile-blocspace-messages-empty,
#blocspace-section-dms .mobile-blocspace-messages-loading {
    min-height: 240px;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#blocspace-section-dms .mobile-blocspace-messages-empty i {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: #f5f5f5;
    color: #5f5f5f;
    font-size: 16px;
}

#blocspace-section-dms .mobile-blocspace-messages-empty strong {
    color: #111;
    font-size: 18px;
    font-weight: 850;
    letter-spacing: -.02em;
}

#blocspace-section-dms .mobile-blocspace-messages-empty span {
    max-width: 250px;
    color: #777;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.45;
}

body.blocspace-modal-open #pwa-install-banner,
body.blocspace-modal-open #bloc-install-banner {
    display: none !important;
}

html[data-theme="dark"] #blocspace-section-dms .mobile-blocspace-messages-actions button,
body[data-theme="dark"] #blocspace-section-dms .mobile-blocspace-messages-actions button,
html[data-theme="dark-accent"] #blocspace-section-dms .mobile-blocspace-messages-actions button,
body[data-theme="dark-accent"] #blocspace-section-dms .mobile-blocspace-messages-actions button {
    border-color: #dedede !important;
    background: #fff !important;
    color: #080808 !important;
    -webkit-text-fill-color: #080808 !important;
}

body.blocspace-modal-open #blocspace-modal,
body.blocspace-modal-open #blocspace-modal-content {
    background: #fff !important;
}

/* The reader defaults to a clean, legible version of an email. Provider HTML
   remains available on demand, but cannot turn the primary reading surface into
   a shrunken newsletter or receipt. */
#mobile-blocspace-email-reader {
    background: #fff !important;
    color: #111 !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important;
}

#mobile-blocspace-email-reader :not(i),
#mobile-blocspace-email-reader textarea {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important;
}

#mobile-blocspace-email-reader .mobile-blocspace-email-reader-panel,
#mobile-blocspace-email-reader .mobile-blocspace-email-reader-head,
#mobile-blocspace-email-reader .mobile-blocspace-email-reader-body {
    background: #fff !important;
}

#mobile-blocspace-email-reader .mobile-blocspace-email-reader-head {
    min-height: 58px;
    border-bottom: 1px solid #ededed !important;
}

#mobile-blocspace-email-reader .mobile-blocspace-email-reader-head button {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: #f3f3f3 !important;
}

#mobile-blocspace-email-reader .mobile-blocspace-email-reader-body {
    padding: 0 18px calc(126px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 0 !important;
}

#mobile-blocspace-email-reader .mobile-blocspace-email-thread-card {
    width: 100% !important;
    margin: 0 !important;
    padding: 16px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #ededed !important;
    background: transparent !important;
}

#mobile-blocspace-email-reader .mobile-blocspace-email-thread-card.is-email-summary {
    padding: 18px 0 15px !important;
}

#mobile-blocspace-email-reader .mobile-blocspace-email-summary-copy h1 {
    font-size: 17px !important;
    font-weight: 750 !important;
    letter-spacing: -.018em;
}

#mobile-blocspace-email-reader .mobile-blocspace-email-thread-message-head {
    margin-bottom: 8px;
}

#mobile-blocspace-email-reader .mobile-blocspace-email-thread-message-head strong {
    font-size: 14px !important;
    font-weight: 720 !important;
}

#mobile-blocspace-email-reader .mobile-blocspace-email-thread-card p {
    color: #333 !important;
    font-size: 14px !important;
    font-weight: 450 !important;
    line-height: 1.55 !important;
}

#mobile-blocspace-email-reader .mobile-blocspace-email-original {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid #eeeeee;
}

#mobile-blocspace-email-reader .mobile-blocspace-email-original summary {
    color: #666;
    font-size: 12px;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
}

#mobile-blocspace-email-reader .mobile-blocspace-email-html-frame {
    margin-top: 12px;
    border: 1px solid #ededed;
    border-radius: 12px;
}

#mobile-blocspace-email-reader .mobile-blocspace-email-reply button,
html body #mobile-blocspace-email-reader .mobile-blocspace-email-reply button {
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
    background: #111 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    box-shadow: none !important;
}

#mobile-blocspace-email-reader .mobile-blocspace-email-reply button i,
#mobile-blocspace-email-reader .mobile-blocspace-email-reply button i::before {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* Search reads as a field you can hit, not a hint sitting on the page. */
#blocspace-section-dms .mobile-blocspace-messages-searchbar > i {
    flex: 0 0 auto;
    color: var(--text-secondary, #7E7A72);
    font-size: 15px;
}

#blocspace-section-dms .mobile-blocspace-messages-searchbar input {
    min-height: 44px;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -.1px;
    color: var(--text-primary, #1A1917);
}

#blocspace-section-dms .mobile-blocspace-messages-searchbar input::placeholder {
    color: var(--text-secondary, #7E7A72);
    font-weight: 400;
}

/* The list needs room to breathe under the controls. */
#blocspace-section-dms .mobile-blocspace-messages-latest-list,
#blocspace-section-dms #mobile-blocspace-messages-latest-list {
    padding-top: 6px;
}

/* Messages, opened up.
 *
 * The inbox was a stack of containers: a grey tray for Inbox / Calls, a
 * boxed search, chip buttons, and the threads inside a bordered card with
 * 40px avatars. All of it comes off. The rows run edge to edge with a
 * hairline between them, the avatar is the row (72px), and the switch,
 * the search and the filters are words on the page rather than boxes. The
 * id is doubled so these outrank the shared bsd sheet's !important rules. */
html body #blocspace-section-dms#blocspace-section-dms .mobile-blocspace-messages-shell {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

html body #blocspace-section-dms#blocspace-section-dms .bsd-root .bsd-deck {
    padding: 4px 2px 10px !important;
    border-bottom: 0 !important;
    gap: 10px !important;
}

/* Inbox / Calls: two words, the current one in ink with a bar under it. */
html body #blocspace-section-dms#blocspace-section-dms .bsd-root .bsd-pills.is-soft {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    gap: 22px !important;
    justify-content: flex-start !important;
}

html body #blocspace-section-dms#blocspace-section-dms .bsd-root .bsd-pill {
    position: relative !important;
    flex: 0 0 auto !important;
    height: 36px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    color: var(--bsd-mute) !important;
    -webkit-text-fill-color: var(--bsd-mute) !important;
}

html body #blocspace-section-dms#blocspace-section-dms .bsd-root .bsd-pill.is-on {
    background: transparent !important;
    color: var(--bsd-ink) !important;
    -webkit-text-fill-color: var(--bsd-ink) !important;
}

html body #blocspace-section-dms#blocspace-section-dms .bsd-root .bsd-pill.is-on::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 3px !important;
    border-radius: 999px !important;
    background: var(--bsd-ink) !important;
}

/* Search: a line, not a box. */
html body #blocspace-section-dms#blocspace-section-dms .bsd-root .bsd-search {
    height: 44px !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--bsd-line2) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body #blocspace-section-dms#blocspace-section-dms .bsd-root .bsd-search input {
    font-size: 15px !important;
    font-weight: 600 !important;
}

/* All · Unread: words with a count, the current one in ink. */
html body #blocspace-section-dms#blocspace-section-dms .bsd-root .bsd-chips {
    gap: 18px !important;
    padding: 2px 0 0 !important;
}

html body #blocspace-section-dms#blocspace-section-dms .bsd-root .bsd-chip {
    height: 30px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--bsd-mute) !important;
    -webkit-text-fill-color: var(--bsd-mute) !important;
}

html body #blocspace-section-dms#blocspace-section-dms .bsd-root .bsd-chip.is-on {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--bsd-ink) !important;
    -webkit-text-fill-color: var(--bsd-ink) !important;
}

html body #blocspace-section-dms#blocspace-section-dms .bsd-root .bsd-chip .bsd-count {
    color: var(--bsd-mute2) !important;
    -webkit-text-fill-color: var(--bsd-mute2) !important;
}

/* The list head sits in the gutter the rows will ignore. */
html body #blocspace-section-dms#blocspace-section-dms .bsd-root .bsd-head.is-tight {
    margin: 14px 2px 6px !important;
}

/* The threads: no card, rows to the edges, a hairline between. */
html body #blocspace-section-dms#blocspace-section-dms .bsd-root .bsd-card.is-list {
    margin: 0 -18px !important;
}

html body #blocspace-section-dms#blocspace-section-dms .bsd-root .bsd-card.is-list,
html body #blocspace-section-dms#blocspace-section-dms .bsd-root .bsd-card.bsd-empty {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

html body #blocspace-section-dms#blocspace-section-dms .bsd-root .bsd-item {
    border-bottom: 1px solid var(--bsd-line2) !important;
}

html body #blocspace-section-dms#blocspace-section-dms .bsd-root .bsd-item:last-child {
    border-bottom: 0 !important;
}

html body #blocspace-section-dms#blocspace-section-dms .bsd-root .bsd-row {
    gap: 16px !important;
    padding: 14px 16px 14px 20px !important;
    min-height: 100px !important;
    border-bottom: 0 !important;
}

/* The avatar is the row. */
html body #blocspace-section-dms#blocspace-section-dms .bsd-root .bsd-row .bsd-avatar,
html body #blocspace-section-dms#blocspace-section-dms .bsd-root .bsd-row .bsd-avatar.is-round {
    width: 72px !important;
    height: 72px !important;
    border-radius: 22px !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
}

html body #blocspace-section-dms#blocspace-section-dms .bsd-root .bsd-row .bsd-title {
    font-size: 17px !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    line-height: 1.15 !important;
}

/* The chip's words are spans of their own; the base sheet paints the
   active one in the hero's white, which on this page is white on white. */
html body #blocspace-section-dms#blocspace-section-dms .bsd-root .bsd-chip span,
html body #blocspace-section-dms#blocspace-section-dms .bsd-root .bsd-chip.is-on span {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}

html body #blocspace-section-dms#blocspace-section-dms .bsd-root .bsd-chip.is-on span:first-child {
    color: var(--bsd-ink, #111214) !important;
    -webkit-text-fill-color: var(--bsd-ink, #111214) !important;
}

html body #blocspace-section-dms#blocspace-section-dms .bsd-root .bsd-row .bsd-preview {
    margin-top: 5px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    line-height: 1.3 !important;
}

html body #blocspace-section-dms#blocspace-section-dms .bsd-root .bsd-row .bsd-side-stack {
    align-self: flex-start !important;
    padding-top: 4px !important;
}

html body #blocspace-section-dms#blocspace-section-dms .bsd-root .bsd-row .bsd-more-btn {
    align-self: flex-start !important;
    margin-top: -2px !important;
}

/* Refresh rides the filter line, at the far right; the "5 threads" head is
   gone. */
html body #blocspace-section-dms#blocspace-section-dms .bsd-root .bsd-chips {
    align-items: center !important;
    overflow: visible !important;
}

html body #blocspace-section-dms#blocspace-section-dms .bsd-root .bsd-chips-refresh {
    margin-left: auto !important;
    flex: none !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

html body #blocspace-section-dms#blocspace-section-dms .bsd-root .bsd-deck + .bsd-card.is-list {
    margin-top: 8px !important;
}

/* A calm, contained inbox, including when the surrounding app uses glass. */
html body #blocspace-section-dms#blocspace-section-dms {
    background: #fff !important; color: #17181b; border-radius: 22px 22px 0 0;
    overflow: hidden; min-height: calc(100dvh - 100px);
}
html body #blocspace-section-dms#blocspace-section-dms .bsd-root {
    --bsd-ink: #17181b; --bsd-mute: #62666e; --bsd-mute2: #767b84;
    --bsd-line2: #e8e9ed; padding: 16px !important; min-width: 0;
}
html body #blocspace-section-dms#blocspace-section-dms .bsd-root .bsd-search {
    background: #f1f2f5 !important; border: 0 !important; border-radius: 12px !important; padding: 0 12px !important;
}
html body #blocspace-section-dms#blocspace-section-dms .bsd-root .bsd-card.is-list { margin: 0 !important; }
html body #blocspace-section-dms#blocspace-section-dms .bsd-root .bsd-row { padding: 16px 0 !important; gap: 12px !important; min-height: 80px !important; }
html body #blocspace-section-dms#blocspace-section-dms .bsd-root .bsd-row .bsd-avatar { width: 48px !important; height: 48px !important; flex: 0 0 48px; border-radius: 16px !important; }
html body #blocspace-section-dms#blocspace-section-dms .bsd-root .bsd-main { min-width: 0; flex: 1; overflow: hidden; }
html body #blocspace-section-dms#blocspace-section-dms .bsd-root .bsd-preview { overflow-wrap: anywhere; }

:is(html[data-theme="dark"], html[data-theme="dark-accent"], html[data-appearance="glass"]) body #blocspace-section-dms#blocspace-section-dms,
:is(html[data-theme="dark"], html[data-theme="dark-accent"], html[data-appearance="glass"]) body #blocspace-section-dms#blocspace-section-dms .mobile-blocspace-messages-shell {
    background: #17191e !important; color: #f4f5f7 !important;
}
:is(html[data-theme="dark"], html[data-theme="dark-accent"], html[data-appearance="glass"]) body #blocspace-section-dms#blocspace-section-dms .bsd-root {
    --bsd-ink: #f4f5f7; --bsd-mute: #b6bbc5; --bsd-mute2: #9da4b1; --bsd-line2: #363a43;
}
:is(html[data-theme="dark"], html[data-theme="dark-accent"], html[data-appearance="glass"]) body #blocspace-section-dms#blocspace-section-dms .bsd-root .bsd-search { background: #292d35 !important; }
html body #blocspace-section-dms#blocspace-section-dms .bsd-root .bsd-row .bsd-avatar.is-round {
    width: 48px !important; height: 48px !important; min-width: 48px !important;
    border-radius: 16px !important; overflow: hidden;
}
html body #blocspace-section-dms#blocspace-section-dms .bsd-root .bsd-row .bsd-avatar img { width: 100%; height: 100%; object-fit: cover; }
html body #blocspace-section-dms#blocspace-section-dms .bsd-root .bsd-row .bsd-side-stack { max-width: 48px; font-size: 10px; }
/* Glass is the surrounding canvas, not an opaque card inside it. */
html[data-appearance="glass"] body #blocspace-section-dms#blocspace-section-dms,
html[data-appearance="glass"] body #blocspace-section-dms#blocspace-section-dms .mobile-blocspace-messages-shell,
html[data-appearance="glass"] body #blocspace-section-dms#blocspace-section-dms .bsd-root,
html[data-appearance="glass"] body #blocspace-section-dms#blocspace-section-dms .bsd-root .bsd-deck,
html[data-appearance="glass"] body #blocspace-section-dms#blocspace-section-dms .bsd-root .bsd-card {
    background: transparent !important; border: 0 !important; border-radius: 0 !important;
    box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
html[data-appearance="glass"] body #blocspace-section-dms#blocspace-section-dms .bsd-root {
    --bsd-ink: #fff; --bsd-mute: rgba(255,255,255,.8); --bsd-mute2: rgba(255,255,255,.65);
    --bsd-line2: rgba(255,255,255,.16); --bsd-ink2: rgba(255,255,255,.85);
}
html[data-appearance="glass"] body #blocspace-section-dms#blocspace-section-dms .bsd-root .bsd-search,
html[data-appearance="glass"] body #blocspace-section-dms#blocspace-section-dms .bsd-root .bsd-compose {
    background: rgba(255,255,255,.12) !important; border: 1px solid rgba(255,255,255,.2) !important;
    color: #fff !important; -webkit-text-fill-color: #fff !important;
    backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important;
}

/* The search wrapper supplies the surface; the editable field stays open. */
html body #blocspace-section-dms#blocspace-section-dms .bsd-root .bsd-search input,
html body #blocspace-section-dms#blocspace-section-dms .bsd-root .bsd-search input:focus {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    outline: none !important;
}
html body #blocspace-section-dms#blocspace-section-dms .bsd-root .bsd-search input::placeholder {
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#fullscreen-chat-modal { --dm-bg: #fff; --dm-ink: #17181b; --dm-line: #e5e7eb; --dm-soft: #f0f1f4; --dm-sent: #202329; --dm-on-sent: #fff; }
:is(html[data-theme="dark"], html[data-theme="dark-accent"], html[data-appearance="glass"]) #fullscreen-chat-modal {
 --dm-bg: #17191e; --dm-ink: #f4f5f7; --dm-line: #363a43; --dm-soft: #292d35; --dm-sent: #e9edf5; --dm-on-sent: #17191e;
}
/* Bloc Space direct conversation
   Kept separate from the inbox so the full-screen chat can evolve independently. */

#fullscreen-chat-modal {
    background: var(--dm-bg) !important;
    color: var(--dm-ink) !important;
}

#fullscreen-chat-modal > div {
    background: var(--dm-bg) !important;
}

#fullscreen-chat-modal .chat-header {
    min-height: 66px !important;
    padding: calc(env(safe-area-inset-top, 0px) + 7px) 16px 8px !important;
    grid-template-columns: 38px minmax(0, 1fr) 38px !important;
    gap: 8px !important;
    background: var(--dm-bg) !important;
    border-bottom: 1px solid var(--dm-line) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

#fullscreen-chat-modal .chat-header > button {
    width: 38px !important;
    height: 38px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: var(--dm-ink) !important;
    -webkit-text-fill-color: var(--dm-ink) !important;
    box-shadow: none !important;
    font-size: 16px !important;
}

#fullscreen-chat-modal .chat-recipient-info {
    justify-content: center;
    gap: 9px !important;
}

#fullscreen-chat-modal .recipient-avatar {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: var(--dm-soft) !important;
    color: var(--dm-ink) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
}

#fullscreen-chat-modal .recipient-avatar img {
    border-radius: 50% !important;
}

#fullscreen-chat-modal .recipient-name {
    max-width: 170px !important;
    color: var(--dm-ink) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: -.01em !important;
}

#fullscreen-chat-modal .recipient-subtitle {
    color: #858585 !important;
    font-size: 10px !important;
    font-weight: 650 !important;
    letter-spacing: .02em !important;
    text-transform: none !important;
}

#fullscreen-chat-modal .chat-messages {
    gap: 7px !important;
    padding: calc(env(safe-area-inset-top, 0px) + 84px) 16px 92px !important;
    background: var(--dm-bg) !important;
}

#fullscreen-chat-modal .chat-day-separator {
    align-self: center;
    margin: 8px 0 10px;
    color: #999;
    font-size: 10px;
    font-weight: 700;
}

#fullscreen-chat-modal .chat-messages .message {
    gap: 3px !important;
    max-width: min(79%, 310px) !important;
}

#fullscreen-chat-modal .chat-messages .message.is-group-continuation {
    margin-top: -4px;
}

#fullscreen-chat-modal .chat-messages .message > .chat-message-bubble {
    padding: 10px 13px !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: var(--dm-soft) !important;
    color: var(--dm-ink) !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 560 !important;
    line-height: 1.38 !important;
    overflow-wrap: break-word !important;
}

html body #fullscreen-chat-modal .chat-messages .message.sent > .chat-message-bubble,
html body #fullscreen-chat-modal .chat-messages .message > .chat-message-bubble.is-sent {
    border-radius: 18px 18px 5px 18px !important;
    background: var(--dm-sent) !important;
    color: var(--dm-on-sent) !important;
    -webkit-text-fill-color: var(--dm-on-sent) !important;
}

html body #fullscreen-chat-modal .chat-messages .message.sent > .chat-message-bubble,
html body #fullscreen-chat-modal .chat-messages .message.sent > .chat-message-bubble *,
html body #fullscreen-chat-modal .chat-messages .message > .chat-message-bubble.is-sent,
html body #fullscreen-chat-modal .chat-messages .message > .chat-message-bubble.is-sent * {
    color: var(--dm-on-sent) !important;
    -webkit-text-fill-color: var(--dm-on-sent) !important;
}

#fullscreen-chat-modal .chat-messages .message.received > .chat-message-bubble,
#fullscreen-chat-modal .chat-messages .message > .chat-message-bubble.is-received {
    border-radius: 18px 18px 18px 5px !important;
}

#fullscreen-chat-modal .chat-messages .message > .chat-message-meta {
    padding: 0 4px !important;
    color: #999 !important;
    font-size: 9px !important;
    font-weight: 600 !important;
}

#fullscreen-chat-modal .chat-messages .message.is-optimistic {
    align-self: flex-end;
    max-width: min(79%, 310px);
    align-items: flex-end;
}

#fullscreen-chat-modal .chat-message-delivery {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: auto !important;
    min-width: 0 !important;
    height: 18px !important;
    margin: 1px 3px 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #999 !important;
    -webkit-text-fill-color: #999 !important;
    box-shadow: none !important;
    font-size: 9px !important;
    font-weight: 650 !important;
}

#fullscreen-chat-modal .chat-message-delivery i {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
    font-size: 8px !important;
}

#fullscreen-chat-modal .message.is-failed .chat-message-delivery {
    color: #c23b3b !important;
    -webkit-text-fill-color: #c23b3b !important;
    cursor: pointer;
}

#fullscreen-chat-modal .message.is-failed > .chat-message-bubble {
    background: #2a2a2a !important;
}

#fullscreen-chat-modal .chat-messages .message.sent:not(.is-group-end) > .chat-message-bubble,
#fullscreen-chat-modal .chat-messages .message.sent.is-group-continuation > .chat-message-bubble {
    border-bottom-right-radius: 5px !important;
}

#fullscreen-chat-modal .chat-messages .message.received:not(.is-group-end) > .chat-message-bubble,
#fullscreen-chat-modal .chat-messages .message.received.is-group-continuation > .chat-message-bubble {
    border-bottom-left-radius: 5px !important;
}

#fullscreen-chat-modal .chat-input-area {
    padding: 8px 14px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    background: var(--dm-bg) !important;
    border-top: 0 !important;
    box-shadow: none !important;
}

#fullscreen-chat-modal .chat-input-area > div {
    min-height: 48px !important;
    padding: 5px 5px 5px 15px !important;
    border: 1px solid var(--dm-line) !important;
    border-radius: 24px !important;
    background: var(--dm-bg) !important;
    box-shadow: none !important;
}

#fullscreen-chat-modal #chat-message-input {
    color: var(--dm-ink) !important;
    -webkit-text-fill-color: var(--dm-ink) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
}

#fullscreen-chat-modal #chat-message-input::placeholder {
    color: #8c8c8c !important;
    -webkit-text-fill-color: #8c8c8c !important;
}

html body #fullscreen-chat-modal .chat-input-area button {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: var(--dm-sent) !important;
    color: var(--dm-on-sent) !important;
    -webkit-text-fill-color: var(--dm-on-sent) !important;
    box-shadow: none !important;
}

html body #fullscreen-chat-modal .chat-input-area button i,
html body #fullscreen-chat-modal .chat-input-area button i::before {
    color: var(--dm-on-sent) !important;
    -webkit-text-fill-color: var(--dm-on-sent) !important;
}

#blocspace-section-dms .mobile-blocspace-message-contact-row {
    min-height: 64px;
    padding: 10px 0;
    border-bottom: 1px solid var(--dm-line);
    background: var(--dm-bg) !important;
    cursor: pointer;
}

#blocspace-section-dms .mobile-blocspace-message-contact-row button {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #f2f2f2 !important;
    color: var(--dm-ink) !important;
    -webkit-text-fill-color: var(--dm-ink) !important;
    box-shadow: none !important;
    font-size: 11px !important;
}

/* Intrinsic URL width must never determine the width of a conversation. */
html body #fullscreen-chat-modal { overflow: hidden !important; }
html body #fullscreen-chat-modal .chat-messages { min-width: 0; width: 100%; box-sizing: border-box; overflow-x: hidden; }
html body #fullscreen-chat-modal .chat-messages .message { min-width: 0; width: fit-content; max-width: min(86%, 360px) !important; }
html body #fullscreen-chat-modal .chat-message-bubble {
    min-width: 0; max-width: 100%; box-sizing: border-box;
    white-space: pre-wrap !important; overflow-wrap: anywhere !important; word-break: break-word;
}
html body #fullscreen-chat-modal .chat-input-area { box-sizing: border-box; max-width: 100%; }
html body #fullscreen-chat-modal #chat-message-input { min-width: 0; width: 100%; }
/* Glass follows the app wallpaper, with only controls and bubbles frosted. */
html[data-appearance="glass"] body #fullscreen-chat-modal {
    --dm-bg: transparent; --dm-ink: #fff; --dm-line: rgba(255,255,255,.18);
    --dm-soft: rgba(255,255,255,.12); --dm-sent: rgba(255,255,255,.26); --dm-on-sent: #fff;
    isolation: isolate;
    background: #393332 !important;
}
html[data-appearance="glass"] body #fullscreen-chat-modal::before {
    content: ''; position: absolute; inset: -24px; z-index: -1; pointer-events: none;
    background: linear-gradient(rgba(20,22,28,.38),rgba(20,22,28,.38)), var(--gl-wallpaper,linear-gradient(135deg,#4d4359,#806147 55%,#35495b));
    background-size: cover; background-position: center; filter: blur(24px);
}
html[data-appearance="glass"] body #fullscreen-chat-modal .chat-message-bubble,
html[data-appearance="glass"] body #fullscreen-chat-modal .chat-input-area > div {
    border: 1px solid var(--dm-line) !important;
    background: var(--dm-soft) !important;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
html[data-appearance="glass"] body #fullscreen-chat-modal #chat-message-input {
    background: transparent !important; border: 0 !important; box-shadow: none !important;
}
html[data-appearance="glass"] body #fullscreen-chat-modal :is(.recipient-subtitle,.chat-message-meta,.chat-day-separator) {
    color: rgba(255,255,255,.75) !important; -webkit-text-fill-color: rgba(255,255,255,.75) !important;
}
html body #fullscreen-chat-modal .chat-messages .message > .chat-message-bubble {
    overflow-wrap: anywhere !important; white-space: pre-wrap !important; max-width: 100%; min-width: 0;
}
html[data-appearance="glass"] body #fullscreen-chat-modal #chat-message-input::placeholder {
    color: rgba(255,255,255,.65) !important; -webkit-text-fill-color: rgba(255,255,255,.65) !important;
}

/* Only the outer composer is frosted, never a second rectangle in the field. */
html body #fullscreen-chat-modal #chat-message-input,
html body #fullscreen-chat-modal #chat-message-input:focus {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    outline: none !important;
}
html body #fullscreen-chat-modal #chat-message-input::placeholder {
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.mobile-blocspace-home-nav {
    display: none;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.mobile-blocspace-home-nav button {
    min-height: 64px;
    border: 1px solid color-mix(in srgb, var(--text-primary) 9%, transparent);
    border-radius: 15px;
    background: transparent;
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 10px;
    font-weight: 850;
    cursor: pointer;
}

.mobile-blocspace-home-nav button i {
    color: var(--primary-color);
    font-size: 16px;
}

.mobile-blocspace-inline-stack {
    display: none;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid color-mix(in srgb, var(--text-primary) 9%, transparent);
}

.mobile-blocspace-inline-card {
    min-height: 64px;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 11%, transparent);
    background: transparent;
    color: var(--text-primary);
    padding: 0;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    text-align: left;
    cursor: pointer;
}

.mobile-blocspace-inline-card > i {
    color: var(--primary-color);
    font-size: 15px;
    text-align: center;
}

.mobile-blocspace-inline-card span {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mobile-blocspace-inline-card strong {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
}

.mobile-blocspace-inline-card em {
    color: var(--text-secondary);
    font-size: 10px;
    font-style: normal;
    font-weight: 750;
    line-height: 1.35;
}

.mobile-blocspace-inline-card b {
    color: var(--primary-color);
    font-size: 10px;
    font-weight: 850;
}

.mobile-blocspace-main-panel {
    min-height: 260px;
}

.mobile-blocspace-main-panel > [data-mobile-blocspace-panel] {
    display: none;
}

.mobile-blocspace-main-panel > [data-mobile-blocspace-panel].is-active {
    display: block;
}

.mobile-blocspace-panel-placeholder {
    padding: 22px 0;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 750;
    line-height: 1.45;
}

.mobile-blocspace-inline-summary {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 0 20px;
    border-top: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent);
}

.mobile-blocspace-inline-summary strong {
    color: var(--text-primary);
    font-size: 28px;
    line-height: 0.96;
    font-weight: 950;
    letter-spacing: 0;
}

.mobile-blocspace-inline-summary span {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 750;
    line-height: 1.4;
}

.mobile-blocspace-inline-summary button {
    align-self: flex-start;
    height: 34px;
    border: 1px solid color-mix(in srgb, var(--text-primary) 14%, transparent);
    border-radius: 999px;
    background: transparent;
    color: var(--text-primary);
    padding: 0 13px;
    font-size: 11px;
    font-weight: 850;
    cursor: pointer;
}

.mobile-blocspace-home-modules {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    overflow: visible;
    border-top: 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.mobile-blocspace-home-modules::-webkit-scrollbar {
    display: none;
}

.mobile-blocspace-home-module {
    min-width: 0;
    min-height: 44px;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface-color) 58%, transparent);
    color: var(--text-primary);
    padding: 0 10px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.mobile-blocspace-home-module-icon {
    width: 17px;
    flex: 0 0 17px;
    color: var(--primary-color);
    display: grid;
    place-items: center;
    font-size: 14px;
    line-height: 1;
}

.mobile-blocspace-home-module-copy {
    min-width: 0;
    display: block;
}

.mobile-blocspace-home-module-copy strong {
    display: block;
    min-width: 0;
    color: var(--text-primary);
    font-size: 11px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-blocspace-home-module-copy span {
    display: none;
}

.mobile-blocspace-home-module button {
    display: none;
}

#blocspace-section-home .mobile-blocspace-hero {
    display: none;
}

.mobile-blocspace-home-topline {
    display: none !important;
}

.mobile-blocspace-home-stats {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 0;
}

.mobile-blocspace-home-world {
    position: relative;
    min-height: 132px;
    border: 1px solid color-mix(in srgb, var(--primary-color) 12%, transparent);
    border-radius: 18px;
    overflow: hidden;
    background: #07070b;
    color: #ffffff;
    box-shadow: 0 18px 46px color-mix(in srgb, #000000 28%, transparent);
}

.mobile-blocspace-home-world-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    background-size: cover;
    background-position: center;
    opacity: 0.86;
    filter: saturate(1.05) contrast(1);
}

.mobile-blocspace-home-world-bg.is-fallback {
    opacity: 0.44;
}

.mobile-blocspace-home-world::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(0,0,0,0.74), rgba(0,0,0,0.28) 54%, rgba(0,0,0,0.08)),
        linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.46));
    pointer-events: none;
}

.mobile-blocspace-home-world-body {
    position: relative;
    z-index: 1;
    min-height: 132px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    padding: 18px;
}

.mobile-blocspace-home-world-kicker,
.mobile-blocspace-home-section-label {
    color: color-mix(in srgb, #ffffff 72%, transparent);
    font-size: 10px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.mobile-blocspace-home-world-name {
    margin-top: 8px;
    font-size: 54px;
    line-height: 0.88;
    font-weight: 950;
    letter-spacing: 0;
    color: #ffffff;
    max-width: 78%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-blocspace-home-world-quote {
    max-width: 72%;
    margin: 12px 0 0;
    color: color-mix(in srgb, #ffffff 78%, transparent);
    font-size: 15px;
    line-height: 1.35;
    font-weight: 750;
    font-style: italic;
}

.mobile-blocspace-home-overview {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mobile-blocspace-home-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 28px;
    padding: 0 2px;
}

.mobile-blocspace-home-section-head > span {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.mobile-blocspace-home-section-head strong {
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    line-height: 1;
    font-weight: 950;
}

.mobile-blocspace-home-section-head strong i {
    color: var(--primary-color);
}

.mobile-blocspace-home-section-head > span > em {
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.15;
    font-style: normal;
    font-weight: 750;
}

.mobile-blocspace-home-section-head button {
    min-height: 30px;
    border: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-color) 66%, transparent);
    color: var(--text-primary);
    padding: 0 11px;
    font-size: 11px;
    font-weight: 850;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
}

.mobile-blocspace-home-section-head button i {
    font-size: 10px;
}

.mobile-blocspace-home-overview-board {
    border: 1px solid color-mix(in srgb, var(--text-primary) 7%, transparent);
    border-radius: 22px;
    background:
        radial-gradient(circle at 18% 4%, color-mix(in srgb, var(--primary-color) 10%, transparent), transparent 38%),
        linear-gradient(180deg, color-mix(in srgb, var(--surface-color) 78%, transparent), color-mix(in srgb, var(--surface-color) 42%, transparent));
    display: grid;
    grid-template-columns: minmax(112px, 0.72fr) minmax(0, 1.28fr);
    gap: 12px;
    padding: 14px;
    box-shadow: 0 14px 34px color-mix(in srgb, #000000 8%, transparent);
}

.mobile-blocspace-home-today-ring {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-blocspace-home-today-ring-inner {
    --today-ring-color: #22c55e;
    width: min(100%, 132px);
    aspect-ratio: 1;
    border-radius: 999px;
    background:
        radial-gradient(circle, var(--surface-color) 0 56%, transparent 57%),
        conic-gradient(from -90deg, var(--today-ring-color) calc(var(--today-score) * 1%), color-mix(in srgb, var(--today-ring-color) 13%, transparent) 0);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-primary) 6%, transparent);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.mobile-blocspace-home-today-ring-inner::after {
    content: '';
    position: absolute;
    inset: 10px;
    border-radius: inherit;
    border: 1px dashed color-mix(in srgb, var(--text-primary) 7%, transparent);
    pointer-events: none;
}

.mobile-blocspace-home-today-ring-inner span {
    color: var(--text-secondary);
    font-size: 8px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.mobile-blocspace-home-today-ring-inner strong {
    margin-top: 6px;
    color: var(--text-primary);
    font-size: clamp(30px, 8vw, 36px);
    line-height: 0.9;
    font-weight: 950;
}

.mobile-blocspace-home-today-ring-inner em {
    margin-top: 5px;
    color: var(--text-secondary);
    font-size: 9px;
    line-height: 1;
    font-style: normal;
    font-weight: 850;
}

.mobile-blocspace-home-mini-spark {
    width: 100%;
    height: 24px;
    color: currentColor;
    opacity: 0.78;
    display: none;
}

.mobile-blocspace-home-top-signals {
    border: 1px solid color-mix(in srgb, var(--text-primary) 7%, transparent);
    border-radius: 20px;
    background:
        radial-gradient(circle at 78% 10%, color-mix(in srgb, var(--accent-color, var(--primary-color)) 8%, transparent), transparent 38%),
        color-mix(in srgb, var(--surface-color) 68%, transparent);
    padding: 12px;
    overflow: hidden;
}

.mobile-blocspace-home-top-signals .mobile-blocspace-home-panel-title {
    margin-bottom: 8px;
}

.mobile-blocspace-home-top-signals-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mobile-blocspace-home-weekly-chart {
    position: relative;
    height: 112px;
    margin: -2px 2px 2px;
    border-radius: 14px;
    overflow: hidden;
    background:
        linear-gradient(180deg, transparent 0 70%, color-mix(in srgb, var(--text-primary) 4%, transparent)),
        linear-gradient(90deg, color-mix(in srgb, var(--primary-color) 5%, transparent), transparent);
}

.mobile-blocspace-home-weekly-empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: color-mix(in srgb, var(--text-primary) 46%, transparent);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.02em;
    pointer-events: none;
}

.mobile-blocspace-home-weekly-chart svg {
    width: 100%;
    height: 88px;
    display: block;
}

.mobile-blocspace-home-weekly-chart polyline {
    fill: none !important;
    opacity: 0.72;
    filter: none;
}

.mobile-blocspace-home-weekly-labels {
    position: static;
    margin-top: 7px;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
    color: color-mix(in srgb, var(--text-primary) 48%, transparent);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.02em;
    text-align: center;
    text-transform: uppercase;
    pointer-events: none;
}

.mobile-blocspace-home-weekly-labels span {
    min-width: 0;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
}

.mobile-blocspace-home-signal-breakdown {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    border-top: 0;
}

.mobile-blocspace-home-breakdown-row {
    min-height: 58px;
    border: 1px solid color-mix(in srgb, var(--text-primary) 7%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface-color) 72%, transparent);
    color: var(--text-primary);
    display: grid;
    align-content: center;
    gap: 8px;
    padding: 10px 12px;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.mobile-blocspace-home-breakdown-row:first-child {
    border-left: 1px solid color-mix(in srgb, var(--text-primary) 7%, transparent);
}

.mobile-blocspace-home-breakdown-row span {
    min-width: 0;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 850;
    white-space: nowrap;
}

.mobile-blocspace-home-breakdown-row span i {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--primary-color);
}

.mobile-blocspace-home-breakdown-row strong {
    color: var(--text-primary);
    font-size: 20px;
    line-height: 1;
    font-weight: 950;
    white-space: nowrap;
}

@media (max-width: 374px) {
    .mobile-blocspace-home-overview-board,
    .mobile-blocspace-home-signal-breakdown {
        grid-template-columns: minmax(0, 1fr);
    }
}

.mobile-blocspace-home-breakdown-row.is-accent span i {
    background: #2563eb;
}

.mobile-blocspace-home-breakdown-row.is-cool span i {
    background: color-mix(in srgb, var(--primary-color) 58%, #38bdf8 42%);
}

.mobile-blocspace-home-breakdown-row.is-money span i {
    background: #22a45a;
}

.mobile-blocspace-home-detail-sheet {
    position: fixed;
    inset: 0;
    z-index: 2147483646 !important;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
    isolation: isolate;
}

.mobile-blocspace-home-detail-sheet.is-open {
    pointer-events: auto;
}

.mobile-blocspace-home-detail-scrim {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(0, 0, 0, 0.34);
    opacity: 0;
    transition: opacity 180ms ease;
}

.mobile-blocspace-home-detail-sheet.is-open .mobile-blocspace-home-detail-scrim {
    opacity: 1;
}

.mobile-blocspace-home-detail-panel {
    position: relative;
    z-index: 1;
    width: min(430px, calc(100vw - 20px));
    max-height: min(74vh, 680px);
    margin: 0 10px max(10px, env(safe-area-inset-bottom));
    border: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
    border-radius: 30px;
    background: color-mix(in srgb, var(--surface-color) 94%, var(--background-color) 6%);
    color: var(--text-primary);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28);
    padding: 10px 14px 14px;
    transform: translateY(24px);
    opacity: 0;
    transition: transform 220ms ease, opacity 180ms ease;
    overflow: hidden;
}

.mobile-blocspace-home-detail-sheet.is-open .mobile-blocspace-home-detail-panel {
    transform: translateY(0);
    opacity: 1;
}

.mobile-blocspace-home-detail-grabber {
    width: 42px;
    height: 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-primary) 18%, transparent);
    margin: 2px auto 12px;
}

.mobile-blocspace-home-detail-head {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 40px;
    align-items: center;
    gap: 10px;
}

.mobile-blocspace-home-detail-head > span {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
    color: var(--primary-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.mobile-blocspace-home-detail-head > span.is-accent {
    color: #2563eb;
    background: color-mix(in srgb, #2563eb 12%, transparent);
}

.mobile-blocspace-home-detail-head > span.is-money {
    color: #22a45a;
    background: color-mix(in srgb, #22a45a 12%, transparent);
}

.mobile-blocspace-home-detail-head strong,
.mobile-blocspace-home-detail-head em {
    display: block;
}

.mobile-blocspace-home-detail-head strong {
    color: var(--text-primary);
    font-size: 24px;
    line-height: 1;
    font-weight: 920;
}

.mobile-blocspace-home-detail-head em {
    margin-top: 5px;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.25;
    font-style: normal;
    font-weight: 760;
}

.mobile-blocspace-home-detail-close {
    width: 40px;
    height: 40px;
    border: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-color) 84%, transparent);
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mobile-blocspace-home-detail-close i {
    color: currentColor;
    -webkit-text-fill-color: currentColor;
}

.mobile-blocspace-home-detail-total {
    margin-top: 14px;
    border: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--background-color) 54%, transparent);
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
}

.mobile-blocspace-home-detail-total strong {
    color: var(--text-primary);
    font-size: 28px;
    line-height: 1;
    font-weight: 950;
}

.mobile-blocspace-home-detail-total span {
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.mobile-blocspace-home-detail-list {
    max-height: calc(min(74vh, 680px) - 176px);
    overflow-y: auto;
    display: grid;
    gap: 10px;
    margin-top: 12px;
    padding-bottom: 2px;
}

.mobile-blocspace-home-detail-row {
    width: 100%;
    min-height: 66px;
    border: 1px solid color-mix(in srgb, var(--text-primary) 7%, transparent);
    border-radius: 22px;
    background: color-mix(in srgb, var(--surface-color) 82%, transparent);
    color: var(--text-primary);
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 10px;
    text-align: left;
    font: inherit;
}

.mobile-blocspace-home-detail-avatar {
    width: 44px;
    height: 44px;
    border-radius: 15px;
    background: color-mix(in srgb, var(--text-primary) 7%, transparent);
    color: var(--text-primary);
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

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

.mobile-blocspace-home-detail-row-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.mobile-blocspace-home-detail-row-copy strong,
.mobile-blocspace-home-detail-row-copy em,
.mobile-blocspace-home-detail-row-copy small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-blocspace-home-detail-row-copy strong {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 920;
}

.mobile-blocspace-home-detail-row-copy em {
    color: var(--text-secondary);
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
}

.mobile-blocspace-home-detail-row-copy small {
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 720;
}

.mobile-blocspace-home-detail-row b {
    border: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
    border-radius: 999px;
    padding: 8px 11px;
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 850;
    white-space: nowrap;
}

.mobile-blocspace-home-detail-empty {
    border: 1px solid color-mix(in srgb, var(--text-primary) 7%, transparent);
    border-radius: 18px;
    padding: 18px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 800;
}

html[data-theme="light"] .mobile-blocspace-home-detail-panel,
body[data-theme="light"] .mobile-blocspace-home-detail-panel,
html[data-theme="light-accent"] .mobile-blocspace-home-detail-panel,
body[data-theme="light-accent"] .mobile-blocspace-home-detail-panel {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(5, 5, 5, 0.1) !important;
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
}

html[data-theme="light"] .mobile-blocspace-home-detail-close,
body[data-theme="light"] .mobile-blocspace-home-detail-close,
html[data-theme="light-accent"] .mobile-blocspace-home-detail-close,
body[data-theme="light-accent"] .mobile-blocspace-home-detail-close {
    background: #ffffff !important;
    border-color: rgba(5, 5, 5, 0.12) !important;
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
}

html[data-theme="light"] .mobile-blocspace-home-detail-close *,
body[data-theme="light"] .mobile-blocspace-home-detail-close *,
html[data-theme="light-accent"] .mobile-blocspace-home-detail-close *,
body[data-theme="light-accent"] .mobile-blocspace-home-detail-close * {
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
}

html[data-theme="light"] .mobile-blocspace-home-detail-row,
body[data-theme="light"] .mobile-blocspace-home-detail-row,
html[data-theme="light-accent"] .mobile-blocspace-home-detail-row,
body[data-theme="light-accent"] .mobile-blocspace-home-detail-row,
html[data-theme="light"] .mobile-blocspace-home-detail-total,
body[data-theme="light"] .mobile-blocspace-home-detail-total,
html[data-theme="light-accent"] .mobile-blocspace-home-detail-total,
body[data-theme="light-accent"] .mobile-blocspace-home-detail-total {
    background: rgba(255, 255, 255, 0.84) !important;
    border-color: rgba(5, 5, 5, 0.1) !important;
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
}

html[data-theme="light"] .mobile-blocspace-home-detail-total span,
body[data-theme="light"] .mobile-blocspace-home-detail-total span,
html[data-theme="light-accent"] .mobile-blocspace-home-detail-total span,
body[data-theme="light-accent"] .mobile-blocspace-home-detail-total span,
html[data-theme="light"] .mobile-blocspace-home-detail-head em,
body[data-theme="light"] .mobile-blocspace-home-detail-head em,
html[data-theme="light-accent"] .mobile-blocspace-home-detail-head em,
body[data-theme="light-accent"] .mobile-blocspace-home-detail-head em {
    color: rgba(5, 5, 5, 0.58) !important;
    -webkit-text-fill-color: rgba(5, 5, 5, 0.58) !important;
}

.mobile-blocspace-home-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

.mobile-blocspace-home-panel {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
    overflow: hidden;
}

.mobile-blocspace-home-panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    padding: 0 2px;
}

.mobile-blocspace-home-panel-title strong {
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    line-height: 1;
    font-weight: 950;
}

.mobile-blocspace-home-panel-title i {
    color: var(--primary-color);
}

.mobile-blocspace-home-panel-title button {
    min-height: 34px;
    border: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-color) 78%, transparent);
    color: var(--text-primary);
    padding: 0 14px;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 10px 22px color-mix(in srgb, #000000 5%, transparent);
}

.mobile-blocspace-home-unread-row {
    width: 100%;
    min-height: 58px;
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--border-color) 44%, transparent);
    border-radius: 0;
    background: transparent;
    color: var(--text-primary);
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 2px;
    text-align: left;
    cursor: pointer;
}

.mobile-blocspace-home-unread-row:first-of-type {
    border-top: 0;
}

.mobile-blocspace-home-unread-avatar {
    width: 42px;
    height: 42px;
    border-radius: 15px;
    background: color-mix(in srgb, var(--text-primary) 8%, transparent);
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    overflow: hidden;
}

.mobile-blocspace-home-flow {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mobile-blocspace-home-flow-rail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    border-top: 0;
}

.mobile-blocspace-home-signal-pill {
    min-height: 56px;
    border: 1px solid color-mix(in srgb, var(--text-primary) 7%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface-color) 72%, transparent);
    color: var(--text-primary);
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 10px;
    text-align: left;
    cursor: pointer;
}

.mobile-blocspace-home-signal-pill i {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary-color) 13%, transparent);
    color: var(--primary-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.mobile-blocspace-home-signal-pill span {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mobile-blocspace-home-signal-pill strong {
    color: var(--text-primary);
    font-size: 12px;
    line-height: 1.05;
    font-weight: 950;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-blocspace-home-signal-pill em {
    color: var(--text-secondary);
    font-size: 10px;
    line-height: 1.1;
    font-style: normal;
    font-weight: 800;
}

.mobile-blocspace-home-flow-group {
    display: flex;
    flex-direction: column;
    border-top: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
    gap: 10px;
    padding-top: 10px;
}

.mobile-blocspace-home-flow-label {
    min-height: 34px;
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 950;
}

.mobile-blocspace-home-flow-label i {
    color: var(--primary-color);
    font-size: 11px;
}

.mobile-blocspace-home-flow-row {
    width: 100%;
    min-height: 66px;
    border: 1px solid color-mix(in srgb, var(--text-primary) 7%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--surface-color) 84%, transparent);
    color: var(--text-primary);
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 12px 26px color-mix(in srgb, #000000 5%, transparent);
}

.mobile-blocspace-home-activity-avatar {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
    color: var(--primary-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    overflow: hidden;
}

.mobile-blocspace-home-activity-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mobile-blocspace-home-activity-avatar.is-fallback {
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
}

.mobile-blocspace-home-unread-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mobile-blocspace-home-row-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mobile-blocspace-home-row-copy strong {
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.2;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-blocspace-home-row-copy em {
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.25;
    font-style: normal;
    font-weight: 750;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-blocspace-home-row-action {
    min-width: 68px;
    min-height: 34px;
    border: 1px solid color-mix(in srgb, var(--text-primary) 7%, transparent);
    border-radius: 999px;
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    font-size: 10px;
    line-height: 1;
    font-weight: 900;
    white-space: nowrap;
    background: color-mix(in srgb, var(--surface-color) 70%, transparent);
}

.mobile-blocspace-home-feature {
    min-height: 168px;
    border-radius: 18px;
    overflow: hidden;
    position: relative;
    background: #0d0d14;
    color: #ffffff;
    border: 1px solid color-mix(in srgb, var(--primary-color) 16%, transparent);
    box-shadow: 0 18px 46px color-mix(in srgb, #000000 22%, transparent);
}

.mobile-blocspace-home-feature-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.58;
}

.mobile-blocspace-home-feature::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.78));
}

.mobile-blocspace-home-feature-body {
    position: relative;
    z-index: 1;
    min-height: 168px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 14px;
}

.mobile-blocspace-home-feature-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    border-radius: 999px;
    background: rgba(0,0,0,0.48);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.mobile-blocspace-home-feature-body strong {
    font-size: 15px;
    font-weight: 950;
    line-height: 1.15;
}

.mobile-blocspace-home-feature-body span {
    margin-top: 5px;
    color: rgba(255,255,255,0.74);
    font-size: 11px;
    font-weight: 800;
}

.mobile-blocspace-home-actions {
    display: block;
    margin-top: 2px;
}

.mobile-blocspace-home-actions::-webkit-scrollbar {
    display: none;
}

.mobile-blocspace-home-action-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.mobile-blocspace-home-share-card {
    min-height: 68px;
    border: 1px solid color-mix(in srgb, var(--text-primary) 7%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--surface-color) 86%, transparent);
    color: var(--text-primary);
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 10px;
    padding: 12px;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 14px 34px color-mix(in srgb, #000000 6%, transparent);
}

.mobile-blocspace-home-share-card > i {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--primary-color) 14%, transparent);
    color: var(--primary-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.mobile-blocspace-home-share-card span {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.mobile-blocspace-home-share-card strong {
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.05;
    font-weight: 950;
}

.mobile-blocspace-home-share-card em {
    color: var(--text-secondary);
    font-size: 10px;
    line-height: 1.25;
    font-style: normal;
    font-weight: 780;
}

.mobile-blocspace-home-share-card b {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-color) 82%, transparent);
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.mobile-blocspace-home-share-sheet {
    position: fixed;
    inset: 0;
    z-index: 2147483646 !important;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
    isolation: isolate;
}

.mobile-blocspace-home-share-sheet.is-open {
    pointer-events: auto;
}

.mobile-blocspace-home-share-scrim {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(0, 0, 0, 0.34);
    opacity: 0;
    transition: opacity 180ms ease;
}

.mobile-blocspace-home-share-sheet.is-open .mobile-blocspace-home-share-scrim {
    opacity: 1;
}

.mobile-blocspace-home-share-panel {
    position: relative;
    z-index: 1;
    width: min(430px, calc(100vw - 20px));
    margin: 0 10px max(10px, env(safe-area-inset-bottom));
    border: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
    border-radius: 26px;
    background: color-mix(in srgb, var(--surface-color) 94%, var(--background-color) 6%);
    color: var(--text-primary);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28);
    padding: 10px 14px 14px;
    transform: translateY(24px);
    opacity: 0;
    transition: transform 220ms ease, opacity 180ms ease;
}

.mobile-blocspace-home-share-sheet.is-open .mobile-blocspace-home-share-panel {
    transform: translateY(0);
    opacity: 1;
}

.mobile-blocspace-home-share-grabber {
    width: 42px;
    height: 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-primary) 18%, transparent);
    margin: 2px auto 12px;
}

.mobile-blocspace-home-share-head {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 40px;
    align-items: center;
    gap: 10px;
}

.mobile-blocspace-home-share-head > span {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--primary-color) 13%, transparent);
    color: var(--primary-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}

.mobile-blocspace-home-share-head strong,
.mobile-blocspace-home-share-head em {
    display: block;
}

.mobile-blocspace-home-share-head strong {
    font-size: 24px;
    line-height: 1;
    font-weight: 920;
    color: var(--text-primary);
}

.mobile-blocspace-home-share-head em {
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.25;
    font-style: normal;
    font-weight: 760;
    color: var(--text-secondary);
}

.mobile-blocspace-home-share-close {
    width: 40px;
    height: 40px;
    border: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-color) 84%, transparent);
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mobile-blocspace-home-share-url {
    margin-top: 14px;
    min-height: 46px;
    border: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--background-color) 70%, transparent);
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
    display: flex;
    align-items: center;
    padding: 10px 12px;
    overflow: hidden;
}

.mobile-blocspace-home-share-url span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 780;
    color: inherit;
    -webkit-text-fill-color: inherit;
}

.mobile-blocspace-home-share-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px;
}

.mobile-blocspace-home-share-actions button {
    min-height: 50px;
    border: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-color) 84%, transparent);
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 900;
}

.mobile-blocspace-home-share-actions button:last-child {
    background: var(--text-primary);
    color: var(--background-color);
    -webkit-text-fill-color: var(--background-color);
}

html[data-theme="light"] .mobile-blocspace-home-share-panel,
body[data-theme="light"] .mobile-blocspace-home-share-panel,
html[data-theme="light-accent"] .mobile-blocspace-home-share-panel,
body[data-theme="light-accent"] .mobile-blocspace-home-share-panel {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(5, 5, 5, 0.1) !important;
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
}

html[data-theme="light"] .mobile-blocspace-home-share-url,
body[data-theme="light"] .mobile-blocspace-home-share-url,
html[data-theme="light-accent"] .mobile-blocspace-home-share-url,
body[data-theme="light-accent"] .mobile-blocspace-home-share-url {
    background: #ffffff !important;
    border-color: rgba(5, 5, 5, 0.12) !important;
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
}

html[data-theme="light"] .mobile-blocspace-home-share-close,
body[data-theme="light"] .mobile-blocspace-home-share-close,
html[data-theme="light"] .mobile-blocspace-home-share-actions button,
body[data-theme="light"] .mobile-blocspace-home-share-actions button,
html[data-theme="light-accent"] .mobile-blocspace-home-share-close,
body[data-theme="light-accent"] .mobile-blocspace-home-share-close,
html[data-theme="light-accent"] .mobile-blocspace-home-share-actions button,
body[data-theme="light-accent"] .mobile-blocspace-home-share-actions button {
    background: #ffffff !important;
    border-color: rgba(5, 5, 5, 0.12) !important;
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
}

html[data-theme="light"] .mobile-blocspace-home-share-actions button:last-child,
body[data-theme="light"] .mobile-blocspace-home-share-actions button:last-child,
html[data-theme="light-accent"] .mobile-blocspace-home-share-actions button:last-child,
body[data-theme="light-accent"] .mobile-blocspace-home-share-actions button:last-child {
    background: #050505 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html[data-theme="light"] .mobile-blocspace-home-world,
body[data-theme="light"] .mobile-blocspace-home-world,
html[data-theme="light-accent"] .mobile-blocspace-home-world,
body[data-theme="light-accent"] .mobile-blocspace-home-world {
    background: var(--surface-color);
    color: var(--text-primary);
    border-color: color-mix(in srgb, var(--primary-color) 20%, var(--text-primary) 7%);
    box-shadow: 0 18px 42px color-mix(in srgb, var(--text-primary) 10%, transparent);
}

html[data-theme="light"] .mobile-blocspace-home-world-bg,
body[data-theme="light"] .mobile-blocspace-home-world-bg,
html[data-theme="light-accent"] .mobile-blocspace-home-world-bg,
body[data-theme="light-accent"] .mobile-blocspace-home-world-bg {
    opacity: 0.96;
    filter: saturate(1.08) contrast(1.02);
}

html[data-theme="light"] .mobile-blocspace-home-world-bg.is-fallback,
body[data-theme="light"] .mobile-blocspace-home-world-bg.is-fallback,
html[data-theme="light-accent"] .mobile-blocspace-home-world-bg.is-fallback,
body[data-theme="light-accent"] .mobile-blocspace-home-world-bg.is-fallback {
    opacity: 0.22;
}

html[data-theme="light"] .mobile-blocspace-home-world::before,
body[data-theme="light"] .mobile-blocspace-home-world::before,
html[data-theme="light-accent"] .mobile-blocspace-home-world::before,
body[data-theme="light-accent"] .mobile-blocspace-home-world::before {
    background:
        linear-gradient(90deg, rgba(255,255,255,0.66), rgba(255,255,255,0.2) 42%, rgba(255,255,255,0.02) 70%),
        linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.18));
}

html[data-theme="light"] .mobile-blocspace-home-world-kicker,
body[data-theme="light"] .mobile-blocspace-home-world-kicker,
html[data-theme="light-accent"] .mobile-blocspace-home-world-kicker,
body[data-theme="light-accent"] .mobile-blocspace-home-world-kicker {
    color: color-mix(in srgb, var(--text-primary) 70%, transparent);
}

html[data-theme="light"] .mobile-blocspace-home-world-name,
body[data-theme="light"] .mobile-blocspace-home-world-name,
html[data-theme="light-accent"] .mobile-blocspace-home-world-name,
body[data-theme="light-accent"] .mobile-blocspace-home-world-name {
    color: var(--text-primary);
}

html[data-theme="light"] .mobile-blocspace-home-feature,
body[data-theme="light"] .mobile-blocspace-home-feature,
html[data-theme="light-accent"] .mobile-blocspace-home-feature,
body[data-theme="light-accent"] .mobile-blocspace-home-feature {
    background: var(--surface-color);
    color: var(--text-primary);
    border-color: color-mix(in srgb, var(--primary-color) 16%, var(--text-primary) 8%);
    box-shadow: 0 16px 36px color-mix(in srgb, var(--text-primary) 9%, transparent);
}

html[data-theme="light"] .mobile-blocspace-home-feature::after,
body[data-theme="light"] .mobile-blocspace-home-feature::after,
html[data-theme="light-accent"] .mobile-blocspace-home-feature::after,
body[data-theme="light-accent"] .mobile-blocspace-home-feature::after {
    background: linear-gradient(180deg, color-mix(in srgb, var(--background-color) 4%, transparent), color-mix(in srgb, var(--background-color) 82%, transparent));
}

html[data-theme="light"] .mobile-blocspace-home-feature-body span,
body[data-theme="light"] .mobile-blocspace-home-feature-body span,
html[data-theme="light-accent"] .mobile-blocspace-home-feature-body span,
body[data-theme="light-accent"] .mobile-blocspace-home-feature-body span {
    color: var(--text-secondary);
}

/* Light accent: text colour only. The Home body is rows on open page — no
   fills, borders, or shadows are re-added here. */
html[data-theme="light-accent"] .mobile-blocspace-home-section-head strong,
html[data-theme="light-accent"] .mobile-blocspace-home-today-ring > strong,
html[data-theme="light-accent"] .mobile-blocspace-home-today-metric strong,
html[data-theme="light-accent"] .mobile-blocspace-home-breakdown-row strong,
html[data-theme="light-accent"] .mobile-blocspace-home-panel-title strong,
html[data-theme="light-accent"] .mobile-blocspace-home-row-copy strong,
html[data-theme="light-accent"] .mobile-blocspace-home-share-card strong,
body[data-theme="light-accent"] .mobile-blocspace-home-section-head strong,
body[data-theme="light-accent"] .mobile-blocspace-home-today-ring > strong,
body[data-theme="light-accent"] .mobile-blocspace-home-today-metric strong,
body[data-theme="light-accent"] .mobile-blocspace-home-breakdown-row strong,
body[data-theme="light-accent"] .mobile-blocspace-home-panel-title strong,
body[data-theme="light-accent"] .mobile-blocspace-home-row-copy strong,
body[data-theme="light-accent"] .mobile-blocspace-home-share-card strong {
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
}

html[data-theme="light-accent"] .mobile-blocspace-home-section-label,
html[data-theme="light-accent"] .mobile-blocspace-home-today-ring > span,
html[data-theme="light-accent"] .mobile-blocspace-home-today-ring > em,
html[data-theme="light-accent"] .mobile-blocspace-home-row-copy em,
html[data-theme="light-accent"] .mobile-blocspace-home-share-card em,
body[data-theme="light-accent"] .mobile-blocspace-home-section-label,
body[data-theme="light-accent"] .mobile-blocspace-home-today-ring > span,
body[data-theme="light-accent"] .mobile-blocspace-home-today-ring > em,
body[data-theme="light-accent"] .mobile-blocspace-home-row-copy em,
body[data-theme="light-accent"] .mobile-blocspace-home-share-card em {
    color: rgba(5, 5, 5, 0.62) !important;
    -webkit-text-fill-color: rgba(5, 5, 5, 0.62) !important;
}

.mobile-blocspace-home-panel-title-menu {
    position: relative;
    overflow: visible;
}

.mobile-blocspace-home-menu-wrap {
    position: relative;
    z-index: 12;
}

.mobile-blocspace-home-panel-title .mobile-blocspace-home-menu-button {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
    background: color-mix(in srgb, var(--surface-color) 88%, transparent);
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 22px color-mix(in srgb, #000000 7%, transparent);
}

.mobile-blocspace-home-panel-title .mobile-blocspace-home-menu-button i {
    font-size: 15px;
    line-height: 1;
}

.mobile-blocspace-home-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 178px;
    padding: 8px;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--text-primary) 9%, transparent);
    background: color-mix(in srgb, var(--surface-color) 96%, #ffffff 4%);
    box-shadow: 0 18px 42px color-mix(in srgb, #000000 14%, transparent);
    z-index: 40;
}

.mobile-blocspace-home-menu button {
    width: 100%;
    min-height: 42px;
    border: 0;
    border-radius: 13px;
    background: transparent;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    font: inherit;
    font-size: 13px;
    font-weight: 850;
    text-align: left;
}

.mobile-blocspace-home-menu button:hover,
.mobile-blocspace-home-menu button:focus-visible {
    background: color-mix(in srgb, var(--primary-color) 9%, transparent);
}

.mobile-blocspace-home-menu button i {
    width: 16px;
    text-align: center;
    color: var(--primary-color);
}

.mobile-blocspace-home-loading {
    min-height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--text-primary);
    text-align: center;
}

.mobile-blocspace-home-spinner {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 3px solid color-mix(in srgb, var(--text-primary) 10%, transparent);
    border-top-color: var(--text-primary);
    animation: mobileBlocSpaceHomeSpin 0.8s linear infinite;
}

.mobile-blocspace-home-loading strong {
    margin-top: 4px;
    font-size: 17px;
    line-height: 1.1;
    font-weight: 950;
    color: var(--text-primary);
}

.mobile-blocspace-home-loading em {
    max-width: 240px;
    font-size: 12px;
    line-height: 1.35;
    font-style: normal;
    font-weight: 760;
    color: var(--text-secondary);
}

@keyframes mobileBlocSpaceHomeSpin {
    to {
        transform: rotate(360deg);
    }
}

/* Bloc Space Home: calmer command-center pass. Keep data dense, remove color noise. */
.mobile-blocspace-home-stats {
    gap: 22px;
}

.mobile-blocspace-home-command {
    gap: 0;
}

.mobile-blocspace-home-command-head {
    display: grid;
    grid-template-columns: minmax(112px, 0.78fr) minmax(0, 1.22fr);
    gap: 18px;
    align-items: flex-start;
    padding: 0;
    min-height: 0;
}

.mobile-blocspace-home-command-head strong,
.mobile-blocspace-home-panel-title strong {
    gap: 0;
    font-size: 22px;
    line-height: 1.02;
    letter-spacing: 0;
}

.mobile-blocspace-home-command-head strong i,
.mobile-blocspace-home-panel-title strong i {
    display: none;
}

.mobile-blocspace-home-command-head > span > em,
.mobile-blocspace-home-panel-title em {
    display: block;
    margin-top: 5px;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.35;
    font-style: normal;
    font-weight: 720;
    letter-spacing: 0;
}

.mobile-blocspace-home-command-head button,
.mobile-blocspace-home-panel-title button,
.mobile-blocspace-home-panel-title .mobile-blocspace-home-menu-button {
    min-height: 36px;
    border-color: color-mix(in srgb, var(--text-primary) 10%, transparent);
    background: transparent;
    box-shadow: none;
}

.mobile-blocspace-home-command-head button {
    justify-self: start;
    align-self: start;
    margin-top: 1px;
}

.mobile-blocspace-home-overview-board {
    grid-template-columns: minmax(120px, 0.78fr) minmax(0, 1.22fr);
    align-items: center;
    gap: 18px;
    padding: 6px 0 22px;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.mobile-blocspace-home-today-ring {
    display: grid;
    align-content: start;
    justify-content: start;
    grid-template-rows: auto auto auto;
    gap: 10px;
    min-height: 0;
    padding: 8px 0 0;
    box-sizing: border-box;
}

.mobile-blocspace-home-today-ring > span {
    color: var(--text-secondary);
    font-size: 10px;
    line-height: 1;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.mobile-blocspace-home-today-ring > strong {
    color: var(--text-primary);
    font-size: clamp(56px, 17vw, 68px);
    line-height: 0.86;
    font-weight: 950;
    letter-spacing: -0.04em;
}

.mobile-blocspace-home-today-ring > em {
    max-width: 22ch;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.35;
    font-style: normal;
    font-weight: 720;
}

.mobile-blocspace-home-today-ring-inner {
    display: none;
}

/* Today's four metrics sit beside the big number as a 2x2 of value-over-label.
   No dividers, no boxes — the whitespace between them is the separation. */
.mobile-blocspace-home-today-list {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: center;
    gap: 20px 14px;
}

.mobile-blocspace-home-today-metric {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.mobile-blocspace-home-today-metric strong {
    color: var(--text-primary);
    font-size: clamp(20px, 5.6vw, 25px);
    line-height: 1;
    font-weight: 950;
    letter-spacing: -0.03em;
}

.mobile-blocspace-home-today-metric span {
    color: var(--text-secondary);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.mobile-blocspace-home-top-signals {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.mobile-blocspace-home-panel-title {
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 14px;
    padding: 0;
}

.mobile-blocspace-home-weekly-chart {
    height: auto;
    margin: 0;
    border-radius: 0;
    background: none;
}

.mobile-blocspace-home-weekly-chart svg {
    display: block;
    width: 100%;
    height: 62px;
}

.mobile-blocspace-home-weekly-chart polyline {
    opacity: 0.82;
}

.mobile-blocspace-home-signal-breakdown {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    border-top: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent);
}

.mobile-blocspace-home-breakdown-row {
    min-height: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 8px 0;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
}

.mobile-blocspace-home-breakdown-row:first-of-type {
    border: 0 !important;
}

.mobile-blocspace-home-breakdown-row span {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.mobile-blocspace-home-breakdown-row span i {
    display: none;
}

.mobile-blocspace-home-breakdown-row strong {
    font-size: 20px;
    letter-spacing: -0.03em;
    text-align: right;
}

.mobile-blocspace-home-flow {
    gap: 18px;
}

.mobile-blocspace-home-flow-group {
    gap: 0;
    padding-top: 18px;
    border-top: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent);
}

.mobile-blocspace-home-flow-row {
    min-height: 62px;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 12px;
    padding: 13px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.mobile-blocspace-home-activity-avatar,
.mobile-blocspace-home-activity-avatar.is-fallback {
    width: 38px;
    height: 38px;
    background: color-mix(in srgb, var(--text-primary) 7%, transparent);
    color: var(--text-primary);
}

.mobile-blocspace-home-row-action {
    min-width: 0;
    min-height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-secondary);
    font-size: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.mobile-blocspace-home-share-card {
    min-height: 58px;
    grid-template-columns: 30px minmax(0, 1fr) 22px;
    padding: 14px 0;
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.mobile-blocspace-home-share-card > i,
.mobile-blocspace-home-share-card b {
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
    color: var(--text-primary);
}

@media (max-width: 374px) {
    .mobile-blocspace-home-command-head,
    .mobile-blocspace-home-overview-board {
        grid-template-columns: minmax(0, 1fr);
    }

    .mobile-blocspace-home-command-head button {
        justify-self: start;
    }
}

.mobile-email-platform {
    position: fixed;
    inset: 0;
    z-index: 130050;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    background:
        radial-gradient(circle at 50% -12%, rgba(48, 107, 255, 0.12), transparent 30%),
        linear-gradient(180deg, #fbfcff 0%, #f3f5f9 42%, #eef1f6 100%);
    color: #0d1117;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    overflow: hidden;
}

.mobile-email-platform,
.mobile-email-platform * {
    box-sizing: border-box;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.has-mobile-email-platform #pwa-install-banner {
    display: none !important;
}

.mobile-email-topbar {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 12px;
    min-height: calc(66px + env(safe-area-inset-top, 0px));
    padding: calc(10px + env(safe-area-inset-top, 0px)) 18px 10px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.07);
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.mobile-email-icon-button {
    appearance: none;
    -webkit-appearance: none;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    color: #0d1117;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
}

.mobile-email-icon-button.is-filled {
    border-color: #0d1117;
    background: #0d1117;
    color: #ffffff;
}

.mobile-email-topbar__title {
    min-width: 0;
    text-align: center;
}

.mobile-email-topbar__title strong {
    display: block;
    font-size: 15px;
    line-height: 1;
    font-weight: 860;
    letter-spacing: 0;
}

.mobile-email-topbar__title span {
    display: block;
    margin-top: 4px;
    color: #737b8c;
    font-size: 11px;
    line-height: 1;
    font-weight: 760;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mobile-email-content {
    min-height: 0;
    overflow: auto;
    padding: 18px 18px 20px;
}

.mobile-email-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 3px 1px 14px;
}

.mobile-email-kicker {
    display: block;
    color: #667085;
    font-size: 11px;
    line-height: 1;
    font-weight: 820;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mobile-email-hero h1 {
    margin: 8px 0 0;
    max-width: 260px;
    font-size: 34px;
    line-height: 0.98;
    font-weight: 880;
    letter-spacing: 0;
}

.mobile-email-live-pill {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid rgba(22, 163, 74, 0.22);
    border-radius: 999px;
    background: rgba(240, 253, 244, 0.9);
    color: #118449;
    font-size: 12px;
    font-weight: 830;
    box-shadow: 0 10px 24px rgba(22, 163, 74, 0.08);
}

.mobile-email-live-pill::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: currentColor;
}

.mobile-email-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    margin-bottom: 14px;
}

.mobile-email-metrics div {
    min-width: 0;
    min-height: 72px;
    padding: 12px 11px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}

.mobile-email-metrics strong,
.mobile-email-metrics span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-email-metrics strong {
    font-size: 24px;
    line-height: 1;
    font-weight: 880;
}

.mobile-email-metrics span {
    margin-top: 8px;
    color: #667085;
    font-size: 10px;
    line-height: 1.1;
    font-weight: 780;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.mobile-email-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    margin-bottom: 14px;
    padding: 4px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    background: rgba(226, 232, 240, 0.7);
}

.mobile-email-tabs button {
    appearance: none;
    -webkit-appearance: none;
    min-width: 0;
    min-height: 38px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: #667085;
    font-size: 12px;
    font-weight: 820;
    cursor: pointer;
}

.mobile-email-tabs button.is-active {
    background: #ffffff;
    color: #0d1117;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.1);
}

.mobile-email-tab-panel[hidden] {
    display: none !important;
}

.mobile-email-focus-card {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 13px;
    min-height: 208px;
    padding: 18px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 28px;
    background:
        linear-gradient(145deg, rgba(13, 17, 23, 0.96), rgba(31, 41, 55, 0.92)),
        #0d1117;
    color: #ffffff;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.22);
}

.mobile-email-focus-card::after {
    content: "";
    position: absolute;
    right: -32px;
    top: -42px;
    width: 150px;
    height: 150px;
    border-radius: 999px;
    background: rgba(99, 179, 237, 0.22);
}

.mobile-email-focus-card > * {
    position: relative;
    z-index: 1;
}

.mobile-email-focus-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.mobile-email-focus-card__top span,
.mobile-email-focus-card__top strong {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.86);
    font-size: 12px;
    font-weight: 760;
}

.mobile-email-focus-card h2 {
    margin: 7px 0 0;
    max-width: 285px;
    font-size: 30px;
    line-height: 1.02;
    font-weight: 880;
    letter-spacing: 0;
}

.mobile-email-focus-card p {
    margin: 0;
    max-width: 292px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 14px;
    line-height: 1.38;
    font-weight: 620;
}

.mobile-email-focus-card__steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 3px;
}

.mobile-email-focus-card__steps span {
    min-width: 0;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.11);
    color: rgba(255, 255, 255, 0.82);
    font-size: 11px;
    font-weight: 760;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-email-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin: 18px 2px 9px;
}

.mobile-email-section-head strong,
.mobile-email-section-head span {
    display: block;
}

.mobile-email-section-head strong {
    font-size: 15px;
    line-height: 1;
    font-weight: 850;
}

.mobile-email-section-head span {
    color: #737b8c;
    font-size: 12px;
    font-weight: 720;
}

.mobile-email-list {
    display: grid;
    gap: 9px;
}

.mobile-email-campaign-row,
.mobile-email-sender-row,
.mobile-email-queue-row,
.mobile-email-empty-row {
    display: grid;
    align-items: center;
    gap: 12px;
    min-height: 68px;
    padding: 12px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.045);
}

.mobile-email-campaign-row {
    grid-template-columns: minmax(0, 1fr) auto;
}

.mobile-email-sender-row {
    grid-template-columns: 42px minmax(0, 1fr) auto;
}

.mobile-email-queue-row {
    grid-template-columns: 34px minmax(0, 1fr) auto;
}

.mobile-email-empty-row {
    min-height: 86px;
}

.mobile-email-campaign-row strong,
.mobile-email-campaign-row span,
.mobile-email-sender-row strong,
.mobile-email-sender-row span,
.mobile-email-queue-row strong,
.mobile-email-queue-row small,
.mobile-email-empty-row strong,
.mobile-email-empty-row span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-email-campaign-row strong,
.mobile-email-sender-row strong,
.mobile-email-queue-row strong,
.mobile-email-empty-row strong {
    font-size: 14px;
    line-height: 1.15;
    font-weight: 840;
}

.mobile-email-campaign-row span,
.mobile-email-sender-row span,
.mobile-email-queue-row small,
.mobile-email-empty-row span {
    margin-top: 5px;
    color: #667085;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 650;
}

.mobile-email-campaign-row em,
.mobile-email-sender-row i,
.mobile-email-queue-row em {
    flex: 0 0 auto;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 9px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475467;
    font-size: 11px;
    font-style: normal;
    font-weight: 760;
}

.mobile-email-sender-row__mark,
.mobile-email-queue-row > span {
    width: 42px;
    height: 42px;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef4ff;
    color: #175cd3;
    font-size: 14px;
    font-weight: 850;
}

.mobile-email-queue-row > span {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    color: #475467;
    background: #f2f4f7;
    font-size: 12px;
}

.mobile-email-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 12px;
}

.mobile-email-action {
    appearance: none;
    -webkit-appearance: none;
    min-width: 0;
    min-height: 68px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.86);
    color: #0d1117;
    text-align: left;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    cursor: pointer;
}

.mobile-email-action.is-primary {
    border-color: rgba(23, 92, 211, 0.24);
    background: #eef4ff;
}

.mobile-email-action__mark {
    width: 34px;
    height: 34px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: #175cd3;
    font-size: 14px;
    font-weight: 850;
}

.mobile-email-action strong,
.mobile-email-action small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-email-action strong {
    font-size: 13px;
    line-height: 1.1;
    font-weight: 850;
}

.mobile-email-action small {
    margin-top: 5px;
    color: #667085;
    font-size: 11px;
    line-height: 1.1;
    font-weight: 680;
}

.mobile-email-advanced {
    margin-top: 12px;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.045);
}

.mobile-email-advanced summary {
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 14px;
    cursor: pointer;
    list-style: none;
}

.mobile-email-advanced summary::-webkit-details-marker {
    display: none;
}

.mobile-email-advanced summary span {
    font-size: 14px;
    font-weight: 820;
}

.mobile-email-advanced summary i {
    color: #667085;
    transition: transform 0.18s ease;
}

.mobile-email-advanced[open] summary i {
    transform: rotate(180deg);
}

.mobile-email-advanced__body {
    display: grid;
    gap: 12px;
    padding: 0 14px 14px;
    border-top: 1px solid rgba(15, 23, 42, 0.07);
}

.mobile-email-chip-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding-top: 12px;
}

.mobile-email-chip {
    appearance: none;
    -webkit-appearance: none;
    min-width: 0;
    min-height: 48px;
    padding: 8px 10px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    background: #ffffff;
    color: #0d1117;
    text-align: left;
    cursor: pointer;
}

.mobile-email-chip.is-selected {
    border-color: rgba(23, 92, 211, 0.28);
    background: #eef4ff;
}

.mobile-email-chip span,
.mobile-email-chip small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-email-chip span {
    font-size: 12px;
    font-weight: 820;
}

.mobile-email-chip small {
    margin-top: 4px;
    color: #667085;
    font-size: 10px;
    font-weight: 680;
}

.mobile-email-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.mobile-email-form label {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.mobile-email-form label.is-wide {
    grid-column: 1 / -1;
}

.mobile-email-form label span {
    color: #667085;
    font-size: 10px;
    line-height: 1;
    font-weight: 780;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.mobile-email-form input,
.mobile-email-form select {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 15px;
    background: #ffffff;
    color: #0d1117;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 700;
    outline: none;
}

.mobile-email-queue-note {
    display: grid;
    gap: 5px;
    margin-top: 12px;
    padding: 14px;
    border: 1px solid rgba(23, 92, 211, 0.12);
    border-radius: 20px;
    background: rgba(238, 244, 255, 0.9);
}

.mobile-email-queue-note strong,
.mobile-email-queue-note span {
    display: block;
}

.mobile-email-queue-note strong {
    color: #175cd3;
    font-size: 13px;
    font-weight: 850;
}

.mobile-email-queue-note span {
    color: #475467;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 640;
}

.mobile-email-footer {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 10px;
    padding: 10px 18px calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(15, 23, 42, 0.07);
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.mobile-email-button {
    appearance: none;
    -webkit-appearance: none;
    min-height: 52px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.92);
    color: #0d1117;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    font-size: 14px;
    font-weight: 850;
    cursor: pointer;
}

.mobile-email-button.is-primary {
    border-color: #0d1117;
    background: #0d1117;
    color: #ffffff;
}

@media (max-width: 370px) {
    .mobile-email-actions,
    .mobile-email-chip-row,
    .mobile-email-form {
        grid-template-columns: 1fr;
    }

    .mobile-email-hero h1 {
        font-size: 30px;
    }
}

[data-theme="dark"] .mobile-email-platform,
body[data-theme="dark"] .mobile-email-platform {
    background:
        radial-gradient(circle at 50% -12%, rgba(96, 165, 250, 0.16), transparent 30%),
        linear-gradient(180deg, #10151d 0%, #0c1118 100%);
    color: #f8fafc;
}

/* Legacy Bloc Space calendar base styles moved from mobile.html. */
.mobile-blocspace-calendar-shell {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: calc(100vh - 196px);
}

.mobile-blocspace-section-hero {
    display: grid;
    gap: 8px;
    margin-bottom: 14px;
    padding: 14px;
    border-radius: 22px;
    border: 1px solid color-mix(in srgb, var(--text-primary) 9%, transparent);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--primary-color) 12%, transparent), transparent 62%),
        color-mix(in srgb, var(--surface-color) 52%, transparent);
}

.mobile-blocspace-section-kicker {
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.mobile-blocspace-section-headline {
    color: var(--text-primary);
    font-size: 30px;
    line-height: 0.95;
    font-weight: 950;
    letter-spacing: 0;
}

.mobile-blocspace-section-subtitle {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.4;
    font-weight: 750;
}

.mobile-blocspace-wallet-shell {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 14px;
}

.mobile-blocspace-wallet-shell button,
.mobile-blocspace-wallet-shell a {
    -webkit-tap-highlight-color: transparent;
}

.mobile-blocspace-calendar-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding: 0 0 4px;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 88%, transparent);
}

.mobile-blocspace-calendar-meta {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.mobile-blocspace-calendar-month {
    margin-top: 2px;
    font-size: 28px;
    line-height: 0.96;
    font-weight: 900;
    letter-spacing: -0.05em;
    color: var(--text-primary);
}

.mobile-blocspace-calendar-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mobile-blocspace-calendar-nav {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 38px;
    padding: 4px;
    border: 1px solid color-mix(in srgb, var(--border-color) 86%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-color) 94%, transparent);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--text-primary) 5%, transparent);
}

.mobile-blocspace-calendar-control {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease, color 0.18s ease;
}

.mobile-blocspace-calendar-control.is-add {
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
}

.mobile-blocspace-calendar-control:active {
    transform: scale(0.96);
}

.mobile-blocspace-calendar-control.is-today {
    width: auto;
    min-width: 56px;
    padding: 0 14px;
    background: var(--background-color);
    box-shadow: 0 6px 14px color-mix(in srgb, var(--text-primary) 8%, transparent);
    font-size: 12px;
    letter-spacing: 0;
}

.mobile-blocspace-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0;
    padding-top: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 88%, transparent);
}

.mobile-blocspace-calendar-weekday {
    padding: 0 2px 6px;
    text-align: center;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.mobile-blocspace-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid color-mix(in srgb, var(--border-color) 84%, transparent);
    border-left: 1px solid color-mix(in srgb, var(--border-color) 84%, transparent);
    background: color-mix(in srgb, var(--background-color) 94%, var(--surface-color) 6%);
}

.mobile-blocspace-calendar-day {
    min-height: 98px;
    border: 0;
    border-right: 1px solid color-mix(in srgb, var(--border-color) 84%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 84%, transparent);
    background: transparent;
    color: var(--text-primary);
    padding: 7px 5px 5px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    text-align: left;
    cursor: pointer;
    transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.mobile-blocspace-calendar-day:active {
    transform: scale(0.985);
}

.mobile-blocspace-calendar-day.is-other-month {
    color: color-mix(in srgb, var(--text-secondary) 74%, transparent);
}

.mobile-blocspace-calendar-day.is-event-day {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--primary-color) 2%, transparent), transparent 46%),
        transparent;
}

.mobile-blocspace-calendar-day.is-today {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--primary-color) 10%, var(--background-color) 90%), transparent 54%),
        transparent;
}

.mobile-blocspace-calendar-day.is-selected {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--primary-color) 16%, var(--background-color) 84%), color-mix(in srgb, var(--primary-color) 8%, var(--background-color) 92%));
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary-color) 38%, transparent);
}

.mobile-blocspace-calendar-day-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-height: 24px;
}

.mobile-blocspace-calendar-day-number {
    font-size: 16px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -0.04em;
    color: inherit;
}

.mobile-blocspace-calendar-day.is-today .mobile-blocspace-calendar-day-number {
    font-size: 18px;
}

.mobile-blocspace-calendar-today-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: transparent;
    opacity: 0;
    transition: opacity 0.18s ease, background 0.18s ease;
}

.mobile-blocspace-calendar-event-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 7px;
    height: 7px;
    padding: 0;
    border-radius: 999px;
    background: var(--primary-color);
    color: #ffffff;
    font-size: 8px;
    line-height: 1;
    font-weight: 950;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--background-color) 92%, transparent);
}

.mobile-blocspace-calendar-event-dot:not(:empty) {
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
}

.mobile-blocspace-calendar-day.is-today .mobile-blocspace-calendar-today-dot {
    opacity: 1;
    background: var(--primary-color);
}

.mobile-blocspace-calendar-day.is-event-day:not(.is-today) .mobile-blocspace-calendar-today-dot {
    opacity: 0.72;
    background: color-mix(in srgb, var(--accent-color) 82%, var(--background-color) 18%);
}

.mobile-blocspace-calendar-day-events {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    min-width: 0;
    margin-top: auto;
}

.mobile-blocspace-calendar-more {
    font-size: 9px;
    line-height: 1;
    font-weight: 800;
    color: var(--text-secondary);
    padding-left: 3px;
}

.mobile-blocspace-calendar-agenda {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 14px;
    padding: 0 0 2px;
    border-top: 0;
}

.mobile-blocspace-calendar-agenda.is-animating {
    animation: mobileBlocCalendarAgendaSwap 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.mobile-blocspace-calendar-agenda-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--surface-color) 68%, var(--background-color) 32%);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--text-primary) 5%, transparent);
}

.mobile-blocspace-calendar-agenda-copy {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.mobile-blocspace-calendar-agenda-label {
    width: max-content;
    max-width: 100%;
    padding: 4px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary-color) 9%, transparent);
    color: color-mix(in srgb, var(--text-primary) 74%, transparent);
    font-size: 9px;
    font-weight: 950;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.mobile-blocspace-calendar-agenda-date {
    margin-top: 0;
    font-size: clamp(21px, 5.5vw, 27px);
    line-height: 1.04;
    font-weight: 950;
    letter-spacing: 0;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-blocspace-calendar-agenda-count {
    min-width: auto;
    height: auto;
    padding: 0;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    background: transparent;
    border: 0;
    padding: 7px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--background-color) 78%, transparent);
    border: 1px solid color-mix(in srgb, var(--text-primary) 7%, transparent);
    font-size: 12px;
    font-weight: 950;
    color: color-mix(in srgb, var(--text-primary) 78%, transparent);
    white-space: nowrap;
}

.mobile-blocspace-calendar-agenda-empty {
    padding: 10px 0 2px;
    border-top: 1px solid color-mix(in srgb, var(--border-color) 88%, transparent);
    font-size: 13px;
    color: var(--text-secondary);
}

.mobile-blocspace-calendar-agenda-hint {
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-secondary);
}

.mobile-blocspace-calendar-agenda-row {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid color-mix(in srgb, var(--border-color) 88%, transparent);
    background: transparent;
    width: 100%;
    text-align: left;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    cursor: pointer;
}

.mobile-blocspace-calendar-agenda-time {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-secondary);
    padding-top: 3px;
}

.mobile-blocspace-calendar-agenda-meta {
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-secondary);
}

.mobile-blocspace-calendar-agenda-event {
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0;
    text-align: left;
    cursor: pointer;
}

.mobile-blocspace-calendar-event-card {
    --event-accent: var(--accent-color);
    --event-background: color-mix(in srgb, var(--accent-color) 12%, var(--surface-color) 88%);
    --event-border: color-mix(in srgb, var(--accent-color) 30%, var(--border-color) 70%);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    min-width: 0;
    border: 1px solid var(--event-border);
    border-radius: 8px;
    background: var(--event-background);
}

.mobile-blocspace-calendar-event-card.has-call-action {
    grid-template-columns: minmax(0, 1fr) 22px;
}

.mobile-blocspace-calendar-event-card.is-compact {
    gap: 4px;
    border-radius: 7px;
}

.mobile-blocspace-calendar-event-card.is-meeting {
    --event-accent: var(--primary-color);
    --event-background: color-mix(in srgb, var(--primary-color) 14%, var(--surface-color) 86%);
    --event-border: color-mix(in srgb, var(--primary-color) 34%, var(--border-color) 66%);
}

.mobile-blocspace-calendar-event-card.is-complete {
    --event-accent: var(--text-secondary);
    --event-background: color-mix(in srgb, var(--text-secondary) 10%, var(--surface-color) 90%);
    --event-border: color-mix(in srgb, var(--text-secondary) 22%, var(--border-color) 78%);
    opacity: 0.56;
}

.mobile-blocspace-calendar-event-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 4px 8px;
    border-left: 3px solid var(--event-accent);
}

.mobile-blocspace-calendar-event-card.is-compact .mobile-blocspace-calendar-event-copy {
    gap: 0;
    padding: 2px 5px 2px 6px;
}

.mobile-blocspace-calendar-event-title-row {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

.mobile-blocspace-calendar-event-title {
    min-width: 0;
    overflow: hidden;
    color: var(--text-primary);
    font-size: 11px;
    line-height: 1.1;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-blocspace-calendar-event-card.is-compact .mobile-blocspace-calendar-event-title {
    font-size: 9px;
}

.mobile-blocspace-calendar-event-card.is-complete .mobile-blocspace-calendar-event-title {
    font-weight: 700;
    text-decoration: line-through;
}

.mobile-blocspace-calendar-event-repeat-icon,
.mobile-blocspace-calendar-event-repeat-label {
    flex: 0 0 auto;
    color: var(--text-secondary);
    font-size: 8px;
    line-height: 1;
    font-weight: 800;
}

.mobile-blocspace-calendar-event-repeat-label {
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.mobile-blocspace-calendar-event-repeat-text {
    color: var(--text-secondary);
    font-size: 9px;
    line-height: 1;
    font-weight: 700;
}

.mobile-blocspace-calendar-event-call {
    width: 22px;
    height: 22px;
    margin-right: 2px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.86;
}

.mobile-blocspace-calendar-event-card.is-meeting .mobile-blocspace-calendar-event-call {
    color: var(--primary-color);
}

.mobile-blocspace-calendar-event-card.is-complete .mobile-blocspace-calendar-event-call {
    color: var(--text-secondary);
    opacity: 0.6;
}

.mobile-blocspace-calendar-event-call i {
    font-size: 10px;
}

[data-theme="dark"] .mobile-blocspace-calendar-nav,
[data-theme="dark-accent"] .mobile-blocspace-calendar-nav {
    background: color-mix(in srgb, var(--surface-color) 92%, transparent);
    border-color: color-mix(in srgb, var(--border-color) 92%, transparent);
    box-shadow: 0 10px 24px color-mix(in srgb, #000000 24%, transparent);
}

[data-theme="dark"] .mobile-blocspace-calendar-control.is-today,
[data-theme="dark-accent"] .mobile-blocspace-calendar-control.is-today {
    background: color-mix(in srgb, var(--surface-color) 90%, #ffffff 10%);
}

[data-theme="dark"] .mobile-blocspace-calendar-control.is-add,
[data-theme="dark-accent"] .mobile-blocspace-calendar-control.is-add {
    background: color-mix(in srgb, var(--primary-color) 16%, transparent);
}

[data-theme="dark"] .mobile-blocspace-calendar-grid,
[data-theme="dark-accent"] .mobile-blocspace-calendar-grid {
    background: color-mix(in srgb, var(--background-color) 82%, var(--surface-color) 18%);
}

[data-theme="dark"] .mobile-blocspace-calendar-day.is-event-day,
[data-theme="dark-accent"] .mobile-blocspace-calendar-day.is-event-day {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--primary-color) 10%, transparent), transparent 46%),
        transparent;
}

[data-theme="dark"] .mobile-blocspace-calendar-day.is-today,
[data-theme="dark-accent"] .mobile-blocspace-calendar-day.is-today {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--primary-color) 18%, var(--background-color) 82%), transparent 54%),
        transparent;
}

[data-theme="dark"] .mobile-blocspace-calendar-day.is-selected,
[data-theme="dark-accent"] .mobile-blocspace-calendar-day.is-selected {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--primary-color) 24%, var(--background-color) 76%), color-mix(in srgb, var(--primary-color) 12%, var(--background-color) 88%));
}

@keyframes mobileBlocCalendarAgendaSwap {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.mobile-blocspace-calendar-shell {
    position: relative;
    gap: 12px;
    padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px));
}

.mobile-blocspace-calendar-shell.mobile-blocspace-calendar-schedule-mode {
    min-height: calc(100vh - 132px);
}

.mobile-blocspace-calendar-shell.mobile-blocspace-calendar-month-mode {
    min-height: calc(100vh - 132px);
}

.mobile-blocspace-calendar-shell.mobile-blocspace-calendar-schedule-mode > .mobile-blocspace-calendar-weekdays,
.mobile-blocspace-calendar-shell.mobile-blocspace-calendar-schedule-mode > .mobile-blocspace-calendar-grid,
.mobile-blocspace-calendar-shell.mobile-blocspace-calendar-schedule-mode > .mobile-blocspace-calendar-agenda {
    display: none !important;
}

.mobile-blocspace-calendar-shell.mobile-blocspace-calendar-month-mode #mobile-blocspace-calendar-schedule-strip,
.mobile-blocspace-calendar-shell.mobile-blocspace-calendar-month-mode #mobile-blocspace-calendar-schedule-timeline {
    display: none !important;
}

.mobile-blocspace-calendar-shell .mobile-blocspace-calendar-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 46px;
    padding: 0 0 10px 48px;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 7%, transparent);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.mobile-blocspace-calendar-shell .mobile-blocspace-calendar-meta {
    display: none;
}

.mobile-blocspace-calendar-shell .mobile-blocspace-calendar-month {
    margin: 0;
    font-size: clamp(25px, 6.2vw, 32px) !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    display: inline-flex;
    align-items: center;
    min-height: 38px;
}

.mobile-blocspace-calendar-shell .mobile-blocspace-calendar-controls {
    gap: 5px;
    flex: 0 0 auto;
    align-items: center;
    min-height: 38px;
}

.mobile-blocspace-calendar-shell .mobile-blocspace-calendar-nav {
    min-height: 32px;
    padding: 2px;
    border: 1px solid color-mix(in srgb, var(--text-primary) 7%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-color) 58%, transparent);
    box-shadow: none;
    gap: 0;
}

.mobile-blocspace-calendar-shell .mobile-blocspace-calendar-control {
    width: 29px;
    height: 28px;
    font-size: 13px;
    font-weight: 950;
}

.mobile-blocspace-calendar-shell .mobile-blocspace-calendar-control.is-today {
    min-width: 54px;
    padding: 0 11px;
    font-size: 11px;
    font-weight: 950;
    background: transparent;
    color: var(--text-primary);
}

.mobile-blocspace-calendar-shell .mobile-blocspace-calendar-control.is-add {
    width: 32px;
    height: 32px;
    border: 1px solid color-mix(in srgb, var(--text-primary) 7%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--background-color) 82%, transparent) !important;
    color: var(--text-primary) !important;
    box-shadow: none !important;
    font-size: 19px;
    font-weight: 600;
}

.mobile-blocspace-calendar-schedule-view {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mobile-blocspace-calendar-schedule-toolbar {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 38px;
}

.mobile-blocspace-calendar-menu-btn {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-primary) 6%, transparent);
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    box-shadow: none;
}

.mobile-blocspace-calendar-view-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 3;
    min-width: 176px;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 0;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--text-primary) 11%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--background-color) 94%, var(--surface-color) 6%);
    box-shadow: 0 18px 40px color-mix(in srgb, #000000 28%, transparent);
}

.mobile-blocspace-calendar-shell.mobile-blocspace-calendar-day-view #mobile-blocspace-calendar-schedule-strip {
    display: none !important;
}

.mobile-blocspace-calendar-shell.mobile-blocspace-calendar-day-view .mobile-blocspace-calendar-schedule-view {
    gap: 0;
}

.mobile-blocspace-day-view-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 0 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 86%, transparent);
}

.mobile-blocspace-day-view-head span {
    display: block;
    margin-bottom: 5px;
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.mobile-blocspace-day-view-head strong {
    display: block;
    color: var(--text-primary);
    font-size: clamp(24px, 6.8vw, 32px);
    line-height: 0.98;
    font-weight: 950;
    letter-spacing: 0;
}

.mobile-blocspace-day-view-head em {
    flex: 0 0 auto;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 900;
    font-style: normal;
    white-space: nowrap;
    padding-bottom: 4px;
}

.mobile-blocspace-day-event-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 14px;
}

.mobile-blocspace-day-event-list .mobile-blocspace-schedule-event {
    min-height: 58px;
}

.mobile-blocspace-day-empty {
    min-height: 58px;
    width: 100%;
    border: 1px dashed color-mix(in srgb, var(--text-primary) 18%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface-color) 54%, transparent);
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 850;
    cursor: pointer;
}

.mobile-blocspace-week-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
    border: 0;
    margin-top: 2px;
    margin-bottom: 12px;
    padding: 0;
    background: transparent;
}

.mobile-blocspace-week-day {
    min-height: 58px;
    border: 1px solid color-mix(in srgb, var(--text-primary) 6%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface-color) 54%, var(--background-color) 46%);
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 2px 7px;
    cursor: pointer;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--text-primary) 3%, transparent);
}

.mobile-blocspace-week-day span {
    font-size: 8px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--text-primary) 55%, transparent);
}

.mobile-blocspace-week-day strong {
    min-width: 0;
    height: auto;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    font-weight: 950;
}

.mobile-blocspace-week-day em {
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: var(--accent-color);
    color: transparent;
    font-size: 0;
    opacity: 0;
}

.mobile-blocspace-week-day em:not(:empty) {
    opacity: 1;
}

.mobile-blocspace-week-day.is-selected strong {
    background: transparent;
    color: var(--primary-color);
    box-shadow: none;
}

.mobile-blocspace-week-day.is-selected {
    border-color: color-mix(in srgb, var(--primary-color) 22%, transparent);
    background: color-mix(in srgb, var(--primary-color) 7%, var(--background-color) 93%);
}

.mobile-blocspace-week-selected-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--text-primary) 7%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--surface-color) 64%, var(--background-color) 36%);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--text-primary) 4%, transparent);
}

.mobile-blocspace-week-selected-head span {
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    margin-bottom: 6px;
    padding: 4px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
    color: color-mix(in srgb, var(--text-primary) 68%, transparent);
    font-size: 9px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.mobile-blocspace-week-selected-head strong {
    display: block;
    color: var(--text-primary);
    font-size: clamp(20px, 5.4vw, 27px);
    line-height: 1.06;
    font-weight: 950;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-blocspace-week-selected-head em {
    flex: 0 0 auto;
    min-width: max-content;
    padding: 7px 9px;
    border: 1px solid color-mix(in srgb, var(--text-primary) 7%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--background-color) 78%, transparent);
    color: color-mix(in srgb, var(--text-primary) 76%, transparent);
    font-size: 12px;
    font-weight: 950;
    font-style: normal;
    white-space: nowrap;
}

.mobile-blocspace-calendar-schedule-view.is-menu-open .mobile-blocspace-calendar-view-menu {
    display: flex;
}

.mobile-blocspace-calendar-view-menu button {
    width: 100%;
    min-height: 46px;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
    border-radius: 0;
    background: transparent;
    color: var(--text-primary);
    padding: 0 14px;
    font-size: 14px;
    font-weight: 850;
    cursor: pointer;
    text-align: left;
}

.mobile-blocspace-calendar-view-menu button.is-active {
    color: var(--text-primary);
    background: color-mix(in srgb, var(--text-primary) 8%, transparent);
}

.mobile-blocspace-calendar-shell.mobile-blocspace-calendar-month-mode .mobile-blocspace-calendar-weekdays {
    margin-top: 0;
    padding: 8px 0 2px;
    border-top: 0 !important;
    border-bottom: 0 !important;
    background: transparent !important;
}

.mobile-blocspace-calendar-shell.mobile-blocspace-calendar-month-mode .mobile-blocspace-calendar-weekday {
    padding: 0;
    border: 0 !important;
    background: transparent !important;
    color: color-mix(in srgb, var(--text-primary) 84%, transparent);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.14em;
}

.mobile-blocspace-calendar-shell.mobile-blocspace-calendar-month-mode .mobile-blocspace-calendar-grid {
    border: 0 !important;
    background: transparent !important;
    row-gap: 3px;
    padding-top: 8px;
}

.mobile-blocspace-calendar-shell.mobile-blocspace-calendar-month-mode .mobile-blocspace-calendar-day {
    min-height: clamp(48px, 11.5vw, 62px);
    padding: 7px 6px;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.mobile-blocspace-calendar-shell.mobile-blocspace-calendar-month-mode .mobile-blocspace-calendar-day-events {
    display: none !important;
}

.mobile-blocspace-calendar-shell.mobile-blocspace-calendar-month-mode .mobile-blocspace-calendar-day-number {
    font-size: clamp(20px, 5.8vw, 28px);
    font-weight: 950;
    letter-spacing: 0;
}

.mobile-blocspace-calendar-shell.mobile-blocspace-calendar-month-mode .mobile-blocspace-calendar-day.is-other-month .mobile-blocspace-calendar-day-number {
    color: color-mix(in srgb, var(--text-primary) 44%, transparent);
}

.mobile-blocspace-calendar-shell.mobile-blocspace-calendar-month-mode .mobile-blocspace-calendar-day:not(.is-other-month):not(.is-selected) .mobile-blocspace-calendar-day-number {
    color: var(--text-primary);
}

.mobile-blocspace-calendar-shell.mobile-blocspace-calendar-month-mode .mobile-blocspace-calendar-day:not(.is-selected):active .mobile-blocspace-calendar-day-number {
    background: color-mix(in srgb, var(--text-primary) 8%, transparent);
}

.mobile-blocspace-calendar-shell.mobile-blocspace-calendar-month-mode .mobile-blocspace-calendar-day.is-today .mobile-blocspace-calendar-day-number,
.mobile-blocspace-calendar-shell.mobile-blocspace-calendar-month-mode .mobile-blocspace-calendar-day.is-selected .mobile-blocspace-calendar-day-number {
    min-width: 32px;
    height: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mobile-blocspace-calendar-shell.mobile-blocspace-calendar-month-mode .mobile-blocspace-calendar-day.is-today .mobile-blocspace-calendar-day-number {
    background: color-mix(in srgb, var(--primary-color) 18%, transparent);
}

.mobile-blocspace-calendar-shell.mobile-blocspace-calendar-month-mode .mobile-blocspace-calendar-day.is-selected .mobile-blocspace-calendar-day-number {
    background: var(--primary-color);
    color: #ffffff;
    box-shadow: 0 7px 16px color-mix(in srgb, var(--primary-color) 24%, transparent);
}

.mobile-blocspace-calendar-shell.mobile-blocspace-calendar-month-mode .mobile-blocspace-calendar-day.is-today,
.mobile-blocspace-calendar-shell.mobile-blocspace-calendar-month-mode .mobile-blocspace-calendar-day.is-selected,
.mobile-blocspace-calendar-shell.mobile-blocspace-calendar-month-mode .mobile-blocspace-calendar-day.is-event-day {
    background: transparent !important;
    box-shadow: none !important;
}

.mobile-blocspace-calendar-shell.mobile-blocspace-calendar-month-mode .mobile-blocspace-calendar-day.is-event-day .mobile-blocspace-calendar-today-dot {
    opacity: 1;
    background: var(--accent-color);
}

.mobile-blocspace-calendar-shell.mobile-blocspace-calendar-month-mode .mobile-blocspace-calendar-day-top {
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    min-height: 40px;
}

.mobile-blocspace-calendar-shell.mobile-blocspace-calendar-month-mode .mobile-blocspace-calendar-today-dot {
    display: block;
    width: 4px;
    height: 4px;
    flex: 0 0 4px;
    margin: 0 auto;
}

.mobile-blocspace-calendar-shell.mobile-blocspace-calendar-month-mode .mobile-blocspace-calendar-event-dot {
    position: absolute;
    left: 50%;
    bottom: -4px;
    transform: translateX(-50%);
}

.mobile-blocspace-calendar-shell.mobile-blocspace-calendar-month-mode .mobile-blocspace-calendar-event-dot:not(:empty) {
    bottom: -9px;
}

.mobile-blocspace-calendar-shell.mobile-blocspace-calendar-month-mode .mobile-blocspace-calendar-day.is-selected .mobile-blocspace-calendar-today-dot {
    background: var(--primary-color);
}

.mobile-blocspace-calendar-shell.mobile-blocspace-calendar-month-mode .mobile-blocspace-calendar-day.is-today.is-selected .mobile-blocspace-calendar-today-dot {
    opacity: 0;
}

.mobile-blocspace-calendar-view-menu button:last-child {
    border-bottom: 0;
}

.mobile-blocspace-calendar-date-strip {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid color-mix(in srgb, var(--border-color) 86%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 86%, transparent);
}

.mobile-blocspace-calendar-shell.mobile-blocspace-calendar-week-view .mobile-blocspace-calendar-date-strip {
    border-top: 0 !important;
}

.mobile-blocspace-calendar-date-chip {
    position: relative;
    min-width: 0;
    min-height: 74px;
    border: 0;
    border-right: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
    background: transparent;
    color: var(--text-primary);
    padding: 10px 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
}

.mobile-blocspace-calendar-date-chip:last-child {
    border-right: 0;
}

.mobile-blocspace-calendar-date-chip span {
    font-size: 10px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mobile-blocspace-calendar-date-chip strong {
    min-width: 34px;
    height: 34px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    line-height: 1;
    font-weight: 950;
}

.mobile-blocspace-calendar-date-chip em {
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: transparent;
    font-size: 0;
}

.mobile-blocspace-calendar-date-chip.is-today em,
.mobile-blocspace-calendar-date-chip em:not(:empty) {
    background: var(--primary-color);
}

.mobile-blocspace-calendar-date-chip.is-selected strong {
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--primary-color) 28%, transparent);
}

.mobile-blocspace-schedule-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.mobile-blocspace-schedule-day-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--text-primary) 7%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--surface-color) 64%, var(--background-color) 36%);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--text-primary) 4%, transparent);
}

.mobile-blocspace-schedule-day-head span {
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    margin-bottom: 6px;
    padding: 4px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
    color: color-mix(in srgb, var(--text-primary) 68%, transparent);
    font-size: 9px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.mobile-blocspace-schedule-day-head strong {
    display: block;
    color: var(--text-primary);
    font-size: clamp(20px, 5.4vw, 27px);
    line-height: 1.06;
    font-weight: 950;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-blocspace-schedule-day-head em {
    flex: 0 0 auto;
    min-width: max-content;
    padding: 7px 9px;
    border: 1px solid color-mix(in srgb, var(--text-primary) 7%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--background-color) 78%, transparent);
    color: color-mix(in srgb, var(--text-primary) 76%, transparent);
    font-size: 12px;
    font-weight: 950;
    font-style: normal;
    white-space: nowrap;
}

.mobile-blocspace-schedule-all-day {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
}

.mobile-blocspace-schedule-all-day > span {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 850;
}

.mobile-blocspace-schedule-hours {
    position: relative;
}

.mobile-blocspace-schedule-hour-row.is-noon-row::after {
    content: "";
    position: absolute;
    left: 74px;
    right: 0;
    top: 0;
    height: 1px;
    background: var(--primary-color);
    z-index: 1;
}

.mobile-blocspace-schedule-hour-row {
    position: relative;
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    min-height: 82px;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 64%, transparent);
}

.mobile-blocspace-schedule-time {
    padding: 13px 12px 0 0;
    border-right: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 850;
    text-align: right;
    white-space: nowrap;
}

.mobile-blocspace-schedule-hour-row.is-noon-row .mobile-blocspace-schedule-time {
    color: transparent;
}

.mobile-blocspace-schedule-lane {
    min-width: 0;
    padding: 9px 0 9px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mobile-blocspace-schedule-noon {
    display: none;
}

.mobile-blocspace-schedule-event {
    width: 100%;
    min-height: 48px;
    border: 1px solid color-mix(in srgb, var(--primary-color) 25%, var(--border-color));
    border-radius: 12px;
    background: color-mix(in srgb, var(--primary-color) 9%, var(--surface-color));
    color: var(--text-primary);
    display: grid;
    grid-template-columns: 4px minmax(0, 1fr) 22px;
    gap: 9px;
    align-items: center;
    padding: 8px 8px 8px 0;
    cursor: pointer;
    text-align: left;
}

.mobile-blocspace-schedule-event-rail {
    width: 4px;
    align-self: stretch;
    border-radius: 999px;
    background: var(--primary-color);
}

.mobile-blocspace-schedule-event-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mobile-blocspace-schedule-event-copy strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    line-height: 1.15;
    font-weight: 900;
}

.mobile-blocspace-schedule-event-copy span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.15;
    font-weight: 750;
}

.mobile-blocspace-schedule-event.is-green {
    border-color: color-mix(in srgb, var(--accent-color) 28%, var(--border-color));
    background: color-mix(in srgb, var(--accent-color) 10%, var(--surface-color));
}

.mobile-blocspace-schedule-event.is-green .mobile-blocspace-schedule-event-rail {
    background: var(--accent-color);
}

.mobile-blocspace-schedule-event.is-purple {
    border-color: color-mix(in srgb, var(--primary-color) 30%, var(--border-color));
}

.mobile-blocspace-schedule-event.is-blue {
    border-color: color-mix(in srgb, var(--primary-color) 34%, var(--border-color));
}

.mobile-blocspace-schedule-event.is-complete {
    opacity: 0.56;
}

.mobile-blocspace-schedule-empty {
    margin-top: 12px;
    min-height: 46px;
    width: 100%;
    border: 1px dashed color-mix(in srgb, var(--text-primary) 18%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface-color) 60%, transparent);
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 850;
    cursor: pointer;
}

.mobile-blocspace-calendar-modal {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 240050;
    background: var(--background-color, #ffffff);
    color: var(--text-primary, #111111);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    align-items: flex-end;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.mobile-blocspace-calendar-modal.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

html.mobile-blocspace-calendar-modal-open,
body.mobile-blocspace-calendar-modal-open {
    background: var(--background-color, #ffffff) !important;
}

body.mobile-blocspace-calendar-modal-open .mobile-blocspace-shell,
body.mobile-blocspace-calendar-modal-open .mobile-blocspace-tab-panel,
body.mobile-blocspace-calendar-modal-open .mobile-blocspace-calendar-shell {
    background: var(--background-color, #ffffff) !important;
}

.mobile-blocspace-calendar-modal.is-fullscreen {
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
    background: var(--background-color);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: var(--text-primary);
}

.mobile-blocspace-calendar-modal.is-detail {
    z-index: 240051;
    padding: 18px 14px;
    background: var(--background-color, #ffffff);
    color: var(--text-primary);
}

.mobile-blocspace-calendar-modal.is-day {
    z-index: 240049;
    padding: 18px 14px;
    background: var(--background-color, #ffffff);
    color: var(--text-primary);
}

.mobile-blocspace-calendar-modal-panel {
    width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    background: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -12px 42px rgba(15, 23, 42, 0.16);
}

.mobile-blocspace-calendar-modal-panel.is-fullscreen {
    height: 100%;
    max-height: 100vh;
    border: 0;
    border-radius: 0;
    background: var(--background-color);
    color: var(--text-primary);
    box-shadow: none;
    display: flex;
    flex-direction: column;
}

.mobile-blocspace-calendar-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--border-color);
}

.mobile-blocspace-calendar-modal-head.is-sticky {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px;
    background: var(--background-color);
    color: var(--text-primary);
}

.mobile-blocspace-calendar-modal-kicker {
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.mobile-blocspace-calendar-modal-title {
    margin-top: 4px;
    color: var(--text-primary);
    font-size: 18px;
    line-height: 1;
    font-weight: 900;
}

.mobile-blocspace-calendar-modal-title.is-large {
    font-size: 24px;
    line-height: 1.05;
}

.mobile-blocspace-calendar-icon-btn {
    width: 38px;
    height: 38px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--surface-color);
    color: var(--text-primary);
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.mobile-blocspace-calendar-icon-btn.is-compact {
    width: 34px;
    height: 34px;
}

.mobile-blocspace-calendar-event-form {
    padding: 10px 12px calc(16px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mobile-blocspace-calendar-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.mobile-blocspace-calendar-form-grid:has(> [style*="display: none"]) {
    grid-template-columns: minmax(0, 1fr);
}

.mobile-blocspace-calendar-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mobile-blocspace-calendar-field-label,
.mobile-blocspace-calendar-field > span {
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.mobile-blocspace-calendar-input,
.mobile-blocspace-calendar-picker,
.mobile-blocspace-calendar-select-shell {
    min-height: 48px;
    border: 1px solid color-mix(in srgb, var(--text-primary) 13%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--background-color) 96%, var(--text-primary) 2%);
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
    box-shadow: none;
    caret-color: var(--text-primary);
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.mobile-blocspace-calendar-input {
    padding: 0 14px;
    font-size: 15px;
    font-weight: 800;
    outline: none;
}

.mobile-blocspace-calendar-textarea,
.mobile-blocspace-calendar-select-shell select {
    background: transparent;
    background-color: transparent;
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
    caret-color: var(--text-primary);
}

.mobile-blocspace-calendar-input::placeholder,
.mobile-blocspace-calendar-textarea::placeholder {
    color: color-mix(in srgb, var(--text-secondary) 78%, transparent);
}

.mobile-blocspace-calendar-input:focus,
.mobile-blocspace-calendar-textarea:focus {
    background: color-mix(in srgb, var(--background-color) 98%, var(--text-primary) 1%);
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
    border-color: color-mix(in srgb, var(--primary-color) 72%, var(--text-primary) 10%);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 18%, transparent);
}

.mobile-blocspace-calendar-input:-webkit-autofill,
.mobile-blocspace-calendar-input:-webkit-autofill:hover,
.mobile-blocspace-calendar-input:-webkit-autofill:focus,
.mobile-blocspace-calendar-textarea:-webkit-autofill,
.mobile-blocspace-calendar-textarea:-webkit-autofill:hover,
.mobile-blocspace-calendar-textarea:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text-primary) !important;
    box-shadow: 0 0 0 1000px var(--background-color) inset !important;
    transition: background-color 9999s ease-out 0s;
}

.mobile-blocspace-calendar-picker,
.mobile-blocspace-calendar-select-shell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 12px;
    overflow: hidden;
    text-align: left;
}

.mobile-blocspace-calendar-select-shell {
    padding: 0;
}

.mobile-blocspace-calendar-picker span {
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 800;
}

.mobile-blocspace-calendar-picker i,
.mobile-blocspace-calendar-select-shell i {
    color: var(--text-secondary);
    font-size: 12px;
}

.mobile-blocspace-calendar-picker input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    background: transparent !important;
    color: var(--text-primary) !important;
    color-scheme: light;
}

.mobile-blocspace-calendar-select-shell select {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
    border-radius: inherit;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--text-primary);
    padding: 0 46px 0 14px;
    font-size: 15px;
    font-weight: 800;
    outline: none;
    appearance: none !important;
    -webkit-appearance: none !important;
    box-shadow: none !important;
}

.mobile-blocspace-calendar-select-shell select::-ms-expand {
    display: none;
}

.mobile-blocspace-calendar-select-shell option {
    background: var(--background-color, #ffffff);
    color: var(--text-primary, #111111);
}

.mobile-blocspace-calendar-select-shell i {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.mobile-blocspace-calendar-meeting-section {
    display: none;
    flex-direction: column;
    gap: 6px;
    margin-top: 0;
}

.mobile-blocspace-calendar-meeting-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.mobile-blocspace-calendar-meeting-badge {
    display: none;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(var(--primary-rgb), 0.08);
    color: var(--primary-color);
    font-size: 11px;
    font-weight: 800;
}

.mobile-blocspace-calendar-helper {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.35;
}

.mobile-blocspace-calendar-link-actions {
    display: none;
    align-items: center;
    gap: 8px;
}

.mobile-blocspace-calendar-link-actions button {
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--surface-color);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.mobile-blocspace-calendar-link-actions button:first-child {
    border-color: rgba(var(--primary-rgb), 0.16);
    background: rgba(var(--primary-rgb), 0.08);
    color: var(--primary-color);
}

.mobile-blocspace-calendar-suggestions {
    display: none;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--surface-color);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

.mobile-blocspace-calendar-textarea {
    min-height: 96px;
    border: 1px solid color-mix(in srgb, var(--text-primary) 13%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--background-color) 96%, var(--text-primary) 2%);
    color: var(--text-primary);
    padding: 12px 14px;
    font-size: 14px;
    resize: none;
    outline: none;
    box-shadow: none;
}

.mobile-blocspace-calendar-form-footer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 4px;
}

.mobile-blocspace-calendar-modal-note {
    color: var(--text-secondary);
    font-size: 11px;
}

.mobile-blocspace-calendar-form-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.mobile-blocspace-calendar-btn {
    height: 42px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
    background: color-mix(in srgb, var(--background-color) 94%, var(--text-primary) 5%);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 850;
    cursor: pointer;
}

.mobile-blocspace-calendar-btn.is-primary {
    border-color: transparent;
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--primary-color) 28%, transparent);
}

.mobile-blocspace-calendar-detail-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mobile-blocspace-calendar-detail-meta {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 800;
}

.mobile-blocspace-calendar-detail-title {
    color: var(--text-primary);
    font-size: 26px;
    line-height: 1.1;
    font-weight: 900;
}

.mobile-blocspace-calendar-detail-title.is-complete {
    text-decoration: line-through;
}

.mobile-blocspace-calendar-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.mobile-blocspace-calendar-detail-stat,
.mobile-blocspace-calendar-detail-section {
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.mobile-blocspace-calendar-detail-stat {
    padding-bottom: 0;
}

.mobile-blocspace-calendar-detail-label {
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.mobile-blocspace-calendar-detail-value {
    margin-top: 6px;
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 800;
}

.mobile-blocspace-calendar-detail-text {
    margin-top: 6px;
    color: var(--text-primary);
    font-size: 15px;
    line-height: 1.5;
}

.mobile-blocspace-calendar-detail-text.is-body {
    line-height: 1.6;
}

.mobile-blocspace-calendar-detail-link-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.mobile-blocspace-calendar-detail-link {
    margin-top: 6px;
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.5;
    word-break: break-all;
}

.mobile-blocspace-calendar-detail-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.mobile-blocspace-calendar-detail-action {
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--surface-color);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.mobile-blocspace-calendar-detail-action.is-primary {
    border-color: transparent;
    background: var(--text-primary);
    color: var(--background-color);
}

.mobile-blocspace-calendar-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px 18px;
    border-top: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--surface-color) 70%, transparent);
}

.mobile-blocspace-calendar-modal-footer-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mobile-blocspace-calendar-btn.is-danger {
    border-color: rgba(220, 38, 38, 0.24);
    background: rgba(220, 38, 38, 0.08);
    color: #dc2626;
}

.mobile-blocspace-calendar-btn.is-soft {
    border-color: rgba(var(--primary-rgb), 0.16);
    background: rgba(var(--primary-rgb), 0.08);
    color: var(--primary-color);
}

.mobile-blocspace-calendar-day-modal-list {
    padding: 4px 18px 12px;
}

.mobile-blocspace-calendar-day-event-row {
    width: 100%;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 78%, transparent);
}

.mobile-blocspace-calendar-day-event-time {
    padding-top: 6px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 800;
}

.mobile-blocspace-calendar-day-event-main {
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.mobile-blocspace-calendar-day-event-meta {
    margin-top: 5px;
    color: var(--text-secondary);
    font-size: 11px;
}

.mobile-blocspace-calendar-day-event-repeat {
    margin-top: 5px;
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.mobile-blocspace-calendar-day-event-status {
    align-self: center;
    height: 32px;
    padding: 0 11px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--surface-color);
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.mobile-blocspace-calendar-day-event-status.is-complete {
    background: color-mix(in srgb, var(--primary-color) 10%, var(--surface-color));
}

.mobile-blocspace-calendar-day-event-empty {
    padding: 16px 0;
    color: var(--text-secondary);
    font-size: 13px;
}

.mobile-blocspace-calendar-day-modal-footer {
    padding: 12px 18px 18px;
    border-top: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--surface-color) 70%, transparent);
}

.mobile-blocspace-calendar-day-modal-footer .mobile-blocspace-calendar-btn {
    width: 100%;
    height: 44px;
    border-radius: 14px;
}

@media (max-width: 390px) {
    .mobile-blocspace-calendar-shell .mobile-blocspace-calendar-header {
        gap: 8px;
    }

    .mobile-blocspace-calendar-shell .mobile-blocspace-calendar-month {
        font-size: 30px !important;
    }

    .mobile-blocspace-calendar-shell .mobile-blocspace-calendar-control {
        width: 32px;
        height: 32px;
    }

    .mobile-blocspace-calendar-shell .mobile-blocspace-calendar-control.is-today {
        min-width: 58px;
        padding: 0 12px;
    }

    .mobile-blocspace-calendar-date-chip strong {
        min-width: 30px;
        height: 30px;
        font-size: 21px;
    }
}

/* Light accent final polish for Calendar, event forms, and detail sheets. */
html[data-theme="light-accent"] .mobile-blocspace-calendar-shell,
body[data-theme="light-accent"] .mobile-blocspace-calendar-shell,
html[data-theme="light-accent"] .mobile-blocspace-calendar-modal-panel,
body[data-theme="light-accent"] .mobile-blocspace-calendar-modal-panel {
    background:
        radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--accent-color, var(--primary-color, #ff4d2e)) 8%, transparent), transparent 36%),
        color-mix(in srgb, var(--accent-color, var(--primary-color, #ff4d2e)) 4%, #ffffff 96%) !important;
    color: #050505 !important;
}

html[data-theme="light-accent"] .mobile-blocspace-calendar-nav,
body[data-theme="light-accent"] .mobile-blocspace-calendar-nav,
html[data-theme="light-accent"] .mobile-blocspace-calendar-grid,
body[data-theme="light-accent"] .mobile-blocspace-calendar-grid,
html[data-theme="light-accent"] .mobile-blocspace-calendar-view-menu,
body[data-theme="light-accent"] .mobile-blocspace-calendar-view-menu,
html[data-theme="light-accent"] .mobile-blocspace-calendar-detail-stat,
html[data-theme="light-accent"] .mobile-blocspace-calendar-detail-section,
body[data-theme="light-accent"] .mobile-blocspace-calendar-detail-stat,
body[data-theme="light-accent"] .mobile-blocspace-calendar-detail-section {
    background: rgba(255, 255, 255, 0.86) !important;
    border-color: color-mix(in srgb, var(--accent-color, var(--primary-color, #ff4d2e)) 16%, rgba(5, 5, 5, 0.12)) !important;
    color: #050505 !important;
}

html[data-theme="light-accent"] .mobile-blocspace-calendar-control,
body[data-theme="light-accent"] .mobile-blocspace-calendar-control,
html[data-theme="light-accent"] .mobile-blocspace-calendar-menu-btn,
body[data-theme="light-accent"] .mobile-blocspace-calendar-menu-btn,
html[data-theme="light-accent"] .mobile-blocspace-calendar-date-chip,
body[data-theme="light-accent"] .mobile-blocspace-calendar-date-chip,
html[data-theme="light-accent"] .mobile-blocspace-calendar-day,
body[data-theme="light-accent"] .mobile-blocspace-calendar-day,
html[data-theme="light-accent"] .mobile-blocspace-calendar-day-event-status,
body[data-theme="light-accent"] .mobile-blocspace-calendar-day-event-status,
html[data-theme="light-accent"] .mobile-blocspace-calendar-icon-btn,
body[data-theme="light-accent"] .mobile-blocspace-calendar-icon-btn,
html[data-theme="light-accent"] .mobile-blocspace-calendar-btn,
body[data-theme="light-accent"] .mobile-blocspace-calendar-btn {
    background: rgba(255, 255, 255, 0.84) !important;
    border-color: color-mix(in srgb, var(--accent-color, var(--primary-color, #ff4d2e)) 14%, rgba(5, 5, 5, 0.12)) !important;
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
}

html[data-theme="light-accent"] .mobile-blocspace-calendar-control.is-add,
html[data-theme="light-accent"] .mobile-blocspace-calendar-btn.is-primary,
body[data-theme="light-accent"] .mobile-blocspace-calendar-control.is-add,
body[data-theme="light-accent"] .mobile-blocspace-calendar-btn.is-primary {
    background: #050505 !important;
    border-color: #050505 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html[data-theme="light-accent"] .mobile-blocspace-calendar-input,
html[data-theme="light-accent"] .mobile-blocspace-calendar-textarea,
html[data-theme="light-accent"] .mobile-blocspace-calendar-picker,
html[data-theme="light-accent"] .mobile-blocspace-calendar-select-shell,
html[data-theme="light-accent"] .mobile-blocspace-calendar-select-shell select,
body[data-theme="light-accent"] .mobile-blocspace-calendar-input,
body[data-theme="light-accent"] .mobile-blocspace-calendar-textarea,
body[data-theme="light-accent"] .mobile-blocspace-calendar-picker,
body[data-theme="light-accent"] .mobile-blocspace-calendar-select-shell,
body[data-theme="light-accent"] .mobile-blocspace-calendar-select-shell select {
    background: #ffffff !important;
    border-color: color-mix(in srgb, var(--accent-color, var(--primary-color, #ff4d2e)) 16%, rgba(5, 5, 5, 0.14)) !important;
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
    caret-color: #050505 !important;
}

html[data-theme="light-accent"] .mobile-blocspace-calendar-modal-footer,
html[data-theme="light-accent"] .mobile-blocspace-calendar-day-modal-footer,
body[data-theme="light-accent"] .mobile-blocspace-calendar-modal-footer,
body[data-theme="light-accent"] .mobile-blocspace-calendar-day-modal-footer {
    background: color-mix(in srgb, var(--accent-color, var(--primary-color, #ff4d2e)) 5%, #ffffff 95%) !important;
    border-color: color-mix(in srgb, var(--accent-color, var(--primary-color, #ff4d2e)) 16%, rgba(5, 5, 5, 0.12)) !important;
}

/* Bloc Space Calendar: flat agenda pass. Prefer rhythm and dividers over panels. */
.mobile-blocspace-calendar-shell,
.mobile-blocspace-calendar-shell *,
.mobile-blocspace-calendar-shell *::before,
.mobile-blocspace-calendar-shell *::after {
    box-shadow: none !important;
}

.mobile-blocspace-calendar-shell {
    gap: 18px !important;
    background: transparent !important;
}

.mobile-blocspace-calendar-shell button {
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none !important;
    filter: none !important;
}

.mobile-blocspace-calendar-shell .mobile-blocspace-calendar-header {
    min-height: 48px !important;
    padding: 0 0 16px 46px !important;
    border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent) !important;
}

.mobile-blocspace-calendar-shell .mobile-blocspace-calendar-month {
    font-size: clamp(24px, 6.4vw, 30px) !important;
    line-height: 1 !important;
}

.mobile-blocspace-calendar-shell .mobile-blocspace-calendar-nav {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    gap: 12px !important;
}

.mobile-blocspace-calendar-shell .mobile-blocspace-calendar-control,
.mobile-blocspace-calendar-shell .mobile-blocspace-calendar-control.is-today,
.mobile-blocspace-calendar-shell .mobile-blocspace-calendar-control.is-add,
.mobile-blocspace-calendar-menu-btn {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}

.mobile-blocspace-calendar-shell .mobile-blocspace-calendar-control.is-today {
    min-width: 0 !important;
    padding: 0 !important;
    font-size: 11px !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

.mobile-blocspace-calendar-shell .mobile-blocspace-calendar-control.is-add {
    width: 34px !important;
    height: 34px !important;
    font-size: 22px !important;
}

.mobile-blocspace-calendar-menu-btn {
    width: 34px !important;
    height: 34px !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

.mobile-blocspace-calendar-view-menu {
    border-radius: 0 !important;
    border-color: color-mix(in srgb, var(--text-primary) 10%, transparent) !important;
    background: var(--background-color) !important;
}

.mobile-blocspace-calendar-view-menu button {
    min-height: 42px !important;
    background: transparent !important;
}

.mobile-blocspace-calendar-view-menu button.is-active {
    background: color-mix(in srgb, var(--text-primary) 5%, transparent) !important;
}

.mobile-blocspace-calendar-shell.mobile-blocspace-calendar-month-mode .mobile-blocspace-calendar-weekdays {
    padding: 2px 0 4px !important;
}

.mobile-blocspace-calendar-shell.mobile-blocspace-calendar-month-mode .mobile-blocspace-calendar-grid {
    row-gap: 2px !important;
    padding-top: 4px !important;
}

.mobile-blocspace-calendar-shell.mobile-blocspace-calendar-month-mode .mobile-blocspace-calendar-day {
    min-height: clamp(42px, 10vw, 56px) !important;
}

.mobile-blocspace-calendar-shell.mobile-blocspace-calendar-month-mode .mobile-blocspace-calendar-day-number {
    font-size: clamp(18px, 4.9vw, 24px) !important;
    line-height: 1 !important;
}

.mobile-blocspace-calendar-shell.mobile-blocspace-calendar-month-mode .mobile-blocspace-calendar-day.is-today .mobile-blocspace-calendar-day-number,
.mobile-blocspace-calendar-shell.mobile-blocspace-calendar-month-mode .mobile-blocspace-calendar-day.is-selected .mobile-blocspace-calendar-day-number {
    min-width: 26px !important;
    height: 28px !important;
}

.mobile-blocspace-calendar-shell.mobile-blocspace-calendar-month-mode .mobile-blocspace-calendar-day.is-today .mobile-blocspace-calendar-day-number,
.mobile-blocspace-calendar-shell.mobile-blocspace-calendar-month-mode .mobile-blocspace-calendar-day.is-selected .mobile-blocspace-calendar-day-number {
    background: transparent !important;
    color: var(--text-primary) !important;
    border-radius: 0 !important;
    border-bottom: 2px solid var(--text-primary) !important;
}

.mobile-blocspace-calendar-shell.mobile-blocspace-calendar-month-mode .mobile-blocspace-calendar-day.is-event-day .mobile-blocspace-calendar-today-dot,
.mobile-blocspace-calendar-shell.mobile-blocspace-calendar-month-mode .mobile-blocspace-calendar-event-dot,
.mobile-blocspace-calendar-date-chip em {
    background: #16a34a !important;
}

.mobile-blocspace-calendar-shell.mobile-blocspace-calendar-month-mode .mobile-blocspace-calendar-today-dot {
    display: none !important;
    opacity: 0 !important;
    background: transparent !important;
}

.mobile-blocspace-calendar-shell.mobile-blocspace-calendar-month-mode .mobile-blocspace-calendar-day.is-event-day .mobile-blocspace-calendar-today-dot {
    display: none !important;
    opacity: 0 !important;
    background: transparent !important;
}

.mobile-blocspace-calendar-shell.mobile-blocspace-calendar-month-mode .mobile-blocspace-calendar-event-dot,
.mobile-blocspace-calendar-shell.mobile-blocspace-calendar-month-mode .mobile-blocspace-calendar-event-dot:not(:empty) {
    display: block !important;
    position: static !important;
    transform: none !important;
    width: 7px !important;
    min-width: 7px !important;
    height: 7px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    border-radius: 999px !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    box-shadow: none !important;
}

.mobile-blocspace-calendar-agenda {
    margin-top: 4px !important;
}

.mobile-blocspace-calendar-agenda-head,
.mobile-blocspace-week-selected-head,
.mobile-blocspace-schedule-day-head {
    padding: 0 0 14px !important;
    border: 0 !important;
    border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent) !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.mobile-blocspace-calendar-agenda-label,
.mobile-blocspace-week-selected-head span,
.mobile-blocspace-schedule-day-head span {
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--text-secondary) !important;
}

.mobile-blocspace-calendar-agenda-count,
.mobile-blocspace-week-selected-head em,
.mobile-blocspace-schedule-day-head em {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--text-secondary) !important;
    align-self: flex-end !important;
    margin-left: auto !important;
    padding-bottom: 4px !important;
    white-space: nowrap !important;
}

.mobile-blocspace-calendar-agenda-head,
.mobile-blocspace-week-selected-head,
.mobile-blocspace-schedule-day-head {
    align-items: flex-end !important;
    gap: 12px !important;
}

.mobile-blocspace-calendar-agenda-head > div,
.mobile-blocspace-week-selected-head > div,
.mobile-blocspace-schedule-day-head > div {
    min-width: 0 !important;
}

.mobile-blocspace-week-selected-head strong,
.mobile-blocspace-schedule-day-head strong {
    font-size: clamp(19px, 4.8vw, 24px) !important;
    line-height: 1.08 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

.mobile-blocspace-calendar-agenda-row,
.mobile-blocspace-calendar-day-event-row {
    padding: 13px 0 !important;
    border-top: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent) !important;
    background: transparent !important;
}

.mobile-blocspace-calendar-event-card,
.mobile-blocspace-schedule-event {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.mobile-blocspace-calendar-event-copy {
    padding: 0 !important;
    border-left: 0 !important;
}

.mobile-blocspace-calendar-event-title {
    font-size: 12px !important;
    font-weight: 900 !important;
}

.mobile-blocspace-calendar-event-meta {
    margin-top: 3px !important;
    color: var(--text-secondary) !important;
    font-size: 11px !important;
    font-weight: 750 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.mobile-blocspace-week-grid {
    gap: 0 !important;
    border-top: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent) !important;
}

.mobile-blocspace-week-day,
.mobile-blocspace-calendar-date-chip {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.mobile-blocspace-week-day.is-selected,
.mobile-blocspace-calendar-date-chip.is-selected strong {
    color: var(--text-primary) !important;
    background: transparent !important;
}

.mobile-blocspace-week-day.is-selected strong,
.mobile-blocspace-calendar-date-chip.is-selected strong {
    border-bottom: 2px solid var(--text-primary) !important;
}

.mobile-blocspace-schedule-hour-row {
    min-height: 74px !important;
    border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent) !important;
}

.mobile-blocspace-schedule-time {
    border-right: 0 !important;
    color: var(--text-secondary) !important;
    padding-right: 14px !important;
}

.mobile-blocspace-schedule-lane {
    padding-left: 18px !important;
}

.mobile-blocspace-calendar-agenda-event {
    width: 100% !important;
    display: block !important;
    text-align: left !important;
}

.mobile-blocspace-schedule-event {
    min-height: 44px !important;
    grid-template-columns: minmax(0, 1fr) 22px !important;
    padding: 8px 0 !important;
}

.mobile-blocspace-schedule-lane .mobile-blocspace-calendar-event-card {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
}

.mobile-blocspace-schedule-lane .mobile-blocspace-calendar-event-title {
    font-size: 13px !important;
    line-height: 1.2 !important;
}

.mobile-blocspace-schedule-lane .mobile-blocspace-calendar-event-meta {
    font-size: 11px !important;
}

.mobile-blocspace-schedule-event-rail {
    display: none !important;
}

.mobile-blocspace-day-empty,
.mobile-blocspace-schedule-empty {
    border: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent) !important;
    border-radius: 0 !important;
    background: transparent !important;
}

/* Calendar "Add event" in the composer look shared by Create, Community,
   Map Post, the shop Add item sheet and the booking Add service sheet.
   The page repaints modals with !important from several sheets, so rules
   here are doubled-id and !important; the field rules use four ids to beat
   the template's [data-theme] textarea/input chains. The ids the calendar
   script reads and toggles (display:flex/none on the wrappers) are kept, so
   every wrapper it touches is a flex row here. */

#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal {
    align-items: stretch !important; justify-content: stretch !important; padding: 0 !important;
    background: #FBFBF9 !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important;
    color-scheme: light !important;
    font-family: var(--font-family, Manrope), -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important;
}
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal * { box-sizing: border-box; font-family: var(--font-family, Manrope), -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important; letter-spacing: 0; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal button { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; filter: none !important; text-shadow: none !important; -webkit-font-smoothing: antialiased !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .mobile-blocspace-calendar-modal-panel {
    display: block !important; width: 100% !important; max-width: 100% !important; height: 100% !important; max-height: none !important;
    margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    background: #FBFBF9 !important; color: #111214 !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch;
}
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-shell {
    width: 100% !important; min-height: 100dvh !important; margin: 0 !important;
    padding: calc(14px + env(safe-area-inset-top, 0px)) 18px calc(112px + env(safe-area-inset-bottom, 0px)) !important;
}
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .mobile-blocspace-calendar-event-form { display: block !important; margin: 0 !important; padding: 0 !important; gap: 0 !important; }

/* ---- header bar ---- */
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-bar { display: flex !important; align-items: center !important; justify-content: space-between !important; margin: 0 0 14px !important; padding: 6px 0 0 !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-bar-cancel, #mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-bar-spacer { width: 64px !important; flex: 0 0 64px !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-bar-cancel {
    min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 8px 0 !important; border: 0 !important; border-radius: 0 !important;
    background: transparent !important; box-shadow: none !important; text-align: left !important;
    font-size: 13px !important; font-weight: 600 !important; color: #63635F !important; -webkit-text-fill-color: #63635F !important; cursor: pointer;
}
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-bar-title { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 2px !important; min-width: 0 !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-bar-title strong { background: transparent !important; padding: 0 !important; border-radius: 0 !important; font-size: 15px !important; font-weight: 800 !important; letter-spacing: -0.02em !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-bar-title small { background: transparent !important; padding: 0 !important; font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 9px !important; font-weight: 500 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: #70706B !important; -webkit-text-fill-color: #70706B !important; }

/* ---- Added by ---- */
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-posting { display: flex !important; align-items: center !important; gap: 12px !important; padding: 12px !important; border: 1px solid #EAEAE6 !important; border-radius: 18px !important; background: #FFFFFF !important; box-shadow: 0 1px 2px rgba(17, 18, 20, 0.03) !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-posting-avatar { width: 38px !important; height: 38px !important; flex: 0 0 38px !important; border-radius: 12px !important; overflow: hidden !important; background: #111214 !important; display: flex !important; align-items: center !important; justify-content: center !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-posting-avatar span { font-size: 13px !important; font-weight: 800 !important; color: #FBFBF9 !important; -webkit-text-fill-color: #FBFBF9 !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-posting-avatar img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-posting-copy { display: flex !important; flex-direction: column !important; gap: 3px !important; min-width: 0 !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-posting-label { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 9px !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: #70706B !important; -webkit-text-fill-color: #70706B !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-posting-name { font-size: 14px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }

/* ---- eyebrows ---- */
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-eyebrow, #mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-eyebrow span { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 9px !important; font-weight: 500 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: #70706B !important; -webkit-text-fill-color: #70706B !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-eyebrow { display: flex !important; align-items: baseline !important; justify-content: space-between !important; margin: 16px 0 8px !important; padding: 0 4px !important; }

/* ---- cards and rows ---- */
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-card { margin: 0 !important; padding: 0 !important; border: 1px solid #EAEAE6 !important; border-radius: 18px !important; background: #FFFFFF !important; box-shadow: 0 1px 2px rgba(17, 18, 20, 0.03) !important; overflow: visible !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-row { display: flex !important; align-items: center !important; gap: 10px !important; width: 100% !important; min-height: 50px !important; margin: 0 !important; padding: 0 14px !important; position: relative !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; text-align: left !important; }
/* The script hides rows with display:none inline; a hidden row must not
   leave its rule behind, so the line sits on the row itself, not between. */
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-row + .cal-row { border-top: 1px solid #EFEFEB !important; }
/* The script hides and shows rows with an inline display, which a plain
   inline value cannot do against the !important above; the hidden state is
   read back off the attribute instead. Both spellings: the markup writes
   "display:none", the script writes "display: none". */
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-row[style*="display:none"],
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-row[style*="display: none"] { display: none !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-row > span, #mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-row-line > span { flex: 0 0 auto !important; font-size: 13px !important; font-weight: 600 !important; color: #63635F !important; -webkit-text-fill-color: #63635F !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-row--field > span:first-child, #mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-row-line > span:first-child { flex: 0 0 84px !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-row--field input, #mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-row--field select { text-align: right !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-card input:not([type="date"]):not([type="time"]):not([type="hidden"]),
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-card select,
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-card textarea,
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-card input:not([type="date"]):not([type="time"]):not([type="hidden"]):focus,
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-card select:focus,
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-card textarea:focus {
    flex: 1 1 auto !important; width: 100% !important; max-width: none !important; min-width: 0 !important; height: 50px !important; min-height: 50px !important; margin: 0 !important; padding: 0 !important;
    border: 0 !important; border-radius: 0 !important; outline: none !important; box-shadow: none !important; background: transparent !important; background-color: transparent !important;
    font-size: 14px !important; font-weight: 600 !important; line-height: 1.3 !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; caret-color: #0FBFA4 !important;
    -webkit-appearance: none !important; appearance: none !important; color-scheme: light !important;
}
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-card select { background-image: none !important; padding-right: 0 !important; direction: rtl !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-card select option { direction: ltr !important; background: #FFFFFF !important; color: #111214 !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-card--text { padding: 2px 4px !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-card--text textarea, #mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-card--text textarea:focus { height: auto !important; min-height: 96px !important; padding: 14px 10px !important; resize: none !important; font-weight: 500 !important; line-height: 1.5 !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-card input::placeholder, #mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-card textarea::placeholder { color: #A3A3A0 !important; -webkit-text-fill-color: #A3A3A0 !important; opacity: 1 !important; }

/* ---- date and time: the value on the right, the native picker under it ---- */
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-pick, #mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal button.cal-pick {
    position: relative !important; flex: 1 1 auto !important; display: flex !important; align-items: center !important; justify-content: flex-end !important;
    min-height: 50px !important; height: 50px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
    background: transparent !important; box-shadow: none !important; overflow: hidden !important; text-align: right !important; cursor: pointer;
}
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-pick > span { flex: 0 0 auto !important; font-size: 14px !important; font-weight: 600 !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-pick > span.is-empty { color: #A3A3A0 !important; -webkit-text-fill-color: #A3A3A0 !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-pick input { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; opacity: 0 !important; border: 0 !important; background: transparent !important; color-scheme: light !important; cursor: pointer; }

/* ---- stacked rows: the online-meeting note, the address/link row ---- */
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-row--stack, #mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-row--location { flex-direction: column !important; align-items: stretch !important; gap: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-row-line { display: flex !important; align-items: center !important; gap: 10px !important; min-height: 50px !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-row-top { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; min-height: 44px !important; padding-top: 4px !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-row-top .mobile-blocspace-calendar-field-label { margin: 0 !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: #63635F !important; -webkit-text-fill-color: #63635F !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-badge { display: none; align-items: center !important; padding: 4px 9px !important; border-radius: 999px !important; background: rgba(15, 191, 164, 0.12) !important; font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 9px !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: #0B8F7B !important; -webkit-text-fill-color: #0B8F7B !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-helper { margin: 0 !important; padding: 0 0 12px !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1.45 !important; color: #8A8A84 !important; -webkit-text-fill-color: #8A8A84 !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-link-actions { display: none; gap: 8px !important; margin: 0 !important; padding: 0 0 12px !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-link-actions button {
    flex: 0 0 auto !important; min-height: 0 !important; height: 32px !important; margin: 0 !important; padding: 0 14px !important; border: 1px solid #EAEAE6 !important; border-radius: 999px !important;
    background: #F1F1ED !important; box-shadow: none !important; font-size: 12px !important; font-weight: 700 !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; cursor: pointer;
}
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .mobile-blocspace-calendar-suggestions { margin: 0 0 10px !important; }

/* ---- submit ---- */
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-foot { display: block !important; margin: 18px 0 0 !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-submit, #mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal button.cal-submit, #mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-submit:disabled {
    display: flex !important; align-items: center !important; justify-content: center !important;
    width: 100% !important; height: 54px !important; min-height: 54px !important; margin: 0 !important; padding: 0 !important;
    border: 0 !important; border-radius: 16px !important; background: #EDEDE8 !important; box-shadow: none !important; transform: none !important; opacity: 1 !important;
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0.22em !important; text-transform: uppercase !important;
    color: #8A8A84 !important; -webkit-text-fill-color: #8A8A84 !important;
}
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-submit::before, #mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-submit::after { content: none !important; display: none !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-submit.is-ready { background: #111214 !important; box-shadow: 0 12px 24px -12px rgba(17, 18, 20, 0.55) !important; color: #FBFBF9 !important; -webkit-text-fill-color: #FBFBF9 !important; }
#mobile-blocspace-calendar-event-modal#mobile-blocspace-calendar-event-modal .cal-note { background: transparent !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; margin: 9px 0 0 !important; text-align: center !important; font-size: 11.5px !important; font-weight: 500 !important; line-height: 1.4 !important; color: #63635F !important; -webkit-text-fill-color: #63635F !important; }

/* The join page, in the composer look the owner sheets share: paper, white
   cards, mono eyebrows, one black button. Doubled id and !important
   throughout, because the page under it repaints anything fixed. */
#membership-join#membership-join {
    position: fixed !important; inset: 0 !important; z-index: 2147482000 !important;
    display: flex !important; flex-direction: column !important;
    overflow: hidden !important; background: #FBFBF9 !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important;
    color-scheme: light !important;
    font-family: var(--font-family, Manrope), -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important;
}
#membership-join#membership-join[hidden] { display: none !important; }
#membership-join#membership-join * { box-sizing: border-box; font-family: var(--font-family, Manrope), -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important; letter-spacing: 0; }
#membership-join#membership-join button { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; filter: none !important; text-shadow: none !important; }
html.membership-join-open, body.membership-join-open { overflow: hidden !important; }

/* The top half is the app's picture, fading down into dark with the pitch
   on it, the way the app's own hero does. */
#membership-join#membership-join .membership-join__art {
    position: relative !important; flex: none !important; height: 46vh !important; min-height: 300px !important; max-height: 440px !important;
    display: flex !important; flex-direction: column !important; justify-content: space-between !important;
    background-color: #111214 !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; overflow: hidden !important;
}
#membership-join#membership-join .membership-join__art::after { content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; background: linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0) 32%, rgba(0, 0, 0, 0) 48%, rgba(0, 0, 0, 0.82) 100%) !important; }
#membership-join#membership-join .membership-join__art.is-blank::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%) !important; }
#membership-join#membership-join .membership-join__art-initial { position: absolute !important; right: -6px !important; top: 40px !important; font-size: 220px !important; line-height: 1 !important; font-weight: 800 !important; color: rgba(255, 255, 255, 0.07) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.07) !important; pointer-events: none !important; }
/* Three columns with equal sides, so the label sits on the page's centre line
   whatever the two buttons beside it measure. */
#membership-join#membership-join .membership-join__bar {
    position: relative !important; z-index: 1 !important; flex: none !important; display: grid !important; grid-template-columns: 1fr auto 1fr !important; align-items: center !important;
    padding: calc(14px + env(safe-area-inset-top, 0px)) 18px 10px !important;
}
#membership-join#membership-join .membership-join__close { justify-self: start !important; }
#membership-join#membership-join .membership-join__bar-title { justify-self: center !important; text-align: center !important; }
#membership-join#membership-join .membership-join__have { justify-self: end !important; text-align: right !important; }
#membership-join#membership-join .membership-join__bar-spacer { justify-self: end !important; }
/* The same switch as the login sheet, so the two read as one surface. */
#membership-join#membership-join .membership-join__tabs { flex: none !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 4px !important; margin: 14px 18px 0 !important; padding: 4px !important; border-radius: 999px !important; background: #EFEFEB !important; }
#membership-join#membership-join .membership-join__tab, #membership-join#membership-join .membership-join__tab:disabled { height: 38px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 999px !important; background: transparent !important; box-shadow: none !important; font-size: 13px !important; font-weight: 700 !important; color: #63635F !important; -webkit-text-fill-color: #63635F !important; cursor: pointer; opacity: 1 !important; }
#membership-join#membership-join .membership-join__tab.is-on { background: #111214 !important; color: #FBFBF9 !important; -webkit-text-fill-color: #FBFBF9 !important; box-shadow: 0 6px 14px -8px rgba(17, 18, 20, 0.5) !important; }
#membership-join#membership-join .membership-join__close, #membership-join#membership-join .membership-join__have {
    height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 8px 0 !important; border: 0 !important; border-radius: 0 !important;
    background: transparent !important; box-shadow: none !important;
    font-size: 13px !important; font-weight: 600 !important; color: rgba(255, 255, 255, 0.86) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.86) !important; cursor: pointer;
}
#membership-join#membership-join .membership-join__bar-title { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 9px !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: rgba(255, 255, 255, 0.72) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.72) !important; }

#membership-join#membership-join .membership-join__body { flex: 1 1 auto !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; padding: 0 18px 24px !important; }

/* The pitch leads, with the app's picture beside it as a circle: the page is
   about joining this app, and its face is the only chrome the top needs. */
#membership-join#membership-join .fas { font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome !important; font-weight: 900 !important; }
#membership-join#membership-join .membership-join__identity { position: relative !important; z-index: 1 !important; padding: 0 18px 16px !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; }
#membership-join#membership-join .membership-join__identity-name { display: flex !important; align-items: center !important; gap: 10px !important; font-size: calc(34px * var(--identity-scale, 1)) !important; line-height: 1.05 !important; font-weight: 800 !important; letter-spacing: 0.02em !important; text-transform: uppercase !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35); }
#membership-join#membership-join .membership-join__identity-name i { font-size: 18px !important; color: #22C55E !important; -webkit-text-fill-color: #22C55E !important; }
#membership-join#membership-join .membership-join__identity-role { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 8px !important; margin-top: 6px !important; font-size: 13px !important; font-weight: 500 !important; }
#membership-join#membership-join .membership-join__identity-role span { color: rgba(255, 255, 255, 0.82) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.82) !important; }
#membership-join#membership-join .membership-join__identity-role i { width: 4px !important; height: 4px !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.5) !important; display: inline-block !important; }
#membership-join#membership-join .membership-join__identity-rule { height: 1px !important; margin: 12px 0 !important; border: 0 !important; background: rgba(255, 255, 255, 0.22) !important; }
#membership-join#membership-join .membership-join__identity-org { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 10px !important; font-size: 13px !important; font-weight: 500 !important; }
#membership-join#membership-join .membership-join__identity-org span { color: rgba(255, 255, 255, 0.86) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.86) !important; }
#membership-join#membership-join .membership-join__identity-place { display: inline-flex !important; align-items: center !important; gap: 5px !important; }
#membership-join#membership-join .membership-join__identity-place i { font-size: 12px !important; color: rgba(255, 255, 255, 0.86) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.86) !important; }
#membership-join#membership-join .membership-join__hero { display: flex !important; align-items: flex-end !important; justify-content: space-between !important; gap: 16px !important; margin: 0 !important; padding: 18px 0 0 !important; }
#membership-join#membership-join .membership-join__hero-copy { flex: 1 1 auto !important; min-width: 0 !important; }
#membership-join#membership-join .membership-join__avatar { width: 64px !important; height: 64px !important; flex: 0 0 64px !important; border-radius: 50% !important; overflow: hidden !important; background: #111214 !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 1px 2px rgba(17, 18, 20, 0.06), 0 0 0 1px #EAEAE6 !important; }
#membership-join#membership-join .membership-join__avatar img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
#membership-join#membership-join .membership-join__avatar span { font-size: 14px !important; font-weight: 800 !important; color: #FBFBF9 !important; -webkit-text-fill-color: #FBFBF9 !important; }
#membership-join#membership-join .membership-join__app-copy { display: flex !important; flex-direction: column !important; gap: 3px !important; min-width: 0 !important; }
#membership-join#membership-join .membership-join__app-copy strong { font-size: 15px !important; font-weight: 800 !important; letter-spacing: -0.02em !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
#membership-join#membership-join .membership-join__eyebrow { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 9px !important; font-weight: 500 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: #70706B !important; -webkit-text-fill-color: #70706B !important; }
#membership-join#membership-join .membership-join__section { display: block !important; margin: 22px 4px 8px !important; }
#membership-join#membership-join .membership-join__pitch { margin: 0 2px 0 !important; font-size: 26px !important; line-height: 1.1 !important; font-weight: 800 !important; letter-spacing: -0.03em !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; }
#membership-join#membership-join .membership-join__count { display: flex !important; align-items: center !important; gap: 10px !important; margin: 10px 2px 0 !important; font-size: 12.5px !important; font-weight: 600 !important; color: #63635F !important; -webkit-text-fill-color: #63635F !important; }
#membership-join#membership-join .membership-join__count > span { color: #63635F !important; -webkit-text-fill-color: #63635F !important; }
#membership-join#membership-join .membership-join__faces { display: inline-flex !important; }
#membership-join#membership-join .membership-join__faces i { width: 22px !important; height: 22px !important; border-radius: 50% !important; border: 2px solid #FBFBF9 !important; background: #DCE3E6 !important; margin-left: -6px !important; display: block !important; }
#membership-join#membership-join .membership-join__faces i:first-child { margin-left: 0 !important; background: #E4DFD3 !important; }
#membership-join#membership-join .membership-join__faces i:nth-child(3) { background: #EADCD6 !important; }

#membership-join#membership-join .membership-join__perks { display: flex !important; flex-direction: column !important; border: 1px solid #EAEAE6 !important; border-radius: 18px !important; background: #FFFFFF !important; box-shadow: 0 1px 2px rgba(17, 18, 20, 0.03) !important; overflow: hidden !important; }
#membership-join#membership-join .membership-join__perk { display: flex !important; align-items: flex-start !important; gap: 12px !important; padding: 13px 14px !important; }
#membership-join#membership-join .membership-join__perk + .membership-join__perk { border-top: 1px solid #EFEFEB !important; }
#membership-join#membership-join .membership-join__perk-mark { flex: 0 0 26px !important; width: 26px !important; height: 26px !important; border-radius: 9px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: rgba(15, 191, 164, 0.14) !important; color: #0B8F7B !important; -webkit-text-fill-color: #0B8F7B !important; font-size: 12px !important; font-weight: 800 !important; }
#membership-join#membership-join .membership-join__perk-copy { display: flex !important; flex-direction: column !important; gap: 3px !important; min-width: 0 !important; }
#membership-join#membership-join .membership-join__perk-copy strong { font-size: 14px !important; font-weight: 800 !important; letter-spacing: -0.01em !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; }
#membership-join#membership-join .membership-join__perk-copy small { font-size: 12.5px !important; font-weight: 500 !important; line-height: 1.4 !important; color: #63635F !important; -webkit-text-fill-color: #63635F !important; }

#membership-join#membership-join .membership-join__table { border: 1px solid #EAEAE6 !important; border-radius: 18px !important; background: #FFFFFF !important; box-shadow: 0 1px 2px rgba(17, 18, 20, 0.03) !important; overflow: hidden !important; }
#membership-join#membership-join .membership-join__row { display: grid !important; grid-template-columns: 1.5fr 1fr 1fr !important; align-items: center !important; gap: 8px !important; min-height: 44px !important; padding: 0 14px !important; }
#membership-join#membership-join .membership-join__row + .membership-join__row { border-top: 1px solid #EFEFEB !important; }
#membership-join#membership-join .membership-join__row > span { font-size: 13px !important; font-weight: 600 !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; }
#membership-join#membership-join .membership-join__row > span:not(:first-child) { text-align: center !important; }
#membership-join#membership-join .membership-join__row--head { min-height: 36px !important; background: #F7F7F4 !important; }
#membership-join#membership-join .membership-join__row--head > span { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 8.5px !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: #70706B !important; -webkit-text-fill-color: #70706B !important; }
#membership-join#membership-join .membership-join__yes { color: #0B8F7B !important; -webkit-text-fill-color: #0B8F7B !important; font-weight: 800 !important; }
#membership-join#membership-join .membership-join__no { color: #A3A3A0 !important; -webkit-text-fill-color: #A3A3A0 !important; }

/* Google fills the name in; the PIN is still theirs to pick. */
#membership-join#membership-join .membership-join__google,
#membership-join#membership-join .membership-join__tiktok { display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; width: 100% !important; height: 48px !important; margin: 0 !important; padding: 0 16px !important; border: 1px solid #E3E3DE !important; border-radius: 16px !important; background: #FFFFFF !important; box-shadow: 0 1px 2px rgba(17, 18, 20, 0.04) !important; text-decoration: none !important; cursor: pointer; }
#membership-join#membership-join .membership-join__google:active,
#membership-join#membership-join .membership-join__tiktok:active { background: #F4F4F1 !important; }
#membership-join#membership-join .membership-join__google.is-done,
#membership-join#membership-join .membership-join__tiktok.is-done { background: #F4F4F1 !important; border-color: #E3E3DE !important; pointer-events: none !important; }
#membership-join#membership-join .membership-join__google span,
#membership-join#membership-join .membership-join__tiktok span { font-size: 14px !important; font-weight: 700 !important; letter-spacing: -0.01em !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
#membership-join#membership-join .membership-join__google svg,
#membership-join#membership-join .membership-join__tiktok svg { width: 20px !important; height: 20px !important; flex: none !important; filter: none !important; }
#membership-join#membership-join .membership-join__google svg path[fill="#4285F4"] { fill: #4285F4 !important; }
#membership-join#membership-join .membership-join__google svg path[fill="#34A853"] { fill: #34A853 !important; }
#membership-join#membership-join .membership-join__google svg path[fill="#FBBC05"] { fill: #FBBC05 !important; }
#membership-join#membership-join .membership-join__google svg path[fill="#EA4335"] { fill: #EA4335 !important; }
#membership-join#membership-join .membership-join__or { display: flex !important; align-items: center !important; gap: 10px !important; margin: -2px 0 !important; }
#membership-join#membership-join .membership-join__or i { flex: 1 1 auto !important; height: 1px !important; background: #EAEAE6 !important; display: block !important; }
#membership-join#membership-join .membership-join__or span { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 9px !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: #8A8A84 !important; -webkit-text-fill-color: #8A8A84 !important; }

/* The account fields, the same filled pills as the login sheet. */
#membership-join#membership-join .membership-join__form { display: flex !important; flex-direction: column !important; gap: 12px !important; margin-top: 18px !important; }
#membership-join#membership-join .membership-join__image-row { position: relative !important; display: flex !important; align-items: center !important; gap: 12px !important; margin: 0 !important; padding: 10px 12px 10px 10px !important; border: 1px solid #EAEAE6 !important; border-radius: 18px !important; background: #FFFFFF !important; box-shadow: 0 1px 2px rgba(17, 18, 20, 0.03) !important; cursor: pointer; overflow: hidden !important; }
#membership-join#membership-join .membership-join__image-row .membership-join__tile { border-radius: 50% !important; width: 46px !important; height: 46px !important; flex: 0 0 46px !important; }
#membership-join#membership-join .membership-join__image-copy { flex: 1 1 auto !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 2px !important; }
#membership-join#membership-join .membership-join__image-copy strong { font-size: 14px !important; font-weight: 800 !important; letter-spacing: -0.01em !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; }
#membership-join#membership-join .membership-join__image-copy small { font-size: 11.5px !important; font-weight: 500 !important; line-height: 1.35 !important; color: #63635F !important; -webkit-text-fill-color: #63635F !important; }
#membership-join#membership-join .membership-join__image-cta { flex: none !important; height: 32px !important; padding: 0 14px !important; display: inline-flex !important; align-items: center !important; border-radius: 999px !important; background: #111214 !important; font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 10px !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; color: #FBFBF9 !important; -webkit-text-fill-color: #FBFBF9 !important; }
#membership-join#membership-join .membership-join__image-row input { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; opacity: 0 !important; cursor: pointer; margin: 0 !important; padding: 0 !important; }
#membership-join#membership-join .membership-join__pin-row { display: flex !important; gap: 10px !important; }
#membership-join#membership-join .membership-join__field { display: flex !important; flex-direction: column !important; gap: 6px !important; flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important; }
#membership-join#membership-join .membership-join__label { margin: 0 0 0 4px !important; font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 9px !important; font-weight: 500 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: #70706B !important; -webkit-text-fill-color: #70706B !important; }
#membership-join#membership-join .membership-join__field input {
    width: 100% !important; height: 52px !important; margin: 0 !important; padding: 0 16px !important; border: 0 !important; border-radius: 16px !important; outline: none !important; box-shadow: none !important;
    background: #F4F4F1 !important; background-color: #F4F4F1 !important; font-size: 16px !important; font-weight: 600 !important; letter-spacing: -0.01em !important;
    color: #111214 !important; -webkit-text-fill-color: #111214 !important; caret-color: #111214 !important; -webkit-appearance: none !important; appearance: none !important; color-scheme: light !important;
}
#membership-join#membership-join .membership-join__field input:focus { box-shadow: 0 0 0 1.5px #111214 inset !important; }
#membership-join#membership-join .membership-join__field input::placeholder { color: #A3A3A0 !important; -webkit-text-fill-color: #A3A3A0 !important; opacity: 1 !important; font-weight: 500 !important; }
#membership-join#membership-join .membership-join__field input[type="password"] { letter-spacing: 0.18em !important; }
#membership-join#membership-join .membership-join__field input:disabled { opacity: 0.6 !important; }
#membership-join#membership-join .membership-join__tile { position: relative !important; width: 52px !important; height: 52px !important; flex: 0 0 52px !important; margin: 0 !important; border-radius: 16px !important; border: 1.5px dashed #D6D6D1 !important; background: #F4F4F1 !important; overflow: hidden !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer; }
#membership-join#membership-join .membership-join__tile svg { width: 18px !important; height: 18px !important; fill: none !important; }
#membership-join#membership-join .membership-join__tile svg * { fill: none !important; stroke: #63635F !important; }
#membership-join#membership-join .membership-join__tile img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; }
#membership-join#membership-join .membership-join__tile img[hidden] { display: none !important; }
#membership-join#membership-join .membership-join__tile input { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; opacity: 0 !important; cursor: pointer; margin: 0 !important; padding: 0 !important; }
#membership-join#membership-join .membership-join__form-note { margin: -2px 4px 0 !important; font-size: 11.5px !important; font-weight: 500 !important; line-height: 1.45 !important; color: #8A8A84 !important; -webkit-text-fill-color: #8A8A84 !important; }

#membership-join#membership-join .membership-join__plan { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding: 14px !important; border: 1.5px solid #111214 !important; border-radius: 18px !important; background: #FFFFFF !important; }
#membership-join#membership-join .membership-join__plan-copy { display: flex !important; flex-direction: column !important; gap: 4px !important; min-width: 0 !important; }
#membership-join#membership-join .membership-join__plan-copy strong { font-size: 14px !important; font-weight: 800 !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; }
#membership-join#membership-join .membership-join__plan-copy small { font-size: 12px !important; font-weight: 500 !important; line-height: 1.4 !important; color: #63635F !important; -webkit-text-fill-color: #63635F !important; }
#membership-join#membership-join .membership-join__plan-price { display: flex !important; align-items: baseline !important; gap: 4px !important; flex: none !important; }
#membership-join#membership-join .membership-join__plan-price b { font-size: 22px !important; font-weight: 800 !important; letter-spacing: -0.03em !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; }
#membership-join#membership-join .membership-join__plan-price small { font-size: 11px !important; font-weight: 600 !important; color: #63635F !important; -webkit-text-fill-color: #63635F !important; }

#membership-join#membership-join .membership-join__foot { flex: none !important; padding: 12px 18px calc(14px + env(safe-area-inset-bottom, 0px)) !important; background: linear-gradient(180deg, rgba(251, 251, 249, 0), #FBFBF9 30%) !important; }
#membership-join#membership-join .membership-join__cta, #membership-join#membership-join .membership-join__cta:disabled {
    display: flex !important; align-items: center !important; justify-content: center !important;
    width: 100% !important; height: 54px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 16px !important;
    background: #111214 !important; box-shadow: 0 12px 24px -12px rgba(17, 18, 20, 0.55) !important;
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0.22em !important; text-transform: uppercase !important;
    color: #FBFBF9 !important; -webkit-text-fill-color: #FBFBF9 !important; cursor: pointer;
}
#membership-join#membership-join .membership-join__cta:disabled { opacity: 0.55 !important; }
#membership-join#membership-join .membership-join__fine { margin: 9px 0 0 !important; text-align: center !important; font-size: 11px !important; font-weight: 500 !important; color: #8A8A84 !important; -webkit-text-fill-color: #8A8A84 !important; }

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

/* "New room" in the composer look shared by Create, Community, Shop, Booking,
   Calendar and App Access. Doubled id and !important: the page repaints any
   modal with "modal" in its id, so the fixer skips this one and the rules
   here still say everything twice. Ids and classes the script reads are
   untouched. */
#text-bloc-create-modal#text-bloc-create-modal {
    background: #FBFBF9 !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; color-scheme: light !important;
    padding: calc(14px + env(safe-area-inset-top, 0px)) 18px calc(112px + env(safe-area-inset-bottom, 0px)) !important;
    font-family: var(--font-family, Manrope), -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important;
}
#text-bloc-create-modal#text-bloc-create-modal * { box-sizing: border-box; font-family: var(--font-family, Manrope), -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important; letter-spacing: 0; }
#text-bloc-create-modal#text-bloc-create-modal .fa, #text-bloc-create-modal#text-bloc-create-modal .fas { font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; }
#text-bloc-create-modal#text-bloc-create-modal button { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; filter: none !important; text-shadow: none !important; }
#text-bloc-create-modal#text-bloc-create-modal .text-bloc-create-shell { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }

/* ---- header ---- */
#text-bloc-create-modal#text-bloc-create-modal .text-bloc-create-top { display: flex !important; align-items: center !important; justify-content: space-between !important; margin: 0 0 14px !important; padding: 6px 0 0 !important; }
#text-bloc-create-modal#text-bloc-create-modal .text-bloc-create-kicker { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 9px !important; font-weight: 500 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: #70706B !important; -webkit-text-fill-color: #70706B !important; margin: 0 0 4px !important; }
#text-bloc-create-modal#text-bloc-create-modal .text-bloc-create-heading { font-size: 20px !important; font-weight: 800 !important; letter-spacing: -0.02em !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; margin: 0 !important; }
#text-bloc-create-modal#text-bloc-create-modal .text-bloc-create-close { width: 36px !important; height: 36px !important; border-radius: 50% !important; border: 0 !important; background: #FFFFFF !important; box-shadow: 0 1px 2px rgba(17, 18, 20, 0.06) !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 13px !important; }

/* ---- preview card ---- */
#text-bloc-create-modal#text-bloc-create-modal .text-bloc-create-preview { display: flex !important; align-items: center !important; gap: 12px !important; padding: 12px !important; margin: 0 0 6px !important; border: 1px solid #EAEAE6 !important; border-radius: 18px !important; background: #FFFFFF !important; box-shadow: 0 1px 2px rgba(17, 18, 20, 0.03) !important; }
#text-bloc-create-modal#text-bloc-create-modal .text-bloc-create-preview-thumb { width: 52px !important; height: 52px !important; flex: 0 0 52px !important; border-radius: 14px !important; overflow: hidden !important; background: #111214 !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; }
#text-bloc-create-modal#text-bloc-create-modal .text-bloc-create-preview-thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
#text-bloc-create-modal#text-bloc-create-modal .text-bloc-create-preview-icon { color: #FBFBF9 !important; -webkit-text-fill-color: #FBFBF9 !important; font-size: 18px !important; }
#text-bloc-create-modal#text-bloc-create-modal .text-bloc-create-preview-footer { flex: 1 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; min-width: 0 !important; padding: 0 !important; background: transparent !important; }
#text-bloc-create-modal#text-bloc-create-modal .text-bloc-create-preview-title { font-size: 14px !important; font-weight: 800 !important; letter-spacing: -0.02em !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
#text-bloc-create-modal#text-bloc-create-modal .text-bloc-create-preview-desc { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 9px !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: #70706B !important; -webkit-text-fill-color: #70706B !important; margin-top: 3px !important; }
#text-bloc-create-modal#text-bloc-create-modal .text-bloc-create-preview-action { display: none !important; }

/* ---- fields ---- */
#text-bloc-create-modal#text-bloc-create-modal .text-bloc-create-panel { display: block !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
#text-bloc-create-modal#text-bloc-create-modal .text-bloc-create-field { display: block !important; margin: 0 !important; padding: 0 !important; }
#text-bloc-create-modal#text-bloc-create-modal .text-bloc-create-field > label { display: block !important; margin: 16px 6px 8px !important; font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 9px !important; font-weight: 500 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: #70706B !important; -webkit-text-fill-color: #70706B !important; }
#text-bloc-create-modal#text-bloc-create-modal#text-bloc-create-modal#text-bloc-create-modal#text-bloc-create-modal#text-bloc-create-modal .text-bloc-create-field input:not([type="file"]):not([type="hidden"]),
#text-bloc-create-modal#text-bloc-create-modal#text-bloc-create-modal#text-bloc-create-modal#text-bloc-create-modal#text-bloc-create-modal .text-bloc-create-field input:not([type="file"]):not([type="hidden"]):focus {
    width: 100% !important; height: 46px !important; margin: 0 !important; padding: 0 16px !important; border: 0 !important; border-radius: 14px !important; outline: none !important; box-shadow: none !important;
    background: #F4F4F1 !important; font-size: 14px !important; font-weight: 600 !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; caret-color: #0FBFA4 !important; -webkit-appearance: none !important; appearance: none !important;
}
#text-bloc-create-modal#text-bloc-create-modal#text-bloc-create-modal#text-bloc-create-modal#text-bloc-create-modal#text-bloc-create-modal .text-bloc-create-field input::placeholder { color: #A3A3A0 !important; -webkit-text-fill-color: #A3A3A0 !important; opacity: 1 !important; }
#text-bloc-create-modal#text-bloc-create-modal .text-bloc-create-media-row { margin: 0 !important; }
#text-bloc-create-modal#text-bloc-create-modal .text-bloc-create-media-label { display: flex !important; align-items: center !important; gap: 10px !important; height: 46px !important; padding: 0 16px !important; margin: 0 !important; border: 1px dashed #EAEAE6 !important; border-radius: 14px !important; background: #FFFFFF !important; font-size: 13px !important; font-weight: 700 !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; cursor: pointer; }
#text-bloc-create-modal#text-bloc-create-modal .text-bloc-create-media-label i { color: #0FBFA4 !important; -webkit-text-fill-color: #0FBFA4 !important; }
#text-bloc-create-modal#text-bloc-create-modal input[type="file"] { display: none !important; }

/* ---- access and billing: pills on one track ---- */
#text-bloc-create-modal#text-bloc-create-modal .room-access, #text-bloc-create-modal#text-bloc-create-modal .room-billing { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 6px !important; margin: 0 !important; padding: 4px !important; border: 0 !important; border-radius: 14px !important; background: #F1F1ED !important; }
#text-bloc-create-modal#text-bloc-create-modal .room-access__opt, #text-bloc-create-modal#text-bloc-create-modal .room-billing__opt {
    height: 40px !important; margin: 0 !important; padding: 0 10px !important; border: 0 !important; border-radius: 11px !important; background: transparent !important; box-shadow: none !important;
    display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
    font-size: 12.5px !important; font-weight: 700 !important; color: #63635F !important; -webkit-text-fill-color: #63635F !important; cursor: pointer;
}
#text-bloc-create-modal#text-bloc-create-modal .room-access__opt i, #text-bloc-create-modal#text-bloc-create-modal .room-billing__opt i { font-size: 11px !important; color: inherit !important; -webkit-text-fill-color: inherit !important; }
#text-bloc-create-modal#text-bloc-create-modal .room-access__opt.is-active, #text-bloc-create-modal#text-bloc-create-modal .room-billing__opt.is-active { background: #FFFFFF !important; box-shadow: 0 1px 2px rgba(17, 18, 20, 0.08) !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; }
#text-bloc-create-modal#text-bloc-create-modal .text-bloc-paid-stripe-status { margin: 10px 6px 0 !important; font-size: 11.5px !important; font-weight: 500 !important; color: #63635F !important; -webkit-text-fill-color: #63635F !important; }

/* ---- submit ---- */
#text-bloc-create-modal#text-bloc-create-modal .text-bloc-create-actions { margin: 18px 0 0 !important; padding: 0 !important; }
#text-bloc-create-modal#text-bloc-create-modal .text-bloc-create-primary, #text-bloc-create-modal#text-bloc-create-modal .text-bloc-create-primary:disabled {
    display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important;
    width: 100% !important; height: 54px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 16px !important;
    background: #111214 !important; box-shadow: 0 12px 24px -12px rgba(17, 18, 20, 0.55) !important; transform: none !important; opacity: 1 !important;
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0.22em !important; text-transform: uppercase !important;
    color: #FBFBF9 !important; -webkit-text-fill-color: #FBFBF9 !important; cursor: pointer;
}
#text-bloc-create-modal#text-bloc-create-modal .text-bloc-create-primary * { color: #FBFBF9 !important; -webkit-text-fill-color: #FBFBF9 !important; }
#text-bloc-create-modal#text-bloc-create-modal .text-bloc-create-primary:disabled { background: #EDEDE8 !important; box-shadow: none !important; color: #8A8A84 !important; -webkit-text-fill-color: #8A8A84 !important; }
#text-bloc-create-modal#text-bloc-create-modal .text-bloc-create-primary:disabled * { color: #8A8A84 !important; -webkit-text-fill-color: #8A8A84 !important; }

/* ---- what the old sheet still had a say in ---- */
#text-bloc-create-modal#text-bloc-create-modal .text-bloc-create-preview { flex-direction: row !important; min-height: 0 !important; }
#text-bloc-create-modal#text-bloc-create-modal .text-bloc-create-preview::before, #text-bloc-create-modal#text-bloc-create-modal .text-bloc-create-preview::after { display: none !important; content: none !important; }
#text-bloc-create-modal#text-bloc-create-modal .text-bloc-create-preview-thumb { min-height: 0 !important; aspect-ratio: auto !important; }
#text-bloc-create-modal#text-bloc-create-modal .text-bloc-create-preview-icon { width: auto !important; height: auto !important; background: transparent !important; box-shadow: none !important; border: 0 !important; }
#text-bloc-create-modal#text-bloc-create-modal .text-bloc-create-media-label { flex-direction: row !important; justify-content: center !important; min-height: 0 !important; height: 46px !important; }
/* The script hides rows with an inline display; read that back off the attribute. */
#text-bloc-create-modal#text-bloc-create-modal .text-bloc-create-field[style*="display:none"], #text-bloc-create-modal#text-bloc-create-modal .text-bloc-create-field[style*="display: none"] { display: none !important; }

#text-bloc-create-modal#text-bloc-create-modal .text-bloc-create-preview { display: flex !important; height: auto !important; aspect-ratio: auto !important; padding: 12px !important; }
#text-bloc-create-modal#text-bloc-create-modal .text-bloc-create-preview-thumb, #text-bloc-create-modal#text-bloc-create-modal .text-bloc-create-preview-footer { position: static !important; inset: auto !important; transform: none !important; opacity: 1 !important; visibility: visible !important; }
#text-bloc-create-modal#text-bloc-create-modal .text-bloc-create-preview-thumb { width: 52px !important; height: 52px !important; }
#text-bloc-create-modal#text-bloc-create-modal .text-bloc-create-preview-footer { width: auto !important; height: auto !important; }

/* "New room" in the composer look shared by Create, Community, Shop, Booking,
   Calendar and App Access. Doubled id and !important: the page repaints any
   modal with "modal" in its id, so the fixer skips this one and the rules
   here still say everything twice. Ids and classes the script reads are
   untouched. */
#create-bloc-modal#create-bloc-modal {
    background: #FBFBF9 !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; color-scheme: light !important;
    padding: calc(14px + env(safe-area-inset-top, 0px)) 18px calc(112px + env(safe-area-inset-bottom, 0px)) !important;
    font-family: var(--font-family, Manrope), -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important;
}
#create-bloc-modal#create-bloc-modal * { box-sizing: border-box; font-family: var(--font-family, Manrope), -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important; letter-spacing: 0; }
#create-bloc-modal#create-bloc-modal .fa, #create-bloc-modal#create-bloc-modal .fas { font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; }
#create-bloc-modal#create-bloc-modal button { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; filter: none !important; text-shadow: none !important; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-shell { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }

/* ---- header ---- */
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-top { display: flex !important; align-items: center !important; justify-content: space-between !important; margin: 0 0 14px !important; padding: 6px 0 0 !important; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-kicker { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 9px !important; font-weight: 500 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: #70706B !important; -webkit-text-fill-color: #70706B !important; margin: 0 0 4px !important; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-heading { font-size: 20px !important; font-weight: 800 !important; letter-spacing: -0.02em !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; margin: 0 !important; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-close { width: 36px !important; height: 36px !important; border-radius: 50% !important; border: 0 !important; background: #FFFFFF !important; box-shadow: 0 1px 2px rgba(17, 18, 20, 0.06) !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 13px !important; }

/* ---- preview card ---- */
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-preview { display: flex !important; align-items: center !important; gap: 12px !important; padding: 12px !important; margin: 0 0 6px !important; border: 1px solid #EAEAE6 !important; border-radius: 18px !important; background: #FFFFFF !important; box-shadow: 0 1px 2px rgba(17, 18, 20, 0.03) !important; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-preview-thumb { width: 52px !important; height: 52px !important; flex: 0 0 52px !important; border-radius: 14px !important; overflow: hidden !important; background: #111214 !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-preview-thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-preview-icon { color: #FBFBF9 !important; -webkit-text-fill-color: #FBFBF9 !important; font-size: 18px !important; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-preview-footer { flex: 1 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; min-width: 0 !important; padding: 0 !important; background: transparent !important; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-preview-title { font-size: 14px !important; font-weight: 800 !important; letter-spacing: -0.02em !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-preview-desc { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 9px !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: #70706B !important; -webkit-text-fill-color: #70706B !important; margin-top: 3px !important; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-preview-action { display: none !important; }

/* ---- fields ---- */
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-panel { display: block !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-field { display: block !important; margin: 0 !important; padding: 0 !important; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-field > label:not(.bytes-bloc-create-media-label) { display: block !important; margin: 16px 6px 8px !important; font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 9px !important; font-weight: 500 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: #70706B !important; -webkit-text-fill-color: #70706B !important; }
#create-bloc-modal#create-bloc-modal#create-bloc-modal#create-bloc-modal#create-bloc-modal#create-bloc-modal .bytes-bloc-create-field input:not([type="file"]):not([type="hidden"]),
#create-bloc-modal#create-bloc-modal#create-bloc-modal#create-bloc-modal#create-bloc-modal#create-bloc-modal .bytes-bloc-create-field input:not([type="file"]):not([type="hidden"]):focus {
    width: 100% !important; height: 46px !important; margin: 0 !important; padding: 0 16px !important; border: 0 !important; border-radius: 14px !important; outline: none !important; box-shadow: none !important;
    background: #F4F4F1 !important; font-size: 14px !important; font-weight: 600 !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; caret-color: #0FBFA4 !important; -webkit-appearance: none !important; appearance: none !important;
}
#create-bloc-modal#create-bloc-modal#create-bloc-modal#create-bloc-modal#create-bloc-modal#create-bloc-modal .bytes-bloc-create-field input::placeholder { color: #A3A3A0 !important; -webkit-text-fill-color: #A3A3A0 !important; opacity: 1 !important; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-media-row { margin: 0 !important; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-media-label { display: flex !important; align-items: center !important; gap: 10px !important; height: 46px !important; padding: 0 16px !important; margin: 0 !important; border: 1px dashed #EAEAE6 !important; border-radius: 14px !important; background: #FFFFFF !important; font-size: 13px !important; font-weight: 700 !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; cursor: pointer; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-media-label i { color: #0FBFA4 !important; -webkit-text-fill-color: #0FBFA4 !important; }
#create-bloc-modal#create-bloc-modal input[type="file"] { display: none !important; }

/* ---- access and billing: pills on one track ---- */
#create-bloc-modal#create-bloc-modal .room-access, #create-bloc-modal#create-bloc-modal .room-billing { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 6px !important; margin: 0 !important; padding: 4px !important; border: 0 !important; border-radius: 14px !important; background: #F1F1ED !important; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-access-opt, #create-bloc-modal#create-bloc-modal .bytes-bloc-create-billing-opt {
    height: 40px !important; margin: 0 !important; padding: 0 10px !important; border: 0 !important; border-radius: 11px !important; background: transparent !important; box-shadow: none !important;
    display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
    font-size: 12.5px !important; font-weight: 700 !important; color: #63635F !important; -webkit-text-fill-color: #63635F !important; cursor: pointer;
}
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-access-opt i, #create-bloc-modal#create-bloc-modal .bytes-bloc-create-billing-opt i { font-size: 11px !important; color: inherit !important; -webkit-text-fill-color: inherit !important; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-access-opt.is-active, #create-bloc-modal#create-bloc-modal .bytes-bloc-create-billing-opt.is-active { background: #FFFFFF !important; box-shadow: 0 1px 2px rgba(17, 18, 20, 0.08) !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; }
#create-bloc-modal#create-bloc-modal .text-bloc-paid-stripe-status { margin: 10px 6px 0 !important; font-size: 11.5px !important; font-weight: 500 !important; color: #63635F !important; -webkit-text-fill-color: #63635F !important; }

/* ---- submit ---- */
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-actions { margin: 18px 0 0 !important; padding: 0 !important; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-primary, #create-bloc-modal#create-bloc-modal .bytes-bloc-create-primary:disabled {
    display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important;
    width: 100% !important; height: 54px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 16px !important;
    background: #111214 !important; box-shadow: 0 12px 24px -12px rgba(17, 18, 20, 0.55) !important; transform: none !important; opacity: 1 !important;
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0.22em !important; text-transform: uppercase !important;
    color: #FBFBF9 !important; -webkit-text-fill-color: #FBFBF9 !important; cursor: pointer;
}
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-primary * { color: #FBFBF9 !important; -webkit-text-fill-color: #FBFBF9 !important; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-primary:disabled { background: #EDEDE8 !important; box-shadow: none !important; color: #8A8A84 !important; -webkit-text-fill-color: #8A8A84 !important; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-primary:disabled * { color: #8A8A84 !important; -webkit-text-fill-color: #8A8A84 !important; }

/* ---- the season sheet sits inside the Bytes surface; the backdrop is its page ---- */
#create-bloc-modal-backdrop#create-bloc-modal-backdrop { background: #FBFBF9 !important; padding: 0 !important; }
#create-bloc-modal#create-bloc-modal { padding: calc(14px + env(safe-area-inset-top, 0px)) 18px calc(112px + env(safe-area-inset-bottom, 0px)) !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; display: block !important; }
/* The native select, as a pill with the value on the left and a chevron drawn by the browser hidden. */
#create-bloc-modal#create-bloc-modal#create-bloc-modal#create-bloc-modal#create-bloc-modal#create-bloc-modal .bytes-bloc-create-field select,
#create-bloc-modal#create-bloc-modal#create-bloc-modal#create-bloc-modal#create-bloc-modal#create-bloc-modal .bytes-bloc-create-field select:focus {
    width: 100% !important; height: 46px !important; margin: 0 !important; padding: 0 16px !important; border: 0 !important; border-radius: 14px !important; outline: none !important; box-shadow: none !important;
    background: #F4F4F1 !important; background-image: none !important; font-size: 14px !important; font-weight: 600 !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; -webkit-appearance: none !important; appearance: none !important; color-scheme: light !important;
}
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-field select option { background: #FFFFFF !important; color: #111214 !important; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-actions { display: flex !important; flex-direction: column !important; gap: 10px !important; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-secondary { height: 44px !important; border: 0 !important; border-radius: 999px !important; background: transparent !important; box-shadow: none !important; font-size: 13px !important; font-weight: 600 !important; color: #63635F !important; -webkit-text-fill-color: #63635F !important; cursor: pointer; }

/* ---- what the old sheet still had a say in ---- */
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-preview { flex-direction: row !important; min-height: 0 !important; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-preview::before, #create-bloc-modal#create-bloc-modal .bytes-bloc-create-preview::after { display: none !important; content: none !important; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-preview-thumb { min-height: 0 !important; aspect-ratio: auto !important; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-preview-icon { width: auto !important; height: auto !important; background: transparent !important; box-shadow: none !important; border: 0 !important; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-media-label { flex-direction: row !important; justify-content: center !important; min-height: 0 !important; height: 46px !important; }
/* The script hides rows with an inline display; read that back off the attribute. */
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-field[style*="display:none"], #create-bloc-modal#create-bloc-modal .bytes-bloc-create-field[style*="display: none"] { display: none !important; }

#create-bloc-modal#create-bloc-modal .bytes-bloc-create-preview { display: flex !important; height: auto !important; aspect-ratio: auto !important; padding: 12px !important; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-preview-thumb, #create-bloc-modal#create-bloc-modal .bytes-bloc-create-preview-footer { position: static !important; inset: auto !important; transform: none !important; opacity: 1 !important; visibility: visible !important; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-preview-thumb { width: 52px !important; height: 52px !important; }
#create-bloc-modal#create-bloc-modal .bytes-bloc-create-preview-footer { width: auto !important; height: auto !important; }

#create-bloc-modal-backdrop#create-bloc-modal-backdrop { position: fixed !important; inset: 0 !important; z-index: 2147483002 !important; }
html body:has(#create-bloc-modal-backdrop[style*="display: flex"]) #bottom-nav,
html body:has(#create-bloc-modal-backdrop[style*="display:flex"]) #bottom-nav,
html body:has(#create-bloc-modal-backdrop[style*="display: flex"]) #mobile-bottom-nav-underlay,
html body:has(#create-bloc-modal-backdrop[style*="display:flex"]) #mobile-bottom-nav-underlay { display: none !important; }