@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&family=Noto+Serif+SC:wght@600;700&display=swap");

html {
    height: 100%;
}

body.signin,
body.dfx-login {
    min-height: 100%;
    margin: 0;
    color: #1f2a24;
    background: #143526;
    font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.dfx-login {
    overflow: auto;
}

.dfx-stage {
    min-height: 100vh;
    display: flex;
    position: relative;
}

.dfx-stage::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .07;
    background-image: radial-gradient(#fff 0.6px, transparent 0.7px);
    background-size: 3px 3px;
    z-index: 8;
}

.dfx-mural {
    position: relative;
    flex: 1.05;
    min-height: 100vh;
    overflow: hidden;
    color: #f4f7ef;
    background:
        radial-gradient(1200px 600px at -10% 110%, rgba(224, 122, 61, .28), transparent 55%),
        linear-gradient(168deg, #7bc98a 0%, #2fa86a 38%, #1b6b45 72%, #12382a 100%);
}

.leaf {
    position: absolute;
    border-radius: 80% 20% 70% 30%;
    background: rgba(255, 255, 255, .14);
    transform: rotate(-28deg);
}

.leaf-a {
    width: 280px;
    height: 150px;
    top: 8%;
    right: -70px;
    animation: floaty 7s ease-in-out infinite;
}

.leaf-b {
    width: 210px;
    height: 110px;
    top: 38%;
    left: -80px;
    transform: rotate(18deg);
    animation: floaty 9s ease-in-out infinite reverse;
}

.leaf-c {
    width: 120px;
    height: 70px;
    bottom: 14%;
    right: 12%;
    background: rgba(196, 230, 120, .28);
}

.steam {
    position: absolute;
    width: 6px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .35);
    animation: rise 4.2s ease-in-out infinite;
}

.steam-1 { height: 70px; left: 18%; bottom: 28%; }
.steam-2 { height: 90px; right: 22%; bottom: 32%; animation-delay: 1.2s; }
.steam-3 { height: 54px; left: 46%; bottom: 22%; animation-delay: 2.1s; }

@keyframes floaty {
    0%, 100% { transform: rotate(-28deg) translateY(0); }
    50% { transform: rotate(-22deg) translateY(-12px); }
}

@keyframes rise {
    0%, 100% { opacity: .15; transform: translateY(0) scaleX(1); }
    50% { opacity: .55; transform: translateY(-18px) scaleX(1.4); }
}

.mural-copy {
    position: relative;
    z-index: 2;
    max-width: 520px;
    padding: 12vh 8% 8vh;
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 22px;
    color: #f6f1e7;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    box-shadow: 0 10px 30px rgba(18, 56, 42, .18);
}

.brand-en {
    margin: 28px 0 8px;
    letter-spacing: .28em;
    font-size: 12px;
    opacity: .78;
}

.mural-copy h1 {
    margin: 0;
    font-family: "Noto Serif SC", "Noto Sans SC", serif;
    font-size: 64px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: .08em;
}

.slogan {
    margin: 16px 0 0;
    font-size: 18px;
    opacity: .9;
}

.trust {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    margin: 36px 0 0;
    list-style: none;
}

.trust li {
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .16);
    font-size: 13px;
}

.dfx-panel {
    position: relative;
    z-index: 3;
    flex: 0 0 440px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 32px;
    background:
        linear-gradient(180deg, rgba(246, 241, 231, .96), #f3efe4 70%),
        repeating-linear-gradient(90deg, transparent, transparent 31px, rgba(27, 107, 69, .04) 32px);
}

.signinpanel {
    width: 100%;
    max-width: 420px;
    margin: 0;
    color: #1f2a24;
}

.dfx-ticket {
    position: relative;
    padding: 36px 34px 28px;
    background: #fffaf2;
    border-radius: 28px;
    box-shadow: 0 24px 60px rgba(18, 56, 42, .14);
    overflow: hidden;
}

.dfx-ticket::before,
.dfx-ticket::after {
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    background: #efe8d8;
    border-radius: 50%;
    top: 136px;
}

.dfx-ticket::before { left: -11px; }
.dfx-ticket::after { right: -11px; }

.ticket-kicker {
    margin: 0 0 8px;
    color: #c45c22;
    letter-spacing: .24em;
    font-size: 12px;
}

.dfx-ticket h4 {
    margin: 0;
    font-family: "Noto Serif SC", "Noto Sans SC", serif;
    font-size: 34px;
    font-weight: 400;
    color: #143526;
}

.dfx-ticket .m-t-md {
    margin: 8px 0 22px;
    padding-bottom: 18px;
    color: #5d6b63;
    border-bottom: 1px dashed #eadfcd;
}

.dfx-field {
    display: block;
    margin-bottom: 14px;
}

.dfx-field span {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    color: #6a776f;
}

.signinpanel .form-control,
.dfx-login .form-control {
    display: block;
    width: 100%;
    height: 46px !important;
    margin-top: 0;
    padding: 10px 14px !important;
    border: 1px solid #e4ddd0 !important;
    border-radius: 14px !important;
    background: #fff;
    box-shadow: none;
    color: #1f2a24;
}

.signinpanel .uname,
.signinpanel .pword,
.signinpanel .code {
    background-color: #fff;
    color: #1f2a24;
}

.form-control:focus {
    border-color: #2fa86a !important;
    box-shadow: 0 0 0 3px rgba(47, 168, 106, .16) !important;
}

.dfx-captcha {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 6px;
}

.dfx-captcha .dfx-field {
    flex: 1;
    margin-bottom: 0;
}

.dfx-captcha a {
    flex: 0 0 118px;
    height: 46px;
    margin-bottom: 0;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid #e4ddd0;
    background: #fff;
}

.imgcode {
    display: block;
    width: 100%;
    height: 46px;
    object-fit: cover;
}

.checkbox-custom {
    position: relative;
    display: inline-block;
    margin: 16px 0 8px;
    padding: 0 0 0 28px;
}

.checkbox-custom input[type="checkbox"] {
    opacity: 0;
    position: absolute;
    cursor: pointer;
    z-index: 2;
    margin: 0;
    top: 50%;
    left: 2px;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
}

.checkbox-custom label:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -9px;
    width: 18px;
    height: 18px;
    display: inline-block;
    border-radius: 5px;
    border: 1px solid #cfc6b6;
    background: #fff;
}

.checkbox-custom input[type="checkbox"]:checked + label:after {
    position: absolute;
    display: inline-block;
    font-family: "FontAwesome";
    content: "\f00c";
    top: 50%;
    left: 3px;
    margin-top: -7px;
    font-size: 11px;
    line-height: 1;
    color: #1b6b45;
}

.checkbox-custom label {
    cursor: pointer;
    line-height: 1.2;
    font-weight: 400;
    margin-bottom: 0;
    color: #5d6b63;
}

.signinpanel .btn,
.dfx-ticket #btnSubmit {
    margin-top: 10px;
    height: 48px;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(180deg, #e3924a, #d56a2a);
    box-shadow: 0 12px 24px rgba(213, 106, 42, .28);
    font-size: 16px;
    letter-spacing: .12em;
}

.signinpanel .btn:hover,
.signinpanel .btn:focus,
.dfx-ticket #btnSubmit:hover {
    background: linear-gradient(180deg, #ea9d57, #c45c22);
    color: #fff;
}

.dfx-foot {
    margin: 18px 0 0;
    text-align: center;
    color: #8b948c;
    font-size: 12px;
}

.signup-footer {
    margin: 18px 0 0;
    padding: 0;
    border: 0;
    text-align: center;
    color: #7d877f;
    font-size: 12px;
}

label.error {
    position: inherit;
    display: block;
    margin: 6px 0 0;
    color: #c45c22;
    font-size: 12px;
    font-weight: 400;
}

@media screen and (max-width: 1100px) {
    .mural-copy {
        padding: 10vh 6% 8vh;
    }

    .mural-copy h1 {
        font-size: 48px;
    }
}

@media screen and (max-width: 720px) {
    .dfx-stage {
        flex-direction: column;
    }

    .dfx-mural,
    .dfx-panel {
        flex: none;
        width: 100%;
        min-height: auto;
    }

    .mural-copy {
        padding: 48px 28px 36px;
    }

    .mural-copy h1 {
        font-size: 44px;
    }

    .dfx-panel {
        padding: 8px 18px 40px;
    }
}

@media screen and (max-width: 480px) {
    .signinpanel,
    .signuppanel {
        width: auto;
        padding: 0;
    }

    .dfx-ticket {
        padding: 28px 20px 22px;
    }

    .dfx-captcha {
        flex-direction: column;
        align-items: stretch;
    }

    .dfx-captcha a {
        flex: none;
        width: 100%;
    }
}