/* ============================================================
   登录页专属样式
   ============================================================ */
.login {
  height: 100vh; width: 100%;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 600px at 20% 30%, rgba(16,185,129,0.12), transparent 60%),
    radial-gradient(800px 500px at 80% 75%, rgba(245,158,11,0.08), transparent 55%),
    var(--bg-1);
}

/* 背景动态光斑 */
.login .orb {
  position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.5;
  animation: floaty 9s ease-in-out infinite;
}
.login .orb-1 { width: 380px; height: 380px; background: rgba(16,185,129,0.25); top: -80px; left: -60px; }
.login .orb-2 { width: 320px; height: 320px; background: rgba(245,158,11,0.18); bottom: -100px; right: -40px; animation-delay: -3s; }
.login .orb-3 { width: 260px; height: 260px; background: rgba(52,211,153,0.16); top: 40%; right: 18%; animation-delay: -5s; }

/* 网格底纹 */
.login .grid-bg {
  position: absolute; inset: 0; opacity: 0.4;
  background-image:
    linear-gradient(rgba(110,231,183,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110,231,183,0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 75%);
}

.login-card {
  width: 440px; max-width: 92vw;
  background: var(--bg-2);
  border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--shadow-pop); padding: 42px 40px 36px;
  position: relative; z-index: 2;
  animation: scaleIn 0.6s var(--ease-out);
}

.login-brand { text-align: center; margin-bottom: 34px; }
.login-brand .lb-mark {
  width: 64px; height: 64px; margin: 0 auto 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--brand-400), var(--brand-700));
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; color: #fff; font-weight: 700;
  box-shadow: var(--glow-brand);
  animation: floaty 5s ease-in-out infinite;
}
.login-brand .lb-title { font-size: 24px; font-weight: 700; color: var(--text-0); letter-spacing: 1px; }
.login-brand .lb-sub { font-size: 13px; color: var(--text-2); margin-top: 8px; letter-spacing: 2px; }

.login-roles {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 30px;
}
.role-card {
  padding: 18px 10px; text-align: center;
  background: var(--bg-2); border: 1.5px solid var(--line); border-radius: var(--r-md);
  cursor: pointer; transition: all 0.14s var(--ease);
  position: relative; overflow: hidden;
}
.role-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent, rgba(16,185,129,0.08));
  opacity: 0; transition: opacity 0.14s;
}
.role-card:hover { transform: translateY(-3px); border-color: rgba(110,231,183,0.45); box-shadow: var(--glow-brand); }
.role-card:hover::after { opacity: 1; }
.role-card.active {
  border-color: var(--brand-400);
  background: linear-gradient(180deg, rgba(16,185,129,0.14), rgba(16,185,129,0.04));
  box-shadow: 0 0 0 3px rgba(16,185,129,0.15), var(--glow-brand);
  animation: roleFlash 0.28s var(--ease-out);
}
@keyframes roleFlash {
  0% { transform: scale(1); }
  45% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.role-card .rc-icon { font-size: 26px; margin-bottom: 8px; display: block; }
.role-card.bank .rc-icon { color: var(--brand-400); }
.role-card.tea .rc-icon { color: var(--gold-400); }
.role-card.coop .rc-icon { color: #60a5fa; }
.role-card .rc-name { font-size: 13px; color: var(--text-1); font-weight: 600; }
.role-card.active .rc-name { color: var(--brand-300); }

.login-field { margin-bottom: 18px; }
.login-field label { display: block; font-size: 12px; color: var(--text-2); margin-bottom: 7px; }
.login-field .lf-wrap { position: relative; }
.login-field .lf-ico {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--text-3); font-size: 15px;
}
.login-field .lf-wrap .input { padding-left: 40px; }

.login-btn {
  width: 100%; padding: 13px; margin-top: 6px;
  background: linear-gradient(135deg, var(--brand-400), var(--brand-600));
  color: #fff; font-size: 15px; font-weight: 600; border-radius: var(--r-sm);
  border: none; cursor: pointer; transition: all 0.3s var(--ease);
  box-shadow: 0 8px 24px -8px rgba(16,185,129,0.7);
}
.login-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -8px rgba(16,185,129,0.85); }
.login-btn:active { transform: translateY(0); }

.login-hint { text-align: center; margin-top: 18px; font-size: 12px; color: var(--text-3); }
.login-hint .lh-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--brand-400); margin-right: 6px; box-shadow: 0 0 6px var(--brand-400); vertical-align: middle; }

.login-foot {
  position: absolute; bottom: 22px; left: 0; right: 0; text-align: center;
  font-size: 11px; color: var(--text-3); z-index: 2; letter-spacing: 0.5px;
}

/* ============================================================
   登录加载页（全屏深色 + 进度条 + 滚动文字）
   ============================================================ */
.loading-screen {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--bg-0);
  animation: fadeIn 0.3s ease;
}
.loading-screen.fade-out { animation: lsFadeOut 0.4s ease forwards; }
@keyframes lsFadeOut { to { opacity: 0; } }

.ls-mark {
  width: 76px; height: 76px; border-radius: 22px;
  background: linear-gradient(135deg, var(--brand-400), var(--brand-700));
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; color: #fff; font-weight: 700;
  box-shadow: var(--glow-brand);
  animation: lsBreathe 1.4s ease-in-out infinite;
}
@keyframes lsBreathe {
  0%, 100% { transform: scale(1); box-shadow: 0 0 30px -6px rgba(16,185,129,0.45); }
  50% { transform: scale(1.08); box-shadow: 0 0 50px -2px rgba(16,185,129,0.75); }
}
.ls-title {
  margin-top: 22px; font-size: 20px; font-weight: 700; color: var(--text-0);
  letter-spacing: 1px;
}
.ls-sub {
  margin-top: 8px; font-size: 13px; color: var(--text-2); letter-spacing: 0.5px;
  height: 20px; overflow: hidden;
}
.ls-sub-text {
  animation: lsTextSlide 0.5s var(--ease-out);
}
@keyframes lsTextSlide {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.ls-progress-wrap {
  width: 280px; margin-top: 30px;
}
.ls-progress {
  height: 4px; border-radius: 2px; overflow: hidden;
  background: var(--bg-4);
}
.ls-progress > div {
  height: 100%; border-radius: 2px; width: 0%;
  background: linear-gradient(90deg, var(--brand-400), var(--gold-400));
  transition: width 0.12s linear;
  box-shadow: 0 0 12px rgba(16,185,129,0.6);
}
.ls-percent {
  margin-top: 10px; font-size: 12px; color: var(--text-3);
  font-family: monospace; text-align: right;
}

/* 角色切换动效（快速淡入淡出+轻微缩放） */
.role-switch-enter-active, .role-switch-leave-active {
  transition: all 0.18s var(--ease-out);
}
.role-switch-enter-from { opacity: 0; transform: scale(0.92) translateY(8px); }
.role-switch-leave-to { opacity: 0; transform: scale(1.04); }
.role-switch-move { transition: transform 0.18s var(--ease-out); }