/* 受法条约束：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: min(160px, 60%); display: block; margin: 0 auto 12px; }
.au-emoji { font-size: 3rem; margin-bottom: 8px; }
.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; }
.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;
}