/* ============================================================================
   登录页 · Forming AI 深色科技风 + 鼠标追随鱼眼
   ────────────────────────────────────────────────────────────────────────────
   2026-09-14 创始人定「风格、logo 完全对齐 GEO-fresh」：本文件逐条移植自
   GEO-fresh/app/src/login.css（只删了没搬的短信 / 注册 / 找回那几块的样式，
   多了 .auth-help 与 .auth-msg.notice 两处我们自己的）。与内部页样式解耦，改登录只动本文件 + login-screen.ts。
   全部令牌在 .auth-stage 上局部定义，不依赖 app.css 的主题令牌（登录页不跟深浅色主题走，恒为深色）。
   ============================================================================ */

.auth-stage {
  /* 局部 token：Forming AI 品牌（深空蓝 + 蓝绿双色） */
  --vi-blue: #3C7FFF;
  --vi-teal: #33D6C0;
  --vi-mint: #BFFFEF;
  --vi-ink: #eaf3ff;
  --vi-mut: #8ea6c8;
  --vi-faint: #5f7599;
  --vi-line: rgba(140,180,255,.14);
  --vi-teal-soft: color-mix(in srgb, var(--vi-teal) 14%, transparent);
  --auth-r: 13px;
  --auth-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --auth-mono: "SF Mono", "JetBrains Mono", "Roboto Mono", ui-monospace, Menlo, Consolas, monospace;
  position: relative; min-height: 100vh; overflow: hidden;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: radial-gradient(125% 95% at 50% 18%, #0d1836 0%, #080d1c 52%, #03060c 100%);
  color: var(--vi-ink);
  color-scheme: dark;
  font-family: -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
.auth-stage :focus-visible { outline: 2px solid var(--vi-teal); outline-offset: 2px; }

/* 极光光晕 + 网格 + 扫描线 */
.auth-aurora { position: absolute; inset: 0; pointer-events: none; filter: blur(68px); }
.auth-aurora .ab { position: absolute; border-radius: 50%; opacity: .5; animation: authDrift 24s var(--auth-ease) infinite alternate; }
.auth-aurora .a1 { width: 46vw; height: 46vw; left: -8%; top: -18%; background: radial-gradient(circle, rgba(60,127,255,.55), transparent 70%); }
.auth-aurora .a2 { width: 40vw; height: 40vw; right: -6%; top: 4%; background: radial-gradient(circle, rgba(51,214,192,.42), transparent 70%); animation-delay: -8s; }
.auth-aurora .a3 { width: 44vw; height: 44vw; left: 26%; bottom: -22%; background: radial-gradient(circle, rgba(56,189,248,.34), transparent 70%); animation-delay: -14s; }
@keyframes authDrift { from { transform: translate(0,0) scale(1); } to { transform: translate(5%,-4%) scale(1.16); } }
.auth-grid { position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(120,170,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(120,170,255,.08) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(80% 62% at 50% 38%, #000 0%, transparent 78%);
  mask-image: radial-gradient(80% 62% at 50% 38%, #000 0%, transparent 78%); }
.auth-scan { position: absolute; left: 0; right: 0; height: 1.5px; pointer-events: none; opacity: .5;
  background: linear-gradient(90deg, transparent, rgba(60,127,255,.6) 30%, rgba(51,214,192,.6) 70%, transparent);
  filter: blur(.4px); animation: authScan 8s linear infinite; }
@keyframes authScan { 0% { top: -4%; opacity: 0; } 12% { opacity: .5; } 88% { opacity: .5; } 100% { top: 104%; opacity: 0; } }

/* 外壳：鱼眼 hero + 登录卡 */
.auth-shell { position: relative; z-index: 1; width: 100%; max-width: 392px;
  display: flex; flex-direction: column; align-items: center; }

/* ── 鼠标追随鱼眼 ── */
.auth-hero { display: flex; flex-direction: column; align-items: center; margin-bottom: 22px;
  animation: authIn .6s var(--auth-ease) both; }
.vision-eye { width: clamp(196px, 26vw, 244px); height: auto; overflow: visible;
  filter: drop-shadow(0 0 22px rgba(60,127,255,.35)) drop-shadow(0 0 8px rgba(51,214,192,.25)); }
.ve-body { stroke-dasharray: 1; stroke-dashoffset: 1; animation: veDraw 1.9s var(--auth-ease) .15s forwards; }
.ve-lash { stroke-dasharray: 1; stroke-dashoffset: 1; animation: veDraw 1.3s var(--auth-ease) .7s forwards; }
@keyframes veDraw { to { stroke-dashoffset: 0; } }
.ve-node { transform-box: fill-box; transform-origin: center; animation: veBeat 2.8s ease-in-out infinite; }
.ve-node.n2 { animation-delay: -1.4s; }
@keyframes veBeat { 0%,100% { opacity: .85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.28); } }
.ve-spark { animation: veTwinkle 3.4s ease-in-out infinite; }
@keyframes veTwinkle { 0%,100% { opacity: .5; } 50% { opacity: 1; } }

/* ── 反应：受惊(错登) / 成功(进场) ── */
.ve-shake, .ve-pupil-core, .ve-alarm, .ve-ring { transform-box: fill-box; transform-origin: center; }
.vision-eye.shock .ve-shake { animation: veStartle .55s var(--auth-ease); }
.vision-eye.shock .ve-pupil-core { animation: vePupilDrop 1.75s var(--auth-ease); }
.vision-eye.shock .ve-alarm { animation: veAlarm .9s ease-out; }
@keyframes veAlarm { 0% { opacity: .9; } 100% { opacity: 0; } }
@keyframes veStartle { 0% { transform: translateY(0); } 12% { transform: translateY(-4px) scale(1.05); } 32% { transform: translateY(1px); } 100% { transform: translateY(0); } }
@keyframes vePupilDrop {
  0%   { transform: translate(0,0) rotate(0deg) scale(1); }
  7%   { transform: translate(0,-3px) scale(1.06); }
  32%  { transform: translate(2px,22px) rotate(70deg); }
  38%  { transform: translate(2px,23px) rotate(80deg) scale(1.34,.6); }
  46%  { transform: translate(0,12px) rotate(120deg) scale(.9,1.12); }
  54%  { transform: translate(1px,23px) rotate(150deg) scale(1.2,.78); }
  60%  { transform: translate(1px,23px) rotate(170deg) scale(1); }
  72%  { transform: translate(1px,23px) rotate(180deg); }
  87%  { transform: translate(-1px,-4px) rotate(350deg) scale(1.08); }
  100% { transform: translate(0,0) rotate(360deg) scale(1); }
}
.vision-eye.success .ve-shake { animation: veJoyPulse .9s var(--auth-ease); }
.vision-eye.success .ve-pupil-core { animation: vePupilJoy .9s var(--auth-ease) forwards; }
.vision-eye.success .ve-ring { animation: veRing .9s ease-out forwards; }
@keyframes veJoyPulse { 0% { transform: scale(1); } 35% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes vePupilJoy { 0% { transform: scale(1); } 40% { transform: scale(1.36); } 100% { transform: scale(1.14); } }
@keyframes veRing { 0% { opacity: .9; transform: scale(.5); } 100% { opacity: 0; transform: scale(2.5); } }

.auth-word { margin-top: 16px; text-align: center; }
.auth-word b { display: block; font-size: 25px; font-weight: 800; letter-spacing: .2px;
  background: linear-gradient(96deg, #d7f8ff 0%, #6fb4ff 45%, #33d6c0 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 26px rgba(60,127,255,.3); }
.auth-word span { display: block; margin-top: 5px; font-size: 12px; letter-spacing: .3px; color: var(--vi-mut); }
.auth-word small { display: block; margin-top: 6px; font-size: 10px; font-weight: 500; letter-spacing: .45px; color: color-mix(in srgb, var(--vi-mut) 72%, transparent); }

/* ── 登录卡（暗色玻璃） ── */
.auth-card { position: relative; width: 100%; padding: 26px 28px 20px;
  background: linear-gradient(180deg, rgba(20,28,50,.66), rgba(12,18,34,.6));
  -webkit-backdrop-filter: blur(22px) saturate(1.25); backdrop-filter: blur(22px) saturate(1.25);
  border: 1px solid var(--vi-line); border-radius: 20px;
  box-shadow: 0 1px 0 rgba(180,210,255,.1) inset, 0 26px 70px rgba(2,6,14,.6), 0 0 44px rgba(60,127,255,.08);
  animation: authIn .6s var(--auth-ease) .08s both; }
@keyframes authIn { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }
.auth-card.shake { animation: cardShake .5s var(--auth-ease); }
@keyframes cardShake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(4px); } }

/* ===== 成功进场 · 锁定扫描 SCAN-LOCK：锁定 → 扫描成像 → 进入（≈2.2s）===== */
.auth-shell.scanning { animation: slShell 2.2s cubic-bezier(.5,0,.2,1) forwards; pointer-events: none; }
@keyframes slShell {
  0%,20% { opacity: 1; clip-path: inset(0 0 0 0); filter: blur(0); }
  70% { opacity: .5; filter: blur(1px); }
  82% { opacity: 0; clip-path: inset(100% 0 0 0); filter: blur(4px); }
  100% { opacity: 0; clip-path: inset(100% 0 0 0); }
}
.auth-stage.entering .auth-grid { animation: slGrid 2.2s ease-out forwards; }
@keyframes slGrid { 0%,22% { opacity: .5; } 52% { opacity: 1; } 100% { opacity: .5; } }
.auth-stage.entering .auth-scan { opacity: 0 !important; }

.sl-hud { position: fixed; inset: 0; z-index: 6; width: 100%; height: 100%; pointer-events: none; }
.sl-hud g { transform-box: view-box; transform-origin: center; animation: slBrk .55s cubic-bezier(.5,0,.2,1) forwards; }
@keyframes slBrk { 0% { opacity: 0; transform: scale(1.9); } 45% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } }

.sl-beam { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 7; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, #3c7fff 24%, #bfffef 50%, #33d6c0 76%, transparent);
  box-shadow: 0 0 22px #33d6c0, 0 0 52px #3c7fff, 0 0 90px rgba(60,127,255,.5);
  animation: slBeam 2.2s cubic-bezier(.5,0,.2,1) forwards; }
@keyframes slBeam { 0%,20% { top: -2%; opacity: 0; } 26% { opacity: 1; } 80% { opacity: 1; } 92% { top: 102%; opacity: 0; } 100% { opacity: 0; } }

.sl-slogan { position: fixed; left: 0; right: 0; top: 50%; z-index: 8; text-align: center; pointer-events: none;
  transform: translateY(-50%); animation: slSlogan 2.2s ease-out forwards; opacity: 0; }
.sl-slogan b { display: block; font-size: clamp(32px,6vw,50px); font-weight: 800; letter-spacing: .22em; text-indent: .22em;
  background: linear-gradient(96deg,#d7f8ff,#6fb4ff 46%,var(--vi-teal)); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 34px rgba(60,127,255,.45); }
.sl-slogan span { display: block; margin-top: 11px; font-family: var(--auth-mono); font-size: 13px; letter-spacing: .3em; text-indent: .3em; color: var(--vi-mut); }
@keyframes slSlogan { 0%,30% { opacity: 0; transform: translateY(calc(-50% + 12px)); } 46% { opacity: 1; transform: translateY(-50%); } 78% { opacity: 1; transform: translateY(-50%); } 92% { opacity: 0; transform: translateY(-50%); } 100% { opacity: 0; } }

.sl-flash { position: fixed; inset: 0; z-index: 9; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 44%, rgba(215,248,255,.95), rgba(60,127,255,.4) 44%, transparent 72%);
  animation: slFlash 2.2s ease-out forwards; }
@keyframes slFlash { 0%,78% { opacity: 0; } 90% { opacity: .9; } 100% { opacity: 0; } }

.auth-body { display: flex; flex-direction: column; gap: 11px; }

/* 输入行：渐变底 + 图标分隔线 + 聚焦渐变下划线扫入 */
.auth-field { position: relative; display: flex; align-items: center; gap: 12px; height: 50px; padding: 0 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.022));
  border: 1px solid rgba(140,180,255,.18); border-radius: var(--auth-r); color: var(--vi-mut);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition: border-color .2s var(--auth-ease), box-shadow .2s var(--auth-ease), background .2s var(--auth-ease); }
.auth-field::after { content: ''; position: absolute; left: 13px; right: 13px; bottom: 0; height: 1.5px; border-radius: 2px;
  background: linear-gradient(90deg, var(--vi-blue), var(--vi-teal)); transform: scaleX(0); transform-origin: left;
  opacity: .9; transition: transform .28s var(--auth-ease); }
.auth-field:focus-within { border-color: rgba(51,214,192,.55);
  background: linear-gradient(180deg, rgba(51,214,192,.09), rgba(51,214,192,.03));
  box-shadow: 0 0 0 3px var(--vi-teal-soft), 0 0 24px rgba(51,214,192,.2), inset 0 1px 0 rgba(255,255,255,.09); color: var(--vi-teal); }
.auth-field:focus-within::after { transform: scaleX(1); }
.auth-field .auth-ico { flex: none; display: inline-flex; padding-right: 12px; border-right: 1px solid var(--vi-line);
  box-sizing: content-box; transition: color .2s, border-color .2s; }
.auth-field:focus-within .auth-ico { color: var(--vi-teal); border-color: rgba(51,214,192,.4); }
.auth-field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15px; color: var(--vi-ink);
  caret-color: var(--vi-teal); letter-spacing: .2px; }
.auth-field input:focus-visible { outline: 0; }
.auth-field input::placeholder { color: var(--vi-faint); letter-spacing: .3px; }
.auth-field input:-webkit-autofill { -webkit-text-fill-color: var(--vi-ink); transition: background-color 9999s; }

/* 主按钮：蓝→绿渐变，暗字发光 */
.auth-btn { width: 100%; height: 48px; margin-top: 6px; border: 0; border-radius: var(--auth-r); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-size: 15px; font-weight: 800; letter-spacing: 2px; color: #05131f;
  background: linear-gradient(100deg, #3C7FFF 0%, #46c6e0 55%, #33D6C0 100%);
  box-shadow: 0 8px 24px rgba(51,150,220,.4), 0 0 0 1px rgba(180,230,255,.25) inset;
  transition: transform .12s, box-shadow .18s, filter .18s, opacity .18s; }
.auth-btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 12px 30px rgba(51,150,220,.5), 0 0 22px rgba(51,214,192,.3); }
.auth-btn:active:not(:disabled) { transform: translateY(0); }
.auth-btn:disabled { opacity: .45; cursor: default; box-shadow: none; }
.auth-btn-ico { display: inline-flex; color: #05131f; }
.auth-btn.busy .auth-btn-ico { animation: authSpin .8s linear infinite; }
@keyframes authSpin { to { transform: rotate(360deg); } }

/* 反馈 */
.auth-msg { font-size: 12.5px; line-height: 1.5; padding: 8px 11px; border-radius: 9px; }
.auth-msg.err { color: #ffb4ac; background: rgba(255,90,80,.1); border: 1px solid rgba(255,120,110,.28); }
/* 会话中途失效的那一句（㉒）：提醒，不是报错，用青色 */
.auth-msg.notice { color: var(--vi-teal); background: rgba(51,214,192,.1); border: 1px solid rgba(51,214,192,.26); }
/* 忘记口令找谁（我们自己的一句，GEO 那边是「忘记密码 / 注册」两个链接） */
.auth-help { margin: 4px 0 0; font-size: 12px; line-height: 1.65; color: var(--vi-mut); text-align: center; }

.auth-foot { margin-top: 18px; text-align: center; font-size: 10.5px; line-height: 1.55; letter-spacing: .3px; color: var(--vi-faint); }
.auth-foot span { display: block; }

@media (max-width: 440px) {
  .auth-card { padding: 22px 18px 16px; border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-aurora .ab, .auth-card, .auth-hero, .auth-scan, .ve-body, .ve-lash, .ve-node, .ve-spark,
  .auth-card.shake, .vision-eye.shock .ve-shake, .vision-eye.shock .ve-pupil-core,
  .vision-eye.success .ve-shake, .vision-eye.success .ve-pupil-core, .vision-eye.success .ve-ring { animation: none; }
  .ve-body, .ve-lash { stroke-dashoffset: 0; }
  .auth-shell.scanning { animation: none; opacity: 0; }
  .sl-hud g, .sl-beam, .sl-slogan, .sl-flash, .auth-stage.entering .auth-grid { animation: none; }
  .sl-beam, .sl-flash { opacity: 0; }
  .auth-btn { transition: none; }
}