/* ============================================================
   login.css — 登录 / 注册页样式
   布局：左侧品牌展示区 + 右侧表单区（小屏隐藏品牌区）
   ============================================================ */

.login-page { background: var(--bg); overflow: hidden; }

/* 页面除输入框外禁止鼠标复制（输入框保持可编辑可选） */
.login-page { user-select: none; -webkit-user-select: none; }
.login-page input,
.login-page textarea { user-select: text; -webkit-user-select: text; }

/* ---------- 整体布局 ---------- */
/* 视口内禁止滚动：内容不超过屏幕时不显示滚动条也不可滑动；
   仅当内容超出屏幕高度时，在 login-shell 内部纵向滚动 */
.login-shell {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ---------- 品牌展示区 ---------- */
.brand-panel {
  position: relative; overflow: hidden;
  display: flex;
  background: var(--gradient);
  color: #fff;
  padding: 48px clamp(28px, 5vw, 64px);
}

/* 浮动光斑装饰 */
.brand-blob {
  position: absolute; border-radius: 50%; filter: blur(60px);
  opacity: .5; animation: blobFloat 12s ease-in-out infinite;
}
.blob-1 { width: 340px; height: 340px; background: rgba(255, 255, 255, .28); top: -80px; left: -60px; }
.blob-2 { width: 300px; height: 300px; background: rgba(167, 139, 250, .5); bottom: -60px; right: -40px; animation-delay: -4s; }
.blob-3 { width: 200px; height: 200px; background: rgba(255, 255, 255, .18); top: 42%; right: 8%; animation-delay: -8s; }
@keyframes blobFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-24px); }
}

.brand-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  width: 100%; max-width: 460px; margin: 0 auto;
}
.brand-logo { display: inline-flex; align-items: center; gap: 12px; }
/* 品牌区内的徽标使用半透明玻璃质感 */
.brand-panel .logo-badge {
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .25);
  box-shadow: none;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
/* 品牌面板使用透明底 logo：badge 背景透明，融入渐变 */
.brand-panel .logo-badge.brand-logo-img {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.brand-panel .brand-text span { color: #c7d2fe; }

.brand-hero { margin: auto 0; padding: 48px 0; }
.brand-hero h2 {
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.35; font-weight: 700; letter-spacing: .5px;
}
.brand-hero p {
  margin-top: 16px; font-size: 15px; line-height: 1.8;
  color: rgba(255, 255, 255, .85);
}

.brand-features { display: grid; gap: 14px; margin-bottom: 40px; }
.brand-features li {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; color: rgba(255, 255, 255, .92);
}
.brand-features .icon {
  width: 30px; height: 30px; padding: 6px;
  background: rgba(255, 255, 255, .18); border-radius: 8px;
}
.brand-footer { font-size: 12px; color: rgba(255, 255, 255, .6); }

/* ---------- 表单区 ---------- */
.form-panel {
  display: flex; align-items: center; justify-content: center;
  padding: 32px 20px;
}
.form-card { width: min(100%, 420px); animation: cardIn .5s var(--ease) both; }
@keyframes cardIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

.mobile-brand {
  display: none; align-items: center; gap: 10px;
  margin-bottom: 28px; font-size: 18px; font-weight: 700;
}

.form-head h1 { font-size: 28px; font-weight: 700; letter-spacing: .3px; }
.form-head p { margin-top: 6px; color: var(--text-2); font-size: 14px; }

#loginForm { margin-top: 28px; display: grid; gap: 18px; }

.field label {
  display: block; margin-bottom: 6px;
  font-size: 13px; font-weight: 600; color: var(--text-2);
}
.input-wrap { position: relative; }
.input-wrap > .icon {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--text-3); pointer-events: none;
}
.input-wrap .input { padding-left: 40px; padding-right: 44px; }
.input-wrap .input-eye {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-3); border-radius: 8px; transition: color .15s;
}
.input-wrap .input-eye:hover { color: var(--primary); }
.input-wrap .input-eye.active { color: var(--primary); }

/* ---------- 输入框美化 ---------- */
.form-card .input-wrap .input {
  height: 46px; padding-left: 40px; padding-right: 44px;
  background: var(--surface);
}
.form-card .input-wrap .input:hover {
  border-color: var(--border-strong);
}
.form-card .input-wrap .input:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, .14), 0 4px 14px rgba(79, 70, 229, .08);
}

/* 字段级错误状态（仅红框提示，文案走消息弹窗） */
.field-error .input {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .12) !important;
}

/* ---------- 响应式 ---------- */
@media (max-width: 920px) {
  .login-shell { grid-template-columns: 1fr; }
  .brand-panel { display: none; }
  .mobile-brand { display: inline-flex; }
  .form-panel { min-height: 100vh; }
}
@media (max-width: 480px) {
  .form-panel { padding: 24px 16px; }
  .form-head h1 { font-size: 24px; }
}