/* === 页面整体布局 === */
body {
    margin: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    /* 使按钮能自然出现在下方 */
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.login-box,
.register-box {
    background: #ffc376;
    border: 5px solid #dc7b05;
    padding: 40px 50px;
    width: 320px;
    text-align: center;
    z-index: 5;
}

h2 {
    color: #4b2200;
    text-shadow: 0 2px 0 #b14e05;
    font-size: 40px;
    letter-spacing: 1px;
}

input {
    box-sizing: border-box;
}

.input-group {
    margin-bottom: 18px;

}

label {
    display: block;
    font-weight: bold;
    margin-bottom: 6px;
    color: #4b2200;
    text-shadow: 0 1px 0 #b14e05;
}

input {
    width: 100%;
    padding: 10px;
    border: 3px solid #dc7b05;
    outline: none;
    transition: 0.2s;
}

input:focus {
    box-shadow: 0 0 20px #f6783e88;
}

button {
    width: 100%;
    background: #ffab3d;
    color: #4b2200;
    border: solid 5px #dc7b05;
    padding: 12px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

button:hover {
    filter: brightness(1.1);
}

.error {
    color: red;
    font-size: 13px;
    margin-top: 4px;
}

.success {
    color: green;
    text-align: center;
    margin-top: 15px;
    font-weight: bold;
}

/* 背景图移动 */
.background {
    position: fixed;
    /* 固定在屏幕背景 */
    top: 0;
    left: 0;
    height: 100vh;
    /* 高度铺满屏幕 */
    width: auto;
    /* 保持原比例 */
    object-fit: cover;
    /* 填充但不压缩 */
    animation: moveBg 50s linear infinite alternate;
    /* 动画效果 */
}

/* 关键帧动画：让图片从左慢慢移动到右 */
@keyframes moveBg {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-75%);
        /* 根据图片长度调整移动距离 */
    }
}

/* === 悬浮按钮容器（半隐藏） === */
.floating-buttons {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: -25px;
    /* 稍微盖住一部分 */
    z-index: 3;
}

/* === 半隐藏按钮样式 === */
.floating-buttons button {
    width: 150px;
    background-color: #ffa94d;
    border: 3px solid #b86300;
    color: #fff;
    font-size: 20px;
    padding: 8px 24px;
    border-radius: 10px;
    cursor: pointer;
    transform: translateY(-40%);
    /* 默认被遮一半 */
    transition: all 0.3s ease;
    box-shadow: 0 3px 0 #b86300;
    padding: 20px 0 0 0;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100px;
}


/* === 悬停浮起效果 === */
.floating-buttons button:hover {
    transform: translateY(0%);
    z-index: 3;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);
}

/* === 点击时轻微下压 === */
.floating-buttons button:active {
    transform: translateY(5%);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}