/* GOLDTD 登录/注册页（火币风：深色顶栏 + 白色主体，左品牌面板 / 右表单）
   依赖 style.css 的变量与顶栏类；本文件只放 auth 页独有样式 */
body.auth-page { height: auto; min-height: 100vh; overflow: auto; background: #fff; color: #161c28; }

/* 顶栏与主站完全一致（复用 style.css）；auth 页仅让 <a> 形态的 Log In / Sign Up 继承按钮排版 */
.login-btn, .signup-btn { display: inline-block; font: inherit; font-size: 14px; text-align: center; }

/* 主体：左右两栏（窄屏堆叠） */
.auth-main { display: flex; min-height: calc(100vh - 53px); }
.auth-brand {
  flex: 1 1 46%; padding: 72px 48px; position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: 18px;
  border-right: 1px solid #eef1f5;
}
.auth-form-col { flex: 1 1 54%; display: flex; align-items: center; justify-content: center; padding: 48px 24px; }
.auth-form { width: 100%; max-width: 400px; }

/* 品牌面板文案 */
.auth-pill {
  align-self: flex-start; background: #f3f5f8; color: #525d6e; font-size: 12px; font-weight: 600;
  border-radius: 999px; padding: 4px 12px;
}
.auth-brand h2 { font-size: 34px; font-weight: 800; line-height: 1.25; letter-spacing: -.5px; }
.auth-brand h2 .blue { color: #0173e5; }
.auth-brand p { color: #525d6e; font-size: 14px; max-width: 420px; }
.auth-brand a { color: #0173e5; font-weight: 600; }

/* CSS 插画：轨道圆环 + 蓝色光晕（不用外部素材） */
.auth-art { position: relative; height: 260px; margin-top: 24px; }
.auth-art .glow {
  position: absolute; left: 50%; top: 50%; width: 180px; height: 180px; transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #7db8ff 0%, #0173e5 45%, rgba(1,115,229,0) 72%);
  filter: blur(2px); opacity: .9;
}
.auth-art .orbit {
  position: absolute; left: 50%; top: 50%; border: 1px solid #e5e9ef; border-radius: 50%;
  transform: translate(-50%, -50%);
}
.auth-art .orbit.o1 { width: 220px; height: 220px; }
.auth-art .orbit.o2 { width: 300px; height: 300px; }
.auth-art .dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #c3cddb; }
.auth-art .dot.d1 { left: 18%; top: 30%; }
.auth-art .dot.d2 { right: 15%; bottom: 24%; background: #0173e5; }
.auth-art .spark { position: absolute; color: #0173e5; font-size: 20px; left: 62%; top: 22%; }

/* 表单（火币：灰 label 在上、浅灰内嵌输入框、聚焦细蓝边） */
.auth-form h1 { font-size: 28px; font-weight: 800; letter-spacing: -.5px; margin-bottom: 22px; }
.af-field { margin-bottom: 14px; }
.af-label { display: block; font-size: 12.5px; color: #8d99ab; margin-bottom: 5px; }
.af-label .req { color: #e9404f; }
.af-input, .af-select {
  width: 100%; background: #f3f5f8; border: 1px solid transparent; border-radius: 8px;
  font: inherit; font-size: 14px; color: #161c28; padding: 11px 14px; outline: none;
}
.af-input::placeholder { color: #8d99ab; }
.af-input:focus, .af-select:focus { background: #fff; border-color: #0173e5; }
.af-hint { font-size: 11.5px; color: #8d99ab; margin-top: 4px; }
.af-code-row { display: flex; gap: 8px; }
.af-code-row .af-input { flex: 1; }
.af-code-btn {
  flex: none; background: #eef4fd; color: #0173e5; border: 0; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; padding: 0 14px; white-space: nowrap;
}
.af-code-btn:disabled { color: #8d99ab; background: #f3f5f8; cursor: default; }
.af-submit {
  width: 100%; border: 0; border-radius: 8px; cursor: pointer; font: inherit; font-size: 15px; font-weight: 700;
  padding: 12px; margin-top: 8px; background: #e5e9ef; color: #8d99ab;
}
.af-submit.on { background: #0173e5; color: #fff; }
.af-submit.on:hover { filter: brightness(1.1); }
.af-swap { text-align: center; font-size: 13px; color: #525d6e; margin: 16px 0 4px; }
.af-swap a { color: #0173e5; font-weight: 600; }

/* 其他方式分隔线 + 轮廓按钮 */
.af-divider { display: flex; align-items: center; gap: 12px; color: #8d99ab; font-size: 12px; margin: 22px 0 14px; }
.af-divider::before, .af-divider::after { content: ''; flex: 1; height: 1px; background: #e5e9ef; }
.af-oauth { display: flex; gap: 12px; }
.af-oauth button {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: #fff; border: 1px solid #e5e9ef; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 600; color: #161c28; padding: 10px;
}
.af-oauth button:hover { border-color: #c3cddb; }
.af-oauth .g-ico { color: #ea4335; font-weight: 800; }
.af-oauth .t-ico { color: #229ed9; }
.af-legal { text-align: center; font-size: 11.5px; color: #8d99ab; margin-top: 22px; }
.af-legal a { color: #525d6e; text-decoration: underline; }

/* 注册成功面板 */
.af-done { text-align: center; padding: 28px 0 8px; }
.af-done .tick {
  width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%;
  background: rgba(22,163,74,.1); color: #16a34a; font-size: 28px; line-height: 56px;
}
.af-done h3 { font-size: 20px; font-weight: 800; margin-bottom: 6px; }
.af-done p { color: #525d6e; font-size: 13px; margin-bottom: 18px; }
.af-done .af-submit { margin-top: 0; text-decoration: none; display: block; line-height: 1.5; }

/* toast 错误态（沿用 style.css .toast 定位） */
.toast.err { background: #e9404f; color: #fff; }
.toast.ok { background: #161c28; color: #fff; }

/* 窄屏：左右栏堆叠，品牌面板压缩 */
@media (max-width: 900px) {
  .auth-main { flex-direction: column; }
  .auth-brand { border-right: 0; border-bottom: 1px solid #eef1f5; padding: 36px 24px; gap: 10px; }
  .auth-brand h2 { font-size: 24px; }
  .auth-art { display: none; }
  .auth-form-col { padding: 32px 20px 48px; }
}