/* Kuromatrix Element Web overrides. */
.mx_AuthPage {
    background: #05070b url("/custom/background.webp") center / cover no-repeat fixed !important;
}

.mx_AuthPage_modal,
.mx_AuthBody {
    background-color: rgba(10, 12, 18, 0.88) !important;
    backdrop-filter: blur(10px);
}

/* Custom Kuromatrix logo hooks. */
.mx_AuthHeader_logo,
.mx_AuthHeader img,
.mx_AuthPage img[src*="element"] {
    content: url("/custom/icon.png") !important;
    width: 96px !important;
    height: 96px !important;
    object-fit: contain !important;
}

/* Welcome-card logo. */
.mx_AuthBody_icon,
.mx_AuthBody > img:first-child,
.mx_AuthBody svg.mx_AuthBody_icon {
    content: url("/custom/icon.png") !important;
    width: 56px !important;
    height: 56px !important;
    object-fit: contain !important;
    border-radius: 50% !important;
}

/* Force welcome-card logo replacement. */
.mx_AuthBody {
    position: relative !important;
}

.mx_AuthBody_icon {
    display: none !important;
}

.mx_AuthBody::before {
    content: "" !important;
    display: block !important;
    width: 56px !important;
    height: 56px !important;
    margin: 18px auto 12px !important;
    background: url("/custom/icon.png") center / contain no-repeat !important;
    border-radius: 50% !important;
}

/* Kuromatrix purple accent. */
:root,
.mx_MatrixChat {
    --accent-color: #a855f7 !important;
    --accent: #a855f7 !important;
    --primary-color: #a855f7 !important;
    --cpd-color-icon-accent-primary: #a855f7 !important;
    --cpd-color-text-action-accent: #c084fc !important;
    --cpd-color-bg-action-primary-rest: #9333ea !important;
    --cpd-color-bg-action-primary-hovered: #a855f7 !important;
    --cpd-color-bg-action-primary-pressed: #7e22ce !important;
    --cpd-color-border-focused: #c084fc !important;
}

.mx_AccessibleButton_kind_primary,
.mx_Dialog_primary,
.mx_Login_submit,
.mx_AuthBody .mx_AccessibleButton_kind_primary {
    background-color: #9333ea !important;
    color: #ffffff !important;
}

.mx_AccessibleButton_kind_primary:hover,
.mx_Dialog_primary:hover,
.mx_Login_submit:hover,
.mx_AuthBody .mx_AccessibleButton_kind_primary:hover {
    background-color: #a855f7 !important;
}

.mx_AuthBody a,
.mx_AuthBody a:link,
.mx_AuthBody a:visited,
.mx_AccessibleButton_kind_link {
    color: #c084fc !important;
}

.mx_Field input:focus,
.mx_Field select:focus,
.mx_Field textarea:focus {
    border-color: #c084fc !important;
}