/*
 * 十香登录页精准样式
 * 只作用于 Authentication/Login.html 中新增的类名
 */

.auth-wrapper.toka-login-page {
    min-height: 100vh;
    padding: 40px 16px;

    color: #172b4d;

    background:
        radial-gradient(
            circle at 15% 18%,
            rgba(102, 169, 255, .14),
            transparent 34%
        ),
        radial-gradient(
            circle at 86% 82%,
            rgba(76, 188, 255, .10),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #f8fbff 0%,
            #edf5ff 54%,
            #f8fbff 100%
        );

    overflow: auto;
}

.auth-wrapper.toka-login-page::before,
.auth-wrapper.toka-login-page::after {
    display: none;
    content: none;
}

.toka-login-page
.auth-card.toka-login-card {
    width: 100%;
    max-width: 440px;
    padding: 28px;

    color: #172b4d;

    border:
        1px solid rgba(77, 139, 245, .24);

    border-radius: 19px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .98),
            rgba(247, 251, 255, .97)
        );

    box-shadow:
        0 22px 52px rgba(39, 83, 145, .13);

    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.toka-login-page
.brand-header {
    margin-bottom: 1.25rem;
}

.toka-login-page
.brand-logo.toka-login-logo {
    display: inline-flex;
    margin-bottom: 0;

    border: 0;
    outline: 0;

    background: transparent;

    box-shadow: none;
}

.toka-login-page
.brand-icon.toka-login-icon {
    display: block;

    width: 64px;
    height: 64px;

    border: 0;
    border-radius: 0;
    outline: 0;

    background: transparent;

    box-shadow: none;

    filter: none;
    -webkit-filter: none;

    transform: none;
}

.toka-login-page
.brand-icon.toka-login-icon:hover {
    transform: none;
    box-shadow: none;
}

.toka-login-page
.auth-subtitle {
    color: #657892;
}

.toka-login-page
.auth-subtitle .text-link {
    color: #246bfe;
}

.toka-login-page
.form-floating > .form-control,
.toka-login-page
.form-floating > .form-control-plaintext {
    height: 57px;

    color: #172b4d;

    border:
        1px solid rgba(77, 139, 245, .30);

    border-radius: 10px;

    background: #ffffff;

    box-shadow:
        inset 0 1px 2px rgba(42, 78, 126, .04);
}

.toka-login-page
.form-floating > label {
    color: #657892;
}

.toka-login-page
.form-control:focus {
    color: #172b4d;

    border-color:
        rgba(36, 107, 254, .65);

    background: #ffffff;

    box-shadow:
        0 0 0 3px rgba(36, 107, 254, .10);
}

.toka-login-page
input:-webkit-autofill,
.toka-login-page
input:-webkit-autofill:hover,
.toka-login-page
input:-webkit-autofill:focus {
    -webkit-text-fill-color:
        #172b4d !important;

    caret-color:
        #172b4d !important;

    -webkit-box-shadow:
        0 0 0 1000px #ffffff inset !important;

    box-shadow:
        0 0 0 1000px #ffffff inset !important;

    transition:
        background-color 99999s ease-out 0s;
}

.toka-login-page
.form-check {
    color: #657892;
}

.toka-login-page
.form-check input[type="checkbox"] {
    border:
        2px solid rgba(36, 107, 254, .32);

    background: #ffffff;

    box-shadow: none;
}

.toka-login-page
.form-check input[type="checkbox"]:checked {
    border-color: #246bfe;

    background:
        linear-gradient(
            135deg,
            #4f83ff,
            #246bfe
        );

    box-shadow:
        0 3px 9px rgba(36, 107, 254, .22);
}

.toka-login-page
.form-check label:hover {
    color: #246bfe;
}

.toka-login-page
.text-link {
    color: #246bfe;
}

.toka-login-page
.text-link:hover {
    color: #165bea;
}

.toka-login-page
.btn-gradient {
    --g1: #4f83ff;
    --g2: #246bfe;

    border-radius: 10px;

    background-image:
        linear-gradient(
            135deg,
            var(--g1),
            var(--g2)
        );

    box-shadow:
        0 10px 24px rgba(36, 107, 254, .22);

    transform: none;
}

.toka-login-page
.btn-gradient:hover {
    background-image:
        linear-gradient(
            135deg,
            #3f77f5,
            #165bea
        );

    box-shadow:
        0 12px 27px rgba(36, 107, 254, .28);

    transform: none;
}

@media screen and (max-width: 576px) {
    .auth-wrapper.toka-login-page {
        padding: 22px 12px;
    }

    .toka-login-page
    .auth-card.toka-login-card {
        padding: 22px;
        border-radius: 16px;
    }
}