.login-page {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: 100vw;
    max-width: 100vw;
    box-sizing: border-box;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 24px 16px;
    background:
        radial-gradient(circle at 18% 18%, rgba(13, 153, 255, .22), transparent 32rem),
        radial-gradient(circle at 82% 78%, rgba(52, 211, 153, .12), transparent 28rem),
        linear-gradient(135deg, #07111f 0%, #0b1728 52%, #101c2d 100%);
}

.login-page::before {
    position: absolute;
    inset: -35%;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 42px 42px;
    content: "";
    opacity: .55;
    transform: rotate(-8deg);
}

.login-page::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(circle at center, transparent 0 28%, rgba(1, 2, 2, .28) 100%);
    content: "";
}

.auth-content {
    padding: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.auth-content .register {
    padding: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.auth-content .register::before {
    display: none;
}

.auth-content .register__body {
    display: block;
    min-height: 0;
    max-width: none;
}

.login-page__panel {
    position: relative;
    z-index: 1;
    width: min(100%, 440px);
    max-width: 100%;
}

.login-form {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 32px;
    background: #010202;
    border: 1px solid #555;
    border-radius: var(--ui-radius-panel, 12px);
    box-shadow: 0 24px 70px rgba(1, 2, 2, .38), 0 0 0 1px rgba(255, 255, 255, .06);
    color: var(--ui-color-surface, #fff);
}

.form__title, .form__label { color: #fff !important; }
.form__group { position: relative; }
.form__input { width: 100%; box-sizing: border-box; }

.form__btn {
    width: 100%;
    min-height: var(--ui-control-height, 44px);
    background-color: var(--ui-color-primary) !important;
    color: var(--ui-color-surface) !important;
}

.form__btn:disabled { opacity: .65; cursor: wait; }

.pass-check__btn {
    position: absolute;
    right: 8px;
    bottom: 4px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    color: inherit;
    background: transparent;
    border: 0;
}

@media (max-width: 480px) {
    .login-page { padding: 16px; }
    .login-form { padding: 24px 20px; }
}