/* ==========================================================================
   auth.css — 认证页私有样式（2026-09 改版）
   覆盖：login.html / register.html / _wx_login.html / link.html / oauth_consent.html
   壳与卡片容器（.auth / .auth-brand / .auth-card）由 base 提供；这里只管卡片内部。
   前缀 .au-，不与基础层的 .auth-* 撞名。颜色只用令牌；二维码框（.qr）永远白底，
   框内的骨架 / 过期遮罩因此用不随主题变化的白与 --navy-900。
   ========================================================================== */

/* -- 卡片骨架 ---------------------------------------------------------------- */
.au-panel{overflow:hidden}
.au-panel-body{padding:24px}
.au-panel-foot{text-align:center;font-size:var(--fs-sm)}
.au-panel-foot a{font-weight:600}
.au-panel-foot code{font-size:var(--fs-xs)}
.au-head{margin-bottom:18px}
.au-head[hidden]{display:none}
.au-head h1{font-size:20px;margin:0 0 4px}
.au-head p{font-size:var(--fs);margin:0;line-height:1.6}
.au-help{margin:16px 6px 0;font-size:var(--fs-xs);color:var(--text-3);line-height:1.65;text-align:center}
.au-help a{color:var(--text-2);text-decoration:underline;text-underline-offset:2px}
.au-referred{margin-bottom:16px}
.au-referred .mono{margin-left:6px;opacity:.85}

/* -- 微信区（login / register） -------------------------------------------- */
.au-wx-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:18px}
.au-wx-ico{
  width:40px;height:40px;border-radius:10px;flex:none;
  background:var(--ok-soft);color:var(--ok-ink);
  display:inline-flex;align-items:center;justify-content:center;
}
.au-wx-ico .ico{width:22px;height:22px}
.au-wx-head-t{min-width:0;flex:1}
.au-wx-head h1{font-size:20px;margin:0 0 4px}
.au-wx-lead{margin:0;font-size:var(--fs);color:var(--text-2);line-height:1.6}
.au-wx-lead[hidden]{display:none}
.au-wx-pane[hidden]{display:none}
.au-wx-foot{margin:14px 0 0}

/* 6 位码（login / register / link 共用） */
.au-code-row{display:flex;gap:14px;align-items:stretch;margin-bottom:16px}
.au-follow{flex:none;padding:8px;align-self:center}
.au-follow img{width:112px;height:112px;display:block}
.au-code{
  flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:14px 16px;border:1px dashed var(--border-str);border-radius:var(--r-lg);background:var(--surface-2);
}
.au-code-k{font-size:var(--fs-xs);color:var(--text-3);font-weight:600;letter-spacing:.02em}
.au-code-v{
  font-family:var(--font-mono);font-size:32px;font-weight:600;letter-spacing:.16em;line-height:1.1;
  color:var(--brand);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.au-code-v.is-empty{color:var(--text-4);letter-spacing:.1em}
.au-code-line{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.au-code-copy{flex:none}
.is-expired .au-code-v{color:var(--text-4);text-decoration:line-through;text-decoration-thickness:2px}
.au-steps{gap:8px;margin-bottom:16px}
.au-steps li{font-size:var(--fs-sm);padding-left:32px;line-height:1.55;color:var(--text-2);min-height:22px}
.au-steps li::before{width:22px;height:22px;font-size:11px}
.au-steps strong{color:var(--text);font-weight:620}
.au-steps code{font-size:.95em;font-weight:600}

/* 二维码（qr 模式） */
.au-qr-wrap{display:flex;justify-content:center;margin-bottom:10px}
.au-qr{position:relative;padding:10px}
.au-qr img,.au-skel{width:200px;height:200px;display:block;border-radius:6px}
.au-qr img[hidden]{display:none}
.au-skel{
  background:linear-gradient(90deg,rgba(16,24,40,.06) 25%,rgba(16,24,40,.13) 50%,rgba(16,24,40,.06) 75%);
  background-size:200% 100%;animation:au-shimmer 1.3s linear infinite;
}
.au-skel[hidden]{display:none}
.au-qr-mask{
  position:absolute;inset:0;border-radius:var(--r-lg);background:rgba(255,255,255,.9);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  color:var(--navy-900);font-size:var(--fs-sm);font-weight:600;line-height:1.4;text-align:center;
}
.au-qr-mask[hidden]{display:none}
.au-qr-mask .ico{width:24px;height:24px}
.au-qr-code{text-align:center;margin:0 0 12px}
.au-qr-code[hidden]{display:none}

/* 状态行 */
.au-status{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--text-2);min-height:22px;line-height:1.4}
.au-dot{width:8px;height:8px;border-radius:50%;background:var(--brand);flex:none;animation:au-pulse 1.4s ease-in-out infinite}
.au-status.is-off{color:var(--text-3)}
.au-status.is-off .au-dot{background:var(--text-4);animation:none}
.au-status.is-ok{color:var(--ok-ink)}
.au-status.is-ok .au-dot{background:var(--ok);animation:none}
.au-expired{margin-top:10px}
.au-expired[hidden]{display:none}
.au-mock{margin:8px 0 0;color:var(--text-3)}
.au-mock[hidden]{display:none}

/* 「或者用邮箱」分隔线 */
.au-or{
  display:flex;align-items:center;gap:12px;margin:22px 0 18px;
  font-size:var(--fs-xs);color:var(--text-3);font-weight:600;letter-spacing:.02em;white-space:nowrap;
}
.au-or::before,.au-or::after{content:"";flex:1 1 auto;height:1px;background:var(--border)}
.au-wx-block[hidden]{display:none}

/* -- 邮箱表单 ---------------------------------------------------------------- */
.au-form .field:last-of-type{margin-bottom:18px}
.au-form .btn-block{height:42px}
.au-terms{margin:12px 0 0;text-align:center}
.au-terms a{color:var(--text-2);text-decoration:underline;text-underline-offset:2px}

/* -- 绑定页三态 -------------------------------------------------------------- */
.au-state{text-align:center;padding:10px 0 4px}
.au-state-ico{
  width:56px;height:56px;border-radius:50%;margin-bottom:14px;
  display:inline-flex;align-items:center;justify-content:center;
}
.au-state-ico .ico{width:28px;height:28px;stroke-width:2}
.au-state-ico.ok{background:var(--ok-soft);color:var(--ok-ink)}
.au-state-ico.bad{background:var(--warn-soft);color:var(--warn-ink)}
.au-state h1{font-size:20px;margin:0 0 6px}
.au-state p{margin:0 auto 18px;max-width:34em;line-height:1.6}
.au-state .btn-block{height:42px}

/* -- OAuth 授权页 ------------------------------------------------------------ */
.au-consent-head{display:flex;gap:12px;align-items:flex-start}
.au-consent-head > div{min-width:0;flex:1}
.au-consent-ico{
  width:40px;height:40px;border-radius:10px;flex:none;
  background:var(--brand-soft);color:var(--brand);
  display:inline-flex;align-items:center;justify-content:center;
}
.au-consent-ico .ico{width:22px;height:22px}
.au-consent-sec{margin-bottom:16px}
.au-consent-k{font-size:var(--fs-xs);font-weight:650;letter-spacing:.04em;color:var(--text-3);margin-bottom:8px}
.au-scopes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.au-scopes li{
  display:flex;gap:10px;align-items:flex-start;margin:0;
  padding:10px 12px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface-2);
}
.au-scopes li .ico{color:var(--ok-ink);margin-top:2px}
.au-scopes li > div{min-width:0;display:flex;flex-direction:column;gap:2px}
.au-scopes b{font-size:var(--fs);font-weight:620;color:var(--text)}
.au-scope-d{font-size:var(--fs-sm);color:var(--text-2);line-height:1.5}
.au-scope-c{align-self:flex-start;font-size:var(--fs-xs);margin-top:3px}
.au-consent-kv{margin-bottom:16px;font-size:var(--fs-sm)}
.au-consent-kv dd.trunc{white-space:nowrap}
.au-consent-note{margin-bottom:18px}
.au-consent-note b{color:var(--text)}
.au-consent-actions{display:flex;flex-direction:column;gap:8px}
.au-consent-actions .btn-block{height:42px}

/* -- 动效 ---------------------------------------------------------------------- */
@keyframes au-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
@keyframes au-pulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}

/* -- 响应式 -------------------------------------------------------------------- */
@media (max-width:900px){
  /* 手机上品牌栏只占自身高度，多余空间给卡片（否则 100vh 网格把空白平分给两行）。
     建议进基础层：.auth{grid-template-rows:auto 1fr} */
  body.shell-auth .auth{grid-template-rows:auto minmax(0,1fr)}
  /* 绑定页是给手机的：品牌栏只留一句话，卡片尽快进视口 */
  body.au-link .auth-points{display:none}
  body.au-link .auth-pitch{margin:14px 0 12px}
  body.au-link .auth-pitch h2{font-size:20px;margin-bottom:0}
}
@media (max-width:768px){
  .au-panel-body{padding:18px 16px}
  .au-head h1,.au-wx-head h1,.au-state h1{font-size:19px}
  .au-code-row.has-qr{flex-direction:column;align-items:stretch}
  .au-code-row.has-qr .au-follow{align-self:center}
  .au-code-v{font-size:30px;letter-spacing:.14em}
  .au-help{margin-top:14px}
  .au-consent-kv{grid-template-columns:max-content minmax(0,1fr);gap:8px 16px}
  .au-consent-kv dt{margin-top:0}
}
@media (max-width:360px){
  .au-code-v{font-size:26px;letter-spacing:.1em}
}

/* -- 打印 / 无动效 ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .au-dot,.au-skel{animation:none}
}
@media print{
  .au-qr-mask,.au-expired,.au-mock,.au-code-copy{display:none!important}
}