:root {
    --app-safe-top: 0px;
    --safe-area-fill: transparent;
}

html {
    background: inherit;
}

@media (max-width: 768px) {
    :root {
        --app-safe-top: 0px;
    }

    body[class*="page-"] {
        position: relative;
        padding-top: 0;
    }

    body[class*="page-"]::before {
        display: none;
    }

    body[class*="page-"] {
        --safe-area-fill: #d5efe8;
    }

    .page-home,
    .page-message,
    .page-chat,
    .page-notifications,
    .page-help,
    .page-account-settings,
    .page-blocked,
    .page-user-profile {
        --safe-area-fill: #d5efe8;
    }

    .page-profile {
        --safe-area-fill: #c8dedd;
    }

    .page-facematch,
    .page-facematch-host,
    .page-facematch-join,
    .page-facematch-room,
    .page-login,
    .page-create,
    .page-email,
    .page-verify-email,
    .page-splash,
    .page-about {
        --safe-area-fill: #dff1ea;
    }

    body.theme-super-admin[class*="page-"] {
        --safe-area-fill: #101820;
    }

    .home-top,
    .profile-top,
    .message-top,
    .chat-top,
    .notifications-top,
    .help-top,
    .blocked-top,
    .user-profile-top,
    .settings-top,
    .pavilla-shared-topbar {
        top: 0 !important;
    }
}

:is(
    .about-credit,
    .settings-credit,
    .create-credit,
    .login-credit,
    .block-user-credit,
    .blocked-credit,
    .chat-credit,
    .profile-credit,
    .dashboard-credit,
    .edit-credit,
    .email-credit,
    .help-credit,
    .home-credit,
    .message-credit,
    .notifications-credit,
    .onboarding1-credit,
    .onboarding2-credit,
    .splash-credit,
    .terms-credit,
    .user-profile-credit
) {
    font-size: clamp(0.66rem, 1.7vw, 0.78rem) !important;
    line-height: 1.2;
    letter-spacing: 0.01em;
}

:is(
    .about-credit,
    .settings-credit,
    .create-credit,
    .login-credit,
    .block-user-credit,
    .blocked-credit,
    .chat-credit,
    .profile-credit,
    .dashboard-credit,
    .edit-credit,
    .email-credit,
    .help-credit,
    .home-credit,
    .message-credit,
    .notifications-credit,
    .onboarding1-credit,
    .onboarding2-credit,
    .terms-credit,
    .user-profile-credit
) {
    padding-bottom: 0.1rem !important;
}

.splash-credit {
    bottom: clamp(0.55rem, 1.8vw, 1rem) !important;
}