/* 检试验登录页 V2 — HUD 暗黑科技风(2026-06-03) */

/* ========== 重置:整体页面深空 ========== */
html, body, #app { background: #02060f !important; }

/* ========== 1. 隐藏冗余 ========== */
.ant-tabs-nav .ant-tabs-tab:nth-of-type(2),
.ant-tabs-bar .ant-tabs-tab:nth-of-type(2),
.user-login-other,
.user-layout-login a[href*="yuque"],
.user-layout-login a[target="_blank"] { display: none !important; }

/* 隐藏 SPA 自带的杂乱"装饰"层 */
.tech-background > * { display: none !important; }

/* ========== 2. 背景:深空 + 网格 + 扫描线 ========== */
.login-container {
  background: radial-gradient(ellipse at 50% 0%, #0a1f4a 0%, #050b1c 55%, #02060f 100%) !important;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
}

/* 全屏蓝色网格(细+远景透视感) */
.login-container::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(54,224,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(54,224,255,.06) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 0%, transparent 80%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 0%, transparent 80%);
}

/* 横向扫描光柱(慢速下移) */
.login-container::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, #36e0ff 30%, #5fb6ff 50%, #36e0ff 70%, transparent);
  box-shadow: 0 0 40px #36e0ff;
  animation: jsScanLine 8s linear infinite;
  opacity: .5;
}
@keyframes jsScanLine {
  0%   { top: -5%; }
  100% { top: 105%; }
}

/* ========== 3. 登录卡片:暗玻璃 + HUD ========== */
.login-box {
  background: linear-gradient(160deg, rgba(20, 45, 90, .65), rgba(8, 20, 45, .65)) !important;
  border: 1px solid rgba(54, 224, 255, .25) !important;
  border-radius: 4px !important;
  box-shadow:
    0 0 0 1px rgba(54, 224, 255, .08),
    0 24px 80px rgba(0, 30, 80, .8),
    inset 0 1px 0 rgba(255, 255, 255, .08) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  padding: 48px 52px 36px !important;
  position: relative; z-index: 2;
  width: 460px !important; max-width: 92vw;
}

/* HUD 四角发光取景框(L 形) */
.login-box::before,
.login-box::after {
  content: ""; position: absolute; width: 22px; height: 22px; pointer-events: none;
  border-color: #36e0ff;
  filter: drop-shadow(0 0 6px #36e0ff);
}
.login-box::before {
  top: -1px; left: -1px;
  border-top: 2px solid; border-left: 2px solid;
}
.login-box::after {
  bottom: -1px; right: -1px;
  border-bottom: 2px solid; border-right: 2px solid;
}

/* ========== 4. logo 区:扫描圆环 + 双语 ========== */
.logo-placeholder { margin-bottom: 32px !important; position: relative; }

.logo-circle {
  box-shadow:
    0 0 32px rgba(54, 224, 255, .55),
    inset 0 0 24px rgba(54, 224, 255, .25),
    0 0 0 1px rgba(54, 224, 255, .4) !important;
  border: 2px solid rgba(54, 224, 255, .8) !important;
}

/* 旋转扫描虚线圆环 */
.logo-placeholder > .logo-circle::after {
  content: ""; position: absolute;
  width: 140px; height: 140px;
  border-radius: 50%;
  border: 1px dashed rgba(54, 224, 255, .35);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  animation: jsRotate 18s linear infinite;
  pointer-events: none;
}
@keyframes jsRotate {
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.logo-text {
  color: #eaf4ff !important;
  text-shadow: 0 0 12px rgba(54, 224, 255, .8), 0 0 2px rgba(255,255,255,.7);
  letter-spacing: 2px;
  font-weight: 800 !important;
}

/* logo 区下方英文副标题 */
.logo-placeholder::after {
  content: "JIANYAN · SHIYAN  CLOUD  PLATFORM";
  display: block;
  text-align: center;
  font-size: 10.5px;
  letter-spacing: 6px;
  color: #5a86c8;
  margin-top: 12px;
  font-family: "Arial Narrow", system-ui, sans-serif;
}

/* ========== 5. Tab ========== */
.ant-tabs-tab {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #93b8e6 !important;
  padding: 12px 8px !important;
}
.ant-tabs-tab.ant-tabs-tab-active,
.ant-tabs-tab-active { color: #36e0ff !important; }
.ant-tabs-ink-bar {
  background: linear-gradient(90deg, transparent, #36e0ff, transparent) !important;
  height: 2px !important;
  box-shadow: 0 0 8px #36e0ff !important;
}

/* ========== 6. 输入框:深色 HUD ========== */
.user-layout-login .ant-input,
.user-layout-login input.ant-input {
  background: rgba(10, 25, 55, .55) !important;
  border: 1px solid rgba(80, 140, 220, .35) !important;
  color: #eaf4ff !important;
  border-radius: 2px !important;
  height: 48px !important;
  font-size: 14.5px !important;
  transition: all .25s ease !important;
  padding-left: 38px !important;
}
.user-layout-login .ant-input::placeholder { color: #6f96cf !important; }
.user-layout-login .ant-input:hover {
  border-color: rgba(54, 224, 255, .55) !important;
  background: rgba(10, 25, 55, .75) !important;
}
.user-layout-login .ant-input:focus {
  border-color: #36e0ff !important;
  box-shadow: 0 0 0 2px rgba(54, 224, 255, .15), 0 0 12px rgba(54, 224, 255, .35) !important;
  background: rgba(10, 25, 55, .85) !important;
}
.user-layout-login .ant-input-prefix,
.user-layout-login .anticon { color: #36e0ff !important; }

/* ========== 7. 复选框/忘记密码 ========== */
.user-layout-login .ant-checkbox-wrapper { color: #93b8e6 !important; }
.user-layout-login .ant-checkbox-inner {
  background: rgba(10, 25, 55, .6) !important;
  border-color: rgba(80, 140, 220, .5) !important;
}
.user-layout-login .ant-checkbox-checked .ant-checkbox-inner {
  background: #36e0ff !important; border-color: #36e0ff !important;
}
.user-layout-login .forge-password { color: #5fb6ff !important; }

/* ========== 8. 登录按钮:扫光 ========== */
.user-layout-login .login-button {
  background: linear-gradient(90deg, #2f7ad6 0%, #36e0ff 100%) !important;
  border: none !important;
  height: 50px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 10px !important;
  border-radius: 2px !important;
  color: #04122b !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.3) !important;
  box-shadow:
    0 0 0 1px rgba(54, 224, 255, .4),
    0 8px 24px rgba(47, 122, 214, .5),
    inset 0 1px 0 rgba(255, 255, 255, .25) !important;
  position: relative; overflow: hidden;
  transition: all .25s ease !important;
}
.user-layout-login .login-button::after {
  content: ""; position: absolute; top: 0; left: -50%; height: 100%; width: 50%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  animation: jsBtnSweep 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes jsBtnSweep {
  0%, 30% { left: -50%; }
  70%, 100% { left: 100%; }
}
.user-layout-login .login-button:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(54, 224, 255, .6),
    0 12px 32px rgba(54, 224, 255, .6),
    inset 0 1px 0 rgba(255, 255, 255, .35) !important;
  filter: brightness(1.08);
}

/* ========== 9. 底部细标识 ========== */
.user-layout-login::after {
  content: "支持中建五局协同 · 单点登录已启用";
  display: block;
  text-align: center;
  color: #5a86c8;
  font-size: 11.5px;
  letter-spacing: 3px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(54, 224, 255, .15);
}
