:host {
  display: block;
}

.container {
  padding: 16px;
  background: #fafafa;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 8px;
}

.input-row {
  display: flex;
  gap: 8px;
}

.input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  font-family: Menlo, Monaco, 'Courier New', monospace;
}

.input:focus {
  outline: none;
  border-color: #8B7355;
  box-shadow: 0 0 0 2px rgba(139, 115, 85, 0.2);
}

.input.has-key {
  background: #f0fdf4;
  border-color: #86efac;
}

.save-button {
  padding: 10px 16px;
  background: #8B7355;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.save-button:hover {
  background: #7a6349;
}

.save-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.clear-button {
  padding: 10px 16px;
  background: transparent;
  color: #6b7280;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
}

.clear-button:hover {
  background: #f3f4f6;
}

.status {
  margin-top: 8px;
  font-size: 12px;
  color: #6b7280;
}

.status.saved {
  color: #059669;
}

.help-text {
  margin-top: 8px;
  font-size: 12px;
  color: #6b7280;
}

.help-text a {
  color: #8B7355;
}
