body {
  font-family: 'Inter', sans-serif;
  background: #f5f5f5;
  color: #111;
  margin: 0;
  padding: 2rem;
}

.main-input {
  width: 100%;
  padding: 1rem;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  font-family: inherit;
  font-size: 1rem;
  background: #fff;
  color: inherit;
  box-sizing: border-box;
  transition: border-color 0.2s ease, outline 0.2s ease, box-shadow 0.2s ease;
}

.main-input:focus {
  outline: 2px solid #111;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.05);
}

.status-bar {
  font-size: 0.9rem;
  margin: 0;
  transition: color 0.2s ease;
}

.status-bar[data-mode="success"] {
  color: #0a7a34;
}

.status-bar[data-mode="error"] {
  color: #b00020;
}

.status-bar[data-mode="pending"] {
  color: #b35c00;
}

.status-bar[data-mode="offline"] {
  color: #666;
}