/* ============================================================
   login-rainbow.css - Rainbow UI Login Page Style (精简版)
   ============================================================ */

/* ---------- CSS Custom Properties ---------- */
:root {
  --rainbow-red: #ff4757;
  --rainbow-orange: #ff6348;
  --rainbow-yellow: #ffa502;
  --rainbow-green: #2ed573;
  --rainbow-blue: #1e90ff;
  --rainbow-purple: #a855f7;
  --rainbow-pink: #ec4899;
  --rainbow-gradient: linear-gradient(135deg, var(--rainbow-red), var(--rainbow-orange), var(--rainbow-yellow), var(--rainbow-green), var(--rainbow-blue), var(--rainbow-purple), var(--rainbow-pink));
}

/* ---------- Reset & Base ---------- */
html, body { width: 100%; height: 100%; }

body {
  margin: 0; padding: 0;
  font-family: "Microsoft YaHei", "Open Sans", Arial, "Hiragino Sans GB", "STHeiti", "WenQuanYi Micro Hei", SimSun, sans-serif;
  background: var(--rainbow-gradient);
  background-size: 400% 400%;
  color: rgba(0, 0, 0, 0.8);
  font-size: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
  word-wrap: break-word;
  min-height: 100vh;
}

a { text-decoration: none; }
button, input { font-family: "Microsoft YaHei", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; }
input[type="submit"], input[type="reset"], input[type="button"], button { -webkit-appearance: none; }
:focus { outline: 0; }
* { box-sizing: border-box; }

::-webkit-input-placeholder { color: rgba(0,0,0,.6); }
::-moz-placeholder { color: rgba(0,0,0,.6); }
:-ms-input-placeholder { color: rgba(0,0,0,.6); }

/* ---------- Login Card ---------- */
.loginbox {
  position: relative;
  background: linear-gradient(135deg, #ffffff 0%, #a855f7 33%, #f0f0eb 66%, #87ceeb 100%);
  width: 460px;
  margin: 0 auto;
  border-radius: 20px;
  padding: 44px 0 60px;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.loginbox.has-left { width: 760px; padding-left: 300px; }
.loginbox.has-left .loginimage { position: absolute; left: 0; top: 0; bottom: 0; width: 300px; border-radius: 20px 0 0 20px; overflow: hidden; }
.loginbox.has-left .loginimage img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Content Area ---------- */
.loginbox .part { max-width: 340px; width: 100%; display: inline-block; position: relative; z-index: 2; }

.loginbox h2 { font-size: 28px; text-align: center; margin: 20px auto; color: #333; }
.loginbox h2 a { color: #333; }
.loginbox h2 img { width: 80px; height: auto; border: none; border-radius: 50%; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); border: 3px solid rgba(0, 0, 0, 0.08); }
.loginbox p { margin: 0; }

/* ---------- Input Items ---------- */
.loginbox .input-item { margin-bottom: 10px; position: relative; font-size: 13px; }
.loginbox .input-item .icon { position: absolute; left: 10px; top: 10.5px; color: rgba(0, 0, 0, 0.4); z-index: 2; }

.loginbox .input-item .input-control {
  padding: 13px 12px 13px 33px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  width: 100%;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.85);
  color: #1a1a2e;
  font-size: 16px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.loginbox .input-item .input-control:focus {
  border-color: #fff;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3), 0 4px 15px rgba(0, 0, 0, 0.1);
}

.loginbox .input-item .input-control:focus + .icon,
.loginbox .input-item:focus-within .icon { color: var(--rainbow-purple); }

/* ---------- Captcha ---------- */
.loginbox .input-item .captcha-img { top: -9.5px; right: -13px; cursor: pointer; height: 38px; position: relative; border-radius: 6px; overflow: hidden; }

.loginbox .input-item .captcha-clk,
.loginbox .input-item .captcha-clk2,
.loginbox .input-item .captcha-sms-clk {
  position: absolute; cursor: pointer; font-size: 13px;
  color: var(--theme-color, #ff5f33);
  display: inline-block; top: 13px; right: 15px;
  font-weight: 500; padding: 2px 6px; border-radius: 4px;
}

.loginbox .input-item .captcha-clk.disabled,
.loginbox .input-item .captcha-sms-clk.disabled { cursor: auto; opacity: 0.5; }

.loginbox .input-item .invitation-link {
  position: absolute; top: 8px; right: 8px; font-size: 12px;
  color: #fff; background: var(--rainbow-gradient);
  background-size: 200% 200%;
  padding: 5px 10px; border-radius: 6px; font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); z-index: 3;
}

/* ---------- Submit Button ---------- */
.loginbox .input-submit { margin-bottom: 6px; }

.loginbox .input-submit .submit {
  font-size: 15px;
  background: var(--rainbow-gradient);
  background-size: 400% 400%;
  color: #fff;
  width: 100%;
  border: none;
  border-radius: 10px;
  padding: 12px 0;
  cursor: pointer;
  font-weight: 700;
  letter-spacing: 1px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2), 0 0 20px rgba(255, 71, 87, 0.2);
}

.loginbox .input-submit .submit:hover { opacity: 0.9; }

/* ---------- Safe Links ---------- */
.loginbox .safe { margin-bottom: 30px; margin-top: 15px; overflow: hidden; text-align: left; }
.loginbox .signup-social-only .safe { margin-bottom: 0; }
.loginbox .safe a { font-size: 13px; color: var(--rainbow-purple); font-weight: 600; float: left; }
.loginbox .safe .signup-loader, .loginbox .safe .signsms-loader { float: right; }

/* ---------- Tips ---------- */
.loginbox .sign-tips2, .loginbox .sign-tip { font-size: 8px; color: #f42; margin-bottom: 10px; margin-top: -4px; display: none; }
.loginbox .mpPart .sign-tips2 { text-align: center; margin-top: 5px; }
.loginbox .sign-tips2 a { display: none; }
.loginbox .regSuccess { font-size: 14px; text-align: center; margin-top: 90px; }

/* ---------- Social Login ---------- */
.loginbox .social-login { text-align: center; font-size: 13px; }
.loginbox .signup-social-only .sign-social { margin-bottom: 50px; }
.loginbox .social-login .social-title { margin-bottom: 20px; }
.loginbox .social-login span { color: #aaa; position: relative; }
.loginbox .social-login span:before { top: 9px; left: -105px; }
.loginbox .social-login span:after { top: 9px; right: -105px; }
.loginbox .social-login span:before, .loginbox .social-login span:after { position: absolute; content: ''; border-bottom: rgba(0, 0, 0, 0.08) 1px solid; width: 90px; }

.sign-social .login-qq,
.sign-social .login-weibo,
.sign-social .login-weixin,
.sign-social .login-google,
.sign-social .login-facebook,
.sign-social .login-twitter {
  color: #fff; font-size: 28px; text-align: center;
  width: 50px; height: 50px; line-height: 50px;
  border-radius: 50%; margin: 0 8px; display: inline-block;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.loginbox .signup-social-only .sign-social .login-qq,
.loginbox .signup-social-only .sign-social .login-weibo,
.loginbox .signup-social-only .sign-social .login-weixin,
.loginbox .signup-social-only .sign-social .login-google,
.loginbox .signup-social-only .sign-social .login-facebook,
.sign-social .login-twitter { width: 60px; height: 60px; line-height: 60px; }

.sign-social .login-qq { background-color: #3F92D6; }
.sign-social .login-weibo { background-color: #FF766C; }
.sign-social .login-weixin { background-color: #40C34A; }
.sign-social .login-google { background-color: #ea4335; }
.sign-social .login-facebook { background-color: #1877F2; }
.sign-social .login-twitter { background-color: #4ab3f4; }

.sign-social .login-qq:hover, .sign-social .login-weibo:hover, .sign-social .login-weixin:hover,
.sign-social .login-google:hover, .sign-social .login-facebook:hover, .sign-social .login-twitter:hover {
  color: #fff; opacity: 1;
}

.sign-social .icon { font-size: 28px; top: 0; }
.loginbox .signup-social-only .sign-social .icon { font-size: 28px; }

/* ---------- Form Policy ---------- */
.form-policy { margin-top: 5px; font-size: 12px; color: #999; text-align: left; }
.form-policy input { position: relative; top: 2px; margin: 0; }
.form-policy a { color: var(--theme-color, #ff5f33); }
.form-policy a:hover { text-decoration: underline; }

/* ---------- Utility ---------- */
.left { float: left; }
.right { float: right; }

/* ---------- WeChat Scan ---------- */
.erphp-weixin-scan { text-align: center; z-index: 99; }
.erphp-weixin-scan img { margin: 10px 0; border-radius: 3px; }

/* ---------- Payment Radios ---------- */
.loginform .payment-radios { text-align: center; }
.loginform .payment-radios .paytype { display: none; }
.loginform .payment-radios .icon { top: 2px; left: 0; font-size: 32px; position: relative; }
.loginform .payment-radios label { margin: 0 5px; cursor: pointer; display: inline-block; line-height: 1; width: 44px; height: 44px; border: 2px solid #eaeaea; border-radius: 50%; text-align: center; padding: 2px; }
.loginform .payment-radios .payment-alipay-label .icon { color: #00a3ee; }
.loginform .payment-radios .payment-wxpay-label .icon { color: #00c250; }
.loginform .payment-radios .payment-qqpay-label .icon { color: #0BB2FF; }
.loginform .payment-radios .payment-paypal-label .icon { color: #0070ba; }
.loginform .payment-radios .paytype:checked + label { border: 2px solid var(--theme-color); }
.loginform .payment-radios .paytype:checked + .payment-alipay-label { border: 2px solid #00a3ee; }
.loginform .payment-radios .paytype:checked + .payment-wxpay-label { border: 2px solid #00c250; }
.loginform .payment-radios .paytype:checked + .payment-qqpay-label { border: 2px solid #0BB2FF; }
.loginform .payment-radios .paytype:checked + .payment-paypal-label { border: 2px solid #0070ba; }
.loginform .payment-radios label:last-child { margin-right: 0; }

/* ---------- Expend Container ---------- */
.expend-container { position: absolute; right: 0; top: 0; cursor: pointer; z-index: 10; }
.expend-container a { display: inline-block; }
.expend-container svg { fill: rgba(0, 0, 0, 0.4); }

/* ---------- Return Home ---------- */
.return-home {
  position: fixed; top: 20px; left: 20px; text-align: center;
  background: rgba(255, 255, 255, 0.15);
  width: 65px; height: 65px; line-height: 65px;
  border-radius: 16px; display: inline-block;
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  z-index: 100;
}
.return-home .icon { font-size: 28px; }

/* ============================================================
   DARK MODE
   ============================================================ */
body.night { background-color: #1a1a2e !important; color: #b0b0c0; }
body.night ::-webkit-input-placeholder { color: #777; }
body.night ::-moz-placeholder { color: #777; }
body.night :-ms-input-placeholder { color: #777; }

body.night .loginbox {
  background: rgba(30, 30, 50, 0.72);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

body.night .loginbox .input-item .input-control {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
  color: #e8e8f0;
}

body.night .loginbox .input-item .input-control:focus {
  border-color: var(--rainbow-blue);
  background: rgba(255, 255, 255, 0.18);
  box-shadow: 0 0 0 3px rgba(30, 144, 255, 0.15), 0 2px 8px rgba(0, 0, 0, 0.2);
}

body.night .loginbox .input-item .icon { color: rgba(255, 255, 255, 0.35); }
body.night .loginbox .input-item:focus-within .icon { color: var(--rainbow-blue); }

body.night .loginbox .safe a { color: #888; }
body.night .loginbox .social-login span { color: #666; }
body.night .loginbox .expend-container svg { fill: #777; }
body.night .loginbox .form-policy { color: #666; }
body.night .loginbox .form-policy a { color: #999; }

body.night .return-home {
  background: rgba(30, 30, 50, 0.72);
  color: #777;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

body.night .loginbox .input-item .captcha-clk,
body.night .loginbox .input-item .captcha-clk2,
body.night .loginbox .input-item .captcha-sms-clk { color: var(--rainbow-blue); }

body.night .loginform .payment-radios label { border-color: rgba(255, 255, 255, 0.1); }

body.night .loginbox .input-submit .submit {
  background: var(--rainbow-gradient);
  background-size: 400% 400%;
  color: #fff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 71, 87, 0.15);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .loginbox.has-left { width: 100%; padding-left: 0; }
  .loginbox.has-left .loginimage { display: none; }
  .return-home { width: 50px; height: 50px; line-height: 50px; top: 12px; left: 12px; border-radius: 12px; }
  .return-home .icon { font-size: 22px; }
}

@media (max-width: 640px) {
  .loginbox { width: 100%; border-radius: 0; box-shadow: none !important; padding: 30px 20px 50px; top: auto; transform: none; margin: 0; min-height: 100vh; }
  .loginbox .part { max-width: 100%; }
  .loginbox h2 { font-size: 24px; }
  .loginbox .input-item .input-control { border-radius: 8px; padding: 12px 12px 12px 33px; font-size: 16px; }
  .loginbox .input-submit .submit { border-radius: 8px; padding: 11px 0; }
  .sign-social .login-qq, .sign-social .login-weibo, .sign-social .login-weixin,
  .sign-social .login-google, .sign-social .login-facebook, .sign-social .login-twitter {
    width: 44px; height: 44px; line-height: 44px; font-size: 24px; margin: 0 6px;
  }
  .loginbox .signup-social-only .sign-social .login-qq,
  .loginbox .signup-social-only .sign-social .login-weibo,
  .loginbox .signup-social-only .sign-social .login-weixin,
  .loginbox .signup-social-only .sign-social .login-google,
  .loginbox .signup-social-only .sign-social .login-facebook,
  .sign-social .login-twitter { width: 52px; height: 52px; line-height: 52px; }
  .form-policy { font-size: 11px; }
}

@media (max-width: 375px) {
  .loginbox { padding: 25px 16px 40px; }
  .loginbox h2 { font-size: 22px; }
  .loginbox .input-item .input-control { font-size: 15px; padding: 11px 12px 11px 30px; }
  .sign-social .login-qq, .sign-social .login-weibo, .sign-social .login-weixin,
  .sign-social .login-google, .sign-social .login-facebook, .sign-social .login-twitter {
    width: 40px; height: 40px; line-height: 40px; font-size: 22px; margin: 0 5px;
  }
}