/* Magiclogs authentication redesign — isolated from storefront and admin UI. */
.ml-auth-page {
    --ml-auth-red: #c8102e;
    --ml-auth-red-dark: #a60924;
    --ml-auth-ink: #202331;
    --ml-auth-grey: #707586;
    --ml-auth-border: #ececf0;
    min-height: 100vh;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 24px 20px 36px;
    background: radial-gradient(circle at 6% 18%, #ffe4e9 0%, transparent 34%),
                radial-gradient(circle at 91% 85%, #ffe9ed 0%, transparent 31%),
                #fff9fa;
    color: var(--ml-auth-ink);
}
.ml-auth-page__container {width: min(100%, 680px); margin: 0 auto; position: relative; z-index: 1;}
.ml-auth-page__glow {position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; border: 1px solid rgba(201, 16, 47, .08);}
.ml-auth-page__glow--one {width: 450px; height: 450px; top: -240px; left: -170px; box-shadow: 0 0 0 75px rgba(200, 16, 46, .022);}
.ml-auth-page__glow--two {width: 430px; height: 430px; right: -220px; bottom: -210px; box-shadow: 0 0 0 65px rgba(200, 16, 46, .02);}
.ml-auth-page__topbar {display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 6px 0 27px;}
.ml-auth-page__brand {display: inline-flex; align-items: center; gap: 10px; color: var(--ml-auth-ink); font-weight: 900; font-size: 25px; letter-spacing: -.06em; line-height: 1.1; text-decoration: none;}
.ml-auth-page__brand:hover {color: var(--ml-auth-ink);}
.ml-auth-page__brand > span:last-child > span {color: var(--ml-auth-red);}
.ml-auth-page__mark {width: 41px; height: 41px; display: grid; place-items: center; flex: 0 0 41px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #ef3355, #bc0b2d); box-shadow: 0 8px 18px rgba(200,16,46,.14); font-size: 21px; letter-spacing: -.07em;}
.ml-auth-page__back {color: #697080; text-decoration: none; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; padding: 11px 13px; border: 1px solid #f1dfe4; background: rgba(255,255,255,.85); border-radius: 9px;}
.ml-auth-page__back:hover {color: var(--ml-auth-red); border-color: #efb4c1;}
.ml-auth-card {max-width: 530px; margin: 0 auto; padding: 37px 39px 34px; border-radius: 22px; background: #fff; border: 1px solid #f2eaed; box-shadow: 0 23px 64px rgba(74, 24, 37, .075), 0 4px 12px rgba(74,24,37,.025);}
.ml-auth-card--register {max-width: 680px;}
.ml-auth-card__intro {text-align: center; margin: 0 0 25px;}
.ml-auth-card__eyebrow {display: inline-flex; align-items: center; gap: 8px; color: var(--ml-auth-red); background: #fff2f5; border: 1px solid #ffe4ea; padding: 7px 13px; font-weight: 800; font-size: 11px; letter-spacing: .035em; border-radius: 50px; margin-bottom: 15px;}
.ml-auth-card__eyebrow i {font-size: 12px;}
.ml-auth-card__intro h1 {color: var(--ml-auth-ink) !important; font-weight: 850; font-size: clamp(26px, 5vw, 32px); letter-spacing: -.042em; line-height: 1.18; margin: 0 0 9px;}
.ml-auth-card__intro p {font-size: 13px; color: var(--ml-auth-grey); margin: 0; line-height: 1.7;}
.ml-auth-tabs {display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; background: #f6f6f8; border: 1px solid #ededf1; border-radius: 12px; padding: 5px; margin: 0 0 26px;}
.ml-auth-tabs__tab {display: flex; align-items: center; justify-content: center; padding: 12px 10px; border-radius: 8px; min-height: 43px; font-size: 13px; font-weight: 800; color: #777d8b; text-decoration: none; transition: background .18s ease, color .18s ease, box-shadow .18s ease;}
.ml-auth-tabs__tab:hover {color: var(--ml-auth-red);}
.ml-auth-tabs__tab.is-active {color: #fff !important; background: var(--ml-auth-red); box-shadow: 0 4px 12px rgba(200,16,46,.17);}
.ml-auth-form {width: 100%;}
.ml-auth-form__grid {display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 15px;}
.ml-auth-field {margin: 0 0 18px !important; min-width: 0;}
.ml-auth-field--full {grid-column: 1 / -1;}
.ml-auth-field__heading {display: flex; justify-content: space-between; align-items: center; gap: 10px;}
.ml-auth-field .ml-auth-field__label {display: block; margin: 0 0 8px; font-size: 12px; font-weight: 800; color: #3e4351; line-height: 1.5;}
.ml-auth-field__forgot {font-size: 11px; color: var(--ml-auth-red); font-weight: 800; margin: 0 0 8px; text-decoration: none; white-space: nowrap;}
.ml-auth-field__forgot:hover {color: var(--ml-auth-red-dark); text-decoration: underline;}
.ml-auth-input {position: relative; display: flex; align-items: center; width: 100%;}
.ml-auth-input > i {position: absolute; left: 16px; color: #b0b4be; font-size: 14px; pointer-events: none; z-index: 1;}
.ml-auth-page .ml-auth-input .form--control {width: 100%; min-height: 49px; padding: 12px 14px 12px 44px !important; border: 1px solid #e6e7ed !important; background: #fcfcfd !important; border-radius: 10px !important; font-size: 13px; font-weight: 500; color: #212531; line-height: 1.4; outline: none; box-shadow: none !important;}
.ml-auth-page .ml-auth-input .form--control::placeholder {color: #a0a4b0; opacity: 1;}
.ml-auth-page .ml-auth-input .form--control:focus {background: #fff !important; border-color: var(--ml-auth-red) !important; box-shadow: 0 0 0 3px rgba(200,16,46,.09) !important;}
.ml-auth-page .ml-auth-input .form--control:focus ~ .ml-auth-password-toggle {color: var(--ml-auth-red);}
.ml-auth-input--password .form--control {padding-right: 47px !important;}
.ml-auth-password-toggle {position: absolute; z-index: 2; right: 6px; width: 39px; height: 39px; display: grid; place-items: center; padding: 0; background: transparent; color: #858995; border: 0; border-radius: 8px; cursor: pointer;}
.ml-auth-password-toggle:hover,.ml-auth-password-toggle:focus-visible {color: var(--ml-auth-red); background: #fff0f3; outline: none;}
.ml-auth-form__options {display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0 0 20px;}
.ml-auth-form__options--register {margin: 2px 0 19px;}
.ml-auth-check {display: inline-flex; align-items: flex-start; gap: 9px; font-size: 12px; line-height: 1.65; color: #687080; cursor: pointer; font-weight: 500; margin: 0;}
.ml-auth-check input {appearance: auto; width: 15px; height: 15px; accent-color: var(--ml-auth-red); margin: 2px 0 0; flex: 0 0 15px; cursor: pointer;}
.ml-auth-check a {color: var(--ml-auth-red); font-weight: 750;}
.ml-auth-check a:hover {text-decoration: underline;}
.ml-auth-page .ml-auth-submit {display: flex; align-items: center; justify-content: center; gap: 13px; border-radius: 10px !important; width: 100%; min-height: 49px; font-size: 14px !important; font-weight: 800; color: #fff; background: var(--ml-auth-red) !important; border: 1px solid var(--ml-auth-red) !important; padding: 12px 16px !important; box-shadow: 0 9px 20px rgba(200,16,46,.14); transition: transform .18s ease, background .18s ease;}
.ml-auth-page .ml-auth-submit:hover {background: var(--ml-auth-red-dark) !important; color: #fff; transform: translateY(-1px);}
.ml-auth-page .ml-auth-submit:focus-visible,.ml-auth-tabs__tab:focus-visible,.ml-auth-page__back:focus-visible {outline: 3px solid rgba(200,16,46,.24); outline-offset: 2px;}
.ml-auth-submit i {font-size: 12px;}
.ml-auth-nextstep {margin: -1px 0 20px; padding: 10px 12px; border-radius: 9px; color: #74707a; background: #faf8f9; font-size: 11px; line-height: 1.65; display: flex; gap: 9px; align-items: flex-start;}
.ml-auth-nextstep i {color: var(--ml-auth-red); margin-top: 2px;}
.ml-auth-alert {display: flex; align-items: flex-start; gap: 10px; padding: 12px 13px; margin: 0 0 19px; border-radius: 9px; color: #97102b; border: 1px solid #ffcbd6; background: #fff3f5; font-size: 12px; line-height: 1.7;}
.ml-auth-alert i {font-size: 15px; margin-top: 2px;}
.ml-auth-captcha {margin-bottom: 17px;}
.ml-auth-captcha .form-group {margin-bottom: 12px;}
.ml-auth-social {margin-top: 24px;}
.ml-auth-social__divider {display: flex; align-items: center; gap: 14px; margin: 0 0 16px; color: #9599a4; font-size: 11px; font-weight: 650; white-space: nowrap;}
.ml-auth-social__divider::before,.ml-auth-social__divider::after {content: ''; height: 1px; flex: 1; background: #ececf0;}
.ml-auth-social__button {min-height: 45px; display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 9px; padding: 10px 14px; background: #fff; border: 1px solid #e5e6eb; border-radius: 9px; font-size: 12px; color: #333746; font-weight: 800; text-decoration: none;}
.ml-auth-social__button:hover {color: var(--ml-auth-red); border-color: #ebb7c2; background: #fffafb;}
.ml-auth-social__button img {width: 18px; height: 18px; object-fit: contain;}
.ml-auth-card__footnote {border-top: 1px solid #f0f0f3; padding-top: 19px; margin: 22px 0 0; text-align: center; font-size: 12px; line-height: 1.6; color: #818593;}
.ml-auth-card__footnote a {color: var(--ml-auth-red); font-weight: 800;}
.ml-auth-card__footnote a:hover {text-decoration: underline;}
.ml-auth-page__legal {text-align: center; margin: 23px 0 0; font-size: 11px; color: #96929b;}
.ml-auth-page__legal span {padding: 0 8px;}
.ml-auth-page__legal a {color: #8d7b82;}
.ml-auth-page__legal a:hover {color: var(--ml-auth-red);}
/* The application's registration-disabled screen is still respected. */
.ml-auth-page .register-disable {min-height: 380px; width: 100%; padding: 30px 15px; background: #fff; border-radius: 18px; display: flex; align-items: center; text-align: center;}
.ml-auth-page .register-disable .container {width: 100%;}
.ml-auth-page .register-disable-image {max-width: 180px; margin: 0 auto 17px;}
.ml-auth-page .register-disable-title {color: var(--ml-auth-ink); font-size: 25px; margin-bottom: 12px;}
.ml-auth-page .register-disable-desc {color: #767988; font-size: 13px; margin: 0 auto 22px; max-width: 440px;}
.ml-auth-page .register-disable-footer-link {display: inline-flex; padding: 12px 20px; background: var(--ml-auth-red); border-radius: 9px; color: #fff; font-weight: 800;}
.ml-auth-page .register-disable-footer-link:hover {background: var(--ml-auth-red-dark); color: #fff;}
@media (max-width: 640px) {
    .ml-auth-page {padding: 17px 12px 27px;}
    .ml-auth-page__topbar {margin: 1px 2px 21px;}
    .ml-auth-page__brand {font-size: 22px;}
    .ml-auth-page__mark {width: 37px; height: 37px; flex-basis: 37px; font-size: 19px;}
    .ml-auth-page__back {padding: 9px 10px; font-size: 11px;}
    .ml-auth-card {padding: 29px 23px 26px; border-radius: 17px;}
    .ml-auth-card__intro {margin-bottom: 21px;}
    .ml-auth-tabs {margin-bottom: 22px;}
    .ml-auth-form__grid {grid-template-columns: 1fr; gap: 0;}
    .ml-auth-field--full {grid-column: auto;}
}
@media (max-width: 375px) {
    .ml-auth-card {padding: 25px 17px 23px;}
    .ml-auth-page__brand {font-size: 20px;}
    .ml-auth-page__back {font-size: 0; padding: 10px;}
    .ml-auth-page__back i {font-size: 13px;}
    .ml-auth-field__forgot {font-size: 10px;}
    .ml-auth-tabs__tab {font-size: 12px;}
}
@media (prefers-reduced-motion: reduce) {
    .ml-auth-page * {transition: none !important;}
}