/* ==========================================================================
   小二接单 · 登录 / 注册 专用设计系统 (auth.css)
   左品牌展示 + 右表单分屏，统一品牌渐变、精致卡片、优雅交互。
   ========================================================================== */

:root {
  --a-brand: #4f46e5;
  --a-brand-600: #4338ca;
  --a-brand-700: #3730a3;
  --a-grad: linear-gradient(135deg, #6366f1 0%, #4f46e5 45%, #7c3aed 100%);
  --a-grad-soft: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 100%);
  --a-ink: #0f172a;
  --a-ink-2: #334155;
  --a-ink-3: #64748b;
  --a-line: #e7eaf3;
  --a-bg: #f5f6fb;
  --a-card: #ffffff;
  --a-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .04);
  --a-shadow: 0 10px 30px rgba(15, 23, 42, .08);
  --a-shadow-brand: 0 14px 34px rgba(79, 70, 229, .30);
  --a-radius: 16px;
  --a-radius-lg: 22px;
}

/* ---------- 分屏外壳 ---------- */
.auth-shell {
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  min-height: calc(100vh - 68px);
}

/* ---------- 左侧品牌面板 ---------- */
.auth-aside {
  position: relative;
  overflow: hidden;
  background: var(--a-grad);
  padding: 46px 52px;
  display: flex;
  color: #fff;
}
.auth-aside__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}
.auth-aside__glow--1 {
  width: 340px; height: 340px;
  background: #8b5cf6; opacity: .55;
  top: -110px; right: -70px;
}
.auth-aside__glow--2 {
  width: 300px; height: 300px;
  background: #22d3ee; opacity: .30;
  bottom: -90px; left: -60px;
}
.auth-aside__glow--3 {
  width: 180px; height: 180px;
  background: #f472b6; opacity: .25;
  top: 42%; left: 30%;
}
.auth-aside__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  animation: authUp .6s ease both;
}

.auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
}
.auth-brand__mark {
  width: 46px; height: 46px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .18);
  backdrop-filter: blur(6px);
  display: grid; place-items: center;
  font-size: 22px; color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}
.auth-brand__name {
  font-size: 22px; font-weight: 800; letter-spacing: .5px;
  color: #fff;
}
.auth-brand__name b { color: #fff; }

.auth-aside__hero { margin-top: 56px; }
.auth-aside__hero h2 {
  color: #fff; font-size: 40px; line-height: 1.22;
  margin: 0 0 18px; font-weight: 800; letter-spacing: .5px;
}
.auth-aside__hero p {
  color: rgba(255, 255, 255, .86);
  font-size: 15.5px; line-height: 1.85;
  max-width: 430px; margin: 0;
}

.auth-feats {
  list-style: none; margin: 36px 0 0; padding: 0;
  display: grid; gap: 18px;
}
.auth-feats li {
  display: flex; gap: 14px; align-items: flex-start;
  color: rgba(255, 255, 255, .92);
}
.auth-feats i {
  width: 42px; height: 42px; border-radius: 12px; flex: none;
  background: rgba(255, 255, 255, .16);
  display: grid; place-items: center;
  font-size: 18px; color: #fff;
}
.auth-feats b { display: block; font-size: 15.5px; font-weight: 700; }
.auth-feats span { font-size: 13.5px; opacity: .82; }

.auth-trust {
  display: flex; gap: 30px;
  margin-top: auto; padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, .18);
}
.auth-trust__item b {
  display: block; font-size: 25px; font-weight: 800; color: #fff;
  line-height: 1.1;
}
.auth-trust__item span { font-size: 12.5px; opacity: .8; }

/* ---------- 右侧表单面板 ---------- */
.auth-main {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 32px;
  background: var(--a-card);
}
.auth-card {
  width: 100%;
  max-width: 432px;
  animation: authUp .5s ease both;
}
.auth-card__head { margin-bottom: 26px; }
.auth-card__head h1 {
  font-size: 28px; margin: 0 0 8px; color: var(--a-ink); font-weight: 800;
}
.auth-card__head p {
  margin: 0; color: var(--a-ink-3); font-size: 14.5px;
}
.auth-card__head a { color: var(--a-brand); font-weight: 700; }

/* ---------- 提示条 ---------- */
.auth-alert {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border-radius: 14px;
  font-size: 14px; margin-bottom: 22px;
  border: 1px solid transparent;
}
.auth-alert i { margin-top: 2px; font-size: 16px; flex: none; }
.auth-alert ul { margin: 0; padding-left: 18px; }
.auth-alert li { margin: 2px 0; }
.auth-alert--error { background: #fff1f2; color: #be123c; border-color: #fecdd3; }
.auth-alert--success { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }

/* ---------- 表单字段 ---------- */
.auth-field { margin-bottom: 18px; }
.auth-field > label {
  display: block; font-weight: 700; font-size: 13.5px;
  color: var(--a-ink-2); margin-bottom: 8px;
}
.auth-input {
  display: flex; align-items: center; gap: 12px;
  border: 1.5px solid var(--a-line); border-radius: 14px;
  padding: 0 16px; background: #fff; transition: .18s;
}
.auth-input:focus-within {
  border-color: var(--a-brand);
  box-shadow: 0 0 0 4px rgba(79, 70, 229, .12);
}
.auth-input i.fa-solid, .auth-input i.fa-brands {
  color: var(--a-ink-3); font-size: 16px; flex: none;
}
.auth-input input {
  flex: 1; border: none; outline: none; height: 50px;
  font-size: 15px; background: transparent; color: var(--a-ink);
  font-family: inherit;
}
.auth-input--pwd { padding-right: 6px; }
.auth-eye {
  border: none; background: transparent; color: var(--a-ink-3);
  cursor: pointer; font-size: 16px; padding: 9px; border-radius: 10px;
  transition: .15s;
}
.auth-eye:hover { color: var(--a-brand); background: var(--a-grad-soft); }

/* ---------- 选项行 ---------- */
.auth-row {
  display: flex; align-items: center; justify-content: space-between;
  margin: 2px 0 22px;
}
.auth-check {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--a-ink-2); font-weight: 600; cursor: pointer;
}
.auth-check input { width: 16px; height: 16px; accent-color: var(--a-brand); }
.auth-check--agree {
  font-weight: 500; font-size: 13px; line-height: 1.65;
  margin-bottom: 22px; color: var(--a-ink-3);
}
.auth-check--agree a { color: var(--a-brand); font-weight: 700; }

/* ---------- 按钮 ---------- */
.auth-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 52px; border: none; border-radius: 14px;
  background: var(--a-grad); color: #fff;
  font-size: 16px; font-weight: 700; cursor: pointer;
  font-family: inherit;
  box-shadow: var(--a-shadow-brand);
  transition: .18s;
}
.auth-btn:hover { transform: translateY(-2px); box-shadow: 0 20px 44px rgba(79, 70, 229, .42); }
.auth-btn:active { transform: translateY(0); box-shadow: var(--a-shadow-brand); }
.auth-btn--wechat {
  background: #fff; color: #09b83e;
  border: 1.5px solid #c8eccf; box-shadow: none;
}
.auth-btn--wechat:hover {
  background: #f1fbf3; transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(9, 184, 62, .16);
}

/* ---------- 分隔线 ---------- */
.auth-divider {
  display: flex; align-items: center; gap: 14px;
  margin: 26px 0 18px; color: var(--a-ink-3); font-size: 13px;
}
.auth-divider::before, .auth-divider::after {
  content: ""; height: 1px; flex: 1; background: var(--a-line);
}

/* ---------- 入场动画 ---------- */
@keyframes authUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

/* ---------- 响应式 ---------- */
@media (max-width: 960px) {
  .auth-shell { grid-template-columns: 1fr; min-height: auto; }
  .auth-aside { padding: 34px 26px; }
  .auth-aside__glow { display: none; }
  .auth-aside__hero { margin-top: 26px; }
  .auth-aside__hero h2 { font-size: 27px; }
  .auth-feats, .auth-trust { display: none; }
  .auth-main { padding: 40px 22px 52px; }
}
@media (max-width: 480px) {
  .auth-card__head h1 { font-size: 24px; }
  .auth-aside__hero h2 { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-card, .auth-aside__inner { animation: none; }
  .auth-btn:hover { transform: none; }
}