/* ============================================================
   注册页样式
   基础变量与 body 来自 main.css，这里只补表单部分。
   视觉基调暂与骨架页保持一致；未来科技风（蓝色主调、涟漪动效、
   全局悬停提示）会在独立的界面功能里统一实现，届时只替换本文件。
   ============================================================ */

.auth-page {
  /* 登录页改为浅色主题，配色对齐 AI 备课系统 UI 原型（主蓝 #2F54EB / 强调橙 #FF8A33） */
  --bg: #f4f6fb;        /* 页面浅底 */
  --panel: #ffffff;     /* 卡片白底 */
  --border: #e4e8f2;    /* 浅分隔线 */
  --text: #1f2733;      /* 正文深色 */
  --text-dim: #6b7488;  /* 次要文字 */
  --accent: #2F54EB;    /* 主蓝 */
  --ok: #2F54EB;        /* 正向状态一律主蓝：全站去绿（2026-09-23 用户定） */
  --fail: #e5484d;      /* 失败红（浅底用亮红） */
  --pending: #FF8A33;   /* 强调橙 */
  /* 页面整体垂直居中，表单在窄屏上也不会贴边 */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.auth-nav-link {
  color: var(--text-dim);
  text-decoration: none;
  font-size: 13px;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  transition: color .2s, border-color .2s;
}

.auth-nav-link:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.auth-wrap {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 34px 20px 48px;
}

.auth-card {
  width: 100%;
  max-width: 460px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 26px 28px 22px;
}

.auth-card h2 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 600;
  text-align: center;              /* 用户要求：标题居中显示 */
}

/* ---------- 消息条 ---------- */
/* 默认高度为 0 而不是 display:none，是为了让提示出现时页面不跳动 */
.auth-msg {
  min-height: 0;
  overflow: hidden;
  font-size: 13px;
  transition: min-height .18s;
}

.auth-msg.show {
  min-height: 34px;
  margin: 10px 0 2px;
  padding: 8px 12px;
  border-radius: 7px;
}

.auth-msg.ok {
  background: rgba(47, 84, 235, .08);
  border: 1px solid rgba(47, 84, 235, .35);
  color: var(--ok);
}

.auth-msg.err {
  background: rgba(229, 72, 77, .08);
  border: 1px solid rgba(229, 72, 77, .35);
  color: var(--fail);
}

.auth-msg.info {
  background: rgba(47, 84, 235, .08);
  border: 1px solid rgba(47, 84, 235, .35);
  color: var(--accent);
}

/* ---------- 字段 ---------- */
.field { margin-top: 16px; }

.field label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--text);
}

.field .req { color: var(--fail); }

.field input {
  width: 100%;
  padding: 10px 12px;
  background: #ffffff;            /* 浅色主题：输入框白底 */
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}

.field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(47, 84, 235, .14);   /* 主蓝聚焦光晕 */
}

.field input::placeholder { color: #9aa3b2; }

/* 校验不通过时由脚本加这个类，比整段提示更直观 */
.field input.invalid {
  border-color: var(--fail);
  box-shadow: 0 0 0 3px rgba(255, 92, 92, .12);
}

.field-hint {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--text-dim);
}

/* 验证码与按钮同行；窄屏下自动换行 */
.input-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.input-row input { flex: 1 1 170px; }

/* ---------- 按钮 ---------- */
button {
  font-family: inherit;
  cursor: pointer;
  transition: opacity .18s, background .18s, border-color .18s;
}

button:disabled {
  cursor: not-allowed;
  opacity: .5;
}

.btn-primary {
  width: 100%;
  margin-top: 22px;
  padding: 11px;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 7px;
  color: #ffffff;                 /* 蓝底白字，与原型主按钮一致 */
  font-size: 14.5px;
  font-weight: 600;
}

.btn-primary:hover:not(:disabled) { opacity: .88; }

.btn-ghost {
  flex: 0 0 auto;
  padding: 10px 14px;
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 7px;
  color: var(--accent);
  font-size: 13.5px;
  white-space: nowrap;
}

.btn-ghost:hover:not(:disabled) { background: rgba(47, 84, 235, .08); }

/* ---------- 页脚备注 ---------- */
.auth-foot-note {
  margin: 18px 0 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--text-dim);
}

.disabled-link {
  color: var(--text-dim);
  text-decoration: none;
  border-bottom: 1px dashed var(--border);
  cursor: not-allowed;
}

/* 页脚链接统一用主色。
   注意 .auth-foot-note a 比单独的 .disabled-link 更具体，会反过来盖掉它，
   所以下面这条 a.disabled-link 必须存在 —— 否则"忘记密码"会显示成可点的
   蓝色却点不动，比明确置灰更让人困惑。 */
.auth-foot-note a {
  color: var(--accent);
  text-decoration: none;
}

.auth-foot-note a:hover { text-decoration: underline; }

.auth-foot-note a.disabled-link {
  color: var(--text-dim);
  border-bottom: 1px dashed var(--border);
  cursor: not-allowed;
}

/* ---------- 复选框行（登录页"记住我"）---------- */
/* 方框与文字垂直居中：浏览器默认按基线对齐，复选框会明显偏低半行 */
.field-inline .checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}

/* 必须重置：否则复选框会继承 .field input 的整块样式 ——
   宽度 100%、10px 内边距、深色底，加在方框上会变成一个怪方块 */
.field-inline .checkbox-label input[type="checkbox"] {
  width: auto;
  flex: 0 0 auto;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  accent-color: var(--accent);
  cursor: pointer;
}

.field-inline .field-hint { margin-top: 4px; }

/* ---------- 窄屏 ---------- */
@media (max-width: 520px) {
  .auth-card { padding: 20px 18px 18px; }
  .auth-wrap { padding: 20px 14px 36px; }
  .btn-ghost { flex: 1 1 100%; }
}

/* ---------- 品牌区：logo + 文字（浅色主题新增） ---------- */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-logo {
  width: 38px;
  height: 38px;
  /* 不加 border-radius：logo 自带「速度线 + 斜方块」外轮廓，
     矩形圆角会把它裁掉一角（与侧栏 .sb-brand img 同理）。 */
  flex: none;
}

/* ---------- 登录/注册页广告语：与首页同一份配置、同一套轮播 ---------- */
.auth-slogan {
  position: relative;
  height: 22px;                 /* 固定高度，避免切换时卡片跳动 */
  margin: 0 0 16px;
  text-align: center;           /* 用户要求：广告语居中显示 */
  font-size: 13.5px;
  font-weight: 600;
}

/* 每条绝对定位、叠在同一位置，靠 opacity 过渡交叉淡入淡出；
   哪条可见由 slogan.js 打的 .on 决定（文案条数由后台决定，
   从前的 @keyframes + animation-delay 只能排固定两条的节奏） */
.auth-slogan span {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .5s ease, transform .5s ease;
}

.auth-slogan span.on { opacity: 1; transform: none; }

/* 兜底：脚本没跑起来时至少显示第一条，否则这一行是空白。
   is-live 由脚本接管后打上。 */
.auth-slogan:not(.is-live) span:first-child { opacity: 1; transform: none; }

/* 句1 活力橙（AI 色），句2 主蓝（专注信任），与首页双色一致 */
.auth-slogan .s1 { color: var(--pending); }
.auth-slogan .s1::before {
  content: "";
  width: 12px; height: 12px;
  border-radius: 4px;
  background: linear-gradient(135deg, #FF8A33, #FFB070);
  box-shadow: 0 2px 6px rgba(255, 138, 51, .35);
}
.auth-slogan .s2 { color: var(--accent); }
.auth-slogan .s2::before {
  content: "";
  width: 12px; height: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2F54EB, #5B7CFA);
  box-shadow: 0 2px 6px rgba(47, 84, 235, .3);
}

/* 系统设了"减少动态效果"就不轮播：所有广告语静态竖排（与首页口径一致） */
@media (prefers-reduced-motion: reduce) {
  .auth-slogan { height: auto; display: flex; flex-direction: column; gap: 4px; }
  .auth-slogan span { position: static; opacity: 1; transform: none; transition: none; }
}

@media (max-width: 520px) {
  .auth-slogan { font-size: 12.5px; }
}

/* ---------- 修改密码页（套工作台外壳的那一版） ---------- */

/* 表单本身复用本文件的 .field / .field-hint / .auth-msg / .btn-primary ——
   它们是全局类名，选择器里没有 .auth-page 这类祖先限定，所以套了外壳的
   页面同样命中，不必再抄第二份表单样式（抄了以后改一处就会分叉）。
   这里只补两件它没有的东西：卡片宽度、顶部标题的间距。 */
.pwd-card { max-width: 460px; }

/* 说明文字用 .card 的 .sub 类，这里把行高调开一点并留出与消息区的间距 */
.pwd-card .sub { line-height: 1.7; margin-bottom: 8px; }

/* 套外壳后没有 .auth-slogan 那条广告语，h3 直接贴着卡片上沿，
   和 .card 默认的内边距一配就是正常留白；这里只保证标题不与副标题挤在一起 */
.pwd-card h3 { margin-bottom: 4px; }