:root {
    --bg-deep: #07111f;
    --bg-surface: rgba(9, 20, 34, 0.78);
    --bg-card: rgba(255, 255, 255, 0.06);
    --line: rgba(255, 255, 255, 0.1);
    --text: #eff5ff;
    --muted: #9eb2cb;
    --success: #7ef0c2;
    --danger: #ff8c7b;
    --shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
    --radius-lg: 24px;
    --radius-md: 18px;
    --radius-sm: 14px;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    min-height: 100%;
}

body {
    font-family: var(--font-body, "Avenir Next", "Segoe UI", sans-serif);
    font-size: calc(1rem * var(--font-scale, 1));
    color: var(--text);
    background:
        linear-gradient(180deg, rgba(3, 7, 15, 0.35), rgba(3, 7, 15, 0.5)),
        radial-gradient(circle at top left, color-mix(in srgb, var(--theme-primary) 24%, transparent), transparent 30%),
        radial-gradient(circle at bottom right, color-mix(in srgb, var(--theme-accent) 18%, transparent), transparent 28%),
        var(--custom-background-image),
        linear-gradient(180deg, var(--bg-deep), #02060e 65%);
    background-size: auto, auto, auto, cover, auto;
    background-position: center;
    background-attachment: fixed;
}

body,
button,
input,
select,
textarea {
    transition:
        background-color var(--motion-ms, 180ms) ease,
        border-color var(--motion-ms, 180ms) ease,
        color var(--motion-ms, 180ms) ease,
        box-shadow var(--motion-ms, 180ms) ease,
        transform var(--motion-ms, 180ms) ease,
        opacity var(--motion-ms, 180ms) ease;
}

body.motion-reduced *,
body.motion-reduced *::before,
body.motion-reduced *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

body.theme-medium-dark {
    --bg-deep: #17212c;
    --bg-card: rgba(255, 255, 255, 0.07);
    --muted: #b4c3d6;
}

body.theme-light-dark {
    --bg-deep: #334155;
    --bg-card: rgba(255, 255, 255, 0.12);
    --muted: #d3deee;
}

body.theme-light {
    --bg-deep: #eef4fb;
    --bg-card: rgba(255, 255, 255, 0.82);
    --line: rgba(40, 60, 90, 0.12);
    --text: #192534;
    --muted: #546579;
    --shadow: 0 24px 50px rgba(60, 78, 102, 0.14);
}

body.theme-light .topbar,
body.theme-light .card,
body.theme-light .mini-card,
body.theme-light .stat-card,
body.theme-light .short-card {
    backdrop-filter: blur(18px);
}

body.theme-light .topbar {
    background: rgba(255, 255, 255, 0.82);
    border-bottom-color: rgba(37, 58, 83, 0.08);
}

body.theme-light .status-pill,
body.theme-light .nav-link,
body.theme-light .quick-nav-link,
body.theme-light .conversation-item,
body.theme-light .notification-item,
body.theme-light .comment {
    background: rgba(255, 255, 255, 0.72);
}

body.font-pack-editorial {
    letter-spacing: 0.01em;
}

body.font-pack-warm {
    letter-spacing: 0.005em;
}

body.font-pack-legible {
    letter-spacing: 0.01em;
    line-height: 1.62;
}

body.density-compact .card {
    padding: 18px;
}

body.density-compact .mini-card,
body.density-compact .stat-card,
body.density-compact .short-card {
    padding: 14px;
}

body.density-spacious .card {
    padding: 24px;
}

body.density-spacious .mini-card,
body.density-spacious .stat-card,
body.density-spacious .short-card {
    padding: 18px;
}

body.high-contrast-mode {
    --line: rgba(255, 255, 255, 0.28);
}

body.low-data-mode {
    background-attachment: scroll;
}

body.low-data-mode .page-backdrop,
body.low-data-mode .page-orbit-grid {
    opacity: 0.45;
}

body.reading-focus-mode .sidebar,
body.reading-focus-mode .right-rail,
body.reading-focus-mode .topbar-scene-copy,
body.reading-focus-mode .page-orbit-grid {
    opacity: 0.55;
}

body.reading-focus-mode .app-layout {
    max-width: 1200px;
    margin-inline: auto;
}

body.avatar-style-soft-square .avatar-frame,
body.avatar-style-soft-square .avatar,
body.avatar-style-soft-square .avatar-photo-editor {
    border-radius: 24px !important;
}

body.avatar-style-framed .avatar-frame,
body.avatar-style-framed .avatar-photo-editor {
    padding: 4px;
    border-radius: 28px !important;
    background: linear-gradient(145deg, var(--primary-glow), transparent 70%), rgba(255, 255, 255, 0.05);
    border: 1px solid var(--surface-line);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 16px 30px rgba(0, 0, 0, 0.18);
}

body.background-style-grid {
    background-image:
        linear-gradient(180deg, rgba(3, 7, 15, 0.38), rgba(3, 7, 15, 0.55)),
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(180deg, var(--bg-deep), #02060e 65%);
    background-size: auto, 26px 26px, 26px 26px, auto;
}

body.background-style-linen {
    background-image:
        linear-gradient(180deg, rgba(3, 7, 15, 0.35), rgba(3, 7, 15, 0.5)),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.025), rgba(255,255,255,0.025) 2px, transparent 2px, transparent 6px),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.02) 2px, transparent 2px, transparent 7px),
        linear-gradient(180deg, var(--bg-deep), #02060e 65%);
}

body.background-style-dawn {
    background-image:
        linear-gradient(180deg, rgba(255, 215, 173, 0.12), rgba(3, 7, 15, 0.44)),
        radial-gradient(circle at top left, rgba(255, 164, 97, 0.18), transparent 32%),
        radial-gradient(circle at bottom right, rgba(122, 214, 255, 0.16), transparent 28%),
        linear-gradient(180deg, var(--bg-deep), #02060e 65%);
}

body.background-style-uploaded.has-custom-background {
    background-image:
        linear-gradient(180deg, rgba(3, 7, 15, 0.26), rgba(3, 7, 15, 0.42)),
        var(--custom-background-image),
        linear-gradient(180deg, var(--bg-deep), #02060e 65%);
}

body.theme-cycle-dawn .page-backdrop {
    background: linear-gradient(180deg, rgba(255, 211, 146, 0.08), rgba(255,255,255,0));
}

body.theme-cycle-night .page-backdrop {
    background: linear-gradient(180deg, rgba(76, 125, 255, 0.08), rgba(0,0,0,0.10));
}

body.theme-cycle-weekend .page-backdrop,
body.theme-cycle-sabbath .page-backdrop {
    background: linear-gradient(180deg, rgba(126, 240, 194, 0.08), rgba(0,0,0,0));
}

a {
    color: inherit;
    text-decoration: none;
}

img, video {
    max-width: 100%;
    display: block;
}

button,
.button-link {
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
    color: white;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 700;
    padding: 12px 18px;
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

button:hover,
.button-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 30px color-mix(in srgb, var(--theme-primary) 26%, transparent);
}

button:disabled,
.button-link[aria-disabled="true"] {
    opacity: 0.48;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

button.is-active {
    outline: 2px solid color-mix(in srgb, var(--theme-accent) 70%, white);
}

.ghost-button,
.ghost-link {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--line);
    box-shadow: none;
}

input,
textarea,
select {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, 0.22);
    color: var(--text);
    padding: 13px 15px;
    font: inherit;
    outline: none;
}

input[type="checkbox"],
input[type="radio"] {
    width: auto;
    max-width: none;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    accent-color: var(--theme-accent);
}

input::placeholder,
textarea::placeholder {
    color: var(--muted);
}

textarea {
    min-height: 110px;
    resize: vertical;
}

.page-backdrop {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(120deg, rgba(255, 255, 255, 0.02), transparent 35%),
        radial-gradient(circle at center, rgba(255, 255, 255, 0.02), transparent 45%);
}

.notification-dropdown {
    position: relative;
    display: inline-flex;
}

.quick-nav-dropdown {
    max-width: 100%;
}

.quick-nav-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.notification-toggle {
    white-space: nowrap;
    font: inherit;
}

.notification-dropdown-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 12px);
    width: min(420px, calc(100vw - 32px));
    max-height: 70vh;
    overflow: auto;
    z-index: 999;
}

.notification-dropdown-panel .card {
    margin: 0;
}

.notification-dropdown-panel .notification-list {
    max-height: 52vh;
    overflow: auto;
}

.notification-menu-card {
    min-width: min(420px, calc(100vw - 32px));
    box-shadow: var(--shadow-xl);
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px;
    backdrop-filter: blur(18px);
    background: rgba(4, 10, 20, 0.72);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.brand strong {
    display: block;
    font-size: 1rem;
}

.brand small {
    color: var(--muted);
}

.brand-mark {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    font-weight: 900;
    letter-spacing: 0.06em;
    background: linear-gradient(135deg, var(--theme-accent), var(--theme-primary));
    color: #08121d;
}

.topbar-status {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.quick-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.quick-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 999px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.quick-nav-link.is-active,
.quick-nav-link:hover {
    color: var(--text);
    border-color: color-mix(in srgb, var(--theme-primary) 40%, transparent);
    background: rgba(255, 255, 255, 0.08);
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.count-badge {
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--theme-accent);
    color: #09111a;
    font-size: 0.75rem;
    font-weight: 800;
}

.is-hidden {
    display: none !important;
}

.app-layout {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr) 320px;
    gap: 24px;
    padding: 24px;
    align-items: start;
}

.app-layout.game-focus-layout {
    grid-template-columns: minmax(0, 1fr);
    max-width: none;
    margin: 0 auto;
    padding: 12px 14px 24px;
}

.sidebar,
.right-rail {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.main-panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.main-panel.game-focus-main {
    max-width: 100%;
}

.card,
.mini-card,
.stat-card,
.short-card {
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: var(--shadow);
    backdrop-filter: blur(16px);
}

.card {
    border-radius: var(--radius-lg);
    padding: 20px;
}

.mini-card,
.stat-card,
.short-card {
    border-radius: var(--radius-md);
    padding: 16px;
}

.compact-card p {
    margin-bottom: 0;
}

.sidebar-profile {
    text-align: center;
}

.sidebar-profile-link {
    display: grid;
    gap: 10px;
}

.sidebar-name {
    font-size: 1.1rem;
    font-weight: 800;
}

.nav {
    display: grid;
    gap: 10px;
}

.nav-link {
    padding: 13px 15px;
    border-radius: 16px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid transparent;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.nav-link-form {
    display: block;
    margin: 0;
}

.nav-link-button {
    width: 100%;
    display: block;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.nav-link:hover,
.nav-link.is-active {
    color: white;
    background: rgba(255, 255, 255, 0.08);
    border-color: color-mix(in srgb, var(--theme-primary) 40%, transparent);
}

.hero-banner {
    position: relative;
    min-height: clamp(400px, 46vw, 480px);
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(135deg, color-mix(in srgb, var(--theme-secondary) 72%, #07111f), color-mix(in srgb, var(--theme-primary) 40%, #091828));
}

.composer-card {
    overflow: hidden;
}

.composer-form textarea {
    min-height: 140px;
    font-size: 1.02rem;
}

.composer-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.media-picker-button {
    min-width: 150px;
}

.composer-live-panel {
    display: grid;
    gap: 10px;
    margin-top: 2px;
}

.composer-short-panel {
    display: grid;
    gap: 12px;
    margin-top: 2px;
}

.composer-short-status {
    color: var(--text-soft);
    font-size: 0.94rem;
}

.composer-short-preview {
    width: min(100%, 320px);
    aspect-ratio: 9 / 16;
    border-radius: 22px;
    border: 1px solid var(--surface-line);
    background: rgba(2, 6, 14, 0.88);
    box-shadow: var(--shadow-lg);
}

.composer-live-panel .button-row {
    justify-content: flex-start;
}

.short-studio-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: 22px;
}

.short-studio-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(2, 6, 14, 0.72);
}

.short-studio-panel {
    position: relative;
    z-index: 1;
    width: min(100%, 780px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    gap: 18px;
    padding: 24px;
    max-height: calc(100dvh - 44px);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 30px;
    border: 1px solid var(--surface-line);
    background:
        radial-gradient(circle at top right, var(--hero-tint-alt), transparent 28%),
        radial-gradient(circle at top left, var(--hero-tint), transparent 30%),
        linear-gradient(145deg, color-mix(in srgb, var(--surface-2) 94%, transparent), color-mix(in srgb, var(--surface-1) 96%, transparent));
    box-shadow: var(--shadow-xl);
}

.short-studio-stage {
    position: relative;
    width: min(100%, 380px);
    height: min(60vh, 620px);
    min-height: 0;
    max-height: 100%;
    aspect-ratio: 9 / 16;
    display: grid;
    place-items: center;
    justify-self: center;
    border-radius: 26px;
    overflow: hidden;
    border: 1px solid var(--surface-line);
    background:
        radial-gradient(circle at top, rgba(255, 255, 255, 0.06), transparent 34%),
        rgba(2, 6, 14, 0.94);
}

.short-studio-camera {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    background: #020611;
}

.short-studio-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 28px;
    background:
        radial-gradient(circle at center, rgba(255, 255, 255, 0.08), transparent 42%),
        linear-gradient(145deg, rgba(7, 12, 22, 0.88), rgba(4, 8, 17, 0.94));
}

.short-studio-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.short-studio-panel > .button-row {
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding-top: 6px;
    padding-bottom: 2px;
    background: linear-gradient(180deg, rgba(7, 12, 22, 0), rgba(7, 12, 22, 0.92) 28%);
}

.short-studio-modal.has-camera-stream .short-studio-panel {
    gap: 14px;
}

.short-studio-modal.has-camera-stream .short-studio-stage {
    width: min(100%, 320px);
    height: min(46vh, 430px);
    max-height: calc(100dvh - 290px);
}

.banner-slide {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(240px, 0.75fr);
    gap: 24px;
    align-items: center;
    padding: 34px;
    opacity: 0;
    transform: scale(1.02);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.banner-copy {
    padding-right: 14px;
    padding-bottom: 17px;
}

.banner-slide.is-active {
    opacity: 1;
    transform: scale(1);
}

.banner-copy h1 {
    margin: 10px 0 12px;
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.12;
}

.banner-copy p {
    margin: 0;
    max-width: 42rem;
    color: #dce7f5;
    font-size: 1.02rem;
}

.banner-image {
    width: 100%;
    height: 240px;
    object-fit: cover;
    border-radius: 20px;
}

.eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--theme-accent);
}

.grid-two-up,
.grid-three-up {
    display: grid;
    gap: 18px;
}

.grid-two-up {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-three-up {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stack-form,
.compact-form {
    display: grid;
    gap: 14px;
}

.stack-form + .admin-card-grid,
.stack-form + .button-row,
.stack-form + .muted {
    margin-top: 18px;
}

.form-row,
.button-row,
.badge-row,
.stats-row,
.section-head,
.post-head,
.thread-header,
.profile-summary,
.post-user-wrap,
.comment-head,
.message-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wrap-row {
    flex-wrap: wrap;
}

.section-head {
    justify-content: space-between;
    margin-bottom: 14px;
}

.section-head h1,
.section-head h2,
.section-head h3,
.profile-copy h1,
.auth-card h1 {
    margin: 0;
}

.muted {
    color: var(--muted);
}

.text-danger {
    color: var(--danger);
}

.text-success {
    color: var(--success);
}

.text-link {
    color: var(--theme-accent);
}

.avatar,
.avatar-image,
.avatar-frame {
    width: 44px;
    height: 44px;
    border-radius: 999px;
}

.avatar-image {
    object-fit: cover;
}

.avatar-frame {
    display: inline-flex;
    overflow: hidden;
    flex: 0 0 auto;
}

.avatar-frame .avatar-image {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: inherit;
    object-fit: cover;
    transform: scale(var(--avatar-zoom, 1));
    transform-origin: var(--avatar-focus-x, 50%) var(--avatar-focus-y, 50%);
}

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    color: #07111f;
    background: linear-gradient(135deg, var(--theme-accent), var(--theme-primary));
}

.avatar-large {
    width: 78px;
    height: 78px;
    border-radius: 22px;
    margin: 0 auto 12px;
}

.avatar-xl {
    width: 112px;
    height: 112px;
    border-radius: 28px;
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 800;
    color: #08111a;
    background: rgba(255, 255, 255, 0.78);
}

.badge-verified {
    background: var(--success);
}

.badge-verification {
    color: #f7fbff;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.badge-verify-l1 {
    background: linear-gradient(135deg, #19b56a, #7be2a8);
    color: #04150d;
}

.badge-verify-l2 {
    background: linear-gradient(135deg, #f0b34b, #ffd98a);
    color: #2a1600;
}

.badge-verify-l3 {
    background: linear-gradient(135deg, rgba(123, 147, 184, 0.78), rgba(90, 110, 144, 0.9));
}

.badge-admin {
    background: var(--theme-accent);
}

.badge-danger {
    background: var(--danger);
}

.badge-prayer {
    color: #f7fff9;
    background: linear-gradient(135deg, #3c9168, #6fd39f);
}

.profile-summary {
    align-items: flex-start;
}

.profile-photo-trigger {
    position: relative;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
}

.profile-photo-zoom-hint {
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(3, 8, 18, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #f8fbff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.profile-copy {
    flex: 1;
    display: grid;
    gap: 12px;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.stat-card {
    flex: 1;
    display: grid;
    justify-items: start;
    gap: 4px;
}

.stat-value {
    font-size: 1.6rem;
    font-weight: 900;
}

.stat-label {
    color: var(--muted);
}

.profile-stats-row {
    margin-top: 12px;
}

.spotlight-card {
    text-align: left;
}

.prayer-wall-hero,
.prayer-composer-card,
.prayer-stream-card,
.prayer-guide-card,
.prayer-guest-card {
    position: relative;
    overflow: hidden;
}

.prayer-wall-hero {
    background:
        radial-gradient(circle at top right, rgba(111, 211, 159, 0.18), transparent 30%),
        radial-gradient(circle at bottom left, rgba(94, 155, 255, 0.12), transparent 26%),
        linear-gradient(145deg, rgba(9, 21, 18, 0.96), rgba(11, 27, 23, 0.92));
    border: 1px solid rgba(111, 211, 159, 0.16);
}

.prayer-eyebrow {
    color: #9ce9c0;
}

.prayer-wall-stats {
    margin-top: 14px;
}

.prayer-composer-card,
.prayer-stream-card,
.prayer-guide-card {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.03)),
        linear-gradient(155deg, rgba(9, 21, 18, 0.94), rgba(11, 27, 23, 0.92));
    border: 1px solid rgba(111, 211, 159, 0.14);
    box-shadow:
        0 22px 52px rgba(5, 15, 11, 0.24),
        inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.composer-prayer-panel {
    background:
        linear-gradient(180deg, rgba(111, 211, 159, 0.08), rgba(111, 211, 159, 0.03)),
        rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(111, 211, 159, 0.14);
}

.post-stream {
    display: grid;
    gap: 18px;
}

.thread-focus-card,
.thread-focus-stream {
    max-width: 920px;
    margin-inline: auto;
}

.post-card {
    display: grid;
    gap: 16px;
}

.post-card.is-prayer-post {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.03)),
        linear-gradient(155deg, rgba(7, 22, 18, 0.94), rgba(11, 29, 24, 0.9));
    border: 1px solid rgba(111, 211, 159, 0.16);
    box-shadow:
        0 18px 44px rgba(5, 15, 11, 0.24),
        inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.post-card.is-prayer-post::before {
    content: "";
    position: absolute;
    inset: -18% auto auto -8%;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(111, 211, 159, 0.14), transparent 72%);
    pointer-events: none;
}

.post-user-wrap {
    flex: 1;
    display: grid;
    gap: 10px;
}

.post-user-link {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: inherit;
    text-decoration: none;
}

.post-head-actions {
    display: grid;
    justify-items: end;
    gap: 8px;
}

.post-head-utility-row {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

.post-head-copy,
.comment-meta-stack,
.edit-log-block,
.edit-log-item,
.inline-edit-form {
    display: grid;
    gap: 8px;
}

.comment-author-row,
.comment-thread-toolbar,
.comment-sort-form,
.comment-sort-pill {
    display: flex;
    align-items: center;
    gap: 10px;
}

.edit-log-disclosure {
    display: grid;
    gap: 10px;
}

.edit-log-toggle {
    list-style: none;
    justify-self: end;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}

.edit-log-toggle:hover,
.edit-log-disclosure[open] > .edit-log-toggle {
    color: var(--text);
}

.edit-log-toggle::-webkit-details-marker {
    display: none;
}

.post-head-copy,
.comment-meta-stack {
    min-width: 0;
}

.comment-meta-stack {
    justify-items: start;
}

.comment-author-row {
    flex-wrap: wrap;
}

.edit-log-block {
    margin-top: 10px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.edit-log-title,
.edit-log-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.edit-log-item {
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.edit-log-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-size: 0.86rem;
}

.edit-log-diff {
    display: grid;
    gap: 6px;
}

.edit-log-diff p {
    margin: 0;
    white-space: pre-wrap;
    line-height: 1.5;
}

.inline-edit-card {
    position: relative;
}

.inline-edit-card summary {
    list-style: none;
    cursor: pointer;
    padding: 9px 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 700;
}

.inline-edit-card summary::-webkit-details-marker {
    display: none;
}

.inline-edit-form {
    margin-top: 10px;
    min-width: min(420px, calc(100vw - 72px));
    padding: 14px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: rgba(8, 14, 26, 0.96);
    box-shadow: var(--shadow);
}

.inline-edit-form textarea {
    min-height: 104px;
    resize: vertical;
}

.comment-delete-form {
    margin: 0;
}

.flag-menu-inline {
    justify-self: end;
}

.post-content {
    white-space: pre-wrap;
    line-height: 1.65;
}

.post-media,
.short-video {
    width: 100%;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.35);
}

.post-media {
    max-height: 520px;
    object-fit: cover;
}

.post-video-shell {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(circle at top, rgba(255, 255, 255, 0.08), transparent 46%),
        rgba(0, 0, 0, 0.62);
    box-sizing: border-box;
    overflow: hidden;
}

.post-media-video {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: min(68vh, 500px);
    margin: 0 auto;
    border: 0;
    border-radius: 16px;
    background: #000;
    object-fit: contain;
    box-shadow: none;
}

.live-post-link {
    width: fit-content;
}

.liked-context {
    background: rgba(255, 255, 255, 0.04);
}

.post-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    color: var(--muted);
    font-size: 0.95rem;
}

.comment-thread-toolbar {
    justify-content: flex-end;
    width: 100%;
}

.comment-thread-sort-copy {
    display: grid;
    gap: 4px;
}

.comment-sort-form {
    justify-content: flex-end;
}

.comment-sort-form-compact {
    gap: 8px;
}

.comment-sort-label,
.comment-sort-pill-label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

.comment-sort-form-compact select,
.comment-sort-pill {
    min-height: 34px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.045);
    color: var(--text);
    font-size: 0.82rem;
    box-shadow: none;
}

.comment-sort-form-compact select {
    min-width: 148px;
    padding-right: 28px;
}

.comment-sort-pill {
    gap: 8px;
    justify-content: flex-end;
}

.comment-sort-pill strong {
    font-size: 0.82rem;
    font-weight: 700;
}

.post-edit-log-disclosure {
    margin-top: -4px;
}

.comment-edit-log-disclosure {
    margin-top: -2px;
}

.post-tip-box {
    display: grid;
    gap: 14px;
    padding: 16px;
    border-radius: 20px;
    background:
        linear-gradient(135deg, rgba(21, 199, 182, 0.1), rgba(247, 183, 51, 0.08)),
        rgba(255, 255, 255, 0.03);
    border: 1px solid color-mix(in srgb, var(--theme-primary) 24%, var(--line));
}

.post-tip-head,
.post-tip-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.post-tip-head p {
    margin: 6px 0 0;
}

.post-tip-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.tip-support-chip {
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--theme-accent);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.wallet-address {
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px dashed rgba(255, 255, 255, 0.16);
    color: var(--theme-accent);
    font-family: "SFMono-Regular", "Menlo", monospace;
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.post-tip-form {
    gap: 12px;
}

.post-reaction-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.reaction-emoji {
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 999px;
    font-size: 1.2rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--line);
    box-shadow: none;
}

.reaction-pill {
    width: auto;
    min-width: 74px;
    padding: 0 14px;
    gap: 8px;
}

.reaction-emoji.is-active {
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
}

.reply-toggle-button {
    padding-inline: 16px;
}

.flag-menu {
    position: relative;
}

.flag-menu summary {
    list-style: none;
    cursor: pointer;
    font-size: 1.15rem;
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--line);
}

.flag-menu summary::-webkit-details-marker {
    display: none;
}

.flag-menu-list {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 220px;
    display: grid;
    gap: 6px;
    padding: 10px;
    border-radius: 16px;
    background: rgba(8, 14, 26, 0.96);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    z-index: 5;
}

.flag-menu-form {
    margin: 0;
}

.flag-menu-item {
    width: 100%;
    justify-content: flex-start;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 10px 12px;
    box-shadow: none;
}

.link-preview-card {
    display: grid;
    gap: 6px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--theme-primary) 28%, var(--line));
    background: rgba(255, 255, 255, 0.04);
}

.link-preview-card.is-muted {
    border-style: dashed;
}

.comments,
.checkin-list,
.notification-list,
.short-stack {
    display: grid;
    gap: 12px;
}

.comment {
    padding: 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.05);
    scroll-margin-top: 108px;
    transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.comment-thread-item {
    display: grid;
    gap: 10px;
}

.comment:target,
.comment.is-refresh-highlight {
    background: rgba(255, 180, 94, 0.12);
    border-color: rgba(255, 180, 94, 0.38);
    box-shadow:
        0 0 0 1px rgba(255, 180, 94, 0.18),
        0 16px 34px rgba(0, 0, 0, 0.16);
}

.comment-thread-item.is-nested {
    background: rgba(255, 255, 255, 0.03);
}

.comment-head {
    align-items: flex-start;
    justify-content: space-between;
}

.comment-body {
    margin-top: 8px;
    line-height: 1.55;
}

.comment-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    align-items: center;
}

.comment-reaction-pill {
    min-width: 64px;
    width: auto;
    height: 38px;
    padding: 0 12px;
    font-size: 1rem;
}

.comment-hide-button {
    width: 34px;
    height: 34px;
    padding: 0;
    font-size: 1rem;
}

.comment-reply-button {
    padding-inline: 14px;
}

.comment-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
}

.comment-reply-form {
    margin-top: 2px;
}

.comment-children {
    display: grid;
    gap: 12px;
    margin-top: 4px;
    padding-left: 16px;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.short-link {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.short-grid,
.admin-card-grid {
    display: grid;
    gap: 16px;
}

.short-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.short-copy {
    margin-top: 12px;
    display: grid;
    gap: 8px;
}

.notification-item {
    padding: 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.notification-item.is-unread {
    border-color: color-mix(in srgb, var(--theme-accent) 50%, transparent);
    background: rgba(255, 255, 255, 0.06);
}

.notification-copy {
    line-height: 1.5;
}

.notification-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    color: var(--muted);
}

.messages-layout {
    display: grid;
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.conversation-list,
.thread-panel {
    min-height: 600px;
}

.conversation-list-shell,
.conversation-list {
    display: grid;
    gap: 12px;
}

.conversation-list-shell {
    align-content: start;
}

.conversation-section-title {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--muted);
}

.conversation-search {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
}

.conversation-search-results {
    display: grid;
    gap: 10px;
}

.conversation-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid transparent;
    min-width: 0;
}

.conversation-avatar-wrap,
.conversation-copy,
.conversation-name-row,
.thread-partner,
.message-status-row {
    display: flex;
    gap: 10px;
}

.conversation-avatar-wrap,
.thread-partner {
    align-items: center;
}

.conversation-avatar-wrap {
    min-width: 0;
    width: 100%;
}

.conversation-copy {
    min-width: 0;
    flex: 1;
    flex-direction: column;
}

.conversation-name-row {
    align-items: center;
    flex-wrap: wrap;
}

.conversation-item.is-active,
.conversation-item:hover {
    border-color: color-mix(in srgb, var(--theme-primary) 40%, transparent);
    background: rgba(255, 255, 255, 0.07);
}

.conversation-name {
    font-weight: 800;
}

.conversation-preview {
    color: var(--muted);
    font-size: 0.94rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.thread-panel {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 14px;
    min-width: 0;
}

.message-thread {
    display: grid;
    gap: 12px;
    align-content: start;
    min-height: 420px;
    max-height: 620px;
    overflow: auto;
    padding: 8px 6px 8px 2px;
    min-width: 0;
}

.message-bubble {
    position: relative;
    width: min(78%, 540px);
    padding: 14px 52px 14px 16px;
    border-radius: 22px 22px 22px 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.message-bubble.is-own {
    margin-left: auto;
    border-radius: 22px 22px 8px 22px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--theme-primary) 26%, transparent), rgba(255, 255, 255, 0.06));
}

.message-meta {
    justify-content: space-between;
    color: var(--muted);
    font-size: 0.82rem;
    margin-bottom: 8px;
}

.message-copy {
    line-height: 1.55;
    white-space: pre-wrap;
}

.message-copy-deleted {
    color: var(--muted);
    font-style: italic;
}

.message-author-row,
.thread-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.message-manage-menu {
    position: absolute;
    top: 10px;
    right: 10px;
}

.message-manage-toggle {
    list-style: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    cursor: pointer;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(236, 246, 255, 0.88);
    font-size: 0.95rem;
    line-height: 1;
}

.message-manage-toggle::-webkit-details-marker {
    display: none;
}

.message-manage-popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    display: grid;
    gap: 6px;
    padding: 10px;
    border-radius: 16px;
    background: rgba(8, 14, 26, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: var(--shadow);
    z-index: 6;
}

.message-manage-form {
    margin: 0;
}

.message-manage-action {
    width: 100%;
    justify-content: flex-start;
}

.message-status-row {
    margin-top: 8px;
    align-items: center;
    justify-content: flex-end;
    color: var(--muted);
    font-size: 0.8rem;
}

.mail-indicator {
    color: white;
    font-size: 0.9rem;
    margin-left: auto;
}

.mail-indicator.is-unread {
    color: #60a5fa;
}

.message-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
}

.floating-message-launcher {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 52;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--theme-primary) 34%, rgba(255, 255, 255, 0.12));
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--theme-primary) 26%, transparent), transparent 54%),
        linear-gradient(145deg, color-mix(in srgb, var(--surface-2) 94%, transparent), color-mix(in srgb, var(--surface-1) 96%, transparent));
    color: var(--text-main);
    box-shadow: var(--shadow-xl);
    backdrop-filter: blur(18px);
}

.floating-message-launcher-label {
    font-weight: 800;
}

.floating-message-shell {
    position: fixed;
    inset: 0;
    z-index: 64;
    display: grid;
    align-items: end;
    padding: 24px;
}

.floating-message-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(2, 6, 14, 0.68);
}

.floating-message-panel {
    position: relative;
    z-index: 1;
    width: min(1040px, 100%);
    max-height: min(82dvh, 760px);
    margin-left: auto;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 18px;
    padding: 22px;
    border-radius: 30px;
    border: 1px solid var(--surface-line);
    background:
        radial-gradient(circle at top right, var(--hero-tint-alt), transparent 32%),
        radial-gradient(circle at top left, var(--hero-tint), transparent 30%),
        linear-gradient(145deg, color-mix(in srgb, var(--surface-2) 94%, transparent), color-mix(in srgb, var(--surface-1) 96%, transparent));
    box-shadow: var(--shadow-xl);
}

.floating-message-panel-head,
.floating-message-inbox-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.floating-message-panel-body,
.floating-message-layout,
.floating-message-inbox,
.floating-message-thread {
    min-height: 0;
}

.floating-message-layout {
    height: 100%;
    display: grid;
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    gap: 16px;
}

.floating-message-inbox,
.floating-message-thread {
    display: grid;
    gap: 14px;
}

.floating-message-conversation-list {
    min-height: 0;
    overflow: auto;
    padding-right: 4px;
}

.floating-message-thread .thread-panel-future {
    height: 100%;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.floating-message-thread .message-thread {
    min-height: 0;
    max-height: none;
    height: 100%;
}

body.floating-message-open {
    overflow: hidden;
}

.live-post-page {
    display: grid;
    gap: 18px;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at top left, rgba(80, 255, 232, 0.12), transparent 24%),
        radial-gradient(circle at top right, rgba(92, 140, 255, 0.12), transparent 28%);
}

.live-room-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(320px, 0.92fr);
    gap: 18px;
    align-items: start;
}

.live-room-stage,
.live-chat-panel {
    display: grid;
    gap: 14px;
}

.live-page-head {
    align-items: flex-start;
}

.live-feed-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(280px, 360px);
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 6px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
}

.live-feed-strip > * {
    scroll-snap-align: start;
}

.live-hub-hero {
    display: grid;
    gap: 18px;
}

.live-launch-form textarea {
    min-height: 120px;
}

[data-live-now-list],
.live-card-grid {
    display: grid;
    gap: 14px;
}

.live-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.live-summary-card {
    display: grid;
    gap: 12px;
    padding: 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.live-summary-card:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--theme-primary) 40%, transparent);
    background: rgba(255, 255, 255, 0.06);
}

.live-summary-head,
.live-summary-user,
.live-summary-meta {
    display: flex;
    gap: 10px;
}

.live-summary-head {
    align-items: flex-start;
    justify-content: space-between;
}

.live-summary-user {
    align-items: center;
}

.live-summary-title {
    font-weight: 800;
    line-height: 1.4;
}

.live-summary-meta {
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 0.9rem;
}

.live-video-shell {
    --live-viewport-height: 100svh;
    --live-stage-top-offset: 84px;
    --live-stage-bottom-offset: 148px;
    --live-fullscreen-chat-bottom-offset: 92px;
    position: relative;
    isolation: isolate;
    border-radius: 24px;
    overflow: hidden;
    background:
        radial-gradient(circle at top, rgba(40, 197, 183, 0.16), transparent 24%),
        linear-gradient(160deg, rgba(5, 14, 32, 0.98), rgba(2, 8, 16, 0.92));
    border: 1px solid rgba(107, 219, 255, 0.18);
    min-height: clamp(520px, 78vh, 900px);
    box-shadow:
        0 28px 90px rgba(2, 8, 16, 0.48),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.live-video-shell.is-live-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 1200;
    min-height: var(--live-viewport-height, 100svh);
    height: var(--live-viewport-height, 100svh);
    border-radius: 0;
    border: none;
    box-shadow: none;
}

.live-video-shell.is-live-fullscreen .live-stage-box-grid {
    inset: var(--live-stage-top-offset, 86px) 18px var(--live-stage-bottom-offset, 124px);
}

.live-video-shell.is-live-fullscreen .live-stage-hud {
    top: max(16px, env(safe-area-inset-top));
}

.live-video-shell.is-live-fullscreen .live-overlay-bar {
    left: 18px;
    right: 18px;
    bottom: max(14px, env(safe-area-inset-bottom));
}

.live-fullscreen-exit {
    position: absolute;
    top: max(16px, env(safe-area-inset-top));
    right: max(16px, env(safe-area-inset-right));
    z-index: 7;
}

.live-stage-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(117, 229, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(117, 229, 255, 0.08) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.62), transparent 78%);
    pointer-events: none;
    z-index: 0;
}

.live-stage-hud {
    position: absolute;
    top: 18px;
    left: 18px;
    right: 18px;
    z-index: 4;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.live-stage-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(5, 16, 31, 0.74);
    border: 1px solid rgba(117, 229, 255, 0.18);
    color: rgba(235, 247, 255, 0.92);
    backdrop-filter: blur(12px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.live-stage-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: rgba(117, 229, 255, 0.72);
    box-shadow: 0 0 0 6px rgba(117, 229, 255, 0.14);
}

.live-stage-dot.is-live {
    background: #ff5f79;
    box-shadow: 0 0 0 6px rgba(255, 95, 121, 0.14), 0 0 18px rgba(255, 95, 121, 0.48);
}

.live-stage-ribbon {
    position: absolute;
    top: 22px;
    right: 18px;
    z-index: 4;
    padding: 7px 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(14, 43, 80, 0.88), rgba(9, 24, 47, 0.76));
    border: 1px solid rgba(117, 229, 255, 0.16);
    color: rgba(214, 240, 255, 0.88);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.72rem;
    font-weight: 800;
}

.live-video-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    text-align: center;
    color: rgba(255, 255, 255, 0.84);
    font-weight: 700;
    letter-spacing: 0.01em;
    background:
        radial-gradient(circle at top, rgba(80, 255, 232, 0.14), transparent 32%),
        linear-gradient(180deg, rgba(6, 18, 38, 0.76), rgba(1, 6, 14, 0.92));
    z-index: 1;
}

.live-join-ticker {
    position: absolute;
    top: 62px;
    left: 18px;
    right: 18px;
    z-index: 5;
    min-height: 38px;
    overflow: hidden;
    pointer-events: none;
}

.live-join-banner {
    position: absolute;
    right: -28rem;
    top: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    color: rgba(248, 252, 255, 0.96);
    background: linear-gradient(90deg, rgba(10, 33, 61, 0.94), rgba(17, 86, 118, 0.88));
    border: 1px solid rgba(117, 229, 255, 0.18);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
    animation: liveJoinTicker 6.2s linear forwards;
}

.live-chat-overlay {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 96px;
    z-index: 5;
    min-height: 156px;
    overflow: hidden;
    pointer-events: none;
}

.live-chat-banner {
    position: absolute;
    right: -42rem;
    bottom: calc(var(--live-chat-lane, 0) * 52px);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: min(34rem, calc(100vw - 48px));
    padding: 10px 16px;
    border-radius: 999px;
    color: rgba(246, 251, 255, 0.96);
    background: linear-gradient(90deg, rgba(9, 20, 38, 0.96), rgba(19, 65, 91, 0.9));
    border: 1px solid rgba(117, 229, 255, 0.16);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(16px);
    animation: liveChatTicker 8.8s linear forwards;
}

.live-chat-banner strong {
    color: rgba(129, 238, 255, 0.98);
    font-size: 0.82rem;
    white-space: nowrap;
}

.live-chat-banner span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.84rem;
}

@keyframes liveJoinTicker {
    0% {
        transform: translateX(0);
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    100% {
        transform: translateX(-150vw);
        opacity: 0.98;
    }
}

@keyframes liveChatTicker {
    0% {
        transform: translateX(0);
        opacity: 0;
    }
    6% {
        opacity: 1;
    }
    100% {
        transform: translateX(-165vw);
        opacity: 0.98;
    }
}

.live-stage-box-grid {
    position: absolute;
    inset: var(--live-stage-top-offset, 84px) 18px var(--live-stage-bottom-offset, 148px);
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: minmax(56px, 1fr);
    gap: 14px;
    grid-auto-flow: row dense;
    align-content: stretch;
    align-items: stretch;
}

.live-stage-box {
    display: grid;
    grid-template-rows: minmax(150px, 1fr) auto;
    gap: 10px;
    padding: 10px;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
        linear-gradient(160deg, rgba(6, 18, 38, 0.92), rgba(7, 15, 28, 0.94));
    border: 1px solid rgba(117, 229, 255, 0.12);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
    grid-column: span 4;
    grid-row: span 3;
    min-height: 0;
    overflow: hidden;
}

.live-stage-box.is-selected {
    position: relative;
    z-index: 7;
    border-color: rgba(247, 183, 51, 0.42);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.04),
        0 0 0 2px rgba(247, 183, 51, 0.12);
}

.live-stage-box.is-sortable {
    cursor: grab;
}

.live-stage-box.is-sortable:active,
.live-stage-box.is-sorting {
    cursor: grabbing;
}

.live-stage-box.is-sorting {
    opacity: 0.72;
    transform: scale(0.985);
}

.live-stage-box.is-drop-target {
    border-color: rgba(117, 229, 255, 0.42);
    box-shadow:
        inset 0 0 0 1px rgba(117, 229, 255, 0.28),
        0 0 0 2px rgba(117, 229, 255, 0.16);
}

.live-stage-box.is-featured {
    grid-column: span 8;
    grid-row: span 6;
}

.live-stage-box-grid.has-two-boxes {
    grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.92fr);
    grid-auto-rows: minmax(0, 1fr);
}

.live-stage-box-grid.has-two-boxes .live-stage-box {
    grid-column: auto;
    grid-row: 1;
    min-height: 0;
}

.live-stage-box-grid.has-two-boxes .live-stage-box.is-featured {
    grid-column: 1;
}

.live-stage-box-grid.has-two-boxes .live-stage-box:not(.is-featured) {
    grid-column: 2;
}

.live-stage-box-grid.layout-conversation.has-two-boxes,
.live-stage-box-grid.layout-grid.has-two-boxes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.live-stage-box-grid.layout-conversation.has-two-boxes .live-stage-box,
.live-stage-box-grid.layout-grid.has-two-boxes .live-stage-box {
    grid-column: auto;
    grid-row: 1;
}

.live-stage-box-grid.layout-conversation.has-two-boxes .live-stage-box.is-featured,
.live-stage-box-grid.layout-grid.has-two-boxes .live-stage-box.is-featured {
    grid-column: auto;
}

.live-stage-box-grid.has-three-boxes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
}

.live-stage-box-grid.has-three-boxes .live-stage-box {
    grid-column: auto;
    grid-row: auto;
}

.live-stage-box-grid.has-three-boxes .live-stage-box.is-featured {
    grid-column: 1 / -1;
    grid-row: auto;
}

.live-stage-box-grid.has-four-boxes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
}

.live-stage-box-grid.has-four-boxes .live-stage-box,
.live-stage-box-grid.has-four-boxes .live-stage-box.is-featured {
    grid-column: auto;
    grid-row: auto;
}

.live-stage-box-grid.has-five-plus-boxes .live-stage-box,
.live-stage-box-grid.has-five-plus-boxes .live-stage-box.is-featured {
    grid-column: span 4;
    grid-row: span 3;
}

.live-stage-box-grid.layout-conversation.has-multiple-boxes:not(.has-two-boxes) .live-stage-box,
.live-stage-box-grid.layout-grid.has-multiple-boxes:not(.has-two-boxes) .live-stage-box,
.live-stage-box-grid.layout-conversation.has-multiple-boxes:not(.has-two-boxes) .live-stage-box.is-featured,
.live-stage-box-grid.layout-grid.has-multiple-boxes:not(.has-two-boxes) .live-stage-box.is-featured {
    grid-column: span 6;
    grid-row: span 4;
}

.live-stage-box-grid.layout-grid .live-stage-box.is-featured {
    grid-column: span 6;
    grid-row: span 4;
}

.live-stage-box-grid.has-three-boxes.layout-conversation .live-stage-box,
.live-stage-box-grid.has-three-boxes.layout-grid .live-stage-box {
    grid-column: auto;
    grid-row: auto;
}

.live-stage-box-grid.has-three-boxes.layout-conversation .live-stage-box.is-featured,
.live-stage-box-grid.has-three-boxes.layout-grid .live-stage-box.is-featured {
    grid-column: 1 / -1;
    grid-row: auto;
}

.live-stage-box-grid.has-four-boxes.layout-conversation .live-stage-box,
.live-stage-box-grid.has-four-boxes.layout-grid .live-stage-box,
.live-stage-box-grid.has-four-boxes.layout-conversation .live-stage-box.is-featured,
.live-stage-box-grid.has-four-boxes.layout-grid .live-stage-box.is-featured {
    grid-column: auto;
    grid-row: auto;
}

.live-stage-box-grid.has-single-box .live-stage-box {
    grid-column: 1 / -1;
    grid-row: span 8;
}

.live-stage-box.is-host {
    border-color: rgba(117, 229, 255, 0.28);
}

.live-stage-box.is-local {
    border-color: rgba(247, 183, 51, 0.3);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.04),
        0 0 0 1px rgba(247, 183, 51, 0.12);
}

.live-stage-box-video-shell {
    position: relative;
    min-height: 0;
    border-radius: 18px;
    overflow: hidden;
    background:
        radial-gradient(circle at top, rgba(80, 255, 232, 0.12), transparent 40%),
        linear-gradient(180deg, rgba(4, 11, 24, 0.9), rgba(1, 5, 12, 0.96));
}

.live-stage-box.is-featured .live-stage-box-video-shell,
.live-stage-box-grid.has-single-box .live-stage-box-video-shell {
    min-height: 280px;
}

.live-stage-box-grid.layout-conversation.has-two-boxes .live-stage-box-video-shell,
.live-stage-box-grid.layout-grid.has-two-boxes .live-stage-box-video-shell {
    min-height: 220px;
}

.live-stage-box.is-compact {
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    padding: 8px;
}

.live-stage-box.is-compact .live-stage-box-video-shell {
    min-height: 0;
    border-radius: 16px;
}

.live-stage-box.is-compact .live-stage-box-topline {
    top: 8px;
    left: 8px;
    right: 8px;
}

.live-stage-box.is-compact .live-stage-box-topline-copy {
    gap: 6px;
}

.live-stage-box.is-compact .live-stage-pill {
    padding: 5px 8px;
    font-size: 0.72rem;
}

.live-stage-box-video,
.live-stage-box-fallback {
    width: 100%;
    height: 100%;
}

.live-stage-box-video {
    background: rgba(0, 0, 0, 0.76);
    object-fit: cover;
    object-position: center 18%;
}

.live-stage-box-topline {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.live-stage-box-topline-copy {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.live-stage-box-corner {
    position: relative;
    margin-left: auto;
    display: flex;
    align-items: flex-start;
}

.live-stage-box-menu {
    position: relative;
}

.live-stage-box-menu-toggle {
    min-width: 42px;
    min-height: 42px;
    padding-inline: 12px;
    border-radius: 999px;
    font-size: 1.15rem;
    line-height: 1;
}

.live-stage-box-menu summary::-webkit-details-marker {
    display: none;
}

.live-stage-box-menu[open] .live-stage-box-menu-toggle,
.live-stage-box.is-selected .live-stage-box-menu-toggle,
.live-stage-box:hover .live-stage-box-menu-toggle {
    border-color: rgba(247, 183, 51, 0.28);
    background: rgba(6, 18, 32, 0.9);
}

.live-stage-box-menu-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 6;
    width: min(320px, calc(100vw - 40px));
    display: grid;
    gap: 10px;
    padding: 14px;
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
        linear-gradient(145deg, rgba(6, 18, 38, 0.95), rgba(7, 14, 27, 0.96));
    border: 1px solid rgba(117, 229, 255, 0.14);
    box-shadow: 0 24px 54px rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(18px);
}

.live-stage-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(6, 18, 32, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(242, 249, 255, 0.96);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    backdrop-filter: blur(12px);
}

.live-stage-pill.is-live {
    background: rgba(14, 80, 62, 0.84);
    border-color: rgba(80, 255, 232, 0.28);
}

.live-stage-pill.is-waiting {
    background: rgba(36, 48, 72, 0.82);
    border-color: rgba(117, 229, 255, 0.18);
}

.live-stage-box-fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    gap: 8px;
    text-align: center;
    padding: 18px;
    color: rgba(248, 252, 255, 0.88);
}

.live-stage-box-fallback span {
    max-width: 28ch;
    color: rgba(223, 239, 249, 0.76);
}

.live-stage-box-warning {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    display: grid;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(7, 16, 27, 0.82);
    border: 1px solid rgba(247, 183, 51, 0.22);
    backdrop-filter: blur(10px);
}

.live-stage-box-warning strong {
    color: rgba(255, 225, 174, 0.96);
}

.live-stage-box-warning span {
    font-size: 0.82rem;
    color: rgba(242, 247, 251, 0.88);
}

.live-video-player,
.live-local-preview {
    width: 100%;
    min-height: clamp(460px, 72vh, 840px);
    background: rgba(0, 0, 0, 0.76);
    object-fit: cover;
}

.live-local-preview-shell {
    position: absolute;
    right: 16px;
    bottom: 88px;
    z-index: 5;
    width: min(28vw, 220px);
    display: grid;
    gap: 8px;
}

.live-local-preview-head {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.live-local-preview {
    position: relative;
    width: 100%;
    min-height: 0;
    height: 140px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: var(--shadow);
}

.live-orbital-glow {
    position: absolute;
    inset: auto auto 16px 16px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(76, 244, 225, 0.18), transparent 72%);
    filter: blur(8px);
    pointer-events: none;
}

.live-control-row,
.live-quick-reactions,
.live-chat-head {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.live-stage-utility-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    width: 100%;
}

.live-stage-utility-actions > *,
.live-stream-feedback > *,
.live-quick-reactions-overlay > * {
    flex: 0 0 auto;
}

.live-overlay-bar {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 5;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    justify-content: stretch;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(6, 13, 24, 0.18), rgba(6, 13, 24, 0.76));
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.live-overlay-action {
    position: relative;
    z-index: 4;
}

.live-display-menu {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 7;
}

.live-display-menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding-inline: 12px;
    border-radius: 999px;
    background: rgba(6, 13, 24, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(14px);
}

.live-display-menu summary::-webkit-details-marker {
    display: none;
}

.live-display-menu-panel {
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    width: min(320px, calc(100vw - 36px));
    display: grid;
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
        linear-gradient(160deg, rgba(5, 16, 31, 0.94), rgba(8, 19, 38, 0.96));
    border: 1px solid rgba(117, 229, 255, 0.18);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.34);
}

.live-display-menu-copy {
    display: grid;
    gap: 6px;
}

.live-display-menu-section {
    display: grid;
    gap: 10px;
}

.live-display-menu-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.live-display-menu-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.live-display-menu-actions > * {
    flex: 1 1 140px;
}

.live-display-menu-actions .ghost-button.is-active {
    border-color: rgba(117, 229, 255, 0.38);
    background: rgba(117, 229, 255, 0.12);
    color: #f5fbff;
}

.live-display-menu-hint {
    margin: 0;
}

.live-post-page[data-live-display-fit="auto"] .live-video-player,
.live-post-page[data-live-display-fit="auto"] .live-stage-box-video,
.live-post-page[data-live-display-fit="auto"] .live-local-preview,
.live-post-page[data-live-display-fit="cover"] .live-video-player,
.live-post-page[data-live-display-fit="cover"] .live-stage-box-video,
.live-post-page[data-live-display-fit="cover"] .live-local-preview {
    object-fit: cover;
    object-position: center 18%;
}

.live-post-page[data-live-display-fit="contain"] .live-video-player,
.live-post-page[data-live-display-fit="contain"] .live-stage-box-video,
.live-post-page[data-live-display-fit="contain"] .live-local-preview {
    object-fit: contain;
    object-position: center center;
}

.live-control-row {
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
        linear-gradient(160deg, rgba(5, 16, 31, 0.88), rgba(8, 19, 38, 0.92));
    border: 1px solid rgba(117, 229, 255, 0.12);
}

.live-quick-reactions {
    justify-content: flex-end;
}

.live-quick-reactions-overlay {
    width: 100%;
    align-items: center;
    justify-content: flex-start;
}

.live-quick-reactions-overlay [data-live-reaction-count] {
    display: inline-flex;
    min-width: 1.25rem;
    justify-content: center;
}

.live-fullscreen-chat {
    position: absolute;
    top: 18px;
    right: 18px;
    bottom: var(--live-fullscreen-chat-bottom-offset, 92px);
    width: min(390px, calc(100% - 36px));
    z-index: 6;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 12px;
    padding: 16px;
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(6, 13, 24, 0.78), rgba(6, 13, 24, 0.92)),
        rgba(7, 16, 27, 0.92);
    border: 1px solid rgba(117, 229, 255, 0.16);
    box-shadow: 0 24px 72px rgba(0, 0, 0, 0.38);
    backdrop-filter: blur(18px);
}

.live-fullscreen-chat-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.live-stage-box-meta,
.live-stage-box-owner-actions,
.live-stage-box-feedback,
.live-stream-feedback,
.live-stage-invite-actions,
.live-stage-request-board-head,
.live-stage-request-actions,
.live-roster-head,
.live-roster-meta,
.live-roster-actions,
.live-roster-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.live-stage-box-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.live-stage-box-body {
    display: grid;
    gap: 10px;
    align-content: start;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 12px;
    padding-right: 4px;
    scrollbar-width: thin;
}

.live-stage-box.is-compact .live-stage-box-body {
    display: none;
}

.live-stage-box-meta-copy,
.live-roster-summary {
    min-width: 0;
}

.live-stage-box-manage {
    display: grid;
    gap: 8px;
}

.live-stage-box-manage-toggle {
    list-style: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    cursor: pointer;
}

.live-stage-box-manage summary::-webkit-details-marker {
    display: none;
}

.live-stage-box-manage-menu {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
    gap: 8px;
}

.live-stage-box-drag-hint {
    font-size: 0.8rem;
    color: rgba(214, 240, 255, 0.76);
}

.live-stage-box-audio-controls {
    display: grid;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.live-stage-box-audio-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.live-stage-box-audio-copy,
.live-stage-box-audio-label {
    color: rgba(238, 247, 255, 0.88);
    font-size: 0.8rem;
}

.live-stage-box-audio-slider-group {
    display: grid;
    gap: 6px;
}

.live-stage-box-audio-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.live-stage-box-audio-slider-group input[type="range"] {
    width: 100%;
    accent-color: var(--accent);
}

.live-stage-box-self-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.live-stage-box-footer {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    z-index: 3;
    display: grid;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(6, 13, 24, 0.16), rgba(6, 13, 24, 0.82)),
        rgba(7, 16, 27, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
}

.live-stage-box-footer-copy {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.live-stage-box-name {
    color: rgba(247, 252, 255, 0.96);
    font-size: 0.92rem;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.live-stage-box-badges,
.live-stage-box-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.live-stage-box-compact-action {
    min-height: 34px;
    padding-inline: 10px;
    font-size: 0.76rem;
}

.live-stage-box-compact-note {
    color: rgba(214, 240, 255, 0.76);
    font-size: 0.76rem;
    font-weight: 700;
}

.live-stage-box-owner-actions,
.live-stage-box-feedback,
.live-roster-actions,
.live-stage-request-actions {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
    scrollbar-width: thin;
}

.live-stage-box-owner-actions > *,
.live-stage-box-feedback > *,
.live-roster-actions > *,
.live-stage-request-actions > * {
    flex: 0 0 auto;
    white-space: nowrap;
}

.live-stage-box-feedback {
    align-items: center;
}

.live-roster-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.live-stage-box-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.live-stage-tag,
.live-roster-warning {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(236, 246, 255, 0.92);
    font-size: 0.78rem;
}

.live-stage-tag.is-warning,
.live-roster-warning {
    background: rgba(247, 183, 51, 0.12);
    border-color: rgba(247, 183, 51, 0.22);
    color: rgba(255, 225, 174, 0.96);
}

.live-stage-box-stream-score {
    margin-top: 6px;
    color: rgba(214, 240, 255, 0.72);
    font-size: 0.84rem;
}

.live-video-shell.has-crowded-stage .live-stage-hud {
    gap: 8px;
    max-width: calc(100% - 140px);
}

.live-video-shell.has-crowded-stage .live-stage-chip {
    padding: 7px 10px;
    font-size: 0.76rem;
}

.live-video-shell.has-crowded-stage .live-overlay-bar {
    padding: 10px 12px;
    gap: 10px;
}

.live-video-shell.has-crowded-stage .live-stage-utility-actions,
.live-video-shell.has-crowded-stage .live-stream-feedback,
.live-video-shell.has-crowded-stage .live-quick-reactions-overlay {
    gap: 8px;
}

.live-video-shell.has-crowded-stage .live-overlay-action {
    min-height: 38px;
    padding-inline: 10px;
    font-size: 0.82rem;
}

.live-video-shell.has-crowded-stage .live-display-menu {
    bottom: 14px;
}

.live-video-shell.has-crowded-stage .live-local-preview-shell,
.live-video-shell.has-crowded-stage .live-orbital-glow {
    display: none;
}

.live-stream-feedback {
    align-items: center;
    width: 100%;
    justify-content: flex-start;
}

.live-viewer-stage-request {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(117, 229, 255, 0.12);
}

.live-viewer-stage-request-copy {
    display: grid;
    gap: 4px;
}

.live-chat-panel {
    padding: 18px;
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03)),
        linear-gradient(160deg, rgba(4, 13, 24, 0.96), rgba(9, 17, 34, 0.92));
    border: 1px solid rgba(107, 219, 255, 0.16);
    box-shadow:
        0 24px 64px rgba(3, 11, 22, 0.32),
        inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.live-chat-head {
    align-items: flex-start;
    justify-content: space-between;
}

.live-roster-panel {
    display: grid;
    gap: 12px;
    padding: 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(117, 229, 255, 0.08);
}

.live-roster-head {
    justify-content: space-between;
    align-items: flex-start;
}

.live-stage-invite {
    display: grid;
    gap: 10px;
}

.live-stage-request-board,
.live-backstage-board {
    display: grid;
    gap: 12px;
}

.live-stage-request-board-head {
    justify-content: space-between;
    align-items: flex-start;
}

.live-stage-control-panel {
    display: grid;
    gap: 12px;
}

.live-stage-control-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.live-stage-control-group {
    display: grid;
    gap: 8px;
}

.live-stage-control-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.live-stage-request-list {
    display: grid;
    gap: 10px;
}

.live-stage-request-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(80, 255, 232, 0.08), rgba(80, 255, 232, 0.03)),
        rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(80, 255, 232, 0.16);
}

.live-stage-request-summary {
    display: grid;
    gap: 4px;
}

.live-stage-request-summary span {
    color: var(--muted);
    font-size: 0.82rem;
}

.live-roster-list {
    display: grid;
    gap: 10px;
    max-height: 300px;
    overflow: auto;
}

.live-roster-row {
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.live-roster-row.has-stage-request {
    border-color: rgba(80, 255, 232, 0.18);
    background:
        linear-gradient(180deg, rgba(80, 255, 232, 0.08), rgba(80, 255, 232, 0.02)),
        rgba(255, 255, 255, 0.035);
}

.live-roster-row.is-self {
    border-color: rgba(247, 183, 51, 0.2);
}

.live-roster-summary {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.live-roster-meta {
    color: var(--muted);
    font-size: 0.82rem;
}

.live-roster-actions {
    justify-content: flex-start;
    width: 100%;
}

@media (max-width: 1080px) {
    .live-room-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

.live-chat-thread {
    display: grid;
    gap: 10px;
    min-height: 220px;
    max-height: 420px;
    overflow: auto;
    padding: 4px 6px 4px 0;
}

.live-chat-thread-fullscreen {
    min-height: 0;
    max-height: none;
    padding-right: 2px;
}

.live-chat-message {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.025)),
        rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(117, 229, 255, 0.08);
}

.live-chat-message.is-system {
    background: color-mix(in srgb, var(--theme-primary) 12%, rgba(255, 255, 255, 0.05));
}

.live-chat-avatar {
    display: flex;
    align-items: flex-start;
}

.live-chat-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.live-chat-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: var(--muted);
    font-size: 0.82rem;
}

.live-chat-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
}

.live-chat-form-fullscreen {
    margin-top: auto;
}

.live-status-row .stat-card,
.live-status-card {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
        linear-gradient(160deg, rgba(5, 16, 31, 0.88), rgba(7, 17, 34, 0.92));
    border: 1px solid rgba(117, 229, 255, 0.12);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.live-reaction-stage {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    overflow: hidden;
}

body.live-stage-immersive {
    overflow: hidden;
}

body.live-stage-immersive .topbar,
body.live-stage-immersive .sidebar,
body.live-stage-immersive .right-rail,
body.live-stage-immersive .mobile-command-menu {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

body.live-stage-immersive .floating-message-launcher,
body.live-stage-immersive .floating-message-shell,
body.shorts-immersive-page .floating-message-launcher,
body.shorts-immersive-page .floating-message-shell,
body.arcade-game-fullscreen .floating-message-launcher,
body.arcade-game-fullscreen .floating-message-shell,
body.floating-messenger-suppressed .floating-message-launcher,
body.floating-messenger-suppressed .floating-message-shell {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.live-float-reaction {
    position: absolute;
    bottom: 20px;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    opacity: 0;
    animation: liveReactionFloat 3s ease-out forwards;
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.28));
}

@keyframes liveReactionFloat {
    0% {
        transform: translateY(0) scale(0.7);
        opacity: 0;
    }
    12% {
        opacity: 1;
    }
    100% {
        transform: translateY(-280px) scale(1.1);
        opacity: 0;
    }
}

.live-status-row {
    align-items: stretch;
}

.auth-shell {
    display: flex;
    justify-content: center;
    padding: 5vh 0 2vh;
}

.warning-card {
    border-color: color-mix(in srgb, var(--theme-accent) 48%, transparent);
    background: color-mix(in srgb, var(--theme-accent) 10%, var(--bg-card));
}

.notice-card {
    border-color: color-mix(in srgb, var(--success) 48%, transparent);
    background: color-mix(in srgb, var(--success) 10%, var(--bg-card));
}

.error-card {
    border-color: color-mix(in srgb, var(--danger) 48%, transparent);
    background: color-mix(in srgb, var(--danger) 10%, var(--bg-card));
}

.auth-card {
    width: min(100%, 520px);
}

.auth-card-wide {
    width: min(100%, 680px);
}

.admin-settings-form,
.checkbox-stack,
.button-grid,
.admin-meta {
    display: grid;
    gap: 12px;
}

.admin-hero,
.admin-hero-copy,
.admin-sidebar-nav,
.log-file-list,
.admin-log-summary-grid {
    display: grid;
    gap: 12px;
}

.admin-hero .stats-row {
    margin-top: 16px;
}

.admin-sidebar-card .section-head {
    align-items: baseline;
}

.admin-sidebar-nav .nav-link {
    font-size: 0.94rem;
}

.admin-section-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
    padding: 12px;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
        linear-gradient(145deg, rgba(5, 16, 31, 0.88), rgba(7, 18, 34, 0.92));
    border: 1px solid rgba(117, 229, 255, 0.12);
}

.admin-link-card {
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.admin-link-card:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--theme-primary) 40%, transparent);
    background: rgba(255, 255, 255, 0.08);
}

.admin-velocity-stack,
.admin-velocity-card {
    display: grid;
    gap: 10px;
}

.admin-velocity-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.admin-velocity-bar {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
}

.admin-velocity-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, color-mix(in srgb, var(--theme-primary) 70%, white), color-mix(in srgb, var(--theme-accent) 68%, white));
    box-shadow: 0 0 18px var(--accent-glow);
}

.admin-presence-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
}

.admin-presence-card {
    display: grid;
    gap: 8px;
    align-content: start;
}

.admin-presence-card strong {
    font-size: clamp(1.65rem, 2.8vw, 2.2rem);
    line-height: 1;
}

.admin-presence-surface-grid {
    display: grid;
    gap: 10px;
}

.admin-presence-surface-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.admin-presence-page-copy,
.admin-presence-session-row,
.admin-presence-session-head {
    display: grid;
    gap: 6px;
}

.admin-presence-page-path {
    font-family: "SFMono-Regular", "Menlo", monospace;
    font-size: 0.8rem;
    word-break: break-all;
}

.admin-presence-session-grid {
    display: grid;
    gap: 10px;
}

.admin-presence-session-row {
    align-content: start;
}

.admin-presence-session-head,
.admin-presence-session-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.button-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-user-card {
    display: grid;
    gap: 14px;
}

.admin-log-path {
    font-family: "SFMono-Regular", "Menlo", monospace;
    font-size: 0.84rem;
}

.admin-log-shell,
.admin-log-panel,
.admin-log-browser,
.admin-log-browser-list,
.admin-log-browser-preview,
.admin-log-console,
.admin-log-console-line {
    display: grid;
    gap: 12px;
}

.admin-log-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-log-summary-card,
.admin-live-log-card,
.admin-log-access-card,
.admin-log-spotlight,
.admin-log-file-link {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.03)),
        linear-gradient(160deg, rgba(5, 16, 31, 0.95), rgba(9, 19, 39, 0.9));
    border: 1px solid rgba(117, 229, 255, 0.14);
    box-shadow:
        0 22px 54px rgba(2, 7, 18, 0.34),
        inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.admin-log-spotlight::before,
.admin-log-summary-card::before,
.admin-live-log-card::before,
.admin-log-access-card::before,
.admin-log-file-link::before {
    content: "";
    position: absolute;
    inset: -20% auto auto -10%;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(92, 255, 225, 0.18), transparent 72%);
    pointer-events: none;
}

.admin-log-mode-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.admin-log-mode-link {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 160px;
    padding: 12px 14px;
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(7, 18, 34, 0.92), rgba(7, 18, 34, 0.72));
    border: 1px solid rgba(117, 229, 255, 0.12);
    color: var(--muted);
    transition: transform 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.admin-log-mode-link strong {
    color: var(--text);
}

.admin-log-mode-link:hover,
.admin-log-mode-link.is-active {
    color: var(--text);
    border-color: rgba(117, 229, 255, 0.42);
    box-shadow: 0 0 0 1px rgba(117, 229, 255, 0.18), 0 18px 40px rgba(4, 17, 34, 0.28);
    transform: translateY(-1px);
}

.admin-log-spotlight p,
.admin-log-summary-card p {
    margin: 0;
}

.admin-log-browser {
    display: grid;
    grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
    gap: 18px;
}

.admin-log-browser-list,
.admin-log-browser-preview {
    align-content: start;
}

.admin-log-file-link {
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.admin-log-file-link:hover,
.admin-log-file-link.is-active {
    transform: translateY(-1px);
    border-color: rgba(117, 229, 255, 0.42);
    box-shadow: 0 0 0 1px rgba(117, 229, 255, 0.16), 0 20px 44px rgba(4, 17, 34, 0.24);
}

.admin-log-console {
    padding: 16px;
    border-radius: 20px;
    background:
        radial-gradient(circle at top left, rgba(80, 255, 232, 0.09), transparent 24%),
        linear-gradient(180deg, rgba(3, 8, 18, 0.96), rgba(4, 11, 22, 0.92));
    border: 1px solid rgba(117, 229, 255, 0.14);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.admin-log-console-line {
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(117, 229, 255, 0.08);
}

.admin-live-control-panel,
.admin-live-section-card,
.admin-live-room-card,
.admin-live-archive-chip,
.admin-live-kpi-card {
    position: relative;
    overflow: hidden;
}

.admin-live-control-panel,
.admin-live-section-card,
.admin-live-room-card {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.03)),
        linear-gradient(160deg, rgba(5, 16, 31, 0.95), rgba(9, 19, 39, 0.9));
    border: 1px solid rgba(117, 229, 255, 0.14);
    box-shadow:
        0 22px 54px rgba(2, 7, 18, 0.34),
        inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.admin-live-room-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.admin-live-room-card {
    display: grid;
    gap: 14px;
}

.admin-live-room-card.is-active {
    border-color: rgba(255, 95, 121, 0.24);
}

.admin-live-room-glow {
    position: absolute;
    inset: -15% auto auto -8%;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(92, 255, 225, 0.18), transparent 72%);
    pointer-events: none;
}

.admin-live-archive-chip {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(117, 229, 255, 0.1);
}

.admin-log-console-line:last-child {
    border-bottom: 0;
}

.admin-log-console-time {
    color: #7ef0c2;
    font-family: "SFMono-Regular", "Menlo", monospace;
    font-size: 0.82rem;
    white-space: nowrap;
}

.admin-log-console-copy,
.admin-log-console-preview pre {
    font-family: "SFMono-Regular", "Menlo", monospace;
    font-size: 0.88rem;
    line-height: 1.6;
}

.admin-log-console-preview {
    min-height: 520px;
    max-height: 70vh;
    overflow: auto;
}

.admin-log-console-preview pre {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    color: #d7f5ff;
}

.form-label {
    display: block;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 0.9rem;
}

.checkbox-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
}

.checkbox-row input {
    width: auto;
}

.inline-form {
    display: inline-flex;
}

.friend-request-card,
.friend-request-head {
    display: grid;
    gap: 12px;
}

.friend-request-head {
    grid-template-columns: auto 1fr;
    align-items: center;
}

.card > .inline-form {
    margin-top: 16px;
}

.empty-state {
    padding: 18px;
    border-radius: 16px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(255, 255, 255, 0.08);
}

.form-feedback {
    display: block;
    margin-top: -6px;
}

.color-picker-field {
    display: grid;
    gap: 8px;
}

.color-picker-field input[type="color"] {
    min-height: 52px;
    padding: 6px;
}

.location-map-embed {
    width: 100%;
    min-height: 240px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.03);
    margin-top: 14px;
}

.profile-photo-editor {
    display: flex;
    justify-content: center;
    padding: 12px 0 4px;
}

.profile-photo-lightbox {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: 20px;
}

.profile-photo-lightbox-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(2, 6, 14, 0.82);
    cursor: zoom-out;
}

.profile-photo-lightbox-panel {
    position: relative;
    z-index: 1;
    width: min(92vw, 760px);
    display: grid;
    justify-items: center;
    gap: 14px;
    padding: 20px;
    border-radius: 28px;
    border: 1px solid var(--surface-line);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--surface-1) 94%, transparent), color-mix(in srgb, var(--surface-2) 88%, transparent)),
        var(--surface-1);
    box-shadow: var(--shadow-xl);
}

.profile-photo-lightbox-close {
    justify-self: end;
}

.profile-photo-lightbox-image {
    width: min(100%, 680px);
    max-height: 74vh;
    border-radius: 28px;
    object-fit: contain;
    background: rgba(2, 6, 14, 0.72);
}

.profile-camera-modal {
    position: fixed;
    inset: 0;
    z-index: 62;
    display: grid;
    place-items: center;
    padding: 20px;
}

.profile-camera-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(2, 6, 14, 0.82);
}

.profile-camera-panel {
    position: relative;
    z-index: 1;
    width: min(92vw, 640px);
    display: grid;
    gap: 16px;
    padding: 20px;
    border-radius: 28px;
    border: 1px solid var(--surface-line);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--surface-1) 94%, transparent), color-mix(in srgb, var(--surface-2) 88%, transparent)),
        var(--surface-1);
    box-shadow: var(--shadow-xl);
}

.profile-camera-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
}

.profile-camera-stage {
    position: relative;
    overflow: hidden;
    min-height: min(64vh, 560px);
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(circle at top, rgba(255, 255, 255, 0.12), transparent 58%),
        linear-gradient(160deg, rgba(4, 10, 20, 0.96), rgba(8, 16, 28, 0.92));
}

.profile-camera-video,
.profile-camera-preview {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.profile-camera-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

body.has-modal-open {
    overflow: hidden;
}

.avatar-photo-editor {
    width: 220px;
    height: 220px;
    border-radius: 999px;
    object-fit: cover;
    border: 1px solid var(--line);
}

.profile-photo-editor-stage {
    position: relative;
    width: 220px;
    height: 220px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    cursor: crosshair;
    touch-action: none;
    background:
        radial-gradient(circle at center, rgba(255, 255, 255, 0.08), transparent 62%),
        linear-gradient(145deg, rgba(8, 15, 28, 0.92), rgba(6, 12, 22, 0.88));
    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.24),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.profile-photo-editor-copy {
    text-align: center;
}

.profile-photo-source-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.profile-photo-file-label {
    display: block;
    text-align: center;
}

.profile-photo-grid-overlay,
.profile-photo-focus-ring,
.profile-photo-crosshair {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
}

.profile-photo-grid-overlay {
    background-image:
        linear-gradient(to right, transparent 24.5%, rgba(255, 255, 255, 0.14) 25%, transparent 25.5%, transparent 49.5%, rgba(255, 255, 255, 0.18) 50%, transparent 50.5%, transparent 74.5%, rgba(255, 255, 255, 0.14) 75%, transparent 75.5%),
        linear-gradient(to bottom, transparent 24.5%, rgba(255, 255, 255, 0.14) 25%, transparent 25.5%, transparent 49.5%, rgba(255, 255, 255, 0.18) 50%, transparent 50.5%, transparent 74.5%, rgba(255, 255, 255, 0.14) 75%, transparent 75.5%);
    opacity: 0.72;
}

.profile-photo-focus-ring {
    inset: 8px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    box-shadow:
        0 0 0 1px rgba(134, 226, 255, 0.16),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.profile-photo-crosshair-vertical::before,
.profile-photo-crosshair-horizontal::before {
    content: "";
    position: absolute;
    background: rgba(255, 255, 255, 0.18);
}

.profile-photo-crosshair-vertical::before {
    top: 16px;
    bottom: 16px;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
}

.profile-photo-crosshair-horizontal::before {
    left: 16px;
    right: 16px;
    top: 50%;
    height: 1px;
    transform: translateY(-50%);
}

.profile-photo-adjustment-readout {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    justify-content: center;
}

.archived-photo-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.archived-photo-thumb {
    width: 68px;
    height: 68px;
    border-radius: 18px;
    object-fit: cover;
    border: 1px solid var(--line);
}

.log-file-list {
    align-content: start;
}

.log-file-card {
    display: grid;
    gap: 8px;
}

.toast {
    position: fixed;
    right: 20px;
    bottom: 20px;
    max-width: 320px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(7, 17, 31, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: white;
    box-shadow: var(--shadow);
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 1280px) {
    .app-layout {
        grid-template-columns: 240px minmax(0, 1fr);
    }

    .app-layout.game-focus-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .right-rail {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .right-rail > * {
        flex: 1 1 280px;
    }

    .tower-defense-command-grid,
    .tower-defense-support-grid,
    .tower-defense-fact-grid,
    .tower-defense-launch-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tower-defense-stage-main {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 960px) {
    .app-layout {
        grid-template-columns: 1fr;
    }

    .sidebar {
        order: 2;
    }

.right-rail {
        order: 3;
        flex-direction: column;
    }

    .hero-banner {
        min-height: 400px;
    }

    .banner-slide {
        grid-template-columns: 1fr;
        padding: 28px;
    }

    .grid-two-up,
    .grid-three-up,
    .messages-layout,
    .live-room-layout,
    .games-library-grid,
    .games-leaderboard-grid,
    .games-hero-card,
    .defense-hero-card,
    .games-stage-shell,
    .short-grid,
    .info-grid,
    .live-card-grid,
    .admin-live-room-grid,
    .admin-log-summary-grid,
    .admin-log-browser,
    .tower-defense-command-grid,
    .tower-defense-support-grid,
    .tower-defense-fact-grid,
    .tower-defense-guide-grid,
    .tower-defense-enemy-grid,
    .tower-defense-launch-grid {
        grid-template-columns: 1fr;
    }

    .live-feed-strip {
        grid-auto-flow: row;
        grid-auto-columns: auto;
        grid-template-columns: 1fr;
        max-height: 72vh;
        overflow-x: hidden;
        overflow-y: auto;
        scroll-snap-type: y proximity;
    }

    .message-form,
    .comment-form {
        grid-template-columns: 1fr;
    }

    .post-tip-grid {
        grid-template-columns: 1fr;
    }

    .games-guide-grid,
    .control-chip-grid,
    .arcade-hud-grid,
    .next-guide-wrap {
        grid-template-columns: 1fr;
    }

    .tower-defense-stage-head {
        flex-direction: column;
    }

    .tower-defense-action-row {
        justify-content: stretch;
    }

    .tower-defense-action-row > * {
        flex: 1 1 180px;
    }

    .defense-score-grid,
    .defense-telemetry-grid {
        grid-template-columns: 1fr;
    }

    #defense-board {
        max-height: none;
    }

    .composer-toolbar,
    .post-reaction-row {
        align-items: stretch;
    }

    .profile-summary,
    .section-head,
    .thread-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .live-stage-hud {
        right: 92px;
    }

    .live-stage-ribbon {
        top: auto;
        right: 16px;
        bottom: 88px;
    }
}

.news-hero-card {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(145deg, rgba(15, 28, 49, 0.92), rgba(8, 14, 27, 0.9)),
        radial-gradient(circle at top right, color-mix(in srgb, var(--theme-accent) 28%, transparent), transparent 42%);
}

.games-hero-card {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.7fr);
    gap: 18px;
    overflow: hidden;
    background:
        radial-gradient(circle at top right, rgba(134, 226, 255, 0.16), transparent 34%),
        radial-gradient(circle at bottom left, rgba(247, 183, 51, 0.14), transparent 30%),
        linear-gradient(145deg, rgba(10, 20, 37, 0.94), rgba(4, 10, 20, 0.92));
}

.games-hero-copy,
.games-hero-stats,
.games-layout,
.games-guide-grid,
.arcade-hud-grid,
.control-chip-grid {
    display: grid;
    gap: 16px;
}

.games-hero-copy p,
.games-stat-card p,
.games-guide-tile p {
    margin: 0;
}

.games-hero-stats {
    align-content: center;
}

.games-stat-card {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
        rgba(255, 255, 255, 0.04);
}

.games-layout {
    margin-top: 22px;
}

.games-library-grid,
.games-leaderboard-grid,
.defense-hero-copy,
.defense-hero-stats,
.defense-tower-grid,
.defense-enemy-grid {
    display: grid;
    gap: 16px;
}

.games-library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 22px;
}

.games-leaderboard-shell {
    margin-top: 22px;
}

.games-leaderboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 18px;
}

.game-library-card,
.defense-hero-card,
.defense-board-frame {
    position: relative;
    overflow: hidden;
}

.game-library-card,
.is-defense-card {
    background:
        linear-gradient(145deg, rgba(10, 20, 37, 0.92), rgba(4, 10, 20, 0.9)),
        radial-gradient(circle at top right, rgba(134, 226, 255, 0.15), transparent 42%);
}

.is-defense-card {
    background:
        linear-gradient(145deg, rgba(21, 19, 35, 0.94), rgba(7, 10, 21, 0.92)),
        radial-gradient(circle at top right, rgba(255, 183, 98, 0.16), transparent 38%);
}

.defense-hero-card {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
    gap: 18px;
    background:
        radial-gradient(circle at top right, rgba(255, 183, 98, 0.18), transparent 34%),
        radial-gradient(circle at bottom left, rgba(126, 240, 194, 0.14), transparent 30%),
        linear-gradient(145deg, rgba(13, 20, 34, 0.95), rgba(4, 8, 17, 0.92));
}

.tower-defense-hero {
    padding: 24px 26px;
}

.tower-defense-fact-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.defense-hero-copy p,
.game-library-card p,
.defense-enemy-card p {
    margin: 0;
}

.tower-defense-page-shell,
.tower-defense-command-grid,
.tower-defense-support-grid,
.tower-defense-guide-grid {
    display: grid;
    gap: 18px;
}

.tower-defense-stage-card,
.tower-defense-command-card,
.tower-defense-support-card {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at top right, rgba(134, 226, 255, 0.12), transparent 30%),
        linear-gradient(145deg, rgba(9, 17, 31, 0.96), rgba(4, 8, 17, 0.93));
}

.tower-defense-stage-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.tower-defense-stage-head h1 {
    margin: 6px 0 8px;
}

.tower-defense-back-link {
    display: inline-flex;
    margin-bottom: 8px;
}

.tower-defense-action-row {
    justify-content: flex-end;
}

.tower-defense-stage-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 18px;
    align-items: start;
}

.tower-defense-side-dock {
    display: grid;
    gap: 18px;
    align-content: start;
}

.tower-defense-launch-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.tower-defense-board-frame {
    padding: 10px;
}

.tower-defense-topline {
    font-size: 1rem;
}

.tower-defense-command-grid {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.7fr);
}

.tower-defense-support-grid {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.8fr);
}

.tower-choice-card-expanded {
    min-height: 118px;
    align-content: start;
}

.tower-choice-card-launch {
    min-height: 118px;
}

.tower-upgrade-note {
    margin-top: auto;
    font-size: 0.78rem;
    color: color-mix(in srgb, var(--theme-accent) 58%, white);
}

.tower-defense-selection-card {
    align-content: start;
    gap: 16px;
}

.tower-defense-hint-card p {
    margin: 0;
}

.tower-defense-guide-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tower-defense-enemy-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.games-stage-card,
.games-guides-card {
    position: relative;
    overflow: hidden;
}

.games-stage-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.92fr);
    gap: 24px;
    align-items: start;
}

.arcade-board-panel,
.games-hud-column {
    display: grid;
    gap: 16px;
}

.defense-stage-shell {
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
}

.defense-hud-column,
.defense-score-grid {
    gap: 16px;
}

.defense-board-frame {
    border-color: rgba(255, 183, 98, 0.22);
    background:
        radial-gradient(circle at top left, rgba(255, 181, 98, 0.12), transparent 28%),
        radial-gradient(circle at bottom right, rgba(126, 240, 194, 0.12), transparent 26%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)),
        linear-gradient(145deg, rgba(7, 16, 31, 0.96), rgba(2, 7, 15, 0.96));
}

.defense-pill {
    color: #ffb562;
}

.arcade-board-frame {
    position: relative;
    padding: 16px;
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)),
        linear-gradient(145deg, rgba(7, 16, 31, 0.96), rgba(2, 7, 15, 0.96));
    border: 1px solid rgba(134, 226, 255, 0.22);
    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.38),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.arcade-board-topline {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
    color: var(--muted);
    font-size: 0.92rem;
}

.signal-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #86e2ff;
    font-weight: 800;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
}

#tetris-board,
#tetris-next,
#defense-board {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 22px;
}

#tetris-board,
#defense-board {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #030812;
    box-shadow: inset 0 0 26px rgba(0, 0, 0, 0.45);
}

#tetris-board {
    touch-action: none;
}

#defense-board {
    cursor: crosshair;
    max-height: 82vh;
    object-fit: contain;
}

.arcade-board-overlay {
    position: absolute;
    inset: 72px 16px 16px;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 24px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(3, 8, 18, 0.52), rgba(3, 8, 18, 0.82));
    backdrop-filter: blur(10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.tower-defense-board-frame .arcade-board-overlay {
    inset: 86px 18px auto auto;
    width: min(360px, calc(100% - 36px));
    padding: 16px 18px;
    text-align: left;
    place-items: start;
    background: linear-gradient(180deg, rgba(6, 12, 23, 0.78), rgba(6, 12, 23, 0.92));
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.arcade-board-overlay.is-hidden {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.98);
}

.arcade-overlay-copy {
    display: grid;
    gap: 10px;
    max-width: 360px;
}

.arcade-overlay-copy p {
    margin: 0;
    color: var(--muted);
}

.arcade-hud-card {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
        rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.arcade-hud-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.arcade-hud-grid strong,
.next-guide-wrap strong {
    font-size: 1.35rem;
}

.guide-card-current {
    border-color: rgba(134, 226, 255, 0.22);
    box-shadow: inset 0 0 0 1px rgba(134, 226, 255, 0.08);
}

.next-guide-wrap {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
}

.control-chip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.control-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--muted);
    font-weight: 700;
    text-align: center;
}

.games-mobile-controls {
    display: none;
    gap: 10px;
}

.games-mobile-controls-copy {
    display: grid;
    gap: 4px;
    grid-column: 1 / -1;
}

.games-mobile-controls button:last-child {
    grid-column: 1 / -1;
}

.games-guide-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.defense-tower-grid {
    grid-template-columns: 1fr;
}

.tower-choice-card {
    width: 100%;
    display: grid;
    justify-items: start;
    text-align: left;
    gap: 6px;
    border-radius: 18px;
    padding: 14px 16px;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)),
        rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: none;
}

.tower-choice-card span,
.tower-choice-card small {
    color: var(--muted);
}

.tower-choice-card.is-selected {
    border-color: color-mix(in srgb, var(--theme-accent) 52%, transparent);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

.defense-current-card {
    border-color: rgba(255, 183, 98, 0.2);
}

.defense-telemetry-card {
    border-color: rgba(126, 240, 194, 0.18);
}

.defense-telemetry-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.defense-telemetry-pill {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(126, 240, 194, 0.08), rgba(134, 226, 255, 0.03)),
        rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.defense-telemetry-pill strong {
    font-size: 1.15rem;
}

.defense-score-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.defense-enemy-grid {
    grid-template-columns: 1fr;
}

.defense-enemy-card,
.game-link-card {
    background:
        linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)),
        rgba(255,255,255,0.03);
}

.arcade-leaderboard-card {
    display: grid;
    gap: 14px;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)),
        rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
}

.arcade-leaderboard-list {
    display: grid;
    gap: 10px;
}

.arcade-leaderboard-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.05);
}

.arcade-leaderboard-row.is-viewer {
    border-color: rgba(134, 226, 255, 0.24);
    background: rgba(134, 226, 255, 0.06);
}

.arcade-rank {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(255,255,255,0.08);
    color: var(--theme-accent);
    font-weight: 900;
}

.arcade-leaderboard-copy,
.arcade-leaderboard-score {
    display: grid;
    gap: 2px;
}

.arcade-leaderboard-score {
    justify-items: end;
    text-align: right;
}

.games-guide-tile {
    position: relative;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--guide-accent, var(--theme-primary)) 26%, var(--line));
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--guide-accent, var(--theme-primary)) 24%, transparent), transparent 36%),
        rgba(255, 255, 255, 0.03);
}

.guide-piece-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--guide-accent, var(--theme-accent));
    font-weight: 900;
    font-size: 1.1rem;
    letter-spacing: 0.08em;
}

.news-hero-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent),
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 45%);
}

.news-kicker {
    display: inline-flex;
    margin-bottom: 10px;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--theme-accent);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.news-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.8fr);
    gap: 18px;
    position: relative;
    z-index: 1;
}

.news-brief-panel,
.news-side-panel,
.news-article-card {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03)),
        rgba(8, 16, 28, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.24);
}

.news-brief-panel,
.news-side-panel {
    padding: 22px;
    border-radius: var(--radius-md);
}

.news-brief-panel strong,
.news-side-panel strong {
    display: block;
    margin-bottom: 10px;
}

.news-source-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    align-items: center;
}

.news-stream-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 18px;
}

.news-article-card {
    position: relative;
    overflow: hidden;
}

.news-article-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, var(--theme-accent), var(--theme-primary));
    opacity: 0.85;
}

.news-article-card.is-church-focused::after {
    content: "";
    position: absolute;
    inset: auto -40px -40px auto;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--theme-accent) 20%, transparent), transparent 68%);
    pointer-events: none;
}

.news-card-topline {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}

.news-card-copy {
    display: grid;
    gap: 8px;
}

.news-card-source {
    font-size: 0.84rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.news-card-summary {
    color: color-mix(in srgb, var(--text) 90%, var(--muted));
    line-height: 1.6;
}

.news-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    color: var(--muted);
    font-size: 0.92rem;
}

.news-action-row,
.news-reaction-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.news-reaction-row .reaction-pill,
.news-reaction-row .ghost-button {
    min-height: 42px;
}

body.theme-light .news-hero-card,
body.theme-light .news-brief-panel,
body.theme-light .news-side-panel,
body.theme-light .news-article-card {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(247, 250, 255, 0.82)),
        rgba(255, 255, 255, 0.8);
}

@media (max-width: 960px) {
    .news-hero-grid,
    .news-stream-grid {
        grid-template-columns: 1fr;
    }

    .news-card-topline {
        flex-direction: column;
    }
}

/* Cinematic Future Upgrade */

:root {
    --bg-deep: var(--shell-base);
    --bg-surface: var(--surface-2);
    --bg-card: var(--surface-1);
    --line: var(--surface-line);
    --text: var(--text-main);
    --muted: var(--text-soft);
    --shadow: var(--shadow-xl);
}

body {
    color: var(--text-main);
    background:
        var(--page-backdrop),
        radial-gradient(circle at top left, var(--primary-glow), transparent 34%),
        radial-gradient(circle at bottom right, var(--accent-glow), transparent 30%),
        radial-gradient(circle at center, var(--shell-overlay), transparent 56%),
        var(--custom-background-image),
        linear-gradient(180deg, var(--shell-base), color-mix(in srgb, var(--shell-secondary) 30%, #02060c) 70%);
    background-size: auto, auto, auto, auto, cover, auto;
    background-position: center;
    background-attachment: fixed;
}

.page-backdrop {
    background:
        linear-gradient(120deg, rgba(255, 255, 255, 0.03), transparent 28%),
        radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.03), transparent 48%);
}

.page-orbit-grid {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(var(--orbital-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--orbital-grid) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.42), transparent 82%);
    opacity: 0.65;
}

.topbar {
    padding: 18px 24px;
    background: rgba(7, 13, 23, 0.48);
    border-bottom: 1px solid var(--surface-line);
    backdrop-filter: blur(24px);
}

.topbar-shell {
    width: min(1680px, 100%);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.topbar-brand-cluster {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.brand {
    gap: 16px;
}

.brand-mark-shell {
    position: relative;
    display: inline-grid;
    place-items: center;
}

.brand-mark-glow {
    position: absolute;
    inset: -8px;
    border-radius: 22px;
    background:
        radial-gradient(circle, var(--primary-glow), transparent 68%),
        radial-gradient(circle at bottom right, var(--accent-glow), transparent 60%);
    filter: blur(8px);
    opacity: 0.95;
}

.brand-mark {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 18px;
    box-shadow: var(--shadow-lg);
}

.brand-copy {
    display: grid;
    gap: 2px;
}

.topbar-scene {
    display: grid;
    gap: 6px;
}

.topbar-scene-copy {
    color: var(--text-dim);
    font-size: 0.88rem;
}

.topbar-status {
    gap: 16px;
}

.mobile-command-menu {
    display: none;
    width: 100%;
    overflow: visible;
    position: relative;
    z-index: 24;
}

.mobile-command-menu summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    padding: 12px 16px;
    border-radius: 22px;
    border: 1px solid var(--surface-line);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--surface-1) 92%, transparent), color-mix(in srgb, var(--surface-2) 84%, transparent)),
        var(--surface-1);
    box-shadow: var(--shadow-lg);
    color: var(--text-main);
    cursor: pointer;
    transition:
        border-color 180ms ease,
        background 180ms ease,
        transform 180ms ease,
        box-shadow 180ms ease;
}

.mobile-command-menu summary::-webkit-details-marker {
    display: none;
}

.mobile-command-menu[open] summary {
    border-color: var(--surface-line-strong);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 90%, transparent), color-mix(in srgb, var(--surface-3) 82%, transparent)),
        var(--surface-2);
}

.mobile-command-menu.is-animating summary {
    pointer-events: none;
}

.mobile-command-menu[open] summary,
.mobile-command-menu.is-opening summary {
    transform: translateY(1px);
    box-shadow: var(--shadow-xl);
}

.mobile-command-summary-main {
    display: grid;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.mobile-command-summary-label {
    font-weight: 700;
    letter-spacing: 0.03em;
}

.mobile-command-summary-page {
    color: var(--text-dim);
    font-size: 0.76rem;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-command-summary-badges {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.mobile-command-panel {
    margin-top: 12px;
    padding: 16px;
    display: grid;
    gap: 16px;
    border-radius: 24px;
    border: 1px solid var(--surface-line);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--surface-1) 94%, transparent), color-mix(in srgb, var(--surface-2) 88%, transparent)),
        var(--surface-1);
    box-shadow: var(--shadow-xl);
    transform-origin: top center;
    transition:
        opacity 180ms ease,
        transform 180ms ease,
        height 200ms ease;
}

.mobile-command-menu[open] .mobile-command-panel,
.mobile-command-menu.is-animating .mobile-command-panel {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.mobile-command-menu.is-closing .mobile-command-panel,
.mobile-command-menu:not([open]) .mobile-command-panel {
    opacity: 0;
    transform: translateY(-8px) scale(0.985);
}

.mobile-command-profile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 20px;
    border: 1px solid var(--surface-line);
    background: color-mix(in srgb, var(--surface-2) 72%, transparent);
}

.mobile-command-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.mobile-command-grid .nav-link {
    justify-content: space-between;
    gap: 10px;
    text-align: left;
}

.mobile-command-section {
    display: grid;
    gap: 12px;
}

.mobile-command-section .notification-menu-card {
    width: 100%;
    min-width: 0;
}

.mobile-command-section .notification-list {
    max-height: min(42vh, 360px);
    overflow: auto;
}

@media (min-width: 981px) {
    .mobile-command-menu {
        display: none !important;
    }
}

.quick-nav-link,
.status-pill,
.nav-link,
.conversation-item,
.notification-item,
.comment,
.short-link,
.live-summary-card,
.link-preview-card {
    border-color: var(--surface-line);
    background: var(--surface-ghost);
}

.quick-nav-link,
.status-pill {
    min-height: 42px;
}

.live-nav-link {
    gap: 10px;
}

.live-count-badge {
    background: color-mix(in srgb, var(--theme-accent) 78%, white);
}

.quick-nav-link.is-active,
.quick-nav-link:hover,
.nav-link:hover,
.nav-link.is-active,
.conversation-item.is-active,
.conversation-item:hover,
.live-summary-card:hover {
    border-color: var(--surface-line-strong);
    background: color-mix(in srgb, var(--surface-2) 82%, transparent);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.14);
}

.app-layout {
    width: min(1680px, 100%);
    margin: 0 auto;
    padding: 28px 24px 34px;
    gap: 26px;
    grid-template-columns: 280px minmax(0, 1fr) 340px;
}

.app-layout.no-right-rail {
    grid-template-columns: 280px minmax(0, 1fr);
}

.app-layout.no-sidebar.no-right-rail {
    grid-template-columns: minmax(0, 1fr);
}

.app-layout.no-sidebar.has-right-rail {
    grid-template-columns: minmax(0, 1fr) 340px;
}

.sidebar,
.right-rail {
    gap: 20px;
}

.shell-panel-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 6px;
    color: var(--text-dim);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.card,
.mini-card,
.stat-card,
.short-card {
    border: 1px solid var(--surface-line);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--surface-1) 92%, transparent), color-mix(in srgb, var(--surface-2) 86%, transparent)),
        var(--surface-1);
    box-shadow: var(--shadow-xl);
    backdrop-filter: blur(22px);
}

.mini-card,
.stat-card,
.short-card {
    box-shadow: var(--shadow-lg);
}

.main-panel {
    gap: 22px;
}

button,
.button-link {
    color: var(--button-text);
    box-shadow: 0 18px 40px color-mix(in srgb, var(--theme-primary) 24%, transparent);
}

.ghost-button,
.ghost-link {
    background: color-mix(in srgb, var(--surface-1) 64%, transparent);
    border: 1px solid var(--surface-line);
    color: var(--text-main);
}

button:focus-visible,
.button-link:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.quick-nav-link:focus-visible,
.nav-link:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

input,
textarea,
select {
    color: var(--text-main);
    border-color: var(--surface-line);
    background: var(--input-bg);
}

.count-badge,
.badge {
    color: var(--badge-text);
}

.signal-pill {
    background: color-mix(in srgb, var(--surface-2) 68%, transparent);
    border: 1px solid var(--surface-line);
    color: color-mix(in srgb, var(--theme-accent) 55%, white);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.sidebar-profile,
.shell-purpose-card {
    overflow: hidden;
    position: relative;
}

.sidebar-profile::before,
.shell-purpose-card::before,
.future-live-hero::before,
.settings-lab-hero::before,
.messages-command-card::before,
.future-profile-hero::before,
.feed-stage-card::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--hero-tint), transparent 72%);
    pointer-events: none;
}

.sidebar-profile-frame {
    display: flex;
    justify-content: center;
}

.sidebar-badge-row {
    justify-content: center;
}

.shell-nav {
    gap: 12px;
}

.nav-link {
    display: flex;
    align-items: center;
    min-height: 48px;
    border-radius: 18px;
    transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease;
}

.nav-link:hover,
.nav-link.is-active {
    color: var(--text-main);
    transform: translateY(-1px);
}

.home-hero-grid,
.live-hub-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.9fr);
    gap: 22px;
    align-items: stretch;
}

.home-cinematic-banner,
.future-live-hero,
.messages-command-card,
.future-profile-hero,
.settings-lab-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at top right, var(--hero-tint-alt), transparent 30%),
        radial-gradient(circle at top left, var(--hero-tint), transparent 34%),
        linear-gradient(145deg, color-mix(in srgb, var(--shell-secondary) 40%, transparent), color-mix(in srgb, var(--surface-2) 88%, transparent));
}

.settings-tab-shell {
    padding: 12px 14px;
}

.settings-tab-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.settings-screen-stack {
    display: grid;
    gap: 18px;
    max-width: min(1100px, 100%);
    margin: 0 auto;
}

.settings-command-stage .settings-preview-card {
    min-height: 100%;
}

.settings-preview-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-section-card {
    scroll-margin-top: 110px;
}

.hero-banner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    min-height: clamp(330px, 38vw, 430px);
    height: auto;
    border-radius: 30px;
    border: 1px solid var(--surface-line);
    isolation: isolate;
}

.banner-slide {
    position: relative;
    inset: auto;
    grid-area: 1 / 1;
    grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.8fr);
    padding: 30px 32px;
    min-width: 0;
    min-height: 100%;
    align-items: stretch;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, 18px, 0) scale(0.985);
    transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s linear 0.45s;
}

.banner-badge-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.banner-copy {
    display: grid;
    gap: 14px;
    padding-bottom: 17px;
    min-width: 0;
    align-content: start;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.banner-slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) scale(1);
    z-index: 1;
    transition-delay: 0s;
}

.banner-copy h1 {
    max-width: 12ch;
    font-size: clamp(2.1rem, 3.9vw, 3.5rem);
    letter-spacing: -0.04em;
}

.banner-copy p {
    color: color-mix(in srgb, var(--text-main) 82%, var(--text-soft));
    font-size: 1.02rem;
    line-height: 1.7;
}

.banner-telemetry-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.banner-telemetry-card {
    display: grid;
    gap: 4px;
    padding: 16px;
    border-radius: 18px;
    background: color-mix(in srgb, var(--surface-2) 72%, transparent);
    border: 1px solid var(--surface-line);
}

.banner-telemetry-card strong {
    font-size: 1.35rem;
}

.banner-telemetry-card span {
    color: var(--text-soft);
    font-size: 0.88rem;
}

.banner-visual-shell {
    display: flex;
    min-width: 0;
    min-height: 100%;
    align-items: center;
    justify-content: center;
}

.banner-image,
.banner-image-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 220px;
    max-height: 290px;
    border-radius: 24px;
    border: 1px solid var(--surface-line);
    box-shadow: var(--shadow-lg);
    background: color-mix(in srgb, var(--surface-2) 78%, transparent);
    object-fit: contain;
    object-position: center center;
}

.home-cinematic-banner .banner-copy p {
    max-width: 42rem;
}

.home-cinematic-banner .banner-image {
    object-position: center center;
}

.banner-image-placeholder {
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at top left, var(--primary-glow), transparent 36%),
        linear-gradient(150deg, color-mix(in srgb, var(--surface-2) 78%, transparent), color-mix(in srgb, var(--surface-3) 72%, transparent));
}

.home-command-card {
    display: grid;
    gap: 16px;
    align-content: start;
}

.home-command-head {
    margin-bottom: 0;
}

.home-live-spotlight,
.home-action-card {
    display: grid;
    gap: 8px;
    transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}

.home-live-spotlight:hover,
.home-action-card:hover {
    transform: translateY(-2px);
    border-color: var(--surface-line-strong);
}

.home-live-spotlight-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.home-action-stack,
.home-mini-stream {
    display: grid;
    gap: 12px;
}

.future-composer-card .section-head,
.feed-stage-card .section-head,
.future-live-strip-card .section-head,
.future-live-grid-card .section-head {
    margin-bottom: 18px;
}

.future-composer-card textarea {
    min-height: 150px;
    font-size: 1.04rem;
}

.feed-stage-card,
.future-live-strip-card,
.future-live-grid-card,
.home-rail-card {
    position: relative;
    overflow: hidden;
}

.feed-update-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    padding: 16px 18px;
    border-radius: 20px;
    border: 1px solid color-mix(in srgb, var(--theme-primary) 30%, var(--surface-line));
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--theme-primary) 10%, transparent), color-mix(in srgb, var(--theme-accent) 8%, transparent)),
        color-mix(in srgb, var(--surface-1) 86%, transparent);
    box-shadow: var(--shadow-lg);
}

.feed-update-banner p {
    margin: 6px 0 0;
}

.feed-composer-card {
    margin-bottom: 18px;
}

.future-post-card {
    position: relative;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--theme-primary) 20%, var(--surface-line));
}

.future-post-card::after {
    content: "";
    position: absolute;
    inset: auto 18px 0 18px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--surface-line-strong), transparent);
    opacity: 0.42;
}

.post-head {
    align-items: flex-start;
}

.post-media,
.short-video,
.location-map-embed {
    border-color: var(--surface-line);
    box-shadow: var(--shadow-lg);
}

.post-video-shell {
    border-color: var(--surface-line);
    box-shadow: var(--shadow-lg);
}

.post-tip-box {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--theme-primary) 12%, transparent), color-mix(in srgb, var(--theme-accent) 10%, transparent)),
        color-mix(in srgb, var(--surface-1) 90%, transparent);
    border-color: color-mix(in srgb, var(--theme-primary) 30%, var(--surface-line));
}

.future-live-hero {
    padding: 24px;
}

.live-hub-hero {
    gap: 20px;
}

.live-hub-copy,
.live-hub-launch-shell {
    display: grid;
    gap: 16px;
    align-content: start;
}

.live-hub-copy h1 {
    margin: 0;
    font-size: clamp(2.2rem, 4vw, 3.8rem);
    letter-spacing: -0.04em;
}

.live-command-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.live-command-metric {
    display: grid;
    gap: 6px;
}

.live-command-metric strong {
    font-size: 1.2rem;
}

.future-live-summary-card,
.live-summary-card {
    min-height: 100%;
}

.live-summary-link {
    margin-top: 4px;
    font-weight: 700;
}

.messages-command-head {
    align-items: flex-start;
}

.messages-telemetry {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    min-width: min(360px, 100%);
}

.messages-telemetry-card {
    display: grid;
    gap: 4px;
}

.messages-telemetry-card strong {
    font-size: 1.35rem;
}

.conversation-list-shell,
.thread-panel-future {
    background: color-mix(in srgb, var(--surface-1) 64%, transparent);
    border: 1px solid var(--surface-line);
    border-radius: 24px;
    padding: 16px;
    box-shadow: var(--shadow-lg);
}

.conversation-list-intro {
    display: grid;
    gap: 8px;
}

.conversation-item {
    transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}

.conversation-item:hover,
.conversation-item.is-active {
    transform: translateY(-1px);
}

.future-thread-header {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--surface-line);
}

.thread-partner-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

.message-thread {
    border-radius: 22px;
    background:
        radial-gradient(circle at top, rgba(255, 255, 255, 0.03), transparent 36%),
        color-mix(in srgb, var(--surface-1) 52%, transparent);
    border: 1px solid var(--surface-line);
    padding: 16px 14px;
}

.message-bubble {
    background: color-mix(in srgb, var(--surface-2) 88%, transparent);
    border-color: var(--surface-line);
    box-shadow: var(--shadow-lg);
}

.message-bubble.is-own {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--theme-primary) 28%, transparent), color-mix(in srgb, var(--surface-2) 84%, transparent));
}

.future-message-form {
    padding-top: 6px;
}

.empty-thread-state {
    min-height: 420px;
    display: grid;
    place-items: center;
}

.future-profile-head {
    align-items: flex-start;
}

.friends-hero-card,
.friends-section-card {
    background:
        radial-gradient(circle at top right, rgba(96, 165, 250, 0.12), transparent 34%),
        linear-gradient(150deg, color-mix(in srgb, var(--surface-1) 92%, transparent), color-mix(in srgb, var(--surface-2) 84%, transparent));
}

.friends-search-form {
    margin-top: 16px;
}

.friends-grid-two-up {
    align-items: start;
}

.friends-card-grid {
    display: grid;
    gap: 14px;
}

.friend-directory-card {
    display: grid;
    gap: 14px;
}

.future-profile-hero {
    gap: 18px;
}

.future-profile-hero .profile-copy {
    gap: 16px;
}

.profile-layout-family .profile-stats-row .stat-card {
    background: color-mix(in srgb, var(--surface-2) 70%, rgba(126, 240, 194, 0.08));
}

.profile-layout-ministry .profile-summary {
    border-left: 3px solid color-mix(in srgb, var(--theme-accent) 58%, transparent);
    padding-left: 18px;
}

.profile-layout-minimal .info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.profile-layout-creator .profile-photo-trigger .avatar-frame,
.profile-layout-creator .avatar.avatar-xl {
    box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 0 30px var(--primary-glow);
}

.profile-action-dock {
    justify-content: flex-end;
}

.profile-mini-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.profile-location-card {
    position: relative;
}

.profile-inline-edit-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: color-mix(in srgb, var(--surface-2) 82%, transparent);
    color: var(--text-soft);
    text-decoration: none;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 0.18s ease, transform 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.profile-location-card.is-editable:hover .profile-inline-edit-link,
.profile-location-card.is-editable:focus-within .profile-inline-edit-link,
.profile-inline-edit-link:focus-visible {
    opacity: 1;
    transform: translateY(0);
}

.profile-inline-edit-link:hover,
.profile-inline-edit-link:focus-visible {
    color: var(--text-main);
    border-color: color-mix(in srgb, var(--theme-accent) 54%, var(--surface-line-strong));
}

@media (hover: none) {
    .profile-inline-edit-link {
        opacity: 1;
        transform: translateY(0);
    }
}

.profile-stats-row .stat-card {
    background: color-mix(in srgb, var(--surface-2) 76%, transparent);
}

.settings-lab-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.92fr);
    gap: 22px;
    align-items: center;
}

.settings-preview-stage {
    --preview-primary: var(--theme-primary);
    --preview-secondary: var(--theme-secondary);
    --preview-accent: var(--theme-accent);
    position: relative;
    padding: 18px;
    border-radius: 26px;
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--preview-primary) 32%, transparent), transparent 36%),
        radial-gradient(circle at bottom right, color-mix(in srgb, var(--preview-accent) 24%, transparent), transparent 34%),
        linear-gradient(155deg, color-mix(in srgb, var(--preview-secondary) 60%, transparent), color-mix(in srgb, var(--surface-2) 82%, transparent));
    border: 1px solid var(--surface-line);
    box-shadow: var(--shadow-lg);
}

.settings-preview-shell {
    display: grid;
    gap: 14px;
}

.settings-preview-topline {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.settings-preview-card {
    display: grid;
    gap: 16px;
    padding: 18px;
    border-radius: 22px;
    background: rgba(7, 12, 20, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px);
}

.settings-preview-card-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.settings-preview-swatches {
    display: flex;
    gap: 12px;
}

.settings-preview-swatches span {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: var(--shadow-lg);
}

.settings-preview-swatches span:nth-child(1) {
    background: var(--preview-primary);
}

.settings-preview-swatches span:nth-child(2) {
    background: var(--preview-secondary);
}

.settings-preview-swatches span:nth-child(3) {
    background: var(--preview-accent);
}

.settings-preview-mini-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.settings-preview-mini-grid article {
    display: grid;
    gap: 4px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.settings-theme-card .grid-three-up {
    align-items: end;
}

.settings-control-grid {
    margin-top: 8px;
}

.settings-toggle-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.toggle-field {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.toggle-field input {
    flex: 0 0 auto;
    margin-top: 3px;
}

.toggle-field span {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.toggle-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-sizing: border-box;
    overflow: hidden;
}

.toggle-card input {
    flex: 0 0 auto;
    margin-top: 3px;
}

.toggle-card span,
.toggle-card div {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    gap: 4px;
}

.toggle-card strong,
.toggle-card small,
.toggle-card p {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.toggle-card small {
    color: var(--text-soft);
}

.advertiser-provider-grid,
.advertiser-ops-grid,
.advertiser-leaderboard,
.advertiser-playbook-grid,
.advertiser-campaign-grid,
.advertiser-kpi-grid {
    display: grid;
    gap: 16px;
}

.advertiser-provider-grid,
.advertiser-playbook-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.advertiser-ops-grid,
.advertiser-leaderboard {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.advertiser-campaign-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.advertiser-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.advertiser-provider-card,
.advertiser-placement-card,
.advertiser-playbook-card,
.advertiser-creator-card,
.advertiser-campaign-card {
    display: grid;
    gap: 12px;
}

.advertiser-metric-stack,
.advertiser-provider-meta,
.advertiser-creator-metrics,
.advertiser-playbook-points {
    display: grid;
    gap: 8px;
}

.advertiser-provider-meta,
.advertiser-creator-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.advertiser-form-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.advertiser-keyline {
    margin-top: 4px;
    color: var(--text-soft);
}

.advertiser-inline-form {
    display: grid;
    gap: 12px;
}

.advertiser-provider-card form,
.advertiser-inline-form .button-row,
.advertiser-provider-card .button-row {
    margin-top: 2px;
}

.advertiser-score-pill {
    justify-self: start;
}

.advertiser-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-left: 18px;
}

.advertiser-callout {
    display: grid;
    gap: 10px;
}

.advertiser-callout p,
.advertiser-provider-card p,
.advertiser-placement-card p,
.advertiser-playbook-card p,
.advertiser-creator-card p {
    margin: 0;
}

.home-lane-card {
    margin-top: 22px;
}

.home-lane-grid,
.home-short-lane-grid {
    display: grid;
    gap: 16px;
}

.home-lane-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.home-short-lane-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-short-lane-card {
    display: grid;
    gap: 12px;
    background:
        linear-gradient(145deg, rgba(10, 13, 26, 0.96), rgba(6, 10, 21, 0.94)),
        radial-gradient(circle at top right, rgba(255, 96, 154, 0.12), transparent 30%);
}

.home-short-lane-video {
    width: 100%;
    aspect-ratio: 9 / 16;
    border-radius: 18px;
    object-fit: cover;
    background: #030812;
}

.home-short-lane-copy {
    display: grid;
    gap: 8px;
}

.home-short-lane-copy p,
.home-checkin-card p {
    margin: 0;
}

.color-picker-field input[type="color"] {
    border-radius: 18px;
    border: 1px solid var(--surface-line);
    background: color-mix(in srgb, var(--surface-1) 70%, transparent);
}

.empty-state {
    background: color-mix(in srgb, var(--surface-1) 66%, transparent);
    border: 1px dashed var(--surface-line);
}

body.surface-mode-light .card,
body.surface-mode-light .mini-card,
body.surface-mode-light .stat-card,
body.surface-mode-light .short-card,
body.surface-mode-light .topbar,
body.surface-mode-light .conversation-list-shell,
body.surface-mode-light .thread-panel-future {
    backdrop-filter: blur(20px);
}

@media (max-width: 1280px) {
    .app-layout {
        grid-template-columns: 240px minmax(0, 1fr) 300px;
    }

    .home-hero-grid,
    .live-hub-hero-grid,
    .settings-lab-hero {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    .topbar-shell,
    .topbar-brand-cluster,
    .topbar-status {
        align-items: flex-start;
    }

    .topbar-shell,
    .messages-command-head,
    .future-profile-head,
    .settings-preview-topline {
        flex-direction: column;
    }

    .app-layout {
        grid-template-columns: 1fr;
    }

    .banner-slide {
        grid-template-columns: 1fr;
        padding: 28px;
    }

    .banner-copy h1,
    .live-hub-copy h1 {
        max-width: none;
    }

    .banner-telemetry-row,
    .live-command-metrics,
    .messages-telemetry,
    .settings-preview-mini-grid {
        grid-template-columns: 1fr;
    }

    .messages-layout {
        grid-template-columns: 1fr;
    }

    .floating-message-layout {
        grid-template-columns: 1fr;
    }

    .profile-action-dock {
        justify-content: flex-start;
    }
}

@media (max-width: 720px) {
    .topbar {
        padding-inline: 16px;
    }

    .app-layout {
        padding: 18px 16px 28px;
    }

    .hero-banner {
        min-height: auto;
    }

    .banner-slide {
        min-height: auto;
    }

    .banner-image,
    .banner-image-placeholder {
        min-height: 180px;
        max-height: 220px;
    }

    .conversation-search {
        grid-template-columns: 1fr;
    }

    .floating-message-shell {
        padding: 12px;
    }

    .floating-message-panel {
        width: 100%;
        max-height: calc(100dvh - 24px);
        padding: 18px;
        border-radius: 26px;
    }

    .floating-message-panel-head,
    .floating-message-inbox-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .message-form,
    .future-message-form {
        grid-template-columns: 1fr;
    }

    .feed-update-banner {
        flex-direction: column;
        align-items: flex-start;
    }

    .message-bubble {
        width: 100%;
    }

    .info-grid,
    .grid-two-up,
    .grid-three-up,
    .live-card-grid,
    .short-grid {
        grid-template-columns: 1fr;
    }

    .live-video-shell {
        min-height: 640px;
    }

    .live-stage-box-grid {
        inset: 96px 14px 128px;
        grid-template-columns: 1fr;
        grid-auto-rows: minmax(220px, auto);
    }

    .live-stage-box,
    .live-stage-box.is-featured,
    .live-stage-box-grid.has-single-box .live-stage-box {
        grid-column: 1 / -1;
        grid-row: span 1;
    }

    .live-overlay-bar,
    .live-stage-request-row,
    .live-stage-request-board-head,
    .live-roster-head,
    .live-roster-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .live-quick-reactions-overlay,
    .live-roster-actions,
    .live-stream-feedback {
        justify-content: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .banner-slide,
    .quick-nav-link,
    .nav-link,
    .conversation-item,
    .live-summary-card,
    .home-live-spotlight,
    .home-action-card {
        transform: none !important;
    }
}

/* Mobile Repair Pass */

.topbar-shell,
.topbar-brand-cluster,
.topbar-status,
.quick-nav,
.app-layout,
.main-panel,
.sidebar,
.right-rail,
.live-room-stage,
.live-chat-panel,
.post-head-copy,
.inline-edit-form {
    min-width: 0;
}

@media (max-width: 980px) {
    body {
        background-attachment: scroll;
    }

    .topbar {
        padding: 12px 16px;
    }

    .topbar-shell,
    .topbar-brand-cluster,
    .topbar-status {
        width: 100%;
    }

    .topbar-shell {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
        align-items: center;
    }

    .topbar-status {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: auto;
        min-width: 0;
    }

    .topbar-brand-cluster {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
        flex-wrap: nowrap;
    }

    .brand {
        min-width: 0;
        flex: 1 1 auto;
    }

    .brand-copy {
        min-width: 0;
    }

    .topbar-scene {
        display: none;
    }

    .quick-nav,
    .sidebar {
        display: none;
    }

    .mobile-command-menu {
        display: block;
        overflow: visible;
        width: auto;
        min-width: 112px;
        max-width: min(44vw, 180px);
    }

    .mobile-command-panel {
        position: absolute;
        top: calc(100% + 12px);
        left: 0;
        right: 0;
        margin-top: 0;
        max-height: min(74dvh, calc(100dvh - 92px));
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .notification-dropdown-panel {
        left: 0;
        right: auto;
        width: min(420px, calc(100vw - 32px));
    }

    .app-layout,
    .app-layout.no-right-rail,
    .app-layout.no-sidebar.no-right-rail,
    .app-layout.no-sidebar.has-right-rail {
        grid-template-columns: 1fr;
        padding: 18px 16px 28px;
        gap: 18px;
    }

    .right-rail {
        gap: 16px;
    }

    .nav-link {
        justify-content: center;
        text-align: center;
        min-height: 46px;
    }

    .games-stage-shell {
        gap: 18px;
    }

    .arcade-board-topline {
        flex-direction: column;
        align-items: flex-start;
    }

    .post-head-actions {
        width: 100%;
    }

    .inline-edit-form {
        width: 100%;
        min-width: 0;
    }

    .comment-children {
        padding-left: 12px;
    }

    .live-room-layout {
        gap: 16px;
    }

    .live-video-shell,
    .live-video-player {
        min-height: clamp(340px, 58vh, 520px);
    }

    .live-stage-hud {
        left: 12px;
        right: 12px;
        gap: 8px;
    }

    .live-stage-chip {
        max-width: 100%;
        font-size: 0.8rem;
    }

    .live-stage-ribbon {
        top: 12px;
        right: 12px;
        bottom: auto;
        max-width: calc(100% - 24px);
    }

    .live-local-preview {
        height: 78px;
        border-radius: 14px;
    }

    .live-local-preview-shell {
        right: 12px;
        bottom: 132px;
        width: 112px;
    }

    .live-overlay-bar {
        left: 12px;
        right: 12px;
        bottom: 12px;
        padding: 10px 12px;
        flex-direction: column;
        align-items: stretch;
    }

    .live-quick-reactions-overlay {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .live-control-row,
    .live-chat-head,
    .live-page-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .live-chat-panel {
        padding: 16px;
    }
}

@media (max-width: 720px) {
    .topbar {
        padding: 10px 14px;
    }

    .topbar-shell {
        gap: 10px;
    }

    .brand {
        gap: 12px;
    }

    .brand-mark {
        width: 42px;
        height: 42px;
        border-radius: 16px;
    }

    .brand-copy strong {
        font-size: clamp(1.05rem, 4.8vw, 1.4rem);
        line-height: 1.02;
    }

    .topbar-scene-copy,
    .brand-copy small {
        display: none;
    }

    .mobile-command-menu {
        min-width: 96px;
        max-width: 40vw;
    }

    .mobile-command-menu summary {
        min-height: 44px;
        padding: 10px 12px;
        border-radius: 18px;
    }

    .mobile-command-summary-page {
        display: none;
    }

    .mobile-command-panel {
        padding: 14px;
        border-radius: 20px;
        max-height: min(78dvh, calc(100dvh - 84px));
    }

    .live-post-page[data-live-display-fit="auto"] .live-video-player,
    .live-post-page[data-live-display-fit="auto"] .live-stage-box-video,
    .live-post-page[data-live-display-fit="auto"] .live-local-preview {
        object-fit: contain;
        object-position: center center;
    }

    .mobile-command-profile {
        align-items: flex-start;
        flex-direction: column;
    }

    .mobile-command-grid {
        grid-template-columns: 1fr;
    }

    .profile-photo-lightbox {
        padding: 14px;
    }

    .profile-photo-lightbox-panel,
    .profile-camera-panel {
        width: 100%;
        padding: 16px;
        border-radius: 22px;
    }

    .profile-photo-lightbox-image {
        max-height: 68vh;
        border-radius: 22px;
    }

    .profile-camera-stage {
        min-height: min(58vh, 460px);
        border-radius: 22px;
    }

    .post-head {
        flex-direction: column;
    }

    .post-head-actions,
    .post-head-utility-row,
    .comment-thread-toolbar {
        width: 100%;
    }

    .post-head-actions {
        justify-items: stretch;
    }

    .post-head-utility-row {
        justify-content: space-between;
    }

    .comment-thread-toolbar {
        justify-content: flex-end;
    }

    .app-layout,
    .app-layout.no-right-rail,
    .app-layout.no-sidebar.no-right-rail,
    .app-layout.no-sidebar.has-right-rail {
        padding: 16px 14px 24px;
    }

    .games-mobile-controls {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .games-mobile-controls button {
        min-height: 56px;
        font-size: 1rem;
    }

    .hero-banner {
        border-radius: 24px;
    }

    .banner-slide {
        padding: 20px 18px;
        gap: 16px;
    }

    .banner-image,
    .banner-image-placeholder {
        min-height: 160px;
        max-height: 190px;
    }

    .comment-children {
        padding-left: 10px;
    }

    .live-post-page {
        padding: 14px;
        gap: 14px;
    }

    .live-room-layout {
        gap: 12px;
    }

    .live-video-shell,
    .live-video-player {
        min-height: min(92svh, 980px);
        aspect-ratio: 9 / 16;
        border-radius: 24px;
    }

    .live-stage-hud {
        left: 10px;
        right: 10px;
        top: 10px;
        max-width: calc(100% - 20px);
    }

    .live-stage-chip {
        padding: 7px 10px;
        font-size: 0.76rem;
    }

    .live-stage-ribbon {
        display: none;
    }

    .live-stage-box-grid {
        inset: var(--live-stage-top-offset, 76px) 10px var(--live-stage-bottom-offset, 152px);
        grid-template-columns: 1fr;
        grid-auto-rows: minmax(156px, auto);
        gap: 8px;
    }

    .live-stage-box,
    .live-stage-box.is-featured,
    .live-stage-box-grid.has-single-box .live-stage-box,
    .live-stage-box-grid.has-two-boxes .live-stage-box {
        grid-column: 1 / -1;
    }

    .live-stage-box {
        grid-row: span 1;
        grid-template-rows: minmax(204px, 1fr) auto;
    }

    .live-stage-box.is-featured,
    .live-stage-box-grid.has-single-box .live-stage-box {
        grid-row: span 3;
    }

    .live-stage-box-grid.has-two-boxes .live-stage-box.is-featured {
        grid-row: span 3;
    }

    .live-stage-box-grid.has-two-boxes .live-stage-box:not(.is-featured) {
        grid-row: span 2;
    }

    .live-stage-box-grid.layout-conversation.has-two-boxes .live-stage-box,
    .live-stage-box-grid.layout-grid.has-two-boxes .live-stage-box,
    .live-stage-box-grid.layout-conversation.has-two-boxes .live-stage-box.is-featured,
    .live-stage-box-grid.layout-grid.has-two-boxes .live-stage-box.is-featured {
        grid-row: span 3;
    }

    .live-stage-box-grid.has-three-boxes,
    .live-stage-box-grid.has-four-boxes,
    .live-video-shell.is-live-fullscreen .live-stage-box-grid.has-three-boxes,
    .live-video-shell.is-live-fullscreen .live-stage-box-grid.has-four-boxes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: minmax(0, 1fr);
        overflow: hidden;
        align-content: stretch;
    }

    .live-stage-box-grid.has-three-boxes .live-stage-box,
    .live-stage-box-grid.has-four-boxes .live-stage-box,
    .live-stage-box-grid.has-four-boxes .live-stage-box.is-featured {
        grid-column: auto;
        grid-row: auto;
    }

    .live-stage-box-grid.has-three-boxes .live-stage-box.is-featured {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .live-stage-box-grid.has-five-plus-boxes {
        align-content: start;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-right: 4px;
        scrollbar-width: thin;
    }

    .live-stage-box-grid.has-five-plus-boxes .live-stage-box,
    .live-stage-box-grid.has-five-plus-boxes .live-stage-box.is-featured {
        grid-column: 1 / -1;
        grid-row: span 1;
    }

    .live-stage-box.is-featured .live-stage-box-video-shell,
    .live-stage-box-grid.has-single-box .live-stage-box-video-shell {
        min-height: 360px;
    }

    .live-stage-box-video-shell {
        min-height: 208px;
    }

    .live-stage-box.is-compact {
        grid-template-rows: minmax(0, 1fr);
        padding: 6px;
    }

    .live-stage-box.is-compact .live-stage-box-video-shell,
    .live-stage-box-grid.has-three-boxes .live-stage-box.is-featured .live-stage-box-video-shell,
    .live-stage-box-grid.has-four-boxes .live-stage-box-video-shell {
        min-height: 0;
    }

    .live-stage-box.is-compact .live-stage-box-warning {
        left: 6px;
        right: 6px;
        bottom: 58px;
        padding: 8px 10px;
    }

    .live-stage-box.is-compact .live-stage-box-warning span {
        font-size: 0.74rem;
    }

    .live-stage-box.is-compact .live-stage-box-footer {
        left: 6px;
        right: 6px;
        bottom: 6px;
        gap: 6px;
        padding: 8px 9px;
        border-radius: 14px;
    }

    .live-stage-box.is-compact .live-stage-box-name {
        font-size: 0.8rem;
    }

    .live-stage-box.is-compact .live-stage-tag,
    .live-stage-box.is-compact .live-stage-box-compact-note {
        font-size: 0.68rem;
    }

    .live-stage-box.is-compact .live-stage-tag {
        padding: 4px 7px;
    }

    .live-stage-box.is-compact .live-stage-box-compact-action {
        min-height: 30px;
        padding-inline: 8px;
        font-size: 0.7rem;
    }

    .live-local-preview {
        height: 68px;
    }

    .live-local-preview-shell {
        right: 10px;
        bottom: 126px;
        width: 96px;
    }

    .live-overlay-bar {
        left: 10px;
        right: 10px;
        bottom: 10px;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "utility reactions"
            "feedback reactions";
        align-items: end;
        gap: 8px;
        padding: 9px 10px;
    }

    .live-display-menu {
        right: 10px;
        bottom: 10px;
    }

    .live-stage-utility-actions {
        grid-area: utility;
        width: 100%;
        justify-content: flex-start;
    }

    .live-stream-feedback {
        grid-area: feedback;
        width: 100%;
        justify-content: flex-start;
    }

    .live-quick-reactions-overlay {
        grid-area: reactions;
        width: auto;
        justify-content: flex-start;
        flex-direction: column;
        align-items: flex-end;
        margin-left: auto;
    }

    .live-chat-panel {
        padding: 14px;
        border-radius: 20px;
    }

    .live-chat-thread {
        max-height: 320px;
    }

    .live-stage-box-owner-actions,
    .live-stage-box-feedback,
    .live-roster-actions,
    .live-stage-request-actions {
        width: 100%;
    }

    .live-stage-box-manage-menu {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .live-stage-control-actions {
        width: 100%;
    }

    .live-video-shell.is-live-fullscreen {
        min-height: var(--live-viewport-height, 100svh);
        height: var(--live-viewport-height, 100svh);
        border-radius: 0;
    }

    .live-video-shell.is-live-fullscreen .live-stage-hud {
        left: 8px;
        right: 8px;
        top: max(8px, env(safe-area-inset-top));
        max-width: calc(100% - 16px);
    }

    .live-video-shell.is-live-fullscreen .live-stage-box-grid {
        inset: var(--live-stage-top-offset, 68px) 8px var(--live-stage-bottom-offset, 144px);
        grid-auto-rows: minmax(156px, auto);
        gap: 8px;
    }

    .live-video-shell.is-live-fullscreen .live-overlay-bar {
        left: 8px;
        right: 8px;
        bottom: max(8px, env(safe-area-inset-bottom));
    }

    .live-fullscreen-chat {
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;
        width: auto;
        max-height: min(62svh, 520px);
        border-radius: 24px 24px 0 0;
    }

    .live-fullscreen-exit {
        top: max(8px, env(safe-area-inset-top));
        right: max(8px, env(safe-area-inset-right));
    }

    .inline-edit-form {
        padding: 12px;
    }
}

@media (hover: none), (pointer: coarse) {
    .games-mobile-controls {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.commerce-hero-card,
.shorts-hero-card,
.arcade-revival-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 20px;
}

.commerce-hero-card {
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    background:
        radial-gradient(circle at top right, rgba(134, 226, 255, 0.16), transparent 34%),
        radial-gradient(circle at bottom left, rgba(255, 181, 98, 0.12), transparent 28%),
        linear-gradient(145deg, rgba(10, 20, 37, 0.96), rgba(6, 11, 22, 0.94));
}

.shorts-hero-card {
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
    background:
        radial-gradient(circle at top right, rgba(255, 96, 154, 0.16), transparent 34%),
        radial-gradient(circle at bottom left, rgba(126, 240, 194, 0.14), transparent 26%),
        linear-gradient(145deg, rgba(16, 16, 30, 0.96), rgba(7, 10, 21, 0.94));
}

.arcade-revival-hero {
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
    background:
        radial-gradient(circle at top right, rgba(134, 226, 255, 0.18), transparent 34%),
        radial-gradient(circle at bottom left, rgba(247, 183, 51, 0.14), transparent 30%),
        linear-gradient(145deg, rgba(10, 20, 37, 0.96), rgba(5, 10, 20, 0.94));
}

.commerce-hero-copy,
.commerce-hero-grid,
.shorts-hero-copy,
.shorts-hero-metrics,
.arcade-revival-copy,
.arcade-revival-telemetry,
.marketplace-launch-grid,
.marketplace-listing-grid,
.marketplace-feature-grid,
.membership-ladder,
.marketplace-stage-grid,
.marketplace-trust-list,
.marketplace-spotlight-list,
.marketplace-form-grid,
.shorts-page-grid,
.shorts-reel-grid,
.shorts-side-column,
.shorts-creator-list,
.shorts-intent-stack,
.arcade-world-grid,
.arcade-system-grid,
.arcade-support-column,
.arcade-score-grid,
.arcade-leaderboard-stack {
    display: grid;
    gap: 16px;
}

.commerce-hero-grid,
.shorts-hero-metrics,
.arcade-revival-telemetry {
    align-content: center;
}

.commerce-pulse-card,
.shorts-metric-card,
.arcade-telemetry-card,
.marketplace-lane-card,
.marketplace-feature-card,
.membership-option-card,
.marketplace-trust-card,
.marketplace-spotlight-card,
.shorts-creator-card,
.arcade-world-card,
.arcade-roadmap-card,
.arcade-side-card {
    display: grid;
    gap: 8px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
        rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.marketplace-launch-grid,
.marketplace-stage-grid,
.shorts-page-grid,
.arcade-system-grid {
    margin-top: 22px;
}

.marketplace-launch-grid,
.marketplace-stage-grid,
.shorts-page-grid,
.arcade-world-grid,
.arcade-system-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.marketplace-membership-card {
    background:
        radial-gradient(circle at top right, rgba(255, 181, 98, 0.16), transparent 34%),
        linear-gradient(145deg, rgba(21, 19, 35, 0.94), rgba(7, 10, 21, 0.92));
}

.marketplace-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.marketplace-listing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.marketplace-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.membership-option-card p,
.marketplace-feature-card p,
.marketplace-trust-card p,
.marketplace-spotlight-card p,
.shorts-creator-card p,
.arcade-world-card p,
.commerce-pulse-card p,
.arcade-telemetry-card p {
    margin: 0;
}

.marketplace-spotlight-head,
.marketplace-listing-head,
.future-short-head,
.shorts-creator-stats,
.marketplace-listing-meta,
.marketplace-studio-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}

.marketplace-listing-head {
    align-items: flex-start;
    justify-content: space-between;
}

.marketplace-listing-card {
    gap: 14px;
    min-height: 100%;
    background:
        linear-gradient(145deg, rgba(13, 19, 34, 0.96), rgba(6, 10, 20, 0.92)),
        radial-gradient(circle at top right, rgba(126, 240, 194, 0.1), transparent 34%);
}

.marketplace-listing-card.status-draft {
    border-color: rgba(255, 181, 98, 0.28);
    background:
        linear-gradient(145deg, rgba(24, 19, 16, 0.96), rgba(12, 10, 16, 0.92)),
        radial-gradient(circle at top right, rgba(255, 181, 98, 0.14), transparent 34%);
}

.marketplace-listing-card.status-archived {
    opacity: 0.82;
    border-style: dashed;
}

.marketplace-listing-meta {
    color: var(--text-soft);
    font-size: 0.9rem;
}

.marketplace-listing-actions {
    margin-top: auto;
}

.marketplace-studio-note {
    justify-content: space-between;
}

.profile-storefront-grid {
    margin-top: 22px;
}

.profile-storefront-card {
    display: grid;
    gap: 16px;
    align-content: start;
    background:
        radial-gradient(circle at top right, rgba(255, 181, 98, 0.1), transparent 34%),
        linear-gradient(145deg, rgba(10, 16, 29, 0.95), rgba(7, 10, 21, 0.93));
}

.profile-support-pitch-card {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--theme-primary) 12%, transparent), color-mix(in srgb, var(--theme-accent) 12%, transparent)),
        color-mix(in srgb, var(--surface-1) 88%, transparent);
}

.shorts-page-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
    align-items: start;
}

.shorts-reel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.future-short-card {
    display: grid;
    gap: 14px;
    overflow: hidden;
    background:
        radial-gradient(circle at top right, rgba(255, 96, 154, 0.12), transparent 28%),
        linear-gradient(145deg, rgba(10, 13, 26, 0.96), rgba(6, 10, 21, 0.94));
}

.future-short-media-shell {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(3, 8, 18, 0.92);
}

.future-short-video {
    width: 100%;
    aspect-ratio: 9 / 16;
    display: block;
    object-fit: cover;
    background: #020611;
}

.future-short-overlay {
    position: absolute;
    inset: 14px 14px auto 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.future-short-kind {
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(4, 8, 17, 0.66);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: white;
    font-size: 0.78rem;
    font-weight: 700;
}

.future-short-copy {
    display: grid;
    gap: 12px;
}

.future-short-copy p {
    margin: 0;
    line-height: 1.6;
}

.future-short-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    color: var(--text-soft);
    font-size: 0.92rem;
}

.shorts-side-card {
    display: grid;
    gap: 16px;
}

.shorts-main-panel {
    gap: 24px;
}

body.shorts-immersive-page .app-layout.no-sidebar.no-right-rail {
    width: min(1880px, 100%);
    padding: 14px 18px 22px;
}

body.shorts-immersive-page .shorts-main-panel {
    gap: 18px;
}

@media (min-width: 981px) {
    body.shorts-immersive-page .shorts-app-shell {
        align-items: stretch;
    }

    body.shorts-immersive-page .shorts-stage-head-card {
        display: none;
    }

    body.shorts-immersive-page .shorts-stage-column {
        position: sticky;
        top: 14px;
        align-self: start;
        height: calc(100dvh - 36px);
        gap: 0;
        min-height: calc(100dvh - 36px);
    }

    body.shorts-immersive-page .shorts-player-shell {
        height: 100%;
        min-height: 100%;
    }

    body.shorts-immersive-page .shorts-player-stack {
        height: 100%;
        max-height: 100%;
        gap: 0;
        padding-right: 0;
    }

    body.shorts-immersive-page .shorts-player-card {
        min-height: 100%;
    }

    body.shorts-immersive-page .shorts-player-frame {
        min-height: calc(100dvh - 36px);
    }

    body.shorts-immersive-page .shorts-creator-column {
        top: 14px;
        max-height: calc(100dvh - 36px);
        overflow-y: auto;
        padding-right: 6px;
    }
}

.shorts-app-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
    gap: 24px;
    align-items: start;
}

.shorts-stage-column,
.shorts-creator-column,
.shorts-stage-head,
.shorts-search-form,
.shorts-stage-metrics,
.shorts-player-copy,
.shorts-creator-form,
.shorts-creator-summary-row,
.shorts-intent-stack {
    display: grid;
    gap: 16px;
}

.shorts-stage-head-card,
.shorts-creator-card,
.shorts-side-card {
    background:
        radial-gradient(circle at top right, rgba(255, 96, 154, 0.12), transparent 30%),
        radial-gradient(circle at bottom left, rgba(126, 240, 194, 0.1), transparent 28%),
        linear-gradient(145deg, rgba(8, 12, 24, 0.95), rgba(5, 9, 19, 0.92));
}

.shorts-stage-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 18px;
}

.shorts-stage-head h1 {
    margin: 0 0 10px;
    font-size: clamp(2rem, 4vw, 3.35rem);
    line-height: 0.95;
}

.shorts-stage-head p {
    margin: 0;
    max-width: 62ch;
}

.shorts-overview-card {
    gap: 18px;
}

.shorts-overview-head {
    align-items: start;
    gap: 18px;
}

.shorts-overview-card h1 {
    margin: 0;
    font-size: clamp(1.9rem, 3vw, 2.8rem);
    line-height: 0.96;
}

.shorts-overview-card > p {
    margin: 0;
}

.shorts-search-form {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
}

.shorts-search-form .stack-form {
    gap: 8px;
}

.shorts-stage-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.shorts-metric-card {
    gap: 6px;
    min-height: 100%;
}

.shorts-metric-card strong {
    font-size: clamp(1.55rem, 2vw, 2rem);
}

.shorts-player-shell {
    position: relative;
}

.shorts-thread-drawer {
    position: fixed;
    inset: 0;
    z-index: 65;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    justify-items: end;
    padding: 24px;
}

.shorts-thread-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(4, 8, 18, 0.68);
}

.shorts-thread-panel-shell {
    position: relative;
    z-index: 1;
    width: min(460px, calc(100vw - 32px));
    height: min(calc(100dvh - 48px), 920px);
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(circle at top right, rgba(255, 96, 154, 0.1), transparent 28%),
        linear-gradient(145deg, rgba(8, 12, 24, 0.98), rgba(4, 8, 18, 0.96));
    box-shadow: 0 26px 90px rgba(0, 0, 0, 0.48);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
}

.shorts-thread-shell-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 20px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.shorts-thread-shell-head h2 {
    margin: 6px 0 0;
}

.shorts-thread-shell-body {
    min-height: 0;
    overflow-y: auto;
    padding: 0 20px 20px;
}

.shorts-thread-panel,
.shorts-thread-head,
.shorts-thread-post-meta,
.shorts-thread-comments {
    display: grid;
    gap: 16px;
}

.shorts-thread-panel {
    padding-top: 18px;
}

.shorts-thread-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
}

.shorts-thread-head h3 {
    margin: 6px 0 0;
}

.shorts-thread-caption {
    color: var(--text-main);
    line-height: 1.6;
}

.shorts-thread-toolbar {
    align-items: center;
}

.shorts-thread-comments .comments {
    display: grid;
    gap: 14px;
}

.shorts-thread-comment-form {
    position: sticky;
    bottom: 0;
    padding: 14px;
    border-radius: 20px;
    background: rgba(8, 12, 24, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px);
}

.shorts-thread-fallback-card,
.shorts-thread-fallback-status {
    margin-top: 10px;
}

.shorts-thread-fallback-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.shorts-player-stack {
    display: grid;
    gap: 20px;
    max-height: calc(100vh - 210px);
    overflow-y: auto;
    padding-right: 6px;
    scroll-snap-type: y mandatory;
    overscroll-behavior: contain;
}

.shorts-player-stack::-webkit-scrollbar {
    width: 10px;
}

.shorts-player-stack::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 999px;
}

.shorts-player-card {
    scroll-snap-align: start;
    opacity: 0.7;
    transform: scale(0.985);
    transition: transform 220ms ease, opacity 220ms ease;
    outline: none;
}

.shorts-player-card.is-focused .shorts-player-frame,
.shorts-player-card.is-active .shorts-player-frame {
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.42);
}

.shorts-player-card.is-active {
    opacity: 1;
    transform: scale(1);
}

.shorts-player-frame {
    position: relative;
    min-height: min(82vh, 980px);
    border-radius: 30px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #020611;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.shorts-player-video,
.shorts-player-video-wash {
    position: absolute;
    inset: 0;
}

.shorts-player-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    background: #020611;
}

.shorts-player-video-wash {
    background:
        linear-gradient(180deg, rgba(4, 8, 18, 0.22) 0%, rgba(4, 8, 18, 0.04) 20%, rgba(4, 8, 18, 0.16) 52%, rgba(4, 8, 18, 0.8) 100%),
        linear-gradient(90deg, rgba(4, 8, 18, 0.1), transparent 26%, transparent 72%, rgba(4, 8, 18, 0.22));
    pointer-events: none;
}

.shorts-player-reaction-layer {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
}

.shorts-reaction-burst {
    position: absolute;
    left: clamp(22px, 8vw, 54px);
    bottom: calc(122px + env(safe-area-inset-bottom, 0px));
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 999px;
    background: rgba(4, 8, 18, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: white;
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.26);
    backdrop-filter: blur(18px);
    opacity: 0;
    transform: translate3d(0, 22px, 0) scale(0.96);
    animation: shortsReactionBurst 2200ms ease-out forwards;
    max-width: min(72vw, 360px);
}

.shorts-reaction-burst strong {
    font-size: 1.08rem;
    line-height: 1;
}

.shorts-reaction-burst span {
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
}

.shorts-reaction-burst em {
    font-size: 0.9rem;
    line-height: 1.35;
    font-style: normal;
    color: rgba(255, 255, 255, 0.96);
}

.shorts-reaction-burst.is-like {
    background: linear-gradient(135deg, rgba(26, 62, 149, 0.82), rgba(56, 163, 255, 0.58));
}

.shorts-reaction-burst.is-love {
    background: linear-gradient(135deg, rgba(166, 28, 78, 0.82), rgba(255, 94, 149, 0.6));
}

.shorts-reaction-burst.is-pray {
    background: linear-gradient(135deg, rgba(153, 108, 24, 0.82), rgba(255, 208, 126, 0.58));
}

.shorts-reaction-burst.is-comment {
    background: linear-gradient(135deg, rgba(28, 82, 61, 0.84), rgba(88, 218, 165, 0.56));
}

@keyframes shortsReactionBurst {
    0% {
        opacity: 0;
        transform: translate3d(0, 24px, 0) scale(0.96);
    }

    12% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }

    74% {
        opacity: 1;
        transform: translate3d(0, -54px, 0) scale(1.01);
    }

    100% {
        opacity: 0;
        transform: translate3d(0, -96px, 0) scale(0.98);
    }
}

.shorts-player-topbar,
.shorts-player-bottom {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
}

.shorts-player-topbar {
    top: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 18px;
}

.shorts-player-topbar-leading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.shorts-player-topbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.shorts-player-volume-control {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(4, 8, 18, 0.56);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(16px);
}

.shorts-player-volume-control span {
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
}

.shorts-player-volume-control input[type="range"] {
    width: 108px;
}

.shorts-player-position {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 999px;
    background: rgba(4, 8, 18, 0.54);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: white;
    font-size: 0.84rem;
    font-weight: 700;
}

.shorts-player-toolbar-button {
    min-height: 42px;
    padding-inline: 14px;
    background: rgba(4, 8, 18, 0.54);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: white;
}

.shorts-player-nav-button {
    text-decoration: none;
}

.shorts-player-settings {
    position: relative;
}

.shorts-player-settings summary::-webkit-details-marker {
    display: none;
}

.shorts-player-settings-toggle {
    min-width: 42px;
    justify-content: center;
    font-size: 1rem;
    list-style: none;
}

.shorts-player-settings-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(280px, calc(100vw - 36px));
    display: grid;
    gap: 10px;
    padding: 14px;
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
        linear-gradient(160deg, rgba(5, 16, 31, 0.94), rgba(8, 19, 38, 0.96));
    border: 1px solid rgba(117, 229, 255, 0.18);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(18px);
}

.shorts-player-settings-option {
    justify-content: flex-start;
    min-height: 42px;
    background: rgba(4, 8, 18, 0.52);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
}

.shorts-player-settings-option[aria-pressed="false"] {
    border-color: rgba(255, 214, 102, 0.3);
    background: rgba(56, 34, 10, 0.54);
}

.shorts-player-bottom {
    bottom: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: end;
    padding: 24px 20px calc(30px + env(safe-area-inset-bottom, 0px));
}

.shorts-player-copy {
    max-width: min(70ch, calc(100% - 102px));
    align-content: end;
}

.shorts-player-creator-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.shorts-player-caption {
    font-size: 1rem;
    line-height: 1.65;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

.shorts-player-keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.shorts-keyword-pill {
    text-decoration: none;
}

.shorts-player-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.92rem;
}

.shorts-player-links {
    align-items: center;
    padding-bottom: 4px;
}

.shorts-player-links .button-link {
    backdrop-filter: blur(16px);
}

.shorts-player-action-rail {
    display: grid;
    align-content: end;
    justify-items: center;
    gap: 12px;
}

.shorts-action-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(4, 8, 18, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.22);
}

.shorts-action-avatar .avatar-frame,
.shorts-action-avatar .avatar {
    width: 56px;
    height: 56px;
}

.shorts-action-button {
    width: 78px;
    min-height: 78px;
    border-radius: 26px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 10px;
    background: rgba(4, 8, 18, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: white;
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.24);
}

.shorts-action-button strong {
    font-size: 0.88rem;
    line-height: 1;
}

.shorts-action-delete-form {
    display: contents;
}

.shorts-player-private-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.shorts-player-private-metrics .signal-pill strong {
    margin-left: 6px;
}

.shorts-action-link {
    text-decoration: none;
}

.shorts-action-button.is-active {
    border-color: rgba(255, 255, 255, 0.28);
    background: linear-gradient(145deg, rgba(255, 96, 154, 0.34), rgba(126, 240, 194, 0.24));
}

.shorts-action-button-dislike.is-active {
    font-weight: 800;
    border-color: rgba(255, 214, 102, 0.45);
    background: linear-gradient(145deg, rgba(255, 182, 98, 0.3), rgba(255, 89, 111, 0.22));
}

.shorts-action-button-delete {
    border-color: rgba(255, 132, 132, 0.24);
    background: rgba(56, 7, 13, 0.58);
}

.shorts-creator-column {
    position: sticky;
    top: 88px;
    align-content: start;
}

body.shorts-immersive-page .shorts-creator-column {
    top: 18px;
}

.shorts-creator-card,
.shorts-side-card {
    gap: 18px;
}

.shorts-creator-form textarea {
    min-height: 120px;
    resize: vertical;
}

.shorts-creator-submit-row {
    display: grid;
    gap: 12px;
}

.shorts-creator-card-summary {
    gap: 12px;
}

.shorts-creator-summary-row {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
}

.shorts-creator-stats {
    color: var(--text-soft);
    font-size: 0.9rem;
}

.shorts-empty-state {
    min-height: 360px;
    display: grid;
    place-items: center;
    text-align: center;
}

.arcade-world-card {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(145deg, rgba(10, 20, 37, 0.92), rgba(4, 10, 20, 0.9)),
        radial-gradient(circle at top right, rgba(134, 226, 255, 0.15), transparent 42%);
}

.arcade-world-card-alt {
    background:
        linear-gradient(145deg, rgba(21, 19, 35, 0.94), rgba(7, 10, 21, 0.92)),
        radial-gradient(circle at top right, rgba(255, 183, 98, 0.16), transparent 38%);
}

.arcade-system-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
    align-items: start;
}

.arcade-stage-command-card {
    display: grid;
    gap: 20px;
    overflow: hidden;
    background:
        radial-gradient(circle at top right, rgba(134, 226, 255, 0.12), transparent 30%),
        linear-gradient(145deg, rgba(9, 17, 31, 0.96), rgba(4, 8, 17, 0.93));
}

.arcade-stage-command-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.arcade-command-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.92fr);
    gap: 22px;
    align-items: start;
}

.arcade-stage-column,
.arcade-side-dock {
    display: grid;
    gap: 16px;
}

.arcade-side-card {
    display: grid;
    gap: 16px;
}

.arcade-score-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.arcade-score-grid strong {
    font-size: 1.4rem;
}

.arcade-leaderboard-stack {
    grid-template-columns: 1fr;
}

.arcade-touch-grid {
    margin-top: 2px;
}

.arcade-stage-command-card.is-arcade-fullscreen,
.arcade-stage-command-card:fullscreen,
.arcade-stage-command-card:-webkit-full-screen {
    width: 100%;
    max-width: none;
    min-height: 100dvh;
    margin: 0;
    padding: clamp(16px, 3vw, 28px);
    border-radius: 0;
    border: 0;
    overflow: auto;
}

.arcade-stage-command-card.is-arcade-fullscreen .arcade-command-grid,
.arcade-stage-command-card:fullscreen .arcade-command-grid,
.arcade-stage-command-card:-webkit-full-screen .arcade-command-grid {
    min-height: 0;
}

.arcade-stage-command-card.is-arcade-fullscreen #tetris-board,
.arcade-stage-command-card:fullscreen #tetris-board,
.arcade-stage-command-card:-webkit-full-screen #tetris-board {
    max-height: min(72dvh, 760px);
    width: 100%;
    margin-inline: auto;
}

@media (max-width: 1100px) {
    .commerce-hero-card,
    .shorts-hero-card,
    .arcade-revival-hero,
    .shorts-page-grid,
    .arcade-system-grid {
        grid-template-columns: 1fr;
    }

    .marketplace-launch-grid,
    .marketplace-stage-grid,
    .arcade-world-grid {
        grid-template-columns: 1fr;
    }

    .shorts-app-shell {
        grid-template-columns: 1fr;
    }

    .shorts-creator-column {
        position: static;
    }

    .shorts-stage-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    body.shorts-immersive-page .app-layout.no-sidebar.no-right-rail {
        width: 100%;
        padding: 0 0 calc(18px + env(safe-area-inset-bottom, 0px));
        gap: 18px;
    }

    body.shorts-immersive-page .shorts-main-panel,
    body.shorts-immersive-page .shorts-stage-column {
        gap: 0;
    }

    body.shorts-immersive-page .shorts-app-shell {
        gap: 18px;
    }

    body.shorts-immersive-page .shorts-stage-head-card {
        display: none;
    }

    body.shorts-immersive-page .shorts-player-stack {
        gap: 0;
        max-height: 100dvh;
        padding-right: 0;
    }

    body.shorts-immersive-page .shorts-player-frame {
        min-height: 100dvh;
        border-radius: 0;
        border-inline: 0;
    }

    body.shorts-immersive-page .shorts-creator-column {
        padding-inline: 14px;
    }
}

@media (max-width: 820px) {
    .short-studio-panel {
        padding: 18px;
    }

    .short-studio-stage {
        width: min(100%, 340px);
        height: min(52vh, 540px);
    }

    .short-studio-modal.has-camera-stream .short-studio-stage {
        width: min(100%, 300px);
        height: min(42vh, 380px);
        max-height: calc(100dvh - 250px);
    }

    .shorts-reel-grid,
    .marketplace-feature-grid,
    .marketplace-listing-grid,
    .marketplace-form-grid {
        grid-template-columns: 1fr;
    }

    .arcade-stage-command-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .arcade-command-grid {
        grid-template-columns: 1fr;
    }

    .arcade-stage-command-card.is-arcade-fullscreen .arcade-stage-column,
    .arcade-stage-command-card:fullscreen .arcade-stage-column,
    .arcade-stage-command-card:-webkit-full-screen .arcade-stage-column {
        width: min(100%, calc((100dvh - 160px) * 9 / 16));
        margin-inline: auto;
    }

    body.shorts-immersive-page .app-layout.no-sidebar.no-right-rail {
        padding: 0 0 calc(18px + env(safe-area-inset-bottom, 0px));
    }

    .shorts-stage-head {
        grid-template-columns: 1fr;
    }

    .shorts-overview-head {
        grid-template-columns: 1fr;
    }

    .shorts-search-form {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    body.shorts-immersive-page .shorts-player-stack {
        max-height: 100dvh;
        gap: 0;
        padding-right: 0;
    }

    body.shorts-immersive-page .shorts-player-frame {
        min-height: 100dvh;
        border-radius: 0;
    }

    .shorts-thread-drawer {
        padding: 12px;
    }

    .shorts-thread-panel-shell {
        width: min(100vw - 24px, 420px);
        height: min(calc(100dvh - 24px), 100%);
        border-radius: 24px;
    }

    .shorts-player-topbar {
        padding: calc(14px + env(safe-area-inset-top, 0px)) 14px 14px;
        flex-direction: column;
        align-items: flex-start;
    }

    .shorts-player-topbar-leading {
        width: 100%;
        justify-content: space-between;
        gap: 8px;
    }

    .shorts-player-topbar-actions {
        width: 100%;
        justify-content: flex-start;
        gap: 8px;
    }

    .shorts-player-position {
        display: none;
    }

    .shorts-player-volume-control {
        width: 100%;
        justify-content: space-between;
    }

    .shorts-player-volume-control input[type="range"] {
        flex: 1 1 auto;
        min-width: 0;
    }

    .shorts-player-bottom {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
        padding: 18px 14px calc(24px + env(safe-area-inset-bottom, 0px));
    }

    .shorts-player-copy {
        max-width: calc(100% - 86px);
        gap: 12px;
    }

    .shorts-player-caption {
        font-size: 0.95rem;
        line-height: 1.5;
    }

    .shorts-player-links {
        display: none;
    }

    .shorts-action-avatar {
        width: 64px;
        height: 64px;
    }

    .shorts-action-avatar .avatar-frame,
    .shorts-action-avatar .avatar {
        width: 48px;
        height: 48px;
    }

    .shorts-action-button {
        width: 64px;
        min-height: 64px;
        border-radius: 22px;
        font-size: 0.86rem;
    }

    .shorts-action-button strong {
        font-size: 0.8rem;
    }

    .shorts-stage-metrics {
        grid-template-columns: 1fr 1fr;
    }

    .profile-photo-editor-stage,
    .avatar-photo-editor {
        width: 196px;
        height: 196px;
    }
}

@media (max-width: 640px) {
    .floating-message-launcher {
        right: 16px;
        bottom: 16px;
        padding: 13px 16px;
    }

    .floating-message-panel {
        padding: 16px;
        border-radius: 24px 24px 0 0;
    }

    .floating-message-shell {
        padding: 0;
    }

    .short-studio-modal {
        padding: 12px;
    }

    .shorts-thread-drawer {
        align-items: end;
        justify-items: stretch;
        padding: 0;
    }

    .shorts-thread-panel-shell {
        width: 100%;
        height: min(78dvh, 100%);
        border-radius: 24px 24px 0 0;
        border-bottom: 0;
    }

    .shorts-thread-shell-head,
    .shorts-thread-shell-body {
        padding-inline: 16px;
    }

    .shorts-thread-head {
        grid-template-columns: 1fr;
    }

    .short-studio-panel {
        border-radius: 24px;
        max-height: calc(100dvh - 24px);
    }

    .short-studio-stage {
        width: min(100%, 300px);
        height: min(48vh, 460px);
    }

    .short-studio-modal.has-camera-stream .short-studio-stage {
        width: min(100%, 260px);
        height: min(36vh, 300px);
        max-height: calc(100dvh - 220px);
    }

    .short-studio-meta {
        align-items: flex-start;
    }

    .composer-short-preview {
        width: 100%;
    }

    .future-short-overlay {
        inset: 12px 12px auto 12px;
        flex-direction: column;
        align-items: flex-start;
    }

    .profile-photo-editor-stage,
    .avatar-photo-editor {
        width: 176px;
        height: 176px;
    }

    .profile-camera-modal {
        padding: 12px;
    }

    .profile-camera-head,
    .profile-camera-actions {
        justify-content: stretch;
    }

    .profile-camera-head {
        flex-direction: column;
    }

    .profile-camera-actions > * {
        flex: 1 1 160px;
    }

    .settings-toggle-grid,
    .home-lane-grid,
    .home-short-lane-grid {
        grid-template-columns: 1fr;
    }

    .advertiser-provider-grid,
    .advertiser-ops-grid,
    .advertiser-leaderboard,
    .advertiser-playbook-grid,
    .advertiser-campaign-grid,
    .advertiser-form-grid,
    .advertiser-provider-meta,
    .advertiser-creator-metrics,
    .advertiser-kpi-grid {
        grid-template-columns: 1fr;
    }
}

.recipes-hero-card,
.recipe-detail-hero,
.discover-hero-card {
    display: grid;
    gap: 24px;
    align-items: start;
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--theme-primary) 18%, transparent), transparent 42%),
        linear-gradient(145deg, color-mix(in srgb, var(--surface-1) 92%, black 8%), color-mix(in srgb, var(--surface-2) 88%, black 12%));
}

.recipes-hero-card,
.recipe-detail-hero {
    grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.9fr);
}

.discover-hero-card {
    grid-template-columns: minmax(0, 1.3fr) minmax(260px, 0.9fr);
}

.recipes-hero-copy,
.recipe-detail-copy,
.discover-hero-copy {
    display: grid;
    gap: 16px;
}

.recipes-hero-copy h1,
.recipe-detail-copy h1,
.discover-hero-copy h1 {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.02;
}

.recipes-hero-copy p,
.recipe-detail-copy p,
.discover-hero-copy p {
    margin: 0;
    max-width: 70ch;
}

.recipes-hero-metrics,
.discover-hero-metrics,
.recipes-featured-grid,
.recipes-catalog-grid,
.discover-spotlight-grid,
.discover-track-grid,
.recipe-detail-grid {
    display: grid;
    gap: 16px;
}

.recipes-hero-metrics,
.discover-hero-metrics {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.recipes-metric-card,
.discover-metric-card {
    display: grid;
    gap: 8px;
    min-height: 120px;
}

.recipes-metric-card strong,
.discover-metric-card strong {
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    line-height: 1;
}

.recipes-search-card,
.discover-section-stack,
.recipes-section-stack {
    display: grid;
    gap: 16px;
}

.recipes-search-form,
.discover-search-form {
    display: grid;
    gap: 14px;
}

.recipes-search-form input,
.discover-search-form input {
    min-height: 58px;
    font-size: 1rem;
}

.recipe-topic-row,
.discover-pill-row {
    gap: 10px;
}

.recipes-featured-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.recipes-catalog-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.recipe-card,
.discover-result-card,
.discover-track-card,
.recipe-side-card,
.recipe-panel {
    display: grid;
    gap: 14px;
}

.recipe-card {
    overflow: hidden;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--surface-1) 88%, black 12%), color-mix(in srgb, var(--surface-2) 90%, black 10%));
}

.recipe-card-featured {
    min-height: 100%;
}

.recipe-card-media,
.recipe-detail-hero-media {
    border-radius: 24px;
    overflow: hidden;
    min-height: 220px;
    background: color-mix(in srgb, var(--surface-2) 92%, black 8%);
    border: 1px solid var(--surface-line);
}

.recipe-card-media img,
.recipe-detail-hero-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.recipe-card-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 220px;
    padding: 24px;
    background:
        radial-gradient(circle at top, color-mix(in srgb, var(--theme-secondary) 28%, transparent), transparent 48%),
        linear-gradient(160deg, color-mix(in srgb, var(--surface-2) 94%, black 6%), color-mix(in srgb, var(--surface-3) 92%, black 8%));
}

.recipe-card-copy {
    display: grid;
    gap: 12px;
}

.recipe-card-copy h3,
.discover-result-card h3 {
    margin: 0;
}

.recipe-card-copy p,
.discover-result-card p,
.recipe-related-card span,
.discover-track-grid .discover-result-card span {
    margin: 0;
    color: var(--text-soft);
}

.recipe-card-meta,
.recipe-detail-meta,
.discover-result-meta,
.recipe-side-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    color: var(--text-dim);
    font-size: 0.95rem;
}

.recipe-preview-list {
    display: grid;
    gap: 8px;
    color: var(--text-dim);
    font-size: 0.95rem;
}

.recipe-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
    gap: 20px;
    align-items: start;
}

.recipe-detail-main,
.recipe-detail-side {
    display: grid;
    gap: 20px;
}

.recipe-story-block {
    display: grid;
    gap: 12px;
}

.recipe-detail-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.recipe-list {
    margin: 0;
    padding-left: 20px;
    display: grid;
    gap: 10px;
}

.recipe-list-steps {
    padding-left: 24px;
}

.recipe-related-list {
    display: grid;
    gap: 12px;
}

.recipe-related-card {
    display: grid;
    gap: 8px;
    text-decoration: none;
    color: inherit;
}

.recipe-related-card strong {
    color: var(--text-main);
}

.discover-hero-copy {
    align-content: start;
}

.discover-spotlight-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.discover-result-card {
    text-decoration: none;
    color: inherit;
}

.discover-result-card-spotlight {
    min-height: 100%;
}

.discover-track-stack {
    display: grid;
    gap: 18px;
}

.discover-track-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.discover-track-grid .discover-result-card {
    min-height: 100%;
}

.discover-track-grid .discover-result-card strong,
.discover-result-card-spotlight strong {
    color: var(--text-main);
}

@media (max-width: 980px) {
    .recipes-hero-card,
    .recipe-detail-hero,
    .discover-hero-card,
    .recipe-detail-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .recipes-hero-copy h1,
    .recipe-detail-copy h1,
    .discover-hero-copy h1 {
        font-size: clamp(1.8rem, 10vw, 2.5rem);
    }

    .recipes-hero-metrics,
    .discover-hero-metrics,
    .recipes-featured-grid,
    .recipes-catalog-grid,
    .discover-spotlight-grid,
    .discover-track-grid,
    .recipe-detail-grid {
        grid-template-columns: 1fr;
    }

    .recipe-card-media,
    .recipe-detail-hero-media,
    .recipe-card-placeholder {
        min-height: 180px;
    }
}