/* 登录 / 注册页：和首页、价格页、文档页同一套语言（暗色 + 星河 + 青蓝高光 + 玻璃卡）。
   结构：左品牌说明（含轻量模型星河）/ 右玻璃表单卡；≤900px 改上下结构。
   只做展示与交互，不碰提交逻辑（逻辑在 login.js）。 */

/* 背景：在整页星点之上再叠一层很柔的中心光晕，避免大片纯黑 */
body.auth-page::after {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(760px 560px at 74% 46%, rgba(34, 199, 232, .085), transparent 66%),
    radial-gradient(620px 520px at 16% 26%, rgba(120, 150, 255, .07), transparent 68%),
    radial-gradient(900px 700px at 52% 116%, rgba(255, 138, 61, .05), transparent 70%);
}

/* ---------- 两栏骨架 ---------- */
.auth {
  position: relative; z-index: 1; min-height: 100vh; box-sizing: border-box;
  width: min(calc(100% - var(--page-pad) * 2), 1320px); margin-inline: auto;
  padding: calc(var(--nav-h) + clamp(34px, 6vh, 74px)) 0 clamp(46px, 7vh, 88px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 3.6vw, 64px); align-items: center;
}

/* ---------- 右上导航：本页没有当前项，只把对比度提上来（首页那边是 .62） ---------- */
body.auth-page .land-nav { gap: 26px; }
body.auth-page .land-nav a { color: rgba(255, 255, 255, .74); }
body.auth-page .land-nav a:hover { color: #fff; }

/* ---------- 左：品牌说明 ---------- */
.auth-hero { position: relative; min-width: 0; }
.auth-stars { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.auth-hero-in { position: relative; z-index: 2; max-width: 560px; }

.auth-kicker { display: block; font-size: 12px; letter-spacing: .34em; text-transform: uppercase; color: rgba(34, 199, 232, .78); }
.auth-h1 {
  margin: 18px 0 0; font-size: clamp(32px, 3.5vw, 52px); line-height: 1.06;
  letter-spacing: -.045em; font-weight: 650; color: #fff;
  text-shadow: 0 4px 40px rgba(6, 9, 16, .6);
}
.auth-h1 em {
  font-style: normal;
  background: linear-gradient(96deg, #F6FAFF 0%, #AEEBFC 34%, #22C7E8 70%, #8F96FA 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.auth-sub { margin: 16px 0 0; font-size: clamp(14.5px, 1.15vw, 17px); line-height: 1.8; color: rgba(232, 242, 255, .74); }

.auth-points { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 18px; }
.auth-points li { display: flex; align-items: center; gap: 16px; min-width: 0; }
.ap-ic {
  flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px;
  color: #C6F0FD; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.ap-ic svg { width: 20px; height: 20px; }
.ap-t { display: block; min-width: 0; }
.ap-t b { display: block; font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; color: #fff; }
.ap-t i { display: block; margin-top: 4px; font-style: normal; font-size: 13px; line-height: 1.6; color: rgba(232, 242, 255, .64); }

/* ---------- 右：玻璃卡 ---------- */
.auth-panel { display: flex; justify-content: center; min-width: 0; }
.auth-card {
  position: relative; width: 100%; max-width: 452px; box-sizing: border-box;
  padding: 32px 32px 20px; border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, .09);
  background: linear-gradient(180deg, rgba(24, 30, 40, .74), rgba(12, 15, 20, .8));
  -webkit-backdrop-filter: blur(22px) saturate(1.2); backdrop-filter: blur(22px) saturate(1.2);
  box-shadow: 0 40px 92px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06);
  animation: authIn .68s var(--ease-c) both;
}
.auth-card::after {
  content: ''; position: absolute; left: 26px; right: 26px; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(174, 228, 255, .5), transparent);
}
/* 入场：整体轻微上浮淡入（不依赖 JS，禁用动效时直接可见） */
@keyframes authIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.auth-hero-in > * { animation: authIn .8s var(--ease-c) both; }
.auth-hero-in > *:nth-child(2) { animation-delay: .08s; }
.auth-hero-in > *:nth-child(3) { animation-delay: .16s; }
.auth-hero-in > *:nth-child(4) { animation-delay: .24s; }

/* 登录 / 注册切换时的轻微淡入上移 */
.auth-swap { transition: opacity .2s var(--ease-c), transform .2s var(--ease-c); }
.auth-swap.is-out { opacity: 0; transform: translateY(6px); }

.auth-head { padding-bottom: 22px; }
.auth-head h2 { margin: 0; font-size: 25px; font-weight: 650; letter-spacing: -.02em; color: #fff; }
.auth-head p { margin: 9px 0 0; font-size: 13.5px; line-height: 1.7; color: rgba(232, 242, 255, .6); }

/* ---------- 输入框 ---------- */
.field-line { display: block; margin: 0 0 15px; min-width: 0; }
.field-line[hidden] { display: none; }
.fl-k { display: block; margin-bottom: 8px; font-size: 12.5px; color: rgba(255, 255, 255, .62); }
.fl-k em {
  font-style: normal; margin-left: 8px; padding: 1px 7px; border-radius: 999px; font-size: 11px;
  color: rgba(255, 255, 255, .48); background: rgba(255, 255, 255, .06);
}
.auth-card input {
  width: 100%; box-sizing: border-box; height: 50px; padding: 0 15px;
  font: inherit; font-size: 14.5px; color: #fff; outline: none;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .11); border-radius: 12px;
  transition: border-color .2s var(--ease-c), background .2s var(--ease-c), box-shadow .2s var(--ease-c);
}
.auth-card input::placeholder { color: rgba(255, 255, 255, .34); }
.auth-card input:hover { border-color: rgba(255, 255, 255, .18); }
.auth-card input:focus {
  border-color: rgba(34, 199, 232, .65); background: rgba(34, 199, 232, .06);
  box-shadow: 0 0 0 3px rgba(34, 199, 232, .14);
}
.auth-card .field-line.bad input {
  border-color: rgba(255, 107, 107, .62); box-shadow: 0 0 0 3px rgba(255, 107, 107, .1);
}
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 48px; }
.pw-eye {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 0; border-radius: 10px; background: none; cursor: pointer;
  color: rgba(255, 255, 255, .42);
  transition: color .18s var(--ease-c), background .18s var(--ease-c);
}
.pw-eye:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.pw-eye svg { width: 18px; height: 18px; }
.pw-eye.on { color: #B6ECFB; }

/* ---------- 主按钮（沿用首页 CTA 的白色渐变胶囊） ---------- */
.auth-submit {
  width: 100%; height: 52px; margin-top: 6px; padding: 0 20px; cursor: pointer;
  border: 0; border-radius: 999px;
  font: inherit; font-size: 15px; font-weight: 600; letter-spacing: .01em; color: #0B0D10;
  background: linear-gradient(180deg, #FFFFFF 0%, #E3EAF3 100%);
  box-shadow: 0 12px 34px rgba(140, 200, 255, .2), inset 0 1px 0 rgba(255, 255, 255, .75);
  transition: transform .22s var(--ease-c), box-shadow .22s var(--ease-c), filter .22s var(--ease-c), opacity .22s var(--ease-c);
}
.auth-submit:hover:not(:disabled) {
  filter: brightness(1.05); transform: translateY(-1px);
  box-shadow: 0 16px 42px rgba(140, 200, 255, .32), inset 0 1px 0 rgba(255, 255, 255, .8);
}
.auth-submit:active:not(:disabled) { transform: translateY(0); }
.auth-submit:disabled { cursor: progress; opacity: .68; transform: none; }
.spin {
  display: inline-block; width: 13px; height: 13px; margin-right: 9px; vertical-align: -2px;
  border: 2px solid rgba(11, 13, 16, .25); border-top-color: #0B0D10; border-radius: 50%;
  animation: authSpin .7s linear infinite;
}
@keyframes authSpin { to { transform: rotate(360deg); } }

/* ---------- 提示信息：单独一行 + 圆点，不挤在一起 ---------- */
.auth-msg {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 15px 2px 0; font-size: 13px; line-height: 1.65; color: var(--err);
}
.auth-msg:empty { display: none; }
.auth-msg::before {
  content: ''; flex: 0 0 auto; width: 6px; height: 6px; margin-top: 7px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 9px currentColor;
}
.auth-msg.ok { color: var(--ok); }

/* ---------- 切换入口：做成看得见的按钮 ---------- */
.auth-switch {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .07);
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px;
  font-size: 13.5px; color: rgba(255, 255, 255, .6);
}
.auth-switch a {
  display: inline-flex; align-items: center; padding: 8px 17px; border-radius: 999px;
  font-weight: 600; font-size: 13.5px; text-decoration: none; cursor: pointer;
  color: #CBF1FD; border: 1px solid rgba(34, 199, 232, .42); background: rgba(34, 199, 232, .13);
  transition: color .2s var(--ease-c), background .2s var(--ease-c), border-color .2s var(--ease-c);
}
.auth-switch a:hover { color: #fff; background: rgba(34, 199, 232, .24); border-color: rgba(34, 199, 232, .72); }
.auth-switch a:focus-visible { outline: 2px solid rgba(34, 199, 232, .7); outline-offset: 3px; }
.auth-switch a.off { color: rgba(255, 255, 255, .62); background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .14); }

/* 注册关闭时的提示（切换本身照常可用，只是提交会被后端拒绝） */
.auth-closed { margin: 12px 0 0; text-align: center; font-size: 12.5px; line-height: 1.6; color: var(--warn); }
.auth-closed[hidden] { display: none; }

/* ---------- 卡底：信任提示 + 返回入口 ---------- */
.auth-foot {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .07);
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
}
.ft-trust { font-size: 12px; line-height: 1.7; color: rgba(255, 255, 255, .4); }
.ft-links { font-size: 12.5px; color: rgba(255, 255, 255, .32); }
.ft-links a { color: rgba(255, 255, 255, .52); text-decoration: none; transition: color .2s var(--ease-c); }
.ft-links a:hover { color: #fff; }
.ft-links i { font-style: normal; margin: 0 7px; opacity: .5; }

/* ---------- 响应式：改成上下结构，星河收掉，只留轻背景 ---------- */
/* home.css 在 ≤1100px 把所有导航项都藏了（那是首页的策略）；本页 620~1100 仍显示，保证价格 / 文档入口可见 */
@media (max-width: 1100px) {
  body.auth-page .land-nav { gap: 20px; font-size: 13.5px; }
  body.auth-page .land-nav a { display: inline-block; }
}
@media (max-width: 620px) {
  body.auth-page .land-nav { display: none; }
}
@media (max-width: 1000px) {
  .auth { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .auth-hero-in { max-width: 640px; margin-inline: auto; text-align: center; }
  .auth-points { justify-items: center; }
  .auth-points li { max-width: 440px; text-align: left; }
  .auth-panel { justify-content: center; }
}
/* 屏幕不高的时候（常见笔记本 720p）把上下留白收一点，保证表单不被顶到折叠处以下 */
@media (max-height: 760px) and (min-width: 1001px) {
  .auth { padding-top: calc(var(--nav-h) + 18px); padding-bottom: 26px; }
}
@media (max-width: 900px) {
  .auth { padding-top: calc(var(--nav-h) + 26px); gap: 24px; }
  .auth-stars { display: none; }                 /* 移动端只保留轻背景 */
  .auth-points { display: none; }                /* 顶部只留 Logo 和一句介绍 */
  .auth-h1 { font-size: clamp(27px, 7.2vw, 36px); }
  .auth-sub { margin-top: 12px; font-size: 15px; }
  .auth-card { max-width: 520px; padding: 26px 22px 18px; border-radius: 20px; }
  .auth-card input, .auth-submit { height: 52px; }   /* 输入框、按钮 100% 宽且更大更好点 */
  .auth-head h2 { font-size: 22px; }
}
@media (max-width: 420px) {
  .auth-card { padding: 24px 18px 16px; }
  .auth-switch { justify-content: space-between; }
}

/* ---------- 动效减弱 ---------- */
@media (prefers-reduced-motion: reduce) {
  .auth-card, .auth-hero-in > * { animation: none; }
  .auth-swap { transition: none; }
  .spin { animation-duration: 2.4s; }
  .auth-submit:hover:not(:disabled) { transform: none; }
}

.login-methods{display:flex;gap:6px;padding:4px;border:1px solid #ffffff20;border-radius:10px;margin-bottom:22px}.login-methods[hidden],.field-line[hidden]{display:none}.login-methods button{flex:1;padding:10px 6px;border:0;border-radius:7px;background:transparent;color:#9daab7;font:inherit;font-size:12px;line-height:1.3}.login-methods button.on{background:#ffffff16;color:#fff}.code-row{display:flex;gap:10px}.code-row input{min-width:0;flex:1;width:0}.code-row button{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;padding:0 14px;border:1px solid #22c7e855;border-radius:10px;background:#22c7e811;color:#d7f5ff;font:inherit;font-size:12px;line-height:1.2}.code-row button:disabled{opacity:.55}.auth-card{max-height:calc(100vh - 100px);overflow-y:auto}