/* Room modal animations */
        @keyframes gradientShift {
            0%, 100% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
        }

        @keyframes iconPulse {
            0%, 100% {
                transform: scale(1);
                opacity: 1;
            }
            50% {
                transform: scale(1.1);
                opacity: 0.9;
            }
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Glassmorphic text bloc card styles */
        .text-bloc-card-glass {
            animation: fadeInUp 0.5s ease forwards;
        }

        .text-bloc-card-glass:nth-child(1) { animation-delay: 0.05s; }
        .text-bloc-card-glass:nth-child(2) { animation-delay: 0.1s; }
        .text-bloc-card-glass:nth-child(3) { animation-delay: 0.15s; }
        .text-bloc-card-glass:nth-child(4) { animation-delay: 0.2s; }
        .text-bloc-card-glass:nth-child(5) { animation-delay: 0.25s; }
        .text-bloc-card-glass:nth-child(6) { animation-delay: 0.3s; }

        #text-blocs-modal #text-blocs-container {
            background: var(--background-color) !important;
        }

        #text-blocs-modal #text-blocs-header {
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            background: var(--background-color) !important;
        }

        #text-blocs-modal #text-blocs-list {
            display: flex !important;
            flex-direction: column !important;
            align-items: stretch;
            gap: 10px !important;
            overflow: visible;
            padding: 0 12px 40px !important;
            margin: 0;
            scroll-snap-type: none;
        }

        .text-room-deck-feature {
            display: block !important;
            padding: 0 12px 14px;
        }

        .text-rooms-section-head {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 14px;
            padding: 0 12px 15px;
        }

        .text-rooms-section-title {
            color: var(--text-primary);
            font-size: 16px;
            font-weight: 950;
            letter-spacing: -0.01em;
            line-height: 1.05;
        }

        .text-rooms-section-subtitle {
            color: var(--text-secondary);
            font-size: 11px;
            font-weight: 750;
            margin-top: 4px;
        }

        .text-rooms-sort-pill {
            border: 0;
            border-radius: 999px;
            min-height: 32px;
            padding: 0 12px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: color-mix(in srgb, var(--surface-color) 92%, transparent);
            color: var(--text-primary);
            font-size: 10px;
            font-weight: 850;
            box-shadow: 0 8px 18px color-mix(in srgb, var(--text-primary) 5%, transparent);
        }

        .text-room-feature-card {
            position: relative;
            width: 100%;
            min-height: 150px;
            border-radius: 18px;
            overflow: hidden;
            border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
            background:
                radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--primary-color) 9%, transparent), transparent 42%),
                color-mix(in srgb, var(--surface-color) 92%, var(--text-primary) 5%);
            box-shadow: 0 12px 24px color-mix(in srgb, var(--text-primary) 6%, transparent);
            cursor: pointer;
            padding: 14px;
            display: flex;
            gap: 13px;
            align-items: center;
        }

        .text-room-feature-wash {
            position: absolute;
            inset: 0 0 0 auto;
            width: 58%;
            opacity: 0.18;
            pointer-events: none;
            overflow: hidden;
            -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 36%, #000 100%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 36%, #000 100%);
        }

        .text-room-feature-wash img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: saturate(1.05);
        }

        .text-room-feature-cover > img,
        .text-room-feature-fallback {
            width: 100%;
            height: 100%;
            display: block !important;
            object-fit: cover;
        }

        .text-room-feature-card::after {
            content: none;
        }

        .text-room-feature-cover {
            flex: 0 0 auto;
            width: 68px;
            height: 68px;
            border-radius: 18px;
            overflow: hidden;
            align-self: start;
            border: 1px solid color-mix(in srgb, var(--border-color) 64%, transparent);
            background: color-mix(in srgb, var(--text-primary) 8%, transparent);
            box-shadow: 0 8px 18px color-mix(in srgb, var(--text-primary) 8%, transparent);
            z-index: 1;
        }

        .text-room-feature-fallback {
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-primary);
            font-size: 18px;
            font-weight: 950;
            letter-spacing: 0.06em;
        }

        .text-room-feature-copy {
            position: relative;
            z-index: 2;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 7px;
            min-width: 0;
            flex: 1;
            max-width: none;
            padding: 0;
            border-radius: 0;
            background: transparent;
            border: 0;
            color: var(--text-primary);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }

        .text-room-feature-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }

        .text-room-feature-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: var(--primary-color);
            font-size: 8px;
            font-weight: 900;
            letter-spacing: 0.1em;
            text-transform: uppercase;
        }

        .text-room-feature-badge::before {
            content: "";
            width: 6px;
            height: 6px;
            border-radius: 999px;
            background: var(--primary-color);
        }

        .text-room-feature-title {
            min-width: 0;
            font-size: 22px;
            line-height: 1.02;
            font-weight: 950;
            letter-spacing: -0.02em;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: var(--text-primary);
            text-shadow: none;
        }

        .text-room-feature-count {
            flex: 0 0 auto;
            position: static;
            padding: 0;
            border-radius: 999px;
            background: transparent;
            border: 0;
            color: var(--text-primary);
            font-size: 12px;
            font-weight: 900;
            text-transform: none;
            letter-spacing: 0.08em;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }

        .text-room-feature-preview {
            color: var(--text-secondary);
            font-size: 12px;
            font-weight: 800;
            line-height: 1.35;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-shadow: none;
        }

        .text-room-feature-time {
            position: static;
            flex: 0 0 auto;
            padding: 7px 9px;
            border-radius: 999px;
            background: color-mix(in srgb, var(--surface-color) 88%, transparent);
            color: var(--text-primary);
            font-size: 8px;
            font-weight: 900;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
        }

        .text-room-feature-check {
            position: static;
            flex: 0 0 auto;
            width: 26px;
            height: 26px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: var(--surface-color);
            color: var(--primary-color);
            box-shadow: 0 8px 22px color-mix(in srgb, var(--text-primary) 16%, transparent);
        }

        .text-room-feature-avatars {
            display: flex;
            align-items: center;
            margin-top: 0;
        }

        .text-room-feature-avatar {
            width: 18px;
            height: 18px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-left: -5px;
            border: 1px solid color-mix(in srgb, var(--background-color) 76%, transparent);
            background: color-mix(in srgb, var(--surface-color) 82%, var(--primary-color) 18%);
            color: var(--text-primary);
            font-size: 8px;
            font-weight: 950;
            overflow: hidden;
        }

        .text-room-feature-avatar:first-child {
            margin-left: 0;
        }

        .text-room-feature-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .text-room-feature-progress {
            position: relative;
            width: 58px;
            height: 2px;
            border-radius: 999px;
            background: color-mix(in srgb, var(--background-color) 28%, transparent);
            overflow: hidden;
        }

        .text-room-feature-progress span {
            display: block;
            width: 42%;
            height: 100%;
            background: var(--primary-color);
        }

        .text-room-feature-bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-top: 2px;
        }

        .text-room-feature-stat {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 7px;
        }

        #text-blocs-modal #text-blocs-list::-webkit-scrollbar {
            display: none;
        }

        .text-bloc-channel-row {
            position: relative;
            display: flex;
            width: auto;
            min-width: 0;
            min-height: 82px;
            flex-direction: row;
            align-items: stretch;
            justify-content: space-between;
            gap: 10px;
            padding: 14px 15px;
            cursor: pointer;
            border: 1px solid color-mix(in srgb, var(--border-color) 48%, transparent);
            border-radius: 16px;
            background: color-mix(in srgb, var(--surface-color) 88%, transparent);
            box-shadow: 0 7px 18px color-mix(in srgb, var(--text-primary) 3%, transparent);
            overflow: visible;
            opacity: 1;
            transform: none;
            scroll-snap-align: none;
            transition: background 0.2s ease, border-color 0.2s ease, transform 0.22s ease, box-shadow 0.22s ease, opacity 0.22s ease;
        }

        .text-bloc-channel-row + .text-bloc-channel-row {
            margin-top: 0;
        }

        .text-bloc-channel-row:nth-child(odd) {
            margin-left: 0;
            margin-right: 0;
        }

        .text-bloc-channel-row:nth-child(even) {
            margin-left: 0;
            margin-right: 0;
        }

        .text-bloc-channel-row:hover {
            transform: translateY(-1px);
            background: color-mix(in srgb, var(--surface-color) 90%, var(--primary-color) 4%);
            box-shadow: 0 8px 18px color-mix(in srgb, var(--text-primary) 5%, transparent);
        }

        .text-bloc-channel-row::before {
            content: none;
        }

        .text-bloc-channel-row:active {
            transform: translateY(0) scale(0.995);
            background: color-mix(in srgb, var(--text-primary) 5%, transparent);
        }

        .text-bloc-channel-row.is-active {
            border-color: color-mix(in srgb, var(--primary-color) 42%, var(--border-color));
            background: color-mix(in srgb, var(--surface-color) 90%, var(--primary-color) 7%);
            box-shadow: none;
            opacity: 1;
            transform: none;
        }

        .text-bloc-channel-row.is-active .text-bloc-channel-name {
            color: var(--text-primary) !important;
        }

        .text-bloc-channel-row.is-active .text-bloc-channel-status {
            opacity: 1 !important;
            transform: scale(1) !important;
        }

        .text-bloc-channel-thumb {
            position: relative;
            inset: auto;
            order: 0;
            width: 54px;
            height: 54px;
            min-width: 54px;
            min-height: 54px;
            margin: 0;
            border-radius: 16px;
            background: color-mix(in srgb, var(--text-primary) 8%, transparent);
            border: 1px solid color-mix(in srgb, var(--border-color) 58%, transparent);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            color: var(--text-primary);
            box-shadow: 0 8px 20px color-mix(in srgb, var(--text-primary) 8%, transparent);
        }

        .text-bloc-channel-row:nth-child(even) .text-bloc-channel-thumb {
            transform: none;
        }

        .text-bloc-channel-row:nth-child(odd) .text-bloc-channel-thumb {
            transform: none;
        }

        .text-bloc-channel-row.is-active::before {
            content: "";
            position: absolute;
            left: -1px;
            top: 14px;
            bottom: 14px;
            right: auto;
            width: 3px;
            height: auto;
            border-radius: 999px;
            background: var(--primary-color);
        }

        .text-bloc-channel-thumb::before {
            content: none;
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at 20% 18%, color-mix(in srgb, var(--surface-color) 34%, transparent), transparent 24%),
                linear-gradient(180deg,
                    color-mix(in srgb, var(--text-primary) 8%, transparent),
                    transparent 34%,
                    color-mix(in srgb, var(--text-primary) 54%, transparent));
            pointer-events: none;
            z-index: 1;
        }

        .text-bloc-channel-row.is-active .text-bloc-channel-thumb {
            border-color: color-mix(in srgb, var(--primary-color) 42%, var(--border-color));
            box-shadow: 0 10px 24px color-mix(in srgb, var(--primary-color) 12%, transparent);
        }

        .text-bloc-channel-thumb::after {
            content: none;
        }

        .text-bloc-channel-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            position: relative;
            z-index: 0;
        }

        .text-bloc-channel-initials {
            font-size: 18px;
            font-weight: 900;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            text-shadow: none;
            position: relative;
            z-index: 2;
        }

        .text-bloc-channel-meta {
            position: relative;
            min-width: 0;
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 5px;
            padding: 0;
            color: var(--text-primary);
        }

        .text-bloc-channel-name-row {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            margin: 0;
            gap: 6px;
        }

        .text-bloc-channel-name {
            font-size: 17px;
            line-height: 1.1;
            font-weight: 900;
            letter-spacing: -0.01em;
            color: var(--text-primary);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .text-bloc-channel-time {
            font-size: 10px;
            color: var(--text-secondary);
            opacity: 1;
            white-space: nowrap;
            padding-top: 3px;
        }

        .text-bloc-channel-preview {
            min-height: 0;
            font-size: 12px;
            color: var(--text-secondary);
            line-height: 1.45;
            margin: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            white-space: normal;
        }

        .text-bloc-channel-foot {
            display: flex;
            align-items: center;
            gap: 6px;
            margin: 2px 0 0;
            min-height: 16px;
        }

        .text-bloc-channel-count {
            font-size: 10px;
            font-weight: 800;
            color: var(--text-primary);
        }

        .text-bloc-channel-label {
            font-size: 9px;
            color: var(--text-secondary);
        }

        .text-bloc-channel-status {
            position: absolute;
            top: auto;
            right: 15px;
            bottom: 50%;
            translate: 0 50%;
            margin-left: 0;
            width: 18px;
            height: 18px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: var(--primary-color);
            color: var(--background-color);
            font-size: 9px;
            opacity: 0;
            transform: scale(0.8);
            transition: opacity 0.18s ease, transform 0.18s ease;
        }

        .text-bloc-channel-row > .fa-chevron-right {
            display: inline-flex !important;
            align-self: center;
            margin-left: 4px;
            padding-right: 0;
        }

        #text-bloc-create-cta {
            width: auto !important;
            min-width: 0 !important;
            height: auto !important;
            min-height: 104px !important;
            flex-direction: row !important;
            justify-content: flex-start !important;
            align-items: center !important;
            text-align: left !important;
            gap: 12px !important;
            border-radius: 24px !important;
            border: 1px solid color-mix(in srgb, var(--primary-color, var(--accent-color)) 30%, var(--border-color)) !important;
            background:
                radial-gradient(circle at 78% 14%, color-mix(in srgb, var(--primary-color, var(--accent-color)) 12%, transparent), transparent 38%),
                color-mix(in srgb, var(--surface-color) 94%, transparent) !important;
            box-shadow: 0 18px 42px color-mix(in srgb, var(--text-primary) 12%, transparent) !important;
            opacity: 1 !important;
            margin-top: 0 !important;
            padding: 10px !important;
        }

        #text-room-quick-rail,
        #text-room-lobby-stage {
            display: none !important;
        }

        #text-room-quick-rail {
            display: none !important;
            margin: 2px -16px 0;
            padding: 2px 16px 4px;
        }

        #text-bloc-create-cta .text-bloc-channel-thumb {
            position: relative !important;
            inset: auto !important;
            display: inline-flex !important;
            width: 64px !important;
            height: 64px !important;
            min-width: 64px !important;
            min-height: 64px !important;
            border-radius: 20px !important;
            margin: 0 !important;
            border: 1px solid color-mix(in srgb, var(--primary-color, var(--accent-color)) 18%, transparent) !important;
            background:
                radial-gradient(circle at 50% 44%, color-mix(in srgb, var(--primary-color, var(--accent-color)) 22%, transparent), transparent 48%),
                color-mix(in srgb, var(--surface-color) 82%, var(--text-primary) 8%) !important;
            color: var(--primary-color, var(--accent-color)) !important;
            box-shadow: inset 0 0 0 1px color-mix(in srgb, #ffffff 7%, transparent);
        }

        #text-bloc-create-cta .text-bloc-channel-meta {
            display: flex !important;
            flex: 1 1 auto !important;
            min-width: 0 !important;
        }

        #text-bloc-create-cta .text-bloc-channel-name {
            color: var(--text-primary) !important;
            font-size: 15px !important;
            line-height: 1.1 !important;
            font-weight: 950 !important;
        }

        .text-bloc-create-copy {
            display: flex;
            flex-direction: column;
            gap: 7px;
            min-width: 0;
        }

        .text-bloc-create-type-line {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            color: var(--text-secondary);
            font-size: 10px;
            font-weight: 900;
            letter-spacing: 0.1em;
            text-transform: uppercase;
        }

        .text-bloc-create-helper {
            color: var(--text-secondary);
            font-size: 12px;
            font-weight: 800;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .text-bloc-create-arrow {
            margin-left: auto;
            flex: 0 0 34px;
            width: 34px;
            height: 34px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: color-mix(in srgb, var(--primary-color, var(--accent-color)) 16%, var(--surface-color));
            color: var(--primary-color, var(--accent-color));
            border: 1px solid color-mix(in srgb, var(--primary-color, var(--accent-color)) 22%, transparent);
            font-size: 12px;
        }

        .text-room-quick-rail {
            display: none;
            align-items: center;
            gap: 8px;
            margin: 0 -16px 24px;
            padding: 4px 16px 2px;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        .text-room-quick-rail::-webkit-scrollbar {
            display: none;
        }

        .text-room-chip {
            appearance: none;
            min-height: 34px;
            max-width: 156px;
            border: 1px solid color-mix(in srgb, var(--border-color) 76%, transparent);
            border-radius: 999px;
            padding: 0 13px;
            display: inline-flex;
            align-items: center;
            gap: 7px;
            background: color-mix(in srgb, var(--surface-color) 90%, transparent);
            color: var(--text-primary);
            font-size: 11px;
            font-weight: 850;
            white-space: nowrap;
            cursor: pointer;
            box-shadow: 0 8px 22px color-mix(in srgb, var(--text-primary) 7%, transparent);
        }

        .text-room-chip span {
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .text-room-chip.is-active {
            background: color-mix(in srgb, var(--primary-color) 10%, var(--surface-color) 90%);
            color: var(--text-primary);
            border-color: color-mix(in srgb, var(--primary-color) 45%, var(--border-color));
            box-shadow: 0 8px 20px color-mix(in srgb, var(--primary-color) 12%, transparent);
        }

        .text-room-chip.is-create {
            width: 34px;
            min-width: 34px;
            padding: 0;
            justify-content: center;
        }

        .text-room-lobby-stage {
            display: none;
            align-items: flex-start;
            justify-content: center;
            padding-top: 64px;
        }

        .text-room-hero {
            width: min(92vw, 430px);
            display: grid;
            gap: 14px;
        }

        .text-room-hero-cover {
            position: relative;
            min-height: min(48vh, 360px);
            border-radius: 26px;
            overflow: hidden;
            background: color-mix(in srgb, var(--text-primary) 9%, transparent);
            border: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
            box-shadow:
                0 30px 80px color-mix(in srgb, var(--text-primary) 18%, transparent),
                inset 0 1px 0 color-mix(in srgb, #ffffff 32%, transparent);
            cursor: pointer;
        }

        .text-room-hero-cover::after {
            content: "";
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at 22% 18%, rgba(255,255,255,0.28), transparent 24%),
                linear-gradient(180deg, rgba(0,0,0,0.05), transparent 34%, rgba(0,0,0,0.62));
            pointer-events: none;
        }

        .text-room-hero-cover img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            position: absolute;
            inset: 0;
        }

        .text-room-hero-fallback {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            font-size: clamp(54px, 18vw, 96px);
            font-weight: 950;
            letter-spacing: 0.04em;
        }

        .text-room-hero-copy {
            position: absolute;
            left: 14px;
            right: 14px;
            bottom: 14px;
            z-index: 2;
            border-radius: 18px;
            padding: 14px;
            color: #ffffff;
            background: rgba(0,0,0,0.52);
            border: 1px solid rgba(255,255,255,0.18);
            box-shadow: 0 16px 38px rgba(0,0,0,0.22);
            backdrop-filter: blur(16px) saturate(135%);
            -webkit-backdrop-filter: blur(16px) saturate(135%);
        }

        .text-room-hero-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 8px;
        }

        .text-room-hero-title {
            min-width: 0;
            font-size: 24px;
            line-height: 1;
            font-weight: 950;
            letter-spacing: -0.03em;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .text-room-hero-count {
            flex-shrink: 0;
            font-size: 10px;
            font-weight: 900;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: rgba(255,255,255,0.78);
        }

        .text-room-hero-preview {
            min-height: 20px;
            color: rgba(255,255,255,0.82);
            font-size: 13px;
            line-height: 1.35;
            font-weight: 700;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .text-room-hero-time {
            margin-top: 6px;
            color: rgba(255,255,255,0.62);
            font-size: 10px;
            font-weight: 850;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .text-room-hero-enter {
            position: absolute;
            top: 14px;
            right: 14px;
            z-index: 3;
            width: 38px;
            height: 38px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #ffffff;
            color: #0b0b0f;
            box-shadow: 0 14px 32px rgba(0,0,0,0.22);
            font-size: 13px;
        }

        .text-room-hero-actions {
            display: none;
        }

        .text-room-action {
            min-height: 42px;
            border: 1px solid color-mix(in srgb, var(--border-color) 76%, transparent);
            border-radius: 16px;
            background: color-mix(in srgb, var(--surface-color) 90%, transparent);
            color: var(--text-primary);
            font-size: 11px;
            font-weight: 900;
            cursor: pointer;
        }

        .text-room-action.primary {
            background: var(--text-primary);
            color: var(--background-color);
            border-color: var(--text-primary);
        }

        [data-theme="light"] .text-bloc-channel-row.is-active::before,
        [data-theme="light-accent"] .text-bloc-channel-row.is-active::before {
            background: transparent;
        }

        /* Premium Rooms redesign */
        #text-blocs-modal #text-blocs-container {
            background:
                linear-gradient(180deg,
                    color-mix(in srgb, var(--text-primary) 3%, var(--background-color)) 0%,
                    var(--background-color) 18%,
                    var(--background-color) 100%) !important;
            padding-top: calc(max(44px, env(safe-area-inset-top, 0px)) + 58px) !important;
        }

        #text-blocs-modal #text-blocs-header {
            padding: calc(max(44px, env(safe-area-inset-top, 0px)) + 6px) 14px 8px !important;
            border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent) !important;
            background: color-mix(in srgb, var(--background-color) 94%, transparent) !important;
            backdrop-filter: blur(18px) saturate(140%) !important;
            -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
        }

        #text-blocs-modal #text-blocs-header > div:first-child {
            margin-bottom: 0 !important;
        }

        #text-blocs-modal #text-blocs-header button {
            width: 46px !important;
            height: 46px !important;
            border: 0 !important;
            background: transparent !important;
            box-shadow: none !important;
            color: var(--text-primary) !important;
        }

        #text-blocs-modal #text-blocs-title {
            font-size: 13px !important;
            font-weight: 950 !important;
            letter-spacing: 0.16em !important;
            text-transform: uppercase !important;
        }

        #text-blocs-modal .text-rooms-section-head {
            padding: 18px 24px 12px !important;
            align-items: center;
        }

        #text-blocs-modal .text-rooms-section-title {
            font-size: 24px !important;
            letter-spacing: 0 !important;
            line-height: 1 !important;
        }

        #text-blocs-modal .text-rooms-section-subtitle {
            margin-top: 7px !important;
            font-size: 11px !important;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        #text-blocs-modal .text-rooms-sort-pill {
            display: none !important;
        }

        #text-blocs-modal .text-rooms-create-pill {
            flex: 0 0 auto !important;
            min-height: 38px !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 8px !important;
            padding: 0 14px !important;
            border-radius: 999px !important;
            border: 1px solid color-mix(in srgb, var(--primary-color) 48%, transparent) !important;
            background: color-mix(in srgb, var(--primary-color) 16%, transparent) !important;
            color: var(--text-primary) !important;
            font-size: 12px !important;
            font-weight: 900 !important;
            letter-spacing: 0.01em !important;
            box-shadow: none !important;
        }

        #text-blocs-modal .text-rooms-create-pill i {
            font-size: 12px !important;
            color: var(--primary-color) !important;
        }

        #text-blocs-modal .text-room-deck-feature {
            display: none !important;
        }

        #text-blocs-modal #text-blocs-list {
            gap: 0 !important;
            padding: 0 24px calc(36px + env(safe-area-inset-bottom)) !important;
        }

        #text-blocs-modal .text-bloc-channel-row {
            min-height: 88px !important;
            padding: 15px 0 !important;
            gap: 14px !important;
            border: 0 !important;
            border-radius: 0 !important;
            background: transparent !important;
            box-shadow: none !important;
            border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent) !important;
            align-items: center !important;
            overflow: visible !important;
        }

        #text-blocs-modal .text-bloc-channel-row:hover,
        #text-blocs-modal .text-bloc-channel-row:active {
            background: transparent !important;
            box-shadow: none !important;
            transform: none !important;
        }

        #text-blocs-modal .text-bloc-channel-row.is-active {
            border-color: color-mix(in srgb, var(--primary-color) 36%, var(--text-primary) 10%) !important;
            background:
                linear-gradient(90deg,
                    color-mix(in srgb, var(--primary-color) 8%, transparent) 0%,
                    transparent 48%) !important;
        }

        #text-blocs-modal .text-bloc-channel-row.is-active::before {
            left: -12px !important;
            top: 15px !important;
            bottom: 15px !important;
            width: 3px !important;
            background: var(--primary-color) !important;
        }

        #text-blocs-modal .text-bloc-channel-thumb {
            width: 58px !important;
            height: 58px !important;
            min-width: 58px !important;
            min-height: 58px !important;
            border-radius: 18px !important;
            border: 1px solid color-mix(in srgb, var(--text-primary) 12%, transparent) !important;
            box-shadow:
                0 12px 28px color-mix(in srgb, var(--text-primary) 10%, transparent),
                inset 0 1px 0 color-mix(in srgb, #ffffff 16%, transparent) !important;
            background:
                linear-gradient(145deg,
                    color-mix(in srgb, var(--text-primary) 11%, transparent),
                    color-mix(in srgb, var(--primary-color) 11%, transparent)) !important;
        }

        #text-blocs-modal .text-bloc-channel-thumb::before {
            content: "" !important;
            position: absolute !important;
            inset: 0 !important;
            background:
                linear-gradient(180deg,
                    color-mix(in srgb, #ffffff 16%, transparent),
                    transparent 42%,
                    color-mix(in srgb, #000000 20%, transparent)) !important;
            pointer-events: none !important;
            z-index: 1 !important;
        }

        #text-blocs-modal .text-bloc-channel-thumb img,
        #text-blocs-modal .text-bloc-channel-initials,
        #text-blocs-modal .text-bloc-channel-thumb i {
            position: relative !important;
            z-index: 2 !important;
        }

        #text-blocs-modal .text-bloc-channel-name-row {
            align-items: baseline !important;
            gap: 10px !important;
        }

        #text-blocs-modal .text-bloc-channel-name {
            font-size: 18px !important;
            font-weight: 950 !important;
            line-height: 1.05 !important;
            letter-spacing: 0 !important;
        }

        #text-blocs-modal .text-bloc-channel-time {
            font-size: 9px !important;
            font-weight: 850 !important;
            letter-spacing: 0.05em !important;
            text-transform: uppercase;
            padding-top: 0 !important;
        }

        #text-blocs-modal .text-bloc-channel-preview {
            font-size: 13px !important;
            line-height: 1.35 !important;
            font-weight: 780 !important;
            -webkit-line-clamp: 1 !important;
        }

        #text-blocs-modal .text-bloc-channel-foot {
            margin-top: 1px !important;
            gap: 5px !important;
        }

        #text-blocs-modal .text-bloc-channel-count,
        #text-blocs-modal .text-bloc-channel-label {
            font-size: 9px !important;
            font-weight: 900 !important;
            letter-spacing: 0.08em !important;
            text-transform: uppercase;
        }

        #text-blocs-modal .text-bloc-channel-count {
            min-width: 18px;
            height: 18px;
            padding: 0 6px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: color-mix(in srgb, var(--text-primary) 9%, transparent);
            color: var(--text-primary);
        }

        #text-blocs-modal .text-bloc-channel-row > .fa-chevron-right {
            display: none !important;
        }

        #text-blocs-modal .text-bloc-channel-status {
            right: 0 !important;
            width: 8px !important;
            height: 8px !important;
            color: transparent !important;
            background: var(--primary-color) !important;
            box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-color) 12%, transparent);
        }

        #text-blocs-modal .text-bloc-channel-status i {
            display: none !important;
        }

        #text-blocs-modal #text-bloc-create-cta {
            min-height: 76px !important;
            padding: 13px 0 15px !important;
            margin: 0 !important;
            border-radius: 0 !important;
            border: 0 !important;
            border-bottom: 1px solid color-mix(in srgb, var(--primary-color) 20%, var(--text-primary) 8%) !important;
            background: transparent !important;
            box-shadow: none !important;
        }

        #text-blocs-modal #text-bloc-create-cta .text-bloc-channel-thumb {
            width: 52px !important;
            height: 52px !important;
            min-width: 52px !important;
            min-height: 52px !important;
            border-radius: 999px !important;
            background: var(--text-primary) !important;
            color: var(--background-color) !important;
            border: 0 !important;
            box-shadow: none !important;
        }

        #text-blocs-modal #text-bloc-create-cta .text-bloc-create-type-line,
        #text-blocs-modal #text-bloc-create-cta .text-bloc-create-helper {
            display: none !important;
        }

        #text-blocs-modal #text-bloc-create-cta .text-bloc-channel-name {
            font-size: 17px !important;
        }

        #text-blocs-modal #text-bloc-create-cta .text-bloc-create-arrow {
            flex: 0 0 auto !important;
            width: auto !important;
            height: auto !important;
            border: 0 !important;
            background: transparent !important;
            color: var(--text-secondary) !important;
        }

        .text-bloc-create-shell {
            width: 100%;
            max-width: 560px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .text-bloc-create-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }

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

        .text-bloc-create-heading {
            margin-top: 3px;
            color: var(--text-primary);
            font-size: 22px;
            line-height: 1.05;
            font-weight: 950;
        }

        .text-bloc-create-close {
            width: 38px;
            height: 38px;
            border-radius: 999px;
            border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
            background: color-mix(in srgb, var(--surface-color) 86%, transparent);
            color: var(--text-primary);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        .text-bloc-create-preview {
            --room-create-accent: var(--primary-color, var(--accent-color));
            align-self: center;
            width: min(54vw, 220px);
            height: clamp(150px, 22dvh, 190px);
            border-radius: 28px;
            padding: 10px;
            min-height: 0;
            background:
                radial-gradient(circle at 78% 14%, color-mix(in srgb, var(--room-create-accent) 10%, transparent), transparent 38%),
                var(--surface-color);
            color: var(--text-primary);
            border: 1px solid color-mix(in srgb, var(--room-create-accent) 18%, var(--border-color));
            box-shadow:
                0 24px 55px color-mix(in srgb, var(--text-primary) 13%, transparent),
                0 0 0 1px color-mix(in srgb, var(--room-create-accent) 10%, transparent);
            display: flex;
            flex-direction: column;
            gap: 10px;
            overflow: hidden;
            position: relative;
            background-size: cover;
            background-position: center;
        }

        .text-bloc-create-preview::after {
            content: "";
            position: absolute;
            left: 22px;
            right: 22px;
            bottom: -1px;
            height: 3px;
            border-radius: 999px;
            background: var(--room-create-accent);
            box-shadow: 0 0 16px color-mix(in srgb, var(--room-create-accent) 40%, transparent);
        }

        .text-bloc-create-preview-thumb {
            flex: 1 1 auto;
            min-height: 0;
            border-radius: 20px;
            background:
                radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--room-create-accent) 14%, transparent), transparent 46%),
                color-mix(in srgb, var(--surface-color) 84%, var(--text-primary) 8%);
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            position: relative;
        }

        .text-bloc-create-preview-thumb.has-image .text-bloc-create-preview-icon {
            opacity: 0;
            transform: scale(0.92);
        }

        .text-bloc-create-preview-icon {
            width: 40px;
            height: 40px;
            border-radius: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: var(--room-create-accent);
            color: #ffffff;
            box-shadow: 0 14px 30px color-mix(in srgb, var(--room-create-accent) 26%, transparent);
            transition: opacity 0.18s ease, transform 0.18s ease;
        }

        .text-bloc-create-preview-footer {
            flex: 0 0 auto;
            min-width: 0;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .text-bloc-create-preview-copy {
            min-width: 0;
            flex: 1 1 auto;
        }

        .text-bloc-create-preview-title {
            max-width: 100%;
            color: var(--text-primary);
            font-size: 11px;
            line-height: 1.1;
            font-weight: 950;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .text-bloc-create-preview-desc {
            margin-top: 3px;
            max-width: 100%;
            color: var(--text-secondary);
            font-size: 9px;
            line-height: 1;
            font-weight: 850;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .text-bloc-create-preview-action {
            flex: 0 0 34px;
            width: 34px;
            height: 34px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: color-mix(in srgb, var(--room-create-accent) 16%, var(--surface-color));
            color: var(--room-create-accent);
            border: 1px solid color-mix(in srgb, var(--room-create-accent) 22%, transparent);
            font-size: 12px;
        }

        .text-bloc-create-panel {
            background: color-mix(in srgb, var(--surface-color) 92%, transparent);
            border: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
            border-radius: 24px;
            padding: 16px;
            box-shadow: 0 22px 50px color-mix(in srgb, var(--text-primary) 14%, transparent);
        }

        .text-bloc-create-field {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-bottom: 13px;
        }

        .text-bloc-create-field label {
            font-size: 11px;
            font-weight: 850;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--text-secondary);
        }

        .text-bloc-create-field input,
        .text-bloc-create-field select {
            width: 100%;
            padding: 14px 14px;
            border-radius: 16px;
            border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
            background: color-mix(in srgb, var(--surface-color) 85%, transparent);
            color: var(--text-primary);
            font-size: 15px;
            outline: none;
        }

        .text-bloc-create-field input:focus,
        .text-bloc-create-field select:focus {
            border-color: color-mix(in srgb, var(--primary-color, var(--accent-color)) 44%, transparent);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color, var(--accent-color)) 14%, transparent);
        }

        .text-bloc-paid-stripe-status {
            min-height: 18px;
            margin-top: 2px;
            color: var(--text-secondary);
            font-size: 12px;
            font-weight: 700;
            line-height: 1.4;
        }

        .text-bloc-create-media-row {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 10px;
            align-items: center;
        }

        .text-bloc-create-media-label {
            min-height: 48px;
            border-radius: 16px;
            border: 1px dashed color-mix(in srgb, var(--border-color) 80%, transparent);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-size: 13px;
            font-weight: 850;
            color: var(--text-primary);
            background: color-mix(in srgb, var(--surface-color) 78%, transparent);
            cursor: pointer;
        }

        .text-bloc-create-actions {
            display: grid;
            grid-template-columns: 1fr;
            gap: 10px;
        }

        .text-bloc-create-primary,
        .text-bloc-create-secondary {
            width: 100%;
            min-height: 52px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-size: 13px;
            font-weight: 950;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            cursor: pointer;
        }

        .text-bloc-create-primary {
            border: 0;
            background: var(--primary-color, var(--accent-color));
            color: #ffffff;
            box-shadow: 0 18px 42px color-mix(in srgb, var(--primary-color, var(--accent-color)) 24%, transparent);
        }

        .text-bloc-create-primary:disabled {
            opacity: 0.42;
            cursor: default;
            box-shadow: none;
        }

        .text-bloc-create-secondary {
            border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
            background: transparent;
            color: var(--text-secondary);
        }
        #create-bloc-modal-backdrop {
            background: var(--bg-primary, #050505) !important;
        }
        #create-bloc-modal {
            background:
                radial-gradient(circle at 72% 12%, color-mix(in srgb, var(--primary-color, var(--accent-color)) 18%, transparent), transparent 34%),
                var(--bg-primary, #050505) !important;
            padding: calc(26px + env(safe-area-inset-top, 0px)) 16px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
            overflow-y: auto !important;
            -webkit-overflow-scrolling: touch;
        }
        .bytes-bloc-create-shell {
            width: 100%;
            max-width: 560px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 14px;
        }
        .bytes-bloc-create-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }
        .bytes-bloc-create-kicker {
            color: var(--text-secondary);
            font-size: 10px;
            font-weight: 900;
            letter-spacing: 0.16em;
            text-transform: uppercase;
        }
        .bytes-bloc-create-heading {
            margin-top: 3px;
            color: var(--text-primary, var(--text-color));
            font-size: 22px;
            line-height: 1.05;
            font-weight: 950;
        }
        .bytes-bloc-create-close {
            display: none !important;
            width: 38px;
            height: 38px;
            border-radius: 999px;
            border: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
            background: color-mix(in srgb, var(--surface-color, var(--bg-primary)) 86%, transparent);
            color: var(--text-primary, var(--text-color));
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        .bytes-bloc-create-preview {
            --create-bloc-accent: var(--primary-color, var(--accent-color));
            align-self: center;
            width: min(54vw, 220px);
            height: clamp(150px, 22dvh, 190px);
            min-height: 0;
            border-radius: 26px;
            padding: 10px;
            background:
                radial-gradient(circle at 78% 14%, color-mix(in srgb, var(--create-bloc-accent) 10%, transparent), transparent 38%),
                var(--surface-color, var(--bg-primary));
            border: 1px solid color-mix(in srgb, var(--text-color) 7%, transparent);
            color: var(--text-primary, var(--text-color));
            box-shadow:
                0 24px 55px color-mix(in srgb, var(--text-color) 13%, transparent),
                0 0 0 1px color-mix(in srgb, var(--create-bloc-accent) 10%, transparent);
            display: flex;
            flex-direction: column;
            gap: 10px;
            overflow: hidden;
            position: relative;
            transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
        }
        .bytes-bloc-create-preview.is-created {
            --create-bloc-accent: #22c55e;
            transform: scale(1.025);
            border-color: color-mix(in srgb, #22c55e 48%, transparent);
            box-shadow:
                0 24px 55px color-mix(in srgb, #22c55e 20%, transparent),
                0 0 0 1px color-mix(in srgb, #22c55e 28%, transparent);
        }
        .bytes-bloc-create-preview.is-created::before {
            content: "\f00c";
            font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
            font-weight: 900;
            position: absolute;
            top: 14px;
            right: 14px;
            z-index: 3;
            width: 30px;
            height: 30px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #22c55e;
            color: #ffffff;
            -webkit-text-fill-color: #ffffff;
            font-size: 13px;
            box-shadow: 0 12px 28px color-mix(in srgb, #22c55e 34%, transparent);
            animation: bytesBlocCreateCheckPop 520ms cubic-bezier(0.2, 0.9, 0.2, 1);
        }
        .bytes-bloc-create-preview::after {
            content: "";
            position: absolute;
            left: 22px;
            right: 22px;
            bottom: -1px;
            height: 3px;
            border-radius: 999px;
            background: var(--create-bloc-accent);
            box-shadow: 0 0 16px color-mix(in srgb, var(--create-bloc-accent) 40%, transparent);
        }
        .bytes-bloc-create-preview-thumb {
            flex: 1 1 auto;
            min-height: 0;
            border-radius: 20px;
            background:
                radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--create-bloc-accent) 14%, transparent), transparent 46%),
                color-mix(in srgb, var(--surface-color, var(--bg-primary)) 84%, var(--text-color) 8%);
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            position: relative;
        }
        .bytes-bloc-create-preview-thumb.has-image .bytes-bloc-create-preview-icon {
            opacity: 0;
            transform: scale(0.92);
        }
        .bytes-bloc-create-preview-icon {
            width: 40px;
            height: 40px;
            border-radius: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: var(--create-bloc-accent);
            color: #fff;
            box-shadow: 0 14px 30px color-mix(in srgb, var(--create-bloc-accent) 26%, transparent);
            transition: opacity 0.18s ease, transform 0.18s ease;
        }
        .bytes-bloc-create-preview-footer {
            flex: 0 0 auto;
            min-width: 0;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .bytes-bloc-create-preview-copy {
            min-width: 0;
            flex: 1 1 auto;
        }
        .bytes-bloc-create-preview-title {
            max-width: 100%;
            color: var(--text-primary, var(--text-color));
            font-size: 11px;
            line-height: 1.1;
            font-weight: 950;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .bytes-bloc-create-preview-desc {
            margin: 3px 0 0;
            max-width: 100%;
            color: var(--text-secondary);
            font-size: 9px;
            line-height: 1;
            font-weight: 850;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .bytes-bloc-create-preview-action {
            flex: 0 0 34px;
            width: 34px;
            height: 34px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: color-mix(in srgb, var(--create-bloc-accent) 16%, var(--surface-color, var(--bg-primary)));
            color: var(--create-bloc-accent);
            border: 1px solid color-mix(in srgb, var(--create-bloc-accent) 22%, transparent);
            font-size: 12px;
        }
        .bytes-bloc-create-panel {
            border-radius: 24px;
            padding: 15px;
            background: color-mix(in srgb, var(--surface-color, var(--bg-primary)) 92%, transparent);
            border: 1px solid color-mix(in srgb, var(--text-color) 9%, transparent);
            box-shadow: 0 22px 54px color-mix(in srgb, var(--text-color) 12%, transparent);
        }
        .bytes-bloc-create-field {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-bottom: 13px;
        }
        .bytes-bloc-create-field label {
            color: var(--text-secondary);
            font-size: 11px;
            font-weight: 900;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }
        .bytes-bloc-create-field input,
        .bytes-bloc-create-field select {
            width: 100%;
            padding: 14px 14px;
            border-radius: 16px;
            border: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
            background: color-mix(in srgb, var(--surface-color, var(--bg-primary)) 84%, transparent);
            color: var(--text-primary, var(--text-color));
            -webkit-text-fill-color: var(--text-primary, var(--text-color));
            font-size: 15px;
            outline: none;
        }
        .bytes-bloc-create-field input:focus,
        .bytes-bloc-create-field select:focus {
            border-color: color-mix(in srgb, var(--primary-color, var(--accent-color)) 44%, transparent);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color, var(--accent-color)) 14%, transparent);
        }
        .bytes-bloc-create-media-label {
            min-height: 50px;
            border-radius: 16px;
            border: 1px dashed color-mix(in srgb, var(--text-color) 16%, transparent);
            background: color-mix(in srgb, var(--surface-color, var(--bg-primary)) 80%, transparent);
            color: var(--text-primary, var(--text-color));
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-size: 13px;
            font-weight: 850;
            cursor: pointer;
        }
        .bytes-bloc-create-actions {
            display: grid;
            grid-template-columns: 1fr;
            gap: 10px;
        }
        .bytes-bloc-create-primary,
        .bytes-bloc-create-secondary {
            width: 100%;
            min-height: 52px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-size: 13px;
            font-weight: 950;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            cursor: pointer;
        }
        .bytes-bloc-create-primary {
            border: 0;
            background: var(--primary-color, var(--accent-color));
            color: #ffffff !important;
            -webkit-text-fill-color: #ffffff !important;
            box-shadow: 0 18px 42px color-mix(in srgb, var(--primary-color, var(--accent-color)) 24%, transparent);
        }
        .bytes-bloc-create-primary.is-success {
            background: #22c55e;
            box-shadow: 0 18px 42px color-mix(in srgb, #22c55e 28%, transparent);
        }
        .bytes-bloc-create-primary i,
        .bytes-bloc-create-primary span {
            color: #ffffff !important;
            -webkit-text-fill-color: #ffffff !important;
        }
        .mobile-bloc-builder {
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: calc(64px + env(safe-area-inset-bottom, 0px));
            z-index: 120500;
            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;
        }
        .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 88px;
        }
        .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__detail-back-btn[hidden],
        .mobile-bloc-builder__detail-delete-btn[hidden] {
            display: none !important;
        }
        .mobile-bloc-builder__detail-back-btn,
        .mobile-bloc-builder__detail-delete-btn {
            min-width: 32px !important;
            width: 32px;
            height: 32px;
            border-radius: 10px !important;
            border: 1px solid color-mix(in srgb, var(--text-primary, #111111) 10%, transparent) !important;
            background: var(--background-color, #ffffff) !important;
            font-size: 13px !important;
        }
        /* Not :last-child -- the empty owner-spacer after it still claims that
           slot -- so this needs its own explicit side the way the back button
           gets left:16px from :first-child. */
        .mobile-bloc-builder__detail-delete-btn {
            left: auto !important;
            right: 16px !important;
        }
        .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: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
            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 {
            height: clamp(158px, 22dvh, 188px);
            min-height: 0;
            aspect-ratio: auto;
            padding: 0;
            border: 1px solid color-mix(in srgb, var(--text-color) 8%, transparent);
            border-radius: 19px;
            background:
                radial-gradient(circle at 78% 10%, color-mix(in srgb, var(--primary-color, var(--accent-color)) 10%, transparent), transparent 35%),
                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)) 82%, transparent);
            box-shadow:
                0 14px 32px color-mix(in srgb, #000 18%, transparent),
                inset 0 1px 0 color-mix(in srgb, var(--text-color) 6%, transparent);
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: 1fr auto;
            gap: 0;
            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-row: 1 / -1;
            grid-column: 1;
            width: 100%;
            height: 100%;
            border-radius: 0;
            background:
                radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--primary-color, var(--accent-color)) 24%, transparent), transparent 44%),
                color-mix(in srgb, var(--surface-color, var(--bg-primary)) 80%, var(--text-color) 8%);
            font-size: 34px;
            color: color-mix(in srgb, var(--text-primary, var(--text-color)) 86%, transparent);
            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: block;
            position: absolute;
            inset: 0;
            background:
                linear-gradient(180deg, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0.10) 46%, rgba(0,0,0,0.74) 100%),
                radial-gradient(circle at 52% 12%, rgba(255,255,255,0.12), transparent 34%);
            pointer-events: 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-row: 2;
            grid-column: 1;
            position: relative;
            z-index: 2;
            padding: 0 12px 12px;
            gap: 6px;
            color: #ffffff;
            -webkit-text-fill-color: #ffffff;
        }
        .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: clamp(15px, 4.05vw, 18px);
            line-height: 1;
            font-weight: 950;
            letter-spacing: 0;
            -webkit-line-clamp: 2;
            text-shadow: 0 12px 28px rgba(0,0,0,0.45);
        }
        .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(255,255,255,0.72);
            -webkit-text-fill-color: rgba(255,255,255,0.72);
            font-size: 8.5px;
            letter-spacing: 0.11em;
        }
        .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: absolute;
            top: 9px;
            right: 9px;
            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(0,0,0,0.34);
            color: #ffffff;
            -webkit-text-fill-color: #ffffff;
            border: 1px solid rgba(255,255,255,0.14);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            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: fixed;
            left: 0;
            right: 0;
            bottom: calc(64px + env(safe-area-inset-bottom, 0px));
            padding: 12px 22px 16px;
            background: linear-gradient(180deg, transparent, var(--bg-primary) 32%);
            display: none;
            gap: 10px;
            z-index: 120501;
        }
        .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: 0;
            background: var(--primary-color, var(--accent-color));
            color: #ffffff;
        }
        @keyframes bytesBlocCreateCheckPop {
            0% { opacity: 0; transform: scale(0.72) rotate(-8deg); }
            55% { opacity: 1; transform: scale(1.08) rotate(0deg); }
            100% { opacity: 1; transform: scale(1) rotate(0deg); }
        }
        .bytes-bloc-create-secondary {
            border: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
            background: transparent;
            color: var(--text-secondary);
            -webkit-text-fill-color: var(--text-secondary);
        }
        body.text-blocs-modal-open {
            overflow: hidden !important;
            touch-action: none;
        }
        #text-blocs-modal #text-blocs-new-room-btn.text-blocs-new-room-button {
            min-width: 112px !important;
            height: 40px !important;
            padding: 0 12px !important;
            border-radius: 12px !important;
            border: 1px solid color-mix(in srgb, var(--text-primary) 12%, transparent) !important;
            background: #ffffff !important;
            color: #000000 !important;
            -webkit-text-fill-color: #000000 !important;
            box-shadow: 0 10px 24px rgba(255,255,255,0.12) !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 7px !important;
            font-size: 12px !important;
            font-weight: 950 !important;
            line-height: 1 !important;
            white-space: nowrap !important;
            appearance: none !important;
            -webkit-appearance: none !important;
        }
        #text-blocs-modal #text-blocs-new-room-btn.text-blocs-new-room-button i,
        #text-blocs-modal #text-blocs-new-room-btn.text-blocs-new-room-button span {
            color: #000000 !important;
            -webkit-text-fill-color: #000000 !important;
        }