.modal-overlay { position: fixed; inset: 0; background: rgb(0 0 0 / 0.5); z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.modal { background: var(--color-bg); border-radius: var(--radius-xl); max-width: 540px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-xl); }
.modal__header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--color-border); }
.modal__title { font-size: var(--text-lg); font-weight: var(--font-bold); }
.modal__close { padding: var(--space-1); border-radius: var(--radius-sm); color: var(--color-text-secondary); transition: color var(--transition), background var(--transition); }
.modal__close:hover { color: var(--color-text); background: var(--color-bg-tertiary); }
.modal__close:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.modal__body { padding: var(--space-6); }
.modal__footer { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-border); display: flex; gap: var(--space-3); justify-content: flex-end; }