/* ══════════════════════════════════════════════════════════
   modals.css
   Bloco de modais (.modal-overlay, .modal, .modal-btns, etc)
   Extraído de index.html — cascata preservada na ordem:
   base.css → layout.css → modals.css → catalog.css
   ══════════════════════════════════════════════════════════ */
/* MODAL */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:200;align-items:flex-end;justify-content:center;backdrop-filter:blur(4px);}
.modal-overlay.open{display:flex;}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius) var(--radius) 0 0;padding:22px 18px 38px;width:100%;max-width:500px;animation:slideUp .3s ease;max-height:90vh;overflow-y:auto;}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.modal h3{font-family:'Syne',sans-serif;font-weight:800;font-size:17px;margin-bottom:14px;}
.modal .field input,.modal .field select{font-size:15px;}
.modal-btns{display:flex;gap:9px;}
.modal-btns button{flex:1;padding:12px;border-radius:var(--rsm);border:none;font-family:'Syne',sans-serif;font-size:13px;font-weight:700;cursor:pointer;}
.modal-confirm{background:var(--accent3);color:white;}
.modal-cancel{background:var(--surface2);color:var(--text2);border:1px solid var(--border) !important;}