/* ===== 全局重置 ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%}

/* ===== 登录页容器 — 深空渐变 ===== */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: linear-gradient(160deg, #0a0f1a 0%, #0d1525 30%, #111d35 55%, #0f172a 100%);
  position: relative;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
}
/* 动态光晕 */
.login-page::before {
  content: '';
  position: absolute;
  top: -30%;
  left: -15%;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(99,102,241,.1) 0%, rgba(129,140,248,.05) 30%, transparent 65%);
  animation: glowDrift 12s ease-in-out infinite alternate;
  pointer-events: none;
}
.login-page::after {
  content: '';
  position: absolute;
  bottom: -25%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(34,197,94,.06) 0%, transparent 60%);
  animation: glowDrift 10s ease-in-out infinite alternate-reverse;
  pointer-events: none;
}
@keyframes glowDrift {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(60px, -40px) scale(1.15); }
}
/* 网格纹理 */
.login-page .grid-texture {
  position: absolute; inset: 0;
  background-image: 
    linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

/* ===== 登录卡片 ===== */
.login-card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 400px;
  animation: cardEnter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes cardEnter {
  from { opacity: 0; transform: translateY(30px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.login-card-inner {
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 24px;
  padding: 2.5rem 2rem;
  box-shadow: 
    0 8px 48px rgba(0,0,0,.3),
    0 2px 8px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(255,255,255,.05);
}

/* ===== 品牌区 ===== */
.login-brand {
  text-align: center;
  margin-bottom: 2rem;
}
.login-brand .logo-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  border-radius: 16px;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #fff;
  box-shadow: 0 8px 20px rgba(99,102,241,.25);
}
.login-brand h1 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  background: linear-gradient(135deg, #e2e8f0 60%, #a5b4fc 85%, #6ee7b7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 4px;
}
.login-brand p {
  font-size: 13px;
  color: rgba(255,255,255,.35);
  letter-spacing: .015em;
  margin: 0;
}

/* ===== 表单 ===== */
.login-form { display: flex; flex-direction: column; gap: 6px; }
.login-field {
  position: relative;
  margin-bottom: 4px;
}
.login-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.5);
  letter-spacing: .02em;
  margin-bottom: 6px;
}
.login-field .input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(255,255,255,.04);
  border: 1.5px solid rgba(255,255,255,.07);
  border-radius: 14px;
  transition: all .3s cubic-bezier(.4,0,.2,1);
}
.login-field .input-wrap:focus-within {
  border-color: rgba(99,102,241,.35);
  background: rgba(99,102,241,.05);
  box-shadow: 0 0 0 4px rgba(99,102,241,.08);
}
.login-field .input-icon {
  padding: 0 0 0 14px;
  font-size: 16px;
  flex-shrink: 0;
  opacity: .35;
}
.login-field input {
  width: 100%;
  padding: 14px 14px 14px 10px;
  background: transparent;
  border: none;
  outline: none;
  font-size: 16px!important;
  font-family: inherit;
  color: #fff;
  letter-spacing: .01em;
}
.login-field input::placeholder {
  color: rgba(255,255,255,.18);
}

/* ===== 选项行 ===== */
.login-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 12px 0 16px;
}
.login-remember {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: rgba(255,255,255,.45);
  cursor: pointer;
  user-select: none;
}
.login-remember input[type="checkbox"] {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.05);
  accent-color: #6366f1;
  cursor: pointer;
}
.login-forgot {
  font-size: 13px;
  color: rgba(255,255,255,.35);
  text-decoration: none;
  transition: color .2s;
}
.login-forgot:hover { color: #818cf8; }

/* ===== 提交按钮 ===== */
.login-submit {
  width: 100%;
  padding: 15px;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: all .3s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 4px 20px rgba(99,102,241,.25);
  letter-spacing: .01em;
  position: relative;
  overflow: hidden;
}
.login-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(99,102,241,.35);
}
.login-submit:active {
  transform: translateY(0) scale(.98);
}
.login-submit::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,.08) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform .6s;
}
.login-submit:hover::after {
  transform: translateX(100%);
}
.login-submit:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none!important;
}

/* ===== 错误提示 ===== */
.login-error {
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.15);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 13px;
  color: #fca5a5;
  display: flex;
  align-items: center;
  gap: 6px;
  animation: shake .4s cubic-bezier(.36,.07,.19,.97);
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

/* ===== 底部链接 ===== */
.login-footer {
  margin-top: 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.login-footer a {
  font-size: 13px;
  color: rgba(255,255,255,.28);
  text-decoration: none;
  transition: all .2s;
  padding: 6px 14px;
  border-radius: 100px;
  display: inline-block;
}
.login-footer a:hover {
  color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.04);
}
.login-footer .register-link {
  color: #818cf8;
  font-weight: 600;
  border: 1px solid rgba(129,140,248,.12);
  padding: 8px 20px;
  margin-top: 4px;
}
.login-footer .register-link:hover {
  background: rgba(129,140,248,.06);
  border-color: rgba(129,140,248,.25);
  color: #a5b4fc;
}
.login-footer .home-link {
  color: rgba(255,255,255,.22);
  font-size: 12px;
}

/* ===== 分隔线 ===== */
.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: rgba(255,255,255,.12);
  font-size: 11px;
}
.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
}

/* ===== 社交登录占位 ===== */
.login-social {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.login-social-btn {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.05);
  background: rgba(255,255,255,.03);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  transition: all .2s;
  text-decoration: none;
}
.login-social-btn:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.12);
  transform: translateY(-2px);
}

/* ===== Loading状态 ===== */
.login-loading {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 12px;
}
.login-loading.show { display: flex; }
.login-loading span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  animation: dotBounce 1.2s ease-in-out infinite;
}
.login-loading span:nth-child(2) { animation-delay: .15s; }
.login-loading span:nth-child(3) { animation-delay: .3s; }
@keyframes dotBounce {
  0%, 80%, 100% { transform: scale(.6); opacity: .3; }
  40% { transform: scale(1); opacity: .8; }
}

/* ===== 手机响应式 ===== */
@media(max-width:480px) {
  .login-page { padding: 12px; align-items: flex-start; padding-top: 8vh; }
  .login-card-inner { padding: 1.75rem 1.5rem; border-radius: 20px; }
  .login-brand { margin-bottom: 1.5rem; }
  .login-brand .logo-icon { width: 48px; height: 48px; font-size: 22px; border-radius: 14px; }
  .login-brand h1 { font-size: 19px; }
  .login-field input { padding: 12px 12px 12px 8px; font-size: 16px!important; }
  .login-submit { padding: 14px; font-size: 15px; }
  .login-footer .register-link { width: 100%; }
  .login-social { gap: 6px; }
  .login-social-btn { width: 40px; height: 40px; font-size: 16px; }
}
/* 超小屏（390px/375px 强化） */
@media(max-width:390px) {
  .login-page { padding: 8px; padding-top: 4vh; }
  .login-card-inner { padding: 1.25rem 1.1rem; border-radius: 16px; }
  .login-brand .logo-icon { width: 42px; height: 42px; font-size: 18px; border-radius: 12px; }
  .login-brand h1 { font-size: 17px; }
  .login-brand p { font-size: 11px; }
  .login-field label { font-size: 11px; }
  .login-field input { padding: 11px 10px; font-size: 15px!important; }
  .login-submit { padding: 12px; font-size: 14px; border-radius: 12px; }
  .login-options { flex-direction: column; gap: 8px; align-items: flex-start; }
  .login-footer { margin-top: 18px; gap: 6px; }
  .login-footer .register-link { padding: 7px 14px; font-size: 12px; }
  .login-footer .home-link { font-size: 11px; }
  .login-error { font-size: 12px; padding: 8px 12px; }
}

/* ===== 深色模式反适配（已是深色） ===== */
[data-theme="dark"] .login-page { background: linear-gradient(160deg, #050a14, #0a1220); }
@media(min-width:1024px){
  .login-card { max-width:480px !important; }
  .login-card-inner { padding:3.5rem 3rem !important; border-radius:24px !important; }
}