#modal-root {
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

.modal-overlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(35, 57, 93, 0.09);
  backdrop-filter: blur(8px);
  pointer-events: all;
}

.modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #f9fbff;
  border-radius: 14px;
  min-width: 340px;
  max-width: 90vw;
  max-height: 85vh;
  box-shadow: 0 12px 40px rgba(62, 130, 227, 0.16);
  padding: 32px;
  pointer-events: all;
  animation: modalIn 0.25s ease-out;
  color: #23395d;
  font-family: 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  overflow-y: auto;
}

/* 电脑端弹窗尺寸优化 */
@media (min-width: 768px) {
  .modal {
    min-width: 480px;
    max-width: 600px;
    width: auto;
    max-height: 80vh;
    padding: 28px 32px;
  }
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: translate(-50%, -55%);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

.modal-close {
  position: absolute;
  right: 20px;
  top: 16px;
  background: none;
  border: none;
  font-size: 1.6em;
  cursor: pointer;
  color: #4682e4;
  transition: color 0.2s;
}

.modal-close:hover {
  color: #2561b0;
}

.modal h3 {
  color: #4682e4;
  font-size: 1.4em;
  font-weight: 700;
  margin: 0 0 18px 0;
  padding-bottom: 10px;
  border-bottom: 1.5px solid #e3eaf5;
}

.modal h4 {
  color: #4682e4;
  font-size: 1.1em;
  font-weight: 600;
  margin: 16px 0 10px 0;
}

.modal input,
.modal select,
.modal textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: 1em;
  border: 1px solid #dbeafe;
  border-radius: 6px;
  margin-bottom: 12px;
  background: #fff;
  color: #23395d;
  font-family: inherit;
}

.modal input:focus,
.modal select:focus,
.modal textarea:focus {
  outline: none;
  border-color: #4682e4;
  box-shadow: 0 0 0 3px rgba(80, 167, 234, 0.08);
}

.modal button {
  background: #4682e4;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 18px;
  margin-right: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95em;
  transition: background 0.2s;
}

.modal button:hover {
  background: #2561b0;
}

.modal button.secondary {
  background: #eaf4fb;
  color: #4682e4;
  border: 1px solid #4682e4;
}

.modal button.secondary:hover {
  background: #f3f8ff;
}

.modal ul,
.modal ol {
  margin: 12px 0;
  padding-left: 24px;
  line-height: 1.6;
}

.modal li {
  margin-bottom: 8px;
  color: #23395d;
}

.modal .modal-result {
  padding: 14px;
  border-radius: 6px;
  margin-top: 14px;
  font-weight: 500;
}

.modal .result-success {
  background: #d1fae5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

.modal .result-error {
  background: #fee2e2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.modal .result-info {
  background: #eaf4fb;
  color: #4682e4;
  border: 1px solid #bcdcfb;
}

.modal .result-warning {
  background: #fef3c7;
  color: #d97706;
  border: 1px solid #fcd34d;
}

.modal table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
}

.modal table th {
  background: #f3f8ff;
  padding: 10px;
  text-align: left;
  font-weight: 600;
  border: 1px solid #e3eaf5;
  color: #4682e4;
}

.modal table td {
  padding: 10px;
  border: 1px solid #e3eaf5;
  color: #23395d;
}

@media (max-width: 600px) {
  .modal {
    min-width: 90vw;
    padding: 20px;
  }

  .modal h3 {
    font-size: 1.2em;
  }

  .modal button {
    width: 100%;
    margin-right: 0;
    margin-bottom: 8px;
  }
}