@layer utilities {
    .account-grid {
        @apply grid gap-6 lg:grid-cols-[260px_minmax(0,1fr)];
    }

    .account-shell {
        @apply overflow-hidden bg-white lg:grid lg:grid-cols-[260px_minmax(0,1fr)] lg:gap-0;
    }

    .account-shell__aside {
        @apply bg-slate-50 px-4 py-5 md:px-6 md:py-6 lg:min-h-full;
    }

    .account-shell__content {
        @apply bg-white p-4 md:p-8;
    }

    .account-aside {
        @apply hidden lg:block;
    }

    .account-menu {
        @apply rounded-3xl border border-slate-100 bg-white p-3 shadow-md;
    }

    .account-shell .account-menu {
        @apply rounded-none border-0 bg-transparent p-0 shadow-none;
    }

    .account-menu > ul {
        @apply space-y-1;
    }

    .account-menu .user-menu-item {
        @apply m-0;
    }

    .account-menu a {
        @apply flex items-center gap-3 rounded-2xl px-4 py-3 text-[1.05rem] font-medium text-slate-600 hover:bg-slate-50 hover:text-slate-900;
    }

    .account-menu a::before {
        content: none;
    }

    .account-menu__icon {
        @apply inline-flex w-4 shrink-0 items-center justify-center text-sm;
    }

    .account-menu .active > a,
    .account-menu a.active {
        @apply bg-primary text-white shadow-sm hover:bg-primary-strong hover:text-white;
    }

    .account-menu .active .account-menu__icon,
    .account-menu a.active .account-menu__icon {
        @apply text-white;
    }
}
