@layer components {
    .profile-dashboard {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-20);
        width: 100%;
        margin-top: var(--space-20);
    }

    .profile-dashboard__main,
    .profile-dashboard__sidebar {
        display: grid;
        gap: var(--space-20);
        align-content: start;
        min-width: 0;
    }

    .profile-panel {
        min-width: 0;
        padding: var(--space-20);
        border: 0.0625rem solid var(--color-border);
        border-radius: var(--radius-corner);
        background: var(--color-bg-surface);
        box-shadow: 0 0.75rem 1.75rem color-mix(in oklch, var(--color-black) 8%, transparent);
    }

    .profile-panel__header {
        display: flex;
        gap: var(--space-12);
        align-items: center;
        justify-content: space-between;
        margin-bottom: var(--space-20);
    }

    .profile-panel__header--inline {
        align-items: flex-start;
    }

    .profile-panel__title {
        padding-bottom: var(--space-20);
        color: var(--color-text);
        font-size: var(--text-lg);
        line-height: 1.1;
    }

    .profile-panel__body {
        color: var(--color-text);
        font-size: var(--text-base);
        line-height: 1.6;
    }

    .profile-panel__body p {
        margin: 0;
    }

    .profile-panel__meta {
        display: inline-flex;
        gap: var(--space-10);
        align-items: center;
        width: fit-content;
        margin-top: var(--space-20);
        padding-top: var(--space-18);
        border-top: 0.0625rem solid var(--color-border);
        color: var(--color-text-muted);
        font-weight: var(--font-weight-bold);
    }

    .profile-panel__meta-icon {
        position: static;
        display: block;
        flex: 0 0 1rem;
        width: 1rem;
        height: 1rem;
        overflow: visible;
        color: var(--color-text-muted);
        fill: currentColor;
    }

    .profile-panel__empty,
    .profile-panel__note {
        margin: 0;
        color: var(--color-text-muted);
        font-size: var(--text-sm);
        line-height: 1.5;
    }

    .profile-panel__status {
        display: inline-grid;
        place-items: center;
        min-height: 1.75rem;
        padding: 0.3rem 0.7rem;
        border-radius: var(--radius-round);
        color: var(--color-text-muted);
        background: var(--color-bg-surface-alt);
        font-size: var(--text-xs);
        font-weight: var(--font-weight-bold);
        white-space: nowrap;
    }

    .profile-panel__actions {
        display: flex;
        justify-content: stretch;
        margin-top: var(--space-18);
    }

    .profile-panel__button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 2.75rem;
        padding: 0.65rem var(--space-16);
        border: 0.0625rem solid var(--color-border);
        border-radius: var(--radius-corner);
        color: var(--color-text);
        background: var(--color-bg-surface);
        font-weight: var(--font-weight-bold);
        text-decoration: none;
        transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
    }

    .profile-panel__button:hover,
    .profile-panel__button:focus-visible {
        color: var(--color-text-inverse);
        border-color: var(--color-brand-secondary);
        background: var(--color-brand-secondary);
    }

    .profile-panel--favorites {
        display: flex;
        flex-direction: column;
        max-height: 19.75rem;
    }

    .profile-panel--favorites .profile-panel__header {
        flex: 0 0 auto;
    }

    .profile-compact-list,
    .profile-favorite-preview,
    .profile-friend-preview {
        display: grid;
        gap: var(--space-12);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .profile-panel--favorites .profile-favorite-preview {
        flex: 1 1 auto;
        min-height: 0;
        padding-right: var(--space-4);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .profile-panel--platforms .profile-compact-list {
        max-height: calc((1.5rem * 5) + (var(--space-12) * 4));
        padding-right: var(--space-4);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .profile-compact-list__item,
    .profile-favorite-preview__item a,
    .profile-friend-preview__item a {
        display: flex;
        gap: var(--space-12);
        align-items: center;
        min-width: 0;
        color: var(--color-text);
        text-decoration: none;
    }

    .profile-panel--platforms .profile-compact-list__item {
        min-height: 1.5rem;
    }

    .profile-compact-list__body {
        display: grid;
        gap: 0.15rem;
        min-width: 0;
    }

    .profile-compact-list__body strong,
    .profile-favorite-preview__item span,
    .profile-friend-preview__item span {
        min-width: 0;
        font-weight: var(--font-weight-bold);
        overflow-wrap: anywhere;
    }

    .profile-compact-list__body span {
        color: var(--color-text-muted);
        font-size: var(--text-sm);
        font-weight: var(--font-weight-bold);
    }

    .profile-platform-swatch {
        flex: 0 0 auto;
        width: 0.9rem;
        height: 0.9rem;
        border-radius: var(--radius-round);
        box-shadow: inset 0 0 0 0.0625rem color-mix(in oklch, var(--color-black) 16%, transparent);
    }

    .profile-favorite-preview__image,
    .profile-friend-preview__avatar {
        display: block;
        flex: 0 0 3rem;
        width: 3rem;
        height: 3rem;
        object-fit: cover;
        border-radius: var(--radius-corner);
        background: var(--color-bg-surface-alt);
    }

    .profile-friend-preview__avatar {
        border-radius: var(--radius-round);
    }

    .profile-activity-list {
        display: grid;
        gap: 0;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .profile-activity-list__item:not(:last-child) {
        border-bottom: 0.0625rem solid var(--color-border);
    }

    .profile-activity-list__item--new {
        position: relative;
    }

    .profile-activity-list__item--new::before {
        content: "";
        position: absolute;
        top: 50%;
        left: -0.75rem;
        width: 0.45rem;
        height: 0.45rem;
        border-radius: var(--radius-round);
        background: var(--color-brand-primary);
        transform: translateY(-50%);
    }

    .profile-activity-list__link {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-8);
        align-items: center;
        min-width: 0;
        padding: var(--space-14) 0;
        color: var(--color-text);
        text-decoration: none;
    }

    .profile-activity-list__link:hover .profile-activity-list__title,
    .profile-activity-list__link:focus-visible .profile-activity-list__title {
        color: var(--color-brand-secondary);
    }

    .profile-activity-list__label {
        justify-self: start;
        max-width: 100%;
        padding: 0.45rem 0.7rem;
        border-radius: var(--radius-round);
        color: var(--color-text-inverse);
        background: var(--color-content-news);
        font-size: var(--text-xs);
        font-weight: var(--font-weight-bold);
        line-height: 1.1;
        text-align: center;
        text-transform: uppercase;
        overflow-wrap: anywhere;
    }

    .profile-activity-list__label--review {
        background: var(--color-danger);
    }

    .profile-activity-list__label--feature {
        background: var(--color-accent-violet);
    }

    .profile-activity-list__label--liveblog {
        background: var(--color-content-liveblog);
    }

    .profile-activity-list__label--forumtopic {
        background: var(--color-accent-gold-dark);
    }

    .profile-activity-list__label--breaking,
    .profile-activity-list__label--breaking- {
        background: var(--color-danger);
    }

    .profile-activity-list__title {
        min-width: 0;
        color: var(--color-text);
        font-weight: var(--font-weight-bold);
        line-height: 1.35;
        transition: color 160ms ease;
    }

    .profile-activity-list__date,
    .profile-activity-list__comments {
        color: var(--color-text-muted);
        font-size: var(--text-sm);
        font-weight: var(--font-weight-bold);
        white-space: nowrap;
    }

    .profile-activity-list__comments {
        display: inline-flex;
        gap: var(--space-8);
        align-items: center;
        justify-content: flex-start;
        min-width: max-content;
    }

    .profile-activity-list__comments-icon {
        position: static;
        display: block;
        flex: 0 0 1rem;
        width: 1rem;
        height: 1rem;
        overflow: visible;
        color: currentColor;
        fill: currentColor;
    }

    .profile-reactions {
        margin-top: var(--space-20);
    }

    .profile-reactions-list {
        display: grid;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .profile-reactions-list__item:not(:last-child) {
        border-bottom: 0.0625rem solid var(--color-border);
    }

    .profile-reactions-list__link {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-10);
        align-items: center;
        min-width: 0;
        padding: var(--space-16) 0;
        color: var(--color-text);
        text-decoration: none;
    }

    .profile-reactions-list__content {
        display: grid;
        gap: var(--space-6);
        min-width: 0;
    }

    .profile-reactions-list__title {
        color: var(--color-text);
        font-weight: var(--font-weight-bold);
        line-height: 1.3;
        transition: color 160ms ease;
    }

    .profile-reactions-list__link:hover .profile-reactions-list__title,
    .profile-reactions-list__link:focus-visible .profile-reactions-list__title {
        color: var(--color-brand-secondary);
    }

    .profile-reactions-list__text {
        color: var(--color-text-muted);
        font-size: var(--text-sm);
        line-height: 1.45;
    }

    .profile-reactions-list__date,
    .profile-reactions-list__comments {
        color: var(--color-text-muted);
        font-size: var(--text-sm);
        font-weight: var(--font-weight-bold);
        white-space: nowrap;
    }

    .profile-reactions-list__comments {
        display: inline-flex;
        gap: var(--space-8);
        align-items: center;
        justify-content: flex-start;
        min-width: max-content;
    }

    .profile-reactions-list__comments-icon {
        position: static;
        display: block;
        flex: 0 0 1rem;
        width: 1rem;
        height: 1rem;
        overflow: visible;
        color: currentColor;
        fill: currentColor;
    }

    .profile-heatmap {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: var(--space-10);
        align-items: end;
        min-width: 0;
    }

    .profile-heatmap__weekdays {
        display: grid;
        grid-template-rows: repeat(7, 0.72rem);
        gap: 0.18rem;
        padding-bottom: 0.125rem;
        color: var(--color-text-muted);
        font-size: var(--text-xs);
        font-weight: var(--font-weight-bold);
        line-height: 0.72rem;
    }

    .profile-heatmap__months {
        display: flex;
        gap: var(--space-12);
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: var(--space-4);
    }

    .profile-heatmap__month {
        flex: 0 1 auto;
        min-width: 0;
    }

    .profile-heatmap__month-label {
        margin-bottom: var(--space-8);
        color: var(--color-text-muted);
        font-size: var(--text-xs);
        font-weight: var(--font-weight-bold);
        text-align: center;
    }

    .profile-heatmap__days {
        display: grid;
        grid-auto-flow: column;
        grid-template-rows: repeat(7, 0.72rem);
        gap: 0.18rem;
    }

    .profile-heatmap__day,
    .profile-heatmap__blank {
        width: 0.72rem;
        height: 0.72rem;
        border-radius: var(--radius-corner);
    }

    .profile-heatmap__day {
        background: var(--color-bg-surface-alt);
    }

    .profile-heatmap__day--level-1 {
        background: color-mix(in oklch, var(--color-brand-primary) 38%, var(--color-bg-surface-alt));
    }

    .profile-heatmap__day--level-2 {
        background: color-mix(in oklch, var(--color-brand-primary) 70%, var(--color-bg-surface-alt));
    }

    .profile-heatmap__day--level-3 {
        background: var(--color-brand-primary);
    }

    .profile-heatmap__day--future {
        opacity: 0.35;
    }

    .profile-heatmap__legend {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-14);
        align-items: center;
        margin-top: var(--space-20);
        color: var(--color-text-muted);
        font-size: var(--text-xs);
        font-weight: var(--font-weight-bold);
    }

    .profile-heatmap__legend-item {
        display: inline-flex;
        gap: var(--space-4);
        align-items: center;
    }

    .profile-heatmap__timezone {
        margin-left: auto;
    }

    .profile-panel--badges {
        width: 100%;
        margin-top: var(--space-20);
        overflow: hidden;
        background:
            linear-gradient(180deg, color-mix(in oklch, var(--color-brand-primary) 8%, var(--color-bg-surface)) 0, var(--color-bg-surface) 7rem);
    }

    .profile-panel--badges .profile-panel__header {
        margin-bottom: var(--space-14);
    }

    .profile-panel--badges .profile-panel__title {
        padding-bottom: 0;
    }

    .profile-badge-count {
        min-height: 2rem;
        border: 0.0625rem solid color-mix(in oklch, var(--color-brand-primary) 38%, var(--color-border));
        color: color-mix(in oklch, var(--color-brand-secondary) 82%, var(--color-text));
        background: color-mix(in oklch, var(--color-brand-primary) 18%, var(--color-bg-surface));
    }

    .profile-badge-list {
        display: grid;
        gap: var(--space-10);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .profile-badge-card {
        --profile-badge-accent: var(--color-content-news);
        display: grid;
        grid-template-columns: 2.75rem minmax(0, 1fr);
        gap: var(--space-12);
        align-items: center;
        min-width: 0;
        padding: var(--space-12);
        border: 0.0625rem solid color-mix(in oklch, var(--profile-badge-accent) 24%, var(--color-border));
        border-radius: var(--space-8);
        background:
            linear-gradient(135deg, color-mix(in oklch, var(--profile-badge-accent) 12%, var(--color-bg-surface)) 0, var(--color-bg-surface) 62%);
        box-shadow: 0 0.4rem 1rem color-mix(in oklch, var(--color-black) 5%, transparent);
    }

    .profile-badge-card--account {
        --profile-badge-accent: var(--color-success);
    }

    .profile-badge-card--community {
        --profile-badge-accent: var(--color-content-news);
    }

    .profile-badge-card--like {
        --profile-badge-accent: var(--color-danger);
    }

    .profile-badge-card--friends {
        --profile-badge-accent: var(--color-accent-indigo);
    }

    .profile-badge-card--staff {
        --profile-badge-accent: var(--color-brand-primary);
    }

    .profile-badge-card--games {
        --profile-badge-accent: var(--color-accent-violet);
    }

    .profile-badge-card__medal {
        display: grid;
        place-items: center;
        width: 2.75rem;
        aspect-ratio: 1;
        border-radius: var(--radius-round);
        color: color-mix(in oklch, var(--profile-badge-accent) 88%, var(--color-text));
        background: color-mix(in oklch, var(--profile-badge-accent) 16%, var(--color-bg-surface-alt));
        box-shadow:
            inset 0 0 0 0.0625rem color-mix(in oklch, var(--profile-badge-accent) 28%, transparent),
            0 0.35rem 0.8rem color-mix(in oklch, var(--profile-badge-accent) 16%, transparent);
    }

    .profile-badge-card__icon {
        position: static;
        display: block;
        width: 1.1rem;
        height: 1.1rem;
        overflow: visible;
        fill: currentColor;
    }

    .profile-badge-card__body {
        display: grid;
        gap: var(--space-4);
        min-width: 0;
    }

    .profile-badge-card__title {
        min-width: 0;
        color: var(--color-text);
        font-weight: var(--font-weight-bold);
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

    .profile-badge-card__description {
        color: var(--color-text-muted);
        font-size: var(--text-sm);
        font-weight: var(--font-weight-bold);
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    .profile-badge-card__date {
        justify-self: start;
        width: fit-content;
        margin-top: var(--space-2);
        padding: 0.15rem 0.45rem;
        border-radius: var(--radius-round);
        color: color-mix(in oklch, var(--profile-badge-accent) 84%, var(--color-text));
        background: color-mix(in oklch, var(--profile-badge-accent) 10%, var(--color-bg-surface-alt));
        font-size: var(--text-xs);
        font-weight: var(--font-weight-bold);
        line-height: 1.25;
    }

    :root[data-theme="dark"] .profile-panel {
        box-shadow: 0 0.85rem 2rem color-mix(in oklch, var(--color-black) 26%, transparent);
    }

    :root[data-theme="dark"] .profile-badge-count {
        color: var(--color-text);
        background: color-mix(in oklch, var(--color-brand-primary) 20%, var(--color-bg-surface-alt));
    }

    :root[data-theme="dark"] .profile-badge-card {
        background:
            linear-gradient(135deg, color-mix(in oklch, var(--profile-badge-accent) 14%, var(--color-bg-surface-alt)) 0, var(--color-bg-surface) 68%);
        box-shadow: 0 0.5rem 1.25rem color-mix(in oklch, var(--color-black) 16%, transparent);
    }

    :root[data-theme="dark"] .profile-activity-list__link:hover .profile-activity-list__title,
    :root[data-theme="dark"] .profile-activity-list__link:focus-visible .profile-activity-list__title {
        color: var(--color-brand-primary);
    }

    :root[data-theme="dark"] .profile-panel__button:hover,
    :root[data-theme="dark"] .profile-panel__button:focus-visible,
    :root[data-theme="dark"] .profile-reactions-list__link:hover .profile-reactions-list__title,
    :root[data-theme="dark"] .profile-reactions-list__link:focus-visible .profile-reactions-list__title {
        color: var(--color-brand-primary);
    }

    .profile-information-header {
        margin-bottom: var(--space-16);
        padding-bottom: var(--space-16);
        border-bottom: 1px solid var(--color-bg-surface-alt);
    }

    .profile-information-bio {
        display: flex;
        flex-direction: column;
        row-gap: var(--space-20);
        margin-bottom: var(--space-20);
    }

    .profile-information-bio .clock {
        font-style: italic;
    }

    .profile-information-bio .sad::before {
        padding-left: var(--space-16);
    }

    @media (min-width: 45rem) {
        .profile-activity-list__link {
            grid-template-columns: minmax(6rem, 8rem) minmax(0, 1fr) auto auto;
            gap: var(--space-16);
        }

        .profile-reactions-list__link {
            grid-template-columns: minmax(6rem, 8rem) minmax(0, 1fr) auto auto;
            gap: var(--space-16);
        }
    }

    @media (min-width: 64rem) {
        .profile-dashboard {
            grid-template-columns: minmax(0, 1.45fr) minmax(22rem, 0.95fr);
        }

        .profile-panel {
            padding: var(--space-24);
        }

        .profile-badge-list {
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: var(--space-14);
        }

        .profile-badge-card {
            align-items: start;
            min-height: 8rem;
        }
    }

    @media (max-width: 38rem) {
        .profile-panel {
            padding: var(--space-16);
        }

        .profile-panel__header--inline {
            flex-direction: column;
            gap: var(--space-8);
        }

        .profile-badge-count {
            align-self: flex-start;
        }

        .profile-badge-card {
            grid-template-columns: 2.5rem minmax(0, 1fr);
            padding: var(--space-10);
        }

        .profile-badge-card__medal {
            width: 2.5rem;
        }

        .profile-heatmap__months {
            gap: var(--space-8);
            overflow-x: auto;
            padding-bottom: var(--space-4);
        }

        .profile-heatmap__timezone {
            width: 100%;
            margin-left: 0;
        }
    }

    .profile-wall {
        position: relative;
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-24);
        margin-top: var(--space-20);
        padding: var(--space-20);
        min-height: 15rem;
        overflow: hidden;
        border: 0.0625rem solid color-mix(in oklch, var(--color-white) 18%, transparent);
        border-radius: var(--radius-corner);
        color: var(--color-text-inverse);
        background-color: var(--color-brand-secondary);
        background-position: center;
        background-size: cover;
        background-blend-mode: soft-light;
        box-shadow: 0 1rem 2.5rem color-mix(in oklch, var(--color-black) 22%, transparent);
    }

    .profile-wall::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background:
            radial-gradient(circle at 56% 56%, color-mix(in oklch, var(--color-white) 8%, transparent), transparent 18rem),
            linear-gradient(90deg, rgba(3, 14, 25, 0.98) 0%, rgba(5, 19, 33, 0.96) 54%, rgba(4, 16, 29, 0.98) 100%);
        pointer-events: none;
    }

    .profile-wall::after {
        content: "";
        position: absolute;
        top: var(--space-20);
        right: var(--space-28);
        z-index: 2;
        width: 10rem;
        height: 7rem;
        opacity: 0.2;
        background-image: radial-gradient(circle, var(--color-text-inverse) 0.08rem, transparent 0.09rem);
        background-size: 0.85rem 0.85rem;
        pointer-events: none;
    }

    .profile-wall-identity {
        position: relative;
        z-index: 10;
        display: grid;
        grid-template-columns: 5.5rem minmax(0, 1fr);
        gap: var(--space-16);
        align-items: center;
        min-width: 0;
    }

    .profile-wall-avatar {
        position: relative;
        align-self: center;
        width: 5.5rem;
        aspect-ratio: 1;
        border-radius: var(--radius-round);
    }

    .profile-wall-information {
        position: relative;
        z-index: 10;
        display: grid;
        gap: var(--space-10);
        min-width: 0;
    }

    .profile-wall-information-header {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-10);
        align-items: center;
        color: var(--color-text-inverse);
    }

    .profile-wall-avatar__preview {
        position: relative;
        width: 100%;
        height: 100%;
        border: 0.125rem solid color-mix(in oklch, var(--color-white) 78%, transparent);
        border-radius: var(--radius-round);
        overflow: visible;
        cursor: pointer;
        outline: none;
        box-shadow: 0 1rem 2rem color-mix(in oklch, var(--color-black) 28%, transparent);
    }

    .profile-wall-avatar__preview:focus-visible {
        box-shadow:
            0 0 0 0.1875rem var(--color-brand-primary),
            0 1rem 2rem color-mix(in oklch, var(--color-black) 28%, transparent);
    }

    .profile-wall-avatar__preview .avatar {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: var(--radius-round);
    }

    .profile-wall-avatar__edit {
        position: absolute;
        right: -0.35rem;
        bottom: 0.45rem;
        display: grid;
        place-items: center;
        width: 2.15rem;
        height: 2.15rem;
        padding: 0;
        border: 0.125rem solid color-mix(in oklch, var(--color-white) 82%, transparent);
        border-radius: var(--radius-round);
        color: var(--color-black);
        background-color: var(--color-brand-primary);
        cursor: pointer;
        opacity: 0.92;
        transform: scale(0.96);
        transition: opacity 160ms ease, transform 160ms ease;
        z-index: 10;
        box-shadow: 0 0.5rem 1rem color-mix(in oklch, var(--color-black) 32%, transparent);
    }

    .profile-wall-avatar__icon {
        position: static;
        display: block;
        width: 1rem;
        height: 1rem;
        overflow: visible;
        fill: currentColor;
    }

    .profile-wall-avatar__edit .profile-wall-avatar__icon {
        color: var(--color-black);
    }

    .profile-wall-avatar:hover .profile-wall-avatar__edit,
    .profile-wall-avatar__edit:hover,
    .profile-wall-avatar__edit:focus-visible {
        outline: none;
        opacity: 0.95;
        transform: scale(1);
    }

    .profile-wall-avatar__remove-btn {
        position: absolute;
        right: -0.35rem;
        bottom: 3rem;
        display: grid;
        place-items: center;
        width: 2.15rem;
        height: 2.15rem;
        padding: 0;
        border: 0.125rem solid color-mix(in oklch, var(--color-white) 82%, transparent);
        border-radius: var(--radius-round);
        background-color: var(--color-danger);
        cursor: pointer;
        opacity: 0.95;
        transform: scale(0.96);
        transition: opacity 160ms ease, transform 160ms ease;
        z-index: 10;
        box-shadow: 0 0.5rem 1rem color-mix(in oklch, var(--color-black) 32%, transparent);
    }

    .profile-wall-avatar__remove-btn .profile-wall-avatar__icon {
        color: var(--color-text-inverse);
    }

    .profile-wall-avatar:hover .profile-wall-avatar__remove-btn,
    .profile-wall-avatar__remove-btn:hover,
    .profile-wall-avatar__remove-btn:focus-visible {
        outline: none;
        opacity: 1;
        transform: scale(1);
    }

    .profile-wall-avatar__preview.is-disabled {
        cursor: not-allowed;
    }

    .profile-wall-avatar__edit:disabled,
    .profile-wall-avatar__remove-btn.is-disabled,
    .profile-wall-avatar__remove-btn:disabled {
        cursor: not-allowed;
        opacity: 0.35;
        transform: none;
    }

    .profile-wall-avatar:hover .profile-wall-avatar__edit:disabled,
    .profile-wall-avatar__preview.is-disabled:hover .profile-wall-avatar__remove-btn {
        opacity: 0.35;
        transform: none;
    }

    .profile-wall-information-header h1 {
        margin: 0;
        color: var(--color-text-inverse);
        font-size: var(--text-xl);
        line-height: 1;
        overflow-wrap: anywhere;
    }

    .profile-wall-information-header-block {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-6);
        align-items: center;
    }

    .profile-wall-information-header__level,
    .profile-wall-information-header__badge {
        display: inline-grid;
        place-items: center;
        min-height: 1.65rem;
        padding: 0.25rem 0.55rem;
        border-radius: var(--radius-round);
        font-size: var(--text-xs);
        font-weight: var(--font-weight-bold);
        line-height: 1;
        white-space: nowrap;
    }

    .profile-wall-information-header__level {
        color: var(--color-black);
        background-color: var(--color-brand-primary);
    }

    .profile-wall-information-header__badge {
        color: var(--color-black);
        background-color: color-mix(in oklch, var(--color-brand-primary) 28%, var(--color-white));
    }

    .profile-wall-information__since,
    .profile-wall-information__description {
        margin: 0;
        color: color-mix(in oklch, var(--color-text-inverse) 86%, transparent);
        font-size: var(--text-sm);
        line-height: 1.45;
    }

    .profile-wall-information__since {
        display: flex;
        gap: var(--space-8);
        align-items: center;
    }

    .profile-wall-friend-button {
        display: inline-flex;
        gap: var(--space-8);
        align-items: center;
        justify-content: center;
        width: fit-content;
        min-height: 2.75rem;
        margin-top: var(--space-16);
        padding: 0.7rem var(--space-18);
        border: 0;
        border-radius: var(--radius-round);
        color: var(--color-black);
        background: var(--color-brand-primary);
        font-weight: var(--font-weight-bold);
        cursor: pointer;
        transition: transform 160ms ease, opacity 160ms ease;
    }

    .profile-wall-friend-button:hover,
    .profile-wall-friend-button:focus-visible {
        outline: none;
        transform: translateY(-0.0625rem);
    }

    .profile-wall-friend-button:disabled {
        cursor: default;
        opacity: 0.72;
        transform: none;
    }

    .profile-wall-information__status-dot {
        flex: 0 0 auto;
        width: 0.65rem;
        height: 0.65rem;
        border-radius: var(--radius-round);
        background-color: var(--color-success);
        box-shadow: 0 0 0 0.2rem color-mix(in oklch, var(--color-success) 22%, transparent);
    }

    .profile-wall-stats {
        position: relative;
        z-index: 10;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-12);
        justify-items: center;
        padding-top: var(--space-16);
        border-top: 0.0625rem solid color-mix(in oklch, var(--color-white) 16%, transparent);
    }

    .profile-wall-stat {
        display: grid;
        grid-template-rows: auto auto auto;
        justify-items: center;
        gap: var(--space-6);
        min-width: 0;
        text-align: center;
    }

    .profile-wall-stat__icon {
        position: static;
        display: block;
        width: 1.65rem;
        height: 1.65rem;
        overflow: visible;
        color: color-mix(in oklch, var(--color-text-inverse) 62%, transparent);
        fill: currentColor;
    }

    .profile-wall-stat__value {
        color: var(--color-text-inverse);
        font-size: var(--text-2xl);
        font-weight: var(--font-weight-bold);
        line-height: 1;
    }

    .profile-wall-stat__value--duration {
        max-width: 8rem;
        font-size: var(--text-lg);
        line-height: 1.1;
    }

    .profile-wall-stat__label {
        max-width: 7rem;
        color: color-mix(in oklch, var(--color-text-inverse) 78%, transparent);
        font-size: var(--text-xs);
        font-weight: var(--font-weight-bold);
        line-height: 1.15;
    }

    @media (min-width: 48rem) {
        .profile-wall {
            padding: var(--space-28);
        }

        .profile-wall-identity {
            grid-template-columns: 8.5rem minmax(0, 1fr);
            gap: var(--space-24);
        }

        .profile-wall-avatar {
            width: 8.5rem;
        }

        .profile-wall-information-header h1 {
            font-size: var(--text-2xl);
        }

        .profile-wall-stats {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
    }

    @media (min-width: 72rem) {
        .profile-wall {
            grid-template-columns: minmax(0, 1fr) minmax(24rem, 32rem);
            align-items: center;
            min-height: 13.25rem;
        }

        .profile-wall-identity {
            grid-template-columns: 10rem minmax(0, 1fr);
            gap: var(--space-28);
        }

        .profile-wall-avatar {
            width: 10rem;
        }

        .profile-wall-stats {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            justify-self: end;
            gap: var(--space-20);
            width: 100%;
            min-width: 0;
            padding-top: 0;
            border-top: 0;
        }

        .profile-wall-stat {
            width: auto;
        }
    }
}