/* 登录页 · 严格按 animal-island-ui 规范（skill: animal-island-ui-style）
   规则 3 无纯黑/冷灰、4 焦点黄或薄荷青、5 交互元素 ≥12px 圆角（按钮输入 50px 药丸）、
   6 3D 立体阴影只给主按钮（卡片不投影）、8 字重 ≥400、9 动效 cubic-bezier(.4,0,.2,1) 0.15–0.35s、
   14 只用令牌不写死颜色。色源：tokens.css */

/* 独立重置：登录页只引 tokens.css + 本文件，站点没统一 box-sizing。
   不兜住的话 min-height:100dvh + 上下 40px 内边距会撑成 980px（视口 900）→ 页面滚动、卡片下移。 */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

.login-stage {
  position: relative;
  box-sizing: border-box;
  min-height: 100dvh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  overflow: hidden;
  font-family: var(--ai-font, 'MaoKenWangXingYuan', system-ui, sans-serif);
  color: var(--ai-text);
  background-color: var(--ai-bg);
  /* 第一层：暖雾薄纱（压住照片让卡片读得清）→ 第二层：背景图 → 第三层：兜底渐变 */
  background-image:
    var(--ai-login-veil),
    url('/static/img/login-bg.webp'),
    linear-gradient(180deg, var(--ai-bg) 0%, var(--ai-surface) 55%, var(--ai-surface-3) 100%);
  background-size: cover, cover, cover;
  background-position: center, center, center;
  background-repeat: no-repeat;
  background-attachment: fixed, fixed, fixed;
}

/* 卡片周围再收一层光晕，中央最亮、四周沉下去 */
.login-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--ai-login-glow);
}

/* ── 装饰层 ①：背景气泡（静水氛围）─────────────────────
   纯 CSS 画，不引图片素材；只做氛围、不抢卡片。
   prefers-reduced-motion 时整体隐藏（不是减速）。 */
.login-bubbles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.login-bubbles i {
  position: absolute;
  left: var(--x);
  bottom: -8vh;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: var(--ai-primary-lt);
  border: 1.5px solid var(--ai-primary);
  opacity: 0;
  animation: bubble-rise var(--d) linear infinite;
  animation-delay: var(--dl);
}
@keyframes bubble-rise {
  0%   { transform: translateY(0);      opacity: 0; }
  10%  {                                opacity: .50; }
  85%  {                                opacity: .32; }
  100% { transform: translateY(-114vh); opacity: 0; }
}

/* ── 装饰层 ②：卡片底部的水波 + 小鱼群 ─────────────────
   尺寸按视觉复核调过：初版 240px 宽、鱼太小看不出是鱼，放大到 300px。 */
.login-fish {
  margin: 14px auto 0;
  max-width: 300px;
}
.login-fish svg { display: block; width: 100%; height: auto; }
.login-fish .fish { animation: fish-bob 3.6s var(--ai-ease) infinite; }
.login-fish .f2 { animation-duration: 4.4s; animation-delay: -1.3s; }
.login-fish .f3 { animation-duration: 3.1s; animation-delay: -2.2s; }
@keyframes fish-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .login-bubbles { display: none; }
  .login-fish .fish { animation: none; }
}

/* ── 登录卡：奶油纸面 + 描边，无阴影（规则 6）── */
.login-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 424px;
  padding: 46px 38px 34px;
  text-align: center;
  background: var(--ai-surface);
  border: 1px solid var(--ai-border);
  border-radius: var(--ai-r-lg, 28px);
}

/* ── 标题：燕尾旗（规则 7：Title 是燕尾旗，不是圆角块）── */
.login-ribbon-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 6px;
}

.login-ribbon {
  display: inline-block;
  margin: 0;
  padding: 9px 34px 10px;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--ai-text-inv);
  background: var(--ai-primary-solid);
  clip-path: polygon(0 0, 100% 0, calc(100% - 13px) 50%, 100% 100%, 0 100%, 13px 50%);
  transition: transform var(--ai-t-mid) var(--ai-ease);
}

/* 旗子两端的折角暗面 */
.login-ribbon-wrap::before,
.login-ribbon-wrap::after {
  content: "";
  position: absolute;
  top: 100%;
  width: 13px;
  height: 7px;
  background: var(--ai-primary-solid-dk);
}
.login-ribbon-wrap::before { left: 0; clip-path: polygon(0 0, 100% 0, 0 100%); }
.login-ribbon-wrap::after  { right: 0; clip-path: polygon(0 0, 100% 0, 100% 100%); }

.login-sub {
  margin: 20px 0 22px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--ai-text-3);
}

/* ── 报错/限速提示 ──
   文字必须用 --ai-danger-ink（#a52f2f，在 --ai-danger-lt 上 6.64:1）；
   直接用 --ai-danger(#e05a5a) 只有 3.10:1，低于本站正文 4.5:1 门槛。 */
.login-err {
  margin: 0 0 18px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ai-danger-ink);
  background: var(--ai-danger-lt);
  border-radius: var(--ai-r-sm, 12px);
}

.login-form { margin: 0; }

.login-field { text-align: left; }
.login-field + .login-field { margin-top: 18px; }

.login-field label {
  display: block;
  margin: 0 0 8px 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ai-text-3);
}

/* ── 输入框：50px 药丸，焦点用黄环（规则 4/5）── */
.login-input {
  width: 100%;
  height: 50px;
  padding: 0 22px;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  color: var(--ai-text);
  background: var(--ai-surface-2);
  border: 1.5px solid var(--ai-border);
  border-radius: var(--ai-r-pill, 50px);
  transition: border-color var(--ai-t-fast) var(--ai-ease),
              box-shadow var(--ai-t-fast) var(--ai-ease),
              background-color var(--ai-t-fast) var(--ai-ease);
}

.login-input::placeholder { color: var(--ai-text-3); font-weight: 400; }

.login-input:hover { border-color: var(--ai-border-hover); }

.login-input:focus {
  outline: none;
  border-color: var(--ai-primary);
  box-shadow: 0 0 0 3.5px var(--ai-focus-halo);
}

/* 浏览器自动填充会糊上冷黄底，压回暖色 */
.login-input:-webkit-autofill,
.login-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ai-text);
  -webkit-box-shadow: 0 0 0 60px var(--ai-surface-2) inset;
}

/* ── 主按钮：薄荷绿药丸 + 3D 堆叠阴影（规则 6 允许，仅主按钮）── */
.login-btn {
  width: 100%;
  height: 50px;
  margin-top: 26px;
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--ai-text-inv);
  background: var(--ai-primary-solid);
  border: none;
  border-radius: var(--ai-r-pill, 50px);
  box-shadow: 0 4px 0 var(--ai-primary-solid-dk);
  cursor: pointer;
  transition: transform var(--ai-t-fast) var(--ai-ease),
              box-shadow var(--ai-t-fast) var(--ai-ease),
              background-color var(--ai-t-fast) var(--ai-ease);
}

.login-btn:hover { background: var(--ai-primary-solid-hi); }
.login-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ai-primary-solid-dk); }
.login-btn:focus-visible { outline: none; box-shadow: 0 4px 0 var(--ai-primary-solid-dk), 0 0 0 4px var(--ai-focus-halo); }

.login-hint {
  margin: 22px 0 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--ai-text-3);
}
.login-dot { margin: 0 6px; opacity: .6; }

.login-island {
  display: block;
  width: 132px;
  height: auto;
  margin: 18px auto 0;
  opacity: .9;
}

@media (max-width: 420px) {
  .login-card { padding: 34px 22px 26px; border-radius: var(--ai-r-md, 20px); }
  .login-ribbon { font-size: 19px; padding: 8px 28px 9px; }
  .login-island { width: 112px; }
}

@media (prefers-reduced-motion: reduce) {
  .login-input, .login-btn, .login-ribbon { transition: none; }
}