/**
 * auth-v2.css — 新版认证页样式（左右双面板品牌页）
 *
 * 归属：任务 #50（认证页重做）独占
 * 引入方式：由任务 #49 在 views/layouts/base.php <head> 内注册 <link>
 *
 * 分区：1. 浅色模式 → 2. 深色模式 [data-theme="dark"] → 3. 响应式
 * 色值全部 var(--lh-*) token，主色 #ff3f9f / 深色 #ff6bb5，严禁紫 250°-310°
 */

/* =================================================================
   1. 浅色模式（默认）
   ================================================================= */

/* --- 覆盖 front-auth-wrap：flex 居中认证卡 --- */
.front-auth-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 14rem);
  padding: var(--lh-sp-5) var(--lh-sp-4);
}

/* --- auth-v2：双列 grid 玻璃大卡 --- */
.auth-v2 {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  width: 100%;
  max-width: 960px;
  min-height: 560px;
  border-radius: var(--lh-r-xl);
  overflow: hidden;
  background: var(--lh-bg-elevated);
  border: 1px solid var(--lh-border);
  box-shadow: var(--lh-sh-3);
  animation: auth-v2-enter .5s var(--lh-ease-out) both;
}

/* 覆盖 .lh-glass 默认值（auth-v2 已接管圆角/背景/阴影） */
.auth-v2.lh-glass {
  border-radius: var(--lh-r-xl);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--lh-bg-elevated);
  box-shadow: var(--lh-sh-3);
}

/* --- data-icon 占位（JS 渲染前保留空间） --- */
.auth-v2 [data-icon] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  line-height: 1;
}

/* ==========  左侧品牌面板  ========== */

.auth-v2__brand {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2.5rem;
  background: var(--lh-gradient);
  color: var(--lh-text-inv);
  overflow: hidden;
}

/* 细噪点网格纹理 */
.auth-v2__brand::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 36px 36px;
  pointer-events: none;
  z-index: 0;
}

/* 柔光叠加 */
.auth-v2__brand::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 0%, rgba(255,255,255,.12) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* 模糊光斑 */
.auth-v2__brand-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.auth-v2__brand-orb--1 {
  width: 220px; height: 220px;
  top: -70px; right: -50px;
  background: var(--lh-accent-2);
  opacity: .3;
  filter: blur(60px);
}
.auth-v2__brand-orb--2 {
  width: 180px; height: 180px;
  bottom: -50px; left: -40px;
  background: var(--lh-accent);
  opacity: .22;
  filter: blur(50px);
}
.auth-v2__brand-orb--3 {
  width: 120px; height: 120px;
  top: 45%; left: 55%;
  background: var(--lh-primary);
  opacity: .18;
  filter: blur(40px);
}

/* 品牌内容层 */
.auth-v2__brand-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
}

/* Logo */
.auth-v2__brand-logo { margin-bottom: 2rem; }
.auth-v2__brand-logo img,
.auth-v2__brand-logo svg { display: block; }

/* 品牌大标题 */
.auth-v2__brand-title {
  font-size: var(--lh-fs-3xl);
  font-weight: var(--lh-fw-bold);
  line-height: var(--lh-lh-tight);
  margin-bottom: .625rem;
  color: inherit;
}

/* 品牌副文案 */
.auth-v2__brand-desc {
  font-size: var(--lh-fs-base);
  line-height: var(--lh-lh-base);
  opacity: .85;
  margin-bottom: 1.75rem;
  color: inherit;
}

/* 卖点列表 */
.auth-v2__brand-features {
  display: flex;
  flex-direction: column;
  gap: .625rem;
  margin-bottom: 1.5rem;
}

/* 单条卖点：玻璃细条 */
.auth-v2__brand-feature {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .625rem 1rem;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  border-radius: var(--lh-r-sm);
  border: 1px solid rgba(255,255,255,.13);
  font-size: var(--lh-fs-sm);
  line-height: 1.4;
  color: inherit;
  transition: transform var(--lh-dur-fast), background var(--lh-dur-fast);
}
.auth-v2__brand-feature:hover {
  transform: translateX(4px);
  background: rgba(255,255,255,.16);
}

/* 卖点图标容器 */
.auth-v2__brand-feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  flex-shrink: 0;
  background: rgba(255,255,255,.15);
  border-radius: var(--lh-r-xs);
}

/* 品牌面板底部版权 */
.auth-v2__brand-footer {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding-top: 1.25rem;
  font-size: var(--lh-fs-xs);
  opacity: .55;
  color: inherit;
}

/* ==========  右侧表单面板  ========== */

.auth-v2__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem 2.75rem;
  background: var(--lh-bg-elevated);
  overflow-y: auto;
}

/* 表单头部 */
.auth-v2__head { margin-bottom: 1.75rem; }

.auth-v2__title {
  font-size: 1.75rem;
  font-weight: var(--lh-fw-bold);
  color: var(--lh-text);
  line-height: var(--lh-lh-tight);
  margin-bottom: var(--lh-sp-2);
}

.auth-v2__desc {
  font-size: var(--lh-fs-base);
  color: var(--lh-text-soft);
  line-height: var(--lh-lh-base);
  margin-bottom: 0;
}

/* ==========  表单字段  ========== */

.auth-v2__field { margin-bottom: 1.125rem; }

.auth-v2__field .lh-label {
  display: block;
  font-size: var(--lh-fs-sm);
  font-weight: var(--lh-fw-medium);
  color: var(--lh-text);
  margin-bottom: var(--lh-sp-2);
  transition: color var(--lh-dur) var(--lh-ease);
}

/* focus 态 label 变主色 */
.auth-v2__field--focused .lh-label { color: var(--lh-primary); }

/* 输入框容器 */
.auth-v2__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

/* 图标前缀 */
.auth-v2__input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  color: var(--lh-text-mute);
  pointer-events: none;
  transition: color var(--lh-dur) var(--lh-ease);
  z-index: 1;
}
.auth-v2__field--focused .auth-v2__input-icon { color: var(--lh-primary); }
.auth-v2__field--error  .auth-v2__input-icon { color: var(--lh-danger); }

/* 输入框增强 */
.auth-v2__input-wrap .lh-input {
  height: 46px;
  padding-left: 44px;
  padding-right: var(--lh-sp-3);
  border-radius: var(--lh-r-sm);
  background: var(--lh-surface);
  backdrop-filter: var(--lh-glass-blur);
  -webkit-backdrop-filter: var(--lh-glass-blur);
  border: 1px solid var(--lh-border);
  font-size: var(--lh-fs-base);
  transition: border-color var(--lh-dur) var(--lh-ease),
              box-shadow var(--lh-dur) var(--lh-ease),
              background var(--lh-dur) var(--lh-ease);
}
.auth-v2__input-wrap .lh-input:focus {
  border-color: var(--lh-primary);
  box-shadow: 0 0 0 3px var(--lh-primary-soft);
  background: var(--lh-bg-elevated);
}

/* 密码字段需右侧空间给切换按钮 */
.auth-v2__input-wrap--pw .lh-input { padding-right: 48px; }

/* 字段错误态 */
.auth-v2__field--error .lh-input {
  border-color: var(--lh-danger);
  box-shadow: 0 0 0 3px var(--lh-danger-soft);
}

/* 行内错误提示（12px 红色，字段下方） */
.auth-v2__error {
  display: none;
  font-size: var(--lh-fs-xs);
  color: var(--lh-danger);
  margin-top: var(--lh-sp-1);
  padding-left: var(--lh-sp-1);
}
.auth-v2__field--error .auth-v2__error { display: block; }

/* ==========  密码显示/隐藏按钮  ========== */

.auth-v2__toggle-pw {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: var(--lh-r-xs);
  color: var(--lh-text-mute);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  transition: color var(--lh-dur-fast), background var(--lh-dur-fast);
  z-index: 1;
}
.auth-v2__toggle-pw:hover {
  color: var(--lh-primary);
  background: var(--lh-primary-soft);
}

/* ==========  密码强度条  ========== */

.auth-v2__strength {
  display: none;
  align-items: center;
  gap: var(--lh-sp-2);
  margin-top: var(--lh-sp-2);
}
.auth-v2__strength.is-visible { display: flex; }

.auth-v2__strength-bars {
  display: flex;
  gap: 3px;
  flex: 1;
}
.auth-v2__strength-bar {
  height: 3px;
  flex: 1;
  border-radius: 2px;
  background: var(--lh-border-strong);
  transition: background var(--lh-dur) var(--lh-ease);
}

/* 四档强度着色 */
.auth-v2__strength--1 .auth-v2__strength-bar:nth-child(1) { background: var(--lh-danger); }
.auth-v2__strength--2 .auth-v2__strength-bar:nth-child(-n+2) { background: var(--lh-warning); }
.auth-v2__strength--3 .auth-v2__strength-bar:nth-child(-n+3) { background: var(--lh-success); }
.auth-v2__strength--4 .auth-v2__strength-bar { background: var(--lh-primary); }

.auth-v2__strength-text {
  font-size: var(--lh-fs-xs);
  color: var(--lh-text-mute);
  min-width: 2rem;
  text-align: right;
}

/* ==========  提交按钮增强（scope 覆盖 lh-btn）  ========== */

.auth-v2 .lh-btn--primary.lh-btn--block {
  background: var(--lh-gradient-primary);
  border-radius: var(--lh-r-sm);
  font-weight: var(--lh-fw-semibold);
  font-size: var(--lh-fs-md);
  letter-spacing: .01em;
  border: none;
  margin-top: var(--lh-sp-2);
}
.auth-v2 .lh-btn--primary.lh-btn--block:hover {
  transform: translateY(-2px);
  box-shadow: var(--lh-sh-glow);
}
.auth-v2 .lh-btn--primary.lh-btn--block:active {
  transform: translateY(0);
  box-shadow: none;
}
.auth-v2 .lh-btn--primary.lh-btn--block:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ==========  忘记密码链接区  ========== */

.auth-v2__extras {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--lh-sp-3);
}
.auth-v2__forgot-link {
  font-size: var(--lh-fs-sm);
  color: var(--lh-primary);
  text-decoration: none;
  font-weight: var(--lh-fw-medium);
  transition: color var(--lh-dur) var(--lh-ease);
}
.auth-v2__forgot-link:hover {
  color: var(--lh-primary-hover);
  text-decoration: underline;
}

/* ==========  底部链接  ========== */

.auth-v2__foot {
  margin-top: 1.5rem;
  text-align: center;
}
.auth-v2__foot-link {
  font-size: var(--lh-fs-sm);
  color: var(--lh-text-soft);
}
.auth-v2__foot-link a {
  color: var(--lh-primary);
  text-decoration: none;
  font-weight: var(--lh-fw-medium);
  transition: color var(--lh-dur) var(--lh-ease);
}
.auth-v2__foot-link a:hover {
  color: var(--lh-primary-hover);
  text-decoration: underline;
}

/* ==========  注册关闭提示  ========== */

.auth-v2__closed {
  text-align: center;
  padding: var(--lh-sp-6) 0;
}
.auth-v2__closed p {
  color: var(--lh-text-soft);
  font-size: var(--lh-fs-md);
  line-height: var(--lh-lh-base);
}

/* ==========  动画  ========== */

@keyframes auth-v2-enter {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes auth-v2-shake {
  0%, 100% { transform: translateX(0); }
  12.5%    { transform: translateX(-6px); }
  25%      { transform: translateX(5px); }
  37.5%    { transform: translateX(-4px); }
  50%      { transform: translateX(3px); }
  62.5%    { transform: translateX(-2px); }
  75%      { transform: translateX(1px); }
}
.auth-v2--shake {
  animation: auth-v2-shake .4s ease-in-out;
}


/* =================================================================
   2. 深色模式覆盖 [data-theme="dark"]
   ================================================================= */

/* 主卡底色 */
[data-theme="dark"] .auth-v2,
[data-theme="dark"] .auth-v2.lh-glass {
  background: var(--lh-bg-elevated);
  border-color: var(--lh-border);
}

/* 表单面板 */
[data-theme="dark"] .auth-v2__panel {
  background: var(--lh-bg-elevated);
}

/* 输入框 */
[data-theme="dark"] .auth-v2__input-wrap .lh-input {
  background: var(--lh-surface);
}
[data-theme="dark"] .auth-v2__input-wrap .lh-input:focus {
  background: var(--lh-bg-soft);
}

/* 品牌面板文字保持白色（渐变 bg 由 tokens 自动切换，文字需始终白色） */
[data-theme="dark"] .auth-v2__brand {
  color: #fff;
}


/* =================================================================
   3. 响应式
   ================================================================= */

/* 平板：隐藏左侧面板，右侧全宽 */
@media (max-width: 900px) {
  .auth-v2 {
    grid-template-columns: 1fr;
    max-width: 480px;
    min-height: auto;
  }
  .auth-v2__brand {
    display: none;
  }
  .auth-v2__panel {
    padding: 2.5rem 2rem;
  }
}

/* 小屏：收紧内边距、标题降级 */
@media (max-width: 480px) {
  .front-auth-wrap {
    padding: var(--lh-sp-3) var(--lh-sp-2);
    min-height: calc(100vh - 10rem);
  }
  .auth-v2__panel {
    padding: 2rem 1.5rem;
  }
  .auth-v2__title {
    font-size: var(--lh-fs-2xl);
  }
  .auth-v2 .lh-btn--primary.lh-btn--block {
    height: 44px;
  }
}