/* ============================================================
   考拉云传 · 登录/注册页 专属样式（v4 薄荷青磨砂玻璃版）
   ------------------------------------------------------------
   功能说明：
     登录页（login.html）按需加载的独立样式，替代全站聚合样式。
     本 v4 版本整体换肤为「薄荷青 + 磨砂玻璃流体渐变」：
       - 背景：薄荷青多层光晕渐变（明亮通透、柔和雾感）
       - 品牌面板：薄荷青渐变 + 流光光晕，考拉 Logo 青绿底
       - 表单区：磨砂玻璃白卡（半透明 + backdrop-blur）
       - 强调色：焦糖橙 #d97706 → 薄荷青 #0d9488
     新文件名 login-v4.css：绕过 www 域 CDN 旧缓存。
   设计方向：
     左右分栏大厂风格 —— 左侧薄荷青品牌面板，右侧磨砂玻璃表单区。
   动效：
     1. 入场淡入上移（左栏品牌 / 右栏表单）
     2. 输入框聚焦薄荷描边过渡
     3. 提交按钮 hover 微上移 + 阴影加深
     4. 背景光晕缓慢呼吸（prefers-reduced-motion 下关闭）
   ============================================================ */

/* ---------- 基础 Reset 与设计变量 ---------- */
:root {
  --k-cn: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --k-en: "Manrope", "Noto Sans SC", sans-serif;
  --k-mint: #0d9488;            /* 品牌强调色：薄荷青 */
  --k-mint-deep: #0f766e;       /* hover 深一档 */
  --k-mint-soft: #f0fdfa;       /* 极浅薄荷底 */
  --k-ink: #0a2e2b;             /* 主文字：深青墨 */
  --k-ink-2: #3f6f6a;           /* 次要文字：青灰 */
  --k-ink-3: #7ba39e;           /* 弱文字：淡青灰 */
  --k-line: #dcecea;            /* 分隔线 */
  --k-bg: #f0faf8;              /* 页面背景：极浅薄荷 */
  --k-glass: rgba(255, 255, 255, 0.78); /* 磨砂玻璃白 */
  --k-blue: #1677ff;            /* 支付宝品牌蓝 */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  font-family: var(--k-cn);
  /* 薄荷青流体渐变背景：左上薄荷光、右上浅青光、底部青绿光 + 底色 */
  background-color: var(--k-bg);
  background-image:
    radial-gradient(ellipse 70% 50% at 6% -6%, rgba(45, 212, 191, 0.30), transparent 62%),
    radial-gradient(ellipse 55% 42% at 97% 4%, rgba(165, 243, 252, 0.65), transparent 58%),
    radial-gradient(ellipse 65% 50% at 50% 112%, rgba(45, 212, 191, 0.20), transparent 62%),
    linear-gradient(160deg, #f7fdfc 0%, #ecfaf6 46%, #e3f7f2 100%);
  background-attachment: fixed;
  color: var(--k-ink);
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; cursor: pointer; border: none; background: none; }

input { font-family: inherit; }

a { color: var(--k-mint); }

/* ---------- 左右分栏容器 ---------- */
.kayla-login {
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
  background: transparent;
}

/* ---------- 左栏：品牌面板（薄荷青渐变 + 光晕） ---------- */
.kayla-brand {
  width: 52%;
  position: relative;
  overflow: hidden;
  display: flex;
  /* 顶部对齐 + 顶部留白：整体内容上移，视觉重心偏上 */
  align-items: flex-start;
  justify-content: center;
  padding-top: 88px;
  color: #fff;
  /* 薄荷青 → 深薄荷 渐变，叠加强烈青色光晕营造流体感 */
  background:
    radial-gradient(1200px 620px at 82% -12%, rgba(45, 212, 191, 0.55), transparent 62%),
    radial-gradient(900px 520px at -12% 112%, rgba(20, 184, 166, 0.45), transparent 58%),
    radial-gradient(700px 480px at 110% 90%, rgba(94, 234, 212, 0.35), transparent 60%),
    linear-gradient(162deg, #14b8a6 0%, #0d9488 52%, #0f766e 100%);
}
/* 品牌区背景视频：铺满左栏，object-fit cover 自适应填充，不拉伸变形 */
.kayla-brand__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  /* 视频柔和淡入，避免硬切画面 */
  animation: kaylaVideoIn 1.0s ease 0.05s both;
}
/* 背景视频暗色遮罩：叠加在视频之上，保证前景白色文字清晰可读 */
.kayla-brand::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(8, 47, 45, 0.50) 0%, rgba(8, 47, 45, 0.68) 100%);
  pointer-events: none;
}
/* 装饰：右下角柔和光晕（不喧宾夺主） */
.kayla-brand::after {
  content: "";
  position: absolute;
  right: -120px;
  bottom: -120px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(153, 246, 228, 0.28), transparent 65%);
  z-index: 1;
  pointer-events: none;
}

.kayla-brand__inner {
  position: relative;
  z-index: 2;
  /* 放宽内栏宽度：容纳更大字号的主标语单行显示 */
  width: min(600px, 92%);
  /* 整体靠左一点：居中基准上左移 28px,让品牌文字更贴近面板左侧 */
  margin-left: -28px;
  padding: 0;
}

/* 品牌 Logo：薄荷青渐变圆角底 + 考拉剪影 */
.kayla-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 56px;
}
.kayla-logo__mark {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: linear-gradient(135deg, #2dd4bf, #0d9488);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(13, 148, 136, 0.42);
}
/* 品牌 Logo 图片：铺满圆角底，object-fit 保持比例不裁剪 */
.kayla-logo__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: inherit;
}
.kayla-logo__text {
  font-family: var(--k-en);
  font-size: 40px;        /* 品牌名 34→40px 放大 */
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
}

/* 品牌主标语（全站最响亮的文字） */
.kayla-brand__headline {
  font-size: 40px;        /* 主标语 34→40px 放大 */
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: #fff;
  /* 薄荷青柔光：让标题在视频背景上更立体通透 */
  text-shadow: 0 2px 22px rgba(45, 212, 191, 0.30);
  margin-bottom: 18px;
  white-space: nowrap; /* 强制单行：主标语始终单行显示，避免不同字体/宽度下换行 */
}
.kayla-brand__desc {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 36px;
}

/* 移动端标语：仅手机端展示（桌面端默认隐藏，媒体查询内显示） */
.kayla-brand__slogan-m {
  display: none;
}

/* 核心功能列表：克制分隔线排版，无卡片 */
.kayla-brand__points {
  list-style: none;
  display: grid;
  gap: 13px;
}
.kayla-brand__points li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 20px;        /* 功能列表 18→20px 放大 */
  color: rgba(255, 255, 255, 0.92);
}
.kayla-brand__points li::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #99f6e4;
  box-shadow: 0 0 0 4px rgba(153, 246, 228, 0.25);
}
/* 功能项 hover：轻微右移 + 提亮，强化可感知的层级 */
.kayla-brand__points li {
  transition: transform 0.25s ease, color 0.25s ease;
}
.kayla-brand__points li:hover {
  transform: translateX(4px);
  color: #fff;
}

/* ============ 品牌区文字出场动画 ============
   视觉顺序：视频淡入 → Logo → 主标语 → 描述 → 五大功能逐项点亮
   统一动效：淡入 + 上移 + 模糊锐化，克制不喧宾夺主 */
@keyframes kaylaVideoIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes kaylaBrandRise {
  from { opacity: 0; transform: translateY(30px); filter: blur(8px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
/* 动画前先隐藏品牌区文字，避免入场瞬间闪烁 */
.kayla-brand__inner .kayla-logo,
.kayla-brand__inner .kayla-brand__headline,
.kayla-brand__inner .kayla-brand__desc,
.kayla-brand__inner .kayla-brand__points li {
  opacity: 0;
}
/* 动画：与上方「动画前隐藏」规则同特异性且后定义，保证动画结束后文字回落为可见 */
.kayla-brand__inner .kayla-logo {
  opacity: 1;
  animation: kaylaBrandRise 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) 0.25s backwards;
}
.kayla-brand__inner .kayla-brand__headline {
  opacity: 1;
  animation: kaylaBrandRise 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.42s backwards;
}
.kayla-brand__inner .kayla-brand__desc {
  opacity: 1;
  animation: kaylaBrandRise 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.60s backwards;
}
.kayla-brand__inner .kayla-brand__points li:nth-child(1) { opacity: 1; animation: kaylaBrandRise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.78s backwards; }
.kayla-brand__inner .kayla-brand__points li:nth-child(2) { opacity: 1; animation: kaylaBrandRise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.87s backwards; }
.kayla-brand__inner .kayla-brand__points li:nth-child(3) { opacity: 1; animation: kaylaBrandRise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.96s backwards; }
.kayla-brand__inner .kayla-brand__points li:nth-child(4) { opacity: 1; animation: kaylaBrandRise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 1.05s backwards; }
.kayla-brand__inner .kayla-brand__points li:nth-child(5) { opacity: 1; animation: kaylaBrandRise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 1.14s backwards; }
/* 尊重系统「减弱动态效果」偏好：直接显示文字，不播放入场动画 */
@media (prefers-reduced-motion: reduce) {
  .kayla-brand__video,
  .kayla-brand__inner .kayla-logo,
  .kayla-brand__inner .kayla-brand__headline,
  .kayla-brand__inner .kayla-brand__desc,
  .kayla-brand__inner .kayla-brand__points li {
    opacity: 1;
    animation: none;
  }
}

/* ---------- 右栏：表单区（磨砂玻璃） ---------- */
.kayla-form {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
}
.kayla-form__inner {
  width: min(400px, 100%);
  /* 磨砂玻璃卡片：半透明白 + 背景模糊，通透明亮 */
  background: var(--k-glass);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 22px;
  padding: 38px 36px 30px;
  box-shadow: 0 18px 50px rgba(13, 148, 136, 0.12),
              0 2px 8px rgba(13, 148, 136, 0.05);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  animation: kaylaFadeUp 0.8s 0.12s ease both;
}

/* 标题区 */
.kayla-title {
  font-family: var(--k-en);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--k-ink);
  margin-bottom: 8px;
}
.kayla-sub {
  font-size: 14px;
  color: var(--k-ink-3);
  margin-bottom: 32px;
}

/* 表单字段 */
.auth__field { margin-bottom: 18px; }
.auth__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--k-ink-2);
  margin-bottom: 7px;
}
.auth__input-wrap { position: relative; }
.auth__input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  font-size: 15px;
  color: var(--k-ink);
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(207, 232, 226, 0.9);
  border-radius: 10px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.auth__input::placeholder { color: var(--k-ink-3); }
.auth__input:focus {
  border-color: var(--k-mint);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.14);
}
/* 密码显示/隐藏按钮 */
.auth__toggle-pw {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--k-ink-3);
  border-radius: 8px;
  transition: color 0.2s;
}
.auth__toggle-pw:hover { color: var(--k-ink-2); }
.auth__toggle-pw svg { width: 19px; height: 19px; }

/* 图形验证码输入行 */
.auth__captcha-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  height: 34px;
  padding: 0 6px;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: rgba(240, 250, 248, 0.8);
  border: 1px solid rgba(207, 232, 226, 0.9);
}
.auth__captcha-btn img { display: block; height: 32px; border-radius: 6px; }

/* 记住账号 + 忘记密码 行 */
.auth__options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 4px 0 22px;
}
.auth__remember {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--k-ink-2);
  user-select: none;
}
.auth__remember input { display: none; }
.auth__checkbox-mark {
  width: 17px;
  height: 17px;
  border: 1.5px solid var(--k-line);
  border-radius: 5px;
  position: relative;
  transition: background 0.2s, border-color 0.2s;
}
.auth__remember input:checked + .auth__checkbox-mark {
  background: var(--k-mint);
  border-color: var(--k-mint);
}
.auth__remember input:checked + .auth__checkbox-mark::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1.5px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.auth__hint--inline { font-size: 13.5px; color: var(--k-ink-3); }

/* 错误提示 */
.auth__error {
  display: none;
  font-size: 13.5px;
  color: #dc2626;
  background: rgba(254, 242, 242, 0.9);
  border: 1px solid #fecaca;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 16px;
}
.auth__error--show { display: block; }

/* 主提交按钮（登录/注册）：薄荷青 */
.auth__submit {
  width: 100%;
  height: 48px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: var(--k-mint);
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.auth__submit:hover:not(:disabled) {
  background: var(--k-mint-deep);
  box-shadow: 0 8px 22px rgba(13, 148, 136, 0.32);
  transform: translateY(-1px);
}
.auth__submit:disabled { opacity: 0.7; cursor: default; }
.auth__submit--outline {
  background: rgba(255, 255, 255, 0.7);
  color: var(--k-ink-2);
  border: 1px solid var(--k-line);
}
.auth__submit--outline:hover:not(:disabled) {
  background: var(--k-mint-soft);
  color: var(--k-ink);
  box-shadow: none;
  transform: none;
}

/* 加载中旋转圈 */
.auth__spinner {
  width: 17px;
  height: 17px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: kaylaSpin 0.7s linear infinite;
  display: inline-block;
}
@keyframes kaylaSpin { to { transform: rotate(360deg); } }

/* 分隔线 + 支付宝登录 */
.auth__divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: var(--k-ink-3);
  font-size: 12.5px;
}
.auth__divider::before,
.auth__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--k-line);
}
.auth__divider > span { flex-shrink: 0; }
#alipayLoginBtn {
  margin-top: 0;
  background: var(--k-blue);
  box-shadow: 0 6px 18px rgba(22, 119, 255, 0.22);
}
#alipayLoginBtn:hover:not(:disabled) {
  background: #0b5ed7;
  box-shadow: 0 8px 20px rgba(22, 119, 255, 0.3);
}
#alipayHint {
  font-size: 12.5px;
  color: var(--k-ink-3);
  text-align: center;
  margin-top: 12px;
  line-height: 1.6;
}

/* 支付宝首次绑定选择面板 */
#alipayChoicePanel {
  margin-top: 16px;
  display: none;
  flex-direction: column;
  gap: 10px;
}

/* 底部切换区（注册入口按钮） */
.auth__footer {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--k-line);
  text-align: center;
}
.auth__footer .auth__hint {
  font-size: 13px;
  color: var(--k-ink-3);
  margin-bottom: 6px;
}
.auth__footer strong { color: var(--k-ink-2); font-weight: 600; }
#switchModeWrap { margin-top: 14px; }
#switchModeLink {
  display: inline-block;
  padding: 9px 30px;
  margin-top: 8px;
  border: 1.5px solid var(--k-mint);
  border-radius: 999px;
  color: var(--k-mint);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
#switchModeLink:hover { background: var(--k-mint); color: #fff; }

/* ---------- 入场动效 ---------- */
@keyframes kaylaFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- 弹窗（绑定手机号 / 支付宝授权，登录页复用） ---------- */
.auth__modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.auth__modal[hidden] { display: none; }
.auth__modal-mask {
  position: absolute;
  inset: 0;
  background: rgba(10, 46, 43, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: kaylaFadeIn 0.2s ease both;
}
.auth__modal-card {
  position: relative;
  width: min(88vw, 340px);
  background: rgba(255, 255, 255, 0.92);
  border-radius: 18px;
  padding: 28px 24px 24px;
  text-align: center;
  box-shadow: 0 14px 44px rgba(13, 148, 136, 0.2);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  animation: kaylaFadeUp 0.25s ease both;
}
.auth__modal-badge {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--k-blue);
  color: #fff;
  font-size: 30px;
  font-weight: 600;
  line-height: 56px;
  text-align: center;
}
.auth__modal-title { margin: 0 0 10px; font-size: 19px; font-weight: 600; color: var(--k-ink); }
.auth__modal-desc { margin: 0 0 22px; font-size: 13.5px; line-height: 1.7; color: var(--k-ink-2); }
.auth__modal-desc b { color: var(--k-blue); }
.auth__modal-actions { display: flex; gap: 10px; }
.auth__modal-btn {
  flex: 1;
  height: 42px;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  cursor: pointer;
  transition: opacity 0.15s;
}
.auth__modal-btn--ghost { background: #eef6f4; color: var(--k-ink-2); }
.auth__modal-btn--ghost:hover { background: #e2f0ec; }
.auth__modal-btn--primary { background: var(--k-blue); color: #fff; }
.auth__modal-btn--primary:hover { opacity: 0.9; }
.auth__modal-btn:disabled { opacity: 0.6; cursor: default; }
@keyframes kaylaFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- 响应式：移动端（海报式一屏体验） ----------
   设计说明：顶部品牌区作为视觉锚点（大 Logo + 短标语 + 柔光呼吸），
             表单卡负边距上浮悬浮于品牌区底部，克制动效营造高级感。
   性能说明：移动端不加载背景视频，背景光晕层精简，动效均为 GPU 合成。 */
@media (max-width: 860px) {
  /* 背景：更通透的薄荷渐变，顶部保留品牌光晕，减少绘制层数 */
  body {
    background-image:
      radial-gradient(ellipse 120% 46% at 50% -8%, rgba(45, 212, 191, 0.26), transparent 62%),
      linear-gradient(175deg, #f4fdfa 0%, #eaf9f5 52%, #e0f6f0 100%);
  }

  /* 整体：纵向布局 */
  .kayla-login {
    flex-direction: column;
    min-height: 100svh;
  }

  /* ---------- 顶部品牌区：海报式视觉锚点 ---------- */
  .kayla-brand {
    width: 100%;
    min-height: 0;
    align-items: flex-start;
    justify-content: flex-start;
    /* 顶部留出状态栏安全区；底部多留白让表单卡上浮盖住过渡 */
    padding: calc(env(safe-area-inset-top, 0px) + 40px) 26px 72px;
    background:
      radial-gradient(560px 300px at 88% -14%, rgba(153, 246, 228, 0.48), transparent 62%),
      radial-gradient(460px 260px at -10% 108%, rgba(20, 184, 166, 0.40), transparent 58%),
      linear-gradient(158deg, #12b3a2 0%, #0d9488 58%, #0a7f75 100%);
  }
  /* 移动端文字不压在图片上：暗色遮罩大幅减弱，保留通透感 */
  .kayla-brand::before {
    background: linear-gradient(180deg, rgba(8, 47, 45, 0.08) 0%, rgba(8, 47, 45, 0.16) 100%);
  }
  /* 装饰光晕：柔化缩小 + 缓慢呼吸动画（水感） */
  .kayla-brand::after {
    right: -64px;
    bottom: -96px;
    width: 240px;
    height: 240px;
    animation: kaylaBreath 5.5s ease-in-out infinite;
  }
  /* 移动端隐藏背景视频（JS 也不会加载 src，双保险节省流量） */
  .kayla-brand__video { display: none; }
  .kayla-brand__inner { width: 100%; padding: 0; margin: 0; }

  /* 品牌 Logo：更大 + 柔光投影，成为首屏视觉中心 */
  .kayla-logo { margin-bottom: 18px; gap: 11px; }
  .kayla-logo__mark {
    width: 50px;
    height: 50px;
    border-radius: 15px;
    box-shadow: 0 10px 26px rgba(13, 148, 136, 0.45);
  }
  .kayla-logo__text { font-size: 30px; }

  /* 移动端隐藏桌面端主标语与功能列表，改用短标语 */
  .kayla-brand__headline,
  .kayla-brand__desc,
  .kayla-brand__points { display: none; }
  .kayla-brand__slogan-m {
    display: block;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 2px 16px rgba(13, 148, 136, 0.35);
    margin: 0;
  }

  /* ---------- 表单区：负边距上浮悬浮卡片 ---------- */
  .kayla-form {
    position: relative;
    z-index: 2;
    margin-top: -38px;
    padding: 0 18px calc(env(safe-area-inset-bottom, 0px) + 36px);
    align-items: stretch;
  }
  .kayla-form__inner {
    width: 100%;
    border-radius: 26px;
    padding: 32px 22px 28px;
    box-shadow: 0 24px 56px rgba(13, 148, 136, 0.16),
                0 2px 10px rgba(13, 148, 136, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.8);
  }
  .kayla-title { font-size: 27px; letter-spacing: -0.01em; }

  /* 输入框升级：更高、更圆润、聚焦描边 */
  .auth__field { margin-bottom: 16px; }
  .auth__label { margin-bottom: 8px; }
  .auth__input {
    height: 50px;
    border-radius: 14px;
    font-size: 15.5px;
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(214, 236, 231, 0.95);
  }
  .auth__input:focus {
    border-color: var(--k-mint);
    box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.13);
  }

  /* 提交按钮：渐变 + 底部高光 + 按压反馈 */
  .auth__submit {
    height: 52px;
    border-radius: 14px;
    font-size: 16.5px;
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 62%, #0f766e 100%);
    box-shadow: 0 12px 26px rgba(13, 148, 136, 0.30);
  }
  .auth__submit:active:not(:disabled) { transform: scale(0.975); }
  .auth__submit--outline {
    background: rgba(255, 255, 255, 0.72);
    box-shadow: none;
  }
  #alipayLoginBtn {
    background: linear-gradient(135deg, #4096ff 0%, #1677ff 62%, #0f5fd7 100%);
    box-shadow: 0 10px 22px rgba(22, 119, 255, 0.26);
  }
  #alipayLoginBtn:active:not(:disabled) { transform: scale(0.975); }

  /* ---------- 入场动效（品牌区 → 表单卡 错开上浮） ---------- */
  .kayla-brand__inner .kayla-logo,
  .kayla-brand__inner .kayla-brand__slogan-m {
    opacity: 0;
  }
  .kayla-brand__inner .kayla-logo {
    opacity: 1;
    animation: kaylaBrandRise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.05s backwards;
  }
  .kayla-brand__inner .kayla-brand__slogan-m {
    opacity: 1;
    animation: kaylaBrandRise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.18s backwards;
  }
  /* 表单卡：比品牌区稍晚上浮，形成层次 */
  .kayla-form__inner { animation: kaylaFadeUp 0.6s 0.14s ease both; }
}

/* 光晕呼吸动画：品牌装饰光晕缓慢放大缩小，营造水感（移动端用） */
@keyframes kaylaBreath {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50%      { transform: scale(1.12); opacity: 1; }
}

/* 尊重系统「减弱动态效果」：移动端动画全部关闭，直接显示 */
@media (prefers-reduced-motion: reduce) {
  .kayla-brand::after,
  .kayla-brand__inner .kayla-logo,
  .kayla-brand__inner .kayla-brand__slogan-m,
  .kayla-form__inner {
    opacity: 1;
    animation: none;
  }
}