.modal-overlay {
  position: fixed; top:0; left:0; width:100%; height:100%;
  background: rgba(0,0,0,0.4); display: flex;
  justify-content: center; align-items: center; z-index: 1200;
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
}

.modal-overlay.active { opacity: 1; pointer-events: auto; }

.modal-box {
  background: var(--surface); padding: 20px; border-radius: 20px;
  width: 90%; max-width: 420px; box-shadow: 0 20px 40px rgba(0,0,0,0.2);
  display: flex; flex-direction: column; gap: 14px;
}

.modal-box textarea {
  width:100%; height:80px; font-family: monospace; padding:8px;
  border-radius:8px; border:1px solid var(--border);
  resize: vertical; background: var(--surface); color: var(--text);
}

.modal-box input { padding:8px; border-radius:8px; border:1px solid var(--border); }

.modal-btns { display:flex; gap:10px; justify-content: flex-end; }