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

.profile-picture-editor {
    display: flex;
    align-items: flex-start;
    gap: var(--space-5);
}

.profile-picture-controls {
    flex: 1;
    min-width: 0;
}

.profile-picture-preview {
    flex: 0 0 auto;
}

.profile-picture-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-5);
    margin-top: var(--space-4);
}

.profile-picture-actions [hidden] {
    display: none;
}

.profile-picture-remove {
    color: #d99a9a;
}

.profile-picture-remove:hover {
    color: #efb8b8;
}

#profile-picture {
    margin-top: var(--space-4);
}

#profile-picture-heading {
    margin-bottom: var(--space-4);
}

.forum-post-author {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.forum-post-author-details {
    min-width: 0;
    overflow-wrap: anywhere;
}

#profile-crop-help {
    margin-bottom: var(--space-5);
    color: var(--muted);
}

#profile-crop-canvas {
    display: block;
    width: min(280px, 100%);
    height: auto;
    margin: 0 auto;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: #162a3e;
    cursor: grab;
    touch-action: none;
}

#profile-crop-canvas:active {
    cursor: grabbing;
}

#profile-crop-canvas:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 4px;
}

.profile-crop-pan {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.profile-crop-zoom {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

.profile-crop-zoom output {
    grid-column: 2;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.profile-crop-zoom input {
    grid-column: 1 / -1;
}

.profile-crop-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--line);
}

.profile-crop-actions > :first-child {
    margin-right: auto;
}

@media (max-width: 600px) {
    #profile-crop-canvas {
        width: min(220px, 100%);
    }

    .profile-crop-zoom {
        margin-top: var(--space-4);
    }

    .profile-picture-editor {
        flex-direction: column;
        gap: var(--space-5);
    }

    .profile-picture-controls {
        width: 100%;
    }
}