/*! v7工作室AI版 · 登录页「Kinetic 重构」皮肤层（mk-r50-auth.css）[R50]
 * ---------------------------------------------------------------------------
 * 爹的指令：「面板重新设计 学习他 有动态效果：C:\Users\Administrator\Desktop\渗透V7新版」
 * 参考基线：原版墨影v7 登录页（01_前端源码\index-DhRZsjf9.css 的 .kinetic-auth / .kinetic-lens 设计）
 *
 * 学到的「动态语言」：
 *   ① 左侧深蓝故事板：光标跟随的径向光晕（--auth-x/--auth-y）+ 网格底纹 + 视差
 *   ② 中央「kinetic-lens」机器人脸：外/内双环 + 两段弧 + 3 个发光点 + 会跟光标转的眼睛
 *   ③ 反应态：聚焦账号=typing（身体抬起倾斜）· 聚焦密码=closed（眯眼）· 悬停按钮=side ·
 *      提交中=submit（张嘴发光）· 出错=surprise（变紫粉、瞪眼、圆嘴）
 *   ④ 右侧表单：藏蓝主色 + 大圆角 + 聚焦上浮 + 按钮扫光
 *
 * 本层只是「皮肤」：浏览器里的 DOM 由 mk-r50-auth.js 注入机器人脸，删 index.html 两行即完全回退。
 */

/* ============================ 0. 变量 ============================ */
html body main.auth-page.auth-page-interactive {
  --mk50-navy-0: #0b152b;
  --mk50-navy-1: #101d39;
  --mk50-navy-2: #1c2c52;
  --mk50-ink: #192640;
  --mk50-muted: #737e92;
  --mk50-line: #dce2ed;
  --mk50-accent: #8aa6f9;
  --mk50-accent-2: #a8c3ff;
}

/* ============================ 1. 页面底色 ============================ */
html[data-theme="light"] body main.auth-page.auth-page-interactive {
  background: #e9edf5 !important;
  background-image: none !important;
}
html body main.auth-page.auth-page-interactive::before {
  background: radial-gradient(circle 420px at var(--auth-x) var(--auth-y), #5265e626, transparent 70%) !important;
}

/* ============================ 2. 外壳 ============================ */
html[data-theme="light"] body main.auth-page.auth-page-interactive .auth-shell {
  max-width: 1128px !important;
  min-height: 748px !important;
  border-radius: 27px !important;
  border: 1px solid #26395b1f !important;
  background: #fbfcff !important;
  box-shadow: 0 28px 80px #1c284824, 0 3px 10px #1c28480d !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  grid-template-columns: minmax(0, 1.06fr) minmax(430px, .94fr) !important;
}

/* ============================ 3. 左侧「故事板」= 深蓝 kinetic ============================ */
html[data-theme="light"] body main.auth-page.auth-page-interactive .auth-brand-panel {
  color: #f9fbff !important;
  padding: 28px 36px 20px !important;
  border: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at var(--auth-x) var(--auth-y), #5066b45c, transparent 37%),
    radial-gradient(circle at 92% 11%, #5b6dc738, transparent 32%),
    linear-gradient(150deg, #1c2c52 0%, #101d39 52%, #0b152b 100%) !important;
  background-image:
    radial-gradient(circle at var(--auth-x) var(--auth-y), #5066b45c, transparent 37%),
    radial-gradient(circle at 92% 11%, #5b6dc738, transparent 32%),
    radial-gradient(circle at 50% 118%, #627ee22e, transparent 46%),
    linear-gradient(150deg, #1c2c52 0%, #101d39 52%, #0b152b 100%) !important;
  overflow: hidden !important;
  isolation: isolate !important;
  transition: background-position .2s linear !important;
}

/* 网格底纹（原 ::after 的 1px 线不要了） */
html body main.auth-page.auth-page-interactive .auth-brand-panel::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important;
  height: auto !important;
  background: none !important;
  background-image:
    linear-gradient(#a8c2ff1a 1px, transparent 1px),
    linear-gradient(90deg, #a8c2ff1a 1px, transparent 1px) !important;
  background-size: 46px 46px !important;
  -webkit-mask-image: linear-gradient(#000, rgba(0,0,0,0) 90%) !important;
  mask-image: linear-gradient(#000, rgba(0,0,0,0) 90%) !important;
  opacity: .75 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  animation: mk50-grid-drift 22s linear infinite !important;
}
/* 原来的大圆环装饰 → 收敛成右上角一圈细光环 */
html body main.auth-page.auth-page-interactive .auth-brand-panel::before {
  content: "" !important;
  position: absolute !important;
  top: -206px !important;
  right: -186px !important;
  bottom: auto !important;
  left: auto !important;
  width: 430px !important;
  height: 430px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(168, 194, 255, .16) !important;
  box-shadow: 0 0 0 62px rgba(168, 194, 255, .045), 0 0 0 132px rgba(168, 194, 255, .03) !important;
  background: none !important;
  opacity: 1 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  animation: mk50-halo 9s ease-in-out infinite !important;
}

/* 左侧内容统一抬到网格之上 */
html body main.auth-page.auth-page-interactive .auth-brand-panel > * { position: relative !important; z-index: 2 !important; }

/* --- 3.1 顶部品牌 --- */
html[data-theme="light"] body main.auth-page.auth-page-interactive .mkv3-lock { gap: 13px !important; margin-bottom: 16px !important; }
html body main.auth-page.auth-page-interactive .auth-brand-panel .mkv3-mark {
  background: linear-gradient(150deg, #2b3f74, #16264a) !important;
  border: 1px solid rgba(168, 194, 255, .30) !important;
  box-shadow: 0 12px 30px -14px #00000073, inset 0 1px 0 rgba(255,255,255,.10) !important;
}
html body main.auth-page.auth-page-interactive .auth-brand-panel .mkv3-lock-txt b { color: #f4f7ff !important; letter-spacing: .02em !important; }
html body main.auth-page.auth-page-interactive .auth-brand-panel .mkv3-lock-txt b em { color: #9fb6ff !important; }
html body main.auth-page.auth-page-interactive .auth-brand-panel .mkv3-lock-txt i { color: #a7b6d6 !important; }

/* --- 3.2 机器人脸容器（原来 display:none，这里变成主角） --- */
html[data-theme="light"] body main.auth-page.auth-page-interactive .auth-brand-panel .auth-ambient-visual,
html body main.auth-page.auth-page-interactive .auth-brand-panel .auth-ambient-visual {
  display: grid !important;
  position: static !important;
  width: 100% !important;
  height: auto !important;
  margin: 4px 0 0 !important;
  place-items: center !important;
  transform: translate3d(var(--auth-shift-x), var(--auth-shift-y), 0) !important;
  transition: transform .34s cubic-bezier(.2,.75,.25,1) !important;
  border-radius: 0 !important;
  pointer-events: none !important;
}
/* 旧的抽象环/核心隐藏（机器人脸自带） */
html body main.auth-page.auth-page-interactive .auth-brand-panel .auth-orbit,
html body main.auth-page.auth-page-interactive .auth-brand-panel .auth-orbit-core { display: none !important; }

/* --- 3.3 文案 --- */
html body main.auth-page.auth-page-interactive .auth-brand-panel .auth-eyebrow {
  color: #8fa5dd !important;
  font-size: 10.5px !important;
  letter-spacing: .3em !important;
}
html body main.auth-page.auth-page-interactive .auth-brand-panel .auth-brand-copy h1 {
  color: #f7faff !important;
  font-size: 25px !important;
  line-height: 1.42 !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  margin: 12px 0 10px !important;
  text-shadow: 0 12px 34px rgba(4, 10, 26, .45) !important;
}
html body main.auth-page.auth-page-interactive .auth-brand-panel .auth-brand-copy p {
  color: #aebbd4 !important;
  font-size: 12.5px !important;
  line-height: 1.8 !important;
}
html body main.auth-page.auth-page-interactive .auth-brand-panel .auth-brand-copy { margin: 2px 0 6px !important; }

/* --- 3.4 能力 chip --- */
html body main.auth-page.auth-page-interactive .auth-brand-panel .auth-capabilities { margin-top: 4px !important; margin-bottom: 10px !important; gap: 7px !important; }
html body main.auth-page.auth-page-interactive .auth-brand-panel .auth-capabilities > span {
  color: #dfe7ff !important;
  background: rgba(168, 194, 255, .10) !important;
  border: 1px solid rgba(168, 194, 255, .22) !important;
  border-radius: 999px !important;
  padding: 6px 12px !important;
  font-size: 11px !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
html body main.auth-page.auth-page-interactive .auth-brand-panel .auth-capabilities .anticon { color: #7ee2b8 !important; }

/* --- 3.5 四宫格 --- */
html body main.auth-page.auth-page-interactive .auth-brand-panel .mkv3-grid { grid-template-columns: 1fr 1fr !important; gap: 7px !important; margin-top: 6px !important; }
html body main.auth-page.auth-page-interactive .auth-brand-panel .mkv3-grid > span {
  background: rgba(168, 194, 255, .07) !important;
  border: 1px solid rgba(168, 194, 255, .15) !important;
  border-radius: 11px !important;
  padding: 7px 10px !important;
  transition: transform .22s cubic-bezier(.2,.75,.25,1), background .22s, border-color .22s !important;
}
html body main.auth-page.auth-page-interactive .auth-brand-panel .mkv3-grid > span:hover {
  transform: translateY(-3px) !important;
  background: rgba(168, 194, 255, .13) !important;
  border-color: rgba(168, 194, 255, .34) !important;
}
html body main.auth-page.auth-page-interactive .auth-brand-panel .mkv3-grid .mk-i { color: #9fb6ff !important; }
html body main.auth-page.auth-page-interactive .auth-brand-panel .mkv3-grid b { color: #edf2ff !important; font-size: 12px !important; }
html body main.auth-page.auth-page-interactive .auth-brand-panel .mkv3-grid em { color: #93a3c4 !important; font-size: 10.5px !important; font-style: normal !important; }

/* --- 3.6 页脚 --- */
html body main.auth-page.auth-page-interactive .auth-brand-panel .auth-brand-footer {
  margin-top: auto !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(194, 208, 238, .16) !important;
  color: #8b9dc0 !important;
  font-size: 11px !important;
}
html body main.auth-page.auth-page-interactive .auth-brand-panel .auth-status-dot {
  background: #5ed39d !important;
  box-shadow: 0 0 0 4px rgba(94, 211, 157, .18) !important;
  animation: mk50-dot 2.4s ease-in-out infinite !important;
}

/* ============================ 4. 机器人脸 kinetic-lens ============================ */
html body main.auth-page .kinetic-lens {
  position: relative !important;
  width: 186px !important;
  height: 186px !important;
  aspect-ratio: 1 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
}
html body main.auth-page .kinetic-lens__orbit {
  position: absolute !important;
  border: 1px solid rgba(170, 194, 245, .30) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
}
html body main.auth-page .kinetic-lens::before {
  content: " !important;
  position: absolute !important;
  inset: 12% !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(120, 152, 255, .30), rgba(120, 152, 255, 0) 70%) !important;
  filter: blur(4px) !important;
  pointer-events: none !important;
  animation: mk50-glow 6s ease-in-out infinite !important;
}
html body main.auth-page .kinetic-lens__orbit--outer { inset: 3% !important; animation: mk50-spin 34s linear infinite !important; }
html body main.auth-page .kinetic-lens__orbit--inner {
  inset: 15% !important;
  border-style: dashed !important;
  border-color: rgba(170, 194, 245, .22) !important;
  animation: mk50-spin 22s linear infinite reverse !important;
}
html body main.auth-page .kinetic-lens__arc {
  position: absolute !important;
  border: 2px solid transparent !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  transition: transform .6s cubic-bezier(.2,.75,.25,1), border-color .3s !important;
}
html body main.auth-page .kinetic-lens__arc--one {
  inset: 3% !important;
  border-top-color: #8aa6f9 !important;
  border-right-color: rgba(138, 166, 249, .45) !important;
  transform: rotate(-35deg) !important;
  animation: mk50-arc 12s ease-in-out infinite !important;
}
html body main.auth-page .kinetic-lens__arc--two {
  inset: 15% !important;
  border-bottom-color: rgba(194, 211, 255, .85) !important;
  transform: rotate(24deg) !important;
  animation: mk50-arc2 15s ease-in-out infinite !important;
}
html body main.auth-page .kinetic-lens__body {
  position: relative !important;
  width: 48% !important;
  aspect-ratio: .95 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 36% 36% 33% 33% !important;
  background: linear-gradient(150deg, #6885df 0%, #3c56ae 48%, #273e86 100%) !important;
  border: 1px solid rgba(202, 216, 255, .56) !important;
  box-shadow: inset 10px 11px 22px rgba(237, 243, 255, .15), inset -14px -16px 27px rgba(8, 21, 63, .28),
              0 26px 48px rgba(0, 0, 0, .38), 0 0 48px rgba(98, 126, 226, .30) !important;
  transition: transform .42s cubic-bezier(.2,.75,.25,1), box-shadow .28s, background .28s !important;
  animation: mk50-breathe 5.5s ease-in-out infinite !important;
  will-change: transform !important;
}
html body main.auth-page .kinetic-lens__eyebrow {
  width: 32% !important;
  height: 3.5px !important;
  margin-top: 13% !important;
  border-radius: 999px !important;
  background: rgba(9, 23, 67, .30) !important;
}
html body main.auth-page .kinetic-lens__eyes { display: flex !important; gap: 7px !important; margin-top: 13% !important; }
html body main.auth-page .kinetic-lens__eye {
  position: relative !important;
  width: 22px !important;
  height: 24px !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border-radius: 48% 48% 45% 45% !important;
  background: #f7f9ff !important;
  box-shadow: inset 0 -5px 7px rgba(153, 174, 226, .26), 0 3px 7px rgba(10, 21, 63, .22) !important;
  transition: transform .22s, background .22s !important;
  animation: mk50-blink 6.2s ease-in-out infinite !important;
}
html body main.auth-page .kinetic-lens__pupil {
  display: block !important;
  width: 35% !important;
  aspect-ratio: 1 !important;
  border-radius: 50% !important;
  background: #1b2d5d !important;
  box-shadow: 0 0 0 3px rgba(35, 61, 116, .12) !important;
  transition: transform 90ms linear, opacity .15s !important;
  will-change: transform !important;
}
html body main.auth-page .kinetic-lens__mouth {
  width: 18px !important;
  height: 8px !important;
  margin-top: 11% !important;
  border-bottom: 3px solid rgba(8, 25, 71, .70) !important;
  border-radius: 0 0 50% 50% !important;
  transition: all .22s !important;
}
html body main.auth-page .kinetic-lens__chin {
  position: absolute !important;
  bottom: 11% !important;
  width: 17% !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: rgba(196, 212, 255, .22) !important;
}
html body main.auth-page .kinetic-lens__point {
  position: absolute !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #a8c3ff !important;
  box-shadow: 0 0 0 5px rgba(168, 195, 255, .11), 0 0 16px #8daaff !important;
  animation: mk50-point 3.2s ease-in-out infinite !important;
}
html body main.auth-page .kinetic-lens__point--one { top: 7% !important; left: 48% !important; }
html body main.auth-page .kinetic-lens__point--two { width: 5px !important; height: 5px !important; bottom: 19% !important; left: 8% !important; animation-delay: 1.1s !important; }
html body main.auth-page .kinetic-lens__point--three { width: 4px !important; height: 4px !important; top: 44% !important; right: 2% !important; animation-delay: 2.1s !important; }

/* --- 4.1 反应态 --- */
html body main.auth-page .kinetic-lens--typing .kinetic-lens__body { transform: translateY(-7px) rotate(-2deg) !important; }
html body main.auth-page .kinetic-lens--typing .kinetic-lens__arc--one { transform: rotate(-12deg) !important; animation-play-state: paused !important; }
html body main.auth-page .kinetic-lens--side .kinetic-lens__eyes { transform: translateX(-5px) !important; }
html body main.auth-page .kinetic-lens--side .kinetic-lens__arc--two { transform: rotate(9deg) !important; }
html body main.auth-page .kinetic-lens--closed .kinetic-lens__eye { background: #c5d2ff !important; transform: scaleY(.12) !important; animation-play-state: paused !important; }
html body main.auth-page .kinetic-lens--closed .kinetic-lens__pupil { opacity: 0 !important; }
html body main.auth-page .kinetic-lens--closed .kinetic-lens__mouth { width: 15px !important; height: 0 !important; border-radius: 0 !important; }
html body main.auth-page .kinetic-lens--surprise .kinetic-lens__body {
  background: linear-gradient(150deg, #ba758c, #68426f) !important;
  transform: translateY(-5px) rotate(2deg) !important;
  box-shadow: 0 0 0 9px rgba(255, 141, 160, .11), 0 26px 48px rgba(0, 0, 0, .40) !important;
  animation-play-state: paused !important;
}
html body main.auth-page .kinetic-lens--surprise .kinetic-lens__eye { transform: scale(1.13) !important; }
html body main.auth-page .kinetic-lens--surprise .kinetic-lens__mouth {
  width: 15px !important; height: 18px !important;
  border: 2.5px solid rgba(38, 12, 41, .74) !important;
  border-radius: 50% !important;
}
html body main.auth-page .kinetic-lens--submit .kinetic-lens__body {
  transform: translateY(-4px) rotate(-2deg) !important;
  box-shadow: 0 0 0 9px rgba(163, 194, 255, .11), 0 26px 48px rgba(0, 0, 0, .40), 0 0 64px rgba(163, 194, 255, .38) !important;
}
html body main.auth-page .kinetic-lens--submit .kinetic-lens__mouth { width: 28px !important; height: 15px !important; }
html body main.auth-page .kinetic-lens--submit .kinetic-lens__arc--one { transform: rotate(26deg) !important; }

/* ============================ 5. 右侧表单（学 V7：藏蓝 + 大圆角，去掉彩虹渐变） ============================ */
html body main.auth-page.auth-page-interactive .auth-form-panel { background: #fbfcff !important; }

html body main.auth-page.auth-page-interactive .auth-form-heading h2 {
  color: var(--mk50-ink) !important;
  font-size: clamp(28px, 2.5vw, 34px) !important;
  font-weight: 750 !important;
  letter-spacing: -.03em !important;
}
html body main.auth-page.auth-page-interactive .auth-form-heading p { color: var(--mk50-muted) !important; }
html body main.auth-page.auth-page-interactive .auth-form-kicker { color: #5369b3 !important; }
html body main.auth-page.auth-page-interactive .auth-form-kicker::before { background: #6b83d9 !important; }

html body main.auth-page.auth-page-interactive .auth-field > span:first-child { color: #35445f !important; letter-spacing: .04em !important; }
html body main.auth-page.auth-page-interactive .auth-field.is-active > span:first-child { color: #4357c9 !important; }

html body main.auth-page.auth-page-interactive .ant-input-affix-wrapper {
  min-height: 57px !important;
  height: 57px !important;
  border-radius: 13px !important;
  background: #fff !important;
  border: 1px solid var(--mk50-line) !important;
  transition: border-color .18s, box-shadow .18s, transform .18s !important;
}
html body main.auth-page.auth-page-interactive .ant-input-affix-wrapper:hover { border-color: #b8c5df !important; }
html body main.auth-page.auth-page-interactive .ant-input-affix-wrapper-focused,
html body main.auth-page.auth-page-interactive .ant-input-affix-wrapper:focus-within {
  border-color: #566ed2 !important;
  background: #fff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 0 0 4px #566ed21c !important;
}
html body main.auth-page.auth-page-interactive .ant-input { color: var(--mk50-ink) !important; font-size: 15px !important; }
html body main.auth-page.auth-page-interactive .ant-input::placeholder { color: #a2adbd !important; }
html body main.auth-page.auth-page-interactive .ant-input-prefix .anticon,
html body main.auth-page.auth-page-interactive .ant-input-suffix .anticon { color: #7b8aa2 !important; }

/* 步骤条 → V7 的 section-line 观感 */
html body main.auth-page.auth-page-interactive .auth-step-track > span {
  background: #f1f4fa !important;
  border: 1px solid #e2e7f1 !important;
}
html body main.auth-page.auth-page-interactive .auth-step-track > span i { background: #fff !important; color: #6d7fa8 !important; }
html body main.auth-page.auth-page-interactive .auth-step-track > span b { color: #6d7fa8 !important; }
html body main.auth-page.auth-page-interactive .auth-step-track > span.is-active {
  background: linear-gradient(100deg, #263d79, #435eb5) !important;
  border-color: transparent !important;
  box-shadow: 0 10px 24px -14px rgba(38, 61, 121, .75) !important;
}
html body main.auth-page.auth-page-interactive .auth-step-track > span.is-active i { background: rgba(255,255,255,.22) !important; color: #fff !important; }
html body main.auth-page.auth-page-interactive .auth-step-track > span.is-active b { color: #fff !important; }
html body main.auth-page.auth-page-interactive .auth-step-track em { background: #dfe3eb !important; }

/* 主按钮 */
html body main.auth-page.auth-page-interactive .auth-submit {
  min-height: 57px !important;
  height: 57px !important;
  border-radius: 13px !important;
  background: linear-gradient(110deg, #263d79, #435eb5) !important;
  color: #fff !important;
  font-size: 14.5px !important;
  font-weight: 750 !important;
  letter-spacing: .02em !important;
  box-shadow: 0 18px 40px -20px rgba(38, 61, 121, .78) !important;
}
html body main.auth-page.auth-page-interactive .auth-submit:hover {
  filter: brightness(1.08) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 24px 48px -20px rgba(38, 61, 121, .88) !important;
}
html body main.auth-page.auth-page-interactive .auth-submit:active { transform: translateY(0) !important; }

html body main.auth-page.auth-page-interactive .auth-security-note {
  border: 1px dashed #dfe5f0 !important;
  background: #f7f9fd !important;
  color: #6f7c8e !important;
}
html body main.auth-page.auth-page-interactive .auth-security-note strong { color: #4b566c !important; }
html body main.auth-page.auth-page-interactive .auth-security-note .anticon { color: #397b65 !important; }
html body main.auth-page.auth-page-interactive .auth-form-footer { color: #a1aab8 !important; border-top: 1px solid #ecf0f6 !important; }
html body main.auth-page.auth-page-interactive .mkv3-hint {
  background: #f5f8fe !important;
  border: 1px solid #e3e9f4 !important;
  color: #6f7c8e !important;
  border-radius: 11px !important;
}
html body main.auth-page.auth-page-interactive .mkv3-hint .mk-i { color: #6b83d9 !important; }

/* ============================ 6. 进场动画（错峰） ============================ */
html body main.auth-page .auth-brand-panel .mkv3-lock { animation: mk50-in .7s cubic-bezier(.16,1,.3,1) both !important; }
html body main.auth-page .auth-brand-panel .auth-ambient-visual { animation: mk50-in .9s cubic-bezier(.16,1,.3,1) .08s both !important; }
html body main.auth-page .auth-brand-panel .auth-brand-copy { animation: mk50-in .95s cubic-bezier(.16,1,.3,1) .16s both !important; }
html body main.auth-page .auth-brand-panel .auth-capabilities { animation: mk50-in 1s cubic-bezier(.16,1,.3,1) .24s both !important; }
html body main.auth-page .auth-brand-panel .mkv3-grid { animation: mk50-in 1.05s cubic-bezier(.16,1,.3,1) .32s both !important; }
html body main.auth-page .auth-form-heading,
html body main.auth-page .auth-step-track,
html body main.auth-page .auth-form { animation: mk50-in .85s cubic-bezier(.16,1,.3,1) .1s both !important; }

/* ============================ 7. 关键帧 ============================ */
@keyframes mk50-spin { to { transform: rotate(360deg); } }
@keyframes mk50-arc { 0%,100% { transform: rotate(-35deg); } 50% { transform: rotate(-14deg); } }
@keyframes mk50-arc2 { 0%,100% { transform: rotate(24deg); } 50% { transform: rotate(48deg); } }
@keyframes mk50-breathe { 0%,100% { scale: 1; } 50% { scale: 1.026; } }
@keyframes mk50-blink { 0%,92%,100% { transform: scaleY(1); } 95%,97% { transform: scaleY(.08); } }
@keyframes mk50-point { 0%,100% { opacity: .45; transform: scale(.86); } 50% { opacity: 1; transform: scale(1.14); } }
@keyframes mk50-grid-drift { to { background-position: 46px 46px, 46px 46px; } }
@keyframes mk50-halo { 0%,100% { opacity: .8; transform: scale(1); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes mk50-dot { 0%,100% { box-shadow: 0 0 0 4px rgba(94,211,157,.14); } 50% { box-shadow: 0 0 0 7px rgba(94,211,157,.05); } }
@keyframes mk50-glow { 0%,100% { opacity: .55; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes mk50-in { from { opacity: 0; transform: translateY(13px); } to { opacity: 1; transform: none; } }

/* ============================ 8. 响应式 ============================ */
@media (max-height: 900px) and (min-width: 861px) {
  html body main.auth-page .kinetic-lens { width: 158px !important; height: 158px !important; }
  html body main.auth-page .kinetic-lens__eye { width: 17px !important; height: 19px !important; }
  html body main.auth-page.auth-page-interactive .auth-shell { min-height: 0 !important; }
}
@media (max-width: 1024px) {
  html body main.auth-page.auth-page-interactive .auth-brand-panel { padding: 24px 26px 20px !important; }
  html body main.auth-page .kinetic-lens { width: 150px !important; height: 150px !important; }
  html body main.auth-page .kinetic-lens__eye { width: 17px !important; height: 19px !important; }
  html body main.auth-page .kinetic-lens__eyes { gap: 6px !important; }
}
@media (max-width: 860px) {
  /* 窄屏：品牌板被原样式藏起来，机器人脸跟着藏，不占位 */
  html body main.auth-page.auth-page-interactive .auth-mobile-logo { display: block !important; }
}

@media (max-height: 830px) {
  html[data-theme="light"] body main.auth-page.auth-page-interactive.auth-page-interactive .auth-shell { min-height: 0 !important; }
  html body main.auth-page .kinetic-lens { width: 132px !important; height: 132px !important; }
  html body main.auth-page .kinetic-lens__eye { width: 15px !important; height: 17px !important; }
  html body main.auth-page .kinetic-lens__eyes { gap: 5px !important; }
  html body main.auth-page .kinetic-lens__mouth { width: 14px !important; height: 6px !important; }
  html[data-theme="light"] body main.auth-page.auth-page-interactive.auth-page-interactive { padding: 10px 14px !important; }
  html[data-theme="light"] body main.auth-page.auth-page-interactive.auth-page-interactive .auth-brand-panel { padding: 20px 30px 16px !important; }
  html[data-theme="light"] body main.auth-page.auth-page-interactive.auth-page-interactive .auth-form-panel { padding: 22px 30px 16px !important; }
  html[data-theme="light"] body main.auth-page.auth-page-interactive.auth-page-interactive .auth-security-note { margin-top: 12px !important; padding: 8px 11px !important; }
  html[data-theme="light"] body main.auth-page.auth-page-interactive.auth-page-interactive .mkv3-hint { margin-top: 12px !important; padding: 8px 11px !important; }
  html[data-theme="light"] body main.auth-page.auth-page-interactive.auth-page-interactive .auth-form-footer { padding-top: 10px !important; }
}/* ============================ 9. 无障碍：降低动效 ============================ */
@media (prefers-reduced-motion: reduce) {
  html body main.auth-page .kinetic-lens,
  html body main.auth-page .kinetic-lens::before,
  html body main.auth-page .kinetic-lens *,
  html body main.auth-page .auth-brand-panel::after,
  html body main.auth-page .auth-brand-panel::before,
  html body main.auth-page .auth-brand-panel > * {
    animation: none !important;
    transition: none !important;
  }
  html body main.auth-page .auth-ambient-visual { transform: none !important; }
}