.auth-encourage-modal,
.view-settings-modal,
.rating-modal,
.modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 22000 !important;
    padding: 16px !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: auto !important;
    overscroll-behavior: contain;
}

.profile-badge-modal,
.profile-badge-full-viewer,
.badge-edit-modal {
    z-index: 22000 !important;
}

.search-suggest,
.advanced-search-suggest {
    z-index: 13000 !important;
}

.hover-menu-wrap .hover-menu,
.cat-hover-menu {
    z-index: 14000 !important;
}

.auth-encourage-modal:not([hidden]),
.view-settings-modal:not([hidden]),
.rating-modal:not([hidden]),
.modal-backdrop.open {
    display: flex !important;
}

.auth-encourage-card,
.view-settings-card,
.modal-card {
    position: relative !important;
    z-index: 1 !important;
    max-height: calc(100dvh - 32px) !important;
    overflow: auto !important;
    overscroll-behavior: contain;
}

.profile-badge-modal.open {
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100vw !important;
    height: 100dvh !important;
    padding: 16px !important;
    overflow: hidden !important;
}

.profile-badge-modal-card {
    width: min(720px, calc(100vw - 32px)) !important;
    max-height: calc(100dvh - 32px) !important;
    overflow: auto !important;
    overscroll-behavior: contain;
}

.profile-badge-modal-grid {
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) !important;
}

.category-icon-picker-trigger {
    gap: 8px;
}

.category-icon-svg-preview,
.category-icon-preview-empty {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f5f3ff;
    color: #6d28d9;
    flex: 0 0 auto;
}

.category-icon-svg-preview svg {
    width: 18px;
    height: 18px;
}

.category-icon-grid button {
    display: grid;
    justify-items: center;
    gap: 6px;
    min-height: 76px;
}

.category-icon-grid button.active .category-icon-svg-preview,
.category-icon-grid button:hover .category-icon-svg-preview {
    background: #7c3aed;
    color: #fff;
}

html.view-settings-open,
html.view-settings-open body,
html.auth-encourage-open,
html.auth-encourage-open body {
    overflow: hidden !important;
}

@media (max-width: 768px) {
    .auth-encourage-modal,
    .view-settings-modal,
    .rating-modal,
    .modal-backdrop {
        padding: 12px 12px calc(82px + env(safe-area-inset-bottom, 0px)) !important;
        align-items: center !important;
    }

    .auth-encourage-card,
    .view-settings-card,
    .modal-card {
        max-height: calc(100dvh - 106px) !important;
    }
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(124,58,237,.45);
    outline-offset: 2px;
}