:root {
    --wow-primary: #1877f2;
    --wow-primary-dark: #145dbf;
    --wow-primary-soft: rgba(24, 119, 242, 0.14);
    --wow-ink: #18212c;
    --wow-muted: #667489;
    --wow-surface: #ffffff;
    --wow-surface-alt: #f3f6fb;
    --wow-border: #dde4ef;
    --wow-shadow: 0 8px 22px rgba(15, 34, 67, 0.08);
    --wow-shell: #fbfcfe;
    --wow-content-top-gap: 1.35rem;
    --wow-main-inner-top: 1.9rem;
}

html,
body {
    margin: 0;
    min-height: 100%;
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    background:
        radial-gradient(circle at top left, rgba(24, 119, 242, 0.12), transparent 24%),
        radial-gradient(circle at right, rgba(24, 33, 44, 0.08), transparent 25%),
        linear-gradient(180deg, #f0f2f5 0%, #e8edf5 100%);
    color: var(--wow-ink);
}

body {
    color-scheme: light;
}

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

.muted-copy,
.mud-secondary-text {
    color: var(--wow-muted) !important;
}

.main-shell {
    padding: var(--wow-main-inner-top) 1.25rem 2.5rem;
    width: auto;
    max-width: none;
    margin: 0;
    margin-top: var(--wow-content-top-gap);
    box-sizing: border-box;
}

.main-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.page-transition-shell {
    margin-top: 0;
    animation: wow-page-enter 220ms ease-out both;
}

.page-transition-shell > * {
    animation: wow-section-enter 240ms ease-out both;
}

.motion-group > * {
    opacity: 0;
    animation: wow-card-enter 240ms ease-out both;
}

.motion-group > *:nth-child(1) {
    animation-delay: 40ms;
}

.motion-group > *:nth-child(2) {
    animation-delay: 90ms;
}

.motion-group > *:nth-child(3) {
    animation-delay: 140ms;
}

.motion-group > *:nth-child(4) {
    animation-delay: 190ms;
}

.post-card-new {
    animation: wow-post-slide-in 320ms cubic-bezier(0.2, 0.85, 0.28, 1) both;
    transform-origin: top center;
}

@keyframes wow-page-enter {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes wow-section-enter {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes wow-card-enter {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes wow-post-slide-in {
    from {
        opacity: 0;
        transform: translateY(-28px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.social-appbar {
    backdrop-filter: blur(16px);
    background: rgba(255, 255, 255, 0.96) !important;
    border-bottom: 1px solid rgba(221, 228, 239, 0.9);
    color: var(--wow-ink) !important;
    gap: 0.75rem;
    padding-inline: 1rem !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

.social-appbar .mud-button-root {
    color: var(--wow-ink) !important;
    font-weight: 700;
}

.social-appbar .mud-icon-button {
    color: var(--wow-ink) !important;
    border-radius: 14px;
}

.social-appbar .mud-icon-button:hover {
    background: rgba(24, 33, 44, 0.06) !important;
}

.social-appbar .mud-button-root:hover {
    background: rgba(24, 33, 44, 0.06) !important;
}

.social-appbar .mud-chip {
    color: var(--wow-primary-dark) !important;
    background: rgba(24, 119, 242, 0.12) !important;
}

.social-drawer {
    background: transparent !important;
    margin-top: 0;
    padding-top: calc(var(--wow-content-top-gap) + var(--wow-main-inner-top));
}

.brand-lockup {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.top-nav-icons,
.top-nav-account {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.brand-mark {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--wow-primary);
    color: white;
    font-weight: 800;
}

.nav-shell {
    margin: 0 0.75rem 0.75rem;
    padding: 0.9rem !important;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid rgba(221, 228, 239, 0.9);
    box-shadow: var(--wow-shadow);
}

.nav-panel-header {
    margin-bottom: 0.65rem;
    padding: 0.35rem 0.35rem 0.75rem;
    border-bottom: 1px solid var(--wow-border);
}

.nav-section-label {
    display: block;
    margin: 0.65rem 0.4rem 0.4rem;
    color: var(--wow-muted) !important;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.nav-shell .mud-nav-link {
    border-radius: 10px;
    margin-bottom: 0.2rem;
    min-height: 2.5rem;
    color: var(--wow-ink) !important;
    font-weight: 600;
    padding-inline: 0.65rem !important;
}

.nav-shell .mud-nav-link:hover {
    background: rgba(24, 33, 44, 0.06) !important;
}

.nav-shell .mud-nav-link.active {
    color: var(--wow-primary-dark) !important;
    background: rgba(24, 119, 242, 0.12) !important;
}

.nav-tip-card {
    margin-top: 0.85rem;
    padding: 0.85rem;
    border-radius: 12px;
    background: #f5f7fb;
    border: 1px solid var(--wow-border);
}

.hero-panel {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.18), transparent 28%),
        linear-gradient(140deg, rgba(17, 24, 39, 0.98), rgba(24, 119, 242, 0.94));
    color: white;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(24, 33, 44, 0.14);
}

.home-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 0.95fr);
    gap: 1.5rem;
}

.landing-shell {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.landing-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
    gap: 1.5rem;
    padding: 1.75rem;
    border-radius: 14px;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.16), transparent 30%),
        linear-gradient(135deg, #1d2432 0%, #315d96 45%, #1877f2 100%);
    color: white;
    box-shadow: 0 12px 30px rgba(24, 33, 44, 0.14);
}

.landing-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.landing-kicker {
    color: rgba(232, 242, 255, 0.82) !important;
    letter-spacing: 0.08em;
}

.landing-title {
    max-width: 13ch;
    line-height: 1.02;
    margin: 0.45rem 0 1rem;
    font-size: clamp(2.5rem, 4vw, 4.6rem) !important;
}

.landing-subtitle {
    max-width: 42rem;
    color: rgba(236, 245, 255, 0.9);
    font-size: 1.05rem;
    line-height: 1.7;
}

.landing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin: 1.5rem 0;
}

.landing-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
}

.landing-stat {
    padding: 0.9rem 1rem;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(10px);
}

.landing-stat-value,
.landing-stat-label {
    display: block;
}

.landing-stat-value {
    font-size: 1rem;
    font-weight: 800;
    margin-bottom: 0.3rem;
}

.landing-stat-label {
    color: rgba(255, 247, 240, 0.78);
    font-size: 0.85rem;
    line-height: 1.45;
}

.landing-preview {
    display: flex;
    align-items: stretch;
}

.preview-window {
    width: 100%;
    padding: 1rem;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(12px);
}

.preview-bar {
    display: flex;
    gap: 0.45rem;
    margin-bottom: 1rem;
}

.preview-bar span {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.6);
}

.preview-composer,
.preview-post {
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--wow-ink);
    box-shadow: 0 20px 40px rgba(17, 24, 39, 0.1);
}

.preview-composer {
    display: flex;
    gap: 0.85rem;
    align-items: center;
    padding: 1rem;
    margin-bottom: 1rem;
}

.preview-composer-lines,
.preview-post-meta {
    flex: 1;
}

.preview-avatar {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--wow-primary), #5fa8ff);
    color: white;
    font-weight: 800;
}

.preview-avatar-small {
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 12px;
    font-size: 0.85rem;
}

.preview-post {
    padding: 1rem;
}

.preview-post-header {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 0.9rem;
}

.preview-line {
    height: 0.7rem;
    border-radius: 999px;
    background: linear-gradient(90deg, #e5ebf3, #f3f6fa);
    margin-bottom: 0.55rem;
}

.preview-line-strong {
    width: 70%;
    height: 0.85rem;
}

.preview-line-short {
    width: 46%;
}

.preview-line-tiny {
    width: 24%;
    margin-bottom: 0;
}

.preview-line-full {
    width: 100%;
}

.preview-line-medium {
    width: 78%;
    margin-bottom: 0;
}

.preview-reactions {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--wow-border);
    color: var(--wow-muted);
    font-size: 0.82rem;
}

.landing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.landing-card {
    min-height: 160px;
}

.landing-status-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 248, 252, 0.92));
}

.home-hero {
    padding: 2.2rem;
}

.hero-kicker {
    color: rgba(255, 255, 255, 0.72) !important;
}

.hero-copy {
    max-width: 48rem;
    color: rgba(255, 255, 255, 0.86);
}

.hero-actions {
    margin-top: 1.5rem;
}

.feed-page-header,
.page-header-card {
    margin-bottom: 1.25rem;
}

.feed-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(290px, 0.9fr);
    gap: 1rem;
    align-items: start;
    min-width: 0;
}

.feed-main-column,
.feed-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.feed-card {
    padding: 1.1rem;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid rgba(221, 228, 239, 0.95);
    box-shadow: var(--wow-shadow);
}

.sidebar-card {
    padding: 1.2rem;
}

.notifications-actions-card {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.9rem;
}

.notifications-list {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.notifications-item {
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.notifications-item-unread {
    border-color: rgba(24, 119, 242, 0.45);
    box-shadow: 0 8px 20px rgba(24, 119, 242, 0.12);
}

.notifications-item-read {
    opacity: 0.92;
}

.notifications-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.55rem;
}

.notifications-item-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.notifications-item-meta {
    margin-top: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.notifications-item-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bell-menu-header {
    min-width: 320px;
    font-weight: 800;
    color: var(--wow-ink);
}

.bell-menu-empty {
    min-width: 320px;
    color: var(--wow-muted);
}

.bell-menu-item .mud-menu-item-text {
    width: 100%;
}

.bell-menu-item-content {
    min-width: 320px;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.bell-menu-item-title {
    font-weight: 700;
    color: var(--wow-ink);
    line-height: 1.25;
    white-space: normal;
}

.bell-menu-item-body {
    color: var(--wow-muted);
    font-size: 0.86rem;
    line-height: 1.35;
    white-space: normal;
}

.bell-menu-item-time {
    color: var(--wow-muted);
    font-size: 0.75rem;
}

.bell-menu-item-unread {
    background: rgba(24, 119, 242, 0.08);
}

.bell-menu-item-unread:hover {
    background: rgba(24, 119, 242, 0.14) !important;
}

.bell-dropdown-shell {
    position: relative;
}

.bell-trigger-button {
    position: relative;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: var(--wow-ink);
    background: transparent;
    cursor: pointer;
}

.bell-trigger-button:hover {
    background: rgba(24, 33, 44, 0.06);
}

.bell-unread-dot {
    position: absolute;
    top: -0.2rem;
    right: -0.2rem;
    min-width: 1.05rem;
    height: 1.05rem;
    border-radius: 999px;
    background: #d32f2f;
    color: #fff;
    font-size: 0.68rem;
    line-height: 1.05rem;
    text-align: center;
    font-weight: 700;
    padding: 0 0.2rem;
    border: 2px solid #fff;
}

.bell-dropdown-backdrop {
    position: fixed;
    inset: 0;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    z-index: 1200;
}

.bell-dropdown-panel {
    position: fixed;
    top: 4.2rem;
    right: 1rem;
    width: min(360px, 92vw);
    max-height: 72vh;
    overflow: auto;
    background: #fff;
    border: 1px solid var(--wow-border);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(24, 33, 44, 0.18);
    z-index: 1300;
}

.bell-dropdown-header {
    font-weight: 800;
    color: var(--wow-ink);
    padding: 0.85rem 0.9rem;
    border-bottom: 1px solid var(--wow-border);
}

.bell-dropdown-empty {
    padding: 0.95rem 0.9rem;
    color: var(--wow-muted);
}

.bell-dropdown-item {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    border-bottom: 1px solid rgba(221, 228, 239, 0.6);
    background: transparent;
    padding: 0.75rem 0.9rem;
    cursor: pointer;
}

.bell-dropdown-item:last-of-type {
    border-bottom: 0;
}

.bell-dropdown-item-unread {
    background: rgba(24, 119, 242, 0.08);
}

.bell-dropdown-item:hover {
    background: rgba(24, 33, 44, 0.06);
}

.bell-dropdown-item-title {
    font-weight: 700;
    color: var(--wow-ink);
    line-height: 1.25;
}

.bell-dropdown-item-body {
    margin-top: 0.2rem;
    color: var(--wow-muted);
    font-size: 0.86rem;
    line-height: 1.3;
}

.bell-dropdown-item-time {
    margin-top: 0.3rem;
    color: var(--wow-muted);
    font-size: 0.74rem;
}

.bell-dropdown-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--wow-border);
}

.bell-dropdown-action {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 2.45rem;
    border: 0;
    background: #fff;
    color: var(--wow-primary-dark);
    font-weight: 700;
    cursor: pointer;
}

.bell-dropdown-action:first-child {
    border-right: 1px solid var(--wow-border);
}

.bell-dropdown-action:hover {
    background: rgba(24, 119, 242, 0.1);
}

.right-side-panel {
    position: sticky;
    top: 1.25rem;
    margin-top: 0;
}

.friends-side-card {
    padding: 1rem;
}

.friends-side-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.85rem;
}

.friends-side-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.friends-side-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.45rem 0.5rem;
    border-radius: 10px;
}

.friends-side-item:hover {
    background: rgba(24, 33, 44, 0.05);
}

.friends-side-avatar {
    width: 2.2rem;
    height: 2.2rem;
}

.friends-side-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.friends-side-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--wow-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.friends-side-handle {
    font-size: 0.78rem;
    color: var(--wow-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 740px) {
    .notifications-item-meta {
        flex-direction: column;
        align-items: flex-start;
    }
}

.profile-card-header,
.composer-header,
.post-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 0.9rem;
}

.profile-avatar,
.feed-avatar {
    background: linear-gradient(135deg, var(--wow-primary), #4f9cf9) !important;
    color: white !important;
}

.feed-avatar {
    width: 3rem;
    height: 3rem;
}

.profile-avatar {
    width: 3.5rem !important;
    height: 3.5rem !important;
    font-size: 1rem;
}

.profile-headline {
    margin: 1rem 0;
}

.profile-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 0.75rem;
}

.metric-value,
.metric-label {
    display: block;
}

.metric-value {
    font-size: 1.1rem;
    font-weight: 700;
}

.metric-label {
    font-size: 0.8rem;
    color: var(--wow-muted);
}

.composer-card {
    padding: 1.2rem;
}

.composer-card-modern {
    padding: 0.95rem 1rem;
    background: var(--wow-surface);
    border: 1px solid var(--wow-border);
    box-shadow: var(--wow-shadow);
}

.composer-card-tight {
    padding: 0.8rem 0.9rem;
}

.composer-inline-form {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.composer-inline-form-expanded {
    gap: 0.85rem;
}

.composer-formatting-panel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.3rem 0 0.2rem 3.6rem;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-10px);
    transition: max-height 260ms ease, opacity 180ms ease, transform 220ms ease, padding-top 180ms ease;
}

.composer-formatting-panel-expanded {
    max-height: 24rem;
    opacity: 1;
    transform: translateY(0);
}

.composer-toolbar,
.composer-choice-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.composer-stack-label {
    display: inline-block;
    margin-bottom: 0.45rem;
    color: var(--wow-muted);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.composer-format-button,
.composer-choice-chip,
.composer-emoji-chip {
    min-height: 2.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--wow-border);
    border-radius: 999px;
    background: var(--wow-surface);
    color: var(--wow-ink);
    font: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.composer-format-button:hover,
.composer-choice-chip:hover,
.composer-emoji-chip:hover {
    border-color: rgba(24, 119, 242, 0.34);
    background: rgba(24, 119, 242, 0.08);
    transform: translateY(-1px);
}

.composer-choice-chip-selected {
    border-color: rgba(24, 119, 242, 0.42);
    background: rgba(24, 119, 242, 0.12);
    color: var(--wow-primary-dark);
}

.composer-theme-swatch {
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 0 1px rgba(24, 33, 44, 0.08);
}

.composer-theme-swatch-sunset {
    background: linear-gradient(135deg, #1f3c66, #1877f2);
}

.composer-theme-swatch-ocean {
    background: linear-gradient(135deg, #193459, #4cb2ff);
}

.composer-theme-swatch-mint {
    background: linear-gradient(135deg, #16594e, #90f0cf);
}

.composer-theme-swatch-midnight {
    background: linear-gradient(135deg, #111827, #3a3d70);
}

.composer-font-preview {
    font-size: 0.95rem;
    font-weight: 700;
}

.composer-font-preview-serif {
    font-family: Georgia, "Times New Roman", serif;
}

.composer-font-preview-display {
    font-family: "Trebuchet MS", "Segoe UI", sans-serif;
    letter-spacing: 0.04em;
}

.composer-emoji-row {
    gap: 0.4rem;
}

.composer-emoji-chip {
    padding-inline: 0.65rem;
    font-size: 1.1rem;
}

.composer-inline-shell {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.85rem;
    align-items: center;
}

.composer-inline-avatar {
    width: 2.75rem !important;
    height: 2.75rem !important;
}

.composer-inline-input {
    width: 100%;
    min-height: 3.1rem;
    max-height: 10rem;
    padding: 0.85rem 1rem;
    border: 0;
    border-radius: 999px;
    background: var(--wow-surface-alt);
    color: var(--wow-ink);
    font: inherit;
    font-size: 1.03rem;
    resize: vertical;
    box-sizing: border-box;
    transition: min-height 180ms ease, border-radius 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.composer-inline-input::placeholder {
    color: var(--wow-muted);
}

.composer-inline-input:focus {
    outline: 2px solid rgba(24, 119, 242, 0.2);
    background: #eef3fb;
}

.composer-inline-input-expanded {
    min-height: 5.75rem;
    border-radius: 28px;
}

.composer-inline-tools {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.composer-tool-button {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--wow-muted);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.composer-tool-button:hover {
    background: rgba(24, 33, 44, 0.06);
    color: var(--wow-ink);
    transform: translateY(-1px);
}

.composer-submit-button {
    background: var(--wow-primary-soft);
    color: var(--wow-primary-dark);
}

.composer-submit-button:hover {
    background: rgba(24, 119, 242, 0.2);
    color: var(--wow-primary-dark);
}

.composer-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.composer-inline-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-left: 3.6rem;
    min-height: 1.2rem;
}

.composer-inline-hint {
    color: var(--wow-muted);
    font-size: 0.78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.composer-form {
    margin-top: 1rem;
}

.composer-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
}

.composer-chip {
    background: var(--wow-primary-soft);
}

.social-field,
.auth-field {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-bottom: 1rem;
}

.social-field label,
.auth-field label {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--wow-muted);
}

.social-field textarea,
.social-field input,
.auth-field input,
.comment-form input {
    width: 100%;
    padding: 0.95rem 1rem;
    border-radius: 18px;
    border: 1px solid var(--wow-border);
    background: var(--wow-shell);
    color: var(--wow-ink);
    font: inherit;
    box-sizing: border-box;
}

.field-help {
    color: var(--wow-muted);
    font-size: 0.82rem;
}

.profile-link-text {
    color: var(--wow-ink);
    font-weight: 700;
}

.profile-link-subtle {
    color: var(--wow-muted);
}

.profile-link-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.avatar-image {
    display: block;
    border-radius: 999px;
    object-fit: cover;
    background: var(--wow-surface);
    flex-shrink: 0;
}

.social-field textarea {
    resize: vertical;
    min-height: 7rem;
}

.social-field textarea:focus,
.social-field input:focus,
.auth-field input:focus,
.comment-form input:focus {
    outline: 2px solid rgba(24, 119, 242, 0.22);
    border-color: var(--wow-primary);
}

.post-card {
    padding: 1.2rem;
    animation: wow-card-enter 220ms ease-out both;
}

.post-card-text {
    padding: 1.25rem;
}

.post-author-block {
    min-width: 0;
}

.post-header-main {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.post-menu {
    position: relative;
}

.post-menu[open] .post-menu-trigger {
    background: rgba(24, 33, 44, 0.06);
}

.post-menu-trigger {
    list-style: none;
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    cursor: pointer;
    color: var(--wow-muted);
    font-weight: 800;
    user-select: none;
}

.post-menu-trigger::-webkit-details-marker {
    display: none;
}

.post-menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.4rem);
    width: min(18rem, 72vw);
    padding: 0.75rem;
    border-radius: 18px;
    background: var(--wow-surface);
    border: 1px solid var(--wow-border);
    box-shadow: var(--wow-shadow);
    z-index: 4;
}

.post-edit-form {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-bottom: 0.65rem;
}

.post-edit-input {
    width: 100%;
    min-height: 6.5rem;
    padding: 0.85rem 0.95rem;
    border-radius: 14px;
    border: 1px solid var(--wow-border);
    background: var(--wow-surface-alt);
    color: var(--wow-ink);
    font: inherit;
    resize: vertical;
    box-sizing: border-box;
}

.post-menu-action {
    width: 100%;
    padding: 0.75rem 0.9rem;
    border-radius: 12px;
    border: 0;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.post-menu-action-primary {
    background: var(--wow-primary-soft);
    color: var(--wow-primary-dark);
}

.post-menu-action-danger {
    background: rgba(201, 65, 43, 0.1);
    color: #b73f2b;
}

.post-body {
    margin: 1rem 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.post-body-rich {
    color: var(--wow-ink);
    line-height: 1.72;
    font-size: 1rem;
    white-space: normal;
}

.post-body-rich h1,
.post-body-rich h2,
.post-body-rich h3,
.post-body-rich p {
    margin: 0;
}

.post-body-rich h1,
.post-body-rich h2,
.post-body-rich h3 {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    text-decoration: none;
}

.post-body-rich p + p,
.post-body-rich p + h1,
.post-body-rich p + h2,
.post-body-rich p + h3,
.post-body-rich h1 + p,
.post-body-rich h2 + p,
.post-body-rich h3 + p {
    margin-top: 0.85rem;
}

.post-body-rich h1 {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    line-height: 1.08;
}

.post-body-rich h2 {
    font-size: clamp(1.45rem, 3.2vw, 1.95rem);
    line-height: 1.14;
}

.post-body-rich h3 {
    font-size: clamp(1.15rem, 2.4vw, 1.4rem);
    line-height: 1.22;
}

.post-body-themed {
    padding: 1.45rem;
    border-radius: 28px;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.post-theme-sunset .post-body-themed {
    background: linear-gradient(135deg, #1d3557 0%, #4b6ea8 50%, #1877f2 100%);
}

.post-theme-ocean .post-body-themed {
    background: linear-gradient(135deg, #193459 0%, #2565a7 42%, #4cb2ff 100%);
}

.post-theme-mint .post-body-themed {
    background: linear-gradient(135deg, #17564e 0%, #23866f 45%, #6fe3bc 100%);
}

.post-theme-midnight .post-body-themed {
    background: linear-gradient(135deg, #111827 0%, #232a47 52%, #41478f 100%);
}

.post-font-clean .post-body-rich {
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

.post-font-serif .post-body-rich {
    font-family: Georgia, "Times New Roman", serif;
}

.post-font-display .post-body-rich {
    font-family: "Segoe UI", "Trebuchet MS", sans-serif;
    letter-spacing: 0.02em;
}

.post-media-grid {
    display: grid;
    gap: 0.45rem;
    margin-bottom: 1rem;
}

.media-count-1 {
    grid-template-columns: 1fr;
}

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

.media-count-3 {
    grid-template-columns: 1.25fr 0.75fr;
    grid-template-rows: repeat(2, minmax(150px, 1fr));
}

.media-count-3 .post-image-grid-item:first-child {
    grid-row: 1 / span 2;
}

.post-image-grid-item {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 220px;
    max-height: 420px;
    object-fit: cover;
    border-radius: 24px;
    border: 1px solid var(--wow-border);
}

.reaction-bar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.65rem;
    padding: 0.9rem 0 0.8rem;
    border-top: 1px solid rgba(221, 228, 239, 0.8);
    border-bottom: 1px solid rgba(221, 228, 239, 0.8);
}

.reaction-bar form {
    margin: 0;
}

.reaction-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--wow-muted);
    font-size: 0.88rem;
}

.reaction-meta-inline {
    margin-left: 0.1rem;
}

.reaction-action-form {
    display: flex;
    margin: 0;
}

.reaction-icon-button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--wow-border);
    border-radius: 12px;
    background: var(--wow-surface);
    color: var(--wow-muted);
    cursor: pointer;
}

.reaction-icon-button-active {
    background: rgba(24, 119, 242, 0.14);
    border-color: rgba(24, 119, 242, 0.2);
    color: var(--wow-primary-dark);
}

.reaction-count,
.reaction-meta-count {
    font-size: 0.9rem;
    font-weight: 600;
}

.comment-thread {
    padding-top: 1rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.comment-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.comment-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.7rem;
    align-items: start;
}

.comment-avatar {
    width: 2rem;
    height: 2rem;
    margin-top: 0.15rem;
}

.comment-bubble {
    padding: 0.8rem 0.95rem;
    border-radius: 18px;
    background: var(--wow-surface-alt);
}

.comment-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.35rem;
    font-size: 0.8rem;
}

.comment-author {
    font-weight: 700;
}

.comment-user-name,
.comment-time {
    color: var(--wow-muted);
}

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

.comment-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
}

.empty-state-card,
.placeholder-shell {
    padding: 1.4rem;
}

.profile-page-shell {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.profile-page-fb-shell {
    max-width: 1120px;
    margin: 0 auto;
}

.profile-action-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: flex-end;
}

.profile-action-stack-inline {
    align-items: center;
}

.profile-hero-card {
    padding: 0;
    overflow: hidden;
    animation: wow-card-enter 220ms ease-out both;
    border-radius: 14px;
}

.profile-cover {
    height: 340px;
    background:
        linear-gradient(135deg, rgba(29, 36, 50, 0.92), rgba(24, 119, 242, 0.72)),
        linear-gradient(180deg, #f3f6fb, #dde4ef);
    background-size: cover;
    background-position: center;
}

.profile-hero-content {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: end;
    padding: 1.2rem 1.4rem 0.8rem;
    margin-top: -4.8rem;
}

.profile-page-avatar {
    width: 9.5rem !important;
    height: 9.5rem !important;
    border: 5px solid rgba(255, 255, 255, 0.98);
    box-shadow: var(--wow-shadow);
}

.profile-page-avatar-image {
    display: block;
    border-radius: 999px;
    object-fit: cover;
    background: var(--wow-surface);
}

.profile-identity {
    min-width: 0;
    padding-top: 3.65rem;
}

.profile-subline {
    margin-top: 0.35rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem;
    font-weight: 600;
    color: var(--wow-ink);
}

.profile-bio {
    margin: 0.8rem 0;
}

.profile-meta-line {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    color: var(--wow-muted);
    font-size: 0.92rem;
}

.profile-meta-line a {
    color: var(--wow-primary-dark);
}

.profile-page-metrics {
    padding: 0.2rem 1.4rem 1.05rem;
    border-top: 1px solid var(--wow-border);
}

.profile-tab-strip {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.75rem 1.1rem;
    border-top: 1px solid var(--wow-border);
}

.profile-tab-item {
    border: 0;
    background: transparent;
    color: var(--wow-muted);
    padding: 0.62rem 0.85rem;
    border-radius: 9px;
    font-weight: 700;
    cursor: pointer;
}

.profile-tab-item:hover {
    background: rgba(24, 33, 44, 0.05);
    color: var(--wow-ink);
}

.profile-tab-item-active {
    color: var(--wow-primary-dark);
    background: rgba(24, 119, 242, 0.11);
}

.profile-content-grid {
    display: grid;
    grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.profile-left-column,
.profile-right-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.profile-info-card {
    padding: 1.15rem;
}

.profile-meta-stack {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.profile-meta-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--wow-muted);
    font-size: 0.93rem;
}

.profile-meta-row .mud-icon-root {
    font-size: 1.1rem;
    color: var(--wow-ink);
}

.profile-meta-row a {
    color: var(--wow-primary-dark);
}

.profile-posts-header-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.9rem;
}

.profile-follow-button {
    min-width: 9rem;
    padding: 0.66rem 1.05rem;
    border: 0;
    border-radius: 10px;
    background: var(--wow-primary);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(24, 119, 242, 0.18);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.profile-follow-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(24, 119, 242, 0.22);
}

.profile-message-button {
    min-width: 9rem;
    padding: 0.66rem 1.05rem;
    border-radius: 10px;
    border: 1px solid var(--wow-border);
    background: var(--wow-surface);
    color: var(--wow-ink);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.profile-following-button {
    background: var(--wow-surface-alt);
    color: var(--wow-primary-dark);
    box-shadow: none;
    border: 1px solid var(--wow-border);
}

.profile-action-link-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.profile-edit-card {
    max-width: 920px;
    animation: wow-card-enter 220ms ease-out both;
}

.auth-panel {
    max-width: 760px;
    animation: wow-card-enter 220ms ease-out both;
}

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

.messages-shell {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap: 1rem;
}

.messages-inbox,
.messages-thread {
    min-height: 70vh;
    display: flex;
    flex-direction: column;
}

.messages-pane-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.messages-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.messages-list-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.85rem;
    border-radius: 18px;
    background: var(--wow-surface-alt);
}

.messages-list-item-active {
    background: rgba(24, 119, 242, 0.12);
}

.messages-list-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
}

.messages-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.messages-list-name {
    font-weight: 700;
}

.messages-list-time,
.messages-list-preview {
    color: var(--wow-muted);
    font-size: 0.85rem;
}

.messages-list-preview {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.messages-unread-chip {
    min-width: 1.6rem;
    height: 1.6rem;
    padding: 0 0.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--wow-primary);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
}

.messages-thread-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.messages-thread-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.35rem 0 1rem;
}

.messages-thread-empty {
    margin: auto;
    text-align: center;
}

.message-row {
    display: flex;
}

.message-row-own {
    justify-content: flex-end;
}

.message-bubble-card {
    max-width: min(34rem, 85%);
    padding: 0.85rem 1rem;
    border-radius: 20px;
    background: var(--wow-surface-alt);
}

.message-bubble-own {
    background: rgba(24, 119, 242, 0.14);
}

.message-meta-line {
    display: flex;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.35rem;
    color: var(--wow-muted);
    font-size: 0.78rem;
}

.messages-compose-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: end;
    padding-top: 1rem;
    border-top: 1px solid var(--wow-border);
}

.messages-compose-form textarea {
    width: 100%;
    min-height: 5.5rem;
    padding: 0.9rem 1rem;
    border-radius: 18px;
    border: 1px solid var(--wow-border);
    background: var(--wow-surface-alt);
    color: var(--wow-ink);
    font: inherit;
    resize: vertical;
    box-sizing: border-box;
}

.messages-send-button {
    width: auto;
    min-width: 7rem;
    border: 0;
    border-radius: 999px;
    padding: 0.85rem 1.1rem;
    cursor: pointer;
}

.sidebar-list {
    margin-top: 0.75rem;
}

.comment-form-rich {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

.comment-trigger-bar {
    width: auto;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--wow-border);
    border-radius: 14px;
    background: var(--wow-surface);
    color: var(--wow-muted);
    cursor: pointer;
    align-self: flex-end;
}

.comment-trigger-main {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.comment-trigger-count {
    font-weight: 600;
    color: var(--wow-muted);
}

.comment-thread-panel {
    margin-top: 0.85rem;
    padding: 1rem;
    border: 1px solid var(--wow-border);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(247,249,252,0.96) 100%);
}

.comment-thread-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.comment-thread-heading {
    font-weight: 700;
}

.comment-thread-sort,
.comment-thread-empty {
    color: var(--wow-muted);
    font-size: 0.92rem;
}

.comment-thread-empty {
    margin-bottom: 1rem;
}

.comment-item-threaded {
    align-items: flex-start;
}

.comment-compose-stack {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.comment-compose-shell {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
    padding: 0.9rem 1rem;
    border: 1px solid var(--wow-border);
    border-radius: 20px;
    background: var(--wow-surface-alt);
    box-sizing: border-box;
}

.comment-compose-shell textarea,
.comment-gif-search-row input {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--wow-ink);
    font: inherit;
    resize: vertical;
    outline: none;
    min-height: 4rem;
    box-sizing: border-box;
}

.comment-gif-search-row input {
    min-height: auto;
}

.comment-compose-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
}

.comment-compose-tools {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.comment-tool-button,
.comment-gif-search-button,
.comment-gif-remove {
    border: 1px solid var(--wow-border);
    background: white;
    color: var(--wow-ink);
    border-radius: 999px;
    padding: 0.45rem 0.8rem;
    font: inherit;
    cursor: pointer;
}

.comment-tool-button-gif {
    font-weight: 700;
    letter-spacing: 0.02em;
}

.comment-picker-panel {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--wow-border);
    border-radius: 20px;
    background: var(--wow-surface);
    width: min(100%, 34rem);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
    box-sizing: border-box;
}

.comment-picker-panel-emoji {
    max-width: 26rem;
}

.comment-picker-section {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.comment-picker-heading {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--wow-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.comment-emoji-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(2.8rem, 1fr));
    gap: 0.45rem;
}

.comment-emoji-button {
    border: 1px solid var(--wow-border);
    background: var(--wow-surface-alt);
    border-radius: 14px;
    padding: 0.45rem;
    font-size: 1.25rem;
    cursor: pointer;
}

.comment-gif-search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.65rem;
    align-items: center;
}

.comment-gif-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
    gap: 0.65rem;
}

.comment-gif-option {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.comment-gif-option img,
.comment-gif-selection-preview,
.comment-gif-media {
    width: 100%;
    border-radius: 16px;
    display: block;
}

.comment-gif-status {
    color: var(--wow-muted);
    font-size: 0.92rem;
}

.comment-gif-selection {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.75rem 0.9rem;
    border-radius: 18px;
    border: 1px solid var(--wow-border);
    background: rgba(24, 119, 242, 0.08);
    width: 100%;
    box-sizing: border-box;
}

.comment-gif-selection-copy {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.comment-gif-selection-label {
    color: var(--wow-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.comment-gif-selection-title {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comment-gif-selection-preview {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.comment-gif-media {
    margin-top: 0.55rem;
    max-width: min(16rem, 100%);
}

@media (max-width: 1100px) {
    .main-content-grid,
    .profile-content-grid,
    .feed-grid,
    .home-grid,
    .landing-hero,
    .landing-grid {
        grid-template-columns: 1fr;
    }

    .right-side-panel {
        display: none;
    }

    .landing-title {
        max-width: 100%;
    }
}

@media (max-width: 720px) {
    .main-shell {
        padding: 1rem 0.85rem 2rem;
    }

    .auth-grid,
    .profile-metrics,
    .landing-stats {
        grid-template-columns: 1fr;
    }

    .profile-hero-content {
        grid-template-columns: 1fr;
        margin-top: 0;
        padding: 1rem;
        align-items: start;
    }

    .profile-page-avatar {
        margin-top: -3rem;
        width: 7.25rem !important;
        height: 7.25rem !important;
    }

    .profile-identity {
        padding-top: 0;
    }

    .profile-cover {
        height: 210px;
    }

    .profile-action-stack-inline {
        justify-content: flex-start;
    }

    .profile-tab-strip {
        overflow-x: auto;
        white-space: nowrap;
        padding-inline: 0.75rem;
    }

    .reaction-bar,
    .composer-actions,
    .landing-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .composer-inline-shell {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .composer-inline-tools {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }

    .composer-inline-footer {
        padding-left: 0;
        flex-direction: column;
        align-items: flex-start;
    }

    .composer-formatting-panel {
        padding-left: 0;
    }

    .comment-item {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .comment-thread-header,
    .comment-compose-actions,
    .comment-gif-search-row {
        flex-direction: column;
        align-items: stretch;
    }

    .comment-delete-form {
        grid-column: 2;
        justify-self: end;
    }

    .comment-compose-tools {
        width: 100%;
        justify-content: flex-start;
    }

    .comment-gif-selection {
        grid-template-columns: 1fr;
    }

    .comment-picker-panel,
    .comment-picker-panel-emoji {
        width: 100%;
        max-width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-transition-shell,
    .page-transition-shell > *,
    .motion-group > *,
    .post-card,
    .post-card-new,
    .auth-panel,
    .profile-hero-card,
    .profile-edit-card {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}