.modal{height:100%;justify-content:center;transition:opacity .3s ease,visibility .3s ease;position:fixed;opacity:0;visibility:hidden;top:0;align-items:center;left:0;width:100%;display:flex;z-index:1000}.modal.is-active{opacity:1;visibility:visible}.modal__overlay{height:100%;transition:opacity .3s ease;position:absolute;opacity:0;top:0;background-color:rgba(0,0,0,.5);left:0;width:100%}.modal.is-active .modal__overlay{opacity:1}.modal__container{transform:translateY(-20px);overflow-y:auto;transition:transform .3s ease;position:relative;max-width:500px;max-height:90vh;background-color:#fff;box-shadow:0 4px 6px rgba(0,0,0,.1);border-radius:8px;width:90%;z-index:1}.modal.is-active .modal__container{transform:translateY(0)}.modal__container--small{max-width:400px}.modal__container--large{max-width:800px}.modal__close{height:24px;padding:0;border:none;right:16px;color:#666;transition:color .3s ease;position:absolute;top:16px;background:none;cursor:pointer;width:24px}.modal__close:hover{color:#000}.modal__header{padding:20px 24px;border-bottom:1px solid #eee}.modal__title{font-size:1.5rem;font-weight:600;color:#333;margin:0}.modal__footer{padding:16px 24px;justify-content:flex-end;border-top:1px solid #eee;gap:12px;display:flex}.modal__button{padding:8px 16px;font-size:14px;font-weight:500;transition:all .3s ease;border-radius:4px;cursor:pointer}.modal__button--primary{border:none;color:#fff;background-color:#0072de}.modal__button--primary:hover{background-color:#0056b3}.modal__button--secondary{border:1px solid #ddd;color:#333;background-color:#f5f5f5}.modal__button--secondary:hover{background-color:#e5e5e5}@keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalSlideIn{0%{transform:translateY(20px)}to{transform:translateY(0)}}@media (max-width:576px){.modal__container{margin:10px;width:95%}.modal__header{padding:16px 20px}.modal__footer{padding:12px 20px;flex-direction:column}.modal__button{width:100%}}