body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
  background-color: #f5f5f5;
}

a {
  color: #00B7FF;
}

#socket-demo {
  max-width: 800px;
  margin: 20px auto;
  background: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

#connection-status, #transport-info {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 5px;
  margin: 10px 0;
}

#status {
  font-weight: bold;
  color: #dc3545;
}

#status:contains("Connected") {
  color: #28a745;
}

#transport {
  font-weight: bold;
  color: #007bff;
}

#messages {
  margin: 20px 0;
}

#message-list {
  max-height: 300px;
  overflow-y: auto;
  background: #f8f9fa;
  padding: 15px;
  border-radius: 5px;
  border: 1px solid #dee2e6;
}

#message-list li {
  margin: 5px 0;
  padding: 5px;
  background: white;
  border-radius: 3px;
  border-left: 3px solid #007bff;
}

#controls, #form {
  margin: 15px 0;
}

button {
  background: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  margin: 5px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
}

button:hover {
  background: #0056b3;
}

button:disabled {
  background: #6c757d;
  cursor: not-allowed;
}

input {
  padding: 10px;
  margin: 5px;
  border: 1px solid #ced4da;
  border-radius: 5px;
  font-size: 14px;
}

input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
}