/* ============================================================
 * 01-login.css — 登录页炫酷化组件（深色科技风数据大屏）
 * 配色：藏青 #0a1628 系 + 荧光青 #00e5ff
 * 约定：
 *   - 所有类名带 fx-login- 前缀，避免与主应用冲突
 *   - JS 激活时会给 #login 加 .fx-login-on，本文件全部规则
 *     都挂在 #login.fx-login-on 下：未引入 01-login.js 时
 *     页面保持原样，零副作用
 * 依赖：无（原生 CSS）
 * ============================================================ */

/* ---------- 登录遮罩层：深色底 + 径向氛围光 ---------- */
#login.fx-login-on {
  background: #0a1628;
  overflow: hidden;
}

/* 两层径向氛围光晕（青/蓝），纯装饰，不挡点击 */
#login.fx-login-on::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 400px at 20% 15%, rgba(0, 229, 255, 0.10), transparent 70%),
    radial-gradient(700px 500px at 85% 85%, rgba(37, 99, 235, 0.14), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* 顶部细扫描线高光 */
#login.fx-login-on::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.6), transparent);
  pointer-events: none;
  z-index: 2;
}

/* 粒子/网格画布（由 01-login.js 创建并插入） */
#login.fx-login-on .fx-login-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ---------- 登录卡片：玻璃拟态 + 荧光描边 + 呼吸光晕 ---------- */
#login.fx-login-on .box {
  position: relative;
  z-index: 1;
  width: 360px;
  padding: 40px 36px 32px;
  background: rgba(13, 30, 52, 0.72);
  border: 1px solid rgba(0, 229, 255, 0.25);
  border-radius: 12px;
  box-shadow:
    0 0 0 1px rgba(0, 229, 255, 0.06) inset,
    0 0 32px rgba(0, 229, 255, 0.12),
    0 24px 64px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: fx-login-card-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both,
             fx-login-card-breathe 4s ease-in-out 0.7s infinite;
}

/* 卡片顶部装饰光条 */
#login.fx-login-on .box::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 12%;
  right: 12%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00e5ff, transparent);
  border-radius: 2px;
  opacity: 0.9;
}

/* 四角科技括号装饰（由 JS 插入 .fx-login-corner） */
#login.fx-login-on .fx-login-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(0, 229, 255, 0.55);
  pointer-events: none;
}
#login.fx-login-on .fx-login-corner.tl { top: -2px; left: -2px; border-right: 0; border-bottom: 0; border-radius: 4px 0 0 0; }
#login.fx-login-on .fx-login-corner.tr { top: -2px; right: -2px; border-left: 0; border-bottom: 0; border-radius: 0 4px 0 0; }
#login.fx-login-on .fx-login-corner.bl { bottom: -2px; left: -2px; border-right: 0; border-top: 0; border-radius: 0 0 0 4px; }
#login.fx-login-on .fx-login-corner.br { bottom: -2px; right: -2px; border-left: 0; border-top: 0; border-radius: 0 0 4px 0; }

/* ---------- 标题 ---------- */
#login.fx-login-on .box h2 {
  margin-bottom: 8px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #e6f6ff;
  text-align: center;
  text-shadow: 0 0 16px rgba(0, 229, 255, 0.45);
}

/* 标题下副标语（由 JS 插入 .fx-login-sub） */
#login.fx-login-on .fx-login-sub {
  margin: 0 0 24px;
  font-size: 11px;
  letter-spacing: 4px;
  text-align: center;
  color: rgba(0, 229, 255, 0.55);
  text-transform: uppercase;
}

/* ---------- 输入框：暗底 + 聚焦发光 ---------- */
#login.fx-login-on .box input {
  box-sizing: border-box;
  width: 100%;
  padding: 11px 14px;
  margin-bottom: 16px;
  background: rgba(6, 18, 34, 0.85);
  border: 1px solid rgba(0, 229, 255, 0.18);
  border-radius: 6px;
  color: #d8ecff;
  font-size: 14px;
  outline: none;
  caret-color: #00e5ff;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

#login.fx-login-on .box input::placeholder {
  color: rgba(150, 190, 220, 0.45);
  letter-spacing: 1px;
}

/* 聚焦：荧光青描边 + 外发光 + 微提亮 */
#login.fx-login-on .box input:focus {
  border-color: rgba(0, 229, 255, 0.85);
  background: rgba(8, 24, 44, 0.95);
  box-shadow:
    0 0 0 1px rgba(0, 229, 255, 0.35),
    0 0 18px rgba(0, 229, 255, 0.28),
    0 0 42px rgba(0, 229, 255, 0.10);
}

/* ---------- 按钮：荧光渐变 + 流光扫过 hover ---------- */
#login.fx-login-on .box button {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 12px 0;
  margin-top: 4px;
  background: linear-gradient(135deg, #0b3a5c 0%, #0d5a7a 50%, #0b3a5c 100%);
  border: 1px solid rgba(0, 229, 255, 0.45);
  border-radius: 6px;
  color: #00e5ff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 6px;
  text-indent: 6px; /* 抵消 letter-spacing 尾部空隙，视觉居中 */
  cursor: pointer;
  text-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
  box-shadow: 0 0 16px rgba(0, 229, 255, 0.15);
  transition: box-shadow 0.3s ease, transform 0.15s ease, color 0.3s ease;
}

/* 流光束：默认藏在左侧，hover 时扫过 */
#login.fx-login-on .box button::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(105deg, transparent, rgba(0, 229, 255, 0.35), rgba(255, 255, 255, 0.55), rgba(0, 229, 255, 0.35), transparent);
  transform: skewX(-20deg);
  transition: none;
  pointer-events: none;
}

#login.fx-login-on .box button:hover {
  color: #ffffff;
  box-shadow:
    0 0 24px rgba(0, 229, 255, 0.45),
    0 0 64px rgba(0, 229, 255, 0.18);
  transform: translateY(-1px);
}

#login.fx-login-on .box button:hover::after {
  left: 120%;
  transition: left 0.7s ease;
}

#login.fx-login-on .box button:active {
  transform: translateY(0) scale(0.985);
}

/* ---------- 错误提示：改为荧光红 + 抖动动画类 ---------- */
#login.fx-login-on .box #loginErr {
  color: #ff5f6d !important; /* 覆盖原内联 style 的 #dc2626 */
  text-shadow: 0 0 10px rgba(255, 95, 109, 0.5);
  text-align: center;
  min-height: 16px;
}

/* 登录失败抖动（JS 给 .box 加 .fx-login-shake） */
#login.fx-login-on .box.fx-login-shake {
  animation: fx-login-shake 0.45s ease both;
}

/* ---------- 底部版本脚标（由 JS 插入 .fx-login-foot） ---------- */
#login.fx-login-on .fx-login-foot {
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  z-index: 1;
  text-align: center;
  font-size: 11px;
  letter-spacing: 2px;
  color: rgba(120, 170, 205, 0.4);
  pointer-events: none;
}

/* ---------- 动画关键帧 ---------- */
@keyframes fx-login-card-in {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes fx-login-card-breathe {
  0%, 100% { box-shadow: 0 0 0 1px rgba(0,229,255,0.06) inset, 0 0 32px rgba(0,229,255,0.12), 0 24px 64px rgba(0,0,0,0.55); }
  50%      { box-shadow: 0 0 0 1px rgba(0,229,255,0.10) inset, 0 0 48px rgba(0,229,255,0.20), 0 24px 64px rgba(0,0,0,0.55); }
}

@keyframes fx-login-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-10px); }
  40%      { transform: translateX(9px); }
  60%      { transform: translateX(-6px); }
  80%      { transform: translateX(4px); }
}

/* ---------- 降级：用户系统开启"减少动态效果"时关闭动画 ---------- */
@media (prefers-reduced-motion: reduce) {
  #login.fx-login-on .box,
  #login.fx-login-on .box.fx-login-shake {
    animation: none;
  }
  #login.fx-login-on .box button,
  #login.fx-login-on .box button::after,
  #login.fx-login-on .box input {
    transition: none;
  }
}