/* Shared layout. Brand selection and API logic belong to the JS files. */
.login-page, .login-page * { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
.login-page {
  min-height: 640px;
  font-family: "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.login-page h1, .login-page h2, .login-page p { margin: 0; }
.login-page button, .login-page input { font-family: inherit; }
.login-page [hidden] { display: none !important; }
.login-layout { width: 100%; height: 100%; min-height: 640px; }
.login-form { margin: 0; }
.login-form input { outline: none; }
.login-form button { cursor: pointer; }
.login-form button:disabled { cursor: wait; opacity: .7; }
.login-form [aria-invalid="true"] { outline: 2px solid #ffdd80; outline-offset: -2px; }
.login-form button:focus-visible, .login-form input:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.login-support {
  position: fixed; left: 0; bottom: 1.0417vw; z-index: 2; width: 100%;
  text-align: center; color: #b3cdff; font-size: .8vw;
}
.login-page[data-login-readonly="true"] .login-support { bottom: 44px; }
.login-status {
  position: absolute; top: 100%; left: 0; width: 100%; margin-top: 8px !important;
  padding: 7px 10px; border-radius: 4px; background: rgba(15, 36, 80, .85);
  color: #fff; font-size: 14px; line-height: 20px; text-align: center; overflow-wrap: break-word;
}
.login-noscript { position: fixed; top: 10px; width: 100%; color: #fff; text-align: center; }

/* Default enterprise layout, keeping its original purple artwork. */
.login-layout--default .banner {
  width: 100%; height: 100%; min-height: 640px;
  background: #5149b7 url('../images/loginbg.png') no-repeat center center;
  background-size: cover;
}
.login-layout--default .inner { position: relative; width: 95%; max-width: 1440px; height: 100%; margin: 0 auto; }
.login-layout--default .login {
  position: absolute; top: 100px; bottom: 0; right: 0;
  width: 500px; height: 400px; margin: auto; border-radius: 6px; background: #5149b7; color: #fff;
}
.login-top-image { position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
.login_title {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 100%; color: #fefefe; font-size: 16px; font-weight: bold; text-align: center;
}
.login-heading { margin: 60px 0 0 20px !important; font-size: 20px; line-height: 24px; font-weight: bold; }
.login_input_name, .login_input_password {
  position: relative; width: 456px; height: 56px; margin: 40px auto 0;
  border: 3px solid #6a69e0; border-radius: 4px;
}
.login_input_name { margin-top: 20px; }
.login_input_name img, .login_input_password img {
  position: absolute; top: 50%; left: 10px; width: 20px; height: 20px; transform: translateY(-50%);
}
.login_input_name input, .login_input_password input {
  width: 100%; height: 50px; padding: 0 40px; border: none;
  background: transparent; color: #fff; font-size: 16px;
}
.login-layout--default input::placeholder { color: #6a69e0; }
.show-hide-btn {
  position: absolute; top: 0; right: 6px; height: 50px; padding: 0 4px;
  border: 0; background: transparent; color: #fff; font-size: 12px;
}
.login_input_checkbox { width: 450px; height: 50px; margin: 35px auto 0; }
.login-layout--default .layui-form-checkbox[lay-skin=primary] span { color: #9796ff; }
.login_btn_panel { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); }
.login_btn_panel button {
  display: block; width: 332px; height: 50px; border: none; border-radius: 4px;
  background: #4a43ac; color: #665ed8; font-size: 18px; line-height: 40px;
}
.login-form.has-input .login_btn_panel button { background: #53e4eb; color: #fff; }

/* Partner layout: shared by Sunshine Delivery and Wolizhai. */
.login-layout--partner .content {
  position: relative; width: 100%; height: 100%; min-height: 640px;
  background: #2d65da url('./img/loginbg.png') no-repeat center center;
  background-size: cover;
}
.loginsystemName { padding-top: 5%; color: #fefefe; font-size: 2.5vw; font-weight: 600; text-align: center; }
.content .login_box {
  position: absolute; top: 50%; right: 13%; width: 370px; height: 350px; margin-top: -160px;
  display: flex; align-items: center; flex-direction: column; border-radius: 6px; background: #3364b1;
}
.content .ioctop {
  position: absolute; top: -5px; left: 50%; width: 134px; height: 33px; margin-left: -67px;
  background: url('./img/ioctop.png') center no-repeat; color: #fefefe;
  font-size: 16px; font-weight: 600; line-height: 33px; text-align: center;
}
.content .login_tit { margin-top: 50px; color: #fff; font-size: 18px; font-weight: normal; text-shadow: -1px 1px 0 #184a9e; }
.content .login_info { margin-top: 18px; }
.content .login_infoBox {
  display: flex; align-items: center; justify-content: space-around;
  width: 322px; height: 50px; padding-left: 20px; border-radius: 4px; background: #3c85de;
}
.content .login_infoBox + .login_infoBox { margin-top: 20px; }
.content .login_infoBox img { width: 24px; }
.content .login_infoBox input { width: 85%; height: 100%; border: none; background: transparent; color: #fff; font-size: 14px; }
.content .login_infoBox input::placeholder { color: #79b0ed; }
.content .login_wording { display: flex; align-items: center; width: 340px; margin-top: 18px; font-size: 14px; }
.content .login_wording label { display: flex; align-items: center; color: #79b0ed; cursor: pointer; }
.content .login_wording input { position: absolute; width: 18px; height: 18px; opacity: 0; }
.content .spot { width: 18px; height: 18px; margin-right: 16px; border: 1px solid #3c85de; border-radius: 4px; }
.content .login_wording input:checked + .spot { border-color: #79b0ed; background: url('./img/jizhu.png') center no-repeat; }
.content .login_wording input:focus-visible + .spot { outline: 2px solid #fff; }
.content .login_wording input:disabled + .spot { opacity: .5; }
.content .login_submit {
  width: 322px; height: 50px; margin-top: 20px; padding: 0; border: none; border-radius: 4px;
  background: #00e2d7; color: #fff; font-size: 16px; line-height: 50px;
}

@media screen and (max-width: 1500px) { .content .login_box { right: 6%; } }
@media screen and (max-width: 1200px) {
  .loginsystemName { font-size: 48px; }
  .login-support { font-size: 12px; }
}
@media screen and (max-width: 600px) {
  .loginsystemName { padding: 48px 16px 0; font-size: 28px; }
  .content .login_box { left: 16px; right: 16px; width: auto; }
  .content .login_info, .content .login_infoBox, .content .login_submit { width: 100%; }
  .content .login_info, .content .login_submit { max-width: calc(100% - 48px); }
  .content .login_wording { width: calc(100% - 48px); }
  .login-layout--default .login { width: 100%; }
  .login_input_name, .login_input_password, .login_input_checkbox { width: calc(100% - 32px); }
  .login_btn_panel { width: calc(100% - 64px); }
  .login_btn_panel button { width: 100%; }
}

/* Preserve Sunshine's original blue artwork and right-hand login composition. */
.sunshine-only { display:none; }
.login-page[data-login-brand="sunshine"] {
  position:relative; height:auto; min-height:100%; color:#fff; background:#2459c7;
  font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
}
[data-login-brand="sunshine"] .sunshine-only { display:block; }
[data-login-brand="sunshine"] .login-layout--partner { height:auto; min-height:100svh; }
[data-login-brand="sunshine"] .content {
  display:flex; justify-content:flex-end; align-items:center;
  min-height:max(780px,100svh); height:auto; padding:190px max(6vw,32px) 150px;
  background:#2459c7 url('./img/loginbg.png') no-repeat center center; background-size:cover;
}
[data-login-brand="sunshine"] .logotop {
  position:absolute; top:64px; left:24px; right:24px;
  display:flex; justify-content:center; align-items:center; gap:14px;
}
[data-login-brand="sunshine"] .loginsystemName { padding:0; color:#fff; font-size:34px; font-weight:600; letter-spacing:.08em; text-align:center; text-shadow:0 2px 18px #1238a033; }
[data-login-brand="sunshine"] .login-brand-mark { display:grid; place-items:center; width:42px; height:42px; color:#a4f1ff; }
.login-brand-mark svg { width:34px; height:34px; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; }
[data-login-brand="sunshine"] .login-edition { position:absolute; top:58px; font-size:12px; letter-spacing:.22em; color:#c4ddff; }
[data-login-brand="sunshine"] .content .login_box {
  position:relative; inset:auto; display:block; width:400px; height:auto; margin:0;
  padding:46px 34px 28px; border:1px solid rgba(166,215,255,.38); border-radius:16px;
  background:linear-gradient(145deg,rgba(66,126,218,.94),rgba(35,83,169,.96));
  box-shadow:0 24px 64px -24px rgba(9,34,107,.7),inset 0 1px 0 rgba(220,242,255,.14);
}
[data-login-brand="sunshine"] .content .ioctop {
  display:block; top:-6px; width:134px; height:33px; margin-left:-67px;
  background:url('./img/ioctop.png') center no-repeat; font-size:13px; letter-spacing:.12em;
}
[data-login-brand="sunshine"] .content .login_tit { margin:0; font-size:25px; line-height:1.4; font-weight:550; text-shadow:none; color:#fff; }
[data-login-brand="sunshine"] .login-description { margin-top:9px; color:#d3e4ff; font-size:12px; line-height:1.7; }
[data-login-brand="sunshine"] .content .login_info { width:100%; max-width:none; margin-top:46px; }
[data-login-brand="sunshine"] .content .login_infoBox {
  display:block; position:relative; width:100%; height:48px; padding:0;
  border:1px solid #8cb5ed; border-radius:8px; background:rgba(104,167,246,.24);
  transition:border-color .15s,box-shadow .15s,background .15s;
}
[data-login-brand="sunshine"] .content .login_infoBox + .login_infoBox { margin-top:44px; }
[data-login-brand="sunshine"] .login_infoBox:focus-within { border-color:#9af5ff; background:rgba(122,189,255,.3); box-shadow:0 0 0 3px rgba(117,231,255,.15); }
[data-login-brand="sunshine"] .login_infoBox label {
  position:absolute; top:-27px; left:0; width:auto; height:auto; margin:0;
  overflow:visible; clip:auto; font-size:12px; line-height:20px; color:#e0eeff;
}
[data-login-brand="sunshine"] .login_infoBox img { position:absolute; width:20px; height:20px; object-fit:contain; left:13px; top:13px; opacity:.9; }
[data-login-brand="sunshine"] .content .login_infoBox input { width:100%; height:46px; padding:0 14px 0 43px; border:0; border-radius:8px; background:transparent; color:#fff; font-size:15px; }
[data-login-brand="sunshine"] .content .login_infoBox input::placeholder { color:#c4dafe; font-size:12px; }
[data-login-brand="sunshine"] #partner-password { padding-right:58px; }
[data-login-brand="sunshine"] .partner-password-toggle { position:absolute; right:4px; top:4px; height:38px; min-width:46px; border:0; border-radius:5px; color:#e1f6ff; background:transparent; font-size:12px; }
[data-login-brand="sunshine"] .partner-password-toggle:hover { background:#ffffff12; }
[data-login-brand="sunshine"] .content .login_wording { width:100%; margin-top:20px; }
[data-login-brand="sunshine"] .login_wording label { color:#d3e4ff; font-size:12px; line-height:20px; }
[data-login-brand="sunshine"] .spot { display:none; }
[data-login-brand="sunshine"] .login_wording input { position:static; opacity:1; width:15px; height:15px; margin:0 8px 0 0; accent-color:#45e2ee; }
[data-login-brand="sunshine"] .content .login_submit { width:100%; max-width:none; height:48px; margin-top:24px; padding:0; border:1px solid #8cf4ff; border-radius:8px; background:linear-gradient(100deg,#45e2e7,#6debf6); color:#12476d; font-size:15px; font-weight:600; line-height:46px; letter-spacing:.2em; box-shadow:0 7px 20px #122c7826; transition:filter .15s; }
[data-login-brand="sunshine"] .login_submit:hover:not(:disabled) { filter:brightness(1.08); }
[data-login-brand="sunshine"] .login-form button:focus-visible { outline:2px solid #c1ffff; outline-offset:3px; }
[data-login-brand="sunshine"] .login-form input:focus-visible { outline:none; }
[data-login-brand="sunshine"] .login-form [aria-invalid="true"] { outline:2px solid #ffcf9e; outline-offset:-2px; }
[data-login-brand="sunshine"] .login-status { position:static; margin-top:16px!important; padding:10px 12px; border:1px solid #ffda9b88; border-radius:7px; background:#593d563d; color:#ffe7be; font-size:12px; line-height:1.7; text-align:left; }
[data-login-brand="sunshine"] .login-help { margin-top:24px; padding-top:18px; border-top:1px solid #c3e1ff30; color:#cce0ff; font-size:11px; line-height:1.7; text-align:center; }
[data-login-brand="sunshine"] .login-support { position:absolute; bottom:28px; color:#c3dbff; font-size:11px; line-height:1.8; padding:0 16px; }
[data-login-brand="sunshine"][data-login-readonly="true"] .login-support { bottom:60px; }
@media (min-width:1600px) { [data-login-brand="sunshine"] .content { padding-right:13vw; } }
@media (max-width:960px) and (min-width:701px) {
  [data-login-brand="sunshine"] .content { padding-right:28px; background-position:42% center; }
  [data-login-brand="sunshine"] .content .login_box { width:360px; padding-left:28px; padding-right:28px; }
}
@media (max-width:700px) {
  [data-login-brand="sunshine"] .content { display:block; min-height:100svh; padding:310px 20px 140px; background-size:auto 460px; background-position:18% top; background-color:#265bd0; }
  [data-login-brand="sunshine"] .logotop { top:30px; gap:8px; left:12px; right:12px; }
  [data-login-brand="sunshine"] .loginsystemName { font-size:23px; letter-spacing:.04em; }
  [data-login-brand="sunshine"] .login-brand-mark { width:30px; height:30px; }
  [data-login-brand="sunshine"] .login-brand-mark svg { width:28px; height:28px; }
  [data-login-brand="sunshine"] .login-edition { top:44px; font-size:10px; letter-spacing:.16em; }
  [data-login-brand="sunshine"] .content .login_box { width:100%; max-width:400px; margin:0 auto; padding:42px 26px 24px; }
  [data-login-brand="sunshine"] .login-support { font-size:10px; }
}
@media (prefers-reduced-motion:reduce) { [data-login-brand="sunshine"] * { transition:none!important; } }

/* Field feedback belongs to the edited control; request feedback to the form. */
.login-field-error { position:absolute; left:0; top:calc(100% + 5px); color:#ffe4b4; font-size:12px; line-height:18px; }
.login_input_name, .login_input_password { position:relative; }
.login-caps { color:#ffe4b4; font-size:12px; line-height:20px; }
.login-progress { margin-top:12px!important; color:#d5edff; font-size:12px; line-height:20px; text-align:center; }
[data-login-brand="sunshine"] .content .login_infoBox.has-error { border-color:#ffcf9e; }
[data-login-brand="sunshine"] .content .login_infoBox.has-error + .login_infoBox { margin-top:64px; }
[data-login-brand="sunshine"] .content .login_info:has(.login_infoBox:last-child.has-error) { margin-bottom:28px; }
[data-login-brand="sunshine"] .login-caps { margin-top:12px; align-self:flex-start; }
[data-login-brand="sunshine"] input:autofill { border-radius:7px; }
[data-login-brand="sunshine"] input:-webkit-autofill { -webkit-text-fill-color:#fff; -webkit-box-shadow:0 0 0 1000px #3f7acc inset; caret-color:white; }
[data-login-brand="sunshine"] .login-form[aria-busy="true"] .login_infoBox { opacity:.8; }
[data-login-brand="sunshine"] .login_submit:disabled { cursor:progress; opacity:.85; }
[data-login-brand="sunshine"] .login_submit[disabled]::before { content:''; display:inline-block; width:12px; height:12px; margin-right:10px; border:2px solid #12476d55; border-top-color:#12476d; border-radius:50%; vertical-align:-2px; animation:login-spin .8s linear infinite; }
@keyframes login-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { [data-login-brand="sunshine"] .login_submit::before { animation:none; } }
[data-login-brand="sunshine"][data-login-readonly="true"] .login_wording input { display:none; }
[data-login-brand="sunshine"][data-login-readonly="true"] .login_wording label { cursor:default; }
[data-login-brand="sunshine"][data-login-readonly="true"] .login_wording label::before { content:''; width:5px; height:5px; margin-right:8px; border-radius:50%; background:#a6eaf4; }