.modal { display: none; position: fixed; inset: 0; z-index: 600; width: 100vw; height: 100vh; background: rgba(40,59,64,.52); opacity: 0; backdrop-filter: blur(3px); transition: opacity .2s ease; }
.modal-body { display: none; position: fixed; top: 50%; left: 50%; z-index: 601; flex-direction: column; width: min(800px, calc(100vw - 32px)); max-width: calc(100vw - 32px); min-width: 0; min-height: 180px; max-height: calc(100vh - 40px); overflow: hidden; border: 1px solid #dce6e9; border-radius: 14px; background: #fff; box-shadow: 0 24px 60px rgba(0,75,95,.2); opacity: 0; transform: translate(-50%, -50%); transition: opacity .2s ease, width .3s ease; }
.modal-title { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 60px; padding: 13px 18px; border-bottom: 1px solid var(--wf-border); background: #f8fbfc; }
.modal-title-text { min-width: 0; flex: 1; color: var(--wf-text); font-size: 16px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.modal-title > div:last-child { flex: 0 0 auto; }
.modal-title button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; opacity: .7; cursor: pointer; }
.modal-title button:hover { border-color: var(--wf-border); background: #fff; opacity: 1; }
.modal-title button img { width: 18px; }
.modal-content { width: 100%; min-width: 0; min-height: 0; flex: 1 1 auto; overflow: auto; padding: 18px; }
.loading-model-content { display: flex; align-items: center; justify-content: center; min-height: 160px; }
@keyframes blink-border { 0%,100% { border-color: transparent; } 50% { border-color: var(--wf-pale-blue); } }
.blink { border: 2px solid transparent; animation: blink-border 1s ease-in-out 3; }