<template>
  <div class="login-page">
    <div class="bg-image" />
    <div class="bg-overlay" />
    <div class="bg-orb bg-orb-a" />
    <div class="bg-orb bg-orb-b" />

    <div class="login-card">
      <!-- 左侧品牌 hero -->
      <div class="hero">
        <div class="hero-brand">
          <span class="hero-mark">
            <img src="/FRLD-logo-white-no_title.png" alt="迷毂" class="hero-mark-img" />
          </span>
          <div class="hero-name">迷 毂</div>
        </div>
        <div class="hero-tagline">智 能 调 度 平 台</div>
        <div class="hero-tagline-en">INTELLIGENT · DISPATCH · PLATFORM</div>
        <div class="hero-divider" />
        <ul class="hero-points">
          <li v-for="f in features" :key="f.title">
            <span class="dot" />
            <div class="feat">
              <span class="feat-title">{{ f.title }}</span>
              <span class="feat-desc">{{ f.desc }}</span>
            </div>
          </li>
        </ul>
        <div class="hero-footnote">
          <span class="badge">v1.7</span>
          <span>稳定 · 高效 · 安全的智能调度内核</span>
        </div>
      </div>

      <!-- 右侧表单 -->
      <div class="panel">
        <div class="panel-head">
          <div class="panel-title">登 录</div>
          <div class="panel-sub">登录以进入智能调度平台</div>
        </div>

        <el-form ref="formRef" :model="form" :rules="rules" class="glass-form" hide-required-asterisk>
          <el-form-item prop="username">
            <el-input v-model="form.username" size="large" placeholder="用户名" autocomplete="username" clearable>
              <template #prefix><el-icon><User /></el-icon></template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="form.password" type="password" size="large" show-password placeholder="密码（Mock，任意非空）" autocomplete="current-password">
              <template #prefix><el-icon><Lock /></el-icon></template>
            </el-input>
          </el-form-item>

          <el-form-item prop="scope" class="scope-item">
            <div class="scope-wrap">
              <button type="button" class="scope-tab" :class="{ active: form.scope === 'Platform' }" @click="form.scope = 'Platform'">
                <el-icon><Setting /></el-icon>
                <div class="scope-meta">
                  <div class="scope-name">管理员</div>
                  <div class="scope-desc">platform-vue · 全功能</div>
                </div>
              </button>
              <button type="button" class="scope-tab" :class="{ active: form.scope === 'RCSMonitor' }" @click="form.scope = 'RCSMonitor'">
                <el-icon><Monitor /></el-icon>
                <div class="scope-meta">
                  <div class="scope-name">运营</div>
                  <div class="scope-desc">rcsmonitor-vue · 受限</div>
                </div>
              </button>
            </div>
          </el-form-item>

          <!-- 会话 N+1（启动反转）：Platform.Server 作为主入口，登录时由用户选择 SimpleLite 的启动模式。
               选 "本地+Web" → SimpleLite 同时启 LocalTerminal + WebTerminal；选 "仅Web" → 只起 WebTerminal。-->
          <el-form-item prop="launchMode" class="scope-item launch-mode-item">
            <div class="launch-mode-head">
              <span class="launch-mode-title">SimpleLite 启动模式</span>
              <el-tooltip placement="top">
                <template #content>
                  <div class="launch-tip">
                    <div><b>本地+Web</b>：登录后由 Platform 后端拉起 SimpleLite，同时打开桌面端 ImGui 窗口与浏览器端 webVRender。</div>
                    <div><b>仅 Web</b>：只起 WebTerminal，不弹本地桌面窗口，适合远程办公 / 服务器部署。</div>
                  </div>
                </template>
                <el-icon class="launch-mode-help"><QuestionFilled /></el-icon>
              </el-tooltip>
            </div>
            <div class="scope-wrap launch-wrap">
              <button
                type="button"
                class="scope-tab"
                :class="{ active: form.launchMode === 'DesktopAndWeb' }"
                @click="form.launchMode = 'DesktopAndWeb'">
                <el-icon><Cpu /></el-icon>
                <div class="scope-meta">
                  <div class="scope-name">本地 + Web</div>
                  <div class="scope-desc">桌面窗口 & 浏览器同时启动</div>
                </div>
              </button>
              <button
                type="button"
                class="scope-tab"
                :class="{ active: form.launchMode === 'WebOnly' }"
                @click="form.launchMode = 'WebOnly'">
                <el-icon><Connection /></el-icon>
                <div class="scope-meta">
                  <div class="scope-name">仅 Web</div>
                  <div class="scope-desc">不启桌面窗口 · 浏览器使用</div>
                </div>
              </button>
            </div>
          </el-form-item>

          <div class="row row-between">
            <el-checkbox v-model="form.remember" size="default" class="remember">下次自动按当前 scope 进入</el-checkbox>
            <el-link underline="never" class="adv-link" @click="adv = adv.length ? [] : ['adv']">高级 ›</el-link>
          </div>

          <el-collapse v-model="adv" class="adv-collapse">
            <el-collapse-item name="adv">
              <template #title><span class="adv-title">Web-Enabled · 端口与监听</span></template>
              <div class="adv-grid">
                <el-form-item label="监听地址">
                  <el-input v-model="adv2.host" size="default" />
                </el-form-item>
                <el-form-item label="WebAPI">
                  <el-input-number v-model="adv2.apiPort" :min="1" :max="65535" size="default" controls-position="right" />
                </el-form-item>
                <el-form-item label="Platform">
                  <el-input-number v-model="adv2.platformPort" :min="1" :max="65535" size="default" controls-position="right" />
                </el-form-item>
                <el-form-item label="webVRender">
                  <el-input-number v-model="adv2.vrPort" :min="1" :max="65535" size="default" controls-position="right" />
                </el-form-item>
              </div>
            </el-collapse-item>
          </el-collapse>

          <el-button type="primary" :loading="loading" class="btn-login" size="large" @click="submit">
            登 录
          </el-button>

          <div class="bottom-note">
            任意非空用户名 + 任意密码即可登录；scope 决定进入 admin / monitor 视图；权限按 Mock 表生成。
          </div>
        </el-form>
      </div>
    </div>

    <div class="footer-stamp">
      迷 毂 · 智能调度平台 · {{ year }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { User, Lock, Setting, Monitor, Cpu, Connection, QuestionFilled } from '@element-plus/icons-vue'
import { useAuthStore } from '@/stores/auth'
import type { LaunchMode, Scope } from '@/types/auth'

const route = useRoute()
const router = useRouter()
const auth = useAuthStore()

// 左侧品牌区的产品特性介绍（标签 + 描述），用于强调平台核心能力。
const features = [
  { title: '路径规划与导航', desc: '全局 + 实时双层路径算法，智能寻优路线' },
  { title: '交通管制', desc: '任务队列 + 优先级动态调度，提前规避路口拥堵冲突' },
  { title: '安全可靠性', desc: '约束设备运行规范，实现 AGV 与产线设备协同安全作业' },
  { title: '高级任务调度', desc: '按任务优先级、现场资源动态分配搬运任务' },
  { title: '插件扩展', desc: '插件化架构，支持功能定制、二次开发适配场景' }
]

const formRef = ref<FormInstance>()
const loading = ref(false)
const adv = ref<string[]>([])

const form = reactive({
  username: 'admin',
  password: 'admin',
  scope: 'Platform' as Scope,
  // 会话 N+1：默认「本地+Web」与改造前 Configuration.displayMode="web+local" 一致，
  // 保证「我啥也不选」时的行为与改造前完全相同。
  launchMode: 'DesktopAndWeb' as LaunchMode,
  remember: true
})

const adv2 = reactive({
  host: '0.0.0.0',
  apiPort: 7001,
  platformPort: 8080,
  vrPort: 8223
})

const rules: FormRules = {
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  scope: [{ required: true, message: '请选择 scope', trigger: 'change' }],
  launchMode: [{ required: true, message: '请选择启动模式', trigger: 'change' }]
}

const year = computed(() => new Date().getFullYear())

async function submit() {
  if (!formRef.value) return
  await formRef.value.validate(async (ok) => {
    if (!ok) return
    loading.value = true
    try {
      const resp = await auth.login({
        username: form.username,
        password: form.password,
        scope: form.scope,
        launchMode: form.launchMode
      })
      ElMessage.success(`欢迎，${auth.user?.displayName ?? form.username}`)
      // 会话 N+1：如果后端返回了 launchWarning（如「检测到既有 SimpleLite 在跑、本次启动模式未生效」），
      // 在登录成功的 toast 之后再追加一条警告条，确保用户感知到「实际行为」与「期望」之间的偏差。
      if (resp.launchWarning) {
        ElMessage({ message: resp.launchWarning, type: 'warning', duration: 6000, showClose: true })
      } else if (resp.runMode === 'Detached') {
        ElMessage({
          message: 'SimpleLite 未启动（Platform.Server 单独运行），/api/sl/* 相关功能将不可用。',
          type: 'warning',
          duration: 6000,
          showClose: true
        })
      }
      const target = (route.query.redirect as string | undefined) ?? (form.scope === 'Platform' ? '/admin/dashboard' : '/monitor/map')
      router.push(target)
    } catch (e) {
      const msg = e instanceof Error ? e.message : String(e)
      ElMessage.error(`登录失败：${msg}`)
    } finally {
      loading.value = false
    }
  })
}
</script>

<style scoped>
/* Outpost 登录：纸白主区 + plum 品牌柱（对齐 fairylandtech.amerc.ai） */
.login-page {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 50% at 15% 10%, rgba(117, 67, 232, 0.14), transparent 55%),
    radial-gradient(ellipse 60% 45% at 90% 85%, rgba(155, 124, 255, 0.1), transparent 50%),
    #f6f3fb;
  color: #28213a;
  font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', sans-serif;
}

/* ===== 背景层 ===== */
.bg-image {
  position: absolute; inset: 0;
  background: url('/login-bg.jpg') center/cover no-repeat;
  /* 亮调下仅保留极淡纹理，不压暗整体。 */
  filter: saturate(0.6) brightness(1.1) contrast(0.9);
  opacity: 0.07;
  transform: scale(1.08);
  z-index: 0;
}
.bg-overlay {
  position: absolute; inset: 0;
  /* 柔光叠加（提亮，不再压暗）：左上奶白高光 + 右下淡蓝 + 中央粉紫。 */
  background:
    radial-gradient(ellipse at 14% 16%, rgba(255, 255, 255, 0.38) 0%, transparent 50%),
    radial-gradient(ellipse at 86% 84%, rgba(174, 203, 245, 0.45) 0%, transparent 56%),
    radial-gradient(ellipse at 50% 50%, rgba(220, 190, 247, 0.22) 0%, transparent 72%);
  z-index: 1;
}
/* 细网格层（青色，克制） */
.bg-overlay::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(var(--lg-accent-rgb), 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--lg-accent-rgb), 0.06) 1px, transparent 1px);
  background-size: 60px 60px, 60px 60px;
  mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.6) 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.6) 0%, transparent 72%);
}
.bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  z-index: 1;
  pointer-events: none;
  animation: drift 20s ease-in-out infinite;
}
.bg-orb-a {
  width: 420px; height: 420px;
  top: -140px; left: -100px;
  background: radial-gradient(circle, rgba(155, 124, 255, 0.55) 0%, rgba(117, 67, 232, 0.35) 55%, transparent 80%);
  opacity: 0.22;
}
.bg-orb-b {
  width: 480px; height: 480px;
  bottom: -180px; right: -140px;
  background: radial-gradient(circle, rgba(117, 67, 232, 0.4) 0%, rgba(155, 124, 255, 0.2) 55%, transparent 85%);
  opacity: 0.16;
  animation-delay: -7s;
}
@keyframes drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(18px, -28px) scale(1.05); }
}

.bg-stars { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.bg-stars span {
  position: absolute;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  box-shadow:
    0 0 6px rgba(255, 255, 255, 0.85),
    0 0 12px rgba(150, 130, 255, 0.6);
  animation: twinkle 4s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: 0.35; transform: scale(0.8); }
  50%      { opacity: 0.95; transform: scale(1.2); }
}

/* ===== 卡片：Outpost 纸白 + plum 品牌柱 ===== */
.login-card {
  position: relative;
  z-index: 2;
  width: 920px;
  max-width: calc(100vw - 32px);
  min-height: 588px;
  display: grid;
  grid-template-columns: 360px 1fr;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(40, 33, 58, 0.08);
  background: #fffefd;
  box-shadow:
    0 1px 2px rgba(40, 33, 58, 0.04),
    0 24px 56px rgba(54, 35, 78, 0.12);
}
.login-card::before {
  content: '';
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(117, 67, 232, 0.35) 50%, transparent 100%);
  pointer-events: none;
  z-index: 3;
}

/* ===== 左侧 hero ===== */
.hero {
  position: relative;
  padding: 44px 34px 34px;
  color: #fff;
  background: linear-gradient(165deg, #3f2454 0%, #241530 100%);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 78% 16%, rgba(var(--lg-accent-rgb), 0.24), transparent 58%);
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }
/* 品牌区梦幻星点：浮在 hero 底色之上、文字之下，闪烁 */
.hero .hero-stars {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-stars span {
  position: absolute;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  box-shadow:
    0 0 6px rgba(255, 255, 255, 0.8),
    0 0 12px rgba(150, 130, 255, 0.6);
  animation: twinkle 4s ease-in-out infinite;
}
.hero-brand { display: flex; align-items: center; gap: 14px; }
.hero-mark {
  display: inline-flex; align-items: center; justify-content: center;
  height: 56px;
  padding: 0 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(var(--lg-primary-rgb), 0.55) 0%, rgba(var(--lg-accent-rgb), 0.30) 100%);
  border: 1px solid rgba(255, 255, 255, 0.20);
  box-shadow:
    0 12px 30px rgba(var(--lg-primary-rgb), 0.45),
    0 0 30px rgba(var(--lg-accent-rgb), 0.30),
    0 0 0 1px rgba(255, 255, 255, 0.16) inset;
  animation: mg-mark-glow 4s ease-in-out infinite;
}
@keyframes mg-mark-glow {
  0%, 100% { box-shadow: 0 12px 30px rgba(var(--lg-primary-rgb), 0.45), 0 0 24px rgba(var(--lg-accent-rgb), 0.24), 0 0 0 1px rgba(255, 255, 255, 0.16) inset; }
  50%      { box-shadow: 0 14px 34px rgba(var(--lg-primary-rgb), 0.55), 0 0 40px rgba(var(--lg-accent-rgb), 0.42), 0 0 0 1px rgba(255, 255, 255, 0.22) inset; }
}
.hero-mark-img {
  display: block;
  height: 34px;
  width: auto;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
}
.hero-name {
  font-size: 34px; font-weight: 700;
  letter-spacing: 6px;
  /* 紫蓝混合渐变字：白 → 浅紫 → 浅蓝 */
  background: linear-gradient(95deg, #ffffff 0%, #c3b6ff 52%, #93a7ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 24px rgba(120, 130, 255, 0.4);
}
.hero-tagline {
  margin-top: 30px;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 8px;
  color: rgba(255, 255, 255, 0.95);
}
.hero-tagline-en {
  margin-top: 5px;
  font-size: 10.5px;
  letter-spacing: 3px;
  color: var(--lg-text-dim);
  text-transform: uppercase;
}
.hero-divider {
  margin: 22px 0 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--lg-accent-rgb), 0.5), transparent);
}
.hero-points {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
  flex: 1;
}
.hero-points li { display: flex; align-items: flex-start; gap: 10px; }
.hero-points .dot {
  margin-top: 7px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--lg-accent);
  box-shadow: 0 0 10px rgba(var(--lg-accent-rgb), 0.85);
  flex-shrink: 0;
}
.feat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.feat-title {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #fff;
}
.feat-desc {
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--lg-text-soft);
}
.hero-footnote {
  margin-top: 22px;
  display: flex; align-items: center; gap: 10px;
  font-size: 11px;
  color: var(--lg-text-dim);
  letter-spacing: 0.6px;
}
.hero-footnote .badge {
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.20);
  color: #fff;
  font-weight: 600;
}

/* ===== 右侧表单 ===== */
.panel {
  padding: 44px 44px 32px;
  display: flex;
  flex-direction: column;
  background: #fffefd;
  color: #28213a;
}
.panel-head { margin-bottom: 26px; }
.panel-title {
  font-size: 28px; font-weight: 700;
  letter-spacing: 8px;
  color: #28213a;
  background: none;
  -webkit-text-fill-color: unset;
  text-shadow: none;
}
.panel-sub {
  margin-top: 6px;
  font-size: 12.5px;
  color: #756d85;
  letter-spacing: 1px;
}

.glass-form { flex: 1; display: flex; flex-direction: column; }
.glass-form :deep(.el-form-item) { margin-bottom: 18px; }

.glass-form :deep(.el-input__wrapper) {
  background: #f6f3fb !important;
  box-shadow: 0 0 0 1px rgba(40, 33, 58, 0.1) inset !important;
  border-radius: 12px !important;
  transition: all .2s;
}
.glass-form :deep(.el-input__wrapper:hover) {
  background: #fbf9fd !important;
  box-shadow: 0 0 0 1px rgba(117, 67, 232, 0.35) inset !important;
}
.glass-form :deep(.el-input__wrapper.is-focus) {
  background: #fff !important;
  box-shadow:
    0 0 0 1px rgba(117, 67, 232, 0.55) inset,
    0 0 0 3px rgba(117, 67, 232, 0.12) !important;
}
.glass-form :deep(.el-input__inner) {
  color: #28213a !important;
  -webkit-text-fill-color: #28213a !important;
  font-size: 14px;
  height: 42px;
}
.glass-form :deep(.el-input__inner::placeholder) { color: #a8a0c0; }
.glass-form :deep(.el-input__prefix-inner > :first-child),
.glass-form :deep(.el-input__suffix-inner) { color: #756d85; }

/* scope 双卡 */
.scope-item :deep(.el-form-item__content) { width: 100%; }
.scope-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }

/* 启动模式（会话 N+1）：与 scope 双卡共用 .scope-tab 样式，仅在外层做一些标题/留白调整 */
.launch-mode-item :deep(.el-form-item__content) { display: flex; flex-direction: column; align-items: stretch; }
.launch-mode-head {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 8px;
  font-size: 12px;
  color: #756d85;
  letter-spacing: 1px;
}
.launch-mode-title { font-weight: 500; }
.launch-mode-help {
  color: #a8a0c0;
  cursor: help;
  font-size: 14px;
}
.launch-mode-help:hover { color: #7543e8; }
.launch-wrap { margin-bottom: 4px; }
.launch-tip { max-width: 280px; line-height: 1.6; font-size: 12px; }
.launch-tip > div + div { margin-top: 6px; }
.scope-tab {
  appearance: none;
  background: #f6f3fb;
  border: 1px solid rgba(40, 33, 58, 0.1);
  border-radius: 12px;
  padding: 14px 14px;
  display: flex; align-items: center; gap: 12px;
  color: #28213a;
  cursor: pointer;
  transition: all .2s;
  text-align: left;
}
.scope-tab:hover {
  background: #fbf9fd;
  border-color: rgba(117, 67, 232, 0.3);
  color: #28213a;
  transform: translateY(-1px);
}
.scope-tab.active {
  background: linear-gradient(135deg, #7543e8 0%, #9b7cff 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 20px rgba(117, 67, 232, 0.28);
}
.scope-tab .el-icon { font-size: 20px; }
.scope-meta { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.scope-name { font-size: 14px; font-weight: 600; }
.scope-desc { font-size: 11px; opacity: 0.75; margin-top: 2px; }

/* 行 - 记住选择 & 高级 */
.row { display: flex; align-items: center; }
.row-between { justify-content: space-between; margin: -6px 0 10px; }
.remember :deep(.el-checkbox__label) {
  color: #28213a !important;
  font-size: 12.5px;
  text-shadow: none;
}
.remember :deep(.el-checkbox__inner) {
  background: #fff;
  border-color: rgba(40, 33, 58, 0.25);
}
.remember :deep(.el-checkbox.is-checked .el-checkbox__inner) {
  background: #7543e8;
  border-color: #7543e8;
}
.adv-link { color: #756d85 !important; font-size: 12.5px; }
.adv-link:hover { color: #7543e8 !important; }

/* 高级折叠 */
.adv-collapse { background: transparent !important; border: none !important; margin-bottom: 16px; }
.adv-collapse :deep(.el-collapse-item__wrap),
.adv-collapse :deep(.el-collapse-item__header) {
  background: transparent !important;
  border-color: rgba(40, 33, 58, 0.1) !important;
  color: #756d85 !important;
}
.adv-title { font-size: 12px; letter-spacing: 1px; }
.adv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; padding-top: 6px; }
.adv-grid :deep(.el-form-item__label) {
  color: #756d85;
  font-size: 12px;
}
.adv-grid :deep(.el-input-number) { width: 100%; }
.adv-grid :deep(.el-input-number .el-input__inner) { text-align: left; }

.btn-login {
  position: relative;
  overflow: hidden;
  height: 46px !important;
  border-radius: 12px;
  margin-top: 6px;
  font-size: 15px;
  letter-spacing: 6px;
  font-weight: 600;
  color: #fff !important;
  background: #7543e8 !important;
  border: none !important;
  box-shadow: 0 10px 24px rgba(117, 67, 232, 0.28) !important;
  transition: all .2s ease;
}
.btn-login::after { display: none; }
.btn-login:hover {
  transform: translateY(-1px);
  background: #8660f0 !important;
  box-shadow: 0 14px 28px rgba(117, 67, 232, 0.35) !important;
}

.bottom-note {
  margin-top: 16px;
  font-size: 11.5px;
  color: #756d85;
  text-align: center;
  line-height: 1.6;
}

.footer-stamp {
  position: absolute;
  bottom: 18px; left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: 2px;
  color: rgba(40, 33, 58, 0.45);
  z-index: 2;
}

.glass-form :deep(.el-form-item__error) {
  color: #c23a5c;
  padding-top: 4px;
}

@media (max-width: 760px) {
  .login-card { grid-template-columns: 1fr; min-height: auto; }
  .hero { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding: 28px; }
  .panel { padding: 28px; }
  .hero-points, .hero-divider { display: none; }
}
</style>
