@charset "utf-8";

/**  =================== 登录的样式 ===================  **/
body, a, dl, dt, dd, li, img, button { cursor: url("../images/cursor.cur"), auto !important; }
body {
    min-height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #0b1226;
    background-image:
        radial-gradient(ellipse 60% 50% at 15% 20%, rgba(34, 211, 238, .18), transparent 60%),
        radial-gradient(ellipse 50% 45% at 85% 75%, rgba(99, 102, 241, .22), transparent 60%),
        radial-gradient(ellipse 40% 35% at 70% 15%, rgba(14, 165, 233, .15), transparent 65%),
        linear-gradient(135deg, #0b1226 0%, #101b3a 45%, #0d1f38 100%);
}
/** 科技感网格 **/
body::before {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; content: "";
    background-image:
        linear-gradient(rgba(56, 189, 248, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(56, 189, 248, .06) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 30%, transparent 100%);
    mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 30%, transparent 100%);
}
/** 漂浮光点 **/
body::after {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; content: "";
    background-image:
        radial-gradient(circle 2px at 12% 25%, rgba(56, 189, 248, .9) 0%, transparent 100%),
        radial-gradient(circle 1.5px at 28% 68%, rgba(165, 243, 252, .8) 0%, transparent 100%),
        radial-gradient(circle 2.5px at 45% 15%, rgba(56, 189, 248, .7) 0%, transparent 100%),
        radial-gradient(circle 1.5px at 62% 55%, rgba(129, 140, 248, .8) 0%, transparent 100%),
        radial-gradient(circle 2px at 78% 30%, rgba(56, 189, 248, .85) 0%, transparent 100%),
        radial-gradient(circle 1.5px at 88% 62%, rgba(165, 243, 252, .7) 0%, transparent 100%),
        radial-gradient(circle 2px at 35% 85%, rgba(129, 140, 248, .75) 0%, transparent 100%),
        radial-gradient(circle 1.5px at 70% 88%, rgba(56, 189, 248, .8) 0%, transparent 100%);
    animation: login-float 8s ease-in-out infinite alternate;
}
@keyframes login-float {
    0%   { opacity: .45; transform: translateY(0); }
    100% { opacity: 1;   transform: translateY(-18px); }
}
/** 神经网络粒子画布 **/
#neural-canvas { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; display: block; }
/** 纵向扫描光束 **/
.tech-scanline {
    position: fixed; top: 0; left: 0; z-index: 1; width: 100%; height: 220px; pointer-events: none;
    background: linear-gradient(to bottom, transparent, rgba(56, 189, 248, .07) 45%, rgba(56, 189, 248, .18) 50%, rgba(56, 189, 248, .07) 55%, transparent);
    animation: tech-scan 7s linear infinite;
}
@keyframes tech-scan {
    0%   { transform: translateY(-240px); }
    100% { transform: translateY(100vh); }
}
/** HUD四角边框装饰 **/
.tech-hud { position: fixed; z-index: 1; width: 160px; height: 160px; pointer-events: none; opacity: .5; }
.tech-hud-left { top: 24px; left: 24px; border-top: 1px solid rgba(56, 189, 248, .6); border-left: 1px solid rgba(56, 189, 248, .6); }
.tech-hud-left::before { content: ""; position: absolute; top: -4px; left: -4px; width: 8px; height: 8px; background: #38bdf8; box-shadow: 0 0 10px #38bdf8; }
.tech-hud-left::after { content: "AI SYSTEM ONLINE"; position: absolute; top: 12px; left: 14px; font-size: 10px; letter-spacing: 2px; color: rgba(56, 189, 248, .75); font-family: Consolas, monospace; }
.tech-hud-right { bottom: 24px; right: 24px; border-bottom: 1px solid rgba(56, 189, 248, .6); border-right: 1px solid rgba(56, 189, 248, .6); }
.tech-hud-right::before { content: ""; position: absolute; right: -4px; bottom: -4px; width: 8px; height: 8px; background: #38bdf8; box-shadow: 0 0 10px #38bdf8; }
.tech-hud-right::after { content: "DATA · ANALYSIS · CORE"; position: absolute; right: 14px; bottom: 12px; font-size: 10px; letter-spacing: 2px; color: rgba(56, 189, 248, .75); font-family: Consolas, monospace; }
.login-wrapper { position: relative; z-index: 2; margin: 0 auto; padding: 20px; max-width: 420px; box-sizing: border-box; }
.login-wrapper .layui-btn { border-color: currentcolor !important; }
.login-wrapper > .layui-form { padding: 25px 30px; border-radius: 4px; background-color: #ffffff; box-shadow: 0 3px 6px -1px rgba(0, 0, 0, .19); box-sizing: border-box; }
.login-wrapper > .layui-form > h2 { margin-bottom: 25px; font-size: 18px; text-align: center; color: #333333; }
.login-wrapper > .layui-form > .layui-form-item { position: relative; margin-bottom: 25px; }
.login-wrapper > .layui-form > .layui-form-item:last-child { margin-bottom: 0; }
.login-wrapper > .layui-form > .layui-form-item > .layui-input { height: 46px; line-height: 46px; border-radius: 2px !important; }
.login-wrapper .layui-input-icon-group > .layui-input { padding-left: 46px; }
.login-wrapper .layui-input-icon-group > .layui-icon { position: absolute; top: 0; left: 0; width: 46px; height: 46px; font-size: 20px; text-align: center; color: #909399; line-height: 46px; }
.login-wrapper > .layui-form > .layui-form-item.login-captcha-group { padding-right: 135px; }
.login-wrapper > .layui-form > .layui-form-item.login-captcha-group > .login-captcha { position: absolute; top: 0; right: 0; width: 120px; height: 46px; border: 1px solid #e6e6e6; border-radius: 2px !important; cursor: pointer; box-sizing: border-box; }
.login-wrapper > .layui-form > .layui-form-item > .layui-form-checkbox { margin: 0 !important; padding-left: 25px; }
.login-wrapper > .layui-form > .layui-form-item > .layui-form-checkbox > .layui-icon { width: 15px !important; height: 15px !important; }
.login-wrapper > .layui-form .layui-btn-fluid { height: 48px; line-height: 48px; font-size: 16px; border-radius: 2px !important; }
.login-wrapper > .layui-form > .layui-form-item.login-oauth-group > a > .layui-icon { font-size: 26px; }
.login-copyright { position: relative; z-index: 1; padding-bottom: 20px; text-align: center; color: #eeeeee; }
.layui-btn { border-color: #5fb878; background-color: #5fb878; }
.layui-link { color: #5fb878 !important; }
.layui-btn-gloomy { background-color: #444c69; }
.layui-btn-danger { background-color: #f56c6c; }
.layui-btn-default { background-color: #009688; }
.layui-btn-forbid,
.layui-btn-forbid:hover { cursor: not-allowed; opacity: 0.65; pointer-events: none; }

@media screen and (min-height: 550px) {
    .login-wrapper { position: absolute; top: 50%; right: 0; left: 0; margin: -250px auto 0; width: 100%; }
    .login-copyright { position: absolute; right: 0; bottom: 0; left: 0; }
}