/* pages/login.css
 * 来源 app.css L2696-2939 + L2940-3157
 * ============================================================ */

/* ============================================================
 * 登录页 · 整体骨架框架
 *   - 顶栏 / 中央卡片 / 页脚 三段式
 * ============================================================ */
.login-shell-page {
  min-height: 100dvh;
}
.login-frame {
  position: relative;
  z-index: 2;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: 100%;
}

/* 顶部状态栏 */
.login-topbar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 32px;
  border-bottom: 1px solid rgba(191, 219, 254, 0.35);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.35) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.login-topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.login-topbar-name {
  font-size: 16.8px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #1e293b;
}
.login-topbar-sub {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.6px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: #94a3b8;
  padding-left: 8px;
  margin-left: 4px;
  border-left: 1px solid rgba(148, 163, 184, 0.3);
}
.login-topbar-nav {
  display: flex;
  align-items: center;
  gap: 26px;
}
.login-topbar-link {
  font-size: 15.6px;
  color: #475569;
  transition: color 0.18s ease;
}
.login-topbar-link:hover {
  color: #2563eb;
}

/* 顶栏:文档/语言/分隔条 */
.login-topbar-divider {
  width: 1px;
  height: 14px;
  background: rgba(148, 163, 184, 0.35);
  margin: 0 4px;
}
.login-topbar-icon-link,
.login-topbar-lang {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: #475569;
}
.login-topbar-icon-link i,
.login-topbar-lang i {
  opacity: 0.8;
}
.login-topbar-lang:hover,
.login-topbar-icon-link:hover {
  color: #2563eb;
}

/* 底部页脚 */
.login-footer {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 32px;
  border-top: 1px solid rgba(203, 213, 225, 0.35);
  background: linear-gradient(0deg, rgba(248, 250, 252, 0.65) 0%, rgba(248, 250, 252, 0.25) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 13.8px;
  color: #64748b;
}
.login-footer-nav {
  display: flex;
  align-items: center;
  gap: 18px;
}
.login-footer-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #64748b;
  transition: color 0.2s ease;
}
.login-footer-link:hover {
  color: #2563eb;
}

/* 卡片在新骨架中调整：取消独立全屏高度 */
.login-main {
  min-height: 0;
}

@media (max-width: 768px) {
  .login-topbar {
    padding: 12px 16px;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }
  .login-topbar-nav {
    flex-wrap: wrap;
    gap: 14px 18px;
    font-size: 12px;
  }
  .login-footer {
    padding: 12px 16px;
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
  .login-footer-nav {
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* 左侧 hero 价值列表 */
.login-hero-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.login-hero-item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 12px 0;
  border-top: 0;
}
.login-hero-item:first-child {
  border-top: 0;
  padding-top: 0;
}
.login-hero-item > i {
  flex-shrink: 0;
  margin-top: 3px;
  color: rgba(219, 234, 254, 0.95);
}
.login-hero-item-title {
  font-size: 16.8px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #ffffff;
  line-height: 1.5;
}
.login-hero-item-desc {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.85;
  color: rgba(219, 234, 254, 0.78);
  letter-spacing: 0.01em;
}

/* 表单底部协议链接 */
.login-form-link {
  color: #2563eb;
  margin: 0 2px;
  transition: color 0.18s ease;
}
.login-form-link:hover {
  color: #1d4ed8;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 表单底部帮助 / 联系管理员入口 - 真实企业内网 hint */
.login-form-help {
  margin-top: 22px;
}
.login-form-help-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #64748b;
  font-size: 14.4px;
  transition: color 0.18s ease;
}
.login-form-help-link:hover {
  color: #2563eb;
}
.login-form-help-link i {
  opacity: 0.75;
}

/* 页脚版权 / 版本号 */
.login-footer-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.login-footer-sep {
  color: #cbd5e1;
}
.login-footer-version {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  color: #94a3b8;
  letter-spacing: 0.04em;
}

/* "其他方式" 分隔线 - 加点视觉节奏 */
.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  font-size: 13.2px;
  color: #94a3b8;
  letter-spacing: 0.06em;
}
.login-divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(148, 163, 184, 0.4) 50%,
    transparent 100%
  );
}
.login-divider-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #94a3b8;
}
.login-divider-text::before,
.login-divider-text::after {
  content: '';
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.5);
}


/* ============================================================
 * 登录页 · 主 CTA / 内部排版
 * ============================================================ */

/* 钉钉登录主按钮 - 企业克制 · 蓝 icon + 中性白卡 */
.login-cta {
  position: relative;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  color: #0f172a;
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.login-cta:hover {
  border-color: #93c5fd;
  box-shadow: 0 8px 20px -10px rgba(59, 130, 246, 0.35);
}
.login-cta:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px -3px rgba(30, 58, 138, 0.25);
}
.login-secondary:active {
  transform: translateY(1px);
}

/* CTA 内部排版 - 蓝 icon block 锚点 */
.login-cta-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom right, #3B82F6, #60A5FA);
  color: #ffffff;
  flex-shrink: 0;
  box-shadow: 0 4px 10px -3px rgba(59, 130, 246, 0.4);
}
.login-cta-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #0f172a;
}
.login-cta-sub {
  margin-top: 2px;
  font-size: 11.5px;
  color: #64748b;
}
.login-cta-arrow {
  color: #cbd5e1;
  transition: transform 0.2s ease, color 0.2s ease;
}
.login-cta:hover .login-cta-arrow {
  transform: translateX(3px);
  color: #3B82F6;
}

@media (prefers-reduced-motion: reduce) {
  .login-cta,
  .login-cta-arrow {
    transition: none;
  }
}


/* ============================================================
 * 登录页 · 主 CTA 二维码预览 + 备选手机号表单 + 演示降权 + 页脚增强
 * ============================================================ */

/* CTA 外层包装:用于在右上角浮出二维码预览 */
.login-cta-wrap {
  position: relative;
}

/* 二维码预览:hover/focus CTA 时浮现 */
.login-qr-preview {
  position: absolute;
  top: -10px;
  right: calc(100% + 14px);
  width: 168px;
  padding: 12px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 24px 48px -22px rgba(15, 23, 42, 0.28);
  opacity: 0;
  transform: translateX(6px);
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(.16,1,.3,1);
  z-index: 4;
}
.login-qr-preview::after {
  content: '';
  position: absolute;
  top: 26px;
  left: 100%;
  width: 10px;
  height: 10px;
  background: #ffffff;
  border-right: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  transform: translateY(-50%) rotate(-45deg);
}
.login-cta-wrap:hover .login-qr-preview,
.login-cta-wrap:focus-within .login-qr-preview {
  opacity: 1;
  transform: translateX(0);
}
.login-qr-img {
  position: relative;
  width: 144px;
  height: 144px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #eef2f7;
  overflow: hidden;
}
.login-qr-grid {
  position: absolute;
  inset: 8px;
  background-image:
    linear-gradient(#0f172a 25%, transparent 25%, transparent 75%, #0f172a 75%),
    linear-gradient(90deg, #0f172a 25%, transparent 25%, transparent 75%, #0f172a 75%);
  background-size: 8px 8px;
  background-position: 0 0, 0 0;
  opacity: 0.85;
  mask-image: radial-gradient(circle at 20% 20%, #000 0 6px, transparent 6px),
              radial-gradient(circle at 80% 20%, #000 0 6px, transparent 6px),
              radial-gradient(circle at 20% 80%, #000 0 6px, transparent 6px),
              linear-gradient(#000, #000);
  -webkit-mask-composite: source-over;
}
.login-qr-logo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-qr-logo > div {
  box-shadow: 0 0 0 4px #ffffff, 0 4px 10px -3px rgba(15, 23, 42, 0.25);
}
.login-qr-tip {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: #64748b;
}
.login-qr-tip i {
  color: #94a3b8;
}

/* 备选: 手机号验证码表单 */
.login-phone-form {
  display: grid;
  gap: 12px;
}
.login-phone-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 14px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.login-phone-field:hover {
  border-color: #cbd5e1;
}
.login-phone-field:focus-within {
  border-color: #cbd5e1;
  box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.06);
  background: #ffffff;
}
.login-phone-field:has(.login-phone-input:focus),
.login-phone-field:has(.login-phone-input:focus-visible) {
  border-color: #cbd5e1;
  box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.06);
}
.login-phone-field > i {
  color: #94a3b8;
  flex-shrink: 0;
}
.login-phone-input {
  flex: 1;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 16.8px;
  color: #0f172a;
  letter-spacing: 0.02em;
  /* 锁定光标颜色,防止浏览器主题色 / accent-color 把 caret 染成蓝色 */
  caret-color: #0f172a;
}
.login-phone-input:focus,
.login-phone-input:focus-visible {
  outline: 0;
  box-shadow: none;
}
.login-phone-input::placeholder {
  color: #94a3b8;
}
/* Chrome/Safari 自动填充态会强制蓝底 + 蓝字,这里用长 inset shadow 覆盖背景,
 * 并把字色锁回中性,避免账号填充进来后整框发蓝。 */
.login-phone-input:-webkit-autofill,
.login-phone-input:-webkit-autofill:hover,
.login-phone-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #0f172a;
  caret-color: #0f172a;
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
  box-shadow: 0 0 0 1000px #ffffff inset;
  transition: background-color 5000s ease-in-out 0s;
}
.login-phone-code-btn {
  flex-shrink: 0;
  height: 33.6px;
  padding: 0 14.4px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: rgba(59, 130, 246, 0.08);
  color: #2563eb;
  font-size: 14.4px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.login-phone-code-btn:hover {
  background: rgba(59, 130, 246, 0.16);
}
.login-phone-code-btn:disabled {
  background: #f1f5f9;
  color: #94a3b8;
  cursor: not-allowed;
}
.login-phone-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 55.2px;
  margin-top: 4px;
  border-radius: 12px;
  border: 1px solid #0f172a;
  background: #0f172a;
  color: #ffffff;
  font-size: 16.8px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.login-phone-submit:hover {
  background: #1e293b;
  box-shadow: 0 12px 22px -14px rgba(15, 23, 42, 0.55);
  transform: translateY(-1px);
}
.login-phone-submit:active {
  transform: translateY(0);
}

/* 演示账号入口降权为 help 链接 */
.login-form-demo {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font: inherit;
}
.login-form-demo i {
  opacity: 0.75;
}

/* 页脚:服务状态点 + 区域 */
.login-footer-region {
  font-size: 11.5px;
  color: #64748b;
  letter-spacing: 0.01em;
}
.login-footer-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.login-footer-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
  animation: loginStatusPulse 2.4s ease-in-out infinite;
}
@keyframes loginStatusPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18); }
  50% { box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.05); }
}
@media (prefers-reduced-motion: reduce) {
  .login-footer-status-dot { animation: none; }
}

/* 窄屏:二维码预览改为浮在 CTA 下方 */
@media (max-width: 768px) {
  .login-qr-preview {
    display: none;
  }
}


/* ============================================================
 * 登录页 · 视觉细节精修层
 *   - 间距、字重、色阶、圆角、阴影统一打磨(不动原结构)
 * ============================================================ */

/* 顶栏:玻璃感更细腻,细线分隔 */
.login-topbar {
  padding: 12px 32px;
  border-bottom-color: rgba(203, 213, 225, 0.4);
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.7) 0%, rgba(248, 250, 252, 0.35) 100%);
}
.login-topbar-name {
  font-size: 13.5px;
  letter-spacing: 0.005em;
}
.login-topbar-link {
  font-size: 12.5px;
  font-weight: 500;
  color: #475569;
  transition: color 0.18s ease;
}

/* 中央卡片:阴影更柔、边框更轻、圆角更克制 */
.login-shell {
  background: #fafbfc !important;
  border-color: rgba(226, 232, 240, 0.85) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 24px 60px -32px rgba(30, 41, 59, 0.18),
    0 6px 18px -12px rgba(15, 23, 42, 0.05) !important;
}

/* 左侧 hero:沿用 logo 蓝家族,深→主色稳重过渡 */
.login-hero {
  background: linear-gradient(155deg, #1e3a8a 0%, #2563eb 60%, #3b82f6 100%) !important;
}
.login-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 0%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(255, 255, 255, 0.05) 0%, transparent 55%);
  pointer-events: none;
}
.login-hero-list {
  position: relative;
}
.login-hero-item {
  padding: 0;
  border-top: 0;
  transition: transform 0.22s cubic-bezier(.16,1,.3,1);
}
.login-hero-item:hover {
  transform: translateX(2px);
}
.login-hero-item > i {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 100%);
  color: rgba(255, 255, 255, 0.95);
  margin-top: 0;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.login-hero-item-title {
  font-size: 14px;
  letter-spacing: 0.01em;
  line-height: 1.4;
}
.login-hero-item-desc {
  font-size: 12.5px;
  line-height: 1.75;
  color: rgba(219, 234, 254, 0.74);
  letter-spacing: 0.005em;
}

/* 右侧表单:页眉文字层级 */
.login-form h2 {
  letter-spacing: -0.015em;
}

/* 主 CTA:更克制的阴影与圆角 */
.login-cta {
  border-color: #e6ebf2;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 1px 2px rgba(15, 23, 42, 0.04);
  border-radius: 12px;
}
.login-cta:hover {
  border-color: #93c5fd;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 10px 24px -12px rgba(59, 130, 246, 0.4);
}
.login-cta-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
  box-shadow: 0 4px 10px -4px rgba(59, 130, 246, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.login-cta-title {
  font-size: 14px;
  letter-spacing: 0.005em;
  line-height: 1.4;
}
.login-cta-sub {
  font-size: 11.5px;
  line-height: 1.55;
  letter-spacing: 0.01em;
  margin-top: 3px;
}

/* 分隔线:更纤细的渐变,字距更窄 */
.login-divider {
  margin: 22px 0;
  font-size: 11px;
  letter-spacing: 0.1em;
}
.login-divider-text {
  color: #94a3b8;
  font-weight: 500;
}

/* 协议链接:细节美化 */
.login-form-link {
  color: #2563eb;
  font-weight: 500;
}

/* 页脚:字阶下沉,链接 hover 更柔 */
.login-footer {
  padding: 12px 32px;
  font-size: 11px;
  border-top-color: rgba(191, 219, 254, 0.32);
}
.login-footer-copy {
  color: #64748b;
}
.login-footer-link {
  font-size: 11.5px;
}
@media (max-width: 768px) {
  .login-topbar {
    padding: 12px 16px;
  }
  .login-footer {
    padding: 12px 16px;
  }
}


/* ============================================================
 * 登录页 · 背景层与微动效
 *   - 浅色基底 + 蓝紫渐变光斑(2 个,缓慢漂移)
 *   - 网格点阵纹理(极淡)
 *   - 不干扰前景表单,遵守 prefers-reduced-motion
 * ============================================================ */
.login-bg {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: #f4f6fb;
  background-image:
    radial-gradient(rgba(59, 130, 246, 0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: 0 0;
  background-attachment: fixed;
  overflow: hidden;
}
.login-bg::before,
.login-bg::after {
  content: '';
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  will-change: transform;
}
.login-bg::before {
  top: -200px;
  left: -140px;
  width: 540px;
  height: 540px;
  background: radial-gradient(circle at 30% 30%, rgba(96, 165, 250, 0.18) 0%, rgba(96, 165, 250, 0) 70%);
  animation: loginBlobA 18s ease-in-out infinite alternate;
}
.login-bg::after {
  bottom: -220px;
  right: -160px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle at 70% 70%, rgba(59, 130, 246, 0.16) 0%, rgba(59, 130, 246, 0) 70%);
  animation: loginBlobB 22s ease-in-out infinite alternate;
}

/* 中央高光带:让整体光线更聚焦(柔化,避免白点过亮) */
.login-frame::before {
  content: '';
  position: absolute;
  top: 10%;
  left: 50%;
  width: 720px;
  height: 360px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0) 72%);
  filter: blur(50px);
  z-index: 1;
  pointer-events: none;
}

@keyframes loginBlobA {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(80px, 60px) scale(1.08); }
}
@keyframes loginBlobB {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-90px, -50px) scale(1.06); }
}

/* 卡片入场:整体 fade-up + 内部 hero 列表错峰浮现 */
.login-shell {
  animation: loginShellIn 0.55s cubic-bezier(.16,1,.3,1) both;
}
.login-hero-item {
  opacity: 0;
  transform: translateY(8px);
  animation: loginHeroItemIn 0.52s cubic-bezier(.16,1,.3,1) forwards;
}
.login-hero-item:nth-child(1) { animation-delay: 0.18s; }
.login-hero-item:nth-child(2) { animation-delay: 0.28s; }
.login-hero-item:nth-child(3) { animation-delay: 0.38s; }

@keyframes loginShellIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes loginHeroItemIn {
  to { opacity: 1; transform: translateY(0); }
}

/* CTA icon:呼吸式微闪 */
.login-cta-icon {
  position: relative;
}
.login-cta-icon::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.28), rgba(96, 165, 250, 0.28));
  filter: blur(10px);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s ease;
}
.login-cta:hover .login-cta-icon::after {
  opacity: 0.55;
}

/* 尊重用户偏好:关闭所有动画 */
@media (prefers-reduced-motion: reduce) {
  .login-bg::before,
  .login-bg::after,
  .login-shell,
  .login-hero-item {
    animation: none !important;
  }
  .login-hero-item {
    opacity: 1;
    transform: none;
  }
}

/* 窄屏:背景光斑收紧,避免移动端模糊性能问题 */
@media (max-width: 768px) {
  .login-bg::before,
  .login-bg::after {
    filter: blur(40px);
    width: 360px;
    height: 360px;
  }
  .login-frame::before {
    width: 90%;
  }
}

/* ============================================================
 * 登录页 · v2 布局优化层
 *
 * 目标:
 *   1. 主次关系:钉钉扫码=主 CTA(实色蓝),手机号=次选(白卡描边),
 *      消除原"次按钮黑底比主按钮还重"的视觉反转。
 *   2. 节奏对齐:左右两栏共用同一套 padding token,
 *      hero 内 head/list/trust 三段用 grid 锁竖向节奏,
 *      form 内 head/auth/foot 同样三段对齐 hero 的 baseline。
 * ============================================================ */
:root {
  --login-card-py: 40px;       /* 卡片上下 padding(原 56px,收紧节省纵向空间) */
  --login-card-px: 40px;       /* 卡片左右 padding(原 48px) */
  --login-card-gap: 22px;      /* 同一段内子项纵向间距 */
}

/* 卡片本体:把高度对齐交给 grid 自身,两侧 stretch */
.login-shell {
  align-items: stretch;
}

/* === 左侧 hero:三段式 grid:head / list / trust ============ */
.login-hero {
  padding: var(--login-card-py) var(--login-card-px);
  display: grid !important;
  grid-template-rows: auto 1fr auto;
  row-gap: clamp(28px, 2.6vw, 40px);
}
.login-hero-head h2 {
  font-size: clamp(26.4px, 2.1vw, 31.2px);
  line-height: 1.35;
}
.login-hero-head p {
  margin-top: 14px;
  font-size: 15.6px;
  line-height: 1.7;
}
.login-hero-list {
  align-self: center;
  gap: 24px;
}
.login-hero-item-desc {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.75;
}
.login-hero-trust {
  margin-top: 0;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* === 右侧 form:三段式 grid:head / auth / foot ============= */
.login-form {
  padding: var(--login-card-py) var(--login-card-px);
  display: grid !important;
  grid-template-rows: auto 1fr auto;
  row-gap: clamp(18px, 2.4vw, 28px);
}
.login-form-head h2 {
  font-size: 24px;
}
.login-form-head p {
  margin-top: 6px;
  font-size: 15px;
}
.login-form-foot {
  display: contents; /* 让 help 与 agreement 共同落到 footer 区 */
}

/* form 中段:认证区域(主 CTA + 分割 + 次选表单),自身再做内部纵向节奏 */
.login-cta-wrap,
.login-divider,
.login-phone-form {
  margin: 0; /* 去掉旧的 mt-8 / mt-6,统一由父 grid 控制 */
}
.login-form .login-cta-wrap { margin-top: 0; }
.login-form .login-divider { margin: 14px 0; font-size: 10.5px; }
.login-phone-form { gap: 8px; }
.login-phone-field { height: 42px; }
.login-cta { padding-top: 12px; padding-bottom: 12px; }
.login-cta-icon { width: 34px; height: 34px; }

/* === 主次反转修复:主 CTA = 蓝色实色,次选表单提交 = 白底蓝边 === */

/* 主 CTA:钉钉扫码 → 蓝色填充按钮(企业蓝) */
.login-cta {
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 10px 24px -12px rgba(37, 99, 235, 0.55),
              inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.login-cta:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
  border-color: transparent;
  box-shadow: 0 14px 28px -12px rgba(37, 99, 235, 0.6),
              inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
}
.login-cta:active {
  transform: translateY(0);
}
.login-cta-icon {
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.login-cta-title-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.login-cta-title {
  color: #ffffff;
  font-size: 18px;
}
.login-cta-sub {
  color: rgba(255, 255, 255, 0.78);
  margin-top: 3px;
  font-size: 14.4px;
}
.login-cta-arrow {
  color: rgba(255, 255, 255, 0.85);
}
.login-cta:hover .login-cta-arrow {
  color: #ffffff;
}
.login-cta-badge {
  display: inline-flex;
  align-items: center;
  height: 21.6px;
  padding: 0 8.4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  font-size: 12.6px;
  font-weight: 600;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}

/* 次选:手机号登录提交按钮 → 白底蓝边,降权于主 CTA */
.login-phone-submit {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #0f172a;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: none;
  margin-top: 6px;
}
.login-phone-submit:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  box-shadow: 0 6px 14px -10px rgba(15, 23, 42, 0.25);
  transform: translateY(-1px);
}
.login-phone-submit:active {
  transform: translateY(0);
}

/* 分割线提示:从模糊的"其他方式"换成具体诉求,文字也降权 */
.login-divider-text {
  color: #94a3b8;
  letter-spacing: 0.04em;
}

/* 帮助行 + 协议行:都落到 form 的最后一段(grid auto 行) */
.login-form-help {
  margin: 0;
}
.login-form-agreement {
  margin: 0;
  padding-top: 4px;
  font-size: 13.8px;
}

/* === 第三方登录:钉钉已升级为主 CTA,这里是企业微信 / 飞书 等补充入口 === */
.login-third-party {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
}
.login-third-party-label {
  flex-shrink: 0;
  font-size: 13.8px;
  letter-spacing: 0.04em;
  color: #94a3b8;
}
.login-third-party-list {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.login-third-party-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 43.2px;
  padding: 0 16.8px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #475569;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease,
              box-shadow 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.login-third-party-btn:hover {
  background: #f8fafc;
  box-shadow: 0 6px 14px -10px rgba(15, 23, 42, 0.2);
  transform: translateY(-1px);
}
.login-third-party-btn:active {
  transform: translateY(0);
}
.login-third-party-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
/* 品牌色:hover 时 icon 上品牌色,文字保持中性,克制不喧宾 */
.login-third-party-wecom .login-third-party-ico { color: #94a3b8; transition: color 0.18s ease; }
.login-third-party-wecom:hover { border-color: #1aad19; color: #0f172a; }
.login-third-party-wecom:hover .login-third-party-ico { color: #1aad19; }

.login-third-party-feishu .login-third-party-ico { color: #94a3b8; transition: color 0.18s ease; }
.login-third-party-feishu:hover { border-color: #3370ff; color: #0f172a; }
.login-third-party-feishu:hover .login-third-party-ico { color: #3370ff; }

/* 极窄屏:第三方登录改为竖向堆叠,标签独占一行 */
@media (max-width: 480px) {
  .login-third-party {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .login-third-party-list {
    width: 100%;
  }
  .login-third-party-btn {
    flex: 1;
    justify-content: center;
    height: 36px;
    padding: 0 10px;
    font-size: 11px;
    gap: 5px;
  }
  .login-third-party-ico {
    width: 14px;
    height: 14px;
  }
  .login-third-party-name {
    font-size: 11px;
  }
}

/* === 自适应:窄屏收紧 padding,但保持节奏一致 ============ */
@media (max-width: 1024px) {
  :root {
    --login-card-py: 32px;
    --login-card-px: 28px;
  }
}
@media (max-width: 640px) {
  :root {
    --login-card-py: 24px;
    --login-card-px: 20px;
  }
  .login-form {
    grid-template-rows: auto auto auto;
    row-gap: 18px;
  }
}


/* ============================================================
 * 登录页 · 移动端兼容性专项
 *   目标:
 *   1. 解锁纵向滚动(原 body.overflow-hidden 在小屏挡住表单底部)
 *   2. 顶栏精简,只保留品牌 + 文档/语言图标,营销链接降噪
 *   3. 输入框 ≥16px 防止 iOS focus 触发 viewport zoom
 *   4. safe-area 适配刘海屏 / 底部 home indicator
 *   5. 横屏短高度场景独立微调
 * ============================================================ */

/* 安全区域:仅在有 inset 的设备生效,无 inset 设备值为 0 不影响 */
.login-topbar {
  padding-top: max(12px, env(safe-area-inset-top));
  padding-left: max(32px, env(safe-area-inset-left));
  padding-right: max(32px, env(safe-area-inset-right));
}
.login-footer {
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  padding-left: max(32px, env(safe-area-inset-left));
  padding-right: max(32px, env(safe-area-inset-right));
}

@media (max-width: 768px) {
  /* 移动端布局：完全固定，无滚动 */
  html, body.login-shell-page {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
    position: fixed;
    width: 100%;
  }

  .login-frame {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .login-main {
    flex: 1;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* 顶栏：极致压缩 */
  .login-topbar {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    padding: 6px max(12px, env(safe-area-inset-left)) 6px max(12px, env(safe-area-inset-right));
    gap: 8px;
    min-height: 40px;
  }
  .login-topbar-brand {
    gap: 6px;
  }
  .sidebar-brand-mark {
    width: 20px;
    height: 20px;
  }
  .login-topbar-name {
    font-size: 13px;
  }
  .login-topbar-sub {
    font-size: 9px;
  }
  .login-topbar-nav {
    gap: 14px;
    flex-wrap: nowrap;
  }
  /* 营销页跳转在登录场景属于次要,移动端隐藏降噪 */
  .login-topbar-nav > .login-topbar-link:not(.login-topbar-icon-link):not(.login-topbar-lang),
  .login-topbar-divider {
    display: none;
  }
  /* 文档 / 语言 仅留 icon,文字隐藏避免横向溢出 */
  .login-topbar-icon-link span,
  .login-topbar-lang span {
    display: none;
  }

  /* 表单容器：确保内容可滚动且不溢出 */
  .login-shell {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    grid-template-columns: 1fr !important;
    max-width: 480px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    animation: none !important;
    min-height: 0;
  }
  .login-hero {
    display: none !important;
  }
  /* 表单主体：紧凑布局，适配一屏 */
  .login-form {
    padding: 0;
    background: transparent;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    max-height: 100%;
  }
  .login-form-head {
    min-height: 0;
  }
  .login-form-head h2 {
    font-size: 17px;
    line-height: 1.2;
  }
  .login-form-head p {
    font-size: 11px;
    margin-top: 2px;
    line-height: 1.4;
  }

  /* 分隔线：最小化 */
  .login-form .login-divider {
    margin: 4px 0;
    font-size: 9px;
  }
  .login-divider-text::before,
  .login-divider-text::after {
    width: 2px;
    height: 2px;
  }
  /* 第三方登录：紧凑 */
  .login-third-party {
    margin: 0;
    gap: 6px;
  }
  .login-third-party-label {
    font-size: 9px;
  }
  .login-form-help {
    margin-top: 0;
    font-size: 10px;
    gap: 6px;
  }
  .login-form-agreement {
    font-size: 9px;
    line-height: 1.4;
    padding-top: 0;
  }

  /* 主 CTA：紧凑但可点击 */
  .login-cta {
    padding: 7px 10px;
    min-height: 42px;
    display: flex;
    align-items: center;
  }
  .login-cta-icon {
    width: 28px;
    height: 28px;
  }
  .login-cta-title {
    font-size: 13px;
    line-height: 1.3;
  }
  .login-cta-sub {
    font-size: 10px;
    margin-top: 1px;
    line-height: 1.3;
  }
  .login-cta-badge {
    height: 15px;
    padding: 0 5px;
    font-size: 9px;
  }
  .login-cta-arrow {
    width: 16px;
    height: 16px;
  }

  /* 输入框：紧凑布局 */
  .login-phone-input {
    font-size: 16px;
  }
  .login-phone-field {
    height: 40px;
    padding: 0 12px;
  }
  .login-phone-form {
    gap: 6px;
  }
  .login-phone-submit {
    height: 40px;
    font-size: 13px;
    margin-top: 0;
  }
  .login-phone-code-btn {
    height: 24px;
    padding: 0 8px;
    font-size: 10px;
  }

  /* 页脚：极致压缩 */
  .login-footer {
    flex: 0 0 auto;
    padding: 6px max(12px, env(safe-area-inset-left)) max(6px, calc(env(safe-area-inset-bottom) + 2px)) max(12px, env(safe-area-inset-right));
    font-size: 9px;
    min-height: 32px;
    flex-wrap: wrap;
    gap: 6px;
  }
  .login-footer-copy {
    flex-wrap: wrap;
    justify-content: center;
    font-size: 9px;
    gap: 3px;
  }
  .login-footer-nav {
    font-size: 9px;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .login-footer-link {
    font-size: 9px;
  }
}

/* ≤480px 极窄屏：进一步压缩 */
@media (max-width: 480px) {
  .login-shell {
    max-width: 95vw;
  }

  .login-form {
    gap: clamp(4px, 0.8vh, 6px);
  }

  /* 版本号在最窄屏隐藏,主线信息留版权即可 */
  .login-footer-version,
  .login-footer-region {
    display: none;
  }
  /* 隐藏后清理多余的分隔点 */
  .login-footer-copy .login-footer-sep {
    display: none;
  }
  .login-footer-nav {
    gap: 10px;
  }
  /* 帮助行(演示账号 + 登录遇到问题)允许换行 */
  .login-form-help {
    flex-wrap: wrap;
    gap: 6px;
  }
  /* 协议行字号下沉,避免溢出最后一行 */
  .login-form-agreement {
    font-size: 10.5px;
    line-height: 1.6;
  }
}
  /* 版本号在最窄屏隐藏,主线信息留版权即可 */
  .login-footer-version,
  .login-footer-region {
    display: none;
  }
  /* 隐藏后清理多余的分隔点 */
  .login-footer-copy .login-footer-sep {
    display: none;
  }
  .login-footer-nav {
    gap: 10px;
  }
  /* 帮助行(演示账号 + 登录遇到问题)允许换行 */
  .login-form-help {
    flex-wrap: wrap;
    gap: 6px;
  }
  /* 协议行字号下沉,避免溢出最后一行 */
  .login-form-agreement {
    font-size: 10.5px;
    line-height: 1.6;
  }
}

/* ≤380px 超窄屏：隐藏第三方登录 */
@media (max-width: 380px) {
  .login-third-party {
    display: none;
  }
}

/* 横屏模式：极致压缩 */
@media (max-width: 768px) and (max-height: 500px) and (orientation: landscape) {
  .login-topbar {
    padding: 0.8vh max(3vw, env(safe-area-inset-left)) 0.8vh max(3vw, env(safe-area-inset-right));
  }

  .login-footer {
    padding: 0.8vh max(3vw, env(safe-area-inset-left)) max(0.8vh, calc(env(safe-area-inset-bottom) + 0.3vh)) max(3vw, env(safe-area-inset-right));
  }

  .login-main {
    padding: 0.5vh 3vw;
  }

  .login-form {
    gap: clamp(3px, 0.5vh, 5px);
  }

  .login-form-head h2 {
    font-size: clamp(14px, 3.5vw, 16px);
  }

  .login-form-head p {
    font-size: clamp(9px, 2.2vw, 11px);
    margin-top: 1px;
  }

  .login-cta {
    min-height: clamp(34px, 5.5vh, 40px);
    padding: clamp(4px, 0.8vh, 6px) clamp(8px, 2vw, 10px);
  }

  .login-phone-field,
  .login-phone-submit {
    height: clamp(32px, 5.5vh, 38px);
  }

  .login-third-party-btn {
    height: clamp(28px, 5vh, 34px);
  }

  .login-form .login-divider {
    margin: clamp(2px, 0.4vh, 3px) 0;
  }
}

/* ============================================================
 * 移动端触摸交互优化：禁止拖拽和滚动穿透
 * ============================================================ */
@media (max-width: 768px) {
  /* 全局禁止拖拽和过度滚动 */
  html, body.login-shell-page {
    touch-action: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: auto;
  }

  /* 背景层完全固定 */
  .login-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    touch-action: none;
  }

  /* 主框架禁止拖拽 */
  .login-frame {
    touch-action: none;
    overscroll-behavior: none;
  }

  /* 主区域允许表单内滚动 */
  .login-main {
    touch-action: pan-y;
  }

  /* 所有文本禁止选择 */
  .login-topbar,
  .login-footer,
  .login-form-head,
  .login-divider,
  .login-third-party-label,
  .login-form-agreement {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
  }

  /* 图标和装饰元素禁止交互 */
  img, svg, i, .sidebar-brand-mark,
  .login-cta-icon, .login-third-party-ico,
  .login-cta-arrow, .login-cta-badge {
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
  }

  /* 按钮和链接优化触摸反馈 */
  button, a, [role="button"] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
  }

  /* 主 CTA 按钮触摸反馈 */
  .login-cta {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(37, 99, 235, 0.08);
  }

  .login-cta:active {
    -webkit-tap-highlight-color: rgba(37, 99, 235, 0.15);
  }

  /* 输入框允许文本操作 */
  input, textarea {
    touch-action: manipulation;
    user-select: text;
    -webkit-user-select: text;
  }

  /* 提交按钮触摸反馈 */
  .login-phone-submit {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(15, 23, 42, 0.08);
  }

  .login-phone-submit:active {
    -webkit-tap-highlight-color: rgba(15, 23, 42, 0.15);
  }

  /* 第三方登录按钮触摸反馈 */
  .login-third-party-btn {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(15, 23, 42, 0.05);
  }

  .login-third-party-btn:active {
    -webkit-tap-highlight-color: rgba(15, 23, 42, 0.1);
  }

  /* 链接触摸反馈 */
  .login-form-help-link,
  .login-form-link,
  .login-footer-link {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(37, 99, 235, 0.08);
  }

  /* 验证码按钮 */
  .login-phone-code-btn {
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
  }

  /* 禁止长按菜单 */
  * {
    -webkit-touch-callout: none;
  }

  /* 表单容器允许内部滚动 */
  .login-shell {
    touch-action: pan-y;
  }

  .login-form {
    touch-action: pan-y;
  }
}