* { box-sizing: border-box; }

.shise-auth-page {
    width: 100%;
    max-width: 640px;
    min-width: 280px;
    min-height: 100vh;
    margin: 0 auto;
    background: #f7f7f8;
    color: #222;
}

.shise-auth-header {
    position: relative;
    height: 54px;
    background: #fff;
    border-bottom: 1px solid #eee;
}

.shise-auth-header h1 {
    margin: 0 70px;
    font-size: 18px;
    font-weight: 700;
    line-height: 54px;
    text-align: center;
}

.shise-auth-back {
    position: absolute;
    top: 12px;
    left: 14px;
    width: 30px;
    height: 30px;
}

.shise-auth-back img { display: block; width: 30px; height: 30px; }

.shise-auth-switch {
    position: absolute;
    top: 0;
    right: 18px;
    color: #333;
    font-size: 15px;
    line-height: 54px;
}

.shise-auth-brand {
    padding: 24px 20px 18px;
    text-align: center;
    background: linear-gradient(180deg, #fff 0%, #fff8c9 100%);
}

.shise-auth-brand a,
.shise-auth-brand img { display: block; }
.shise-auth-brand a { width: 108px; margin: 0 auto; }
.shise-auth-brand img { width: 100%; height: auto; }
.shise-auth-brand p { margin: 8px 0 0; color: #777; font-size: 14px; letter-spacing: 2px; }

.shise-auth-card {
    width: calc(100% - 32px);
    margin: 14px 16px 24px;
    padding: 22px 20px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .06);
}

.shise-auth-card h2 { margin: 0; font-size: 20px; line-height: 30px; }
.shise-auth-subtitle { margin: 4px 0 16px; color: #999; font-size: 13px; }
.shise-country-row { display: flex; justify-content: space-between; margin-bottom: 10px; padding: 0 14px; color: #777; font-size: 14px; line-height: 42px; background: #fafafa; border-radius: 10px; }
.shise-country-row strong { color: #333; font-weight: 500; }

.shise-field {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 14px;
    background: #f7f7f8;
    border: 1px solid #ececee;
}

.shise-field:first-of-type { border-radius: 12px 12px 0 0; }
.shise-field + .shise-field { border-top: 0; border-radius: 0 0 12px 12px; }
.shise-field label { flex: 0 0 66px; color: #666; font-size: 14px; }
.shise-field input { flex: 1; min-width: 0; height: 50px; margin: 0 !important; padding: 0 !important; color: #222; font-size: 16px !important; line-height: 50px; background: transparent !important; border: 0 !important; border-radius: 0 !important; outline: 0; }

.shise-captcha-field img { flex: 0 0 90px; width: 90px; height: 34px; margin-left: 8px; object-fit: contain; cursor: pointer; }
.shise-auth-message { min-height: 24px; padding: 5px 4px 0; color: #f43b75; font-size: 13px; line-height: 19px; }

.shise-auth-page #buttom6.shise-auth-submit {
    width: 100%;
    height: 48px;
    margin: 12px 0 0 !important;
    padding: 0 !important;
    color: #111 !important;
    font-size: 17px;
    font-weight: 700;
    line-height: 48px;
    text-align: center;
    background: #ffe72c !important;
    border: 0;
    border-radius: 24px;
    box-shadow: 0 8px 18px rgba(255, 216, 0, .24);
    -webkit-appearance: none;
}

.shise-auth-help { display: block; margin-top: 16px; color: #666; font-size: 14px; text-align: center; }
.shise-auth-agreement { margin: 18px 0 0; color: #999; font-size: 12px; line-height: 20px; text-align: center; }
.shise-auth-agreement a { color: #555; }

.shise-register-prompt { display: none; margin-top: 12px; padding: 12px; text-align: center; background: #fff9d8; border-radius: 10px; }
.shise-register-prompt p { margin: 0 0 8px; color: #777; font-size: 13px; }
.shise-register-prompt a { display: block; height: 42px; color: #111; font-size: 15px; font-weight: 700; line-height: 42px; background: #ffe72c; border-radius: 21px; }

@media (max-width: 360px) {
    .shise-auth-card { width: calc(100% - 24px); margin-right: 12px; margin-left: 12px; padding-right: 16px; padding-left: 16px; }
    .shise-field { padding-right: 10px; padding-left: 10px; }
    .shise-field label { flex-basis: 58px; }
    .shise-captcha-field img { flex-basis: 78px; width: 78px; }
}