/* ═══════════════════════════════════════════════════════════
 * auth.css · 独立登录 / 注册页
 * 依赖 styles.css、ds/tokens.css，只服务 login.html / register.html。
 * 颜色全部走语义令牌，跟随系统深浅色。
 * ═══════════════════════════════════════════════════════════ */

.auth-body{
  margin:0;
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:clamp(20px,4vw,56px);
  background:
    radial-gradient(760px 460px at 6% -14%, var(--brand-soft), transparent 68%),
    radial-gradient(620px 420px at 106% 114%, var(--bg-inset), transparent 70%),
    var(--bg-canvas);
  color:var(--text-primary);
  font-family:var(--font-ui);
}

.auth-wrap{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,400px);
  gap:clamp(32px,4vw,48px);
  align-items:center;
  width:100%;
  max-width:920px;
}

/* ── 左侧说明 ─────────────────────────────────────── */
.auth-aside{display:flex;flex-direction:column;gap:24px;min-width:0}
.auth-brand{display:flex;align-items:center;gap:11px}
.auth-logo{
  flex:0 0 auto;width:36px;height:36px;border-radius:10px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--brand),var(--brand-hover));
  color:var(--on-brand);font-size:16px;font-weight:800;
  box-shadow:var(--elev-1), inset 0 1px 0 var(--bg-overlay);
}
.auth-brand-name{font-size:14px;font-weight:650;letter-spacing:-.01em}
.auth-brand-sub{font-size:10.5px;color:var(--text-tertiary);margin-top:2px;letter-spacing:.02em}

.auth-eyebrow{
  font-size:var(--size-micro);font-weight:var(--fw-micro);letter-spacing:var(--ls-micro);
  color:var(--text-brand);text-transform:uppercase;
}
.auth-aside h1{
  margin:0;font-size:clamp(26px,2.6vw,32px);line-height:1.22;
  font-weight:750;letter-spacing:-.03em;color:var(--text-primary);
  text-wrap:balance;
}
.auth-lede{
  margin:0;font-size:var(--size-body);line-height:1.75;color:var(--text-secondary);
}
.auth-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.auth-points li{display:flex;align-items:flex-start;gap:9px;font-size:var(--size-small);color:var(--text-secondary);line-height:1.55}
.auth-points svg{flex:0 0 16px;width:16px;height:16px;margin-top:1px;color:var(--success)}
.auth-aside-foot{font-size:var(--size-micro);line-height:1.7;color:var(--text-tertiary);max-width:40ch}

/* ── 右侧表单卡 ───────────────────────────────────── */
.auth-card{
  background:var(--bg-surface);
  border:1px solid var(--border-hair);
  border-radius:var(--radius-panel);
  box-shadow:var(--elev-2);
  padding:clamp(24px,3vw,34px);
}
.auth-card h2{
  margin:0;font-size:var(--size-h1);line-height:var(--lh-h1);
  font-weight:var(--fw-h1);letter-spacing:var(--ls-h1);
}
.auth-card .auth-sub{
  margin:8px 0 0;font-size:var(--size-small);line-height:1.6;color:var(--text-tertiary);
}

.auth-form{display:flex;flex-direction:column;gap:14px;margin-top:22px}
.auth-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.auth-field label{font-size:11.5px;font-weight:600;color:var(--text-tertiary)}
.auth-field .opt{font-weight:500;color:var(--text-disabled);margin-left:4px}
.auth-field input{
  width:100%;height:var(--control-h-lg);padding:0 12px;
  font-family:inherit;font-size:13.5px;
  border:1px solid var(--border-hair);border-radius:var(--radius-control);
  background:var(--bg-surface);color:var(--text-primary);
  transition:border-color var(--dur-micro),box-shadow var(--dur-micro);
}
.auth-field input:hover{border-color:var(--border-strong)}
.auth-field input:focus{
  outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-soft);
}
.auth-field input::placeholder{color:var(--text-disabled)}
.auth-field .hint{font-size:11px;line-height:1.5;color:var(--text-tertiary)}

.auth-msg{
  margin:0;padding:10px 12px;
  border:1px solid var(--border-hair);border-radius:var(--radius-card);
  background:var(--bg-subtle);
  font-size:var(--size-small);line-height:1.6;color:var(--text-secondary);
}
.auth-msg.err{background:var(--danger-soft);border-color:transparent;color:var(--danger)}
.auth-msg.ok{background:var(--success-soft);border-color:transparent;color:var(--success)}

.auth-submit{
  width:100%;height:var(--control-h-lg);margin-top:4px;
  border:1px solid var(--brand);border-radius:var(--radius-control);
  background:var(--brand);color:var(--on-brand);
  font-family:inherit;font-size:13.5px;font-weight:650;cursor:pointer;
  transition:background var(--dur-micro) var(--ease-out),border-color var(--dur-micro);
}
.auth-submit:hover{background:var(--brand-hover);border-color:var(--brand-hover)}
.auth-submit:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.auth-submit:disabled{opacity:.6;cursor:default}
.auth-submit:disabled:hover{background:var(--brand);border-color:var(--brand)}

.auth-alt{
  margin:18px 0 0;text-align:center;
  font-size:var(--size-small);color:var(--text-tertiary);
}
.auth-alt a{color:var(--text-brand);font-weight:600;text-decoration:none}
.auth-alt a:hover{text-decoration:underline}
.auth-alt a:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:3px}

.auth-foot{
  margin:16px 0 0;padding-top:14px;
  border-top:1px solid var(--border-hair);
  font-size:var(--size-micro);line-height:1.7;color:var(--text-tertiary);
}

/* ── 窄屏 ─────────────────────────────────────────── */
@media (max-width:900px){
  .auth-wrap{grid-template-columns:minmax(0,1fr);gap:26px;max-width:460px}
  .auth-aside{gap:14px}
  .auth-eyebrow,.auth-points,.auth-aside-foot{display:none}
  .auth-aside h1{font-size:26px;max-width:none}
  .auth-lede{font-size:12.5px;line-height:1.65}
  .auth-card{box-shadow:var(--elev-1)}
}