@media (max-width: 640px) {
    .topbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.75rem;
        padding: 0.85rem 1rem;
    }

    .top-nav {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .hero-panel {
        padding: 1.25rem;
    }

    .hero-actions .button {
        width: 100%;
    }

    .profile-feature-grid {
        grid-template-columns: 1fr;
    }

    .profile-card,
    .avatar-edit-row {
        align-items: start;
        grid-template-columns: 1fr;
    }

    .profile-info-list div {
        grid-template-columns: 1fr;
    }
}