body{font-family:Arial,sans-serif;background-color:#f4f4f9;margin:0;padding:0;color:#333}.main-title{text-align:center;font-size:3rem;color:#007bff;margin:20px 0;cursor:pointer;transition:color .3s ease}.main-title:hover{color:#0056b3}.container{max-width:1200px;margin:0 auto;padding:20px;position:relative}.add-user-button{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;background-color:#007bff;color:#fff;border:none;border-radius:5px;font-size:1rem;cursor:pointer;transition:background-color .3s ease,transform .3s ease;position:absolute;top:120px;right:20px}.add-user-button:hover{background-color:#0056b3;transform:translateY(-2px)}.search-container{position:relative;width:50%;margin:100px auto 20px}.search-input-container{display:flex;align-items:center;gap:10px}.search-input-container input{width:100%;padding:8px 12px;border:1px solid #ddd;border-radius:5px;font-size:1rem;transition:border-color .3s ease}.search-input-container input:focus{border-color:#007bff;outline:none}.search-button{background-color:#007bff;color:#fff;border:none;padding:8px 12px;border-radius:5px;cursor:pointer;transition:background-color .3s ease}.search-button:hover{background-color:#0056b3}.suggestions-list{position:absolute;top:100%;left:0;right:0;background-color:#fff;border:1px solid #ddd;border-radius:5px;box-shadow:0 4px 12px #0000001a;z-index:1000;margin-top:5px}.suggestions-list li{padding:8px 12px;cursor:pointer;transition:background-color .3s ease}.suggestions-list li:hover{background-color:#f4f4f9}.not-found-message{color:#dc3545;text-align:center;margin-top:10px}.users-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;padding:20px;margin-top:20px}.user-card{background-color:#fff;border-radius:12px;box-shadow:0 4px 12px #0000001a;padding:25px;text-align:left;transition:transform .3s ease,box-shadow .3s ease}.user-card:hover{transform:translateY(-5px);box-shadow:0 8px 24px #00000026}.user-card img{border-radius:50%;width:120px;height:120px;object-fit:cover;margin-bottom:20px;display:block;margin-left:auto;margin-right:auto}.user-card h2{font-size:1.6rem;margin:0 0 15px;color:#007bff;text-align:center}.user-card p{margin:10px 0;color:#555;display:flex;align-items:center;gap:10px;font-size:1rem}.user-card p svg{color:#007bff;font-size:1.2rem}.user-actions{display:flex;justify-content:center;gap:15px;margin-top:20px}.user-actions button{background-color:#007bff;color:#fff;border:none;border-radius:14px;padding:8px 14px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .3s ease,transform .3s ease;font-size:1rem}.user-actions button:hover{background-color:#0056b3;transform:translateY(-2px)}.user-actions button svg{font-size:1.2rem;margin-right:5px}.add-user-button{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;background-color:#28a745;color:#fff;border:none;border-radius:8px;font-size:1rem;cursor:pointer;transition:background-color .3s ease,transform .3s ease;position:absolute;top:120px;right:20px}.add-user-button:hover{background-color:#218838;transform:translateY(-2px)}.add-user-button svg{font-size:1.2rem}.pagination{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:20px}.pagination button{padding:8px 12px;background-color:#007bff;color:#fff;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s ease;display:flex;align-items:center;gap:5px}.pagination button:disabled{background-color:#ccc;cursor:not-allowed}.pagination button:hover:not(:disabled){background-color:#0056b3}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:1001}.modal-content{background-color:#fff;padding:25px;border-radius:12px;box-shadow:0 8px 24px #0003;width:350px;position:relative;z-index:1002}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.modal-title{font-size:1.6rem;color:#333;font-weight:600}.modal-close-button{background:none;border:none;cursor:pointer;padding:0;font-size:2rem;color:#007bff;transition:color .3s ease,transform .2s ease;position:absolute;top:15px;right:15px}.modal-close-button:hover{color:#0056b3;transform:scale(1.1)}.modal-close-button svg{vertical-align:middle}.modal-body{width:100%}.modal-body label{display:block;font-size:.9rem;color:#555;margin-bottom:8px;font-weight:500}.modal-body input{width:100%;padding:10px;border:1px solid #ddd;border-radius:8px;font-size:.9rem;transition:border-color .3s ease,box-shadow .3s ease}.modal-body input:focus{border-color:#007bff;outline:none;box-shadow:0 0 8px #007bff4d}.modal-confirmation-content{background-color:#fff;padding:25px;border-radius:12px;box-shadow:0 8px 24px #0003;text-align:center}.modal-confirmation-content p{font-size:1.1rem;color:#333;margin-bottom:25px;font-weight:500}.modal-confirmation-buttons{display:flex;justify-content:center;gap:15px}.modal-confirmation-buttons button{background-color:#007bff;color:#fff;border:none;padding:10px 20px;border-radius:8px;cursor:pointer;font-size:.9rem;transition:background-color .3s ease,transform .2s ease;font-weight:500}.modal-confirmation-buttons button:last-child{background-color:#dc3545}.modal-confirmation-buttons button:hover{background-color:#0056b3;transform:translateY(-2px)}.modal-confirmation-buttons button:last-child:hover{background-color:#c82333;transform:translateY(-2px)}.form-container{background-color:#fff;padding:20px;border-radius:20px;box-shadow:0 8px 24px #0003;display:flex;flex-direction:column;gap:3px;width:310px}.form-container label{font-size:.9rem;color:#555;margin-bottom:5px;font-weight:500}.form-container input{width:100%;padding:4px;border:1px solid #ddd;border-radius:10px;font-size:.9rem;transition:border-color .3s ease,box-shadow .3s ease}.form-container input:focus{border-color:#007bff;outline:none;box-shadow:0 0 8px #007bff4d}.form-container button[type=submit]{background-color:#28a745;color:#fff;border:none;padding:10px 20px;border-radius:10px;cursor:pointer;font-size:.9rem;transition:background-color .3s ease,transform .2s ease;margin-top:15px;font-weight:500}.form-container button[type=submit]:hover{background-color:#218838;transform:translateY(-2px)}.password-input-container{position:relative;width:100%}.password-input-container input{width:100%;padding-right:5px}.password-toggle-button{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:transparent!important;border:none!important;cursor:pointer;color:#007bff;padding:0!important;font-size:1.2rem;display:flex;align-items:center;justify-content:center;width:30px;height:30px}.password-toggle-button:hover{color:#0056b3;background:transparent!important}