<template>
  <div class="login-page">
    <!-- 左侧品牌区 -->
    <div class="login-brand">
      <div class="brand-decor">
        <div class="brand-orb brand-orb--1"></div>
        <div class="brand-orb brand-orb--2"></div>
        <div class="brand-grid"></div>
      </div>
      <div class="brand-content">
        <img src="/images/backgrounds/logo.svg?v=2" alt="Logo" class="brand-logo" />
        <h2 class="brand-tagline">{{ $t('welcomePage.brandTagline') }}</h2>
        <p class="brand-desc">{{ $t('welcomePage.brandDesc') }}</p>
        
        <!-- 品牌特性 -->
        <div class="brand-features">
          <div class="feature-item">
            <div class="feature-icon">🚀</div>
            <div class="feature-text">AI 驱动</div>
          </div>
          <div class="feature-item">
            <div class="feature-icon">🎬</div>
            <div class="feature-text">视频创作</div>
          </div>
          <div class="feature-item">
            <div class="feature-icon">✨</div>
            <div class="feature-text">智能编辑</div>
          </div>
          <div class="feature-item">
            <div class="feature-icon">🌐</div>
            <div class="feature-text">全球服务</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 右侧登录区 -->
    <div class="login-panel">
      <div class="login-card">
        <!-- 欢迎标题 -->
        <div class="login-header">
          <h1 class="login-title">
            <span class="title-light">{{ $t('welcomePage.welcomeTo') }}</span>
            <span class="title-accent">Vionow</span>
          </h1>
          <p class="login-subtitle">AI 驱动的视频创作平台</p>
        </div>

        <!-- 登录方式切换 -->
        <div class="login-tabs">
          <button
            class="tab-btn"
            :class="{ active: loginType === 'email' }"
            @click="loginType = 'email'"
          >
            {{ $t('welcomePage.emailLogin') }}
          </button>
          <div class="tab-divider"></div>
          <button
            class="tab-btn"
            :class="{ active: loginType === 'password' }"
            @click="loginType = 'password'"
          >
            {{ $t('welcomePage.accountLogin') }}
          </button>
        </div>

        <!-- 登录表单 -->
        <div class="login-form">
          <!-- 邮箱输入 -->
          <div class="form-group">
            <label class="form-label">{{ $t('login.email') }}</label>
            <input
              ref="emailInput"
              v-model="loginForm.email"
              :placeholder="$t('login.emailPlaceholder')"
              class="form-input"
              type="email"
              @keyup.enter="handleLogin"
            />
            <div class="form-error" v-if="errors.email">{{ errors.email }}</div>
          </div>

          <!-- 验证码输入（仅验证码登录） -->
          <div class="form-group" v-if="loginType === 'email'">
            <label class="form-label">{{ $t('login.verificationCode') }}</label>
            <div class="input-with-action">
              <input
                ref="codeInput"
                v-model="loginForm.code"
                :placeholder="$t('login.codePlaceholder')"
                class="form-input"
                @keyup.enter="handleLogin"
                @input="filterCodeSpaces"
              />
              <button
                class="code-btn"
                :class="{ disabled: countdown > 0 || !isEmailValid }"
                :disabled="countdown > 0 || !isEmailValid"
                @click="getEmailCode"
              >
                {{ countdown > 0 ? `${countdown}s` : $t('login.getCode') }}
              </button>
            </div>
            <div class="form-error" v-if="errors.code">{{ errors.code }}</div>
          </div>

          <!-- 密码输入（仅密码登录） -->
          <div class="form-group" v-if="loginType === 'password'">
            <div class="form-label-row">
              <label class="form-label">{{ $t('login.password') }}</label>
              <router-link to="/set-password" class="form-link">{{ $t('login.forgotPassword') }}</router-link>
            </div>
            <input
              ref="passwordInput"
              v-model="loginForm.password"
              :placeholder="$t('login.passwordPlaceholder')"
              class="form-input"
              type="password"
              @keyup.enter="handleLogin"
            />
            <div class="form-error" v-if="errors.password">{{ errors.password }}</div>
          </div>

          <!-- 登录按钮 -->
          <button
            class="login-btn"
            :class="{ loading: userStore.loading }"
            :disabled="userStore.loading"
            @click="handleLogin"
          >
            <span v-if="!userStore.loading">{{ $t('login.loginOrRegister') }}</span>
            <span v-else class="btn-loading">
              <svg class="spinner" viewBox="0 0 24 24" fill="none">
                <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-dasharray="32" stroke-dashoffset="32">
                  <animate attributeName="stroke-dashoffset" values="32;0;32" dur="1.2s" repeatCount="indefinite"/>
                </circle>
              </svg>
              {{ $t('login.loggingIn') }}
            </span>
          </button>

          <!-- 协议 -->
          <p class="agreement">
            {{ $t('login.agreementPrefix') }}
            <router-link to="/terms-of-service" class="agreement-link">{{ $t('login.termsOfService') }}</router-link>
            {{ $t('login.and') }}
            <router-link to="/privacy-policy" class="agreement-link">{{ $t('login.privacyPolicy') }}</router-link>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed, nextTick } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { message } from 'ant-design-vue'
import { loginWithEmail, login, sendEmailCode, setDevEmailCode, getCurrentUser } from '@/api/auth'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
const router = useRouter()
const route = useRoute()
const userStore = useUserStore()

const countdown = ref(0)
let countdownTimer = null

const loginType = ref('email')

const loginForm = reactive({
  email: '',
  code: '',
  password: ''
})

const errors = reactive({
  email: '',
  code: '',
  password: '',
  server: ''
})

const emailInput = ref(null)
const codeInput = ref(null)
const passwordInput = ref(null)

const isEmailValid = computed(() => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(loginForm.email))
const isCodeValid = computed(() => /^\d{6}$/.test(loginForm.code))
const isPasswordValid = computed(() => loginForm.password && loginForm.password.length >= 6)

const isFormValid = computed(() => {
  if (loginType.value === 'email') {
    return isEmailValid.value && isCodeValid.value
  }
  return isEmailValid.value && isPasswordValid.value
})

const clearForm = async () => {
  loginForm.email = ''
  loginForm.code = ''
  loginForm.password = ''
  errors.email = errors.code = errors.password = errors.server = ''
  if (countdownTimer) {
    clearInterval(countdownTimer)
    countdownTimer = null
  }
  countdown.value = 0
  await nextTick()
  emailInput.value && emailInput.value.focus && emailInput.value.focus()
}

const filterCodeSpaces = () => {
  loginForm.code = loginForm.code.replace(/\s/g, '')
}

onMounted(() => {
  if (route.query.email) {
    loginForm.email = route.query.email
  }
})

const getEmailCode = async () => {
  errors.email = ''
  errors.code = ''
  errors.password = ''
  errors.server = ''

  if (!loginForm.email) {
    errors.email = t('welcomePage.pleaseEnterEmail')
    emailInput.value && emailInput.value.focus && emailInput.value.focus()
    return
  }

  if (!isEmailValid.value) {
    errors.email = t('welcomePage.invalidEmail')
    emailInput.value && emailInput.value.focus && emailInput.value.focus()
    return
  }

  try {
    const response = await sendEmailCode(loginForm.email)

    if (response.data && response.data.success) {
      message.success(t('common.codeSentToEmail'))
      startCountdown()
    } else {
      message.error(response.data?.message || t('common.updateFailed'))
    }
  } catch (error) {
    console.error('发送验证码失败:', error)
    if (process.env.NODE_ENV === 'development') {
      const randomCode = Array.from({length: 6}, () => Math.floor(Math.random() * 10)).join('')
      try {
        await setDevEmailCode(loginForm.email, randomCode)
      } catch (syncError) {
        console.warn('同步验证码到后端失败:', syncError)
      }
      message.success(t('common.codeSentToEmail'))
      startCountdown()
    } else {
      message.error(error.response?.data?.message || t('common.updateFailed'))
    }
  }
}

const startCountdown = () => {
  countdown.value = 60
  countdownTimer = setInterval(() => {
    countdown.value--
    if (countdown.value <= 0) {
      clearInterval(countdownTimer)
      countdownTimer = null
    }
  }, 1000)
}

const handleLogin = async () => {
  if (!loginForm.email) {
    message.warning(t('common.pleaseEnterEmail'))
    return
  }
  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(loginForm.email)) {
    message.warning(t('common.pleaseEnterValidEmail'))
    return
  }

  const oldToken = localStorage.getItem('token')
  localStorage.removeItem('token')
  localStorage.removeItem('user')
  userStore.token = null
  userStore.user = null

  try {
    let response = null

    if (loginType.value === 'email') {
      if (!loginForm.code) {
        errors.code = t('welcomePage.pleaseEnterCode')
        codeInput.value && codeInput.value.focus && codeInput.value.focus()
        return
      }
      if (!isCodeValid.value) {
        errors.code = t('welcomePage.invalidCode')
        codeInput.value && codeInput.value.focus && codeInput.value.focus()
        return
      }
      response = await loginWithEmail({ email: loginForm.email, code: loginForm.code })
    } else {
      if (!loginForm.password) {
        errors.password = t('welcomePage.pleaseEnterPassword')
        passwordInput.value && passwordInput.value.focus && passwordInput.value.focus()
        return
      }
      if (!isPasswordValid.value) {
        errors.password = t('welcomePage.passwordMinLength')
        passwordInput.value && passwordInput.value.focus && passwordInput.value.focus()
        return
      }
      response = await login({ email: loginForm.email, password: loginForm.password })
    }

    if (response && response.data && response.data.success) {
      const loginUser = response.data.data.user
      const loginToken = response.data.data.token
      const needsPasswordChange = response.data.data.needsPasswordChange

      localStorage.setItem('token', loginToken)
      localStorage.setItem('user', JSON.stringify(loginUser))
      userStore.user = loginUser
      userStore.token = loginToken
      userStore.resetInitialized()

      if (needsPasswordChange) {
        localStorage.setItem('needSetPassword', '1')
      } else {
        localStorage.removeItem('needSetPassword')
      }

      message.success(t('common.loginSuccess'))

      const needSetPassword = localStorage.getItem('needSetPassword') === '1'
      const redirectPath = needSetPassword ? '/set-password' : (route.query.redirect || '/profile')
      // #region agent log
      fetch('http://127.0.0.1:7243/ingest/7d01a34a-7181-4a5e-9962-62bb50420571',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'Login.vue:redirect',message:'Login success - navigating',data:{redirectPath,method:'router.push',hasToken:!!localStorage.getItem('token')},timestamp:Date.now(),sessionId:'debug-session',hypothesisId:'H-A'})}).catch(()=>{});
      // #endregion
      // 使用 router.push 进行 SPA 内部导航，避免 window.location.href 导致的全页面重载黑屏
      await router.push(redirectPath)
      return
    } else {
      const msg = response?.data?.message || t('common.loginFailed')
      errors.server = msg
      message.error(msg)
    }
  } catch (error) {
    console.error('Login error:', error)
    const msg = error.response?.data?.message || t('common.loginFailedRetry')
    errors.server = msg
    message.error(msg)
  }
}
</script>

<style scoped>
/* 导入设计系统 */
@import '../styles/ui-ux-pro-max.css';

.login-page {
  width: 100vw;
  height: 100vh;
  display: flex;
  position: fixed;
  inset: 0;
  overflow: hidden;
  font-family: var(--font-sans);
  background: linear-gradient(135deg, var(--color-background) 0%, rgba(30, 41, 59, 0.8) 100%);
  background-image: url('/images/backgrounds/login_bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ==================== Left Brand Area ==================== */

.login-brand {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: var(--space-16);
}

.brand-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.brand-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  animation: breathe 8s ease-in-out infinite;
}

.brand-orb--1 {
  width: 600px;
  height: 400px;
  top: 10%;
  left: 20%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.12) 0%, transparent 70%);
}

.brand-orb--2 {
  width: 400px;
  height: 400px;
  bottom: 10%;
  right: 10%;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.08) 0%, transparent 70%);
  animation-delay: -4s;
}

.brand-grid {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  background-image:
    linear-gradient(var(--color-border-light) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-border-light) 1px, transparent 1px);
  background-size: 60px 60px;
  transform: perspective(400px) rotateX(50deg);
  transform-origin: bottom center;
  mask-image: linear-gradient(to top, rgba(0,0,0,0.3) 0%, transparent 80%);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.3) 0%, transparent 80%);
}

.brand-content {
  position: relative;
  z-index: 2;
  text-align: center;
  animation: fadeIn 1s var(--ease-out) both;
  max-width: 600px;
}

.brand-logo {
  height: 64px;
  width: auto;
  margin-bottom: var(--space-8);
  animation: bounce 1s var(--ease-out);
}

.brand-tagline {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: #FFFFFF;
  margin: 0 0 var(--space-4) 0;
  letter-spacing: var(--tracking-wide);
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.brand-desc {
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 var(--space-8) 0;
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-relaxed);
}

/* 品牌特性 */
.brand-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-10);
}

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  transition: var(--transition-all);
  animation: fadeIn 0.8s var(--ease-out) both;
}

.feature-item:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: var(--glow-primary);
}

.feature-item:nth-child(1) { animation-delay: 0.1s; }
.feature-item:nth-child(2) { animation-delay: 0.2s; }
.feature-item:nth-child(3) { animation-delay: 0.3s; }
.feature-item:nth-child(4) { animation-delay: 0.4s; }

.feature-icon {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-2);
}

.feature-text {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
}

/* ==================== Right Login Panel ==================== */

.login-panel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  position: relative;
}

.login-card {
  width: 100%;
  max-width: 420px;
  animation: fadeIn 0.8s var(--ease-out) 0.2s both;
  background: var(--glass-solid);
  backdrop-filter: var(--glass-blur-lg);
  -webkit-backdrop-filter: var(--glass-blur-lg);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  border: 1px solid var(--glass-border-strong);
  box-shadow: var(--glass-shadow-lg);
}

/* Header */
.login-header {
  margin-bottom: var(--space-8);
  text-align: center;
}

.login-title {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  margin: 0 0 var(--space-2) 0;
  line-height: var(--leading-tight);
}

.title-light {
  color: #FFFFFF;
  margin-right: var(--space-2);
}

.title-accent {
  color: var(--color-primary);
  font-weight: var(--font-bold);
  text-shadow: var(--glow-primary);
}

.login-subtitle {
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  font-weight: var(--font-medium);
}

/* Tabs */
.login-tabs {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-8);
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-lg);
  padding: var(--space-1);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.tab-btn {
  flex: 1;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  transition: var(--transition-all);
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
}

.tab-btn:hover {
  color: #FFFFFF;
  background: var(--color-surface-hover);
}

.tab-btn.active {
  color: #FFFFFF;
  background: var(--color-primary);
  box-shadow: var(--glow-primary);
}

.tab-divider {
  display: none;
}

/* Form */
.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: #FFFFFF;
  margin-bottom: var(--space-1);
}

.form-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
}

.form-label-row .form-label {
  margin-bottom: 0;
}

.form-link {
  font-size: var(--text-sm);
  color: var(--color-primary);
  text-decoration: none;
  transition: var(--transition-colors);
}

.form-link:hover {
  color: var(--color-primary-light);
  text-decoration: underline;
}

.form-input {
  width: 100%;
  height: 56px;
  padding: var(--space-3) var(--space-4);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-lg);
  color: #FFFFFF;
  font-size: var(--text-base);
  font-family: var(--font-sans);
  outline: none;
  transition: var(--transition-border);
}

.form-input:hover {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
}

.form-input:focus {
  border-color: var(--color-primary-light);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
}

.form-input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.input-with-action {
  position: relative;
  display: flex;
  align-items: center;
}

.input-with-action .form-input {
  padding-right: 120px;
}

.code-btn {
  position: absolute;
  right: var(--space-3);
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.3);
  color: var(--color-primary-light);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  padding: var(--space-2) var(--space-4);
  transition: var(--transition-all);
  white-space: nowrap;
  border-radius: var(--radius-md);
}

.code-btn:hover:not(.disabled) {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #FFFFFF;
  box-shadow: var(--glow-primary);
}

.code-btn.disabled {
  color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
  cursor: not-allowed;
}

.form-error {
  color: var(--color-danger);
  font-size: var(--text-xs);
  margin-top: var(--space-1);
}

/* Login Button */
.login-btn {
  width: 100%;
  height: 56px;
  background: var(--color-primary);
  color: #FFFFFF;
  border: none;
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  cursor: pointer;
  transition: var(--transition-all);
  letter-spacing: var(--tracking-wide);
  margin-top: var(--space-4);
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
}

.login-btn:hover:not(:disabled) {
  background: var(--color-primary-light);
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.5);
  transform: translateY(-2px);
}

.login-btn:active:not(:disabled) {
  transform: translateY(0);
}

.login-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.btn-loading {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.spinner {
  width: 20px;
  height: 20px;
  animation: spin 1s var(--ease-linear) infinite;
}

/* 快速登录 */
.quick-login {
  margin-top: var(--space-6);
}

.quick-login-divider {
  display: flex;
  align-items: center;
  margin-bottom: var(--space-6);
}

.quick-login-divider::before,
.quick-login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

.quick-login-divider span {
  padding: 0 var(--space-4);
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

.quick-login-buttons {
  display: flex;
  gap: var(--space-4);
}

.quick-login-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: #FFFFFF;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: var(--transition-all);
}

.quick-login-btn:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-border-dark);
  transform: translateY(-1px);
}

.quick-login-btn.google:hover {
  border-color: #DB4437;
  box-shadow: 0 0 15px rgba(219, 68, 55, 0.3);
}

.quick-login-btn.apple:hover {
  border-color: #000;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

.btn-icon {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
}

/* Agreement */
.agreement {
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  margin: var(--space-6) 0 0 0;
}

.agreement-link {
  color: var(--color-primary);
  text-decoration: none;
  transition: var(--transition-colors);
  font-weight: var(--font-medium);
}

.agreement-link:hover {
  color: var(--color-primary-light);
  text-decoration: underline;
}

/* ==================== Animations ==================== */

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes breathe {
  0%, 100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transform: translate3d(0,0,0);
  }
  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -8px, 0);
  }
  70% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -4px, 0);
  }
  90% {
    transform: translate3d(0,-2px,0);
  }
}

/* ==================== Responsive ==================== */

@media (max-width: 1024px) {
  .login-brand {
    display: none;
  }

  .login-panel {
    width: 100%;
    background: rgba(15, 23, 42, 0.95);
  }
}

@media (max-width: 768px) {
  .login-panel {
    padding: var(--space-6);
  }

  .login-card {
    padding: var(--space-6);
  }

  .login-title {
    font-size: var(--text-2xl);
  }

  .form-input {
    height: 48px;
    font-size: var(--text-sm);
  }

  .login-btn {
    height: 48px;
  }

  .quick-login-buttons {
    flex-direction: column;
  }

  .brand-features {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .login-panel {
    padding: var(--space-4);
  }

  .login-card {
    padding: var(--space-4);
  }

  .login-title {
    font-size: var(--text-xl);
  }

  .login-tabs {
    flex-direction: column;
    gap: var(--space-2);
  }

  .tab-btn {
    width: 100%;
  }

  .brand-features {
    grid-template-columns: 1fr;
  }
}
</style>
