/* HUAYIPAY sign-in shell shared by merchant, agent and administrator pages. */
*{box-sizing:border-box}
body.cloud-login{margin:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;color:#182334;background:#f1f3f7;font-family:system-ui,"PingFang SC","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}
.cloud-login a{color:inherit;text-decoration:none}
.cloud-login [hidden]{display:none!important}
.cloud-login .staff-option{margin-bottom:16px}
.cloud-login .field.staff-option label{display:flex;align-items:center;gap:8px;margin:0;font-weight:400;color:#64748b}
.cloud-login .staff-option input[type=checkbox]{width:15px;height:15px;margin:0;padding:0;accent-color:#1769ec;box-shadow:none}
.cloud-login .reg-line{margin-top:16px;font-size:12px;text-align:center;color:#738095}
.cloud-login .reg-line a{color:#1769ec}
.cloud-login .cloud-merchant-links{display:flex;justify-content:center;align-items:center;gap:24px}
.cloud-login .cloud-merchant-links .merchant-quick-entry{border:0;padding:0;background:none;color:#1769ec;font:inherit;cursor:pointer}
.cloud-login button,.cloud-login input{font:inherit}
.cloud-login button,.cloud-login a,.cloud-login input{ -webkit-tap-highlight-color:transparent}
.cloud-login :is(a,button):focus-visible{outline:2px solid #1769ec;outline-offset:5px}
.cloud-header{height:86px;display:flex;align-items:center;justify-content:space-between;padding:0 4.4%;position:relative;z-index:1;gap:24px}
.cloud-brand{display:flex;align-items:center;gap:12px;min-width:0}
.cloud-brand img{width:34px;height:34px;object-fit:contain}
.cloud-brand strong{font-size:23px;letter-spacing:.4px;overflow-wrap:anywhere}
.cloud-brand span{font-size:15px;color:#657084;border-left:1px solid #cdd3de;margin-left:9px;padding-left:22px;white-space:nowrap}
.cloud-nav{display:flex;gap:30px;font-size:13px;white-space:nowrap;color:#566174}
.cloud-nav a:hover,.cloud-footer a:hover{color:#1769ec}
.cloud-stage{position:relative;isolation:isolate;flex:1;display:flex;align-items:center;padding:34px 32px 42px;overflow:clip}
.cloud-stage::before{content:"";position:absolute;z-index:-1;width:900px;height:900px;right:-520px;top:-120px;transform:rotate(35deg);border:1px solid #fff;background:linear-gradient(120deg,#e7ebf2a1,#f9fbffbb);box-shadow:-65px 0 0 #ffffff35,-66px 0 0 #ffffff90}
.cloud-layout{display:grid;grid-template-columns:426px minmax(0,1fr);gap:clamp(48px,7vw,110px);align-items:center;width:100%;max-width:1136px;margin:auto}
.cloud-login .login-card{position:relative;background:#fff;padding:30px 38px 24px;border:1px solid #e7ebf1;border-radius:4px;box-shadow:0 12px 44px #21385606;min-width:0}
.cloud-role-nav{display:flex;align-items:center;gap:27px;border-bottom:1px solid #edf0f4;margin-bottom:24px}
.cloud-role-nav a,.cloud-role-nav span{position:relative;padding:0 0 17px;color:#737d8c;font-size:14px;white-space:nowrap}
.cloud-role-nav [aria-current=page]{color:#1463e9;font-weight:600}
.cloud-role-nav [aria-current=page]::after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:2px;background:#1463e9}
.cloud-role-nav a:hover{color:#1463e9}
.cloud-login .login-title{font-size:25px;line-height:1.4;font-weight:600;letter-spacing:.4px;margin:0 0 7px}
.cloud-login .login-sub{font-size:13px;color:#788293;margin:0 0 23px;line-height:1.7}
.cloud-login .field{margin:0 0 16px}
.cloud-login .field label{display:block;font-size:13px;color:#475467;margin-bottom:7px}
.cloud-login .field input{display:block;width:100%;height:46px;padding:0 13px;background:#fff;color:#182334;border:1px solid #d9dee7;border-radius:3px;outline:none;transition:border-color .15s,box-shadow .15s;font-size:14px}
.cloud-login .field input::placeholder{color:#929baa}
.cloud-login .field input:hover{border-color:#9cacc3}
.cloud-login .field input:focus{border-color:#1769ec;box-shadow:0 0 0 3px #1769ec12}
.cloud-password{position:relative}
.cloud-login .cloud-password input{padding-right:46px}
.cloud-password-toggle{position:absolute;right:4px;top:4px;display:grid;place-items:center;width:38px;height:38px;border:0;background:transparent;color:#8792a2;cursor:pointer;border-radius:3px}
.cloud-password-toggle:hover{color:#1769ec;background:#f4f7fc}
.cloud-password-toggle svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cloud-login .cap-box{margin:0 0 12px}
.cloud-login .cap-trigger{height:42px;border-radius:3px;border-color:#e1e6ef;background:#f7f9fc;color:#657286;font-size:13px}
.cloud-login .cap-trigger:hover{border-color:#8fb3ed;color:#1769ec;box-shadow:none}
.cloud-login .cap-trigger.ok{border-color:#b7e4c7;background:#f0fdf4;color:#168248}
.cloud-login .cap-handle,.cloud-login .cap-title b::before{background:#1769ec}
.cloud-login .err{font-size:12px;color:#d33e3e;line-height:1.6;margin:0 0 12px;overflow-wrap:anywhere}
.cloud-login .err:empty{margin:0}
.cloud-login .btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:46px;padding:11px 16px;background:#1769ec;color:#fff;border:1px solid transparent;border-radius:3px;font-size:15px;font-weight:500;letter-spacing:2px;cursor:pointer;transition:background .15s}
.cloud-login .btn:hover{background:#0756d4}
.cloud-login .btn:disabled{opacity:.6;cursor:not-allowed}
.cloud-login .oauth-sep{display:flex;align-items:center;gap:15px;font-size:12px;color:#8a93a1;margin:23px 0 14px}
.cloud-login .oauth-sep::before,.cloud-login .oauth-sep::after{content:"";height:1px;flex:1;background:#edf0f4}
.cloud-login .ql-login-icons{max-width:none;padding:0;gap:6px!important}
.cloud-login .ql-login-icons .ql-login-icon{width:32px;height:32px;padding:7px;background:#f2f5f9;color:#54677e;border-radius:50%}
.cloud-login .ql-login-icons .ql-login-icon:enabled:hover{background:#eaf2ff;color:#1769ec}
.cloud-login .ql-login-icons .ql-login-icon:disabled{opacity:.55}
.cloud-login .ql-login-name{font-size:11px;color:#68778a}
.cloud-login .ql-login-state{font-size:10px;color:#8792a2}
.cloud-login .login-foot{display:flex;align-items:center;justify-content:center;gap:12px;border-top:1px solid #edf0f4;margin-top:20px;padding-top:16px;color:#8a93a1;font-size:12px}
.cloud-login .login-foot svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5}
.cloud-intro{position:relative;min-width:0;padding-top:18px}
.cloud-eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 18px;color:#1769ec;font-size:12px;letter-spacing:2.3px;font-weight:600}
.cloud-eyebrow::before{content:"";width:24px;height:2px;background:currentColor}
.cloud-intro h2{margin:0;color:#1b2c46;font-size:clamp(32px,3.1vw,44px);font-weight:500;line-height:1.45;letter-spacing:1px}
.cloud-intro h2 em{font-style:normal;color:#1769ec}
.cloud-description{font-size:14px;color:#738095;line-height:1.9;margin:19px 0 22px}
.cloud-features{display:flex;gap:24px;padding:0;margin:0;list-style:none;font-size:13px;color:#51627a}
.cloud-features li{display:flex;align-items:center;gap:7px;white-space:nowrap}
.cloud-features svg{width:15px;height:15px;fill:none;stroke:#3479e8;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cloud-art{display:block;width:112%;height:auto;max-width:640px;margin:12px -6% -22px;pointer-events:none}
.cloud-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:23px 4.4%;font-size:11px;line-height:1.8;color:#8893a2;border-top:1px solid #dfe5ee80}
.cloud-footer p{margin:0}.cloud-footer a{margin-left:16px}
@media(min-width:1450px){.cloud-stage{padding-block:55px}.cloud-layout{max-width:1180px;gap:110px;grid-template-columns:446px 1fr}.cloud-login .login-card{padding:40px 42px 30px}.cloud-art{margin-top:24px}}
@media(max-width:1000px){.cloud-layout{gap:36px;grid-template-columns:390px minmax(0,1fr)}.cloud-login .login-card{padding-inline:28px}.cloud-features{gap:11px;flex-wrap:wrap}.cloud-intro h2{font-size:32px}.cloud-art{width:122%;margin-left:-11%}.cloud-brand strong{font-size:21px}}
@media(max-width:780px){.cloud-header{height:74px;padding:0 24px}.cloud-brand span{display:none}.cloud-nav{gap:18px}.cloud-stage{padding:24px 20px 38px}.cloud-layout{display:block;max-width:426px}.cloud-intro{display:none}.cloud-stage::before{opacity:.4}.cloud-login .login-card{padding:32px}.cloud-footer{justify-content:center;text-align:center;padding:20px}.cloud-footer>p:last-child{display:none}}
@media(max-width:400px){.cloud-header{padding:0 18px}.cloud-brand{gap:8px}.cloud-brand img{width:29px;height:29px}.cloud-brand strong{font-size:19px}.cloud-nav{font-size:12px}.cloud-stage{padding:12px 14px 28px}.cloud-login .login-card{padding:28px 22px 24px}.cloud-role-nav{gap:24px}.cloud-login .field input{font-size:16px}.cloud-login .login-title{font-size:23px}}
@media(prefers-reduced-motion:reduce){.cloud-login *{transition:none!important;animation:none!important}}

.cloud-login[data-auto-captcha] #capTrigger{display:none}
.cloud-login[data-auto-captcha] .cap-box{margin:0}

.cloud-login .cloud-role-nav .cloud-email-entry{display:grid;place-items:center;flex:none;margin:-9px 0 8px auto;width:34px;height:34px;padding:7px;border:0;border-radius:6px;background:transparent;color:#8290a2;cursor:pointer}
.cloud-login .cloud-role-nav .cloud-email-entry:hover,.cloud-login .cloud-role-nav .cloud-email-entry[aria-pressed=true]{background:#edf4ff;color:#1769ec}
.cloud-email-entry svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cloud-login .cloud-quick-note{text-align:center;font-size:12px;color:#8792a2;margin:16px 0}

.cloud-auth-entries{display:flex;gap:4px;margin-left:auto}.cloud-login .cloud-auth-entries .cloud-email-entry{margin:-9px 0 8px;width:32px}.cloud-otp-form{margin-top:20px}.cloud-otp-help{font-size:12px;color:#77869e;margin:0 0 16px;line-height:1.8}.cloud-otp-row{display:flex;gap:8px}.cloud-otp-row input{min-width:0;flex:1}.cloud-otp-send{min-width:108px;padding:0 10px;border:1px solid #dce3f0;border-radius:3px;background:#f3f6fc;color:#1769ec;cursor:pointer}.cloud-otp-send:disabled{opacity:.6;cursor:not-allowed}.cloud-otp-message{font-size:12px;line-height:1.7;color:#596b87;margin:0 0 14px}.cloud-otp-back{border:0;background:none;color:#1769ec;cursor:pointer;font:inherit}

@media(max-width:400px){.cloud-role-nav:has(.cloud-auth-entries){gap:14px}}