/* ============================================
   登录/注册页。沿用 app.css 设计变量,左右不对称。
   背景加细噪点纹理,不用平铺纯色。
   ============================================ */

.auth-body {
  min-height: 100vh;
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  /* 冷白底 + 右上一抹暖光晕,打破单一色系 */
  background:
    radial-gradient(1100px 600px at 88% -10%, #fff4ec 0%, transparent 55%),
    radial-gradient(900px 700px at -5% 110%, #e9ecfa 0%, transparent 50%),
    var(--bg);
  position: relative;
  overflow-x: hidden;
}
/* 细噪点:让背景有触感,不死板 */
.auth-body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}

.auth-back {
  position: absolute; top: 26px; left: 32px; z-index: 5;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-dim); text-decoration: none; font-size: 14px;
  transition: color .2s;
}
.auth-back:hover { color: var(--accent); }
.auth-back .iconify { font-size: 15px; }

/* 舞台:左介绍 + 右卡片,不对称(卡片略偏右下,靠留白撑) */
.auth-stage {
  position: relative; z-index: 2;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 48px;
  max-width: 1040px;
  margin: 0 auto;
  padding: 40px 32px;
}

/* 左侧介绍 */
.auth-intro { padding-left: 12px; }
.auth-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 34px; }
/* ★07-28 横版字标改用雪碧图 + JS 逐帧,同 app.css。
   登录页给得比别处大一档(48px 高):左栏很空,字标是唯一的视觉锚点,
   小了压不住那块留白。旁边的"理图"文字要隐 —— 字标里自带这两个字。
   默认 position-y 100% = 末帧 = logo 定帧;2100% 是 21 帧纵向拼的高度。 */
.auth-logo .logo {
  width: 163px; height: 48px;
  background: url("/static/img/wordmark_sprite.webp") 0 100%/100% 2100% no-repeat;
  font-size: 0;
  flex: 0 0 auto;
}
.auth-logo span { display: none; }
/* 开了"减少动态效果"的用户给静态整图,无障碍要求。
   必须连 size 一起改回 contain,否则雪碧图会被压成一条 */
@media (prefers-reduced-motion: reduce) {
  .auth-logo .logo {
    background: url("/static/img/wordmark.png") left center/contain no-repeat;
  }
}

.auth-intro h1 {
  font-size: 30px; line-height: 1.35; color: var(--ink);
  margin: 0 0 14px; font-weight: 800;
}
.auth-intro p {
  font-size: 16px; color: var(--text-dim); max-width: 340px;
  margin: 0 0 30px; line-height: 1.6;
}
.auth-sells { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.auth-sells li {
  display: flex; align-items: center; gap: 12px;
  font-size: 15px; color: var(--text);
}
.auth-sells .iconify {
  font-size: 20px; color: var(--accent);
  background: var(--accent-soft); padding: 8px; border-radius: 10px;
}

/* 右侧卡片:玻璃质感 + 高光边 */
.auth-card {
  background: var(--glass-strong);
  border: 1px solid var(--glass-line);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 34px 32px 28px;
  backdrop-filter: blur(14px);
  max-width: 400px; width: 100%;
  justify-self: end;
}

/* 登录/注册切换 tab */
.auth-tabs {
  display: flex; gap: 6px; margin-bottom: 26px;
  background: var(--bg); border-radius: 12px; padding: 5px;
}
.auth-tab {
  flex: 1; border: none; background: transparent; cursor: pointer;
  padding: 9px 0; border-radius: 9px;
  font-size: 15px; font-weight: 700; color: var(--text-dim);
  font-family: var(--font);
  transition: all .18s;
}
.auth-tab.active {
  background: #fff; color: var(--accent-ink);
  box-shadow: var(--shadow-sm);
}

/* 表单 */
.auth-form { display: grid; gap: 18px; }
.auth-field { display: grid; gap: 7px; }
/* ★同一个坑第五次(07-27):类里写了 display,不补这条 hidden 属性就完全失效。
   推荐码那个字段靠 hidden 在登录/注册之间切换,少了这行就永远显示。 */
.auth-field[hidden] { display: none; }
.af-lbl { font-size: 13px; font-weight: 700; color: var(--text); }
/* 标签里的副说明:说清"填了有什么好处",别让人以为是必填 */
.af-lbl em { font-style: normal; font-weight: 500; color: var(--text-dim); font-size: 12px; }
/* 推荐码即时校验提示:绿=有效,红=码不对 */
.af-tip { font-size: 12px; color: var(--text-dim); min-height: 15px; }
.af-tip.ok { color: #2f8f5b; }
.af-tip.err { color: #b8420f; }
/* hint = 只是建议,不是错误。灰字,和 err 的砖红明确区分 ——
   用手机号当用户名是推荐做法,填别的也能过,不该看着像出错了 */
.af-tip.hint { color: var(--text-dim); }
.auth-field input {
  width: 100%; box-sizing: border-box;
  padding: 12px 14px;
  border: 1.5px solid var(--line); border-radius: 11px;
  font-size: 15px; color: var(--ink); font-family: var(--font);
  background: #fff;
  transition: border-color .18s, box-shadow .18s;
}
.auth-field input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(111,102,230,.14);
}
.auth-field input::placeholder { color: var(--text-faint); }

/* 密码框:右侧眼睛按钮 */
.af-pw { position: relative; }
.af-pw input { padding-right: 44px; }
.af-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  border: none; background: transparent; cursor: pointer;
  color: var(--text-faint); padding: 8px; border-radius: 8px;
  display: grid; place-items: center;
  transition: color .18s;
}
.af-eye:hover { color: var(--accent); }
.af-eye .iconify { font-size: 17px; }

/* 勾选框行:记住我 / 同意协议(08-04 加)。
   ★display 写了就必须补 [hidden](同一个坑第十次)——
     这两个框靠 hidden 在登录/注册之间互换,少了下一行会永远显示,
     变成"登录页要你同意注册协议"。 */
.auth-check {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 13px; color: var(--text-dim);
  cursor: pointer; user-select: none;
  line-height: 1.6;
}
.auth-check[hidden] { display: none; }
/* 原生 checkbox 换成 accent 色:默认那个蓝框和整站色调打架。
   accent-color 一行就够,不用自己拿 span 画一个 —— 自绘的很容易丢键盘焦点框。 */
.auth-check input[type="checkbox"] {
  width: 16px; height: 16px; margin: 0;
  flex: 0 0 auto;
  accent-color: var(--accent);
  cursor: pointer;
  /* 视觉上和第一行文字对齐:16px 的框在 1.6 行高里要往下压一点 */
  margin-top: 2.5px;
}
.auth-check span { flex: 1; }
.auth-check em {
  font-style: normal; color: var(--text-faint); font-size: 12px;
}
.auth-check a {
  color: var(--accent-ink); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid rgba(111,102,230,.3);
}
.auth-check a:hover { border-bottom-color: var(--accent); }

/* 提示条:错误红、成功绿,默认收起 */
.auth-msg {
  font-size: 13.5px; min-height: 0; line-height: 1.5;
  padding: 0; border-radius: 9px;
  transition: all .2s;
}
.auth-msg.show { padding: 10px 12px; }
.auth-msg.err { background: #fdecec; color: #c0392b; }
.auth-msg.ok  { background: #eafaf0; color: #1e8a4f; }

/* 提交按钮:主强调色,悬浮抬升 */
.auth-submit {
  width: 100%; border: none; cursor: pointer;
  padding: 13px 0; border-radius: 12px;
  font-size: 16px; font-weight: 700; color: #fff;
  font-family: var(--font);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 12px 26px -10px rgba(111,102,230,.6);
  transition: transform .16s, box-shadow .16s, opacity .16s;
  margin-top: 2px;
}
.auth-submit:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -10px rgba(111,102,230,.7); }
.auth-submit:active { transform: translateY(0); }
.auth-submit:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* 底部切换链接 */
.auth-switch {
  margin-top: 20px; text-align: center;
  font-size: 14px; color: var(--text-dim);
}
.auth-switch a {
  color: var(--accent); text-decoration: none; font-weight: 700; margin-left: 4px;
}
.auth-switch a:hover { text-decoration: underline; }

/* 协议入口:两个 tab 都常驻。原来只挂在注册的勾选行上,登录 tab 是 hidden 的,
   已经注册过的人想回头看条款根本找不到入口。字号压到 12.5 并且用弱化色 ——
   它是"要能找到",不是"要被看见",不该抢注册按钮的注意力。 */
.auth-foot {
  margin-top: 14px; text-align: center;
  font-size: 12.5px; color: var(--text-dim); opacity: .72;
}
.auth-foot a { color: var(--text-dim); text-decoration: none; }
.auth-foot a:hover { color: var(--accent); text-decoration: underline; }
.auth-foot .af-dot { margin: 0 6px; opacity: .5; }

/* 窄屏:上下叠,介绍在上 */
@media (max-width: 820px) {
  .auth-stage { grid-template-columns: 1fr; gap: 28px; padding-top: 72px; }
  .auth-intro { padding-left: 0; text-align: center; }
  .auth-intro p { margin-left: auto; margin-right: auto; }
  .auth-logo { justify-content: center; }
  .auth-sells { max-width: 300px; margin: 0 auto; }
  .auth-card { justify-self: center; }
}

/* ============================================
   真机档(560px 以下)—— 08-03 加
   ============================================
   病:375 屏上「登录」按钮落在 734px,屏高只有 667 —— 用户打开登录页
   看不到登录按钮,得往下滚。账是这么来的(实测每一块):
     外层上边距 72 + logo 48+34 + 标题 41+14 + 副标 51+30 + 三条卖点 104
     = 宣传区吃掉 394px,卡片只能从 422 开始
     卡片内:内边距 34 + tab 48+26 + 两个输入框 74+18+74 = 按钮落到 734
   改法:把【副标 + 三条卖点】挪到卡片下面去 —— 文案一个字没删,
   只是换了先后。手机上打开登录页,第一件事就是登录,卖点看不看随意。
   ★为什么用 display:contents 而不改 HTML:HTML 一改,PC 端那个
     左右两栏(1fr 1fr)的结构就得跟着重排。这块整个包在媒体查询里,
     PC 端连这几行都读不到。
*/
@media (max-width: 560px) {
  /* gap 归零,间距全交给各块自己的 margin 管 —— 不然 5 个孩子之间
     4 道 28px 的缝就白吃 112px */
  .auth-stage { gap: 0; padding: 56px 16px 40px; }
  .auth-intro { display: contents; }

  .auth-logo { order: 1; justify-content: flex-start; margin-bottom: 12px; }
  .auth-logo .logo { width: 122px; height: 36px; }   /* 按 163:48 等比缩,防雪碧图串帧 */

  .auth-intro h1 { order: 2; font-size: 22px; line-height: 1.3;
                   margin-bottom: 10px; text-align: left; }
  .auth-card { order: 3; justify-self: stretch; max-width: none;
               padding: 22px 18px 20px; border-radius: 18px; }

  /* 挪到卡片下面的两块 */
  .auth-intro p { order: 4; font-size: 13.5px; line-height: 1.6;
                  max-width: none; margin: 22px 0 14px; text-align: left; }
  .auth-sells { order: 5; max-width: none; margin: 0; gap: 12px; }
  .auth-sells li { font-size: 14px; gap: 10px; }
  .auth-sells .iconify { font-size: 17px; padding: 7px; border-radius: 9px; }

  /* 卡片内部收紧,同时把点击区补到 44px(手指按得准) */
  .auth-tabs { margin-bottom: 18px; }
  .auth-tab { min-height: 44px; padding: 0; }
  .auth-form { gap: 14px; }
  .auth-submit { padding: 15px 0; }
  /* 「回首页」原来只有 22px 高,点不准 —— 加内边距撑到 44,
     负 margin 抵掉多出来的高度,免得把下面整块又推下去 */
  .auth-back { padding: 11px 12px 11px 0; margin: -11px 0 -11px 0; }
  .auth-switch { margin-top: 16px; }
  .auth-switch a { display: inline-block; padding: 12px 6px; margin: -12px 0; }
  /* 两个链接挨着,手机上不撑开点击区会点错 */
  .auth-foot { margin-top: 10px; }
  .auth-foot a { display: inline-block; padding: 11px 8px; margin: -11px 0; }
}