/* ============================================================
   用户登录/注册/分站页 — 对标 hack.wetcs.cn 登录页
   左48% 纯蓝 #0066FF 插画 ｜ 右52% #f6fcff 表单
   色值取自参考站 maowang51 主题真实 CSS
   ============================================================ */
:root{
  --auth-prime:#0066FF;
  --auth-three:#2A7AF3;
  --auth-heading:#010d4c;
  --auth-red:#ff4d4f;
  --auth-panel:#f6fcff;
  --auth-label:rgba(0,40,78,.6);
  --auth-link:#1e1e1e;
  --auth-shadow:0 10px 20px rgba(0,6,159,.03);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; min-height:100%; }
body{
  font-family:"PingFang SC","Microsoft YaHei","Helvetica Neue",Helvetica,Arial,sans-serif;
  background:#fff; color:var(--auth-heading);
}

/* ============ 左右分栏 ============ */
.auth-page{ display:flex; min-height:100vh; }

/* 左侧蓝色插画区 */
.auth-illustration{
  width:48%; min-height:100vh;
  background:var(--auth-prime);
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.auth-illustration svg{ width:82%; max-width:460px; height:auto; position:relative; z-index:1; }
.auth-illustration::before,
.auth-illustration::after{
  content:''; position:absolute; border-radius:50%;
  background:rgba(255,255,255,.06);
}
.auth-illustration::before{ width:340px; height:340px; top:-120px; left:-120px; }
.auth-illustration::after{ width:280px; height:280px; bottom:-90px; right:-90px; background:rgba(255,255,255,.05); }

/* 右侧表单区 */
.auth-form-wrapper{
  width:52%; background:var(--auth-panel);
  padding:32px 5% 20px; position:relative;
  display:flex; flex-direction:column;
}
.auth-topbar{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:20px;
}
.auth-logo{
  display:flex; align-items:center; gap:10px;
  text-decoration:none;
}
.auth-logo .auth-logo-mark{
  width:42px; height:42px; border-radius:50%;
  background:var(--auth-red); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; font-weight:700; letter-spacing:0;
}
.auth-logo .auth-logo-text{ font-size:18px; font-weight:700; color:var(--auth-heading); }
.auth-logo img{ height:40px; max-width:180px; }
.auth-go-back{
  font-size:15px; line-height:33px; width:122px; text-align:center;
  color:var(--auth-three); border:1px solid var(--auth-three);
  border-radius:30px; text-decoration:none; background:transparent;
}
.auth-go-back:hover{ background:var(--auth-three); color:#fff; }

.auth-form{ max-width:440px; width:100%; margin-top:10px; flex:1; }
.auth-form h2{
  font-size:32px; line-height:1.5em; color:var(--auth-heading);
  margin:0 0 6px; font-weight:700; letter-spacing:1px;
}
.auth-header-info{
  font-size:16px; color:var(--auth-heading); margin:0 0 26px; letter-spacing:.5px;
}
.auth-header-info a{ color:var(--auth-three); text-decoration:underline; }

/* 输入框 */
.auth-field{ margin-bottom:22px; position:relative; }
.auth-field label{
  font-size:15px; font-weight:400; color:var(--auth-label);
  display:block; margin-bottom:2px;
}
.auth-field input[type=text],
.auth-field input[type=password],
.auth-field input[type=email],
.auth-field input[type=number]{
  width:100%; height:45px;
  font-size:14px; color:#333;
  border:none; outline:none;
  padding:0 40px 0 16px;
  background:#eef2f7;
  border-radius:8px;
}
.auth-field input:focus{ background:#e6ecf4; }
.auth-field input::placeholder{ color:#a8b4c4; }

/* 密码可见切换 */
.auth-pass-toggle{
  position:absolute; right:0; top:30px;
  width:50px; height:45px; display:flex; align-items:center; justify-content:center;
  color:#a8b4c4; cursor:pointer; background:none; border:none;
}
.auth-pass-toggle:hover{ color:var(--auth-three); }

/* 验证码 */
.auth-captcha{ display:flex; gap:10px; align-items:flex-start; }
.auth-captcha input{ flex:1; }
.auth-captcha img{
  height:45px; width:130px; border-radius:8px; cursor:pointer;
  box-shadow:var(--auth-shadow); background:#fff; object-fit:cover;
}
#captcha{ margin-bottom:22px; }
#captcha_text, #captcha_wait{
  background:#fff; border-radius:8px; padding:14px;
  text-align:center; color:#888; font-size:13px;
  box-shadow:var(--auth-shadow);
}

/* 记住密码 / 忘记密码 */
.auth-options{
  display:flex; align-items:center; justify-content:space-between;
  margin:-2px 0 22px; font-size:15px;
}
.auth-options > div{ display:flex; align-items:center; gap:8px; }
.auth-options input[type=checkbox]{ display:none; }
.auth-options label{
  position:relative; cursor:pointer;
  padding-left:20px; color:var(--auth-heading); line-height:22px; font-size:15px;
}
.auth-options label:before{
  content:''; width:13px; height:13px; line-height:11px;
  border-radius:2px; border:2px solid rgba(0,0,0,.2);
  font-size:10px; font-weight:700; text-align:center;
  position:absolute; left:0; top:4px;
  transition:all .1s ease-in-out;
}
.auth-options input[type=checkbox]:checked + label:before{
  content:'\f00c'; font-family:FontAwesome;
  background:var(--auth-three); color:#fff; border-color:var(--auth-three);
}
.auth-options a{ color:var(--auth-link); text-decoration:none; }
.auth-options a:hover{ color:var(--auth-three); text-decoration:underline; }

/* 主按钮 */
.auth-submit{
  width:100%; height:52px; border:none;
  background:var(--auth-three); color:#fff;
  font-size:17px; font-weight:500;
  border-radius:5px; cursor:pointer;
  transition:background .3s; letter-spacing:2px;
}
.auth-submit:hover{ background:var(--auth-prime); }
.auth-submit:active{ transform:translateY(1px); }

/* 第三方登录 */
.auth-third{ text-align:center; margin-top:18px; }
.auth-third .auth-third-title{
  font-size:13px; color:#9aa6b5; margin-bottom:12px;
  display:flex; align-items:center; gap:12px;
}
.auth-third .auth-third-title::before,
.auth-third .auth-third-title::after{
  content:''; flex:1; height:1px; background:#e3e9f0;
}
.auth-third img{ width:40px; height:40px; cursor:pointer; }

/* 底部链接 */
.auth-alt-links{
  display:flex; justify-content:space-between; gap:12px;
  margin-top:16px;
}
.auth-alt-links a{
  flex:1; text-align:center; height:44px; line-height:42px;
  border-radius:8px; text-decoration:none; font-size:14px; transition:all .2s;
}
.auth-alt-links .auth-alt-outline{
  border:1px solid #d5e3f7; color:var(--auth-three); background:#fff;
}
.auth-alt-links .auth-alt-outline:hover{ border-color:var(--auth-three); }

.auth-copyright{
  text-align:center; font-size:13px; color:#9aa6b5;
  margin-top:auto; padding-top:30px; line-height:1.8;
}

/* 分站页表单控件适配（下拉框等） */
.auth-field select{
  width:100%; height:45px;
  font-size:14px; color:#333;
  border:none; outline:none;
  padding:0 16px; background:#eef2f7;
  border-radius:8px;
}
.auth-domain-row{ display:flex; gap:8px; }
.auth-domain-row input{ flex:1; }
.auth-domain-row select{ flex:0 0 auto; min-width:120px; }
.auth-random-btn{
  flex:0 0 auto; height:45px; padding:0 14px;
  border:none; border-radius:8px; background:#eef2f7;
  color:var(--auth-three); font-size:13px; cursor:pointer;
}
.auth-random-btn:hover{ background:var(--auth-three); color:#fff; }
.auth-info-tip{ font-size:12px; color:#ff7875; margin-top:6px; line-height:1.7; }
.auth-info-tip i{ margin-right:4px; }
.auth-version-tabs{ display:flex; gap:10px; margin-bottom:20px; }
.auth-version-tabs a{
  flex:1; text-align:center; line-height:42px; border-radius:6px;
  background:#fff; color:var(--auth-three); text-decoration:none;
  box-shadow:var(--auth-shadow); font-size:14px; font-weight:500;
}
.auth-version-tabs a:hover{ background:var(--auth-three); color:#fff; }

/* ================= 响应式 ================= */
@media (max-width:900px){
  .auth-illustration{ display:none; }
  .auth-form-wrapper{ width:100%; padding:24px 20px; }
  .auth-form{ max-width:100%; }
}
@media (max-width:480px){
  .auth-form h2{ font-size:26px; }
  .auth-topbar{ margin-bottom:16px; }
  .auth-alt-links{ flex-direction:column; }
}