/* 主体配色 = 脸厂支付宝蓝（2026-10-04 张总令；2026-10-16 张总再令：弦歌的布局/渐变手法可以学，
   配色必须用我们自己的——禁止粉紫，回归支付宝蓝）。
   结构沿用弦歌同款：主渐变 120deg · 卡片 16px 圆角 · 输入框 40px 高 10px 圆角；
   颜色全部换成脸厂蓝系：#1677ff→#0958d9。
   🔴 本组变量**只服务「主体」**（背景 / 卡片 / 表单 / 链接 / 提示）。
   🔴 页头 / 页脚 / 右侧悬浮条**不在本文件**：三页已改为与其他前端页面同一套
      #fs-header / #fs-footer / #fs-sidebar 占位符，样式唯一来源 = static/css/headfoot.css，
      由 site-config.js::renderChrome() 渲染。 */
:root {
  --brand: #1677ff;              /* 支付宝蓝（2026-10-04 张总令） */
  --brand-2: #0958d9;            /* 蓝渐变深端 */
  --grad: linear-gradient(120deg, #1677ff 0%, #0958d9 100%);  /* 脸厂主渐变（手法=弦歌，色=脸厂） */
  --brand-d: #0958d9;
  --brand-soft: rgba(22, 119, 255, 0.12);
  --brand-glow: rgba(22, 119, 255, 0.22);
  --bg-dark: #f2f7ff;            /* 主体底色（脸厂浅蓝白） */
  --text: #1f2329;               /* 主体文字 */
  --muted: #86909c;              /* 次要文字 */
  --card-bg: #ffffff;
  --card-border: #e3e5ee;        /* 中性描边（弦歌同款手法） */
  --input-bg: #ffffff;
  --input-border: #e3e5ee;
  --shadow: 0 1px 2px rgba(15, 18, 34, 0.06), 0 8px 24px rgba(22, 119, 255, 0.10);
  --radius: 16px;                /* 弦歌同款卡片圆角（结构保留） */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--text);
  background: var(--bg-dark);
  min-height: 100vh;
  overflow-x: hidden;
}

/* 背景（主体）：弦歌浅色同款纯净浅灰底（2026-10-16 张总令 · 照弦歌，原蓝白渐变下线） */
.video-bg { display: none; }

.video-fallback {
  position: fixed;
  inset: 0;
  background: var(--bg-dark);
  z-index: -3;
}

/* 原黑色遮罩只服务视频底，白底方案下必须去掉，否则整页发灰 */
.video-overlay { display: none; }

/* 主体
   页头已从「fixed 定位」改为与其他前端页面同一套流式组件（#fs-header = 顶部标语 34px + 导航 67px = 101px），
   故高度用 calc 扣掉页头，页脚正好落在首屏下沿；原 padding-top 150px（给 fixed 页头让位）随之取消。 */
.auth-main {
  min-height: calc(100vh - 101px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px 64px;
}

.auth-card {
  width: 100%;
  max-width: 460px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 42px 40px;
  box-shadow: var(--shadow);
}

.auth-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 28px;
  text-align: center;
  letter-spacing: 1px;
}

/* 副标题（找回密码等页在用；原无样式，白底方案下补上） */
.auth-sub {
  margin: -14px 0 22px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}

.field-group {
  margin-bottom: 14px;   /* 弦歌 .lg-form gap 14px 同节奏 */
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;   /* 允许内部「提示文案」换到下一行，否则会被压成右侧竖排窄条（注册页/找回密码页已踩） */
}

/* 提示文案独占一行，与输入框左缘对齐（2026-10-16 登录页去 label 后不再缩进） */
.field-group > .pwd-tip,
.field-group > .captcha-hint {
  flex: 1 0 100%;
  margin-left: 0;
  margin-top: 2px;
}

/* 注册类型卡片容器：撑满输入区剩余宽度（否则被同行提示文案挤成窄列） */
.field-group > .role-pick { flex: 1 1 auto; }

.field-label {
  flex: 0 0 104px;   /* 原 70px 容不下「设置登录密码」/「手机号 / 用户名」等长标签，会折成两行 */
  font-size: 14px;
  color: #4e5969;
  text-align: right;
}

.field-input,
.field-textarea,
.field-select {
  flex: 1;
  min-width: 0;
  height: 40px;                 /* 弦歌 el-input size=large = 40px */
  padding: 0 12px;
  border: 1px solid var(--input-border);
  border-radius: 10px;          /* 弦歌 --el-border-radius-base */
  background: var(--input-bg);
  color: #1f2329;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}

.field-input::placeholder { color: #9d9dab; }   /* 弦歌 --el-text-color-placeholder */

.field-input:focus,
.field-textarea:focus,
.field-select:focus {
  border-color: var(--brand);
}

.field-row { display: flex; gap: 10px; flex: 1 1 0%; min-width: 0; }
.field-row .field-input { flex: 1; }

.captcha-img {
  height: 42px;
  border-radius: 6px;
  background: #f2f3f5;
  display: grid;
  place-items: center;
  padding: 0 10px;
  font-size: 16px;
  font-weight: 700;
  color: #2a4d69;
  letter-spacing: 3px;
  cursor: pointer;
  user-select: none;
  border: 1px dashed #dcdfe6;
}
.captcha-hint {
  font-size: 12px;
  color: #86909c;
  cursor: pointer;
}

/* 「获取验证码」：弦歌 el-button 默认款（白底浅描边深字，hover 翻品牌粉） */
.code-btn {
  height: 40px;
  padding: 0 16px;
  border: 1px solid #d3d6e2;
  border-radius: 10px;
  background: #fff;
  color: #43434e;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}
.code-btn:hover { border-color: var(--brand); color: var(--brand); background: #fff; }
.code-btn:disabled { opacity: 0.55; cursor: default; }

.btn-primary {
  width: 100%;
  height: 44px;
  border: none;
  border-radius: 10px;
  background: var(--grad);          /* 脸厂蓝渐变 */
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 20px;
  transition: filter 0.15s, box-shadow 0.2s;
  box-shadow: 0 8px 20px var(--brand-glow);
}

.btn-primary:hover { filter: brightness(1.08); }   /* 弦歌 .xg-btn-grad:hover 同款 */
.btn-primary:disabled { opacity: 0.55; cursor: default; filter: none; }

.auth-tabs { display: flex; gap: 8px; margin-bottom: 22px; }
.auth-tab {
  flex: 1;
  padding: 10px 0;
  border: 1px solid #dcdfe6;
  background: #fff;
  color: #4e5969;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all .2s;
}
.auth-tab.active {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-soft);
  font-weight: 600;
}

.auth-link {
  display: block;
  text-align: center;
  margin-top: 18px;
  color: var(--muted);
  font-size: 14px;
  text-decoration: none;
}

.auth-link a {
  color: var(--brand);
  text-decoration: none;
  font-weight: 600;
}
.auth-link a:hover { text-decoration: underline; }

/* 身份选择（注册页） */
.id-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 20px 0 24px;
}

.id-card {
  position: relative;
  padding: 18px 14px;
  border: 1px solid #dcdfe6;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: all 0.2s;
}

.id-card:hover { border-color: var(--brand); }

.id-card input { position: absolute; opacity: 0; }

.id-card .id-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.id-card .id-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

.id-card.selected {
  border-color: var(--brand);
  background: var(--brand-soft);
  box-shadow: 0 0 0 2px var(--brand);
}

.tag-soon {
  display: inline-block;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 20px;
  background: #eef4ff;
  color: var(--brand);
  margin-top: 8px;
}

@media (max-width: 560px) {
  .auth-card { padding: 28px 22px; }
  .field-label { display: none; }
  .field-group > .pwd-tip,
  .field-group > .captcha-hint { margin-left: 0; }   /* 标签已隐藏，提示不再需要与输入框对齐的缩进 */
  .id-cards { grid-template-columns: 1fr; }
}

/* ============================================================
   登录页「左标语 + 右卡片」双栏布局（2026-10-14 张总令 · 仿弦歌）
   —— 仅在登录页生效（.auth-split 存在时）；找回密码页保持单卡片居中不受影响。
   ============================================================ */
.auth-split {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;   /* 左标语略宽，右卡片略窄（与弦歌同比例） */
  gap: 56px;
  align-items: center;
  width: 100%;
  max-width: 1120px;
}

/* ---------- 左栏 · 标语区（弦歌 lg-left 同款粉紫） ---------- */
.auth-aside { max-width: 560px; }

.auth-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand);
  background: linear-gradient(120deg, rgba(22, 119, 255, 0.10), rgba(9, 88, 217, 0.10));  /* 脸厂 --grad-soft */
  border: 1px solid rgba(22, 119, 255, 0.24);
  padding: 6px 12px;
  border-radius: 999px;
}
.auth-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--grad);
}

.auth-h1 {
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 16px 0 14px;
}
.auth-h1 .grad {
  background: var(--grad);          /* 渐变字（手法=弦歌，色=脸厂） */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.auth-lead {
  font-size: 15px;
  line-height: 1.8;
  color: #43434e;                   /* 弦歌 --ink-2 */
  margin: 0;
  max-width: 460px;
}

.auth-points {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.auth-points li {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #1f2329;
  font-size: 14px;
}
.auth-points .tick {
  flex: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  color: #fff;
  background: var(--grad);
  box-shadow: 0 3px 8px rgba(22, 119, 255, 0.30);
}

/* 卡片在双栏里撑满本栏；登录页卡片内不再重复大标题（标题已在左栏）
   弦歌 .xg-card：白底 + --line 描边 + 16px 圆角 + 轻投影；内边距同 .lg-card 26px */
.auth-split .auth-card {
  width: 100%;
  max-width: none;
  padding: 26px 28px;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(15, 18, 34, 0.08), 0 1px 2px rgba(15, 18, 34, 0.05);
}
.auth-split .auth-title { display: none; }

/* 登录页 Tab＝弦歌 el-tabs 同款（下划线式）：未选中深墨 #303133、选中品牌粉 + 2px 粉底线 */
.auth-split .auth-tabs { gap: 30px; border-bottom: 1px solid var(--card-border); margin-bottom: 20px; }
.auth-split .auth-tab {
  flex: none;
  position: relative;
  padding: 0 2px 12px;
  border: none;
  border-radius: 0;
  background: none;
  color: #303133;
  font-size: 16px;
  font-weight: 500;
}
.auth-split .auth-tab:hover { color: var(--brand); }
.auth-split .auth-tab.active {
  color: var(--brand);
  background: none;
  font-weight: 600;
}
.auth-split .auth-tab.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand);
}

/* 双栏页面：弦歌同款纯净底，不加光晕（2026-10-16 张总令 · 蓝色光晕已随旧配色下线） */
.auth-main--split {
  position: relative;
  /* 左右留白加大到 72px：内容贴边时避开右侧固定悬浮工具条（right:1%，约 48px 宽），
     否则 1024 这类窄桌面下卡片右上角会被悬浮条压住。宽屏由 max-width 兜底，不受影响。 */
  padding-left: 72px;
  padding-right: 72px;
}
.auth-main--split > * { position: relative; z-index: 1; }

/* 响应式：窄屏单栏堆叠（左标语在上、卡片在下）。
   断点 1080px（既避开右侧悬浮工具条，也避免卡片被挤窄） */
@media (max-width: 1080px) {
  .auth-main--split { padding-left: 24px; padding-right: 24px; }
  .auth-split { grid-template-columns: 1fr; gap: 30px; max-width: 480px; }
  .auth-aside { max-width: none; text-align: center; }
  .auth-lead { margin-left: auto; margin-right: auto; }
  .auth-points { align-items: center; }
  .auth-points li { justify-content: center; }
  .auth-h1 { margin: 14px 0 12px; }
}

/* 本地图形验证码（字母 + 数字）：弦歌 .lg-cap-img 同款（110×40、8px 圆角、浅灰底） */
.cap-canvas {
  flex: none;
  width: 110px;
  height: 40px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: #f6f7fb;
  cursor: pointer;
}
.field-row { display: flex; gap: 10px; align-items: center; }
.field-row .field-input { flex: 1; min-width: 0; }
.field-row .cap-canvas { flex: none; }
.auth-side { margin: 12px 0 0; text-align: right; font-size: 13px; }
.auth-side a { color: var(--brand, #1677ff); text-decoration: none; }

/* ============ 「注册或登录」合并入口（2026-10-14 张总令） ============
   1) 分段（验证码登录 / 密码登录）只在后台开启「启用密码登录」时才出现，默认 hidden。
      ⚠️ 必须显式写 [hidden]：.auth-tabs 自带 display:flex，作者样式的优先级高于浏览器对
      hidden 属性的默认 UA 样式，只靠 hidden 属性是「隐藏不掉」的。
   2) 隐含同意文案：去掉协议勾选框后，改为大站通用的一行提示（链接仍指向协议全文页）。 */
.auth-tabs[hidden] { display: none !important; }
.ag-implicit { margin: 2px 0 0; font-size: 12.5px; line-height: 1.75; color: #86909c; }
.ag-implicit .ag-link { color: var(--brand, #1677ff); text-decoration: none; }
.ag-implicit .ag-link:hover { text-decoration: underline; }
.auto-tip { margin: 10px 0 0; font-size: 12.5px; color: #86909c; text-align: center; }