.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;overflow-y:auto;padding:1rem}.modal__overlay{position:absolute;inset:0;background-color:#00000080}.modal__panel{position:relative;width:100%;margin:auto;background-color:#fff;border-radius:.5rem;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;overflow:hidden;display:flex;flex-direction:column;max-height:calc(100vh - 2rem)}.modal--sm{max-width:24rem}.modal--md{max-width:28rem}.modal--lg{max-width:32rem}.modal--xl{max-width:36rem}.modal--2xl{max-width:42rem}.modal--3xl{max-width:48rem}.modal--4xl{max-width:56rem}.modal--5xl{max-width:64rem}.modal--6xl{max-width:72rem}.modal--full{max-width:100%}.modal__header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem;border-bottom:1px solid #e5e7eb}.modal__title{margin:0;font-size:1.25rem;font-weight:600;color:#1f2937}.modal__close{background:none;border:none;padding:.5rem;cursor:pointer;color:#6b7280;border-radius:.375rem;transition:all .2s;display:flex;align-items:center;justify-content:center}.modal__close:hover{background-color:#f3f4f6;color:#1f2937}.modal__close svg{width:1.25rem;height:1.25rem}.modal__body{padding:1.5rem;overflow-y:auto;flex:1}.modal__footer{display:flex;align-items:center;justify-content:flex-end;gap:.75rem;padding:1.5rem;border-top:1px solid #e5e7eb;background-color:#f9fafb}@media(prefers-color-scheme:dark){.modal__overlay{background-color:#000000bf}.modal__panel{background-color:#1f2937}.modal__header{border-bottom-color:#374151}.modal__title{color:#f9fafb}.modal__close{color:#9ca3af}.modal__close:hover{background-color:#374151;color:#f9fafb}.modal__footer{border-top-color:#374151;background-color:#111827}}