.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.45); opacity: 0; pointer-events: none; transition: opacity 0.15s ease; z-index: calc(var(--net-z-modal) - 1); }
.modal-backdrop.is-open { opacity: 1; pointer-events: auto; }
.modal-container { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; padding: var(--net-spacing-lg); z-index: var(--net-z-modal); }
.modal-container.is-open { display: flex; }
.modal-box { background: var(--net-bg-card); color: var(--net-text-primary); border-radius: var(--net-border-radius-md); box-shadow: var(--net-shadow-lg); width: min(560px, 100%); max-height: 90vh; display: flex; flex-direction: column; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: var(--net-spacing-md) var(--net-spacing-lg); border-bottom: 1px solid var(--net-border); }
.modal-header h3 { margin: 0; font-size: var(--net-font-size-lg); }
.modal-close { background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--net-text-muted); }
.modal-body { padding: var(--net-spacing-lg); overflow: auto; }
.modal-footer { display: flex; justify-content: flex-end; gap: var(--net-spacing-sm); padding: var(--net-spacing-md) var(--net-spacing-lg); border-top: 1px solid var(--net-border); }
body.modal-open { overflow: hidden; }
.modal-size-lg .modal-box { width: min(860px, 100%); }
.modal-body h4 { margin: var(--net-spacing-md) 0 var(--net-spacing-xs); }
.modal-body ol, .modal-body ul { padding-left: 1.3rem; }
.modal-body li { margin: 0.25rem 0; }
.modal-body .modal-note { font-size: var(--net-font-size-sm); color: var(--net-text-muted); }