.modal { position: fixed; z-index: 30; inset: 0; display: none; align-items: center; justify-content: center; padding: 18px; background: rgba(0,0,0,.5); }
.modal.is-open { display: flex; }
.modal__dialog { display: flex; flex-direction: column; width: min(900px, 100%); height: min(800px, 88vh); overflow: hidden; border-radius: 24px; background: #fff; box-shadow: 0 20px 60px rgba(0,0,0,.3); animation: modal-in .25s ease-out; }
.modal__header { display: flex; align-items: center; justify-content: space-between; padding: 13px 18px 13px 24px; border-bottom: 1px solid #e8eaed; background: #fafafa; color: var(--brand); font-size: 16px; font-weight: 600; }
.modal__header span { margin-left: 8px; padding: 3px 10px; border-radius: 999px; background: #e8f0fe; font-size: 11px; font-weight: 400; }
.modal__frame { flex: 1; width: 100%; border: 0; }
body.modal-open { overflow: hidden; }
@keyframes modal-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 600px) { .modal { padding: 6px; } .modal__dialog { height: calc(100vh - 12px); border-radius: 16px; } .modal__header { padding: 11px 12px 11px 16px; } }