* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; }
body.vg-auth-body {
    margin: 0;
    font-family: Inter, Arial, "Microsoft YaHei", "PingFang SC", sans-serif;
    color: #111;
    background: #f4f6f8;
    -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
a { color: inherit; text-decoration: none; }

.vg-auth-page {
    min-height: 100vh;
    padding: 34px 20px 38px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.vg-auth-card {
    width: 420px;
    max-width: 100%;
    min-height: 690px;
    background: #fff;
    padding: 25px 30px 28px;
}

.vg-auth-brand {
    width: 174px;
    height: 50px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #52585e;
    font-size: 41px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -1.8px;
}

.vg-auth-title {
    margin: 0 0 28px;
    text-align: center;
    color: #626b73;
    font-size: 26px;
    line-height: 32px;
    font-weight: 700;
    letter-spacing: -.35px;
}

.vg-auth-error {
    margin: 0 0 12px;
    border: 1px solid #e9aaa6;
    border-radius: 5px;
    background: #fff3f2;
    color: #a52b25;
    padding: 9px 11px;
    font-size: 12px;
    line-height: 17px;
}

.vg-auth-form { margin: 0; }
.vg-auth-input {
    width: 100%;
    height: 45px;
    border: 1px solid #aeb7bf;
    border-radius: 8px;
    background: #fff;
    color: #111;
    outline: 0;
    padding: 0 14px;
    font-size: 15px;
    line-height: 20px;
}
.vg-auth-input::placeholder { color: #657381; opacity: 1; }
.vg-auth-input:focus { border-color: #719b3c; box-shadow: 0 0 0 2px rgba(83,134,20,.10); }

.vg-auth-password-step { margin-top: 11px; }
.vg-auth-password-step[hidden] { display: none !important; }

.vg-auth-remember {
    margin: 8px 0 21px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    font-size: 14px;
    line-height: 19px;
    color: #202020;
}
.vg-auth-remember input { position: absolute; opacity: 0; pointer-events: none; }
.vg-auth-check {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid #63aa22;
    background: #63aa22;
    color: #fff;
    display: grid;
    place-items: center;
    flex: 0 0 20px;
    font-size: 15px;
    font-weight: 700;
}
.vg-auth-remember input:not(:checked) + .vg-auth-check { background: #fff; color: transparent; }

.vg-auth-submit,
.vg-auth-guest,
.vg-auth-facebook,
.vg-auth-google {
    width: 100%;
    height: 45px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
    line-height: 18px;
    font-weight: 600;
}
.vg-auth-submit {
    border: 0;
    background: #528c08;
    color: #fff;
}
.vg-auth-submit:disabled {
    cursor: default;
    background: #d7dce0;
    color: #a8b0b7;
}

.vg-auth-legal {
    margin: 17px 8px 17px;
    text-align: center;
    color: #6d7881;
    font-size: 10px;
    line-height: 15px;
}
.vg-auth-legal a { color: #0c8ccf; }

.vg-auth-guest {
    border: 1px solid #5b930e;
    background: #fff;
    color: #558508;
    margin-bottom: 9px;
}
.vg-auth-facebook {
    border: 0;
    background: #4267a9;
    color: #fff;
    margin-bottom: 20px;
}
.vg-auth-facebook-mark {
    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;
    margin-right: 9px;
}

.vg-auth-google {
    border: 1px solid #c9ced3;
    background: #fff;
    color: #202124;
    margin-bottom: 20px;
}
.vg-auth-google:hover {
    background: #f8f9fa;
    border-color: #aeb4ba;
}
.vg-auth-google-mark {
    width: 22px;
    height: 22px;
    margin-right: 9px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    color: #4285f4;
    font-family: Arial, sans-serif;
    font-size: 18px;
    line-height: 1;
    font-weight: 700;
}

.vg-auth-new {
    margin: 0 0 11px;
    text-align: center;
    font-size: 13px;
    line-height: 18px;
}
.vg-auth-new a { color: #078fc9; }

.vg-auth-locale {
    width: calc(100% + 60px);
    margin: 0 -30px -28px;
    border: 1px solid #d1d6da;
    border-radius: 7px 7px 0 0;
    background: #fff;
    padding: 0 15px;
    cursor: pointer;
    color: #697580;
    text-align: left;
}
.vg-auth-locale-row {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}
.vg-auth-locale-row + .vg-auth-locale-row { border-top: 1px solid #d2d6da; }
.vg-auth-lang-icon { width: 18px; text-align: center; }

.vg-auth-feedback {
    position: fixed;
    right: 46px;
    top: 30%;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 8px;
    background: #4f8906;
    color: #fff;
    cursor: pointer;
    font-size: 0;
}
.vg-auth-feedback::after {
    content: '↗';
    font-size: 20px;
    line-height: 1;
}

.vg-auth-register .vg-auth-title { margin-bottom: 20px; }
.vg-auth-register .vg-auth-input { margin-bottom: 10px; }
.vg-auth-register .vg-auth-submit { margin-top: 4px; }
.vg-auth-back { display: block; text-align: center; margin: 15px 0 18px; color: #078fc9; font-size: 13px; }

.vg-auth-guest-form .vg-auth-input { margin-bottom: 10px; }
.vg-auth-order-result {
    border: 1px solid #d4d9dd;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 14px;
    font-size: 13px;
    line-height: 20px;
}
.vg-auth-order-result strong { display: block; font-size: 15px; margin-bottom: 4px; }

@media (max-width: 650px) {
    .vg-auth-page { padding: 0; background: #fff; }
    .vg-auth-card { width: 100%; min-height: 100vh; padding: 24px 24px 28px; }
    .vg-auth-locale { width: calc(100% + 48px); margin-left: -24px; margin-right: -24px; }
    .vg-auth-feedback { display: none; }
}

.vg-auth-brand-image{display:block;max-width:240px;max-height:58px;object-fit:contain;margin:0 auto}