/* --- 全局样式 --- */
        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
        body {
            overflow: hidden;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }
        #canvas-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }

        /* --- 登录卡片容器 --- */
        .login-container {
            position: relative; z-index: 2;
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 20px; padding: 40px;
            width: 400px; max-width: 90%;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
            text-align: center; color: #fff;
        }
        @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } }
        .login-container h2 { margin-bottom: 20px; font-weight: 300; letter-spacing: 2px; }

        /* --- 顶部警告横幅 --- */
        .alert-banner {
            background: #ff4757; color: white; padding: 10px;
            border-radius: 8px; margin-bottom: 20px; font-size: 14px;
            display: none; animation: slideDown 0.3s ease;
        }
        @keyframes slideDown { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

        /* --- 输入框样式 --- */
        .input-group { position: relative; margin-bottom: 20px; text-align: left; }
        .input-group input {
            width: 100%; padding: 12px 20px;
            background: rgba(255, 255, 255, 0.1); border: none; outline: none;
            border-radius: 30px; color: #fff; font-size: 16px;
            border: 1px solid rgba(255, 255, 255, 0.2); transition: 0.3s;
        }
        .input-group input::placeholder { color: rgba(255, 255, 255, 0.6); }
        .input-group input:focus { background: rgba(255, 255, 255, 0.2); box-shadow: 0 0 10px rgba(255, 255, 255, 0.2); border-color: #fff; }
        
        /* --- 错误提示样式 --- */
        .error-msg {
            color: #ff0000; font-size: 12px; margin-top: 5px; margin-left: 15px;
            display: none; 
        }
        .input-error { border-color: #ff4757 !important; animation: shake 0.4s; background: rgba(255, 71, 87, 0.1) !important; }
        @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

        /* --- 验证码布局 --- */
        .code-group { display: flex; gap: 10px; }
        .code-group input { flex: 1; }
        .btn-code {
            width: 120px; padding: 12px;
            background: rgba(255, 255, 255, 0.2); color: #fff;
            border: 1px solid rgba(255, 255, 255, 0.4);
            border-radius: 30px; font-size: 14px; cursor: pointer; transition: 0.3s;
        }
        .btn-code:hover { background: rgba(255, 255, 255, 0.3); }
        .btn-code:disabled { background: rgba(255, 255, 255, 0.1); color: rgba(255,255,255,0.5); cursor: not-allowed; }

        /* --- 按钮样式 --- */
        .btn-submit {
            width: 100%; padding: 12px;
            background: #fff; color: #764ba2; border: none; border-radius: 30px;
            font-size: 16px; font-weight: bold; cursor: pointer; transition: 0.3s; margin-top: 10px;
        }
        .btn-submit:hover { background: #f0f0f0; transform: scale(1.02); box-shadow: 0 5px 15px rgba(0,0,0,0.2); }

        /* --- 底部链接 --- */
        .footer-links { margin-top: 20px; font-size: 14px; display: flex; justify-content: space-between; }
        .footer-links a { color: rgba(255, 255, 255, 0.8); text-decoration: none; transition: 0.3s; cursor: pointer; }
        .footer-links a:hover { color: #fff; text-decoration: underline; }

        /* --- 页面切换 --- */
        .form-box { display: none; animation: fadeIn 0.5s; }
        .form-box.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        @media (max-width: 480px) {
            .login-container { padding: 30px 20px; width: 85%; }
            .footer-links { flex-direction: column; gap: 10px; }
            .code-group { flex-direction: column; }
            .btn-code { width: 100%; }
        }