/* ============================================================
   登录 / 认证页共享样式（三端共用）
   ------------------------------------------------------------
   原来三端各带一份内联 CSS，底色为青绿 #f0f4ff、边框 #cfd9f2、
   与品牌紫蓝体系割裂。现统一到 auth.css，底色/控件/按钮
   全部走 theme.css 的 token，三端视觉一致。

   类名保持不变（auth-*），三端 login.php 只需删掉内联 <style>
   并引入本文件即可，无需改动 HTML。
   ============================================================ */

.auth-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 40px 16px;
  /* 与全站统一：点阵 + 竖向渐变 */
  background-color: var(--bg);
  background-image:
    radial-gradient(circle, #d5e5f7 1.2px, transparent 1.2px);
  background-size: 20px 20px;
}

/* ---------- 品牌区 ---------- */
.auth-brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-2);
}
.auth-brand img {
  width: 54px; height: 54px; border-radius: 50%;
  object-fit: cover; background: #fff;
  border: 3px solid #fff;
  box-shadow: 0 5px 16px var(--brand-glow);
}
.auth-brand b {
  font-size: var(--fs-3xl);
  font-weight: 900;
  color: var(--text);
  letter-spacing: 1.5px;
}
/* 端标签：红橙渐变小药丸 */
.auth-tag {
  font-style: normal;
  font-size: var(--fs-xs);
  font-weight: 800;
  color: #fff;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, #ff8f5e, var(--danger));
  letter-spacing: .8px;
  box-shadow: 0 3px 10px rgba(244, 54, 78, .3);
}

.auth-headline {
  font-size: var(--fs-2xl);
  font-weight: 900;
  color: var(--text);
  margin: var(--s-3) 0 var(--s-1);
  letter-spacing: .5px;
}
.auth-sub {
  color: var(--text-3);
  font-size: var(--fs-sm);
  margin-bottom: var(--s-6);
  text-align: center;
}

/* ---------- 表单卡 ---------- */
.auth-card {
  width: min(430px, 100%);
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-3);
  padding: var(--s-6) 28px var(--s-7);
  animation: wbRise .5s var(--ease) both;
}

/* ---------- 方式切换（药丸分段控件） ---------- */
.auth-tabs {
  display: flex;
  background: var(--surface-3);
  border-radius: var(--r-md);
  padding: 4px;
  margin-bottom: var(--s-5);
  gap: 3px;
}
.auth-tab {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  color: var(--text-3);
  cursor: pointer;
  font-size: var(--fs-base);
  font-weight: 700;
  border-radius: var(--r-sm);
  transition: color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
  white-space: nowrap;
}
.auth-tab.on {
  color: #fff;
  background: var(--grad-brand);
  box-shadow: 0 4px 12px var(--brand-glow);
}

/* ---------- 表单 ----------
   注意：部分内核会给 <form> 元素套一层 UA 默认浅色背景，
   必须显式重置，否则表单区会出现与卡片不一致的色块。 */
.auth-mode,
form.auth-mode {
  display: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
}
.auth-mode.on,
form.auth-mode.on { display: block; }

.auth-field { margin-bottom: var(--s-4); }
.auth-field b {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-2);
  margin-bottom: 6px;
}
.auth-mode input {
  width: 100%;
  border: 1.5px solid var(--border-3);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  font-size: var(--fs-md);
  background: var(--surface);
  color: var(--text);
  outline: none;
  transition: border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.auth-mode input:focus {
  border-color: var(--brand-3);
  box-shadow: 0 0 0 3px var(--brand-l);
}
.auth-mode input::placeholder { color: #a9b4d4; }

/* 验证码 / 短信码：输入 + 按钮同行 */
.cap-row, .sms-row { display: flex; gap: var(--s-2); }
.cap-row input, .sms-row input { flex: 1; min-width: 0; }
.cap-img {
  height: 46px;
  border-radius: var(--r-sm);
  cursor: pointer;
  border: 1.5px solid var(--border-3);
  display: block;
  flex: none;
}
.btn-sms {
  flex-shrink: 0;
  white-space: nowrap;
  border: 0;
  background: var(--brand-l);
  color: var(--brand);
  border-radius: var(--r-sm);
  padding: 0 16px;
  font-size: var(--fs-sm);
  font-weight: 800;
  cursor: pointer;
  transition: opacity var(--t-fast) var(--ease);
}
.btn-sms:disabled { color: var(--text-4); background: var(--surface-3); cursor: default; }

/* 登录主按钮 */
.btn-login {
  width: 100%;
  border: 0;
  border-radius: var(--r-md);
  padding: 14px 0;
  color: #fff;
  font-size: var(--fs-lg);
  font-weight: 800;
  letter-spacing: 8px;
  text-indent: 8px;             /* 抵消末字后的间距，视觉居中 */
  background: var(--grad-brand);
  box-shadow: 0 8px 22px var(--brand-glow);
  margin-top: var(--s-2);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-back),
              box-shadow var(--t-fast) var(--ease);
}
a.btn-login { display: block; text-align: center; text-decoration: none; }
.btn-login:hover { opacity: .93; }
.btn-login:active { transform: scale(.97); }

/* 错误提示 */
.auth-err {
  background: var(--danger-l);
  color: var(--danger-ink);
  border: 1px solid var(--danger-bd);
  border-radius: var(--r-sm);
  padding: 11px 14px;
  margin-bottom: var(--s-4);
  font-size: var(--fs-sm);
  font-weight: 700;
}

/* 底部说明 */
.auth-foot {
  text-align: center;
  color: var(--text-4);
  font-size: var(--fs-sm);
  line-height: 1.9;
  margin-top: var(--s-6);
}

/* “忘记密码”这类右对齐小链接 */
.auth-mode .minor {
  text-align: right;
  font-size: var(--fs-sm);
  margin: -4px 0 var(--s-3);
}
.auth-mode .minor a { color: var(--brand); text-decoration: none; font-weight: 700; }

/* ---------- 窄屏 ---------- */
@media (max-width: 380px) {
  .auth-body { padding: 24px 12px; }
  .auth-card { padding: var(--s-5) 18px var(--s-6); }
  .auth-brand b { font-size: var(--fs-2xl); }
  .auth-headline { font-size: var(--fs-xl); }
}