.modal{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1000;display:flex;justify-content:center;align-items:center;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}.modal.is-open{opacity:1;visibility:visible}.modal__overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);cursor:pointer}.modal__content{position:relative;background:#1e1e1e;border-radius:8px;padding:20px;max-width:90vw;width:500px;max-height:90vh;overflow-y:auto;z-index:1001;transform:translateY(20px);transition:transform .3s ease,margin .3s ease}.modal.is-open .modal__content{transform:translateY(0)}.modal__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:10px;border-bottom:1px solid #333}.modal__title{margin:0;width:100%;text-align:center}.modal__close{color:#aaa;font-size:24px;width:32px;height:32px;display:flex;justify-content:center;border-radius:50%;transition:color .2s,background-color .2s}.modal__close:hover{color:#fff;background-color:hsla(0,0%,100%,.1)}@media(max-width: 768px){.modal{align-items:flex-end}.modal__content{width:100%;max-width:100vw;max-height:75vh;border-radius:16px 16px 0 0;margin:0;transform:translateY(20px)}.modal.is-open .modal__content{transform:translateY(0)}}