/* ============================================================
   MODAL
   ============================================================ */
.modal-bg {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(15,23,42,0.45); backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center;
}
.modal-bg.open { display: flex; }

.modal {
  background: var(--white); border: 1px solid var(--border-200);
  border-radius: var(--radius-lg); padding: 36px;
  max-width: 540px; width: 90%;
  box-shadow: var(--shadow-xl); animation: mIn 0.3s ease;
}
@keyframes mIn {
  from { opacity: 0; transform: scale(0.96) translateY(16px); }
  to { opacity: 1; transform: none; }
}

.modal-x {
  float: right; background: none; border: none;
  font-size: 22px; color: var(--text-400); cursor: pointer; transition: 0.2s;
}
.modal-x:hover { color: var(--text-900); }

.modal h3 { font-size: 18px; font-weight: 700; color: var(--text-900); margin-bottom: 8px; }
.modal p { font-size: 14px; color: var(--text-500); line-height: 1.7; margin-bottom: 18px; }

.modal-vis {
  width: 100%; height: 180px; border-radius: var(--radius-sm);
  background: var(--bg-section-alt); border: 1px solid var(--border-200);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px;
}
.modal-vis .ring {
  width: 56px; height: 56px; border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--primary-600); border-right-color: var(--indigo-500);
  animation: spin 1s linear infinite;
}
.modal-vis span {
  font-size: 11px; font-weight: 700; color: var(--text-400);
  letter-spacing: 0.08em; text-transform: uppercase;
}