/* Shared modal shell — used by the Materials page's History/Edit modals
   (see index.html) and by confirm-modal.js's confirm()/alert() replacements,
   so every popup in the app shares one look instead of mixing custom
   modals with the browser's native confirm()/alert() chrome. */

.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:16px;z-index:300;}
.modal-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-card);max-width:640px;width:100%;max-height:82vh;display:flex;flex-direction:column;}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:15px 17px;border-bottom:1px solid var(--border);flex-shrink:0;}
.modal-head h2{font-family:var(--disp);font-size:1.2rem;margin:0;font-weight:600;}
.modal-close{background:none;border:none;font-size:1.5rem;line-height:1;color:var(--faint);cursor:pointer;padding:0 4px;}
.modal-close:hover{color:var(--text);}
.modal-body{overflow-y:auto;padding:14px 17px 17px;}
.modal-body h3{font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:400;margin:0 0 11px;color:var(--muted);}
.modal-divider{border-top:1px solid var(--border);margin:19px 0;}
.modal-actions{display:flex;justify-content:flex-end;gap:9px;padding:14px 17px;border-top:1px solid var(--border);flex-shrink:0;}