/* 登录页面风格 - 绿色风景画 */
.login-page-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: linear-gradient(180deg, 
        #87CEEB 0%, 
        #98D8C8 25%, 
        #7CB342 50%, 
        #558B2F 75%, 
        #33691E 100%);
    overflow: hidden;
}

.login-page-bg::before {
    content: '';
    position: absolute;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, #FFE082 0%, #FFD54F 50%, transparent 70%);
    top: 60px;
    right: 100px;
    border-radius: 50%;
    box-shadow: 0 0 60px rgba(255, 213, 79, 0.6);
    animation: sunGlow 4s ease-in-out infinite;
}

@keyframes sunGlow {
    0%, 100% { box-shadow: 0 0 60px rgba(255, 213, 79, 0.6); }
    50% { box-shadow: 0 0 100px rgba(255, 213, 79, 0.9); }
}

.cloud {
    position: absolute;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50px;
    animation: cloudMove 40s linear infinite;
}

.cloud::before, .cloud::after {
    content: '';
    position: absolute;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
}

.cloud-1 {
    width: 100px;
    height: 30px;
    top: 80px;
    left: -100px;
}

.cloud-1::before {
    width: 50px;
    height: 50px;
    top: -25px;
    left: 15px;
}

.cloud-1::after {
    width: 35px;
    height: 35px;
    top: -15px;
    left: 55px;
}

.cloud-2 {
    width: 80px;
    height: 25px;
    top: 130px;
    left: -80px;
    animation-duration: 50s;
    animation-delay: -20s;
}

.cloud-2::before {
    width: 40px;
    height: 40px;
    top: -20px;
    left: 10px;
}

.cloud-2::after {
    width: 30px;
    height: 30px;
    top: -12px;
    left: 45px;
}

@keyframes cloudMove {
    from { transform: translateX(0); }
    to { transform: translateX(calc(100vw + 200px)); }
}

.mountain-far {
    position: absolute;
    bottom: 30%;
    left: 0;
    width: 100%;
    height: 200px;
    background: linear-gradient(180deg, #81C784 0%, #66BB6A 100%);
    clip-path: polygon(
        0% 100%, 0% 60%, 10% 30%, 20% 50%, 30% 20%, 
        40% 45%, 50% 15%, 60% 40%, 70% 25%, 80% 50%, 
        90% 35%, 100% 55%, 100% 100%
    );
    opacity: 0.7;
}

.mountain-near {
    position: absolute;
    bottom: 20%;
    left: 0;
    width: 100%;
    height: 250px;
    background: linear-gradient(180deg, #4CAF50 0%, #388E3C 100%);
    clip-path: polygon(
        0% 100%, 0% 70%, 5% 40%, 15% 60%, 25% 30%, 
        35% 55%, 45% 25%, 55% 50%, 65% 35%, 75% 60%, 
        85% 40%, 95% 65%, 100% 45%, 100% 100%
    );
}

.forest {
    position: absolute;
    bottom: 15%;
    left: 0;
    width: 100%;
    height: 120px;
    background: linear-gradient(180deg, #2E7D32 0%, #1B5E20 100%);
}

.grass {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20%;
    background: linear-gradient(180deg, #7CB342 0%, #558B2F 50%, #33691E 100%);
}

.bird {
    position: absolute;
    font-size: 18px;
    color: #333;
    animation: birdFly 15s linear infinite;
    opacity: 0.6;
    z-index: 1;
}

.bird-1 {
    top: 100px;
    left: -50px;
}

.bird-2 {
    top: 140px;
    left: -50px;
    animation-delay: -5s;
    animation-duration: 18s;
}

@keyframes birdFly {
    0% { transform: translateX(0) translateY(0); }
    25% { transform: translateX(25vw) translateY(-20px); }
    50% { transform: translateX(50vw) translateY(10px); }
    75% { transform: translateX(75vw) translateY(-15px); }
    100% { transform: translateX(100vw) translateY(0); }
}

/* 绿色主题配色 */
.auth-card h2 i {
    background: linear-gradient(135deg, #4CAF50, #2E7D32);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.auth-card .form-group label i {
    color: #4CAF50;
}

.auth-card .form-group input:focus {
    border-color: #4CAF50;
    box-shadow: 0 0 0 4px rgba(76, 175, 80, 0.1);
}

.auth-card .btn {
    background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
}

.auth-card .btn:hover {
    box-shadow: 0 8px 25px rgba(76, 175, 80, 0.5);
}

.auth-footer a {
    color: #4CAF50;
}

.auth-footer a:hover {
    color: #2E7D32;
}