.register-card-center {
        width: 100%;
        max-width: 460px;
        margin: 3rem auto 2.5rem auto;
    }
    .password-card {
        background: #f5f6fa;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
        position: relative;
        transition: all 0.3s cubic-bezier(0.25,0.8,0.25,1);
        min-width: 0;
    }
    .password-card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0,0,0,0.14);}
    .card-header {
        background: linear-gradient(to right, #00b894, #0984e3);
        color: white;
        padding: 30px 30px 18px 30px;
        text-align: center;
        position: relative;
        overflow: hidden;
    }
    .card-header h1 { font-weight: 600; font-size: 1.7rem; margin-bottom: 5px; margin-top: 10px;}
    .card-header p { opacity: 0.92; font-weight: 300; font-size: 1.02rem;}
    .card-body { padding: 30px;}
    .form-group { margin-bottom: 25px;}
    .form-group label { display: block; margin-bottom: 8px; font-weight: 500; color: #2d3436;}
    .input-field { position: relative;}
    .input-field i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #0984e3;}
    .input-field input {
        width: 100%; padding: 15px 15px 15px 50px;
        border: 2px solid #e0e3e6; border-radius: 12px; font-size: 16px;
        transition: all 0.3s;
    }
    .input-field input:focus {
        outline: none; border-color: #0984e3; box-shadow: 0 0 0 3px rgba(9,132,227,0.13);
    }
    .password-strength {
        height: 4px;
        background: #e0e3e6;
        border-radius: 2px;
        margin-top: 8px;
        overflow: hidden;
        position: relative;
    }
    .strength-bar {
        height: 100%;
        width: 0;
        transition: all 0.3s;
    }
    .submit-btn {
        width: 100%; padding: 16px;
        background: linear-gradient(to right, #00b894, #0984e3); color: white;
        border: none; border-radius: 12px; font-size: 16px; font-weight: 600; cursor: pointer;
        transition: all 0.3s; margin-top: 10px; display: flex; align-items: center; justify-content: center;
    }
    .submit-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(9,132,227,0.13);}
    .footer-text { text-align: center; margin-top: 20px; color: #666; font-size: 0.9rem;}
    .footer-text a { color: #0984e3; text-decoration: none; font-weight: 500;}
    .footer-text a:hover { text-decoration: underline;}
    .divider { display: flex; align-items: center; text-align: center; margin: 25px 0; color: #a0a0a0;}
    .divider::before, .divider::after { content: ''; flex: 1; border-bottom: 1px solid #e0e3e6;}
    .divider:not(:empty)::before { margin-right: .25em;}
    .divider:not(:empty)::after { margin-left: .25em;}
    .social-btn {
        width: 100%; padding: 16px; border-radius: 12px; font-size: 16px; font-weight: 600; cursor: pointer;
        transition: all 0.3s; display: flex; align-items: center; justify-content: center; text-decoration: none; border: 2px solid #e0e3e6;
        background: #fff; color: #2d3436;
    }
    .social-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.08);}
    .social-btn.google-btn:hover { border-color: #4285F4;}
    .google-icon { width: 24px; height: 24px; margin-right: 12px;}
    .form-messages { position: relative; margin-bottom: 25px;}
    .alert { padding: 15px 20px; border-radius: 10px; margin-bottom: 15px; display: flex; align-items: center; position: relative; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.07); opacity: 1; transform: translateY(0); transition: all 0.4s;}
    .alert.hide { opacity: 0; transform: translateY(-20px); margin-bottom: 0; padding-top: 0; padding-bottom: 0; height: 0;}
    .alert-success { background: rgba(0,184,148,0.13); border-left: 4px solid #00b894; color: #005b4a;}
    .alert-error { background: rgba(214,48,49,0.13); border-left: 4px solid #d63031; color: #8a1f1f;}
    .alert-warning { background: rgba(253,203,110,0.13); border-left: 4px solid #fdcb6e; color: #8a6e1f;}
    .alert-info { background: rgba(9,132,227,0.13); border-left: 4px solid #0984e3; color: #0a4b7a;}
    .message-icon { margin-right: 12px; font-size: 22px;}
    .message-text { flex: 1; font-size: 0.92rem; font-weight: 500;}
    .close-message { background: none; border: none; font-size: 1.5rem; margin-left: 15px; cursor: pointer; color: inherit; opacity: 0.7; transition: opacity 0.2s; line-height: 1; padding: 0 0 4px 10px;}
    .close-message:hover { opacity: 1;}
    .error-message { color: #d63031; font-size: 0.85rem; margin-top: 5px; display: flex; align-items: center;}
    .error-message i { margin-right: 5px;}
    @media (max-width: 576px) {
        .register-card-center { margin: 1.3rem 0; max-width: 98vw;}
        .password-card { border-radius: 10px;}
        .card-header { padding: 20px 8px 10px 8px;}
        .card-body { padding: 18px 5px;}
        .card-header h1 { font-size: 1.13rem;}
    }