/*
* Login Page - 保险投保平台 专业登录
* 主题色：蓝 #1e88e5 / #1565c0
*/

/* ========== 全局 ========== */
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }

/* ========== 背景 ========== */
.login-bg {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
    background: #0a0e1a;
}

/* 科技网格 */
.login-bg .tech-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(rgba(30,136,229,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(30,136,229,.04) 1px, transparent 1px);
    background-size: 60px 60px;
    animation: gridMove 20s linear infinite;
}
@keyframes gridMove {
    0% { transform: translate(0, 0); }
    100% { transform: translate(60px, 60px); }
}

/* 流动极光 */
.login-bg .aurora {
    position: absolute;
    top: -40%;
    left: -20%;
    width: 140%;
    height: 80%;
    z-index: 0;
    opacity: .6;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(30,136,229,.06) 20%,
        rgba(23,179,163,.04) 40%,
        rgba(30,136,229,.06) 60%,
        transparent 100%
    );
    filter: blur(40px);
    animation: auroraFlow 8s ease-in-out infinite alternate;
}
@keyframes auroraFlow {
    0% { transform: translateX(-5%) skewX(-2deg); }
    100% { transform: translateX(5%) skewX(2deg); }
}

/* 底部渐变 */
.login-bg .bg-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 45%;
    z-index: 0;
    background: linear-gradient(0deg, rgba(21,101,192,.12), transparent);
    pointer-events: none;
}

/* 3D地球画布 */
.login-bg #earthCanvas {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 520px;
    height: 520px;
    z-index: 0;
}

/* 粒子画布 */
.login-bg #particleCanvas {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
}

/* 背景光晕 */
.login-bg .glow-orb {
    position: absolute;
    border-radius: 50%;
    z-index: 0;
    filter: blur(80px);
    animation: orbFloat 10s ease-in-out infinite;
}
.login-bg .glow-orb:nth-child(1) {
    width: 500px; height: 500px;
    top: -10%; right: -5%;
    background: rgba(30,136,229,.1);
}
.login-bg .glow-orb:nth-child(2) {
    width: 400px; height: 400px;
    bottom: -5%; left: -5%;
    background: rgba(23,179,163,.07);
    animation-delay: 3s;
}
.login-bg .glow-orb:nth-child(3) {
    width: 300px; height: 300px;
    top: 40%; left: 30%;
    background: rgba(30,136,229,.05);
    animation-delay: 6s;
}
@keyframes orbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(20px, -30px) scale(1.05); }
    66% { transform: translate(-15px, 15px) scale(.95); }
}

/* 浮动六边形 */
.login-bg .hex-float {
    position: absolute;
    z-index: 0;
    opacity: .08;
    animation: hexSpin 30s linear infinite;
}
.login-bg .hex-float:nth-child(1) { top: 8%; left: 12%; animation-duration: 35s; }
.login-bg .hex-float:nth-child(2) { top: 60%; left: 6%; animation-duration: 25s; animation-direction: reverse; }
.login-bg .hex-float:nth-child(3) { top: 25%; right: 8%; animation-duration: 40s; }
@keyframes hexSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ========== 左侧品牌区 ========== */
.login-brand {
    position: absolute;
    top: 50%;
    left: 6%;
    transform: translateY(-50%);
    z-index: 2;
    color: #fff;
    max-width: 500px;
    animation: brandFadeIn 1s .3s ease both;
}
.login-brand .brand-logo-area {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}
.login-brand .brand-logo-area img {
    width: 58px; height: 58px;
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(30,136,229,.4);
    border: 2px solid rgba(255,255,255,.1);
}
.login-brand h1 {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #90caf9 0%, #42a5f5 40%, #1e88e5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}
.login-brand .brand-subtitle {
    font-size: 17px;
    color: rgba(144,202,249,.7);
    letter-spacing: .8px;
    margin-bottom: 14px;
    font-weight: 300;
}
/* 合规徽章 */
.login-brand .brand-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(30,136,229,.15), rgba(23,179,163,.1));
    border: 1px solid rgba(30,136,229,.25);
    color: rgba(255,255,255,.6);
    font-size: 11px;
    letter-spacing: .5px;
    margin-bottom: 20px;
}
.login-brand .brand-badge i {
    color: #64b5f6;
    font-size: 13px;
}

/* 分隔线 */
.login-brand .brand-divider {
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #1e88e5, transparent);
    border-radius: 2px;
    margin-bottom: 32px;
}

/* 功能卡片网格 */
.login-brand .brand-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 8px;
}
.login-brand .brand-card {
    padding: 15px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    transition: all .3s ease;
}
.login-brand .brand-card:hover {
    background: rgba(30,136,229,.1);
    border-color: rgba(30,136,229,.3);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(30,136,229,.15);
}
.login-brand .brand-card-icon {
    width: 42px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(30,136,229,.25), rgba(30,136,229,.1));
    border: 1px solid rgba(30,136,229,.3);
    color: #64b5f6;
    font-size: 20px;
    margin-bottom: 10px;
}
.login-brand .brand-card-title {
    font-size: 15px;
    font-weight: 600;
    color: rgba(255,255,255,.85);
    margin-bottom: 4px;
    letter-spacing: .3px;
}
.login-brand .brand-card-desc {
    font-size: 12px;
    color: rgba(255,255,255,.4);
    line-height: 1.4;
}

/* 信任标识 */
.login-brand .brand-trust {
    margin-top: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,.4);
    font-size: 12px;
    letter-spacing: .5px;
}
.login-brand .brand-trust i {
    color: #64b5f6;
    font-size: 15px;
}

@keyframes brandFadeIn {
    from { opacity: 0; transform: translateY(-50%) translateX(-40px); }
    to { opacity: 1; transform: translateY(-50%) translateX(0); }
}

/* ========== 登录卡片 ========== */
.login {
    position: absolute;
    top: 50%;
    right: 6%;
    transform: translateY(-50%);
    min-height: 500px;
    max-width: 440px;
    width: 440px;
    padding: 0;
    background: rgba(12,18,35,.88);
    backdrop-filter: blur(28px) saturate(1.6);
    -webkit-backdrop-filter: blur(28px) saturate(1.6);
    border-radius: 24px;
    box-sizing: border-box;
    border: 1px solid rgba(30,136,229,.12);
    box-shadow:
        0 32px 80px rgba(0,0,0,.5),
        0 0 0 1px rgba(255,255,255,.04),
        inset 0 1px 0 rgba(255,255,255,.06);
    z-index: 3;
    animation: cardFadeIn .8s .1s ease both;
    overflow: hidden;
}
/* 卡片顶部渐变装饰条 */
.login::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #1e88e5, #42a5f5, #17b3a3, #42a5f5, #1e88e5);
    background-size: 200% 100%;
    animation: topBarFlow 3s linear infinite;
    z-index: 1;
}
@keyframes topBarFlow {
    0% { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
}
/* 卡片微光呼吸 */
.login::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 1px;
    background: linear-gradient(
        135deg,
        rgba(30,136,229,.3) 0%,
        rgba(30,136,229,0) 25%,
        rgba(23,179,163,.2) 50%,
        rgba(30,136,229,0) 75%,
        rgba(30,136,229,.3) 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: borderBreath 4s ease-in-out infinite;
    pointer-events: none;
}
@keyframes borderBreath {
    0%, 100% { opacity: .6; }
    50% { opacity: 1; }
}

@keyframes cardFadeIn {
    from { opacity: 0; transform: translateY(-50%) scale(.94) translateY(16px); }
    to { opacity: 1; transform: translateY(-50%) scale(1) translateY(0); }
}

/* ========== 登录头部 ========== */
.login .login-header {
    text-align: center;
    padding: 44px 40px 12px;
    animation: headerFadeIn .6s .3s ease both;
}
.login .login-avatar {
    width: 72px; height: 72px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1e88e5 0%, #1565c0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 32px rgba(21,101,192,.5);
    position: relative;
}
.login .login-avatar i {
    font-size: 32px;
    color: #fff;
}
/* 头像光环 */
.login .login-avatar::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(30,136,229,.3);
    animation: avatarPulse 2.5s ease-in-out infinite;
}
@keyframes avatarPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.08); opacity: .5; }
}
.login .login-title {
    font-size: 24px;
    font-weight: 700;
    color: #e3f2fd;
    margin: 0 0 6px;
    letter-spacing: .5px;
}
.login .login-subtitle {
    font-size: 13px;
    color: rgba(255,255,255,.35);
    margin: 0;
    font-weight: 300;
    letter-spacing: .3px;
}
.login .login-header-divider {
    width: 36px;
    height: 2px;
    margin: 18px auto 0;
    background: linear-gradient(90deg, transparent, #42a5f5, transparent);
    border-radius: 1px;
    opacity: .6;
}
@keyframes headerFadeIn {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ========== 表单区 ========== */
.login .layui-form {
    padding: 24px 40px 0;
}

/* ========== 安全提示 ========== */
.login .login-secure {
    text-align: center;
    padding: 20px 40px 6px;
    color: rgba(255,255,255,.28);
    font-size: 11px;
    letter-spacing: .5px;
}
.login .login-secure i {
    margin-right: 5px;
    font-size: 13px;
    color: #64b5f6;
}

/* ========== 联系信息 ========== */
.login .login-contact {
    display: flex;
    justify-content: center;
    gap: 18px;
    padding: 14px 40px 22px;
    border-top: 1px solid rgba(255,255,255,.06);
    color: rgba(255,255,255,.3);
    font-size: 11px;
    letter-spacing: .3px;
}
.login .login-contact span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all .3s ease;
}
.login .login-contact span:hover {
    color: #64b5f6;
}
.login .login-contact i {
    font-size: 13px;
}

/* ========== 底部版权 ========== */
.login-copyright {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 18px;
    text-align: center;
    color: rgba(255,255,255,.22);
    font-size: 11px;
    letter-spacing: .5px;
    z-index: 2;
    pointer-events: none;
}

/* ========== 输入框 ========== */
.login .input-group {
    position: relative;
    margin-bottom: 20px;
}
.login .input-group .input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,.2);
    font-size: 17px;
    z-index: 1;
    transition: all .3s ease;
}
.login .input-group:focus-within .input-icon {
    color: #42a5f5;
    text-shadow: 0 0 12px rgba(30,136,229,.5);
}
.login .input-group .input-line {
    position: absolute;
    bottom: 0; left: 50%;
    width: 0; height: 2px;
    background: linear-gradient(90deg, #1e88e5, #42a5f5, #17b3a3);
    border-radius: 1px;
    transition: all .4s cubic-bezier(.4,0,.2,1);
    transform: translateX(-50%);
}
.login .input-group:focus-within .input-line {
    width: calc(100% - 16px);
}

.login input[type=text],
.login input[type=file],
.login input[type=password],
.login input[type=email], select {
    border: 1.5px solid rgba(255,255,255,.08);
    vertical-align: middle;
    border-radius: 12px;
    height: 54px;
    padding: 0px 16px 0px 48px;
    font-size: 14px;
    color: #e0e0e0;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    background: rgba(255,255,255,.04);
    transition: all .3s ease;
}
.login input[type=text]::placeholder,
.login input[type=password]::placeholder {
    color: rgba(255,255,255,.22);
}
.login input[type=text]:hover,
.login input[type=password]:hover,
.login input[type=email]:hover {
    border-color: rgba(255,255,255,.15);
    background: rgba(255,255,255,.06);
}
.login input[type=text]:focus,
.login input[type=file]:focus,
.login input[type=password]:focus,
.login input[type=email]:focus, select:focus {
    border-color: rgba(30,136,229,.45);
    background: rgba(30,136,229,.05);
    box-shadow: 0 0 0 3px rgba(30,136,229,.06), 0 0 20px rgba(30,136,229,.04);
}


/* ========== 登录按钮 ========== */
.login input[type=submit],
.login input[type=button] {
    display: inline-block;
    vertical-align: middle;
    padding: 0;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 3px;
    height: 54px;
    line-height: 54px;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, #1e88e5, #1565c0);
    border-radius: 14px;
    border: none;
    -webkit-appearance: none;
    outline: none;
    width: 100%;
    box-shadow: 0 6px 24px rgba(21,101,192,.45);
    transition: all .35s cubic-bezier(.4,0,.2,1);
    position: relative;
    overflow: hidden;
}
/* 按钮光泽 */
.login input[type=submit]::after,
.login input[type=button]::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
    transition: left .6s ease;
}
.login input[type=submit]:hover::after,
.login input[type=button]:hover::after {
    left: 100%;
}
.login input[type=submit]:hover,
.login input[type=button]:hover {
    background: linear-gradient(135deg, #42a5f5, #1976d2);
    box-shadow: 0 10px 36px rgba(21,101,192,.6);
    transform: translateY(-2px);
    letter-spacing: 4px;
}
.login input[type=submit]:active,
.login input[type=button]:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(21,101,192,.4);
}

.login hr { background: transparent; }
.login #darkbannerwrap { display: none; }

/* ========== 响应式 ========== */
@media screen and (max-width: 1200px) {
    .login-brand .brand-grid,
    .login-brand .brand-stats,
    .login-brand .brand-badge,
    .login-bg #earthCanvas { display: none; }
}
@media screen and (max-width: 1024px) {
    .login-brand { display: none; }
    .login {
        right: 50%;
        transform: translateY(-50%) translateX(50%);
    }
}
@media screen and (max-width: 480px) {
    .login {
        max-width: 94vw;
        width: 94vw;
        right: 3vw;
        transform: translateY(-50%);
    }
    .login .login-header {
        padding: 32px 28px 8px;
    }
    .login .layui-form {
        padding: 16px 28px 0;
    }
}