.modal {
  display: none; position: fixed; inset: 0; z-index: 10; background: var(--overlay);
  align-items: center; justify-content: center;
}
.modal.show { display: flex; }
.modal-box {
  width: min(380px, 92vw); background: var(--panel); border-radius: 16px; padding: 24px;
  text-align: center; box-shadow: var(--shadow-lg); animation: modal-pop .18s ease-out;
}
@keyframes modal-pop { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.modal-box h2 { margin: 0 0 4px; font-size: 17px; }
.modal-box .field { text-align: left; margin: 14px 0 0; }
.modal-box .field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.modal-box .field input {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: #f7f9fc;
}
.modal-box .field input:focus { outline: none; border-color: var(--blue); background: #fff; }

.qr-status-icon { width: 44px; height: 44px; border-radius: 50%; margin: 10px auto 0; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.qr-status-icon.pending { background: #eaf1ff; color: var(--blue); animation: spin 1.4s linear infinite; }
.qr-status-icon.confirmed { background: #daf5ea; color: #087a4e; }
.qr-status-icon.error { background: #ffe3e8; color: #b42342; animation: shake .4s ease; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

.modal-box img.qr-image { width: 220px; max-width: 100%; background: #fff; padding: 8px; margin: 14px 0; border-radius: 8px; border: 1px solid var(--line); }
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }