:root {
  --navy-900: #0b1322;
  --navy-800: #111c30;
  --line: #243551;
  --line-subtle: #1c2940;
  --ink-100: #eaf2fb;
  --ink-300: #c2d0e4;
  --radius-lg: 14px;
  --shadow-panel: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 14px 30px -18px rgba(0, 0, 0, 0.7);
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(7, 11, 20, 0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.modal.hidden {
  display: none;
}

.modal-content {
  background: linear-gradient(180deg, var(--navy-800), var(--navy-900));
  border: 1px solid var(--line);
  padding: 28px 30px;
  border-radius: var(--radius-lg);
  max-height: 90vh;
  max-width: 90vw;
  overflow-y: auto;
  width: 700px;
  box-shadow: var(--shadow-panel);
  color: var(--ink-100);
  font-family: var(--font-body);
}

.modal-content h2 {
  font-family: var(--font-display);
  font-weight: 600;
}

.section {
  margin-bottom: 20px;
}

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

table {
  width: 100%;
  border-collapse: collapse;
}

table th,
table td {
  border: 1px solid var(--line-subtle);
  padding: 8px;
  color: var(--ink-300);
  text-align: left;
}

table thead th {
  color: var(--ink-100);
  font-weight: 600;
}