/* 受法条约束：L-8(颜色间距圆角只许引用 var(--g-*)，禁写新 hex 与野像素) · 法典/01_宪法_六条铁律.md
   S-3 字号只许 rem ｜ S-4 间距只许 4/8/12/16/24 ｜ U-9 小清新（accent=能点能拿钱，红=出事，橙=快到）
   本文件：login + onboard 深色登录三屏与引导气泡（施工卡 U-20 小队1）
   视觉基准：旧仓 nantang-mobile index.html:42-79 + css/main.css:33-74（只读参考，值全换 token）
   类名前缀 au-（auth），禁与 base.css 已有类重名。 */

/* ── 深色全屏壳：水彩背景 + 半透明深色遮罩压暗（login / onboard 共用） ── */
.au-page {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  overflow-y: auto;
  background: var(--g-bg);
  padding: 16px;
}
.au-bg {
  position: fixed; inset: 0;
  background: url('../assets/bg-village.jpg') center/cover no-repeat;
}
.au-mask {
  position: fixed; inset: 0;
  background: rgba(29, 46, 36, 0.55);   /* 压暗同 --g-bg 色系（base.css .q-photo 同款做法，S-9 不铺面积色） */
}
.au-inner {
  position: relative; z-index: 1;
  width: 100%; max-width: 360px;
}

/* ── 深色卡片（旧仓 .login-card 换 token 版） ── */
.au-card {
  background: var(--g-bg-glass);
  border: 1px solid var(--g-accent-light);
  border-radius: var(--g-radius-lg);
  padding: 24px;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--g-shadow-lg);
}
.au-logo  { width: 80px; opacity: 0.9; display: block; margin: 0 auto 8px; }
.au-logo-ring {
  width: 56px; height: 56px; margin: 0 auto 8px;
  border-radius: 50%;
  background: linear-gradient(160deg, rgba(44, 64, 52, 0.75), rgba(20, 32, 26, 0.85));
  border: 1.5px solid rgba(232, 200, 124, 0.55);
  box-shadow: 0 0 22px rgba(232, 200, 124, 0.18), inset 0 0 18px rgba(0, 0, 0, 0.45);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--g-font-size-xl); color: #ecd9a0; line-height: 1;
}
.au-logo-ring i { filter: drop-shadow(0 0 6px rgba(236, 217, 160, 0.55)); }
.au-hero-title {
  margin: 2px 0;
  font-size: var(--g-font-size-lg); font-weight: 700;
  background: linear-gradient(180deg, #f4ecd9 8%, #e8c87c 52%, #c9a24e 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
  letter-spacing: 0.12em;
}
.au-hero-sub { margin: 1px 0 12px; font-size: var(--g-font-size-sm); color: rgba(235, 244, 236, 0.72); letter-spacing: 0.06em; }
.au-title { font-size: var(--g-font-size-lg); font-weight: 700; color: var(--g-text-on-dark); margin: 0 0 4px; }
.au-sub   { font-size: var(--g-font-size-sm); color: var(--g-text-on-dark-dim); margin: 0 0 4px; }
.au-year  { font-size: var(--g-font-size-xs); color: var(--g-text-on-dark-dim); margin: 0 0 24px; }

/* ── U-21 微调（O-17/43）：登录三屏文字居中、浅绿标题（onboard 引导页不受影响） ── */
.au-card--center { text-align: center; }
.au-card--center .au-title { color: var(--g-accent-light); }
.au-card--center .au-input { text-align: center; }

/* ── 表单 ── */
.au-label { font-size: var(--g-font-size-xs); color: var(--g-text-on-dark-dim); margin-bottom: 4px; }
.au-input {
  display: block; width: 100%; box-sizing: border-box;
  padding: 12px 16px; margin: 0 0 8px;
  border: 1px solid var(--g-text-on-dark-dim);
  border-radius: var(--g-radius-sm);
  background: rgba(255, 255, 255, 0.08);
  color: var(--g-text-on-dark);
  font-family: inherit; font-size: var(--g-font-size-sm);
}
.au-input:focus { outline: none; border-color: var(--g-accent-light); background: rgba(255, 255, 255, 0.12); }
.au-input::placeholder { color: var(--g-text-on-dark-dim); }
.au-pwd-wrap { position: relative; }
.au-eye {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  border: 0; background: none; padding: 4px;
  font-size: var(--g-font-size-sm); color: var(--g-text-on-dark-dim);
  cursor: pointer; line-height: 1;
}
.au-error { color: var(--g-red); font-size: var(--g-font-size-sm); min-height: 1.2em; margin: 8px 0; }
.au-hint  { font-size: var(--g-font-size-xs); color: var(--g-text-on-dark-dim); margin: 0 0 8px; }

/* ── 按钮 ── */
.au-btn-row { display: flex; gap: 8px; margin-top: 16px; justify-content: center; }  /* 进村按钮收身后居中 */
.au-btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 44px;
  border: 0; border-radius: var(--g-radius-sm);
  font-family: inherit; font-size: var(--g-font-size-sm); font-weight: 700;
  cursor: pointer;
}
.au-btn:active { transform: scale(.98); }
.au-btn:disabled { opacity: .5; cursor: default; }
.au-btn--pri     { background: var(--g-accent); color: #fff; }
.au-btn--outline { background: rgba(255, 255, 255, 0.08); color: var(--g-text-on-dark); border: 1px solid var(--g-text-on-dark-dim); }
.au-back {
  border: 0; background: none; padding: 4px 8px 4px 0; margin-bottom: 8px;
  font-family: inherit; font-size: var(--g-font-size-sm); font-weight: 600;
  color: var(--g-text-on-dark-dim); cursor: pointer;
}

/* ── 账号横滑列表（登录屏选账号） ── */
.au-users { display: flex; gap: 8px; overflow-x: auto; padding: 0 0 12px; margin-bottom: 4px; }
.au-users::-webkit-scrollbar { display: none; }
.au-user {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: 1px solid var(--g-text-on-dark-dim); border-radius: var(--g-radius-sm);
  background: rgba(255, 255, 255, 0.06); padding: 8px;
  font-family: inherit; color: var(--g-text-on-dark); cursor: pointer;
}
.au-user.is-on { border-color: var(--g-accent-light); background: rgba(255, 255, 255, 0.12); }
.au-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--g-accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--g-font-size); font-weight: 700; overflow: hidden;
}
.au-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.au-user-name { font-size: var(--g-font-size-micro); max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-user-last { font-size: var(--g-font-size-micro); color: var(--g-text-on-dark-dim); }

/* ── 引导步进（onboard 四步） ── */
.au-step-text { font-size: var(--g-font-size-xs); color: var(--g-text-on-dark-dim); margin-bottom: 8px; }
.au-steps { display: flex; gap: 8px; margin: 0 0 16px; }
.au-step-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--g-text-on-dark-dim); opacity: .5; }
.au-step-dot.is-on { background: var(--g-accent-light); opacity: 1; width: 20px; }

/* ── 引导角色气泡（F17A 参考稿 guide-bubble 换 token 版） ── */
.au-bubble { margin: 0 0 8px; }
.au-char {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--g-content);
  border: 1.5px solid var(--g-accent);
  border-radius: var(--g-radius);
  padding: 12px 16px;
  box-shadow: var(--g-shadow);
}
.au-char-avatar {
  width: 48px; height: 48px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--g-accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--g-font-size-lg);
}
.au-char-body { flex: 1; min-width: 0; }
.au-char-name { font-size: var(--g-font-size-sm); font-weight: 700; color: var(--g-accent); margin-bottom: 4px; }
.au-char-text { font-size: var(--g-font-size-sm); color: var(--g-text); line-height: 1.6; margin: 0; }
.au-char-actions { display: flex; gap: 8px; margin-top: 12px; }
.au-char-ok {
  border: 0; border-radius: var(--g-radius-sm);
  background: var(--g-accent); color: #fff;
  padding: 8px 24px; min-height: 40px;
  font-family: inherit; font-size: var(--g-font-size-sm); font-weight: 600;
  cursor: pointer;
}
.au-char-skip {
  border: 1px solid var(--g-card-border); border-radius: var(--g-radius-sm);
  background: transparent; color: var(--g-text-dim);
  padding: 8px 12px; min-height: 40px;
  font-family: inherit; font-size: var(--g-font-size-sm);
  cursor: pointer;
}
/* ── 邮箱/手机号登录新增样式 ── */
/* 登录方式图标选择器（行业惯例：方式用图标选；2026-09-04 重修） */
.au-icon-row {
  display: flex; justify-content: center; gap: 24px;
  margin: 8px 0 16px;
}
.au-icon-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: 0; background: none; cursor: pointer;
  font-family: inherit; padding: 4px 8px;
}
.au-icon-btn-ico {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--g-font-size-lg);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--g-text-on-dark-dim);
  color: var(--g-text-on-dark);
  transition: background .15s;
}
.au-icon-btn:hover .au-icon-btn-ico { background: rgba(255, 255, 255, 0.16); border-color: var(--g-accent-light); }
.au-icon-btn:disabled { opacity: .5; cursor: default; }
.au-icon-btn-lbl { font-size: var(--g-font-size-xs); color: var(--g-text-on-dark-dim); }

.au-divider {
  display: flex;
  align-items: center;
  margin: 20px 0;
  color: var(--g-text-on-dark-dim);
  font-size: var(--g-font-size-xs);
}
.au-divider::before,
.au-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--g-text-on-dark-dim);
}
.au-divider span {
  padding: 0 12px;
}
.au-btn--sec {
  background: transparent;
  border: 1px solid var(--g-accent-light);
  color: var(--g-accent-light);
}
.au-btn--sec:hover {
  background: var(--g-accent-light);
  color: var(--g-bg);
}
.au-link-btn {
  background: none;
  border: none;
  color: var(--g-accent-light);
  font-size: var(--g-font-size-sm);
  cursor: pointer;
  padding: 8px;
  margin-top: 8px;
}
.au-link-btn:hover {
  text-decoration: underline;
}
.au-input-wrap {
  margin-bottom: 16px;
}
.au-input-wrap .au-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--g-text-on-dark-dim);
  border-radius: var(--g-radius);
  background: var(--g-bg-glass);
  color: var(--g-text-on-dark);
  font-size: var(--g-font-size-sm);
}
.au-input-wrap .au-input:focus {
  outline: none;
  border-color: var(--g-accent-light);
  box-shadow: 0 0 0 2px var(--g-accent-light-alpha);
}
.au-input-wrap .au-input::placeholder {
  color: var(--g-text-on-dark-dim);
}
/* 密码框右侧给「小眼睛」留位（.au-pwd-wrap/.au-eye 是 U-20 时期的既定结构，
   2026-09-25 砚仁报注册页缺小眼睛，JS 补回按钮、此处补回让位，避免长密码压到图标下） */
.au-pwd-wrap .au-input { padding-right: 44px; }

/* ══════════ 沉浸深色精修（2026-09 t2 登录/注册迎宾页 · 规范 v1 §6-t2）══════════
   就地色值全部登记于沉浸深色视觉规范 v1 §1.1 色板 / §2 玻璃配方（t4 落 tokens.css 后同值覆盖，
   本文件不改写 token，仅页面级观感就地化，与村口 pages-village.css 精修段同款做法）。 */

/* 夜底氛围：照片压暗加深 + 中央暖金光晕（呼应村口 .vg-bg-layer 光晕） */
.au-mask {
  background:
    radial-gradient(ellipse 70% 52% at 50% 34%, rgba(255, 214, 148, 0.10), transparent 66%),
    linear-gradient(180deg, rgba(8, 15, 11, 0.62), rgba(6, 12, 9, 0.78));
}
.au-inner { position: relative; z-index: 1; width: 100%; max-width: 360px; }

/* 玻璃卡：规范 v1 §2 标准配方（深玻璃+浅字+顶部内高光+tinted 阴影） */
.au-card {
  background: linear-gradient(168deg, rgba(28, 44, 35, 0.78), rgba(13, 22, 17, 0.86));
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--g-radius-xl);
  box-shadow: 0 18px 44px rgba(4, 9, 7, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(20px) saturate(1.15); -webkit-backdrop-filter: blur(20px) saturate(1.15);
}
@media (prefers-reduced-transparency: reduce) {
  .au-card { background: #1a2a20; backdrop-filter: none; } /* v1 §2 降级：不透明深面 */
}

/* 品牌区：logo 呼吸微光 · 盾徽玻璃徽章+暖金 · hero 标题金渐变字 */
.au-logo { filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5)); }
.au-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin: 0 auto 10px;
  border-radius: 999px; font-size: var(--g-font-size-lg); color: #ecd9a0;
  background: linear-gradient(160deg, rgba(44, 64, 52, 0.8), rgba(20, 32, 26, 0.9));
  border: 1px solid rgba(232, 200, 124, 0.45);
  box-shadow: 0 0 18px rgba(232, 200, 124, 0.16), inset 0 0 14px rgba(0, 0, 0, 0.4);
}
.au-card--center .au-title.au-title--hero {
  font-size: var(--g-font-size-xl);
  background: linear-gradient(180deg, #f4ecd9 8%, #e8c87c 52%, #c9a24e 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #e8c87c;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
  letter-spacing: 0.12em; text-wrap: balance;
}
.au-card--center .au-title:not(.au-title--hero) {
  color: #f0ead9; letter-spacing: 0.04em; text-wrap: balance;
}
.au-card--center .au-title i { color: #e8c87c; margin-right: 2px; }
.au-sub  { color: rgba(235, 244, 236, 0.72); }
.au-year { color: rgba(235, 244, 236, 0.5); }
.au-hint { color: rgba(235, 244, 236, 0.55); }

/* 表单输入：深玻璃输入 + 暖金 focus 光晕 */
.au-input {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: #f0ead9;
}
.au-input:focus {
  outline: 2px solid rgba(201, 162, 78, 0.38); outline-offset: 1px;
  border-color: rgba(232, 200, 124, 0.85); background: rgba(255, 255, 255, 0.09);
}
.au-input::placeholder { color: rgba(235, 244, 236, 0.42); }
.au-input-wrap .au-input {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: #f0ead9;
}
.au-input-wrap .au-input:focus {
  outline: none;
  border-color: rgba(232, 200, 124, 0.85);
  box-shadow: 0 0 0 3px rgba(201, 162, 78, 0.24);
  background: rgba(255, 255, 255, 0.09);
}
.au-input-wrap .au-input::placeholder { color: rgba(235, 244, 236, 0.42); }

/* 错误条 readable：红字浅底（规范 §5 error 沿用 error-bar 观感） */
.au-error {
  color: #f3a38c;
  background: rgba(224, 122, 98, 0.13);
  border: 1px solid rgba(224, 122, 98, 0.28);
  border-radius: var(--g-radius-sm);
  padding: 8px 12px; margin: 8px 0;
  text-align: center;
}
/* 中性提示条（连接中/处理中，非错误）：暖金浅底 */
.au-notice {
  color: rgba(244, 236, 217, 0.92);
  background: rgba(201, 162, 78, 0.13);
  border: 1px solid rgba(232, 200, 124, 0.32);
  border-radius: var(--g-radius-sm);
  padding: 8px 12px; margin: 8px 0;
  text-align: center;
}

/* 主 CTA：暖金渐变（村口同款）+ hover 提亮抬升 + active 收缩 */
.au-btn--pri {
  background: linear-gradient(135deg, #e8c87c, #c9a24e);
  color: #2a2413;
  box-shadow: 0 6px 18px rgba(201, 162, 78, 0.3);
  letter-spacing: 0.08em;
  transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}
.au-btn--pri:not(:disabled):hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 10px 26px rgba(201, 162, 78, 0.42);
}
.au-btn--pri:active { transform: scale(0.96); }
.au-btn--pri:focus-visible {
  outline: 2px solid rgba(232, 200, 124, 0.6); outline-offset: 2px;
}
/* busy 沿用 .au-btn:disabled 的 opacity 半透明（金渐变保留，spinner+文案可读，勿套灰底） */
.au-btn i { margin-right: 6px; } /* busy spinner 与文案间距 */

/* ══ 进村大按钮（2026-09-23 砚仁拍板：卡通手指游戏风）══
   暖金渐变 + 厚底边 3D（按下下沉）+ 卡通手指待机轻点引人按 */
.au-enter-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 26px; margin-top: 16px;   /* 砚仁 2026-09-23：收身刚好框住字，不再通栏 */
  border: 0; border-radius: var(--g-radius-lg);
  background: linear-gradient(135deg, #e8c87c, #c9a24e);
  color: #2a2413;
  font-family: inherit; font-size: var(--g-font-size-lg); font-weight: 700; letter-spacing: 0.06em;
  cursor: pointer;
  box-shadow: 0 4px 0 #a5854a, 0 8px 18px rgba(201, 162, 78, 0.35); /* 厚底边=立体感 */
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.au-enter-btn:hover { filter: brightness(1.05); }
.au-enter-btn:active {
  transform: translateY(3px);            /* 按下去 */
  box-shadow: 0 1px 0 #a5854a, 0 3px 8px rgba(201, 162, 78, 0.3);
}
/* 卡通手指：待机 2.4s 一次轻点，不吵；系统开了减弱动画就静止 */
.au-enter-hand {
  display: inline-block; font-size: var(--g-font-size-lg); line-height: 1;  /* 与选单 fa 图标同档大小 */
  animation: au-hand-tap 2.4s ease-in-out infinite;
  transform-origin: 70% 80%;
}
@keyframes au-hand-tap {
  0%, 100% { transform: translateY(0) rotate(0); }
  12% { transform: translateY(2px) rotate(-8deg); }
  24% { transform: translateY(0) rotate(0); }
}
@media (prefers-reduced-motion: reduce) { .au-enter-hand { animation: none; } }

/* 方式图标选择器：玻璃圆徽 + hover 金描边抬升 + focus-visible 光晕 */
.au-icon-btn-ico {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #e8c87c;
  transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease, color 0.22s ease;
}
.au-icon-btn:not(:disabled):hover .au-icon-btn-ico {
  background: rgba(201, 162, 78, 0.2);
  border-color: #e8c87c;
  color: #f6e8c0;
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(232, 200, 124, 0.3);
}
.au-icon-btn:not(:disabled):active .au-icon-btn-ico { transform: scale(0.94); }
.au-icon-btn:focus-visible .au-icon-btn-ico {
  outline: 2px solid rgba(232, 200, 124, 0.55); outline-offset: 2px;
}
.au-icon-btn:disabled { opacity: 0.5; cursor: default; }
.au-icon-btn-lbl { color: rgba(235, 244, 236, 0.68); }

/* 次级链接按钮：金色文字 + hover 提亮 */
.au-link-btn { color: #d8c590; }
.au-link-btn:hover { color: #e8c87c; }
.au-btn--sec {
  border: 1px solid rgba(232, 200, 124, 0.55);
  color: #e8c87c; background: transparent;
}
.au-btn--sec:hover { background: rgba(232, 200, 124, 0.16); color: #f6e8c0; }

/* ── 头像：注册选头像 + 登录预览（2026-09 拍板）── */
.au-avatar-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 2px 0 8px; }
.au-avatar-center { display: flex; justify-content: center; padding: 2px 0 8px; }
.au-avatar-circle {
  width: 72px; height: 72px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  border: 2px solid var(--g-accent-light); background: var(--g-bg-glass);
}
.au-avatar-circle--sm { width: 64px; height: 64px; }
.au-avatar-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.au-avatar-tabs { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.au-avatar-tab {
  padding: 3px 10px; border-radius: 12px;
  border: 1px solid var(--g-text-on-dark-dim);
  background: var(--g-bg-glass);
  color: var(--g-text-on-dark-dim);
  font-size: var(--g-font-size-xs); font-weight: 600; cursor: pointer; white-space: nowrap;
}
.au-avatar-tab--on {
  border-color: var(--g-accent-light); background: var(--g-accent-light);
  color: var(--g-text-on-dark);
}
.au-avatar-fallback {
  display: flex; align-items: center; justify-content: center;
  font-size: var(--g-font-size-xl); font-weight: 700; color: var(--g-text-on-dark);
}
.au-avatar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-height: 180px; overflow-y: auto; }
.au-avatar-cell {
  padding: 0; border: 2px solid transparent; border-radius: 50%;
  overflow: hidden; cursor: pointer; background: none; aspect-ratio: 1;
}
.au-avatar-cell--on { border-color: var(--g-accent-light); }