/* ============================================================
   登录页
   ============================================================ */
body[data-page="login"]{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:40px 20px;
}

.auth{
  position:relative;
  z-index:1;
  width:min(420px, 100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:22px;
}

.auth-brand{
  display:inline-flex;
  align-items:center;
  gap:9px;
  text-decoration:none;
  color:var(--ink);
}
.auth-brand .brand-name{ font-size:15px; font-weight:600; letter-spacing:-.01em; }

.auth-card{
  width:100%;
  padding:clamp(24px, 5vw, 34px);
  border-radius:var(--card);
  background:var(--surface-hi);
  border:1px solid var(--line);
  box-shadow:var(--shadow-card);
  -webkit-backdrop-filter:blur(var(--blur));
  backdrop-filter:blur(var(--blur));
}

.auth-head{ margin-bottom:22px; }
.auth-head h1{
  margin:0 0 6px;
  font-size:24px;
  font-weight:600;
  letter-spacing:-.02em;
}
.auth-head p{ margin:0; color:var(--ink-soft); font-size:13.5px; }

.auth-form{ display:flex; flex-direction:column; gap:14px; }

.field{ display:flex; flex-direction:column; gap:7px; }
.field > span{ font-size:12.5px; color:var(--ink-mid); }
.field input{
  width:100%;
  padding:11px 13px;
  border-radius:12px;
  border:1px solid var(--line-mid);
  background:var(--surface-solid);
  color:var(--ink);
  font:inherit;
  font-size:14px;
  outline:none;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field input::placeholder{ color:var(--ink-ghost); }
.field input:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-tint);
}
.field input.is-invalid{
  border-color:#e0554f;
  box-shadow:0 0 0 3px rgba(224, 85, 79, .12);
}

.auth-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:2px;
  font-size:12.5px;
}
.check{ display:inline-flex; align-items:center; gap:7px; color:var(--ink-mid); cursor:pointer; }
.check input{ width:14px; height:14px; accent-color:var(--brand); cursor:pointer; }
.auth-link{ color:var(--brand); text-decoration:none; }
.auth-link:hover{ text-decoration:underline; }

.auth-error{
  margin:0;
  padding:9px 12px;
  border-radius:10px;
  background:rgba(224, 85, 79, .09);
  border:1px solid rgba(224, 85, 79, .28);
  color:#c0392f;
  font-size:12.5px;
  line-height:1.55;
}
[data-theme="dark"] .auth-error{ color:#ff9a93; }

.auth-submit{
  width:100%;
  justify-content:center;
  margin-top:4px;
  padding:12px 18px;
  height:auto;
  font-size:14px;
}

.auth-hint{
  margin:16px 0 0;
  padding-top:14px;
  border-top:1px solid var(--line);
  color:var(--ink-soft);
  font-size:12px;
  line-height:1.65;
}

.auth-foot{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:var(--ink-soft);
  font-size:12px;
}
.auth-foot a{ color:var(--ink-mid); text-decoration:none; }
.auth-foot a:hover{ color:var(--ink); }

@media (max-width:420px){
  body[data-page="login"]{ padding:26px 16px; }
  .auth-row{ flex-direction:column; align-items:flex-start; gap:8px; }
}

/* hidden 属性要压过 .field{display:flex} */
.auth-card [hidden]{ display:none !important; }

/* ---------- 登录 / 注册 切换 ---------- */
.auth-tabs{
  display:flex;
  gap:6px;
  margin:0 0 18px;
  padding:4px;
  border-radius:12px;
  background:rgba(16,24,40,.05);
}
[data-theme="dark"] .auth-tabs{ background:rgba(255,255,255,.06); }

.auth-tab{
  flex:1;
  padding:8px 10px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--ink-mid);
  font:inherit;
  font-size:13.5px;
  cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.auth-tab:hover{ color:var(--ink); }
.auth-tab.is-active{
  background:var(--surface-solid);
  color:var(--ink);
  box-shadow:0 1px 3px rgba(16,24,40,.10);
}

.auth-submit[disabled]{ opacity:.6; cursor:default; }

@media (max-width:420px){
  .auth-tabs{ margin-bottom:14px; }
}