/* ============================================================
   LoginUI · 登录 / 注册
   ============================================================ */

.auth {
  display: flex;
  flex-direction: column;
  padding: calc(24px + var(--safe-t)) 26px calc(22px + var(--safe-b));
  overflow-y: auto;
  scrollbar-width: none;
}
.auth::-webkit-scrollbar { display: none; }

/* 顶部极淡的强调色弥散 */
.auth__bloom {
  position: absolute; left: 0; right: 0; top: -160px; height: 420px;
  background: radial-gradient(58% 58% at 50% 32%, rgba(62, 99, 221, .11), rgba(62, 99, 221, 0) 72%);
  pointer-events: none;
}

/* ---------- 品牌区 ---------- */
.auth__brand { margin-top: clamp(28px, 9vh, 92px); text-align: center; }

.brand-mascot {
  display: block; width: 62px; height: 62px; margin: 0 auto;
  border-radius: 20px; object-fit: cover; object-position: center 16%;
  background: var(--accent-soft);
  box-shadow: 0 10px 24px -18px var(--shadow-accent);
}

.brand-mark {
  width: 58px; height: 58px; margin: 0 auto;
  display: grid; place-items: center;
  border-radius: 20px; background: var(--accent-soft);
  color: var(--accent);
  font-family: "Songti SC", "Noto Serif SC", "Source Han Serif SC", serif;
  font-size: 27px; line-height: 1;
  box-shadow: 0 10px 24px -18px var(--shadow-accent);
}

.auth__title {
  margin-top: 20px;
  font-size: 22px; font-weight: 600;
  letter-spacing: .04em; text-indent: .04em;
}
.auth__sub { margin-top: 9px; font-size: 13px; color: var(--ink-3); letter-spacing: 0; }

/* ---------- 表单面板 ---------- */
.auth__panel { margin-top: clamp(28px, 7vh, 54px); }

.seg {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  padding: 4px; border-radius: var(--r-md);
  background: var(--fill);
}
.seg__item {
  position: relative; z-index: 1;
  height: 38px; border-radius: 12px;
  font-size: 13.5px; font-weight: 500; color: var(--ink-3);
  transition: color .22s var(--ease);
}
.seg__item.is-active { color: var(--ink); font-weight: 600; }
.seg__thumb {
  position: absolute; z-index: 0; top: 4px; left: 4px;
  width: calc(50% - 4px); height: calc(100% - 8px);
  border-radius: 12px; background: var(--white);
  box-shadow: 0 1px 3px rgba(18, 22, 31, .10), 0 6px 14px -12px rgba(18, 22, 31, .3);
  transition: transform .3s var(--ease);
}
.seg[data-mode="register"] .seg__thumb { transform: translateX(100%); }

.auth__form { margin-top: 26px; display: flex; flex-direction: column; gap: 16px; }

.field__label {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2px; margin-bottom: 8px;
  font-size: 12.5px; color: var(--ink-3);
}
.field__box {
  display: flex; align-items: center; gap: 8px;
  height: 52px; padding: 0 16px;
  border-radius: 14px; background: var(--fill);
  transition: background .2s var(--ease), box-shadow .2s var(--ease);
}
.field__box:focus-within {
  background: var(--white);
  box-shadow: 0 0 0 1.5px var(--accent), 0 0 0 4.5px var(--accent-soft);
}
.field__box input { font-size: 15px; letter-spacing: -.01em; }
.field__box input::placeholder { color: var(--ink-4); }
.field__box input:-webkit-autofill {
  -webkit-text-fill-color: var(--ink);
  box-shadow: 0 0 0 60px var(--fill) inset;
}
.field__eye { display: grid; place-items: center; padding: 6px; margin-right: -6px; color: var(--ink-3); flex: none; }
.field__eye .i { width: 19px; height: 19px; }

.link { font-size: 12.5px; color: var(--ink-3); }
.link:active { color: var(--ink-2); }
.link--accent { color: var(--accent); font-weight: 500; }

/* ---------- 错误提示 / 提交 ---------- */
.auth__error {
  min-height: 17px;
  padding: 0 2px; margin-top: -4px;
  font-size: 12.5px; color: var(--danger);
  opacity: 0; transform: translateY(-2px);
  transition: opacity .2s, transform .2s var(--ease);
}
.auth__error.is-on { opacity: 1; transform: none; }
.auth__error.is-info { color: var(--ink-3); }

.auth__submit { width: 100%; margin-top: 4px; }

.auth__dev {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; margin-top: 18px; padding: 10px 12px;
  border-radius: 12px;
  background: var(--fill);
  font-size: 12px; color: var(--ink-3); letter-spacing: 0;
  transition: background-color .18s var(--ease);
}
.auth__dev:active { background: var(--fill); }
.auth__dev span { color: var(--accent); font-weight: 500; }

.auth__aux { margin-top: 16px; text-align: center; font-size: 13px; color: var(--ink-3); }
.auth__aux .link { font-size: 13px; }

.auth__legal {
  margin-top: auto; padding-top: 30px;
  text-align: center; font-size: 11.5px; line-height: 1.7; color: var(--ink-4);
}
.auth__legal a {
  color: var(--ink-3);
  text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}
.is-shake { animation: shake .34s var(--ease); }

/* ---------- 夜间微调 ---------- */
html[data-theme="dark"] .auth__bloom {
  background: radial-gradient(58% 58% at 50% 32%, rgba(240, 194, 75, .10), rgba(240, 194, 75, 0) 72%);
}
html[data-theme="dark"] .seg__thumb { background: var(--fill-2); }
html[data-theme="dark"] .field__box:focus-within { background: var(--fill-2); }