/**
 * 认证页共享样式（登录 / 注册 / 找回密码）。
 * 与落地页同源：直接 @import 它提取出来的 tokens，颜色、字体、间距全部一套，
 * 落地页调色改一处，三个认证页跟着变，不会漂移。
 */
@import url("./tokens.css");

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip;height:100%}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-height:100%;
  display:grid;
  grid-template-rows:auto 1fr auto;
  background:var(--color-paper);
  color:var(--color-ink);
  font-family:var(--font-sans);
  font-size:var(--text-base);
  line-height:1.8;
  letter-spacing:0.01em;
  -webkit-font-smoothing:antialiased;
}
h1,h2,p,form,fieldset{margin:0}
fieldset{border:0;padding:0;min-inline-size:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:where(a,button,input,summary):focus-visible{
  outline:2px solid var(--color-focus);outline-offset:2px;border-radius:var(--radius-1);
}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.label{
  font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:0.13em;text-transform:uppercase;color:var(--color-ink-3);
}

/* ─── 顶栏（与落地页同款字标）─────────────────────────────────────── */
.nav{border-bottom:var(--rule-hair) solid var(--color-rule-soft)}
.nav__row{
  width:100%;max-width:var(--shell);margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-md);min-height:60px;
}
.wordmark{
  font-family:var(--font-mono);font-size:var(--text-lg);font-weight:600;
  letter-spacing:0.02em;display:flex;align-items:baseline;gap:0.5em;white-space:nowrap;
}
.wordmark__sub{
  font-size:var(--text-xs);letter-spacing:0.16em;text-transform:uppercase;
  color:var(--color-ink-3);font-weight:400;
}
.nav__back{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-ink-3)}
.nav__back:hover{color:var(--color-ink)}

/* ─── 卡片 ───────────────────────────────────────────────────────── */
.wrap{
  display:flex;align-items:center;justify-content:center;
  padding:var(--space-2xl) var(--gutter);
}
.card{
  width:100%;max-width:26rem;
  border:var(--rule-hair) solid var(--color-rule);
  border-radius:var(--radius-1);
  background:var(--color-paper-2);
}
.card__head{
  padding:var(--space-lg) var(--space-lg) var(--space-md);
  border-bottom:var(--rule-hair) solid var(--color-rule-soft);
}
.card__title{font-size:var(--text-xl);font-weight:650;line-height:1.4;letter-spacing:-0.01em}
.card__sub{margin-top:var(--space-2xs);font-size:var(--text-sm);color:var(--color-ink-3)}
.card__body{padding:var(--space-lg)}

/* ─── 表单 ───────────────────────────────────────────────────────── */
.field{margin-bottom:var(--space-md)}
.field__label{
  display:block;margin-bottom:var(--space-2xs);
  font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:0.11em;text-transform:uppercase;color:var(--color-ink-3);
}
.input{
  width:100%;min-height:42px;padding:0 var(--space-sm);
  color:var(--color-ink);background:var(--color-paper);
  border:var(--rule-hair) solid var(--color-control);
  border-radius:var(--radius-1);
  font-family:var(--font-mono);font-size:var(--text-base);
  letter-spacing:0.02em;
  transition:border-color var(--dur-short) var(--ease-out);
}
.input::placeholder{color:var(--color-ink-3);opacity:0.7;letter-spacing:0.01em}
.input:hover{border-color:var(--color-ink-3)}
.input:focus{outline:2px solid var(--color-focus);outline-offset:1px;border-color:var(--color-accent)}
.input[disabled]{opacity:0.6;cursor:not-allowed}
/* 验证码：输入框 + 发送按钮同排 */
.field--code .row{display:flex;gap:var(--space-xs)}
.field--code .input{flex:1;min-width:0}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:0.5em;
  min-height:42px;padding:0 var(--space-md);line-height:1;
  font-family:var(--font-mono);font-size:var(--text-sm);letter-spacing:0.04em;
  border:var(--rule-hair) solid var(--color-control);
  border-radius:var(--radius-1);white-space:nowrap;
  transition:border-color var(--dur-short) var(--ease-out),
             background-color var(--dur-short) var(--ease-out),
             color var(--dur-short) var(--ease-out);
}
.btn:hover{border-color:var(--color-ink-2);background:var(--color-paper-3)}
.btn:disabled{opacity:0.55;cursor:not-allowed;border-color:var(--color-rule);color:var(--color-ink-3);background:none}
.btn--primary{
  background:var(--color-accent);border-color:var(--color-accent);
  color:var(--color-accent-ink);font-weight:600;
}
.btn--primary:hover:not(:disabled){background:var(--color-accent-hi);border-color:var(--color-accent-hi)}
.btn--block{width:100%;min-height:46px;font-size:var(--text-base);margin-top:var(--space-sm)}
.btn--code{flex:none;min-width:7.5rem;font-size:var(--text-xs)}

/* ─── 提示条 ─────────────────────────────────────────────────────── */
.msg{
  margin-bottom:var(--space-md);padding:var(--space-sm) var(--space-md);
  border-radius:var(--radius-1);font-size:var(--text-sm);line-height:1.6;
  border-inline-start:2px solid;
}
.msg[hidden]{display:none}
.msg--err{color:var(--color-loss);border-color:var(--color-loss);background:color-mix(in oklab, var(--color-loss) 9%, transparent)}
.msg--ok{color:var(--color-gain);border-color:var(--color-gain);background:color-mix(in oklab, var(--color-gain) 9%, transparent)}

.foot-links{
  display:flex;justify-content:space-between;gap:var(--space-md);flex-wrap:wrap;
  margin-top:var(--space-lg);padding-top:var(--space-md);
  border-top:var(--rule-hair) solid var(--color-rule-soft);
  font-size:var(--text-sm);color:var(--color-ink-3);
}
.foot-links a{color:var(--color-accent)}
.foot-links a:hover{color:var(--color-accent-hi);text-decoration:underline;text-underline-offset:3px}
.hint{margin-top:var(--space-xs);font-size:var(--text-xs);color:var(--color-ink-3);line-height:1.6}

.page-foot{
  padding:var(--space-lg) var(--gutter);
  border-top:var(--rule-hair) solid var(--color-rule-soft);
  font-family:var(--font-mono);font-size:var(--text-xs);
  color:var(--color-ink-3);text-align:center;
}

/* 加载态：按钮里的小转子 */
.spin{
  width:12px;height:12px;flex:none;border-radius:50%;
  border:1.5px solid currentColor;border-top-color:transparent;
}
@media (prefers-reduced-motion:no-preference){
  .spin{animation:spin 0.7s linear infinite}
}
@keyframes spin{to{transform:rotate(360deg)}}

@media (max-width:30rem){
  .wrap{padding-block:var(--space-xl)}
  .card__head,.card__body{padding-inline:var(--space-md)}
  .field--code .row{flex-wrap:wrap}
  .btn--code{width:100%}
}