.modal-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal{background:white;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.15);animation:slideUp .3s ease-out;max-height:90vh;overflow-y:auto;display:flex;flex-direction:column}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal--sm{max-width:400px;width:90%}.modal--md{max-width:600px;width:90%}.modal--lg{max-width:800px;width:90%}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:24px;border-bottom:1px solid #e2e8f0}.modal-title{margin:0;font-size:1.3rem;font-weight:600;color:#0f172a}.modal-close{background:none;border:none;font-size:1.5rem;cursor:pointer;color:#64748b;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color .2s,color .2s}.modal-close:hover{background-color:#f1f5f9;color:#0f172a}.modal-content{padding:24px;flex:1;overflow-y:auto}@media (max-width:640px){.modal-backdrop{padding:16px}.modal{max-height:calc(100vh - 32px)}.modal--lg,.modal--md,.modal--sm{width:100%;max-width:100%}.modal-content,.modal-header{padding:16px}}