.error-message::before {
            content: '';
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            content: '\f071';
        }
        
        @keyframes shake {
            0%, 100% {
                transform: translateX(0);
            }
            25% {
                transform: translateX(-5px);
            }
            75% {
                transform: translateX(5px);
            }
        }
        
        /* 页脚 */
        .login-footer {
            margin-top: 32px;
            text-align: center;
            font-size: 14px;
            color: #94a3b8;
        }
        
        /* 加载动画 */
        .loading {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top-color: white;
            animation: spin 1s ease-in-out infinite;
        }
        
        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .login-wrapper {
                grid-template-columns: 1fr;
                gap: 0;
                max-width: 400px;
            }
            
            .brand-section {
                padding: 40px 30px;
                border-radius: 24px 24px 0 0;
            }
            
            .login-section {
                padding: 40px 30px;
                border-radius: 0 0 24px 24px;
            }
            
            .brand-title {
                font-size: 24px;
            }
            
            .login-header h2 {
                font-size: 24px;
            }
        }
        
        /* 微交互 */
        .form-group:focus-within .form-label {
            color: #667eea;
        }
        
        .form-input::placeholder {
            color: #cbd5e1;
        }
    
        html {
            min-width: 320px;
        }

        body {
            min-width: 320px;
            min-height: 100vh;
        }

        @media (max-width: 1024px) {
            body {
                height: auto;
                min-height: 100vh;
                overflow: auto;
                padding: 24px 0;
            }

            .login-wrapper {
                max-width: 760px;
                gap: 0;
            }

            .brand-section, .login-section {
                padding: 48px 32px;
            }

            .brand-logo {
                width: 96px;
                height: 96px;
                font-size: 40px;
                margin-bottom: 24px;
            }

            .brand-title {
                font-size: 28px;
            }
        }

        @media (max-width: 768px) {
            body {
                align-items: flex-start;
                padding: 16px 0;
            }

            .login-wrapper {
                width: calc(100% - 32px);
                max-width: 440px;
                margin: 0 auto;
                border-radius: 18px;
            }

            .brand-section {
                padding: 32px 24px;
            }

            .login-section {
                padding: 32px 24px;
            }

            .brand-logo {
                width: 80px;
                height: 80px;
                font-size: 34px;
                margin-bottom: 18px;
            }

            .brand-features {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 8px 12px;
                text-align: left;
            }

            .brand-features li {
                margin-bottom: 0;
                font-size: 13px;
            }

            .form-options {
                flex-wrap: wrap;
                gap: 12px;
            }
        }

        @media (max-width: 480px) {
            .login-wrapper {
                width: calc(100% - 20px);
                border-radius: 14px;
            }

            .brand-section {
                padding: 24px 18px;
            }

            .login-section {
                padding: 24px 18px;
            }

            .brand-title, .login-header h2 {
                font-size: 22px;
            }

            .brand-subtitle, .login-header p, .login-footer {
                font-size: 13px;
            }

            .brand-features {
                grid-template-columns: 1fr;
            }

            .form-input {
                padding: 13px 14px 13px 44px;
            }

            .login-button {
                padding: 14px;
            }

            .shape-1 {
                width: 180px;
                height: 180px;
            }

            .shape-2, .shape-3 {
                width: 120px;
                height: 120px;
            }
        }
    
@media (hover:none) and (pointer:coarse){.login-button,.form-input,.remember-me input{min-height:44px}.login-button:hover{transform:none}}
@media (max-width:640px){.login-wrapper{box-shadow:0 12px 32px rgba(0,0,0,.12)}.login-header{margin-bottom:24px}.form-group{margin-bottom:18px}.form-options{margin-bottom:24px}}
@media (max-width:360px){body{padding:8px 0}.login-wrapper{width:calc(100% - 12px)}.brand-section,.login-section{padding-left:14px;padding-right:14px}.brand-logo{width:64px;height:64px;font-size:28px}.brand-title,.login-header h2{font-size:20px}}