/* =========================================================
   auth.css — 登录 / 注册 / 找回密码 页面样式（分栏式）
   与 ui.css 共用主题色（html[data-theme]，localStorage: ui_theme）
========================================================= */
:root {
  --primary: #6957e8; --primary-2: #8170ee; --primary-dark: #5140cf; --accent: #4d9cff;
  --primary-rgb: 105, 87, 232;
  --gradient: linear-gradient(135deg, #6957e8 0%, #8170ee 48%, #4d9cff 100%);
  --bg: #f4f6fc; --card: #ffffff; --card-rgb: 255, 255, 255;
  --text: #1f2037; --text-2: #4b4c63; --muted: #8b8ca3; --border: #e8e9f2;
  --success: #22c55e; --danger: #f0506e; --warning: #f5a524;
  --side-bg: #1a1937; --side-bg-2: #24225a;
}
html[data-theme="blue"] { --primary: #2f80ed; --primary-2: #56a8ff; --primary-dark: #1f66c9; --accent: #3fd1ff; --primary-rgb: 47, 128, 237; --gradient: linear-gradient(135deg, #2f80ed 0%, #56a8ff 55%, #3fd1ff 100%); --bg: #f2f7ff; --side-bg: #0f1f3d; --side-bg-2: #17305c; }
html[data-theme="green"] { --primary: #12b886; --primary-2: #38d9a9; --primary-dark: #0ca678; --accent: #4dd0e1; --primary-rgb: 18, 184, 134; --gradient: linear-gradient(135deg, #12b886 0%, #38d9a9 55%, #4dd0e1 100%); --bg: #f1faf6; --side-bg: #0f2b24; --side-bg-2: #163f34; }
html[data-theme="orange"] { --primary: #f76b3c; --primary-2: #ff8f5c; --primary-dark: #e2562a; --accent: #ffb347; --primary-rgb: 247, 107, 60; --gradient: linear-gradient(135deg, #f76b3c 0%, #ff8f5c 55%, #ffb347 100%); --bg: #fff6f2; --side-bg: #2b1a14; --side-bg-2: #3f2419; }
html[data-theme="pink"] { --primary: #ec4899; --primary-2: #f472b6; --primary-dark: #d13684; --accent: #a78bfa; --primary-rgb: 236, 72, 153; --gradient: linear-gradient(135deg, #ec4899 0%, #f472b6 55%, #a78bfa 100%); --bg: #fff3f8; --side-bg: #2c1230; --side-bg-2: #3f1a44; }
html[data-theme="dark"] {
  --primary: #8b7cf6; --primary-2: #a596ff; --primary-dark: #7264e0; --accent: #5aa9ff; --primary-rgb: 139, 124, 246;
  --gradient: linear-gradient(135deg, #6f5cf1 0%, #8b7cf6 50%, #4d9cff 100%);
  --bg: #12132a; --card: #1a1c36; --card-rgb: 26, 28, 54; --text: #e8e9f6; --text-2: #cbcde4; --muted: #8b8ea9; --border: #2b2e4e;
  --side-bg: #0e0f22; --side-bg-2: #161835;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body.auth-body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
  color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.6;
}
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); }

/* ---------- 布局 ---------- */
.auth { display: flex; min-height: 100vh; min-height: 100dvh; }
.auth-side {
  position: relative; flex: 0 0 46%; max-width: 620px; overflow: hidden;
  background: linear-gradient(160deg, var(--side-bg) 0%, var(--side-bg-2) 100%);
  color: #fff; display: flex; align-items: center; justify-content: center; padding: 48px 40px;
}
.auth-side::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(520px 360px at 15% 10%, rgba(var(--primary-rgb), .45), transparent 60%),
              radial-gradient(420px 320px at 90% 95%, rgba(var(--primary-rgb), .35), transparent 60%);
}
.as-shape { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .06); animation: as-float 9s ease-in-out infinite; }
.as-shape.s1 { width: 260px; height: 260px; right: -80px; top: -60px; }
.as-shape.s2 { width: 160px; height: 160px; left: -50px; bottom: 80px; animation-delay: 2s; }
.as-shape.s3 { width: 90px; height: 90px; right: 60px; bottom: -20px; animation-delay: 4s; background: rgba(255, 255, 255, .1); }
@keyframes as-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
.as-inner { position: relative; z-index: 1; max-width: 420px; width: 100%; animation: ap-in .6s ease-out both; }
.as-brand { display: inline-flex; align-items: center; gap: 12px; color: #fff; font-size: 20px; font-weight: 700; margin-bottom: 40px; }
.as-brand:hover { color: #fff; }
.as-logo {
  width: 46px; height: 46px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--gradient); font-size: 20px; box-shadow: 0 10px 26px rgba(var(--primary-rgb), .5);
}
.as-title { font-size: 34px; font-weight: 800; line-height: 1.25; margin: 0 0 14px; letter-spacing: -.3px; }
.as-title em { font-style: normal; background: linear-gradient(90deg, #fff, rgba(255,255,255,.7)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.as-desc { font-size: 15px; color: rgba(255, 255, 255, .72); margin: 0 0 30px; line-height: 1.8; }
.as-feats { list-style: none; padding: 0; margin: 0 0 34px; display: grid; gap: 12px; }
.as-feats li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: rgba(255, 255, 255, .85); }
.as-feats li i {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .12); color: #fff; font-size: 13px;
}
.as-stats { display: flex; gap: 14px; }
.as-stats > div { flex: 1; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .1); }
.as-stats b { display: block; font-size: 22px; font-weight: 800; line-height: 1.2; }
.as-stats span { font-size: 12px; color: rgba(255, 255, 255, .6); }

.auth-panel { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px 24px; position: relative; }
.ap-inner { width: 100%; max-width: 420px; animation: ap-in .6s ease-out both; }
.ap-inner.wide { max-width: 460px; }
@keyframes ap-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.ap-head { margin-bottom: 26px; }
.ap-head h1 { font-size: 26px; font-weight: 800; margin: 0 0 6px; color: var(--text); }
.ap-head p { margin: 0; color: var(--muted); font-size: 14px; }
.ap-mobile-brand { display: none; }

/* ---------- 表单 ---------- */
.form-item { margin-bottom: 18px; }
.form-label { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 8px; }
.form-label a { font-weight: 500; font-size: 12.5px; }
.input-box { position: relative; }
.input-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 14px; pointer-events: none; transition: color .2s; }
.input-box:focus-within .input-icon { color: var(--primary); }
.input-box .form-control, .auth .form-control {
  height: 48px; width: 100%; padding: 0 16px 0 44px; border-radius: 13px;
  border: 1.5px solid var(--border); background: var(--card); color: var(--text); font-size: 14px;
  box-shadow: none; transition: border-color .2s, box-shadow .2s;
}
.auth .form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .14); outline: 0; background: var(--card); color: var(--text); }
.auth .form-control::placeholder { color: #b3b4c6; }
.auth .form-control:disabled { background: var(--bg); opacity: .8; }
.toggle-password {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px;
  border: 0; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer;
}
.toggle-password:hover { background: rgba(var(--primary-rgb), .08); color: var(--primary); }
.input-box.has-toggle .form-control { padding-right: 46px; }
.captcha-row { display: flex; gap: 10px; align-items: stretch; }
.captcha-row .input-box { flex: 1; }
.captcha-img { flex: 0 0 auto; height: 48px; border-radius: 12px; overflow: hidden; border: 1.5px solid var(--border); background: #fff; cursor: pointer; display: flex; align-items: center; }
.captcha-img img { height: 100%; width: auto; display: block; }
.captcha-legacy .form-group { display: flex; gap: 10px; align-items: center; }
.captcha-legacy .form-control { padding-left: 16px; }
.captcha-legacy img { height: 48px; border-radius: 12px; border: 1.5px solid var(--border); cursor: pointer; }
.remember { display: flex; align-items: center; justify-content: space-between; margin: -4px 0 20px; font-size: 13px; color: var(--text-2); }
.remember label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; margin: 0; font-weight: 500; }
.remember input { width: 17px; height: 17px; accent-color: var(--primary); margin: 0; }

.btn-main {
  width: 100%; height: 50px; border: 0; border-radius: 13px; background: var(--gradient); color: #fff;
  font-size: 15px; font-weight: 600; letter-spacing: .3px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 10px 26px rgba(var(--primary-rgb), .35); transition: transform .15s, box-shadow .15s, filter .15s;
}
.btn-main:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(var(--primary-rgb), .42); filter: brightness(1.05); color: #fff; }
.btn-main:active { transform: scale(.98); }
.btn-main:disabled { opacity: .7; transform: none; cursor: default; }
.btn-soft {
  width: 100%; height: 46px; border-radius: 13px; border: 1.5px solid var(--border); background: var(--card); color: var(--text-2);
  font-size: 14px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: all .15s;
}
.btn-soft:hover { border-color: rgba(var(--primary-rgb), .5); color: var(--primary); background: rgba(var(--primary-rgb), .05); }
.btn-soft.qq { color: #12b7f5; border-color: rgba(18, 183, 245, .35); }
.btn-soft.qq:hover { background: rgba(18, 183, 245, .08); }
.btn-soft + .btn-soft, .btn-main + .btn-soft { margin-top: 10px; }

.divider { display: flex; align-items: center; gap: 12px; margin: 22px 0 16px; color: var(--muted); font-size: 12px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.social-login { display: flex; justify-content: center; gap: 12px; }
.social-login a {
  width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--card); border: 1.5px solid var(--border); transition: all .15s;
}
.social-login a:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, .08); border-color: rgba(var(--primary-rgb), .4); }
.social-login svg { width: 22px; height: 22px; }

.ap-links { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; font-size: 13.5px; }
.ap-links a { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-weight: 500; }
.ap-links a:hover { color: var(--primary); }
.ap-links a.primary { color: var(--primary); font-weight: 600; }
.ap-tip { margin-top: 16px; text-align: center; font-size: 12px; color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 6px; }
.ap-tip i { color: var(--success); }
.ap-foot { margin-top: 36px; font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; }
.ap-foot a { color: var(--text-2); }
.tp-dots { display: inline-flex; gap: 6px; align-items: center; }
.tp-dots span { width: 16px; height: 16px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: transform .15s; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.tp-dots span:hover { transform: scale(1.15); }
.tp-dots span.active { border-color: var(--card); box-shadow: 0 0 0 2px var(--primary); }
.tp-purple { background: linear-gradient(135deg, #6957e8, #4d9cff); }
.tp-blue { background: linear-gradient(135deg, #2f80ed, #3fd1ff); }
.tp-green { background: linear-gradient(135deg, #12b886, #4dd0e1); }
.tp-orange { background: linear-gradient(135deg, #f76b3c, #ffb347); }
.tp-pink { background: linear-gradient(135deg, #ec4899, #a78bfa); }
.tp-dark { background: linear-gradient(135deg, #12132a, #6f5cf1); }

/* 密码提示 / 强度 */
.password-hint { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 12px; }
.hint-item { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.hint-item.valid { color: var(--success); }
.hint-item.invalid { color: var(--muted); }
.password-strength { display: flex; gap: 5px; margin-top: 8px; }
.password-strength .bar { flex: 1; height: 4px; border-radius: 4px; background: var(--border); transition: background .2s; }
.password-strength .bar.active.weak { background: var(--danger); }
.password-strength .bar.active.medium { background: var(--warning); }
.password-strength .bar.active.strong { background: var(--success); }
.confirm-status, .email-tip { margin-top: 8px; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.confirm-status.success, .email-tip.success { color: var(--success); }
.confirm-status.error, .email-tip.error { color: var(--danger); }
.email-auto-hint { margin-top: 8px; font-size: 12px; color: var(--muted); }
.email-auto-hint i { color: var(--warning); margin-right: 4px; }
.auth .alert { border-radius: 12px; border: 0; padding: 12px 16px; margin-bottom: 18px; font-size: 14px; }
.auth .alert-success { background: rgba(34, 197, 94, .12); color: #15803d; }
.auth .alert-danger { background: rgba(240, 80, 110, .12); color: #b91c3a; }
.auth .alert-info { background: rgba(var(--primary-rgb), .1); color: var(--primary-dark); }
.auth .alert i { margin-right: 6px; }

/* 二维码 */
.qrcode-container { text-align: center; }
.qrcode-container h4 { font-size: 17px; font-weight: 700; margin: 0 0 6px; }
.qrcode-container h4 i { color: #12b7f5; margin-right: 6px; }
.qrcode-tip { color: var(--muted); font-size: 13px; margin: 0 0 16px; }
#qrimg { margin: 0 auto 16px; }
#qrimg img, #qrimg canvas { border-radius: 14px; border: 1px solid var(--border); padding: 8px; background: #fff; max-width: 200px; }

/* ---------- 响应式 ---------- */
@media (max-width: 991px) {
  .auth { flex-direction: column; }
  .auth-side { flex: 0 0 auto; max-width: none; padding: 26px 22px 30px; align-items: flex-start; border-radius: 0 0 28px 28px; }
  .as-brand { margin-bottom: 14px; font-size: 18px; }
  .as-logo { width: 38px; height: 38px; border-radius: 11px; font-size: 16px; }
  .as-title { font-size: 22px; margin-bottom: 6px; }
  .as-desc { font-size: 13px; margin-bottom: 0; }
  .as-feats, .as-stats { display: none; }
  .as-shape.s2 { display: none; }
  .auth-panel { padding: 26px 20px 20px; justify-content: flex-start; }
  .ap-head { margin-bottom: 20px; }
  .ap-head h1 { font-size: 22px; }
  .ap-foot { margin-top: 26px; }
}
@media (max-width: 420px) {
  .auth-side { padding: 22px 18px 26px; }
  .auth-panel { padding: 22px 16px 16px; }
  .input-box .form-control, .auth .form-control { height: 46px; }
  .ap-links { flex-direction: column; gap: 10px; align-items: flex-start; }
}
.ap-foot { flex-direction: column; gap: 8px; line-height: 1.7; }
.ap-foot-extra { font-size: 12px; color: var(--muted); text-align: center; }
.ap-foot-extra a { color: var(--text-2); }