/*
 * 登录/注册页样式（auth.css）
 * 适用页面：/login（body 加 class="page-login"）、/register（body 加 class="page-register"）
 * 内容：认证卡片、logo、输入框、渐变按钮、页脚提示
 * 说明：白色科技风，白色毛玻璃卡片 + 浅灰边框 + 蓝色渐变强调。
 */
body {
  background-image:
    radial-gradient(ellipse 55% 45% at 80% 0%, rgba(59,130,246,.12) 0%, transparent 60%),
    radial-gradient(ellipse 45% 40% at 10% 100%, rgba(124,58,237,.1) 0%, transparent 60%);
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(59,130,246,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,130,246,.05) 1px, transparent 1px);
  background-size: 44px 44px;
}
.page { min-height: 100vh; display: flex; flex-direction: column; }
.auth-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 48px 24px; }

.auth-card {
  position: relative;
  background: #fff;
  border: 1px solid rgba(100,116,139,.16);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(15,23,42,.1);
}
body.page-login .auth-card { width: 400px; padding: 40px 38px 30px; }
body.page-register .auth-card { width: 430px; padding: 38px 38px 28px; }

.auth-card::before {
  content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(59,130,246,.7), rgba(34,211,238,.7), transparent);
}
.auth-logo { text-align: center; margin-bottom: 28px; }
body.page-register .auth-logo { margin-bottom: 24px; }
.auth-logo .logo-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 15px; font-size: 28px; color: #fff;
  background: linear-gradient(135deg, #3b82f6, #22d3ee);
  box-shadow: 0 8px 24px rgba(59,130,246,.4); margin-bottom: 14px;
}
.auth-logo .title {
  font-size: 23px; font-weight: 700;
  background: linear-gradient(90deg, #3b82f6, #0ea5e9);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.auth-logo .sub { font-size: 13px; color: #64748b; margin-top: 8px; }

.layui-input {
  height: 44px; border-radius: 10px; font-size: 14px;
  background: #f8fafc; border: 1px solid rgba(100,116,139,.2);
  color: #1e293b; padding-left: 14px;
}
body.page-register .layui-input { height: 42px; }
.layui-input::placeholder { color: #94a3b8; }
.layui-input:focus { border-color: rgba(59,130,246,.55) !important; box-shadow: 0 0 0 4px rgba(59,130,246,.12) !important; }

.auth-btn {
  width: 100%; height: 46px; border: none; border-radius: 10px; cursor: pointer;
  color: #fff; font-size: 16px; font-weight: 600; letter-spacing: 4px;
  background: linear-gradient(135deg, #3b82f6, #22d3ee);
  box-shadow: 0 6px 20px rgba(59,130,246,.35);
}
.auth-btn:hover { opacity: .92; }

.auth-footer { text-align: center; margin-top: 22px; font-size: 13px; color: #94a3b8; }
body.page-register .auth-footer { margin-top: 20px; }
.auth-footer a { color: #2563eb; }
.auth-footer a:hover { color: #3b82f6; }