.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; }