.environment-switcher {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  align-items: center;
  gap: 3px;
  margin: 5px 0 6px;
  padding: 3px;
  border: 1px solid rgba(109, 145, 199, .55);
  border-radius: 7px;
  background: #07101f;
}

.environment-label {
  padding: 0 5px;
  color: #8ea7cc;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
}

.environment-option {
  min-height: 22px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: #8ea7cc;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}

.environment-option.active[data-environment="TEST"] {
  border-color: #e7ad38;
  background: rgba(231, 173, 56, .18);
  color: #ffd986;
}

.environment-option.active[data-environment="REAL"] {
  border-color: #4d9cff;
  background: rgba(77, 156, 255, .2);
  color: #a9d0ff;
}

.environment-summary {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #8ea7cc;
  font-size: 10px;
}

.environment-summary strong {
  color: #eaf2ff;
}

.environment-empty {
  min-height: calc(100vh - 20px);
  display: grid;
  place-items: center;
}

.environment-empty-card {
  width: min(620px, calc(100vw - 40px));
  padding: 24px;
  border: 1px solid rgba(231, 173, 56, .65);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(14, 29, 50, .98), rgba(7, 15, 28, .98));
  box-shadow: 0 20px 55px rgba(0, 0, 0, .3);
}

.environment-empty-card h2 {
  margin: 8px 0 6px;
  color: #f5f8ff;
}

.environment-empty-card p {
  margin: 4px 0;
  color: #9eb3d2;
}

.environment-empty-card code {
  color: #ffd986;
}

.r2-preview-link {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 7px;
  border: 1px solid #4d9cff;
  border-radius: 5px;
  color: #a9d0ff;
  text-decoration: none;
  font-size: 10px;
  font-weight: 800;
}