* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
        background: linear-gradient(180deg, #6e7ff3 0%, #8b64d6 100%);
        min-height: 100vh;
    }

    .login-page {
        max-width: 480px;
        margin: 0 auto;
        padding: 20px;
    }

    /* 导航栏 */
    .nav-bar {
        height: 56px;
        line-height: 56px;
        color: #fff;
        display: flex;
        padding: 0 15px;
        position: relative;
    }

    .nav-title {
        flex: 1;
        text-align: center;
        font-weight: 600;
        font-size: 1.2rem;
        letter-spacing: 0.5px;
    }

    /* 登录表单 */
    .form-card {
        background: rgba(255,255,255,0.95);
        border-radius: 12px;
        padding: 25px 0;
        box-shadow: 0 8px 24px rgba(0,0,0,0.12);
        backdrop-filter: blur(5px);
        margin: 20px 0;
    }

    .form-item {
        margin: 15px 20px;
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .form-item label {
        flex: 0 0 80px;  /* 固定标签宽度 */
        margin-bottom: 0;
        text-align: right;
        color: #666;
        font-size: 0.95rem;
    }

    .form-item input {
        flex: 1;
        max-width: 280px;
        height: 40px;
        padding: 0 12px;
    }

    .form-item input:focus {
        border-color: #6e7ff3;
        box-shadow: 0 0 0 3px rgba(110, 127, 243, 0.1);
        outline: none;
    }

    .login-btn {
        width: calc(100% - 40px);
        max-width: 300px;
        margin: 25px auto;
        height: 48px;
        background: linear-gradient(135deg, #5a8dff 0%, #764ba2 100%);
        color: #fff;
        border: none;
        border-radius: 24px;
        display: block;
        font-size: 1rem;
        font-weight: 500;
        cursor: pointer;
        transition: transform 0.2s ease;
    }

    .login-btn:active {
        transform: scale(0.98);
    }

    .error {
        text-align: center;
        color: #ff4444;
        font-size: 0.9rem;
        margin: 10px 0;
        padding: 0 15px;
    }

    /* 响应式优化 */
    @media (max-width: 480px) {
        .login-page {
            padding: 15px;
        }

        .nav-bar {
            height: 48px;
            line-height: 48px;
        }

        .form-card {
            padding: 20px 0;
            margin: 15px 0;
        }

        .form-item {
            gap: 8px;
        }

        .form-item label {
            flex-basis: 60px;  /* 更窄的标签宽度 */
            font-size: 0.85rem;
        }

        .form-item input {
            font-size: 0.85rem;
            padding: 0 8px;
            min-width: 100px;
        }
		
        .login-btn {
            height: 44px;
            font-size: 0.95rem;
        }
    }

    @media (max-width: 375px) {
        .form-item label {
            flex-basis: 55px;
            font-size: 0.8rem;
        }

        .form-item input {
            font-size: 0.8rem;
            min-width: 90px;
        }
		
        .login-btn {
            height: 42px;
        }
    }

    @media (prefers-color-scheme: dark) {
        .form-card {
            background: rgba(30, 30, 30, 0.95);
        }

        .form-item label {
            color: #eee;
        }

        .form-item input {
            background: rgba(255,255,255,0.1);
            border-color: rgba(255,255,255,0.2);
            color: #fff;
        }
    }