.mobile-bloc-builder {
    position: fixed;
    left: 0;
    right: 0;
    /* Starts under the app header so the header stays usable above it.
       On Moments that header is a transparent strip over a 47vh athlete
       photo (see mobile-import-library-hero.css), so anchoring to its ~100px
       height left the rest of the hero showing above the season list. The
       override below re-anchors the panel to the top of the screen whenever
       that hero is up. */
    top: var(--mobile-app-header-height, calc(env(safe-area-inset-top, 0px) + 116px));
    /* Floor-anchored so the panel fully occludes the tab underneath it.
       Stopping short of the bottom leaves a strip where the Moments feed
       shows through beneath the nav. Nav clearance lives in __body's padding. */
    bottom: 0;
    z-index: 9000;
    display: none;
    background:
        radial-gradient(circle at 50% -12%, color-mix(in srgb, var(--primary-color, var(--accent-color)) 9%, transparent), transparent 29%),
        var(--bg-primary);
    background-size: auto;
    color: var(--text-primary, var(--text-color));
    overflow: hidden;
}
.mobile-bloc-builder.is-open {
    display: flex;
    flex-direction: column;
}

/* The athlete hero is a photograph, not chrome: it belongs to the Moments
   timeline underneath, and the header over it is transparent by design. A
   panel that stops below that header therefore opens onto the picture rather
   than covering it. Seasons is its own surface, so it takes the whole screen
   and paints its own top padding back in. */
html body.is-athlete-hero .mobile-bloc-builder {
    top: 0;
}
html body.is-athlete-hero .mobile-bloc-builder__top {
    padding-top: calc(env(safe-area-inset-top, 0px) + 8px);
}
.mobile-bloc-builder.is-home-embedded .mobile-bloc-builder__top {
    display: none;
}
.mobile-bloc-builder.is-home-embedded .mobile-bloc-builder__body {
    padding: 10px 0 14px;
}
.mobile-bloc-builder.is-home-embedded .mobile-bloc-builder__bottom {
    display: none !important;
}
.mobile-bloc-builder__top {
    flex: 0 0 auto;
    padding: calc(13px + env(safe-area-inset-top, 0px)) 70px 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: calc(54px + env(safe-area-inset-top, 0px));
    border-bottom: 1px solid color-mix(in srgb, var(--text-color) 6%, transparent);
    background: color-mix(in srgb, var(--bg-primary) 94%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.mobile-bloc-builder__icon-btn {
    width: auto;
    height: auto;
    min-width: 40px;
    min-height: 32px;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: 0;
    color: var(--text-primary, var(--text-color));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    cursor: pointer;
    position: absolute;
    top: calc(12px + env(safe-area-inset-top, 0px));
    z-index: 2;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
}
.mobile-bloc-builder__back-btn {
    gap: 7px;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.02em;
}
.mobile-bloc-builder__back-btn span {
    color: currentColor !important;
    -webkit-text-fill-color: currentColor !important;
    font: inherit;
}
.mobile-bloc-builder__icon-btn i {
    color: currentColor !important;
    -webkit-text-fill-color: currentColor !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none;
}
.mobile-bloc-builder__icon-btn::before,
.mobile-bloc-builder__icon-btn::after {
    display: none !important;
    content: none !important;
}
.mobile-bloc-builder__icon-btn:active {
    opacity: 0.62;
    transform: scale(0.96);
}
.mobile-bloc-builder__icon-btn:first-child {
    left: 16px;
}
.mobile-bloc-builder__icon-btn:last-child {
    right: 16px;
}
.mobile-bloc-builder__top-center {
    min-width: 0;
    width: 100%;
    padding: 0 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}
.mobile-bloc-builder__prefs-btn,
.mobile-bloc-builder__prefs-btn i {
    color: var(--text-primary, var(--text-color)) !important;
    -webkit-text-fill-color: var(--text-primary, var(--text-color)) !important;
    background: transparent !important;
    box-shadow: none !important;
}
.mobile-bloc-builder__kicker {
    order: 2;
    margin-top: 6px;
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: center;
}
.mobile-bloc-builder__title {
    order: 1;
    margin-top: 0;
    font-size: 14px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mobile-bloc-builder__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 18px 88px;
}
.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__body {
    padding: 14px 16px 22px;
}
.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__body {
    padding: 8px 16px 92px;
}
.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__top {
    padding-top: calc(18px + env(safe-area-inset-top, 0px));
    padding-bottom: 4px;
    min-height: calc(58px + env(safe-area-inset-top, 0px));
}
.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__icon-btn {
    top: calc(16px + env(safe-area-inset-top, 0px));
}
.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__title {
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__kicker {
    display: none;
}
.mobile-bloc-builder.is-settings-mode {
    background: #ffffff;
}
.mobile-bloc-builder.is-settings-mode .mobile-bloc-builder__top,
.mobile-bloc-builder.is-settings-mode .mobile-bloc-builder__body,
.mobile-bloc-builder.is-settings-mode .mobile-bloc-builder__list {
    background: #ffffff;
}
.mobile-bloc-builder.is-settings-mode .mobile-bloc-builder__prefs-btn {
    display: none !important;
}
.mobile-bloc-builder.is-settings-mode .mobile-bloc-builder__summary {
    border-bottom-color: rgba(17, 17, 17, 0.08);
}
.mobile-bloc-builder__summary {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    padding: 8px 0 15px;
    border-bottom: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
}
.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__summary {
    display: none;
}
.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__summary {
    align-items: center;
    padding: 4px 0 10px;
    gap: 12px;
    border-bottom-color: transparent;
}
.mobile-bloc-builder__summary-title {
    font-size: 31px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: 0;
}
.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__summary-title {
    display: -webkit-box;
    font-size: clamp(20px, 6vw, 27px);
    line-height: 1.02;
    max-width: 100%;
    overflow: hidden;
    overflow-wrap: anywhere;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__summary-meta {
    margin-top: 6px;
    font-size: 10px;
    letter-spacing: 0.14em;
}
.mobile-bloc-builder__summary-meta {
    margin-top: 8px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.mobile-bloc-builder__pill {
    border: 1px solid color-mix(in srgb, var(--text-color) 14%, transparent);
    background: transparent;
    color: var(--text-primary, var(--text-color));
    border-radius: 999px;
    min-height: 38px;
    padding: 0 16px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
}
.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__pill {
    min-height: 34px;
    padding: 0 13px;
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--text-primary, var(--text-color));
    background: color-mix(in srgb, var(--text-color) 5%, transparent);
}
.mobile-bloc-builder__search {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 46px;
    min-height: 46px;
    margin: 0 0 12px;
    padding: 0 14px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--text-color) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--text-color) 8%, transparent);
    color: var(--text-secondary);
    flex: 0 0 auto;
}
.mobile-bloc-builder__search:focus-within {
    border-color: color-mix(in srgb, var(--primary-color, var(--accent-color)) 36%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color, var(--accent-color)) 10%, transparent);
}
.mobile-bloc-builder__search[hidden] {
    display: none !important;
}
.mobile-bloc-builder__search input {
    min-width: 0;
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-primary, var(--text-color));
    font: inherit;
    font-size: 16px;
    font-weight: 750;
    line-height: 1.2;
    appearance: none;
    -webkit-appearance: none;
}
.mobile-bloc-builder__search input::placeholder {
    color: var(--text-secondary);
}
.mobile-bloc-builder__list {
    display: flex;
    flex-direction: column;
}
.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__list {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 0;
    align-items: stretch;
    padding-top: 0;
}
.mobile-bloc-builder.is-list-mode.is-low-bloc-count .mobile-bloc-builder__list {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 18px;
    padding: 2px 4px 118px;
    min-height: 120px;
}
.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.mobile-bloc-builder__detail-hero {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--text-color) 8%, transparent);
    border-radius: 20px;
    background:
        radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--primary-color, var(--accent-color)) 10%, transparent), transparent 42%),
        color-mix(in srgb, var(--surface-color, var(--bg-primary)) 76%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-color) 5%, transparent);
}
.mobile-bloc-builder__detail-preview {
    width: 88px;
    height: 88px;
    border-radius: 19px;
    overflow: hidden;
    position: relative;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--primary-color, var(--accent-color)) 20%, transparent), transparent 48%),
        color-mix(in srgb, var(--surface-color, var(--bg-primary)) 84%, var(--text-color) 8%);
    color: var(--text-secondary);
    font-size: 26px;
}
.mobile-bloc-builder__detail-preview img,
.mobile-bloc-builder__detail-preview video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mobile-bloc-builder__detail-actions {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 7px;
}
.mobile-bloc-builder__field {
    min-width: 0;
    display: grid;
    gap: 5px;
}
.mobile-bloc-builder__field span {
    color: var(--text-secondary);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.mobile-bloc-builder__name-input,
.mobile-bloc-builder__privacy-input {
    width: 100%;
    min-height: 38px;
    padding: 0 11px;
    border: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
    border-radius: 13px;
    background: color-mix(in srgb, var(--bg-primary) 82%, transparent);
    color: var(--text-primary, var(--text-color));
    font-size: 14px;
    font-weight: 900;
    outline: 0;
}
.mobile-bloc-builder__privacy-input {
    appearance: none;
    -webkit-appearance: none;
    background:
        linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%) right 13px center / 6px 6px no-repeat,
        linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%) right 8px center / 6px 6px no-repeat,
        color-mix(in srgb, var(--bg-primary) 82%, transparent);
}
.mobile-bloc-builder__name-input:focus,
.mobile-bloc-builder__privacy-input:focus {
    border-color: color-mix(in srgb, var(--primary-color, var(--accent-color)) 55%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color, var(--accent-color)) 12%, transparent);
}
.mobile-bloc-builder__edit-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}
.mobile-bloc-builder__image-btn,
.mobile-bloc-builder__save-name-btn {
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-color) 6%, transparent);
    color: var(--text-primary, var(--text-color));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}
.mobile-bloc-builder__save-name-btn {
    background: color-mix(in srgb, var(--primary-color, var(--accent-color)) 18%, transparent);
    border-color: color-mix(in srgb, var(--primary-color, var(--accent-color)) 34%, transparent);
}
.mobile-bloc-builder__image-btn:disabled,
.mobile-bloc-builder__save-name-btn:disabled {
    opacity: 0.62;
}
.mobile-bloc-builder__row {
    width: 100%;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
    background: transparent;
    color: var(--text-primary, var(--text-color));
    display: grid;
    grid-template-columns: 34px 54px minmax(0, 1fr) 62px;
    align-items: center;
    gap: 13px;
    padding: 18px 0;
    text-align: left;
    cursor: pointer;
}
.mobile-bloc-builder__row--bloc {
    grid-template-columns: 52px minmax(0, 1fr) 42px;
    gap: 14px;
    min-height: 82px;
    padding: 14px 0;
}
.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc {
    min-height: 92px;
    height: auto;
    aspect-ratio: auto;
    padding: 10px 18px;
    border: 0;
    border-bottom: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: 0;
    background: #ffffff;
    box-shadow: none;
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) 34px;
    grid-template-rows: none;
    align-items: center;
    gap: 12px;
    overflow: hidden;
    position: relative;
    isolation: isolate;
}
.mobile-bloc-builder.is-list-mode.is-low-bloc-count .mobile-bloc-builder__row--bloc {
    display: grid !important;
    width: 100% !important;
    min-height: 216px;
    height: auto !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    border: 1px solid color-mix(in srgb, var(--text-color) 12%, transparent);
    border-radius: 24px;
    padding: 10px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--text-color) 5%, transparent), color-mix(in srgb, var(--text-color) 2%, transparent)),
        color-mix(in srgb, var(--surface-color, var(--bg-primary)) 88%, transparent);
    box-shadow:
        0 18px 38px color-mix(in srgb, #000 24%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--text-color) 7%, transparent);
    overflow: hidden;
    color: var(--text-primary, var(--text-color));
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}
.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc:active {
    transform: scale(0.985);
}
.mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-index {
    display: none;
}
.mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-thumb {
    width: 52px;
    height: 52px;
    border-radius: 16px;
}
.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-thumb {
    grid-column: 1;
    width: 76px;
    height: 72px;
    border-radius: 15px;
    background: rgba(17, 17, 17, 0.05);
    font-size: 24px;
    color: rgba(17, 17, 17, 0.52);
    position: relative;
    z-index: 0;
}
.mobile-bloc-builder.is-list-mode.is-low-bloc-count .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-thumb {
    grid-row: 1;
    grid-column: 1;
    display: grid !important;
    place-items: center;
    width: 100% !important;
    min-height: 180px;
    aspect-ratio: 16 / 10;
    height: auto;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-color) 12%, transparent);
    opacity: 1 !important;
    visibility: visible !important;
}
.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.02) contrast(1.02);
}
.mobile-bloc-builder__bloc-shade {
    display: none;
}
.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__bloc-shade {
    display: none;
}
.mobile-bloc-builder.is-list-mode.is-low-bloc-count .mobile-bloc-builder__bloc-shade {
    background:
        linear-gradient(180deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.12) 100%);
}
.mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-copy {
    max-width: 100%;
    overflow: hidden;
}
.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-copy {
    grid-column: 2;
    position: relative;
    z-index: 2;
    padding: 0;
    gap: 6px;
    color: #111111;
    -webkit-text-fill-color: #111111;
}
.mobile-bloc-builder.is-list-mode.is-low-bloc-count .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-copy {
    display: flex !important;
    padding: 12px 4px 2px;
    color: var(--text-primary, var(--text-color));
    -webkit-text-fill-color: var(--text-primary, var(--text-color));
    opacity: 1 !important;
    visibility: visible !important;
}
.mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-title {
    display: -webkit-box;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: 17px;
    line-height: 1.08;
}
.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-title {
    font-size: 17px;
    line-height: 1.08;
    font-weight: 760;
    letter-spacing: 0;
    -webkit-line-clamp: 2;
    text-shadow: none;
}
.mobile-bloc-builder.is-list-mode.is-low-bloc-count .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-title {
    font-size: 24px;
    line-height: 1.02;
    text-shadow: none;
}
.mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-meta {
    display: block;
    max-width: 100%;
}
.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    color: rgba(17, 17, 17, 0.54);
    -webkit-text-fill-color: rgba(17, 17, 17, 0.54);
    font-size: 10px;
    letter-spacing: 0.02em;
    text-transform: none;
}
.mobile-bloc-builder.is-list-mode.is-low-bloc-count .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-meta {
    color: var(--text-secondary, rgba(255,255,255,0.62));
    -webkit-text-fill-color: var(--text-secondary, rgba(255,255,255,0.62));
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}
.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-meta span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-meta span + span::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 999px;
    display: inline-block;
    margin-right: 7px;
    vertical-align: middle;
    background: rgba(255,255,255,0.42);
}
.mobile-bloc-builder__row--bloc .mobile-bloc-builder__bloc-actions {
    width: 42px;
    justify-content: flex-end;
    gap: 10px;
}
.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc .mobile-bloc-builder__bloc-actions {
    position: static;
    grid-column: 3;
    z-index: 3;
    width: auto;
    gap: 0;
}
.mobile-bloc-builder.is-list-mode.is-low-bloc-count .mobile-bloc-builder__row--bloc .mobile-bloc-builder__bloc-actions {
    top: 12px;
    right: 12px;
}
.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc .mobile-bloc-builder__bloc-actions > .fa-chevron-right {
    display: none;
}
.mobile-bloc-builder__row--bloc .mobile-bloc-builder__more-btn {
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
}
.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc .mobile-bloc-builder__more-btn {
    width: 31px;
    height: 31px;
    border-radius: 999px;
    background: rgba(17, 17, 17, 0.05);
    color: #111111;
    -webkit-text-fill-color: #111111;
    border: 1px solid rgba(17, 17, 17, 0.08);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    font-size: 12px;
}
.mobile-bloc-builder__row--byte {
    grid-template-columns: 26px 62px minmax(0, 1fr) 78px;
    gap: 12px;
    align-items: center;
    min-height: 94px;
    padding: 0 12px 12px;
    border: 1px solid color-mix(in srgb, var(--text-color) 9%, transparent);
    border-radius: 22px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--text-color) 5%, transparent), color-mix(in srgb, var(--text-color) 2%, transparent)),
        color-mix(in srgb, var(--surface-color, var(--bg-primary)) 70%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-color) 5%, transparent);
    overflow: hidden;
}
.mobile-bloc-builder__row--byte .mobile-bloc-builder__row-index {
    align-self: center;
    color: color-mix(in srgb, var(--text-secondary) 76%, transparent);
    letter-spacing: 0.06em;
}
.mobile-bloc-builder__row--byte .mobile-bloc-builder__row-thumb {
    width: 62px;
    height: 62px;
    border-radius: 16px;
}
.mobile-bloc-builder__row--byte .mobile-bloc-builder__row-copy {
    min-width: 0;
    overflow: hidden;
}
.mobile-bloc-builder__row--byte .mobile-bloc-builder__row-title {
    display: -webkit-box;
    white-space: normal;
    overflow: hidden;
    overflow-wrap: anywhere;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 15px;
    line-height: 1.12;
}
.mobile-bloc-builder__row--byte .mobile-bloc-builder__row-meta {
    display: block;
    max-width: 100%;
    margin-top: 2px;
}
.mobile-bloc-builder__row--byte .mobile-bloc-builder__row-actions {
    display: grid;
    grid-template-columns: repeat(2, 34px);
    gap: 6px;
    justify-content: end;
    align-items: center;
    width: 74px;
}
.mobile-bloc-builder__row-index {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.12em;
}
.mobile-bloc-builder__row-thumb {
    width: 54px;
    height: 54px;
    border-radius: 17px;
    overflow: hidden;
    background: color-mix(in srgb, var(--surface-color, var(--bg-primary)) 88%, var(--text-color) 8%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 16px;
}
.mobile-bloc-builder__row-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mobile-bloc-builder__row-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mobile-bloc-builder__row-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mobile-bloc-builder__row-title {
    font-size: 16px;
    font-weight: 900;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mobile-bloc-builder__row-meta {
    margin-top: 0;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mobile-bloc-builder__more-btn {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary, var(--text-color));
    background: color-mix(in srgb, var(--text-color) 8%, transparent);
    font-size: 12px;
    flex: 0 0 auto;
    cursor: pointer;
    pointer-events: auto;
}
.mobile-bloc-builder__row-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mobile-bloc-builder__bloc-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    color: var(--text-secondary);
}
.mobile-bloc-builder__bloc-actions > i {
    font-size: 12px;
}
.mobile-bloc-builder__move-btn {
    width: 34px;
    height: 32px;
    border: 1px solid color-mix(in srgb, var(--text-color) 8%, transparent);
    border-radius: 11px;
    background: color-mix(in srgb, var(--text-color) 5%, transparent);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.mobile-bloc-builder__move-btn:disabled {
    opacity: 0.25;
}
.mobile-bloc-builder__edit-btn {
    width: 34px;
    height: 32px;
    border: 1px solid color-mix(in srgb, var(--text-color) 8%, transparent);
    border-radius: 11px;
    background: color-mix(in srgb, var(--text-color) 5%, transparent);
    color: var(--text-primary, var(--text-color));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
}
.mobile-bloc-builder__delete-btn {
    width: 34px;
    height: 32px;
    border: 1px solid color-mix(in srgb, #ef4444 18%, transparent);
    border-radius: 11px;
    background: color-mix(in srgb, #ef4444 10%, transparent);
    color: color-mix(in srgb, #ef4444 82%, var(--text-primary, var(--text-color)));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
}
.mobile-bloc-builder__settings-group {
    padding: 18px 0 6px;
    border-bottom: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
}
.mobile-bloc-builder__settings-label {
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.mobile-bloc-builder__settings-row {
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 0;
    border-top: 1px solid color-mix(in srgb, var(--text-color) 8%, transparent);
    color: var(--text-primary, var(--text-color));
    cursor: pointer;
}
.mobile-bloc-builder.is-settings-mode .mobile-bloc-builder__settings-row {
    background: #ffffff;
}
.mobile-bloc-builder__settings-title,
.mobile-bloc-builder__settings-meta {
    display: block;
}
.mobile-bloc-builder__settings-title {
    font-size: 15px;
    font-weight: 850;
    line-height: 1.2;
}
.mobile-bloc-builder__settings-meta {
    margin-top: 4px;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.3;
}
.mobile-bloc-builder__settings-row input {
    flex: 0 0 auto;
    accent-color: var(--primary-color, var(--accent-color));
}
.mobile-bloc-builder__empty {
    grid-column: 1 / -1;
    min-height: 42vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: min(100%, 320px);
    margin: 0 auto;
    padding: 44px 22px;
    text-align: center;
    color: var(--text-primary, var(--text-color));
}
.mobile-bloc-builder__empty-title {
    max-width: 300px;
    font-size: 27px;
    line-height: 1.08;
    font-weight: 950;
    letter-spacing: 0;
}
.mobile-bloc-builder__empty-copy {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.4;
    max-width: 260px;
}
.mobile-bloc-builder__bottom {
    position: static;
    left: 0;
    right: 0;
    bottom: auto;
    padding: 8px 18px 14px;
    background: #ffffff;
    display: none;
    gap: 10px;
    z-index: 1;
}
.mobile-bloc-builder.is-open .mobile-bloc-builder__bottom {
    display: flex;
}
.mobile-bloc-builder__primary {
    min-height: 52px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 950;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
}
.mobile-bloc-builder__primary {
    flex: 1 1 auto;
    border: 1px solid rgba(17, 17, 17, 0.12);
    background: #111111;
    color: #ffffff;
}

/* Premium Blocs tab list */
.mobile-bloc-builder.is-list-mode,
html body .mobile-bloc-builder.is-list-mode {
    background: #ffffff !important;
}

.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__body,
html body .mobile-bloc-builder.is-list-mode .mobile-bloc-builder__body {
    padding: 6px 0 calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    background: #ffffff !important;
}

.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__list,
.mobile-bloc-builder.is-list-mode.is-low-bloc-count .mobile-bloc-builder__list,
html body .mobile-bloc-builder.is-list-mode .mobile-bloc-builder__list,
html body .mobile-bloc-builder.is-list-mode.is-low-bloc-count .mobile-bloc-builder__list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
}

.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc,
.mobile-bloc-builder.is-list-mode.is-low-bloc-count .mobile-bloc-builder__row--bloc,
html body .mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc,
html body .mobile-bloc-builder.is-list-mode.is-low-bloc-count .mobile-bloc-builder__row--bloc {
    width: 100% !important;
    min-height: 112px !important;
    height: auto !important;
    aspect-ratio: auto !important;
    display: grid !important;
    grid-template-columns: 84px minmax(0, 1fr) 36px !important;
    grid-template-rows: none !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 14px 28px 14px 22px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(17, 17, 17, 0.07) !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    overflow: hidden !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    transform: none !important;
}

.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc:active,
html body .mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc:active {
    background: rgba(17, 17, 17, 0.035) !important;
    transform: none !important;
}

.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-thumb,
.mobile-bloc-builder.is-list-mode.is-low-bloc-count .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-thumb,
html body .mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-thumb,
html body .mobile-bloc-builder.is-list-mode.is-low-bloc-count .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-thumb {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 84px !important;
    height: 84px !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    display: grid !important;
    place-items: center !important;
    background: #f4f4f4 !important;
    box-shadow: inset 0 0 0 1px rgba(17, 17, 17, 0.06) !important;
    color: rgba(17, 17, 17, 0.42) !important;
    font-size: 22px !important;
}

.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-thumb img,
.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-thumb video,
html body .mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-thumb img,
html body .mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-thumb video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    filter: saturate(1.03) contrast(1.02) !important;
}

.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__bloc-shade,
.mobile-bloc-builder.is-list-mode.is-low-bloc-count .mobile-bloc-builder__bloc-shade,
html body .mobile-bloc-builder.is-list-mode .mobile-bloc-builder__bloc-shade,
html body .mobile-bloc-builder.is-list-mode.is-low-bloc-count .mobile-bloc-builder__bloc-shade {
    display: none !important;
}

.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-copy,
.mobile-bloc-builder.is-list-mode.is-low-bloc-count .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-copy,
html body .mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-copy,
html body .mobile-bloc-builder.is-list-mode.is-low-bloc-count .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-copy {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    display: grid !important;
    gap: 8px !important;
    padding: 0 !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}

.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-title,
.mobile-bloc-builder.is-list-mode.is-low-bloc-count .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-title,
html body .mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-title,
html body .mobile-bloc-builder.is-list-mode.is-low-bloc-count .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-title {
    display: -webkit-box !important;
    max-width: 100% !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    font-size: 20px !important;
    line-height: 1.08 !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
}

.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-meta,
.mobile-bloc-builder.is-list-mode.is-low-bloc-count .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-meta,
html body .mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-meta,
html body .mobile-bloc-builder.is-list-mode.is-low-bloc-count .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-meta {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    max-width: 100% !important;
    color: rgba(17, 17, 17, 0.56) !important;
    -webkit-text-fill-color: rgba(17, 17, 17, 0.56) !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
    font-weight: 760 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-meta span,
html body .mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-meta span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-meta span + span::before,
html body .mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-meta span + span::before {
    content: "" !important;
    display: inline-block !important;
    width: 4px !important;
    height: 4px !important;
    margin-right: 7px !important;
    border-radius: 999px !important;
    vertical-align: middle !important;
    background: rgba(17, 17, 17, 0.24) !important;
}

.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc .mobile-bloc-builder__bloc-actions,
.mobile-bloc-builder.is-list-mode.is-low-bloc-count .mobile-bloc-builder__row--bloc .mobile-bloc-builder__bloc-actions,
html body .mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc .mobile-bloc-builder__bloc-actions,
html body .mobile-bloc-builder.is-list-mode.is-low-bloc-count .mobile-bloc-builder__row--bloc .mobile-bloc-builder__bloc-actions {
    grid-column: 3 !important;
    grid-row: 1 !important;
    position: static !important;
    width: 36px !important;
    display: grid !important;
    place-items: center !important;
    gap: 0 !important;
}

.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc .mobile-bloc-builder__bloc-actions > .fa-chevron-right,
html body .mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc .mobile-bloc-builder__bloc-actions > .fa-chevron-right {
    display: none !important;
}

.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc .mobile-bloc-builder__more-btn,
html body .mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc .mobile-bloc-builder__more-btn {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc .mobile-bloc-builder__more-btn:active,
html body .mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc .mobile-bloc-builder__more-btn:active {
    background: rgba(17, 17, 17, 0.06) !important;
}

/* Premium Bloc detail/editor */
.mobile-bloc-builder.is-detail-mode,
html body .mobile-bloc-builder.is-detail-mode {
    background: #ffffff !important;
}

.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__body,
html body .mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__body {
    padding: 0 0 calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    background: #ffffff !important;
}

.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__summary,
html body .mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__summary {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 14px !important;
    min-height: 64px !important;
    padding: 10px 24px !important;
    border-bottom: 1px solid rgba(17, 17, 17, 0.07) !important;
    background: #ffffff !important;
}

.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__summary-title,
html body .mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__summary-title {
    display: none !important;
}

.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__summary-meta,
html body .mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__summary-meta {
    margin-top: 0 !important;
    color: rgba(17, 17, 17, 0.62) !important;
    -webkit-text-fill-color: rgba(17, 17, 17, 0.62) !important;
    font-size: 14px !important;
    line-height: 1.1 !important;
    font-weight: 780 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__pill,
html body .mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__pill {
    min-height: 38px !important;
    padding: 0 16px !important;
    border: 1px solid rgba(17, 17, 17, 0.12) !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: rgba(17, 17, 17, 0.86) !important;
    -webkit-text-fill-color: rgba(17, 17, 17, 0.86) !important;
    box-shadow: 0 10px 24px rgba(17, 17, 17, 0.06) !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    letter-spacing: 0.14em !important;
}

.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__list,
html body .mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__list {
    gap: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
}

.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__detail-hero,
html body .mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__detail-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    align-items: start !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 14px 28px 16px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(17, 17, 17, 0.07) !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__detail-preview,
html body .mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__detail-preview {
    width: 92px !important;
    height: 92px !important;
    border-radius: 20px !important;
    background: #f4f4f4 !important;
    box-shadow: inset 0 0 0 1px rgba(17, 17, 17, 0.06) !important;
}

.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__detail-actions,
html body .mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__detail-actions {
    display: grid !important;
    justify-items: center !important;
    gap: 8px !important;
    width: min(100%, 312px) !important;
    max-width: 312px !important;
    min-width: 0 !important;
    margin: 0 auto !important;
}

.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__detail-title,
html body .mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__detail-title {
    display: none !important;
}

.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__field,
html body .mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__field {
    gap: 6px !important;
    width: 100% !important;
    justify-items: center !important;
}

.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__field span,
html body .mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__field span {
    color: rgba(17, 17, 17, 0.52) !important;
    -webkit-text-fill-color: rgba(17, 17, 17, 0.52) !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    letter-spacing: 0.12em !important;
    text-align: center !important;
}

.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__name-input,
.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__privacy-input,
html body .mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__name-input,
html body .mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__privacy-input {
    width: 100% !important;
    min-height: 42px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(17, 17, 17, 0.10) !important;
    border-radius: 15px !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    caret-color: #111111 !important;
    font-size: 18px !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    color-scheme: light !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__privacy-input,
html body .mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__privacy-input {
    padding-right: 42px !important;
    background:
        linear-gradient(45deg, transparent 50%, rgba(17,17,17,0.62) 50%) right 20px center / 7px 7px no-repeat,
        linear-gradient(135deg, rgba(17,17,17,0.62) 50%, transparent 50%) right 15px center / 7px 7px no-repeat,
        #ffffff !important;
    background-color: #ffffff !important;
}

.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__privacy-input,
html body .mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__privacy-input {
    appearance: none !important;
    -webkit-appearance: none !important;
}

.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__name-input:focus,
.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__privacy-input:focus,
html body .mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__name-input:focus,
html body .mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__privacy-input:focus {
    border-color: rgba(17, 17, 17, 0.22) !important;
    box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.04) !important;
    -webkit-box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.04) !important;
}

.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__edit-row,
html body .mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__edit-row {
    display: grid !important;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr) !important;
    gap: 8px !important;
    width: 100% !important;
}

.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__image-btn,
.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__save-name-btn,
html body .mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__image-btn,
html body .mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__save-name-btn {
    flex: 1 1 0 !important;
    min-height: 38px !important;
    justify-content: center !important;
    text-align: center !important;
    border: 1px solid rgba(17, 17, 17, 0.12) !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: rgba(17, 17, 17, 0.84) !important;
    -webkit-text-fill-color: rgba(17, 17, 17, 0.84) !important;
    box-shadow: 0 8px 18px rgba(17, 17, 17, 0.04) !important;
    font-size: 10px !important;
    font-weight: 850 !important;
    letter-spacing: 0.12em !important;
}

.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__image-btn span,
html body .mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__image-btn span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__row--byte,
html body .mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__row--byte {
    display: grid !important;
    grid-template-columns: 34px 76px minmax(0, 1fr) 76px !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 104px !important;
    padding: 14px 22px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(17, 17, 17, 0.07) !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__row--byte .mobile-bloc-builder__row-thumb,
html body .mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__row--byte .mobile-bloc-builder__row-thumb {
    width: 76px !important;
    height: 76px !important;
    border-radius: 18px !important;
    background: #f4f4f4 !important;
}

.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__row--byte .mobile-bloc-builder__row-title,
html body .mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__row--byte .mobile-bloc-builder__row-title {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    font-size: 17px !important;
    line-height: 1.08 !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
}

.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__row--byte .mobile-bloc-builder__row-meta,
html body .mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__row--byte .mobile-bloc-builder__row-meta {
    color: rgba(17, 17, 17, 0.52) !important;
    -webkit-text-fill-color: rgba(17, 17, 17, 0.52) !important;
    font-size: 11px !important;
    font-weight: 760 !important;
    letter-spacing: 0.04em !important;
}

.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__row--byte .mobile-bloc-builder__row-actions,
html body .mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__row--byte .mobile-bloc-builder__row-actions {
    display: grid !important;
    grid-template-columns: repeat(2, 34px) !important;
    gap: 7px !important;
    width: 76px !important;
}

.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__edit-btn,
.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__delete-btn,
.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__move-btn,
html body .mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__edit-btn,
html body .mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__delete-btn,
html body .mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__move-btn {
    width: 34px !important;
    height: 34px !important;
    border: 1px solid rgba(17, 17, 17, 0.09) !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: rgba(17, 17, 17, 0.72) !important;
    -webkit-text-fill-color: rgba(17, 17, 17, 0.72) !important;
    box-shadow: 0 6px 14px rgba(17, 17, 17, 0.04) !important;
}

.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__delete-btn,
html body .mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__delete-btn {
    border-color: rgba(239, 68, 68, 0.14) !important;
    color: rgba(160, 42, 42, 0.82) !important;
    -webkit-text-fill-color: rgba(160, 42, 42, 0.82) !important;
}

/* Final Blocs list lock: one premium vertical row list, never 2-column cards. */
html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__list,
html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode.is-low-bloc-count .mobile-bloc-builder__list {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    background: #ffffff !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc,
html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode.is-low-bloc-count .mobile-bloc-builder__row--bloc {
    width: 100% !important;
    min-height: 108px !important;
    height: auto !important;
    aspect-ratio: auto !important;
    display: grid !important;
    grid-template-columns: 84px minmax(0, 1fr) 36px !important;
    grid-template-rows: none !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 13px 24px 13px 22px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(17, 17, 17, 0.07) !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    overflow: hidden !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-thumb,
html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode.is-low-bloc-count .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-thumb {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 84px !important;
    height: 84px !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 18px !important;
    background: #f4f4f4 !important;
    box-shadow: inset 0 0 0 1px rgba(17, 17, 17, 0.06) !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__bloc-shade,
html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode.is-low-bloc-count .mobile-bloc-builder__bloc-shade {
    display: none !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-copy,
html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode.is-low-bloc-count .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-copy {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: grid !important;
    gap: 8px !important;
    padding: 0 !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-title,
html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode.is-low-bloc-count .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-title {
    font-size: 20px !important;
    line-height: 1.08 !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    text-shadow: none !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-meta,
html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode.is-low-bloc-count .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-meta {
    color: rgba(17, 17, 17, 0.56) !important;
    -webkit-text-fill-color: rgba(17, 17, 17, 0.56) !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
    font-weight: 760 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc .mobile-bloc-builder__bloc-actions,
html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode.is-low-bloc-count .mobile-bloc-builder__row--bloc .mobile-bloc-builder__bloc-actions {
    grid-column: 3 !important;
    grid-row: 1 !important;
    position: static !important;
    width: 36px !important;
    display: grid !important;
    place-items: center !important;
}

/* Blocs list header: app title centered, total below, controls pinned to edges. */
html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__top {
    min-height: calc(70px + env(safe-area-inset-top, 0px)) !important;
    padding: calc(18px + env(safe-area-inset-top, 0px)) 64px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    border-bottom: 1px solid rgba(17, 17, 17, 0.07) !important;
    box-shadow: none !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__top-center {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 0 !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__title {
    order: 1 !important;
    margin: 0 !important;
    max-width: 100% !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    font-size: 18px !important;
    line-height: 1.05 !important;
    font-weight: 860 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-align: center !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__kicker {
    order: 2 !important;
    margin: 0 !important;
    color: rgba(17, 17, 17, 0.54) !important;
    -webkit-text-fill-color: rgba(17, 17, 17, 0.54) !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 760 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    text-align: center !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__library-btn {
    left: 18px !important;
    right: auto !important;
    top: calc(22px + env(safe-area-inset-top, 0px)) !important;
    min-width: 36px !important;
    min-height: 36px !important;
    font-size: 22px !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__prefs-btn {
    left: auto !important;
    right: 18px !important;
    top: calc(22px + env(safe-area-inset-top, 0px)) !important;
    min-width: 36px !important;
    min-height: 36px !important;
    font-size: 22px !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__owner-spacer {
    display: none !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc .mobile-bloc-builder__more-btn,
html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode.is-low-bloc-count .mobile-bloc-builder__row--bloc .mobile-bloc-builder__more-btn {
    display: inline-flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 999px !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    border: 1px solid rgba(17, 17, 17, 0.09) !important;
    box-shadow: 0 8px 18px rgba(17, 17, 17, 0.05) !important;
    color: rgba(17, 17, 17, 0.74) !important;
    -webkit-text-fill-color: rgba(17, 17, 17, 0.74) !important;
    font-size: 13px !important;
}

/* Bloc detail/editor cleanup: no overlapping gear, no black name field. */
html body #mobile-bloc-builder.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__top {
    min-height: calc(70px + env(safe-area-inset-top, 0px)) !important;
    padding: calc(18px + env(safe-area-inset-top, 0px)) 64px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    border-bottom: 1px solid rgba(17, 17, 17, 0.07) !important;
    box-shadow: none !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__top-center {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    pointer-events: none !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__title {
    margin: 0 !important;
    max-width: 100% !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    font-size: 18px !important;
    line-height: 1.05 !important;
    font-weight: 860 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    text-align: center !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__kicker,
html body #mobile-bloc-builder.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__owner-spacer {
    display: none !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__library-btn {
    left: 18px !important;
    right: auto !important;
    top: calc(22px + env(safe-area-inset-top, 0px)) !important;
    min-width: 36px !important;
    min-height: 36px !important;
    font-size: 22px !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__prefs-btn {
    left: auto !important;
    right: 18px !important;
    top: calc(22px + env(safe-area-inset-top, 0px)) !important;
    min-width: 36px !important;
    min-height: 36px !important;
    font-size: 22px !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__summary {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    min-height: 62px !important;
    padding: 12px 22px !important;
    background: #ffffff !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__summary-title {
    display: none !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__detail-hero {
    padding: 18px 22px 20px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(17, 17, 17, 0.07) !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__detail-actions {
    width: min(100%, 310px) !important;
    max-width: 310px !important;
    margin: 0 auto !important;
    justify-items: center !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__name-input,
html body #mobile-bloc-builder.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__privacy-input {
    width: 100% !important;
    min-height: 44px !important;
    border: 1px solid rgba(17, 17, 17, 0.12) !important;
    border-radius: 16px !important;
    background-color: #ffffff !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    box-shadow: none !important;
    font-size: 20px !important;
    font-weight: 840 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    color-scheme: light !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__name-input {
    background-image: none !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__privacy-input {
    text-align: left !important;
    padding: 0 46px 0 18px !important;
    background:
        linear-gradient(45deg, transparent 50%, rgba(17,17,17,0.62) 50%) right 22px center / 7px 7px no-repeat,
        linear-gradient(135deg, rgba(17,17,17,0.62) 50%, transparent 50%) right 17px center / 7px 7px no-repeat,
        #ffffff !important;
}

/* This used to prepend "Change " to a button whose label was just the noun.
   The button now carries its own wording, and beside the access pills there is
   no room for the longer phrase — it pushed the button over the Private pill
   and off the right edge of the screen. */

/* Seasons library */
html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode {
    background: #f6f7f5 !important;
    bottom: 0 !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__bottom {
    display: none !important;
    padding: 0 !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__top {
    min-height: calc(66px + env(safe-area-inset-top, 0px)) !important;
    padding: calc(15px + env(safe-area-inset-top, 0px)) 58px 11px !important;
    border-bottom: 1px solid rgba(17, 17, 17, 0.08) !important;
    background: rgba(255, 255, 255, 0.96) !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__title {
    font-size: 20px !important;
    line-height: 1.05 !important;
    font-weight: 860 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__kicker {
    margin-top: 4px !important;
    font-size: 10px !important;
    letter-spacing: 0.12em !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__body {
    padding: 12px 0 0 !important;
    background: #f6f7f5 !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__list,
html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode.is-low-bloc-count .mobile-bloc-builder__list {
    gap: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc,
html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode.is-low-bloc-count .mobile-bloc-builder__row--bloc {
    width: 100% !important;
    min-height: 108px !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: 112px minmax(0, 1fr) 34px !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    gap: 13px !important;
    margin: 0 !important;
    padding: 14px 16px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(17, 17, 17, 0.08) !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc.is-current,
html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode.is-low-bloc-count .mobile-bloc-builder__row--bloc.is-current {
    min-height: 248px !important;
    grid-template-columns: minmax(0, 1fr) 38px !important;
    grid-template-rows: 164px auto !important;
    gap: 0 !important;
    margin: 0 16px 16px !important;
    width: calc(100% - 32px) !important;
    padding: 0 !important;
    border: 1px solid rgba(17, 17, 17, 0.10) !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: 0 12px 28px rgba(17, 17, 17, 0.10) !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-thumb,
html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode.is-low-bloc-count .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-thumb {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 112px !important;
    height: 78px !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    border-radius: 6px !important;
    background: #e8eae7 !important;
    box-shadow: inset 0 0 0 1px rgba(17, 17, 17, 0.07) !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc.is-current .mobile-bloc-builder__row-thumb {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: 164px !important;
    border-radius: 0 !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-thumb img,
html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-thumb video {
    object-position: center 38% !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__current-label {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 0 9px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 5px;
    background: rgba(8, 10, 11, 0.82);
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-copy,
html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode.is-low-bloc-count .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-copy {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: grid !important;
    gap: 7px !important;
    padding: 0 !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc.is-current .mobile-bloc-builder__row-copy {
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-self: stretch !important;
    justify-content: center !important;
    padding: 15px 8px 15px 16px !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-title,
html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode.is-low-bloc-count .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-title {
    font-size: 17px !important;
    line-height: 1.08 !important;
    font-weight: 820 !important;
    letter-spacing: 0 !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc.is-current .mobile-bloc-builder__row-title {
    font-size: 23px !important;
    line-height: 1.02 !important;
    -webkit-line-clamp: 2 !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-meta,
html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode.is-low-bloc-count .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-meta {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: rgba(17, 17, 17, 0.56) !important;
    -webkit-text-fill-color: rgba(17, 17, 17, 0.56) !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 760 !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row-meta .mobile-bloc-builder__visibility::before {
    display: none !important;
    content: none !important;
}

.mobile-bloc-builder__visibility {
    display: inline-grid !important;
    width: 24px;
    height: 24px;
    place-items: center;
    overflow: visible !important;
    border: 1px solid rgba(17, 17, 17, 0.09);
    border-radius: 50%;
    background: rgba(17, 17, 17, 0.04);
    color: rgba(17, 17, 17, 0.62);
    -webkit-text-fill-color: rgba(17, 17, 17, 0.62);
    font-size: 9px;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc .mobile-bloc-builder__bloc-actions,
html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode.is-low-bloc-count .mobile-bloc-builder__row--bloc .mobile-bloc-builder__bloc-actions {
    grid-column: 3 !important;
    grid-row: 1 !important;
    position: static !important;
    width: 34px !important;
    display: grid !important;
    place-items: center !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc.is-current .mobile-bloc-builder__bloc-actions {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: center !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc .mobile-bloc-builder__bloc-actions > .fa-chevron-right {
    display: block !important;
    color: rgba(17, 17, 17, 0.36) !important;
    -webkit-text-fill-color: rgba(17, 17, 17, 0.36) !important;
    font-size: 12px !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc .mobile-bloc-builder__more-btn {
    display: grid !important;
    visibility: visible !important;
    pointer-events: auto !important;
    width: 30px !important;
    height: 30px !important;
    place-items: center !important;
    border-radius: 50% !important;
    background: rgba(17, 17, 17, 0.05) !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc:has(.mobile-bloc-builder__more-btn) .mobile-bloc-builder__bloc-actions > .fa-chevron-right {
    display: none !important;
}

/* Premium Seasons library ------------------------------------------------- */
html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode {
    background:
        radial-gradient(circle at 12% -8%, rgba(17, 17, 17, 0.055), transparent 34%),
        #f7f7f5 !important;
}

/* The panel is anchored below the app header, which already absorbs the status
   bar. Adding safe-area-inset-top here double-counts it and produces a tall
   gray band above the title. Flat white, no inset, no tinted fill. */
html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__top {
    min-height: 0 !important;
    padding: 13px 60px 12px !important;
    border-bottom: 1px solid rgba(17, 17, 17, 0.08) !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__title {
    font-size: 15px !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
    letter-spacing: 0.055em !important;
}

/* The gear now lives in the body toolbar as a labelled pill, so it must not
   keep the fixed circular dimensions it had while absolutely positioned in
   the title bar — those clip the "Settings" label to a 34px box. */
html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__prefs-btn {
    position: static !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 34px !important;
    padding: 7px 13px !important;
    border: 1px solid rgba(17, 17, 17, 0.1) !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    font-size: 12px !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__body {
    padding: 16px 15px 112px !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__list,
html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode.is-low-bloc-count .mobile-bloc-builder__list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 0 !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc,
html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode.is-low-bloc-count .mobile-bloc-builder__row--bloc,
html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc.is-current {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: 178px !important;
    min-height: 178px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.82) !important;
    border-radius: 22px !important;
    background: #171719 !important;
    box-shadow:
        0 16px 34px rgba(17, 17, 17, 0.13),
        0 2px 7px rgba(17, 17, 17, 0.07) !important;
    isolation: isolate !important;
    text-align: left !important;
    transform: translateZ(0);
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc:active {
    transform: scale(0.985) !important;
    box-shadow: 0 8px 20px rgba(17, 17, 17, 0.12) !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-index {
    display: none !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-thumb,
html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode.is-low-bloc-count .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-thumb,
html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc.is-current .mobile-bloc-builder__row-thumb {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    background: #252528 !important;
    z-index: -2 !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-thumb img,
html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-thumb video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transform: scale(1.015);
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc .mobile-bloc-builder__bloc-shade {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        linear-gradient(90deg, rgba(5, 5, 7, 0.82) 0%, rgba(5, 5, 7, 0.34) 56%, rgba(5, 5, 7, 0.04) 100%),
        linear-gradient(0deg, rgba(5, 5, 7, 0.78) 0%, transparent 62%) !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-copy,
html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode.is-low-bloc-count .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-copy,
html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc.is-current .mobile-bloc-builder__row-copy {
    position: absolute !important;
    left: 18px !important;
    right: 58px !important;
    bottom: 17px !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    color: #fff !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-title,
html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc.is-current .mobile-bloc-builder__row-title {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-size: 23px !important;
    line-height: 1 !important;
    font-weight: 920 !important;
    letter-spacing: -0.025em !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.34) !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-meta,
html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc.is-current .mobile-bloc-builder__row-meta {
    gap: 8px !important;
    color: rgba(255, 255, 255, 0.78) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.78) !important;
    font-size: 11px !important;
    font-weight: 760 !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__visibility {
    width: 22px !important;
    height: 22px !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    background: rgba(255, 255, 255, 0.13) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__current-label {
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    z-index: 3 !important;
    padding: 7px 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 999px !important;
    background: rgba(8, 8, 10, 0.48) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: 9px !important;
    font-weight: 900 !important;
    letter-spacing: 0.11em !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc .mobile-bloc-builder__bloc-actions,
html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc.is-current .mobile-bloc-builder__bloc-actions {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    z-index: 4 !important;
    display: grid !important;
    width: 38px !important;
    height: 38px !important;
    place-items: center !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__row--bloc .mobile-bloc-builder__more-btn {
    width: 38px !important;
    height: 38px !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    background: rgba(8, 8, 10, 0.42) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    box-shadow: 0 7px 20px rgba(0, 0, 0, 0.16) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode.is-read-only .mobile-bloc-builder__row--bloc .mobile-bloc-builder__bloc-actions > .fa-chevron-right {
    display: grid !important;
    width: 36px !important;
    height: 36px !important;
    place-items: center !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 50% !important;
    background: rgba(8, 8, 10, 0.38) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Resolve legacy low-count/current-card rules against the premium system. */
html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode.is-low-bloc-count #mobile-bloc-builder-list.mobile-bloc-builder__list > button.mobile-bloc-builder__row.mobile-bloc-builder__row--bloc,
html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode.is-low-bloc-count #mobile-bloc-builder-list.mobile-bloc-builder__list > button.mobile-bloc-builder__row.mobile-bloc-builder__row--bloc.is-current {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 178px !important;
    min-height: 178px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 22px !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode.is-low-bloc-count #mobile-bloc-builder-list > .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-thumb,
html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode.is-low-bloc-count #mobile-bloc-builder-list > .mobile-bloc-builder__row--bloc.is-current .mobile-bloc-builder__row-thumb {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    border-radius: 0 !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode.is-low-bloc-count #mobile-bloc-builder-list > .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-copy,
html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode.is-low-bloc-count #mobile-bloc-builder-list > .mobile-bloc-builder__row--bloc.is-current .mobile-bloc-builder__row-copy {
    position: absolute !important;
    inset: auto 58px 17px 18px !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    transform: none !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode.is-low-bloc-count #mobile-bloc-builder-list > .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-title,
html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode.is-low-bloc-count #mobile-bloc-builder-list > .mobile-bloc-builder__row--bloc.is-current .mobile-bloc-builder__row-title {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-size: 23px !important;
    line-height: 1 !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode.is-low-bloc-count #mobile-bloc-builder-list > .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-meta,
html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode.is-low-bloc-count #mobile-bloc-builder-list > .mobile-bloc-builder__row--bloc.is-current .mobile-bloc-builder__row-meta {
    color: rgba(255, 255, 255, 0.8) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.8) !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode.is-low-bloc-count #mobile-bloc-builder-list > .mobile-bloc-builder__row--bloc .mobile-bloc-builder__row-meta > span,
html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode.is-low-bloc-count #mobile-bloc-builder-list > .mobile-bloc-builder__row--bloc.is-current .mobile-bloc-builder__row-meta > span {
    color: rgba(255, 255, 255, 0.82) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.82) !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode.is-low-bloc-count #mobile-bloc-builder-list > .mobile-bloc-builder__row--bloc .mobile-bloc-builder__bloc-actions,
html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode.is-low-bloc-count #mobile-bloc-builder-list > .mobile-bloc-builder__row--bloc.is-current .mobile-bloc-builder__bloc-actions {
    position: absolute !important;
    inset: 14px 14px auto auto !important;
    width: 38px !important;
    height: 38px !important;
    transform: none !important;
}

/* ==========================================================================
   Seasons redesign — clean white surface, tightened header, add-season tile.
   Appended last so it wins over the layered legacy blocks above.
   ========================================================================== */

html body #mobile-bloc-builder.mobile-bloc-builder,
html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode {
    background: #ffffff !important;
    background-image: none !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder .mobile-bloc-builder__body,
html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__body {
    background: #ffffff !important;
}

/* The panel sits under the app header, so this internal bar only needs to
   carry the season count + settings — not a second tall header block. */
html body #mobile-bloc-builder.mobile-bloc-builder .mobile-bloc-builder__top {
    padding: 14px 62px 12px !important;
    min-height: 0 !important;
    background: #ffffff !important;
    border-bottom: 1px solid rgba(17, 17, 17, 0.08) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder .mobile-bloc-builder__icon-btn {
    top: 50% !important;
    transform: translateY(-50%) !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__body {
    padding: 14px 16px calc(var(--mobile-bottom-nav-height, calc(58px + env(safe-area-inset-bottom, 0px))) + 16px) !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__list,
html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode.is-low-bloc-count .mobile-bloc-builder__list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Add-season tile: dashed affordance that reads as an action, not a record. */
html body #mobile-bloc-builder.mobile-bloc-builder .mobile-bloc-builder__row--new {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
    min-height: 74px !important;
    margin: 0 !important;
    padding: 16px 18px !important;
    border: 1.5px dashed rgba(17, 17, 17, 0.18) !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: border-color 0.18s ease, background 0.18s ease !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder .mobile-bloc-builder__row--new:active {
    border-color: rgba(17, 17, 17, 0.34) !important;
    background: rgba(17, 17, 17, 0.02) !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder .mobile-bloc-builder__row-new-icon {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    background: rgba(17, 17, 17, 0.05) !important;
    color: #111111 !important;
    font-size: 15px !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder .mobile-bloc-builder__row--new .mobile-bloc-builder__row-copy {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    min-width: 0 !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder .mobile-bloc-builder__row--new .mobile-bloc-builder__row-title {
    color: #111111 !important;
    font-size: 15px !important;
    font-weight: 750 !important;
    letter-spacing: -0.01em !important;
}

/* The base __row-meta is an uppercase 800-weight micro-label; this tile wants
   plain sentence-case helper copy instead. */
html body #mobile-bloc-builder.mobile-bloc-builder .mobile-bloc-builder__row--new .mobile-bloc-builder__row-meta,
html body #mobile-bloc-builder.mobile-bloc-builder .mobile-bloc-builder__row--new .mobile-bloc-builder__row-meta > span {
    color: rgba(17, 17, 17, 0.5) !important;
    font-size: 12.5px !important;
    font-weight: 550 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* Empty state sits above the tile rather than centering in dead space. */
html body #mobile-bloc-builder.mobile-bloc-builder .mobile-bloc-builder__empty {
    min-height: 0 !important;
    padding: 4px 2px 14px !important;
    background: transparent !important;
    text-align: left !important;
}

/* --- Seasons: page rhythm ------------------------------------------------
   The list previously hugged the top with everything else empty. Give the
   current-season card poster proportions and let the surface breathe. */

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__body {
    padding: 18px 16px calc(var(--mobile-bottom-nav-height, calc(58px + env(safe-area-inset-bottom, 0px))) + 20px) !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode #mobile-bloc-builder-list,
html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode.is-low-bloc-count #mobile-bloc-builder-list {
    gap: 14px !important;
}

/* Current season reads as a poster, not a list row. */
html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode #mobile-bloc-builder-list > .mobile-bloc-builder__row--bloc.is-current,
html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode.is-low-bloc-count #mobile-bloc-builder-list > .mobile-bloc-builder__row--bloc.is-current {
    min-height: 232px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 30px rgba(17, 17, 17, 0.13) !important;
}

/* Subsequent seasons stay compact so the current one leads. */
html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode #mobile-bloc-builder-list > .mobile-bloc-builder__row--bloc:not(.is-current) {
    min-height: 96px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

/* --- Seasons: settings moved out of the title bar ------------------------
   The gear used to float absolutely in the top bar, offset by a duplicated
   status-bar inset. It now sits in the body as a labelled control above the
   list, next to the content it configures. */

html body #mobile-bloc-builder.mobile-bloc-builder .mobile-bloc-builder__toolbar {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 0 0 10px !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder .mobile-bloc-builder__prefs-btn {
    position: static !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 34px !important;
    padding: 7px 13px !important;
    border: 1px solid rgba(17, 17, 17, 0.1) !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    color: rgba(17, 17, 17, 0.68) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder .mobile-bloc-builder__prefs-btn i {
    font-size: 12px !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder .mobile-bloc-builder__prefs-btn:active {
    background: rgba(17, 17, 17, 0.03) !important;
    border-color: rgba(17, 17, 17, 0.2) !important;
}

/* Title is now just the season count, so the bar needs no side gutters. */
html body #mobile-bloc-builder.mobile-bloc-builder.is-list-mode .mobile-bloc-builder__top {
    padding: 13px 18px 12px !important;
}

/* ============================================================
   Season builder rebuild. The form was stacked labels with an
   explicit Save; name now autosaves on blur, access is a
   segmented control, and the thumbnail is tapped directly.
   Order is set by dragging rather than by four buttons a row.
   ============================================================ */

/* The screen title repeated what the nav already said. */
.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__top {
    padding-top: 8px !important;
    padding-bottom: 4px !important;
}

.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__title {
    display: none !important;
}

/* Name is the field, not a label plus a field. */
.mobile-bloc-builder__detail-actions .mobile-bloc-builder__name-input {
    min-height: 42px;
    font-size: 17px;
    font-weight: 820;
    letter-spacing: -0.01em;
}

.mobile-bloc-builder__access {
    display: inline-flex;
    align-self: flex-start;
    padding: 3px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-color) 7%, transparent);
}

.mobile-bloc-builder__access-option {
    min-height: 28px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 780;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease;
}

.mobile-bloc-builder__access-option.is-active {
    background: var(--bg-primary, #ffffff);
    color: var(--text-primary, var(--text-color));
    box-shadow: 0 1px 3px color-mix(in srgb, var(--text-color) 12%, transparent);
}

/* Access pills and the image button share a row and a baseline, so the two
   season controls read as one set rather than as a stack. They wrap rather
   than shrink on a narrow phone.

   The detail-mode rules above set the parent to `display: grid !important`
   with centred items, which would stretch this wrapper into its own full-width
   row and drop the button below the pills. Matching that specificity keeps the
   two side by side. */
.mobile-bloc-builder__controls,
html body #mobile-bloc-builder.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__controls {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    gap: 8px !important;
}

/* The pills carry a 74px floor per option for their own centred layout, which
   together with the image button overflows the 248px column. Beside the pills
   is the point of this button, so inside this row the floor relaxes and both
   controls shrink to their content rather than wrapping or spilling off the
   right edge of a narrow phone. */
html body #mobile-bloc-builder.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__controls .mobile-bloc-builder__access-option {
    min-width: 0 !important;
    padding: 0 11px !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__controls .mobile-bloc-builder__access {
    flex: 0 1 auto !important;
    min-width: 0 !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__controls .mobile-bloc-builder__image-btn {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

/* The season-detail layout puts these actions in a narrow grid column beside
   the thumbnail. The two controls fit that column together, but only if the row
   starts at its left edge rather than centring itself and pushing the button
   off the right of the screen. */
html body #mobile-bloc-builder.mobile-bloc-builder.is-season-detail .mobile-bloc-builder__controls {
    justify-content: flex-start !important;
}

.mobile-bloc-builder__image-btn,
html body #mobile-bloc-builder.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__image-btn {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    gap: 6px;
    min-height: 34px;
    padding: 0 13px !important;
    border: 0;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--text-color) 7%, transparent);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 780;
    letter-spacing: 0.01em;
    white-space: nowrap;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease, opacity 160ms ease;
}

.mobile-bloc-builder__image-btn:active {
    background: color-mix(in srgb, var(--text-color) 12%, transparent);
    color: var(--text-primary, var(--text-color));
}

.mobile-bloc-builder__image-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.mobile-bloc-builder__image-btn i {
    font-size: 11px;
}

/* The thumbnail stays a control too — the button beside the pills just makes
   it findable without hunting for the camera badge. */
.mobile-bloc-builder__detail-preview {
    padding: 0;
    border: 0;
    cursor: pointer;
}

.mobile-bloc-builder__detail-preview-edit {
    position: absolute;
    right: 5px;
    bottom: 5px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: color-mix(in srgb, #000000 62%, transparent);
    color: #ffffff;
    font-size: 10px;
}

/* Drag handle replaces the index and the two arrows. */
.mobile-bloc-builder__row-handle {
    display: grid;
    place-items: center;
    width: 28px;
    color: color-mix(in srgb, var(--text-color) 32%, transparent);
    font-size: 14px;
    cursor: grab;
    touch-action: none;
}

.mobile-bloc-builder__row--byte.is-dragging {
    opacity: 0.92;
    border-radius: 14px;
    background: color-mix(in srgb, var(--bg-primary) 96%, transparent);
    box-shadow: 0 10px 26px color-mix(in srgb, var(--text-color) 18%, transparent);
}

.mobile-bloc-builder__row--byte.is-dragging .mobile-bloc-builder__row-handle {
    cursor: grabbing;
    color: var(--text-primary, var(--text-color));
}

/* One overflow control where four buttons used to sit. */
.mobile-bloc-builder__row--byte .mobile-bloc-builder__row-actions {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
}

.mobile-bloc-builder__row-menu-btn {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: color-mix(in srgb, var(--text-color) 46%, transparent);
    font-size: 15px;
    cursor: pointer;
}

.mobile-bloc-builder__row-menu-btn:active {
    background: color-mix(in srgb, var(--text-color) 8%, transparent);
}

/* The floating Add button was covering the last row. */
.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__list {
    padding-bottom: 96px;
}

/* Byte options sheet — the destination for the row's overflow control. */
.mobile-bloc-builder__sheet-scrim {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: flex-end;
    background: rgba(6, 8, 7, 0.42);
    animation: mobileBlocBuilderScrimIn 160ms ease;
}

@keyframes mobileBlocBuilderScrimIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.mobile-bloc-builder__sheet {
    width: 100%;
    padding: 8px 14px calc(18px + env(safe-area-inset-bottom, 0px));
    border-radius: 22px 22px 0 0;
    background: var(--bg-primary, #ffffff);
    animation: mobileBlocBuilderSheetIn 200ms cubic-bezier(0.32, 0.72, 0, 1);
}

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

.mobile-bloc-builder__sheet-handle {
    width: 38px;
    height: 4px;
    margin: 0 auto 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-color) 16%, transparent);
}

.mobile-bloc-builder__sheet-title {
    padding: 0 4px 10px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-bloc-builder__sheet button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 50px;
    padding: 0 14px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--text-primary, var(--text-color));
    font-size: 15px;
    font-weight: 640;
    text-align: left;
    cursor: pointer;
}

.mobile-bloc-builder__sheet button:active {
    background: color-mix(in srgb, var(--text-color) 7%, transparent);
}

.mobile-bloc-builder__sheet button.is-destructive {
    color: #d8442c;
}

.mobile-bloc-builder__sheet button.is-cancel {
    justify-content: center;
    margin-top: 6px;
    background: color-mix(in srgb, var(--text-color) 6%, transparent);
    font-weight: 760;
}

/* The hero was forced to one column by an earlier detail-mode rule, which is why
   the thumbnail, name and access stacked and centred. Two columns, left aligned:
   the thumbnail is the control, the name and access sit beside it. */
html body #mobile-bloc-builder.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__detail-hero {
    grid-template-columns: 76px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 14px 18px 16px !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__detail-preview {
    width: 76px !important;
    height: 76px !important;
    border-radius: 17px !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__detail-actions {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    justify-items: start !important;
    align-items: flex-start !important;
    gap: 9px !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__name-input {
    min-height: 40px !important;
    padding: 0 12px !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    text-align: left !important;
}

/* The two options were overlapping; each takes its own half of the track. */
html body #mobile-bloc-builder.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__access {
    display: inline-flex !important;
    gap: 2px !important;
    width: auto !important;
    padding: 3px !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__access-option {
    flex: 0 0 auto !important;
    min-width: 74px !important;
    text-align: center !important;
}

/* Clear the floating Add button and the bottom nav beneath it. */
html body #mobile-bloc-builder.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__list {
    padding-bottom: 150px !important;
}

/* The top bar still reserved room for the title it no longer shows, which pushed
   the whole panel down. With the title gone the bar only carries the back
   control, so it collapses to that. */
html body #mobile-bloc-builder.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__top {
    min-height: 0 !important;
    padding: 6px 62px 6px !important;
    border-bottom: 0 !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__top-center {
    min-height: 0 !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__kicker {
    display: none !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__summary {
    padding-top: 8px !important;
    padding-bottom: 10px !important;
}

/* The body reserved 18px at the bottom, but the floating Add button and the app
   nav sit above that, so the last rows were unreachable behind them. */
html body #mobile-bloc-builder.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__body {
    padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Add moves beside Preview. A floating bar that covers the rows you are trying
   to reorder is worse than a pill in the row that already holds the actions. */
html body #mobile-bloc-builder.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__summary {
    grid-template-columns: minmax(0, 1fr) auto !important;
}

.mobile-bloc-builder__summary-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

html body #mobile-bloc-builder.mobile-bloc-builder .mobile-bloc-builder__pill--primary {
    border-color: transparent !important;
    background: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder .mobile-bloc-builder__pill--primary[hidden] {
    display: none !important;
}

/* The floating bar is gone in detail mode, so the list only clears the app nav. */
html body #mobile-bloc-builder.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__body {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-detail-mode .mobile-bloc-builder__bottom {
    display: none !important;
}

/* Pick-up feel: the lifted row scales up and casts a shadow so it reads as being
   held above the list, while the rows it displaces slide rather than jump. The
   dragged row itself has no transition — it must track the finger exactly. */
.mobile-bloc-builder__list.is-reordering .mobile-bloc-builder__row--byte {
    transition: transform 180ms cubic-bezier(0.2, 0, 0, 1);
    will-change: transform;
}

.mobile-bloc-builder__list.is-reordering .mobile-bloc-builder__row--byte.is-dragging {
    transition: none;
}

html body #mobile-bloc-builder.mobile-bloc-builder .mobile-bloc-builder__row--byte.is-dragging {
    position: relative;
    z-index: 5;
    border-radius: 16px;
    background: #ffffff;
    box-shadow:
        0 2px 6px rgba(17, 17, 17, 0.08),
        0 16px 34px rgba(17, 17, 17, 0.18);
    transform-origin: center;
    opacity: 0.98;
}

/* The list should not scroll or select text while a row is being carried. */
.mobile-bloc-builder__list.is-reordering {
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.mobile-bloc-builder__row--byte.is-dragging .mobile-bloc-builder__row-handle {
    color: #111111;
}

/* =========================================================================
   SEASONS — grid surface
   =========================================================================
   Replaces the stacked full-width slabs. The previous list had four competing
   layers (.is-list-mode, .is-low-bloc-count, an !important block, and an
   html-body-id block) each restyling the same .__row--bloc, so every change
   needed more specificity than the last. Rather than add a fifth layer, the
   new design renders different elements (.mobile-season-card) under
   .is-season-grid, so it composes instead of fighting.

   Colors come from the app's theme tokens (--text-primary / --background-color
   / --accent-color) the way the header and bottom nav do. The old list
   hardcoded #111111 and rgba(17,17,17,...), which is why it ignored dark mode.
   ------------------------------------------------------------------------- */

/* Edge to edge, like the Moments timeline. The side gutters are what made
   these read as cards on a page; without them each cover is just the band of
   screen it occupies, and the only separation needed is the gap between one
   and the next. */
html body #mobile-bloc-builder.mobile-bloc-builder.is-season-grid .mobile-bloc-builder__body {
    padding: 0 0 calc(var(--mobile-bottom-nav-height, calc(58px + env(safe-area-inset-bottom, 0px))) + 24px) !important;
    background: var(--background-color, #ffffff) !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-season-grid,
html body #mobile-bloc-builder.mobile-bloc-builder.is-season-grid.is-list-mode {
    background: var(--background-color, #ffffff) !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-season-grid #mobile-bloc-builder-list,
html body #mobile-bloc-builder.mobile-bloc-builder.is-season-grid.is-low-bloc-count #mobile-bloc-builder-list {
    display: flex !important;
    flex-direction: column !important;
    /* No gap at all: the covers run together as one continuous column, so the
       only thing separating two seasons is where one photograph ends and the
       next begins. */
    gap: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    background: transparent !important;
}

.mobile-bloc-builder.is-season-grid .mobile-season-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
}

/* --- card shell --------------------------------------------------------- */

/* Two-up cells hold their shape; the showcase column does not.
 *
 * With aspect-ratio:auto every cell took its own picture's height, so a wide
 * cover sat as a short band with white above and below it while the tall one
 * beside it ran on. In a grid the cell is the unit, so it is square and the
 * mirror fills whatever the picture does not -- the same trick the cinema
 * uses for upright film. The single-column showcase keeps auto: there is no
 * neighbour to line up with, and the whole frame is the point. */
.mobile-bloc-builder.is-season-grid:not(.is-season-showcase) .mobile-season-card {
    aspect-ratio: 1 / 1 !important;
    min-height: 0 !important;
}

/* The wrapper flows with its picture in the showcase column, but a fixed
   square cell needs it pinned or it keeps the image's own height and the
   mirror has nothing to fill. */
.mobile-bloc-builder.is-season-grid:not(.is-season-showcase) .mobile-season-card__art {
    position: absolute !important;
    inset: 0 !important;
}

.mobile-bloc-builder.is-season-grid:not(.is-season-showcase) .mobile-season-card__art img,
.mobile-bloc-builder.is-season-grid:not(.is-season-showcase) .mobile-season-card__art video {
    /* Fills the square; the mirror behind carries the rest of the frame. */
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 34%;
}

.mobile-bloc-builder.is-season-grid .mobile-season-card {
    position: relative;
    isolation: isolate;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    /* No radius and no shadow: both are card-on-a-page devices, and a rounded
       corner against the screen edge reads as a mistake rather than a style. */
    border-radius: 0;
    overflow: hidden;
    background: color-mix(in srgb, var(--text-primary, #111111) 6%, var(--background-color, #ffffff));
    box-shadow: none;
    text-align: left;
    cursor: pointer;
    /* No aspect-ratio: a fixed box is what forced the crop. The card takes the
       shape of its own cover, so nothing is cut off before you open it. */
    aspect-ratio: auto;
    min-height: 300px;
    transition: transform 0.18s ease;
}

.mobile-bloc-builder.is-season-grid .mobile-season-card.is-hero {
    aspect-ratio: auto;
    border-radius: 0;
}

.mobile-bloc-builder.is-season-grid .mobile-season-card:active {
    transform: scale(0.982);
}

/* --- artwork ------------------------------------------------------------ */

.mobile-bloc-builder.is-season-grid .mobile-season-card__art {
    position: relative;
    z-index: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
}

/* The media is positioned rather than laid out as a grid item: as a grid child
   under place-items:center it took its intrinsic height (a 448px image inside a
   246px card), which overflowed and left a grey band above the photo.
   Absolute + inset:0 pins it to the card so object-fit:cover can do its job.
   The grid centering stays for the monogram, which is a real grid child. */
/* The mirror, borrowed from the cinema (bytes-tv-cinema.css). A cover whose
   shape does not match the screen leaves bands beside it; rather than paint
   those grey, a blurred overscaled copy of the same picture sits behind and
   fills them. The cover keeps its whole frame, and the row still reads as one
   full-width picture instead of a photo floating on background. */
.mobile-bloc-builder.is-season-grid .mobile-season-card__art::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--season-mirror, none);
    background-size: cover;
    background-position: center;
    filter: blur(26px) saturate(125%);
    transform: scale(1.15);
    opacity: 0.62;
    pointer-events: none;
}

.mobile-bloc-builder.is-season-grid .mobile-season-card__art img,
.mobile-bloc-builder.is-season-grid .mobile-season-card__art video {
    position: relative;
    width: 100% !important;
    /* The whole cover, uncropped -- height follows the picture rather than a
       box it has to fill. object-position no longer applies: there is nothing
       being cut off to bias. */
    height: auto !important;
    max-width: none;
    max-height: none;
    min-height: 0;
    object-fit: contain;
    display: block;
    position: relative;
    z-index: 1;
}

/* Imported social graphics carry their own headline text and lose words when
   cropped off-centre, so they keep a centred crop. Tagged in
   renderMobileBlocBuilderThumb(). */
.mobile-bloc-builder.is-season-grid .mobile-season-card__art img[data-season-fit="graphic"],
.mobile-bloc-builder.is-season-grid .mobile-season-card__art video[data-season-fit="graphic"] {
    object-position: center center;
}

/* A season with no usable poster gets an accent-tinted monogram tile. It used
   to render as a black rectangle with an invisible icon. The ground stays dark
   so the same white title/meta treatment works on art and artless cards alike —
   one text style, no per-card contrast branching. */
.mobile-bloc-builder.is-season-grid .mobile-season-card.is-artless .mobile-season-card__art {
    background:
        radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--accent-color, #4f46e5) 62%, transparent), transparent 64%),
        linear-gradient(155deg,
            color-mix(in srgb, var(--accent-color, #4f46e5) 42%, #14161c),
            #14161c 78%);
}

/* The photo scrim would double up on the already-dark monogram ground. */
.mobile-bloc-builder.is-season-grid .mobile-season-card.is-artless .mobile-season-card__art::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.42) 100%);
}

.mobile-bloc-builder.is-season-grid .mobile-season-card__monogram {
    font-size: 62px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: color-mix(in srgb, var(--text-primary, #111111) 26%, transparent);
    -webkit-text-fill-color: color-mix(in srgb, var(--text-primary, #111111) 26%, transparent);
    transform: translateY(-8%);
}

.mobile-bloc-builder.is-season-grid .mobile-season-card.is-hero .mobile-season-card__monogram {
    font-size: 96px;
}

/* Scrim: guarantees the title stays legible over any photo. The old slab had
   .__bloc-shade set to display:none, which is why light photos ate the text. */
.mobile-bloc-builder.is-season-grid .mobile-season-card__art::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.32) 0%,
        rgba(0, 0, 0, 0.06) 30%,
        rgba(0, 0, 0, 0.46) 62%,
        rgba(0, 0, 0, 0.88) 100%);
}

.mobile-bloc-builder.is-season-grid .mobile-bloc-builder__bloc-shade {
    display: none !important;
}

/* --- copy --------------------------------------------------------------- */

.mobile-bloc-builder.is-season-grid .mobile-season-card__copy {
    /* Pinned to the foot of the cover. It used height:100% inside a fixed-ratio
       card; now that the card takes the picture's own height, only absolute
       positioning keeps the title on the photograph instead of below it. */
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: flex-end;
    padding: 12px;
}

.mobile-bloc-builder.is-season-grid .mobile-season-card.is-hero .mobile-season-card__copy {
    padding: 18px;
    gap: 7px;
}

.mobile-bloc-builder.is-season-grid .mobile-season-card__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    font-size: 16px;
    font-weight: 750;
    line-height: 1.12;
    letter-spacing: -0.015em;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}

.mobile-bloc-builder.is-season-grid .mobile-season-card.is-hero .mobile-season-card__title {
    font-size: 27px;
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.025em;
}

.mobile-bloc-builder.is-season-grid .mobile-season-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.82);
    -webkit-text-fill-color: rgba(255, 255, 255, 0.82);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.36);
}

.mobile-bloc-builder.is-season-grid .mobile-season-card.is-hero .mobile-season-card__meta {
    font-size: 13px;
}

.mobile-bloc-builder.is-season-grid .mobile-season-card__visibility {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    font-size: 8px;
}

/* --- badge + overflow --------------------------------------------------- */

.mobile-bloc-builder.is-season-grid .mobile-season-card__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px) saturate(1.4);
    -webkit-backdrop-filter: blur(10px) saturate(1.4);
    color: #111111;
    -webkit-text-fill-color: #111111;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* 34px hit target with a backing plate — it used to be a bare glyph on a photo. */
.mobile-bloc-builder.is-season-grid .mobile-season-card__more {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    font-size: 12px;
}

.mobile-bloc-builder.is-season-grid .mobile-season-card__more:active {
    background: rgba(0, 0, 0, 0.62);
}

/* The hero card runs under the header, so its button cannot sit at the top.
 *
 * Every other cell starts below the header and keeps the button top right.
 * The first one is full bleed to the top of the screen, which puts that
 * corner behind the notification and call buttons -- the menu was there but
 * unreachable, with two controls stacked on the same spot. On that card
 * alone it moves to the bottom right, opposite the title, which is the one
 * corner of a full-bleed cell nothing else occupies. */
.mobile-bloc-builder.is-season-grid .mobile-season-card.is-hero .mobile-season-card__more {
    top: auto;
    bottom: 14px;
    right: 12px;
}

/* --- new season tile ---------------------------------------------------- */

.mobile-bloc-builder.is-season-grid .mobile-season-card--new {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px;
    border: 1px dashed color-mix(in srgb, var(--text-primary, #111111) 22%, transparent);
    background: color-mix(in srgb, var(--text-primary, #111111) 3%, var(--background-color, #ffffff));
    box-shadow: none;
}

.mobile-bloc-builder.is-season-grid .mobile-season-card--new .mobile-season-card__new-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--accent-color, #4f46e5) 16%, transparent);
    color: var(--accent-color, #4f46e5);
    -webkit-text-fill-color: var(--accent-color, #4f46e5);
    font-size: 14px;
    margin-top: auto;
}

.mobile-bloc-builder.is-season-grid .mobile-season-card--new .mobile-season-card__copy {
    height: auto;
    padding: 0;
    gap: 2px;
}

.mobile-bloc-builder.is-season-grid .mobile-season-card--new .mobile-season-card__title {
    color: var(--text-primary, #111111);
    -webkit-text-fill-color: var(--text-primary, #111111);
    font-size: 14.5px;
    font-weight: 700;
    text-shadow: none;
}

.mobile-bloc-builder.is-season-grid .mobile-season-card--new .mobile-season-card__meta {
    color: color-mix(in srgb, var(--text-primary, #111111) 52%, transparent);
    -webkit-text-fill-color: color-mix(in srgb, var(--text-primary, #111111) 52%, transparent);
    font-size: 11.5px;
    font-weight: 500;
    text-shadow: none;
}

/* --- header "New season" control ----------------------------------------
   Sits in the top bar's right-hand owner slot, beside the season count, so
   adding a season doesn't mean scrolling past every existing one — and the
   grid's last row never strands an odd tile next to a dashed placeholder. */

/* Pinned rather than laid out in the flex row: the top bar centres its title
   with symmetric padding, so an in-flow button of a different width than the
   opposite spacer shifts the title off-centre. */
.mobile-bloc-builder .mobile-season-add-btn {
    position: absolute;
    right: 16px;
    /* Centred on the bar's content box, which already carries the safe-area
       padding. Earlier versions added the inset a second time (via a margin, then
       an explicit top) and double-counted it, so on a notched phone the button
       dropped below the header and sat on top of the first season card.
       anchor to the bar's own bottom padding edge instead: no inset arithmetic
       here at all, so it lands on the title's line whatever the inset is. */
    top: auto;
    bottom: 4px;
    transform: none;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--text-primary, #111111) 12%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-primary, #111111) 5%, var(--background-color, #ffffff));
    color: var(--text-primary, #111111);
    -webkit-text-fill-color: var(--text-primary, #111111);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.16s ease, transform 0.16s ease;
}

.mobile-bloc-builder .mobile-season-add-btn:active {
    background: color-mix(in srgb, var(--text-primary, #111111) 11%, var(--background-color, #ffffff));
    transform: scale(0.94);
}

.mobile-bloc-builder .mobile-season-add-btn[hidden] {
    display: none !important;
}

/* Only the season list offers "new season"; detail and settings do not. This
   keeps the three render paths from each having to reset the button. */
.mobile-bloc-builder:not(.is-list-mode) .mobile-season-add-btn {
    display: none !important;
}

/* The button is absolutely positioned, so the reserved spacers stay as-is and
   the title keeps its centred position. */

/* --- showcase mode: few seasons -----------------------------------------
   Under ~5 seasons the 2-up grid reads as leftovers — small tiles beside a
   large hero, with half the screen empty. Every season gets the hero's
   full-width poster treatment instead, so a young app looks intentional
   rather than sparse. Set by renderMobileBlocBuilderList(). */

.mobile-bloc-builder.is-season-grid.is-season-showcase .mobile-season-grid {
    grid-template-columns: minmax(0, 1fr);
    /* Continuous column -- see the list rule above. */
    gap: 0;
}

.mobile-bloc-builder.is-season-grid.is-season-showcase .mobile-season-card {
    /* Uncropped, like the base card -- see above. */
    aspect-ratio: auto;
    /* Flush with the screen edge -- see the card shell above. */
    border-radius: 0;
}

/* Type scales up to match the larger card. */
.mobile-bloc-builder.is-season-grid.is-season-showcase .mobile-season-card__copy {
    padding: 18px;
    gap: 7px;
}

.mobile-bloc-builder.is-season-grid.is-season-showcase .mobile-season-card__title {
    font-size: 27px;
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.025em;
}

.mobile-bloc-builder.is-season-grid.is-season-showcase .mobile-season-card__meta {
    font-size: 13px;
}

.mobile-bloc-builder.is-season-grid.is-season-showcase .mobile-season-card__monogram {
    font-size: 96px;
}

/* The new-season tile keeps its compact proportions — it is a control, not a
   season, and a full-bleed dashed box would read as a broken card. */
.mobile-bloc-builder.is-season-grid.is-season-showcase .mobile-season-card--new {
    aspect-ratio: auto;
    min-height: 96px;
}

/* =========================================================================
   SEASONS — detail (inside a season)
   =========================================================================
   The rows previously carried their own left offsets — the section header sat
   at 16px, the season thumb at 34, the drag handle at 38 and the byte thumb at
   84 — so nothing shared a vertical edge. The copy column was also squeezed to
   ~92px beside a 76px action block, which truncated titles like "Offers on the
   table thus far for Elite Class…" after four words.

   Everything below hangs off one column definition, so the handle, artwork,
   text and overflow button line up down the page.
   ------------------------------------------------------------------------- */

.mobile-bloc-builder.is-season-detail {
    /* handle | artwork | copy (flex) | overflow */
    --season-row-gutter: 16px;
    --season-handle-col: 22px;
    --season-thumb-col: 64px;
    --season-action-col: 36px;
    --season-col-gap: 12px;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-season-detail .mobile-bloc-builder__body {
    padding: 12px var(--season-row-gutter)
             calc(var(--mobile-bottom-nav-height, calc(58px + env(safe-area-inset-bottom, 0px))) + 20px) !important;
    background: var(--background-color, #ffffff) !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-season-detail .mobile-bloc-builder__list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 !important;
}

/* --- summary row (count + actions) -------------------------------------- */

html body #mobile-bloc-builder.mobile-bloc-builder.is-season-detail .mobile-bloc-builder__summary {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

/* "9 BYTES • PUBLIC" wrapped onto two lines and pushed the buttons out of
   line; it holds one line now and truncates instead. */
html body #mobile-bloc-builder.mobile-bloc-builder.is-season-detail .mobile-bloc-builder__summary-title {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: color-mix(in srgb, var(--text-primary, #111111) 52%, transparent) !important;
    -webkit-text-fill-color: color-mix(in srgb, var(--text-primary, #111111) 52%, transparent) !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-season-detail .mobile-bloc-builder__summary-actions {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-season-detail .mobile-bloc-builder__pill {
    min-height: 34px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    white-space: nowrap !important;
}

/* --- season header (artwork + name + privacy) --------------------------- */

/* Shares the row grid so the season artwork sits directly above the byte
   artwork rather than 50px to its left. */
html body #mobile-bloc-builder.mobile-bloc-builder.is-season-detail .mobile-bloc-builder__detail-hero {
    display: grid !important;
    /* Leading empty column matches the rows' drag-handle track, so the season
       artwork sits directly above the byte artwork instead of 34px to its left. */
    grid-template-columns:
        var(--season-handle-col)
        var(--season-thumb-col)
        minmax(0, 1fr) !important;
    align-items: center !important;
    gap: var(--season-col-gap) !important;
    margin: 0 0 6px !important;
    padding: 0 0 14px !important;
    border: 0 !important;
    border-bottom: 1px solid color-mix(in srgb, var(--text-primary, #111111) 9%, transparent) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-season-detail .mobile-bloc-builder__detail-preview {
    grid-column: 2 !important;
    width: var(--season-thumb-col) !important;
    height: var(--season-thumb-col) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-season-detail .mobile-bloc-builder__detail-actions {
    grid-column: 3 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    /* The detail-mode rules give this column a fixed 310-312px width and centre
       it. In this grid the track is already the right size, so that width
       pushed the name field and the controls past the right edge of the phone.
       Fill the track instead. */
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-season-detail .mobile-bloc-builder__name-input {
    width: 100% !important;
    min-height: 40px !important;
    padding: 8px 12px !important;
    border: 1px solid color-mix(in srgb, var(--text-primary, #111111) 12%, transparent) !important;
    border-radius: 11px !important;
    background: var(--background-color, #ffffff) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
}

/* --- byte rows ---------------------------------------------------------- */

html body #mobile-bloc-builder.mobile-bloc-builder.is-season-detail .mobile-bloc-builder__row--byte {
    display: grid !important;
    grid-template-columns:
        var(--season-handle-col)
        var(--season-thumb-col)
        minmax(0, 1fr)
        var(--season-action-col) !important;
    align-items: center !important;
    gap: var(--season-col-gap) !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 10px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid color-mix(in srgb, var(--text-primary, #111111) 8%, transparent) !important;
    border-radius: 0 !important;
    background: transparent !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-season-detail .mobile-bloc-builder__row--byte:last-child {
    border-bottom: 0 !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-season-detail .mobile-bloc-builder__row--byte .mobile-bloc-builder__row-handle,
html body #mobile-bloc-builder.mobile-bloc-builder.is-season-detail .mobile-bloc-builder__row--byte .mobile-bloc-builder__row-index {
    grid-column: 1 !important;
    justify-self: center !important;
    width: auto !important;
    margin: 0 !important;
    color: color-mix(in srgb, var(--text-primary, #111111) 30%, transparent) !important;
    -webkit-text-fill-color: color-mix(in srgb, var(--text-primary, #111111) 30%, transparent) !important;
    font-size: 14px !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-season-detail .mobile-bloc-builder__row--byte .mobile-bloc-builder__row-thumb {
    grid-column: 2 !important;
    width: var(--season-thumb-col) !important;
    height: var(--season-thumb-col) !important;
    min-height: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: color-mix(in srgb, var(--text-primary, #111111) 6%, transparent) !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-season-detail .mobile-bloc-builder__row--byte .mobile-bloc-builder__row-thumb img,
html body #mobile-bloc-builder.mobile-bloc-builder.is-season-detail .mobile-bloc-builder__row--byte .mobile-bloc-builder__row-thumb video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* minmax(0, 1fr) lets this column actually shrink; without it the title's
   intrinsic width kept the column wide and the text clipped instead. */
html body #mobile-bloc-builder.mobile-bloc-builder.is-season-detail .mobile-bloc-builder__row--byte .mobile-bloc-builder__row-copy {
    grid-column: 3 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    padding: 0 !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-season-detail .mobile-bloc-builder__row--byte .mobile-bloc-builder__row-title {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    overflow-wrap: anywhere !important;
    max-width: 100% !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.24 !important;
    letter-spacing: -0.01em !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-season-detail .mobile-bloc-builder__row--byte .mobile-bloc-builder__row-meta {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    color: color-mix(in srgb, var(--text-primary, #111111) 46%, transparent) !important;
    -webkit-text-fill-color: color-mix(in srgb, var(--text-primary, #111111) 46%, transparent) !important;
}

/* Right-aligned in its own column instead of floating in a 76px block. */
html body #mobile-bloc-builder.mobile-bloc-builder.is-season-detail .mobile-bloc-builder__row--byte .mobile-bloc-builder__row-actions {
    grid-column: 4 !important;
    justify-self: end !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-season-detail .mobile-bloc-builder__row--byte .mobile-bloc-builder__row-menu-btn {
    display: grid !important;
    place-items: center !important;
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--text-primary, #111111) 5%, transparent) !important;
    color: color-mix(in srgb, var(--text-primary, #111111) 62%, transparent) !important;
    -webkit-text-fill-color: color-mix(in srgb, var(--text-primary, #111111) 62%, transparent) !important;
    box-shadow: none !important;
    font-size: 13px !important;
}

/* Guest season header: the name input and privacy toggle are owner-only, so
   without these the header was a thumbnail beside empty space and the screen
   never said which season you were in. Intentionally plain — placeholder for
   the guest season design. */
html body #mobile-bloc-builder.mobile-bloc-builder.is-season-detail .mobile-bloc-builder__detail-name {
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1.12 !important;
    letter-spacing: -0.02em !important;
    color: var(--text-primary, #111111) !important;
    -webkit-text-fill-color: var(--text-primary, #111111) !important;
    overflow-wrap: anywhere !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-season-detail .mobile-bloc-builder__detail-sub {
    margin-top: 3px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    color: color-mix(in srgb, var(--text-primary, #111111) 48%, transparent) !important;
    -webkit-text-fill-color: color-mix(in srgb, var(--text-primary, #111111) 48%, transparent) !important;
}

/* =========================================================================
   SEASONS — guest detail (a guest opened a season)
   =========================================================================
   The read-only screen used to be the builder with its controls removed: a
   64px thumbnail row per byte, each printing the same imported caption, under
   a header that repeated the season name. Nothing about it told a guest what
   the season was.

   This replaces that surface entirely. The panel's own chrome is hidden and
   the layout runs edge to edge: a full-bleed cover carrying the title, then
   each byte as a chapter card. Scoped under .is-season-guest so it wins over
   the is-season-detail rules above without unpicking their !important layers.
   ------------------------------------------------------------------------- */

html body #mobile-bloc-builder.mobile-bloc-builder.is-season-guest {
    --season-guest-gutter: 20px;
    background: #ffffff !important;
}

/* The hero runs under the status bar, so the panel drops the padding the
   builder body applies and each block below re-applies its own. */
html body #mobile-bloc-builder.mobile-bloc-builder.is-season-guest .mobile-bloc-builder__body {
    padding: 0 0 calc(var(--mobile-bottom-nav-height, calc(58px + env(safe-area-inset-bottom, 0px))) + 24px) !important;
    background: #ffffff !important;
}

/* The guest screen names itself in the hero; the panel's title bar and summary
   row would only repeat it above the cover. */
html body #mobile-bloc-builder.mobile-bloc-builder.is-season-guest .mobile-bloc-builder__summary,
html body #mobile-bloc-builder.mobile-bloc-builder.is-season-guest .mobile-bloc-builder__search {
    display: none !important;
}

/* For a guest the bar holds nothing — the title is blank and the prefs and
   "new season" controls are owner-only — so it rendered as a 12px sliver of
   white between the app header and the cover. The app header above already
   carries the hamburger and login; the hero starts directly beneath it. */
html body #mobile-bloc-builder.mobile-bloc-builder.is-season-guest .mobile-bloc-builder__top {
    display: none !important;
}

html body #mobile-bloc-builder.mobile-bloc-builder.is-season-guest .mobile-bloc-builder__list {
    display: block !important;
    gap: 0 !important;
    padding: 0 !important;
}

/* --- hero ---------------------------------------------------------------- */

html body #mobile-bloc-builder.is-season-guest .mobile-season-guest__hero {
    position: relative;
    display: block;
    height: min(72vh, 452px);
    background: #1a1a20 !important;
    overflow: hidden;
}

html body #mobile-bloc-builder.is-season-guest .mobile-season-guest__cover,
html body #mobile-bloc-builder.is-season-guest .mobile-season-guest__cover img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

html body #mobile-bloc-builder.is-season-guest .mobile-season-guest__monogram {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 132px !important;
    font-weight: 900 !important;
    letter-spacing: -0.04em;
    color: rgba(255, 255, 255, 0.14) !important;
}

/* Three stops rather than a linear fade: the title sits low, so the gradient
   stays clear across the artwork and only turns solid under the copy. */
html body #mobile-bloc-builder.is-season-guest .mobile-season-guest__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(12, 12, 18, 0.10) 30%,
        rgba(12, 12, 18, 0.62) 62%,
        rgba(12, 12, 18, 0.94) 100%) !important;
}

html body #mobile-bloc-builder.is-season-guest .mobile-season-guest__cap {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 22px 26px;
}

/* Floats over the artwork rather than sitting in a bar, so the cover keeps its
   full height. */
/* The back button is gone: it landed in the same corner as the hamburger,
   which put two ways out side by side. Leaving a season is a swipe from the
   left edge now -- see bindMobileSeasonGuestSwipe. */

html body #mobile-bloc-builder.is-season-guest .mobile-season-guest__eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
}

html body #mobile-bloc-builder.is-season-guest .mobile-season-guest__pill {
    padding: 5px 10px;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.16) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.14em;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Season names are short ("April 2026"), so they carry the screen at display
   size. clamp keeps a longer name from overflowing the cover. */
html body #mobile-bloc-builder.is-season-guest .mobile-season-guest__title {
    margin: 0;
    font-size: clamp(38px, 15vw, 58px) !important;
    line-height: 0.92;
    font-weight: 900 !important;
    letter-spacing: -0.035em;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    overflow-wrap: anywhere;
}

/* The imported caption, shown once for the whole season. Clamped because an
   Instagram caption runs long and the hero is a fixed height. */
html body #mobile-bloc-builder.is-season-guest .mobile-season-guest__lede {
    max-width: 290px;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.78) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.78) !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

html body #mobile-bloc-builder.is-season-guest .mobile-season-guest__byline {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 2px;
}

html body #mobile-bloc-builder.is-season-guest .mobile-season-guest__who {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

html body #mobile-bloc-builder.is-season-guest .mobile-season-guest__avatar {
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 50% !important;
    overflow: hidden;
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.4);
}

html body #mobile-bloc-builder.is-season-guest .mobile-season-guest__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

html body #mobile-bloc-builder.is-season-guest .mobile-season-guest__name {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html body #mobile-bloc-builder.is-season-guest .mobile-season-guest__rule {
    width: 1px;
    height: 16px;
    flex: none;
    background: rgba(255, 255, 255, 0.28) !important;
}

html body #mobile-bloc-builder.is-season-guest .mobile-season-guest__count {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.64) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.64) !important;
}

/* --- follow + share ------------------------------------------------------ */

html body #mobile-bloc-builder.is-season-guest .mobile-season-guest__acts {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px var(--season-guest-gutter) 24px;
}

/* Mirrors .bytes-tv-mobile-hero-rail: four evenly spaced icon buttons over a
   hairline, count then label. Bytes TV sits on a dark stage and this screen is
   white, so the ink is inverted -- the geometry and type are the same. */
html body #mobile-bloc-builder.is-season-guest .mobile-season-guest__engagement {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    padding-top: 10px;
    border-top: 1px solid rgba(20, 20, 30, 0.09);
}

html body #mobile-bloc-builder.is-season-guest .mobile-season-guest__rail-btn {
    min-width: 0;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 4px;
    padding: 0;
    border: 0 !important;
    background: transparent !important;
    font: inherit;
    text-transform: uppercase;
    cursor: pointer;
    color: #16161c !important;
    -webkit-text-fill-color: #16161c !important;
    /* A global `button, .btn` rule drops a drop shadow on every button, which
       painted a raised white plate behind each rail action. These are bare
       icons on the page, not raised controls. */
    box-shadow: none !important;
    border-radius: 0 !important;
}

html body #mobile-bloc-builder.is-season-guest .mobile-season-guest__rail-btn:active {
    opacity: 0.6;
}

/* The panel's own focus styling drew a plate behind the tapped button, which
   read as a control stuck in its pressed state. */
html body #mobile-bloc-builder.is-season-guest .mobile-season-guest__rail-btn:focus,
html body #mobile-bloc-builder.is-season-guest .mobile-season-guest__rail-btn:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

html body #mobile-bloc-builder.is-season-guest .mobile-season-guest__rail-icon {
    flex: 0 0 auto;
    font-size: 20px !important;
    font-weight: 760 !important;
    line-height: 1;
    color: #16161c !important;
    -webkit-text-fill-color: #16161c !important;
}

html body #mobile-bloc-builder.is-season-guest .mobile-season-guest__rail-icon.fa-comment {
    font-size: 18px !important;
}

/* BlocTap is the one action with an on state, the way it is on Bytes TV. */
html body #mobile-bloc-builder.is-season-guest .mobile-season-guest__rail-btn.is-active .mobile-season-guest__rail-icon {
    color: #6c5ce7 !important;
    -webkit-text-fill-color: #6c5ce7 !important;
}

html body #mobile-bloc-builder.is-season-guest .mobile-season-guest__rail-btn strong {
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em;
    color: #16161c !important;
    -webkit-text-fill-color: #16161c !important;
}

html body #mobile-bloc-builder.is-season-guest .mobile-season-guest__rail-btn strong[hidden] {
    display: none !important;
}

html body #mobile-bloc-builder.is-season-guest .mobile-season-guest__rail-btn span:not(.mobile-season-guest__rail-icon) {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em;
    white-space: nowrap;
    color: rgba(22, 22, 28, 0.54) !important;
    -webkit-text-fill-color: rgba(22, 22, 28, 0.54) !important;
}

/* --- chapters ------------------------------------------------------------ */

html body #mobile-bloc-builder.is-season-guest .mobile-season-guest__sect {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0 22px 14px;
}

html body #mobile-bloc-builder.is-season-guest .mobile-season-guest__sect-l {
    font-size: 11.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.16em;
    color: #9a9aa2 !important;
    -webkit-text-fill-color: #9a9aa2 !important;
}

html body #mobile-bloc-builder.is-season-guest .mobile-season-guest__sect-r {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em;
    color: #c2c2ca !important;
    -webkit-text-fill-color: #c2c2ca !important;
}

/* Full bleed, matching the seasons list. The gutter and the gap are what made
   these read as cards on a page; without them each chapter is the band of
   screen it occupies, and one photograph runs straight into the next. */
/* The actions row renders empty for a guest -- no buttons, just its own
   padding, which showed up as a white band between the hero and the first
   chapter once the CHAPTERS header was removed. :empty collapses it there
   while leaving it intact wherever it does hold something. */
html body #mobile-bloc-builder.is-season-guest .mobile-season-guest__acts:empty {
    display: none;
}

html body #mobile-bloc-builder.is-season-guest .mobile-season-guest__chapters {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 0 40px;
}

html body #mobile-bloc-builder.is-season-guest .mobile-season-guest__ch {
    display: flex;
    flex-direction: column;
    gap: 0;
    cursor: pointer;
}

html body #mobile-bloc-builder.is-season-guest .mobile-season-guest__ch:active {
    opacity: 0.86;
}

html body #mobile-bloc-builder.is-season-guest .mobile-season-guest__art {
    position: relative;
    /* Square corners against the screen edge -- a radius there reads as a
       mistake rather than a style. */
    border-radius: 0 !important;
    overflow: hidden;
    background: #dedee4 !important;
    /* No aspect-ratio: the box takes the shape of the picture in it. */
    aspect-ratio: auto;
}

/* The opening chapter runs taller — it sets the pace for the scroll the way
   the hero does for the screen. */
html body #mobile-bloc-builder.is-season-guest .mobile-season-guest__ch:first-child .mobile-season-guest__art {
    aspect-ratio: auto;
}

html body #mobile-bloc-builder.is-season-guest .mobile-season-guest__art img,
html body #mobile-bloc-builder.is-season-guest .mobile-season-guest__art video {
    display: block;
    width: 100%;
    /* The whole frame, uncropped. `cover` filled a fixed 4:3 box by cutting
       whatever did not fit -- on a portrait phone shot that is most of the
       picture. Height follows the image instead, so each chapter is as tall
       as its own photograph. */
    height: auto;
    object-fit: contain;
}

/* Chapters waiting on the cards fetch. The hero above them is already real,
   so these only have to hold the shape of the scroll rather than announce
   themselves — a slow sweep, no spinner. */
html body #mobile-bloc-builder.is-season-guest .mobile-season-guest__ch.is-pending {
    cursor: default;
    pointer-events: none;
}

html body #mobile-bloc-builder.is-season-guest .mobile-season-guest__ch.is-pending .mobile-season-guest__art {
    background-image: linear-gradient(100deg, #dedee4 30%, #ededf1 50%, #dedee4 70%);
    background-size: 220% 100%;
    animation: mobile-season-guest-shimmer 1.5s ease-in-out infinite;
    /* A chapter that has not loaded has no picture to take its height from,
       so it holds a portrait box until the real one arrives. Without this the
       placeholder collapses to nothing and the scroll has no shape. */
    aspect-ratio: 4 / 5;
}

/* An image still in flight reports no height, and with height:auto the row
   collapses to nothing until it lands -- the list jumps as each one arrives.
   A floor holds the place; the real height takes over on load and, being
   larger for any portrait frame, the floor stops mattering. */
html body #mobile-bloc-builder.is-season-guest .mobile-season-guest__art {
    min-height: 300px;
}

html body #mobile-bloc-builder.is-season-guest .mobile-season-guest__ch.is-pending .mobile-season-guest__meta {
    height: 12px;
    width: 38%;
    border-radius: 999px;
    background: #dedee4;
}

@keyframes mobile-season-guest-shimmer {
    from { background-position: 130% 0; }
    to   { background-position: -30% 0; }
}

@media (prefers-reduced-motion: reduce) {
    html body #mobile-bloc-builder.is-season-guest .mobile-season-guest__ch.is-pending .mobile-season-guest__art {
        animation: none;
    }
}

html body #mobile-bloc-builder.is-season-guest .mobile-season-guest__ph {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body #mobile-bloc-builder.is-season-guest .mobile-season-guest__num {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 5px 9px;
    border-radius: 8px !important;
    background: rgba(12, 12, 18, 0.5) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body #mobile-bloc-builder.is-season-guest .mobile-season-guest__dur {
    position: absolute;
    inset: auto 12px 12px auto;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 11px 6px 9px;
    border-radius: 10px !important;
    background: rgba(12, 12, 18, 0.5) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body #mobile-bloc-builder.is-season-guest .mobile-season-guest__meta {
    /* Laid over the foot of the picture, on a gradient dark enough to carry
       white type over whatever is behind it -- the same treatment the season
       covers use for their titles. */
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 52px 22px 20px;
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.72) 0%,
        rgba(0, 0, 0, 0.42) 42%,
        rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
}

html body #mobile-bloc-builder.is-season-guest .mobile-season-guest__meta .mobile-season-guest__date,
html body #mobile-bloc-builder.is-season-guest .mobile-season-guest__meta .mobile-season-guest__ch-title {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

html body #mobile-bloc-builder.is-season-guest .mobile-season-guest__line {
    display: flex;
    align-items: center;
    gap: 8px;
}

html body #mobile-bloc-builder.is-season-guest .mobile-season-guest__date {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em;
    color: #a2a2aa !important;
    -webkit-text-fill-color: #a2a2aa !important;
}

html body #mobile-bloc-builder.is-season-guest .mobile-season-guest__ch-title {
    margin: 0;
    font-size: 20px !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em;
    line-height: 1.18;
    color: #16161c !important;
    -webkit-text-fill-color: #16161c !important;
}