/* ============================================================================
   慵懒半径 v2 · login.css（登录页样式）
   ----------------------------------------------------------------------------
   设计要点：
     - 静态 mesh 渐变背景（珊瑚橙/天蓝/紫 三色光斑，不闪烁）
     - 玻璃拟态白卡 + spring 入场（translateY + scale 弹性）
     - 工号输入框 + 品牌渐变登录按钮（辉光阴影）
     - 安全码 6 位独立输入框（自动跳格、删除回退）
     - 首次设码两步确认（防止误设）
     - 响应式：手机端紧凑间距，桌面端居中限宽
   ============================================================================ */

/* ========== 登录页背景 ========== */
.login-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
  overflow: hidden;
  background: var(--bg, #f8fafc);
}
/* 静态 mesh 装饰层（不闪烁，仅丰富层次） */
.login-page::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bg, #f8fafc);
  pointer-events: none;
}
/* 装饰几何线条（极淡，增加质感） */
.login-page::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bg, #f8fafc);
  pointer-events: none;
  mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 80%);
}

/* ========== 登录卡片 ========== */
.login-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 400px;
  min-width: 0;               /* flex item 可收缩，避免窄屏输入框撑破卡片 */
  background: #fff;
  border-radius: var(--r-xl);
  padding: 40px 32px 32px;
  box-shadow: var(--elev-4);
  animation: login-enter 600ms var(--ease-spring) both;
}
@keyframes login-enter {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* 品牌徽标（浮动动画） */
.login-logo {
  width: 72px; height: 72px;
  margin: 0 auto 20px;
  border-radius: 22px;
  background: var(--brand);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--elev-brand);
  color: #fff;
  animation: logo-float 3.5s ease-in-out infinite;
}
@keyframes logo-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.login-logo svg { width: 36px; height: 36px; }
.login-logo .iconfont { font-size: 36px; line-height: 1; }

.login-title {
  text-align: center;
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
  letter-spacing: 1px;
}
.login-subtitle {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-light);
  margin-bottom: 32px;
}

/* ========== 工号输入框 ========== */
.login-field {
  position: relative;
  margin-bottom: 20px;
}
.login-field .field-icon {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  display: flex;
  transition: color var(--dur-2);
}
.login-field .field-icon svg { width: 20px; height: 20px; }
.login-input {
  width: 100%;
  min-width: 0;               /* 允许输入框随容器收缩，不被 size=20 默认宽度撑开 */
  height: 52px;
  padding: 0 16px 0 44px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  appearance: none;            /* 移除 iOS 原生输入框样式，避免移动端粗乱 */
  -webkit-appearance: none;
  font-size: var(--fs-md);
  font-family: var(--font-num);
  color: var(--text);
  background: var(--slate-50);
  transition: border-color var(--dur-2), background var(--dur-2), box-shadow var(--dur-2);
  outline: none;
  letter-spacing: 1px;
}
.login-input::placeholder { color: var(--text-muted); letter-spacing: 0; }
.login-input:focus {
  border-color: var(--brand);
  background: #fff;
  box-shadow: 0 0 0 4px var(--brand-glow);
}
.login-input:focus ~ .field-icon { color: var(--brand); }

/* ========== 登录按钮 ========== */
.login-btn {
  width: 100%;
  height: 52px;
  border: none;
  border-radius: var(--r-sm);
  background: var(--brand);
  color: #fff;
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: 2px;
  cursor: pointer;
  box-shadow: var(--elev-brand);
  transition: transform var(--dur-2), box-shadow var(--dur-2);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.login-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(249,115,22,0.36);
}
.login-btn:active:not(:disabled) { transform: translateY(0) scale(0.98); }
.login-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.login-btn svg { width: 20px; height: 20px; }

/* ========== 安全码弹窗 ========== */
.pin-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 100001;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: overlay-in 200ms var(--ease-out) both;
}
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }

.pin-sheet {
  position: relative;
  width: 100%; max-width: 360px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--r-xl);
  padding: 36px 28px 24px;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.18), 0 8px 24px rgba(15, 23, 42, 0.08);
  animation: sheet-in 420ms var(--ease-spring);
}
@keyframes sheet-in {
  from { opacity: 0; transform: translateY(32px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* 错误时整个弹层左右抖动 + 红色边框脉冲 */
.pin-sheet.shake {
  animation: sheet-shake 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97) !important;
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18), 0 20px 60px rgba(239, 68, 68, 0.15);
}
@keyframes sheet-shake {
  0%, 100% { transform: translateX(0); }
  10%      { transform: translateX(-10px); }
  20%      { transform: translateX(10px); }
  30%      { transform: translateX(-8px); }
  40%      { transform: translateX(8px); }
  50%      { transform: translateX(-5px); }
  60%      { transform: translateX(5px); }
  70%      { transform: translateX(-2px); }
  80%      { transform: translateX(2px); }
}

.pin-icon {
  width: 64px; height: 64px;
  margin: 0 auto 18px;
  border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-600) 100%);
  box-shadow: 0 10px 28px rgba(249, 115, 22, 0.42), 0 4px 10px rgba(249, 115, 22, 0.25);
}
.pin-icon svg { width: 30px; height: 30px; }
.pin-icon .iconfont { font-size: 30px; line-height: 1; }
.pin-icon.verify {
  /* verify 模式：珊瑚橙 + 微旋转强调身份验证 */
  animation: icon-breathe 2.4s ease-in-out infinite;
}
@keyframes icon-breathe {
  0%, 100% { box-shadow: 0 10px 28px rgba(249, 115, 22, 0.42), 0 4px 10px rgba(249, 115, 22, 0.25); }
  50%      { box-shadow: 0 14px 36px rgba(249, 115, 22, 0.55), 0 6px 14px rgba(249, 115, 22, 0.32); }
}

.pin-title {
  text-align: center;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}
.pin-desc {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-light);
  margin-bottom: 24px;
  line-height: 1.6;
}

/* ========== 6 位安全码输入框 ========== */
.pin-digits {
  display: flex; justify-content: center; gap: 10px; margin-bottom: 16px;
}
.pin-digit {
  flex: 1 1 0;
  min-width: 0;
  max-width: 48px;
  height: 54px;
  border: 2px solid var(--border);
  border-radius: var(--r-md);
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  text-align: center;
  font-size: var(--fs-2xl);
  font-weight: 700;
  font-family: var(--font-num);
  color: var(--text);
  background: var(--slate-50);
  outline: none;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  -webkit-text-security: disc;
}
.pin-digit:focus {
  border-color: var(--brand);
  background: #fff;
  box-shadow: 0 0 0 4px var(--brand-glow);
}
.pin-digit.filled {
  border-color: var(--brand-400);
  background: var(--brand-50);
}
/* 错误状态：输入框红色边框 + 浅红背景 */
.pin-sheet.shake .pin-digit {
  border-color: var(--danger);
  background: #fef2f2;
  animation: digit-shake 0.4s ease;
}
@keyframes digit-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}

.pin-error {
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--danger);
  min-height: 22px;
  margin-bottom: 12px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.2s, transform 0.2s;
}
.pin-error::before {
  content: '';
  width: 16px; height: 16px;
  flex-shrink: 0;
  background: var(--danger);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") no-repeat center / contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") no-repeat center / contain;
}
.pin-error.show {
  opacity: 1;
  transform: translateY(0);
}

.pin-actions {
  display: flex; gap: 12px;
}
.pin-btn {
  flex: 1; height: 48px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  background: #fff;
  color: var(--text-light);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.pin-btn:hover:not(:disabled) { background: var(--slate-50); border-color: var(--slate-300); }
.pin-btn:active:not(:disabled) { transform: scale(0.98); }
.pin-btn.primary {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-600) 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(249, 115, 22, 0.36);
}
.pin-btn.primary:hover:not(:disabled) {
  box-shadow: 0 6px 20px rgba(249, 115, 22, 0.45);
  transform: translateY(-1px);
}
.pin-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ========== 响应式：小屏手机 ========== */
@media (max-width: 374px) {
  .login-card { padding: 32px 20px 24px; }
  .pin-sheet { padding: 28px 16px 20px; }
  .pin-digits { gap: 8px; }
  .pin-digit { max-width: 44px; height: 50px; font-size: var(--fs-xl); }
}
@media (max-width: 320px) {
  .pin-sheet { padding: 24px 12px 18px; }
  .pin-digits { gap: 6px; }
  .pin-digit { max-width: 40px; height: 46px; font-size: var(--fs-lg); }
}

/* ========== 尊重无障碍偏好 ========== */
@media (prefers-reduced-motion: reduce) {
  .login-card, .pin-sheet { animation: none; }
  .login-logo { animation: none; }
  .pin-sheet.shake { animation: none; }
  .pin-sheet.shake .pin-digit { animation: none; }
  .pin-overlay { backdrop-filter: none; -webkit-backdrop-filter: none; }
}