/* 全局样式 */
body {
    background: linear-gradient(to bottom, #141e30, #243b55); /* 调整后的渐变背景 */
    color: #fff;
    font-family: 'Roboto', sans-serif; /* 现代字体 */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden; /* 隐藏滚动条 */
    transition: all 0.3s ease; /* 全局过渡效果 */
}

/* 覆盖 layui 弹窗的样式 */
.layui-layer-content {
    color: #333 !important; /* 设置弹窗文字颜色为深色 */
}

/* 卡片容器 */
.card {
    width: 400px;
    background-color: rgba(255, 255, 255, 0.06); /* 更柔和的卡片背景 */
    border-radius: 10px;
    padding: 40px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* 更深的阴影 */
    backdrop-filter: blur(5px); /* 毛玻璃效果 */
    border: 1px solid rgba(255, 255, 255, 0.08); /* 边框 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 卡片过渡 */
}

.card:hover {
    transform: translateY(-5px); /* 悬停时向上移动 */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4); /* 更强的悬停阴影 */
}

/* 表单组 */
.form-group {
    margin-bottom: 25px;
}

/* 标签 */
label {
    display: block;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 8px;
    color: #eee;
}

/* 输入框 */
input[type="text"] {
    width: 100%;
    padding: 12px 15px;
    font-size: 16px;
    border-radius: 5px;
    border: none;
    background-color: rgba(255, 255, 255, 0.12); /* 调整输入框背景 */
    color: #fff;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); /* 内阴影 */
    transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; /* 输入框过渡 */
}

input[type="text"]::placeholder {
    color: #bbb;
    font-style: italic;
}

input[type="text"]:focus {
    outline: none;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 5px rgba(0, 123, 255, 0.5); /* 更强的内阴影 + 发光效果 */
    background-color: rgba(255, 255, 255, 0.18); /* 略微改变背景色 */
    border-color: rgba(0, 123, 255, 0.7); /*  蓝色边框 */
}

/* 提示信息 */
.form-hint {
    font-size: 12px;
    color: #bbb;
    margin-top: 5px;
}

/* 按钮 */
button {
    width: 100%;
    padding: 14px 20px;
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    background: linear-gradient(to right, #6a5af9, #4589f3); /*  修改后的按钮渐变 */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s ease, box-shadow 0.3s ease; /* 按钮过渡 */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); /*  更大的按钮阴影 */
}

button:hover {
    background: linear-gradient(to left, #6a5af9, #4589f3); /* 按钮渐变色反向 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); /*  更强烈的Hover阴影 */
}

/* 动态背景 (可选) */
.bg-animation {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1; /* 放置在最底层 */
}

.bg-animation span {
    position: absolute;
    width: 40px; /* 略微缩小圆点 */
    height: 40px;
    background: rgba(255, 255, 255, 0.08); /*  更柔和的圆点 */
    border-radius: 50%;
    animation: animate 12s linear infinite; /*  调整动画时间 */
    bottom: -150px; /* 起始位置 */
    left: calc(var(--x) * 1%); /* 使用 CSS 变量控制水平位置 */
}

@keyframes animate {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(-800px) rotate(360deg);
        opacity: 0;
    }
}