/* Mall presentation; existing authentication owns all interactions. */
.login.sgc-auth-mall-redwhite-v1,
.createNewCount.sgc-auth-mall-redwhite-v1,
.retrievePw.sgc-auth-mall-redwhite-v1 {
    --sgc-auth-red: #d92f36;
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    background: #fff !important;
    color: #24282d;
    overflow: visible !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
}

.login.sgc-auth-mall-redwhite-v1 > .top-img,
.login.sgc-auth-mall-redwhite-v1 > .container > .signin,
.createNewCount.sgc-auth-mall-redwhite-v1 > .content > .title,
.retrievePw.sgc-auth-mall-redwhite-v1 > .content > .title { display: none !important; }

.sgc-auth-mall-redwhite-v1 > .sgc-auth-mall-brand {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: calc(32px + env(safe-area-inset-top, 0px)) 24px 20px;
    background: #fff;
    color: #24282d;
    text-align: center;
}

.sgc-auth-mall-redwhite-v1 .sgc-auth-mall-logo-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    max-width: 100%;
    margin: 0 0 18px;
}
.sgc-auth-mall-redwhite-v1 .sgc-auth-mall-logo { display: block; width: 124px; max-width: 100%; height: auto; max-height: 72px; object-fit: contain; }
.sgc-auth-mall-redwhite-v1 .sgc-auth-mall-heading { margin: 0; max-width: 100%; color: #24282d; font-size: 24px; font-weight: 650; line-height: 1.4; overflow-wrap: anywhere; }
.sgc-auth-mall-redwhite-v1 .sgc-auth-mall-subtitle { display: none; }

.login.sgc-auth-mall-redwhite-v1 > .container,
.createNewCount.sgc-auth-mall-redwhite-v1 > .content,
.retrievePw.sgc-auth-mall-redwhite-v1 > .content {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 480px !important;
    padding: 16px 28px calc(36px + env(safe-area-inset-bottom, 0px)) !important;
    margin: 0 auto !important;
    background: #fff !important;
}

.login.sgc-auth-mall-redwhite-v1 .signInfo > .phone,
.login.sgc-auth-mall-redwhite-v1 .signInfo > .name {
    box-sizing: border-box !important;
    height: 54px !important;
    padding: 11px 16px !important;
    margin: 0 0 14px !important;
    border: 1px solid #d8dce1 !important;
    border-radius: 6px !important;
    background: #fff !important;
}
.login.sgc-auth-mall-redwhite-v1 .signInfo .u-input { padding: 0 !important; width: 100% !important; min-width: 0 !important; min-height: 30px !important; }

.createNewCount.sgc-auth-mall-redwhite-v1 > .content > .item,
.retrievePw.sgc-auth-mall-redwhite-v1 > .content > .item {
    box-sizing: border-box !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    width: 100% !important;
    height: auto !important;
    background: transparent !important;
    border: 0 !important;
}
.createNewCount.sgc-auth-mall-redwhite-v1 > .content > .item > .u-input:not([aria-hidden="true"]),
html body .retrievePw.sgc-auth-mall-redwhite-v1 > .content > .item > .u-input:not([aria-hidden="true"]) {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 54px !important;
    padding: 11px 16px !important;
    border: 1px solid #d8dce1 !important;
    border-radius: 6px !important;
    background: #fff !important;
}

html body .retrievePw.sgc-auth-mall-redwhite-v1 > .content > .item > .u-input:not([aria-hidden="true"]) {
    margin: 0 !important;
}

.login.sgc-auth-mall-redwhite-v1 .signInfo > .phone:focus-within,
.login.sgc-auth-mall-redwhite-v1 .signInfo > .name:focus-within,
.createNewCount.sgc-auth-mall-redwhite-v1 > .content > .item > .u-input:focus-within,
.retrievePw.sgc-auth-mall-redwhite-v1 > .content > .item > .u-input:focus-within { border-color: var(--sgc-auth-red) !important; }

.login.sgc-auth-mall-redwhite-v1 .signInfo .u-input__input,
.createNewCount.sgc-auth-mall-redwhite-v1 .content .u-input__input,
.retrievePw.sgc-auth-mall-redwhite-v1 .content .u-input__input {
    min-height: 30px !important;
    height: 30px !important;
    line-height: 30px !important;
    min-width: 0 !important;
}
html body .login.sgc-auth-mall-redwhite-v1 .signInfo .u-input .uni-input-wrapper,
html body .login.sgc-auth-mall-redwhite-v1 .signInfo .u-input .uni-input-placeholder,
html body .login.sgc-auth-mall-redwhite-v1 .signInfo .u-input input,
html body .createNewCount.sgc-auth-mall-redwhite-v1 .content > .item .u-input .uni-input-wrapper,
html body .createNewCount.sgc-auth-mall-redwhite-v1 .content > .item .u-input .uni-input-placeholder,
html body .createNewCount.sgc-auth-mall-redwhite-v1 .content > .item .u-input input,
html body .retrievePw.sgc-auth-mall-redwhite-v1 .content > .item .u-input .uni-input-wrapper,
html body .retrievePw.sgc-auth-mall-redwhite-v1 .content > .item .u-input .uni-input-placeholder,
html body .retrievePw.sgc-auth-mall-redwhite-v1 .content > .item .u-input input { font-size: 15px !important; line-height: 30px !important; }
.login.sgc-auth-mall-redwhite-v1 .signInfo .uni-input-placeholder,
html body .createNewCount.sgc-auth-mall-redwhite-v1 .content > .item .u-input .uni-input-placeholder,
html body .retrievePw.sgc-auth-mall-redwhite-v1 .content > .item .u-input .uni-input-placeholder { color: #8a9098 !important; }
.sgc-auth-mall-redwhite-v1 .u-input__right-icon { color: #8a9098 !important; }
/* Native uni-input already has a visible overlay; do not paint the same hint twice. */
.login.sgc-auth-mall-redwhite-v1 .signInfo uni-input:has(.uni-input-placeholder) input::placeholder { color: transparent !important; opacity: 0 !important; }

.login.sgc-auth-mall-redwhite-v1 .bottomIfo { margin-top: 2px !important; font-size: 13px !important; color: #656b74 !important; }
.login.sgc-auth-mall-redwhite-v1 .bottomIfo .forgetPw { color: var(--sgc-auth-red) !important; font-size: 13px !important; }
.login.sgc-auth-mall-redwhite-v1 .u-checkbox__icon-wrap--checked { background-color: var(--sgc-auth-red) !important; border-color: var(--sgc-auth-red) !important; }
.login.sgc-auth-mall-redwhite-v1 .signBtn { margin-top: 27px !important; }

.login.sgc-auth-mall-redwhite-v1 .signBtn .login-btn,
.createNewCount.sgc-auth-mall-redwhite-v1 .content > .btn1,
.retrievePw.sgc-auth-mall-redwhite-v1 .content > .btn1 {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    height: 50px !important;
    line-height: 50px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: var(--sgc-auth-red) !important;
    background-image: none !important;
    color: #fff !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}
.createNewCount.sgc-auth-mall-redwhite-v1 .content > .btn1 { margin-top: 22px !important; }
.retrievePw.sgc-auth-mall-redwhite-v1 .content > .btn1 { margin-top: 20px !important; }
.login.sgc-auth-mall-redwhite-v1 .signBtn .login-btn:active,
.createNewCount.sgc-auth-mall-redwhite-v1 .content > .btn1:active,
.retrievePw.sgc-auth-mall-redwhite-v1 .content > .btn1:active { background: #bb252b !important; }

.login.sgc-auth-mall-redwhite-v1 .signBtn .register-link,
.createNewCount.sgc-auth-mall-redwhite-v1 .content > .btn2,
.retrievePw.sgc-auth-mall-redwhite-v1 .content > .btn2 {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    height: 44px !important;
    line-height: 42px !important;
    margin: 18px 0 0 !important;
    padding: 0 14px !important;
    border: 1px solid #dc7579 !important;
    border-radius: 8px !important;
    background: #fff !important;
    background-image: none !important;
    color: var(--sgc-auth-red) !important;
    text-align: center !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}
.login.sgc-auth-mall-redwhite-v1 .signBtn uni-button::after,
.createNewCount.sgc-auth-mall-redwhite-v1 .content > uni-button::after,
.retrievePw.sgc-auth-mall-redwhite-v1 .content > uni-button::after { border: 0 !important; }
.sgc-auth-mall-redwhite-v1 .sgc-register-submit-note { margin: 12px 0 !important; }
html body .login.sgc-auth-mall-redwhite-v1 .signInfo .u-input.u-input--error,
html body .createNewCount.sgc-auth-mall-redwhite-v1 > .content > .item > .u-input.u-input--error,
html body .retrievePw.sgc-auth-mall-redwhite-v1 > .content > .item > .u-input.u-input--error { border-color: #fa3534 !important; }

.retrievePw.sgc-auth-mall-redwhite-v1 .content > .manual-reset-hint {
    display: block;
    margin: 5px 0 0 !important;
    padding: 0 !important;
    color: #747b85 !important;
    font-size: 12px !important;
    line-height: 1.7 !important;
}

.login.sgc-auth-mall-redwhite-v1 .signBtn .login-btn[hidden],
.login.sgc-auth-mall-redwhite-v1 .signBtn .register-link[hidden],
.createNewCount.sgc-auth-mall-redwhite-v1 .content > .btn1[hidden],
.createNewCount.sgc-auth-mall-redwhite-v1 .content > .btn2[hidden],
.retrievePw.sgc-auth-mall-redwhite-v1 .content > .btn1[hidden],
.retrievePw.sgc-auth-mall-redwhite-v1 .content > .btn2[hidden] { display: none !important; }

@media (max-width: 360px) {
    .login.sgc-auth-mall-redwhite-v1 > .container,
    .createNewCount.sgc-auth-mall-redwhite-v1 > .content,
    .retrievePw.sgc-auth-mall-redwhite-v1 > .content { padding-left: 22px !important; padding-right: 22px !important; }
}
@media (max-height: 650px) {
    .sgc-auth-mall-redwhite-v1 > .sgc-auth-mall-brand { padding-top: calc(22px + env(safe-area-inset-top, 0px)); padding-bottom: 14px; }
}

/* Warm storefront hero and a raised form. Artwork is inert, not a new action. */
.login.sgc-auth-mall-impact-v4,
.createNewCount.sgc-auth-mall-impact-v4 {
    background: #fff6ef !important;
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
}
.sgc-auth-mall-impact-v4 > .sgc-auth-mall-brand {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    align-items: flex-start;
    justify-content: flex-start;
    min-height: 242px;
    padding: calc(32px + env(safe-area-inset-top, 0px)) 28px 68px;
    background: #ffe4d0;
    border-bottom: 1px solid #f3d8c4;
    text-align: left;
}
.sgc-auth-mall-impact-v4 .sgc-auth-mall-logo-badge {
    position: relative;
    z-index: 1;
    max-width: 53%;
    width: 152px;
    height: 60px;
    margin: 0 0 24px;
    padding: 10px 14px;
    border: 1px solid #f4d2bc;
    border-radius: 12px;
    background: #fff;
}
.sgc-auth-mall-impact-v4 .sgc-auth-mall-logo {
    width: 124px;
    height: 40px;
    max-height: 40px;
    object-fit: contain;
}
.sgc-auth-mall-impact-v4 .sgc-auth-mall-heading {
    position: relative;
    z-index: 1;
    max-width: 54%;
    font-size: 32px;
    font-weight: 750;
    line-height: 1.2;
    color: #38291f;
}
.sgc-auth-mall-impact-v4 .sgc-auth-mall-heading::after {
    content: "";
    display: block;
    width: 32px;
    height: 4px;
    margin-top: 14px;
    border-radius: 2px;
    background: var(--sgc-auth-red);
}
.sgc-auth-mall-impact-v4 .sgc-auth-mall-shopping-art {
    position: absolute;
    z-index: 0;
    right: 16px;
    bottom: 42px;
    width: 170px;
    height: 172px;
    pointer-events: none;
    user-select: none;
}
.sgc-auth-mall-impact-v4 .sgc-auth-mall-bag {
    position: absolute;
    display: block;
    width: 90px;
    height: 102px;
    border-radius: 8px 8px 18px 18px;
    box-shadow: 0 12px 18px rgba(142, 73, 35, .12);
}
.sgc-auth-mall-impact-v4 .sgc-auth-mall-bag::before {
    content: "";
    position: absolute;
    top: -26px;
    left: 25px;
    width: 40px;
    height: 34px;
    box-sizing: border-box;
    border: 5px solid #fff8f0;
    border-bottom: 0;
    border-radius: 23px 23px 0 0;
}
.sgc-auth-mall-impact-v4 .sgc-auth-mall-bag::after {
    content: "";
    position: absolute;
    top: 37px;
    left: 31px;
    width: 28px;
    height: 5px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .85);
    box-shadow: 0 12px 0 rgba(255, 255, 255, .55);
}
.sgc-auth-mall-impact-v4 .sgc-auth-mall-bag-back {
    top: 28px;
    left: 72px;
    background: #f5a149;
    transform: rotate(12deg);
}
.sgc-auth-mall-impact-v4 .sgc-auth-mall-bag-front {
    top: 70px;
    left: 16px;
    background: #dd4b39;
    transform: rotate(-12deg);
}
.login.sgc-auth-mall-impact-v4 > .container,
.createNewCount.sgc-auth-mall-impact-v4 > .content {
    position: relative;
    z-index: 1;
    width: calc(100% - 32px) !important;
    max-width: 448px !important;
    margin: -28px auto 0 !important;
    padding: 28px 22px 30px !important;
    border: 1px solid #f0e2d7;
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(122, 73, 41, .08);
    background: #fff !important;
    overflow: visible;
}
.login.sgc-auth-mall-impact-v4 .signInfo > .phone,
.login.sgc-auth-mall-impact-v4 .signInfo > .name,
.createNewCount.sgc-auth-mall-impact-v4 > .content > .item > .u-input:not([aria-hidden="true"]) {
    border-color: #e6ded8 !important;
    border-radius: 10px !important;
    background: #fffcfa !important;
}
.login.sgc-auth-mall-impact-v4 .signInfo > .phone:focus-within,
.login.sgc-auth-mall-impact-v4 .signInfo > .name:focus-within,
.createNewCount.sgc-auth-mall-impact-v4 > .content > .item > .u-input:focus-within {
    border-color: var(--sgc-auth-red) !important;
}
.login.sgc-auth-mall-impact-v4 .signBtn .login-btn,
.createNewCount.sgc-auth-mall-impact-v4 .content > .btn1 {
    border-radius: 10px !important;
    box-shadow: 0 5px 12px rgba(217, 47, 54, .15) !important;
}
.login.sgc-auth-mall-impact-v4 .signBtn .register-link,
.createNewCount.sgc-auth-mall-impact-v4 .content > .btn2 {
    border-color: #eed9cf !important;
    border-radius: 10px !important;
}
@media (max-width: 360px) {
    .sgc-auth-mall-impact-v4 > .sgc-auth-mall-brand { padding-left: 22px; padding-right: 22px; min-height: 226px; }
    .sgc-auth-mall-impact-v4 .sgc-auth-mall-shopping-art { right: 8px; bottom: 42px; transform: scale(.8); transform-origin: right bottom; }
    .sgc-auth-mall-impact-v4 .sgc-auth-mall-logo-badge { max-width: 57%; width: 140px; height: 56px; padding: 8px 12px; margin-bottom: 20px; }
    .sgc-auth-mall-impact-v4 .sgc-auth-mall-heading { font-size: 30px; }
    .login.sgc-auth-mall-impact-v4 > .container,
    .createNewCount.sgc-auth-mall-impact-v4 > .content { padding-left: 18px !important; padding-right: 18px !important; }
}
@media (max-height: 650px) {
    .sgc-auth-mall-impact-v4 > .sgc-auth-mall-brand { min-height: 220px; padding-top: calc(22px + env(safe-area-inset-top, 0px)); padding-bottom: 60px; }
}