/* modal.css */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(10,10,8,.45); z-index:200; }
.modal-overlay.open { display:block; animation:overlayIn .15s ease; }
@keyframes overlayIn { from{opacity:0} to{opacity:1} }

.modal-box {
  display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-54%);
  background:var(--color-surface); border-radius:var(--radius-lg);
  border:1px solid var(--color-border); box-shadow:var(--shadow-md);
  width:480px; max-width:95vw; max-height:88vh; overflow-y:auto; z-index:201;
}
.modal-box.open { display:block; transform:translate(-50%,-50%); animation:modalIn .18s ease; }
.modal-box.modal-wide { width:680px; }
@keyframes modalIn { from{opacity:0;transform:translate(-50%,-48%)} to{opacity:1;transform:translate(-50%,-50%)} }

.modal-header { display:flex; align-items:center; justify-content:space-between; padding:20px 24px 0; margin-bottom:18px; position:sticky; top:0; background:var(--color-surface); z-index:1; padding-top:22px; }
.modal-title  { font-size:15px; font-weight:600; }
.modal-close  { background:none; border:none; font-size:15px; color:var(--color-hint); cursor:pointer; padding:5px; border-radius:var(--radius-sm); line-height:1; }
.modal-close:hover { background:var(--color-bg); color:var(--color-text); }
.modal-body   { padding:0 24px 24px; }