.modal-overlay{align-items:center;background-color:rgba(0,0,0,.7);bottom:0;display:flex;justify-content:center;left:0;opacity:0;position:fixed;right:0;top:0;transition:all .3s ease;visibility:hidden;z-index:1000}.modal-overlay.active{opacity:1;visibility:visible}.modal{background-color:#fff;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.2);display:block;height:auto;left:50%;max-width:500px;opacity:0;top:0;transform:translateY(-50px);transition:all .4s ease;width:90%}.modal-overlay.active .modal{opacity:1;transform:translate(-50%,50%)}.modal-header{align-items:center;border-bottom:1px solid #eee;display:flex;justify-content:space-between;padding:0}.modal-title{color:#2c3e50;font-size:1.5rem;margin:0}.close-btn{background:none;border:none;box-shadow:none!important;color:#7f8c8d;cursor:pointer;font-size:1.4rem;margin-left:auto;padding:15px;position:absolute;right:0;transition:color .3s ease;z-index:2}.close-btn:hover,.modal-body{color:#34495e}.modal-body{margin-top:0;padding:0;position:relative}.modal-footer{border-top:1px solid #eee;display:flex;gap:10px;justify-content:flex-end;padding:15px 20px}.modal-btn{border:none;border-radius:4px;cursor:pointer;font-size:.9rem;padding:8px 16px;transition:all .2s ease}.btn-secondary{background-color:#e7e7e7;color:#333}.btn-secondary:hover{background-color:#ddd}.btn-primary{background-color:#3498db;color:#fff}.btn-primary:hover{background-color:#2980b9}@media (max-width:576px){.modal{width:95%}.modal-footer{flex-direction:column}.modal-btn{margin-bottom:5px;width:100%}}