/* ===== 登录页:实底卡片 + 粒子动态背景 ===== */

.login-bg {
  position: relative; min-height: 100vh; overflow: hidden;
  display: grid; place-items: center; padding: 20px;
  background: #0d1220;
  background-image:
    radial-gradient(ellipse 90% 60% at 70% -10%, #1c2a52 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 10% 110%, #17224a 0%, transparent 55%);
}

/* 粒子画布 */
#particles {
  position: fixed; inset: 0; z-index: 1;
}

/* 扫描光带(缓慢横移) */
.scan-line {
  position: fixed; z-index: 1; top: -50%; left: 0; width: 100%; height: 200%;
  background: linear-gradient(100deg, transparent 42%, rgba(90, 130, 255, .05) 50%, transparent 58%);
  animation: scan 9s linear infinite; pointer-events: none;
}
@keyframes scan {
  from { transform: translateX(-60%); }
  to   { transform: translateX(60%); }
}

/* --- 登录卡片:实底 + 入场 --- */
.login-card {
  position: relative; z-index: 2;
  width: min(380px, 94vw);
  background: #151c30;
  border: 1px solid #2a3554;
  border-top: 3px solid #3b6ef5;
  border-radius: 16px; padding: 36px 34px 26px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  animation: cardIn .7s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(36px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.login-card.shake { animation: shake .45s ease; }
@keyframes shake {
  20% { transform: translateX(-9px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(4px); }
}

/* Logo:呼吸光晕 + 微旋转 */
.login-logo {
  width: 56px; height: 56px; border-radius: 15px; margin: 0 auto 16px;
  background: linear-gradient(135deg, #3b6ef5, #7a4df0);
  color: #fff; font-weight: 800; font-size: 26px;
  display: grid; place-items: center;
  animation: logoGlow 3s ease-in-out infinite;
}
@keyframes logoGlow {
  0%, 100% { box-shadow: 0 0 16px rgba(59, 110, 245, .5); transform: rotate(0deg); }
  50%      { box-shadow: 0 0 32px rgba(122, 77, 240, .8); transform: rotate(-5deg); }
}

.login-card h1 {
  text-align: center; color: #fff; font-size: 20px; margin-bottom: 6px; letter-spacing: 1px;
}
.grad-text {
  background: linear-gradient(90deg, #6ea0ff, #a88bff, #6ea0ff);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: gradFlow 4s linear infinite;
}
@keyframes gradFlow { to { background-position: 200% center; } }

.login-sub {
  text-align: center; color: #8f9ab5; font-size: 13px;
  min-height: 20px; margin-bottom: 14px;
}
.typer-cursor { animation: blink 1s steps(1) infinite; color: #6ea0ff; }
@keyframes blink { 50% { opacity: 0; } }

/* 输入框:实底 + 聚焦光效 */
.field { position: relative; margin-bottom: 14px; }
.field-icon {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; fill: #8f9ab5; transition: fill .2s; pointer-events: none;
}
.field input {
  width: 100%; padding: 12px 14px 12px 42px;
  background: #0f1526;
  border: 1px solid #2a3554;
  border-radius: 11px; color: #fff; font-size: 14px; outline: none;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.field input::placeholder { color: #5d6780; }
.field input:focus {
  border-color: #5b8bff; background: #121a30;
  box-shadow: 0 0 0 4px rgba(91, 139, 255, .16);
}
.field:has(input:focus) .field-icon { fill: #6ea0ff; }

/* 登录按钮:渐变流动 + 悬浮 */
.btn-login {
  width: 100%; margin-top: 8px; padding: 13px; border: none; border-radius: 11px;
  font-size: 15px; font-weight: 600; color: #fff; cursor: pointer; letter-spacing: 6px;
  background: linear-gradient(90deg, #3b6ef5, #6a4df0, #3b6ef5);
  background-size: 200% auto;
  transition: background-position .4s, transform .2s, box-shadow .2s;
}
.btn-login:hover {
  background-position: right center;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(74, 93, 240, .45);
}
.btn-login:active { transform: translateY(0); }

/* 提交中 spinner */
.btn-login .btn-spinner {
  display: none; width: 16px; height: 16px; margin-left: 8px; vertical-align: -3px;
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff;
  border-radius: 50%; animation: spin .7s linear infinite;
}
.btn-login.loading { pointer-events: none; opacity: .85; }
.btn-login.loading .btn-spinner { display: inline-block; }
.btn-login.loading .btn-text::after { content: "中…"; letter-spacing: 2px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 提示条滑入 */
.login-card .flash {
  margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; font-size: 13px;
  animation: dropIn .4s cubic-bezier(.22, 1, .36, 1) both;
}
.flash-err { background: rgba(214, 69, 69, .16); color: #ff9d9d;
             border: 1px solid rgba(214, 69, 69, .4); }
.flash-ok  { background: rgba(31, 168, 96, .16); color: #7fe0ac;
             border: 1px solid rgba(31, 168, 96, .4); }
@keyframes dropIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.login-foot { margin-top: 22px; text-align: center; color: #5d6780; font-size: 11px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; }
}